/* =========================================================================
   San Remo — Eiscafé in Altena

   Nachbau von scoopa.framer.website. Alle Farben, Maße, Radien und Schatten
   sind aus der Vorlage gemessen (referenz/LESUNG.md, referenz/sicherung/).
   Wo eine Zahl nicht zu messen war, steht das an der Stelle als Kommentar —
   eine geschätzte Zahl, die wie eine gemessene aussieht, ist schlimmer als
   eine fehlende.

   Reihenfolge: Tokens · Grundlagen · Bausteine · Bereiche in Seitenreihenfolge
   · Tablet (810–1199.98) · Phone (bis 809.98) · Bewegung.
   ====================================================================== */

/* ------------------------------------------------------------- Tokens --- */

:root {
  /* Die 15 Farbtokens der Vorlage, gemessen. */
  --grund: #fff4e3;          /* Seitengrund, zugleich Schrift auf Dunkel */
  --grund-zwei: #f7e4c3;     /* zweiter Grund — das Sortenkapitel        */
  --dunkel: #38241a;         /* Schrift und dunkle Bereichsfläche        */
  --schrift-zwei: #7a6152;   /* Fließtext                                */
  --gruen: #6e9c4f;
  --gruen-hell: #e4efd2;
  --rosa: #f27ba3;
  --rosa-hell: #fcdce7;
  --gelb: #ffb03a;
  --gelb-hell: #ffe8be;
  --rot: #e23a56;            /* das eine Rot: CTA, Laufband, Schlussfläche */
  --rot-dunkel: #c22b44;
  --braun: #5c3a26;
  --sand: #eac98f;
  --weiss: #ffffff;

  /* Flächen, die kein Token der Vorlage sind, aber benutzt werden. */
  --leiste: rgba(255, 249, 236, 0.92);
  --karte-creme: #fffdf7;
  --karte-sand: #fff9ec;
  --karte-rosa: #fbe3ec;
  --karte-braun: #f3e6d6;
  --karte-gruen: #eaf2dc;
  --karte-gelb: #ffedcb;
  --karte-hafer: #f8ead1;
  --karte-honig: #fff3d9;
  --karte-lehm: #f0e3d9;
  --karte-bluete: #fbe3ed;
  --karte-milch: #fff9ef;
  --chip-flaeche: rgba(255, 255, 255, 0.65);

  /* Linien und durchscheinende Kanten, im Wortlaut aus der Vorlage. */
  --kante: rgba(56, 36, 26, 0.07);
  --kante-stark: rgba(56, 36, 26, 0.12);
  --kante-chip: rgba(56, 36, 26, 0.1);
  --kante-karte: rgba(56, 36, 26, 0.08);
  --strich: rgba(56, 36, 26, 0.18);
  --kante-hell: rgba(255, 244, 227, 0.55);
  --strich-hell: rgba(255, 244, 227, 0.28);
  --linie-hell: rgba(255, 244, 227, 0.14);
  --schrift-hell-halb: rgba(255, 244, 227, 0.5);
  --schrift-hell-drei: rgba(255, 244, 227, 0.72);
  --marke-hell: rgba(255, 244, 227, 0.3);
  --rand-hell-kraeftig: rgba(255, 244, 227, 0.9);
  --kreis-hell-a: rgba(255, 244, 227, 0.07);
  --kreis-hell-b: rgba(255, 244, 227, 0.06);
  --schild-dunkel: rgba(56, 36, 26, 0.5);
  --schatten-buehne: rgba(56, 36, 26, 0.15);

  /* Schatten, im Wortlaut gemessen. */
  --schatten-leiste: rgba(56, 36, 26, 0.08) 0 8px 24px 0;
  --schatten-gross: rgba(56, 36, 26, 0.14) 0 24px 48px 0;
  --schatten-rund: rgba(56, 36, 26, 0.14) 0 20px 40px 0;
  --schatten-klein: rgba(56, 36, 26, 0.12) 0 16px 32px 0;
  --schatten-karte: rgba(56, 36, 26, 0.1) 0 20px 44px 0;
  --schatten-bogen: rgba(56, 36, 26, 0.16) 0 24px 48px 0;

  /* Radien. */
  --radius-pille: 100px;
  --radius-gross: 64px;
  --radius-karte: 36px;
  /* UNGEMESSEN — die Lesung nennt Radien für Mood-Block (28), Sticky-, Visit-
     und Kartenkarte (36), Feed- und Moment-Kachel (22) und Bewertungszettel
     (16), für die Stapelkarten der Speisekarte keinen. 35 ist gesetzt, nicht
     abgelesen. Siehe SPEZIFIKATION.md, Abschnitt 14. */
  --radius-ticket: 35px;
  --radius-block: 28px;
  --radius-foto: 24px;
  --radius-kachel: 22px;
  --radius-hero: 48px;

  /* Schriftgrößen — Desktop. Tablet und Phone setzen sie neu. */
  --titel-1: 96px;      /* H1        */
  --titel-1-zeile: 91.2px;
  --titel-1-sperrung: -2.88px;
  --titel-2: 58px;      /* H2        */
  --titel-2-zeile: 58px;
  --titel-2-sperrung: -1.16px;
  --titel-3: 32px;      /* Kartentitel */
  --lead: 20px;
  --lead-zeile: 30px;
  --lead-sperrung: -0.4px;
  --text: 16px;
  --text-zeile: 24.8px;
  --text-sperrung: -0.32px;

  /* Bereichspolster. */
  --polster: 100px 40px;
  --polster-flaeche: 110px 40px;
  --schale: 1120px;
}

/* --------------------------------------------------------- Grundlagen --- */

/* Die Vorlage setzt antialiased auf :root UND body. Ohne das wirken helle
   Schrift auf dunklem Grund zu dick und die Farbe zu hell — genau der Fehler,
   der bei Haarfein dreimal als „zu dick und falsche Farbe" gemeldet wurde. */
:root {
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--dunkel);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 12px 20px;
  background: var(--dunkel);
  color: var(--grund);
  border-radius: 0 0 12px 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

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

/* Die großen Überschriften laufen über font-variation-settings bei
   font-weight 400. Wer nur das Gewicht setzt, baut sie in 400 — sie wirken
   dann dünn. */
.titel-1, .titel-2, .titel-3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 96, 'wght' 800;
}

.titel-1 {
  font-size: var(--titel-1);
  line-height: var(--titel-1-zeile);
  letter-spacing: var(--titel-1-sperrung);
}

.titel-2 {
  font-size: var(--titel-2);
  line-height: var(--titel-2-zeile);
  letter-spacing: var(--titel-2-sperrung);
}

.titel-3 {
  font-size: var(--titel-3);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.lead {
  font-weight: 500;
  font-size: var(--lead);
  line-height: var(--lead-zeile);
  letter-spacing: var(--lead-sperrung);
  color: var(--schrift-zwei);
}

.fliesstext {
  font-weight: 400;
  font-size: var(--text);
  line-height: var(--text-zeile);
  letter-spacing: var(--text-sperrung);
  color: var(--schrift-zwei);
}

.versal {
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.schale {
  width: 100%;
  max-width: var(--schale);
  margin: 0 auto;
}

/* --------------------------------------------------------- Bausteine --- */

/* Knopf — Pille, Höhe 50, padding 15/26, gap 8, Beschriftung Baloo 600/16.
   Der Rahmen sitzt als ::after mit 1,5px auf allen vier Seiten. */
.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--radius-pille);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--dunkel);
  transition: background-color 0.2s cubic-bezier(0.44, 0, 0.56, 1),
              color 0.2s cubic-bezier(0.44, 0, 0.56, 1);
}

.knopf__symbol { width: 16px; height: 16px; flex: none; }

.knopf--voll {
  background: var(--rot);
  color: var(--grund);
}
.knopf--voll:hover { background: var(--rot-dunkel); }

.knopf--umriss::after,
.knopf--anruf::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--dunkel);
  border-radius: inherit;
  pointer-events: none;
}
.knopf--umriss:hover,
.knopf--anruf:hover {
  background: var(--dunkel);
  color: var(--grund);
}

/* Auf dunklem Grund kehren sich Füllung und Rahmen um. */
.knopf--hell {
  background: var(--grund);
  color: var(--dunkel);
}
.knopf--hell:hover { background: var(--weiss); }

.knopf--umriss-hell {
  color: var(--grund);
}
.knopf--umriss-hell::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--kante-hell);
  border-radius: inherit;
  pointer-events: none;
}
.knopf--umriss-hell:hover {
  background: var(--grund);
  color: var(--dunkel);
}

/* Chip — 36px hoch, Rahmen 1px, Fläche halbtransparent weiß. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--kante-chip);
  border-radius: var(--radius-pille);
  background: var(--chip-flaeche);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--dunkel);
}
.chip svg { width: 16px; height: 16px; flex: none; }

.chip--schlicht { padding: 8px 14px; }

/* Eyebrow-Pille — volle Farbfläche, Baloo 700/13 versal. */
.aufkleber {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 14px;
  border-radius: var(--radius-pille);
  background: var(--gelb-hell);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--dunkel);
}
.aufkleber svg { width: 16px; height: 16px; flex: none; }
.aufkleber--rosa { background: var(--rosa-hell); padding: 8px 14px; }
.aufkleber--gruen { background: var(--gruen-hell); }
.aufkleber--sand { background: var(--sand); }
.aufkleber--hell { background: var(--marke-hell); color: var(--grund); }

/* Tropfkante — der Pfad stammt wörtlich aus der Vorlage (viewBox 0 0 1440 170).
   Sie sitzt am oberen Rand eines Bereichs, gefüllt mit der Farbe des Bereichs
   DARÜBER, und hängt 16px in ihn hinein. */
.tropfkante {
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 62px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.tropfkante svg {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: max(100%, 1440px);
  transform: translateX(-50%);
}

.punkt {
  position: absolute;
  border-radius: 100%;
}

/* --------------------------------------------------------- Kopfleiste --- */

/* Schwebende Pille. Sie schrumpft nicht und färbt sich nicht — Höhe, Breite,
   Farbe, Radius und Schatten sind bei scrollY 0, 300 und 3000 identisch. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 9;
  width: 100%;
  max-width: 1208px;
  margin: 0 auto;
  padding: 14px 24px 0;
}

.kopf__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1160px;
  height: 64px;
  margin: 0 auto;
  padding: 0 10px 0 22px;
  border: 1px solid var(--kante);
  border-radius: var(--radius-pille);
  background: var(--leiste);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--schatten-leiste);
}

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.marke__zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background: var(--rot);
  flex: none;
}
.marke__zeichen svg { width: 20px; height: 20px; color: var(--grund); }

.marke__name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.54px;
}

.kopf__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.kopf__links a {
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.44, 0, 0.56, 1);
}
.kopf__links a:hover,
.kopf__links a[aria-current='page'] { color: var(--rot); }

.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Telefonkreis 42×42, Rahmen 1,5px. */
.kreisknopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 100%;
  text-decoration: none;
  flex: none;
  transition: background-color 0.2s cubic-bezier(0.44, 0, 0.56, 1),
              color 0.2s cubic-bezier(0.44, 0, 0.56, 1);
}
.kreisknopf::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--dunkel);
  border-radius: 100%;
}
.kreisknopf svg { width: 18px; height: 18px; }
.kreisknopf:hover { background: var(--dunkel); color: var(--grund); }

.burger {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background: transparent;
  color: var(--dunkel);
  cursor: pointer;
}
.burger::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--dunkel);
  border-radius: 100%;
}
.burger svg { width: 24px; height: 24px; }
.burger span { display: block; }

/* Schublade auf dem Telefon. */
.schublade {
  position: absolute;
  top: 80px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 22px 26px;
  border: 1px solid var(--kante);
  border-radius: var(--radius-karte);
  background: var(--leiste);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--schatten-leiste);
  overflow: hidden;
}
.schublade[hidden] { display: none; }
.schublade ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
/* Nur die Navigationsliste der Schublade — die Knöpfe darunter behalten ihre
   eigene Größe (Baloo 2 600/16, Höhe 50). Ein Selektor auf `a[href^='#']`
   greift auch auf „Route planen" und macht ihn kleiner als seinen Nachbarn. */
.schublade ul a {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.schublade__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.schublade__zeile {
  font-weight: 600;
  font-size: 13px;
  color: var(--schrift-zwei);
}

/* --------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--grund);
}

/* Die Vorlage legt hier einen animierten WebGL-Shader mit weichen Cremebändern.
   Ohne WebGL bauen wir dieselbe Wirkung als gezeichnete Wellenbänder.
   ungemessen — die Geschwindigkeit des Shaders war nicht auszulesen
   (preserveDrawingBuffer:false), die Drift ist gewählt. */
/* Sechs gezeichnete Wellenbahnen als Grund. Die Vorlage legt hier einen
   animierten WebGL-Shader mit weichen Cremebändern; ohne WebGL sind es diese
   Bahnen.

   Seit dem 04.09.2026 ein **geteilter Baustein**: Er lag vorher als
   `.hero__grund` am Hero fest, trägt jetzt aber auch den Kopf der
   Speisekarte. Zwei Seiten, eine Definition — sechs Bézierbahnen zweimal zu
   pflegen wäre die sichere Art, sie auseinanderlaufen zu lassen.

   Der Elternknoten muss `position: relative` tragen und der Inhalt darüber
   `z-index: 1`, sonst liegen die Bahnen über der Schrift. */
.wellengrund {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--grund-zwei);
}
.wellengrund svg {
  position: absolute;
  top: 0;
  left: 50%;
  /* Breiter als das Fenster, damit die Bahnen an beiden Rändern hinauslaufen
     und keine sichtbare Kante entsteht. */
  width: max(200%, 2880px);
  height: 100%;
  transform: translateX(-50%);
  opacity: 0.3;
}

.hero__innen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  padding: 132px 40px 40px;
}

/* Rotierendes Abzeichen — gestrichelter Ring 2px, 39,8 °/s ≈ 9,0 s je
   Umdrehung, linear, endlos.

   Es sitzt knapp innerhalb der Schale, nicht an der Fensterkante: in der
   Vorlage liegt es bei 1440 auf x 1172..1267, die rechte Schalenkante ist
   1280 — also 172px vom Fensterrand. Gerechnet wird das gegen den 1200px
   breiten Innenkasten des Heros (600 − 52 = 548), damit der Abstand auf
   breiten Schirmen mit der Schale mitwandert statt an der Fensterkante zu
   kleben. Auf 1440 ergibt das genau die gemessenen 172. */
.hero__abzeichen {
  position: absolute;
  top: 64px;
  right: calc(50% - 548px);
  width: 96px;
  height: 96px;
  z-index: 2;
}
.hero__ring {
  position: absolute;
  inset: 0;
  border: 2px dashed var(--rot);
  border-radius: var(--radius-pille);
  animation: dreht 9.045s linear infinite;
}
.hero__kern {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-pille);
  background: var(--rosa-hell);
}
.hero__kern svg { width: 26px; height: 26px; color: var(--rot); }

@keyframes dreht { to { transform: rotate(360deg); } }

.hero__aufkleber {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.hero__schlagzeile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.hero__schlagzeile em { font-style: normal; color: var(--rot); }

.hero__zeile-zwei {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

/* Typewriter: Tippen ~100ms/Zeichen, Standzeit ~1100ms, Löschen ~50ms/Zeichen,
   Pause leer ~1100ms. Der Cursor ist ein senkrechter Balken und steht. */
.tipper { white-space: pre; }
.tipper::after {
  content: '';
  display: inline-block;
  width: 0.06em;
  height: 0.72em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: baseline;
}

.hero__lead {
  max-width: 540px;
  text-align: center;
}

.hero__knoepfe,
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hero__knoepfe { gap: 12px; }
.hero__chips { gap: 10px; }

/* Collage — 1120×470, unten vom Laufband angeschnitten. */
.hero__collage {
  position: relative;
  width: 100%;
  max-width: var(--schale);
  height: 470px;
}

.collage__bild {
  position: absolute;
  overflow: hidden;
}
.collage__bild img { width: 100%; height: 100%; object-fit: cover; }

.collage__gross {
  top: 40px;
  left: 150px;
  width: 400px;
  height: 400px;
  border-radius: var(--radius-hero);
  box-shadow: var(--schatten-gross);
}
.collage__rund {
  top: 90px;
  right: 240px;
  width: 270px;
  height: 270px;
  border-radius: 100%;
  box-shadow: var(--schatten-rund);
}
.collage__klein {
  top: 10px;
  right: 90px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  box-shadow: var(--schatten-klein);
}

.collage__zettel {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--radius-pille);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.collage__zettel--rot {
  top: 6px;
  left: 90px;
  background: var(--rot);
  color: var(--grund);
}
.collage__zettel--gelb {
  bottom: 70px;
  right: 180px;
  background: var(--gelb);
  color: var(--dunkel);
}

/* Dritter Zettel, nicht aus der Vorlage. Sie hat zwei, weil sie zwei
   Bildmotive benennt. Seit dem 04.09.2026 tragen wir drei — Waffel, Eis und
   Kaffee, die drei Dinge der Schlagzeile — und das kleine Foto oben rechts
   stand als einziges ohne Beschriftung da. Braun, weil es der Kaffee ist. */
.collage__zettel--braun {
  top: 174px;
  right: 52px;
  background: var(--braun);
  color: var(--grund);
}

.collage__punkt-gruen {
  top: 20px;
  left: 580px;
  width: 22px;
  height: 22px;
  background: var(--gruen);
}
.collage__punkt-rot {
  bottom: 60px;
  left: 120px;
  width: 14px;
  height: 14px;
  background: var(--rot);
}

.collage__streusel {
  position: absolute;
  top: 150px;
  left: 150px;
  width: 110px;
  height: 92px;
  z-index: 2;
  pointer-events: none;
}
.collage__streusel i {
  position: absolute;
  display: block;
  border-radius: var(--radius-pille);
}
.collage__streusel i:nth-child(1) { top: 0; left: 52px; width: 20px; height: 6px; background: var(--gelb); }
.collage__streusel i:nth-child(2) { top: 62px; left: 74px; width: 16px; height: 6px; background: var(--gruen); }
.collage__streusel i:nth-child(3) { top: 70px; left: 28px; width: 8px; height: 8px; border-radius: 100%; background: var(--rot); }

/* Laufband — 35,0 px/s nach links; auf Hover Drosselung auf 14,0 px/s. */
.laufband {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px 40px;
  background: var(--rot);
  overflow: hidden;
}
.laufband__zug {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: laeuft var(--laufzeit, 40s) linear infinite;
}
.laufband:hover .laufband__zug { animation-duration: var(--laufzeit-langsam, 100s); }
.laufband ul {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
}
.laufband li {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grund);
  white-space: nowrap;
}
.laufband li svg { width: 16px; height: 16px; color: var(--grund); opacity: 0.7; }

@keyframes laeuft { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------ Sorten --- */

.sorten {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  padding: var(--polster);
  background: var(--grund-zwei);
}

.bereich__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 760px;
  text-align: center;
}
.bereich__kopf .lead { max-width: 520px; }

.sorten__koerper {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  max-width: var(--schale);
}

/* Klebende Spalte, top 110px — sie tauscht ihren Inhalt synchron zum
   Durchscrollen der rechten Spalte. */
.sorten__spalte {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 440px;
  flex: none;
}

.sortenkarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 26px;
  border: 1px solid var(--kante-karte);
  border-radius: var(--radius-karte);
  background: var(--karte-creme);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
  transition: background-color 0.45s cubic-bezier(0.44, 0, 0.56, 1);
}

.sortenkarte__bild {
  position: relative;
  width: 100%;
  height: 270px;
  border-radius: var(--radius-foto);
  overflow: hidden;
}
.sortenkarte__bild img { width: 100%; height: 100%; object-fit: cover; }

.sortenkarte__zaehler {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: var(--radius-pille);
  background: var(--karte-creme);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1.04px;
  text-transform: uppercase;
}

.sortenkarte__namenzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sortenkarte__name {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1.82px;
  text-transform: uppercase;
}
.sortenkarte__farbpunkt {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  flex: none;
  transition: background-color 0.45s cubic-bezier(0.44, 0, 0.56, 1);
}

.sortenkarte__punkte {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sortenkarte__punkte i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: var(--kante-stark);
  transition: background-color 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}
.sortenkarte__punkte i[data-aktiv] { background: var(--rot); }

.sorten__liste {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1 0 0;
  min-width: 0;
}

.sorte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 360px;
  padding: 36px;
  border: 1px solid var(--kante-stark);
  border-radius: var(--radius-block);
  background: var(--karte-sand);
  overflow: hidden;
}
.sorte__kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sorte__nummer {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.88px;
}
.sorte__symbole { display: flex; align-items: center; gap: 8px; }
.sorte__symbole svg { width: 20px; height: 20px; }
.sorte__titel {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
}
.sorte__bild {
  width: 130px;
  height: 130px;
  border-radius: 100%;
  overflow: hidden;
  flex: none;
}
.sorte__bild img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- Speisekarte --- */

.speisekarte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  padding: var(--polster);
  background: var(--grund);
}

.speisekarte__kopf {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 93%;
  max-width: var(--schale);
}
.speisekarte__kopf-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 620px;
  flex: 1 0 0;
}
.speisekarte__kopf-rechts { max-width: 300px; }

/* Bühne: sticky, fensterhoch. Vier unsichtbare Auslöseblöcke à 700px liefern
   den Scrollweg. */
.speisekarte__buehne {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.speisekarte__szene {
  container-type: inline-size;
  position: relative;
  /* Die gefaecherten Karten und der 1026px breite Schatten ragen seitlich
     hinaus; senkrecht muss sichtbar bleiben, weil die Karten nach oben
     wegfliegen. */
  overflow-x: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.speisekarte__riesenwort {
  position: relative;
  z-index: 0;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  /* 168px ist der gemessene Desktopwert; cqw verhindert, dass das Wort auf
     breiten Schirmen über den Satzspiegel hinauswächst. */
  font-size: min(168px, 15cqw);
  line-height: 1.2;
  color: var(--dunkel);
  white-space: pre;
  text-align: center;
}

.speisekarte__stapel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.speisekarte__schatten {
  position: absolute;
  top: calc(50% - 259.5px);
  left: calc(50% - 513px);
  width: 1026px;
  height: 519px;
  border-radius: 50%;
  background: var(--schatten-buehne);
  filter: blur(60px);
  opacity: 0.02;
  z-index: 1;
  pointer-events: none;
}

/* Ticketkarte 300×380. Ruhelage gefächert −4,1° / −12,1° / −20,1°; je Karte
   über einen 700px-Block auf −70° und y −800px.

   Der Stapel hängt an der Mitte der Bühne, nicht an ihrem unteren Rand: in der
   Vorlage fallen Wortmitte und Kartenmitte zusammen. Über `bottom` wandert der
   Versatz mit der Fensterhöhe (10px bei 700, 310px bei 1300) — die Karten
   rutschen dem Riesenwort davon. */
.ticket {
  position: absolute;
  top: calc(50% - 190px);
  left: calc(50% - 150px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 380px;
  border-radius: var(--radius-ticket);
  overflow: hidden;
  will-change: transform;
  transform-origin: 50% 50%;
}
.ticket--01 { background: var(--karte-milch); }
.ticket--02 { background: var(--karte-bluete); }
.ticket--03 { background: var(--karte-lehm); }
.ticket--04 { background: var(--karte-honig); }

.ticket__band {
  position: relative;
  width: 100%;
  height: 200px;
  flex: none;
  overflow: hidden;
}
.ticket__band img { width: 100%; height: 100%; object-fit: cover; }

.ticket__marke {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--schild-dunkel);
  color: var(--grund);
}

/* Schmelznaht am Fuß des Fotobandes, gefüllt in der Farbe des Kartenkörpers.
   Pfad wörtlich aus der Vorlage (viewBox 0 0 640 44). */
.ticket__naht {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 22px;
  overflow: hidden;
}
.ticket__naht svg { width: 100%; height: 100%; }

.ticket__koerper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  flex: 1 0 0;
  padding: 14px 24px 20px;
}

.ticket__geist {
  position: absolute;
  bottom: -18px;
  right: 10px;
  z-index: 0;
  opacity: 0.32;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  font-size: 104px;
  line-height: 1;
  color: var(--sand);
}

.ticket__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.ticket__name {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
}
.ticket__satz {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--schrift-zwei);
}

.ticket__perforation {
  position: absolute;
  bottom: 42px;
  left: 24px;
  right: 24px;
  height: 1px;
  /* Gestrichelte Linie auf Hell: 1,5px, rgba(56,36,26,0.18) — gemessen.
     `--strich-hell` ist die Variante auf Dunkel.

     Chrome meldet für 1,5px-Rahmen im `getComputedStyle` 1px zurück (er
     schneidet auf ganze Pixel ab, auch bei doppelter Pixeldichte). Das gilt
     hier wie beim Umriss-Knopf und beim Strich auf der Besuchskarte und ist
     kein Fehler dieser Regel — es gilt in der Vorlage genauso. */
  border-top: 1.5px dashed var(--strich);
  z-index: 1;
}

.ticket__fuss {
  position: absolute;
  bottom: 18px;
  left: 24px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ticket__fuss i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: var(--gelb);
}
.ticket__fuss span {
  font-weight: 600;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--schrift-zwei);
}

/* Streusel-Regen: 20 Partikel, Fall 10,02–13,0s linear endlos, Startverzögerung
   negativ und zufällig, Spin genau die halbe Dauer. */
.streusel {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
/* Jedes Teilchen sitzt oben in einer fensterhohen Spalte — erst dadurch
   entspricht die 110 % der Fallhoehe der Buehne und nicht der Teilchenhoehe. */
.streusel span {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  animation: faellt var(--fall) linear infinite;
  animation-delay: var(--start);
}
.streusel span i {
  display: block;
  width: var(--breit);
  height: var(--hoch);
  border-radius: 999px;
  background: var(--farbe);
  animation: dreht-teil var(--spin) linear infinite;
  animation-delay: var(--start);
}

@keyframes faellt {
  0% { transform: translate3d(0, -10%, 0); }
  100% { transform: translate3d(var(--drift), 110%, 0); }
}
@keyframes dreht-teil {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(var(--spin-winkel)); }
}

.speisekarte__hinweis {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--schrift-zwei);
}
.speisekarte__hinweis svg { width: 16px; height: 16px; }

.speisekarte__ausloeser {
  width: 100%;
  /* Muss mit `STAPEL_WEG` in main.js uebereinstimmen. Gemessen waren 700;
     auf Ansage des Betreibers vom 04.09.2026 auf 620 gekuerzt, weil nach dem
     Stapel ein Kapitel folgt, das die Vorlage nicht hat. */
  height: 620px;
  pointer-events: none;
}


/* ---------------------------------------------------------- Kapitel --- */

/* Die elf Oberbegriffe unter dem Kartenstapel und, in derselben Gestalt, die
   Kapitelköpfe auf speisekarte.html.

   NICHT AUS DER VORLAGE. scoopa.framer.website hat keine Speisekarte — dort
   endet das Kapitel mit dem Stapel. Der Bereich ist am 04.09.2026 dazugebaut,
   weil der Betrieb eine echte Karte hat und sie gezeigt werden soll. Er
   benutzt ausschließlich Tokens und Bausteine der Vorlage: Kartenradius 36,
   Kartenschatten, rundes Foto wie im Hero, Rot nur für den Weg weiter. Neu
   ist die Anordnung, nicht die Sprache. */

/* Der Bereich, der die elf Kapitel traegt. Er hat den zweiten Grund, damit
   die nahezu weissen Kapitelkarten darauf stehen statt darin zu verschwinden —
   und damit der Wechsel nach dem Kartenstapel sichtbar ist. */
.kapitelbereich {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--polster);
  background: var(--grund-zwei);
}

.kapitel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 93%;
  max-width: var(--schale);
}

.kapitel__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  text-align: center;
}

.kapitel__gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.kapitel__karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 28px 24px;
  border-radius: var(--radius-karte);
  background: var(--karte-creme);
  box-shadow: var(--schatten-karte);
}

/* Das runde Zuordnungsbild. 140 px, weil die Kartenseiten des Betriebs nicht
   mehr hergeben (assets/zuschnitte.mjs) — und weil diese Seite runde Fotos
   ohnehin in dieser Größenordnung führt: Hero 150 und 270, Sorten 170. */
.kapitel__bild {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  align-self: center;
  box-shadow: var(--schatten-klein);
}
.kapitel__bild img { width: 100%; height: 100%; object-fit: cover; }

.kapitel__name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  /* Wie alle großen Überschriften dieser Seite: die Achse trägt das Gewicht,
     nicht font-weight. Wer nur 400 liest, baut sie dünn nach. */
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

.kapitel__kurz {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--schrift-zwei);
}

.kapitel__auszug {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--kante);
}

.kapitel__zeile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
}

.kapitel__pos { color: var(--dunkel); }

/* Die Führungslinie zwischen Position und Preis. Sie wächst in die Lücke und
   bleibt damit bei jeder Textlänge gleich weit vom Preis entfernt. */
.kapitel__linie {
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  transform: translateY(-3px);
  background: var(--strich);
  opacity: 0.5;
}

.kapitel__preis {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  color: var(--dunkel);
  white-space: nowrap;
}

/* Die Zusatzstoffziffern. Klein, aber nicht so klein, dass sie verschwinden —
   sie sind eine Pflichtangabe, keine Verzierung. */
.kapitel__pos sup,
.gang__pos sup {
  /* Siehe speisekarte.css: Pflichtangabe, darf klein sein, muss lesbar bleiben. */
  font-size: 0.75em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  color: var(--schrift-zwei);
}

.kapitel__mehr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--rot);
}
.kapitel__mehr:hover { color: var(--rot-dunkel); }
.kapitel__pfeil { width: 15px; height: 15px; flex: none; }

.kapitel__abschluss { display: flex; justify-content: center; }
/* --------------------------------------------------------- Geschichte --- */

.geschichte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--polster-flaeche);
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  background: var(--rosa-hell);
  overflow: hidden;
}

/* Geschwungene Linie, Pfad wörtlich aus der Vorlage (viewBox 0 0 1000 320). */
.geschichte__schwung {
  position: absolute;
  top: -10px;
  left: 120px;
  right: -120px;
  height: 339px;
  opacity: 0.65;
  z-index: 0;
  pointer-events: none;
}
.geschichte__schwung svg { width: 100%; height: 100%; }

.geschichte__innen {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--schale);
}

.geschichte__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex: 1 0 0;
  min-width: 0;
}
.geschichte__text .lead { max-width: 520px; }

.geschichte__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.geschichte__bild {
  position: relative;
  width: 460px;
  height: 520px;
  flex: none;
}
.geschichte__bogen {
  position: absolute;
  top: 0;
  left: 0;
  width: 440px;
  height: 470px;
  border-radius: 220px 220px 48px 48px;
  overflow: hidden;
  box-shadow: var(--schatten-bogen);
}
.geschichte__bogen img { width: 100%; height: 100%; object-fit: cover; }
.geschichte__mango {
  top: 30px;
  right: 40px;
  width: 20px;
  height: 20px;
  background: var(--gelb);
}

/* ------------------------------------------------------------ Besuch --- */

.besuch {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--polster-flaeche);
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  background: var(--gruen-hell);
  overflow: hidden;
}

.besuch__innen {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
  max-width: var(--schale);
}

/* Gemessen sind 578 : 484 bei 36px Abstand — zusammen 1098 im 1120er
   Satzspiegel. Die Breiten stehen deshalb als feste flex-basis da und nicht
   als Wachstumsanteile: bei `flex-basis: 0` und `box-sizing: border-box` kann
   die dunkle Karte nicht schmaler werden als ihre 96px Polsterung. Die werden
   dann vorab abgezogen und obendrauf gelegt — die Karte wird 633 breit, das
   Terrassenfoto verliert 35px.

   Der Rest von 22px liegt rechts, weil der Bereich linksbündig ist und die
   linke Kante damit auf der Schale sitzt wie in jedem anderen Bereich. Die
   x-Lage der beiden Spalten ist ungemessen: die Ganzseitenaufnahme der
   Vorlage zeigt den Bereich leer (Scroll-Einblendung nie ausgelöst), und die
   Lesung nennt nur die Breiten. Siehe SPEZIFIKATION.md, Abschnitt 14. */
.besuch__karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex: 0 1 578px;
  min-width: 0;
  padding: 48px;
  border-radius: var(--radius-karte);
  background: var(--dunkel);
  color: var(--grund);
  overflow: hidden;
}
.besuch__karte .titel-2 { color: var(--grund); }
.besuch__strich {
  width: 100%;
  height: 1px;
  border-top: 1.5px dashed var(--strich-hell);
}
.besuch__adresse {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--grund);
}
.besuch__adresse a { text-decoration: none; }
.besuch__adresse a:hover { text-decoration: underline; }
.besuch__zeiten {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--schrift-hell-drei);
}
.besuch__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 8px;
}

.besuch__ort {
  display: flex;
  flex-direction: column;
  flex: 0 1 484px;
  min-width: 0;
  border: 1px solid var(--kante-karte);
  border-radius: var(--radius-karte);
  background: var(--karte-sand);
  overflow: hidden;
}
/* Das Seitenverhaeltnis des Originals (2048x1295), damit das ganze Bild zu
   sehen ist. Vorher stand hier eine feste Hoehe von 250px, und `cover` schnitt
   oben und unten weg — die Baumkrone ueber den Tischen fiel heraus. */
.besuch__foto { width: 100%; aspect-ratio: 2048 / 1295; flex: none; }
.besuch__foto img { width: 100%; height: 100%; object-fit: cover; }

/* An dieser Stelle steht in der Vorlage eine Google-Maps-Einbettung. Sie geht
   beim Laden ungefragt nach draußen und ist deshalb ersetzt: gestaltete
   Fläche mit Anschrift, der Verweis führt erst auf Klick hinaus. */
.besuch__tafel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 30px;
}
.besuch__tafel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0;
}
.besuch__tafel dt {
  font-weight: 600;
  font-size: 13px;
  color: var(--schrift-zwei);
}
.besuch__tafel dd {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
}
.besuch__tafel a { text-decoration: none; }


/* ---------------------------------------------------------- Ortskarte --- */

/* Ein Bild, keine Einbettung — siehe den Kommentar in index.html. Deshalb
   steht hier auch nichts mehr von Vorschaltflaeche, Knopf oder geladenem
   Zustand: es gibt keinen Zustand, das Bild ist einfach da. */

.ortskarte {
  /* Eigenes Kind von `.besuch`, nicht Teil der zweispaltigen Reihe darueber —
     dort war sie eine dritte Spalte und hat die beiden anderen erdrueckt. */
  width: 100%;
  max-width: var(--schale);
  margin: 36px 0 0;
}

.ortskarte img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-karte);
  box-shadow: inset 0 0 0 1px var(--kante-karte);
}

.ortskarte__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px 4px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--schrift-zwei);
}

.ortskarte__zeile a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  text-decoration: none;
  color: var(--rot);
}
.ortskarte__zeile a:hover { color: var(--rot-dunkel); }

/* --------------------------------------------------------- Abschluss --- */

.abschluss {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 130px 40px;
  background: var(--rot);
  color: var(--grund);
  overflow: clip;
}

.abschluss__kreis-a {
  top: -80px;
  left: -100px;
  width: 420px;
  height: 420px;
  background: var(--kreis-hell-a);
  z-index: 0;
}
.abschluss__kreis-b {
  bottom: -100px;
  right: -60px;
  width: 340px;
  height: 340px;
  background: var(--kreis-hell-b);
  z-index: 0;
}

.abschluss__foto {
  position: absolute;
  top: 80px;
  right: 90px;
  z-index: 1;
  width: 170px;
  height: 170px;
  border: 6px solid var(--rand-hell-kraeftig);
  border-radius: 100%;
  overflow: hidden;
}
.abschluss__foto img { width: 100%; height: 100%; object-fit: cover; }

.abschluss__zettel {
  position: absolute;
  top: 184px;
  left: 150px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--radius-pille);
  background: var(--sand);
  color: var(--dunkel);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}

.abschluss__titel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  text-align: center;
  text-wrap: balance;
  color: var(--grund);
  /* 76px ist der gemessene Desktopwert der Vorlage. */
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: -2.28px;
}

.abschluss__zeile {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 1.36px;
  text-transform: uppercase;
  color: var(--schrift-hell-drei);
  text-align: center;
}

.abschluss__knoepfe {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding-top: 10px;
}

.abschluss__streusel {
  position: absolute;
  top: 108px;
  left: 252px;
  width: 52px;
  height: 36px;
  z-index: 1;
  pointer-events: none;
}
.abschluss__streusel i { position: absolute; display: block; border-radius: 999px; }
.abschluss__streusel i:nth-child(1) { top: 0; left: 20px; width: 20px; height: 6px; background: var(--rand-hell-kraeftig); }
.abschluss__streusel i:nth-child(2) { top: 22px; left: 0; width: 16px; height: 6px; background: var(--gelb); }
.abschluss__streusel i:nth-child(3) { top: 12px; left: 42px; width: 8px; height: 8px; border-radius: 100%; background: var(--rosa-hell); }

/* --------------------------------------------------------- Fußzeile --- */

.fusszeile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 72px 40px 0;
  background: var(--dunkel);
  color: var(--grund);
  overflow: hidden;
}

.fusszeile__innen {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: var(--schale);
}

.fusszeile__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 420px;
  flex: none;
}
.fusszeile__name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -1.12px;
}
.fusszeile__satz {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--schrift-hell-drei);
}
.fusszeile__sozial { display: flex; align-items: center; gap: 10px; }
.fusszeile__sozial a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--marke-hell);
  border-radius: var(--radius-pille);
  color: var(--grund);
  transition: background-color 0.2s cubic-bezier(0.44, 0, 0.56, 1),
              color 0.2s cubic-bezier(0.44, 0, 0.56, 1);
}
.fusszeile__sozial a:hover { background: var(--grund); color: var(--dunkel); }
.fusszeile__sozial svg { width: 18px; height: 18px; }

/* Gemessen: 420 : 378 bei x 160 / x 902 — der rechte Block hat also eine
   eigene Breite und wächst nicht mit seinem Inhalt. Ohne die Breite steht er
   359 breit bei x 921 und die Fußzeile schließt rechts nicht mit der Schale
   ab. */
.fusszeile__spalten {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  flex: none;
  width: 378px;
}
.fusszeile__spalte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.fusszeile__spalte h2 {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--grund);
}
.fusszeile__spalte a,
.fusszeile__spalte span {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--schrift-hell-drei);
  text-decoration: none;
}
.fusszeile__spalte a:hover { color: var(--grund); }
.fusszeile__spalte .fusszeile__zeiten {
  font-weight: 400;
  font-size: 13px;
  color: var(--schrift-hell-halb);
}

.fusszeile__unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--schale);
  padding-top: 24px;
  border-top: 1px solid var(--linie-hell);
}
.fusszeile__unten p,
.fusszeile__unten a {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: var(--schrift-hell-halb);
  text-decoration: none;
}
.fusszeile__unten a:hover { color: var(--grund); }

/* Der Credit. Er ist Werbung für den Betrieb, der die Seite gebaut hat, und
   steht deshalb sichtbar — aber nicht lauter als die Zeile des Kunden.
   „Umgesetzt" und nicht „designt": die Gestaltung ist ein Nachbau, eine
   Design-Urheberschaft wäre hier auf beiden Seiten schief. */
.fusszeile__credit a {
  color: var(--sand);
  text-decoration: none;
  font-weight: 600;
}
.fusszeile__credit a:hover { color: var(--grund); text-decoration: underline; }

/* Rechtliches in der Fußzeile.

   Bis zum 04.09.2026 stand das Impressum hier als aufklappbarer Kasten mit
   fünf Platzhaltern in eckigen Klammern. Es ist jetzt eine eigene Seite, und
   daneben steht die Datenschutzerklärung: beide müssen von jeder Seite aus
   ohne Suchen erreichbar sein, und ein Kasten, den man erst aufklappt, ist
   das nicht. Die Fassung als eigene Seite ist zudem die, die sich verlinken
   lässt — ein aufgeklappter Kasten hat keine Adresse.

   Der Stil bleibt der der Fußzeile: klein, versal, hell auf Dunkel. */
.fusszeile__rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: var(--schale);
  padding: 4px 0 12px;
}
.fusszeile__rechtliches a {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--schrift-hell-drei);
  transition: color 0.2s cubic-bezier(0.44, 0, 0.56, 1);
}
.fusszeile__rechtliches a:hover { color: var(--grund); }

/* ------------------------------------------------- Rechtstextseiten --- */

/* Impressum und Datenschutz. Zwei sehr textlastige Seiten ohne eigene
   Bausteine — sie leihen sich Grund, Schrift und Maße vom Rest und setzen
   nur die Satzbreite, damit lange Absätze lesbar bleiben. */
.rechtstext {
  display: flex;
  justify-content: center;
  padding: 160px 40px 96px;
  background: var(--grund);
}
.rechtstext__innen {
  width: 100%;
  /* 720px statt der 1120px des Satzspiegels: Fließtext über die volle
     Schalenbreite ist bei 16px kaum noch zeilenweise zu verfolgen. */
  max-width: 720px;
}
.rechtstext h1 { margin-bottom: 12px; }
.rechtstext h2 {
  margin: 40px 0 10px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
}
.rechtstext h3 {
  margin: 24px 0 6px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
}
.rechtstext p,
.rechtstext li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--schrift-zwei);
}
.rechtstext p { margin-bottom: 12px; }
.rechtstext ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: disc;
}
.rechtstext a { color: var(--rot); }
.rechtstext strong { color: var(--dunkel); font-weight: 600; }


@media (max-width: 809.98px) {
  /* Dieselbe Luft wie auf allen anderen Seiten — siehe speisekarte.css. */
  .rechtstext { padding: 48px 20px 72px; }
}

/* Umriss-Wortmarke — Braah One, Zeile 0,75em, Kontur 2px, Füllung leer. */
.fusszeile__wortmarke {
  container-type: inline-size;
  width: 100%;
  padding-top: 8px;
  overflow: hidden;
}
.fusszeile__wortmarke p {
  margin: 0;
  font-family: 'Braah One', system-ui, sans-serif;
  font-weight: 400;
  /* 300px ist der gemessene Desktopwert; cqw deckelt ihn auf schmalen Schirmen. */
  font-size: min(300px, 16.5cqw);
  line-height: 0.75em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--grund);
}

/* ============================================ Tablet — 810 bis 1199.98 === */

@media (min-width: 810px) and (max-width: 1199.98px) {
  :root {
    --titel-1: 64px;
    --titel-1-zeile: 60.8px;
    --titel-1-sperrung: -1.92px;
    --titel-2: 44px;
    --titel-2-zeile: 44px;
    --titel-2-sperrung: -0.88px;
    --lead: 16px;
    --lead-zeile: 24px;
    --lead-sperrung: -0.32px;
    --polster: 80px 32px;
    --polster-flaeche: 80px 32px;
  }

  .hero__innen { padding: 120px 32px 32px; }
  .hero__abzeichen { top: 40px; right: 24px; }
  .hero__zeile-zwei { gap: 15px; }
  .hero__collage { height: 430px; }
  .collage__gross { width: 340px; height: 340px; top: 30px; left: 40px; }
  .collage__rund { width: 220px; height: 220px; right: 90px; }
  .collage__klein { width: 120px; height: 120px; top: 0; right: 20px; }
  .collage__zettel--rot { top: 0; left: 20px; }
  .collage__zettel--gelb { right: 60px; }
  /* An die Unterkante des Kaffeebilds, nicht darunter ins Leere: bei 130px
     lag der Zettel zwischen Kaffee und Pistazie und schien zur Pistazie zu
     gehoeren. Die anderen beiden Zettel sitzen ebenso auf der Kante ihres
     Bildes — das ist die Sprache der Vorlage. */
  .collage__zettel--braun { top: 96px; right: 0; }
  .collage__punkt-gruen { top: 10px; left: 430px; }
  .collage__streusel { top: 120px; left: 36px; }

  .laufband { padding: 25px 32px 16px; }

  .sorten { gap: 52px; }
  .sorten__koerper { gap: 24px; }
  .sorten__spalte { width: 340px; }
  .sorte { padding: 24px; min-height: 0; }
  .sorte__bild { width: 168px; height: 168px; }

  .speisekarte__kopf { flex-direction: column; align-items: flex-start; gap: 18px; }
  .speisekarte__kopf-rechts { max-width: 240px; }
  .speisekarte__riesenwort { font-size: min(112px, 15cqw); }

  /* Zwei Spalten statt drei: bei 1024 px bleiben je Karte sonst keine
     260 px, und die Positionszeile bricht neben dem Preis um. */
  .kapitel__gitter { grid-template-columns: repeat(2, 1fr); }

  .geschichte__schwung { top: -50px; }
  .geschichte__innen { flex-direction: column; align-items: flex-start; gap: 40px; }
  .geschichte__bild { width: 320px; height: 400px; align-self: center; }
  .geschichte__bogen { width: 310px; height: 350px; top: 35px; border-radius: 155px 155px 32px 32px; }
  .geschichte__mango { top: 16px; right: 16px; }

  .besuch { padding: 80px 32px 65px; }
  .besuch__innen { flex-direction: column; gap: 28px; }
  .besuch__karte { flex: none; width: 100%; padding: 28px; }
  .besuch__ort { flex: none; width: 100%; }

  .abschluss { padding: 110px 32px 100px; }
  .abschluss__titel { font-size: 56px; letter-spacing: -1.68px; } /* ungemessen — die Vorlage gab die Tabletgröße nicht her */
  .abschluss__foto { width: 140px; height: 140px; top: 64px; right: 40px; }
  .abschluss__zettel { top: 68px; left: 54px; }
  .abschluss__streusel { top: 73px; left: 250px; }

  .fusszeile { padding: 64px 32px 0; }
  .fusszeile__innen { flex-direction: column; gap: 48px; }
  .fusszeile__marke { width: 100%; max-width: 100%; }
  .fusszeile__spalten { flex-wrap: wrap; gap: 48px; width: 100%; }
}

/* ================================================== Phone — bis 809.98 === */

/* Innerhalb dieses Breakpoints skaliert die Vorlage nicht weiter: 390 und 500
   liefern identische Werte. */
@media (max-width: 809.98px) {
  :root {
    --titel-1: 42px;
    --titel-1-zeile: 39.9px;
    --titel-1-sperrung: -1.26px;
    --titel-2: 34px;
    --titel-2-zeile: 34px;
    --titel-2-sperrung: -0.68px;
    /* Kein eigener Wert für --titel-3: der Kartentitel ist gemessen
       breitenunabhängig 32/1,05/−0,64. Hier stand 26px ohne Deckung. */
    --lead: 16px;
    --lead-zeile: 24px;
    --lead-sperrung: -0.32px;
    --polster: 64px 20px;
    --polster-flaeche: 64px 20px;
  }

  .kopf { padding: 10px 12px 0; }
  .kopf__leiste { height: 60px; padding: 0 8px 0 14px; }
  .kopf__links { display: none; }
  .kopf__aktionen { gap: 8px; }
  .kopf__cta { display: none; }
  .burger { display: flex; }
  .schublade { padding: 10px 18px 26px; }

  .hero__innen { gap: 22px; padding: 48px 20px 20px; }
  .hero__abzeichen { display: none; }
  /* Die Vorlage lässt auf dem Telefon nur eine Pille stehen und blendet die
     Ortspille aus — gemessen, siehe SPEZIFIKATION.md Abschnitt 7. Der
     Betreiber will sie am 31.08.2026 sehen: „Altena · Sauerland" ist die
     Ortsangabe, und die gehört bei einem Betrieb mit einem Standort auch auf
     das kleinste Fenster. Bewusste Abweichung, beide Pillen brechen um. */
  .hero__aufkleber { flex-wrap: wrap; width: 100%; }
  .hero__zeile-zwei { gap: 10px; }
  .hero__collage { height: 330px; }
  .collage__gross { width: 230px; height: 230px; top: 44px; left: 8px; border-radius: 36px; }
  .collage__rund { width: 140px; height: 140px; top: 150px; right: 14px; }
  .collage__klein { width: 84px; height: 84px; top: 0; right: 10px; }
  .collage__zettel--rot { top: 8px; left: 0; }
  .collage__zettel--gelb { bottom: 26px; right: 8px; }
  .collage__punkt-gruen { top: 10px; left: 256px; }
  .collage__punkt-rot { bottom: 8px; left: 18px; }
  .collage__streusel { display: none; }

  .laufband { padding: 20px 20px 14px; }

  .sorten { gap: 36px; }
  .sorten__koerper { flex-direction: column; gap: 20px; }
  .sorten__spalte { display: none; }
  .sorten__liste { width: 100%; }
  .sorte { padding: 24px; min-height: 0; }
  .sorte__bild { width: 158px; height: 158px; }

  .speisekarte { gap: 36px; }
  .speisekarte__kopf { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
  .speisekarte__kopf-rechts { max-width: 100%; }
  .speisekarte__szene { flex-direction: column; justify-content: flex-start; padding: 100px 0 0; }
  .speisekarte__riesenwort { font-size: min(72px, 19cqw); }

  /* Der Kaffeezettel hatte auf dem Telefon **keine** eigene Regel und benutzte
     deshalb den Desktopwert (174px). Bei 390px Breite liegt der mitten auf dem
     Pistazienbild — der Zettel benannte den Kaffee und klebte auf dem Eis.
     Gemeldet vom Betreiber am 04.09.2026; seither prueft `pruefe-breiten.mjs`,
     dass jeder Zettel naeher an seinem eigenen Bild liegt als an jedem anderen. */
  .collage__zettel--braun { top: 62px; right: 0; }
  .speisekarte__schatten { display: none; }
  .kapitel { gap: 28px; }
  .kapitel__gitter { grid-template-columns: 1fr; gap: 14px; }
  .kapitel__kopf { align-items: flex-start; text-align: left; }

  /* Auf dem Telefon liegt das Bild neben dem Titel statt darueber. Gestapelt
     ergaeben elf Karten rund 3600px, und die Startseite lag damit ueber der
     Grenze, ab der Chrome Ganzseiten-Aufnahmen fehlerhaft zusammensetzt.
     Nebeneinander sind es rund 2000px — und der Daumen kommt schneller ans
     naechste Kapitel. */
  .kapitel__karte {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 16px;
    row-gap: 6px;
    padding: 20px 20px 18px;
  }
  /* Das Bild steht neben Titel und Zeile und traegt beide Reihen. */
  .kapitel__bild { grid-column: 1; grid-row: 1 / span 2; width: 84px; height: 84px; align-self: center; }
  .kapitel__name { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; font-size: 22px; }
  .kapitel__kurz { grid-column: 2; grid-row: 2; align-self: start; }
  .kapitel__auszug { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; padding-top: 12px; }
  .kapitel__mehr { grid-column: 1 / -1; grid-row: 4; padding-top: 6px; }
  /* Auf dem Telefon steht die Bühne oben statt mittig — der Stapel hängt
     deshalb an einem festen Abstand, nicht an der Bühnenmitte. */
  .ticket { top: 200px; }
  .speisekarte__hinweis { bottom: 24px; }

  .geschichte__schwung { top: -90px; left: -180px; }
  .geschichte__innen { flex-direction: column; align-items: flex-start; gap: 32px; }
  .geschichte__bild { width: 320px; height: 400px; align-self: center; max-width: 100%; }
  .geschichte__bogen { width: 310px; height: 350px; top: 35px; border-radius: 155px 155px 32px 32px; }
  .geschichte__mango { top: 16px; right: 16px; }

  .besuch__innen { flex-direction: column; gap: 28px; }
  .besuch__karte { flex: none; width: 100%; padding: 28px; }
  .besuch__ort { flex: none; width: 100%; }
  .besuch__foto { height: 160px; }
  .besuch__tafel { padding: 22px 22px 24px; }
  .besuch__adresse { font-size: 18px; }

  .abschluss { padding: 110px 20px 80px; }
  .abschluss__titel { font-size: 40px; letter-spacing: -1.2px; } /* ungemessen — die Vorlage gab die Phonegröße nicht her */
  .abschluss__zeile { font-size: 14px; }
  .abschluss__foto { display: none; }
  .abschluss__zettel { top: 63px; left: 14px; }
  .abschluss__streusel { display: none; }
  .abschluss__kreis-a { width: 260px; height: 260px; top: -60px; left: -80px; }
  .abschluss__kreis-b { width: 220px; height: 220px; }

  .fusszeile { padding: 56px 24px 0; }
  .fusszeile__innen { flex-direction: column; gap: 48px; }
  .fusszeile__marke { width: 100%; max-width: 100%; }
  .fusszeile__name { font-size: 40px; }
  .fusszeile__spalten { flex-wrap: wrap; gap: 40px; width: 100%; }
  .fusszeile__unten { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fusszeile__wortmarke p { -webkit-text-stroke-width: 1.5px; }
}

/* ------------------------------------------------------------ Bewegung --- */

/* Einblenden beim Scrollen. Die Vorlage blendet einmalig ein; Dauer und Easing
   waren nicht auszulesen (nach dem ersten Durchlauf war getAnimations() leer).
   ungemessen — 0,6s und die Distanz von 24px sind gewählt. */
.anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.anim.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Hier stand bis zum 31.08.2026 ein `prefers-reduced-motion`-Block, der
   Einblendungen, Laufband, Streusel und Ring stillgelegt hat.

   **Der Betreiber hat ihn ausdrücklich abbestellt** (31.08.2026): die Seite
   soll bei allen so aussehen, wie sie gebaut ist. Anlass war, dass Leute,
   denen er den Link geschickt hat, eine völlig stille Seite sahen — die
   Einstellung ist auf Telefonen oft an, teils über den Stromsparmodus.

   Das ist eine bewusste Entscheidung gegen die Vorlage: **scoopa schaltet
   seine Dauerbewegungen unter dieser Einstellung selbst ab**, im Wortlaut
   nachgelesen. Wer die Rücksicht zurückholen will, stellt diesen Block
   wieder her und nimmt die beiden `wenigerBewegung`-Zeilen in main.js und
   sorten.js mit — sie hängen zusammen.

   Sanfter Rest, der bleibt: das weiche Scrollen. Ein Sprung ans Ziel ist
   keine Animation, die jemand sehen will. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}