/* =========================================================================
   VARIANTE C — „Kabinett"
   Editorial und still. Die leiseste der vier: Papierweiß durchgehend,
   Serifen-Headlines, nummerierte Kapitel, Haarlinien statt Flächen.
   Farbe kommt ausschließlich aus den Fotos — im Interface gibt es genau
   EINEN farbigen Strich.
   Das Erweiterungssystem ist hier die Kapitelnummer: eine Warengruppe mehr
   = eine Zeile mehr im Register. Nichts muss umgebaut werden.
   ========================================================================= */

:root {
  --papier:      #f7f5ef;   /* Knochenweiß, der Grundton                  */
  --papier-tief: #efece2;
  --tinte:       #17190f;
  --tinte-60:    #5c604f;
  --tinte-35:    #93968a;
  --linie:       #d8d4c6;
  --oliv:        #46602c;   /* der einzige Farbton im Interface           */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;

  --sec: clamp(72px, 8vw, 148px);
  --w: 1120px;
  --w-text: 660px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
img { display: block; max-width: 100%; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem; line-height: 1.62; letter-spacing: -.006em;
  color: var(--tinte); background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--oliv); outline-offset: 4px; }
.skip { position: absolute; left: 12px; top: 12px; transform: translateY(-200%); background: var(--papier); padding: 12px 20px; z-index: 99; }
.skip:focus { transform: none; }

/* ---------- Typografie -------------------------------------------------- */
/* Serife nur für Überschriften. Die Sans trägt alles Funktionale — so
   bleibt der Ton editorial, ohne unleserlich zu werden.                  */
.s-xl { font-family: var(--serif); font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5rem); font-weight: 400; line-height: 1.04; letter-spacing: -.018em; }
.s-l  { font-family: var(--serif); font-size: clamp(1.9rem, 1.2rem + 2.8vw, 2.9rem); font-weight: 400; line-height: 1.12; letter-spacing: -.014em; }
.s-m  { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.s-zitat { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); font-weight: 400; font-style: italic; line-height: 1.34; }

.vor { font-size: 1.125rem; line-height: 1.62; color: var(--tinte-60); }
.klein { font-size: .8125rem; line-height: 1.55; color: var(--tinte-35); }
.kapitälchen { font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tinte-35); }

/* ---------- Kapitelkopf: Nummer, Linie, Titel --------------------------- */
/* Die Nummer ist das Ordnungsprinzip der Seite. Eine Warengruppe mehr
   bedeutet eine Nummer mehr — sonst nichts.                              */
.kap { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 860px) { .kap { grid-template-columns: 84px 1fr; gap: 0 34px; align-items: start; } }
.kap__nr { font-family: var(--serif); font-size: 1.0625rem; color: var(--tinte-35); padding-top: .5em; }
.kap__linie { grid-column: 1 / -1; height: 1px; background: var(--linie); margin-bottom: 22px; }
.kap__txt > .kapitälchen { display: block; margin-bottom: 12px; }

/* ---------- Kopfzeile ---------------------------------------------------- */
.kopf { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--linie); }
.kopf__in { max-width: var(--w); margin-inline: auto; height: 62px; display: flex; align-items: center; gap: 28px; padding: 0 24px; }
.kopf a { color: var(--tinte); text-decoration: none; font-size: .8125rem; white-space: nowrap; }
.kopf a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kopf__marke { font-family: var(--serif); font-size: 1.125rem; letter-spacing: .3em; }
.kopf__rechts { margin-left: auto; display: flex; gap: 20px; }

/* ---------- Abschnitte ---------------------------------------------------- */
.abs { padding: var(--sec) 24px; }
.abs__in { max-width: var(--w); margin-inline: auto; }
.abs--linie { border-top: 1px solid var(--linie); }
.abs--tief { background: var(--papier-tief); }

/* ---------- Auftakt -------------------------------------------------------- */
.auftakt { padding: clamp(64px, 8vw, 120px) 24px clamp(40px, 5vw, 72px); }
.auftakt__in { max-width: var(--w); margin-inline: auto; }
.auftakt .s-xl { max-width: 16ch; }
.auftakt .vor { max-width: 44ch; margin-top: 26px; font-size: 1.25rem; }
/* Die Tafel: Foto mit Bildunterschrift, wie in einem Katalog. */
.tafel { margin-top: clamp(40px, 5vw, 72px); }
.tafel img { width: 100%; height: auto; }
.tafel figcaption { display: flex; gap: 18px; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }

/* ---------- Verweise ------------------------------------------------------- */
.v { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--tinte); padding-bottom: 2px; }
.v:hover { border-bottom-color: var(--oliv); color: var(--oliv); }
.v--oliv { color: var(--oliv); border-bottom-color: var(--oliv); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 30px;
  background: var(--tinte); color: var(--papier); text-decoration: none;
  font-size: .9375rem; letter-spacing: .02em;
  transition: background-color .22s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.knopf:hover { background: var(--oliv); }
.knopf:active { transform: scale(.97); }
.knopf--leise { background: transparent; color: var(--tinte); border: 1px solid var(--linie); }
.knopf--leise:hover { background: transparent; border-color: var(--tinte); color: var(--tinte); }
.reihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- Zweispalter ----------------------------------------------------- */
.zwei { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (min-width: 860px) { .zwei { grid-template-columns: 1fr 1fr; } }
.zwei--schmal { }
@media (min-width: 860px) { .zwei--schmal { grid-template-columns: 5fr 6fr; } }
.zwei img { width: 100%; height: auto; }

/* ---------- Register (Sorten) ------------------------------------------------ */
/* Kein Kachelraster, sondern ein Register: Zeilen mit Haarlinie dazwischen.
   Das skaliert auf vierzig Positionen, ohne unruhig zu werden.           */
.register { border-top: 1px solid var(--linie); }
.zeile {
  display: grid; gap: 14px 26px; align-items: center;
  grid-template-columns: 1fr;
  padding: 20px 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--tinte);
  transition: padding-left .3s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 720px) { .zeile { grid-template-columns: 92px 1.4fr 1fr auto; padding: 18px 0; } }
.zeile:hover { padding-left: 10px; }
.zeile__bild { width: 92px; aspect-ratio: 4/5; object-fit: cover; }
.zeile__name { font-family: var(--serif); font-size: 1.35rem; display: flex; align-items: center; gap: 10px; }
.zeile__name svg { width: 20px; height: 20px; color: var(--oliv); flex: 0 0 auto; }
.zeile__meta { font-size: .875rem; color: var(--tinte-60); }
.zeile__preis { font-size: 1rem; white-space: nowrap; }
.zeile__preis small { display: block; font-size: .75rem; color: var(--tinte-35); }

/* ---------- Sortiment: Register mit Nummern ---------------------------------- */
.sortreg .zeile { grid-template-columns: 1fr; }
@media (min-width: 720px) { .sortreg .zeile { grid-template-columns: 54px 120px 1.5fr 1fr auto; } }
.sortreg .nr { font-family: var(--serif); color: var(--tinte-35); }
.sortreg .zeile__bild { width: 120px; aspect-ratio: 3/2; }
.zeile--bald { color: var(--tinte-35); }
.zeile--bald:hover { padding-left: 0; }

/* ---------- Milenario: das einzige Kapitel mit Luft ------------------------- */
.mil { text-align: center; }
.mil__strich { width: 1px; height: 56px; background: var(--linie); margin: 0 auto 30px; }
.mil .s-l { max-width: 14ch; margin-inline: auto; }
.mil .vor { max-width: 56ch; margin: 22px auto 0; }
.mil__tafel { max-width: 520px; margin: clamp(40px,5vw,72px) auto 0; }
.mil__zahlen { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); max-width: 780px; margin: clamp(40px,5vw,64px) auto 0; padding-top: 30px; border-top: 1px solid var(--linie); }
.mil__zahlen b { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1.1; }
.mil__zahlen span { font-size: .8125rem; color: var(--tinte-35); }
.presse { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 40px; }

/* ---------- Fuß ------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); padding: 64px 24px 36px; background: var(--papier-tief); }
.fuss__in { max-width: var(--w); margin-inline: auto; }
.fuss__sp { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); }
.fuss h2 { font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tinte-35); margin-bottom: 14px; font-weight: 400; }
.fuss ul { list-style: none; padding: 0; }
.fuss li a { color: var(--tinte); text-decoration: none; font-size: .9375rem; line-height: 2.05; }
.fuss li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss__recht { border-top: 1px solid var(--linie); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: baseline; }
.fuss__recht nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.fuss__recht a { color: var(--tinte-35); text-decoration: none; font-size: .75rem; }

/* ---------- Einblenden ------------------------------------------------------- */
.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.an { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .reihe .knopf { width: 100%; }
  .zeile__bild { width: 76px; }
  .sortreg .zeile__bild { width: 100%; aspect-ratio: 16/9; }
}

/* Sprungmarken: Platz für die klebende Kopfzeile lassen, sonst
   verschwindet die Überschrift darunter. */
[id] { scroll-margin-top: 74px; }