/* ==========================================================================
   Startseite V2 – Bausteine
   Lädt nach v4.css, v6.css und v7.css.
   ========================================================================== */

/* --- 0. Bausteine, die es im neuen System noch nicht gab ----------------- */
.hero-rate{display:flex;align-items:center;gap:9px;font-size:14px;color:rgba(255,255,255,.8);font-weight:500}
.hero-rate .stars{color:var(--lime);letter-spacing:2.5px}
.pill.on-dark{color:var(--lime);background:rgba(196,240,74,.1);border-color:rgba(196,240,74,.24)}
.pill.on-dark svg{width:13px;height:13px}
.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:650;color:var(--ink);
  border-bottom:1.5px solid var(--line);padding-bottom:2px;
  transition:border-color .16s,gap .16s;
}
.tlink:hover{border-color:var(--ink);gap:13px}
.tlink svg{width:14px;height:14px}
.mt-2{margin-top:24px}

/* --- 1. Hero-Grafik: Beleg → KI → erkannte Daten ------------------------- */
.kiflow{
  background:#fff;border-radius:20px;padding:22px;position:relative;
  box-shadow:0 40px 80px -44px rgba(0,0,0,.55);color:var(--ink);
}
.kf-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.kf-ico{
  width:38px;height:38px;border-radius:11px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kf-ico svg{width:19px;height:19px}
.kf-head b{font-family:var(--font-d);font-size:17px;font-weight:650;letter-spacing:-.025em;flex:1}
.kf-badge{
  display:inline-flex;align-items:center;gap:7px;background:var(--soft);border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:100px;
}
.kf-badge i{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block}

.kf-body{display:grid;grid-template-columns:auto 14px auto 14px 1fr;align-items:center;gap:8px}
.kf-arrow{color:#c6cabf;display:flex;justify-content:center}
.kf-arrow svg{width:13px;height:13px}

.kf-receipt{background:var(--soft);border-radius:12px;padding:12px}
.kf-paper{background:#fff;border-radius:8px;padding:11px 10px;box-shadow:0 2px 8px -4px rgba(0,0,0,.18)}
.kf-paper .rt{font-size:10px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.kf-paper .rl-lime{height:3px;background:var(--lime);border-radius:2px;margin:5px 0 7px}
.kf-paper .rd{font-size:8.5px;color:var(--muted);margin-bottom:8px}
.kf-paper .rline{height:3px;background:#e6e7df;border-radius:2px;margin-bottom:4px}
.kf-paper .rline.s{width:62%}
.kf-paper .rsum{font-size:10.5px;font-weight:800;margin-top:8px;letter-spacing:-.02em}

.kf-spark{
  width:62px;height:62px;border-radius:50%;background:var(--soft);
  display:flex;align-items:center;justify-content:center;position:relative;
  border:1px solid var(--line);
}
.kf-spark i{
  width:34px;height:34px;border-radius:10px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;
}
.kf-spark svg{width:20px;height:20px}

.kf-res{background:var(--soft);border-radius:14px;padding:15px}
.kf-res-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kf-res-h b{font-family:var(--font-d);font-size:15px;font-weight:650}
.kf-res-h span{font-size:12px;font-weight:700;color:var(--green-ink)}
.kf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #e5e6de;font-size:13.5px;color:var(--muted)}
.kf-row:first-of-type{border-top:none}
.kf-row b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.kf-row .cat{background:var(--tint);color:var(--green-ink);border:1px solid var(--tint-line);font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px}
.kf-done{
  margin-top:12px;background:var(--forest);color:#fff;border-radius:10px;padding:12px 10px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13px;font-weight:650;white-space:nowrap;
}
.kf-done svg{width:15px;height:15px;color:var(--lime);flex-shrink:0}

.kf-float{
  position:absolute;right:-18px;bottom:-30px;background:#fff;border-radius:14px;
  padding:12px 16px;display:flex;align-items:center;gap:11px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.4);
}
.kf-float .fi{
  width:34px;height:34px;border-radius:10px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kf-float .fi svg{width:17px;height:17px}
.kf-float .ft{font-size:11px;color:var(--muted);line-height:1.2}
.kf-float .fv{font-family:var(--font-d);font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px;letter-spacing:-.02em}
.kf-float .fv svg{width:14px;height:14px;color:var(--green-ink)}

/* --- 2. Vertrauens-Streifen unter dem Hero ------------------------------ */
.trustline{text-align:center}
.trustline .tl-t{font-size:13px;color:var(--muted);margin-bottom:16px}
.trustchips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.trustchips span{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:600;padding:9px 15px;border-radius:100px;
}
.trustchips svg{width:13px;height:13px;color:var(--green-ink)}

/* --- 3. Funktions-Blöcke, abwechselnd ----------------------------------- */
.fblock{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.fblock.flip .fb-media{order:-1}
.fblock .eyebrow{display:block;margin-bottom:12px}
.fblock h3{font-size:clamp(22px,2.5vw,29px);letter-spacing:-.03em;margin-bottom:12px}
.fblock>div>p{font-size:15.5px;color:var(--muted);line-height:1.62;margin-bottom:20px;max-width:48ch}
.fb-media{min-width:0}

/* --- 4. Zeitstrahl-Karten ----------------------------------------------- */
.tlcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tlcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
.tlcard .tag{
  display:inline-block;align-self:flex-start;background:var(--lime);color:var(--forest);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:6px 12px;border-radius:7px;margin-bottom:18px;
}
.tlcard h3{font-size:20px;letter-spacing:-.025em;margin-bottom:10px}
.tlcard>p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:20px;flex:1}
.tlbox{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:4px 14px}
.tlrow{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:9px 0}
.tlrow+.tlrow{border-top:1px solid #e7e8e0}
.tlrow .ck{
  width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tlrow .ck svg{width:11px;height:11px}
.tlrow .grow{flex:1;font-weight:500}
.tlrow .mini{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--lime);color:var(--forest);white-space:nowrap}
.tlrow .amt{font-size:13px;font-weight:700;color:var(--green-ink);white-space:nowrap}
.tlfile{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px}
.tlfile-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.tlfile-h b{font-size:14px;font-weight:650}
.tlfile-h span{font-size:11.5px;font-weight:700;color:var(--green-ink)}
.tlbar{height:7px;border-radius:100px;background:#e4e5dd;margin-bottom:7px}
.tlbar.w1{width:78%}
.tlbar.w2{width:54%}
.tlbar.done{background:var(--lime);width:66%;margin-bottom:0}

/* --- 5. Alleinstellungs-Band -------------------------------------------- */
.uspband{
  background:var(--forest);border-radius:22px;padding:46px;
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  position:relative;overflow:hidden;
}
.uspband::after{
  content:"";position:absolute;top:-130px;right:-90px;width:440px;height:440px;
  background:radial-gradient(circle,rgba(196,240,74,.13),transparent 66%);pointer-events:none;
}
.uspband>*{position:relative;z-index:1}
.uspband h2{color:#fff;font-size:clamp(25px,2.9vw,35px);margin:16px 0 14px}
.uspband .lead{color:rgba(255,255,255,.66);font-size:15.5px;line-height:1.62;margin-bottom:22px;max-width:46ch}
.uspband .blist li{color:#fff;font-size:14.5px}
.uspband .blist li svg{color:var(--lime)}
.usp-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:22px}
.usp-flow{display:flex;align-items:flex-start;gap:6px;margin-bottom:20px}
.usp-step{text-align:center;flex:1}
.usp-step .si{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.usp-step .si svg{width:21px;height:21px}
.usp-step .si.lime{background:var(--lime);color:var(--forest)}
.usp-step .si.ghost{background:rgba(196,240,74,.09);border:1.5px solid rgba(196,240,74,.5);color:var(--lime)}
.usp-step span{font-size:12px;color:rgba(255,255,255,.68);line-height:1.35;display:block}
.usp-arrow{color:rgba(255,255,255,.3);flex-shrink:0;margin-top:13px}
.usp-arrow svg{width:15px;height:15px}
.usp-note{background:rgba(196,240,74,.08);border:1px solid rgba(196,240,74,.22);border-radius:12px;padding:16px 18px}
.usp-note b{display:flex;align-items:center;gap:9px;color:#fff;font-size:14.5px;font-weight:650;margin-bottom:7px}
.usp-note b svg{width:15px;height:15px;color:var(--lime);flex-shrink:0}
.usp-note p{font-size:13px;color:rgba(255,255,255,.62);line-height:1.55;margin:0}
.usp-note .fine{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:rgba(255,255,255,.42);margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.usp-note .fine svg{width:13px;height:13px;flex-shrink:0;margin-top:2px}

/* --- 5b. Kleine Fortschrittsbalken im Verordnungs-Panel ----------------- */
.vp{height:6px;border-radius:100px;background:#e6e7df;margin-top:9px;overflow:hidden}
.vp i{display:block;height:100%;border-radius:100px;background:var(--green-ink)}
.vp.warn i{background:var(--warn)}
.vnote{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;
  background:var(--warn-bg);border:1px solid #f0dcc0;border-radius:11px;padding:12px 14px;
  font-size:12.5px;color:#8a5a18;line-height:1.5;
}
.vnote svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:var(--warn)}

/* --- 5c. Bewertungs-Slider ---------------------------------------------- */
.rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.rscore{display:flex;align-items:center;gap:14px}
.rscore .rv{font-family:var(--font-d);font-size:38px;font-weight:700;letter-spacing:-.045em;line-height:1}
.rscore .rv span{font-size:17px;color:var(--muted);font-weight:500}
.rscore .rs{font-size:14px;color:var(--muted);line-height:1.4}
.rscore .rs .stars{display:block;color:#f2b21a;letter-spacing:2.5px;font-size:14px;margin-bottom:3px}

.rslider{position:relative}
.rs-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 3);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
}
.rs-track::-webkit-scrollbar{display:none}
.rcard{
  scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;display:flex;flex-direction:column;
}
/* Sterne in der Farbe, in der Sterne nun einmal erwartet werden */
.rcard .rstars{color:#f2b21a;letter-spacing:2.5px;font-size:14px;margin-bottom:14px}
.rcard p{font-size:15px;line-height:1.6;color:var(--ink);flex:1;margin-bottom:20px}
.rcard .rby{display:flex;align-items:center;gap:12px}
.rcard .rav{
  width:42px;height:42px;border-radius:50%;background:var(--soft);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-d);font-weight:700;font-size:13px;
  object-fit:cover;border:1px solid var(--line);
}
.rcard .rn{display:block;font-size:14px;font-weight:650}
.rcard .rr{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

.rs-nav{display:flex;gap:8px;flex-shrink:0}
.rs-btn{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .16s,background .16s;
}
.rs-btn:hover{border-color:var(--ink)}
.rs-btn:disabled{opacity:.35;cursor:default}
.rs-btn:disabled:hover{border-color:var(--line)}
.rs-btn svg{width:16px;height:16px}

/* --- 5d. Kurzer Beleg-Satz direkt unter dem Hero ------------------------ */
.catchline{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  text-align:center;
}
.catchline .cl-num{
  font-family:var(--font-d);font-size:clamp(34px,4vw,46px);font-weight:700;
  letter-spacing:-.045em;line-height:1;color:var(--green-ink);
}
.catchline .cl-txt{font-size:16px;color:var(--ink);font-weight:500;max-width:40ch;text-align:left;line-height:1.45}
.catchline .cl-txt em{font-style:normal;color:var(--muted);display:block;font-size:13.5px;font-weight:400;margin-top:4px}

/* --- 5e. Vergleichstabelle als Karte ------------------------------------ */
.cmp3{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;
  width:100%;border-collapse:collapse;
}
.cmp3 thead th{
  font-size:14px;font-weight:650;color:var(--ink);text-align:center;padding:18px 16px;
  background:var(--soft);border-bottom:1px solid var(--line);
}
.cmp3 thead th:first-child{text-align:left;font-size:13.5px;font-weight:600;color:var(--muted)}
.cmp3 thead th.us{background:var(--tint-2)}
.cmp3 thead th.us .lg{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.cmp3 thead th.us .lg i{
  width:22px;height:22px;border-radius:6px;background:var(--lime);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cmp3 thead th.us .lg i svg{width:12px;height:12px;color:var(--forest)}
.cmp3 thead th.other{color:var(--muted);font-weight:600}
.cmp3 td{padding:17px 16px;border-bottom:1px solid var(--line-2);font-size:14.5px}
.cmp3 td:first-child{font-weight:500}
.cmp3 td.c{text-align:center;width:180px}
.cmp3 td.c.us{background:rgba(233,243,220,.42)}
.cmp3 tbody tr:last-child td{border-bottom:none}
.cmp3 .ok{color:var(--green-ink)}
.cmp3 .ok svg{width:20px;height:20px;margin:0 auto}
.cmp3 .nope{color:#c3c7bd}
.cmp3 .nope svg{width:18px;height:18px;margin:0 auto}
.cmp3 .half{color:#a8b09f}
.cmp3 .half svg{width:19px;height:19px;margin:0 auto}

/* --- 6. Vergleichstabelle (Variante ohne Rahmen) ------------------------ */
.cmp2{width:100%;border-collapse:collapse}
.cmp2 th{
  text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);padding:0 16px 12px 0;border-bottom:1.5px solid var(--ink);
}
.cmp2 th.c{text-align:center;width:150px}
.cmp2 th.c.us{color:var(--green-ink)}
.cmp2 td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500}
.cmp2 td.c{text-align:center;width:150px}
.cmp2 tr:last-child td{border-bottom:none}
.cmp2 .yes{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--lime);color:var(--forest);align-items:center;justify-content:center}
.cmp2 .yes svg{width:13px;height:13px}
.cmp2 .no{display:inline-flex;width:24px;height:24px;border-radius:50%;background:#eceee6;color:#a9aea5;align-items:center;justify-content:center}
.cmp2 .no svg{width:12px;height:12px}

/* --- 7. Datenschutz-Karten ---------------------------------------------- */
.dsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dscard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px}
.dscard .di{
  width:36px;height:36px;border-radius:10px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.dscard .di svg{width:18px;height:18px}
.dscard h4{font-size:17px;letter-spacing:-.022em;margin-bottom:8px}
.dscard p{font-size:14px;color:var(--muted);line-height:1.6}

@media(max-width:960px){
  .kf-body{grid-template-columns:1fr;gap:12px}
  .kf-arrow{transform:rotate(90deg)}
  .kf-spark{margin:0 auto}
  .kf-float{position:static;margin-top:16px;box-shadow:none;border:1px solid var(--line)}
  .fblock{grid-template-columns:1fr;gap:32px;padding:34px 0}
  .fblock.flip .fb-media{order:0}
  .tlcards,.dsgrid{grid-template-columns:1fr}
  .uspband{grid-template-columns:1fr;gap:32px;padding:30px 24px}
  .cmp2 th.c,.cmp2 td.c{width:88px}
  .cmp2 th,.cmp2 td{font-size:13.5px}
  .rs-track{grid-auto-columns:calc(100% - 42px)}
  .rhead{align-items:flex-start}
  .catchline{gap:10px}
  .catchline .cl-txt{text-align:center}
  .cmp3 td.c{width:96px}
  .cmp3 td,.cmp3 thead th{padding:14px 10px;font-size:13.5px}
}
@media(min-width:961px) and (max-width:1180px){
  .rs-track{grid-auto-columns:calc((100% - 16px) / 2)}
}


/* ==========================================================================
   Hero-Grafik: erst synchronisieren, dann Werte zeigen
   Ein Zyklus dauert 4,5 s. Solange der Scan läuft, dreht sich der Ring und
   die rechte Spalte zeigt nur die Beschriftungen. Erst danach erscheinen
   die ausgelesenen Werte.
   ========================================================================== */

/* Lade-Ring um das KI-Symbol */
.kf-ring{
  position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(44,92,56,.14);border-top-color:var(--green-ink);
  animation:kfSpin 1s linear infinite, kfRingFade 4.5s ease-in-out infinite;
}
@keyframes kfSpin{to{transform:rotate(360deg)}}
@keyframes kfRingFade{0%,36%{opacity:1}46%,100%{opacity:0}}

/* Häkchen, das den Ring nach dem Scan ablöst */
.kf-ok{
  position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--green-ink);opacity:0;
  animation:kfOkFade 4.5s ease-in-out infinite;
}
@keyframes kfOkFade{0%,42%{opacity:0}50%,90%{opacity:1}97%,100%{opacity:0}}

/* Scanlinie über dem Beleg */
.kf-paper{position:relative;overflow:hidden}
.kf-paper::after{
  content:"";position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(196,240,74,0),rgba(196,240,74,.45),rgba(196,240,74,0));
  animation:kfScan 4.5s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes kfScan{
  0%{transform:translateY(-50%);opacity:0}
  4%{opacity:1}
  32%{opacity:1}
  40%,100%{transform:translateY(260%);opacity:0}
}

/* Gestrichelte Markierung um die Summe, während gelesen wird */
.kf-paper .rsum{position:relative}
.kf-paper .rsum::after{
  content:"";position:absolute;inset:-4px -6px;border:1.5px dashed var(--green-ink);
  border-radius:5px;opacity:0;animation:kfDash 4.5s ease-in-out infinite;
}
@keyframes kfDash{0%,12%{opacity:0}20%,38%{opacity:1}46%,100%{opacity:0}}

/* Werte erscheinen erst nach dem Scan – Beschriftungen bleiben stehen */
.kf-val{opacity:0;animation:kfVal 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfVal{
  0%,42%{opacity:0;transform:translateY(4px)}
  50%,90%{opacity:1;transform:none}
  97%,100%{opacity:0;transform:translateY(4px)}
}
/* Platzhalterstrich, solange der Wert noch fehlt */
.kf-ph{display:inline-block;width:44px;height:7px;border-radius:4px;background:#e3e5dc;
  animation:kfPh 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfPh{0%,42%{opacity:1}50%,100%{opacity:0}}
.kf-slot{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;min-height:20px}
.kf-slot .kf-ph{position:absolute;right:0}

/* Zustandstext in der Kopfzeile wechselt mit */
.kf-badge .st{position:relative;display:inline-block;min-width:74px;text-align:left}
.kf-badge .st span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;
  animation:kfState 4.5s ease-in-out infinite}
.kf-badge .st span:first-child{position:relative}
.kf-badge .st span:nth-child(1){animation-name:kfState1}
.kf-badge .st span:nth-child(2){animation-name:kfState2}
@keyframes kfState1{0%,40%{opacity:1}48%,100%{opacity:0}}
@keyframes kfState2{0%,42%{opacity:0}50%,92%{opacity:1}98%,100%{opacity:0}}

/* Vergleich: leichte Zeilenfärbung und unsere Wortmarke */
.cmpq.zebra tbody tr:nth-child(odd) td{background:rgba(246,246,242,.6)}
.cmpq.zebra tbody tr:nth-child(odd) td.us{background:var(--tint-2)}
.cmp-brand{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.cmp-brand svg{width:19px;height:19px}
.cmp-brand{text-transform:none;letter-spacing:normal}
.cmp-brand b{font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.04em;color:var(--forest);text-transform:none}
.cmp-brand b em{font-style:normal;color:var(--muted);font-weight:500}

/* Abschlussbereich, der in den Footer übergeht */
.endsec.to-foot{padding-bottom:82px;margin-bottom:-46px}

/* Abschnittsnummer in der Überzeile (identisch zu v7.css, damit die
   Startseite sie ohne v7.css darstellen kann) */
.eyebrow .num{
  font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--ink);background:transparent;border:1px solid var(--line);
  padding:3px 8px;border-radius:5px;margin-right:2px;
}

/* ==========================================================================
   Startseite – Nachschärfungen
   ========================================================================== */

/* --- 1. Hero: größerer Beleg -------------------------------------------- */
.kf-receipt{padding:14px}
.kf-paper{padding:14px 13px;min-width:122px}
.kf-paper .rt{font-size:12px;line-height:1.2}
.kf-paper .rl-lime{height:3.5px;margin:6px 0 8px}
.kf-paper .rd{font-size:9.5px;margin-bottom:10px}
.kf-paper .rline{height:3.5px;margin-bottom:5px}
.kf-paper .rsum{font-size:12.5px;margin-top:11px}

/* --- 2. Hero: drei Belege im Wechsel -------------------------------------
   Der Scan-Takt bleibt bei 4,5 s. Darüber liegt ein zweiter Takt von
   13,5 s, der die Inhalte durchtauscht – so zeigt der Hero nicht immer
   denselben Beleg.                                                        */
.kcyc{position:relative;display:inline-block;text-align:right;vertical-align:bottom;white-space:nowrap}
.kcyc>span{position:absolute;right:0;top:0;white-space:nowrap;opacity:0;
  animation:kfCyc 13.5s steps(1,end) infinite}
.kcyc>span:first-child{position:relative}
.kcyc>span:nth-child(2){animation-delay:4.5s}
.kcyc>span:nth-child(3){animation-delay:9s}
@keyframes kfCyc{0%,33.33%{opacity:1}33.34%,100%{opacity:0}}
/* Linksbündige Varianten im Belegkopf */
.kf-paper .kcyc{display:block;text-align:left}
.kf-paper .kcyc>span{left:0;right:auto}
.kf-paper .rt .kcyc{min-height:2.4em}
.kf-paper .rt .kcyc>span{white-space:normal}
/* Der längste Betrag bestimmt die Breite – sonst schiebt sich „€ 340,00"
   über das Wort SUMME. */
.kf-paper .rsum{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.kf-paper .rsum .kcyc{display:inline-block;text-align:right;min-width:60px;flex:none}
.kf-paper .rsum .kcyc>span{left:auto;right:0}

/* --- 3. Der Weg durchs Jahr (ersetzt die Karten aus der Referenz) --------
   Drei Stationen an einer durchgehenden Linie. Weiße Karten, dunkler
   Punkt auf der Linie, Zahlen in unserer Schrift – kein Fremdkörper.     */
.jrn{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.jstep{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 24px;display:flex;flex-direction:column;
}
.jstep .jl{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:4px 9px;margin-bottom:14px;
  align-self:flex-start;
}
.jstep h3{font-size:19px;letter-spacing:-.025em;margin-bottom:9px}
.jstep>p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:20px;flex:1}
.jvis{border-top:1px solid var(--line);padding-top:4px}
.jrow{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:9px 0}
.jrow+.jrow{border-top:1px solid var(--line-soft)}
.jrow .jc{
  width:19px;height:19px;border-radius:6px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.jrow .jc svg{width:11px;height:11px}
.jrow .grow{flex:1;font-weight:500}
.jrow .tag2{
  font-size:11px;font-weight:700;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);padding:3px 8px;border-radius:5px;white-space:nowrap;
}
.jrow .amt2{font-size:13px;font-weight:700;color:var(--green-ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- 4. Datenschutz als dunkles Band -------------------------------------
   Gesundheitsdaten sind der stärkste Einwand – er bekommt eine eigene,
   dunkle Fläche statt drei blasser Kacheln.                              */
.dsband{
  background:var(--forest);border-radius:26px;padding:44px 48px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
}
.dsband::after{
  content:"";position:absolute;top:-110px;right:-90px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(196,240,74,.13),transparent 68%);pointer-events:none;
}
.dsband>*{position:relative;z-index:1}
.dsband h2{color:#fff;font-size:30px;letter-spacing:-.035em;margin-bottom:12px}
.dsband p{color:rgba(255,255,255,.76);font-size:15px;line-height:1.65;max-width:44ch}
.dsl{display:grid;gap:12px}
.dsl-i{
  display:flex;gap:13px;align-items:flex-start;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  border-radius:13px;padding:15px 17px;
}
.dsl-i .di2{
  width:32px;height:32px;border-radius:9px;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dsl-i .di2 svg{width:16px;height:16px}
.dsl-i b{display:block;color:#fff;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.dsl-i span{display:block;color:rgba(255,255,255,.66);font-size:13px;line-height:1.5;margin-top:3px}

/* --- 5. Schmaler Handlungsaufruf direkt unter dem Vergleich -------------- */
.cmp-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.cmp-act .note{font-size:13.5px;color:var(--muted)}

@media(max-width:900px){
  .jrn{grid-template-columns:1fr;padding-top:40px}
  .jrn::before{display:none}
  .dsband{grid-template-columns:1fr;padding:34px 26px;gap:28px}
  .dsband h2{font-size:25px}
}
/* Dunkler Hauptknopf für helle Flächen (unter dem Vergleich) */
.btn-forest{background:var(--forest);color:#fff;border-color:var(--forest)}
.btn-forest:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(12,42,24,.6)}

/* Ein Chip als direktes Flex-Kind würde sonst auf Zeilenhöhe gestreckt
   und dadurch rund statt pillenförmig wirken. */
.erk-r>.cat{align-self:center;height:fit-content}
/* Hinweiszeile in ruhiger Variante – nicht jeder Hinweis ist eine Warnung */
.vnote.calm{background:var(--tint);border-color:var(--tint-line);color:var(--green-ink)}
.vnote.calm svg{color:var(--green-ink)}

/* --- Produktbereiche als eigene Felder -----------------------------------
   Auf einheitlich weißem Grund verschwammen die Bereiche ineinander.
   Jeder bekommt jetzt eine eigene Fläche, jede zweite abgesetzt. */
/* Jede Lösung sitzt in einer eigenen weißen Box auf abgesetztem Grund –
   so ist auf einen Blick erkennbar, dass es fünf getrennte Bereiche sind. */
.fcards{display:grid;gap:18px}
.fcard{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px 44px;
  box-shadow:0 24px 50px -40px rgba(12,42,24,.4);
}
.fcard .fblock{border-top:none;padding:0;gap:48px}
/* Die Mockups bekommen eine eigene Bühne: getönte Fläche, darauf das
   Panel weiß und leicht angehoben – so liest es sich als Produktbild
   und nicht als grauer Block. */
.fcard .fb-media{
  background:linear-gradient(158deg,#eef2e7,#e3e9da);
  border-radius:20px;padding:28px;display:flex;align-items:center;justify-content:center;
}
.fcard .fb-media>.erk,
.fcard .fb-media>.fmock{
  width:100%;background:#fff;border-color:rgba(12,42,24,.09);
  box-shadow:0 22px 44px -24px rgba(12,42,24,.5);
}
.fcard .fb-media.phone-wrap{padding:22px}
.fcard .fb-media .phone{margin:0}

/* --- Vertrauenszeile im Abschlussbereich --------------------------------- */
.trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.tr-i{
  display:flex;gap:13px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
}
.tr-i .ti{
  width:34px;height:34px;border-radius:10px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tr-i .ti svg{width:16px;height:16px}
.tr-i b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.tr-i>span>span{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}

/* --- Footer: Bildmarke statt Riesen-Schriftzug --------------------------- */
.foot-brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-brand svg{width:30px;height:30px;flex-shrink:0}
.foot-brand span{
  font-family:var(--font-d);font-size:23px;font-weight:700;letter-spacing:-.04em;color:#fff;
}
.foot-brand span em{font-style:normal;color:rgba(255,255,255,.5);font-weight:500}

@media(max-width:900px){.trustrow{grid-template-columns:1fr}}

/* Datenschutz nur noch als ruhige Zeile, nicht als eigener Block */
.trustline-sm{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
}
.trustline-sm span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.trustline-sm svg{width:13px;height:13px;color:var(--green-ink)}

/* Fünf Lösungen brauchen fünf Spalten */
.nextnav.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.nextnav.five{grid-template-columns:repeat(2,1fr)}}

/* --- Stationen zeigen jetzt das Ergebnis, nicht eine Häkchenliste --------
   Ein benanntes Dokument mit Status liest sich schneller als drei Zeilen
   Text – dieselbe Machart für alle drei, in unseren Farben.            */
.jdoc{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.jd-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.jd-h b{font-size:14px;font-weight:650;letter-spacing:-.015em}
.jd-h span{
  font-size:11px;font-weight:700;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);padding:3px 8px;border-radius:5px;white-space:nowrap;
}
.jd-bar{height:8px;border-radius:100px;background:#e2e4db;margin-bottom:8px}
.jd-bar.w1{width:84%}
.jd-bar.w2{width:58%}
.jd-bar.w3{width:66%}
.jd-bar.part{background:linear-gradient(90deg,var(--green-ink) 0 62%,#e2e4db 62%);width:100%;margin-bottom:0}
.jd-bar.done{background:var(--green-ink);width:100%;margin-bottom:0}
.jd-cap{font-size:12.5px;color:var(--muted);line-height:1.45;margin:12px 0 0}

/* ==========================================================================
   Produktbilder – Panels im Stil echter Oberflächen
   Weiße Karte, dunkle Icon-Kachel, getönte Chips, klare Zeilen.
   ========================================================================== */
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  box-shadow:0 22px 44px -26px rgba(12,42,24,.45)}
.p-h{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.p-h b{font-family:var(--font-d);font-size:15.5px;font-weight:650;letter-spacing:-.02em;flex:1}
.p-ico{width:32px;height:32px;border-radius:9px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.p-ico svg{width:16px;height:16px}
.chip{font-size:11.5px;font-weight:700;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);padding:4px 9px;border-radius:6px;white-space:nowrap}
.chip.mute{color:var(--muted);background:var(--soft);border-color:var(--line)}
.p-r{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--line-soft);font-size:14px;color:var(--muted)}
.p-r:first-of-type{border-top:none}
.p-r b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.p-done{background:var(--forest);color:#fff;border-radius:11px;padding:13px;margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:650}
.p-done svg{width:15px;height:15px;color:var(--lime)}

/* Beleg: Handy links, erkannte Werte rechts */
.shotrow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;width:100%}
.shotrow .phone{width:176px;margin:0;flex-shrink:0}
.shotrow .phone .pscreen{padding:11px}
.shotrow .prec{font-size:9px}
.shotrow .panel{padding:18px 20px}
.p-h b{white-space:nowrap}

/* Honorarnote */
.inv-h{display:flex;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.inv-h .t{flex:1}
.inv-h b{display:block;font-family:var(--font-d);font-size:19px;font-weight:700;letter-spacing:-.03em}
.inv-h span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.inv-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
.inv-box{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:13px 15px;position:relative}
.inv-box.hl{background:#fff;border:1.5px solid var(--forest);padding-top:17px}
.inv-box .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.inv-box strong{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.015em}
.inv-box em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.inv-badge{position:absolute;top:-12px;right:-5px;font-size:10.5px;font-weight:700;
  color:var(--lime);background:var(--forest);padding:4px 9px;border-radius:6px;white-space:nowrap}
.inv-r{display:flex;justify-content:space-between;gap:12px;padding:12px 0;
  border-top:1px solid var(--line-soft);font-size:14px}
.inv-r b{font-weight:700;font-variant-numeric:tabular-nums}
.inv-r.tot{border-top:1.5px solid var(--ink);margin-top:2px;padding-top:14px;font-size:16px}
.inv-r.tot b{font-family:var(--font-d);letter-spacing:-.03em}

/* Verordnungen */
.vstack{display:grid;gap:12px;width:100%}
.vc{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 17px;
  box-shadow:0 16px 34px -26px rgba(12,42,24,.5)}
.vc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.vc-h b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.015em}
.vc-h span.s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.vc-p{display:flex;align-items:center;gap:12px}
.vc-p .vp{flex:1;height:8px;border-radius:100px;background:#e6e8df;overflow:hidden}
.vc-p .vp i{display:block;height:100%;border-radius:100px;background:var(--green-ink)}
.vc-p .vp.warn i{background:#c9922f}
.vc-n{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Patientenakte */
.dk-h{display:flex;align-items:center;gap:13px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.dk-av{width:44px;height:44px;border-radius:12px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.02em}
.dk-h .t{flex:1}
.dk-h b{display:block;font-family:var(--font-d);font-size:17px;font-weight:650;letter-spacing:-.025em}
.dk-h span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.dk-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.dk-tabs span{font-size:13.5px;color:var(--muted);padding:12px 0;position:relative}
.dk-tabs span.on{color:var(--ink);font-weight:650}
.dk-tabs span.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--forest)}
.dk-e{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px}
.dk-e:last-child{margin-bottom:0}
.dk-e-h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.dk-e-h .dot{width:7px;height:7px;border-radius:50%;background:var(--green-ink);flex-shrink:0}
.dk-e-h b{font-size:13.5px;font-weight:700;flex:1}
.dk-e p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}

@media(max-width:900px){
  .shotrow{grid-template-columns:1fr;justify-items:center}
  .inv-two{grid-template-columns:1fr}
}

/* --- Nachschärfungen ------------------------------------------------------ */
/* Die Reiter in der Patientenakte tragen kein Grün mehr – sie sind
   Navigation, kein Statussignal. */
.dk-tabs span.on{color:#4a4f46}
.dk-tabs span.on::after{background:#c6cabf}

/* Zeilen im Stationskasten sitzen bündig zum Kasten */
.jdoc .jrow{padding:9px 0}
.jdoc .jrow+.jrow{border-top:1px solid var(--line)}
.jdoc .jrow:first-of-type{border-top:1px solid var(--line);margin-top:2px}

/* Die fünf Boxen kompakter – weniger Höhe bei gleicher Aussage */
.fcard{padding:30px 34px}
.fcard .fblock{gap:40px}
.fcard .fb-media{padding:20px}
.fcard .fb-media.phone-wrap{padding:16px}
.shotrow .phone{width:162px}
.fcard .panel{padding:18px 20px}
.fcard .dk-e{padding:11px 13px;margin-bottom:8px}
.fcard .dk-tabs{margin-bottom:12px}
.fcard .dk-tabs span{padding:10px 0}
.fcard .vc{padding:13px 15px}
.fcard .blist{gap:7px}
.fcard .fblock>div>p{margin-bottom:16px}

/* --- Bildseite wechselt streng von Box zu Box ---------------------------- */
.fcards .fcard:nth-child(even) .fb-media{order:-1}

/* --- Jede Box bekommt ihren eigenen Farbton ------------------------------
   Fünfmal derselbe grüne Grund wirkte eintönig. Die Töne sind bewusst
   blass gehalten – sie geben Rhythmus, ohne der Marke die Ruhe zu nehmen. */
.fcards .fcard:nth-child(1) .fb-media{background:linear-gradient(158deg,#eef2e7,#e2e9d8)}
.fcards .fcard:nth-child(2) .fb-media{background:linear-gradient(158deg,#f5f0e4,#ece4d2)}
.fcards .fcard:nth-child(3) .fb-media{background:linear-gradient(158deg,#eaeff3,#dde6ed)}
.fcards .fcard:nth-child(4) .fb-media{background:linear-gradient(158deg,#f4ece8,#e9ded8)}
.fcards .fcard:nth-child(5) .fb-media{background:linear-gradient(158deg,#e8f1ec,#d9e7de)}

/* --- Kennzeichnung der Farbvarianten (nur zum Vergleichen) --------------- */
.varflag{
  position:fixed;left:20px;bottom:20px;z-index:60;
  background:rgba(12,42,24,.94);color:#fff;border-radius:14px;padding:13px 17px;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.6);max-width:280px;
}
.varflag b{display:block;font-family:var(--font-d);font-size:14px;font-weight:650;letter-spacing:-.02em}
.varflag span{display:block;font-size:12px;color:rgba(255,255,255,.6);line-height:1.4;margin-top:3px}
.varflag a{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--lime);margin-top:9px;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}

/* Die Bildmarke folgt dem Farbthema – der Akzentbalken war fest verdrahtet
   und blieb in den Varianten limettengrün stehen. */
.brand .mark g rect+rect,
.cmp-brand svg g rect+rect,
.foot-brand svg g rect+rect{fill:var(--lime)}