/* Farbwelt des Bereichs — im Layout je Katalog überschrieben. */
:root{
  --bg:#F0E7DA; --panel:#E0D3BE; --soft:#F7F1E7;
  --ink:#221A12; --mute:#7C6C58; --accent:#A8442A;
  --line:rgba(34,26,18,.16);
  --breit:1440px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

.bahn{max-width:var(--breit); margin:0 auto}
.serif{font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-.02em; line-height:.95}
.schmal{font-family:'Archivo Narrow',sans-serif}
.kicker{
  font-family:'Archivo Narrow',sans-serif; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
}
.zahl{font-variant-numeric:tabular-nums}
.mute{color:var(--mute)}

/* ------------------------------- Kopf -------------------------------- */
.kopf{
  position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.kopf-inner{
  display:flex; align-items:center; gap:20px; justify-content:space-between;
  padding:16px clamp(16px,3vw,34px);
}
.kopf a.marke{display:flex; align-items:center; gap:12px}
.kopf img{height:34px; width:auto}
.korb-knopf{
  border:1px solid var(--line); background:transparent; border-radius:100px;
  padding:10px 18px; cursor:pointer; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;
  transition:background .25s,color .25s;
}
.korb-knopf:hover{background:var(--ink); color:var(--bg)}
.korb-zahl{
  background:var(--accent); color:#fff; border-radius:100px; min-width:20px;
  height:20px; display:inline-grid; place-items:center; font-size:11px; padding:0 6px;
}

/* ----------------------------- Titelseite ----------------------------- */
.titel{position:relative; padding:clamp(22px,3.2vw,40px) clamp(16px,3vw,34px)}
.titel-raster{display:grid; grid-template-columns:1fr; gap:28px; align-items:center}
@media(min-width:900px){.titel-raster{grid-template-columns:1.05fr .95fr}}
.titel h1{margin:12px 0 0; font-size:clamp(34px,5.2vw,64px); line-height:1.04}
.titel h1 em{font-style:italic; color:var(--accent)}
.titel .strich{height:1px; background:var(--ink); margin:18px 0 16px}
.titel p{margin:0; max-width:54ch; font-size:15px; line-height:1.75; color:var(--mute)}
/*
 * Der Aufmacher war in 4/5 so hoch, dass das Sortiment unter der Falz lag.
 * Flacheres Format plus Deckel: der Bereich bleibt auch auf großen Schirmen
 * unter einer halben Fensterhöhe.
 */
.titel-bild{position:relative; aspect-ratio:4/3; max-height:min(46vh,420px); background:var(--panel); overflow:hidden}
.titel-bild img,
.titel-bild video{width:100%; height:100%; object-fit:cover; display:block}
.bild-text{margin-top:10px; font-size:12px; color:var(--mute)}

.laufband{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:11px 0; background:var(--soft);
}
/*
 * Das Band läuft über die volle Fensterbreite, die Einträge stehen aber
 * mittig und innerhalb derselben Bahn wie der übrige Inhalt. „safe center"
 * sorgt dafür, dass bei Überlauf wieder linksbündig begonnen wird — sonst
 * wäre der Anfang der Liste nicht mehr erreichbar.
 */
.laufband ul{
  display:flex; justify-content:safe center; gap:38px;
  max-width:var(--breit); margin:0 auto; padding:0 clamp(16px,3vw,34px); list-style:none;
  font-family:'Archivo Narrow',sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute); white-space:nowrap; overflow-x:auto;
  scrollbar-width:none;
}
.laufband ul::-webkit-scrollbar{display:none}

/* ----------------------------- Sortiment ------------------------------ */
.sortiment{display:flex; flex-wrap:wrap; align-items:flex-start}
.seitenleiste{
  flex:1 1 220px; max-width:280px; padding:30px clamp(16px,2vw,26px);
  border-right:1px solid var(--line); position:sticky; top:69px;
}
@media(max-width:820px){
  .seitenleiste{position:static; max-width:none; border-right:0; border-bottom:1px solid var(--line)}
}
.seitenleiste a{
  display:block; padding:9px 0; font-size:13px; color:var(--mute);
  border-bottom:1px solid var(--line); transition:color .2s;
}
.seitenleiste a:hover{color:var(--ink)}
.seitenleiste a.an{color:var(--ink); font-weight:500}

.regal{flex:999 1 420px; min-width:0; padding:30px clamp(16px,3vw,34px) 90px}
.karten{display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:clamp(16px,2vw,28px); margin-top:20px}
.karte{display:block; transition:transform .3s}
.karte:hover{transform:translateY(-3px)}
.karte-bild{aspect-ratio:3/4; background:var(--panel); overflow:hidden; position:relative}
.karte-bild img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.karte:hover .karte-bild img{transform:scale(1.04)}
.karte h3{margin:11px 0 0; font-size:15px; font-weight:500}
.karte .sku{font-size:11px; color:var(--mute); margin-top:3px}
.karte .preis{margin-top:7px; font-size:14px}
/* Der Steuer- und Versandhinweis steht an jedem Preis: die Beträge im Katalog
   verstehen sich zzgl. Mehrwertsteuer und Versandkosten. Eine eigene kleine
   Zeile unter dem Betrag — für eine Marke daneben ist der Satz zu lang, und so
   führt der Betrag, während die Angabe trotzdem dasteht. */
.netto{
  display:block; margin-top:2px;
  font-size:11px; line-height:1.35; color:var(--mute);
}
/* ------------------------------ Blättern ------------------------------- */
/*
 * Sitzt unter dem Regal und blättert ausschließlich die Artikelliste — alles
 * darüber und darunter bleibt stehen. Die Formensprache ist die der
 * Kopfleiste: dünne Linien, Archivo Narrow in Versalien, die aktuelle Seite
 * als umgekehrter Block wie die aktive Staffelstufe.
 */
.blaettern{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,2vw,22px); margin-top:clamp(26px,3vw,40px);
  padding-top:22px; border-top:1px solid var(--line);
  font-family:'Archivo Narrow',sans-serif; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
}
.blaettern a,.blaettern span{color:var(--mute); text-decoration:none}
.blaettern-schritt{
  border:1px solid var(--line); border-radius:100px; padding:9px 18px;
  white-space:nowrap; transition:background .25s,color .25s,border-color .25s;
}
.blaettern a.blaettern-schritt:hover{background:var(--ink); border-color:var(--ink); color:var(--bg)}
/*
 * Am Rand bleibt der Knopf blass stehen, statt zu verschwinden — sonst
 * rutschte die ganze Zeile bei jedem Blättern um seine Breite zur Seite.
 */
.blaettern-schritt.aus{opacity:.35}
.blaettern-seiten{display:flex; align-items:center; gap:4px}
.blaettern-seiten a,.blaettern-seiten > span{
  min-width:34px; height:34px; display:inline-grid; place-items:center;
  border-radius:100px; letter-spacing:.08em; font-variant-numeric:tabular-nums;
}
.blaettern-seiten a:hover{background:var(--panel); color:var(--ink)}
.blaettern-seiten .an{background:var(--ink); color:var(--bg)}
.blaettern-seiten .blaettern-luecke{min-width:18px; opacity:.5}
.blaettern-stand{display:block; text-align:center; margin-top:12px}

.farbpunkte{display:flex; gap:5px; margin-top:8px}
.farbpunkt{width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* ---------------------------- Artikelseite ---------------------------- */
.artikel{display:flex; flex-wrap:wrap; align-items:flex-start; gap:0}
.artikel-bilder{flex:1 1 380px; min-width:0; padding:26px clamp(16px,3vw,34px)}
.artikel-haupt{aspect-ratio:3/4; background:var(--panel); overflow:hidden}
.artikel-haupt img{width:100%; height:100%; object-fit:cover}
/* Bilderstreifen unter dem Hauptbild — eine Zeile, seitlich schiebbar. */
.galerie-slider{position:relative; margin-top:12px}
.galerie{
  display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:thin; padding-bottom:2px;
}
.galerie::-webkit-scrollbar{height:6px}
.galerie::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.galerie img{
  width:74px; height:96px; object-fit:cover; background:var(--panel);
  cursor:pointer; opacity:.55; flex:0 0 auto; scroll-snap-align:start;
}
.galerie img.an{opacity:1; outline:1px solid var(--accent); outline-offset:2px}
.galerie-pfeil{
  position:absolute; top:calc(50% - 4px); transform:translateY(-50%); z-index:2;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); cursor:pointer; display:none;
  align-items:center; justify-content:center; font-size:18px; line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.galerie-slider.schiebbar .galerie-pfeil{display:flex}
.galerie-pfeil.links{left:-8px}
.galerie-pfeil.rechts{right:-8px}
.galerie-pfeil:hover{border-color:var(--accent); color:var(--accent)}
.artikel-text{flex:1 1 380px; min-width:0; padding:26px clamp(16px,3vw,34px) 80px; border-left:1px solid var(--line)}
@media(max-width:860px){.artikel-text{border-left:0}}
.artikel-text h1{margin:8px 0 0; font-size:clamp(30px,4vw,46px)}
.beschreibung{margin:16px 0 0; font-size:14px; line-height:1.8; color:var(--mute); max-width:56ch}

/*
 * Nur die Staffelkarten selbst tragen Fläche und Innenabstand. Mit dem
 * Nachfahren-Selektor bekamen auch .stufe und .wert eine eigene helle Fläche
 * und überdeckten damit die dunkle Karte der aktiven Stufe — deren Text stand
 * dann hell auf hell. Deshalb hier ausdrücklich nur die direkten Kinder.
 */
.staffel{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px}
.staffel > div{background:var(--bg); padding:14px 16px}
.staffel > div.an{background:var(--ink); color:var(--bg)}
.staffel .stufe{font-family:'Archivo Narrow',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.75}
.staffel .wert{margin-top:6px; font-size:18px}
/*
 * Ohne Staffel bleibt ein Feld übrig. Über die volle Breite gezogen läse es
 * sich wie eine Tabelle mit einer Zeile — es darf schmal bleiben und den
 * Betrag dafür größer zeigen.
 */
.staffel.einpreis{grid-template-columns:max-content; margin-top:22px}
.staffel.einpreis .wert{font-size:22px}

.wahl{margin-top:26px}
.wahl-titel{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  border:1px solid var(--line); background:transparent; border-radius:100px;
  padding:8px 14px; font-size:12px; cursor:pointer; transition:all .2s; color:var(--mute);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.an{background:var(--accent); border-color:var(--accent); color:#fff}
.farbchip{display:inline-flex; align-items:center; gap:8px}

.menge{display:flex; align-items:center; gap:0; border:1px solid var(--line); width:max-content; margin-top:10px}
.menge button{width:42px; height:42px; background:transparent; border:0; cursor:pointer; font-size:17px}
.menge button:hover{background:var(--soft)}
.menge input{width:74px; height:42px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; background:transparent; font-size:15px}

.inkorb{
  margin-top:20px; width:100%; background:var(--ink); color:var(--bg); border:0;
  padding:17px 24px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:background .25s;
}
.inkorb:hover{background:var(--accent)}
.inkorb[disabled]{opacity:.45; cursor:not-allowed}
.hinweis{margin-top:10px; font-size:12px; color:var(--mute)}

.spez{margin-top:30px; border-top:1px solid var(--line)}
.spez-zeile{display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px}
.spez-zeile span:first-child{flex:0 0 40%; color:var(--mute); font-family:'Archivo Narrow',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase}

/* ------------------------------- Korb --------------------------------- */
.schleier{position:fixed; inset:0; background:rgba(20,14,8,.45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:50}
.schleier.auf{opacity:1; pointer-events:auto}
.korb{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--bg);
  border-left:1px solid var(--line); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:60; display:flex; flex-direction:column;
}
.korb.auf{transform:none}
.korb-kopf{padding:22px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center}
.korb-liste{flex:1; overflow:auto; padding:8px 24px}
.korb-zeile{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.korb-zeile img{width:64px; height:84px; object-fit:cover; background:var(--panel)}
.korb-fuss{padding:20px 24px; border-top:1px solid var(--line)}
.summe{display:flex; justify-content:space-between; font-size:14px; padding:5px 0}
.summe.gross{font-size:19px; padding-top:12px; margin-top:8px; border-top:1px solid var(--line)}
.zur-kasse{display:block; text-align:center; margin-top:16px; background:var(--ink); color:var(--bg); padding:16px; font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.zur-kasse:hover{background:var(--accent)}

/* ------------------------------- Fuß ---------------------------------- */
.fuss{border-top:1px solid var(--line); padding:40px clamp(16px,3vw,34px); background:var(--soft)}
.fuss-raster{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fuss p{margin:0; font-size:12px; line-height:1.8; color:var(--mute); max-width:60ch}
.fuss a{font-size:12px; color:var(--mute); display:block; padding:4px 0}
.fuss a:hover{color:var(--ink)}

/* ------------------------------ Einstieg ------------------------------ */
.einstieg{min-height:100vh; display:grid; place-items:center; padding:60px 24px}
.einstieg-inner{width:100%; max-width:660px}
.einstieg h1{margin:14px 0 0; font-size:clamp(40px,6vw,72px)}
.einstieg h1 em{font-style:italic; color:var(--accent)}
/*
 * Die Katalogliste auf der Startseite. Nur direkte Kinder — das Studio
 * benutzt denselben Klassennamen für seine Tabellen, und katalog.css liegt
 * auf jeder Seite. Ohne den Kindselektor bekämen dort alle Verweise in den
 * Tabellenzellen diese Fläche samt Innenabstand und Trennlinie.
 */
.liste{margin-top:12px; border:1px solid var(--line)}
.liste > a{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); font-size:15px; transition:background .25s}
.liste > a:hover{background:var(--soft)}
.knopf{
  display:inline-block; background:var(--ink); color:var(--bg); padding:16px 30px;
  border-radius:100px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s;
}
.knopf:hover{background:var(--accent)}

/* ------------------------------ Fehler -------------------------------- */
.fehler{min-height:100vh; display:grid; place-items:center; padding:60px 24px; text-align:center}
.fehler h1{font-size:clamp(38px,6vw,64px); margin:0}
.fehler p{color:var(--mute); font-size:15px; line-height:1.75; max-width:48ch; margin:18px auto 0}
.fehler code{display:block; margin-top:22px; font-size:12px; color:var(--mute); word-break:break-all}