/*! fs-redesign.css — First Hausservice „Praezisionsinstrument 2.0"
 *  Premium-Schicht ueber styles.css: Hero-Leitstand, die Weiche, gepinnte
 *  Anfahrts-Karte, Notfall-Terminal, Wasserlinien-Signatur. Nur Transform/
 *  Opacity. Rot (Notfall) bewegt sich nie von selbst. prefers-reduced-motion
 *  faellt auf einen vollstaendig statischen, lesbaren Zustand zurueck.
 *  Schweizer Orthografie, kein Eszett. */

/* =============================================================== *
 * 0. Scroll-Fortschritt: haarfeine Kupferlinie ganz oben
 * =============================================================== */
.fs-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:500;
  background:linear-gradient(90deg,var(--copper),var(--copper-lite));
  transform:scaleX(0);transform-origin:left;pointer-events:none}

/* =============================================================== *
 * 1. HERO „Das Instrument erwacht" — Nachtpetrol-Leitstand
 * =============================================================== */
.hero.hero--night{position:relative;background:
  radial-gradient(120% 90% at 85% -10%,rgba(201,111,46,.14),transparent 55%),
  linear-gradient(185deg,var(--petrol-night) 0%,#0c2c3a 60%,var(--petrol) 140%);
  color:#E7F0F3;overflow:hidden}
.hero--night .eyebrow{color:var(--copper-lite)}
.hero--night h1{color:#fff}
.hero--night h1 .accent{color:var(--copper-lite)}
.hero--night .sub{color:#AFC4CC}
/* Leitstand-Backdrop: grosses Rohrsystem, zeichnet sich 1x selbst */
.hero--night .iso-backdrop{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.5}
.hero--night .iso-backdrop path{fill:none;stroke:#2d5566;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.hero--night .iso-backdrop path.cu{stroke:var(--copper)}
.hero--night .iso-backdrop circle{fill:none;stroke:#2d5566;stroke-width:1.4}
.hero--night .iso-backdrop circle.cu{stroke:var(--copper);fill:var(--petrol-night)}
/* Self-draw: Pfade/Fittinge erscheinen ueber dashoffset, laeuft genau 1x */
.js .hero--night .iso-backdrop .draw{stroke-dasharray:var(--len,900);
  stroke-dashoffset:var(--len,900);animation:fsDraw 1.3s cubic-bezier(.33,.72,.25,1) forwards}
.js .hero--night .iso-backdrop .draw.d1{animation-delay:.15s}
.js .hero--night .iso-backdrop .draw.d2{animation-delay:.35s}
.js .hero--night .iso-backdrop .draw.d3{animation-delay:.55s}
.js .hero--night .iso-backdrop .fit{opacity:0;animation:fsFit .5s ease forwards}
.js .hero--night .iso-backdrop .fit.f1{animation-delay:1.0s}
.js .hero--night .iso-backdrop .fit.f2{animation-delay:1.15s}
.js .hero--night .iso-backdrop .fit.f3{animation-delay:1.3s}
@keyframes fsDraw{to{stroke-dashoffset:0}}
@keyframes fsFit{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* Leitstand-Status-Modul (rechts im Hero) */
.leitstand{display:inline-flex;flex-direction:column;gap:.9rem;
  background:rgba(8,28,38,.62);border:1px solid rgba(201,111,46,.32);
  border-radius:14px;padding:1.1rem 1.25rem;backdrop-filter:blur(6px);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.leitstand .ls-row{display:flex;align-items:center;gap:.65rem;
  font-family:var(--fm);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.leitstand .ls-state{color:#8FE6B0;font-weight:600}
.leitstand .ls-dot{width:9px;height:9px;border-radius:50%;background:#43D787;position:relative;flex:none}
.leitstand .ls-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:#43D787;animation:pulse 2.2s ease-out infinite}
.leitstand .ls-num{font-family:var(--fm);font-size:1.45rem;color:#fff;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:.5rem}
.leitstand .ls-sep{height:1px;background:rgba(255,255,255,.12)}
.leitstand .ls-meta{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:#7FA3AF}
.leitstand .ls-btn{margin-top:.2rem}

/* Hero-Figur im Nachtmodus: Kupferrahmen betont */
.hero--night .figframe{box-shadow:0 30px 70px rgba(0,0,0,.45)}
.hero--night .figframe .cap{background:rgba(8,28,38,.8);color:#CFE0E6}

/* =============================================================== *
 * 2. DIE WEICHE — Notfall (rot) vs. Projekt (petrol)
 * =============================================================== */
.weiche{background:var(--paper)}
.weiche .shead{margin-bottom:1.6rem}
.weiche-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gleis{position:relative;border-radius:16px;padding:2rem 1.8rem;overflow:hidden;
  border:1px solid var(--hair);background:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,opacity .5s}
.gleis h3{font-size:1.5rem;margin-bottom:.4rem}
.gleis p{color:var(--mist);margin:0 0 1.3rem}
.gleis .gleis-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem}
.gleis .gleis-ic svg{width:24px;height:24px;fill:none;stroke-width:1.7}
.gleis--notfall{border-color:rgba(214,64,46,.28)}
.gleis--notfall .gleis-ic{background:rgba(214,64,46,.1)}
.gleis--notfall .gleis-ic svg{stroke:var(--signal)}
.gleis--notfall h3{color:var(--signal-ink)}
.gleis--projekt .gleis-ic{background:rgba(15,58,77,.08)}
.gleis--projekt .gleis-ic svg{stroke:var(--petrol)}
/* Tilt/Dim-Verhalten per Hover: das nicht gewaehlte Gleis tritt zurueck */
@media (hover:hover){
  .weiche-grid:hover .gleis{opacity:.72}
  .weiche-grid:hover .gleis:hover{opacity:1;transform:translateY(-4px);
    box-shadow:0 22px 50px rgba(15,58,77,.14)}
}
.gleis .gleis-list{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem}
.gleis .gleis-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;color:var(--ink)}
.gleis .gleis-list svg{width:18px;height:18px;flex:none;margin-top:3px;fill:none;stroke-width:2}
.gleis--notfall .gleis-list svg{stroke:var(--signal)}
.gleis--projekt .gleis-list svg{stroke:var(--copper)}

/* =============================================================== *
 * 3. PINNED Notfall-Ablauf mit Zuger Anfahrts-Karte + Minutenzaehler
 * =============================================================== */
.anfahrt{background:var(--petrol-night);color:#CBD9DF;position:relative;overflow:hidden}
.anfahrt .shead h2{color:#fff}
.anfahrt .eyebrow{color:var(--copper-lite)}
.anfahrt-stage{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-top:1.4rem}
.anfahrt-steps{display:grid;gap:14px}
.anfahrt-step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:1.05rem 1.2rem;
  background:rgba(255,255,255,.03);transition:border-color .4s,background .4s}
.anfahrt-step .as-no{font-family:var(--fm);font-size:.78rem;letter-spacing:.1em;color:var(--copper-lite);
  border:1px solid rgba(201,111,46,.4);border-radius:8px;padding:.3rem .5rem;min-width:2.3rem;text-align:center}
.anfahrt-step h3{color:#fff;font-size:1.1rem;margin:.1rem 0 .25rem}
.anfahrt-step p{margin:0;color:#9FB6BE;font-size:.92rem}
.anfahrt-step.is-active{border-color:rgba(201,111,46,.6);background:rgba(201,111,46,.08)}
/* Karten-Panel */
.anfahrt-map{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0b2531;padding:1.2rem}
.anfahrt-map svg{width:100%;height:auto;display:block}
.anfahrt-map .region{fill:rgba(62,107,126,.14);stroke:rgba(143,169,179,.5);stroke-width:1.2}
.anfahrt-map .route{fill:none;stroke:var(--copper);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:var(--rlen,400);stroke-dashoffset:var(--rlen,400)}
.anfahrt-map .hub{fill:var(--copper);stroke:#fff;stroke-width:1.5}
.anfahrt-map .dest{fill:var(--signal);stroke:#fff;stroke-width:1.5;opacity:0}
.anfahrt-map .dest.lit{opacity:1}
.anfahrt-minute{position:absolute;right:1.2rem;top:1.2rem;text-align:right}
.anfahrt-minute .mnum{font-family:var(--fm);font-size:2.6rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em}
.anfahrt-minute .mcap{font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-lite)}
.anfahrt-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1rem;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#88A1AA}
.anfahrt-legend b{color:#CBD9DF;font-weight:600}

/* =============================================================== *
 * 4. NOTFALL-PROBE — Terminal-Sequenz am roten Button (3s)
 * =============================================================== */
.probe{display:inline-flex;flex-direction:column;gap:.5rem}
.probe-term{font-family:var(--fm);font-size:.78rem;line-height:1.5;color:#8FE6B0;
  background:#07222e;border:1px solid rgba(143,230,176,.22);border-radius:10px;
  padding:.7rem .9rem;min-height:2.4rem;max-width:320px}
.probe-term .pl{color:#5f8893}
.probe-term .ok{color:#8FE6B0}
.probe-term .cursor{display:inline-block;width:.6ch;background:#8FE6B0;animation:fsBlink 1s steps(1) infinite}
@keyframes fsBlink{50%{opacity:0}}

/* =============================================================== *
 * 5. Mikro-Interaktionen
 * =============================================================== */
.copyable{cursor:pointer;position:relative}
.copyable.copied::after{content:"kopiert";position:absolute;left:50%;top:-1.5rem;transform:translateX(-50%);
  font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--petrol);color:#fff;padding:.2rem .5rem;border-radius:5px;white-space:nowrap}
/* Formular-Fokus: Kupfer-Unterstrich */
.formcard input:focus,.formcard textarea:focus{outline:none;border-color:var(--copper);
  box-shadow:0 2px 0 0 var(--copper)}

/* Sticky-Call-Bar: Pikett-Status integriert */
.callbar .cb-state{display:none}
@media (min-width:721px){
  .callbar{gap:.8rem}
  .callbar .cb-state{display:inline-flex;align-items:center;gap:.5rem;
    font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--petrol);margin-right:auto;padding-left:.4rem}
  .callbar .cb-state .ls-dot{width:8px;height:8px}
}

/* =============================================================== *
 * 6. Responsiv
 * =============================================================== */
@media (max-width:860px){
  .weiche-grid{grid-template-columns:1fr}
  .anfahrt-stage{grid-template-columns:1fr;gap:24px}
  .anfahrt-minute{position:static;text-align:left;margin-bottom:.6rem}
}

/* prefers-reduced-motion: keine Selbstzeichnung, alles sofort sichtbar */
@media (prefers-reduced-motion:reduce){
  .hero--night .iso-backdrop .draw{stroke-dashoffset:0!important;animation:none!important}
  .hero--night .iso-backdrop .fit{opacity:1!important;animation:none!important}
  .anfahrt-map .route{stroke-dashoffset:0!important}
  .anfahrt-map .dest{opacity:1!important}
  .fs-progress{display:none}
}

/* Sicherheitsnetz: Hero-Inhalt (above the fold) nie durch Scroll-Reveal verstecken */
.hero--night .left [data-tp-reveal],.hero--night .leitstand{opacity:1!important}

/* Dark-Section-Kontrast-Korrekturen */
.hero--night .pricetag{background:rgba(8,28,38,.5);border-color:var(--copper-lite)}
.hero--night .pricetag .amt{color:#fff}
.hero--night .pricetag .cap{color:var(--copper-lite)}
.anfahrt .arealist li{color:#CBD9DF;border-bottom-color:rgba(255,255,255,.14)}

/* =============================================================== *
 * MOBILE-HAERTUNG & FEINSCHLIFF (First Hausservice, mobile-first Prio)
 * =============================================================== */
/* 1. Nie horizontal scrollbar (echt + waehrend Reveal-Transforms) */
html,body{overflow-x:clip}
body{max-width:100%}
img,svg,video{max-width:100%;height:auto}
/* lange deutsche Woerter in Ueberschriften sauber umbrechen, nicht abschneiden */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
/* Reveal-Transforms duerfen nie die Seite verbreitern */
[data-tp-reveal]{max-width:100%}

@media (max-width:640px){
  /* ---- HERO: Botschaft zuerst, zentriert, Leitstand kompakt ---- */
  .hero .grid{gap:22px;padding:26px 0 34px}
  .hero--night .left{order:0;text-align:center}
  .hero--night .right{order:1}
  .hero--night .eyebrow{display:block;margin-bottom:.7rem}
  .hero h1{font-size:clamp(1.95rem,8.2vw,2.7rem);line-height:1.12;margin-bottom:.5rem}
  .hero .sub{font-size:1.02rem;margin:0 auto 1.4rem;max-width:36ch}
  .hero-cta{justify-content:center;gap:.7rem}
  .hero-cta .btn{flex:1 1 auto}
  .hero .pricetag{display:none}            /* redundant: CHF 99 steht in der Trust-Leiste */
  .leitstand{width:100%;margin:0 auto}
  .leitstand .ls-row{justify-content:center}
  .leitstand .ls-num{justify-content:center;font-size:1.55rem}
  .leitstand .ls-meta{text-align:center}
  .leitstand .ls-btn{justify-content:center}
  .hero .figframe{max-width:380px;margin:0 auto}

  /* ---- Abschnitts-Koepfe konsistent zentriert (wie oben) ---- */
  .shead,.weiche .shead,.anfahrt .shead{text-align:center}
  .shead .eyebrow{display:block}

  /* ---- Trust-Leiste: 2 Spalten, zentriert ---- */
  .trust .item{justify-content:flex-start}

  /* ---- Weiche: volle Breite, Buttons gross ---- */
  .weiche-grid{gap:16px}
  .gleis{padding:1.5rem 1.3rem}
  .gleis h3{font-size:1.3rem}

  /* ---- Emergency-Band: zentriert, Terminal volle Breite ---- */
  .emergency .wrap{flex-direction:column;align-items:stretch;text-align:center;gap:1.1rem}
  .emergency .tag{justify-content:center}
  .probe{align-items:stretch}
  .probe-term{max-width:none}
  .emergency .act{display:flex;flex-direction:column;align-items:stretch;gap:.8rem}
  .emergency .act .btn{justify-content:center}
  .emergency .bignum{text-align:center;font-size:1.5rem}

  /* ---- Anfahrt: Karte + Zaehler sauber stapeln ---- */
  .anfahrt-stage{gap:20px}
  .anfahrt-minute{position:static;text-align:center;margin:0 0 .6rem}
  .anfahrt-map{padding:1rem}
  .arealist{columns:2;column-gap:1.2rem}

  /* ---- Prozess-Schritte volle Breite ---- */
  .process .steps{gap:18px}

  /* ---- Sticky-Call-Bar: klar, gross, sicher ueber Safe-Area ---- */
  .callbar .cb-call,.callbar .cb-book{flex:1;justify-content:center;font-size:1rem;padding:.85rem}
}

/* Sehr schmale Geraete (<=360px): Hero-Titel noch etwas kompakter */
@media (max-width:360px){
  .hero h1{font-size:1.85rem}
  .trust .wrap{gap:10px}
}