/* Schwefel Garage · Designprobe «Das Pickerl» · Herzhaus Web-Atelier 13.11.2026 */
@font-face{font-family:"Anybody";src:url(/assets/fonts/anybody-latin-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/fonts/schibsted-grotesk-latin-wght-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/assets/fonts/martian-mono-latin-standard-normal.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}
:root{--papier:#f4f1ea;--weiss:#fffdf8;--tinte:#17151b;--grau:#55515a;--rot:#bb071b;--rot2:#93041a;--nacht:#0a1f45;--nacht2:#071530;--linie:rgba(23,21,27,.16);
--rand:clamp(20px,5vw,72px);--breit:1240px;--display:"Anybody",system-ui,sans-serif;--text:"Schibsted Grotesk",system-ui,sans-serif;--mono:"Martian Mono",ui-monospace,monospace;--logo-rot:#bb071b;--logo-schwarz:#1a161b}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--text);font-size:18px;line-height:1.55;font-weight:420;overflow-x:hidden}
button,input,select,textarea,optgroup{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
p a,.recht a,dd a{color:var(--rot)}
h1,h2,h3{margin:0;font-weight:inherit}
p{margin:0 0 1em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-999px;top:8px;background:var(--tinte);color:#fff;padding:12px 18px;z-index:100}.sprung:focus{left:8px}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.innen{max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto;padding:0 var(--rand)}

/* Typografie */
.t1{font-family:var(--display);font-stretch:112%;font-weight:820;font-size:clamp(38px,6.6vw,92px);line-height:.98;letter-spacing:-.015em;margin-bottom:.32em;text-wrap:balance}
.t1 em{font-style:normal;color:var(--rot);display:inline-block}
.t2{font-family:var(--display);font-stretch:104%;font-weight:800;font-size:clamp(30px,3.7vw,52px);line-height:1.02;letter-spacing:-.01em;margin-bottom:.45em;text-wrap:balance}
.t3{font-family:var(--display);font-stretch:118%;font-weight:780;font-size:22px;line-height:1.15;margin-bottom:.5em}
.gross-text{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:36em}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:560;display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--grau)}
.kicker.hell{color:#c9d3e6}
.loch-punkt{width:14px;height:14px;border-radius:50%;background:var(--tinte);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 0 0 3px var(--weiss),0 0 0 4px var(--linie);flex:none}
.nacht .loch-punkt,.held .loch-punkt{background:var(--nacht2);box-shadow:inset 0 2px 3px rgba(0,0,0,.7),0 0 0 3px #fbf8f1,0 0 0 4px rgba(255,255,255,.3)}
.fussnote{font-size:15px;color:var(--grau);margin-top:18px;max-width:42em}

/* Knöpfe: Plakettenstreifen mit Stanzloch */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.knopf{--g:var(--rot);--f:#fff;position:relative;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:12px 22px 12px 16px;background:var(--g);color:var(--f);text-decoration:none;font-weight:650;font-size:17px;line-height:1.2;border:0;cursor:pointer;border-radius:3px;
 clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:background .25s,transform .25s}
.knopf b{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:.01em;margin-left:4px}
.knopf .k-loch{width:16px;height:16px;border-radius:50%;background:var(--papier);box-shadow:inset 0 2px 3px rgba(0,0,0,.45);flex:none;position:relative;transition:transform .35s}
.knopf .k-loch::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--g);transform:scale(1);transition:transform .35s cubic-bezier(.5,1.8,.5,1)}
.knopf:hover .k-loch::after,.knopf:focus-visible .k-loch::after{transform:scale(0)}
.knopf:hover{background:var(--rot2)}
.knopf.zwei{--g:var(--tinte);--f:#fff}.knopf.zwei:hover{background:#000}
.knopf.hell{--g:#fbf8f1;--f:var(--tinte)}.knopf.hell:hover{background:#fff}
.knopf.hell .k-loch{background:var(--nacht)}
.knoepfe.klein .knopf{min-height:48px;font-size:15.5px;padding:10px 16px 10px 12px}

/* Perforation */
.perfo{height:14px;background:radial-gradient(circle,var(--tinte) 0 3.2px,transparent 3.7px) 0 50%/16px 14px repeat-x;opacity:.22}
.perfo.hell{background-image:radial-gradient(circle,#fff 0 3.2px,transparent 3.7px);opacity:.25;position:absolute;top:0;left:0;right:0}

/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:rgba(244,241,234,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1560px;margin:0 auto;padding:10px var(--rand);display:flex;align-items:center;gap:24px;min-height:70px}
.logo{display:block;flex:none;width:clamp(150px,15vw,210px)}
.logo-svg{width:100%;height:auto;display:block}
.haupt{margin-left:auto}
.haupt ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.haupt a{position:relative;display:block;padding:12px 12px 14px;text-decoration:none;font-weight:600;font-size:16px}
.haupt a::after{content:"";position:absolute;left:50%;bottom:2px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--tinte);box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 0 0 2px var(--weiss),0 0 0 3px var(--linie);transform:scale(0);transition:transform .3s cubic-bezier(.5,1.8,.5,1)}
.haupt a:hover::after{transform:scale(.7)}
.haupt a[aria-current]::after{transform:scale(1);background:var(--rot)}
.kopf-tel{display:flex;flex-direction:column;text-decoration:none;line-height:1.1;padding:8px 0 8px 18px;border-left:1px solid var(--linie)}
.kopf-tel small{font-family:var(--mono);font-size:13px;color:var(--grau);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.kopf-tel b{font-family:var(--display);font-stretch:125%;font-weight:820;font-size:21px;color:var(--rot)}
.menueknopf{display:none;margin-left:auto;align-items:center;gap:10px;background:none;border:0;padding:8px 4px 8px 10px;min-height:48px;cursor:pointer;font-weight:700;font-size:16px}
.mk-wort{font-family:var(--display);font-stretch:125%;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:15px}
.mk-plakette{position:relative;width:38px;height:38px;border-radius:50%;background:#fbf8f1;border:1.5px solid var(--tinte);box-shadow:inset 0 0 0 6px #fbf8f1,inset 0 0 0 7px var(--tinte);transition:transform .5s cubic-bezier(.4,1.6,.5,1)}
.mk-plakette::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(var(--tinte) 0 1.2deg,transparent 1.2deg 30deg);-webkit-mask:radial-gradient(circle,transparent 0 11px,#000 11.5px 17px,transparent 17.5px);mask:radial-gradient(circle,transparent 0 11px,#000 11.5px 17px,transparent 17.5px)}
.mk-plakette i{position:absolute;left:50%;top:3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--rot);transform:scale(0);transition:transform .3s .15s cubic-bezier(.5,1.8,.5,1)}
.menueknopf[aria-expanded=true] .mk-plakette{transform:rotate(150deg)}
.menueknopf[aria-expanded=true] .mk-plakette i{transform:scale(1);background:var(--tinte);box-shadow:inset 0 1px 2px #000}
#menue{position:fixed;inset:0;z-index:35;background:var(--papier);padding-top:76px;overflow:auto;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .55s}
#menue.offen{visibility:visible;opacity:1;transform:none;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.m-innen{padding:10px var(--rand) 120px}
#menue ul{list-style:none;margin:0;padding:0}
#menue li a{display:grid;grid-template-columns:42px 1fr;column-gap:8px;padding:14px 0;border-bottom:1px dashed var(--linie);text-decoration:none}
.mn-nr{grid-row:span 2;font-family:var(--mono);font-size:13px;padding-top:9px;color:var(--grau)}
.mn-t{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:31px;line-height:1.1}
#menue small{font-size:15px;color:var(--grau)}
#menue a[aria-current] .mn-nr{color:var(--rot)}
.m-fuss{display:flex;flex-direction:column;gap:8px;margin-top:28px;font-size:16px}
.m-tel{font-family:var(--display);font-stretch:125%;font-weight:820;font-size:28px;color:var(--rot);text-decoration:none;display:flex;flex-direction:column}
.m-tel small{font-family:var(--mono);font-size:13px;color:var(--grau);font-weight:500;text-transform:uppercase}
body.menue-auf{overflow:hidden}

/* Held Start */
.held{position:relative;background:var(--nacht);color:#fff;overflow:hidden}
.held-bild img{width:100%;height:min(62vw,720px);object-fit:cover;object-position:40% 60%}
.held-bild{position:relative}
.held-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,69,0) 38%,rgba(10,31,69,.85) 82%,#0a1f45 100%)}
.held-gitter{position:relative;display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:end;margin-top:-210px;padding-bottom:64px}
.held-text .t1{color:#fff;max-width:11.5em}
.held-text .t1 em{color:#fff;background:linear-gradient(transparent 62%,var(--rot) 62% 92%,transparent 92%)}
.held-text .gross-text{color:#dfe5f0}
.held .kicker{color:#c9d3e6}
.held-pl{display:block;text-decoration:none;color:#fff;transform:rotate(6deg);transition:transform .5s cubic-bezier(.4,1.5,.5,1)}
.held-pl:hover{transform:rotate(0) scale(1.03)}
.held-pl .plakette{filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.held-pl .mon{min-width:0;min-height:0}.held-pl .mon span{font-size:clamp(11px,1.6vw,22px)}
.held-pl-text{display:block;text-align:center;margin-top:10px;font-size:16px;color:#dfe5f0}
.held-pl-text b{font-family:var(--display);font-stretch:125%;font-weight:820;color:#fff;font-size:19px;letter-spacing:.02em}

/* Fakten */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);background:var(--weiss);border-bottom:1px solid var(--linie)}
.fakt{padding:26px var(--rand) 24px;display:flex;flex-direction:column;gap:4px;position:relative}
.fakt+.fakt{background:linear-gradient(var(--linie),var(--linie)) 0 0/1px 100% no-repeat}
.fakt b{font-family:var(--display);font-stretch:140%;font-weight:850;font-size:clamp(22px,2.2vw,32px);line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.fakt:nth-child(4) b{color:var(--rot)}
.fakt span{font-size:15.5px;color:var(--grau)}

/* Plakette */
.plakette{position:relative;width:100%;aspect-ratio:400/460;user-select:none;-webkit-user-select:none}
.pl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl-grund{stroke:rgba(0,0,0,.18);stroke-width:1.2}
.pl-rand{fill:none;stroke:var(--tinte);stroke-width:2.2}
.pl-seg line{stroke:var(--tinte);stroke-width:2}
.pl-jahr text{font-family:var(--display);font-stretch:70%;font-weight:760;font-size:27px;text-anchor:middle;fill:var(--tinte)}
.pl-para{font-family:var(--display);font-stretch:120%;font-weight:850;font-size:46px;text-anchor:middle;fill:var(--rot)}
.pl-klein{font-family:var(--mono);font-size:17px;text-anchor:middle;fill:var(--tinte);letter-spacing:.2em}
.pl-feld{fill:none;stroke:var(--tinte);stroke-width:2;stroke-dasharray:5 5}
.pl-kz{font-family:var(--display);font-stretch:130%;font-weight:820;font-size:34px;text-anchor:middle;fill:var(--tinte);letter-spacing:.12em}
.pl-knoepfe{position:absolute;inset:0}
.mon{position:absolute;width:13%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center;min-width:40px;min-height:40px}
.mon span{font-family:var(--display);font-stretch:72%;font-weight:800;font-size:clamp(17px,2.2vw,30px);line-height:1;color:var(--tinte);transition:transform .3s,color .3s}
.mon:hover span{color:var(--rot);transform:scale(1.15)}
.mon::before{content:"";position:absolute;inset:16%;border-radius:50%;background:var(--nacht2);box-shadow:inset 0 3px 6px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.15);transform:scale(0);transition:transform .22s cubic-bezier(.5,1.9,.5,1)}
.mon[aria-pressed=true]::before{transform:scale(1)}
.mon[aria-pressed=true] span{opacity:0}
.mon:focus-visible{outline-offset:0}
.pl-scheiben{position:absolute;inset:0;pointer-events:none}
.scheibe-fall{position:absolute;width:5%;aspect-ratio:1;border-radius:50%;background:#fbf8f1;box-shadow:0 1px 2px rgba(0,0,0,.4);animation:fall 1.3s cubic-bezier(.4,0,.8,.6) forwards}
@keyframes fall{0%{transform:translate(-50%,-50%) rotateX(0)}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + 340px)) rotateX(720deg);opacity:0}}
.plakette.zwick{animation:zwick .28s}
@keyframes zwick{40%{transform:scale(.975) rotate(-1deg)}}

/* Zange */
.zange{background:var(--nacht);color:#fff;padding:clamp(56px,8vw,110px) 0;position:relative;overflow:hidden}
.zange::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 50%,rgba(127,155,196,.22),transparent 70%)}
.zange-gitter{position:relative;display:grid;grid-template-columns:1fr minmax(320px,470px);gap:clamp(30px,6vw,90px);align-items:center}
.zange .kicker{color:#c9d3e6}
.zange .gross-text{color:#dfe5f0}
.ergebnis{margin-top:26px;padding:22px 24px;background:rgba(255,255,255,.06);border-left:4px solid var(--rot);min-height:150px}
.erg-leer{color:#c9d3e6;margin:0}
.erg-mon{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1.1;margin-bottom:10px}
.erg-mon b{color:#fff;background:linear-gradient(transparent 60%,var(--rot) 60% 90%,transparent 90%)}
.erg-fenster{font-size:19px;color:#eef1f7}
.erg-fenster b{color:#fff}
.zange .fussnote{color:#aeb9cf}
.zange-pl{filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}

/* Abschnitte */
.ab{padding:clamp(60px,8vw,120px) 0;position:relative}
.ab.papier{background:var(--papier)}.ab.weiss{background:var(--weiss)}
.ab.nacht{background:var(--nacht);color:#fff}.ab.nacht .gross-text,.ab.nacht p{color:#dfe5f0}
.ab-kopf{max-width:46em;margin-bottom:38px}
.zwei-sp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.zwei-sp.oben{align-items:start}
.drei-sp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.drei-sp>div{border-top:3px solid var(--tinte);padding-top:20px}
.text-sp h3{font-family:var(--display);font-stretch:118%;font-weight:780;font-size:22px;margin:0 0 8px}
.text-sp p+h3{margin-top:26px}

/* Prüfbericht */
.bericht{background:var(--weiss);border:1.5px solid var(--tinte);box-shadow:8px 8px 0 rgba(23,21,27,.08);font-size:16px}
.b-kopf,.b-fuss{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.b-kopf{background:var(--tinte);color:#fff}
.b-fuss{border-top:1.5px solid var(--tinte);color:var(--grau)}
.b-liste{list-style:none;margin:0;padding:0}
.b-liste li+li{border-top:1px dashed var(--linie)}
.b-liste a{display:grid;grid-template-columns:44px 1fr auto;column-gap:12px;align-items:center;padding:16px 18px;text-decoration:none;transition:background .25s}
.b-liste a:hover{background:#f6efe2}
.b-nr{grid-row:span 2;font-family:var(--mono);font-size:13px;color:var(--grau)}
.b-t{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:21px;line-height:1.15}
.b-u{grid-column:2;font-size:15.5px;color:var(--grau);line-height:1.35}
.b-ok{grid-column:3;grid-row:1/span 2;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--rot);border:2px solid var(--rot);padding:4px 7px;transform:rotate(-8deg);opacity:.85;transition:transform .3s}
.b-liste a:hover .b-ok{transform:rotate(0) scale(1.1);background:var(--rot);color:#fff}

/* Familie, Lineal */
.familie .fam-kopf{max-width:44em}
.lineal{margin:40px 0 56px;padding:0 10px}
.jl-band{position:relative;height:150px;border-top:2px solid rgba(255,255,255,.5)}
.jl-tick{position:absolute;top:0;width:1.5px;height:12px;background:rgba(255,255,255,.45)}
.jl-tick.lang{height:22px;background:rgba(255,255,255,.8)}
.jl-loch{position:absolute;top:-10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;width:120px}
.jl-loch i{width:20px;height:20px;border-radius:50%;background:var(--nacht2);box-shadow:inset 0 3px 4px #000,0 0 0 4px #fbf8f1;margin-bottom:12px}
.jl-loch b{font-family:var(--display);font-stretch:125%;font-weight:820;font-size:20px}
.jl-loch small{font-size:13.5px;line-height:1.3;color:#c9d3e6}
.jl-loch:nth-child(even of .jl-loch){top:56px}
.schilder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.schilder.kurz{grid-template-columns:repeat(3,1fr)}
.schild{background:var(--weiss);color:var(--tinte);position:relative;border-radius:4px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.schild .bild img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.schild .bild{margin:0}
.s-text{padding:18px 20px 20px;position:relative}
.s-text::before{content:"";position:absolute;right:16px;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--papier);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.schild h3{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:21px;line-height:1.15;margin-bottom:6px}
.s-rolle{font-size:15.5px;color:var(--grau);margin-bottom:10px;line-height:1.4}
.s-seit{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--rot);margin:0}
.ohne-foto{aspect-ratio:1;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#ece6d9 0 12px,#f4efe4 12px 24px)}
.ohne-foto span{font-family:var(--display);font-stretch:140%;font-weight:850;font-size:64px;color:var(--tinte);opacity:.85}
.familie .knoepfe{margin-top:34px}

/* Hof */
.hof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hof a{display:block;position:relative;text-decoration:none;overflow:hidden;border-radius:4px}
.hof img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hof a:hover img{transform:scale(1.04)}
.h-schild,.a-schild{position:absolute;left:14px;bottom:14px;background:#fff;color:var(--tinte);padding:8px 14px 9px;font-family:var(--display);font-stretch:118%;font-weight:840;font-size:22px;line-height:1.05;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.25);transform:rotate(-2deg)}
.h-schild small,.a-schild small{display:block;font-family:var(--mono);font-size:13px;font-weight:600;font-stretch:100%;color:var(--grau);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.hof li:nth-child(n+4){display:none}

/* Autos */
.autos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:34px}
.auto{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,4vw,50px);align-items:center;padding-bottom:34px;border-bottom:1px dashed var(--linie)}
.a-foto{position:relative;border-radius:4px;overflow:hidden}
.a-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ohne-auto{aspect-ratio:4/3;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#ece6d9 0 12px,#f4efe4 12px 24px);font-family:var(--mono);font-size:14px;color:var(--grau)}
.a-text h3{font-family:var(--display);font-stretch:112%;font-weight:820;font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin-bottom:18px}
.a-text h3 span{display:block;font-family:var(--text);font-weight:500;font-size:18px;color:var(--grau);margin-top:6px}
.a-daten{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1.5px solid var(--tinte)}
.a-daten div{padding:9px 0;border-bottom:1px dashed var(--linie)}
.a-daten div:nth-child(odd){padding-right:14px}
.a-daten dt{font-family:var(--mono);font-size:13px;color:var(--grau);text-transform:uppercase;letter-spacing:.03em}
.a-daten dd{margin:2px 0 0;font-size:16px;font-weight:560}

/* Aushänge */
.aushaenge{list-style:none;margin:0;padding:0;columns:3 300px;column-gap:24px}
.aushaenge.drei{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.aushang{break-inside:avoid;margin:0 0 24px;background:var(--weiss);box-shadow:0 8px 22px rgba(0,0,0,.08);border-radius:4px;overflow:hidden}
.aushaenge.drei .aushang{margin:0}
.aushang .bild{margin:0}
.aushang .bild img{width:100%;aspect-ratio:auto}
.aushaenge.drei .bild img{aspect-ratio:1;object-fit:cover}
.aushang figcaption{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:20px;padding:16px 20px 0;line-height:1.15}
.au-text{padding:8px 20px 20px;font-size:16px}
.au-text p{margin:0 0 8px}
.tags{font-family:var(--mono);font-size:13px;color:var(--grau);line-height:1.6;word-break:break-word}
.gross-auf{display:block;cursor:zoom-in}

/* Bild */
.bild{margin:0}
.bild img{border-radius:4px}
.bild figcaption{font-size:15px;color:var(--grau);margin-top:10px}
.bild.hoch img{max-height:640px;width:auto;margin:0 auto}
.ab.nacht .bild figcaption{color:#c9d3e6}

/* Stempelkarte */
.stempelkarte{background:#fbf6e6;border:1.5px solid var(--tinte);padding:0 0 4px;box-shadow:8px 8px 0 rgba(23,21,27,.08);position:relative}
.stempelkarte::before{content:"";position:absolute;left:50%;top:-12px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--papier);border:1.5px solid var(--tinte)}
.sk-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:20px 20px 14px;border-bottom:1.5px solid var(--tinte)}
.sk-titel{font-family:var(--display);font-stretch:140%;font-weight:850;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.sk-status{font-family:var(--mono);font-size:13px;font-weight:650;text-transform:uppercase;padding:5px 9px;border:2px solid var(--grau);color:var(--grau);transform:rotate(-3deg)}
.sk-status.offen{border-color:#1d7a3a;color:#1d7a3a}.sk-status.zu{border-color:var(--rot);color:var(--rot)}
.stempelkarte table{width:100%;border-collapse:collapse;font-size:16px}
.stempelkarte th,.stempelkarte td{text-align:left;padding:11px 20px;border-bottom:1px dashed rgba(23,21,27,.25);font-weight:500}
.stempelkarte thead th{font-family:var(--mono);font-size:13px;text-transform:uppercase;color:var(--grau);font-weight:500}
.stempelkarte tbody th{font-weight:700}
.stempelkarte td{font-family:var(--mono);font-size:14px;white-space:nowrap}
.stempelkarte tr.heute{background:linear-gradient(90deg,rgba(187,7,27,.1),transparent)}
.stempelkarte tr.heute th::after{content:"heute";font-family:var(--mono);font-size:13px;color:var(--rot);margin-left:8px;font-weight:600}
.sk-fuss{font-size:15px;color:var(--grau);padding:14px 20px 12px;margin:0}

/* Partner */
.partner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,4vw,50px);background:#fff;padding:26px clamp(18px,3vw,40px);border-radius:4px;margin-top:10px}
.partner img{height:64px;width:auto}
.partner a,.partner span{display:block}
.partner-ab{padding:50px 0}
.ab.weiss .partner{border:1px solid var(--linie);margin-top:40px}

/* Schritte */
.schritte{list-style:none;margin:0;padding:0;counter-reset:s}
.schritte li{counter-increment:s;display:grid;grid-template-columns:62px 1fr;column-gap:16px;padding:18px 0;border-bottom:1px dashed var(--linie)}
.schritte li::before{content:counter(s);grid-row:span 2;width:50px;height:50px;display:grid;place-items:center;font-family:var(--display);font-stretch:70%;font-weight:820;font-size:26px;border:2px solid var(--tinte);border-radius:50%;background:var(--weiss)}
.schritte li:last-child::before{background:var(--tinte);color:#fff;box-shadow:inset 0 3px 6px #000}
.schritte b{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:22px}
.schritte span{color:var(--grau)}

/* Unterseiten-Held */
.held-u{padding:clamp(54px,7vw,110px) 0 clamp(40px,5vw,70px);background:var(--papier)}
.hu-gitter{display:grid;grid-template-columns:1fr;gap:40px}

/* Schluss */
.schluss{background:var(--rot);color:#fff;padding:clamp(56px,7vw,100px) 0;position:relative;overflow:hidden}
.schluss::after{content:"";position:absolute;right:-60px;top:50%;width:300px;height:300px;margin-top:-150px;border-radius:50%;border:18px solid rgba(255,255,255,.08);box-shadow:0 0 0 40px rgba(255,255,255,.04)}
.schluss .gross-text{color:#ffe9eb}
.schluss .knopf{--g:var(--tinte)}.schluss .knopf .k-loch{background:var(--rot)}
.schluss .knopf.hell{--g:#fbf8f1}.schluss .knopf.hell .k-loch{background:var(--rot)}
.schluss .innen{position:relative;z-index:1}

/* Serviceheft */
.heft{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.heft-seite{width:100%;max-width:440px;background:#fdfbf4;border:1.5px solid var(--tinte);padding:20px;box-shadow:8px 8px 0 rgba(23,21,27,.08)}
.heft-kopf{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1.5px solid var(--tinte);padding-bottom:10px;margin-bottom:6px}
.heft-felder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.heft-felder li{border:1px dashed rgba(23,21,27,.35);height:120px;position:relative;padding:8px}
.heft-felder li>span{font-family:var(--mono);font-size:13px;color:var(--grau)}
.st{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-12deg);font-style:normal;text-align:center;border:2.5px solid;border-radius:50%;width:92px;height:92px;display:grid;place-items:center;font-family:var(--display);font-stretch:110%;font-weight:800;font-size:13.5px;line-height:1.05}
.st.alt{color:#4c5c86;opacity:.5;border-style:double;border-width:4px}
.st.neu{color:var(--rot);opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.8)}
.st.neu small{font-size:13px;font-weight:600}
.heft.gestempelt .st.neu{animation:stempel .45s cubic-bezier(.5,0,.4,1.3) forwards}
@keyframes stempel{70%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.92)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

/* Spur */
.spur{display:flex;flex-direction:column;align-items:center;gap:16px}
.spur svg{width:min(100%,300px)}
.sp-spuren path{stroke:rgba(255,255,255,.28);stroke-width:12;fill:none;stroke-dasharray:3 9;transition:d .9s}
.sp-karo{fill:#e9e4d7}.sp-scheibe{fill:var(--nacht2);opacity:.85}.sp-dach{fill:#d8d1c1}
.sp-rad rect{fill:#111}
.sp-rad.vl{transform-origin:63px 123px;transform:rotate(9deg);transition:transform 1s cubic-bezier(.4,1.4,.5,1)}
.sp-rad.vr{transform-origin:237px 123px;transform:rotate(9deg);transition:transform 1s cubic-bezier(.4,1.4,.5,1)}
.spur.gerade .sp-rad.vl,.spur.gerade .sp-rad.vr{transform:rotate(0)}
.sp-l{d:path("M84 420 L84 330 C84 200 40 120 20 0")}.sp-r{d:path("M216 420 L216 330 C216 200 172 120 152 0")}
.spur.gerade .sp-l{d:path("M84 420 L84 330 C84 200 84 120 84 0")}.spur.gerade .sp-r{d:path("M216 420 L216 330 C216 200 216 120 216 0")}
.sp-wert{display:flex;flex-direction:column;align-items:center;margin:0}
.sp-wert span{font-family:var(--mono);font-size:13px;text-transform:uppercase;color:#c9d3e6}
.sp-wert b{font-family:var(--display);font-stretch:118%;font-weight:840;font-size:40px;color:#ff6b78;transition:color .4s}
.spur.gerade .sp-wert b{color:#7fe0a0}

/* Thermo */
.thermo{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);padding:28px;border-radius:4px}
.th-ort{font-family:var(--mono);font-size:13px;text-transform:uppercase;color:#c9d3e6!important;margin-bottom:6px}
.th-grad{font-family:var(--display);font-stretch:80%;font-weight:850;font-size:clamp(84px,12vw,140px);line-height:1;margin:0 0 14px;color:#fff!important}
.th-grad span{font-size:.4em;font-stretch:120%;margin-left:6px;vertical-align:top}
.th-regler{display:block}
.th-regler input{width:100%;-webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer}
.th-regler input::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#7fb4ff,#fbf8f1 45%,#ff8a5c 75%,var(--rot))}
.th-regler input::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#7fb4ff,#fbf8f1 45%,#ff8a5c 75%,var(--rot))}
.th-regler input::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-12px;border-radius:50%;background:#fbf8f1;border:3px solid var(--tinte);box-shadow:inset 0 0 0 5px #fbf8f1,inset 0 0 0 8px var(--nacht2)}
.th-regler input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fbf8f1;border:3px solid var(--tinte)}
.th-skala{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:#c9d3e6}
.th-tipp{margin:18px 0 0;font-size:19px;min-height:3em;color:#fff!important}
.th-tipp b{font-family:var(--display);font-stretch:118%;font-weight:800}

/* Flanke */
.flanke svg{width:min(100%,420px);margin:0 auto;display:block}
.fl-gummi{fill:#1b1b1f}.fl-felge{fill:#c9ccd3}.fl-speichen rect{fill:#8e939d}.fl-nabe{fill:var(--rot)}
.fl-dreh{transform-origin:200px 200px;animation:dreh 40s linear infinite}
.fl-dreh text{font-family:var(--display);font-stretch:140%;font-weight:820;font-size:19px;fill:#dcdcdc;letter-spacing:.14em}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Scheibe */
.scheibe{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.scheibe svg{width:100%;max-width:520px}
.sc-rahmen{fill:#1b1b1f}.sc-licht{fill:#fff;opacity:.08}
.sc-riss circle{fill:none;stroke:#fff;stroke-width:2}
.sc-riss path{stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round}
.sc-riss{transition:opacity 1.2s .5s}
.sc-harz{fill:#9fd3ff;opacity:.6;transition:r .8s cubic-bezier(.3,1.5,.5,1),opacity 1.2s .7s}
.scheibe.heil .sc-riss{opacity:0}.scheibe.heil .sc-harz{r:22px;opacity:0}
.sc-status{font-family:var(--mono);font-size:14px;color:#c9d3e6!important;margin:0}

/* Formular Werkstattauftrag */
.auftrag{background:#fdfbf4;border:1.5px solid var(--tinte);box-shadow:10px 10px 0 rgba(23,21,27,.08);max-width:980px;margin:0 auto;padding:0 0 26px}
.af-kopf{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--tinte);color:#fff;padding:14px 24px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.auftrag fieldset{border:0;margin:0;padding:22px 24px 6px}
.auftrag legend{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:22px;padding:0;margin-bottom:12px}
.af-wahl{display:flex;flex-wrap:wrap;gap:10px}
.af-wahl label{position:relative;cursor:pointer}
.af-wahl input{position:absolute;opacity:0;inset:0}
.af-wahl span{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px 8px 10px;border:1.5px solid var(--tinte);background:#fff;font-size:16px;font-weight:560;border-radius:3px}
.af-wahl span::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--tinte);background:#fff;flex:none;transition:all .2s}
.af-wahl input:checked+span{background:var(--tinte);color:#fff}
.af-wahl input:checked+span::before{background:var(--papier);box-shadow:inset 0 2px 3px rgba(0,0,0,.6);border-color:var(--papier)}
.af-wahl input:focus-visible+span{outline:3px solid var(--rot);outline-offset:2px}
.af-felder{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;padding:18px 24px 0}
.af-felder label{display:flex;flex-direction:column;gap:6px}
.af-felder label>span{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--grau)}
.af-felder .breit{grid-column:1/-1}
.af-felder input,.af-felder textarea{border:0;border-bottom:1.5px solid var(--tinte);background:transparent;padding:10px 2px;font-size:17px;min-height:46px;border-radius:0;resize:vertical}
.af-felder input:focus,.af-felder textarea:focus{outline:none;border-bottom-color:var(--rot);background:#fff}
.af-felder ::placeholder{color:#8a8590;opacity:1}
.auftrag .knoepfe,.auftrag .f-fehl,.auftrag .f-dank{padding:0 24px}
.f-fehl{color:var(--rot);font-weight:600;margin:16px 0 0}
.f-dank{margin:16px 0 0;font-weight:600}

/* Adresse */
.adresse p{margin:0 0 20px;font-size:18px}
.adresse small{display:block;font-family:var(--mono);font-size:13px;text-transform:uppercase;color:var(--grau);letter-spacing:.04em;margin-bottom:3px}
.ad-tel a{font-family:var(--display);font-stretch:125%;font-weight:840;font-size:clamp(34px,4vw,52px);color:var(--rot);text-decoration:none;line-height:1}

/* Recht */
.recht{max-width:46em}
.recht h2{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:22px;margin:30px 0 8px}
.recht h2:first-child{margin-top:0}
.punkte{padding-left:1.1em}
.schalter{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 20px}
.schalter button{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 18px 10px 14px;background:#fff;border:1.5px solid var(--tinte);cursor:pointer;font-weight:600;font-size:16px;border-radius:3px}
.sch-loch{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--tinte)}
.schalter button[aria-pressed=true]{background:var(--tinte);color:#fff}
.schalter button[aria-pressed=true] .sch-loch{background:var(--papier);box-shadow:inset 0 2px 3px rgba(0,0,0,.6);border-color:var(--papier)}
.hh-karte{background:#0b0b0c;color:#fff;padding:22px 20px;margin:44px 0 0;max-width:44em}
.hh-karte a{color:#fff}.hh-karte .hh-marke{top:0;margin-bottom:12px}.hh-karte p{font-size:16.5px;color:#fff}

/* Fuss */
.fuss{position:relative;background:var(--tinte);color:#e8e5ee;padding:70px 0 26px}
.fuss .fuss-satz{font-family:var(--display);font-stretch:140%;font-weight:850;font-size:clamp(36px,6vw,84px);line-height:1;text-transform:uppercase;margin:0 0 50px;color:#fff}
.fuss-satz span{color:var(--rot);-webkit-text-stroke:0}
.fuss-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.fuss h2{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#a9a4b1;margin-bottom:12px;font-weight:500}
.fuss p,.fuss li{font-size:16px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:6px}
.fuss a{color:#fff}
.fuss-zeit{color:#a9a4b1;font-size:15px!important}
.klein{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:15px;color:#a9a4b1}
.klein a{color:#d9d5e0;min-height:24px}

/* Herzhaus-Band */
.hh-band{background:#0b0b0c;text-align:center;padding:12px 16px}
.hh-band a{display:inline-flex;align-items:baseline;gap:12px;color:#fff;text-decoration:none;min-height:44px;flex-wrap:wrap;justify-content:center}
.hh-satz{font-size:14.5px;letter-spacing:.02em;opacity:.92}
.hh-marke{display:inline-flex;align-items:flex-end;gap:5px;position:relative;top:calc(26px * 480 / 2050)}
.hh-wort{height:26px;width:auto}
.hh-figur{height:34px;width:auto;transform-origin:50% 100%;animation:hh-wipp 4.2s ease-in-out infinite,hh-hupf 7s ease-in-out infinite}
@keyframes hh-wipp{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes hh-hupf{0%,86%,100%{translate:0 0}90%{translate:0 -6px}94%{translate:0 0}}

/* Leiste Handy */
.leiste{display:none}

/* Lichtkasten */
#lichtkasten{position:fixed;inset:0;z-index:60;background:rgba(7,10,18,.94);display:grid;place-items:center;padding:60px 16px 80px}
#lichtkasten[hidden]{display:none}
#lichtkasten figure{margin:0;max-width:min(1100px,100%);text-align:center}
#lichtkasten img{max-height:76vh;width:auto;margin:0 auto;border-radius:4px}
.lk-text{color:#e8e5ee;font-size:16px;margin-top:12px}
#lichtkasten button{position:absolute;background:#fbf8f1;color:var(--tinte);border:0;min-height:46px;padding:10px 16px;font-weight:700;font-size:15px;cursor:pointer;border-radius:3px}
.lk-zu{top:12px;right:12px}.lk-rueck{bottom:16px;left:16px}.lk-vor{bottom:16px;right:16px}

/* Einblenden */
.zeig{opacity:0;transform:translateY(18px);transition:opacity .9s,transform 1s cubic-bezier(.2,.8,.2,1)}
.zeig.da{opacity:1;transform:none}

/* Barrierefreiheit */
.a-ruhig *,.a-ruhig *::before,.a-ruhig *::after{animation:none!important;transition:none!important}
.a-ruhig .zeig{opacity:1;transform:none}
.a-kontrast{--grau:#2b2830;--linie:rgba(23,21,27,.45)}
.a-kontrast .ab.nacht p,.a-kontrast .zange .gross-text{color:#fff}
.a-gross body,html.a-gross{font-size:20px}
html.a-gross body{font-size:20px}html.a-gross .gross-text{font-size:23px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.zeig{opacity:1;transform:none}html{scroll-behavior:auto}}

/* Mittel */
@media(max-width:1180px){
 .haupt a{padding:12px 8px 14px;font-size:15.5px}
 .kopf-tel b{font-size:18px}
}
@media(max-width:1120px){
 .haupt,.kopf-tel{display:none}
 .menueknopf{display:flex}
 .held-gitter{grid-template-columns:1fr 240px}
 .schilder{grid-template-columns:repeat(3,1fr)}
 .fuss-gitter{grid-template-columns:1fr 1fr}
}
/* Handy */
@media(max-width:760px){
 body{font-size:17.5px;padding-bottom:64px}
 .kopf-innen{min-height:62px;padding-top:6px;padding-bottom:6px}
 .logo{width:150px}
 .held-bild img{height:300px;object-position:50% 70%}
 .held-bild::after{background:linear-gradient(180deg,rgba(10,31,69,0) 40%,#0a1f45 100%)}
 .held-gitter{grid-template-columns:1fr;margin-top:-40px;padding-bottom:44px;gap:20px}
 .held-pl{position:absolute;right:14px;top:-232px;width:118px;transform:rotate(8deg)}
 .held-pl-text{font-size:13px;margin-top:4px;text-shadow:0 1px 4px #000}
 .held-pl-text b{font-size:15px}
 .t1{font-size:clamp(34px,9.4vw,46px)}
 .t2{font-size:clamp(28px,7.6vw,38px)}
 .fakten{grid-template-columns:1fr 1fr}
 .fakt{padding:20px 20px}
 .fakt:nth-child(3){background:none}
 .fakt:nth-child(n+3){border-top:1px solid var(--linie)}
 .zange-gitter,.zwei-sp,.drei-sp{grid-template-columns:1fr}
 .zange-pl{order:-1;max-width:400px;margin:0 auto;width:100%}
 .zange .zange-text .kicker{margin-top:6px}
 .ergebnis{padding:18px}
 .schilder,.schilder.kurz{grid-template-columns:1fr 1fr;gap:14px}
 .schild h3{font-size:18px}.s-text{padding:14px 14px 16px}.s-rolle{font-size:15px}
 .ohne-foto span{font-size:44px}
 .jl-band{height:170px}
 .jl-loch{width:86px}
 .jl-loch b{font-size:17px}
 .jl-loch small{font-size:13px}
 .jl-loch:nth-child(3n of .jl-loch){top:110px}
 .hof{grid-template-columns:1fr;gap:14px}
 .hof li:nth-child(n+2){display:none}
 .hof li:nth-child(-n+3){display:block}
 .auto{grid-template-columns:1fr}
 .aushaenge.drei{grid-template-columns:1fr}
 .aushaenge{columns:1}
 .af-felder{grid-template-columns:1fr}
 .auftrag fieldset,.af-felder{padding-left:16px;padding-right:16px}
 .auftrag .knoepfe,.auftrag .f-fehl,.auftrag .f-dank{padding:0 16px}
 .fuss-gitter{grid-template-columns:1fr}
 .partner img{height:46px}
 .partner{gap:20px 26px;justify-content:center}
 .b-liste a{padding:14px 14px;grid-template-columns:36px 1fr auto}
 .b-t{font-size:19px}
 .knopf{width:100%}
 .knoepfe.klein .knopf{width:auto}
 .leiste{display:grid;grid-template-columns:1.25fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--tinte);box-shadow:0 -6px 20px rgba(0,0,0,.2)}
 .leiste a{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:8px 18px;text-decoration:none;color:#fff}
 .leiste a:first-child{background:var(--rot)}
 .leiste small{font-family:var(--mono);font-size:13px;opacity:.85;text-transform:uppercase}
 .leiste b{font-family:var(--display);font-stretch:122%;font-weight:820;font-size:20px;line-height:1.1}
 .sk-titel{font-size:19px}
 .stempelkarte th,.stempelkarte td{padding:10px 12px}
 .stempelkarte td{font-size:13px}
 .schluss::after{display:none}
}
@media(max-width:380px){
 .held-pl{width:100px;top:-212px}
 .t1{font-size:32px}
 .stempelkarte thead th:first-child{width:auto}
 .stempelkarte th,.stempelkarte td{padding:10px 8px}
}

.ab.nacht .schild p{color:var(--grau)}.ab.nacht .schild .s-seit{color:var(--rot)}
.zwei-sp>*,.zange-gitter>*,.held-gitter>*{min-width:0}
@media(max-width:760px){
 .stempelkarte td{white-space:normal;width:34%}
 .stempelkarte tbody th{font-size:15px}
 .lineal{padding:0 34px 0 30px}
}
@media(max-width:760px){
 .lineal{padding:0;margin:30px 0 40px}
 .jl-band{height:auto;border-top:0;border-left:2px solid rgba(255,255,255,.5);margin-left:9px;padding:4px 0}
 .jl-tick{display:none}
 .jl-loch,.jl-loch:nth-child(even of .jl-loch),.jl-loch:nth-child(3n of .jl-loch){position:relative;left:auto!important;top:auto;transform:none;width:auto;display:grid;grid-template-columns:30px 70px 1fr;align-items:center;text-align:left;margin:0 0 14px -11px}
 .jl-loch i{margin:0}
 .jl-loch small{font-size:15px}
 .schilder.kurz .schild:nth-child(3){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
 .schilder.kurz .schild:nth-child(3) .s-text::before{display:none}
 .hof,.aushaenge.drei{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1*var(--rand));padding:0 var(--rand) 10px;scrollbar-width:none}
 .hof::-webkit-scrollbar,.aushaenge.drei::-webkit-scrollbar{display:none}
 .hof li,.hof li:nth-child(n+2),.aushaenge.drei .aushang{display:block;flex:0 0 84%;scroll-snap-align:start}
 .hof li:nth-child(n+4){display:block}
}
.recht a,.adresse a,.fuss a{overflow-wrap:anywhere}

/* Durchgang 2: Helden der Unterseiten */
.held-u.mit-bild .hu-gitter{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.held-u .t1{font-size:clamp(36px,5.4vw,80px)}
.held-u.dunkel{background:var(--nacht);color:#fff;position:relative;overflow:hidden}
.held-u.dunkel::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 70% at 80% 50%,rgba(127,155,196,.2),transparent 70%)}
.held-u.dunkel .innen{position:relative}
.held-u.dunkel .kicker{color:#c9d3e6}.held-u.dunkel .gross-text{color:#dfe5f0}
.held-u.dunkel p{color:#dfe5f0}
.held-u .hu-bild .bild img{width:100%}
.held-u .hu-bild .bild.hoch img{max-height:560px;width:auto}
.erklaer{max-width:calc(820px + 2*var(--rand))}
.erklaer .kicker .loch-punkt{background:var(--tinte)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.paar .bild:nth-child(1){transform:rotate(-2deg)}.paar .bild:nth-child(2){transform:rotate(2deg) translateY(26px)}
.paar .bild img{box-shadow:0 14px 30px rgba(0,0,0,.18)}
.auftrag legend{float:left;width:100%}
.auftrag legend+*{clear:both}
.af-felder ::placeholder{color:#6c6772}
@media(max-width:760px){.held-u.mit-bild .hu-gitter{grid-template-columns:1fr}.held-u .hu-bild .bild.hoch img{max-height:420px}.paar{gap:10px}}
.held-u.dunkel .heft-seite p{color:var(--tinte)}
.erklaer{max-width:calc(var(--breit) + 2*var(--rand))}
.erklaer>*{max-width:44em}
@media(max-width:760px){
 .zange-gitter{display:flex;flex-direction:column;gap:0}
 .zange-text{display:contents}
 .zange-text>.kicker{order:1}.zange-text>.t1,.zange-text>.t2{order:2}.zange-text>.gross-text{order:3}
 .zange-pl{order:4;margin:18px auto 6px}
 .ergebnis{order:5}.zange .fussnote{order:6}
 .spur svg{width:min(70%,240px)}
}
.fakt{min-width:0}
@media(max-width:760px){.fakt b{font-size:clamp(18px,5.6vw,24px);font-stretch:125%}}
.recht h2,.t1,.t2,.t3,.b-t,.mn-t{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media(max-width:1120px){.stempelkarte td{white-space:normal}.stempelkarte th,.stempelkarte td{padding-left:12px;padding-right:12px}}
@media(max-width:380px){.stempelkarte th,.stempelkarte td{padding-left:8px;padding-right:6px}.stempelkarte td{font-size:13px}}
.t1,.t2{hyphens:manual;-webkit-hyphens:manual}
@media(max-width:760px){.t2{hyphens:auto;-webkit-hyphens:auto}}