/* Reichl Ingenieurleistungen – Webseite (Entwurf, lokal).
   Schrift: Archivo. Liegen Dateien in fonts/, werden sie geladen, sonst Systemschrift (keine Fremd-Dienste).
   Aufbau: dunkles Kopfband, helle Inhaltsflächen, ein Orange #E8721F nur als kleines Quadrat und als Akzent. */
@font-face{font-family:"Archivo";font-weight:400 800;font-display:swap;src:url("fonts/Archivo-Variable.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-weight:400 800;font-display:swap;src:url("fonts/Archivo-Variable-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#11100E; --ink2:#1A1815; --paper:#FFFFFF; --soft:#F6F5F2;
  --fg:#14120F; --mut:#5C5951; --line:#E6E4DE; --accent:#E8721F;
  --on-ink:#F1EFE8; --on-ink-mut:#A7A398; --line-ink:#2E2B26;
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--paper);color:var(--fg);font:17px/1.65 var(--f);padding-inline:max(20px,env(safe-area-inset-left,0px));overflow-x:clip;-webkit-font-smoothing:antialiased}
.wrap{max-width:70rem;margin:0 auto}
a{color:inherit}
h1,h2,h3{text-wrap:balance;line-height:1.1;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);color:var(--fg);padding:.5rem .8rem;z-index:10}

/* vollflächige Bänder, ohne zusätzliche Hüllen im HTML */
.band-ink,.hero,header.top,#kontakt,footer{background:var(--ink);color:var(--on-ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
/* Abschnittskopf: Nummer mit Linie, große Überschrift links, Einleitung rechts, feine Linie darunter */
.sh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2rem 4rem;align-items:end;padding-bottom:2rem;margin-bottom:3rem;border-bottom:1px solid var(--line)}
.sn{display:flex;align-items:center;gap:1rem;font:700 .95rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.sn::before{content:"";width:3.2rem;height:3px;background:var(--accent)}
.sh h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.sh .intro{margin:0;max-width:34rem;text-wrap:pretty}
#vorgehen .sh,#praxis .sh,#kontakt .sh{border-bottom-color:var(--line-ink)}
#kontakt h2{color:var(--on-ink)}

/* Was uns unterscheidet: helles Band, weiße Karten mit Symbol */
#unterschied{position:relative;isolation:isolate}
#unterschied::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:var(--soft)}
#unterschied .sh{border-bottom-color:#E1DED7}

/* Vorgehen und Praxis: dunkles Band mit feinem Raster wie Millimeterpapier und einem schwachen orangen Schein */
#vorgehen,#praxis{position:relative;isolation:isolate;color:var(--on-ink);padding-block:6rem}
#praxis{padding-top:2rem}
#praxis::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:
  linear-gradient(rgba(241,239,232,.045) 1px,transparent 1px) 0 0/32px 32px fixed,
  linear-gradient(90deg,rgba(241,239,232,.045) 1px,transparent 1px) 0 0/32px 32px fixed,
  linear-gradient(180deg,var(--ink),#161411 22rem)}
#praxis .intro{color:var(--on-ink-mut)}
/* Übergang Vorgehen → Praxis: feine Linie, zur Mitte orange, mit dem Quadrat aus dem Logo */
.trenner{position:absolute;top:0;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(241,239,232,.12) 25%,rgba(232,114,31,.7) 50%,rgba(241,239,232,.12) 75%,transparent);z-index:1}
.trenner span{cursor:grab;touch-action:none;pointer-events:auto;transition:box-shadow .2s;position:absolute;left:50%;top:0;width:12px;height:12px;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 0 6px var(--ink),0 0 24px 6px rgba(232,114,31,.35)}
/* Nebel mit Formeln hinter dem Abschnittskopf (nebel.js) */
#praxis{padding-top:6rem}
.nebel{position:absolute;top:0;left:50%;width:100vw;height:26rem;transform:translateX(-50%);z-index:-1;pointer-events:none;display:block}
#praxis .sh{min-height:12rem;align-items:end}
#praxis.zieht{user-select:none;-webkit-user-select:none;cursor:grabbing}

/* Dashboard (Beispieldaten) */
.dash{background:rgba(26,24,21,.92);border:1px solid var(--line-ink);border-top:3px solid var(--fc,var(--accent));box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.dash-bar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;justify-content:space-between;align-items:center;padding:.9rem 1.4rem;border-bottom:1px solid var(--line-ink)}
.dash-t{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.95rem}
/* Umschalter zwischen zwei Beispielen eines Felds (Prozesse): eigene Zeile unter der Kopfzeile, zwei große Karten, damit man ihn nicht übersieht */
.beispiele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line-ink);background:color-mix(in srgb,var(--fc) 6%,transparent)}
.bsp-l{grid-column:1/-1;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fc)}
.beispiele button{display:grid;gap:.3rem;text-align:left;font:inherit;color:var(--on-ink-mut);background:rgba(26,24,21,.6);border:1px solid var(--line-ink);border-left:4px solid var(--line-ink);padding:.8rem 1rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.beispiele button b{font-size:1rem;font-weight:700;color:var(--on-ink)}
.beispiele button span{font-size:.84rem}
.beispiele button:hover{border-left-color:var(--fc);color:var(--on-ink)}
.beispiele button[aria-pressed="true"]{color:var(--on-ink);background:color-mix(in srgb,var(--fc) 20%,#1A1815);border-color:var(--fc);border-left-color:var(--fc)}
.beispiele button[aria-pressed="false"] b::after{content:" →";color:var(--fc)}
@media (max-width:40rem){.beispiele{grid-template-columns:minmax(0,1fr)}}
.fq{width:.8rem;height:.8rem;background:var(--c)}
.chip{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut);border:1px solid var(--line-ink);padding:.25rem .6rem}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line-ink)}
.tile{padding:1.2rem 1.4rem;border-left:1px solid var(--line-ink);display:grid;gap:.25rem}
.tile:first-child{border-left:0}
.tl{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut)}
.tv{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.tv small{font-size:.5em;font-weight:600;color:var(--on-ink-mut);letter-spacing:0}
.ts{font-size:.85rem;color:var(--on-ink-mut)}
.tile.hl .tv{color:var(--fc,var(--accent))}
.panels{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.panel{padding:1.3rem 1.4rem;min-width:0}
.panel+.panel{border-left:1px solid var(--line-ink)}
.ph-t{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;margin-bottom:.8rem}
.ph-t b{font-size:1rem}.ph-t span{font-size:.82rem;color:var(--on-ink-mut)}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
#verbraucher svg,#manuell svg{width:auto;max-width:100%;height:auto}
.chart text{font-family:var(--f);fill:var(--on-ink-mut);font-size:11px}
.tip{position:absolute;pointer-events:none;background:var(--paper);color:var(--fg);font-size:.8rem;line-height:1.35;padding:.4rem .6rem;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap;opacity:0;transition:opacity .12s;transform:translate(-50%,-115%)}
.tip b{font-variant-numeric:tabular-nums}
.formel{padding:1.3rem 1.4rem 1.5rem;border-top:1px solid var(--line-ink);display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.fl{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fc,var(--accent))}
.formel p{font-size:clamp(1rem,2vw,1.25rem);font-family:"Cambria Math","STIX Two Math","Times New Roman",serif;color:var(--on-ink)}
.formel p b{font-family:var(--f);color:var(--fc,var(--accent))}
/* Erläuterung unter der Formel: größer, heller, kürzere Zeilen, damit sie sich auf dem dunklen Grund gut lesen lässt */
.formel>.fs{font-size:.96rem;line-height:1.65;color:#D3CFC5;max-width:72ch}
.formel>.fs b{color:var(--on-ink);font-weight:600}
/* Formel mit beschrifteten Summanden links, Annahmen als kleine Tabelle rechts */
.formel-zwei{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.2rem 2.8rem;align-items:start;margin:.6rem 0 .4rem}
.summe-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .7rem;margin:.2rem 0 .9rem}
.summe-zeile .sb{display:grid;justify-items:center;gap:.3rem}
.summe-zeile .sb b{font:600 clamp(1.1rem,2.2vw,1.4rem)/1.1 var(--f);color:var(--on-ink);border-bottom:2px solid var(--line-ink);padding:0 .1rem .3rem;font-variant-numeric:tabular-nums}
.summe-zeile .sb small{font-size:.75rem;color:var(--on-ink-mut);white-space:nowrap}
.summe-zeile .op{font-size:1.3rem;line-height:1.1;color:var(--on-ink-mut)}
.summe-zeile .erg b{color:var(--fc,var(--accent));border-bottom-color:var(--fc,var(--accent))}
.formel-zwei .notiz{margin-top:1.5rem;font-size:.95rem;line-height:1.65;color:#D3CFC5;max-width:62ch}
.formel-zwei .notiz b{color:var(--on-ink);font-weight:600}
.annahmen-t{width:100%;border-collapse:collapse;font-size:.9rem}
.annahmen-t caption{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fc,var(--accent));padding-bottom:.5rem}
.annahmen-t th,.annahmen-t td{padding:.38rem 0;border-top:1px solid var(--line-ink);vertical-align:top}
.annahmen-t th{font-weight:400;color:var(--on-ink-mut);text-align:left;padding-right:1rem;white-space:nowrap}
.annahmen-t td{color:var(--on-ink);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:56rem){.formel-zwei{grid-template-columns:minmax(0,1fr)}}
/* Aufklappbare Erklärungen unter Formeln: einfach erklärt und fachlich mit Herleitung */
.erkl{border-top:1px solid var(--line-ink);margin-top:.3rem}
.erkl+.erkl{margin-top:0}
.erkl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;padding:.6rem 0;font:600 .86rem/1.2 var(--f);color:var(--on-ink-mut)}
.erkl summary::-webkit-details-marker{display:none}
.erkl summary::before{content:"+";display:grid;place-items:center;width:1.3rem;height:1.3rem;border:1px solid var(--fc,var(--accent));color:var(--fc,var(--accent));font-weight:700;flex:none}
.erkl[open] summary::before{content:"−"}
.erkl summary:hover{color:var(--on-ink)}
.erkl>div{font:400 .92rem/1.6 var(--f);color:var(--on-ink-mut);padding:0 0 .9rem 1.85rem;max-width:60rem}
.erkl div p{font:inherit;color:inherit;margin:0 0 .5rem}
.erkl i{font-family:"Cambria Math","STIX Two Math","Times New Roman",serif}
/* Herleitung als Rechenweg: Schritt | Rechnung | Ergebnis */
.rechnung{width:100%;max-width:52rem;border-collapse:collapse;margin:.2rem 0 .8rem;font-variant-numeric:tabular-nums}
.rechnung th,.rechnung td{text-align:left;vertical-align:top;padding:.45rem .8rem .45rem 0;border-bottom:1px solid var(--line-ink);font-size:.9rem;line-height:1.45}
.rechnung th{font-weight:600;color:var(--on-ink);white-space:nowrap}
.rechnung td{color:var(--on-ink-mut)}
.rechnung td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--on-ink);padding-right:0}
.erkl div p b{color:var(--on-ink);font-weight:600}
/* Vergleichstabelle: zwei Zahlenspalten rechtsbündig, erste Zeile als Kopf */
.rechnung.zahlen td{text-align:right;white-space:nowrap;font-weight:700;color:var(--on-ink)}
.rechnung.zahlen tr:first-child td{font-weight:600;color:var(--on-ink-mut)}
.erkl .rechnung{margin:.3rem 0 .9rem}
.rechnung .f{display:block;font-size:.78rem;opacity:.75;margin-top:.2rem}
/* Erklärungen unter einem zweispaltigen Panel laufen über die volle Breite; fachlich: Bild links, Rechnung rechts */
.reg-erkl{margin-top:1rem}
.erkl>div.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem 2rem;max-width:none;align-items:start}
@media (max-width:56rem){.erkl>div.zwei{grid-template-columns:minmax(0,1fr)}}
/* Schieberegler unter einer Erklärgrafik */
.regler{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.4rem 0 .3rem;font-size:.86rem;color:var(--on-ink)}
.regler input[type=range]{flex:1;min-width:10rem;max-width:20rem;accent-color:var(--fc,var(--accent))}
.regler button{font:600 .78rem/1 var(--f);color:var(--on-ink);background:transparent;border:1px solid var(--line-ink);padding:.4rem .6rem;cursor:pointer}
.regler button:hover{border-color:var(--fc,var(--accent))}
/* schlechtester Fall im Rot vom Schwarzspecht */
.rechnung tr.schlecht th,.rechnung tr.schlecht td:last-child{color:#E0353B}
.rechnung tr.schlecht th,.rechnung tr.schlecht td{border-bottom:2px solid #C4161C}
.rechnung tr.summe th,.rechnung tr.summe td:last-child{color:var(--fc,var(--accent))}
.rechnung tr.summe th,.rechnung tr.summe td{border-bottom:2px solid var(--fc,var(--accent))}
.erkl .quelle{font-size:.8rem;color:var(--on-ink-mut);opacity:.85}
.erkl .quelle a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:40rem){.rechnung td:nth-child(2){font-size:.82rem}
/* Smartphone: Rechentabellen zeilenweise stapeln (Bezeichnung oben, Rechnung und Ergebnis darunter), Erklärungen ohne Einzug */
@media (max-width:40rem){
  .formel{padding-inline:1rem}
  .erkl>div{padding-left:0}
  .rechnung,.rechnung tbody{display:block}
  .rechnung tr{display:grid;grid-template-columns:minmax(0,1fr) fit-content(55%);column-gap:.8rem;padding:.45rem 0;border-bottom:1px solid var(--line-ink)}
  .rechnung th{grid-column:1/-1;white-space:normal;border:0;padding:0 0 .15rem}
  .rechnung td{border:0;padding:0}
  .rechnung td:last-child{white-space:normal}
  .rechnung td:only-of-type{grid-column:1/-1}
  .rechnung tr.summe,.rechnung tr.schlecht{border-bottom-width:2px}
  .rechnung tr.summe{border-bottom-color:var(--fc,var(--accent))}
  .rechnung tr.schlecht{border-bottom-color:#C4161C}
  .rechnung.zahlen{display:table}.rechnung.zahlen tbody{display:table-row-group}.rechnung.zahlen tr{display:table-row}
  .rechnung.zahlen th{white-space:normal;padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--line-ink)}.rechnung.zahlen td{padding:.45rem 0 .45rem .8rem;border-bottom:1px solid var(--line-ink)}
  .rechnung.zahlen tr.summe th,.rechnung.zahlen tr.summe td{border-bottom:2px solid var(--fc,var(--accent))}
}}
.fs{font-size:.88rem;color:var(--on-ink-mut)}
.dash+.dash{margin-top:2rem}
.dash[hidden]{display:none}
/* Reiter: ein Leistungsfeld wählen */
/* Reiter in einer Zeile; reicht der Platz nicht, umbrechen statt mit Bildlaufleiste scrollen */
/* Reiter der Leistungsfelder: alle gleich breit, als klare Knöpfe (Farbe oben, Name darunter); der gewählte ist in Feldfarbe hinterlegt */
.tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;margin-bottom:1.4rem}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;min-width:0;white-space:nowrap;font:600 .82rem/1.15 var(--f);color:#CFCBC1;background:#221F1B;border:1px solid rgba(241,239,232,.16);padding:.9rem .4rem .85rem;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.35);transition:color .15s,border-color .15s,background .15s,transform .15s}
.tabs button:hover{color:var(--on-ink);background:#2A2621;border-color:rgba(241,239,232,.3);transform:translateY(-1px)}
.tabs button[aria-selected="true"]{color:var(--on-ink);background:color-mix(in srgb,var(--c) 24%,#1A1815);border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 4px 14px rgba(0,0,0,.4)}
/* Feld-Symbol wie bei den Leistungen: Quadrat in Feldfarbe mit weißem Zeichen; "Alle Felder" zeigt das Feldraster aus dem Oi-Zeichen */
.tabs .ti{width:2.3rem;height:2.3rem;background:var(--c);display:grid;place-items:center;transition:transform .2s}
.tabs .ti img{width:1.55rem;height:auto;display:block}
.tabs .ti-alle{background:linear-gradient(#7D4FB0,#7D4FB0) 22% 18%/34% 24% no-repeat,linear-gradient(#F2C230,#F2C230) 78% 18%/34% 24% no-repeat,linear-gradient(#3E9A5B,#3E9A5B) 22% 50%/34% 24% no-repeat,linear-gradient(#2F6FB3,#2F6FB3) 78% 50%/34% 24% no-repeat,linear-gradient(#1B9AAA,#1B9AAA) 22% 82%/34% 24% no-repeat,linear-gradient(#5B5E66,#5B5E66) 78% 82%/34% 24% no-repeat,#2E2B26}
.tabs button:hover .ti{transform:scale(1.08)}
.tabs button[aria-selected="false"] .ti{filter:saturate(.75) brightness(.9)}
.tabs .tn{overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:56rem){.tabs{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}}
/* Nutzwertanalyse */
.nwa{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.nwa th,.nwa td{padding:.5rem .4rem;text-align:right;border-bottom:1px solid var(--line-ink);color:var(--on-ink-mut)}
.nwa th:first-child,.nwa td:first-child{text-align:left}
.nwa th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.nwa .best{color:var(--fc);font-weight:700}
.nwa tfoot td{color:var(--on-ink);font-weight:700;border-bottom:0}
.nwa tfoot .best{font-size:1.1rem}
.legende i.raute{width:.6rem;height:.6rem;background:var(--on-ink);transform:rotate(45deg)}
.regeln{margin:0;padding:0;list-style:none;counter-reset:rg;display:grid;gap:.85rem}
.regeln li{counter-increment:rg;position:relative;padding-left:2rem;color:var(--on-ink-mut);font-size:.95rem}
.regeln li::before{content:counter(rg);position:absolute;left:0;top:0;font-weight:800;color:var(--fc,var(--accent));font-size:1.1rem;line-height:1.4}
.regeln b{display:block}
.glossar{margin:.2rem 0 0;display:grid;gap:.45rem;font-size:.85rem;color:var(--on-ink-mut)}
.glossar div{display:grid;grid-template-columns:2.2rem minmax(0,1fr);column-gap:.8rem}
.glossar dt{font-family:"Cambria Math","Times New Roman",serif;color:var(--on-ink)}
.glossar dd{margin:0}.glossar b,.reg-math .fs b{color:var(--on-ink);font-weight:600}
.regeln b{color:var(--on-ink)}
/* Regression: Diagramm links, Mathematik rechts */
.panel.reg{border-top:1px solid var(--line-ink)}
/* Digitaler Zwilling im Werk: zwei Hallen nebeneinander, darunter die laufenden Summen */
.zw-steuer{display:flex;align-items:center;gap:.9rem;margin:0 0 1rem}
.zw-steuer input{flex:1;min-width:0;accent-color:var(--fc)}
.zw-play{font:inherit;font-size:.82rem;font-weight:600;color:var(--on-ink);background:transparent;border:1px solid var(--line-ink);padding:.35rem .9rem;cursor:pointer;min-width:6.5rem}
.zw-play:hover{border-color:var(--fc)}
.zw-uhr{font-variant-numeric:tabular-nums;font-weight:600;color:var(--on-ink);min-width:5.5rem;text-align:right}
.zw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem}
.zw-grid figure{margin:0;min-width:0}
.zw-grid figcaption{font-weight:700;color:var(--on-ink);margin-bottom:.4rem}
.zw-z{margin:.5rem 0 0;font-size:.85rem;color:var(--on-ink-mut);font-variant-numeric:tabular-nums}
.zw-z b{color:var(--on-ink);font-weight:600}
@media (max-width:56rem){.zw-grid{grid-template-columns:minmax(0,1fr)}}
.reg-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:start}
.reg-math{display:grid;gap:.7rem}
.reg-math .m{font-family:"Cambria Math","STIX Two Math","Times New Roman",serif;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--on-ink)}
.reg-math .m.klein{font-size:.98rem;color:var(--on-ink-mut);line-height:1.6}
.erg{margin:.4rem 0 0;display:grid;gap:.6rem;border-top:1px solid var(--line-ink);padding-top:.9rem}
.erg div{display:grid;grid-template-columns:2.2rem auto;column-gap:.8rem;align-items:baseline}
.erg dt{font-family:"Cambria Math","Times New Roman",serif;font-size:1.2rem;color:var(--on-ink-mut)}
.erg dd{margin:0;font-size:1.5rem;font-weight:800;color:var(--fc,var(--accent));font-variant-numeric:tabular-nums}
.erg span{grid-column:2;font-size:.82rem;color:var(--on-ink-mut)}
@media (max-width:56rem){.reg-grid{grid-template-columns:minmax(0,1fr)}}
.legende{display:flex;gap:1.2rem;font-size:.82rem;color:var(--on-ink-mut);margin:-.3rem 0 .8rem}
.legende span{display:flex;align-items:center;gap:.45rem}.legende i{width:.7rem;height:.7rem;display:block}
/* Weg eines Lieferscheins: vorher und nachher als zwei senkrechte Ketten nebeneinander */
.wege{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;margin-top:.4rem}
.weg{display:grid;gap:.6rem;align-content:start}
.wl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut)}
/* als Zeitleiste: durchgehende Linie, kleine Quadrate als Stationen */
.kette{list-style:none;margin:0;padding:0 0 0 1.5rem;display:grid;gap:.85rem;position:relative}
.kette::before{content:"";position:absolute;left:.3rem;top:.7rem;bottom:.7rem;width:1px;background:var(--line-ink)}
.kette li{position:relative;font-size:.95rem;color:var(--on-ink-mut);line-height:1.4}
.kette li::before{content:"";position:absolute;left:-1.5rem;top:.35rem;width:.6rem;height:.6rem;box-sizing:border-box;border:1.5px solid var(--on-ink-mut);background:#1A1815}
.kette.neu::before{background:var(--fc,var(--accent))}
.kette.neu li{color:var(--on-ink);font-weight:600}
.kette.neu li::before{border-color:var(--fc,var(--accent));background:var(--fc,var(--accent))}
.wl small{display:block;font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:800;color:var(--on-ink);margin-top:.2rem}
.weg:last-child .wl small{color:var(--fc,var(--accent))}
.kette.neu li{border-color:var(--fc,var(--accent));color:var(--on-ink)}
.kette.neu li+li::before{background:var(--fc,var(--accent))}
/* Diagramme zeichnen sich beim Einblenden auf */
.rv-on .zeichne{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.rv-on.rv-in .zeichne{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s ease .3s}
.rv-on .wachs{transform:scaleX(0);transform-box:fill-box;transform-origin:left}
.rv-on.rv-in .wachs{transform:none;transition:transform 1s cubic-bezier(.2,.7,.2,1) .3s}

/* Vorgehen: dunkles Band mit feinem Raster wie Millimeterpapier und einem schwachen orangen Schein */
#vorgehen::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:
  radial-gradient(ellipse 60% 70% at 85% 0%,rgba(232,114,31,.13),transparent 60%),
  linear-gradient(rgba(241,239,232,.045) 1px,transparent 1px) 0 0/32px 32px fixed,
  linear-gradient(90deg,rgba(241,239,232,.045) 1px,transparent 1px) 0 0/32px 32px fixed,
  var(--ink)}

.draft{background:var(--soft);color:var(--mut);font:500 .78rem/1.4 var(--f);letter-spacing:.02em;padding:.45rem 1rem;text-align:center;margin-inline:calc(-1*max(20px,env(safe-area-inset-left,0px)))}

/* Kopf */
header.top{position:relative;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding-block:1.4rem}
/* Mitlaufende Kopfzeile (kopf.js): oben durchsichtig über dem Start, beim Scrollen dunkel hinterlegt und flacher; am Handy weicht sie beim Runterscrollen aus */
header.top{position:sticky;top:0;z-index:60;transition:padding .25s,transform .3s}
header.top::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:rgba(20,18,15,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-ink);opacity:0;transition:opacity .25s;pointer-events:none}
header.top.fest{padding-block:.6rem}
header.top.fest::before{opacity:1}
header.top.fest .lockup{--h:1.75rem}
.lockup .wm,.lockup .line{transition:height .25s,font-size .25s,margin .25s}
@media (max-width:56rem){header.top.weg{transform:translateY(-100%)}}
/* Handy: Kopf kompakt, Menü in einer Zeile; mitlaufend nur noch Logo-Schriftzug und Menü */
.menue-knopf{display:none}
@media (max-width:40rem){
  header.top{gap:.4rem 1rem;padding-block:.9rem}
  .menue-knopf{display:inline-flex;align-items:center;gap:.5rem;font:600 .9rem/1 var(--f);color:var(--on-ink);background:transparent;border:1px solid rgba(241,239,232,.3);padding:.55rem .85rem;cursor:pointer}
  .menue-knopf::before{content:"";width:1rem;height:.7rem;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
  header.top.offen .menue-knopf::before{background:linear-gradient(45deg,transparent 45%,currentColor 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 45% 55%,transparent 55%)}
  header.top nav{display:none;width:100%;flex-direction:column;gap:0;font-size:1rem}
  header.top.offen nav{display:flex}
  header.top.offen::before{opacity:1}
  header.top nav a{padding:.75rem 0;border-top:1px solid var(--line-ink)}
  header.top.fest{padding-block:.45rem}
  header.top.fest .lockup{--h:1.35rem}
  header.top.fest .lockup .line{display:none}
  html{scroll-padding-top:6.5rem}
}
@media (prefers-reduced-motion:reduce){header.top,header.top::before{transition:none}}
.logo{display:inline-flex;text-decoration:none;color:var(--on-ink)}
.lockup{--h:2.3rem;display:grid;justify-items:start}
.wm{height:var(--h);width:auto;display:block;overflow:visible}
.lockup .line{font:500 calc(var(--h)*.246)/1 var(--f);letter-spacing:.06em;color:var(--on-ink-mut);margin-top:calc(var(--h)*.2)}
nav{display:flex;gap:.4rem 1.8rem;flex-wrap:wrap;font-size:.95rem}
nav a{text-decoration:none;color:var(--on-ink-mut);padding-block:.3rem;transition:color .15s}
nav a:hover{color:var(--on-ink)}

.dot{display:inline-block;width:.6rem;height:.6rem;background:var(--accent);flex:none}

/* Start */
.hero{position:relative;isolation:isolate;padding-block:6rem 0;border-top:1px solid var(--line-ink);min-height:min(88vh,52rem);display:flex;flex-direction:column;justify-content:space-between}
.hero-fx{position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);z-index:-1;display:block}
.hero .in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3rem 4rem;align-items:center}
.hero h1 em{font-style:normal;color:var(--accent)}
.pq{display:inline-block;width:.17em;height:.17em;background:var(--accent);margin-left:.05em;vertical-align:baseline}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Oi-Zeichen rechts: ruhig, leicht schwebend */
.hero-oi{display:grid;place-items:center}
.hero-oi img{width:min(100%,26rem);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:schwebe 8s ease-in-out infinite}
@media (max-width:56rem){.hero-oi img{width:min(70%,16rem)}}
@media (prefers-reduced-motion:reduce){.hero-oi img{animation:none}}
/* schwebende Karten mit Beispielwerten (derzeit nicht im Startbereich) */
.hero-vis{position:relative;height:24rem}
.hc{position:absolute;display:grid;gap:.5rem;padding:1rem 1.2rem;background:rgba(26,24,21,.78);border:1px solid var(--line-ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 24px 50px -24px rgba(0,0,0,.8);animation:schwebe 7s ease-in-out infinite}
.hc1{left:0;top:1rem;width:min(100%,21rem)}
.hc2{right:0;top:9.5rem;width:12.5rem;animation-delay:-2.3s}
.hc3{left:0;bottom:0;width:min(13rem,45%);animation-delay:-4.6s}
.hc2{width:min(12rem,44%)}
@keyframes schwebe{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hk{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-mut)}
.hv{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-ink)}
.hv.big{font-size:2.2rem;color:var(--accent)}
.hv small{font-size:.5em;font-weight:600;color:var(--on-ink-mut);letter-spacing:0}
.hv i{font-family:"Cambria Math","Times New Roman",serif}
.hc svg{display:block;width:100%;height:auto}
.hl-a{fill:var(--accent);fill-opacity:.15}.hl-l{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.hl-g{stroke:#F1EFE8;stroke-width:1.2;stroke-dasharray:4 3}
.hr-l{stroke:var(--accent);stroke-width:2}.hr-p{fill:#D8D4CA}.hr-a{fill:var(--accent)}
.hbar{display:block;height:6px;background:rgba(241,239,232,.12)}.hbar i{display:block;height:100%;background:var(--accent)}
/* Kurzprofil als Leiste am unteren Rand */
.hero>.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:4.5rem;border-left:0;padding:0;border-top:1px solid var(--line-ink)}
.hero>.facts>div{padding:1.3rem 1.5rem 1.6rem;border-left:1px solid var(--line-ink)}
.hero>.facts>div:first-child{border-left:0;padding-left:0}
.eyebrow{font:600 .78rem/1.4 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6rem}
.hero h1{font-size:clamp(1.9rem,9vw,5.2rem);font-weight:800;letter-spacing:-.03em;line-height:1;overflow-wrap:anywhere}
.drei{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:1.6rem;font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:600;color:var(--on-ink)}
.drei .dot{width:.5rem;height:.5rem}
.lead{margin-top:1.8rem;max-width:36rem;font-size:1.15rem;color:var(--on-ink-mut)}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:.9rem 1.5rem;font-weight:600;text-decoration:none;border:1px solid var(--on-ink-mut);color:var(--on-ink);transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--on-ink)}
.btn.main{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.btn.main::before{content:"";width:.5rem;height:.5rem;background:var(--accent);flex:none}
.btn.main:hover{background:#fff}
.facts{display:grid;gap:1.1rem;border-left:1px solid var(--line-ink);padding-left:1.8rem;font-size:.9rem;line-height:1.45;color:var(--on-ink-mut)}
.facts b{display:block;color:var(--on-ink);font-weight:600;font-size:1rem}

section{padding-block:5rem}
.sec-h{display:flex;gap:.8rem;align-items:center;margin-bottom:1.2rem}
.sec-h .dot{width:.7rem;height:.7rem}
.sec-h h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.02em}
.intro{max-width:38rem;color:var(--mut);margin-bottom:3rem;font-size:1.1rem}

/* Was uns unterscheidet: vier Spalten mit feiner Trennlinie, oben eine kurze orange Marke */
#unterschied{padding-top:1rem}
.diff{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;counter-reset:dp}
.dp{position:relative;overflow:hidden;counter-increment:dp;padding:2.2rem 2rem 2.2rem;background:var(--paper);border:1px solid #E4E1DA;transition:box-shadow .25s,transform .25s}
/* große Kontur-Ziffer als Wasserzeichen oben rechts */
.dp::after{content:counter(dp,decimal-leading-zero);position:absolute;right:1.2rem;top:.6rem;font-size:5.5rem;font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #E6E3DC;transition:-webkit-text-stroke-color .25s;pointer-events:none}
.dp:hover::after{-webkit-text-stroke-color:rgba(232,114,31,.55)}
.dp>*{position:relative;z-index:1}
.dp::before{content:"";position:absolute;top:-1px;left:-1px;width:2.6rem;height:3px;background:var(--accent);transition:width .3s}
.dp:hover{box-shadow:0 18px 40px -24px rgba(20,18,15,.4);transform:translateY(-3px)}
.dp:hover::before{width:calc(100% + 2px)}
/* Liniensymbole außerhalb der Leistungsfelder: überall gleich (Rahmen, Größe, Strich 3,5 wie die Feld-Icons, Orange) */
/* gleiche Form wie die Feld-Icons: gefülltes Quadrat, weißes Zeichen, kleiner oranger Punkt oben rechts */
.dpi,.ic{position:relative;width:3.6rem;height:3.6rem;display:grid;place-items:center;background:var(--fg);margin-bottom:1.4rem}
.ic{background:#2B2824}
.dpi::after,.ic::after{content:"";position:absolute;right:.3rem;top:.3rem;width:.35rem;height:.35rem;background:var(--accent)}
.dpi svg,.ic svg{display:block;width:2.4rem;height:2.4rem;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.dp .kick{margin-bottom:.6rem}
.kick{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.dp h3{font-size:1.3rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.7rem}
.dp p{color:var(--mut);font-size:.98rem;hyphens:auto;-webkit-hyphens:auto}

/* Leistungsfelder als Karten */
.rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
/* Karte: Kopf mit Quadrat links und Titel rechts, Text, unten das Beispiel in einem Kasten mit Feldfarbe am Rand.
   Beim Darüberfahren färbt sich die Karte ganz leicht in der Feldfarbe und die Leiste oben wird kräftiger. */
/* Subgrid: Kopf, Text und Beispiel liegen in allen Kacheln einer Reihe auf gleicher Höhe, die Kästen sind gleich hoch */
.row{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:1rem;padding:1.6rem 1.7rem 1.9rem;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:box-shadow .25s,transform .25s,border-color .25s}
.row::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--c);transition:height .25s}
.row::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 55%);opacity:0;transition:opacity .25s;pointer-events:none}
/* Hintergrund-Band je Feld (img/band, gezeichnet von werkzeug/baender.ps1), Reihenfolge wie im HTML */
.row{background:var(--paper);padding-bottom:0}
/* Band als eigenes Element unten in der Kachel: von Kante zu Kante, Höhe passend zum Bild (400 × 120) */
.row .band{margin:0 -1.7rem;aspect-ratio:400/120;max-height:7rem;background:var(--band) no-repeat center bottom/cover;align-self:end}
.row:nth-child(1){--band:url("img/band/werksentwicklung.svg?v=8")}
.row:nth-child(2){--band:url("img/band/energie.svg?v=8")}
.row:nth-child(3){--band:url("img/band/umwelt.svg?v=8")}
.row:nth-child(4){--band:url("img/band/arbeitssicherheit.svg?v=17")}
.row:nth-child(5){--band:url("img/band/prozesse.svg?v=13")}
.row:nth-child(6){--band:url("img/band/qualitaet.svg?v=14")}
.row:hover{box-shadow:0 18px 40px -22px rgba(20,18,15,.4);transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 35%,var(--line))}
.row:hover::before{height:6px}
.row:hover::after{opacity:1}
.row>*{position:relative;z-index:1}
.row>div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.1rem;align-items:center}
.row h3{font-size:1.35rem;font-weight:800;letter-spacing:-.015em;align-self:end}
.row .unter{font-size:.92rem;font-weight:500;color:var(--fg);opacity:.72;margin-top:.3rem;align-self:start;line-height:1.35}
.row>p{color:var(--mut);font-size:.95rem;line-height:1.6;hyphens:auto;-webkit-hyphens:auto}
/* Beispiel aufklappbar: im Überblick nur der Hinweis, aufgeklappt der Kasten */
.row .ex-zeile{align-self:start}
.row .ex{font-size:.9rem;line-height:1.45;color:var(--fg)}
/* Sprünge aus der Leistungskarte zum Pilotbeispiel und zum Musterbericht des Felds */
.row .sprung{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.7rem}
.row .sprung a{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.row .sprung a::before{content:"→";color:var(--c);font-size:.9rem;letter-spacing:0}
.row .sprung a:hover{color:var(--fg)}
.row .ex summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.row .ex summary::-webkit-details-marker{display:none}
.row .ex summary::before{content:"+";display:grid;place-items:center;width:1.2rem;height:1.2rem;background:var(--c);color:#fff;font-size:.9rem;line-height:1;transition:transform .2s}
.row .ex[open] summary::before{content:"−"}
.row .ex summary:hover{color:var(--fg)}
.row .ex p{margin-top:.6rem;background:rgba(246,245,242,.94);border-left:3px solid var(--c);padding:.75rem 1rem}
.row .ex b{font-weight:700}

.q{grid-row:span 2;width:3.6rem;height:3.6rem;background:var(--c);display:grid;place-items:center;position:relative;transition:transform .25s}
.q::after{content:"";position:absolute;right:.3rem;top:.3rem;width:.35rem;height:.35rem;background:var(--accent)}
.q img{width:2.4rem;height:auto;display:block}
.row:hover .q{transform:scale(1.06)}

/* Vorgehen: Schrittlinie mit orangen Knoten, Karten mit großer Konturziffer */
#vorgehen .intro{color:var(--on-ink-mut)}
.track{list-style:none;margin:3.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:.4rem;height:1px;background:linear-gradient(90deg,var(--accent),rgba(232,114,31,.15))}
.stp{position:relative;padding-top:2.2rem;display:flex}
.node{position:absolute;left:0;top:0;width:.8rem;height:.8rem;background:var(--accent);box-shadow:0 0 0 6px var(--ink)}
.card{flex:1;background:rgba(241,239,232,.025);border:1px solid var(--line-ink);padding:2rem 1.8rem 2.2rem;transition:border-color .25s,background .25s,transform .25s}
.stp:hover .card{border-color:rgba(232,114,31,.6);background:rgba(241,239,232,.045);transform:translateY(-3px)}
.big{display:block;font-size:clamp(3.6rem,7vw,5.6rem);font-weight:800;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(241,239,232,.3);margin-bottom:1.6rem;transition:-webkit-text-stroke-color .25s}
.stp:hover .big{-webkit-text-stroke-color:var(--accent)}
.card h3{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.7rem}
.card p{color:var(--on-ink-mut)}
/* Unser Anspruch: helles Band zwischen Vorgehen und Praxis, trennt die beiden dunklen Abschnitte */
#anspruch{position:relative;isolation:isolate;padding-block:5.5rem 6rem}
#anspruch::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:var(--soft)}
.claim-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2rem 4rem;align-items:end}
.statement{font-size:clamp(1.8rem,4.2vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--fg)}
.statement em{display:block;font-style:normal;color:var(--accent)}
.lbl{display:flex;align-items:center;gap:1rem;font:700 .95rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem}
.lbl::before{content:"";width:3.2rem;height:3px;background:var(--accent)}
.merk{color:var(--mut);font-size:1.15rem;border-left:3px solid var(--accent);padding-left:1.2rem}

/* Einblenden */
.rv-on{opacity:0;transform:translateY(18px);transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}
.rv-on.rv-in{opacity:1;transform:none}

/* ourPlace: heller, warmer Abschnitt nach den Zahlen */
#ourplace{position:relative;isolation:isolate;padding-block:6rem}
#ourplace::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:linear-gradient(180deg,#EEF3E8,#F6F5F2)}
.op{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem 4.5rem;align-items:center}
.op h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin-bottom:1.3rem}
.op-lead{font-size:1.15rem;color:var(--mut);max-width:32rem}
.op h3{font-size:1.4rem;font-weight:800;margin:2rem 0 .6rem;color:#3E9A5B}
.op-text>p:not(.op-lead){color:var(--mut);max-width:34rem}
.op-zeiten{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0 2rem}
.op-zeiten span.an{background:var(--fg);border-color:var(--fg);color:#fff}
.op-zeiten span{transition:background .4s,color .4s,border-color .4s;font-size:.8rem;font-weight:600;padding:.3rem .7rem;border:1px solid #D5DCCD;background:#fff;color:var(--mut)}
.btn.dunkel{background:var(--fg);border-color:var(--fg);color:#fff}
.btn.dunkel::before{content:"";width:.5rem;height:.5rem;background:var(--accent);flex:none}
.btn.dunkel:hover{background:#2B2824}
/* Bilderstapel ourPlace */
.op-stapel{position:relative;aspect-ratio:16/10.5;margin:1rem 1rem 2rem 0}
.karte{position:absolute;inset:0;margin:0;background:#fff;padding:8px 8px 56px;box-shadow:0 26px 50px -26px rgba(20,18,15,.5);transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s,box-shadow .6s;will-change:transform}
.karte img{display:block;width:100%;height:100%;object-fit:cover;background:#E9EFE2}
.karte figcaption{position:absolute;left:12px;right:12px;bottom:9px;font-size:.9rem;font-weight:600;line-height:1.3;color:var(--fg)}
.karte figcaption b{display:flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:.15rem}
.karte figcaption b::before{content:"";width:.55rem;height:.55rem;background:var(--c)}
.karte[data-pos="0"]{z-index:5;transform:rotate(-1.2deg)}
.karte[data-pos="0"] img{animation:schwenk 9s ease-in-out infinite alternate}
.karte[data-pos="1"]{z-index:4;transform:translate(14px,10px) rotate(2.4deg)}
.karte[data-pos="2"]{z-index:3;transform:translate(-12px,16px) rotate(-3.4deg)}
.karte[data-pos="3"],.karte[data-pos="4"]{z-index:2;transform:translate(6px,20px) rotate(1deg);opacity:0}
.karte.weg{z-index:6;transform:translate(115%,-6%) rotate(14deg);opacity:0;transition:transform .7s cubic-bezier(.5,0,.7,.4),opacity .7s}
.bildrahmen{display:block;width:100%;height:100%;overflow:hidden}
.op-weiter{position:absolute;inset:0;z-index:7;background:transparent;border:0;cursor:grab;touch-action:pan-y}
.op-weiter:active{cursor:grabbing}
.op-stapel .op-play{z-index:8;top:1.1rem;right:1.1rem;bottom:auto;width:3.2rem;height:3.2rem}
.op-bild{position:relative;display:block;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 60px -30px rgba(20,18,15,.45);transform:rotate(1.2deg);transition:transform .4s}
.op-bild:hover{transform:rotate(0) scale(1.01)}
.op-bild img{display:block;width:100%;height:auto;animation:schwenk 18s ease-in-out infinite alternate}
@keyframes schwenk{from{transform:scale(1.08) translate(-2%,-1%)}to{transform:scale(1.08) translate(2%,1.5%)}}
.op-play{position:absolute;right:1.2rem;bottom:1.2rem;width:3.6rem;height:3.6rem;display:grid;place-items:center;background:var(--accent);box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:transform .2s}
.op-play svg{width:1.6rem;height:1.6rem;fill:#fff}
.op-bild:hover .op-play{transform:scale(1.08)}
@media (max-width:56rem){.op{grid-template-columns:minmax(0,1fr)}.op-bild{transform:none}}
@media (prefers-reduced-motion:reduce){.op-bild img,.karte img{animation:none!important}.karte{transition:none}}

/* Über mich */
.about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3rem 5rem}
.about p+p{margin-top:1.1rem}
.about p{color:var(--mut);max-width:38rem}
.about strong{color:var(--fg)}
.about .ich{display:flex;align-items:center;gap:1.6rem;margin-bottom:1.1rem}
.about .ich img{flex:none;width:9rem;height:9rem;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line),0 12px 28px -14px rgba(20,18,15,.45)}
.about .ich p{font-size:1.08rem;color:var(--fg)}
@media (max-width:40rem){.about .ich{flex-direction:column;align-items:flex-start;gap:1rem}.about .ich img{width:7.5rem;height:7.5rem}}
/* Kurzprofil unter Über mich: vier Spalten mit Trennlinie */
.profil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:3.5rem;border-top:1px solid var(--line);font-size:.9rem;line-height:1.45;color:var(--mut)}
.profil>div{padding:1.3rem 1.5rem 0;border-left:1px solid var(--line)}
.profil>div:first-child{border-left:0;padding-left:0}
.profil b{display:block;color:var(--fg);font-weight:600;font-size:1rem}
@media (max-width:52rem){
  .profil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profil>div:nth-child(3){border-left:0;padding-left:0}
  .profil>div:nth-child(n+3){margin-top:1.3rem;border-top:1px solid var(--line)}
}
.box{background:var(--soft);padding:1.8rem 1.8rem;align-self:start}
.box h3{font-size:1.05rem;margin-bottom:1rem}
.box ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem;font-size:.95rem;color:var(--mut)}
.box li{display:flex;gap:.7rem}
.box li::before{content:"";width:.45rem;height:.45rem;background:#3E9A5B;margin-top:.55rem;flex:none}
.specht{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;margin-top:2rem}
.specht img{height:7.5rem;width:auto;display:block}
.specht p{margin:0}

/* Kontakt (dunkel) */
#kontakt .sec-h h2{color:var(--on-ink)}
.contact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem 5rem;align-items:start}
.contact p{color:var(--on-ink-mut);max-width:34rem;font-size:1.1rem}
.mail{display:inline-block;margin-top:1.6rem;font-weight:700;font-size:clamp(1.2rem,2.6vw,1.7rem);text-decoration:none;color:var(--on-ink);border-bottom:2px solid var(--accent);padding-bottom:.2rem}
.ph{border-left:1px solid var(--line-ink);padding-left:1.8rem;font-size:.95rem;line-height:1.8;color:var(--on-ink-mut)}
.ph a{color:var(--on-ink)}
.web{font-weight:500}.web b{font-weight:800}.web .ing{color:var(--accent)}.web .pro{color:var(--on-ink)}
.mail{overflow-wrap:anywhere}
/* "ing" in ingprovement immer in Orange, auch in der Mailadresse */
.ing{color:var(--accent)}
mark{background:rgba(232,114,31,.22);color:inherit;padding:0 .25em}

/* Rechtstexte */
.legal{padding-block:4rem 5rem;max-width:46rem}
.legal h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:1.5rem;letter-spacing:-.02em}
.legal h2{font-size:1.2rem;margin:2.2rem 0 .6rem}
.legal p,.legal li{color:var(--mut)}
.legal p+p{margin-top:.8rem}
.legal mark{background:rgba(232,114,31,.16);color:var(--fg)}
/* Widerspruchsrecht getrennt von den übrigen Angaben hervorheben (Art. 21 Abs. 4 DSGVO) */
.legal .widerspruch{border-left:3px solid var(--accent);padding:.8rem 1rem;background:rgba(232,114,31,.06)}
.legal .widerspruch b{color:var(--fg);font-weight:600}
.legal .stand{margin-top:2.4rem;font-size:.9rem}
.hint{background:var(--soft);border-left:4px solid var(--accent);padding:1rem 1.2rem;margin-bottom:2rem;color:var(--fg)!important;font-size:.95rem}

footer{padding-block:2.2rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.85rem;color:var(--on-ink-mut);border-top:1px solid var(--line-ink)}
#kontakt+*{}
footer a{text-decoration:none;margin-left:1.2rem}footer a:first-child{margin-left:0}footer a:hover{color:var(--on-ink)}
/* Hinweis in der Fußzeile: die Seite kommt ohne Cookies und Tracking aus (eigener Block, kein Abstand links) */
footer a.ohne{margin-left:0;display:inline-flex;align-items:center;gap:.5rem;color:var(--on-ink-mut);text-decoration:none}
footer a.ohne::before{content:"✓";display:grid;place-items:center;flex:none;width:1.3rem;height:1.3rem;border-radius:50%;background:rgba(62,154,91,.18);color:#5FBF7C;font-weight:700;font-size:.8rem}
footer a.ohne:hover{color:var(--on-ink)}
/* derselbe Hinweis gleich unter den Knöpfen im Startbereich: klein, aber sofort sichtbar */
.besteck-auftakt{margin:-.2rem 0 .9rem;font-size:.95rem;color:#D3CFC5}
/* Häufige Fragen im Kontaktbereich: aufklappbar, eine Frage je Zeile */
.faq{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line-ink);max-width:56rem}
.faq h3{font-size:1.05rem;font-weight:700;color:var(--on-ink);margin:0 0 .6rem}
.faq details{border-bottom:1px solid var(--line-ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;font-weight:600;color:var(--on-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border:1px solid var(--accent);color:var(--accent);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:#fff}
.faq details p{margin:0 0 1rem;color:var(--on-ink-mut);max-width:48rem}
/* Das Wichtigste auf einen Blick: fünf Zeilen unter dem Kontakt */
.blick{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line-ink)}
.blick h3{font-size:1.05rem;font-weight:700;color:var(--on-ink);margin:0 0 1rem}
.blick dl{margin:0;display:grid;gap:.1rem}
.blick dl div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1.5rem;padding:.7rem 0;border-bottom:1px solid var(--line-ink)}
.blick dt{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:.2rem}
.blick dd{margin:0;color:var(--on-ink-mut);font-size:.98rem;max-width:52rem}
.blick dd a{color:var(--on-ink)}
@media (max-width:40rem){.blick dl div{grid-template-columns:minmax(0,1fr);gap:.25rem}}
/* Kontakt und Fußzeile gehen ineinander über: kein doppelter Rand */
#kontakt{padding-bottom:4rem}

@media (max-width:56rem){
  .hero .in,.about,.contact{grid-template-columns:minmax(0,1fr)}
  .hero{padding-block:3.5rem 3.5rem}
  section{padding-block:3.5rem}
  .facts,.ph{border-left:0;padding-left:0;border-top:1px solid var(--line-ink);padding-top:1.4rem}
  #vorgehen{padding-block:4rem}
  .track{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .track::before{left:.4rem;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),rgba(232,114,31,.15))}
  .stp{padding-top:0;padding-left:2.2rem}
  .node{top:1.2rem}
  .claim-row{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:34rem) and (max-width:72rem){.rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:33.99rem){.rows{grid-template-columns:minmax(0,1fr)}}
@media (max-width:72rem){
  .diff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panels{grid-template-columns:minmax(0,1fr)}
  .panel+.panel{border-left:0;border-top:1px solid var(--line-ink)}
}
@media (max-width:56rem){
  .sh{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile:nth-child(3){border-left:0}
  .tile:nth-child(n+3){border-top:1px solid var(--line-ink)}
}
@media (max-width:40rem){
  .diff{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:56rem){
  .hero{min-height:0;padding-top:3.5rem}
  .hero-vis{height:auto;margin-top:1rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
  .hc,.hc1,.hc2,.hc3{position:static;width:auto}
  .hc1{grid-column:1/-1}
  .hv.big{font-size:1.7rem}
  .hero>.facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.5rem}
  .hero>.facts>div:nth-child(3){border-left:0;padding-left:0}
  .hero>.facts>div:nth-child(n+3){border-top:1px solid var(--line-ink)}
  .hero>.facts>div{border-top:0}
}
@media (prefers-reduced-motion:reduce){.hc{animation:none}html{scroll-behavior:auto}.row,.btn,.card{transition:none}.row:hover,.stp:hover .card{transform:none}}

.trenner span::after{content:"";position:absolute;inset:-14px}
.trenner span:hover{box-shadow:0 0 0 6px var(--ink),0 0 30px 10px rgba(232,114,31,.55)}
#praxis.zieht .trenner span{cursor:grabbing}
/* Ein Projekt, alle Felder */
.fq-alle{width:.75rem;height:1rem;background:linear-gradient(#7D4FB0,#7D4FB0) 0 0/44% 29% no-repeat,linear-gradient(#F2C230,#F2C230) 100% 0/44% 29% no-repeat,linear-gradient(#3E9A5B,#3E9A5B) 0 50%/44% 29% no-repeat,linear-gradient(#2F6FB3,#2F6FB3) 100% 50%/44% 29% no-repeat,linear-gradient(#1B9AAA,#1B9AAA) 0 100%/44% 29% no-repeat,linear-gradient(#5B5E66,#5B5E66) 100% 100%/44% 29% no-repeat}   /* sechs Feldfarben im Raster 2 × 3 wie im Oi-Zeichen */
.netz-text{color:var(--on-ink-mut);font-size:.98rem;margin-top:.4rem;min-height:4.5rem}
#netz-titel{transition:color .2s}
.netz-liste{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem}
.netz-liste li{display:grid;grid-template-columns:.8rem auto;column-gap:.6rem;font-size:.88rem;color:var(--on-ink-mut)}
.netz-liste li i{width:.7rem;height:.7rem;margin-top:.3rem;grid-row:span 2}
.netz-liste li b{color:var(--on-ink);font-weight:600}
#alle-netz svg text{font-size:12px}

/* Nutzen im Jahr (Rüsten) */
.nutzen{margin-top:1rem;display:grid;gap:.55rem}
.nz{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) 5.2rem;align-items:center;gap:.7rem;font-size:.85rem;color:var(--on-ink);transition:opacity .2s}
.nz.aus{opacity:.3}
.nz-o{grid-template-columns:minmax(0,1fr) 5.2rem}
.nz-l{display:flex;align-items:center;gap:.5rem;line-height:1.25}.nz-l i{width:.6rem;height:.6rem;flex:none}
.nz-b{height:10px;background:rgba(241,239,232,.06)}.nz-b b{display:block;height:100%}
.nz-v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.nz-o .nz-v{color:#4FB56E}
.nz-s{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line-ink);padding-top:.7rem;margin-top:.3rem;font-weight:600}
.nz-s b{font-size:1.5rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}

/* Bericht zum Blättern */
.buch-kopf{margin:4.5rem 0 1.6rem;max-width:44rem}
.buch-kopf h3{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:.2rem 0 .8rem;color:var(--on-ink)}
.buch-kopf p{color:var(--on-ink-mut)}
/* Berichtsregal: jede Titelseite gleich breit, darunter der Name; der gewählte Bericht steht hervorgehoben und ein Stück höher */
.buch-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr));gap:1rem .9rem;margin:0 0 1rem;padding-top:.4rem}
.buch-wahl button{display:flex;flex-direction:column;gap:.55rem;min-width:0;padding:0;background:none;border:0;cursor:pointer;font:600 .8rem/1.25 var(--f);color:var(--on-ink-mut);text-align:center;transition:color .15s}
.buch-wahl img{display:block;width:100%;height:auto;aspect-ratio:300/424;background:#fff;border-bottom:4px solid var(--c);box-shadow:0 4px 12px rgba(0,0,0,.4);opacity:.82;transition:transform .2s,opacity .2s,box-shadow .2s}
.buch-wahl span{hyphens:manual}
.buch-wahl button:hover{color:var(--on-ink)}
.buch-wahl button:hover img{opacity:1;transform:translateY(-3px)}
.buch-wahl button[aria-pressed="true"]{color:var(--on-ink)}
.buch-wahl button[aria-pressed="true"] img{opacity:1;transform:translateY(-6px);outline:2px solid var(--c);outline-offset:3px;box-shadow:0 10px 22px rgba(0,0,0,.5)}
.buch-wahl button:focus-visible{outline:none}.buch-wahl button:focus-visible span{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.buch-wahl img{transition:none}}
/* Smartphone: ohne Titelbilder, zwei gleich breite Spalten mit Farbkante, damit das Buch gleich darunter sichtbar bleibt */
@media (max-width:40rem){
  .buch-wahl{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;padding-top:0}
  .buch-wahl img{display:none}
  .buch-wahl button{flex-direction:row;align-items:center;text-align:left;padding:.65rem .7rem;border:1px solid var(--line-ink);border-left:4px solid var(--c);background:rgba(26,24,21,.85);font-size:.84rem}
  .buch-wahl button[aria-pressed="true"]{background:#24211D;border-color:var(--c)}
  .buch-wahl span{hyphens:none}
}
.buch-wahl-trenn{width:1px;align-self:stretch;background:var(--line-ink);margin:0 .4rem}
.buch-info{color:var(--on-ink-mut);font-size:.92rem;max-width:52rem;margin:0 0 1.4rem;min-height:2.6em}
.buch-folgt{color:var(--accent)}
.buch{outline:none}
.buch-flaeche{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:2480/1755;max-width:62rem;margin:0 auto;perspective:2600px;cursor:pointer;user-select:none;touch-action:pan-y;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.buch-flaeche img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.buch-flaeche .s-links{box-shadow:inset -18px 0 24px -18px rgba(0,0,0,.35)}
.buch-flaeche .s-rechts{box-shadow:inset 18px 0 24px -18px rgba(0,0,0,.35)}
.buch-flaeche::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.08))}
.blatt{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.45,.05,.3,1)}
.blatt.nach-links{left:50%;transform-origin:left center}
.blatt.nach-rechts{left:0;transform-origin:right center}
.blatt.nach-links.dreht{transform:rotateY(-180deg)}
.blatt.nach-rechts.dreht{transform:rotateY(180deg)}
.blatt img{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.blatt .hinten{transform:rotateY(180deg)}
.buch-leiste{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem;color:var(--on-ink-mut);font-size:.9rem;flex-wrap:wrap}
.buch-leiste button{width:2.6rem;height:2.6rem;border:1px solid var(--line-ink);background:rgba(26,24,21,.9);color:var(--on-ink);font-size:1.1rem;cursor:pointer}
.buch-leiste button:hover:not(:disabled){border-color:var(--accent)}
.buch-leiste button:disabled{opacity:.3;cursor:default}
.buch-nr{min-width:9rem;text-align:center;font-variant-numeric:tabular-nums}
.buch-pdf{color:var(--on-ink-mut);font-size:.85rem;margin-left:.5rem}
.buch-leiste button.buch-gross{width:auto;padding:0 .9rem;font:600 .85rem/1 var(--f)}
.buch-leiste button.buch-gross::before{content:"⌕ ";font-size:1rem}
/* Lupe: Seite groß auf dunklem Grund, oben Blättern und Schließen */
.buch-lupe{position:fixed;inset:0;z-index:200;background:rgba(14,13,11,.96);display:grid;grid-template-rows:auto 1fr auto}
.buch-lupe[hidden]{display:none}
.lupe-kopf{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.7rem 1rem;color:var(--on-ink);font-size:.9rem}
.lupe-kopf button{height:2.6rem;min-width:2.6rem;border:1px solid var(--line-ink);background:#221F1B;color:var(--on-ink);font:600 .95rem/1 var(--f);cursor:pointer;padding:0 .8rem}
.lupe-kopf .lupe-zu{margin-left:auto}
.lupe-nr{font-variant-numeric:tabular-nums;min-width:7rem;text-align:center}
.lupe-bild{overflow:auto;-webkit-overflow-scrolling:touch;padding:0 .6rem;touch-action:pan-x pan-y pinch-zoom}
.lupe-bild img{display:block;width:100%;max-width:60rem;margin:0 auto;background:#fff;cursor:zoom-in}
.lupe-bild.zoom img{width:220%;max-width:none;cursor:zoom-out}
.lupe-tipp{margin:0;padding:.5rem 1rem .8rem;text-align:center;font-size:.8rem;color:var(--on-ink-mut)}
@media (max-width:55.99rem){
  .buch-flaeche{grid-template-columns:1fr;aspect-ratio:1240/1755;max-width:26rem}
  .buch-flaeche .s-links{display:none}
  .buch-flaeche::after{display:none}
  .buch-flaeche .s-rechts{box-shadow:none}
  .buch-flaeche.wisch-l .s-rechts{animation:wischL .6s ease}
  .buch-flaeche.wisch-r .s-rechts{animation:wischR .6s ease}
}
@keyframes wischL{from{transform:translateX(30px);opacity:.3}to{transform:none;opacity:1}}
@keyframes wischR{from{transform:translateX(-30px);opacity:.3}to{transform:none;opacity:1}}
.tabs .fq-alle{width:.75rem;height:1rem}

/* Was der Bericht bringt: drei Zielgruppen, Verweise blättern ins Buch */
.wem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:3.2rem}
.wem-k{background:rgba(26,24,21,.9);border:1px solid var(--line-ink);border-top:3px solid var(--accent);padding:1.8rem 1.6rem 1.7rem}
.wem-t{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.wem-k h4{font-size:1.2rem;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin:0 0 1.2rem;color:var(--on-ink)}
.wem-k ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.wem-k li{position:relative;padding-left:1.1rem;color:var(--on-ink-mut);font-size:.92rem;line-height:1.45}
.wem-k li::before{content:"";position:absolute;left:0;top:.5rem;width:.45rem;height:.45rem;background:var(--accent)}
.wem-k button{font:600 .72rem/1 var(--f);color:var(--on-ink);background:transparent;border:1px solid var(--line-ink);padding:.22rem .45rem;margin-left:.3rem;cursor:pointer;white-space:nowrap;vertical-align:1px}
.wem-k button:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:56rem){.wem{grid-template-columns:minmax(0,1fr)}}
/* Wie es nach dem Bericht weitergeht: vier Schritte, je "Sie" und "Wir" */
.weiter{margin-top:3.2rem;padding:2.2rem 2rem 2.4rem;border:1px solid var(--line-ink);background:rgba(26,24,21,.9)}
.weiter h4{font-size:1.3rem;font-weight:800;letter-spacing:-.015em;margin:0 0 1.4rem;color:var(--on-ink)}
.weiter h4:has(+ .weiter-vau){margin-bottom:.4rem}
.weiter-vau{margin:0 0 1.4rem;color:var(--on-ink-mut);font-size:.95rem}
.weiter-schritte{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 1.8rem;counter-reset:ws;position:relative}
.weiter-schritte::before{content:"";position:absolute;left:0;right:0;top:.85rem;height:1px;background:linear-gradient(90deg,var(--accent),rgba(232,114,31,.15))}
.weiter-schritte li{counter-increment:ws;position:relative;padding-top:2.4rem;display:grid;gap:.55rem;align-content:start;grid-row:span 3;grid-template-rows:subgrid}
.weiter-schritte li::before{content:counter(ws);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;font-size:.9rem;box-shadow:0 0 0 5px #1A1815}
.weiter-schritte b{font-size:1.1rem;color:var(--on-ink)}
.weiter-schritte span{font-size:.9rem;line-height:1.45;color:var(--on-ink-mut);display:grid;gap:.1rem}
.weiter-schritte i{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.weiter-schritte .sie{color:var(--on-ink)}
.weiter-schritte .wir{border-left:3px solid var(--accent);padding:.7rem .8rem;background:rgba(232,114,31,.1);color:var(--on-ink);align-self:stretch;align-content:start}
.weiter-schritte .wir i{color:var(--accent);font-size:.78rem}
@media (max-width:56rem){.weiter-schritte{grid-template-columns:minmax(0,1fr)}.weiter-schritte::before{display:none}}
/* Blättern andeuten: Eselsohr unten rechts (hebt sich beim Darüberfahren und einmal beim ersten Erscheinen) und Papierkanten, die mit dem Blättern dünner werden */
.buch-flaeche{--rest:8}
.buch-flaeche .ecke{position:absolute;right:0;bottom:0;width:26px;height:26px;z-index:3;pointer-events:none;transition:width .35s cubic-bezier(.3,.7,.3,1),height .35s cubic-bezier(.3,.7,.3,1);
  /* unter der Ecke liegt die nächste Seite (ohne Folgeseiten blendet .leer die Ecke aus), deshalb Papier statt Hintergrund */
  background:linear-gradient(to top left,#d9d5cc 0,#ebe8e1 30%,#e4e0d8 49%,rgba(0,0,0,.35) 50%,#cfccc4 51%,#f4f2ee 72%,#fff 100%);box-shadow:-3px -3px 8px -2px rgba(0,0,0,.28)}
.buch-flaeche:hover .ecke{width:58px;height:58px}
.buch-flaeche.zeig-ecke .ecke{animation:ecke 1.6s ease-in-out 2}
@keyframes ecke{0%,100%{width:26px;height:26px}40%{width:74px;height:74px}60%{width:66px;height:66px}}
.buch-flaeche .kanten{position:absolute;top:2px;bottom:2px;right:calc(-1px * var(--rest));width:calc(1px * var(--rest));z-index:-1;
  background:repeating-linear-gradient(90deg,#f1efea 0 2px,#cdc9c0 2px 3px);box-shadow:2px 2px 6px rgba(0,0,0,.3)}
.buch-flaeche.leer .ecke,.buch-flaeche.leer .kanten{display:none}
/* während des Umblätterns kein Eselsohr über dem drehenden Blatt; danach kommt es klein wieder */
.buch-flaeche.blaettert .ecke{opacity:0;width:26px;height:26px;transition:none;animation:none}
.buch-flaeche .ecke{opacity:1}
.buch-flaeche:not(.blaettert) .ecke{transition:width .35s cubic-bezier(.3,.7,.3,1),height .35s cubic-bezier(.3,.7,.3,1),opacity .4s .2s}
@media (prefers-reduced-motion:reduce){.buch-flaeche.zeig-ecke .ecke{animation:none}}