/* ================= Ablaufseite: pv-ablauf.html =================
   Bewusst eine eigene Datei und nicht in stil.css eingebaut.
   Grund: Eine Aenderung an stil.css zwingt dazu, die Versionskennung
   auf allen Seiten hochzuzaehlen, die die neuen Regeln brauchen.
   Hier betrifft jede Aenderung nur diese eine Seite. */

/* ---- Hero: mehr Luft zwischen Ueberschrift und Unterzeile ----
   Robins Vorgabe vom 18.09.2026: minimal mehr Abstand, damit das
   Layout cleaner wirkt. */
.pv-hero h1{margin-bottom:26px}
.pv-hero .eyebrow{margin-bottom:20px}

/* ---- Skizze: die ganze Strecke auf einen Blick ----------------
   Seit 18.09.2026 nicht mehr eingebunden (die Uebersicht wiederholte
   den Zeitstrahl weiter unten); Regeln bleiben fuer den Fall der
   Wiederverwendung stehen. */
.ab-skizze{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,1fr);gap:0;
}
.ab-st{position:relative;text-align:center;counter-increment:none}
.ab-st:not(:last-child)::after{
  content:"";position:absolute;top:25px;left:50%;width:100%;height:3px;
  background:var(--line);border-radius:2px;z-index:0;
}
.ab-st.hell:not(:last-child)::after{background:rgba(255,255,255,.16)}
.ab-st > a{
  position:relative;z-index:1;display:block;text-decoration:none;color:inherit;
  padding:0 6px;
}
.ab-st-punkt{
  display:grid;place-items:center;width:50px;height:50px;margin:0 auto 12px;
  border-radius:50%;background:#fff;border:3px solid var(--line);
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:.95rem;
  color:var(--muted);line-height:1;
  transition:border-color .3s,color .3s,background .3s,transform .3s;
}
.ab-st.hell .ab-st-punkt{background:var(--ink);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.7)}
.ab-st > a:hover .ab-st-punkt{
  border-color:var(--sonne,#E8A33D);color:var(--sonne,#E8A33D);transform:translateY(-3px);
}
.ab-st-txt{display:block}
.ab-st-txt b{
  display:block;font-family:'Montserrat',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:.76rem;letter-spacing:-.01em;line-height:1.25;
}
.ab-st.hell .ab-st-txt b{color:#fff}
.ab-st-txt i{
  display:block;font-style:normal;font-size:.74rem;color:var(--muted);margin-top:4px;
}
.ab-st.hell .ab-st-txt i{color:rgba(255,255,255,.55)}
@media(max-width:820px){
  .ab-skizze{
    grid-template-columns:repeat(7,132px);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding-bottom:10px;
  }
  .ab-st{scroll-snap-align:center}
  .ab-st-punkt{width:42px;height:42px;font-size:.85rem;border-width:2.5px}
  .ab-st:not(:last-child)::after{top:21px}
}

/* ---- Kennzahlen als klebender Stapel ------------------------
   Gleiches Prinzip wie .stack-card auf der Startseite: Jede Karte
   klebt etwas tiefer als die vorige, sodass beim Scrollen ein
   Faecher entsteht. Farbe bleibt dunkel mit goldener Zahl wie im
   Hero, damit der Abschnitt sichtbar zum Aufmacher gehoert.
   Die Karten standen frueher zu viert im Hero und haben ihn
   ueberladen - hier haben sie Luft. */
.ab-stapel{max-width:820px;margin:0 auto;position:relative;padding-bottom:20px}
.ab-zahl{
  position:sticky;display:flex;align-items:center;gap:30px;
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:40px 44px;margin:0 0 46px;
  box-shadow:0 22px 54px rgba(16,14,24,.20);
  overflow:hidden;
}
.ab-zahl::after{
  content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,163,61,.20),transparent 68%);
}
.ab-zahl b{
  position:relative;z-index:1;flex:0 0 auto;min-width:184px;
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.04em;line-height:1;
  color:var(--sonne,#E8A33D);
}
.ab-zahl span{
  position:relative;z-index:1;
  font-size:1.02rem;color:rgba(255,255,255,.78);line-height:1.55;
}
@media(max-width:640px){
  .ab-zahl{flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px;margin-bottom:26px}
  .ab-zahl b{min-width:0}
  .ab-zahl span{font-size:.95rem}
}

/* ---- Der grosse Zeitstrahl ---------------------------------- */
.ab-tl{position:relative;display:grid;gap:26px;padding-left:104px}
.ab-rail{
  position:absolute;left:33px;top:44px;bottom:44px;width:4px;
  background:var(--line);border-radius:3px;
}
.ab-rail i{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  transform:scaleY(0);transform-origin:top center;will-change:transform;
  background:linear-gradient(180deg,var(--olive),var(--sonne,#E8A33D));border-radius:3px;
}
.ab-phase{position:relative}
.ab-num{
  position:absolute;left:-104px;top:34px;z-index:2;
  width:68px;height:68px;border-radius:50%;background:#fff;border:3px solid var(--line);
  display:grid;place-items:center;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;
  line-height:1;color:var(--muted);
  transition:border-color .4s ease,color .4s ease,box-shadow .4s ease;
}
.ab-phase.on .ab-num{
  border-color:var(--olive);color:var(--olive);box-shadow:0 0 0 8px rgba(116,117,70,.12);
}
.ab-karte{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 34px 30px;
  transition:border-color .45s ease,box-shadow .45s ease;
}
.ab-phase.on .ab-karte{border-color:rgba(116,117,70,.45);box-shadow:0 18px 44px rgba(16,14,24,.09)}
.ab-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:14px}
.ab-kopf h3{margin:0}
.ab-dauer{
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--olive-wash);color:var(--olive-dk);
  border-radius:999px;padding:6px 14px;
  font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:.66rem;letter-spacing:.1em;white-space:nowrap;
}
.ab-dauer svg{width:12px;height:12px;fill:currentColor}
.ab-dauer.sonne{background:rgba(232,163,61,.16);color:#9A6410}
.ab-lead{color:var(--muted);font-size:.98rem;margin-bottom:20px}
.ab-lead strong{color:var(--text)}

/* ---- Wir / Sie nebeneinander ---- */
.ab-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ab-spalte{border-radius:14px;padding:20px 22px}
.ab-spalte.wir{background:var(--olive-wash);border:1px solid rgba(116,117,70,.18)}
.ab-spalte.sie{background:rgba(232,163,61,.09);border:1px solid rgba(232,163,61,.28)}
.ab-spalte h4{
  font-size:.7rem;letter-spacing:.13em;margin:0 0 12px;
  display:flex;align-items:center;gap:.55em;
}
.ab-spalte.wir h4{color:var(--olive-dk)}
.ab-spalte.sie h4{color:#9A6410}
.ab-spalte h4 svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.ab-spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ab-spalte li{
  position:relative;padding-left:23px;font-size:.92rem;line-height:1.5;color:#3A3A36;
}
.ab-spalte li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;
}
.ab-spalte.wir li::before{background:var(--olive)}
.ab-spalte.sie li::before{background:var(--sonne,#E8A33D)}
@media(max-width:720px){.ab-split{grid-template-columns:1fr}}

/* ---- Hervorhebung innerhalb einer Phase ---- */
.ab-merk{
  margin-top:20px;border-left:4px solid var(--sonne,#E8A33D);
  background:#FBF7F0;border-radius:0 12px 12px 0;padding:18px 22px;
}
.ab-merk p{margin:0;font-size:.94rem;line-height:1.55;color:#3A3A36}
.ab-merk p + p{margin-top:.7em}
.ab-merk b{color:var(--ink)}
.ab-merk.gruen{border-left-color:var(--olive);background:var(--olive-wash)}

/* ---- Mini-Ablauf des Montagetags ---- */
.ab-tag{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:0;
}
.ab-tag li{position:relative;padding:0 12px 0 0}
.ab-tag li::before{
  content:"";position:absolute;left:0;top:7px;width:100%;height:3px;
  background:linear-gradient(90deg,var(--olive),rgba(116,117,70,.25));
}
.ab-tag li:last-child::before{background:var(--sonne,#E8A33D)}
.ab-tag li b{
  position:relative;display:block;margin:20px 0 5px;
  font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:.72rem;letter-spacing:-.01em;color:var(--ink);
}
.ab-tag li span{display:block;font-size:.86rem;line-height:1.45;color:var(--muted)}
@media(max-width:600px){
  .ab-tag{grid-template-columns:1fr;gap:14px}
  .ab-tag li{padding:0 0 0 18px}
  .ab-tag li::before{left:0;top:6px;width:3px;height:100%;
    background:linear-gradient(180deg,var(--olive),rgba(116,117,70,.25))}
  .ab-tag li b{margin-top:0}
}

/* ---- Amtsweg-Checkliste (Inbetriebnahme) ---- */
.ab-amt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;margin-top:8px}
.ab-amt-karte{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  display:flex;gap:14px;align-items:flex-start;
}
.ab-amt-haken{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--olive);
  display:grid;place-items:center;margin-top:2px;
}
.ab-amt-haken svg{width:15px;height:15px;fill:#fff}
.ab-amt-karte h4{font-size:.92rem;margin:0 0 6px;letter-spacing:-.015em;text-transform:none}
.ab-amt-karte p{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.ab-amt-karte p em{font-style:normal;color:var(--olive-dk);font-weight:500}

/* ---- Was bei Ihnen bleibt ----
   Benutzt die Aufklapp-Karten .rc aus stil.css, dieselben wie
   "Fuenf Gruende, die den Unterschied machen" auf der Startseite.
   Hier nur die goldene Ziffer, damit die Karten zur Ablaufseite
   gehoeren und nicht wie ein Fremdkoerper wirken. */
.ab-ihr-gitter{margin-top:34px}
.ab-ihr-gitter .rc-num{color:var(--sonne,#E8A33D)}

/* ---- Warum kein Vertreter kommt --------------------------------
   Scrollgesteuert: --p laeuft von 1 auf 0.
   Bei --p:1 steht die weisse Karte allein in der Mitte und die
   dunkle Karte liegt unsichtbar dahinter. Beim Scrollen tritt die
   dunkle Karte aus der weissen heraus und setzt sich daneben.
   Alles laeuft ueber transform und opacity, also ohne Layoutarbeit.
   Voreinstellung ist --p:0 - ohne JavaScript steht damit sofort der
   fertige Zustand da, beide Karten nebeneinander. */
.ab-warum{
  --p:0;
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;
  position:relative;
}
.ab-warum > div{
  border-radius:var(--r);padding:30px 32px;
  will-change:transform,opacity;
}
/* 50 % der eigenen Breite plus die halbe Luecke (20px/2) ergibt genau
   die Mitte des Rasters - deshalb 50% + 10px und nicht nur 50%. */
.ab-warum .dagegen{
  background:#fff;border:1px solid var(--line);z-index:2;
  transform:translateX(calc(var(--p) * (50% + 10px)));
  box-shadow:0 18px 44px rgba(16,14,24,.10);
}
.ab-warum .dafuer{
  background:var(--ink);color:#fff;z-index:1;
  transform:translateX(calc(var(--p) * (-50% - 10px))) scale(calc(1 - .07 * var(--p)));
  opacity:calc(1 - var(--p));
}
@media(max-width:800px){
  /* Einspaltig gibt es kein Nebeneinander, in das etwas hervortreten koennte. */
  .ab-warum{--p:0 !important;grid-template-columns:1fr}
  .ab-warum .dagegen,.ab-warum .dafuer{transform:none;opacity:1}
}

/* ---- Hüpfender Auftritt --------------------------------------
   Kommt mit leichtem Ueberschwung von unten herein statt nur
   einzublenden. Der Ueberschwung steckt in der Zeitkurve
   (.34,1.56,.64,1) - der zweite Wert ueber 1 laesst das Element
   kurz ueber die Endlage hinausschiessen. */
.js .huepf{opacity:0;transform:translateY(46px)}
.js .huepf.da{
  opacity:1;transform:none;
  transition:opacity .4s ease,transform .82s cubic-bezier(.34,1.56,.64,1);
}
@media(prefers-reduced-motion:reduce){
  .js .huepf{opacity:1;transform:none;transition:none}
  .ab-warum{--p:0 !important}
  .ab-warum .dagegen,.ab-warum .dafuer{transform:none;opacity:1}
}
.ab-warum h3{margin-bottom:14px;font-size:1.1rem}
.ab-warum .dafuer h3{color:#fff}
.ab-warum p{font-size:.94rem;line-height:1.6;color:var(--muted);margin-bottom:.9em}
.ab-warum .dafuer p{color:rgba(255,255,255,.76)}
.ab-warum p:last-child{margin-bottom:0}
@media(max-width:800px){.ab-warum{grid-template-columns:1fr}}

/* ---- Zusicherung Festpreis ---- */
.ab-zusage{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--olive-wash);border:2px solid rgba(116,117,70,.3);
  border-radius:var(--r);padding:30px 34px;margin-top:34px;
}
.ab-zusage-siegel{
  flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:var(--olive);
  display:grid;place-items:center;
}
.ab-zusage-siegel svg{width:28px;height:28px;fill:#fff}
.ab-zusage h3{margin:0 0 8px;font-size:1.15rem}
.ab-zusage p{margin:0;font-size:.96rem;line-height:1.6;color:#3A3A36}
@media(max-width:600px){
  .ab-zusage{flex-direction:column;gap:16px;padding:26px 24px}
}

/* ---- Das Ziel am Ende des Zeitstrahls -------------------------
   Wohin die ganze Strecke fuehrt: sinkende Stromrechnung und mehr
   Unabhaengigkeit - laut Umfragen (KfW, EUPD) die zwei staerksten
   Kaufgruende. Gold statt Olive, damit der Endpunkt sichtbar etwas
   anderes ist als die Zusage weiter unten. */
.ab-ziel{
  display:flex;gap:20px;align-items:flex-start;
  background:rgba(232,163,61,.12);border:2px solid rgba(232,163,61,.5);
  border-radius:var(--r);padding:30px 34px;margin-top:44px;
}
.ab-ziel-punkt{
  flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:var(--sonne,#E8A33D);
  display:grid;place-items:center;
}
.ab-ziel-punkt svg{width:30px;height:30px;fill:#fff}
.ab-ziel-kat{
  font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:.68rem;letter-spacing:.16em;color:#9A6410;margin:0 0 8px;
}
.ab-ziel h3{margin:0 0 8px;font-size:1.2rem}
.ab-ziel p{margin:0;font-size:.96rem;line-height:1.6;color:#3A3A36}
.ab-ziel > div{min-width:0}
.ab-ziel p,.ab-ziel h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
@media(max-width:600px){
  .ab-ziel{flex-direction:column;gap:16px;padding:24px 20px}
}

/* ---- Verweiskasten auf pv-anlage.html ---- */
.ab-verweis{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px;margin-top:44px;
  background:var(--ink);color:#fff;border-radius:var(--r);padding:34px 38px;
  position:relative;overflow:hidden;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.ab-verweis::after{
  content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,61,.22),transparent 68%);
}
.ab-verweis:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(16,14,24,.22)}
.ab-verweis-txt{position:relative;z-index:1;max-width:62ch}
.ab-verweis-txt p.ab-verweis-kat{
  font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.18em;color:var(--sonne,#E8A33D);margin:0 0 10px;
}
.ab-verweis-txt h3{color:#fff;margin:0 0 10px;font-size:clamp(1.15rem,2.1vw,1.6rem)}
.ab-verweis-txt p{margin:0;color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.55}
.ab-verweis .btn{position:relative;z-index:1;flex:0 0 auto}

/* ---- Schrumpfschutz ------------------------------------------
   Raster- und Flex-Kinder haben von Haus aus min-width:auto und
   weigern sich, unter ihre Mindestbreite zu schrumpfen. Zusammen mit
   langen Fachwoertern (Inbetriebsetzungsanzeige, VDE-AR-N 4105) trieb
   das die Karten auf dem Handy ueber den Bildschirmrand hinaus.
   Gemessen: 55 px Querueberlauf bei 375 px Breite. Nicht entfernen. */
.ab-phase,.ab-karte{min-width:0}
.ab-split > *,.ab-amt > *,.ab-tag > *,.ab-warum > *{min-width:0}
.ab-amt-karte > div,.ab-zusage > div,.ab-verweis-txt{min-width:0}
.ab-karte p,.ab-lead,.ab-spalte li,.ab-amt-karte h4,.ab-amt-karte p,
.ab-merk p,.ab-tag li b,.ab-tag li span,.ab-zahl span{
  /* Silbentrennung statt harter Wortbruch: Ohne hyphens brach der Browser
     "Schutzleitermessung" als "Schutzleitermess|ung" um. Die Seite ist
     lang="de", also trennt er nach deutschen Regeln. break-word bleibt
     nur als letzte Rettung fuer Woerter, die auch getrennt nicht passen. */
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
}

@media(max-width:900px){
  .ab-tl{padding-left:66px;gap:20px}
  .ab-rail{left:20px;top:32px;bottom:32px;width:3px}
  .ab-num{left:-66px;top:24px;width:46px;height:46px;font-size:.9rem;border-width:2.5px}
  .ab-phase.on .ab-num{box-shadow:0 0 0 5px rgba(116,117,70,.12)}
  .ab-karte{padding:24px 22px 26px}
  .ab-verweis{padding:28px 24px}
}
@media(max-width:600px){
  /* Der lange Chip "in der Regel rund 2 Wochen" passt sonst nicht in die Karte. */
  .ab-dauer{white-space:normal}
}
@media(max-width:480px){
  /* Auf schmalen Geraeten frisst die Spur zu viel Kartenbreite.
     Gemessen bei 375 px: 66 px Spur liessen nur 261 px fuer die Karte. */
  .ab-tl{padding-left:52px}
  .ab-rail{left:16px;top:26px;bottom:26px}
  .ab-num{left:-52px;top:20px;width:40px;height:40px;font-size:.78rem;border-width:2.5px}
  .ab-karte{padding:22px 18px 24px}
  .ab-spalte{padding:17px 17px}
  .ab-merk{padding:16px 17px}
  .ab-amt-karte{padding:18px 18px;gap:11px}
  .ab-zusage{padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){
  .ab-rail i{display:none}
  .ab-num,.ab-karte,.ab-verweis,.ab-st-punkt{transition:none}
}