/* ==========================================================================
   Lenz Consulting — /beispiel („Zahlen-Atelier" Runde 2)
   Seitenspezifisches CSS — nach site.css einbinden.
   Breakpoints Site-Standard: 1000px (Grids → 1 Spalte, TOC → Chips)
                              820px  (Mobil-Labels/-Formate, 390er-Artboard)
   Regeln: kein border-radius · 1px-Hairlines · Mono für Zahlen/Labels
   ========================================================================== */

/* ---------- Desktop/Mobil-Umschaltung (Labels laut Artboards) ---------- */
.mob{display:none}

/* ---------- Kicker: Mono-Microlabel mit Index, Hairline als Element ---------- */
.kicker{
  margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.kicker .idx{color:var(--muted)}
.kicker .hl{width:120px;height:1px;background:var(--linie)}
.kicker .knote{
  margin-left:auto;color:var(--muted);text-transform:none;letter-spacing:.06em;
  display:flex;align-items:center;gap:12px;
}
.b{color:var(--brass)}

/* ---------- Kopf ---------- */
.bsp-kopf{padding:84px 0 56px}
.bsp-kopf h1{font-size:52px;margin-top:24px;max-width:22ch;line-height:1.12}
.bsp-kopf h1 span{color:var(--brass)}
.bsp-kopf .sub{margin-top:24px;color:var(--muted);font-size:18px;max-width:60ch}
.bsp-kopf .sub b{color:var(--text)}
.badges{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em}
.badges .badge{color:var(--muted);border:1px solid var(--linie-stark);padding:8px 14px}
.badges .badge .c{color:var(--brass)}

/* ---------- 01 · Kapitel-Explorer ---------- */
.nt-btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);background:transparent;border:1px solid var(--brass-line);
  padding:6px 10px;cursor:pointer;transition:.15s;
}
.nt-btn:hover{background:var(--brass-soft)}
.nt-btn[aria-pressed="false"]{color:var(--muted);border-color:var(--linie-stark)}

.kap-grid{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start;margin-top:36px}

/* Inhaltsverzeichnis (Desktop) */
.toc{border:1px solid var(--linie-stark);background:var(--panel)}
.toc-kopf{
  padding:12px 18px;border-bottom:1px solid var(--linie-stark);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;justify-content:space-between;gap:12px;
}
.toc-item{
  display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;
  width:100%;padding:11px 18px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  background:transparent;border:none;border-bottom:1px solid var(--linie);border-left:2px solid transparent;
  transition:.15s;
}
.toc-item .tn{font-family:var(--mono);font-size:11px;color:var(--muted)}
.toc-item .tt{font-size:13.5px;font-weight:500;color:var(--muted);line-height:1.4}
.toc-item:hover .tt{color:var(--text)}
.toc-item.aktiv{background:var(--panel-2);border-left-color:var(--brass)}
.toc-item.aktiv .tn{color:var(--brass)}
.toc-item.aktiv .tt{color:var(--text)}
.toc-fuss{padding:11px 18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted)}

/* Chip-Leiste (mobil, horizontal scrollbar) */
.chips{display:none}
.chip{
  flex:none;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  padding:8px 12px;border:1px solid var(--linie-stark);color:var(--muted);
  background:transparent;white-space:nowrap;transition:.15s;
}
.chip:hover{color:var(--text)}
.chip.aktiv{border-color:var(--brass);background:var(--brass);color:var(--nacht)}

/* Kapitel-Seite */
.ks{border:1px solid var(--linie-stark);background:var(--panel);min-height:520px;display:flex;flex-direction:column}
.ks-kopf{
  display:flex;justify-content:space-between;gap:16px;padding:13px 26px;
  border-bottom:1px solid var(--linie-stark);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.ks-body{flex:1;display:grid;grid-template-columns:1fr 250px;gap:36px;padding:32px 26px 34px}
.ks h2{margin:0;font-size:29px;font-weight:600;letter-spacing:-0.01em;line-height:1.2}
.ks h2 .chnum{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--brass);margin-right:12px;letter-spacing:0}
.ks-paras{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.ks-paras p{margin:0;color:var(--text-lauf);font-size:16px;line-height:1.75}
.ks-notes{display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--linie);padding-left:24px}
.note{border-left:2px solid var(--brass);padding:2px 0 2px 14px}
.note .nl{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--brass)}
.note .nt{margin:7px 0 0;font-size:13px;color:var(--muted);line-height:1.65}
.notes-aus .ks-notes{display:none}
.notes-aus .ks-body{grid-template-columns:1fr}
.ks-fuss{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 26px;border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
}
.ks-nav{background:transparent;border:none;cursor:pointer;padding:6px 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;transition:.15s}
.ks-nav.prev{color:var(--muted)}
.ks-nav.prev:hover{color:var(--brass)}
.ks-nav.next{color:var(--brass)}
.ks-pos{display:none;color:var(--muted)}

/* ---------- 02 · Modell-Explorer ---------- */
.modell{background:var(--panel);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.mod-head{max-width:760px;margin-bottom:40px}
.mod-head h2{margin:20px 0 0;font-size:38px;font-weight:600;letter-spacing:-0.02em;line-height:1.16}
.mod-head p{margin:14px 0 0;color:var(--muted)}
.mod-head p b{color:var(--text)}
.mod-head .mob-sub{display:none}
.mod-grid{display:grid;grid-template-columns:330px 1fr;gap:24px;align-items:start}

/* Annahmen-Panel */
.annahmen{border:1px solid var(--linie-stark);background:var(--nacht)}
.an-kopf{
  padding:12px 20px;border-bottom:1px solid var(--linie-stark);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.an-body{padding:12px 20px;display:flex;flex-direction:column;gap:8px}
.regler{display:flex;flex-direction:column}
.regler .r-zeile{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
}
.regler .r-wert{color:var(--brass);font-size:13px;font-weight:600;letter-spacing:.04em}
/* Slider laut Spec §4: 2px-Track, 16px-Diamant-Thumb; 44px hohe Hit-Area über die Input-Höhe */
.regler input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;border:none;
  background:linear-gradient(var(--linie-stark),var(--linie-stark)) no-repeat center / 100% 2px;
  outline:none;cursor:pointer;
}
.regler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;box-sizing:border-box;
  background:var(--nacht);border:2px solid var(--brass);transform:rotate(45deg);cursor:pointer;
}
.regler input[type=range]::-moz-range-track{height:2px;background:var(--linie-stark)}
.regler input[type=range]::-moz-range-thumb{
  width:16px;height:16px;box-sizing:border-box;background:var(--nacht);border:2px solid var(--brass);
  border-radius:0;transform:rotate(45deg);cursor:pointer;
}
.regler input[type=range]:focus-visible{outline:1px solid var(--brass);outline-offset:2px}
.an-fuss{
  padding:13px 20px;border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);line-height:2;
}

/* Rechte Spalte */
.mod-rechts{display:flex;flex-direction:column;gap:24px}

/* GuV + fx-Zeile */
.guv{border:1px solid var(--linie-stark);background:var(--nacht)}
.fx-zeile{
  display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--linie-stark);
  font-family:var(--mono);font-size:12.5px;
}
.fx-tag{flex:none;border:1px solid var(--brass-line);color:var(--brass);font-size:11px;padding:3px 9px;font-style:italic}
.fx-label{color:var(--muted)}
.fx-formel{color:var(--text);line-height:1.5}
.fx-formel .eq{color:var(--brass)}
.guv-head{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:14px;padding:11px 20px;
  border-bottom:1px solid var(--linie-stark);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);
}
.guv-head .cv{text-align:right}
.guv-row{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:14px;align-items:baseline;
  width:100%;padding:12px 20px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  background:transparent;border:none;border-bottom:1px solid var(--linie);transition:.15s;
}
.guv-row:hover{background:var(--panel)}
.guv-row.aktiv{background:var(--panel-2)}
.guv-row .rl{font-size:14.5px;font-weight:400;color:var(--muted)}
.guv-row .sign{font-family:var(--mono);color:var(--brass);margin-right:9px}
.guv-row.summe .rl{font-weight:600;color:var(--text)}
.guv-row .rv{justify-self:end;text-align:right;font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.guv-row.summe .rv{color:var(--text)}
.guv-row[data-fx="ebitda"] .rv{border-bottom:3px double var(--brass);padding-bottom:2px;color:var(--brass)}
.guv-row[data-fx="ebitda"].gruen .rv{color:var(--gruen)}
.rv .vk{display:none}
.guv-fuss{
  padding:10px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;
}
.guv-fuss .kb{color:var(--brass)}

/* Liquiditätskurve + Kapitalbedarf */
.liq-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:stretch}
.liq{border:1px solid var(--linie-stark);background:var(--nacht);display:flex;flex-direction:column}
.liq-kopf{
  display:flex;justify-content:space-between;gap:12px;padding:11px 20px;
  border-bottom:1px solid var(--linie-stark);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.liq-svg{flex:1;padding:14px 12px 6px}
.liq-svg svg{width:100%;height:190px;display:block}
.liq-fuss{
  display:flex;justify-content:space-between;gap:12px;padding:9px 20px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
}
.liq-fuss .tp{color:var(--brass)}
.capcard{
  border:1px solid var(--linie-stark);background:var(--brass-soft);
  display:flex;flex-direction:column;justify-content:center;padding:24px 24px 26px;
}
.cc-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.cc-betrag{
  margin-top:12px;font-family:var(--mono);font-weight:600;font-size:32px;color:var(--brass);
  border-bottom:3px double var(--brass);align-self:flex-start;padding-bottom:3px;
}
.cc-status{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--gruen)}
.cc-status.luecke{color:var(--text)}
.cc-formel{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* ---------- 03 · Abschluss ---------- */
.absch{padding:88px 0 96px}
.absch-lay{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.absch h2{margin:20px 0 0;font-size:40px;font-weight:600;letter-spacing:-0.02em;line-height:1.14}
.absch .lead{margin:18px 0 0;color:var(--muted);max-width:50ch}
.absch .btn{margin-top:30px}
.absch .hinweis{margin:16px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted)}
.absch .hinweis .c{color:var(--brass)}
.direkt{display:flex;flex-direction:column;gap:14px}
.direkt .dl{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.stripe-karte{
  text-decoration:none;border:1px solid var(--linie-stark);background:var(--panel);
  padding:18px 22px;display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  transition:border-color .15s;
}
.stripe-karte:hover{border-color:var(--brass)}
.stripe-karte .pn{display:block;font-size:16px;font-weight:600;color:var(--text)}
.stripe-karte .pd{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.06em}
.stripe-karte .go{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brass);white-space:nowrap}
.fagg{margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.65}
.fagg a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass-line)}
.nach-zahlung{margin:0;font-size:13px;color:var(--muted)}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ==========================================================================
   Breakpoint 1000px — Grids → 1 Spalte, TOC → Chip-Leiste
   ========================================================================== */
@media (max-width:1000px){
  .kap-grid{grid-template-columns:1fr;margin-top:18px}
  .toc{display:none}
  .chips{display:flex;gap:8px;overflow-x:auto;margin:18px 0 14px;padding-bottom:8px}
  .ks{min-height:0}
  .mod-grid{grid-template-columns:1fr}
  .liq-grid{grid-template-columns:1fr}
  .absch-lay{grid-template-columns:1fr;gap:0}
  .direkt{margin-top:28px}
}

/* ==========================================================================
   Breakpoint 820px — Mobil-Zustand laut 390er-Artboard
   ========================================================================== */
@media (max-width:820px){
  .dsk{display:none}
  .mob{display:inline}

  .kicker{font-size:11px;letter-spacing:.14em;gap:12px}
  .kicker .hl{display:none}
  .kicker .knote{margin-left:0;width:100%}

  /* Kopf */
  .bsp-kopf{padding:44px 0 36px}
  .bsp-kopf h1{font-size:30px;margin-top:16px;line-height:1.16}
  .bsp-kopf .sub{font-size:15px;margin-top:14px}
  .badges{margin-top:16px;flex-direction:column;align-items:flex-start;gap:8px;font-size:10.5px;letter-spacing:.08em}
  .badges .badge{border:none;padding:0}

  /* Kapitel */
  .chips{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .ks-kopf{padding:11px 16px;font-size:9.5px;letter-spacing:.1em;gap:10px}
  .ks-body{grid-template-columns:1fr;gap:0;padding:22px 18px 24px}
  .ks h2{font-size:21px;line-height:1.25}
  .ks h2 .chnum{font-size:13px;margin-right:9px}
  .ks-paras{margin-top:14px;gap:12px}
  .ks-paras p{font-size:14.5px;line-height:1.7}
  .ks-notes{border-left:none;padding-left:0;margin-top:18px;gap:12px}
  .note{background:rgba(217,164,65,.07);padding:11px 14px}
  .note .nl{font-size:9.5px}
  .note .nt{margin-top:6px;line-height:1.6}
  .ks-fuss{padding:12px 18px;font-size:11px;letter-spacing:.08em}
  .ks-nav{font-size:11px;letter-spacing:.08em}
  .ks-pos{display:inline}

  /* Modell */
  .mod-head{margin-bottom:22px}
  .mod-head h2{font-size:24px;margin-top:14px;line-height:1.22}
  .mod-head p{font-size:14px;margin-top:11px}
  .mod-head .dsk-sub{display:none}
  .mod-head .mob-sub{display:block}
  .an-kopf{padding:11px 16px;font-size:9.5px;letter-spacing:.12em}
  .an-body{padding:10px 16px;gap:6px}
  .regler .r-zeile{font-size:10.5px;letter-spacing:.08em;gap:10px}
  .regler .r-wert{font-size:12.5px}
  .an-fuss{padding:11px 16px;font-size:9px;line-height:1.9}
  .fx-zeile{padding:10px 14px;font-size:10.5px;gap:9px}
  .fx-tag{font-size:9.5px;padding:2px 7px}
  .guv-head{grid-template-columns:1.3fr .9fr .9fr .9fr;gap:8px;padding:10px 14px;font-size:9px;letter-spacing:.1em}
  .guv-row{grid-template-columns:1.3fr .9fr .9fr .9fr;gap:8px;padding:11px 14px}
  .guv-row .rl{font-size:12px}
  .guv-row .sign{margin-right:5px}
  .guv-row .rv{font-size:10.5px}
  .rv .vf{display:none}
  .rv .vk{display:inline}
  .guv-row[data-fx="ebitda"] .rv{padding-bottom:1px}
  .guv-fuss{padding:9px 14px;font-size:8.5px;letter-spacing:.06em}
  .liq-kopf{padding:10px 14px;font-size:9.5px;letter-spacing:.12em}
  .liq-svg{padding:12px 10px 4px}
  .liq-svg svg{height:150px}
  .liq-svg polyline{stroke-width:2.5}
  .liq-svg circle{stroke-width:2.5;r:6px}
  .liq-fuss{padding:8px 14px 11px;font-size:9px;letter-spacing:.06em}
  .capcard{padding:20px 18px 22px}
  .cc-betrag{font-size:27px;margin-top:10px}
  .cc-status{margin-top:10px;font-size:13px}
  .cc-formel{display:none}

  /* Abschluss */
  .absch{padding:52px 0 56px}
  .absch h2{font-size:25px;margin-top:14px;line-height:1.22}
  .absch .lead{font-size:14.5px;margin-top:12px}
  .absch .btn{margin-top:22px}
  .absch .hinweis{font-size:10.5px}
  .direkt .dl{font-size:10px;letter-spacing:.1em}
  .stripe-karte{padding:15px 16px;gap:12px}
  .stripe-karte .pn{font-size:15px}
  .stripe-karte .pd{font-size:9.5px;margin-top:3px;letter-spacing:.04em}
  .stripe-karte .go{font-size:11px}
  .fagg{font-size:12px}
  .nach-zahlung{font-size:12.5px}
}