/* ============================================================================
   Herren Second Hand Bad Wilhelmshöhe — Reportage
   Grammatik: chaptered editorial. Die Seite ist ein gedrucktes Feature.
   Kapitel sind die Einheit, Schnitte sind hart, jeder Grund hält.
   scrollcraft.css ist der Boden; hier steht nur, was diese Seite ausmacht.
   ========================================================================== */

/* ---------------------------------------------------------------- marke -- */
@font-face{
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Sechs Rollen, ein Akzent. Papier, keine Bühne. */
  --sc-canvas:     #fbfaf8;
  --sc-surface:    #f2f0eb;
  --sc-ink:        #23211e;
  --sc-ink-soft:   #6a655d;
  --sc-accent:     #4a5c5d;
  --sc-accent-ink: #ffffff;

  /* Zwei Familien. Die Etiketten laufen in derselben Serife, nur enger
     gesperrt und versal, wie eine Bildunterschrift im Buch. */
  --sc-font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --sc-font-text:    Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --sc-font-mono:    Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;

  --sc-measure: 58ch;
  --sc-maxw: 78rem;
  --sc-shadow-color: 30 18% 8%;
}

body{ background: var(--sc-canvas); }

/* Etiketten sind hier Bildunterschriften, keine Systemschrift. */
.sc-label{
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

::selection{ background: var(--sc-accent); color: var(--sc-accent-ink); }

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: var(--sc-3) var(--sc-5);
}
.skip:focus{ left: var(--sc-4); top: var(--sc-4); }

:where(a){ color: inherit; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- gründe --
   Kein drift. Ein Kapitelwechsel ist ein Schnitt, keine Interpolation. */
.ch{ position: relative; background: var(--sc-canvas); }
.ch--tint{ background: var(--sc-surface); }
.ch--dark{
  /* Der Grund muss als Token gesetzt sein, nicht nur als background: die
     Scrims mischen gegen --sc-canvas, sonst legt sich weiss ueber das Foto. */
  --sc-canvas: #1a1816;
  background: var(--sc-canvas);
  --sc-ink: #f1ede6;
  --sc-ink-soft: #a79e91;
  --sc-accent: #9db2b2;          /* zweite Helligkeit, gleiche Farbe */
  --sc-hairline: color-mix(in oklab, #f1ede6 16%, transparent);
  color: var(--sc-ink);
}

/* ----------------------------------------------------------------- folio --
   Das Chrom dieser Grammatik: keine Leiste, eine Kolumnenziffer am Rand,
   die mitläuft. Sie navigiert nicht, sie sagt, auf welcher Seite man ist. */
.folio{
  position: fixed; z-index: 60;
  left: max(0.9rem, calc(var(--sc-gutter) - 2.6rem));
  bottom: clamp(1.5rem, 8vh, 4rem);
  display: flex; align-items: center; gap: var(--sc-3);
  writing-mode: vertical-rl; rotate: 180deg;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  mix-blend-mode: multiply;
  transition: color 320ms var(--sc-ease-out);
  pointer-events: none;
}
.folio__rule{ width: 1px; height: clamp(2rem, 9vh, 4.5rem); background: currentColor; opacity: 0.4; }
.folio__num{ color: var(--sc-ink); }
.folio.is-dark{ color: #a79e91; mix-blend-mode: normal; }
.folio.is-dark .folio__num{ color: #f1ede6; }
@media (max-width: 860px){
  .folio{ writing-mode: horizontal-tb; rotate: none; left: var(--sc-gutter); bottom: var(--sc-4); }
  .folio__rule{ width: clamp(1.5rem, 8vw, 3rem); height: 1px; }
}
@media (max-width: 420px){ .folio{ display: none; } }

/* -------------------------------------------------------------- zeichen ---
   Das Hauszeichen. Auf der Titelseite steht es über dem Namenszug wie ein
   Signet über dem Kopf einer Zeitungsseite, klein genug, dass die Schlagzeile
   das erste bleibt, was man liest. */
.title__logo{
  display: block;
  width: clamp(3.25rem, 6vw, 4.75rem);
  height: auto;
  margin-bottom: clamp(var(--sc-4), 2.5vh, var(--sc-5));
}

/* ------------------------------------------------------------ titelseite --
   Typo auf Papier, kein Bild über der Falz. Das Bild fängt in Kapitel I an. */
.title{
  min-height: 100svh;
  display: grid; align-content: center;
  /* Die Titelseite muss in den Bildschirm passen, sonst ist die Fußzeile
     angeschnitten: gemessen 1042 px bei 900 px Fenster. */
  padding-block: clamp(3rem, 8vh, 5rem);
}
.title__mast{
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5);
  padding-bottom: var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline);
}
.title h1{
  margin-top: clamp(var(--sc-7), 9vh, var(--sc-9));
  max-width: 20ch;
  font-weight: 400;
}
.title__stand{
  margin-top: var(--sc-6);
  max-width: 44ch;
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  color: var(--sc-ink-soft);
}
.title__foot{
  margin-top: clamp(var(--sc-6), 7vh, var(--sc-8));
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6);
  align-items: baseline;
}
.title__foot a{ text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (max-width: 700px){
  .title h1{ font-size: var(--sc-t-2xl); }   /* Hochformat der Typo */
}

/* ------------------------------------------------------------ intertitel --
   Voller Halt zwischen zwei Kapiteln. Danach beginnt die Doppelseite. */
.intertitle{
  padding-block: clamp(3.5rem, 11vh, 8rem);
  display: grid; gap: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
}
.intertitle__no{ color: var(--sc-accent); }
.intertitle h2{ max-width: 24ch; font-weight: 400; }
.intertitle p{ max-width: 52ch; color: var(--sc-ink-soft); margin: 0; }

/* -------------------------------------------------------------- spreads --
   Asymmetrisch, nie zweimal dieselbe Aufteilung. Bilder stehen in ihrer
   eigenen Spalte mit Unterschrift, sie laufen nicht unter die Schrift. */
.spread{
  display: grid;
  gap: clamp(var(--sc-6), 5vw, var(--sc-9));
  padding-bottom: clamp(3.5rem, 10vh, 7rem);
}
.spread--wide{ grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.spread--tall{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; }
.spread--tall .plate{ order: 2; }
.spread__aside{ padding-top: clamp(var(--sc-4), 6vh, var(--sc-8)); }
@media (max-width: 860px){
  .spread--wide, .spread--tall{ grid-template-columns: 1fr; }
  .spread--tall .plate{ order: 0; }
}

.plate{ margin: 0; }
.plate img{ width: 100%; height: auto; }
.plate figcaption{
  margin-top: var(--sc-3);
  padding-top: var(--sc-3);
  border-top: 1px solid var(--sc-hairline);
  max-width: 40ch;
}
.plate--frame{ overflow: clip; }

.pull{
  margin: var(--sc-6) 0 0;
  padding-left: var(--sc-5);
  border-left: 2px solid var(--sc-accent);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  line-height: 1.34;
  color: var(--sc-ink);
}

/* ------------------------------------------------------------- schublade --
   Der Peak. Die Maske ist kein Kit-Gerät: zwei Kanten laufen unterschiedlich
   schnell auf, das Bild wandert dabei nach oben und kommt ins Licht, und die
   Etiketten legen sich auf Leitlinien in die Fächer. Alles aus --sc-p. */
.drawer{
  height: 100%;
  display: grid; place-items: center;
  padding: clamp(var(--sc-5), 6vh, var(--sc-8)) var(--sc-gutter);
}
.drawer__inner{
  position: relative;
  width: min(42rem, 86vw);
  max-height: 70svh;
  aspect-ratio: 3 / 4;
  margin: 0;
}
.drawer__frame{
  position: absolute; inset: 0;
  overflow: clip;
  /* drop-shadow folgt der beschnittenen Silhouette, box-shadow nicht: erst so
     liegt die aufgezogene Kante wirklich vor dem dunklen Grund. */
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
  /* Der Auszug: linke Kante läuft weiter als die rechte, weil die Schublade
     im Bild schräg steht. Bei p = 0 sieht man die Kommode und den Kasten
     darauf, also einen echten Grund, keine leere Bühne. */
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(56% + var(--sc-p, 0) * 44%),
    0 calc(39% + var(--sc-p, 0) * 61%)
  );
}
.drawer__frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--sc-p, 0) * -2.5%), 0)
             scale(calc(1.05 - var(--sc-p, 0) * 0.05));
  filter: brightness(calc(0.82 + var(--sc-p, 0) * 0.18));
}
/* Die Kante, an der das Licht in den Auszug fällt. */
.drawer__lip{
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, #000 42%, transparent) 0%,
    transparent 18%);
  opacity: calc(0.25 + var(--sc-p, 0) * 0.75);
}
.drawer__label{
  position: absolute; z-index: 3;   /* ueber dem Scrim, der das Foto abdunkelt */
  display: flex; align-items: center; gap: var(--sc-2);
  margin: 0;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #f4f0e9;
  white-space: nowrap;
}
/* Das Etikett liegt auf einem eigenen Plaettchen, wie am Warenkorb angesteckt.
   Reiner Textschatten reicht ueber gemustertem Stoff nicht fuer 4.5:1. */
.drawer__label > span{
  background: #14120f;
  padding: 0.32em 0.7em;
  box-shadow: var(--sc-e1);
}
.drawer__label::before{
  content: ""; width: clamp(1.5rem, 4vw, 3rem); height: 1px;
  background: currentColor; opacity: 0.75;
}
.drawer__label--a{ left: 4%;  top: 58%; }
.drawer__label--b{ left: 12%; top: 74%; }
.drawer__label--c{ left: 20%; top: 89%; }
.drawer__caption{
  position: absolute; left: auto; right: 0; top: calc(100% + var(--sc-4));
  max-width: 34ch;
  text-align: right;
}
@media (max-width: 860px){
  /* Im Hochformat steht die Kapitelzeile oben, sonst liegt sie auf dem Foto
     und die Unterschrift wandert in die Platte hinein: beides gemessen
     durchgefallen (1.07:1). Kopie nach oben, Platte tiefer, Unterschrift
     darunter, alles auf dem ruhigen dunklen Grund. */
  .drawer{ padding-top: 24svh; padding-bottom: 12svh; align-content: start; }
  .drawer__inner{ width: min(30rem, 92vw); max-height: 50svh; }
  /* Vier Zeilen Überschrift schieben die Platte ins Bild: eine Stufe
     kleiner, dann bleiben Kopie und Foto getrennt. */
  .ch--dark .sc-copy--lead h2{ font-size: var(--sc-t-xl); max-width: 20ch; }
  .drawer__label{ font-size: 0.62rem; letter-spacing: 0.1em; }
  .drawer__caption{
    position: absolute; top: calc(100% + var(--sc-3));
    left: 0; right: auto; text-align: left; max-width: 34ch;
  }
  .ch--dark .sc-copy--lead{ bottom: auto; top: clamp(1rem, 4vh, 2.25rem); }
  /* Die Kopie steht hier oben und über die volle Breite, also ist das Band
     die richtige Form für die Dichte, nicht die Ecke. */
  .ch--dark .sc-scrim--lead{
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 26%,
      color-mix(in oklab, var(--sc-canvas) 42%, transparent) 44%,
      transparent 58%);
  }
}


/* Die Ecke, in der die Kapitelzeile steht, braucht auf dem Foto mehr Dichte
   als der Standard-Scrim liefert: gemessen 4.37:1, nötig sind 4.5:1 für die
   kleine Zeile. Nur die Ecke, nicht das ganze Bild. */
.ch--dark .sc-scrim--lead{
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 44%, transparent) 54%,
    transparent 74%);
}

/* ------------------------------------------------------------------ rail --
   Objekte in einer begehbaren Sammlung. Museumsetikett, kein Werbetext,
   und für jedes Stück dasselbe Schema. */
.rail{
  height: 100%;
  align-items: center;
  gap: clamp(var(--sc-5), 3vw, var(--sc-7));
  padding-inline: var(--sc-gutter);
}
.rail__lead{
  flex: 0 0 auto;
  width: min(26rem, 74vw);
  padding-right: var(--sc-6);
}
.rail__lead h2{ font-weight: 400; }
.rail__lead p{ margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 34ch; }
.object{
  flex: 0 0 auto;
  width: clamp(13rem, 20vw, 17rem);
  margin: 0;
  opacity: var(--o, 1);
  transform: translate3d(0, var(--y, 0), 0);
  /* Der eigene Grund muss hier stehen: durch die Deckkraft bildet das Objekt
     einen eigenen Zeichenkontext, und das Multiply des Freistellers findet
     den Seitengrund darin nicht mehr. */
  background: var(--sc-surface);
}
.object img{
  width: 100%; height: auto;
  /* Die Stücke sind Freisteller auf Weiß. Multiply legt sie auf das Papier,
     statt sie in einem weißen Kasten stehen zu lassen. */
  mix-blend-mode: multiply;
}
.object figcaption{
  margin-top: var(--sc-3);
  padding-top: var(--sc-2);
  border-top: 1px solid var(--sc-hairline);
}
.object .maker{
  display: block;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-base);
  color: var(--sc-ink);
  letter-spacing: var(--sc-track-snug);
}
.rail__note{
  flex: 0 0 auto;
  width: min(20rem, 70vw);
  align-self: center;
  color: var(--sc-ink-soft);
  border-left: 1px solid var(--sc-hairline);
  padding-left: var(--sc-5);
}
/* Gestaffeltes Ankommen, aus --sc-p. Das erste Stück ist ausgenommen, ein
   pan-Akt braucht sofort Inhalt. */
@media (prefers-reduced-motion: no-preference){
  .object{
    --o: clamp(0.55, calc((var(--sc-p, 0) - var(--i) * 0.07) * 6), 1);
    --y: calc((1 - clamp(0, calc((var(--sc-p, 0) - var(--i) * 0.07) * 6), 1)) * 14px);
  }
}

/* ------------------------------------------------------------------ raum --
   Symmetrisch aufgebaut: zwei gleiche oben, das große Bild mittig darunter,
   drei gleiche unten. Jede Reihe ist in sich achsensymmetrisch. */
.room{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(var(--sc-4), 2.2vw, var(--sc-6));
  padding-bottom: clamp(3.5rem, 10vh, 7rem);
}
.room figure{ margin: 0; align-self: start; }
/* height: 100% hier ist eine Falle: das Bild füllt dann die ganze Rasterzeile
   und die Unterschrift rutscht unter das nächste Bild. Höhe kommt aus dem
   Seitenverhältnis, nicht aus der Zeile. */
.room img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.room figcaption{ margin-top: var(--sc-2); }

.room--half{ grid-column: span 3; }
.room--third{ grid-column: span 2; }
/* Das größte Bild der Seite: vier von sechs Spalten, mittig, mit Luft links
   und rechts. */
.room--wide{ grid-column: 2 / span 4; margin-block: clamp(var(--sc-2), 2vh, var(--sc-5)); }
.room--wide img{ aspect-ratio: 3 / 2; }

@media (max-width: 860px){
  .room{ grid-template-columns: repeat(2, 1fr); }
  .room--half{ grid-column: span 1; }
  .room--third{ grid-column: span 1; }
  .room--third:last-child{ grid-column: span 2; }
  .room--wide{ grid-column: span 2; }
}

/* ---------------------------------------------------------------- cookies --
   Erscheint sofort beim Betreten. Papierfarben, gleiche Serife, kein Overlay
   über der ganzen Seite: der Hinweis ist eine Karte am unteren Rand. */
.cookie{
  position: fixed; z-index: 90;
  left: var(--sc-4); right: var(--sc-4); bottom: var(--sc-4);
  margin-inline: auto; max-width: 46rem;
  background: #ffffff;
  color: #23211e;
  border: 1px solid color-mix(in oklab, #23211e 16%, transparent);
  box-shadow: var(--sc-e3);
  padding: clamp(var(--sc-4), 2.5vw, var(--sc-6));
  display: grid; gap: var(--sc-4);
}
.cookie[hidden]{ display: none; }
.cookie__text{ margin: 0; font-size: var(--sc-t-sm); line-height: 1.55; max-width: 60ch; }
.cookie__text a{ text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.cookie__actions{ display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.cookie__btn{
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.7em 1.4em;
  background: transparent;
  color: #23211e;
  border: 1px solid color-mix(in oklab, #23211e 34%, transparent);
  cursor: pointer;
  transition: background 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.cookie__btn:hover{ background: color-mix(in oklab, #23211e 8%, transparent); }
.cookie__btn:active{ transform: translateY(1px); }
.cookie__btn--primary{ background: #23211e; color: #fbfaf8; border-color: #23211e; }
.cookie__btn--primary:hover{ background: #3a3733; }
/* Solange der Hinweis steht, weicht der Kolumnentitel aus. */
body.has-cookie .folio{ opacity: 0; }
@media (max-width: 620px){
  .cookie{
    left: var(--sc-3); right: var(--sc-3); bottom: var(--sc-3);
    padding: var(--sc-4); gap: var(--sc-3);
  }
  .cookie__text{ font-size: var(--sc-t-xs); line-height: 1.5; }
  .cookie__actions{ flex-direction: column; gap: var(--sc-2); }
  .cookie__btn{ width: 100%; padding: 0.62em 1em; }
}

/* -------------------------------------------------------------- kolophon --
   Das Ende ist eine Impressumsplatte, kein Knopf auf einer Insel.
   Der Weg zur Tür steht als laufender Satz. */
.colophon{
  height: 100%;
  /* Oben statt mittig: mittig zentriert schiebt das Kolophon einen halben
     Bildschirm Weiss vor sich her, obwohl der Abschnitt davor direkt darueber
     endet. Der Anschluss ist wichtiger als die perfekte Mitte. */
  display: grid; align-content: start;
  /* Oben etwas mehr Luft als unten: die Fuge zum Kapitel davor soll so
     breit sein wie die anderen Kapitelfugen der Seite (rund 100 px). */
  padding-top: clamp(var(--sc-6), 9vh, var(--sc-9));
  padding-bottom: clamp(var(--sc-6), 6vh, var(--sc-8));
}
.colophon__plate{
  border-top: 2px solid var(--sc-ink);
  border-bottom: 1px solid var(--sc-hairline);
  padding-block: clamp(var(--sc-5), 4vh, var(--sc-7));
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sc-5), 3vw, var(--sc-8));
}
.colophon__lead p{ margin: 0; }
/* Im Kolophon steht das Zeichen über dem Satz, der zur Tür führt. */
.colophon__logo{
  display: block;
  width: clamp(2.75rem, 4vw, 3.5rem); height: auto;
  margin-bottom: var(--sc-4);
}
.colophon__say{
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  line-height: 1.22;
  letter-spacing: var(--sc-track-snug);
  max-width: 22ch;
}
.colophon__say a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--sc-accent);
}
.colophon__say a:hover{ text-decoration-color: currentColor; }
.colophon dl{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sc-2) var(--sc-4); }
.colophon dt{ color: var(--sc-ink-soft); }
.colophon dd{ margin: 0; }
.colophon__legal{
  margin-top: var(--sc-5);
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5);
}
.colophon__legal a{ text-decoration-color: var(--sc-hairline); }
@media (max-width: 860px){
  .colophon__plate{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- sprungleiste --
   Der Kolumnentitel am Rand sagt, wo man ist; springen kann man dort nicht.
   Also eine schmale Leiste, die einfährt, sobald die Titelseite durch ist.

   WARUM NICHT DIE TITELZEILE KLEBEN LASSEN: die Titelseite ist eine volle
   Bildschirmhöhe Typografie. Oben festgeklebt nähme sie dauerhaft Platz weg,
   und im Lauf schrumpfen kann sie nicht — eine klebende Leiste behält ihren
   Platz im Fluss, ändert man die Höhe, springt die Seite darunter.

   Papier, keine Glasleiste: derselbe Grund wie die Seite, eine Haarlinie als
   Abschluss. Der Weichzeichner ist nur die Rückversicherung für den Moment,
   in dem ein Foto darunter durchläuft. */
.jump{
  position: fixed; inset-inline: 0; top: 0; z-index: 80;
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--sc-hairline);
  transform: translateY(-100%);
  transition: transform 420ms var(--sc-ease-out),
              background 320ms var(--sc-ease-out),
              color 320ms var(--sc-ease-out),
              border-color 320ms var(--sc-ease-out);
}
.jump.is-in{ transform: translateY(0); }
.jump[hidden]{ display: none; }

.jump__inner{
  display: flex; align-items: center; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
  min-height: 4rem;
}

/* Die Marke links ist zugleich der Weg zurück an den Anfang. */
.jump__mark{
  display: flex; align-items: center; gap: 0.75rem;
  flex: 0 0 auto;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; line-height: 1.15;
}
.jump__mark-text{ display: grid; gap: 0.1em; }
/* Das Zeichen ist ein Quadrat mit eigenem Grund. Es steht auf der Papierfarbe
   als Block — deshalb keine zusaetzliche Kontur, die wuerde ihn einrahmen. */
.jump__logo{
  display: block;
  height: 2.1rem; width: 2.1rem;
  flex: 0 0 auto;
}
.jump__mark-name{ color: var(--sc-ink); }
.jump__mark-sub{ color: var(--sc-ink-soft); }

.jump__tel{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.1em;
  color: var(--sc-ink);
  text-decoration: none;
}
.jump__tel svg{ width: 1.05em; height: 1.05em; }
.jump__tel:hover{ color: var(--sc-accent); }

/* Über dem dunklen Kapitel dreht die Leiste die Helligkeit, genau wie der
   Kolumnentitel — sonst stünde eine weiße Kante auf dem Foto. */
.jump.is-dark{
  background: color-mix(in oklab, #1a1816 92%, transparent);
  border-bottom-color: color-mix(in oklab, #f1ede6 18%, transparent);
}
.jump.is-dark .jump__mark-name,
.jump.is-dark .jump__tel{ color: #f1ede6; }
.jump.is-dark .jump__mark-sub{ color: #a79e91; }

/* Die Sprungziele dürfen nicht unter der Leiste liegen. */
.ch[id]{ scroll-margin-top: 5.5rem; }

/* Ab hier fehlt die Breite für drei Spalten: Marke und Telefon in die erste
   Zeile, das Register darunter, dort mit dem Finger zu schieben. */
@media (max-width: 900px){
  .jump__mark-sub{ display: none; }
}
@media (max-width: 560px){
  /* Das Zeichen steht fuer den Namen. Beides nebeneinander drueckt den
     Menueknopf aus der Leiste, sobald dort „Schließen“ steht. */
  .jump__mark-name{ display: none; }
  .jump__inner{ gap: var(--sc-3); }
}
@media (max-width: 480px){
  .jump__tel span{ display: none; }
  .jump__tel{
    width: 2.2rem; height: 2.2rem;
    justify-content: center;
    border: 1px solid var(--sc-hairline-strong);
    border-radius: var(--sc-r-pill);
  }
  .jump__tel svg{ width: 1.15em; height: 1.15em; }
}

/* Solange der Einwilligungshinweis steht, bleibt die Leiste draußen: zwei
   schwebende Flächen gleichzeitig sind eine zu viel. */
body.has-cookie .jump{ transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce){
  .jump{ transition: opacity 200ms linear; transform: none; opacity: 0; }
  .jump.is-in{ opacity: 1; }
  body.has-cookie .jump{ transform: none; opacity: 0; }
}

/* ------------------------------------------------------------ menüknopf --
   Ein Wort in einem Fenster, das gerade eine Zeile hoch ist. Beim Öffnen
   fährt „Menü" hinaus und „Schließen" nach — derselbe Wechsel wie im
   Bonpâtis-Menü, nur ohne dessen Bühne. Daneben ein Kreuz, das sich dreht:
   liegend ist es ein Plus, gedreht ein Schließkreuz. */
.knopf{
  display: inline-flex; align-items: center; gap: 0.7em;
  font: inherit;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding: 0.45em 0 0.35em;
  cursor: pointer;
  transition: border-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.knopf:hover{ border-bottom-color: var(--sc-accent); }

/* Beide Woerter liegen in derselben Rasterspalte. Dadurch ist das Fenster
   immer so breit wie das laengere von beiden — der Knopf springt beim
   Umschalten nicht in der Breite und laeuft auf schmalen Schirmen nicht mehr
   ueber den rechten Rand hinaus. */
.knopf__fenster{
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  height: 1.15em;
  text-align: left;
}
.knopf__zeile{
  grid-column: 1;
  height: 1.15em; line-height: 1.15em;
  white-space: nowrap;
  transition: transform 420ms var(--sc-ease-out);
}
/* Beide Zeilen fahren gemeinsam eine Zeilenhöhe hoch. */
.jump.menue-offen .knopf__zeile{ transform: translateY(-100%); }
/* Die zweite Zeile kommt einen Hauch später — sonst wirkt es wie ein Schnitt. */
.jump.menue-offen .knopf__zeile:last-child{ transition-delay: 70ms; }

.knopf__sr{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.knopf__kreuz{
  position: relative;
  width: 0.85em; height: 0.85em;
  transition: transform 480ms var(--sc-ease-out);
}
.knopf__kreuz span{
  position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.knopf__kreuz span:first-child{ width: 100%; height: 1px; }
.knopf__kreuz span:last-child{ width: 1px; height: 100%; }
.jump.menue-offen .knopf__kreuz{ transform: rotate(315deg); }

.jump__rechts{
  display: flex; align-items: center;
  gap: clamp(var(--sc-4), 2.5vw, var(--sc-6));
  margin-inline-start: auto;
}

/* ---------------------------------------------------------------- tafel --
   Sie schlägt sich unter der Leiste auf. Die Höhe wird über die Rasterzeile
   animiert (0fr → 1fr), nicht über einen geratenen Pixelwert: so passt die
   Fahrt immer zum tatsächlichen Inhalt, auf jedem Schirm. */
.menue{
  position: absolute; inset-inline: 0; top: 100%;
  display: grid; grid-template-rows: 0fr;
  background: var(--sc-canvas);
  border-bottom: 1px solid transparent;
  transition: grid-template-rows 520ms var(--sc-ease-out),
              border-color 520ms var(--sc-ease-out);
}
.jump.menue-offen .menue{
  grid-template-rows: 1fr;
  border-bottom-color: var(--sc-hairline);
}
.menue__innen{
  overflow: hidden auto; min-height: 0;
  /* Auf kleinen Schirmen scrollt das Verzeichnis in sich, nicht die Seite.
     --leiste traegt die tatsaechlich gemessene Hoehe der Leiste; ein
     geschaetzter Abzug haette entweder Platz verschenkt oder die letzte Zeile
     unter den Bildschirmrand geschoben. */
  max-height: calc(100svh - var(--leiste, 4rem) - 1.5rem);
  overscroll-behavior: contain;
}
.menue__titel{
  margin: 0;
  padding: var(--sc-5) var(--sc-gutter) var(--sc-3);
  max-width: var(--sc-maxw); margin-inline: auto;
}

.menue__liste{
  list-style: none; margin: 0 auto;
  padding: 0 var(--sc-gutter) var(--sc-4);
  max-width: var(--sc-maxw);
}
.menue__liste li{
  border-top: 1px solid var(--sc-hairline);
  /* Jede Zeile kommt von unten nach, eine nach der anderen. */
  opacity: 0;
  transform: translateY(0.7rem);
  transition: opacity 380ms var(--sc-ease-out), transform 460ms var(--sc-ease-out);
}
.jump.menue-offen .menue__liste li{
  opacity: 1; transform: none;
  transition-delay: calc(90ms + var(--i) * 45ms);
}
.menue__liste a{
  display: flex; align-items: baseline; gap: clamp(var(--sc-4), 3vw, var(--sc-7));
  padding-block: clamp(0.5rem, 1.4vh, 0.85rem);
  text-decoration: none;
  color: var(--sc-ink-soft);
  transition: color 200ms var(--sc-ease-out);
}
.menue__liste a:hover,
.menue__liste a:focus-visible{ color: var(--sc-ink); }
.menue__no{
  flex: 0 0 2.5ch;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.12em;
  color: var(--sc-accent);
}
.menue__wort{
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: var(--sc-track-snug);
  font-weight: 400;
}
/* Das Kapitel, in dem man gerade steht, trägt die Tinte und einen Strich. */
.menue__liste a.is-here{ color: var(--sc-ink); }
.menue__liste a.is-here .menue__wort{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--sc-accent);
}

.menue__fuss{
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: var(--sc-4) var(--sc-gutter) var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
  display: flex; align-items: center; gap: var(--sc-4);
  opacity: 0; transform: translateY(0.7rem);
  transition: opacity 380ms var(--sc-ease-out), transform 460ms var(--sc-ease-out);
}
.menue__fuss p{ margin: 0; }
.menue__fuss > div{ display: grid; gap: var(--sc-1); }
.menue__logo{ display: block; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; }
.jump.menue-offen .menue__fuss{
  opacity: 1; transform: none;
  transition-delay: calc(90ms + var(--i) * 45ms);
}

/* Der Schleier liegt über der Seite, aber unter der Leiste. */
.menue__schleier{
  position: fixed; inset: 0; z-index: 70;
  background: color-mix(in oklab, #23211e 26%, transparent);
  opacity: 0;
  transition: opacity 420ms var(--sc-ease-out);
}
.menue__schleier[hidden]{ display: none; }
.menue__schleier.is-da{ opacity: 1; }

/* Über dem dunklen Kapitel bleibt auch die Tafel dunkel. */
.jump.is-dark .menue{ background: #1a1816; }
.jump.is-dark .menue__liste li,
.jump.is-dark .menue__fuss{ border-color: color-mix(in oklab, #f1ede6 16%, transparent); }
.jump.is-dark .menue__liste a{ color: #a79e91; }
.jump.is-dark .menue__liste a:hover,
.jump.is-dark .menue__liste a.is-here{ color: #f1ede6; }
.jump.is-dark .menue__no{ color: #9db2b2; }
.jump.is-dark .knopf{ color: #f1ede6; border-bottom-color: color-mix(in oklab, #f1ede6 34%, transparent); }

@media (max-width: 520px){
  .menue__liste a{ gap: var(--sc-4); }
  .menue__no{ flex-basis: 3ch; }
}

@media (prefers-reduced-motion: reduce){
  /* Keine Fahrt, nur eine Blende: die Tafel ist sofort da. */
  .menue{ transition: none; }
  .menue__liste li,
  .menue__fuss{ transform: none; transition: opacity 200ms linear; }
  .jump.menue-offen .menue__liste li,
  .jump.menue-offen .menue__fuss{ transition-delay: 0ms; }
  .knopf__zeile,
  .knopf__kreuz{ transition: none; }
}

/* ------------------------------------------------------------- anfahrt ----
   Karte und Öffnungszeiten nebeneinander, kurz vor dem Kolophon. Die Karte
   ist breit, die Zeiten sind eine schmale Spalte daneben — dasselbe Verhältnis
   wie bei den Doppelseiten weiter oben. */
.wayfind{
  margin-top: clamp(var(--sc-6), 5vh, var(--sc-8));
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(var(--sc-5), 3vw, var(--sc-8));
  align-items: start;
}
.wayfind__map{ margin: 0; }
.wayfind__map figcaption{ margin-top: var(--sc-3); }

/* Der Rahmen der Karte. Ohne Einwilligung steht hier eine Platte aus Papier,
   danach dasselbe Rechteck mit der Karte darin — die Seite springt nicht. */
.mapgate{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sc-canvas);
  border: 1px solid var(--sc-hairline-strong);
  display: grid;
}
.mapgate__ask{
  align-self: center;
  display: grid; gap: var(--sc-4);
  padding: clamp(var(--sc-4), 3vw, var(--sc-7));
  max-width: 46ch;
}
.mapgate__ask .sc-body{ margin: 0; font-size: var(--sc-t-sm); }
.mapgate__actions{ display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.mapgate__actions .cookie__btn{ text-decoration: none; display: inline-flex; align-items: center; }
.mapgate__note{ margin: 0; letter-spacing: 0.1em; }
.mapgate__note a{ text-decoration: underline; text-underline-offset: 0.18em; }
.mapgate.is-live{ background: var(--sc-surface); }
.mapgate iframe{
  display: block; width: 100%; height: 100%; border: 0;
  /* Google zeichnet die Karte kräftiger, als die Seite spricht. Ein Hauch
     weniger Sättigung, damit sie neben dem Papier nicht schreit. */
  filter: saturate(0.82) contrast(0.96);
}

/* Die Zeiten. Punktlinie zwischen Tag und Uhrzeit, wie im Schaufensterschild. */
.wayfind__hours{ display: grid; gap: var(--sc-4); align-content: start; }
.wayfind__hours > .sc-label{ margin: 0; }
.wayfind__hours .sc-body{ margin: 0; font-size: var(--sc-t-sm); max-width: 34ch; }
.hours{ margin: 0; display: grid; gap: 0; border-top: 1px solid var(--sc-hairline); }
.hours__row{
  display: flex; align-items: baseline; gap: var(--sc-3);
  padding-block: 0.6em;
  border-bottom: 1px solid var(--sc-hairline);
}
.hours__row dt{ color: var(--sc-ink-soft); }
.hours__row dd{ margin: 0; margin-inline-start: auto; text-align: right; }
.hours__row.is-heute dt,
.hours__row.is-heute dd{ color: var(--sc-ink); }
.hours__row.is-heute dt::after{
  content: " heute";
  font-family: var(--sc-font-mono);
  font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-accent);
  margin-inline-start: 0.6em;
}
.wayfind__tel{
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.18em; text-decoration-color: var(--sc-accent);
  white-space: nowrap;
}

/* Ein ruhiger Auslauf, damit die Bildunterschrift nicht auf dem Schnitt zum
   naechsten Kapitel steht — aber deutlich knapper als eine Kapitelfuge. */
.wayfind{ padding-bottom: clamp(var(--sc-5), 4vh, var(--sc-6)); }

@media (max-width: 860px){
  .wayfind{ grid-template-columns: 1fr; }
  .mapgate{ aspect-ratio: 3 / 2; }
}
@media (max-width: 520px){
  .mapgate{ aspect-ratio: 1 / 1; }
  .mapgate__actions .cookie__btn{ width: 100%; justify-content: center; }
}

/* Der Widerruf steht im Kolophon zwischen den Rechtstexten und sieht aus wie
   sie — ein Knopf, der wie ein Link aussieht, weil er einer ist. */
.colophon__consent{
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--sc-hairline);
  text-underline-offset: 0.18em;
}
.colophon__consent:hover{ text-decoration-color: currentColor; }

/* ------------------------------------------------------ reduzierte bewegung */
@media (prefers-reduced-motion: reduce){
  .drawer__frame{ clip-path: none; }
  .drawer__frame img{ transform: none; filter: none; }
  .drawer__lip{ opacity: 0.35; clip-path: none; }
  .object{ --o: 1; --y: 0; }
}