/* ==========================================================================
   upclients · Unterseiten — gemeinsame Ergänzungen zu neu.css
   neu.css liefert Farben, Schrift, Header, Footer, Knöpfe, Glas, Nova-Kugel,
   Feierabend-Szene. Hier stehen nur Bausteine, die mehrere Unterseiten teilen.
   ========================================================================== */

main{position:relative}
section[data-sky]{position:relative}

/* Kleine Kennzeichen (Plan, Status) */
.s-chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:var(--i100);color:var(--i800);white-space:nowrap}
.s-chip--ok{background:var(--ok-soft);color:var(--ok)}
.s-chip--p{background:var(--p100);color:var(--p800)}
.s-chip--live{background:var(--ok-soft);color:var(--ok)}
.s-chip--live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulseDot 1.6s ease-in-out infinite}

.tagpill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--i100);color:var(--i800);white-space:nowrap}

/* ==========================================================================
   Glasstein-Symbol (.gi) — Modul-Glyphe auf gläsernem Stein
   Dunkle Haut (Standard) für Himmel und Glaskarten, .gi--light für weisse Karten.
   Markup: <span class="gi"><svg class="gi__g"><use href="#i-offerten"/></svg></span>
   Grösse über --s. Zustand «aktiv»: Klasse .is-on am Stein oder am Elternteil .fx-node.
   ========================================================================== */
.gi{--s:88px;position:relative;flex:none;display:block;width:var(--s);height:var(--s);border-radius:31%;isolation:isolate;
  background:
    radial-gradient(90% 70% at 50% 114%,rgba(154,190,255,.62),rgba(154,190,255,0) 62%),
    linear-gradient(158deg,rgba(214,228,255,.36) 0%,rgba(98,144,226,.2) 34%,rgba(24,46,102,.52) 100%),
    rgba(12,24,54,.6);
  box-shadow:
    inset 0 0 0 1px rgba(197,218,255,.3),
    inset 0 2px 1px rgba(255,255,255,.5),
    inset 0 -12px 20px -8px rgba(121,164,242,.55),
    0 22px 30px -16px rgba(2,8,26,.85);
  transition:transform .55s var(--spring),box-shadow .5s,background .5s}
/* Lichtreflex oben links */
.gi::before{content:"";position:absolute;left:11%;top:6%;width:56%;height:28%;border-radius:50%/62%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.04));transform:rotate(-12deg);pointer-events:none;z-index:1}
/* Randlicht (Verlaufsrand) */
.gi::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from 200deg,rgba(255,255,255,.9),rgba(255,255,255,0) 26%,rgba(154,190,255,.4) 52%,rgba(255,255,255,0) 74%,rgba(255,255,255,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.gi__g{position:absolute;inset:0;margin:auto;z-index:3;width:50%;height:50%;fill:none;stroke:url(#gGlyph);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(154,190,255,.7));transition:filter .4s}
/* aktiv: heller Stein, weisses Symbol, Leuchten */
.is-on>.gi,.gi.is-on{transform:scale(1.14);
  background:
    radial-gradient(90% 70% at 50% 114%,rgba(197,218,255,.85),rgba(154,190,255,0) 64%),
    linear-gradient(158deg,rgba(232,240,255,.5) 0%,rgba(121,164,242,.34) 36%,rgba(40,74,150,.56) 100%),
    rgba(20,38,84,.55);
  box-shadow:
    inset 0 0 0 1px rgba(226,236,255,.55),
    inset 0 2px 1px rgba(255,255,255,.7),
    inset 0 -12px 20px -8px rgba(154,190,255,.75),
    0 0 42px 6px rgba(121,164,242,.5),
    0 22px 30px -16px rgba(2,8,26,.85)}
.is-on>.gi .gi__g,.gi.is-on .gi__g{stroke:url(#gGlyphOn);filter:drop-shadow(0 0 8px rgba(255,255,255,.85))}

/* helle Haut für weisse Karten */
.gi--light{
  background:
    radial-gradient(90% 70% at 50% 116%,rgba(154,190,255,.55),rgba(154,190,255,0) 62%),
    linear-gradient(158deg,#FFFFFF 0%,#EDF3FF 46%,#CDDFFF 100%);
  box-shadow:
    inset 0 0 0 1px rgba(68,107,180,.22),
    inset 0 2px 1px #fff,
    inset 0 -10px 16px -8px rgba(121,164,242,.6),
    0 14px 22px -14px rgba(32,59,110,.6)}
.gi--light::before{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
.gi--light::after{background:conic-gradient(from 200deg,#fff,rgba(255,255,255,0) 26%,rgba(68,107,180,.3) 52%,rgba(255,255,255,0) 74%,rgba(255,255,255,.95))}
.gi--light .gi__g{stroke:url(#gGlyphL);filter:drop-shadow(0 2px 3px rgba(68,107,180,.28))}

.gi__g{width:54%;height:54%;stroke-width:1.75}
.gi::before{opacity:.8}

.s-chip--warn{background:var(--warn-soft);color:var(--warn)}
.s-chip--bad{background:var(--bad-soft);color:var(--bad)}

/* Kürzel-Kreis (Person) */
.av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--p700);color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center;letter-spacing:.02em}
.av--2{background:#4E8F79}.av--3{background:#B0763A}

/* =====================================================================
   Fragen
   ===================================================================== */
.s-faq{position:relative;color:#fff;padding:clamp(40px,6vh,70px) 0 clamp(100px,14vh,160px)}
.s-faq__wrap{max-width:900px}
.s-qs{display:grid;gap:12px;align-content:start;margin-top:clamp(28px,4vh,44px)}
.s-q{border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),rgba(14,26,58,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .4s}
.s-q h3{margin:0}
.s-q button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;text-align:left;font-size:clamp(16.5px,1.4vw,19px);font-weight:700;letter-spacing:-.01em;color:#fff}
.s-q button i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .35s,transform .45s var(--ease);will-change:transform}
.s-q button i::before,.s-q button i::after{content:"";position:absolute;left:8px;top:13px;width:12px;height:2px;border-radius:2px;background:#fff;transition:transform .45s var(--ease),opacity .3s}
.s-q button i::after{transform:rotate(90deg)}
.s-q.is-open button i{background:var(--p700);transform:rotate(180deg)}
.s-q.is-open button i::after{transform:rotate(90deg) scaleX(0);opacity:0}
.s-q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.s-q__a>p{overflow:hidden;min-height:0;padding:0 24px;font-size:16px;line-height:1.65;color:var(--p200);max-width:64ch}
.s-q.is-open .s-q__a{grid-template-rows:1fr}
.s-q.is-open .s-q__a>p{padding-bottom:22px}
.js .s-q__a>p{padding-top:0}

/* Schluss-Abschnitt (Feierabend): Titel in zwei Zeilen */
#cta .finale__title{max-width:none;font-size:clamp(40px,6vw,96px)}
#cta .moon{top:7%;right:6%}
#cta .finale__title .glow{display:block}

/* Zusammenfluss-Linien (von SEITEN.flowLines gezeichnet) */
.fl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fl-svg path{fill:none;stroke:rgba(154,190,255,.6);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:2 7;animation:flDash 1.4s linear infinite}
@keyframes flDash{to{stroke-dashoffset:-27}}
@media (prefers-reduced-motion:reduce){.fl-svg path{animation:none}}
/* Senkrechter Verbinder für die gestapelte (Handy-)Ansicht */
.fl-v{display:none}
@media (max-width:760px){
  .fl-v{display:block;position:relative;justify-self:center;width:2px;height:34px;margin:2px 0;border-radius:2px;background:repeating-linear-gradient(180deg,rgba(154,190,255,.75) 0 5px,transparent 5px 10px);background-size:2px 10px;animation:flDashV 1s linear infinite}
  .fl-v::after{content:"";position:absolute;left:50%;bottom:-3px;width:9px;height:9px;margin-left:-5px;border-right:2px solid rgba(154,190,255,.85);border-bottom:2px solid rgba(154,190,255,.85);transform:rotate(45deg)}
}
@keyframes flDashV{to{background-position:0 10px}}

/* Plus-/Minus-Knöpfe: Zeichen als Striche zeichnen, nicht als Schrift — sitzt immer exakt in der Mitte des Kreises */
main .zt-num button,main .rp-num button,main .rp-step button{position:relative;font-size:0;line-height:0;padding:0}
main .zt-num button::before,main .rp-num button::before,main .rp-step button::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:currentColor}
main .zt-num button:not([data-d^="-"])::after,main .rp-num button:not([data-d^="-"])::after,main .rp-step button:not([data-d^="-"])::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:11px;margin:-5.5px 0 0 -1px;border-radius:2px;background:currentColor}

/* Hero-Schein: läuft nach unten weich aus, statt am Rand des Abschnitts abgeschnitten zu werden (sichtbare Kante zum nächsten Abschnitt) */
#hero::before{bottom:0;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,transparent 100%)}

/* Verlaufstext (background-clip:text) schneidet Unterlängen ab, sobald die Zeile enger als die Schrift ist (g, p, y, j) */
main h1 .glow,#cta .finale__title .glow{padding-bottom:.16em;margin-bottom:-.16em}
.fx-title .line>span{padding-bottom:.14em;margin-bottom:-.14em}

/* Zusammenfluss: Rahmen blendet schnell ein, die Karten laufen ohne lange Wartezeit hinterher */
.js .fn-flow[data-reveal],.js .kv-flow[data-reveal],.js .rp-flow[data-reveal],.js .tm-flow[data-reveal],.js .zt-flow[data-reveal],.js .ag-conv[data-reveal]{transition-duration:.45s;transition-delay:0s}

/* =====================================================================
   Formularkarte (weisse Karte auf dunklem Himmel) — Kontakt, Über uns
   Nachrichten-Formulare öffnen das E-Mail-Programm (kontakt/kt.js, Attribut data-mailform).
   ===================================================================== */
.s-fcard{position:relative;padding:clamp(24px,2.8vw,38px);border-radius:26px;background:#fff;color:var(--i950);box-shadow:0 44px 90px -34px rgba(2,8,26,.8),inset 0 0 0 1px rgba(255,255,255,.7)}
.s-fcard [hidden]{display:none !important}
.s-fcard__t{font-size:24px;font-weight:800;letter-spacing:-.025em}
.s-fcard__s{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--i700)}
.s-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.s-f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--i800)}
.s-f--wide{grid-column:1/-1}
.s-f input,.s-f select,.s-f textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--i200);border-radius:10px;background:#fff;font:inherit;font-size:15px;font-weight:500;color:var(--i950);outline:none;transition:border-color .2s,box-shadow .2s}
.s-f textarea{height:auto;min-height:118px;padding:12px 14px;line-height:1.55;resize:vertical}
.s-f input::placeholder,.s-f textarea::placeholder{color:var(--i400)}
.s-f input:hover,.s-f select:hover,.s-f textarea:hover{border-color:var(--i300)}
.s-f input:focus,.s-f select:focus,.s-f textarea:focus{border-color:var(--p700);box-shadow:0 0 0 3px rgba(68,107,180,.22)}
.s-f select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23656E7D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
.s-submit{--h:52px;width:100%;margin-top:20px;font-size:16px}
.s-fpriv{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--i700);text-align:center}
.s-fpriv a{font-weight:700;color:var(--p700);text-decoration:underline;text-underline-offset:2px}
.s-fpriv a:hover{color:var(--p900)}
.s-fdone{padding:clamp(18px,3vw,34px) 0;text-align:center}
.s-fdone__ico{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--p100);box-shadow:inset 0 0 0 1px rgba(68,107,180,.22)}
.s-fdone__ico svg{width:34px;height:34px;fill:none;stroke:var(--p700);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.s-fdone h2{margin-top:22px;font-size:25px;font-weight:800;letter-spacing:-.03em;outline:none}
.s-fdone p{margin:14px auto 0;max-width:40ch;font-size:16px;line-height:1.7;color:var(--i800)}
.s-fdone a:not(.s-fdone__btn){font-weight:800;color:var(--p700);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.s-fdone__btn{display:inline-block;margin-top:22px;font-size:14.5px;font-weight:700;color:var(--p700);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.s-fields{grid-template-columns:minmax(0,1fr)}.s-fcard{border-radius:22px}}
/* Übergänge: Wolkenbank (dunkel → hell) und Abendlicht mit Bergkamm (hell → dunkel), von seiten.js gebaut */
.s-wx{position:absolute;left:0;top:0;width:100%;height:0;z-index:-1;pointer-events:none}
.s-wx__band{position:absolute;left:0;width:100%;overflow:hidden}
/* oben und unten weich auslaufen: der Himmel hat je Fensterhöhe einen anderen Ton, eine feste Abschlussfarbe gäbe eine Kante */
.s-wx__band--wolken{-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 52%,rgba(0,0,0,.55) 74%,transparent);mask-image:linear-gradient(180deg,transparent,#000 26%,#000 52%,rgba(0,0,0,.55) 74%,transparent)}
.s-wx__l{position:absolute;top:0;left:-5%;width:110%;height:100%;will-change:transform}
.s-wx__l--0{animation:wxDrift 48s ease-in-out infinite alternate}
.s-wx__l--1{animation:wxDrift 36s ease-in-out infinite alternate-reverse}
@keyframes wxDrift{from{translate:-1.6% 0}to{translate:1.6% 0}}
.rm .s-wx__l{animation:none}
.s-wx__band--abend{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.s-wx__glow{position:absolute;inset:0;background:radial-gradient(85% 40% at 50% var(--gy,60%),rgba(255,178,140,.4),rgba(238,140,152,.17) 45%,rgba(150,140,210,0) 74%)}
.s-wx__alps{position:absolute;left:0;width:100%;height:auto;aspect-ratio:1600/262}
/* Ratgeber: Höhenlinien über die ganze Seite (seiten.js), Textspalte frei */
.s-linien{position:absolute;left:0;top:0;width:100%;overflow:hidden;z-index:-1;pointer-events:none}
.s-linien svg{position:absolute;display:block;overflow:visible;fill:none;stroke-width:.8;stroke-opacity:.16}
.s-linien .z{stroke-width:1.1;stroke-opacity:.26}
@media (max-width:760px){.s-linien svg{stroke-opacity:.12}.s-linien .z{stroke-opacity:.2}}