/* Happyiz Coffee — ein Stylesheet, alle Werte aus Tokens.
   Die Farbtöne stammen aus den Fotos des Cafés (gemessen 03.10.2026, Schaufenster 04.10.2026):
   Salbeigrün der Türrahmen und Gitter, Cognac des Ledersessels, Orange der
   Fensterzeichnung, Creme des Marmorbodens, Weiß der Wände, die dunkle Folie und das Gold der Glastür.
   Gesetze (CLAUDE.md, docs/DESIGN-4.0.md §5, für diese Seite neu gefasst am 05.10.2026):
   · Inhalt steht immer: ohne Skript, ohne Bewegung und im ersten Bild jeder Animation ist aller
     Text und jedes Bild an seinem Platz. Kein Einblenden beim Scrollen, kein Glas oder Blur.
   · Bewegung nur hinter dem Tor: @media (prefers-reduced-motion: no-preference) UND
     :root[data-bewegung="an"] (setzt thema.js vor dem ersten Bild, Schalter „Hareket“).
   · Keine Endlos-Animation: alles ruht spätestens 4 s nach dem Laden oder einer Handlung,
     höchstens 3 Durchläufe. Scroll-Kopplung nur als Drehung ≤ 8°, nie an Sichtbarkeit.
   · Hover nur mit Maus: @media (hover: hover) and (pointer: fine).
   Roh-Farbwerte stehen NUR in den drei Token-Blöcken; coffee/qa/wache.mjs zählt das. */

:root {
  color-scheme: light;
  /* Flächen */
  --page: #f7f3ec;        /* Creme, wie der helle Marmor */
  /* Farbproben der Palette: feste Werte, die im Dunkelmodus NICHT wechseln (der Punkt „Weiß“ bleibt weiß) */
  --probe-sage: #5b6b4a; --probe-cognac: #9a5512; --probe-orange: #f28d2f; --probe-creme: #efe8dc; --probe-weiss: #fffdf9;
  --probe-gold: #c9a45c; --probe-blau: #2f6fe0; --probe-violett: #7b3fd1; --probe-rosa: #e0457b; /* Gold der Glastür, Farben des Schmetterlings */
  --band: var(--sage-fill);  /* Türrahmen-Band über der Kopfleiste */
  --paper: #fffdf9;       /* Karten, Kopfleiste */
  --paper-2: #efe8dc;     /* ruhige Zweitfläche */
  --line: #e2dacc;
  --line-strong: #857f6f; /* Kante von Bedienelementen, ≥ 3:1 */
  /* Schrift */
  --ink: #262a20;         /* dunkles Oliv-Schwarz */
  --muted: #555b4a;       /* 6,4:1 auf --page */
  /* Salbei (Türrahmen) */
  --sage: #7f916a;        /* nur Zierde und große Icons */
  --sage-text: #4c5c3a;   /* Akzent als Text, 6,6:1 */
  --sage-fill: #5b6b4a;   /* der eine gefüllte Knopf */
  --sage-soft: #e3e8d7;
  /* Cognac (Sessel) und Orange (Fensterzeichnung) */
  --cognac-text: #8d4d0e; /* 5,9:1 auf --page */
  --cognac-fill: #9a5512;
  --orange: #f28d2f;      /* nur Zierde */
  --orange-soft: #fbe7d2;
  --on-fill: #fffdf9;     /* Schrift auf gefüllten Knöpfen, 5,7:1 */
  --focus-in: #1f3a2a;
  --focus-out: rgba(255, 253, 249, 0.95);
  --shadow: 0 10px 30px rgba(38, 42, 32, 0.08);
  /* Schaufenster (Foto 04.10.2026): dunkle Folie auf dem Glas, Schattenkante des Salbeis */
  --bild-filter: none;      /* 3D-Bilder: im Dunkelmodus etwas gedämpft, damit helle Marmorflächen nicht blenden */
  --glas: #22261d;
  --sage-kante: #6d8257;
  /* daraus gemischt (keine neuen Rohwerte, folgen hell/dunkel von selbst) */
  --gold-flaeche: color-mix(in oklab, var(--probe-gold) 22%, var(--glas));
  --glanz: color-mix(in srgb, var(--probe-weiss) 8%, transparent);
  --dampf: color-mix(in oklab, var(--probe-gold) 45%, var(--probe-weiss)); /* der Dampf liest sich heller als die Scheibe, auch im Dunkeln */
  --innen: color-mix(in oklab, var(--probe-orange) 30%, var(--probe-weiss));
  --innen-tief: color-mix(in oklab, var(--probe-orange) 60%, var(--probe-cognac));
  /* Formen: 10 px Knopf und Feld · 14 px Karte · 999 px Pille */
  --r-control: 10px;
  --r-card: 14px;
  --r-pill: 999px;
  /* Bewegung: drei Dauern, zwei Kurven. Hier nur Farbwechsel. */
  --d-kurz: 140ms;
  --d-mittel: 200ms;
  --d-seite: 240ms;
  --versatz: 6px;
  --k-aus: cubic-bezier(0.2, 0, 0, 1);
  --k-wechsel: cubic-bezier(0.4, 0, 0.2, 1);
  /* Szenen (Motion-System 2, nur hinter dem Bewegungstor; unter reduce und „aus“ alle 0 ms). Vokabular: Fahrt, Licht, Zeile, Dampf, Seite */
  --d-ankunft: 1100ms;    /* Fahrt: die Kamera kommt am Schaufenster an, einmal je Tab */
  --d-licht: 1200ms;      /* Licht: ein Glanz zieht einmal über Scheibe und Tür (0,2–1,4 s) */
  --d-zeile: 600ms;       /* Zeile: Falter, Schild und Motto setzen sich um 10 px (ab 0,35 s, je --d-stufe versetzt) */
  --d-stufe: 70ms;        /* Versatz zwischen den Zeilen und vor den Flügeln */
  --d-fluegel: 480ms;     /* ein Flügelschlag des Schmetterlings (2 Durchläufe, 1,45–2,41 s) */
  --d-dampf: 1500ms;      /* Dampf: eine Schwade steigt auf, löst sich in der Maske auf und wächst ins Ruhebild zurück (fünf, ab 1,6 s um --d-dampf-stufe gestaffelt; Ende 1,6 + 0,6 + 1,5 = 3,7 s) */
  --d-dampf-stufe: 150ms; /* Abstand zwischen den fünf Schwaden */
  --d-tuer: 720ms;        /* Spalt der Tür unter der Maus */
  --d-folgen: 480ms;      /* Ebenen folgen der Maus */
  --k-tuer: cubic-bezier(0.55, 0, 0.15, 1);
  --k-fahrt: cubic-bezier(0.16, 1, 0.3, 1);   /* schnell da, weich ausrollend */
  --k-licht: cubic-bezier(0.65, 0, 0.35, 1);  /* der Glanz zieht gleichmäßig durch */
  /* Typo-Skala: eine Größe je Ebene, linear zwischen 375 und 1024 px */
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lead: clamp(1.1875rem, 1rem + 0.6vw, 1.25rem);
  --fs-text: 1.0625rem;   /* 17 px */
  --fs-klein: 0.875rem;   /* 14 px, nie darunter */
  --measure: 60ch;
  --section-y: clamp(48px, 7vw, 104px);
  --gutter: clamp(16px, 4vw, 32px);
  --shell: 1120px;
  --kopf-h: 64px;
  --display: "Fredoka", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #1d2019;
    --paper: #262a21;
    --paper-2: #2f352a;
    --line: #3e4536;
    --line-strong: #8b937d;
    --ink: #ece7dc;
    --muted: #bcb8aa;
    --sage: #8fa078;
    --sage-text: #b9c9a0;
    --sage-fill: #a3b58b;
    --band: var(--sage);
    --sage-soft: #2e3a2a;
    --cognac-text: #f0b273;
    --cognac-fill: #e0924a;
    --orange: #f28d2f;
    --orange-soft: #3f2d1c;
    --on-fill: #1d2019;
    --focus-in: #f3f7e8;
    --focus-out: rgba(29, 32, 25, 0.95);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --glas: #13150f;
    --sage-kante: #59694a;
    --bild-filter: brightness(0.88);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #1d2019;
  --paper: #262a21;
  --paper-2: #2f352a;
  --line: #3e4536;
  --line-strong: #8b937d;
  --ink: #ece7dc;
  --muted: #bcb8aa;
  --sage: #8fa078;
  --sage-text: #b9c9a0;
  --sage-fill: #a3b58b;
  --sage-soft: #2e3a2a;
  --cognac-text: #f0b273;
  --cognac-fill: #e0924a;
  --orange: #f28d2f;
  --orange-soft: #3f2d1c;
  --on-fill: #1d2019;
  --focus-in: #f3f7e8;
  --focus-out: rgba(29, 32, 25, 0.95);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --glas: #13150f;
  --sage-kante: #59694a;
  --band: var(--sage);
  --bild-filter: brightness(0.88);
}

/* Ohne color-mix() (Safari vor 16.2, iOS 15): dieselben Töne als Festwerte, aus den Mischungen in Chromium abgelesen; sonst wäre der Dampf schwarz */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root { --gold-flaeche: #433f2b; --glanz: rgba(255, 253, 249, 0.08); --dampf: #e7d5b4; --innen: #fedcc2; --innen-tief: #ce7623; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold-flaeche: #35311f; } }
  :root[data-theme="dark"] { --gold-flaeche: #35311f; }
}
/* Der Türsteher: Systemtor zu oder Schalter „Hareket“ aus → alle Dauern 0 */
@media (prefers-reduced-motion: reduce) {
  :root { --d-kurz: 0ms; --d-mittel: 0ms; --d-seite: 0ms; --versatz: 0px; --d-ankunft: 0ms; --d-licht: 0ms; --d-zeile: 0ms; --d-stufe: 0ms; --d-fluegel: 0ms; --d-dampf: 0ms; --d-dampf-stufe: 0ms; --d-tuer: 0ms; --d-folgen: 0ms; }
}
:root[data-bewegung="aus"] { --d-kurz: 0ms; --d-mittel: 0ms; --d-seite: 0ms; --versatz: 0px; --d-ankunft: 0ms; --d-licht: 0ms; --d-zeile: 0ms; --d-stufe: 0ms; --d-fluegel: 0ms; --d-dampf: 0ms; --d-dampf-stufe: 0ms; --d-tuer: 0ms; --d-folgen: 0ms; }

/* Schrift: Fredoka nur für Überschriften und Marke (OFL, selbst gehostet) */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fredoka-2.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fredoka-0.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-2.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-0.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Grundlage ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-text);
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  /* Themenwechsel blendet über statt zu springen (Antwort auf den Knopf) */
  transition: background-color var(--d-mittel) var(--k-wechsel), color var(--d-mittel) var(--k-wechsel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
p + p { margin-top: 0.9em; }
a { color: var(--sage-text); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
small, .klein { font-size: var(--fs-klein); }
:target { scroll-margin-top: 16px; }
section { scroll-margin-top: 16px; }
.alias { display: block; height: 0; scroll-margin-top: 16px; }
.knopf-hinweis { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--fs-text); }

/* Fokus: Doppelring, überall gleich. Hover nur mit Maus (unten). */
:focus-visible { outline: 3px solid var(--focus-in); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-out); border-radius: 4px; }

.icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 2; }
.sprite { display: none; } /* das Icon-Sprite; hidden wirkt im SVG-Namensraum nicht */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; } /* hidden gewinnt immer, auch gegen display aus einer Klasse (Infotafel: „Jetzt“-Marken, leerer Zustand) */

.skip {
  position: absolute; left: var(--gutter); top: -200px; z-index: 100;
  padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center;
  background: var(--paper); color: var(--ink); border: 2px solid var(--line-strong); border-radius: var(--r-control);
  font-weight: 600;
}
.skip:focus-visible { top: 8px; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; min-width: 44px; padding: 10px 20px;
  border-radius: var(--r-control); border: 2px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  color: var(--ink); background: transparent; cursor: pointer;
  transition: background-color var(--d-kurz) var(--k-aus), border-color var(--d-kurz) var(--k-aus), color var(--d-kurz) var(--k-aus), scale var(--d-kurz) var(--k-aus);
}
.knopf:active { scale: 0.98; } /* der Druck ist sichtbar, auch mit dem Finger */
.knopf .icon { transition: translate var(--d-kurz) var(--k-aus); }
.knopf--gefuellt { background: var(--sage-fill); border-color: var(--sage-fill); color: var(--on-fill); }
.knopf--umrandet { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.knopf--leise { background: transparent; border-color: transparent; color: var(--ink); padding-inline: 12px; }
.knopf[aria-pressed="true"] { background: var(--sage-soft); border-color: var(--sage-text); }
.knopf .icon { width: 1.3em; height: 1.3em; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
/* Größere Browserschrift (Prüfrunde Runde 15; ältere Menschen stellen sie oft größer, z. B. Chrome „Sehr groß“, 24 px): Dann wird ein langes Wort
   im Knopf („happyiz.com'u tanı“) breiter als die Karte und die Seite scrollt seitwärts. Die em-Abfrage greift nur, wenn die Seite schmaler ist als
   rund 20 Zeichen der eingestellten Schrift; bei Standardschrift ändert sich nichts (bei 320 px wäre 19,9em = 318 px), „@happyshamanic“ bricht dann
   nicht mitten im Wort um. Dasselbe für die Marke „geplant“ steht hinter ihrer Grundregel (.marke-geplant). */
@media (max-width: 19.9em) { .knopf > span:not(.visually-hidden) { min-width: 0; overflow-wrap: anywhere; } }

@media (hover: hover) and (pointer: fine) {
  .knopf--gefuellt:hover { background: var(--sage-text); border-color: var(--sage-text); }
  .knopf--umrandet:hover { border-color: var(--ink); background: var(--paper-2); }
  .knopf--leise:hover { background: var(--paper-2); }
  a:not(.knopf):hover { text-decoration-thickness: 2px; }
}

/* ── Kopfleiste ────────────────────────────────────────────────────────── */
/* Nicht klebend: auf kleinen Bildschirmen frisst eine feste Leiste Platz; der Weg
   zurück nach oben steht in der Fußzeile und am Ende jedes Abschnitts-Sprungs. */
.kopf {
  background: var(--paper); border-bottom: 1px solid var(--line);
  border-top: 6px solid var(--band); /* der Türrahmen als Band über der Seite */
}
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--kopf-h); }
/* Telefon: die Sprachwahl bekommt eine eigene Zeile unter der Marke (::after erzwingt den Umbruch vor order 10) */
.kopf-zeile::after { content: ""; flex-basis: 100%; order: 9; height: 0; }
.kopf-zeile > .sprachen { order: 10; margin-bottom: 8px; }
.marke {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px 4px 0;
  font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1.1; color: var(--ink); text-decoration: none; letter-spacing: 0.01em;
  margin-right: auto; white-space: nowrap; flex: none;
}
/* Das Logo: der HAPPYiZ-Schmetterling (alt="", der Name steht daneben) */
.marke-logo { width: 44px; height: auto; flex: none; } /* der Falter des Logos, quadratisch */
.marke span { display: block; }
.marke .marke-unter { font-weight: 600; font-size: var(--fs-klein); color: var(--cognac-text); letter-spacing: 0.02em; }

@media (max-width: 429px) {
  /* Telefone bis 429 px: Marke darf umbrechen, die Konzeptzeile „Overthinking Coffee Shop“ steht im Hero
     (mit ihr unter dem Logo rutschte „Bölümler“ bei 401–411 px in eine eigene Zeile; ab 430 px passt sie) */
  .kopf .marke { white-space: normal; flex: 1 1 auto; min-width: 0; font-size: 1rem; }
  .kopf .marke .marke-unter { display: none; }
  .marke-logo { width: 36px; }
}

/* Schalter „Hareket / Bewegung / Motion“: eine Spur, kein gefüllter Knopf. Ohne Skript und unter
   reduce unsichtbar (dort gibt es nichts zu schalten). Die Optik folgt dem Wurzelattribut, das
   thema.js vor dem ersten Bild setzt; aria-pressed setzt bewegung.js. So springt nichts. */
.bewegung-knopf { display: none; gap: 10px; flex: none; }
.js .bewegung-knopf { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .js .bewegung-knopf { display: none; } }
.kopf-zeile > .bewegung-knopf { order: 11; margin-left: auto; margin-bottom: 8px; padding-inline: 10px; white-space: nowrap; }
.knopf.bewegung-knopf[aria-pressed] { background: transparent; border-color: transparent; }
.schalter {
  position: relative; flex: none; width: 36px; height: 22px; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); background: var(--page);
  transition: background-color var(--d-kurz) var(--k-aus), border-color var(--d-kurz) var(--k-aus);
}
.schalter::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--line-strong); transition: translate var(--d-kurz) var(--k-aus), background-color var(--d-kurz) var(--k-aus);
}
:root[data-bewegung="an"] .schalter { background: var(--sage-fill); border-color: var(--sage-fill); }
:root[data-bewegung="an"] .schalter::after { translate: 14px 0; background: var(--on-fill); }
@media (hover: hover) and (pointer: fine) { .knopf.bewegung-knopf:hover { background: var(--paper-2); } .knopf:hover > .icon:last-child { translate: 2px 0; } }
@media (max-width: 400px) {
  .kopf-zeile > .bewegung-knopf { gap: 6px; padding-inline: 4px; font-size: 0.9375rem; }
  .schalter { width: 30px; }
  :root[data-bewegung="an"] .schalter::after { translate: 8px 0; }
  :root[data-theme="dark"] [data-thema-knopf] .schalter::after { translate: 8px 0; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-thema-knopf] .schalter::after { translate: 8px 0; } }
}

.sprachen { display: flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--page); }
.sprachen a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px;
  border-radius: 8px; font-size: var(--fs-klein); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; color: var(--muted);
  transition: background-color var(--d-kurz) var(--k-aus), color var(--d-kurz) var(--k-aus);
}
.sprachen a[aria-current="page"] { background: var(--sage-soft); color: var(--sage-text); }
@media (hover: hover) and (pointer: fine) { .sprachen a:hover { color: var(--ink); background: var(--paper-2); } .sprachen a[aria-current="page"]:hover { background: var(--sage-soft); } }

/* Thema-Knopf: ohne Skript wirkungslos, also unsichtbar; in der Markenzeile erst ab 1100 px */
.thema-zeile, .kopf-zeile .thema-knopf { display: none; }
.js .thema-zeile { display: block; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--line-strong); } /* ein Schalter, kein Seiten-Link */
:root[data-theme="dark"] [data-thema-knopf] .schalter { background: var(--sage-fill); border-color: var(--sage-fill); }
:root[data-theme="dark"] [data-thema-knopf] .schalter::after { translate: 14px 0; background: var(--on-fill); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-thema-knopf] .schalter { background: var(--sage-fill); border-color: var(--sage-fill); }
  :root:not([data-theme="light"]) [data-thema-knopf] .schalter::after { translate: 14px 0; background: var(--on-fill); }
}
/* Ohne Skript steht das Menü offen da; thema.js setzt html.js, dann klappt es. */
.menue-knopf { min-height: 44px; display: none; white-space: nowrap; flex: none; }
.js .menue-knopf { display: inline-flex; }
.menue { display: block; }
.js .menue { display: none; }
.js .menue.offen { display: block; opacity: 1; translate: 0 0; transition: opacity var(--d-mittel) var(--k-aus), translate var(--d-mittel) var(--k-aus); }
/* Herkunft zeigen: das Blatt kommt von oben, wo der Knopf sitzt (6 px + Überblenden, §5.4) */
@starting-style { .js .menue.offen { opacity: 0; translate: 0 calc(-1 * var(--versatz)); } }
.menue ul { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 12px; }
.menue a, .menue .knopf--leise {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 8px 12px; width: 100%;
  border-radius: var(--r-control); text-decoration: none; color: var(--ink); font-weight: 600;
  transition: background-color var(--d-kurz) var(--k-aus);
}
.menue .icon { color: var(--sage-text); }
.menue li { border-top: 1px solid var(--line); }
.menue li:first-child { border-top: 0; }
/* Tabs (Tuncay 11.10.2026): der aktive Punkt trägt aria-current="page": Balken in Salbei links (Telefon) bzw. unten (Schreibtisch), Schrift fett */
.menue a[aria-current="page"] { font-weight: 700; color: var(--ink); box-shadow: inset 4px 0 0 var(--sage); }
@media (hover: hover) and (pointer: fine) { .menue a:hover { background: var(--paper-2); } }

/* Eine Zeile erst ab 760 px: darunter stehen Sprachwahl und Schalter in der zweiten Zeile
   (mit „Bewegung“, „Bereiche“ und der Zeile „Overthinking Coffee Shop“ unter dem Logo würde
   sonst bis etwa 750 px etwas gestaucht; DE lief bei 720 px 8 px über) */
@media (min-width: 760px) {
  .kopf-zeile { flex-wrap: nowrap; }
  .kopf-zeile::after { display: none; }
  .kopf-zeile > .sprachen { order: 0; margin-bottom: 0; }
  .kopf-zeile > .bewegung-knopf { order: 0; margin-left: 0; margin-bottom: 0; }
}
@media (min-width: 1100px) {
  .menue-knopf, .js .menue-knopf { display: none; }
  .js .kopf-zeile .thema-knopf { display: inline-flex; }
  .js .thema-zeile { display: none; }
  .menue, .js .menue { display: block; }
  .menue ul { flex-direction: row; align-items: center; gap: 2px; padding: 0; }
  .menue li { border-top: 0; }
  /* alle Punkte in einer Zeile: ohne Icon, 14 px, enges Polster; darunter das Menü „Bölümler“. Mit „Vor dem Besuch“ /
     „Before you come“ brauchen DE und EN bei 15 px und 10 px Polster 1083/1087 px von 1036; so 988/992 (gemessen bei 1100 px),
     die Wache 7.6 prüft eine Zeile bei 1100, 1280 und 1920 px. min-width hält „Biz“ bei 44 px. */
  .menue a, .menue .knopf--leise { width: auto; min-width: 44px; min-height: 44px; padding: 8px; justify-content: center; font-size: 0.875rem; white-space: nowrap; }
  .menue a .icon { display: none; }
  .menue a { position: relative; }
  .menue a[aria-current="page"] { box-shadow: none; }
  .menue a[aria-current="page"] .tab-marke { position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--sage); } /* eigenes Element: nur der Balken gleitet beim Seitenwechsel, die Wörter bleiben stehen */
  .menue ul { flex-wrap: wrap; row-gap: 0; }
  .menue .thema-zeile { margin-left: 4px; }
}

/* ── Unterseiten: Pfad-Zeile (immer ein Zurück) ───────────────────────────── */
.pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-block: 10px 4px; color: var(--muted); font-size: var(--fs-text); }
.pfad-start { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 2px; border-radius: var(--r-pill); color: var(--sage-text); text-decoration: none; }
.pfad-start .icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .pfad-start:hover { background: var(--paper-2); } }
.pfad-hier { font-weight: 600; color: var(--ink); }
.abschnitt-kopf h1 { font-size: var(--fs-h1); }
.abschnitt-kopf h1 + .lead { margin-top: 12px; }

/* ── Die Geschichte (Startseite, #hikaye): fünf Kapitel als ruhige Absätze mit je einem leisen Link; keine Bewegung ── */
.hikaye-geh { margin: 16px 0 0; }
.hikaye-geh .knopf { margin-left: -12px; color: var(--muted); }
.hikaye { margin: 20px 0 0; max-width: var(--measure); display: grid; gap: 18px; }
.beat { position: relative; margin: 0; padding-left: 22px; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.beat::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; background: var(--sage-fill); }
.beat:last-child::before { background: var(--orange); }
.beat .beat-link { display: flex; width: fit-content; margin: 4px 0 0 -12px; color: var(--muted); font-size: var(--fs-text); }
.beat-link .icon { display: inline-block; vertical-align: -0.25em; }
/* leise Links unter Karten, Zeilen und Blöcken („Bize yaz“, „Pano'ya bak“) */
.karte-weiter, .geplant-weiter { margin: 8px 0 0; }
.karte-weiter .knopf, .geplant-weiter .knopf { margin-left: -12px; color: var(--muted); font-size: var(--fs-text); }
.kontakt-h { margin-top: 32px; }
.vitrin-weiter { margin: 6px 0 0; }
.vitrin-weiter .knopf { margin-left: -12px; color: var(--muted); }

/* ── Wegweiser (Startseite, #bolumler): eine Karte je Seite, die ganze Karte ist der Link ── */
.karte.karte--seite { padding: 0; display: block; }
.karte.karte--seite .karte-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 4px 14px; align-items: center; min-height: 72px; padding: 16px 18px; color: inherit; text-decoration: none; border-radius: var(--r-card); }
.karte.karte--seite .karte-text { display: grid; gap: 2px; }
.karte.karte--seite strong { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); color: var(--ink); }
.karte.karte--seite .karte-text > span { color: var(--muted); font-size: var(--fs-text); }
.karte.karte--seite .icon-weiter { width: 22px; height: 22px; color: var(--sage-text); }
.karte.karte--klein .karte-link { min-height: 56px; padding-block: 12px; }
.karte.karte--klein strong { font-size: var(--fs-text); }
@media (hover: hover) and (pointer: fine) { .karte.karte--seite .karte-link:hover { background: var(--paper-2); } }
.karte.karte--seite .karte-link:focus-visible { outline: 3px solid var(--focus-in); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-out); }

/* ── Fuß: die Seitenliste (alle Seiten als Textlinks, hilft Älteren und Suchmaschinen) ── */
.fuss-seiten { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.fuss-seiten ul { list-style: none; margin: 0 -4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fuss-seiten a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.fuss-seiten a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--sage); text-decoration-thickness: 3px; }

/* ── Hero: Gruß, Satz, Status vor der Szene; dann das Schaufenster ──────── */
.hero { padding-block: clamp(24px, 4vw, 56px) var(--section-y); }
.tuer-raster { display: grid; gap: 24px; align-items: start; }
.hero-kopf, .hero-rest { max-width: 36rem; }
/* Der volle Name einmal über dem Satz, der Status (geöffnet) als kleine Marke darunter; der Gruß steht auf der Tür */
.hero-name { font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); color: var(--cognac-text); line-height: 1.2; margin-bottom: 6px; }
.gruss-teil { white-space: nowrap; }
.hero h1 { color: var(--ink); }
.unterzeile { margin-top: 8px; font-size: var(--fs-lead); color: var(--muted); max-width: 32rem; }
.status {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; margin-top: 0; margin-bottom: 12px;
  border-radius: var(--r-control); background: var(--orange-soft); color: var(--cognac-text); font-weight: 600; font-size: 1rem;
}
.status .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; margin-top: 0.55em; }
.status { align-items: flex-start; }
@media (max-width: 359px) { .status { font-size: var(--fs-klein); } }
.hero .lead { color: var(--ink); }
.hero .knoepfe { margin-top: 20px; }
.hero-rest .lead { margin-top: 20px; }
/* „Saatlere bak“: der leise Link führt zur Zeiten-Karte (#saatler) mit dem Knopf zur Gruppe */

/* Auf einen Blick, im ersten Bild: Zeiten (ungefähr), Infotafel, Ort. Aus denselben Daten wie die Tabelle in #saatler (build.mjs).
   Eine Karte, drei Zeilen; jede Zeile hat einen Link mit 44 px Trefferfläche. */
.fakten { margin: 16px 0 0; display: grid; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
.fakt { display: grid; gap: 2px; padding: 10px 16px 2px; border-top: 1px solid var(--line); }
.fakt:first-child { border-top: 0; }
.fakt dt { color: var(--muted); font-size: var(--fs-klein); font-weight: 700; letter-spacing: 0.02em; }
.fakt dd { margin: 0; display: grid; justify-items: start; }
.fakt-zeile { display: block; font-weight: 600; line-height: 1.4; }
.fakt-zeile + .fakt-zeile { margin-top: 2px; }
.fakt time, .fuss time { font-family: var(--display); font-weight: 600; color: var(--sage-text); white-space: nowrap; }
.fakt-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -4px; padding: 0 4px; color: var(--sage-text); font-weight: 700; }
.fakt-link .icon { width: 1.1em; height: 1.1em; }
.hero .text { margin-top: 14px; max-width: var(--measure); }
/* „Bir daha“: leise, nur wenn Bewegung an ist (sonst gäbe es nichts zu wiederholen) */
.nochmal-zeile { margin: 0 0 6px; min-height: 0; display: flex; justify-content: flex-end; }
.nochmal { display: none; }
@media (min-width: 900px) {
  .tuer-raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: "kopf buehne" "rest buehne"; column-gap: clamp(32px, 5vw, 72px); row-gap: 28px; }
  .hero-kopf { grid-area: kopf; padding-top: clamp(16px, 3vw, 48px); }
  .hero-rest { grid-area: rest; }
  .buehne-spalte { grid-area: buehne; }
}

/* ── Abschnitte ────────────────────────────────────────────────────────── */
.abschnitt { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.abschnitt--paper { background: var(--paper); }
.abschnitt--sage { background: var(--sage-soft); }
.abschnitt--sage .karte, .abschnitt--sage .zeile, .abschnitt--sage .menue-zeile, .abschnitt--sage .recht { background: var(--paper); }
.abschnitt-kopf { max-width: var(--measure); }
.augenbraue { display: block; color: var(--cognac-text); font-family: var(--body); font-weight: 700; font-size: var(--fs-klein); letter-spacing: 0.06em; line-height: 1.4; margin-bottom: 10px; }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: var(--measure); }
.abschnitt-kopf h2 + .lead, .abschnitt-kopf h2 + .text, .abschnitt-kopf .lead + .text, .hero .lead + .text { margin-top: 14px; }
.text { max-width: var(--measure); color: var(--ink); }
.text p + p { margin-top: 1em; }
.abschnitt .knoepfe { margin-top: 28px; }
.hinweis { margin-top: 20px; color: var(--muted); font-size: var(--fs-text); max-width: var(--measure); }

/* Immer ein Zurück: ein leiser Link am Ende der Seite (und einer im Fuß), statt elf im Weg */
.seitenende { background: var(--paper); border-top: 1px solid var(--line); padding-block: 8px 0; }
.seitenende .shell { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.seitenende .knopf { margin-left: -12px; color: var(--muted); }
.seitenende .knopf:last-child { margin-left: auto; margin-right: -12px; }
main:has(> .seitenende) + .fuss { border-top: 0; }

/* Kartenraster: Icon + Titel + Satz */
.karten { display: grid; gap: 14px; margin-top: 32px; }
.karte {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; align-items: start; align-content: start; /* gleich hohe Karten: der Titel bleibt oben */
}
.karte-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-soft); color: var(--sage-text); grid-row: span 2; }
.karte-icon .icon { width: 22px; height: 22px; }
.karte h3 { font-size: var(--fs-h3); align-self: center; display: grid; justify-items: start; gap: 6px; } /* die Marke „geplant“ steht unter dem Titel */
.karte p { color: var(--muted); grid-column: 2; }
.karte h3 .marke-geplant { margin-left: 0; }
@media (max-width: 400px) { .karte { padding: 16px 14px; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; } .karte-icon { width: 36px; height: 36px; } .karte-icon .icon { width: 20px; height: 20px; } }
@media (min-width: 640px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .karte--breit { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* „geplant“: eine Beschriftung mit gestrichelter Kante (noch nicht da), kein Knopf und nicht klickbar */
.marke-geplant { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; margin-left: 6px; vertical-align: middle; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); color: var(--muted); font-family: var(--body); font-size: var(--fs-klein); font-weight: 700; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
/* größere Browserschrift (siehe .knoepfe): die Marke „kısmen planlanıyor“ bricht dann am Leerzeichen um, statt aus der Karte zu ragen */
@media (max-width: 19.9em) { .marke-geplant { white-space: normal; } }

/* Farben: fünf Punkte aus den Tokens, mit Name und Herkunft */
.palette { margin-top: 28px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); max-width: 56rem; }
.farbe { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; }
.farbe-punkt { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-strong); grid-row: span 2; }
.farbe--sage { background: var(--probe-sage); }
.farbe--cognac { background: var(--probe-cognac); }
.farbe--orange { background: var(--probe-orange); }
.farbe--creme { background: var(--probe-creme); }
.farbe--weiss { background: var(--probe-weiss); }
.farbe--gold { background: var(--probe-gold); }
.farbe--kelebek { background: conic-gradient(from 200deg, var(--probe-blau), var(--probe-violett), var(--probe-rosa), var(--probe-blau)); }
.farbe-herkunft { overflow-wrap: anywhere; }
.farbe-name { font-weight: 700; font-family: var(--display); font-size: 1rem; }
.farbe-herkunft { color: var(--muted); font-size: var(--fs-klein); }
/* ab 760 px vier Spalten, Punkt über dem Text: daneben (44 px Punkt + Text) brachen „Gitterwände“ und „Marmorboden“; die Regel steht nach der Basis, sonst gewinnt diese */
@media (min-width: 760px) { .palette { grid-template-columns: repeat(4, minmax(0, 1fr)); } .farbe { grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; } .farbe-punkt { grid-row: auto; } }

/* Illustration mit Bedeutung: die Katze von der Scheibe, Strich aus Tokens */
.abschnitt-kopf--illu { position: relative; }
.illu { width: 64px; height: 64px; color: var(--sage-text); stroke-width: 1.5; margin-bottom: 12px; display: block; }
@media (min-width: 640px) { .abschnitt-kopf--illu { padding-right: 96px; } .illu { position: absolute; right: 0; top: 0; width: 80px; height: 80px; margin: 0; } }

/* Dinge-Liste: kompakt, eine Zeile je Ding, Trennlinien statt Karten */
.dinge { margin: 28px 0 0; max-width: 48rem; border-top: 1px solid var(--line); }
.ding { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-content: start; }
.ding dt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-family: var(--display); font-size: var(--fs-h3); color: var(--ink); }
.ding dt .icon { width: 22px; height: 22px; color: var(--sage-text); }
.ding dd { margin: 0; color: var(--muted); }
@media (min-width: 640px) { .ding { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); align-items: start; } .ding dt { align-items: flex-start; line-height: 1.25; padding-top: 2px; font-size: var(--fs-text); } .ding dt .icon { margin-top: 0.15em; } }

/* Abschnitt mit Zeichnung: am Schreibtisch oben der Kopf links und die Zeichnung rechts, alles Weitere (Karten, Farbmuster,
   Band) unter beiden über die volle Breite. Daneben waren Karten nur etwa 25 Zeichen breit und brachen Wörter mitten im Wort.
   Nichts klebt: die Zeichnung scrollt mit. */
@media (min-width: 960px) {
  .abschnitt--mit-bild .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 56px; align-items: start; }
  .abschnitt--mit-bild .shell > * { grid-column: 1 / -1; }
  .abschnitt--mit-bild .shell > .abschnitt-kopf { grid-column: 1; grid-row: 1; }
  .abschnitt--mit-bild .shell > .zeichnung { grid-column: 2; grid-row: 1; margin-top: 8px; }
  /* Kopf mit Foto (Runde 8): der Kopf nimmt beide Spalten und wird selbst das Raster, Überschrift und Text links, das Foto rechts daneben */
  .abschnitt--mit-bild .shell > .abschnitt-kopf--foto { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 56px; align-items: start; }
  .abschnitt-kopf--foto > :not(.foto) { grid-column: 1; max-width: var(--measure); }
  .abschnitt-kopf--foto > .foto { grid-column: 2; grid-row: 1 / span 4; margin: 8px 0 0; }
  .abschnitt--mit-bild .dinge { margin-top: 24px; }
  .abschnitt--mit-bild .ding { grid-template-columns: minmax(0, 1fr); } /* Begriff über Text */
  /* ohne Zeichnung: die Liste nutzt die Breite, zwei Spalten, Titel über Text */
  .abschnitt:not(.abschnitt--mit-bild) .dinge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; max-width: none; border-top: 0; }
  .abschnitt:not(.abschnitt--mit-bild) .ding { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 0; }
}

/* Hausregel-Band im Menü: eine warme Fläche mit Text und Zeichnung, darunter die drei Punkte. Es ist eine Regel, keine Aktion. */
.band { margin-top: 48px; padding: clamp(20px, 3.5vw, 36px); background: var(--orange-soft); border-radius: var(--r-card); scroll-margin-top: 16px; }
.band-kopf, .geplant-kopf { display: grid; gap: 24px; align-items: start; }
.band h3, .geplant h3 { font-size: var(--fs-h2); }
.band .lead { color: var(--ink); margin-top: 14px; }
.band .text { margin-top: 12px; }
.band-bild, .geplant-bild { margin: 0; max-width: 400px; }
.band .dinge { max-width: none; margin-top: 24px; border-top: 1px solid color-mix(in srgb, var(--cognac-text) 30%, transparent); }
.band .ding { border-bottom-color: color-mix(in srgb, var(--cognac-text) 30%, transparent); }
.band .ding dd, .band .hinweis { color: var(--ink); }
.band .hinweis { margin-top: 20px; font-weight: 600; }
@media (min-width: 900px) {
  .band-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 48px; }
  .band .dinge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
  .band .ding { grid-template-columns: minmax(0, 1fr); border-top: 1px solid color-mix(in srgb, var(--cognac-text) 30%, transparent); border-bottom: 0; }
}
/* Gemeinschaft in „Wann und wo“: was geplant ist, mit der Marke an jeder Karte */
.geplant { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.geplant .lead { margin-top: 14px; }
.geplant .karten { margin-top: 28px; }
@media (min-width: 900px) { .geplant-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: 48px; } .geplant-bild { max-width: 320px; } }

/* Fotos */
.zeichnung { margin: 28px 0 0; max-width: 440px; }
/* Ein echtes Foto (Runde 8: die beiden auf der Biz-Seite): Hochformat, kein Salbeirahmen (der gehört den 3D-Bildern und Zeichnungen),
   abgerundet und gerahmt wie das Schaufensterfoto, im Dunkeln gedämpft wie die 3D-Bilder; die Unterschrift sagt, wer wer ist */
.foto > picture { display: block; }
.foto img { width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--paper-2); filter: var(--bild-filter); }
.foto-text { margin-top: 8px; color: var(--muted); font-size: var(--fs-klein); }
/* Das Foto steht im Kopf direkt nach der Überschrift: am Telefon Name, Bild, Text (wie ein Profil) */
.abschnitt-kopf > .foto { margin: 20px 0 0; }
.abschnitt-kopf > .foto + .lead, .abschnitt-kopf > .foto + .text { margin-top: 20px; }
.zeichnung .illustration { padding: 8px; }
.hero .text { margin-top: 14px; max-width: var(--measure); }

/* Menü-Zeilen */
.menue-liste { margin-top: 32px; display: grid; gap: 10px; }
.menue-zeile {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px;
}
.menue-zeile .karte-icon { grid-row: span 2; }
.menue-zeile h3 { font-size: var(--fs-h3); }
.menue-zeile p { grid-column: 2 / -1; color: var(--muted); font-size: 1rem; }
.pille { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--muted); font-size: var(--fs-klein); font-weight: 600; white-space: nowrap; }
@media (min-width: 760px) { .menue-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Öffnungszeiten (#saatler): Spannen statt fester Uhrzeiten, Saisons aus Daten; oben das Band des Türrahmens */
/* Zeiten und Infotafel in einem Raster: auf dem Telefon erst die Zeiten (kurz), dann die Tafel; am Schreibtisch die Tafel links,
   die Zeitenkarte rechts, beide oben bündig und nicht klebend. */
.zeiten-raster { margin-top: 32px; display: grid; gap: 32px; align-items: start; }
.zeiten-raster > .oeffnung, .zeiten-raster > .pano { margin-top: 0; max-width: none; }
@media (min-width: 960px) {
  .zeiten-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "tafel zeiten"; column-gap: 56px; }
  .zeiten-raster > .pano { grid-area: tafel; }
  .zeiten-raster > .oeffnung { grid-area: zeiten; }
}
.oeffnung { margin-top: 32px; max-width: 560px; padding: 18px 20px 20px; background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--sage); border-radius: var(--r-card); }
.oeffnung-zeilen { margin: 10px 0 0; }
.oeffnung-zeile { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.oeffnung-zeile:first-child { border-top: 0; padding-top: 4px; }
.oeffnung-zeile dt { color: var(--muted); font-size: var(--fs-klein); font-weight: 700; letter-spacing: 0.02em; }
.oeffnung-zeile dd { margin: 0; font-size: var(--fs-lead); line-height: 1.4; }
.oeffnung time { font-family: var(--display); font-weight: 600; color: var(--sage-text); white-space: nowrap; }
.oeffnung-hinweis { margin-top: 12px; color: var(--muted); }
.oeffnung .oeffnung-knopf { margin-top: 16px; } /* enger als .abschnitt .knoepfe: der Knopf gehört zur Karte */
.saisons { margin-top: 12px; display: grid; gap: 18px; }
.saison { padding-left: 14px; border-left: 4px solid var(--line); }
.saison[data-jetzt] { border-left-color: var(--sage-fill); }
.saison h4 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--display); font-weight: 600; font-size: var(--fs-text); line-height: 1.3; }
.saison-zeit { font-family: var(--body); font-weight: 400; font-size: var(--fs-klein); color: var(--muted); }
/* „Jetzt“: eine umrandete Marke, kein gefüllter Knopf; das Skript nimmt hidden weg */
.marke-jetzt { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 2px solid var(--sage-text); border-radius: var(--r-pill); color: var(--sage-text); font-family: var(--body); font-size: var(--fs-klein); font-weight: 700; line-height: 1.2; }

/* Infotafel (#pano): eine ruhige Liste nach Datum, links ein Kalenderblatt. Kein Karussell, kein
   Wechsel, keine Bewegung; Vergangenes blendet skript.js beim Laden aus. */
.pano { margin-top: 40px; max-width: 48rem; }
.pano-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; border-bottom: 2px solid var(--sage); }
.pano-stand { color: var(--muted); font-size: var(--fs-klein); }
.pano-einleitung { margin-top: 12px; color: var(--muted); max-width: var(--measure); }
.tafel { margin: 8px 0 0; padding: 0; list-style: none; }
.eintrag { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.eintrag-blatt {
  display: grid; justify-items: center; align-content: start; align-self: start; gap: 2px; margin: 0; padding: 6px 4px 10px;
  background: var(--paper); border: 1px solid var(--line-strong); border-top: 6px solid var(--sage); border-radius: var(--r-control);
  text-align: center; line-height: 1.15; overflow-wrap: anywhere;
}
.blatt-oben { font-size: var(--fs-klein); font-weight: 700; color: var(--cognac-text); }
.blatt-tag { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.05; color: var(--ink); }
.blatt-tag--serie { font-size: var(--fs-klein); line-height: 1.3; }
.blatt-unten { font-size: var(--fs-klein); font-weight: 600; color: var(--muted); }
.eintrag--jetzt .eintrag-blatt { background: var(--sage-soft); border-top-color: var(--sage-fill); }
.eintrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.eintrag-art { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font-size: var(--fs-klein); font-weight: 700; line-height: 1.2; }
.eintrag--veranstaltung .eintrag-art { background: var(--sage-soft); color: var(--sage-text); }
.eintrag--cafe .eintrag-art { background: var(--orange-soft); color: var(--cognac-text); }
.eintrag--geschlossen .eintrag-art { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.eintrag-titel { margin: 8px 0 0; font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; text-wrap: balance; }
.eintrag-wann { margin-top: 6px; font-weight: 600; }
.eintrag-wann time { color: var(--sage-text); }
.eintrag-text { margin-top: 6px; color: var(--muted); max-width: var(--measure); }
.eintrag-mehr { margin: 10px 0 0; display: grid; gap: 4px; }
.eintrag-mehr div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.eintrag-mehr dt { font-weight: 700; }
.eintrag-mehr dd { margin: 0; color: var(--muted); }
.pano-leer { margin-top: 8px; padding: 18px 0; color: var(--muted); border-bottom: 1px solid var(--line); max-width: var(--measure); }
@media (min-width: 640px) { .eintrag { grid-template-columns: 76px minmax(0, 1fr); column-gap: 20px; } }
@media (max-width: 400px) { .oeffnung { padding-inline: 12px; } .knopf { padding-inline: 14px; } .knoepfe .knopf--gefuellt { width: 100%; justify-content: center; } }

/* Zeilen mit Link (Kontakt) */
.zeilen { margin-top: 32px; display: grid; gap: 10px; max-width: 560px; }
.zeile {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-card); color: var(--ink); text-decoration: none; font-weight: 600;
  transition: border-color var(--d-kurz) var(--k-aus), background-color var(--d-kurz) var(--k-aus);
}
.zeile .karte-icon { width: 40px; height: 40px; }
@media (max-width: 400px) { .zeile { gap: 10px; padding-inline: 12px; } .zeile .karte-icon { width: 32px; height: 32px; } }
.zeile .zeile-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zeile .zeile-text small { display: block; color: var(--muted); font-weight: 400; font-size: 1rem; }
.zeile .icon-extern { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .zeile:hover { border-color: var(--ink); background: var(--paper-2); } }

/* Rechtliches: Klappzeilen, Adresse öffnet sie */
.rechte { margin-top: 24px; display: grid; gap: 10px; max-width: var(--measure); }
.recht summary, .recht .recht-text { overflow-wrap: anywhere; } /* 200 % Text: lange Wörter brechen statt die Seite zu verbreitern */
.recht { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.recht summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; font-weight: 600;
}
.recht summary::-webkit-details-marker { display: none; }
.recht summary .icon-auf { margin-left: auto; color: var(--muted); }
.recht[open] summary .icon-auf { transform: rotate(180deg); }
.recht .recht-text { padding: 0 18px 18px; color: var(--muted); font-size: var(--fs-text); }
.recht[open] .recht-text { opacity: 1; translate: 0 0; transition: opacity var(--d-mittel) var(--k-aus), translate var(--d-mittel) var(--k-aus); }
@starting-style { .recht[open] .recht-text { opacity: 0; translate: 0 calc(-1 * var(--versatz)); } }
.recht .recht-text p + p, .recht .recht-text ul + p, .recht .recht-text p + ul { margin-top: 0.8em; }
.recht .recht-text ul { list-style: disc; padding-left: 1.2em; }
.recht .recht-text li + li { margin-top: 0.4em; }

/* Fußzeile: wiederholt, was Gäste zuerst suchen (Zeiten, Ort, Kontakt), darunter Sprache, Rechtliches, nach oben */
.fuss { border-top: 1px solid var(--line); background: var(--paper); padding-block: 40px 40px; color: var(--muted); font-size: var(--fs-klein); }
.fuss-raster { display: grid; gap: 28px; }
.fuss .marke { margin-right: 0; }
.fuss-logo { width: 144px; height: auto; margin: 0 0 12px -6px; } /* das runde Logo; der Name steht daneben, deshalb alt leer */
.fuss p { max-width: var(--measure); }
.titel-teil { display: block; }
.marke-zeile { margin: 0 0 16px; }
.fuss-titel { margin: 0 0 8px; font-family: var(--display); font-size: 1rem; color: var(--ink); letter-spacing: 0.01em; }
.fuss .fakt-zeile { font-weight: 400; }
.fuss-liste { display: grid; }
.fuss-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.fuss-link span:not(.visually-hidden) { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.fuss-link .icon { color: var(--sage-text); }
.fuss-link .icon-extern { color: var(--muted); }
.fuss-hinweis { margin-top: 6px; }
.fuss-unten { margin-top: 32px; padding-top: 20px; display: grid; gap: 16px; background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; } /* die Linie so breit wie der Inhalt, nicht wie die Shell mit Rinne */
.fuss .knoepfe { gap: 8px; flex-direction: column; align-items: flex-start; }
.fuss .sprachen { width: max-content; }
@media (min-width: 760px) { .fuss .knoepfe { flex-direction: row; align-items: center; } .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fuss-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 32px; } .fuss-unten { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
@media (hover: hover) and (pointer: fine) { .fuss-link:hover span:not(.visually-hidden), .fakt-link:hover { text-decoration: underline; text-decoration-thickness: 2px; } }

/* Druck */
@media print {
  .kopf, .skip, .menue-knopf, .fuss .knoepfe, .buehne-spalte, .seitenende { display: none; }
  .karte, .ding, .fakten, .oeffnung, .eintrag, .zeile { break-inside: avoid; } /* nicht .abschnitt: der Zeiten-Abschnitt ist länger als eine Seite */
}

/* ── Illustrationen (eigene Zeichnungen aus Tokens, im Stil der Fensterzeichnungen) ── */
.illustration { display: block; width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
/* Mehr Kontrast auf Wunsch des Systems: Linien in der starken Linienfarbe, Zeichnungen mit dickerer Kontur */
@media (prefers-contrast: more) { :root { --line: var(--line-strong); } .illustration .l, .illustration .l-sage { stroke-width: 4; } }
p, dd, li, figcaption { text-wrap: pretty; }
.illustration .l { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illustration .l-fein { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illustration .l-sage { fill: none; stroke: var(--sage-fill); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illustration .l-muted { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illustration .l-cognac { fill: none; stroke: var(--cognac-fill); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illustration .l-orange { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illustration .f-orange { fill: var(--orange); }
.illustration .f-orange-soft { fill: var(--orange-soft); }
.illustration .f-cognac { fill: var(--cognac-fill); }
.illustration .f-sage { fill: var(--sage-fill); }
.illustration .f-sage-soft { fill: var(--sage-soft); }
.illustration .f-cream { fill: var(--paper-2); }
.illustration .f-paper { fill: var(--paper); }
.illustration .f-page { fill: var(--page); }
.illustration .f-ink { fill: var(--ink); }
.illustration .f-muted { fill: var(--muted); }
.illustration .f-line { fill: var(--line); }

/* ══ Das Schaufenster (Hero) ═════════════════════════════════════════════
   Das Foto vom 04.10.2026 als gezeichnete 3D-Fassade: Markise, Rahmen, links die dunkle Scheibe
   mit der Goldzeichnung, rechts die Glastür mit der Schrift, die wirklich auf dem Glas steht
   (Türkisch und Englisch, wie am Laden). Die Bühne ist ein Bild (role="img", Alt-Text); die
   übersetzte Überschrift steht flach darüber im h1. In Ruhe 4° von rechts gesehen, damit Markise,
   Stufe und Gehweg Tiefe zeigen. Ebenen (z): Markise +t · Griff +6 · Glas, Rahmen, Schrift 0 ·
   Raum hinter der Tür −raum. Keine zwei Ebenen schneiden sich im selben z-Bereich. */
.buehne-spalte { min-width: 0; scroll-margin-top: 16px; }
.buehne {
  --pfeiler: 10px; --rahmen-b: 7px; --sprosse: 7px; --tuerprofil: 5px;
  --markise-h: 40px; --markise-t: 40px; --kasten-h: 10px; --stufe-h: 14px; --stufe-t: 26px; --raum: 200px;
  --kb: 52px; --kedi-b: 40px; --gehweg-t: 70px; --spalten: minmax(0, 1fr) minmax(0, 2fr);
  perspective: 800px; perspective-origin: 50% 20%;
  overflow: hidden; overflow: clip; /* die Szene verlässt nie ihre Bühne */
  margin-inline: calc(-1 * var(--gutter)); padding: 16px var(--gutter) 30px;
}
.kamera, .fassade, .markise, .rahmen, .tuer, .innen, .tuer-blatt, .stufe, .gehweg { transform-style: preserve-3d; }
.kamera { transform: rotateY(-4deg); }
.fassade {
  display: grid; grid-template-columns: var(--pfeiler) minmax(0, 1fr) var(--pfeiler); grid-template-rows: auto auto 1fr auto auto;
  max-width: 540px; margin-inline: auto;
  transform: rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -4deg));
  transition: transform var(--d-folgen) var(--k-aus);
}
/* Markise: ein Kasten aus Front, Unterseite und zwei Seiten */
.markise { grid-column: 1 / -1; position: relative; height: var(--markise-h); }
.markise > span { position: absolute; display: block; }
.markise-front { inset: 0; background: var(--sage); border-radius: 4px 4px 0 0; box-shadow: inset 0 -4px 0 var(--sage-kante); transform: translateZ(var(--markise-t)); }
.markise-unten { left: 0; right: 0; bottom: 0; height: var(--markise-t); background: var(--sage-kante); transform-origin: 50% 100%; transform: rotateX(-90deg); }
.markise-seite { top: 0; bottom: 0; width: var(--markise-t); background: var(--sage-kante); }
.markise-seite-l { left: 0; transform-origin: 0 50%; transform: rotateY(-90deg); }
.markise-seite-r { right: 0; transform-origin: 100% 50%; transform: rotateY(90deg); }
.kasten { grid-column: 1 / -1; height: var(--kasten-h); background: var(--line); }
.pfeiler { background: var(--paper-2); }
/* Rahmen ohne eigene Fläche: sonst verdeckte er den Raum hinter der Tür */
.rahmen { container-type: inline-size; grid-column: 2; display: grid; grid-template-columns: var(--spalten); border: var(--rahmen-b) solid var(--sage); border-bottom-width: calc(var(--rahmen-b) + 3px); box-shadow: inset 0 0 0 1px var(--sage); } /* der Schatten füllt die Fuge der 3D-Ebenen, ohne Fläche */
.scheibe { position: relative; overflow: hidden; display: flex; align-items: flex-end; background: var(--glas); border-right: var(--sprosse) solid var(--sage); }
.scheibe-zeichnung { width: 100%; height: 100%; padding: 4px 4px 2px; overflow: visible; } /* die Lampenschnüre laufen bis zur Decke; .scheibe schneidet */
.glanz { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glanz::before { content: ""; position: absolute; inset: 0 auto 0 -64cqw; width: 260cqw; background: linear-gradient(105deg, transparent 0 38%, var(--glanz) 46% 54%, transparent 62% 100%); transform: translate3d(calc(var(--mx, 0) * 18%), 0, 0); transition: transform var(--d-folgen) var(--k-aus); } /* Ruhe: das Band rechts der Mitte; die Maus schiebt es (nur Transform) */
.tuer-glas .glanz::before { left: calc(-64cqw - 100cqw / 3); } /* Scheibe : Tür = 1 : 2 unter 600 px; ab 600 px 2 : 3 (unten) – so ist es EIN Band über die Fassade */

/* Die Tür: Öffnung, warmer Raum dahinter (nur wenn Bewegung an ist), Türblatt mit Schrift */
.tuer { position: relative; display: grid; }
.innen { position: absolute; inset: 0; display: none; visibility: hidden; transition: visibility var(--d-tuer); } /* in Ruhe unsichtbar: keine Haarlinie an der Türkante */
.innen-flaeche { position: absolute; display: block; }
.innen-rueck { inset: 0; background: var(--innen); transform: translateZ(calc(-1 * var(--raum))); }
.innen-boden { left: 0; right: 0; bottom: 0; height: var(--raum); background: var(--innen-tief); transform-origin: 50% 100%; transform: rotateX(90deg); }
.innen-decke { left: 0; right: 0; top: 0; height: var(--raum); background: var(--innen); transform-origin: 50% 0; transform: rotateX(-90deg); }
.innen-wand-l, .innen-wand-r { top: 0; bottom: 0; width: var(--raum); background: var(--innen-tief); }
.innen-wand-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.innen-wand-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.tuer-blatt {
  --spalt: 0deg;
  position: relative; display: grid; border: var(--tuerprofil) solid var(--sage);
  transform-origin: 100% 50%; transform: rotateY(var(--spalt)); /* Scharnier rechts; der Spalt öffnet nach innen */
  transition: transform var(--d-tuer) var(--k-tuer);
}
.tuer-kante { position: absolute; top: calc(-1 * var(--tuerprofil)); bottom: calc(-1 * var(--tuerprofil)); left: calc(-1 * var(--tuerprofil)); width: 8px; background: var(--sage-kante); transform-origin: 0 50%; transform: rotateY(90deg); }
.tuer-griff { position: absolute; left: 9%; top: 38%; width: 6px; height: 24%; border-radius: var(--r-pill); background: var(--sage); box-shadow: inset 0 0 0 1px var(--sage-kante); transform: translateZ(6px); }
/* Die Schrift wie auf dem Glas: Gold auf dunkler Folie (≥ 15 px, 6,6:1 hell, 7,9:1 dunkel).
   Sie bricht um statt abgeschnitten zu werden, auch bei 200 % Textgröße. */
.tuer-glas {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 10px 12px 24px; background: var(--glas); color: var(--probe-gold); text-align: center;
  overflow-wrap: anywhere; hyphens: auto;
}
.tuer-glas > :not(.glanz, .tuer-zweige) { position: relative; z-index: 1; margin: 0; }
.tuer-marke { line-height: 1.15; }
.tuer-name { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); letter-spacing: 0.06em; }
.tuer-konzept, .tuer-gruss, .tuer-zweitsatz, .tuer-motto { font-size: 0.9375rem; line-height: 1.35; }
.tuer-konzept { display: block; letter-spacing: 0.02em; }
.tuer-gruss { border-top: 1px solid var(--gold-flaeche); border-bottom: 1px solid var(--gold-flaeche); padding: 4px 0; }
.tuer-gruss .gruss-teil { display: block; }
.tuer-gruss .gruss-teil > [aria-hidden] { display: none; } /* schmale Tür: drei Zeilen statt Punkten */
.tuer-satz { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.05; text-wrap: balance; }
.tuer-motto span { display: block; }
.tuer-zweitsatz, .tuer-motto span, .tuer-gruss { text-wrap: balance; }
/* Das Schild unter dem Satz: Tasse und Dampf (fünf Schwaden aus je Halo und Kern hinter einer Alphamaske; hinter dem Tor steigt jede einmal auf, Token --d-dampf) */
.tuer-zeichen { display: block; width: 100%; max-width: 15rem; height: auto; margin-top: -2px; overflow: hidden; }
.tuer-zeichen .g { fill: none; stroke: var(--probe-gold); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.maske-stop { stop-color: var(--probe-weiss); } /* auch eine Luminanz-Deutung der Maske zeigt den Dampf */
.maske-flaeche { fill: url(#dampf-verlauf); }
.schwade { fill: var(--dampf); transform-box: fill-box; transform-origin: 50% 100%; --tief: 14; } /* statische Deckkraft: Halo weich, Kern dichter; hinten blasser */
.schwade--halo { fill-opacity: 0.16; }
.schwade--kern { fill-opacity: 0.5; }
.schwade--h.schwade--halo { fill-opacity: 0.09; }
.schwade--h.schwade--kern { fill-opacity: 0.28; }
/* je Schwade (Halo + Kern): Reihe --n für die Staffelung, Hub (Einheiten des Schilds) und Neigung */
.dampf > :nth-child(-n + 2) { --n: 0; --hub: 165; --sway: 3deg; }
.dampf > :nth-child(n + 3):nth-child(-n + 4) { --n: 1; --hub: 160; --sway: -3deg; }
.dampf > :nth-child(n + 5):nth-child(-n + 6) { --n: 2; --hub: 180; --sway: 3deg; }
.dampf > :nth-child(n + 7):nth-child(-n + 8) { --n: 3; --hub: 170; --sway: -3deg; }
.dampf > :nth-child(n + 9) { --n: 4; --hub: 175; --sway: 3deg; }
.kelebek { --n: 0; } .tuer-zeichen { --n: 1; } .tuer-motto { --n: 2; } /* Reihe der Zeilen */
.tuer-zweige { display: none; }
.tuer-zweig .g { fill: none; stroke: var(--probe-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Schmetterling: das Logo in drei Streifen, damit die Flügel sich in 3D bewegen können */
.kelebek { position: relative; display: block; width: var(--kb); height: calc(var(--kb) * 106 / 160); perspective: 240px; }
.kanat { position: absolute; top: 0; bottom: 0; display: block; background: url(/marke/kelebek-160.webp) no-repeat; background-size: var(--kb) auto; }
@media (min-width: 600px) and (min-resolution: 2.5dppx) { .kanat { background-image: url(/marke/kelebek-480.webp); } } /* 80 px × 3: sonst reicht die 160er */
.kanat-l { left: 0; width: 44%; background-position: 0 0; transform-origin: 100% 50%; }
.govde { left: 44%; width: 12%; background-position: calc(var(--kb) * -0.44) 0; }
.kanat-r { left: 56%; width: 44%; background-position: calc(var(--kb) * -0.56) 0; transform-origin: 0 50%; }

/* Stufe aus Marmor; die Katze von Kediköy sitzt davor und schaut zur Tür; Gehweg vor der Stufe */
.stufe { grid-column: 1 / -1; position: relative; height: var(--stufe-h); }
.stufe > span { position: absolute; display: block; left: 0; right: 0; }
.stufe-front { top: 0; bottom: 0; background: var(--line); transform: translateZ(var(--stufe-t)); }
.stufe-oben { top: 0; height: var(--stufe-t); background: var(--paper-2); transform-origin: 50% 0; transform: rotateX(90deg); }
.kedi-sitzt { position: absolute; left: 13%; bottom: 100%; width: var(--kedi-b); height: auto; margin-bottom: calc(var(--kedi-b) * -0.408); transform: translateZ(calc(var(--stufe-t) + 2px)); }
.gehweg { grid-column: 1 / -1; position: relative; height: 0; }
.gehweg > span {
  position: absolute; display: block; left: -4%; right: -4%; top: 0; height: var(--gehweg-t);
  transform-origin: 50% 0; transform: translateZ(var(--stufe-t)) rotateX(90deg); /* beginnt vor der Stufe */
  background: linear-gradient(180deg, transparent 30%, var(--page) 100%), repeating-linear-gradient(180deg, transparent 0 28px, var(--line) 28px 30px), repeating-linear-gradient(90deg, var(--paper-2) 0 46px, var(--line) 46px 48px);
}
@media (min-width: 600px) {
  .tuer-glas .glanz::before { left: calc(-64cqw - 40cqw); }
  .buehne { --pfeiler: 18px; --rahmen-b: 10px; --sprosse: 10px; --tuerprofil: 6px; --markise-h: 56px; --markise-t: 64px; --kasten-h: 14px; --stufe-h: 20px; --stufe-t: 36px; --raum: 300px; --kb: 80px; --kedi-b: 60px; --gehweg-t: 130px; --spalten: minmax(0, 2fr) minmax(0, 3fr); padding-top: 24px; padding-bottom: 72px; }
  .tuer-glas { gap: 8px; padding: 20px 18px 18px 30px; }
  .tuer-gruss .gruss-teil { display: inline; }
  .tuer-gruss .gruss-teil > [aria-hidden] { display: inline; }
  .kedi-sitzt { left: 20%; }
  .tuer-zweige { display: flex; justify-content: space-between; position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 0; pointer-events: none; }
  .tuer-zweig { width: 26px; height: auto; }
  .tuer-zweig--r { scale: -1 1; }
  .tuer-motto { padding-inline: 22px; }
}
@media (min-width: 900px) { .buehne { padding-top: 28px; } } /* seitlich gilt weiter die Rinne (ab 800 px 32 px): Markise und Stufe bleiben in der Bühne, auch mit Maus in der Ecke */
@media (min-width: 1200px) { .buehne { margin-inline: -40px; padding-inline: 40px; } } /* außerhalb der Shell ist Platz */

/* Goldzeichnung: dieselben Zeichnungen, umgefärbt für die dunkle Scheibe */
.illustration.illustration--gold :is(.l, .l-fein, .l-sage, .l-muted, .l-cognac, .l-orange) { stroke: var(--probe-gold); }
.illustration.illustration--gold :is(.f-cream, .f-paper, .f-page, .f-sage-soft, .f-orange-soft, .f-line) { fill: var(--glas); }
.illustration.illustration--gold :is(.f-orange, .f-cognac, .f-sage, .f-muted) { fill: var(--gold-flaeche); }
.illustration.illustration--gold .f-ink { fill: var(--probe-gold); }

/* ── Glastür-Abschnitt (#vitrin): das Motto im Original und das Foto von heute ── */
.vitrin-raster { display: grid; gap: 24px; align-items: start; }
.motto-satz { display: block; font-size: var(--fs-h1); margin-top: 2px; }
.motto-zusatz { margin-top: 10px; font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); color: var(--sage-text); }
.motto-uebersetzung { margin-top: 12px; color: var(--muted); max-width: 30rem; }
.motto .text { margin-top: 20px; }
.vitrin { margin: 0; max-width: 420px; }
.vitrin img { width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--paper-2); }
.vitrin figcaption { margin-top: 12px; color: var(--muted); font-size: 1rem; }
@media (min-width: 820px) {
  .vitrin-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 0; }
  .vitrin-raster > .vitrin { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── Fenster: jede Abschnitts-Zeichnung sitzt in einem Salbeirahmen wie die Scheiben ── */
/* Jeder Bildplatz ist 4:3: eine Zeichnung füllt ihn ganz (meet), ein 3D-Bild (4:3 gerendert) ebenso (cover schneidet nichts ab, das Verhältnis stimmt schon) */
.fenster-rahmen { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); border: 6px solid var(--sage); border-radius: 6px; }
.fenster-rahmen > .illustration { width: 100%; height: 100%; }
.fenster-rahmen > picture { display: block; width: 100%; height: 100%; }
.fenster-rahmen > picture > img { width: 100%; height: 100%; object-fit: cover; filter: var(--bild-filter); }
.bild-hinweis { margin-top: 8px; color: var(--muted); font-size: var(--fs-klein); } /* sichtbar unter jedem 3D-Bild: „3D-Bild, kein Foto“ */
/* Die Katzen-Szene (katze.js legt sie nur bei Bewegung an): ein stummes Video (Bühne samt Katze, 24 Bilder/s, < 4 s, keine Schleife) über dem
   Bild mit der liegenden Katze; sein Poster ist das erste Bild (leere Bühne). Ohne Bewegungstor display: none, dann steht das Bild. */
.katze-buehne { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; filter: var(--bild-filter); }
.katze-buehne video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ══ Bewegung: nur mit Erlaubnis von System und Person ══════════════════
   Ladeszene einmal je Tab (data-gesehen, thema.js; bewegung.js setzt es mit der letzten Schwade), Motion-System 2 (12.10.2026):
   A Fahrt 0–1,1 s mit Licht 0,2–1,4 s · B Zeile 0,35–1,09 s (drei Zeilen, je 70 ms versetzt) · C Flügel 1,45–2,41 s · D Dampf 1,6–3,7 s
   (fünf Schwaden, je 150 ms versetzt). Nie mehr als zwei Gruppen zugleich; jede Keyframe nur Transform; das Endbild ist das Ruhebild; alles endet ≤ 4 s. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-bewegung="an"]:not([data-gesehen]) .kamera { animation: fahrt var(--d-ankunft) var(--k-fahrt) backwards; }
  :root[data-bewegung="an"]:not([data-gesehen]) .glanz::before { animation: licht var(--d-licht) var(--k-licht) var(--d-mittel) backwards; }
  :root[data-bewegung="an"]:not([data-gesehen]) .kelebek, :root[data-bewegung="an"]:not([data-gesehen]) .tuer-zeichen, :root[data-bewegung="an"]:not([data-gesehen]) .tuer-motto { animation: zeile var(--d-zeile) var(--k-aus) backwards; animation-delay: calc(var(--d-ankunft) * 0.32 + var(--d-stufe) * var(--n)); }
  :root[data-bewegung="an"]:not([data-gesehen]) .kanat-l { animation: kanat-l var(--d-fluegel) var(--k-wechsel) calc(var(--d-ankunft) + var(--d-stufe) * 5) 2; }
  :root[data-bewegung="an"]:not([data-gesehen]) .kanat-r { animation: kanat-r var(--d-fluegel) var(--k-wechsel) calc(var(--d-ankunft) + var(--d-stufe) * 5) 2; }
  /* Dampf: jede Schwade (Halo und Kern) steigt einmal auf; bei 52 % liegt sie ganz in der Null-Zone der Maske, bei 52,001 % ganz unter dem Tassenrand (beides unsichtbar), dann wächst sie ins Ruhebild */
  :root[data-bewegung="an"]:not([data-gesehen]) .schwade { animation: dampf var(--d-dampf) linear backwards; animation-delay: calc(var(--d-ankunft) + var(--d-stufe) * 5 + var(--d-dampf-stufe) * (var(--n) + 1)); }
  :root[data-bewegung="an"] .innen { display: block; }
  :root[data-bewegung="an"] .nochmal { display: inline-flex; }
  /* Die Katze: die Bühne mit dem Video legt katze.js an (nur bei Bewegung an) und startet es einmal (katze-los); katze-da: das letzte Bild steht */
  :root[data-bewegung="an"] .katze-buehne { display: block; }
}
@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Tür steht einen Spalt offen, solange die Maus auf „İçeri bak“ ist (Vorschau der Handlung) */
    :root[data-bewegung="an"] .hero--tuer:has(.tuer-knopf:hover) .tuer-blatt { --spalt: -12deg; }
    :root[data-bewegung="an"] .hero--tuer:has(.tuer-knopf:hover) .innen { visibility: visible; }
  }
}
/* Beim Wegscrollen dreht sich das Schaufenster um 6°, als ginge man daran vorbei (nur Drehung) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root[data-bewegung="an"] .fassade { animation: vorbei linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes fahrt { from { transform: translate3d(0, 0, -80px) rotateY(-8deg) rotateX(1.5deg); } }
@keyframes licht { from { transform: translate3d(-60%, 0, 0); } }
@keyframes zeile { from { transform: translate3d(0, 10px, 0); } }
@keyframes kanat-l { 45% { transform: rotateY(58deg); } }
@keyframes kanat-r { 45% { transform: rotateY(-58deg); } }
@keyframes dampf {
  0% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  26% { transform: translateY(calc(var(--hub) * -0.45px)) rotate(var(--sway)) scale(1.15, 1.05); }
  52% { transform: translateY(calc(var(--hub) * -1px)) scale(1.35, 1.1); }
  52.001% { transform: translateY(calc(var(--tief) * 1px)) scale(0.6, 0.08); animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  100% { transform: none; }
}
@keyframes vorbei { to { rotate: y -6deg; } }
/* Seite: der Dokumentwechsel (Tabs, Links) setzt die neue Seite um --versatz, die alte bleibt stehen; nur hinter dem Tor, keine Überblendung.
   Browser ohne View Transitions wechseln sofort; unter reduce kein Opt-in; bei „aus“ sind alle Dauern 0. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  :root[data-bewegung="an"]::view-transition-new(root) { animation: seite var(--d-seite) var(--k-aus); }
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(tab-aktiv), ::view-transition-new(tab-aktiv) { animation: none; }
::view-transition-group(tab-aktiv) { animation-duration: var(--d-seite); animation-timing-function: var(--k-aus); } /* der Tab-Marker gleitet am Schreibtisch von Tab zu Tab (nur Lage und Größe) */
@media (min-width: 1100px) { .menue .tab-marke { view-transition-name: tab-aktiv; } }
@keyframes seite { from { transform: translate3d(0, var(--versatz), 0); } }

/* Druck und erzwungene Farben: die Fassade flach, ohne Lichtband und ohne Raum */
@media print { .kamera, .fassade, .tuer-blatt { transform: none; } .glanz, .innen, .gehweg, .nochmal-zeile { display: none; } }
@media (forced-colors: active) {
  .glanz { display: none; }
  .schalter { forced-color-adjust: none; background: Canvas; border-color: ButtonText; }
  .schalter::after { background: ButtonText; }
  :root[data-bewegung="an"] .bewegung-knopf .schalter, :root[data-theme="dark"] [data-thema-knopf] .schalter { background: Highlight; border-color: Highlight; }
  :root[data-bewegung="an"] .bewegung-knopf .schalter::after, :root[data-theme="dark"] [data-thema-knopf] .schalter::after { background: HighlightText; }
  .farbe-punkt { forced-color-adjust: none; border-color: CanvasText; }
}