/* ==========================================================================
   V6 – weniger Linien, keine Tabellen, schmalere Spalte
   Lädt NACH v4.css. Hero, Navigation und Stepper bleiben unverändert.
   ========================================================================== */

/* --- 1. Schmalere Grundbreite ------------------------------------------- */
.wrap{max-width:1080px}
.wrap-n{max-width:860px;margin:0 auto;padding:0 24px}
.sec-head{max-width:560px}
.sec-head p{max-width:52ch}
.sec{padding:52px 0}
.sec-sm{padding:34px 0}

/* Hero-Handy etwas größer – es ist das erste Produktbild der Seite */
.hero .phone{width:262px}
.hero .phone .pscreen{padding:14px}

/* Sektionen mit weißen Karten brauchen einen abgesetzten Untergrund –
   sonst verschwinden die Karten auf dem weißen Seitenhintergrund. */
.sec-soft{background:var(--soft)}

/* Der Abschluss-Kasten ragt zur Hälfte in die helle Fläche darüber –
   das macht den Übergang weich statt einer harten Kante. */
.sec-soft.pull-under{padding-bottom:150px}
.cta.overlap{padding-top:0;margin-top:-110px;position:relative;z-index:2}
.sec-soft .vcard,
.sec-soft .nextnav a{background:#fff;border-color:#e2e3da}
.sec-soft .vcard:hover,
.sec-soft .nextnav a:hover{box-shadow:0 20px 44px -28px rgba(12,42,24,.34)}

/* --- 2. Zwei Blöcke: heute / mit PhysioFinance --------------------------- */
.twoblocks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tb{border-radius:20px;padding:28px 28px 30px}
.tb.before{background:var(--soft);border:1px solid var(--line)}
.tb.after{background:var(--forest);position:relative;overflow:hidden}
.tb.after::after{content:"";position:absolute;top:-90px;right:-70px;width:300px;height:300px;background:radial-gradient(circle,rgba(196,240,74,.14),transparent 68%);pointer-events:none}
.tb-in{position:relative;z-index:1}
.tb .lbl{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:12px}
.tb.after .lbl{color:var(--lime)}
.tb h3{font-size:19px;letter-spacing:-.025em}
.tb.after h3{color:#fff}
.tb ul{list-style:none;display:grid;gap:11px;margin-top:18px}
.tb li{display:flex;gap:11px;font-size:14.5px;line-height:1.5}
.tb li svg{width:14px;height:14px;flex-shrink:0;margin-top:4px}
.tb.before li{color:var(--muted)}
.tb.before li svg{color:#aeb3aa}
.tb.after li{color:rgba(255,255,255,.88)}
.tb.after li svg{color:var(--lime)}

/* --- 3. Beleg mit Markierungen (statt Tabelle) -------------------------- */
.annot{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.doc{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 24px 24px 46px;position:relative;
  box-shadow:0 18px 40px -32px rgba(12,42,24,.45);
}
/* Die gestrichelte Trennlinie sitzt außerhalb des Kopfbereichs – sonst
   läge sie beim Aufleuchten mitten im getönten Feld. */
.doc-top{position:relative;border-radius:6px;margin:2px -8px 13px;padding:8px}
.doc-top::after{content:"";position:absolute;left:8px;right:8px;bottom:-7px;border-bottom:1px dashed #d9d9d0}
.doc-top b{font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.02em;display:block}
.doc-top span{font-size:11.5px;color:var(--muted)}
.drow{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:13px;position:relative;color:#4a4f46}
.drow b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
/* Markierung ohne Signalfarbe: zarte Tönung plus gestrichelte Kontur –
   dasselbe Motiv wie im Hero, wo der Scanner den Betrag einrahmt. */
.drow.hl{
  background:var(--tint-2);border-radius:6px;margin:2px -8px;padding:8px;
  box-shadow:inset 0 0 0 1.5px var(--tint-line);
}
/* Nummern-Marker – gilt für Kopfbereich und Zeilen gleichermaßen */
.doc .bn{
  position:absolute;left:-34px;
  width:21px;height:21px;border-radius:50%;background:var(--forest);color:var(--lime);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.drow .bn{top:50%;transform:translateY(-50%)}
.doc-top .bn{top:11px}
.doc-foot{border-top:1px dashed #d9d9d0;margin-top:8px;padding-top:10px}

.legend{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.lgi{display:flex;gap:11px}
.lgi .ln{
  width:21px;height:21px;border-radius:50%;background:var(--forest);color:var(--lime);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;
}
.lgi b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.lgi span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px}

/* --- 4. Aufzählung mit Häkchen ------------------------------------------
   WICHTIG: Ein inline-SVG ohne width/height fällt auf 300x150 px zurück.
   Jede SVG-Regel hier muss daher eine Größe setzen.                       */
.blist{list-style:none;display:grid;gap:9px}
.blist li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;align-items:flex-start}
.blist li svg{width:14px;height:14px;color:var(--green-ink);flex-shrink:0;margin-top:4px}
.blist b{font-weight:650}

/* --- Kennzahlen unter den Dauerausgaben --------------------------------- */
.erk-r em{font-style:normal;font-size:11px;color:var(--muted);margin-left:6px}
.msum{
  display:flex;flex-wrap:wrap;gap:32px;align-items:baseline;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
.msum .v{font-family:var(--font-d);font-size:26px;font-weight:650;letter-spacing:-.035em}
.msum .v em{font-style:normal;color:var(--green-ink)}
.msum .l{font-size:13px;color:var(--muted);margin-top:4px}

/* --- 4b. Formular-Mockup (Dauerausgabe anlegen) -------------------------
   Bewusst ein anderer Bildtyp als die Listen-Panels, damit sich die
   Abschnitte optisch nicht wiederholen.                                   */
.fmock{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:0 18px 40px -32px rgba(12,42,24,.45);
}
.fmock-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.fmock-h b{font-family:var(--font-d);font-size:15px;font-weight:650;letter-spacing:-.02em}
.fmock-h span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ff{display:block;margin-bottom:11px}
.ff>span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px}
.ff .fi{
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--soft);
  font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.ff .fi svg{width:12px;height:12px;color:var(--muted)}
.ff .fi.on{background:var(--tint);border-color:#d7e7bd;color:var(--green-ink)}
.fmock-btn{
  background:var(--lime);color:var(--forest);border-radius:9px;padding:12px;text-align:center;
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:16px;
}
.fmock-note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.45}

/* --- 4c. Bild links / Bild rechts – zum Abwechseln der Richtung --------- */
.vleft{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center}
.vright{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center}

/* --- 4c2. Bewertungs-Band ----------------------------------------------- */
.ratingband{
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:24px 28px;
}
.rb-score{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.rb-stars{color:#f2b21a;letter-spacing:3px;font-size:15px;line-height:1}
.rb-num{font-family:var(--font-d);font-size:40px;font-weight:700;letter-spacing:-.045em;line-height:1}
.rb-num span{font-size:18px;color:var(--muted);font-weight:500;letter-spacing:-.02em}
.rb-txt{flex:1;min-width:230px}
.rb-txt b{display:block;font-family:var(--font-d);font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.rb-txt span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}

/* --- 4d. Problem-Zeile, rein typografisch ------------------------------- */
.probrow{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;border-top:1px solid var(--line);padding-top:26px}
.probrow .p b{display:block;font-family:var(--font-d);font-size:16.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.probrow .p p{font-size:14px;color:var(--muted);line-height:1.6}

/* --- 4e. Ergebnis-Kennzahlen -------------------------------------------- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1.5px solid var(--ink);padding-top:26px;margin-bottom:36px}
.results .r .v{font-family:var(--font-d);font-size:clamp(30px,3.4vw,42px);font-weight:650;letter-spacing:-.04em;line-height:1}
.results .r .v em{font-style:normal;color:var(--green-ink)}
.results .r .l{font-size:13.5px;color:var(--muted);margin-top:9px;max-width:24ch;line-height:1.45}

/* --- 5. Sonderfälle: reine Typografie, keine Linien --------------------- */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 46px}
.qitem b{
  display:block;font-family:var(--font-d);font-size:16.5px;font-weight:600;
  letter-spacing:-.022em;margin-bottom:6px;line-height:1.3;
}
.qitem b::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--lime);margin-right:10px;vertical-align:middle;
}
.qitem p{font-size:14px;color:var(--muted);line-height:1.6}

/* --- 6. Zitat im dunklen Kasten – wie in der ersten Version -------------- */
.pullq{background:var(--forest);border-radius:20px;padding:38px 40px;position:relative;overflow:hidden}
.pullq::after{
  content:"";position:absolute;top:-110px;right:-80px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(196,240,74,.13),transparent 66%);pointer-events:none;
}
.pullq-in{position:relative;z-index:1;max-width:60ch}
.pullq .qi{
  width:40px;height:40px;border-radius:11px;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:22px;line-height:1;margin-bottom:22px;
}
.pullq .qt{
  font-family:var(--font-d);font-size:clamp(19px,2.2vw,27px);font-weight:600;
  line-height:1.32;letter-spacing:-.022em;color:#fff;
}
.pullq .qb{display:flex;align-items:center;gap:13px;margin-top:24px}
.pullq .qav{
  width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-d);font-weight:700;font-size:14px;
}
.pullq .qn{display:block;font-size:14.5px;font-weight:650;color:#fff}
.pullq .qr{display:block;font-size:13px;color:rgba(255,255,255,.55);margin-top:2px}
.pullq .qr a{color:var(--lime);font-weight:600;border-bottom:1.5px solid rgba(196,240,74,.35)}

/* --- 6a2. Beweis-Block: Zitat und Zahlen derselben Praxis ---------------
   Zahlen ohne Absender sind eine Behauptung. Zusammen mit dem Namen der
   Praxis werden sie überprüfbar – deshalb stehen sie in einem Block.     */
.proof{
  background:var(--forest);border-radius:20px;padding:38px 40px;
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;
}
.proof::after{
  content:"";position:absolute;top:-110px;right:-80px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(196,240,74,.13),transparent 66%);pointer-events:none;
}
.proof>*{position:relative;z-index:1}
.proof .qi{
  width:40px;height:40px;border-radius:11px;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:22px;line-height:1;margin-bottom:20px;
}
.proof .qt{
  font-family:var(--font-d);font-size:clamp(19px,2.1vw,26px);font-weight:600;
  line-height:1.32;letter-spacing:-.022em;color:#fff;
}
.proof .qb{display:flex;align-items:center;gap:13px;margin-top:22px}
.proof .qav{
  width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-d);font-weight:700;font-size:14px;
}
.proof .qn{display:block;font-size:14.5px;font-weight:650;color:#fff}
.proof .qr{display:block;font-size:13px;color:rgba(255,255,255,.55);margin-top:2px}
.proof .qr a{color:var(--lime);font-weight:600;border-bottom:1.5px solid rgba(196,240,74,.35)}

.proof-stats{border-left:1px solid rgba(255,255,255,.16);padding-left:40px;display:grid;gap:22px}
.proof-stats .ps b{
  display:block;font-family:var(--font-d);font-size:30px;font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--lime);
}
.proof-stats .ps span{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:6px;line-height:1.4}

/* --- 6a3. Vertrauens-Zeile im Abschluss-Kasten -------------------------- */
.cta-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
}
.cta-trust span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:rgba(255,255,255,.68);
}
.cta-trust svg{width:13px;height:13px;color:var(--lime);flex-shrink:0}

/* --- 6b. Vorteils-Karten mit dunkler Icon-Kachel ------------------------ */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vcard{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.vcard:hover{box-shadow:0 18px 40px -28px rgba(12,42,24,.3);transform:translateY(-3px);border-color:#d6d8cd}
.vcard .vi{
  width:32px;height:32px;border-radius:9px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.vcard .vi svg{width:16px;height:16px}
.vcard h4{font-size:17px;letter-spacing:-.022em;margin-bottom:7px}
.vcard p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* Icon-Kacheln der Produkt-Verlinkung ebenfalls dunkel */
.nextnav .ni{background:var(--forest);color:var(--lime)}

/* --- 7. Vertrauens-Zeile (Linien hier bewusst behalten) ----------------- */
.inline-row{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inline-row .ii{flex:1;min-width:200px;display:flex;gap:11px;align-items:flex-start;padding:20px 22px 20px 0}
.inline-row .ii+.ii{border-left:1px solid var(--line);padding-left:22px}
.inline-row .ii svg{width:16px;height:16px;color:var(--green-ink);flex-shrink:0;margin-top:2px}
.inline-row .ii b{display:block;font-size:14px;font-weight:650;margin-bottom:2px}
.inline-row .ii span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* --- 8. Dunkles Band ---------------------------------------------------- */
.dband{background:var(--forest);border-radius:22px;padding:42px 40px;position:relative;overflow:hidden}
.dband::after{content:"";position:absolute;top:-120px;right:-90px;width:420px;height:420px;background:radial-gradient(circle,rgba(196,240,74,.12),transparent 66%);pointer-events:none}
.dband-in{position:relative;z-index:1}
.dband .eyebrow{color:rgba(255,255,255,.5);display:block;margin-bottom:12px}
.dband h2{color:#fff;font-size:clamp(23px,2.6vw,32px);margin-bottom:12px}
.dband .lead{color:rgba(255,255,255,.62);font-size:15.5px;line-height:1.6;max-width:54ch}
.dchain{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.dstep{padding:20px 20px 0 0}
.dstep+.dstep{padding-left:20px;border-left:1px solid rgba(255,255,255,.16)}
.dstep .dn{font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--lime);margin-bottom:9px}
.dstep h4{font-size:15.5px;color:#fff;margin-bottom:5px}
.dstep p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}
.dband-foot{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:rgba(255,255,255,.6);max-width:60ch}
.dband-foot a{color:var(--lime);font-weight:600;border-bottom:1.5px solid rgba(196,240,74,.35)}

/* --- 8b. Steuerberater-Hervorhebung im dunklen Band ---------------------- */
.anote{
  display:flex;gap:16px;align-items:flex-start;margin-top:24px;
  background:rgba(196,240,74,.09);border:1px solid rgba(196,240,74,.26);
  border-radius:14px;padding:18px 20px;
}
.anote .ai{
  width:34px;height:34px;border-radius:9px;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.anote .ai svg{width:17px;height:17px}
.anote b{display:block;color:#fff;font-size:15.5px;font-weight:650;margin-bottom:4px;letter-spacing:-.015em}
.anote p{font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.55;margin:0;max-width:58ch}
.anote p a{color:var(--lime);font-weight:600;border-bottom:1.5px solid rgba(196,240,74,.35)}

/* --- 9. Ablauf-Linie mit Panel daneben ---------------------------------- */
.tl-grid{display:grid;grid-template-columns:1fr 290px;gap:52px;align-items:start}
.tline{position:relative;padding-left:38px}
.tline::before{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.tstage{position:relative;padding-bottom:24px}
.tstage:last-child{padding-bottom:0}
.tstage .tn{
  position:absolute;left:-38px;top:-2px;width:26px;height:26px;border-radius:8px;
  background:var(--lime);color:var(--forest);font-family:var(--font-d);font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;
}
.tstage h4{font-size:17.5px;margin-bottom:5px}
.tstage p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:54ch}

@media(max-width:900px){
  .twoblocks{grid-template-columns:1fr}
  .annot{grid-template-columns:1fr;gap:32px}
  .legend{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr;gap:22px}
  .tl-grid{grid-template-columns:1fr;gap:32px}
  .vleft,.vright{grid-template-columns:1fr;gap:30px}
  .vright .fmock{order:-1}
  .ratingband{gap:18px;padding:20px}
  .probrow,.results,.vgrid{grid-template-columns:1fr;gap:22px}
  .pullq{padding:28px 24px}
  .proof{grid-template-columns:1fr;gap:28px;padding:28px 24px}
  .sec-soft.pull-under{padding-bottom:110px}
  .cta.overlap{margin-top:-80px}
  .proof-stats{border-left:none;border-top:1px solid rgba(255,255,255,.16);padding-left:0;padding-top:24px;
    grid-template-columns:1fr 1fr;gap:20px}
  .dband{padding:30px 22px}
  .dchain{grid-template-columns:1fr}
  .dstep+.dstep{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.16)}
  .inline-row .ii+.ii{border-left:none;border-top:1px solid var(--line);padding-left:0}
  .msum{gap:22px}
}

/* ==========================================================================
   Bauteile in UNSERER Design-Sprache
   Grundsätze: dunkelgrüne Icon-Kachel mit Limette, dünne Linien,
   Limette nur als Akzent – nie als Fläche.
   ========================================================================== */

/* --- Schritt-Karten ------------------------------------------------------ */
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
.scard-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.scard .si{
  width:34px;height:34px;border-radius:10px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.scard .si svg{width:17px;height:17px}
/* Die Karte ist eine Flex-Spalte – ohne align-self zog sich das Etikett
   über die volle Breite und sah aus wie ein leerer Balken. */
.scard .sn{
  align-self:flex-start;margin-bottom:14px;
  font-family:var(--font-d);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  padding:4px 9px;border-radius:5px;
}
.scard h3{font-size:19px;letter-spacing:-.025em;margin-bottom:9px}
.scard>p{font-size:14.5px;color:var(--muted);line-height:1.58;margin-bottom:20px;flex:1}
.sbox{border-top:1px solid var(--line)}
.srow{display:flex;align-items:center;gap:11px;padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line-soft)}
.srow:last-child{border-bottom:none}
.srow svg{width:13px;height:13px;color:var(--green-ink);flex-shrink:0}
.srow .g{flex:1}
.srow .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.srow .t{font-size:10.5px;font-weight:700;color:var(--green-ink);background:var(--tint);border:1px solid var(--tint-line);padding:2px 8px;border-radius:5px}

/* --- Nachweis-Plakette im Hero ------------------------------------------ */
.proofbadge{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  background:rgba(196,240,74,.09);border:1px solid rgba(196,240,74,.26);
  border-radius:100px;padding:9px 18px 9px 12px;
}
.proofbadge .pb-n{
  font-family:var(--font-d);font-size:16px;font-weight:700;letter-spacing:-.03em;
  color:var(--forest);background:var(--lime);border-radius:100px;padding:4px 11px;
}
.proofbadge .pb-t{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.35}

/* --- Vergleich, ruhig statt bunt ---------------------------------------- */
.cmpq{width:100%;border-collapse:collapse}
.cmpq th{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  padding:0 18px 13px 0;border-bottom:1.5px solid var(--ink);text-align:left;
}
.cmpq th.c{text-align:center;width:170px;padding-right:0}
.cmpq th.us{color:var(--ink)}
.cmpq td{padding:15px 18px 15px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500}
.cmpq td.c{text-align:center;width:170px;padding-right:0}
.cmpq td.us{background:var(--tint-2)}
.cmpq th.us{background:var(--tint-2)}
.cmpq tbody tr:last-child td{border-bottom:none}
.cmpq .ok svg{width:17px;height:17px;color:var(--green-ink);margin:0 auto}
.cmpq .no svg{width:15px;height:15px;color:#b9bdb2;margin:0 auto}
.cmpq .maybe svg{width:16px;height:16px;color:#9aa392;margin:0 auto}
.cmpq-note{font-size:12.5px;color:var(--muted);margin-top:14px}

/* --- Abschlussbereich: FAQ und Weiteres als eine Einheit ---------------- */
.endzone{background:var(--soft);border-radius:26px;padding:52px 44px;margin:0 auto}
.faqcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px 30px;max-width:820px;margin:0 auto}
.faqcard .faq details{border-bottom:1px solid var(--line)}
.faqcard .faq details:last-child{border-bottom:none}
.endzone .nextnav{margin-top:38px}
.endzone .nextnav a{background:#fff}

/* --- Abschluss im Footer ------------------------------------------------ */
.foot-cta{
  border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:40px;margin-bottom:44px;
  display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center;
}
.foot-cta h2{font-size:clamp(26px,3vw,38px);color:#fff;letter-spacing:-.035em;line-height:1.06}
.foot-cta p{font-size:15.5px;color:rgba(255,255,255,.6);margin-top:14px;max-width:44ch;line-height:1.6}
.foot-cta .fc-act{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.foot-cta .fc-act .btn{width:100%}
.foot-cta .fc-fine{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px;
  font-size:12.5px;color:rgba(255,255,255,.5);
}
.foot-cta .fc-fine span{display:inline-flex;align-items:center;gap:6px}
.foot-cta .fc-fine svg{width:12px;height:12px;color:var(--lime)}

@media(max-width:900px){
  .scards{grid-template-columns:1fr}
  .cmpq th.c,.cmpq td.c{width:92px}
  .cmpq th,.cmpq td{font-size:13.5px;padding-right:10px}
  .endzone{padding:32px 20px;border-radius:20px}
  .faqcard{padding:8px 20px}
  .foot-cta{grid-template-columns:1fr;gap:26px;padding-bottom:32px;margin-bottom:34px}
}

/* --- Plakette am Hero-Handy: vom Steuerberater geprüft ------------------ */
.hero .phone-wrap{position:relative}
.phone-badge{
  position:absolute;right:6px;bottom:-16px;z-index:3;background:#fff;border-radius:14px;
  padding:11px 16px;display:flex;align-items:center;gap:11px;
  box-shadow:0 24px 46px -20px rgba(0,0,0,.6);
}
.phone-badge .pi{
  width:32px;height:32px;border-radius:9px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.phone-badge .pi svg{width:16px;height:16px}
.phone-badge .pt{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.phone-badge .pv{
  display:flex;align-items:center;gap:6px;margin-top:1px;
  font-family:var(--font-d);font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.phone-badge .pv svg{width:13px;height:13px;color:var(--green-ink)}

/* --- Vergleich: schmal und als abgerundete Karte ------------------------ */
.cmpwrap{
  max-width:820px;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.cmpwrap .cmpq th:first-child,.cmpwrap .cmpq td:first-child{padding-left:26px}
.cmpwrap .cmpq th{padding-top:18px;padding-bottom:15px;border-bottom:1px solid var(--line);background:var(--soft)}
.cmpwrap .cmpq th.us{background:var(--tint-2)}
.cmpwrap .cmpq th.c,.cmpwrap .cmpq td.c{width:132px;padding-right:0}
.cmpwrap .cmpq td{padding-top:15px;padding-bottom:15px;border-bottom:1px solid var(--line-soft)}
.cmpwrap .cmpq tbody tr:last-child td{border-bottom:none}

/* --- Abschlussbereich über die volle Breite, oben abgerundet ------------ */
.endsec{
  background:var(--soft);border-radius:34px 34px 0 0;
  padding:58px 0 62px;margin-top:26px;
}
.endsec .faqcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 30px;max-width:820px;margin:0 auto}
.endsec .faqcard .faq details:last-child{border-bottom:none}
.endsec .nextnav{margin-top:14px}
.endsec .nextnav a{background:#fff}

@media(max-width:900px){
  .phone-badge{right:auto;left:50%;transform:translateX(-50%);bottom:-18px}
  .endsec{border-radius:24px 24px 0 0;padding:38px 0 42px}
  .endsec .faqcard{padding:6px 20px}
  .cmpwrap .cmpq th.c,.cmpwrap .cmpq td.c{width:90px}
  .cmpwrap .cmpq th:first-child,.cmpwrap .cmpq td:first-child{padding-left:16px}
}

/* ==========================================================================
   Nachschärfungen V6
   ========================================================================== */

/* --- Geprüft-Plakette prominent oben rechts am Handy -------------------- */
.phone-badge{
  right:-30px;bottom:auto;top:-22px;
  padding:12px 17px;gap:12px;border-radius:16px;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.6);
  border:1.5px solid rgba(196,240,74,.5);
}
.phone-badge .pi{width:38px;height:38px;border-radius:11px;background:var(--lime);color:var(--forest)}
.phone-badge .pi svg{width:19px;height:19px}
.phone-badge .pt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.phone-badge .pv{font-size:16px;margin-top:2px}
.phone-badge .pv svg{width:15px;height:15px}

/* --- Vergleich: die eigene Spalte ist das Element -----------------------
   Die Karte (Rahmen, Radius, Beschnitt) bleibt der Wrapper – nur so
   werden die Ecken der dunklen Kopfzelle sauber abgeschnitten.          */
.cmpwrap{max-width:840px;box-shadow:0 26px 60px -40px rgba(12,42,24,.5)}
/* Kopfzeile der eigenen Spalte dunkelgrün, damit sie heraussticht */
.cmpwrap .cmpq th.us{
  background:var(--forest);border-bottom-color:var(--forest);
  padding-top:20px;padding-bottom:18px;
}
.cmpwrap .cmpq th.us .cmp-brand b{color:#fff}
.cmpwrap .cmpq th.us .cmp-brand b em{color:rgba(255,255,255,.6)}
/* Die eigene Spalte durchgehend getönt und seitlich abgesetzt */
.cmpwrap .cmpq td.us{
  background:var(--tint-2);
  box-shadow:inset 1px 0 0 var(--tint-line), inset -1px 0 0 var(--tint-line);
}
.cmpwrap .cmpq tbody tr:last-child td.us{
  box-shadow:inset 1px 0 0 var(--tint-line), inset -1px 0 0 var(--tint-line), inset 0 -1px 0 var(--tint-line);
}
.cmpwrap .cmpq th.us,.cmpwrap .cmpq td.us{width:172px}
.cmpwrap .cmpq th.other{color:#9aa091}
.cmpwrap .cmpq td.us .ok svg{width:19px;height:19px}
.cmpwrap .cmpq td:not(.us){color:var(--muted)}
.cmpwrap .cmpq td:first-child{color:var(--ink);font-weight:600}
/* Fußnote unter der eigenen Spalte */
.cmp-hint{
  display:flex;align-items:center;gap:9px;justify-content:center;
  margin-top:16px;font-size:13px;color:var(--green-ink);font-weight:600;
}
.cmp-hint svg{width:15px;height:15px}

/* --- Abschlussbereich überlappt den Footer ------------------------------ */
.endsec.to-foot{padding-bottom:88px;margin-bottom:-48px}

@media(max-width:900px){
  .phone-badge{right:auto;left:50%;transform:translateX(-50%);top:auto;bottom:-20px}
  .cmpwrap{max-width:none}
}


/* --- Legende: Überschrift steht, die Erklärung lädt nach -----------------
   Nummer und Titel sind von Anfang an lesbar. Darunter dreht sich das
   KI-Symbol in Blau, bis die Zeile links eingekreist ist – dann steht
   dort, was ausgelesen wurde.                                          */
.lgi{position:relative}
.lgi .lt{display:block}
.lgi .lbody{position:relative;display:block;margin-top:2px;min-height:38px}
.lgi .ld{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.lgi .lload{
  position:absolute;left:0;top:1px;display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:650;color:#1f63d2;opacity:0;pointer-events:none;white-space:nowrap;
}
.lgi .ltxt{color:#1f63d2}
.lgi .lspin{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:#e4eefc;color:#1f63d2;border:1.5px solid #c3d9f7;
  display:flex;align-items:center;justify-content:center;
}
/* Der alte Funken war nicht mittig im Feld – beim Drehen eierte er.
   Der Pfad sitzt jetzt symmetrisch um den Mittelpunkt. */
.lgi .lspin svg{width:13px;height:13px;transform-origin:50% 50%}
.lgi .ltxt{display:inline-block}

/* --- „Weitere Lösungen" liegt auf der Kante zum Footer -------------------
   Die weißen Karten ragen zur Hälfte in den dunklen Footer. Dadurch sind
   sie das Letzte, was auffällt – statt unter dem Footer zu verschwinden. */
.endsec.to-foot{padding-bottom:0;margin-bottom:0}
.solbridge{position:relative;z-index:3;margin-bottom:-104px;padding-top:6px}
/* Der helle Grund läuft bis exakt zur Footer-Kante weiter – sonst klaffte
   dort ein weißer Streifen zwischen Abschlussbereich und Footer. */
.solbridge::before{
  content:"";position:absolute;left:0;right:0;top:0;height:calc(100% - 104px);
  background:var(--soft);z-index:-1;
}
.solbridge .sb-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:16px;padding-bottom:0;
}
.solbridge .sb-head b{font-family:var(--font-d);font-size:22px;font-weight:650;letter-spacing:-.03em}
.solbridge .sb-head span{font-size:13.5px;color:var(--muted)}
/* Auf der Kante zwischen Hell und Dunkel brauchen die Karten eine Kontur,
   sonst verschwimmt die untere Hälfte im Footer. */
.solbridge .nextnav a{
  background:#fff;border:1.5px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.solbridge .nextnav a:hover{border-color:var(--forest);transform:translateY(-3px)}
.foot.with-bridge{padding-top:150px}

@media(max-width:900px){
  .solbridge{margin-bottom:-40px}
  .foot.with-bridge{padding-top:80px}
}

/* --- Versuch: Vergleich auf heller Fläche, FAQ ohne ----------------------
   Der Vergleich ist das Element, das Aufmerksamkeit bekommen soll; der
   FAQ-Bereich darf dafür zurücktreten. */
.endsec.plain{background:#fff;border-radius:0;padding-top:64px}
/* Der Kasten war zu dunkel gegenüber der weißen Fläche daneben */
.endsec.plain .faqcard{background:#fbfbf8;border-color:#e9eae3}
/* Der Streifen über der Footer-Kante folgt dem Grund darüber */
.solbridge.on-white::before{background:#fff}

/* ==========================================================================
   Verordnungs-Tracker – eigene Bausteine
   ========================================================================== */
/* Zählring im Hero: der Fortschritt einer Verordnung als Kreis */
.vring{position:relative;width:132px;height:132px;flex-shrink:0;margin:0 auto}
.vring svg{width:132px;height:132px;transform:rotate(-90deg)}
.vring circle{fill:none;stroke-width:11;stroke-linecap:round}
.vring .track{stroke:rgba(255,255,255,.14)}
.vring .val{stroke:var(--lime);stroke-dasharray:352;stroke-dashoffset:117}
.vring .mid{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.vring .n{font-family:var(--font-d);font-size:34px;font-weight:700;letter-spacing:-.05em;color:#fff;line-height:1}
.vring .n em{font-style:normal;font-size:18px;color:rgba(255,255,255,.5)}
.vring .l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-top:5px}

/* Verordnungskarte in hell – für Abschnitte auf weißem Grund */
.vokarte{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  box-shadow:0 22px 44px -30px rgba(12,42,24,.5)}
.vok-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.vok-h b{display:block;font-family:var(--font-d);font-size:16px;font-weight:650;letter-spacing:-.02em}
.vok-h span.s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.vok-bar{height:9px;border-radius:100px;background:#e6e8df;overflow:hidden;margin-bottom:9px}
.vok-bar i{display:block;height:100%;border-radius:100px;background:var(--green-ink);width:0}
.vok-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.vok-meta b{color:var(--ink);font-variant-numeric:tabular-nums}

/* Terminliste, aus der sich die Einheiten abziehen */
.tlist{display:grid;gap:9px}
.trow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
/* Die Uhrzeit bleibt neutral – Grün ist hier für den Zähler reserviert,
   der sich bewegt. Zwei grüne Elemente nebeneinander nehmen sich das
   Gewicht gegenseitig. */
.trow .tt{font-size:12.5px;font-weight:700;color:#5b6a5f;background:var(--soft);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;white-space:nowrap}
.trow .tn{flex:1;font-size:14px;font-weight:600}
.trow .tn span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:1px}
.trow .tc{
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:8px 12px;
}
.trow .tc em{font-style:normal;color:var(--muted);font-weight:500}

/* Ampel für den Stand einer Verordnung */
.vstat{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:6px;white-space:nowrap}
.vstat i{width:7px;height:7px;border-radius:50%;display:block}
.vstat.ok{color:var(--green-ink);background:var(--tint);border:1px solid var(--tint-line)}
.vstat.ok i{background:var(--green-ink)}
.vstat.warn{color:#8a6516;background:#fbf3e3;border:1px solid #eddcb4}
.vstat.warn i{background:#c9922f}
.vstat.end{color:var(--muted);background:var(--soft);border:1px solid var(--line)}
.vstat.end i{background:#a9b0a3}

/* ==========================================================================
   Ausgangsrechnungen – eigene Bausteine
   ========================================================================== */
/* Honorarnote als Panel, hell */
.hono{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  box-shadow:0 22px 44px -30px rgba(12,42,24,.5)}
.hono-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.hono-h b{display:block;font-family:var(--font-d);font-size:18px;font-weight:700;letter-spacing:-.03em}
.hono-h .nr{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.hono-r{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-top:1px solid var(--line-soft);font-size:14px}
.hono-r:first-of-type{border-top:none}
.hono-r b{font-weight:700;font-variant-numeric:tabular-nums}
.hono-tot{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  border-top:1.5px solid var(--ink);margin-top:4px;padding-top:13px}
.hono-tot span{font-family:var(--font-d);font-size:16px;font-weight:650;letter-spacing:-.02em}
.hono-tot b{font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* Empfänger-Umschalter: Patient oder abweichende Person */
.emp{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0 4px}
.empbox{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative}
.empbox.hl{background:#fff;border:1.5px solid var(--forest);padding-top:16px}
.empbox .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.empbox strong{display:block;font-size:14px;font-weight:650;letter-spacing:-.015em}
.empbox em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.empbadge{position:absolute;top:-11px;right:-4px;font-size:10.5px;font-weight:700;
  color:var(--lime);background:var(--forest);padding:4px 9px;border-radius:6px;white-space:nowrap}

/* Statuskette Entwurf – Offen – Bezahlt */
.pipe{display:flex;align-items:flex-start;gap:0;position:relative;padding:6px 0 2px}
.pipe .ps{flex:1;text-align:center;position:relative;z-index:1}
.pipe .pd{width:30px;height:30px;border-radius:50%;background:var(--green-ink);
  border:2px solid var(--green-ink);color:var(--lime);
  display:flex;align-items:center;justify-content:center;margin:0 auto 9px}
.pipe .pd svg{width:14px;height:14px}
.pipe .pt{display:block;font-size:13px;font-weight:650}
.pipe .pm{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.pipe .pl{position:absolute;top:15px;left:16%;right:16%;height:2px;background:var(--line);z-index:0}
.pipe .pl i{display:block;height:100%;background:var(--green-ink);width:100%}

/* Senden-Knopf im Mockup */
.sendbtn{background:var(--forest);color:#fff;border-radius:11px;padding:13px;margin-top:15px;
  display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:650}
.sendbtn svg{width:15px;height:15px;color:var(--lime)}
.sendnote{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;
  color:var(--green-ink);font-weight:650;margin-top:11px}
.sendnote svg{width:14px;height:14px}

/* --- Zählring: Beschriftung außerhalb ------------------------------------
   Innerhalb des Rings lief „Einheiten offen" in den Bogen hinein und war
   nicht mehr lesbar. */
.vring{width:138px;height:138px}
.vring svg{width:138px;height:138px}
.vring circle{stroke-width:9}
.vring .n{font-size:38px}
.vlabel-out{
  text-align:center;margin-top:9px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.62);
}
/* Wechselnde Angaben im Hero */
.pc{position:relative;display:inline-block;text-align:left;vertical-align:bottom;white-space:nowrap}
.pc>span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.pc>span:first-child{position:relative;opacity:1}
.kr .pc,.kr b .pc{text-align:right}
.kr .pc>span{left:auto;right:0}
.nc{position:relative;display:inline-block;text-align:right;vertical-align:bottom}
.nc>span{position:absolute;right:0;top:0;opacity:0}
.nc>span:first-child{position:relative;opacity:1}

/* --- Formular-Ablauf im Beleg-Layout ------------------------------------
   Nutzt dieselbe Mechanik wie der ausgelesene Beleg, sieht aber aus wie
   eine Eingabemaske: Beschriftung oben, Feld darunter. */
.doc.docform{padding:26px 26px 26px 48px}
.docform .doc-top b{font-size:17px}
.docform .drow{display:block;padding:0;margin:0 -8px 11px}
.docform .drow:last-child{margin-bottom:0}
.docform .drow .fl{
  display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 5px 8px;
}
.docform .drow .fv{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:9px;background:var(--soft);
  padding:10px 12px;font-size:14px;font-weight:600;
}
.docform .drow .fv svg{width:12px;height:12px;color:var(--muted)}
.docform .drow.hl{background:transparent;box-shadow:none;padding:0}
.docform .drow .bn{top:26px}
.docform .fsave{
  position:relative;
  background:var(--forest);color:#fff;border-radius:10px;padding:12px;margin-top:16px;
  text-align:center;font-size:13px;font-weight:650;
}
.docform .fsave .bn{top:50%;transform:translateY(-50%)}
.docform .fnote{font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.45}

/* --- Verordnungsauswahl in der Rechnungsmaske --------------------------- */
.vsel{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.vsel-h{display:grid;grid-template-columns:26px 1fr 58px 66px 76px;gap:8px;
  padding:8px 10px;background:var(--soft);border-bottom:1px solid var(--line);
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.vsel-r{display:grid;grid-template-columns:26px 1fr 58px 66px 76px;gap:8px;
  align-items:center;padding:11px 10px;font-size:13px;font-weight:600}
.vsel-r .cbx{width:17px;height:17px;border-radius:5px;background:var(--green-ink);color:#fff;
  display:flex;align-items:center;justify-content:center}
.vsel-r .cbx svg{width:11px;height:11px}
.vsel-r .num{text-align:right;font-variant-numeric:tabular-nums}
.vsel-r .num.box{border:1px solid var(--line);border-radius:6px;padding:4px 7px;background:var(--soft)}
.vsel-sum{display:flex;justify-content:flex-end;gap:9px;align-items:baseline;
  padding:11px 12px 0;font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.02em}
.vsel-sum em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.docform .drow .fv.plain{background:#fff;padding:0;border:none}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.f3 .fs{border:1px solid var(--line);border-radius:9px;background:var(--soft);padding:9px 11px;font-size:13px;font-weight:600}
.f3 .fs span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}

/* --- Zahlungsart: drei Möglichkeiten nebeneinander ----------------------- */
.fopts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fopt{
  border:1px solid var(--line);border-radius:9px;background:var(--soft);
  padding:10px 8px;font-size:12.5px;font-weight:650;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
}
.fopt svg{width:13px;height:13px;flex-shrink:0}
.fopt.on{background:var(--tint);border-color:var(--tint-line);color:var(--green-ink)}

/* --- Formular in unserer Designsprache -----------------------------------
   Zuvor blieb jedes ausgefüllte Feld grün getönt zurück – die Karte wurde
   dadurch ein einziger grüner Block. Jetzt bleiben die Felder weiß mit
   ruhiger Linie, und ein kleiner dunkler Haken markiert das Erledigte. */
.docform .drow .fv{background:#fff;border-color:var(--line)}
.docform .drow .fl{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 8px 5px;
}
.docform .fok{
  width:16px;height:16px;border-radius:50%;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.docform .fok svg{width:9px;height:9px}
.docform .doc-top{background:transparent}
.docform .drow .fl{color:#8a9188}
.docform .vsel{border-color:var(--line)}
.docform .vsel-h{background:var(--soft)}
.docform .fopt{background:#fff}
.docform .fopt.on{background:var(--forest);border-color:var(--forest);color:#fff}
.docform .fopt.on svg{color:var(--lime)}

/* --- Verordnungskarten im Umlauf ----------------------------------------- */
.vkstack{display:grid;gap:12px}
.vsw{position:relative;display:inline-block}
.vsw>span{position:absolute;right:0;top:0;opacity:0;white-space:nowrap}
.vsw>span:first-child{position:relative;opacity:1}
.vcnt{position:relative;display:inline-block;text-align:right;vertical-align:bottom}
.vcnt>span{position:absolute;right:0;top:0;opacity:0}
.vcnt>span:first-child{position:relative;opacity:1}
.vok-bar i{width:var(--w2,50%)}

/* ==========================================================================
   Patienten-Dokumentation – eigene Bausteine
   ========================================================================== */
/* Ein Eintrag im Behandlungsverlauf */
.dkent{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.dkent-h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.dkent-h .dot{width:7px;height:7px;border-radius:50%;background:var(--green-ink);flex-shrink:0}
.dkent-h b{font-size:13.5px;font-weight:700;flex:1}
.dkent p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.dkent .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dkent .tags span{font-size:11px;font-weight:650;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);border-radius:5px;padding:3px 8px}
.dkstack{display:grid;gap:10px}

/* Schmerzverlauf als Balken */
.nrs{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  box-shadow:0 22px 44px -30px rgba(12,42,24,.5)}
.nrs-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.nrs-h b{font-family:var(--font-d);font-size:15.5px;font-weight:650;letter-spacing:-.02em}
.nrs-plot{display:flex;align-items:flex-end;gap:10px;height:132px;padding-bottom:2px;
  border-bottom:1px solid var(--line)}
.nb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:7px}
.nb em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
/* Ein Farbverlauf innerhalb der Marke statt Ocker neben Grün: je höher der
   Schmerzwert, desto dunkler der Balken. Das Hellerwerden ist die Aussage. */
.nb i{display:block;width:100%;border-radius:7px 7px 3px 3px;
  background:var(--c,var(--green-ink));height:var(--h,50%)}
.nb.now i{background:var(--lime)}
.nb.now em{color:var(--green-ink)}
.nrs-x{display:flex;gap:10px;margin-top:9px}
.nrs-x span{flex:1;text-align:center;font-size:11px;color:var(--muted)}
.nrs-note{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:13px;color:var(--green-ink);font-weight:600}
.nrs-note svg{width:15px;height:15px}

/* Textbausteine, die in das Feld springen */
.tpl{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.tpl span{font-size:12px;font-weight:650;color:var(--muted);background:var(--soft);
  border:1px solid var(--line);border-radius:7px;padding:6px 10px;white-space:nowrap}

/* ==========================================================================
   Kalender – eigene Bausteine
   ========================================================================== */
.dayplan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  box-shadow:0 22px 44px -30px rgba(12,42,24,.5);position:relative}
.dp-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.dp-h b{font-family:var(--font-d);font-size:15.5px;font-weight:650;letter-spacing:-.02em}
.dp-grid{position:relative;display:grid;gap:0}
.dp-slot{display:grid;grid-template-columns:46px 1fr;gap:12px;min-height:46px;
  border-top:1px solid var(--line-soft);padding:6px 0}
.dp-slot:first-child{border-top:none}
.dp-t{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:9px}
.dp-ev{background:var(--tint);border:1px solid var(--tint-line);border-left:3px solid var(--green-ink);
  border-radius:9px;padding:8px 11px}
.dp-ev b{display:block;font-size:13px;font-weight:650}
.dp-ev span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.dp-ev.free{background:transparent;border:1px dashed var(--line);border-left:1px dashed var(--line);
  color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:center}
/* Die Jetzt-Linie wandert über den Tag */
.dp-now{position:absolute;left:46px;right:0;height:2px;background:#c9302c;z-index:2;top:0}
.dp-now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;
  border-radius:50%;background:#c9302c}

/* Was ein Termin auslöst – drei Folgen */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tri{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:center}
.tri .ti{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--muted);
  display:flex;align-items:center;justify-content:center;margin:0 auto 13px}
.tri .ti svg{width:19px;height:19px}
.tri b{display:block;font-size:15px;font-weight:650;letter-spacing:-.015em;margin-bottom:6px}
.tri p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
.tri .tv{display:inline-block;margin-top:11px;font-size:12px;font-weight:700;color:var(--muted);
  background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:4px 9px}

/* ==========================================================================
   Preise
   ========================================================================== */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:0 auto}
.plan{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 30px;
  display:flex;flex-direction:column;position:relative}
.plan.hi{border:1.5px solid var(--forest);box-shadow:0 30px 64px -38px rgba(12,42,24,.6)}
.plan-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:4px 9px;margin-bottom:16px}
.plan.hi .plan-tag{color:var(--lime);background:var(--forest);border-color:var(--forest)}
.plan h3{font-size:23px;letter-spacing:-.03em;margin-bottom:6px}
.plan .sub{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.pprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pprice .amt{font-family:var(--font-d);font-size:46px;font-weight:700;letter-spacing:-.055em;line-height:1;position:relative}
/* Ohne JS steht der gültige Preis da. Der alte Preis und der Countdown
   gehören zur Animation, nicht zum Grundzustand. */
.plan .prc-b{display:none}
.plan .prc-a{display:inline-block}
.pprice .per{font-size:14px;color:var(--muted)}
.pprice .old{font-family:var(--font-d);font-size:22px;font-weight:600;color:#a8afa4;
  letter-spacing:-.03em;text-decoration:line-through;text-decoration-thickness:2px}
.psave{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:12px;font-weight:700;color:var(--forest);background:var(--lime);
  border-radius:6px;padding:4px 10px;margin-bottom:18px}
.plan ul{list-style:none;display:grid;gap:8px;margin:0 0 20px;padding:0}
.plan li{display:flex;gap:10px;font-size:14px;line-height:1.45;align-items:flex-start}
.plan li svg{width:14px;height:14px;color:var(--green-ink);flex-shrink:0;margin-top:4px}
.plan .btn{width:100%;margin-top:auto}
.plan-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.45}

/* Umsatzregler */
.calc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 34px;
  max-width:760px;margin:0 auto;box-shadow:0 26px 56px -40px rgba(12,42,24,.5)}
.calc-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:20px}
.calc-h b{font-family:var(--font-d);font-size:17px;font-weight:650;letter-spacing:-.025em}
.calc-h .uv{font-family:var(--font-d);font-size:26px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.crail{position:relative;height:10px;border-radius:100px;background:#e6e8df;margin:0 0 6px}
.crail .cfill{position:absolute;left:0;top:0;bottom:0;border-radius:100px;background:var(--green-ink);width:30%}
.crail .cknob{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;
  border:2.5px solid var(--forest);transform:translate(-50%,-50%);left:30%;
  box-shadow:0 6px 14px -4px rgba(12,42,24,.5)}
.crail .cmark{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--ink);left:50%;opacity:.28}
.cscale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:20px}
.cout{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:20px}
.cout .ci{width:38px;height:38px;border-radius:11px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cout .ci svg{width:18px;height:18px}
.cout b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.015em}
.cout span{display:block;font-size:13px;color:var(--muted);margin-top:2px}

@media(max-width:900px){.plans{grid-template-columns:1fr}.calc{padding:24px 20px}}

/* ==========================================================================
   Textseiten – Impressum, Datenschutz, AGB, Kontakt, Über uns
   ========================================================================== */
.txtpage{padding:56px 0 30px}
.txtpage .lede{font-size:17px;color:var(--muted);line-height:1.65;max-width:58ch;margin-top:16px}
.txtbody{max-width:760px;margin:0 auto}
.txtbody h2{font-size:24px;letter-spacing:-.03em;margin:44px 0 14px}
.txtbody h2:first-child{margin-top:0}
.txtbody h3{font-size:17px;letter-spacing:-.02em;margin:26px 0 8px}
.txtbody p{font-size:15.5px;line-height:1.7;color:#3f4a42;margin-bottom:14px}
.txtbody ul{list-style:none;display:grid;gap:9px;margin:0 0 18px}
.txtbody ul li{display:flex;gap:11px;font-size:15px;line-height:1.6;color:#3f4a42}
.txtbody ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green-ink);
  flex-shrink:0;margin-top:9px}
.txtbody a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
.dl{display:grid;grid-template-columns:180px 1fr;gap:10px 20px;margin:0 0 20px;
  font-size:15px;line-height:1.6}
.dl dt{color:var(--muted)}
.dl dd{margin:0;color:var(--ink);font-weight:600}
.tbox{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:22px 0}
.tbox b{display:block;font-family:var(--font-d);font-size:16px;font-weight:650;letter-spacing:-.02em;margin-bottom:8px}
.tbox p:last-child{margin-bottom:0}
.todo{background:#fbf3e3;border:1px solid #eddcb4;border-radius:14px;padding:16px 18px;margin:18px 0;
  font-size:14px;line-height:1.6;color:#7a5a12}
.todo b{display:block;margin-bottom:5px;font-weight:700}
.stand{font-size:13.5px;color:var(--muted);margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.tm{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;
  box-shadow:0 24px 50px -40px rgba(12,42,24,.45)}
.tm .av{width:56px;height:56px;border-radius:16px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  font-family:var(--font-d);font-size:19px;font-weight:700;letter-spacing:-.03em}
.tm .av.open{background:var(--soft);color:var(--muted);border:1.5px dashed var(--line)}
.tm b{display:block;font-family:var(--font-d);font-size:19px;font-weight:650;letter-spacing:-.025em}
.tm .role{display:block;font-size:13px;font-weight:700;color:var(--green-ink);margin-top:3px}
.tm p{font-size:14px;color:var(--muted);line-height:1.6;margin-top:11px}

/* Kontaktwege */
.kways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.kw{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px}
.kw .ki{width:38px;height:38px;border-radius:11px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.kw .ki svg{width:18px;height:18px}
.kw b{display:block;font-size:16px;font-weight:650;letter-spacing:-.02em;margin-bottom:5px}
.kw p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 10px}
.kw a{font-size:14.5px;font-weight:650;color:var(--green-ink)}

@media(max-width:900px){
  .team,.kways{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr;gap:2px 0}
  .dl dt{margin-top:10px}
}

/* --- Hero-Grafik der Dokumentation: ein Eintrag entsteht live ------------ */
.dkw{background:#123222;border-radius:16px;padding:14px}
.dkw-h{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.dkw-h .di{width:26px;height:26px;border-radius:8px;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dkw-h .di svg{width:13px;height:13px}
.dkw-h b{font-size:12px;font-weight:650;color:#fff;flex:1;letter-spacing:-.01em}
.dkw-h .pt{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.dkf{margin-bottom:11px}
.dkf>span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:5px}
.dkf .box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:9px;padding:9px 11px;min-height:34px;font-size:11.5px;color:#fff;line-height:1.4}
/* Schreibmaschine */
.typ{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:100%}
.caret{display:inline-block;width:1.5px;height:12px;background:var(--lime);vertical-align:-2px;margin-left:1px}
/* Bausteine, die hineinspringen */
.dkchips{display:flex;flex-wrap:wrap;gap:5px}
.dkchips span{font-size:10px;font-weight:650;color:var(--forest);background:var(--lime);
  border-radius:5px;padding:4px 8px;white-space:nowrap}
/* Schmerzregler */
.dkslide{display:flex;align-items:center;gap:10px}
.dkrail{position:relative;flex:1;height:6px;border-radius:100px;background:rgba(255,255,255,.14)}
.dkrail i{position:absolute;left:0;top:0;bottom:0;border-radius:100px;background:var(--lime);width:30%}
.dkrail .kn{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);left:30%;box-shadow:0 3px 8px -2px rgba(0,0,0,.7)}
.dkslide .val{font-size:12px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
/* Speichern */
.dksave{background:var(--lime);color:var(--forest);border-radius:9px;padding:10px;text-align:center;
  font-size:11.5px;font-weight:700;margin-top:13px}
.dkdone{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;
  font-size:10.5px;font-weight:650;color:var(--lime)}
.dkdone svg{width:12px;height:12px}

/* --- Tagesplan auf dunklem Grund (Hero) ---------------------------------- */
.dayplan.dark{background:#123222;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.7);width:340px}
.dayplan.dark .dp-h b{color:#fff}
.dayplan.dark .dp-h .chip{color:var(--lime);background:rgba(196,240,74,.12);border-color:rgba(196,240,74,.3)}
.dayplan.dark .dp-slot{border-color:rgba(255,255,255,.09)}
.dayplan.dark .dp-t{color:rgba(255,255,255,.45)}
.dayplan.dark .dp-ev{background:rgba(196,240,74,.13);border-color:rgba(196,240,74,.24);
  border-left-color:var(--lime)}
.dayplan.dark .dp-ev b{color:#fff}
.dayplan.dark .dp-ev span{color:rgba(255,255,255,.6)}
.dayplan.dark .dp-ev.free{background:transparent;border:1px dashed rgba(255,255,255,.2);
  border-left:1px dashed rgba(255,255,255,.2);color:rgba(255,255,255,.42)}
.dayplan.dark .dp-now{background:var(--lime);box-shadow:0 0 12px rgba(196,240,74,.55)}
.dayplan.dark .dp-now::before{background:var(--lime)}

/* --- Wochenraster: sieht aus wie ein Kalender, nicht wie ein Diagramm ---- */
.week{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  box-shadow:0 22px 44px -30px rgba(12,42,24,.5)}
.week-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.week-h b{font-family:var(--font-d);font-size:15.5px;font-weight:650;letter-spacing:-.02em}
.week-h .au{font-size:12.5px;font-weight:700;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);border-radius:6px;padding:4px 9px;white-space:nowrap}
.wcal{display:grid;grid-template-columns:48px repeat(5,1fr);gap:5px}
.wcal .hd{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding-bottom:5px}
.wcal .hd.on{color:var(--ink)}
.wcal .tm{font-size:10px;color:var(--muted);display:flex;align-items:center;
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:4px}
.wcal .cell{min-height:34px;border-radius:7px;background:var(--soft);border:1px solid var(--line-soft)}
.wcal .cell.ev{
  background:var(--tint);border:1px solid var(--tint-line);border-left:3px solid var(--green-ink);
  display:flex;flex-direction:column;justify-content:center;padding:4px 6px;
}
.wcal .cell.ev b{font-size:10.5px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.wcal .cell.ev span{font-size:9px;color:var(--muted);line-height:1.15;margin-top:1px}
.wcal .cell.ev.m{border-left-color:#4a8256}
.wcal .cell.ev.s{border-left-color:#7fae87}
.wcal .cell.free{
  background:#fff;border:1.5px dashed var(--green-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--green-ink);
}
.week-note{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:13px;color:var(--green-ink);font-weight:600}
.week-note svg{width:15px;height:15px}

/* Neben dem breiten Tagesplan sitzt die Plakette unten – oben verdeckte
   sie den Termin-Zähler. */
.phone-badge.low{top:auto;bottom:-20px;right:-24px}

/* --- Preise: die Tarifkarten ragen in das grüne Kopffeld ------------------
   Der Hero wird flacher und bekommt unten Platz, die Karten schieben sich
   mit negativem Abstand darüber. Dadurch sind sie das Erste, was auffällt. */
.hero.pricehero{padding:24px 0 128px}
.hero.pricehero .hero-grid{grid-template-columns:1fr;text-align:center;gap:0}
.hero.pricehero .hero-in{max-width:none}
.hero.pricehero .pill,.hero.pricehero .crumb{justify-content:center}
.hero.pricehero .crumb{text-align:center}
.hero.pricehero h1{max-width:20ch;margin:0 auto;font-size:clamp(34px,4.4vw,52px)}
.hero.pricehero .sub{font-size:16.5px;margin:16px auto 24px;max-width:52ch}
.hero.pricehero .hero-metrics{margin-top:24px}
.hero.pricehero .sub{margin-left:auto;margin-right:auto;text-align:center}
.hero.pricehero .hero-btns{justify-content:center}
.sec.plans-up{padding-top:0;padding-bottom:44px;margin-top:-96px;position:relative;z-index:2}
.plans-up .plans{max-width:940px}
.plans-up .plan{box-shadow:0 40px 80px -46px rgba(0,0,0,.6)}
.plans-up .plan.hi{box-shadow:0 46px 90px -44px rgba(0,0,0,.7)}
.plans-note{text-align:center;font-size:13.5px;color:var(--muted);margin-top:22px}
@media(max-width:900px){
  .hero.pricehero{padding-bottom:104px}
  .sec.plans-up{margin-top:-80px}
}

/* ==========================================================================
   Steuererklärung – eigene Bausteine
   ========================================================================== */
/* Formularstapel: E1, E1a und die Beilagen */
.forms{display:grid;gap:11px}
.frm{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:15px 17px}
.frm .fc{width:44px;height:52px;border-radius:6px;background:var(--soft);border:1px solid var(--line);
  position:relative;flex-shrink:0;overflow:hidden}
.frm .fc::before{content:"";position:absolute;left:7px;right:7px;top:9px;height:2px;border-radius:2px;background:#d3d7cc}
.frm .fc::after{content:"";position:absolute;left:7px;right:14px;top:15px;height:2px;border-radius:2px;background:#d3d7cc}
.frm .fk{position:absolute;left:0;right:0;bottom:0;padding:4px 0;text-align:center;
  font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--forest);background:var(--lime)}
.frm .ft{flex:1;min-width:0}
.frm .ft b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.015em}
.frm .ft span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.frm .fs{font-size:11.5px;font-weight:700;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);border-radius:6px;padding:4px 9px;white-space:nowrap}
.frm.opt{background:var(--soft)}
.frm.opt .fk{background:#dfe3d8;color:var(--muted)}
.frm.opt .fs{color:var(--muted);background:#fff;border-color:var(--line)}

/* Ablauf als nummerierte Spur */
.flow{display:grid;gap:0;position:relative}
.flow::before{content:"";position:absolute;left:17px;top:20px;bottom:20px;width:2px;background:var(--line)}
.fst{display:grid;grid-template-columns:36px 1fr;gap:0 18px;padding:0 0 26px;position:relative}
.fst:last-child{padding-bottom:0}
.fst .fn{width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-d);
  font-size:14px;font-weight:700;position:relative;z-index:1;box-shadow:0 0 0 5px #fff}
.fst b{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.02em;margin-bottom:5px;padding-top:7px}
.fst p{font-size:14.5px;color:var(--muted);line-height:1.58;margin:0}
.fst .who{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;
  border-radius:5px;padding:3px 8px}
.fst .who.du{color:var(--muted);background:var(--soft);border:1px solid var(--line)}
.fst .who.wir{color:var(--lime);background:var(--forest)}