/* Kenneth Lukas Soller #246 · Startseite · WinWebDesign 10/2026
   Sand und Erde als Grund, Neon-Gelb als einziger Akzent. */

@font-face{font-family:"Big Shoulders";src:url("../schrift/bigshoulders.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Big Shoulders Stencil";src:url("../schrift/bigshoulders-stencil.woff2") format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:"Barlow";src:url("../schrift/barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../schrift/barlow-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("../schrift/barlow-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --sand:#F3EEE5;
  --sand-2:#E7DFD1;
  --sand-3:#D8CCB8;
  --erde:#15110D;
  --erde-2:#251E17;
  --text:#1C1712;
  --grau:#5E544A;
  --grau-hell:#BDB2A4;
  --gelb:#DCFC03;          /* Neon-Gelb aus Kenneths Entwurf: Flächen, Knöpfe, Schrift auf Erde */
  --gelb-hover:#C3E000;
  --oliv:#545800;          /* Akzentschrift auf Sand (6.55:1) */
  --display:"Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --stencil:"Big Shoulders Stencil","Big Shoulders",Impact,sans-serif;
  --text-font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:clamp(1rem, 0.6rem + 2.4vw, 3rem);
  --breit:84rem;
  --kurve:cubic-bezier(.2,.75,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--sand);color:var(--text);font-family:var(--text-font);font-size:clamp(1rem, 0.96rem + 0.2vw, 1.125rem);line-height:1.6;text-rendering:optimizeLegibility}
main{overflow-x:clip;display:block}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
blockquote{margin:0}
.abschnitt h2{margin-bottom:1.3rem}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;margin:0;text-transform:uppercase}
h2{font-size:clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem)}
h3{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);line-height:1}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--erde);outline-offset:3px;border-radius:2px}
.dunkel :focus-visible,.held :focus-visible,.fuss :focus-visible,.partner :focus-visible,.termine :focus-visible,.kontakt :focus-visible,.kopf :focus-visible,.navi :focus-visible,.schwebe :focus-visible{outline-color:var(--gelb)}

.springen{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--erde);color:#fff;padding:.8rem 1.1rem;font-weight:600;text-decoration:none}
.springen:focus{top:1rem}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;gap:1rem;padding:.7rem var(--rand);color:#fff;background:rgba(21,17,13,.38);transition:background .4s var(--kurve),color .4s,box-shadow .4s}
.kopf.fest{background:rgba(21,17,13,.94);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.marke{display:inline-flex;align-items:baseline;gap:.35rem;text-decoration:none;font-family:var(--display);font-weight:900;font-size:1.65rem;min-height:44px;align-items:center}
.marke b{font-family:var(--stencil);color:var(--gelb);font-weight:800}
.navi{margin-left:auto}
.navi ul{list-style:none;margin:0;padding:0;display:flex;gap:.2rem}
.navi a{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;position:relative}
.navi a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.55rem;height:2px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--kurve)}
.navi a:hover::after,.navi a:focus-visible::after{transform:scaleX(1)}
.kopf-knopf{margin-left:.4rem}
.menue-knopf{display:none;margin-left:auto;background:none;border:2px solid rgba(255,255,255,.5);color:inherit;min-width:44px;min-height:44px;border-radius:2px;cursor:pointer;font:600 .9rem var(--text-font);letter-spacing:.06em;text-transform:uppercase;padding:0 .8rem}

/* ---------- Knöpfe ---------- */
.knopf{--x:0px;--y:0px;display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.85rem 1.5rem;border:2px solid transparent;font:600 1rem/1.1 var(--text-font);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;transform:translate(var(--x),var(--y));transition:background .3s,color .3s,border-color .3s,box-shadow .3s;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.knopf svg{width:1.2em;height:1.2em;flex:none;transition:transform .35s var(--kurve)}
.knopf:hover svg{transform:translateX(4px)}
.knopf-gelb{background:var(--gelb);color:var(--erde)}
.knopf-gelb:hover{background:var(--gelb-hover)}
.knopf-rand{border-color:currentColor;color:#fff;background:rgba(21,17,13,.35)}
.knopf-rand:hover{background:#fff;color:var(--erde)}
.knopf-erde{background:var(--erde);color:#fff}
.knopf-erde:hover{background:#3A2F24}
.knopf-klein{min-height:44px;padding:.6rem 1.1rem;font-size:.9rem}

/* ---------- Held ---------- */
.held{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;background:var(--erde);isolation:isolate;padding:7.5rem var(--rand) clamp(6.5rem, 4rem + 8vw, 10rem)}
.held-foto{position:absolute;inset:0;z-index:-3;overflow:hidden}
.held-foto img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:62% 35%;scale:1.04;animation:heldZoom 18s var(--kurve) both}
@keyframes heldZoom{from{scale:1.14}to{scale:1.04}}
.held canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.held-schleier{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(21,17,13,.92) 0%,rgba(21,17,13,.78) 34%,rgba(21,17,13,.25) 68%,rgba(21,17,13,.1) 100%),
  linear-gradient(0deg,rgba(21,17,13,.85) 0%,rgba(21,17,13,0) 45%)}
.held-nummer{position:absolute;right:calc(var(--rand) * -.4);top:12%;z-index:-1;font-family:var(--stencil);font-weight:900;font-size:clamp(9rem, 4rem + 26vw, 30rem);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(220,252,3,.5);pointer-events:none;user-select:none}
.held-inhalt{max-width:52rem;position:relative}
.augenbraue{display:inline-flex;align-items:center;gap:.7rem;font-weight:600;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 1.2rem}
.augenbraue::before{content:"";width:2.4rem;height:3px;background:var(--gelb)}
.held h1{font-size:clamp(3.2rem, 1.6rem + 6.4vw, 7.2rem);line-height:1}
.held h1 .zeile{display:block}
.held h1 .anders{font-family:var(--stencil);color:var(--gelb);font-weight:900;transform:skewX(-8deg);transform-origin:left bottom}
.held h1 .schmal{font-weight:300;}
.unterzeile{max-width:34rem;font-size:clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);margin:1.6rem 0 2rem;color:#EFE8DE}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.9rem}
.schlusszeile{margin:2.2rem 0 0;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-hell);display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.schlusszeile span::before{content:"/";color:var(--gelb);margin-right:1.1rem}
.schlusszeile span:first-child::before{content:none}
.held-kante{position:absolute;left:0;right:0;bottom:-1px;height:clamp(3rem, 2rem + 4vw, 6rem);z-index:2;display:block;width:100%}
.auftritt{opacity:0;transform:translateY(22px);animation:auftritt .9s var(--kurve) forwards}
@keyframes auftritt{to{opacity:1;transform:none}}
.foto-hinweis{position:absolute;right:var(--rand);bottom:clamp(4.5rem, 3rem + 4vw, 7rem);z-index:3;font-size:.75rem;letter-spacing:.08em;color:var(--grau-hell);margin:0}

/* ---------- Laufband ---------- */
.laufband{background:var(--erde);color:var(--sand);overflow:hidden;border-top:3px solid var(--gelb);padding:.9rem 0;position:relative;z-index:3}
.laufband-spur{display:flex;width:max-content;animation:laufen 38s linear infinite}
.laufband-spur p{margin:0;display:flex;gap:2.2rem;padding-right:2.2rem;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem, 1rem + 1.4vw, 2rem);text-transform:uppercase;white-space:nowrap}
.laufband-spur i{font-style:normal;color:var(--gelb);font-family:var(--stencil)}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Fahrbahn mit Fahrer #246 ---------- */
.fahrbahn{position:relative;height:clamp(150px, 120px + 5vw, 190px);background:var(--sand);overflow:hidden}
.fahrbahn .boden,.fahrbahn canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.boden-flaeche{fill:var(--sand-2)}
.boden-kante{fill:none;stroke:var(--erde);stroke-width:2.5}
.boden-rillen{fill:none;stroke:var(--erde);stroke-width:2;stroke-dasharray:7 9;opacity:.3}
.fahrer{position:absolute;left:0;top:0;width:var(--bw,150px);transform-origin:50% 100%;will-change:transform}
.fahrer-innen{transform-origin:50% 50%}
.fahrer svg{display:block;width:100%;height:auto;overflow:visible}
.fahrer .nr{transform-box:fill-box;transform-origin:center}
.fahrer.links .fahrer-innen{transform:scaleX(-1)}
.fahrer.links .nr{transform:scaleX(-1)}

/* ---------- Abschnitte allgemein ---------- */
.abschnitt{position:relative;padding:clamp(4.5rem, 3rem + 6vw, 9rem) var(--rand)}
.rahmen{max-width:var(--breit);margin:0 auto;position:relative}
.marke-klein{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oliv);margin:0 0 1rem}
.marke-klein::before{content:"";width:1.6rem;height:3px;background:currentColor}
.dunkel{background:var(--erde);color:#EFE8DE}
.dunkel .marke-klein,.partner .marke-klein,.termine .marke-klein,.kontakt .marke-klein{color:var(--gelb)}
.dunkel h2,.dunkel h3{color:#fff}
.gibt-zu{font-style:italic;color:var(--grau);border-left:3px solid var(--oliv);padding-left:1rem;max-width:34rem}
.dunkel .gibt-zu,.partner .gibt-zu,.termine .gibt-zu{color:var(--grau-hell);border-color:var(--gelb)}
.foto{position:relative;overflow:hidden;background:var(--sand-3)}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--kurve)}
.foto:hover img{transform:scale(1.035)}
.foto figcaption,.bildnachweis{position:absolute;right:.5rem;bottom:.4rem;font-size:.7rem;letter-spacing:.06em;color:#fff;background:rgba(21,17,13,.72);padding:.15rem .45rem;margin:0}

/* ---------- Vertrauensanker ---------- */
.anker{background:var(--sand);padding-top:clamp(3.5rem, 2rem + 5vw, 7rem)}
.anker-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem, 0.5rem + 2vw, 2.5rem);align-items:end}
.anker-gross{grid-column:1 / span 6;position:relative}
.zahl-bild{font-family:var(--stencil);font-weight:900;font-size:clamp(8rem, 3rem + 24vw, 22rem);line-height:.78;margin:0;background:url("../img/roost-246-480.webp") 50% 40% / cover;-webkit-background-clip:text;background-clip:text;color:transparent;}
@media (min-width:901px){.zahl-bild{background-image:url("../img/roost-246-900.webp")}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.zahl-bild{color:var(--erde)}}
.anker-gross p.unter{font-family:var(--display);font-weight:700;font-size:1.4rem;text-transform:uppercase;margin:.6rem 0 0}
.fakten{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1.6rem;margin:0;padding:0;list-style:none}
.fakten li{border-top:3px solid var(--erde);padding-top:.9rem}
.fakten li:nth-child(2){margin-top:2.8rem}
.fakten li:nth-child(4){margin-top:-1.4rem}
.fakt-zahl{display:block;font-family:var(--display);font-weight:900;font-size:clamp(3rem, 2rem + 3vw, 4.6rem);line-height:.9;color:var(--erde)}
.fakt-zahl small{font-size:.45em;font-weight:700;margin-left:.15em;color:var(--oliv)}
.fakten p{margin:.4rem 0 0;font-size:.98rem;color:var(--grau)}
.anker .gibt-zu{grid-column:7 / span 6;margin-top:1rem}

/* ---------- Geschichte ---------- */
.geschichte{background:var(--sand-2)}
.geschichte-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem, 1rem + 2vw, 3rem)}
.bildpaar{grid-column:1 / span 6;position:relative;align-self:start;height:clamp(26rem, 14rem + 30vw, 40rem);margin-top:clamp(0rem, -2rem + 6vw, 5rem)}
.bildpaar .foto-a{position:absolute;left:0;top:0;width:74%;aspect-ratio:1 / 1;box-shadow:0 30px 60px -30px rgba(21,17,13,.45)}
.bildpaar .foto-b{position:absolute;right:0;bottom:0;width:66%;aspect-ratio:3 / 2;border:8px solid var(--sand-2);z-index:2}
.bildpaar .stempel{position:absolute;left:58%;top:62%;z-index:3;background:var(--gelb);color:var(--erde);font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1rem;padding:.5rem .8rem;transform:rotate(-6deg)}
.geschichte-text{grid-column:8 / span 5;align-self:center}
.geschichte-text h2{margin-bottom:1.4rem}
.zeitstrahl{list-style:none;margin:2rem 0 0;padding:0;position:relative}
.zeitstrahl::before{content:"";position:absolute;left:.4rem;top:.4rem;bottom:.4rem;width:2px;background:repeating-linear-gradient(180deg,var(--erde) 0 8px,transparent 8px 14px)}
.zeitstrahl li{position:relative;padding:0 0 1.5rem 2rem}
.zeitstrahl li::before{content:"";position:absolute;left:0;top:.35rem;width:.9rem;height:.9rem;background:var(--sand-2);border:3px solid var(--erde);border-radius:50%}
.zeitstrahl li.jetzt::before{background:var(--gelb);border-color:var(--erde)}
.zeitstrahl b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;text-transform:uppercase;}
.zeitstrahl p{margin:.2rem 0 0;color:var(--grau);font-size:.98rem}

/* ---------- Kosten (Problem und Lösung) ---------- */
.kosten{background:var(--sand);overflow:hidden}
.kosten-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem, 1rem + 2vw, 3rem);align-items:start}
.kosten-text{grid-column:1 / span 6}
.kosten-foto{grid-column:8 / span 5;margin-top:-1rem;aspect-ratio:9 / 14;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 9%)}
.kosten-foto img{object-position:50% 30%}
.posten{list-style:none;margin:2rem 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.4rem}
.posten li{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--sand-3)}
.posten li:nth-child(odd){padding-right:.6rem}
.posten svg{width:2rem;height:2rem;flex:none;color:var(--oliv)}
.posten b{display:block;font-weight:600}
.posten span{display:block;color:var(--grau);font-size:.92rem;line-height:1.4}
.loesung{background:var(--erde);color:#EFE8DE;padding:1.6rem 1.8rem;margin:2rem 0 0;position:relative;max-width:38rem}
.loesung::before{content:"";position:absolute;left:-.6rem;top:1.2rem;width:.6rem;height:3.2rem;background:var(--gelb)}
.loesung p:last-child{margin:0}
.loesung strong{color:#fff}

/* ---------- Leistungen ---------- */
.partner{color:#EFE8DE;background:var(--erde);overflow:hidden;isolation:isolate}
.partner-hinter{position:absolute;inset:0;z-index:-2}
.partner-hinter{overflow:hidden}
.partner-hinter img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;object-position:50% 40%;opacity:.38}
.partner::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(21,17,13,.78)}
.partner-kopf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;margin-bottom:clamp(2.5rem, 1.5rem + 3vw, 4.5rem)}
.partner-kopf-links{grid-column:1 / span 7}
.partner-kopf p{grid-column:9 / span 4;align-self:end;margin:0;color:var(--grau-hell)}
.leistungen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.4rem}
.leistung{--rx:0deg;--ry:0deg;position:relative;background:rgba(37,30,23,.92);border:1px solid rgba(255,255,255,.1);padding:1.6rem 1.6rem 1.8rem;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--kurve),border-color .3s,background .3s}
.leistung:hover{border-color:var(--gelb);background:rgba(45,36,28,.96)}
.leistung:nth-child(1){grid-column:1 / span 7}
.leistung:nth-child(2){grid-column:8 / span 5;margin-top:3rem}
.leistung:nth-child(3){grid-column:2 / span 5}
.leistung:nth-child(4){grid-column:7 / span 6;margin-top:-1.5rem}
.leistung:nth-child(5){grid-column:1 / span 6}
.leistung-nr{position:absolute;right:1.2rem;top:.6rem;font-family:var(--stencil);font-weight:900;font-size:3.4rem;line-height:1;color:rgba(220,252,3,.22)}
.leistung svg{width:3rem;height:3rem;color:var(--gelb);margin-bottom:1rem}
.leistung h3{margin-bottom:.7rem;color:#fff}
.leistung p{margin:0;color:#DCD3C7}
.nicht-dabei{grid-column:7 / span 6;align-self:center;padding:1.4rem 0 0 1.4rem;border-left:3px solid var(--gelb)}
.nicht-dabei h3{font-size:1.4rem;color:#fff;margin-bottom:.6rem}
.nicht-dabei p{margin:0;color:var(--grau-hell)}

/* Strich-Icons zeichnen sich */
.icon path,.icon circle,.icon rect,.icon line,.icon polyline{stroke-dasharray:var(--len,160);stroke-dashoffset:0}
.zeigen .icon path,.zeigen .icon circle,.zeigen .icon rect,.zeigen .icon line,.zeigen .icon polyline{stroke-dashoffset:var(--len,160)}
.zeigen.ist-da .icon path,.zeigen.ist-da .icon circle,.zeigen.ist-da .icon rect,.zeigen.ist-da .icon line,.zeigen.ist-da .icon polyline{animation:zeichnen 1.4s var(--kurve) forwards;animation-delay:calc(var(--i,0) * 90ms + 200ms)}
.leistung:hover .icon *,.schritt:hover .icon *,.posten li:hover .icon *{animation:zeichnenNeu 1s var(--kurve) both}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes zeichnenNeu{from{stroke-dashoffset:var(--len,160)}to{stroke-dashoffset:0}}

/* ---------- Rennberichte ---------- */
.berichte{background:var(--sand)}
.berichte-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:clamp(2.5rem, 1.5rem + 3vw, 4rem)}
.berichte-kopf p{max-width:26rem;margin:0;color:var(--grau)}
.bericht{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.2rem, 0.8rem + 2vw, 3rem);align-items:center;margin-bottom:clamp(3.5rem, 2rem + 5vw, 7rem)}
.bericht:last-child{margin-bottom:0}
.bericht-foto{grid-column:1 / span 5;aspect-ratio:3 / 4}
.bericht-text{grid-column:7 / span 6}
.bericht.b2 .bericht-foto{grid-column:6 / span 7;order:2;aspect-ratio:21 / 10}
.bericht.b2 .bericht-text{grid-column:1 / span 5;order:1}
.bericht.b3 .bericht-foto{grid-column:2 / span 6;aspect-ratio:4 / 3;clip-path:polygon(0 0,100% 6%,100% 100%,0 94%)}
.bericht.b3 .bericht-text{grid-column:9 / span 4}
.datum{display:inline-block;font-family:var(--display);font-weight:800;text-transform:uppercase;background:var(--erde);color:#fff;padding:.3rem .7rem;margin-bottom:1rem;font-size:1rem}
.bericht h3{font-size:clamp(1.9rem, 1.3rem + 2vw, 3rem);margin-bottom:1rem}
.zitat{margin:1.4rem 0 0;padding:0;position:relative}
.zitat p{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem, 1.1rem + 1vw, 1.9rem);line-height:1.15;text-transform:none;color:var(--erde);margin:0 0 .6rem}
.zitat p::before{content:"«";color:var(--oliv)}
.zitat p::after{content:"»";color:var(--oliv)}
.zitat footer{font-size:.9rem;color:var(--grau)}
.ergebnis{display:flex;gap:1.6rem;margin:1.2rem 0 0;flex-wrap:wrap}
.ergebnis div{border-top:3px solid var(--erde);box-shadow:inset 0 3px 0 var(--gelb);padding-top:.4rem}
.ergebnis b{display:block;font-family:var(--display);font-weight:900;font-size:2.8rem;line-height:1}
.ergebnis span{font-size:.9rem;color:var(--grau)}

/* ---------- Termine ---------- */
.termine{color:#EFE8DE;background:var(--erde);overflow:hidden;isolation:isolate}
.termine-hinter{position:absolute;right:0;top:0;bottom:0;width:58%;z-index:-2}
.termine-hinter{overflow:hidden}
.termine-hinter img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;object-position:30% 50%}
.termine::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--erde) 42%,rgba(21,17,13,.82) 62%,rgba(21,17,13,.55) 100%)}
.termine-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem}
.termine-text{grid-column:1 / span 6}
.termine-text p{color:#DCD3C7;max-width:32rem}
.saison{grid-column:1 / span 7;list-style:none;margin:2.4rem 0 0;padding:0}
.saison li{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.saison li::before{content:attr(data-k);content:attr(data-k) / "";font-family:var(--stencil);font-weight:900;font-size:2rem;color:var(--gelb)}
.saison li:last-child b{color:var(--gelb)}
.saison b{font-family:var(--display);font-weight:700;font-size:1.25rem;text-transform:uppercase;}
.saison span{font-size:.88rem;color:var(--grau-hell);text-align:right}
.termine .knopfreihe{margin-top:2rem}

/* ---------- Sponsoren ---------- */
.sponsoren{background:var(--sand-2)}
.sponsoren-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem, 1rem + 2vw, 3rem);align-items:start}
.sponsoren-links{grid-column:1 / span 5}
.dank{position:relative;margin-top:2rem}
.dank .foto{aspect-ratio:16 / 10}
.dank blockquote{position:relative;margin:-3.5rem 0 0 2rem;background:var(--sand);padding:1.4rem 1.5rem;box-shadow:0 20px 40px -24px rgba(21,17,13,.4);z-index:2}
.dank blockquote p{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.2;margin:0 0 .6rem}
.dank blockquote footer{font-size:.88rem;color:var(--grau)}
.logos{grid-column:7 / span 6;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.logos li{background:#fff;display:flex;align-items:center;justify-content:center;padding:1.2rem;min-height:9rem;transition:transform .4s var(--kurve),box-shadow .4s}
.logos li:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 18px 36px -20px rgba(21,17,13,.45)}
.logos li.schwarz{background:#000}
.logos li:nth-child(1){grid-column:span 3}
.logos li:nth-child(2){grid-column:span 3;margin-top:2rem}
.logos li:nth-child(3){grid-column:span 2}
.logos li:nth-child(4){grid-column:span 4;margin-top:-2rem}
.logos img{max-height:7rem;width:auto;object-fit:contain}
.logos li:nth-child(4) img{max-height:4rem}
.logos li.frei{grid-column:2 / span 5;background:transparent;border:2px dashed var(--erde);min-height:7rem}
.logos li.frei a{display:flex;align-items:center;gap:.8rem;min-height:44px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.5rem;text-transform:uppercase}
.logos li.frei a span{color:var(--oliv)}

/* ---------- Ablauf ---------- */
.ablauf{background:var(--sand);overflow:hidden}
.ablauf-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem, 1rem + 2vw, 3rem);align-items:center}
.ablauf-foto{grid-column:1 / span 4;aspect-ratio:2 / 3;clip-path:polygon(0 0,100% 0,100% 88%,82% 100%,0 100%)}
.ablauf-rechts{grid-column:6 / span 7}
.schritte{list-style:none;margin:2.4rem 0 0;padding:0}
.schritt{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.2rem;padding:1.4rem 0;border-top:2px solid var(--erde);position:relative}
.schritt:nth-child(2){margin-left:clamp(0rem, -1rem + 4vw, 3rem)}
.schritt:nth-child(3){margin-left:clamp(0rem, -2rem + 8vw, 6rem)}
.schritt svg{width:3.2rem;height:3.2rem;color:var(--oliv)}
.schritt h3{font-size:1.7rem;margin-bottom:.4rem}
.schritt p{margin:0;color:var(--grau)}
.schritt-nr{font-family:var(--stencil);font-weight:900;color:var(--oliv);font-size:1rem;display:block;margin-bottom:.2rem}

/* ---------- Unterstützen ---------- */
.unterstuetzen{background:var(--gelb);color:var(--erde);overflow:hidden;isolation:isolate}
.unterstuetzen-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;align-items:center}
.unterstuetzen-text{grid-column:1 / span 7}
.unterstuetzen h2{color:var(--erde)}
.unterstuetzen .marke-klein{color:var(--erde)}
.unterstuetzen p{max-width:34rem;color:var(--erde-2)}
.unterstuetzen .gibt-zu{color:var(--erde-2);border-color:var(--erde)}
.unterstuetzen-foto{grid-column:9 / span 4;aspect-ratio:1 / 1;transform:rotate(3deg);border:10px solid var(--erde);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.unterstuetzen .knopf-erde:hover{background:#3A2F24}
.unterstuetzen-zahl{position:absolute;left:-2%;bottom:-.18em;z-index:-1;font-family:var(--stencil);font-weight:900;font-size:clamp(10rem, 4rem + 28vw, 26rem);line-height:.8;color:rgba(21,17,13,.08);pointer-events:none}

/* ---------- Fragen ---------- */
.fragen{background:var(--sand-2)}
.fragen-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem, 1rem + 2vw, 3rem);align-items:start}
.fragen-kopf{grid-column:1 / span 4;position:relative}
.fragen-foto{margin-top:2rem;aspect-ratio:4 / 5;max-width:22rem}
.fragen-liste{grid-column:6 / span 7}
.fragen details{border-bottom:2px solid var(--erde)}
.fragen details:first-child{border-top:2px solid var(--erde)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;padding:1.2rem 0;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);text-transform:uppercase;}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:none;width:1.1rem;height:1.1rem;margin-right:.45rem;border-right:3px solid var(--oliv);border-bottom:3px solid var(--oliv);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--kurve)}
.fragen details[open] summary::after{transform:rotate(225deg)}
.fragen details p{margin:0 0 1.3rem;max-width:40rem;color:var(--grau)}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--erde);color:#EFE8DE;overflow:hidden;isolation:isolate;padding-bottom:clamp(5rem, 3rem + 6vw, 9rem)}
.kontakt-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem, 1rem + 2vw, 3rem);align-items:center}
.kontakt-foto{grid-column:7 / span 6;aspect-ratio:16 / 11;order:2}
.kontakt-text{grid-column:1 / span 6;order:1}
.kontakt-text p{color:#DCD3C7;max-width:32rem}
.wege{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.8rem}
.wege a{display:flex;align-items:center;gap:1rem;min-height:56px;padding:.7rem 1rem;border:1px solid rgba(255,255,255,.18);text-decoration:none;transition:border-color .3s,background .3s,transform .4s var(--kurve)}
.wege a:hover{border-color:var(--gelb);background:rgba(255,255,255,.04);transform:translateX(6px)}
.wege svg{width:1.6rem;height:1.6rem;color:var(--gelb);flex:none}
.wege b{display:block;font-weight:600;color:#fff}
.wege span{display:block;font-size:.88rem;color:var(--grau-hell)}
.wege li:first-child a{background:var(--gelb);border-color:var(--gelb);color:var(--erde)}
.wege li:first-child a svg{color:var(--erde)}
.wege li:first-child a b{color:var(--erde)}
.wege li:first-child a span{color:var(--erde-2)}
.wege li:first-child a:hover{background:var(--gelb-hover)}

/* ---------- Fuss ---------- */
.fuss{background:#0D0A08;color:#CFC5B8;padding:3.5rem var(--rand) 2rem}
.fuss-raster{max-width:var(--breit);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2rem}
.fuss h2{font-family:var(--text-font);font-weight:600;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 1rem;line-height:1.3}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none}
.fuss li a:hover{color:#fff}
.fuss svg{width:1.1rem;height:1.1rem;color:var(--gelb);flex:none}
.fuss .marke{font-size:2rem;color:#fff}
.fuss-zeile{max-width:var(--breit);margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.13);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;font-size:.88rem}
.fuss-zeile a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.fuss-zeile nav a{display:inline-flex;align-items:center;min-height:44px;margin-left:1rem}
.fuss-zeile nav a:first-child{margin-left:0}
.fuss-foto{font-size:.8rem;color:#A99E90;max-width:var(--breit);margin:1rem auto 0}

/* ---------- Schwebende Knöpfe ---------- */
.schwebe{position:fixed;right:1rem;bottom:1rem;z-index:210;display:flex;flex-direction:column;gap:.6rem}
.schwebe a,.schwebe button{width:52px;height:52px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:transform .3s var(--kurve),opacity .3s}
.schwebe a{background:var(--gelb);color:var(--erde)}
.schwebe button{background:var(--erde);color:#fff;opacity:0;pointer-events:none}
.schwebe button.da{opacity:1;pointer-events:auto}
.schwebe a:hover,.schwebe button:hover{transform:scale(1.08)}
.schwebe svg{width:1.4rem;height:1.4rem}

/* ---------- Reveals ---------- */
.zeigen{opacity:0;transform:translateY(34px);transition:opacity var(--dauer,.9s) var(--kurve),transform var(--dauer,.9s) var(--kurve);transition-delay:calc(var(--i,0) * 110ms)}
.zeigen.von-links{transform:translateX(-40px)}
.zeigen.von-rechts{transform:translateX(40px)}
.zeigen.kippen-ein{transform:translateY(30px) rotate(-2deg)}
.zeigen.ist-da{opacity:1;transform:none}
.bildpaar .zeigen.ist-da.foto-b{transform:none}


/* ---------- Action: Wischer, Parallax, Wörter, Spritzer ---------- */
.foto.zeigen{opacity:1;transform:none}
.foto.zeigen::after{content:"";position:absolute;inset:0;z-index:4;background:var(--gelb);transform:scaleX(1);transform-origin:right center;transition:transform .9s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--i,0) * 110ms + 120ms)}
.foto.zeigen::before{content:"";position:absolute;inset:0;z-index:3;background:var(--erde);transform:scaleX(1);transform-origin:right center;transition:transform .9s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--i,0) * 110ms + 300ms)}
.foto.zeigen.ist-da::after,.foto.zeigen.ist-da::before{transform:scaleX(0)}
.foto.zeigen img{transform:scale(1.22);transition:transform 1.6s var(--kurve);transition-delay:calc(var(--i,0) * 110ms + 300ms)}
.foto.zeigen.ist-da img{transform:scale(1)}
.foto.zeigen.ist-da:hover img{transform:scale(1.045)}
.unterstuetzen-foto.foto.zeigen{transform:rotate(3deg)}
.unterstuetzen-foto{margin-right:1.2rem}
[data-parallax]{will-change:transform}
.wort{display:inline-block;transform:translateY(.55em) skewY(6deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.4,.35,1),opacity .5s;transition-delay:calc(var(--w,0) * 70ms + 80ms)}
.woerter.ist-da .wort{transform:none;opacity:1}
.anker-gross.zeigen{transform:translateX(-90px) skewX(-14deg)}
.anker-gross.zeigen.ist-da{transform:none;transition:transform 1.1s cubic-bezier(.2,1.3,.35,1),opacity .6s}
.leistung.zeigen:nth-child(odd){transform:translateX(-60px) rotate(-2deg)}
.leistung.zeigen:nth-child(even){transform:translateX(60px) rotate(2deg)}
.leistung.zeigen.ist-da{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.leistung::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--kurve)}
.leistung:hover::before,.leistung.ist-da::before{transform:scaleX(1)}
.leistung.ist-da::before{transition-delay:calc(var(--i,0) * 110ms + 500ms)}
.logos li.zeigen{transform:scale(.7) rotate(-4deg)}
.logos li.zeigen.ist-da{transform:none;transition:transform .8s cubic-bezier(.2,1.5,.35,1),opacity .5s}
.datum.zeigen{transform:translateX(-40px) skewX(-18deg)}
.datum.zeigen.ist-da{transform:skewX(-8deg)}
.zeitstrahl{--fortschritt:0}
.zeitstrahl::after{content:"";position:absolute;left:.4rem;top:.4rem;bottom:.4rem;width:3px;margin-left:-.5px;background:var(--gelb);box-shadow:0 0 0 1px var(--erde);transform:scaleY(var(--fortschritt));transform-origin:top;z-index:1}
.zeitstrahl li::before{z-index:2}
.laufband-spur p{transform:skewX(var(--schraeg,0deg));transition:transform .3s}
.spritzer{position:fixed;z-index:400;width:var(--g,6px);height:var(--g,6px);border-radius:40% 60% 55% 45%;background:var(--farbe,#3B2A1C);pointer-events:none;transform:translate(-50%,-50%);animation:spritzen .75s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spritzen{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot));opacity:0}}
.knopf-gelb{background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0;animation:glanz 3.8s ease-in-out infinite}
@keyframes glanz{0%,70%{background-position:160% 0}100%{background-position:-60% 0}}
.held-nummer{animation:nummerAtmen 6s ease-in-out infinite alternate}
@keyframes nummerAtmen{from{-webkit-text-stroke-color:rgba(220,252,3,.35)}to{-webkit-text-stroke-color:rgba(220,252,3,.75)}}
.schwebe a{animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(220,252,3,.7),0 10px 24px -8px rgba(0,0,0,.5)}70%,100%{box-shadow:0 0 0 16px rgba(220,252,3,0),0 10px 24px -8px rgba(0,0,0,.5)}}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.seite-kopf{background:var(--erde);color:#fff;padding:8rem var(--rand) 3.5rem}
.seite-kopf h1{font-size:clamp(3rem, 2rem + 4vw, 5.5rem);max-width:var(--breit);margin:0 auto}
.recht{max-width:46rem;margin:0 auto;padding:3.5rem var(--rand) 5rem}
.recht h2{font-size:1.9rem;margin:2.4rem 0 .8rem}
.recht a{color:var(--oliv);text-underline-offset:3px}

/* ---------- Mittlere Breiten ---------- */
@media (max-width:1280px){
  .navi ul{gap:0}
  .navi a{padding:0 .55rem;font-size:.88rem}
}
@media (max-width:1140px){
  .menue-knopf{display:inline-flex;align-items:center}
  .navi{position:fixed;inset:0;background:var(--erde);display:none;padding:5.5rem var(--rand) 2rem;margin:0;overflow-y:auto}
  .navi.offen{display:block}
  .navi ul{flex-direction:column;gap:.2rem}
  .navi a{font-family:var(--display);font-size:2.4rem;font-weight:800;min-height:56px;padding:0;letter-spacing:0}
  .navi a::after{left:0;right:auto;width:3rem;bottom:.3rem}
  .kopf-knopf{display:none}
  .kopf .marke,.menue-knopf{position:relative;z-index:2}
}
@media (max-width:900px){
  .anker-gross,.fakten,.anker .gibt-zu{grid-column:1 / -1}
  .bildpaar{grid-column:1 / -1;max-width:36rem}
  .geschichte-text{grid-column:1 / -1}
  .kosten-text{grid-column:1 / -1}
  .kosten-foto{grid-column:3 / span 10;aspect-ratio:4 / 5;margin-top:0}
  .partner-kopf-links,.partner-kopf p{grid-column:1 / -1}
  .leistung:nth-child(n),.nicht-dabei{grid-column:1 / -1;margin-top:0}
  .leistung:nth-child(even){margin-left:clamp(0rem, -1rem + 6vw, 3rem)}
  .bericht-foto,.bericht.b2 .bericht-foto,.bericht.b3 .bericht-foto{grid-column:1 / -1;order:1}
  .bericht-text,.bericht.b2 .bericht-text,.bericht.b3 .bericht-text{grid-column:1 / -1;order:2}
  .bericht-foto{aspect-ratio:4 / 3}
  .termine-hinter{width:100%;opacity:.35}
  .termine::after{background:rgba(21,17,13,.8)}
  .termine-text,.saison{grid-column:1 / -1}
  .sponsoren-links,.logos{grid-column:1 / -1}
  .ablauf-foto{grid-column:1 / span 7;aspect-ratio:4 / 5}
  .ablauf-rechts{grid-column:1 / -1}
  .unterstuetzen-text{grid-column:1 / -1}
  .unterstuetzen-foto{grid-column:4 / span 6;margin-top:1rem}
  .fragen-kopf,.fragen-liste{grid-column:1 / -1}
  .fragen-foto{display:none}
  .kontakt-text,.kontakt-foto{grid-column:1 / -1}
  .kontakt-foto{order:0}
  .fuss{padding-bottom:6.5rem}
}
@media (max-width:560px){
  .held{padding-top:6.5rem}
  .held-schleier{background:linear-gradient(0deg,rgba(21,17,13,.95) 0%,rgba(21,17,13,.82) 48%,rgba(21,17,13,.45) 100%)}
  .held-nummer{top:8%;right:-1rem}
  .held-foto img{object-position:58% 30%}
  .knopf{width:100%;justify-content:space-between}
  .fakten{grid-template-columns:minmax(0,1fr)}
  .fakten li:nth-child(n){margin-top:0}
  .posten{grid-template-columns:minmax(0,1fr)}
  .bildpaar{height:clamp(22rem, 12rem + 40vw, 30rem);margin-top:0}
  .bildpaar .foto-a{width:82%}
  .bildpaar .foto-b{width:72%}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos li:nth-child(n){grid-column:span 1;margin-top:0;min-height:7rem}
  .logos li:nth-child(4),.logos li.frei{grid-column:1 / -1}
  .saison li{grid-template-columns:3.6rem minmax(0,1fr)}
  .saison span{grid-column:2;text-align:left}
  .schritt{grid-template-columns:3.4rem minmax(0,1fr)}
  .schritt:nth-child(n){margin-left:0}
  .unterstuetzen-foto{grid-column:2 / span 10}
  .dank blockquote{margin:-2.5rem 0 0 .8rem}
  .foto-hinweis{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-property:opacity!important;transition-duration:.4s!important}
  .zeigen,.zeigen.von-links,.zeigen.von-rechts,.zeigen.kippen-ein{transform:none!important}
  .auftritt{transform:none!important}
  .held-foto img{transform:none!important;scale:1!important}
  .laufband-spur{animation:none!important}
  .knopf,.leistung{transform:none!important}
  .icon *{stroke-dashoffset:0!important}
  .foto.zeigen::after,.foto.zeigen::before{display:none}
  .foto.zeigen img,.wort,.anker-gross.zeigen,.leistung.zeigen,.logos li.zeigen,.datum.zeigen,[data-parallax]{transform:none!important}
  .wort{opacity:1}
  .knopf-gelb,.held-nummer,.schwebe a{animation:none!important}
  .zeitstrahl::after{display:none}
}