/* Seite Ablauf (Seitensitzung Ablaufseite, 02.11.2026), von Hand.
   Kopf, Knöpfe, Fußleiste und Grafikklassen .ab aus unterseiten-basis.css; Seitenkopf und Preis vorab aus unterseiten.css. */

/* Kopf: Titel links, Unterzeile und Knöpfe rechts, darunter die Ablaufgrafik der Startseite über die volle Breite */
.seitenkopf--ablauf .innen{display:block;padding-block:clamp(48px,5.5vw,88px) clamp(56px,6.5vw,104px)}
.ablaufkopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end}
.ablaufkopf .seitenkopf__unter{margin-top:0}
.ablaufkopf .held__knoepfe{margin-top:28px}
.ablauf__figur{margin:clamp(40px,4.5vw,64px) 0 0}
.ablauf__figur .ab--hoch{display:none}
@media (max-width:1099px){
  .ablauf__figur .ab--quer{display:none}
  .ablauf__figur .ab--hoch{display:block;max-width:560px;margin-inline:auto}
}

/* Schritte und Fragen: ab 1100 px links die Überschrift (bei den Schritten mitlaufend), rechts der Inhalt.
   Die Überschrift ist auf Versalhöhe beschnitten, damit sie mit der Oberkante der ersten Karte bzw. Linie abschließt. */
.schritte,.fragen{padding-block:clamp(56px,7vw,104px)}
.schritte .innen,.fragen .innen{display:grid;grid-template-columns:1fr;gap:28px}
.schritte__kopf h2,.fragen h2{text-wrap:balance}
@media (min-width:1100px){
  .schritte .innen,.fragen .innen{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(40px,5vw,80px);align-items:start}
  .schritte__kopf{position:sticky;top:104px}
  .schritte__kopf h2,.fragen h2{max-width:12ch;text-box:trim-start cap alphabetic}
  @supports not (text-box:trim-start cap alphabetic){.schritte__kopf h2,.fragen h2{margin-top:-.2em}}
}
.schritte__kopf p{margin-top:16px;max-width:26em;color:var(--text)}
.legende{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
/* Legende: leere Ziffernkachel in der Farbe des Teils, von der Versalhöhe der ersten bis zur Grundlinie der zweiten Zeile
   (gemessen: Versalhöhe 4,94 px unter der Zeilenoberkante, zwei Zeilen 32,5 px) */
.legende li{display:grid;grid-template-columns:21px minmax(0,1fr);column-gap:12px;font-size:.95rem;line-height:1.4;color:var(--leise)}
.legende li::before{content:"";grid-row:span 2;width:21px;aspect-ratio:var(--kachel-format);margin-top:4.94px;border-radius:var(--kachel-ecke)}
.legende b{display:block;font-weight:600;color:var(--tinte)}
.legende__sie::before{background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.legende__wir::before{background:var(--p100)}

/* Eine Karte je Schritt in der Farbe ihres Teils (Weiß wie das Band „Ihr Teil“, Petrol 100 wie „Unser Teil“).
   Alle Karten haben dieselben Spalten, damit Ziffer, Text und Zeichnung überall an derselben Kante stehen. */
/* Ziffernkachel wie in der Grafik: von der Versalhöhe der Zeile „Ihr Teil“ bis zur Grundlinie des Schrittnamens
   (gemessen in Chromium: Versalhöhe 4,81 px unter der Zeilenoberkante, Abstand bis zur Grundlinie 37,19 px) */
.schritte{--az-h:37.19px;--az-b:calc(var(--az-h) * 650 / 1004);--bild:150px}
.schritte__liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.schritt{display:grid;grid-template-columns:var(--az-b) minmax(0,1fr) var(--bild);grid-template-rows:auto 1fr;grid-template-areas:"z kopf bild" ". text bild";column-gap:20px;align-items:start;padding:24px 28px 26px;border:1px solid transparent;border-radius:24px}
.schritt--sie{background:#fff;border-color:var(--linie)}
.schritt--wir{background:var(--p100)}
/* Ziffernkachel im Format des Signets, so hoch wie Teil und Schrittname zusammen */
.az{grid-area:z;display:grid;place-items:center;width:var(--az-b);height:var(--az-h);margin-top:4.81px;border-radius:var(--kachel-ecke);background:var(--schwarz);color:#fff;font:700 calc(var(--az-b) * 1.05)/1 "Familjen Grotesk",system-ui,sans-serif;padding-bottom:1px}
.schritt__kopf{grid-area:kopf}
.schritt__teil{font-size:.875rem;line-height:20px;font-weight:600;color:var(--leise)}
.schritt--wir .schritt__teil{color:var(--p800)}
.schritt h3{font-size:1.375rem;line-height:26px}
.schritt__text{grid-area:text;margin-top:10px;max-width:34em;line-height:1.6;color:var(--text);text-wrap:pretty}
.schritt__text a{color:var(--p700);font-weight:500;text-underline-offset:3px}
.schritt__bild{grid-area:bild;align-self:center;justify-self:center}
.schritt__bild .ab.station{width:calc(var(--b) * 1px)}

/* Häufige Fragen: Ausklapper ohne Skript */
.fragen{background:#fff;border-block:1px solid var(--linie)}
.fragen__liste{border-top:1px solid var(--tinte)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:24px;align-items:center;padding:22px 0;cursor:pointer;list-style:none;font:500 1.25rem/1.3 "Familjen Grotesk",system-ui,sans-serif;letter-spacing:-.01em;color:var(--tinte)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";width:24px;height:24px;background:linear-gradient(var(--tinte),var(--tinte)) center/14px 2px no-repeat,linear-gradient(var(--tinte),var(--tinte)) center/2px 14px no-repeat;transition:transform .2s ease}
.frage[open] summary::after{transform:rotate(45deg)}
.frage summary:hover{color:var(--p700)}
.frage summary:focus-visible{outline:2px solid var(--p600);outline-offset:4px;border-radius:4px}
.frage__antwort{padding:0 48px 26px 0;max-width:36em}
.frage__antwort p{color:var(--text);line-height:1.6;text-wrap:pretty}
.frage__antwort p+p{margin-top:14px}
.frage__links{display:flex;flex-wrap:wrap;gap:12px 28px}
.frage__links .pfeillink{color:var(--tinte)}

/* Tablet und Handy */
@media (max-width:900px){
  .seitenkopf--ablauf .innen{padding-block:48px 56px}
  .ablaufkopf{grid-template-columns:1fr;gap:20px;align-items:start}
  .frage summary{font-size:1.125rem;padding:18px 0}
  .frage__antwort{padding-right:0}
}
/* Handy: Zeichnung oben, darunter Ziffer mit Teil und Name, dann der Text über die volle Breite. Der Name bleibt so
   einzeilig. Mit 20 px Schrift liegt seine Grundlinie 0,8 px über der Kachelunterkante; die Kachel behält ihre Größe. */
@media (max-width:600px){
  .schritt{grid-template-columns:var(--az-b) minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"bild bild" "z kopf" "text text";column-gap:14px;padding:20px 20px 22px}
  .schritt h3{font-size:1.25rem}
  .schritt__text{margin-top:14px}
  .schritt__bild{justify-self:start;align-self:end;margin-bottom:16px}
  .schritt__bild .ab.station{width:calc(var(--b) * .55px)}
}

/* Erstgespräch, zweiter Entwurf (SOTA, 05.11.2026): der Besucher wählt den Weg, jede Wahl zeigt ihre eigene
   isometrische Szene. Video als Ablauf mit Fokus auf der aktiven Station, Telefon mit dem 20-Minuten-Ring,
   Kanzlei mit Stufen und Parkplätzen. Ohne Skript stehen die drei Wege untereinander. Kein Webex-Logo,
   kein Nachbau der Webex-Oberfläche: die Bildschirme sind allgemein gezeichnet. */
.e2{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--linie)}
.e2__kopf{display:grid;gap:16px}
.e2__kopf h2{text-wrap:balance}
.e2__lead{max-width:30em;color:var(--text);line-height:1.6;text-wrap:pretty}
@media (min-width:1000px){
  .e2__kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
  .e2__lead{justify-self:end;font-size:1.125rem}
}

/* Wahl des Wegs: drei Reiter in einer Reihe, Titel und Zusatz jeweils auf gleicher Höhe */
.e2__wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:10px;margin-top:clamp(28px,3.5vw,44px)}
.e2__wahl[hidden]{display:none}
.kit-btn.e2-tab{-webkit-tap-highlight-color:transparent;white-space:normal;font-size:inherit;font-weight:inherit;line-height:inherit;justify-content:stretch;align-items:stretch}
.e2-tab{display:grid;grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:2px;align-content:start;padding:18px 20px;border:0;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);color:var(--tinte);text-align:left;cursor:pointer;font:inherit;transition:background-color .2s ease,box-shadow .2s ease}
.e2-tab .kit-icon{grid-row:span 2;width:24px;height:24px;margin-top:1px;color:var(--p700)}
.e2-tab__name{font:500 1.25rem/1.25 "Familjen Grotesk",system-ui,sans-serif}
.e2-tab__info{font-size:.9375rem;line-height:1.45;color:var(--leise)}
@media (hover:hover){.e2-tab:hover{box-shadow:inset 0 0 0 1px var(--tinte)}}
.e2-tab:focus-visible{outline:2px solid var(--p700);outline-offset:3px}
.e2-tab[aria-selected="true"]{background:var(--p700);box-shadow:none;color:#fff}
.e2-tab[aria-selected="true"] .kit-icon{color:#fff}
.e2-tab[aria-selected="true"] .e2-tab__info{color:var(--p100)}

/* Bühne: links die Szene auf Hellblau, rechts der Weg in Schritten */
.e2__buehne{display:grid;gap:12px;margin-top:12px}
.e2:not(.e2--reiter) .e2__buehne{margin-top:clamp(28px,3.5vw,44px)}
.e2-weg{display:grid;gap:clamp(20px,3vw,48px);padding:clamp(14px,1.6vw,20px);border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);scroll-margin-top:96px}
.e2--reiter .e2__buehne{grid-template-areas:"weg"}
.e2--reiter .e2-weg{grid-area:weg}
/* Alle Wege liegen in derselben Zelle: die Bühne hat immer die Höhe des größten, beim Wechsel springt nichts */
.e2-weg--aus{visibility:hidden}
.e2-weg__bild{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(16px,2.4vw,32px);border-radius:16px;background:var(--p50)}
.e2-weg__text{display:flex;flex-direction:column;min-width:0;padding:clamp(4px,1vw,16px) clamp(4px,1vw,16px) clamp(4px,.8vw,12px)}
.e2-weg h3{font-size:clamp(1.5rem,1.3rem + .6vw,1.875rem);line-height:1.15;text-wrap:balance}
.e2-weg__lead{margin-top:10px;max-width:28em;color:var(--text);line-height:1.6;text-wrap:balance}
.e2-weg__fuss{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px;padding-top:30px}
.e2-weg__fuss .pfeillink{color:var(--tinte);font-size:15px} /* gleiche Größe wie die Knopfschrift: eine Grundlinie, eine Versalkante */
.e2-hinweis{margin-top:10px;font-size:.875rem;line-height:1.5;color:var(--leise);text-wrap:balance}
@media (min-width:900px){
  .e2-weg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Schritte: schwarze Ziffernkachel links, Text linksbündig daneben; der aktive Schritt läuft mit der Szene */
.e2-schritte{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:4px}
.e2-schritt{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:16px;align-items:start;padding:12px 14px 12px 12px;margin-inline:-12px -14px;border-radius:12px;transition:background-color .35s ease}
.e2-schritt.ist-aktiv{background:var(--p50)}
.e2-ziffer{display:grid;place-items:center;width:22px;height:34px;border-radius:3.5px;background:#000;color:#fff;font:700 23px/1 "Familjen Grotesk",system-ui,sans-serif}
.e2-schritt>div{padding-top:5.2px} /* Versalkante des Titels auf Höhe der Ziffer (gemessen, Ausrichtungs-Check A2) */
.e2-schritt h4{margin:0;font:500 1.125rem/1.3 "Familjen Grotesk",system-ui,sans-serif;color:var(--tinte)}
.e2-schritt p{margin-top:4px;color:var(--text);line-height:1.55;text-wrap:pretty}

/* Angaben zur Kanzlei */
.e2-angaben{margin:22px 0 0;display:grid}
.e2-angaben div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--linie)}
.e2-angaben div:last-child{border-bottom:1px solid var(--linie)}
.e2-angaben dt{font-weight:600;color:var(--tinte)}
.e2-angaben dd{margin:0;color:var(--text);line-height:1.55}

/* Szenen */
.e2-szene{position:relative;width:100%;max-width:560px;margin-inline:auto}
.e2-fig{display:block;width:100%;height:auto;overflow:visible}
.e2-fig path,.e2-fig rect,.e2-fig circle,.e2-fig ellipse{vector-effect:non-scaling-stroke}
.e2-fig .w{fill:#fff}
.e2-fig .l{fill:#f6f8f8}
.e2-fig .dk{fill:#e3e7e8}
.e2-fig .scheibe,.e2-fig .w,.e2-fig .l,.e2-fig .dk,.e2-fig .scr,.e2-fig .kachel,.e2-fig .pw,.e2-fig .feld,.e2-fig .gross,.e2-fig .fenster,.e2-fig .hell,.e2-fig .hl,.e2-fig .hd,.e2-fig .halt ellipse{stroke:var(--tinte);stroke-width:1.1;stroke-linejoin:round}
.e2-fig .kante{fill:none;stroke:var(--tinte);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.e2-fig .akz{fill:var(--p700)}
.e2-fig .loch{fill:#fff}
.e2-fig .zelle{fill:#e3e7e8}
.e2-fig .tast,.e2-fig .pad{fill:none;stroke:var(--tinte);stroke-opacity:.35;stroke-width:1;stroke-linecap:round}
.e2-fig .scr{fill:var(--p50)}
.e2-fig .kachel,.e2-fig .pw,.e2-fig .feld{fill:#fff}
.e2-fig .gross{fill:var(--p100)}
.e2-fig .dunkel{fill:var(--tinte)}
.e2-fig .buegel{fill:none;stroke:var(--p700);stroke-width:1.4;stroke-linecap:round}
.e2-fig .sig{stroke:var(--linie);stroke-width:2.2;stroke-linecap:round}
/* Video: Weg mit Haltepunkten, Fokus auf der aktiven Station (andere 30 %), am Anfang und Ende das Gesamtbild */
.e2-fig .weg{fill:none;stroke:var(--p700);stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:2 4;stroke-linecap:round}
.e2-fig .halt ellipse{fill:#fff}
.e2-fig .puck{opacity:0;transition:transform .9s cubic-bezier(.45,0,.2,1),opacity .3s ease}
.e2-fig .puck ellipse{fill:var(--p700);stroke:var(--tinte);stroke-width:1.1}
.e2-fig .st{transition:opacity .5s ease}
.e2-szene:not([data-phase="0"]) .puck{opacity:1}
.e2-szene[data-phase="1"] .st:not(.st1),.e2-szene[data-phase="2"] .st:not(.st2),.e2-szene[data-phase="3"] .st:not(.st3){opacity:.3}
/* Telefon: Ring als Zifferblatt am Boden, der Bogen zeigt etwa 20 Minuten */
.e2-fig .spur{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round}
.e2-fig .bogen{fill:none;stroke:var(--p700);stroke-width:8;stroke-linecap:round}
.e2-fig .bogen.zeichnet{stroke-dasharray:1 1;animation:e2-bogen 1.2s cubic-bezier(.3,0,.2,1) both}
@keyframes e2-bogen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.e2-fig .tick{fill:none;stroke:var(--tinte);stroke-opacity:.45;stroke-width:1;stroke-linecap:round}
.e2-fig .tick--lang{stroke-opacity:.85;stroke-width:1.5}
/* Kanzlei */
.e2-fig .boden{fill:#fff;stroke:var(--tinte);stroke-width:1.1;stroke-linejoin:round}
.e2-fig .markierung{fill:none;stroke:var(--p700);stroke-width:1.6;stroke-linecap:round}
.e2-fig .fenster{fill:var(--p50);stroke-width:.9}
.e2-fig .hell{fill:var(--p100)}
.e2-fig .hl{fill:#b6d7e4}
.e2-fig .hd{fill:#93c2d4}
.e2-fig .mast{fill:none;stroke:var(--tinte);stroke-width:1.6;stroke-linecap:round}
.e2-fig .scheibe{fill:var(--p100);stroke:var(--tinte);stroke-width:1.1;stroke-linejoin:round}
.e2-fig .p{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Beschriftung direkt am Objekt, als Text der Seite (bleibt bei jeder Breite gleich groß) */
.e2-marke{position:absolute;font:600 14px/1.25 Inter,system-ui,sans-serif;color:var(--tinte);white-space:nowrap}
.e2-marke--stufen{transform:translate(calc(-100% - 10px),-30%)}
.e2-marke--park{transform:translate(-100%,8px);text-align:right}
.e2-marke--minuten{transform:translate(-50%,calc(-100% - 8px));color:var(--p800)}

/* Anhalten-Knopf (WCAG 2.2.2) unter der Szene, nie darüber */
.e2-steuer{margin-top:12px}
.kit-btn.e2-pause{-webkit-tap-highlight-color:transparent;font-weight:500;justify-content:flex-start}
.e2-pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;margin-left:-4px;border:0;background:none;color:var(--text);font:500 .875rem/1.2 Inter,system-ui,sans-serif;cursor:pointer;border-radius:8px}
.e2-pause[hidden]{display:none}
@media (hover:hover){.e2-pause:hover{color:var(--tinte)}}
.e2-pause:focus-visible{outline:2px solid var(--p700);outline-offset:2px}
.kit-btn.e2-pause svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.e2-pause .e2-pause__start{display:none}
.angehalten .e2-pause .e2-pause__stopp{display:none}
.angehalten .e2-pause .e2-pause__start{display:block}

@media (prefers-reduced-motion:reduce){
  .e2-fig .st,.e2-fig .puck,.e2-schritt,.e2-tab{transition:none}
  .e2-fig .bogen.zeichnet{animation:none}
}

/* Handy: Reiter kompakt, Szene über dem Text */
@media (max-width:640px){
  .e2__wahl{column-gap:6px}
  .e2-tab{grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:8px;padding:14px 12px 13px;border-radius:14px}
  .e2-tab .kit-icon{grid-row:auto;margin-top:0}
  .e2-tab__name{font-size:1rem;line-height:1.2;text-wrap:balance}
  .e2-tab__info{display:none}
  .e2-weg{padding:8px;border-radius:20px}
  .e2-weg__bild{padding:20px 14px 12px}
  .e2-weg__text{padding:10px 10px 14px}
  .e2-schritt{margin-inline:-8px;padding:10px 8px}
  .e2-angaben div{grid-template-columns:1fr;gap:2px}
}