/* kurs.leanzap.de · Stile aller Seiten seit dem Rebranding (24.10.2026).
   Schriften und Bilder selbst gehostet, keine eingebetteten Stile (Content-Security-Policy in _headers). */

@font-face{ font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/barlow-400-latin.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/barlow-500-latin.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/barlow-600-latin.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/barlow-700-latin.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/barlow-condensed-600-latin.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/barlow-condensed-700-latin.woff2') format('woff2'); }
@font-face{ font-family:'Inter Logo'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/inter-var-latin.woff2') format('woff2-variations'); }

:root{
  --gelb:#FFCC00; --gelb-kante:#D9AD00; --tinte:#141414;
  --asphalt:#171717; --asphalt-2:#1F1F1E; --schwarz:#0D0D0D;
  --beton:#E4E5E3; --kalk:#F0F1EF; --papier:#F7F6F2;
  --rot:#D52B1E; --rot-text:#A11A10; --stahl:#9EA4AA; --stahl-dunkel:#6E747A;
  --text:#1A1A1A; --text-2:#4A4A46; --linie:#C4C6C2;
  --hell:#F2F2EF; --hell-2:#B9B9B3; --linie-dunkel:rgba(255,255,255,.14);
  --logo-orange:#E8601C;
  --kopf:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --text-schrift:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --logo:'Inter Logo','Inter',system-ui,sans-serif;
  --mono:Consolas,'Cascadia Mono',Menlo,monospace;
  --breite:1240px; --nav-h:64px; --mess-h:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  --fokus:var(--tinte);
  /* Skala des Zollstocks: kurze Striche alle 12 px, halbe alle 60 px, lange alle 120 px */
  --skala:
    linear-gradient(90deg,var(--tinte) 2px,transparent 2px) 0 0 / 120px 46% repeat-x,
    linear-gradient(90deg,var(--tinte) 2px,transparent 2px) 60px 0 / 120px 30% repeat-x,
    linear-gradient(90deg,var(--tinte) 1.5px,transparent 1.5px) 0 0 / 12px 17% repeat-x;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + var(--mess-h) + 16px); }
body{ margin:0; background:var(--beton); color:var(--text); font-family:var(--text-schrift); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }
a{ color:inherit; }
p{ margin:0 0 1em; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; }
li{ text-wrap:pretty; }
h1,h2,h3{ font-family:var(--kopf); font-weight:700; line-height:.98; letter-spacing:-.005em; margin:0 0 .45em; text-wrap:balance; }
h2{ font-size:clamp(2.6rem,5.2vw,4.6rem); }
h3{ font-size:1.6rem; line-height:1.08; font-weight:700; }
strong{ font-weight:700; }
::selection{ background:var(--gelb); color:var(--tinte); }
:focus-visible{ outline:3px solid var(--fokus); outline-offset:3px; }
html{ scrollbar-color:var(--stahl-dunkel) var(--beton); }
.dunkel, .hero, .abschnitt--asphalt, .fuss, .infoleiste, .kopfzeile{ --fokus:var(--gelb); }
.skip{ position:absolute; left:16px; top:-80px; z-index:400; background:var(--gelb); color:var(--tinte); font-weight:700; padding:10px 16px; text-decoration:none; }
.skip:focus{ top:12px; }
.innen{ max-width:var(--breite); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .innen{ padding:0 18px; } body{ font-size:17px; } }

/* Markierung wie mit dem Zollstock unterlegt */
.mark{ background:var(--gelb); color:var(--tinte); padding:0 .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.gelb{ color:var(--gelb); }
.rot{ color:var(--rot); }

/* ============ Knöpfe: kantig wie ein Werkzeug ============ */
.knopf{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--text-schrift); font-weight:700; font-size:1.05rem; line-height:1.2; padding:17px 26px; border:2px solid transparent; border-radius:3px; text-decoration:none; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.knopf svg{ width:18px; height:18px; flex-shrink:0; transition:transform .25s var(--ease); }
.knopf:hover svg{ transform:translateX(3px); }
.knopf:active{ transform:translateY(1px); }
.knopf--gelb{ background:var(--gelb); color:var(--tinte); }
.knopf--gelb:hover{ background:#FFD83D; }
.knopf--rahmen{ border-color:var(--gelb); color:var(--gelb); }
.knopf--rahmen:hover{ background:rgba(255,204,0,.1); }
.knopf--schwarz{ background:var(--tinte); color:var(--gelb); }
.knopf--schwarz:hover{ background:#2A2A2A; }
.knopf--linie{ border-color:var(--tinte); color:var(--tinte); }
.knopf--linie:hover{ background:rgba(20,20,20,.06); }
.knopf--breit{ width:100%; }
.textlink{ font-weight:700; color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--gelb); }
.textlink:hover{ text-decoration-color:currentColor; }
.hell-text .textlink, .dunkel .textlink{ color:var(--gelb); text-decoration-color:rgba(255,204,0,.45); }

/* ============ Kontaktleiste (wie auf leanzap.de) ============ */
.infoleiste{ background:var(--schwarz); color:var(--hell-2); font-size:.86rem; }
.infoleiste__in{ display:flex; align-items:center; gap:26px; height:38px; }
.infoleiste a{ position:relative; display:inline-flex; align-items:center; gap:7px; color:var(--hell-2); text-decoration:none; }
.infoleiste a::after{ content:""; position:absolute; left:21px; right:0; bottom:-3px; height:1px; background:var(--gelb); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease); }
.infoleiste a:hover{ color:#fff; }
.infoleiste a:hover::after, .infoleiste a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.infoleiste svg{ width:14px; height:14px; color:var(--gelb); flex-shrink:0; }
.infoleiste__quer{ margin-left:auto; }
@media (max-width:760px){ .infoleiste{ display:none; } }

/* ============ Kopfzeile mit Messleiste ============ */
.kopfzeile{ position:sticky; top:0; z-index:100; color:var(--hell); transition:transform .35s var(--ease); }
.kopfzeile__nav{ background:var(--tinte); border-bottom:1px solid var(--linie-dunkel); transition:box-shadow .25s ease; }
.kopfzeile__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--nav-h); transition:height .25s var(--ease); }
.logo{ font-family:var(--logo); font-weight:700; font-size:1.12rem; letter-spacing:-.025em; color:#fff; text-decoration:none; white-space:nowrap; }
.logo b{ color:var(--logo-orange); font-weight:700; }
.logo::after{ content:'·'; color:var(--logo-orange); margin-left:2px; font-weight:900; }
.menue{ display:flex; gap:4px; }
.menue a{ position:relative; color:#D9D9D4; text-decoration:none; font-weight:600; font-size:1rem; padding:10px 12px; }
.menue a::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background:var(--gelb); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.menue a:hover, .menue a.aktiv{ color:#fff; }
.menue a:hover::after, .menue a:focus-visible::after, .menue a.aktiv::after{ transform:scaleX(1); transform-origin:left; }
.kopfzeile .knopf{ padding:11px 18px; font-size:.98rem; }
.menue-knopf{ display:none; width:44px; height:44px; border:0; background:transparent; color:#fff; cursor:pointer; align-items:center; justify-content:center; }
.menue-knopf svg{ width:24px; height:24px; }
.handy-menue{ display:none; }
body.gescrollt .kopfzeile__in{ height:56px; }
body.gescrollt .kopfzeile__nav{ box-shadow:0 10px 28px -18px rgba(0,0,0,.8); }
body.kopf-weg .kopfzeile{ transform:translateY(calc(-1 * var(--nav-h))); }
body.gescrollt.kopf-weg .kopfzeile{ transform:translateY(-56px); }
@media (max-width:960px){
  .menue, .kopfzeile__kauf{ display:none; }
  .menue-knopf{ display:inline-flex; }
  .handy-menue{ display:block; position:absolute; left:0; right:0; top:var(--nav-h); background:var(--tinte); border-bottom:1px solid var(--linie-dunkel); padding:4px 18px 18px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease,transform .2s var(--ease),visibility .2s; z-index:2; }
  .handy-menue.is-open{ opacity:1; visibility:visible; transform:none; }
  .handy-menue a:not(.knopf){ display:block; color:var(--hell); text-decoration:none; padding:14px 2px; border-bottom:1px solid var(--linie-dunkel); font-weight:600; }
  .handy-menue .knopf{ margin-top:14px; border-bottom:0; }
  body.gescrollt .handy-menue{ top:56px; }
}

/* Messleiste: der Zollstock unter dem Menü zeigt, wo man auf der Seite steht, und springt zu den Abschnitten */
.messleiste{ position:relative; height:var(--mess-h); background:var(--gelb); background-image:linear-gradient(90deg,var(--tinte) 1px,transparent 1px),linear-gradient(90deg,var(--tinte) 1px,transparent 1px); background-size:60px 9px,12px 5px; background-repeat:repeat-x; background-position:0 0,0 0; border-bottom:2px solid var(--gelb-kante); }
.messleiste ol{ list-style:none; position:absolute; inset:0; display:flex; justify-content:space-around; align-items:flex-end; }
.messleiste a{ display:block; font-family:var(--kopf); font-weight:600; font-size:.82rem; letter-spacing:.02em; text-transform:uppercase; color:var(--tinte); text-decoration:none; padding:0 6px 1px; line-height:1.2; white-space:nowrap; }
.messleiste a:hover{ text-decoration:underline; text-underline-offset:2px; }
.zs .messleiste li{ position:absolute; bottom:0; transform:translateX(-50%); }
.messleiste__marke{ position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--rot); display:none; }
.zs .messleiste__marke{ display:block; }
.messleiste li.verdeckt{ visibility:hidden; }
.messleiste a.aktiv{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
@media (max-width:960px){ .messleiste ol{ display:none; } }

/* ============ Hero ============ */
.hero{ position:relative; background:var(--asphalt); color:var(--hell); overflow:hidden; padding:52px 0 0; }
.hero__raster{ display:grid; grid-template-columns:1.32fr .68fr; gap:64px; align-items:end; }
.hero__raster > *{ min-width:0; }
.hero h1{ font-size:clamp(3.2rem,6.2vw,5.8rem); line-height:.9; margin-bottom:22px; color:var(--hell); }
.hero__lead{ font-size:1.1rem; color:var(--hell-2); max-width:41em; margin-bottom:26px; }
.hero__knoepfe{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.haken-zeile{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px; color:var(--hell-2); font-size:1rem; }
.haken-zeile li{ display:flex; align-items:center; gap:8px; }
.haken-zeile svg{ width:18px; height:18px; color:var(--gelb); }
.byline{ display:inline-flex; align-items:center; gap:14px; margin-top:24px; padding-top:18px; border-top:1px solid var(--linie-dunkel); color:var(--hell-2); text-decoration:none; font-size:.98rem; line-height:1.4; }
.byline img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid var(--gelb); flex-shrink:0; }
.byline b{ display:block; color:#fff; font-weight:600; }
.byline:hover b{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gelb); }
/* Kennzahlen am Maßstab: jeder Wert steht an seiner Stelle auf der Skala von 4 bis 10, die Lesezeit als Strecke von 4 bis 5 */
.messung{ --e:56px; position:relative; height:calc(5 * var(--e)); }
.messung::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:34px; background-color:var(--gelb); background-image:linear-gradient(180deg,var(--tinte) 2px,transparent 2px),linear-gradient(180deg,var(--tinte) 1.5px,transparent 1.5px); background-size:50% var(--e),26% calc(var(--e) / 5); background-position:100% calc(var(--e) / 2 - 1px),100% calc(var(--e) / 10 - .75px); background-repeat:repeat-y; border-right:3px solid var(--gelb-kante); }
.messung__skala{ list-style:none; position:absolute; left:0; top:0; width:34px; }
.messung__skala li{ position:absolute; left:3px; font-family:var(--kopf); font-weight:700; font-size:.8rem; line-height:1; color:var(--tinte); transform:translateY(-50%); }
.messung__skala li:nth-child(1){ top:calc(var(--e) * .5); } .messung__skala li:nth-child(2){ top:calc(var(--e) * 1.5); } .messung__skala li:nth-child(3){ top:calc(var(--e) * 2.5); } .messung__skala li:nth-child(4){ top:calc(var(--e) * 3.5); } .messung__skala li:nth-child(5){ top:calc(var(--e) * 4.5); } .messung__skala li:nth-child(6){ top:calc(var(--e) * 5.5); } .messung__skala li:nth-child(7){ top:calc(var(--e) * 6.5); }
.messwerte{ margin:0; }
.messwerte div{ position:absolute; left:72px; right:0; height:48px; margin-top:-24px; display:flex; align-items:center; gap:14px; }
.messwerte div::before{ content:""; position:absolute; left:-35px; top:50%; width:27px; height:3px; margin-top:-1.5px; background:var(--gelb); }
.messwerte div::after{ content:""; position:absolute; left:-45px; top:50%; width:10px; height:6px; margin-top:-3px; background:var(--tinte); }
.messwerte .mw-10{ top:calc(var(--e) * .5); } .messwerte .mw-8{ top:calc(var(--e) * 2.5); } .messwerte .mw-7{ top:calc(var(--e) * 3.5); } .messwerte .mw-45{ top:calc(var(--e) * 6); }
.messwerte .mw-45::after{ height:var(--e); margin-top:calc(var(--e) / -2); }
.messwerte dt{ font-family:var(--kopf); font-weight:700; font-size:3.2rem; line-height:1; color:var(--gelb); font-variant-numeric:tabular-nums; }
.messwerte dd{ margin:0; font-family:var(--kopf); font-weight:600; font-size:1.3rem; line-height:1.1; color:var(--hell); text-transform:uppercase; letter-spacing:.01em; }
@media (max-width:1100px){ .hero__raster{ grid-template-columns:1fr; gap:48px; } }
@media (max-width:640px){ .hero{ padding-top:44px; } .hero h1{ margin-bottom:18px; } .hero__knoepfe .knopf{ width:100%; } .messung{ --e:50px; } .messwerte dt{ font-size:2.6rem; } .messwerte dd{ font-size:1.05rem; } }

/* Der aufgeklappte Zollstock: zwei Glieder, ein Gelenk, Module als beschriftete Marken.
   Am Rechner liegt er über die volle Breite am unteren Rand des Kopfbereichs, am Handy direkt unter der Überschrift. */
.hero{ padding-bottom:196px; }
.zollstock{ position:absolute; left:0; right:0; bottom:0; height:156px; }
.glied{ position:absolute; height:104px; background:var(--gelb); background-image:none; border-bottom:4px solid var(--gelb-kante); box-shadow:0 22px 34px -22px rgba(0,0,0,.9); }
.glied::before{ content:""; position:absolute; inset:0 0 auto 0; height:100%; background:var(--skala); pointer-events:none; }
.glied--a{ left:-16px; top:40px; width:calc(62% + 16px); }
.glied--b{ left:62%; top:40px; width:47%; transform-origin:0 50%; transform:rotate(-8deg); animation:aufklappen 1.2s var(--ease) .35s both; }
@keyframes aufklappen{ from{ transform:rotate(-178deg); } to{ transform:rotate(-8deg); } }
.gelenk{ position:absolute; left:62%; top:92px; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:var(--stahl); border:4px solid var(--stahl-dunkel); z-index:3; box-shadow:inset 0 0 0 5px #C3C8CC; }
.glied ol{ list-style:none; position:absolute; left:0; right:0; bottom:10px; display:flex; }
.glied--a ol{ padding-left:max(32px, calc((100vw - var(--breite)) / 2 + 40px)); }
.glied--b ol{ padding-left:36px; padding-right:24%; }
.glied li{ flex:1; }
.glied a{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--tinte); padding:0 4px; }
.glied a b{ font-family:var(--kopf); font-weight:700; font-size:3rem; line-height:1; font-variant-numeric:tabular-nums; }
.glied a span{ font-family:var(--kopf); font-weight:600; font-size:.98rem; line-height:1.1; text-transform:uppercase; letter-spacing:.02em; max-width:8em; }
.glied a:hover span{ text-decoration:underline; text-underline-offset:3px; }
.glied a.kern b{ color:var(--rot); }
@media (max-width:1100px){
  .hero{ padding-bottom:72px; }
  .zollstock{ position:relative; left:auto; right:auto; bottom:auto; height:auto; margin:6px -32px 30px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--stahl-dunkel) transparent; scroll-snap-type:x mandatory; padding-bottom:14px; }
  .zollstock__band{ display:flex; width:max-content; }
  .glied, .glied--a, .glied--b{ position:relative; left:auto; top:auto; transform:none; animation:none; width:auto; }
  .glied ol, .glied--a ol, .glied--b ol{ position:relative; bottom:auto; padding:50px 18px 10px; gap:8px; }
  .glied li{ flex:none; width:150px; scroll-snap-align:start; }
  .gelenk{ display:none; }
}
@media (max-width:640px){ .zollstock{ margin:4px -18px 26px; } .glied li{ width:136px; } .glied a b{ font-size:2.5rem; } }

/* ============ Abschnitte ============ */
.abschnitt{ padding:128px 0; position:relative; }
@media (max-width:760px){ .abschnitt{ padding:80px 0; } }
.abschnitt--beton{ background:var(--beton); }
.abschnitt--kalk{ background:var(--kalk); }
.abschnitt--asphalt{ background:var(--asphalt); color:var(--hell); }
.abschnitt--gelb{ background:var(--gelb); color:var(--tinte); --fokus:var(--tinte); }
.kopf{ max-width:840px; margin-bottom:64px; }
.lead{ font-size:1.2rem; color:var(--text-2); max-width:36em; }
.abschnitt--asphalt .lead{ color:var(--hell-2); }
.abschnitt--gelb .lead{ color:#2B2B28; }

/* Probleme als Zeilen mit Strich statt Karten */
.zeilen{ list-style:none; border-top:2px solid var(--tinte); }
.zeilen li{ display:grid; grid-template-columns:minmax(220px,1fr) 2fr; gap:12px 48px; padding:26px 0; border-bottom:1px solid var(--linie); }
.zeilen h3{ margin:0; font-size:1.7rem; }
.zeilen p{ margin:0; color:var(--text-2); max-width:38em; }
@media (max-width:760px){ .zeilen li{ grid-template-columns:1fr; } }

/* Beispielrechnung als Maßband von 0 bis 40 Stunden */
.rechnung{ margin-top:72px; display:grid; grid-template-columns:auto 1fr; gap:24px 48px; align-items:center; }
.rechnung__zahl{ font-family:var(--kopf); font-weight:700; font-size:clamp(5rem,11vw,8.5rem); line-height:.8; color:var(--rot-text); font-variant-numeric:tabular-nums; }
.rechnung__zahl small{ font-size:.38em; color:var(--text); margin-left:6px; }
.rechnung p{ margin:0; max-width:40em; color:var(--text-2); }
.rechnung p b{ color:var(--text); }
.massband{ grid-column:1 / -1; position:relative; height:84px; background:var(--gelb); border-bottom:4px solid var(--gelb-kante); }
.massband::before{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,var(--tinte) 2px,transparent 2px) 0 0 / 12.5% 50% repeat-x,
  linear-gradient(90deg,var(--tinte) 1.5px,transparent 1.5px) 0 0 / 2.5% 26% repeat-x; }
.massband__teil{ position:absolute; left:0; top:0; bottom:0; width:12.5%; background:var(--rot-text); display:flex; align-items:flex-end; padding:0 0 8px 10px; color:#fff; font-family:var(--kopf); font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em; z-index:1; }
.massband ol{ list-style:none; position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:space-between; z-index:2; }
.massband li{ font-family:var(--kopf); font-weight:700; font-size:1.3rem; line-height:1; color:var(--tinte); width:0; display:flex; justify-content:flex-start; padding-left:7px; }
.massband li:first-child{ visibility:hidden; }
.massband li:last-child{ justify-content:flex-end; padding:0 7px 0 0; }
.massband__legende{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; font-size:.95rem; color:var(--text-2); margin-top:-10px; }
@media (max-width:700px){ .rechnung{ grid-template-columns:1fr; } .massband__teil span{ display:none; } .massband li{ font-size:1rem; padding-left:4px; } .massband li:nth-child(even){ visibility:hidden; } }

/* Was ist n8n */
.zweispaltig{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.zweispaltig > *{ min-width:0; }
.zweispaltig p{ color:var(--text-2); }
.punkte{ list-style:none; margin:28px 0; display:grid; gap:18px; }
.punkte li{ display:grid; grid-template-columns:28px 1fr; gap:14px; }
.punkte svg{ width:24px; height:24px; color:var(--tinte); margin-top:4px; }
.punkte b{ display:block; font-family:var(--kopf); font-size:1.4rem; line-height:1.15; }
.punkte span{ color:var(--text-2); }
.nabe{ background:var(--asphalt); color:var(--hell); padding:28px; }
.nabe svg text{ font-family:var(--text-schrift); }
.nabe figcaption{ margin-top:12px; text-align:center; font-size:.95rem; color:var(--hell-2); }
@media (max-width:960px){ .zweispaltig{ grid-template-columns:1fr; gap:44px; } }

/* Ergebnisse: eine liniierte Liste, links der Satz, rechts der Beleg aus dem Kurs */
.ergebnisse{ list-style:none; border-top:2px solid var(--tinte); }
.ergebnisse > li{ display:grid; grid-template-columns:1fr 1fr; gap:20px 64px; align-items:center; padding:34px 0; border-bottom:1px solid var(--linie); }
.ergebnisse > li > *{ min-width:0; }
.ergebnisse h3{ font-size:1.8rem; }
.ergebnisse h3 + p{ color:var(--text-2); margin:0; }
.kette{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
.kette span{ font-family:var(--kopf); font-weight:700; font-size:1.05rem; text-transform:uppercase; padding:6px 12px; background:var(--kalk); border:1px solid var(--linie); }
.kette span.heiss{ background:var(--gelb); border-color:var(--gelb-kante); }
.kette i{ width:22px; height:2px; background:var(--tinte); }
.nodes{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.nodes span{ font-family:var(--mono); font-size:.88rem; padding:5px 10px; background:var(--tinte); color:var(--hell); }
.protokoll{ font-family:var(--mono); font-size:.9rem; line-height:1.7; background:var(--tinte); color:var(--hell-2); padding:14px 16px; margin:0; }
.protokoll .fehler{ color:#FF9C8F; }
.protokoll .ok{ color:var(--gelb); }
.protokoll svg{ display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-right:8px; }
.liste-haken{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.liste-haken li{ display:flex; align-items:center; gap:10px; font-weight:600; }
.liste-haken svg{ width:20px; height:20px; flex-shrink:0; background:var(--gelb); color:var(--tinte); padding:3px; }
@media (max-width:900px){ .ergebnisse > li{ grid-template-columns:1fr; } .liste-haken{ grid-template-columns:1fr; } }

/* Kursinhalt: die Module liegen an einem senkrechten Zollstock */
.kurs{ display:grid; grid-template-columns:.75fr 1.25fr; gap:72px; align-items:start; }
.kurs__intro{ position:sticky; top:calc(var(--nav-h) + var(--mess-h) + 32px); }
.kurs__fakten{ font-family:var(--kopf); font-weight:700; font-size:1.35rem; text-transform:uppercase; letter-spacing:.02em; margin:0 0 26px; }
.module{ position:relative; padding-left:112px; }
.module::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:80px; background:var(--gelb); background-image:
  linear-gradient(180deg,var(--tinte) 2px,transparent 2px),
  linear-gradient(180deg,var(--tinte) 1.5px,transparent 1.5px);
  background-size:42% 60px,18% 12px; background-repeat:repeat-y; background-position:100% 0,100% 0; border-right:4px solid var(--gelb-kante); }
.modul{ position:relative; border-bottom:1px solid var(--linie); }
.modul:first-child{ border-top:2px solid var(--tinte); }
.modul__nr{ position:absolute; left:-104px; top:18px; width:72px; text-align:left; font-family:var(--kopf); font-weight:700; font-size:2.6rem; line-height:1; color:var(--tinte); font-variant-numeric:tabular-nums; pointer-events:none; }
.modul--kern .modul__nr{ color:var(--rot); }
.modul summary{ list-style:none; display:grid; grid-template-columns:1fr 28px; gap:16px; align-items:center; padding:20px 0; cursor:pointer; }
.modul summary::-webkit-details-marker{ display:none; }
.modul__titel{ display:block; font-family:var(--kopf); font-weight:700; font-size:1.55rem; line-height:1.1; }
.modul__text{ display:block; color:var(--text-2); font-size:1rem; margin-top:4px; }
.modul__tag{ display:inline-block; vertical-align:middle; margin-left:10px; font-family:var(--text-schrift); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--rot-text); color:#fff; padding:2px 8px; }
.modul summary svg{ width:26px; height:26px; transition:transform .25s var(--ease); }
.modul[open] summary svg{ transform:rotate(45deg); }
.modul summary:hover .modul__titel{ text-decoration:underline; text-decoration-color:var(--gelb); text-decoration-thickness:3px; text-underline-offset:5px; }
.modul__inhalt{ padding:0 0 22px; }
.inhaltszeile{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 0; color:var(--text-2); }
.inhaltszeile li + li::before{ content:"·"; margin:0 10px; color:var(--stahl-dunkel); }
.inhaltszeile .uebung{ color:var(--text); font-weight:700; }
.modul__mehr{ margin:12px 0 0; }
@media (max-width:960px){ .kurs{ grid-template-columns:1fr; gap:40px; } .kurs__intro{ position:static; } }
@media (max-width:600px){ .module{ padding-left:76px; } .module::before{ width:56px; } .modul__nr{ left:-70px; font-size:2rem; width:52px; } }

/* Bonus: zehn Bauanleitungen */
.bonus{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.bonus p{ color:var(--text-2); }
.bonus__liste{ list-style:none; display:grid; grid-template-columns:1fr 1fr; border-top:2px solid var(--tinte); }
.bonus__liste li{ padding:16px 0 14px 30px; border-bottom:1px solid var(--linie); position:relative; font-weight:600; font-size:1.08rem; }
.bonus__liste li:nth-child(odd){ margin-right:28px; }
.bonus__liste li::before{ content:""; position:absolute; left:0; top:22px; width:16px; height:6px; background:var(--gelb); }
@media (max-width:900px){ .bonus{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:560px){ .bonus__liste{ grid-template-columns:1fr; } .bonus__liste li:nth-child(odd){ margin-right:0; } }

/* Modul 6: acht Schritte an einer waagerechten Skala */
.ablaufband{ position:relative; height:96px; background:var(--gelb); border-bottom:4px solid var(--gelb-kante); margin:0; }
.ablaufband::before{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,var(--tinte) 2px,transparent 2px) 0 0 / 12.5% 52% repeat-x,
  linear-gradient(90deg,var(--tinte) 1.5px,transparent 1.5px) 0 0 / 2.5% 22% repeat-x; }
.ablaufband ol{ list-style:none; position:absolute; left:0; right:0; bottom:8px; display:grid; grid-template-columns:repeat(8,1fr); }
.ablaufband li{ font-family:var(--kopf); font-weight:700; font-size:2.6rem; line-height:1; color:var(--tinte); padding-left:12px; }
/* Die Schritte hängen direkt unter ihrer Marke: die Teilstriche laufen als feine Linien weiter nach unten */
.schritte8{ list-style:none; display:grid; grid-template-columns:repeat(8,1fr); counter-reset:s; }
.schritte8 li{ counter-increment:s; color:var(--hell-2); border-left:1px solid var(--linie-dunkel); padding:22px 16px 6px 12px; font-size:1rem; line-height:1.5; }
.schritte8 li::before{ content:counter(s); display:none; font-family:var(--kopf); font-weight:700; font-size:1.6rem; line-height:1; color:var(--gelb); margin-bottom:8px; }
.schritte8 strong{ color:#fff; }
.schritte8 small{ display:block; font-size:.88rem; margin-top:10px; color:var(--hell-2); }
.pruefzeile{ margin-top:48px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; border-top:1px solid var(--linie-dunkel); padding-top:30px; }
.pruefzeile p{ margin:0; max-width:40em; color:var(--hell-2); }
.pruefzeile strong{ color:#fff; }
@media (max-width:1100px){
  .ablaufband{ display:none; }
  .schritte8{ grid-template-columns:1fr 1fr; gap:0 32px; border-top:2px solid var(--gelb); }
  .schritte8 li{ border-left:0; border-bottom:1px solid var(--linie-dunkel); padding:20px 0; display:grid; grid-template-columns:44px 1fr; column-gap:8px; }
  .schritte8 li::before{ display:block; grid-row:span 2; }
}
@media (max-width:640px){ .schritte8{ grid-template-columns:1fr; } }

/* Leseprobe */
.leseprobe{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }
.leseprobe p{ color:var(--text-2); }
.leseprobe__knoepfe{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.auszug{ position:relative; background:var(--papier); padding:32px 34px 34px; box-shadow:0 30px 50px -30px rgba(20,20,20,.55); transform:rotate(-1.4deg); transition:transform .45s var(--ease); }
.auszug:hover{ transform:none; }
.auszug h3{ font-size:2rem; margin-bottom:.6em; }
.auszug dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:12px 18px; }
.auszug dt{ font-weight:700; }
.auszug dd{ margin:0; color:var(--text-2); }
@media (max-width:960px){ .leseprobe{ grid-template-columns:1fr; gap:44px; } }

/* Für wen */
.passt{ display:grid; grid-template-columns:1.25fr .75fr; gap:56px; }
.passt h3{ font-size:1.9rem; display:flex; align-items:center; gap:12px; }
.passt h3 svg{ width:28px; height:28px; flex-shrink:0; }
.passt ul{ list-style:none; border-top:2px solid var(--tinte); }
.passt li{ padding:16px 0 16px 30px; border-bottom:1px solid var(--linie); position:relative; color:var(--text-2); }
.passt li::before{ content:""; position:absolute; left:0; top:27px; width:16px; height:6px; background:var(--gelb); }
.passt__nein li::before{ background:var(--stahl); }
.quer{ margin-top:64px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; background:var(--asphalt); color:var(--hell); padding:34px 38px; }
.quer h3{ margin:0 0 .3em; font-size:1.9rem; }
.quer p{ margin:0; color:var(--hell-2); max-width:40em; }
@media (max-width:900px){ .passt{ grid-template-columns:1fr; gap:44px; } }

/* Zertifikat */
.zert{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.zert p{ color:var(--text-2); }
.haken{ list-style:none; display:grid; gap:12px; margin:22px 0; }
.haken li{ display:flex; gap:12px; align-items:flex-start; }
.haken svg{ width:22px; height:22px; flex-shrink:0; margin-top:3px; background:var(--gelb); color:var(--tinte); padding:3px; }
.kleingedruckt{ font-size:.95rem; color:var(--text-2); }
.zert__bild svg{ transform:rotate(1.6deg); box-shadow:0 30px 50px -30px rgba(20,20,20,.55); transition:transform .5s var(--ease); }
.zert__bild:hover svg{ transform:none; }
.zert__bild svg text{ font-family:var(--text-schrift); }
.zert__bild svg .h{ font-family:var(--kopf); }
.zert__bild svg .lg{ font-family:var(--logo); }
@media (max-width:900px){ .zert{ grid-template-columns:1fr; gap:44px; } }

/* Trainer: Foto im Ring wie auf leanzap.de, hier mit gelbem Ring */
.trainer{ display:grid; grid-template-columns:420px 1fr; gap:80px; align-items:center; }
.trainer h2{ color:var(--hell); }
.trainer p{ color:var(--hell-2); max-width:38em; }
.portrait{ position:relative; width:100%; aspect-ratio:1; }
.form{ position:absolute; pointer-events:none; }
.form--kreis{ width:56%; aspect-ratio:1; right:-6%; top:-4%; border-radius:50%; background:rgba(158,164,170,.2); }
.form--blitz{ width:48%; aspect-ratio:1; left:-12%; bottom:-10%; background:var(--logo-orange); clip-path:polygon(63% 8%,31% 52%,54% 52%,37% 92%,71% 46%,48% 46%); }
.form--linie{ width:120%; aspect-ratio:1; left:-10%; top:-10%; border-radius:50%; border:1px solid var(--linie-dunkel); }
.ring{ position:absolute; inset:5%; border-radius:50%; border:2px solid var(--gelb); animation:umlauf 16s linear infinite; }
.ring__punkt{ position:absolute; top:-6px; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:var(--gelb); }
@keyframes umlauf{ to{ transform:rotate(360deg); } }
.portrait img{ position:absolute; inset:15%; width:70%; height:70%; object-fit:cover; object-position:50% 28%; border-radius:50%; border:6px solid var(--asphalt); z-index:1; }
.portrait__ort{ position:absolute; left:50%; bottom:2%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:8px; white-space:nowrap; background:var(--gelb); color:var(--tinte); font-weight:700; font-size:.95rem; padding:8px 14px; }
.portrait__ort svg{ width:18px; height:18px; }
.fakten-zeile{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 28px; margin:24px 0; font-weight:700; color:var(--hell); }
.fakten-zeile li{ display:flex; align-items:center; gap:10px; }
.fakten-zeile li::before{ content:""; width:14px; height:5px; background:var(--gelb); flex-shrink:0; }
@media (max-width:960px){ .trainer{ grid-template-columns:1fr; gap:56px; } .portrait{ max-width:340px; } }

/* So starten Sie: vier Schritte an einem kurzen Maßstab */
.vierband{ position:relative; height:64px; background:var(--gelb); border-bottom:4px solid var(--gelb-kante); margin-bottom:28px; }
.vierband::before{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,var(--tinte) 2px,transparent 2px) 0 0 / 25% 50% repeat-x,
  linear-gradient(90deg,var(--tinte) 1.5px,transparent 1.5px) 0 0 / 5% 24% repeat-x; }
.vierband ol{ list-style:none; position:absolute; left:0; right:0; bottom:6px; display:grid; grid-template-columns:repeat(4,1fr); }
.vierband li{ font-family:var(--kopf); font-weight:700; font-size:2rem; line-height:1; padding-left:12px; }
.schritte4{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.schritte4 h3{ font-size:1.5rem; margin-bottom:.3em; }
.schritte4 p{ margin:0; color:var(--text-2); }
.brauchen{ margin-top:72px; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:start; border-top:2px solid var(--tinte); padding-top:28px; }
.brauchen h3{ margin:0; font-size:1.9rem; white-space:nowrap; }
.brauchen ul{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px 32px; }
.brauchen li{ display:flex; align-items:center; gap:10px; color:var(--text-2); }
.brauchen li strong{ color:var(--text); }
.brauchen svg{ width:20px; height:20px; flex-shrink:0; background:var(--gelb); padding:3px; }
@media (max-width:960px){ .schritte4{ grid-template-columns:1fr 1fr; } .brauchen{ grid-template-columns:1fr; } }
@media (max-width:560px){ .schritte4{ grid-template-columns:1fr; } .vierband li{ font-size:1.5rem; } }

/* Preis: der ganze Abschnitt ist gelb, der Preis steht wie ein Messwert */
.angebot{ display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start; }
.preis__name{ font-family:var(--kopf); font-weight:700; font-size:1.6rem; text-transform:uppercase; letter-spacing:.02em; margin:0 0 6px; }
.preis__wert{ position:relative; display:inline-block; padding-left:30px; font-family:var(--kopf); font-weight:700; font-size:clamp(7rem,15vw,11.5rem); line-height:.82; letter-spacing:-.02em; margin:0; font-variant-numeric:tabular-nums; }
.preis__wert::before{ content:""; position:absolute; left:0; top:4%; bottom:4%; width:8px; background:var(--rot); }
.preis__wert span{ font-size:.42em; margin-left:.08em; }
.preis__hinweis{ font-weight:600; margin:10px 0 28px; }
.preis .haken svg{ background:var(--tinte); color:var(--gelb); }
.preis .haken li{ color:#2B2B28; }
.preis .haken strong{ color:var(--tinte); }
.preis__risiko{ margin:14px 0 0; font-weight:700; text-align:center; }
.preis__klein{ margin:10px 0 0; font-size:.95rem; color:#2B2B28; text-align:center; }
.sicher{ list-style:none; margin-top:36px; border-top:2px solid var(--tinte); display:grid; grid-template-columns:1fr 1fr; }
.sicher li{ display:grid; grid-template-columns:24px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid rgba(20,20,20,.25); font-size:1rem; }
.sicher li:nth-child(odd){ margin-right:24px; }
.sicher svg{ width:22px; height:22px; margin-top:2px; }
.sicher b{ display:block; }
.angebot__seite{ background:var(--tinte); color:var(--hell); padding:34px; display:grid; gap:30px; }
.angebot__seite h3{ color:#fff; font-size:1.8rem; }
.angebot__seite p{ color:var(--hell-2); }
.angebot__seite .trenner{ border-top:1px solid var(--linie-dunkel); padding-top:28px; }
@media (max-width:960px){ .angebot{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:560px){ .sicher{ grid-template-columns:1fr; } .sicher li:nth-child(odd){ margin-right:0; } .angebot__seite{ padding:26px 20px; } }

/* FAQ */
.faq-raster{ display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.faq-raster__intro{ position:sticky; top:calc(var(--nav-h) + var(--mess-h) + 32px); }
.faq-raster__intro p{ color:var(--text-2); }
.faq{ border-top:2px solid var(--tinte); }
.faq details{ border-bottom:1px solid var(--linie); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 0; font-family:var(--kopf); font-weight:700; font-size:1.45rem; line-height:1.25; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ text-decoration:underline; text-decoration-color:var(--gelb); text-decoration-thickness:3px; text-underline-offset:5px; }
.faq summary svg{ width:26px; height:26px; flex-shrink:0; background:var(--gelb); padding:4px; transition:transform .25s var(--ease); }
.faq details[open] summary svg{ transform:rotate(45deg); }
.faq .antwort{ padding:0 44px 24px 0; color:var(--text-2); }
.faq .antwort p:last-child{ margin:0; }
@media (max-width:960px){ .faq-raster{ grid-template-columns:1fr; gap:32px; } .faq-raster__intro{ position:static; } }
@media (max-width:600px){ .faq summary{ font-size:1.25rem; } .faq .antwort{ padding-right:0; } }

/* Schluss: der Zollstock ist zusammengeklappt, die Arbeit kann beginnen */
.schluss{ display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center; }
.schluss h2{ color:var(--hell); font-size:clamp(3rem,6.4vw,5.6rem); }
.schluss p{ color:var(--hell-2); font-size:1.15rem; }
.schluss .hero__knoepfe{ margin-top:30px; }
.gefaltet{ position:relative; height:260px; }
.gefaltet span{ position:absolute; left:8%; right:8%; height:34px; background:var(--gelb); border-bottom:4px solid var(--gelb-kante); }
.gefaltet span::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--tinte) 2px,transparent 2px) 0 0 / 40px 40% repeat-x; }
.gefaltet span:nth-child(1){ top:40px; }
.gefaltet span:nth-child(2){ top:78px; left:9%; right:7%; }
.gefaltet span:nth-child(3){ top:116px; left:7.5%; right:8.5%; }
.gefaltet span:nth-child(4){ top:154px; left:8.5%; right:7.5%; }
.gefaltet span:nth-child(5){ top:192px; left:8%; right:8%; }
.gefaltet i{ position:absolute; width:26px; height:26px; border-radius:50%; background:var(--stahl); border:4px solid var(--stahl-dunkel); left:calc(8% - 6px); z-index:2; }
.gefaltet i:nth-of-type(1){ top:70px; } .gefaltet i:nth-of-type(2){ top:146px; }
.gefaltet b{ position:absolute; width:26px; height:26px; border-radius:50%; background:var(--stahl); border:4px solid var(--stahl-dunkel); right:calc(8% - 6px); z-index:2; }
.gefaltet b:nth-of-type(1){ top:108px; } .gefaltet b:nth-of-type(2){ top:184px; }
@media (max-width:900px){ .schluss{ grid-template-columns:1fr; gap:24px; } .gefaltet{ height:230px; max-width:420px; } }

/* Fuß */
.fuss{ background:var(--schwarz); color:var(--hell-2); padding:80px 0 36px; font-size:.98rem; }
.fuss__oben{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:36px; padding-bottom:44px; border-bottom:1px solid var(--linie-dunkel); }
.fuss .logo{ font-size:1.3rem; color:#fff; }
.fuss__spruch{ font-family:var(--kopf); color:#fff; font-weight:700; font-size:1.7rem; margin:16px 0 8px; }
.fuss h2{ font-family:var(--text-schrift); font-size:1rem; color:#fff; margin:0 0 14px; font-weight:700; }
.fuss ul{ list-style:none; display:grid; gap:10px; }
.fuss a{ text-decoration:none; color:var(--hell-2); }
.fuss a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gelb); }
.fuss__unten{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:26px; font-size:.92rem; }
.fuss__marke{ margin:14px 0 0; font-size:.9rem; }
@media (max-width:900px){ .fuss__oben{ grid-template-columns:1fr 1fr; } .fuss__marke-spalte{ grid-column:1 / -1; } }
@media (max-width:480px){ .fuss__oben{ grid-template-columns:1fr; } }

/* Schwebender Kaufknopf (Logik aus site.js: nach dem Hero sichtbar, im Preisbereich und am Schluss weg) */
.buybar{ position:fixed; z-index:90; left:50%; bottom:18px; display:flex; align-items:center; gap:18px; padding:8px 8px 8px 22px; background:var(--tinte); border:1px solid var(--linie-dunkel); box-shadow:0 14px 30px -14px rgba(0,0,0,.7); transform:translate(-50%,160%); visibility:hidden; transition:transform .35s var(--ease),visibility .35s; }
.buybar.is-visible{ transform:translate(-50%,0); visibility:visible; }
.buybar p{ margin:0; color:#fff; font-weight:600; font-size:.98rem; white-space:nowrap; }
.buybar small{ margin-left:10px; color:var(--hell-2); font-weight:400; font-size:.9rem; }
.buybar .knopf{ padding:10px 18px; font-size:.96rem; }
@media (max-width:760px){
  .buybar{ left:10px; right:10px; bottom:10px; transform:translateY(150%); justify-content:space-between; padding:10px 10px 10px 16px; }
  .buybar.is-visible{ transform:none; }
  .buybar p{ white-space:normal; line-height:1.25; }
  .buybar small{ display:block; margin:0; }
  .fuss{ padding-bottom:110px; }
}

/* ============ Unterseiten: Leseprobe, Glossar, 404 ============ */
[hidden]{ display:none !important; }
.menue a[aria-current="page"]{ color:#fff; }
.menue a[aria-current="page"]::after{ transform:scaleX(1); }
.handy-menue a[aria-current="page"]{ color:var(--gelb); }

/* Senkrechter Maßstab für Inhaltsleiste und Übungsschritte */
.skala-senkrecht{ list-style:none; position:relative; padding-left:64px; }
.skala-senkrecht::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:38px; background-color:var(--gelb); background-image:linear-gradient(180deg,var(--tinte) 2px,transparent 2px),linear-gradient(180deg,var(--tinte) 1.5px,transparent 1.5px); background-size:46% 60px,22% 12px; background-repeat:repeat-y; background-position:100% 0,100% 0; border-right:3px solid var(--gelb-kante); }
.skala-senkrecht > li{ position:relative; border-bottom:1px solid var(--linie); }
.skala-senkrecht > li::before{ content:counter(list-item); position:absolute; left:-60px; width:26px; font-family:var(--kopf); font-weight:700; line-height:1; color:var(--tinte); font-variant-numeric:tabular-nums; }

/* Seitenkopf */
.seitenkopf{ background:var(--asphalt); color:var(--hell); padding:56px 0 64px; overflow:hidden; }
.seitenkopf h1{ font-size:clamp(2.8rem,5.6vw,5rem); line-height:.95; max-width:15em; margin-bottom:22px; color:var(--hell); }
.seitenkopf p{ color:var(--hell-2); font-size:1.15rem; max-width:40em; margin:0; }
.krumen ol{ list-style:none; display:flex; flex-wrap:wrap; margin-bottom:28px; font-size:.95rem; color:var(--hell-2); }
.krumen li + li::before{ content:"/"; margin:0 10px; color:var(--stahl-dunkel); }
.krumen a{ color:var(--hell-2); text-decoration:none; }
.krumen a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--gelb); text-underline-offset:3px; }
.krumen [aria-current]{ color:#fff; }

/* Leseprobe: wo im Kurs man steht, Modul 1 von 8 */
.modulband{ margin-top:40px; max-width:780px; }
.modulband ol{ list-style:none; position:relative; display:grid; grid-template-columns:repeat(8,1fr); height:76px; background:var(--gelb); border-bottom:4px solid var(--gelb-kante); }
.modulband ol::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--tinte) 2px,transparent 2px) 0 0 / 12.5% 48% repeat-x,linear-gradient(90deg,var(--tinte) 1.5px,transparent 1.5px) 0 0 / 2.5% 20% repeat-x; pointer-events:none; }
.modulband li{ position:relative; display:flex; }
.modulband a{ flex:1; display:flex; align-items:flex-end; gap:8px; padding:0 0 8px 10px; color:var(--tinte); text-decoration:none; font-family:var(--kopf); font-weight:700; }
.modulband b{ font-size:2.1rem; line-height:1; }
.modulband span{ font-size:.82rem; text-transform:uppercase; letter-spacing:.02em; line-height:1.1; padding-bottom:3px; }
.modulband .hier a{ background:var(--tinte); color:var(--gelb); }
.modulband .kern b{ color:var(--rot); }
.modulband a:hover b{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:640px){ .modulband span{ display:none; } .modulband b{ font-size:1.6rem; } .modulband a{ padding:0 0 6px 7px; } .modulband ol{ height:64px; } }

/* Lesetext mit Inhaltsleiste */
.lesen{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:72px; align-items:start; }
.lesen > *{ min-width:0; }
.lesen__leiste{ position:sticky; top:calc(var(--nav-h) + var(--mess-h) + 32px); }
.lesen__leiste p{ font-family:var(--kopf); font-weight:700; font-size:1.2rem; text-transform:uppercase; letter-spacing:.03em; margin:0; }
.lesen__leiste small{ display:block; color:var(--text-2); font-size:.92rem; margin:2px 0 18px; }
.inhaltsleiste > li{ padding:10px 0; }
.inhaltsleiste > li::before{ top:10px; font-size:1.25rem; }
.inhaltsleiste a{ text-decoration:none; font-weight:600; }
.inhaltsleiste a:hover, .inhaltsleiste a.aktiv{ text-decoration:underline; text-decoration-color:var(--tinte); text-decoration-thickness:2px; text-underline-offset:4px; }
@media (max-width:960px){ .lesen{ grid-template-columns:1fr; gap:40px; } .lesen__leiste{ position:static; } }

.text{ max-width:46em; }
.hinweis{ font-size:.95rem; color:var(--text-2); margin-bottom:26px; }
.text .einstieg{ font-size:1.25rem; line-height:1.55; }
.text h2{ font-size:clamp(2rem,3.4vw,2.8rem); margin:1.9em 0 .55em; padding-top:22px; border-top:2px solid var(--tinte); scroll-margin-top:calc(var(--nav-h) + var(--mess-h) + 16px); }
.glossary code, .text code{ font-family:var(--mono); font-size:.9em; background:rgba(20,20,20,.07); padding:.1em .35em; }
.text pre{ margin:0 0 1.4em; padding:22px 24px; background:var(--asphalt); color:var(--hell); border-top:4px solid var(--gelb); overflow-x:auto; font-family:var(--mono); font-size:.92rem; line-height:1.65; }
.text pre code{ background:none; padding:0; font-size:1em; color:inherit; }
.tabelle-rahmen{ overflow-x:auto; margin:6px 0 1.4em; }
.tabelle{ width:100%; border-collapse:collapse; font-size:1rem; }
.tabelle th{ text-align:left; font-family:var(--kopf); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.03em; padding:10px 18px 10px 0; border-bottom:2px solid var(--tinte); }
.tabelle td{ padding:12px 18px 12px 0; border-bottom:1px solid var(--linie); vertical-align:top; color:var(--text-2); }
.tabelle td:first-child{ font-weight:700; color:var(--text); white-space:nowrap; }
.merke{ margin:30px 0; padding:20px 0 4px; border-top:2px solid var(--tinte); border-bottom:1px solid var(--linie); }
.merke__titel{ display:inline-block; margin-bottom:10px; padding:3px 10px; background:var(--gelb); color:var(--tinte); font-family:var(--kopf); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.03em; }
.merke--achtung .merke__titel{ background:var(--tinte); color:var(--gelb); }
.merke p{ margin:0 0 16px; color:var(--text-2); }
.uebungsblock{ margin:52px 0 12px; padding-top:22px; border-top:2px solid var(--tinte); scroll-margin-top:calc(var(--nav-h) + var(--mess-h) + 16px); }
.uebungsblock h2{ border:0; padding:0; margin:0 0 20px; }
.uebungsschritte > li{ padding:14px 0; }
.uebungsschritte > li::before{ top:12px; font-size:1.6rem; }
.weiterlesen{ margin-top:40px; font-weight:600; }
@media (max-width:640px){ .text .einstieg{ font-size:1.12rem; } .text pre{ padding:18px; font-size:.85rem; } .skala-senkrecht{ padding-left:54px; } .skala-senkrecht::before{ width:32px; } .skala-senkrecht > li::before{ left:-52px; } }

/* Glossar */
.az-band{ margin-top:40px; }
.az-band ul{ list-style:none; display:flex; overflow-x:auto; background-color:var(--gelb); background-image:linear-gradient(90deg,var(--tinte) 2px,transparent 2px),linear-gradient(90deg,var(--tinte) 1.5px,transparent 1.5px); background-size:60px 44%,12px 20%; background-repeat:repeat-x; background-attachment:local; border-bottom:4px solid var(--gelb-kante); scrollbar-width:thin; scrollbar-color:var(--stahl-dunkel) transparent; }
.az-band li{ flex:1 0 auto; }
.az-band a{ display:block; min-width:48px; padding:34px 8px 8px; text-align:center; font-family:var(--kopf); font-weight:700; font-size:1.6rem; line-height:1; color:var(--tinte); text-decoration:none; }
.az-band a:hover, .az-band a:focus-visible{ background:var(--tinte); color:var(--gelb); }
.filter{ display:flex; flex-direction:column; gap:8px; max-width:540px; margin-bottom:34px; }
.filter label{ font-family:var(--kopf); font-weight:700; font-size:1.1rem; text-transform:uppercase; letter-spacing:.03em; }
.filter input{ font:inherit; font-size:1.1rem; padding:14px 16px; border:2px solid var(--tinte); border-radius:3px; background:var(--papier); color:var(--text); }
.filter input:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--gelb); }
.filter__leer{ padding:20px 0; border-top:2px solid var(--tinte); color:var(--text-2); }
.glossary{ margin:0; border-top:2px solid var(--tinte); }
.glossary > div{ display:grid; grid-template-columns:minmax(200px,.8fr) 2fr; gap:6px 56px; padding:24px 0; border-bottom:1px solid var(--linie); scroll-margin-top:calc(var(--nav-h) + var(--mess-h) + 16px); }
.glossary dt{ font-family:var(--kopf); font-weight:700; font-size:1.7rem; line-height:1.1; }
.glossary > div:target dt{ background:var(--gelb); justify-self:start; padding:0 .15em; }
.glossary dd{ margin:0; color:var(--text-2); }
.glossary dd small{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:.92rem; font-weight:600; color:var(--text); }
.glossary dd small::before{ content:""; width:16px; height:6px; background:var(--gelb); flex-shrink:0; }
@media (max-width:760px){ .glossary > div{ grid-template-columns:1fr; } .glossary dt{ font-size:1.5rem; } }

/* Fehlerseite nutzt das Schlussband */
.schluss h1{ color:var(--hell); font-size:clamp(3rem,6.4vw,5.6rem); }
.fehlerseite{ min-height:calc(100vh - var(--nav-h) - var(--mess-h)); display:flex; align-items:center; }
.fehlerseite > .innen{ width:100%; }

/* Bewegung reduzieren: alles steht, Zustände bleiben */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .glied--b{ animation:none; }
  .ring{ animation:none; }
  .kopfzeile, .kopfzeile__in, .buybar, .auszug, .zert__bild svg, .knopf svg, .modul summary svg, .faq summary svg, .handy-menue{ transition:none; }
}