/* =====================================================================
   HALTUNG
   Ein Roadbook ist weißes Papier mit schwarzen Tulpen und roten Markierungen,
   ein Testheft ist Druck auf Weiß. Deshalb: kühles Papierweiß, fast
   schwarze Tinte, EIN Signalrot. Keine Cremetöne, keine Verläufe, keine
   Schatten, keine Kornfläche – eine Fläche, eine Farbe, eine Linie.
   Sand (Dakar) ist Thema, nicht Dekor. Iglhaut-Gelb kommt nur im Sprinter-Teil vor.

   SCHRIFT – Begründung
   Die Seite ist ein Magazin (Titelgeschichte, Reportage, Zitate). Dafür trägt
   eine Serife: Fraunces, in Titeln auf optischer Größe 144 – das ergibt harte
   Kontraste und feine Haarlinien wie im Bleisatz, mit ausgeschalteter WONK-Achse
   (ernst statt verspielt). Der Fließtext läuft mit automatischer Größenanpassung,
   damit er in kleinen Graden lesbar bleibt.
   Alles Funktionale – Navigation, Knöpfe, Bildunterschriften, Datenblatt-Felder –
   steht in Archivo, einer nüchternen Grotesk, wie die Randspalten eines Roadbooks.
   Großbuchstaben nur dort, wo sie Information tragen: die Feldnamen im Datenblatt.

   KONTRAST (gerechnet): Tinte #15161a auf Papier #f3f2ee 16,1:1 · Grau #43454b auf
   Papier 8,6:1, auf Hellgrau #e6e5df 7,6:1, auf Sand #dccfb0 6,2:1 · Papier auf Rot
   #d0101e 5,0:1 · Rot auf Papier 5,0:1 (auf Hellgrau 4,4:1, deshalb dort nur für
   große Zahlen) · Papier auf Tinte 16,1:1, Hellgrau #cfd0cc auf Tinte 11,7:1 ·
   Rot auf Tinte 3,3:1 (nur große Schrift und Zeichen) · Tinte auf Gelb #f2c200 10,8:1.
   ===================================================================== */
@font-face{font-family:"Fraunces";src:url("/schriften/fraunces-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/schriften/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url("/schriften/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --paper:#f3f2ee; --paper-2:#e6e5df; --sand:#dccfb0;
  --ink:#15161a; --ink-2:#43454b; --mute:#cfd0cc;
  --red:#d0101e; --yellow:#f2c200;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"opsz" 144,"SOFT" 0,"WONK" 0;
  --wrap:1360px; --gut:clamp(16px,3.2vw,44px);
  --hd:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:1.0625rem;line-height:1.58;font-variation-settings:"WONK" 0;overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{color:var(--ink);text-decoration-thickness:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3,h4,p,figure,blockquote,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
[id]{scroll-margin-top:calc(var(--hd) + 14px)}
::selection{background:var(--red);color:var(--paper)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font:700 .85rem/1 var(--sans)}
.skip:focus{top:8px;color:var(--paper)}

/* ---------- Funktionale Schrift (Grotesk, normale Schreibung) ---------- */
.fn,.cap,.btn,.menu-btn,.nav a,.brand__name,.stage__name,.pq cite,.foot__lbl,.plan__t{font-family:var(--sans);font-weight:600;font-stretch:100%;font-variation-settings:normal;letter-spacing:.005em}
.cap{display:block;margin-top:.55rem;color:var(--ink-2);font-weight:500;font-size:.82rem;line-height:1.35}
.on-ink .cap{color:var(--mute)}

/* ---------- Tulpen-Zeichen ---------- */
.tul{width:2.6rem;height:2.6rem;flex:none;display:block;overflow:visible}
.warn{width:2.6rem;height:2.6rem;flex:none;display:block}

/* ---------- Kopf ---------- */
.top{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--ink)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--hd)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .tul{width:2rem;height:2rem;color:var(--red)}
.brand__t{display:flex;flex-direction:column;gap:.2rem}
.brand__rrs{font:900 1.55rem/.8 var(--serif);letter-spacing:-.02em;font-variation-settings:var(--disp)}
.brand__name{font-size:.74rem;line-height:1;color:var(--ink-2);white-space:nowrap}
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;background:none;border:2px solid var(--ink);border-radius:999px;color:var(--ink);padding:.5rem 1rem;font-size:.9rem;line-height:1.2;cursor:pointer}
.menu-btn svg{width:18px;height:12px;flex:none}
.menu-btn:hover{background:var(--ink);color:var(--paper)}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav.open{display:block}
.nav ol{max-width:var(--wrap);margin:0 auto;padding:.3rem var(--gut) 1.1rem}
.nav li{border-bottom:2px dashed rgba(21,22,26,.3)}
.nav li:last-child{border-bottom:0}
.nav a{display:flex;align-items:center;gap:1rem;padding:.85rem 0;text-decoration:none}
.nav .t{font:700 1.45rem/1.1 var(--serif);font-variation-settings:var(--disp);flex:1}
.nav .tul{width:1.8rem;height:1.8rem;color:var(--ink)}
.nav a:hover .t{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px}
@media (min-width:1100px){
  .menu-btn{display:none}
  .nav{display:block;position:static;background:none;border:0}
  .nav ol{display:flex;gap:clamp(1.2rem,2.4vw,2.6rem);padding:0;max-width:none}
  .nav li{border:0}
  .nav a{padding:.4rem 0;position:relative}
  .nav .t{font:600 .92rem/1 var(--sans);font-variation-settings:normal}
  .nav .tul{display:none}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.2rem;border-top:2px dashed var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a:hover .t{text-decoration:none}
}

/* ---------- Titelseite ---------- */
.cover{display:grid;grid-template-columns:minmax(0,1fr);background:var(--ink);color:var(--paper);position:relative;isolation:isolate}
.cover__mast{grid-row:1;position:relative;z-index:3;padding:clamp(18px,4vw,26px) var(--gut) 18px}
.cover__rrs{display:block;font-weight:900;font-size:clamp(7.2rem,40vw,11rem);line-height:.76;letter-spacing:-.04em;color:var(--paper);font-variation-settings:var(--disp);margin-left:-.04em}
.cover__sub{margin-top:1.1rem;max-width:20rem;padding-top:.8rem;border-top:2px solid var(--red);color:var(--mute)}
.cover__sub b{display:block;font:italic 400 1.18rem/1.25 var(--serif);font-variation-settings:var(--disp);margin-bottom:.3rem;color:var(--paper)}
.cover__sub span{font:500 .88rem/1.35 var(--sans);font-variation-settings:normal}
.cover__photo{grid-row:2;position:relative;aspect-ratio:5/4;overflow:hidden;background:#2a2b30}
.cover__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 55%}
.cover__photo::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;border-left:6px solid var(--red);border-right:3px solid var(--paper)}
.cover__lines{grid-row:3;padding:6px var(--gut) 30px}
.burst{position:absolute;z-index:4;right:clamp(10px,3vw,28px);top:clamp(10px,2.4vw,24px);width:clamp(88px,26vw,132px);display:block;color:var(--paper);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.burst svg{display:block;width:100%;height:auto;overflow:visible}
.burst text{font-family:var(--sans)}
.burst:hover{color:var(--paper);transform:rotate(-5deg)}
.lines li{border-top:1px dashed rgba(243,242,238,.4)}
.lines a{display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:.9rem;align-items:start;padding:.9rem 0;color:var(--paper);text-decoration:none}
.lines .tul,.lines .warn{width:2.4rem;height:2.4rem;color:var(--red)}
.lines b{display:block;font:900 1.4rem/1.05 var(--serif);font-variation-settings:var(--disp);letter-spacing:-.01em}
.lines em{display:block;margin-top:.3rem;font:italic 400 .98rem/1.35 var(--serif);color:var(--mute)}
.lines a:hover b{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:.15em}
@media (min-width:980px){
  .cover{grid-template-columns:minmax(340px,28%) minmax(0,1fr);grid-template-rows:auto 1fr;min-height:clamp(540px,calc(100vh - var(--hd)),780px);min-height:clamp(540px,calc(100svh - var(--hd)),780px)}
  .cover__mast{grid-column:1/-1;grid-row:1;padding-top:clamp(18px,2.2vw,32px);pointer-events:none}
  .cover__sub{pointer-events:auto;max-width:calc(28% - var(--gut) * 1.4);min-width:17rem}
  .cover__rrs{font-size:clamp(8rem,17vw,16rem)}
  .cover__photo{grid-column:2;grid-row:1/3;aspect-ratio:auto}
  .cover__photo img{object-position:50% 72%}
  /* Verlauf nur als Bildabdunklung, damit der Heftname über dem Foto lesbar bleibt */
  .cover__photo::before{content:"";position:absolute;inset:0 0 auto 0;height:48%;z-index:1;background:linear-gradient(180deg,rgba(21,22,26,.62),rgba(21,22,26,0))}
  .cover__lines{grid-column:1;grid-row:2;align-self:end;padding:0 var(--gut) 30px}
  .lines b{font-size:1.28rem}
  .burst{right:clamp(14px,2.4vw,36px);top:clamp(14px,2.4vw,34px);width:clamp(112px,10.4vw,150px)}
}
@media (min-width:980px) and (max-height:760px){
  .lines a{padding:.6rem 0}
  .lines em{display:none}
}

/* ---------- Laufband ---------- */
.ticker{background:var(--red);color:var(--paper);overflow:hidden;white-space:nowrap}
.ticker__track{display:flex;width:max-content;will-change:transform}
.ticker__set{display:flex;align-items:center;flex:none}
.ticker__set span{font:700 1rem/1 var(--sans);font-variation-settings:normal;padding:.9rem 0}
.ticker__set i{display:inline-block;width:.5rem;height:.5rem;background:var(--paper);margin:0 1.5rem;transform:rotate(45deg);flex:none}

/* ---------- Strecke (Seitenlinie) ---------- */
.flow{position:relative}
.route{display:none;position:absolute;z-index:6;top:0;bottom:0;left:max(10px,calc(50% - var(--wrap) / 2 + 6px));width:0;pointer-events:none;border-left:2px dashed rgba(21,22,26,.26)}
.route i{position:absolute;left:-2px;top:0;width:0;height:calc(var(--p,1) * 100%);border-left:2px dashed var(--red)}
.route i::after{content:"";position:absolute;left:-6px;bottom:-9px;border:7px solid transparent;border-top:11px solid var(--red);border-bottom:0}
@media (min-width:1100px){.route{display:block}}

/* ---------- Abschnitte ---------- */
.sec{padding-block:clamp(2.8rem,6.5vw,5.6rem)}
.sec--2{background:var(--paper-2)}
.stage{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(1.4rem,3vw,2.4rem);color:var(--ink)}
.stage .tul{color:var(--red)}
.stage__name{font-size:1rem;line-height:1.2;font-weight:700}
.stage__dash{flex:1;min-width:1.2rem;height:0;border-top:2px dashed currentColor;opacity:.55}
.on-ink .stage{color:var(--paper)}

h2.h{font-weight:900;font-size:clamp(2.1rem,6vw,4.9rem);line-height:.98;letter-spacing:-.025em;font-variation-settings:var(--disp);text-wrap:balance}
h2.h em{font-style:italic;font-weight:400;letter-spacing:-.01em}
.dek{font-style:italic;font-size:clamp(1.18rem,2.1vw,1.55rem);line-height:1.32;font-variation-settings:var(--disp)}

/* Spaltensatz + Initiale */
.cols p+p{margin-top:.85em}
@media (min-width:760px){
  .cols{column-count:2;column-gap:clamp(1.4rem,2.6vw,2.6rem);column-rule:1px dashed rgba(21,22,26,.4);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
  .on-ink .cols{column-rule-color:rgba(243,242,238,.35)}
}
.dc::first-letter,.dcl{float:left;font-weight:900;font-size:5.5em;line-height:.74;font-variation-settings:var(--disp);color:var(--red);padding:.053em .1em 0 0}
.dcw{position:relative}
.hq{position:absolute;left:-.62em;top:-.32em;font-size:1.5em;line-height:1;font-weight:900;color:var(--red);font-variation-settings:var(--disp)}
.rep .dc::first-letter{color:var(--paper)}
.rep .cols{column-rule-color:rgba(243,242,238,.45)}

/* Bild + Unterschrift */
.ph{position:relative;min-width:0;max-width:800px}
.im{position:relative;overflow:hidden;background:#d4d3ce}
.im img{width:100%;height:auto;transition:transform .38s ease-out}
.ph:hover .im img{transform:scale(1.03)}
.r-3x2{aspect-ratio:3/2}.r-4x3{aspect-ratio:4/3}.r-3x4{aspect-ratio:3/4}
[class*="r-"].im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Zitat */
.pq p{font-style:italic;font-weight:900;font-size:clamp(2rem,5.6vw,5.4rem);line-height:1.02;letter-spacing:-.022em;font-variation-settings:var(--disp);text-wrap:balance}
.pq::before{content:"„";display:block;font-weight:900;font-size:clamp(5rem,12vw,10rem);line-height:.38;height:.38em;margin-bottom:.16em;transform:translateY(-.36em);color:var(--red);font-variation-settings:var(--disp)}
.pq cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.95rem;line-height:1.35;color:var(--ink-2)}
.on-ink .pq cite{color:var(--mute)}
.pq--s p{font-size:clamp(1.55rem,2.8vw,2.3rem);line-height:1.1;letter-spacing:-.012em}
.pq--s::before{font-size:5rem}
.pq--plain::before{display:none}

/* Knöpfe: rund */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1.3rem;border:2px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;background:transparent;font-size:.95rem;line-height:1.2;transition:background .25s,color .25s}
.btn svg{width:1.05rem;height:1.05rem;flex:none;transition:transform .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover svg{transform:translateX(4px)}
.btn--red{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn--red:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--yellow{background:var(--yellow);border-color:var(--ink);color:var(--ink)}
.btn--yellow:hover{background:var(--ink);color:var(--paper)}

/* Datenblatt: eckig, feine Linie; Feldnamen in Versalien, weil sie Information tragen */
.spec{border:1px solid var(--ink);background:var(--paper)}
.spec__h{background:var(--ink);color:var(--paper);padding:.55rem .85rem;display:flex;justify-content:space-between;gap:.8rem;font:700 .88rem/1.3 var(--sans);font-variation-settings:normal}
.spec dl{padding:.1rem .85rem .35rem}
.spec .row{display:flex;gap:.7rem;align-items:baseline;padding:.58rem 0;border-bottom:1px dashed rgba(21,22,26,.4)}
.spec .row:last-child{border-bottom:0}
.spec dt{flex:1;display:flex;align-items:baseline;gap:.7rem;color:var(--ink-2);font:700 .68rem/1.3 var(--sans);font-variation-settings:normal;letter-spacing:.1em;text-transform:uppercase}
.spec dt::after{content:"";flex:1;min-width:.8rem;border-bottom:2px dotted rgba(21,22,26,.4);transform:translateY(-.28rem)}
.spec dd{flex:none;max-width:68%;text-align:right;font-weight:600;line-height:1.3}
.spec .row--s{display:block}
.spec .row--s dt{display:block;margin-bottom:.25rem}
.spec .row--s dt::after{display:none}
.spec .row--s dd{max-width:none;text-align:left}

/* --- Über mich --- */
.ueber__grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.ueber__main{display:grid;gap:clamp(1.6rem,3vw,2.4rem);min-width:0}
.ueber__aside{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,2.4vw,1.8rem);align-content:start;min-width:0}
@media (min-width:600px) and (max-width:999px){.ueber__aside{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.ueber .h{max-width:16ch}
.ueber__bottom{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
@media (min-width:1000px){
  .ueber__grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(2rem,4vw,4rem)}
  .ueber__bottom{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(1.6rem,3vw,3rem)}
}

/* --- Projekte --- */
.toc{border-top:4px solid var(--ink);margin-bottom:clamp(2.4rem,5vw,4.4rem)}
.toc ol{display:grid}
.toc a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:1.1rem;align-items:center;padding:1rem .2rem;border-bottom:1px solid var(--ink);text-decoration:none;color:var(--ink)}
.toc__n{font:900 clamp(2.4rem,5vw,3.4rem)/.8 var(--serif);color:var(--red);font-variation-settings:var(--disp);letter-spacing:-.04em;min-width:1.4em}
.toc__t b{display:block;font:900 clamp(1.3rem,2.2vw,1.65rem)/1.1 var(--serif);font-variation-settings:var(--disp);letter-spacing:-.01em}
.toc__t span{display:block;margin-top:.2rem;color:var(--ink-2);font-style:italic;font-size:.98rem;line-height:1.3}
.toc svg{width:1.3rem;height:1.3rem;color:var(--ink);transition:transform .25s}
.toc a:hover svg{transform:translateX(5px)}
.toc a:hover .toc__t b{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:.15em}
@media (min-width:900px){.toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.6rem,3vw,3rem)}}
.projs{display:grid;gap:clamp(3.4rem,7vw,6.4rem)}
.proj{display:grid;gap:1.6rem;min-width:0}
.proj__media{min-width:0;max-width:760px}
.proj__text{display:grid;gap:1.15rem;align-content:start;min-width:0}
.proj__head{display:flex;align-items:flex-end;gap:1rem}
.proj__num{font:900 clamp(4.4rem,9vw,7rem)/.74 var(--serif);color:var(--red);font-variation-settings:var(--disp);letter-spacing:-.05em}
.proj h3{font:900 clamp(2rem,3.6vw,3rem)/.95 var(--serif);font-variation-settings:var(--disp);letter-spacing:-.025em}
.proj__sub{margin-top:.5rem;font:600 .95rem/1.2 var(--sans);font-variation-settings:normal;color:var(--ink-2)}
.proj__lead{font-style:italic;font-size:1.22rem;line-height:1.3;font-variation-settings:var(--disp)}
.proj__links{display:flex;flex-wrap:wrap;gap:.8rem}
.proj--sprinter .spec__h{background:var(--yellow);color:var(--ink)}
@media (min-width:900px){
  .proj{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.2rem,2.4vw,2.6rem);align-items:center}
  .proj__media{grid-column:1/8;grid-row:1;max-width:none}
  .proj__text{grid-column:8/13;grid-row:1}
  .proj--r .proj__media{grid-column:6/13}
  .proj--r .proj__text{grid-column:1/6}
}
/* Foto-Gruppen */
.cl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.5rem,1.2vw,1rem)}
.cl .a{grid-column:1/-1}
.cl .a .im{aspect-ratio:4/3}
.cl .b .im,.cl .c .im{aspect-ratio:1/1}
.cl .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl__cap{grid-column:1/-1;margin-top:0}
@media (min-width:600px){
  .cl{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cl .a{grid-column:1/5;grid-row:1/3;display:grid}
  .cl .a .im{aspect-ratio:auto;min-height:0}
  .cl .b{grid-column:5/7;grid-row:1}
  .cl .c{grid-column:5/7;grid-row:2}
}
.cl--wide{position:relative;display:block;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.cl--wide .main .im{aspect-ratio:3/2}
.cl--wide .inset{position:absolute;right:clamp(.6rem,2vw,1.4rem);bottom:calc(-1 * clamp(1.4rem,4vw,2.6rem));width:38%;border:6px solid var(--paper-2);background:var(--paper-2)}
.cl--wide .inset .im{aspect-ratio:4/3}
.cl--wide .cap{max-width:58%}

/* Werkstatt-Strecke */
.strip{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(1.4rem,3vw,2rem);border-top:4px solid var(--ink)}
.strip__h{margin-bottom:1.4rem}
.strip__h h3{font:900 clamp(1.7rem,3.4vw,2.6rem)/1 var(--serif);font-variation-settings:var(--disp);letter-spacing:-.02em}
.strip__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1.2rem);align-items:start}
.strip__g .ph:nth-child(even){margin-top:clamp(1.2rem,4vw,3rem)}
@media (min-width:800px){.strip__g{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- Titelgeschichte (Nachtseite, die Scheune) --- */
.story{background:var(--ink);color:var(--paper);position:relative}
.story a:hover{color:var(--paper)}
.story__title{font-weight:900;font-size:clamp(2.3rem,10.2vw,10rem);line-height:.9;letter-spacing:-.03em;font-variation-settings:var(--disp);color:var(--paper);margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.story__title span{display:block}
.story__title .lite{font-style:italic;font-weight:300;color:var(--red);letter-spacing:-.02em;line-height:.95}
.story__grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.story__right{display:grid;gap:1.4rem;min-width:0}
.fig-a{position:relative;min-width:0;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.fig-a .inset{position:absolute;right:0;bottom:calc(-1 * clamp(1.2rem,3vw,2rem));width:44%;border:6px solid var(--ink);background:var(--ink)}
.fig-a .inset .im{aspect-ratio:4/3}
.fig-a .inset .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fig-a .cap{max-width:52%}
.story__quote{margin-block:clamp(2.6rem,6vw,5rem);padding-block:clamp(1.8rem,4vw,3.2rem);border-block:2px dashed rgba(243,242,238,.4)}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1.2rem);align-items:start;max-width:760px}
.mosaic .m3,.mosaic .m4{grid-column:1/-1}
.mosaic .m1 .im,.mosaic .m2 .im{aspect-ratio:3/4}
.mosaic .m2{margin-top:clamp(1.2rem,5vw,3rem)}
.mosaic .m3 .im,.mosaic .m4 .im{aspect-ratio:3/2}
.mosaic .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stat{grid-column:1/-1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(1rem,2vw,1.6rem) 0 clamp(1rem,2vw,1.6rem) clamp(1.2rem,2.4vw,2rem);border-left:6px solid var(--red)}
.stat__n{font:900 clamp(7rem,16vw,12rem)/.74 var(--serif);letter-spacing:-.05em;color:var(--paper);font-variation-settings:var(--disp)}
.stat__n small{font-size:.28em;letter-spacing:0;font-style:italic;font-weight:400;color:var(--paper)}
.stat p{margin-top:1rem;font-size:1.12rem;line-height:1.4;color:var(--mute);max-width:36ch}
@media (min-width:900px){
  .mosaic{grid-template-columns:repeat(12,minmax(0,1fr));max-width:none}
  .mosaic .m3{grid-column:1/7;grid-row:1}
  .mosaic .m1{grid-column:7/10;grid-row:1}
  .mosaic .m2{grid-column:10/13;grid-row:1;margin-top:0}
  .mosaic .stat{grid-column:1/7;grid-row:2}
  .mosaic .m4{grid-column:7/13;grid-row:2}
  .mosaic .m1 .im,.mosaic .m2 .im{aspect-ratio:3/4.1}
}
/* Streckenplan: senkrechte Route, links gezeichnet */
.plan-wrap{margin-top:clamp(2.6rem,6vw,5rem)}
.plan-wrap h3{font:900 clamp(1.5rem,2.6vw,2rem)/1.1 var(--serif);font-variation-settings:var(--disp);margin-bottom:1.6rem;color:var(--paper)}
.plan{position:relative;display:grid;gap:0}
.plan::before{content:"";position:absolute;left:1.3rem;top:1.3rem;bottom:1.3rem;border-left:2px dashed rgba(243,242,238,.5)}
.plan li{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:.25rem;padding:0 0 1.7rem 4rem}
.plan li:last-child{padding-bottom:0}
.plan .tul{position:absolute;left:0;top:0;width:2.6rem;height:2.6rem;padding:.2rem;background:var(--ink);color:var(--red)}
.plan__t{display:block;color:var(--paper);font-size:.95rem;font-weight:700}
.plan b{display:block;font:900 1.35rem/1.1 var(--serif);font-variation-settings:var(--disp);color:var(--paper)}
.plan p{font-size:1rem;line-height:1.45;color:var(--mute);max-width:56ch}
@media (min-width:900px){
  .plan li{grid-template-columns:11rem 16rem minmax(0,1fr);column-gap:1.6rem;align-items:baseline;padding-left:4.4rem}
}
.story__end{display:grid;gap:clamp(1.6rem,3vw,2.6rem);align-items:center;margin-top:clamp(2.8rem,6vw,5rem)}
@media (min-width:900px){
  .story__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.4rem,3vw,3rem)}
  .fig-a{grid-column:1/7;position:sticky;top:calc(var(--hd) + 24px);align-self:start}
  .story__right{grid-column:7/13}
  .story__end{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.4rem,3vw,3rem)}
  .story__end .pq{grid-column:1/7}
  .story__end .ph{grid-column:7/13}
}

/* --- Zweite Geschichte: Hab Acht! (Iglhaut-Gelb, nur hier) --- */
.hab{background:var(--yellow);color:var(--ink)}
.hab .stage .tul{color:var(--ink)}
.hab a:hover{color:var(--ink)}
.hab__head{display:flex;gap:clamp(.9rem,2vw,1.6rem);align-items:flex-start;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.hab__head .warn{width:clamp(3rem,6.4vw,5rem);height:clamp(3rem,6.4vw,5rem);margin-top:.2rem}
.hab h2{font-weight:900;font-size:clamp(2.1rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.025em;font-variation-settings:var(--disp);text-wrap:balance}
.hab__grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.hab__main{display:grid;gap:1.4rem;min-width:0}
.hab__main p{max-width:62ch}
.hab__figs{display:grid;gap:clamp(.8rem,1.6vw,1.2rem);min-width:0}
.hab__figs .ph:nth-child(2){max-width:19rem}
.hab .cap{color:var(--ink)}
.hab .pq{padding-block:.4rem}
.hab .pq p{font-size:clamp(1.8rem,3.8vw,3.2rem);line-height:1.05}
.hab .pq cite{color:var(--ink)}
.hab__pointe{font:italic 900 clamp(1.3rem,2.2vw,1.7rem)/1.2 var(--serif);font-variation-settings:var(--disp)}
.hab .spec{background:var(--paper);border-color:var(--ink)}
@media (min-width:900px){
  .hab__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.4rem,3vw,3rem)}
  .hab__main{grid-column:1/8}
  .hab__figs{grid-column:8/13}
}
@media (min-width:600px) and (max-width:899px){.hab__figs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

/* --- Rubriken (Doppelseite) --- */
.spread{display:grid;gap:clamp(1.4rem,3vw,2rem);position:relative}
.page{position:relative;padding:clamp(1.2rem,2.6vw,2.2rem);border:1px solid var(--ink);min-width:0}
.page--sport{background:var(--paper)}
.page--dakar{background:var(--sand)}
.page h2.h{font-size:clamp(1.9rem,4.2vw,3.5rem);margin-bottom:1.3rem}
.page__body{display:grid;gap:1.4rem;min-width:0;max-width:780px}
.page p{max-width:62ch}
.twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.twin .im{aspect-ratio:3/2}
.twin .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Roadbook-Auszug: echte Sätze aus dem Text, Tulpen ohne Werte */
.rbook{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:center;border:1px solid var(--ink);background:var(--paper);padding:.9rem 1rem}
.rbook__t{display:grid;gap:.3rem;border-right:2px solid var(--ink);padding-right:.9rem}
.rbook__t .tul{width:2.6rem;height:2.6rem;color:var(--ink)}
.rbook p{font-style:italic;font-size:1.12rem;line-height:1.4;font-variation-settings:var(--disp)}
.rbook .tul:first-child{color:var(--red)}
/* Anforderungsliste (Dakar) */
.need{border-top:2px solid var(--ink)}
.need li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.8rem;align-items:baseline;padding:.8rem 0;border-bottom:1px dashed rgba(21,22,26,.5)}
.need b{font:900 1.7rem/1 var(--serif);font-variation-settings:var(--disp);color:var(--ink);letter-spacing:-.04em}
.need span{font-weight:500;line-height:1.4}
@media (min-width:1000px){
  .spread{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .page--sport{border-right-width:0}
}

/* --- Reportage (Rotseite) --- */
.rep{background:var(--red);color:var(--paper);position:relative}
.rep a{text-decoration-color:var(--paper)}
.rep a:hover{color:var(--paper)}
.rep .stage,.rep .stage .tul{color:var(--paper)}
.rep__grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.rep__head .h{font-size:clamp(2.4rem,8.4vw,7.6rem);line-height:.9;color:var(--paper)}
.rep__head .dek{margin-top:1.2rem;color:var(--paper);max-width:24ch;font-size:clamp(1.3rem,2.4vw,1.9rem)}
.rep .cap{color:var(--paper)}
.rep__photos{display:grid;gap:.8rem;min-width:0;align-items:start}
@media (min-width:600px) and (max-width:999px){.rep__photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rep__photos .im{aspect-ratio:3/2}
.rep__photos .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rep__photos .p2 .im{aspect-ratio:4/3}
.rep__txt{display:grid;gap:1.4rem;min-width:0}
.rep .pq p{color:var(--paper);font-size:clamp(1.55rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.012em}
.rep .pq::before{color:var(--ink);font-size:5rem}
.rep .btn{border-color:var(--paper);color:var(--paper);width:max-content}
.rep .btn:hover{background:var(--paper);color:var(--red)}
@media (min-width:1000px){
  .rep__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.4rem,3vw,3rem)}
  .rep__head{grid-column:1/8}
  .rep__photos{grid-column:8/13;grid-row:1/3}
  .rep__txt{grid-column:1/8}
}

/* ---------- Fuß ---------- */
.foot{background:var(--ink);color:var(--mute);padding-bottom:2rem}
.foot__check{height:28px;background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='14' height='14' fill='%23f3f2ee'/%3E%3Crect x='14' y='14' width='14' height='14' fill='%23f3f2ee'/%3E%3C/svg%3E");background-size:28px 28px}
.foot__in{display:grid;gap:2.2rem;padding-top:clamp(2.4rem,5vw,4rem)}
.foot__rrs{font:900 clamp(7rem,24vw,17rem)/.72 var(--serif);letter-spacing:-.045em;color:var(--paper);font-variation-settings:var(--disp);margin-left:-.04em}
.foot__name{margin-top:1.1rem;font:italic 400 1.2rem/1.3 var(--serif);color:var(--mute);font-variation-settings:var(--disp)}
.foot__lbl{display:block;color:var(--paper);font-size:1rem;font-weight:700;margin-bottom:.7rem}
.foot ul{display:grid;gap:.45rem}
.foot a{text-decoration-color:var(--red)}
.foot a:hover{color:var(--paper)}
.foot__legal{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.foot__ziel{display:flex;align-items:center;gap:.9rem;margin-top:.6rem;color:var(--paper)}
.foot__ziel .tul{color:var(--paper);width:3rem;height:3rem}
.foot__ziel span{font:700 1.05rem/1 var(--sans);font-variation-settings:normal}
.foot__bar{margin-top:2.4rem;padding-top:1.1rem;border-top:2px dashed rgba(243,242,238,.35);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;font-size:.92rem;color:var(--mute)}
@media (min-width:900px){
  .foot__in{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);column-gap:clamp(1.4rem,3vw,3rem);align-items:end}
}

/* ---------- Bewegung (nur wenn erlaubt, alles unter 400 ms) ----------
   Was beim Laden schon zu sehen ist, wird nie eingeblendet (Klasse .now, siehe Skript).
   Weiter unten: sanftes Einblenden aus 12 px, 380 ms, ease-out, nur opacity und transform. */
@media (prefers-reduced-motion:no-preference){
  .anim .reveal{opacity:0;transform:translateY(12px);transition:opacity .38s ease-out min(var(--d,0s),.16s),transform .38s ease-out min(var(--d,0s),.16s)}
  .anim .reveal.in{opacity:1;transform:none}
  .anim .reveal.now{transition:none}
  .anim .stage .stage__dash{clip-path:inset(0 100% 0 0);transition:clip-path .38s ease-out .05s}
  .anim .stage.in .stage__dash,.anim .stage.now .stage__dash{clip-path:inset(0 0 0 0)}
  .anim .stage.now .stage__dash{transition:none}
  .anim .plan::before{clip-path:inset(0 0 100% 0);transition:clip-path .38s ease-out .05s}
  .anim .plan.in::before{clip-path:inset(0 0 0 0)}
  .anim .plan li{opacity:0;transform:translateY(8px);transition:opacity .38s ease-out min(var(--d,0s),.16s),transform .38s ease-out min(var(--d,0s),.16s)}
  .anim .plan.in li{opacity:1;transform:none}
  .anim .plan.now::before,.anim .plan.now li{transition:none}
  .cover__photo img{animation:settle .9s ease-out both}
  @keyframes settle{from{transform:scale(1.03)}to{transform:scale(1)}}
  .burst__ring{transform-box:view-box;transform-origin:50% 50%;animation:spin 70s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ticker__track{animation:tick 60s linear infinite}
  @keyframes tick{to{transform:translateX(-50%)}}
}

/* ---------- Lesestück (aus iglhaut-sprinter.html, Entwurf C) ----------
   Zuordnung: .parts = ul.parts (Aufzählung), ol.need = nummerierte Liste (Dakar);
   das frühere ol.zahlen entfällt. */
/* =====================================================================
   BEITRAGSSEITE (Reportage)
   Lesestück: Fließtext 17,6 px, linksbündig, Zeilen um 65 Zeichen (Fraunces läuft
   im Schnitt 0,48 em je Zeichen, 32 em ergeben also rund 66 Zeichen). Zwei Spalten
   (Text | Randspalte mit Fotos) erst ab 1000 px, darunter eine Spalte.
   Gelb nur als Akzent: Warndreieck, Balken unter dem Titel, Marker auf dem Zitat,
   Kopf des Datenblatts, Strich an der Pointe. Der Lesetext steht auf Papierweiß.
   ===================================================================== */
.opener{padding-block:clamp(1.4rem,3.4vw,2.6rem) clamp(1.8rem,4vw,3.2rem)}
.opener__grid{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:end}
.opener__t{min-width:0}
.h1{margin:0}
.h1 .a{display:block;font-weight:900;font-size:clamp(3rem,8.6vw,8rem);line-height:.9;letter-spacing:-.035em;font-variation-settings:var(--disp)}
.h1 .b{display:block;margin-top:1.1rem;max-width:15em;font-style:italic;font-weight:600;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.01em;font-variation-settings:var(--disp)}
.opener__bar{display:block;width:7rem;height:.8rem;background:var(--yellow);margin-top:1.5rem}
.opener__fig{margin:0}
@media (min-width:1000px){
  .opener__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.2rem,2.4vw,2.6rem)}
  .opener__t{grid-column:1/7}
  .opener__fig{grid-column:7/13}
}

.art{font-size:1.1rem;line-height:1.62;padding-bottom:clamp(2.4rem,6vw,5rem)}
.art p,.art li{max-width:32em;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.art .lead{max-width:30em;font-size:clamp(1.25rem,2.1vw,1.55rem);line-height:1.4;font-weight:600}
.art .lead::first-letter{float:left;font-weight:900;font-size:5em;line-height:.74;font-variation-settings:var(--disp);color:var(--red);padding:.0408em .1em 0 0}
.sec-a{display:grid;gap:1.4rem;margin-top:clamp(2rem,4.5vw,3.4rem);padding-top:clamp(1.6rem,3.6vw,2.6rem);border-top:1px solid var(--ink)}
.sec-a__h{display:flex;align-items:center;gap:.9rem}
.sec-a__h .tul{width:2.4rem;height:2.4rem;color:var(--red)}
.sec-a h2{font-weight:900;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.02;letter-spacing:-.02em;font-variation-settings:var(--disp);text-wrap:balance}
.sec-a__txt{min-width:0;display:grid;gap:1.1rem;align-content:start}
.sec-a__side{min-width:0;display:grid;gap:1.2rem;align-content:start}
.sec-a__side .ph{max-width:26rem}
@media (min-width:1000px){
  .sec-a{grid-template-columns:minmax(0,32em) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem)}
  .sec-a__h{grid-column:1/-1}
}
.art mark{background:var(--yellow);color:var(--ink);padding:.04em .22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.art strong{font-weight:800}
.runin strong{font-weight:900;font-variation-settings:var(--disp)}
.parts{border-top:2px solid var(--ink);max-width:32em}
.parts li{padding:1rem 0 1.1rem;border-bottom:1px dashed rgba(21,22,26,.5)}
.parts li>strong:first-child{display:block;margin-bottom:.2rem;font-weight:900;font-size:1.2rem;line-height:1.2;font-variation-settings:var(--disp)}
.art .pointe{max-width:20em;padding-left:1rem;border-left:8px solid var(--yellow);font-style:italic;font-weight:900;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;font-variation-settings:var(--disp)}
.spec--wide{max-width:32em}
.spec--wide .spec__h{background:var(--yellow);color:var(--ink)}
.spec--wide dl{padding:.1rem 1rem .4rem}
.spec--wide .row{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;padding:.7rem 0}
.spec--wide dt::after{display:none}
.spec--wide dd{max-width:none;text-align:left;font-weight:600}
@media (min-width:560px){.spec--wide .row{grid-template-columns:9.5rem minmax(0,1fr);column-gap:1rem;align-items:baseline}}
.quelle{max-width:40em;margin-top:clamp(2rem,4.5vw,3.4rem);padding-top:1rem;border-top:1px solid var(--ink);font-size:1rem;line-height:1.5;font-style:italic;color:var(--ink-2)}
.pair{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2vw,1.6rem);align-items:start}
@media (min-width:600px){.pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.heute .sec-a__side{grid-template-columns:minmax(0,1fr);gap:1rem}
.heute .sec-a__side .ph{max-width:19rem}
@media (min-width:600px) and (max-width:999px){.heute .sec-a__side{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1250px){.heute .sec-a__side{grid-template-columns:repeat(2,minmax(0,1fr))}}
.back{margin-top:1.6rem}
.back .btn svg{transform:scaleX(-1)}
.back .btn:hover svg{transform:scaleX(-1) translateX(4px)}

/* ---------- Ergänzungen für die Gesamtseite ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.r-1x1{aspect-ratio:1/1}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:.3em}
@media (min-width:1100px){
  .nav a[aria-current]{text-decoration:none}
  .nav a[aria-current]::after{transform:scaleX(1)}
}
.nav a[aria-current] .t{text-decoration:inherit}
.crumbs{margin-bottom:1rem;font:500 .88rem/1.4 var(--sans);color:var(--ink-2)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--ink-2)}
.crumbs a{color:var(--ink)}
.opener--text .opener__grid{align-items:start}
.opener--plain .opener__grid{grid-template-columns:minmax(0,1fr)}
.opener__date{margin-top:1rem;font:600 .95rem/1.2 var(--sans);color:var(--ink-2)}
.art .sec-a:first-of-type{margin-top:clamp(2rem,4.5vw,3.4rem)}
.art .lead{max-width:30em}
.art .pq{max-width:34rem}
.art .pq--s p{max-width:none}
.art .twocol{max-width:none}
.sec-a__side .ph{max-width:26rem}
.sec-a__side .ph--s{max-width:19rem}
.sec-a__gal{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1.2rem);align-items:start}
.sec-a__gal .ph:nth-child(even){margin-top:clamp(1.2rem,4vw,3rem)}
@media (min-width:800px){.sec-a__gal{grid-template-columns:repeat(4,minmax(0,1fr))}}
.art .spec{max-width:32em}
.sec-a__txt>.spec{margin-block:.4rem}
.sec-a__txt .spec dd{font-weight:600}
.spec--wide .row{padding:.7rem 0}
.art--plain .sec-a:first-of-type{border-top:0;padding-top:0;margin-top:0}
/* Weiter-Leiste */
.weiter{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-top:clamp(2rem,4.5vw,3.4rem);padding-top:1.4rem;border-top:4px solid var(--ink)}
.weiter .btn--red svg{margin-left:.1rem}
.back{margin-top:0}
.weiter__l{font:600 .95rem/1.2 var(--sans);color:var(--ink-2);flex-basis:100%}
/* Übersicht: im Stil von „In diesem Heft“ */
.uebersicht .toc{margin-top:clamp(1.6rem,3vw,2.4rem);margin-bottom:clamp(2rem,5vw,4rem)}
.uebersicht .toc ol{grid-template-columns:minmax(0,1fr)}
.uebersicht .toc a{grid-template-columns:auto 6.5rem minmax(0,1fr) auto;padding:1.1rem .2rem}
.toc__i{display:block;width:6.5rem}
.toc__i .im{aspect-ratio:4/3}
.toc__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.toc__d{display:block;margin-top:.3rem;font:600 .85rem/1.2 var(--sans);color:var(--ink-2)}
@media (min-width:700px){.uebersicht .toc a{grid-template-columns:auto 10rem minmax(0,1fr) auto}.toc__i{width:10rem}}
@media (min-width:900px){.uebersicht .toc ol{grid-template-columns:minmax(0,1fr)}}
/* Recht: Kasten, eckig */
.kasten{max-width:40rem;margin-block:1.6rem;padding:1.1rem 1.2rem;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);font:700 1.15rem/1.35 var(--sans)}
.kasten span{display:block;margin-top:.4rem;font-weight:500;font-size:.98rem}
.art--recht h2{margin-top:1.4rem}
/* 404 */
.lost{padding-block:clamp(2.4rem,7vw,6rem)}
.lost__grid{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.lost .tul{width:clamp(5rem,16vw,9rem);height:clamp(5rem,16vw,9rem);color:var(--red)}
.lost p{max-width:30em}
.lost__links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
@media (min-width:800px){.lost__grid{grid-template-columns:auto minmax(0,1fr)}}
/* Weiterleitung */
.redir{padding-block:clamp(2.4rem,7vw,6rem)}
/* Farbe je Seite: Rot ist Standard, Iglhaut-Gelb nur auf der Sprinter-Seite */
.opener__bar{background:var(--red)}
.art .pointe{border-left-color:var(--red)}
.spec--wide .spec__h{background:var(--ink);color:var(--paper)}
.th-gelb .opener__bar{background:var(--yellow)}
.th-gelb .art .pointe{border-left-color:var(--yellow)}
.th-gelb .spec--wide .spec__h{background:var(--yellow);color:var(--ink)}
.toc__i .im{display:block}
.toc__t span.toc__d{font-style:normal}
.sec-a__side .ph--s{max-width:19rem}

/* Titelei: großer Haupttitel, kursive Unterzeile darunter (aus Entwurf C, beim Zusammenführen verloren gegangen) */
.h1{margin:0}
.h1 .a{display:block;font-weight:900;font-size:clamp(3rem,8.6vw,8rem);line-height:.9;letter-spacing:-.035em;font-variation-settings:var(--disp)}
.h1 .b{display:block;margin-top:1.1rem;max-width:15em;font-style:italic;font-weight:600;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.01em;font-variation-settings:var(--disp)}
.h1 .a{hyphens:auto;overflow-wrap:break-word}