/* MercOldies — Kühlergrill-Lamellen
   Gestaltung: waagerechte Chromlamellen mit Mittelsteg gliedern die Seite.
   Handgeschrieben, keine fremden Bibliotheken, alles lokal. */

:root{
  --elfenbein:#F3EDE1;
  --elfenbein-tief:#E5DCC9;
  --nachtblau:#142438;
  --nachtblau-tief:#0C1826;
  --chrom-hell:#F2F5F8;
  --chrom:#BFC6CE;
  --chrom-dunkel:#7C8794;
  --signalrot:#9E2018;
  --signalrot-hell:#E8776C;
  --tinte:#14181D;
  --grau:#5A626C;
  --grau-hell:#B9BFC7;
  --breite:1120px;
  --fuge:clamp(1rem,3vw,2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;
  background:var(--elfenbein);
  color:var(--tinte);
  font-family:"Asap",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,0.97rem + 0.2vw,1.075rem);
  line-height:1.62;
  overflow-x:hidden;
}

/* ---------- Schriften ---------- */
@font-face{font-family:"Antonio";src:url("schriften/antonio-600-latin.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Antonio";src:url("schriften/antonio-600-latin-ext.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Asap";src:url("schriften/asap-400-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Asap";src:url("schriften/asap-400-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fira Mono";src:url("schriften/fira-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Mono";src:url("schriften/fira-mono-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fira Mono";src:url("schriften/fira-mono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Mono";src:url("schriften/fira-mono-500-latin-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

h1,h2,h3,h4{font-family:"Antonio","Arial Narrow",sans-serif;font-weight:600;line-height:1.06;margin:0 0 .55em;text-transform:uppercase;letter-spacing:.055em}
h1{font-size:clamp(2rem,1.3rem + 3.4vw,3.6rem)}
h2{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.4rem)}
h3{font-size:clamp(1.18rem,1rem + .9vw,1.5rem)}
h4{font-size:1.02rem;letter-spacing:.13em}
p{margin:0 0 1em}
a{color:var(--signalrot);text-underline-offset:.16em;text-decoration-thickness:.08em}
a:hover{color:var(--nachtblau)}
.mono,.preis,.tnr{font-family:"Fira Mono",ui-monospace,Menlo,Consolas,monospace}
strong{font-weight:700}
img{max-width:100%;height:auto}

:focus-visible{outline:3px solid var(--signalrot);outline-offset:2px}
.dunkel :focus-visible{outline-color:var(--signalrot-hell)}

.springen{position:absolute;left:-9999px;top:0;background:var(--signalrot);color:#fff;padding:.7rem 1.1rem;z-index:100}
.springen:focus{left:0}

/* ---------- Kühlergrill-Band ---------- */
.grill{
  height:30px;flex:none;position:relative;overflow:hidden;
  background-color:var(--nachtblau);
  background-image:repeating-linear-gradient(to bottom,
    var(--chrom-hell) 0 2px,
    var(--chrom) 2px 5px,
    var(--chrom-dunkel) 5px 7px,
    rgba(0,0,0,0) 7px 11px);
}
.grill::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:9px;transform:translateX(-50%);
  background:linear-gradient(to right,var(--chrom-dunkel) 0,var(--chrom-hell) 40%,var(--chrom) 62%,var(--chrom-dunkel) 100%);
}
.grill--schmal{height:18px}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;background:var(--nachtblau);color:var(--elfenbein);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.kopf__reihe{max-width:var(--breite);margin:0 auto;padding:.55rem var(--fuge);display:flex;align-items:center;gap:1rem}
.marke{display:flex;align-items:center;gap:.65rem;color:var(--elfenbein);text-decoration:none;font-family:"Antonio",sans-serif;font-size:1.42rem;letter-spacing:.15em;text-transform:uppercase;min-height:44px}
.marke:hover{color:#fff}
.marke__emblem{width:34px;height:34px;flex:none}
.marke__zusatz{display:block;font-family:"Fira Mono",monospace;font-size:.6rem;letter-spacing:.19em;color:var(--chrom);text-transform:uppercase;line-height:1.2;margin-top:.15rem}
.kopf__schalter{margin-left:auto;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:none;border:1px solid var(--chrom-dunkel);color:var(--elfenbein);font:inherit;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;cursor:pointer}
.kopf__schalter:hover{border-color:var(--chrom)}
.kopf__balken{display:block;width:20px;height:11px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.kopf__balken::after{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-1px;height:2px;background:currentColor}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.15rem;margin:0;padding:0}
.nav a{display:flex;align-items:center;min-height:44px;padding:.2rem .72rem;color:var(--elfenbein);text-decoration:none;font-size:.87rem;letter-spacing:.09em;text-transform:uppercase;font-family:"Antonio",sans-serif}
.nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--signalrot-hell)}
@media (max-width:899px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,320px);background:var(--nachtblau-tief);padding:4.6rem 1rem 2rem;transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;box-shadow:-8px 0 24px rgba(0,0,0,.4)}
  .nav[data-offen="ja"]{transform:translateX(0)}
  .nav ul{flex-direction:column;gap:0}
  .nav a{border-bottom:1px solid rgba(255,255,255,.12);font-size:1rem;padding:.6rem .4rem}
}
@media (min-width:900px){ .kopf__schalter{display:none} }

/* ---------- Bahnen ---------- */
.bahn{position:relative}
.bahn__inhalt{max-width:var(--breite);margin:0 auto;padding:clamp(2.2rem,5vw,3.6rem) var(--fuge)}
.bahn--tief{background:var(--elfenbein-tief)}
.bahn--dunkel,.dunkel{background:var(--nachtblau);color:var(--elfenbein)}
.dunkel a{color:var(--signalrot-hell)}
.dunkel a.knopf{color:#fff}
.dunkel a.knopf--rand{color:var(--elfenbein)}
.dunkel a.knopf--chrom{color:var(--nachtblau)}
.dunkel a:hover{color:#fff}
.dunkel .neben{color:var(--grau-hell)}
.bahn__marke{font-family:"Fira Mono",monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--signalrot);margin:0 0 .8rem}
.dunkel .bahn__marke{color:var(--signalrot-hell)}
.neben{color:var(--grau);font-size:.9rem}
.fuehrung{max-width:64ch}
.gross{font-size:clamp(1.05rem,1rem + .5vw,1.25rem)}

/* ---------- Einstieg ---------- */
.einstieg{background:var(--nachtblau);color:var(--elfenbein);position:relative}
.einstieg__inhalt{max-width:var(--breite);margin:0 auto;padding:clamp(2.6rem,7vw,5rem) var(--fuge) clamp(2rem,5vw,3.4rem)}
.einstieg h1{margin-bottom:.35em}
.einstieg__claim{font-family:"Fira Mono",monospace;font-size:clamp(.82rem,.78rem + .3vw,.98rem);letter-spacing:.06em;color:var(--chrom);max-width:52ch}
.einstieg__gitter{display:grid;gap:1.8rem;align-items:center}
@media (min-width:900px){.einstieg__gitter{grid-template-columns:1fr 460px;gap:2.6rem}}
.einstieg__bild{margin:0;contain:layout}
.einstieg__bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--chrom-dunkel);box-shadow:inset 0 0 0 3px var(--nachtblau),0 0 0 3px var(--nachtblau)}
.einstieg__bild figcaption{margin-top:.6rem;font-size:.7rem;letter-spacing:.08em;color:var(--chrom);text-transform:uppercase}
.kennzahlen{list-style:none;margin:2.2rem 0 0;padding:0;grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:rgba(255,255,255,.16)}
.kennzahlen li{background:var(--nachtblau);padding:1rem .9rem}
.kennzahlen b{display:block;font-family:"Antonio",sans-serif;font-size:1.85rem;font-weight:600;letter-spacing:.04em;color:#fff}
.kennzahlen span{font-family:"Fira Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chrom)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.55rem 1.3rem;background:var(--signalrot);color:#fff;text-decoration:none;font-family:"Antonio",sans-serif;font-size:1rem;letter-spacing:.11em;text-transform:uppercase;border:0;cursor:pointer}
.knopf:hover{background:#7d1811;color:#fff}
.knopf--chrom{background:linear-gradient(to bottom,var(--chrom-hell),var(--chrom));color:var(--nachtblau);border:1px solid var(--chrom-dunkel)}
.knopf--chrom:hover{background:var(--chrom-hell);color:var(--nachtblau)}
.knopf--rand{background:none;border:1px solid currentColor;color:inherit}
.knopf--rand:hover{background:rgba(0,0,0,.06);color:inherit}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* ---------- Baureihen-Leiste ---------- */
.reihen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.7rem}
.reihen a{display:block;text-decoration:none;color:var(--tinte);background:var(--elfenbein);border:1px solid var(--chrom);border-top:3px solid var(--nachtblau);padding:.75rem .85rem;min-height:44px}
.reihen a:hover{border-top-color:var(--signalrot);background:#fff}
.reihen b{display:block;font-family:"Antonio",sans-serif;font-size:1.32rem;font-weight:600;letter-spacing:.07em}
.reihen span{font-family:"Fira Mono",monospace;font-size:.7rem;letter-spacing:.1em;color:var(--grau)}

/* ---------- Artikelliste (Teileliste) ---------- */
.teileliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--chrom)}
.teil{border-bottom:1px solid var(--chrom)}
.teil__link{display:grid;grid-template-columns:96px 1fr;gap:.9rem;padding:.85rem 0;text-decoration:none;color:inherit;align-items:start}
.teil__link:hover{background:rgba(255,255,255,.55);color:inherit}
.teil__bild{position:relative;background:#fff;border:1px solid var(--chrom-dunkel);box-shadow:inset 0 0 0 2px #fff;aspect-ratio:4/3;overflow:hidden}
.teil__bild img{width:100%;height:100%;object-fit:cover;display:block}
.teil__text{min-width:0}
.teil__name{font-weight:500;margin:0 0 .3rem;line-height:1.35;font-size:.98rem}
.teil__daten{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-family:"Fira Mono",monospace;font-size:.72rem;letter-spacing:.04em;color:var(--grau)}
.teil__preis{font-family:"Fira Mono",monospace;font-weight:500;font-size:1.05rem;color:var(--signalrot);white-space:nowrap}
@media (min-width:700px){
  .teil__link{grid-template-columns:170px 1fr auto;gap:1.3rem;align-items:center;padding:1rem 0}
  .teil__preis{text-align:right;font-size:1.2rem}
  .teil__name{font-size:1.05rem}
}
.marker{display:inline-block;font-family:"Fira Mono",monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;padding:.15rem .45rem;border:1px solid var(--chrom-dunkel);color:var(--grau);background:#fff}
.marker--rot{border-color:var(--signalrot);color:var(--signalrot)}

/* ---------- Filterleiste ---------- */
.filter{background:var(--elfenbein-tief);border:1px solid var(--chrom);padding:1rem;display:grid;gap:.85rem}
@media (min-width:760px){.filter{grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:end}}
.feld{display:flex;flex-direction:column;gap:.28rem}
.feld label,.feldname{font-family:"Fira Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.feld input,.feld select,.feld textarea{font:inherit;min-height:46px;padding:.5rem .65rem;border:1px solid var(--chrom-dunkel);background:#fff;color:var(--tinte);border-radius:0;width:100%}
.feld textarea{min-height:130px;line-height:1.5}
.trefferzeile{display:flex;flex-wrap:wrap;gap:.8rem;align-items:baseline;margin:1.2rem 0 .4rem;font-family:"Fira Mono",monospace;font-size:.8rem;color:var(--grau)}

/* ---------- Artikelseite ---------- */
.artikel{display:grid;gap:1.8rem}
@media (min-width:860px){.artikel{grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start}}
.galerie__haupt{background:#fff;border:1px solid var(--chrom-dunkel);box-shadow:inset 0 0 0 3px #fff;aspect-ratio:4/3;overflow:hidden}
.galerie__haupt img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.galerie__reihe{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0;padding:0}
.galerie__reihe button{padding:0;border:1px solid var(--chrom-dunkel);background:#fff;cursor:pointer;width:74px;height:56px;overflow:hidden}
.galerie__reihe button[aria-current="true"]{border-color:var(--signalrot);box-shadow:0 0 0 2px rgba(158,32,24,.25)}
.galerie__reihe img{width:100%;height:100%;object-fit:cover;display:block}
.datenblatt{list-style:none;margin:1.4rem 0;padding:0;border-top:1px solid var(--chrom)}
.datenblatt li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--chrom);font-size:.95rem}
.datenblatt dt,.datenblatt .schl{font-family:"Fira Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);padding-top:.18rem}
.datenblatt .wert{text-align:right;font-family:"Fira Mono",monospace}
.preisfeld{background:var(--nachtblau);color:var(--elfenbein);padding:1.1rem 1.2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem}
.preisfeld b{font-family:"Fira Mono",monospace;font-weight:500;font-size:2rem;color:#fff;line-height:1}
.preisfeld span{font-size:.82rem;color:var(--chrom)}
.tnr-kopie{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .7rem;background:#fff;border:1px solid var(--chrom-dunkel);font-family:"Fira Mono",monospace;font-size:.9rem;cursor:pointer;color:var(--tinte)}
.tnr-kopie:hover{border-color:var(--nachtblau)}
.hinweis{background:var(--elfenbein-tief);border-left:4px solid var(--signalrot);padding:.9rem 1rem;font-size:.92rem}
.dunkel .hinweis{background:rgba(255,255,255,.07);border-left-color:var(--signalrot-hell)}

/* ---------- Textseiten ---------- */
.text{max-width:74ch}
.text h2{margin-top:2rem}
.text h3{margin-top:1.5rem;text-transform:none;letter-spacing:.02em;font-size:1.15rem}
.text ul,.text ol{padding-left:1.2rem}
.text li{margin-bottom:.35rem}
.spalten{columns:2;column-gap:2rem;padding-left:1.1rem}
@media (max-width:560px){.spalten{columns:1}}
.krume{font-family:"Fira Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--grau);margin:0 0 .9rem}
.krume a{color:var(--grau)}
.krume a:hover{color:var(--signalrot)}

/* ---------- Karte (Zwei-Klick) ---------- */
.karte{border:1px solid var(--chrom-dunkel);background:var(--elfenbein-tief);padding:1.1rem;text-align:center}
.karte svg{max-width:100%;height:auto}
.karte__hinweis{font-size:.88rem;color:var(--grau);margin:.7rem auto 0;max-width:52ch}

/* ---------- Fuß ---------- */
.fuss{background:var(--nachtblau-tief);color:var(--chrom);font-size:.92rem}
.fuss__inhalt{max-width:var(--breite);margin:0 auto;padding:clamp(2rem,4vw,3rem) var(--fuge);display:grid;gap:1.8rem}
@media (min-width:760px){.fuss__inhalt{grid-template-columns:1.2fr 1fr 1fr}}
.fuss h2{font-size:1rem;letter-spacing:.16em;color:var(--elfenbein)}
.fuss a{color:var(--elfenbein);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.5rem}
.fuss__unten{border-top:1px solid rgba(255,255,255,.15);padding:1rem var(--fuge);text-align:center;font-size:.8rem;font-family:"Fira Mono",monospace;letter-spacing:.06em}

.gitter{display:grid;gap:1.4rem}
@media (min-width:760px){.gitter--2{grid-template-columns:1fr 1fr}.gitter--3{grid-template-columns:repeat(3,1fr)}}
.block{background:var(--elfenbein);border:1px solid var(--chrom);padding:1.1rem 1.2rem}
.dunkel .block{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.block h3{margin-bottom:.4rem}
.versteckt{display:none!important}
.nurleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}