/* GASLOCK – Prototyp 0.1 (Stufe C). Designsprache „Öl & Metall“. Seit 20.10.2026 durchgehend dunkel (Dan: „einheitlich in
   einem dunklen edlen Design … nicht hin und wieder ein komplett heller Abschnitt“): die hellen Tokens tragen dunkle Werte
   wie die Entscheidungsfläche der Produktseite (tankverschluss.css .td .hell); Produktfotos auf Weiß behalten ihren weißen
   Bildkasten, bis die Kühler-Seiten im neuen System gebaut sind.
   Nur eigene Schriften (SIL OFL, selbst gehostet), keine Fremdbibliotheken. */
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url(../fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url(../fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --schwarz:#0F1113;--grafit:#1A1D21;--stahlkante:#2E333A;--gussgrau:#9BA3AC;--alu:#E4E7EA;
  --blank:#1D2125;--alu-hell:#15181B;--tinte:#E4E7EA;--werkzeuggrau:#9BA3AC;--linie-hell:#30363D;
  /* G-28: eine Quelle für das Grün; „amber“ ist nur noch Übergangsalias für die Altseiten (später löschen) */
  --gruen:#48A04C;--gruen-text-hell:#5BB45F;--gruen-tinte:#15181B;
  --amber:var(--gruen);--amber-dunkel:var(--gruen-text-hell);--akzent-text:#15181B;--akzent-hover:#5BB45F;--notiz:#F2D24B;--tuerkis:#00747A;--fehler:#B0281C;--fehler-hell:#FF8A7A;
  --text:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --titel:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --label:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  --breite:1200px;--rand:clamp(16px,4vw,40px);--radius:6px;
  --schnell:180ms;--ruhig:600ms;--kurve:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font:400 17px/1.55 var(--text);color:var(--tinte);background:var(--schwarz);color-scheme:dark}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:var(--rand);top:-60px;z-index:100;background:var(--amber);color:var(--akzent-text);padding:10px 14px;font-weight:600}
.sprung:focus{top:8px}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}

/* Typografie */
h1,h2,h3{font-family:var(--titel);font-weight:700;line-height:1.02;letter-spacing:.005em;margin:0 0 .4em}
h1{font-size:clamp(38px,7.2vw,76px)}
h2{font-size:clamp(30px,4.6vw,48px)}
h3{font-size:clamp(22px,2.6vw,28px);font-weight:600}
p{margin:0 0 1em}
.label{font:600 13px/1.2 var(--label);letter-spacing:.16em;text-transform:uppercase}
.gravur{font:500 14px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase}

/* Prototyp-Hinweis + Platzhalter */
.proto{background:var(--notiz);color:#15181B;font:600 12px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px var(--rand)}
.platzhalter{position:relative;display:grid;place-items:center;min-height:220px;background:repeating-linear-gradient(135deg,var(--grafit) 0 14px,#16191c 14px 28px);color:var(--gussgrau);border:1px dashed var(--stahlkante);border-radius:var(--radius);text-align:center;padding:24px}
.platzhalter b{display:block;color:var(--alu);font:600 15px/1.3 var(--label);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.marke-platzhalter{display:inline-block;background:var(--notiz);color:#15181B;font:600 11px/1 var(--label);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:3px;vertical-align:middle}

/* Kopf */
.leiste{background:var(--schwarz);color:var(--gussgrau);font:500 13px/1.2 var(--label);letter-spacing:.06em}
.leiste .innen{display:flex;gap:18px;justify-content:space-between;align-items:center;padding-block:8px;flex-wrap:wrap}
.leiste a{color:var(--alu);text-decoration-color:var(--stahlkante);text-underline-offset:3px}
.leiste a:hover{text-decoration-color:var(--amber)}
@media (max-width:599px){.leiste .tel{display:none}}
.kopf{position:sticky;top:0;z-index:50;background:rgba(15,17,19,.94);backdrop-filter:saturate(1.2) blur(8px);color:var(--alu);border-bottom:1px solid var(--stahlkante);transition:transform var(--ruhig) var(--kurve)}
.kopf.weg{transform:translateY(-100%)}
.kopf .innen{display:flex;align-items:center;gap:20px;height:64px}
.logo img{height:30px;width:auto}
.nav{display:none;margin-left:auto}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:10px 12px;text-decoration:none;font:600 15px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--alu);border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--amber)}
.nav .trenner{width:1px;background:var(--stahlkante);margin:8px 10px}
.werkzeuge{display:flex;gap:4px;margin-left:auto}
.nav+.werkzeuge{margin-left:8px}
.knopf-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:none;border:0;color:var(--alu);cursor:pointer;position:relative;text-decoration:none}
.knopf-icon:hover{background:var(--grafit)}
.knopf-icon svg{width:22px;height:22px}
.zaehler{position:absolute;top:4px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--amber);color:var(--akzent-text);font:600 11px/18px var(--label);text-align:center;padding:0 4px}
.zaehler:empty{display:none}
.menue-knopf{font:600 14px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--stahlkante);color:var(--alu);border-radius:22px;padding:0 14px;height:40px;cursor:pointer}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--rand) 12px;scrollbar-width:none}
.chips a{flex:0 0 auto;padding:8px 14px;border:1px solid var(--stahlkante);border-radius:20px;text-decoration:none;font:600 13px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--alu)}
.schublade{display:none;border-top:1px solid var(--stahlkante);padding:8px var(--rand) 18px}
.schublade.offen{display:block}
.schublade a{display:block;padding:12px 0;border-bottom:1px solid var(--stahlkante);text-decoration:none;font:600 18px/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase}
@media (min-width:1000px){.nav{display:block}.menue-knopf,.chips,.schublade{display:none!important}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--radius);font:600 16px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform var(--schnell) var(--kurve),background var(--schnell)}
.knopf:active{transform:translateY(1px)}
.knopf-haupt{background:var(--amber);color:var(--akzent-text)}
.knopf-haupt:hover{background:var(--akzent-hover)}
.knopf-neben{border-color:var(--stahlkante);color:var(--alu);background:transparent}
.knopf-neben:hover{border-color:var(--gussgrau)}
.hell .knopf-neben{border-color:var(--werkzeuggrau);color:var(--tinte)}

/* Bereiche */
.dunkel{background:var(--schwarz);color:var(--alu)}
.dunkel p{color:#c9ced3}
.dunkel .label{color:var(--amber)}
.hell{background:var(--alu-hell);color:var(--tinte)}
.hell .label{color:var(--amber-dunkel)}
.abschnitt{padding:clamp(56px,9vw,112px) 0}
.haarlinie{border:0;border-top:1px solid var(--stahlkante);margin:0}

/* Hero mit Lichtband */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 70% 40%,#22262b 0,var(--schwarz) 62%)}
.hero .innen{display:grid;gap:28px;padding-block:clamp(36px,7vw,96px);align-items:center}
@media (min-width:900px){.hero .innen{grid-template-columns:1.05fr 1fr}}
.hero h1{color:#f3f4f5}
.hero .unterzeile{font-size:clamp(18px,2vw,21px);max-width:34em}
.hero .aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero-bild{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.hero-bild::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,236,200,.16) 49%,rgba(255,255,255,.34) 50%,rgba(255,236,200,.16) 51%,transparent 58%);mix-blend-mode:screen;transform:translateX(-60%);animation:lichtband 7s var(--kurve) 1.2s infinite;pointer-events:none}
.hero.pausiert .hero-bild::after{animation-play-state:paused}
@keyframes lichtband{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
.pause{position:absolute;right:12px;bottom:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(228,231,234,.4);background:rgba(15,17,19,.6);color:var(--alu);cursor:pointer;display:grid;place-items:center}
.vertrauen{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--stahlkante);border-top:1px solid var(--stahlkante)}
@media (min-width:900px){.vertrauen{grid-template-columns:repeat(4,1fr)}}
.vertrauen li{list-style:none;background:var(--schwarz);padding:16px var(--rand);font:500 15px/1.3 var(--label);letter-spacing:.04em;color:var(--alu)}
.vertrauen strong{display:block;color:var(--amber);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin-bottom:4px}
.vertrauen{margin:0;padding:0}

/* Karten mit Lichtkante (nur Maus) */
.raster{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
@media (max-width:559px){.raster{grid-template-columns:1fr 1fr;gap:10px}.karte h3{font-size:19px}.karte .text{padding:12px}.karte .klein{font-size:13px}.karte .preis{font-size:16px}.raster .kasten{grid-column:1/-1}}
.karte{position:relative;display:flex;flex-direction:column;background:var(--blank);border:1px solid var(--linie-hell);border-radius:var(--radius);text-decoration:none;color:var(--tinte);overflow:hidden;transition:transform var(--ruhig) var(--kurve),box-shadow var(--ruhig)}
.karte:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(15,17,19,.45)}
.karte .bild{aspect-ratio:1;background:#fff;display:grid;place-items:center;overflow:hidden}
.karte .bild img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--kurve)}
.karte:hover .bild img{transform:scale(1.04)}
.karte .text{padding:16px 18px 18px;display:grid;gap:6px}
.karte h3{font-size:23px;margin:0}
.karte .preis{font:600 18px/1 var(--text)}
.karte .klein{font-size:14px;color:var(--werkzeuggrau)}
@media (hover:hover) and (pointer:fine){
  .metall::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--ruhig);background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 60%);mix-blend-mode:soft-light}
  .metall:hover::before{opacity:1}
}
.farben{display:flex;gap:6px}
.farbe{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--linie-hell)}
.f-rot{background:conic-gradient(#1b1b1b 0 50%,#b3202a 0)}
.f-schwarz{background:#1b1b1b}
.f-gruen{background:conic-gradient(#b9bec4 0 50%,#5c9a2e 0)}
.f-titan{background:conic-gradient(#1b1b1b 0 50%,#8d8f92 0)}

/* Belege */
.belege{display:grid;gap:1px;background:var(--stahlkante);margin-top:28px;border:1px solid var(--stahlkante)}
@media (min-width:800px){.belege{grid-template-columns:repeat(3,1fr)}}
.beleg{background:var(--schwarz);padding:28px}
.beleg .zahl{font:700 clamp(44px,6vw,64px)/1 var(--titel);color:var(--alu)}
.beleg p{margin:.6em 0 0}

/* Teaser Werkstatt */
.teaser{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.teaser{grid-template-columns:1.2fr 1fr}}
.teaser img{border-radius:var(--radius)}

/* B2B */
.b2b{display:grid;gap:18px}
@media (min-width:800px){.b2b{grid-template-columns:1fr 1fr}}
.b2b a{display:block;padding:28px;border:1px solid var(--linie-hell);border-radius:var(--radius);text-decoration:none;background:var(--blank)}
.b2b a:hover{border-color:var(--werkzeuggrau)}
.b2b h3{margin-bottom:.3em}

/* Fuß */
.fuss{background:var(--schwarz);color:var(--gussgrau);font-size:15px;padding:48px 0 120px}
.fuss .innen{display:grid;gap:28px}
@media (min-width:800px){.fuss .innen{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fuss a{color:var(--alu);text-decoration:none}
.fuss a:hover{text-decoration:underline;text-decoration-color:var(--amber)}
.fuss .label{color:var(--gussgrau);margin-bottom:10px}
.fuss .f-shops{grid-column:1/-1;margin:0;max-width:70ch}

/* Einwilligung (unten, nicht blockierend) */
.einwilligung{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:760px;margin:0 auto;background:var(--grafit);color:var(--alu);border:1px solid var(--stahlkante);border-radius:var(--radius);padding:16px;display:grid;gap:12px;box-shadow:0 20px 50px -20px #000}
.einwilligung[hidden]{display:none}
.einwilligung p{margin:0;font-size:14.5px;color:#c9ced3}
.einwilligung .knoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.einwilligung button{min-height:44px;border-radius:var(--radius);border:1px solid var(--gussgrau);background:transparent;color:var(--alu);font:600 13px/1.1 var(--label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.einwilligung button:hover{border-color:var(--amber)}

/* Kategorie/Produkt (hell) */
.brotkrumen{font:500 14px/1.2 var(--label);letter-spacing:.06em;color:var(--werkzeuggrau);padding:18px 0 0}
.brotkrumen a{color:var(--werkzeuggrau)}
.produkt{display:grid;gap:clamp(20px,4vw,48px);padding:18px 0 64px}
@media (min-width:960px){.produkt{grid-template-columns:1.1fr 1fr}.galerie{position:sticky;top:84px;align-self:start}}
.galerie .haupt{position:relative;background:#fff;border:1px solid var(--linie-hell);border-radius:var(--radius);overflow:hidden;aspect-ratio:1}
.galerie .haupt img{width:100%;height:100%;object-fit:contain;transition:opacity var(--ruhig) var(--kurve)}
.galerie .haupt img.wechselt{opacity:0}
.daumen{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.daumen button{flex:0 0 72px;height:72px;padding:0;border:1px solid var(--linie-hell);border-radius:4px;background:#fff;cursor:pointer;overflow:hidden}
.daumen button[aria-current="true"]{border:2px solid var(--tinte)}
.daumen img{width:100%;height:100%;object-fit:cover}
.kauf h1{font-size:clamp(32px,4.4vw,48px)}
.preiszeile{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.preiszeile .preis{font:600 32px/1 var(--text)}
.preiszeile small{color:var(--werkzeuggrau);font-size:14px}
.schritt{border-top:1px solid var(--linie-hell);padding:16px 0}
.schritt legend{padding:0;margin-bottom:10px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{position:relative}
.wahl input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wahl span{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--werkzeuggrau);border-radius:var(--radius);background:var(--blank);font:600 15px/1 var(--label);letter-spacing:.06em}
.wahl input:checked+span{border:2px solid var(--tinte);background:#262B31;box-shadow:inset 0 -3px 0 var(--amber)}
.wahl input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.wahl input:disabled+span{opacity:.4;text-decoration:line-through}
.hilfe{font-size:15px;color:var(--werkzeuggrau)}
.hilfe summary{cursor:pointer;color:var(--tinte);text-decoration:underline;text-underline-offset:3px}
.lager{display:inline-flex;align-items:center;gap:8px;color:var(--tuerkis);font-weight:600}
.lager::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tuerkis)}
.kaufen{display:grid;gap:10px;margin:14px 0}
.vertrauen-klein{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:15px}
.vertrauen-klein li::before{content:"—";color:var(--amber-dunkel);margin-right:8px}
.kasten{background:var(--blank);border:1px solid var(--linie-hell);border-radius:var(--radius);padding:18px;margin:18px 0}
.warnung{border-left:4px solid var(--fehler-hell);background:var(--blank);padding:14px 16px;margin:18px 0}
.daten{width:100%;border-collapse:collapse;font-size:15.5px}
.daten th,.daten td{text-align:left;padding:10px 0;border-bottom:1px solid var(--linie-hell);vertical-align:top}
.daten th{font:600 13px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--werkzeuggrau);width:42%;padding-right:12px}
.kaufleiste{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(246,247,248,.97);border-top:1px solid var(--linie-hell);padding:10px var(--rand);display:flex;gap:12px;align-items:center;justify-content:space-between;transform:translateY(110%);transition:transform var(--ruhig) var(--kurve)}
.kaufleiste.zeigen{transform:none}
.kaufleiste .knopf{min-height:46px;padding:0 18px}
@media (min-width:960px){.kaufleiste{display:none}}
.mitteilung{position:fixed;left:50%;top:84px;z-index:80;transform:translate(-50%,-20px);opacity:0;background:var(--grafit);color:var(--alu);border:1px solid var(--stahlkante);padding:12px 18px;border-radius:var(--radius);transition:opacity var(--schnell),transform var(--schnell);pointer-events:none}
.mitteilung.zeigen{opacity:1;transform:translate(-50%,0)}

/* Werkstatt: Fortschrittslinie + Explosionsansicht */
.kette{position:relative;display:grid;gap:56px;padding-left:34px}
.kette::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--stahlkante)}
.kette::after{content:"";position:absolute;left:9px;top:6px;width:2px;height:calc(var(--fortschritt,0) * (100% - 12px));background:var(--amber)}
.glied{position:relative;display:grid;gap:18px}
@media (min-width:900px){.glied{grid-template-columns:1fr 1.15fr;align-items:center}}
.glied::before{content:attr(data-nr);position:absolute;left:-34px;top:0;width:20px;height:20px;border-radius:50%;background:var(--schwarz);border:2px solid var(--amber);color:var(--amber);font:700 11px/16px var(--titel);text-align:center}
.ort{display:inline-block;margin-bottom:8px;padding:4px 8px;border:1px solid var(--stahlkante);border-radius:3px;font:600 12px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--gussgrau)}
.ort.iserlohn{border-color:var(--amber);color:var(--amber)}
.explosion{position:relative;margin:0}
.explosion img{border-radius:var(--radius)}
.explosion figcaption{font-size:14px;color:var(--gussgrau);margin-top:8px}
.anmerkung{position:absolute;font:600 12px/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--alu);background:rgba(15,17,19,.75);border:1px solid var(--amber);padding:6px 8px;border-radius:3px}

/* Bewegung: Einblenden beim Scrollen – nur wenn erwünscht */
@media (prefers-reduced-motion:no-preference){
  .js .zeige{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--kurve),transform 700ms var(--kurve)}
  .js .zeige.sichtbar{opacity:1;transform:none}
  @supports (animation-timeline:view()){
    .explosion img{animation:auseinander linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
    @keyframes auseinander{from{transform:scale(.92);filter:brightness(.8)}to{transform:none;filter:none}}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pause{display:none}
}

/* Testvariante Akzent Rot (?akzent=rot) */
:root.akzent-rot{--amber:#E0242C;--amber-dunkel:#B0281C;--akzent-text:#fff;--akzent-hover:#EA4A50}