/* ==========================================================================
   LIA'S KITCHEN – gemeinsamer Stil aller Seiten
   Stil seit 12.10.2026: Runde 3 · «Vom Detail zum Fest» (Lia: «ok, du kannst alles mal bauen»).
   Dunkle Kino-Bühne (Schiefer und Gold), dazwischen helle Creme-Karten mit runden Kanten.
   Zuerst fürs Handy (375 px), dann 600 px und ab 900 px (Desktop, fester Kopf).

   Regeln für Bewegung (README «Bewegung»):
   - Der Grundstil ist der sichtbare Endzustand. Bewegung kommt nur dazu (html[data-…] setzt js/seite.js).
     Nichts wartet auf ein Scroll-Ereignis oder eine Scroll-Zeitleiste, um sichtbar zu werden.
   - Animiert werden nur transform, opacity und clip-path (werkzeuge/pruefen.py prüft die @keyframes), ohne Ausnahme.
   - Lia 14.10.2026: keine Knöpfe «Bewegung anhalten»; die Bewegung läuft, ruht ausser Sicht und bei «Bewegung
     reduzieren». Was endlos läuft (Ken Burns), steht nur unter
     @media (prefers-reduced-motion: no-preference) und hält mit der Klasse «ruht» an (js/seite.js «ruhe»). Das
     Bildband wandert seit ?v=102 per Skript (js/seite.js «band», auch von Hand) und ruht dort ebenso.

   Gliederung
    1  Grundlagen        Schriften · Farben und Masse · Grundstil · Bausteine · Knöpfe · Goldglanz (Effekt 5) ·
                         Magnetische Knöpfe (zweite Demo 4) · Entwurfs-Band · Platzhalter · Zeitungslook · Seitenwechsel
                         (Effekt 3) · Weiches Scrollen (zweite Demo 7)
    2  Kopf              Rundlogo (Computer 160/140/112 px → 56 px, Handy 92 px → 44 px) · Pillen-Navigation ·
                         Anfrage-Pille · Telefon (nur Handy) · Menü-Knopf und Menü als Vollfläche (unter 900 px) · Ruhiger Start
                         (Startseite am Computer: erst Bild und Text, dann der Kopf) · Beim Lesen (Computer mit Maus:
                         beim Scrollen Logo weg, Menü klappt zum runden Knopf zusammen) · Einblick im Menü (zweite Demo C)
    3  Bühne             nur Startseite: Grundform · Handy · Kamerafahrt · Ken Burns · «Licht an» · Einstieg mit dem Logo ·
                         Rauch (Effekt 1) · Logo-Auftakt · Tiefe im Bild (zweite Demo E)
    4  Abschnitte        Creme-Karten (.hell) · Seiten-Kopf · Über Lia · Leitsatz · Stimmen · Firmenkunden · Aufruf ·
                         Einblenden · Text leuchtet beim Lesen auf (zweite Demo B)
                         (Effekt 4 «Goldene Linienzeichnungen» entfernt 15.10.2026, Lia: nicht wieder vorschlagen)
    5  Karten            Angebot-Kopf mit Video · Bildkacheln (Bento) · alle Formen · Bild-Rahmen · Karten neigen
                         (Effekt 2) · Goldener Rahmen (zweite Demo D)
    6  Bildband
    7  Ablauf
    8  Anfrage           Schritte · Felder · Meldungen · Zusammenfassung · Lieber persönlich · schwebende Pille · Blatt
    9  Fuss
    10 Textseiten        Über mich · Impressum und Datenschutz · 404
    11 Galerie/Lightbox  Galerie · Lightbox · Fokus in der Galerie (zweite Demo 6)
    12 Schluss           Bewegung reduzieren · Druck
   Eine Unterseite darf zusätzlich eine kleine eigene Datei css/<seite>.css laden (nach dieser, gleiche ?v=).
   ========================================================================== */


/* ==========================================================================
   1 GRUNDLAGEN
   ========================================================================== */

/* --- Schriften (lokal, Lizenz SIL OFL 1.1, siehe /schriften/OFL-*.txt) --- */

@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/schriften/montserrat-latin-wght-normal.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: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/schriften/montserrat-latin-ext-wght-normal.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;
}

/* Merriweather mit Achse für optische Grösse (opsz): grosse Titel bekommen feinere Formen */
@font-face {
  font-family: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/schriften/merriweather-latin-opsz-normal.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: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/schriften/merriweather-latin-ext-opsz-normal.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;
}

/* Kursiv für «fresh food for fresh people» (Leitsatz der Startseite, Menü, Über mich) und die Kundenstimmen auf dem
   Handy: die kleinere Datei ohne Achse für die optische Grösse (100 statt 182 KB). Der Fuss braucht sie seit ?v=62 nicht
   mehr (ohne Leitsatz, Lia G2) */
@font-face {
  font-family: "Merriweather"; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url("/schriften/merriweather-latin-wght-italic.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: "Merriweather"; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url("/schriften/merriweather-latin-ext-wght-italic.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;
}

/* --- Farben und Masse ---
   Dunkel: Creme auf Schiefer 15,3:1 · gedämpft 8,5:1 · leise 6,4:1 · Gold 8,4:1 (Tinte auf Gold).
   Hell: Tinte auf Creme 14,3:1 · Tinte-leise 6,1:1 · Gold-dunkel 5,4:1 · Fehler 5,7:1 · Sand 13,0:1.
   Gold auf Creme nur als Linie oder Knopf-Fläche (nie als Schrift). */

:root {
  --grund: #1b1814;          /* Schiefer: Grund der Seite */
  --flaeche: #2a2520;        /* Fläche hinter Bildern, solange sie laden */
  --text: #f4eee2;           /* Creme auf Schiefer */
  --gedaempft: #bdb3a3;
  --leise: #a39a8b;
  --gold: #d4af37;
  --gold-hell: #e2c25a;
  --nacht: #1b1814;          /* Schrift auf Gold */
  --linie: rgba(244,238,226,.12);
  --linie-gold: rgba(212,175,55,.35);
  --offen-text: #e3c878;     /* Platzhalter auf dunkel */
  --offen-rand: #b48022;

  --creme: #f4eee2;          /* helle Karten */
  --sand: #ebe3d4;
  --feld: #fffdf8;
  --tinte: #221e19;
  --tinte-leise: #5e584f;
  --gold-dunkel: #7a5c0f;
  --linie-hell: #d8ccb8;
  --rand-feld: #857b6e;      /* Feldrahmen 3,6:1 auf Creme */
  --fehler: #b91c1c;
  --fehler-flaeche: #fbe4e1;
  --erfolg: #15803d;
  --warnung: #b45309;
  --warnung-flaeche: #fef3c7;
  --warnung-text: #5c3a00;   /* 8,7:1 auf der Warnfläche */

  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --band: 0px;               /* Höhe des Entwurfs-Bands (siehe unten) */
  --kopf-platz: 132px;       /* Platz über dem Seiten-Kopf für den Kopf (Handy: 10 + Logo 92 + Luft; Computer: 16 + 140/160 + Luft) */
  --rand: 20px;
  --breite: 1312px;
  --abstand: 64px;          /* Luft der Abschnitte (Lia 14.10.2026 «leere fläche»: rund ein Drittel weniger, vorher 96/120/136/152 px) */
  --unten: 40px;
  --kante: 10px;
  --radius: 24px;
  --weich: cubic-bezier(.2, .7, .2, 1);
  --aus: cubic-bezier(.16, 1, .3, 1);
}

/* Solange das Entwurfs-Band oben steht, rechnen Kopf und Anker es mit ein */

@media (min-width: 600px) {
  :root { --rand: 32px; --abstand: 80px; }
}

@media (min-width: 900px) {
  :root { --rand: 40px; --abstand: 92px; --unten: 64px; --kante: 20px; --radius: 36px; --kopf-platz: 184px; }
}

/* Logo 160 px (2): erst ab 800 px Höhe (Titel der Bühne bleibt frei) und 1000 px Breite (Kopf bleibt eine Zeile) */
@media (min-width: 1000px) and (min-height: 800px) {
  :root { --kopf-platz: 204px; }
}

@media (min-width: 1200px) {
  :root { --rand: 64px; --abstand: 100px; }
}

/* --- Grundstil --- */

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

html {
  color-scheme: dark; background: var(--grund); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(96px + var(--band)); scroll-padding-bottom: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0; background: var(--grund); color: var(--gedaempft); font-family: var(--sans); font-size: 17px;
  font-weight: 400; line-height: 1.7; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
main { overflow-x: clip; } /* Sicherheitsnetz: nichts schiebt die Seite seitlich (clip lässt «sticky» wirken) */
/* «LIA'S KITCHEN» in der Überzeile der Bühne: ab 900 px eine eigene erste Zeile, auf dem Handy nur vorgelesen (das Logo
   steht dort gross im Kopf; siehe 3 «Bühne»). Die Regel ab 900 px steht absichtlich nach der Grundregel. */
.ueberzeile-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 900px) {
  .ueberzeile-name { position: static; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: inherit; }
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; color: var(--text); font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; text-wrap: balance; }
h1 { font-size: clamp(44px, 9vw, 88px); line-height: 1.02; letter-spacing: -.03em; }
h2 { font-size: clamp(36px, 3.8vw, 58px); line-height: 1.08; letter-spacing: -.02em; }
h3 { font-size: 24px; font-weight: 400; line-height: 1.25; }

/* Handy: Abschnittstitel etwas ruhiger (der lange Angebotstitel steht so bei 375 px in vier statt fünf Zeilen) */
@media (max-width: 599px) {
  h2 { font-size: clamp(30px, 8.6vw, 34px); }
}

p, figure, blockquote, dl, dd { margin: 0; }
p, .form-satz, .zitat figcaption { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* Antippen: kein grauer Kasten von iOS (er kennt keine runden Ecken); die Rückmeldung kommt über :active (12) */
a, button, label { -webkit-tap-highlight-color: transparent; }
/* Safari macht sonst aus Ziffernfolgen (UID) blaue Telefon-Links; alle echten Nummern sind ausdrücklich verlinkt */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; }
/* Zusammenhalten: Markenname, «E-Mail», UID (nie mitten drin umbrechen) */
.zusammen { white-space: nowrap; }
::selection { background: var(--gold); color: var(--nacht); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 7px var(--text); }
.hell :focus-visible, .blatt :focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(212,175,55,.45); }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.symbol { width: 20px; height: 20px; flex: none; }

.huelle {
  width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
  padding-left: max(var(--rand), env(safe-area-inset-left));
  padding-right: max(var(--rand), env(safe-area-inset-right));
}

.huelle-schmal { max-width: calc(48rem + 2 * var(--rand)); }

.springen {
  position: absolute; top: -120px; left: 16px; z-index: 300; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--gold); color: var(--nacht);
  font-size: 15px; font-weight: 600; text-decoration: none;
}

.springen:focus { top: calc(var(--band) + 16px); }
.oben-marke { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

/* --- Bausteine --- */

.ueberzeile {
  display: block; margin: 0 0 18px; color: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 500;
  line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; text-wrap: balance;
}

/* Handy: zweiteilige Überzeile («Über mich · Catering und Events aus Zürich») in zwei Zeilen, statt mitten im Zusatz
   umzubrechen; der Trennpunkt fällt dort weg */
@media (max-width: 599px) {
  .ueberzeile-trenner { display: none; }
  .ueberzeile-zusatz { display: block; }
}

.abschnitt-kopf { max-width: 46rem; margin-bottom: clamp(28px, 3.4vw, 48px); }
.einleitung { max-width: 36em; margin-top: 16px; font-size: 18px; line-height: 1.6; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }

.textlink {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-family: var(--sans);
  font-size: 15px; font-weight: 500; text-decoration-line: underline; text-decoration-color: var(--linie-gold);
  text-decoration-thickness: 1px; text-underline-offset: .35em;
  transition: text-decoration-color 200ms ease, color 200ms ease;
}

.hell .textlink { color: var(--gold-dunkel); font-weight: 600; text-decoration-color: rgba(122,92,15,.45); }

/* Überfahren nur mit Maus (hover: hover): auf dem iPhone bliebe der Zustand nach dem Antippen hängen */
@media (hover: hover) {
  .textlink:hover { color: var(--gold); text-decoration-color: currentColor; }
  .hell .textlink:hover { color: var(--tinte); text-decoration-color: currentColor; }
}
.anruf { font-size: 15px; }
.anruf .ganz { white-space: nowrap; }

/* --- Knöpfe: Gold nur für die Hauptsache «Anlass anfragen» und «Anfrage senden» --- */

.knopf-gold, .knopf-dunkel, .knopf-zurueck, .knopf-klein {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px;
  border: 1px solid transparent; border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 300ms var(--weich);
  -webkit-tap-highlight-color: transparent;
}

.knopf-gold { background: var(--gold); color: var(--nacht); }
.knopf-gold:disabled { opacity: .45; cursor: not-allowed; }
.knopf-dunkel { background: var(--tinte); color: var(--creme); }

.knopf-zurueck {
  padding: 0 18px; background: none; color: var(--tinte);
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
}

.knopf-klein { min-height: 44px; padding: 0 16px; border-color: #b9ab94; background: none; color: var(--tinte); font-size: 11px; }

@media (hover: hover) {
  .knopf-gold:hover { background: var(--gold-hell); }
  .knopf-dunkel:hover { background: #3a332b; }
  .knopf-zurueck:hover { border-color: var(--linie-hell); }
  .knopf-klein:hover { border-color: var(--tinte); }
}
.punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

@media (max-width: 420px) {
  .knopf-gold, .knopf-dunkel { white-space: normal; text-align: center; }
}

/* --- Goldglanz (Effekt 5, Lia 14./15.10.2026; Vorlage: Demo «Wow-Effekte» Fassung 9) ---
   Ein feiner Lichtstreifen läuft einmal über einen goldenen Knopf (.knopf-gold: «Anlass anfragen», «Anfrage
   senden», «Referenz schreiben», Aufruf-Knöpfe), wenn die Maus darüberfährt (nur mit Maus, hover: hover) und bei
   Tastatur-Fokus (:focus-visible); nicht bei «Bewegung reduzieren», nicht am gesperrten Knopf. Der Streifen liegt unter
   der Schrift (z-index −1 im eigenen Stapel des Knopfs) und wartet links ausserhalb (overflow: hidden); position,
   isolation und overflow ändern weder Grösse noch Tippfläche. Nur transform wird animiert.
   Einzeln entfernen: diesen Abschnitt (README «Effekte»). */

.knopf-gold { position: relative; isolation: isolate; overflow: hidden; }

.knopf-gold::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; z-index: -1; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: skewX(-20deg);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .knopf-gold:not(:disabled):hover::after { animation: lk-glanz 900ms ease forwards; }
}

@media (prefers-reduced-motion: no-preference) {
  .knopf-gold:not(:disabled):focus-visible::after { animation: lk-glanz 900ms ease forwards; }
}

@keyframes lk-glanz { to { transform: skewX(-20deg) translateX(560%); } }

/* --- Magnetische Knöpfe (zweite Demo «Neue Wow-Effekte» Nr. 4, Lia 15.10.2026: «1, 4, 6, 7 gefällt mir») ---
   Die goldenen und wichtigen Knöpfe («Anlass anfragen» im Kopf und alle .knopf-gold) ziehen sich mit der Maus in der Nähe
   höchstens 8 px zu ihr hin und federn weich zurück. Das macht js/seite.js «magnet» allein (CSSOM: translate, der Teil von
   transform, der weder den Übergang von transform der Knöpfe noch :active stört; in Ruhe ohne Wert). Hier nur das
   Sicherheitsnetz: bei «Bewegung reduzieren», mit Finger und im Druck stehen sie immer an ihrem Platz.
   Einzeln entfernen: diesen Abschnitt und «magnet» in js/seite.js (README «Effekte»). */

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse), print {
  .kopf-anfrage, .knopf-gold { translate: none !important; }
}

/* Entwurfs-Band: am 21.10.2026 vor dem Online-Gang entfernt (Zeile in allen Seiten und der Block hier). */

/* --- Platzhalter: nur auf der Testadresse sichtbar ---
   Alles, was auf Lias Angaben wartet, trägt die Klasse «wartet-auf-lia» (oder steht darin).
   Sichtbar nur, solange <html> die Klasse «zeige-platzhalter» trägt (Testadresse, README «Platzhalter»). */

html:not(.zeige-platzhalter) .wartet-auf-lia { display: none !important; }

.platzhalter {
  display: inline-block; max-width: 100%; padding: 3px 12px; border: 1px dashed var(--offen-rand);
  border-radius: 999px; background: rgba(212,175,55,.08); color: var(--offen-text); font-family: var(--sans);
  font-size: 12px; font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: .01em;
  text-transform: none;
}

.hell .platzhalter, .blatt .platzhalter { background: #fbf7ef; color: var(--gold-dunkel); }
.zeige-platzhalter section.wartet-auf-lia { outline: 2px dashed var(--offen-rand); outline-offset: -10px; }

.zeige-platzhalter section.wartet-auf-lia::before {
  content: "Nur auf der Testadresse sichtbar – wartet auf Lias Angaben"; display: block; width: fit-content;
  max-width: calc(100% - 2 * var(--rand)); margin: 0 auto 32px; padding: 4px 12px; border-radius: 999px;
  background: var(--warnung-flaeche); color: var(--warnung-text); font-family: var(--sans); font-size: 12px;
  font-weight: 700; line-height: 1.4; text-align: center;
}

/* --- Fotos in echten Farben (Lia 19.10.2026 nach dem Vorher-Nachher-Vergleich: «ohne filter ist gut») ---
   Bis ?v=93 lag auf allen Fotos der «Zeitungslook» (Lia 12.10.2026): Körnung bilder/korn-256.png als ::after an
   .kachel, .band-bild, .ueber-bild-rahmen, .bild-rahmen, .galerie a, .leitsatz-buehne und
   filter: saturate(.84) contrast(1.06) sepia(.07) an den Fotos. Auf Rückmeldung einer Freundin (Fotos «blass, fad und
   ältlich», die Farben und die Frische gehen verloren) ist beides weg. Die Bühne behält vorerst ihre eigene Körnung
   (.korn); das Startbild ist ein eigener Entscheid. */

/* --- Fliessende Seitenwechsel (Effekt 3, Lia 14./15.10.2026; Cross-Document View Transitions, Safari ab 18.2) ---
   Zwischen allen Seiten blendet die Seite sanft über (.4 s). Kopf und Logo haben eigene Namen: was gleich bleibt, steht
   ganz ruhig (das Überblenden gleicher Bildpunkte ändert nichts), ein kleines Logo wird höchstens weich gross. Die zwei
   Karten (Firmenevent, Privatevent) und das Buffet-Video gleiten zwischen Startseite und /angebot/ an ihren Platz
   (data-gleiten="karte-firmenevent", "karte-privatevent", "angebot-video" in index.html und angebot/index.html).
   Die Namen gelten nur während eines Seitenwechsels: auf der alten Seite mit html[data-wechsel] (js/seite.js
   «seitenwechsel» bei «pageswap»), auf der neuen mit :active-view-transition (in :is(), so bleibt die Regel auch in
   Browsern gültig, die es nicht kennen). Nicht während das Anfrage-Blatt aufgeht (eigener Übergang, .blatt-offen).
   data-gleiten-aus (weit weg vom Bild oder kein passendes Ziel) lässt ein Element einfach mit der Seite überblenden.
   Das Logo der Startseite tritt nach einem Seitenwechsel nicht nochmals auf (lk-logo, 3 «Licht an»): sonst liefe es in
   der neuen Ansicht von 0 her, das Logo verschwände kurz und käme kleiner wieder. :active-view-transition gilt, sobald
   die neue Seite erscheint, html[data-nach-wechsel] (js/seite.js «seitenwechsel», neue Seite) hält es danach bis zum
   Neuladen; eines allein reichte nicht (am Ende des Wechsels startete lk-logo neu). Von aussen tritt das Logo wie
   bisher auf (am Computer mit Maus seit ?v=65 nur von aussen, sonst html[data-ohne-auftritt], 3 «Licht an»).
   Nur ohne «Bewegung reduzieren»; Browser ohne View Transitions wechseln ganz normal.
   Einzeln entfernen: diesen Abschnitt bis auf die erste Regel (@view-transition, das schlichte Überblenden, das es schon
   vorher gab), «seitenwechsel» in js/seite.js und die Attribute data-gleiten (README «Effekte»). */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  :is(html[data-wechsel], html:active-view-transition):not(.blatt-offen) .kopf { view-transition-name: kopf; }
  :is(html[data-wechsel], html:active-view-transition):not(.blatt-offen) .kopf > .kopf-logo { view-transition-name: kopf-logo; }
  :is(html[data-wechsel], html:active-view-transition):not(.blatt-offen) [data-gleiten="karte-firmenevent"]:not([data-gleiten-aus]) { view-transition-name: karte-firmenevent; }
  :is(html[data-wechsel], html:active-view-transition):not(.blatt-offen) [data-gleiten="karte-privatevent"]:not([data-gleiten-aus]) { view-transition-name: karte-privatevent; }
  :is(html[data-wechsel], html:active-view-transition):not(.blatt-offen) [data-gleiten="angebot-video"]:not([data-gleiten-aus]) { view-transition-name: angebot-video; }

  /* was gleitet, steht auf der neuen Seite sofort da (kein Einblenden obendrauf, js/seite.js «seitenwechsel») */
  [data-sofort], [data-sofort] * { transition: none !important; }

  /* Kopf und Logo bleiben ruhig: nach einem Seitenwechsel kein Logo-Auftritt (stärker als die Regel in 3 «Licht an») */
  :is(html:active-view-transition, html[data-nach-wechsel]):has(.buehne) .kopf-logo img { animation: none; }
}

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: ease; }
::view-transition-group(kopf) { animation-duration: .4s; }
::view-transition-group(kopf-logo) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

::view-transition-group(karte-firmenevent), ::view-transition-group(karte-privatevent),
::view-transition-group(angebot-video) {
  animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}


/* --- Weiches Scrollen (zweite Demo Nr. 7, Lia 15.10.2026: «1, 4, 6, 7 gefällt mir») ---
   Mausrad und Trackpad gleiten am Computer weich nach: js/seite.js «weichScrollen» rollt dann selbst, Bild für Bild.
   Solange es gleitet, steht html[data-weich-rollt]: die Seite rollt dabei ohne die weiche Grundeinstellung für Anker
   (scroll-behavior: smooth oben im Grundstil), sonst glitte jeder einzelne Schritt noch einmal nach. Anker, Tastatur und
   alles andere rollen wie bisher.
   Einzeln entfernen: diesen Abschnitt und «weichScrollen» in js/seite.js (README «Effekte»). */

html[data-weich-rollt] { scroll-behavior: auto; }


/* ==========================================================================
   2 KOPF – grosses Rundlogo · Pillen-Navigation · Anfrage-Pille · Telefon (nur unter 900 px) · Sprachumschalter
   «DE | EN» · Menü-Knopf
   Steht als HTML in jeder Seite einer Sprache gleich (pruefen.py vergleicht; nur aria-current und die Adressen im
   Sprachumschalter dürfen abweichen; Sprachumschalter seit 15.10.2026, README «Englisch»; seit Lias Entscheid vom
   15.10.2026 ganz rechts, im HTML nach dem Telefon, in .kopf-rechts).
   Menü seit 15.10.2026 (Lia «1a, 2a, 3b»): Start · Angebot · Über Lia · Impressionen · Referenzen (englisch Home ·
   Services · About Lia · Gallery · Reviews); «Anfrage» ist weg (der goldene Knopf «Anlass anfragen» führt hin, auf der
   Kontaktseite trägt er aria-current), «Stimmen» heisst «Referenzen». Ab 900 px steht der Kopf in EINER Zeile: Logo,
   Pille, «Anlass anfragen», «DE | EN»; das Telefon ist ab 900 px nicht mehr im Kopf (Lia 15.10.2026: Kopf
   «recht überfüllt»; die Nummer steht im Fuss und auf Kontakt). Damit sind die Masse wieder fast wie vor dem
   14.10.2026 (gemessen 900 bis 1920 px, siehe README «Aufbau» und «Englisch»).
   Handy (unter 900 px): Logo 92 px (Slogan im Logo eher lesbar), rechts Telefon und «Menü» (Vollfläche, js/seite.js
   «menue»; Lia 15.10.2026: das Telefon bleibt auf dem Handy im Kopf). Mit Skript bleibt der Kopf oben stehen; beim
   Scrollen wird das Logo weich 44 px und eine dunkle Leiste blendet ein. Ohne Skript scrollt der Kopf mit, und statt
   «Menü» steht die Pillen-Navigation (seitlich schiebbar) neben dem Logo.
   Ab 900 px: mit Skript fest (ohne Skript scrollt er mit), Logo 160 px (ab 1000 × 800), sonst 140 px, bei niedrigen
   Fenstern 112 px; beim Scrollen weich 56 px (Tablet mit Finger; am Computer mit Maus seit 15.10.2026 stattdessen
   «Beim Lesen» am Ende dieses Teils: Logo weg, Menü klappt zum runden Knopf zusammen). Quer auf dem Handy (bis 520 px
   hoch) 56 px.
   Logo-Dateien logo-gross-240/320/480 (PNG mit Palette: schärfer und kleiner als AVIF bei zwei Farben).
   ========================================================================== */

.kopf {
  position: absolute; top: var(--band); right: 0; left: 0; z-index: 50; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; pointer-events: none;
  padding: calc(10px + env(safe-area-inset-top)) max(var(--rand), env(safe-area-inset-right)) 0 max(var(--rand), env(safe-area-inset-left));
}

.kopf > * { pointer-events: auto; }
html.js .kopf { position: fixed; }

/* dunkle Leiste hinter dem kleinen Logo (Handy, beim Scrollen); nur Deckkraft wird animiert. Deckend (Grund der
   Seite): mit .94 schien dunkle Schrift auf Creme-Karten darunter durch. Ohne Weichzeichner (über bewegten Bildern
   kostet er in jedem Bild Rechenzeit) */
.kopf::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: -1; height: calc(64px + env(safe-area-inset-top));
  pointer-events: none; border-bottom: 1px solid var(--linie); background: var(--grund); opacity: 0;
  transition: opacity 300ms ease;
}

html[data-klein] .kopf::before { opacity: 1; }

.kopf-logo {
  display: block; flex: none; width: 92px; height: 92px; border-radius: 50%; transform-origin: 0 0;
  box-shadow: 0 10px 32px rgba(0,0,0,.32); transition: transform 600ms var(--weich), box-shadow 600ms ease, opacity 250ms ease;
}

.kopf-logo picture, .kopf-logo img { width: 100%; height: 100%; }
html[data-klein] .kopf-logo { transform: scale(.4783); box-shadow: 0 6px 18px rgba(0,0,0,.35); } /* 92 → 44 px, Mitte = Mitte der Knöpfe */
.pille ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }

.pille a {
  display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--text);
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .08em; text-decoration: none; white-space: nowrap;
  text-transform: uppercase; transition: color 200ms ease, background-color 200ms ease;
}

@media (hover: hover) {
  .kopf-logo:hover { box-shadow: 0 10px 32px rgba(0,0,0,.32), 0 0 0 4px rgba(212,175,55,.28); }
  .pille a:hover { background: rgba(244,238,226,.08); color: var(--gold); }
}

.pille a[aria-current="page"] { background: rgba(212,175,55,.14); color: var(--gold-hell); }
.kopf-rechts { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }

.kopf-anfrage, .telefon-pille, .menue-knopf {
  border: 1px solid var(--linie-gold); background: rgba(34,30,25,.9); color: var(--text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: color 200ms ease, border-color 200ms ease;
}

.kopf-anfrage {
  display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-color: var(--gold);
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: .1em;
  text-decoration: none; text-transform: uppercase; white-space: nowrap;
}

/* Auf der Kontaktseite ist kein Menüpunkt mehr aktuell (seit 15.10.2026 ohne «Anfrage»): dort trägt «Anlass anfragen»
   aria-current="page" und sieht aus wie der eigene Menüpunkt (Goldton auf der Kapsel, Schrift Gold-hell; gleiche
   Schichten wie der aktive Punkt in der Pille, also gleicher Kontrast, AA). Das Menü auf dem Handy übernimmt die
   Markierung für Vorleser (js/seite.js «menue»). */
.kopf-anfrage[aria-current="page"] {
  background-image: linear-gradient(rgba(212,175,55,.14), rgba(212,175,55,.14)); color: var(--gold-hell);
}

.telefon-pille { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }

/* Sprachumschalter «DE | EN» (seit 15.10.2026, README «Englisch»): kleine, ruhige Kapsel wie das Telefon (gleicher
   Rand, Grund und Weichzeichner, gleiche Höhe), die aktuelle Sprache wie der eigene Menüpunkt (Gold-hell auf Goldton,
   aria-current="true"); jeder Link führt zur gleichen Seite in der anderen Sprache. Ab 900 px ganz rechts (Lia
   15.10.2026, letzter Teil von .kopf-rechts, im HTML nach dem Telefon, das ab 900 px fehlt: also direkt nach «Anlass
   anfragen»); unter 900 px mit Skript im Menü (js/seite.js «menue» übernimmt die Kapsel in die Kopfzeile des Menüs),
   ohne Skript im Kopf nach dem Telefon. */
.sprache { flex: none; }

.sprache ul {
  display: flex; align-items: center; height: 44px; margin: 0; padding: 0 3px; list-style: none;
  border: 1px solid var(--linie-gold); border-radius: 999px; background: rgba(34,30,25,.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.sprache li { display: flex; align-items: center; }
.sprache li + li::before { content: ""; width: 1px; height: 14px; background: var(--linie-gold); } /* feiner Strich «|» */

.sprache a {
  display: flex; align-items: center; min-height: 44px; padding: 0 9px; border-radius: 999px; color: var(--gedaempft);
  font: 600 11px/1 var(--sans); letter-spacing: .08em; text-decoration: none; transition: color 200ms ease, background-color 200ms ease;
}

.sprache a[aria-current="true"] { background: rgba(212,175,55,.14); color: var(--gold-hell); }

@media (hover: hover) {
  .sprache a:hover { color: var(--gold); }
}

.menue-knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px;
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menue-striche { width: 18px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }

@media (hover: hover) {
  .kopf-anfrage:hover, .telefon-pille:hover, .menue-knopf:hover { border-color: var(--gold-hell); color: var(--gold); }
}

@media (max-width: 899px) {
  /* ohne Skript: Pillen-Navigation neben dem Logo, seitlich schiebbar (die Seite nicht) */
  .pille { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .pille::-webkit-scrollbar { display: none; }
  .pille ul { width: max-content; }
  /* mit Skript: «Menü» statt der Pillen (und der Sprachumschalter steht im Menü) */
  html[data-menue] .kopf :is(.pille, .sprache) { display: none; }
  /* auf der dunklen Leiste braucht es keinen Weichzeichner mehr (spart Rechenzeit beim Scrollen) */
  html[data-klein] :is(.telefon-pille, .menue-knopf) { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Beim Tippen in der Anfrage tritt der feste Kopf zurück (mehr Platz neben der Tastatur, nichts liegt über dem Feld) */
  .kopf { transition: opacity 200ms ease; }
  html:has(.anfrage :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus) .kopf { opacity: 0; }
  html:has(.anfrage :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus) :is(.kopf, .kopf > *) { pointer-events: none; }
}

/* Handy hochkant ohne Menü (ohne Skript): der Sprachumschalter steht rechts unter dem Telefon (über dem Seiten-Kopf,
   unter --kopf-platz), nicht in der Zeile; sonst blieben der seitlich schiebbaren Pillen-Navigation bei 320 px nur
   rund 40 px (sichtbar nur «HOM»), so wieder rund 130 px wie vor dem Umschalter. Quer und ab 600 px bleibt er in der Zeile
   (seit 15.10.2026 wie am Computer nach dem Telefon, als letzter Teil von .kopf-rechts; .kopf bleibt der Bezug für
   position: absolute, .kopf-rechts ist nicht positioniert) */
@media (max-width: 599px) and (orientation: portrait) {
  html:not([data-menue]) .kopf .sprache {
    position: absolute; top: calc(10px + env(safe-area-inset-top) + 52px); right: max(var(--rand), env(safe-area-inset-right));
  }
}

/* sehr schmale Handys (320 px): Logo 80 px, damit die Überzeile der Bühne frei bleibt */
@media (max-width: 359px) {
  .kopf-logo { width: 80px; height: 80px; }
  html[data-klein] .kopf-logo { transform: scale(.55); }
}

@media (min-width: 900px) {
  /* fest nur mit Skript (html.js .kopf, oben); ohne Skript scrollt der Kopf mit, sonst läge das grosse Logo
     dauernd über dem Text (html[data-klein] setzt nur das Skript) */
  .kopf {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  .kopf::before, .menue-knopf { display: none; }
  /* --kopf-logo: Grösse des Logos (140 px, ab 1000 × 800 160 px, niedrig 112 px) */
  .kopf { --kopf-logo: 140px; }
  .kopf-logo { grid-area: 1 / 1; justify-self: start; width: var(--kopf-logo); height: var(--kopf-logo); }
  .pille { grid-area: 1 / 2; }
  .kopf-rechts { grid-area: 1 / 3; }

  /* Sprachumschalter ganz rechts (nach «Anlass anfragen»): so hoch wie «Anlass anfragen» (52 px), Schrift 10,5 px
     (dezent; ab 1440 px 11 px, unten) */
  .sprache ul { height: 52px; }
  .sprache a { padding: 0 6px; font-size: 10.5px; letter-spacing: .05em; }

  /* Kapsel .9 deckend: auch über den Creme-Karten (Unterseiten, beim Scrollen) AA – Creme 10,9:1, aktiver Punkt
     Gold-hell 5,5:1, Überfahren Gold 4,8:1 (über #fffdf8 4,7:1); über dunklem Grund unverändert ≥ 6,4:1 */
  .pille {
    justify-self: center; height: 52px; padding: 0 2px; border: 1px solid var(--linie-gold); border-radius: 999px;
    background: rgba(34,30,25,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }

  /* 900–999 px: Pille 10,5 px Schrift, Punkte 6 px (wie seit 14.10.2026); alles andere wieder wie vor dem 14.10.2026:
     Logo 140 px, «Anlass anfragen» 11 px mit 16/14 px Innenabstand und Goldpunkt, Lücken 12 und 10 px */
  .pille ul { height: 100%; gap: 0; }
  .pille a { min-height: 46px; padding: 0 6px; font-size: 10.5px; letter-spacing: .05em; }
  .kopf-rechts { justify-self: end; gap: 10px; }
  .kopf-anfrage { display: inline-flex; min-height: 52px; padding: 0 16px 0 14px; }
  .kopf-anfrage .punkt { display: block; }
  /* Telefon ab 900 px nicht im Kopf (Lia 15.10.2026 «3b»; Fuss, Kontakt und auf dem Handy schwebende Leiste und Kopf) */
  .kopf .telefon-pille { display: none; }

  /* beim Scrollen weich auf 56 px (nur transform, Ursprung oben links; Mitte 16 − 2 + 28 = 42 px = Mitte der Pille) */
  html[data-klein] .kopf-logo { transform: translateY(-2px) scale(.4); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
}

/* grosse Fenster (ab 1000 × 800): Logo 160 px, der Slogan im Logo wird lesbar (Lia 13.10.2026); 160 · .35 = 56 px */
@media (min-width: 1000px) and (min-height: 800px) {
  .kopf { --kopf-logo: 160px; }
  html[data-klein] .kopf-logo { transform: translateY(-2px) scale(.35); }
}

/* niedrige Fenster (z. B. 1280 × 700): Logo 112 px, damit der Titel der Bühne frei bleibt */
@media (min-width: 900px) and (max-height: 760px) {
  .kopf { --kopf-logo: 112px; }
  html[data-klein] .kopf-logo { transform: translateY(-2px) scale(.5); }
}

/* Schritte ab 900 px (Lia 15.10.2026: ohne «Anfrage» im Menü und ohne Telefon im Kopf ist wieder Platz; die
   Verkleinerungen vom 14./15.10.2026 sind so weit zurückgenommen, wie es in EINER Zeile mit Luft geht; jeder Schritt
   nur grösser als der vorige). Gemessen 15.10.2026, deutsch (die längere Sprache), Lücken Logo–Pille /
   Pille–«Anlass anfragen» in px ohne bzw. mit dauernd sichtbarem Rollbalken (15 px), README «Englisch»:
   900–999 px   Pille 10,5 px, Punkte 6 px; Logo 140 px, «Anlass anfragen» 11 px mit Goldpunkt, Umschalter 10,5 px
                (900 × 800 je 20 / 12)
   1000–1199 px Pille 11 px, Punkte 10 px wie vor dem 14.10.2026 (1000 × 800 je 21 / 14)
   1200–1359 px Pille 13 px, Punkte 12 px; «Anlass anfragen» 12 px, 22/20 px wie vor dem 14.10.2026; ab 1280 px Pille
                mittig (1280 × 800 rechts 24 / 17)
   1360–1439 px Pillen-Punkte 18 px wie vor dem 14.10.2026 (1360 × 800 rechts 34 / 27)
   ab 1440 px   Umschalter 11 px, 9 px (1440 × 900 rechts 60 / 52) */
@media (min-width: 1000px) {
  .pille ul { gap: 2px; }
  .pille a { padding: 0 10px; font-size: 11px; letter-spacing: .08em; }
}

@media (min-width: 1200px) {
  .pille a { padding: 0 12px; font-size: 13px; }
  .kopf-anfrage { padding: 0 22px 0 20px; font-size: 12px; }
}

/* Pille genau in der Mitte, sobald links und rechts genug Platz ist (vorher sitzt sie in der Mitte zwischen Logo und
   «Anlass anfragen») */
@media (min-width: 1280px) {
  .kopf { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

@media (min-width: 1360px) {
  .pille a { padding: 0 18px; }
}

@media (min-width: 1440px) {
  .sprache a { padding: 0 9px; font-size: 11px; letter-spacing: .08em; }
}

/* --- Menü als Vollfläche (unter 900 px, nur mit Skript): <dialog class="menue"> aus js/seite.js «menue».
       Fokus bleibt im Menü, Esc schliesst, der Fokus kehrt zum Knopf «Menü» zurück. --- */

html.menue-offen { overflow: hidden; }

/* z-index: Safari kennt «overlay» nicht und nimmt das Menü beim Schliessen sofort aus der obersten Ebene; so bleibt es
   beim Ausblenden trotzdem über Kopf und schwebender Pille */
.menue {
  position: fixed; inset: 0; z-index: 100; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0;
  padding: calc(var(--band) + 10px + env(safe-area-inset-top)) max(var(--rand), env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
  overflow-y: auto; overscroll-behavior: contain; border: 0; background: var(--grund); color: var(--gedaempft);
  color-scheme: dark; opacity: 0; transform: translateY(-12px);
  transition: opacity 280ms ease, transform 420ms var(--aus), overlay 420ms allow-discrete, display 420ms allow-discrete;
}

.menue[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }
@starting-style { .menue[open] { opacity: 0; transform: translateY(-12px); } }
.menue::backdrop { background: var(--grund); }
.menue-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.menue-kopf .sprache { margin-left: auto; } /* Sprachumschalter (aus dem Kopf übernommen) zwischen Logo und «Schliessen» */
.menue-logo { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; }
.menue-logo img { width: 100%; height: 100%; }

.menue-zu {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 18px; border: 1px solid var(--linie-gold);
  border-radius: 999px; background: none; color: var(--text); font: 600 11px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer;
}

@media (hover: hover) {
  .menue-zu:hover { border-color: var(--gold-hell); color: var(--gold); }
}

.menue-kreuz { position: relative; width: 14px; height: 14px; }

/* sehr schmale Handys (unter 360 px): «Schliessen» als runder Knopf nur mit dem Kreuz (wie im Anfrage-Blatt), das Wort
   hören Vorleser weiter (wie .unsichtbar). Seit dem Sprachumschalter in der Kopfzeile (15.10.2026) brauchte die Zeile
   deutsch 298 px, bei 320 px sind nur 280 px da (der Knopf lief in den rechten Rand) */
@media (max-width: 359px) {
  .menue-zu { position: relative; flex: none; justify-content: center; width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 50%; }
  .menue-zu-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.menue-kreuz::before, .menue-kreuz::after { content: ""; position: absolute; top: 6px; left: -1px; width: 16px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.menue-kreuz::after { transform: rotate(-45deg); }
.menue-nav { margin-top: clamp(28px, 7vh, 64px); }
.menue-nav .ueberzeile { margin-bottom: 14px; }
.menue-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.menue-liste li { border-bottom: 1px solid var(--linie); }

.menue-liste a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; color: var(--text);
  font: 300 30px/1.15 var(--serif); font-optical-sizing: auto; letter-spacing: -.01em; text-decoration: none;
}

.menue-liste a::after { /* feiner Pfeil */
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold); transform: rotate(45deg);
}

.menue-liste a[aria-current="page"] { color: var(--gold-hell); }
.menue-fuss { display: grid; gap: 10px; margin-top: auto; padding-top: 36px; }
.menue-fuss .knopf-gold { width: 100%; }

.menue-tel {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; color: var(--text);
  font-size: 15px; font-weight: 500; text-decoration-color: var(--linie-gold); text-underline-offset: .35em;
}

.menue-leitsatz { margin-top: 6px; color: var(--gedaempft); font: italic 300 17px/1.4 var(--serif); text-align: center; }

/* Niedrige Handys (z. B. iPhone SE, 375 × 667): seit «Start» und «Stimmen» dazukamen (Lia 14.10.2026, sechs Punkte)
   etwas kompakter, damit das ganze Menü samt «Anlass anfragen», Telefon und Leitsatz in den Bildschirm passt
   (Tippflächen bleiben über 44 px; noch niedriger rollt das Menü wie bisher) */
@media (max-height: 760px) {
  .menue-nav { margin-top: clamp(16px, 4vh, 40px); }
  .menue-liste a { min-height: 50px; font-size: 26px; }
  .menue-fuss { padding-top: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .menue[open] .menue-liste li { transition: opacity 420ms ease var(--verz, 0ms), transform 560ms var(--aus) var(--verz, 0ms); }
  @starting-style { .menue[open] .menue-liste li { opacity: 0; transform: translate3d(0, 12px, 0); } }
  .menue-liste li:nth-child(2) { --verz: 60ms; }
  .menue-liste li:nth-child(3) { --verz: 120ms; }
  .menue-liste li:nth-child(4) { --verz: 180ms; }
  .menue-liste li:nth-child(5) { --verz: 240ms; }
  .menue-liste li:nth-child(6) { --verz: 300ms; }
}

/* --- Ruhiger Start (nur Startseite, deutsch und englisch; nur am Computer mit Maus ab 900 px; Lia 15.10.2026: «wenn
       man die seite öffnet soll erstmal nur das Bild und Text stehen, erst wenn man den curser bewegt, kommt das menu
       und alles andere», Antworten 1a, 2a, 3a, 4a, «4 sekunden»; seit 15.10.2026 8 s, Lia «b») ---
   Beim Laden stehen nur Logo, Bühnenbild mit Rauch, Überzeile, Titel und Satz. Pillen-Navigation, .kopf-rechts
   («Anlass anfragen», «DE | EN»; das Telefon ist ab 900 px nicht mehr im Kopf) und das Entwurfs-Band warten
   unsichtbar, bis die Maus sich bewegt, die Seite rollt, eine Taste, ein Klick, eine Berührung oder der Fokus kommt,
   spätestens nach 8 s. js/seite.js «ruhigerStart»
   setzt html[data-ruhiger-start="wartet"], beim Auslöser «zeigt» (Einblenden in 0,8 s, nur ohne «Bewegung
   reduzieren»), danach ist das Attribut weg und alles bleibt sichtbar. Nur optisch versteckt: opacity und
   pointer-events, nie display oder visibility (werkzeuge/pruefen.py) – der Platz bleibt (Kopf-Layout, Platz des grossen
   Logos im Einstieg), Vorleser hören alles, die Tastatur erreicht alles (Fokus darauf: sofort alles da). Ohne Skript,
   auf Handy und Tablet, auf den Unterseiten, mit Sprungziel, nach einem Seitenwechsel und beim Zurückkommen setzt das
   Skript nichts: alles ist sofort da. Die Liste der Teile steht gleich in js/seite.js (RUHIG_TEILE).
   Einzeln entfernen: diesen Abschnitt und «ruhigerStart» in js/seite.js (README «Effekte»). */

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  html[data-ruhiger-start="wartet"] :is(.kopf > .pille, .kopf > .kopf-rechts) { opacity: 0; pointer-events: none; }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-ruhiger-start="zeigt"] :is(.kopf > .pille, .kopf > .kopf-rechts) {
    transition: opacity 800ms cubic-bezier(.4, 0, .2, 1);
  }
}

/* --- Beim Lesen (alle Seiten, deutsch und englisch; nur am Computer mit Maus ab 900 px; Lia 15.10.2026: «beim
       runterscrollen soll logo weggehen, menu bar ganz dezent … in sich zusammenklappen, und es öffnet sich, sobald man
       mit dem cursor dran kommt. ich möchte das man die texte lesen kann», dann «1a, 2a, 3 Handy so lassen»; Demo
       «Logo-Auftakt» Teil C «Beim Lesen», Lia «gut so»; seit ?v=65 als Fliessen, Lia 15.10.2026 abends: «menubar ist
       grundsätzlich ok, aber es sollte optisch zeigen, wie es langsam in den drei streifen hinein fliesst») ---
   js/seite.js «beimLesen» setzt html[data-lesen]: «oben» (ganz oben: alles wie bisher, mit Logo), «zu» (ab 48 px
   gescrollt: das Logo blendet aus, Pille, «Anlass anfragen» und «DE | EN» fliessen in den runden Knopf .lese-knopf oben
   rechts; erst unter 24 px wieder «oben») und «offen» (Maus in der Nähe, Tastatur-Fokus im Kopf oder Klick: sie fliessen
   wieder heraus, nach links gerückt, damit der Knopf daneben Platz hat; das Logo bleibt weg). Das kleine Logo beim
   Scrollen (data-klein, oben in 2) gibt es am Computer mit Maus nicht mehr. Handy, Tablet und schmale Fenster: kein
   data-lesen, alles wie bisher (Lia: «Handy so lassen»).
   Das Fliessen (seit ?v=65, rund 1 s, Lia «ca. 0,8 bis 1 s»: der letzte Streifen ist nach 1,04 s fertig): unter jeder Kapsel (Pille, «Anlass anfragen», «DE | EN») liegt eine Hülle
   gleicher Form (.lese-fluss > .lese-huelle aus dem Skript, aria-hidden, lässt Klicks durch, z-index −1: unter den echten
   Teilen). Beim Zuklappen blendet die echte Kapsel mit ihrer Schrift früh aus (0,2 s), darunter steht ihre Hülle; die
   Hüllen gleiten nach rechts zum Knopf und ziehen sich dabei auf seine Grösse zusammen (clip-path inset … round 26px:
   die Breite schrumpft von links, die Ränder bleiben rund; transform verschiebt das rechte Ende genau auf den Knopf,
   --zu-x/--zu-y/--zu-links/--zu-oben aus dem Skript), die Pille zuerst, dann «Anlass anfragen», dann «DE | EN»; im
   Knopf verschmelzen sie (der Knopf blendet über ihnen ein, sie blenden aus), dann wachsen die drei Streifen nacheinander
   aus ihrer Mitte (zuerst der mittlere). Zurück (ganz oben oder Aufklappen) umgekehrt: die Streifen ziehen sich zurück,
   aus dem Knopf fliessen die Hüllen an ihren Platz, dann blenden die echten Teile mit der Schrift darüber ein. Die
   Hüllen sind in Ruhe nie zu sehen: zu ist jede einzelne durchsichtig (opacity der Hülle), oben und offen der ganze
   Behälter (opacity von .lese-fluss); je mit Verzögerung, so sind sie nur während des Fliessens da. Bewegt werden nur
   opacity, transform und clip-path (README «Bewegung»), nie die echten Teile (ihr Weichzeichner, Fokusrahmen, Magnet und
   die Bedienung bleiben, wie sie sind).
   Nur optisch versteckt (opacity und pointer-events, nie display oder visibility): Vorleser hören den ganzen Kopf,
   Fokus mit der Tastatur klappt auf, das Logo erscheint mit seinem eigenen Fokus. Den Knopf baut das Skript (ohne
   Skript gibt es ihn nicht, der Kopf scrollt dann ab 900 px mit). Masse aus dem Skript, in Ruhelage gemessen:
   --lesen-rechts-weg (Knopf 52 + 10 px) und --lesen-pille-weg (nur so viel, dass zur Pille mindestens 20 px Luft
   bleiben; bei 1920 px 0, die Pille bleibt in der Mitte). Bewegung nur ohne «Bewegung reduzieren»; sonst klappt es ohne
   Bewegung zu und auf, wie in der Demo (die Hüllen gibt es dann gar nicht, die Streifen stehen). html[data-lesen-sofort]:
   ohne Übergang (Anfangszustand, z. B. mit Sprungziel weiter unten geladen; der Kopf war unsichtbar).
   Einzeln entfernen: diesen Abschnitt und «beimLesen» in js/seite.js (README «Effekte»). */

/* runder Knopf «Menü» (aus js/seite.js, am Ende des Kopfs): dunkler Grund, Goldrand, drei feine Linien; ganz rechts auf
   der Höhe der Pille, so gross wie «Anlass anfragen» und «DE | EN» hoch sind (52 px); sichtbar nur beim Lesen (unten) */
.lese-knopf {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); right: max(var(--rand), env(safe-area-inset-right));
  display: none; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 1px solid var(--gold);
  border-radius: 50%; background: rgba(34,30,25,.9); color: var(--text); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* drei Linien (je ein span), 6 px auseinander */
.lese-striche { display: grid; gap: 4.5px; width: 20px; }
.lese-striche > span { display: block; height: 1.5px; border-radius: 1px; background: currentColor; }

/* Hüllen für das Fliessen (aus js/seite.js, nur Schmuck): je eine wie ihre Kapsel (Lage und Grösse aus dem Skript, Rand
   und Grund wie dort), sichtbar nur am Computer beim Lesen und nur während des Fliessens (unten) */
.lese-fluss { display: none; }
.kopf > .lese-fluss { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.lese-huelle {
  position: absolute; top: var(--y, 0px); left: var(--x, 0px); width: var(--b, 52px); height: var(--h, 52px);
  border: 1px solid var(--linie-gold); border-radius: 999px; background: rgba(34,30,25,.9);
}

.lese-huelle-anfrage { border-color: var(--gold); }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  /* das Logo wird beim Scrollen nicht mehr klein (data-klein): es steht, bis es beim Lesen ausblendet */
  html[data-lesen] .kopf > .kopf-logo { transform: none; }

  /* zu: Logo, Pille und .kopf-rechts nur optisch weg (der Platz bleibt, Vorleser und Tastatur erreichen alles) */
  html.js:is([data-lesen="zu"], [data-lesen="offen"]) .kopf > .kopf-logo { opacity: 0; pointer-events: none; }
  html.js[data-lesen="zu"] .kopf > :is(.pille, .kopf-rechts) { opacity: 0; pointer-events: none; }

  /* offen: zurück, nach links gerückt; der Knopf bleibt daneben */
  html.js[data-lesen="offen"] .kopf > .pille { transform: translateX(calc(-1 * var(--lesen-pille-weg, 0px))); }
  html.js[data-lesen="offen"] .kopf > .kopf-rechts { transform: translateX(calc(-1 * var(--lesen-rechts-weg, 62px))); }

  /* das Logo ist ein Link zur Startseite: mit dem Fokus der Tastatur erscheint es, klein wie früher beim Scrollen
     (scale .4: 56 bis 64 px; in voller Grösse läge es bei 900 bis 1000 px Breite über der nach links gerückten Pille) */
  html.js:is([data-lesen="zu"], [data-lesen="offen"]) .kopf > .kopf-logo:focus-visible {
    opacity: 1; pointer-events: auto; transform: translateY(-2px) scale(.4);
  }

  html[data-lesen] .lese-knopf { display: grid; opacity: 0; visibility: hidden; }
  html:is([data-lesen="zu"], [data-lesen="offen"]) .lese-knopf { opacity: 1; visibility: visible; }
  html[data-lesen="offen"] .lese-knopf, html[data-lesen] .lese-knopf:hover { border-color: var(--gold-hell); color: var(--gold-hell); }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* wieder oben: alles kommt ruhig zurück, das Logo langsamer (nicht während Logo-Auftakt und Einstieg, die regeln das
     Logo selbst); aus «zu» blenden Pille und .kopf-rechts erst ein, wenn ihre Hüllen aus dem Knopf an ihren Platz
     geflossen sind */
  html[data-lesen="oben"]:not([data-auftakt], [data-einstieg]) :where(.kopf > .pille, .kopf > .kopf-rechts) {
    transition: opacity 300ms ease 600ms, transform 700ms var(--aus) 100ms;
  }

  html[data-lesen="oben"]:not([data-auftakt], [data-einstieg]) :where(.kopf > .kopf-logo) {
    transition: opacity 900ms ease 200ms, transform 1100ms var(--aus) 200ms, box-shadow 600ms ease;
  }

  /* zu: die echten Teile blenden mit ihrer Schrift früh aus (darunter steht schon ihre Hülle, die gleich losfliesst) */
  html.js[data-lesen="zu"] .kopf > :is(.pille, .kopf-rechts) {
    transition: opacity 200ms cubic-bezier(.4, 0, .2, 1), transform 700ms cubic-bezier(.6, 0, .25, 1);
  }

  html.js:is([data-lesen="zu"], [data-lesen="offen"]) .kopf > .kopf-logo {
    transform: translateY(-6%) scale(.9); transition: opacity 400ms ease, transform 600ms var(--aus);
  }

  /* offen: aus dem Knopf fliessen die Hüllen heraus, die echten Teile blenden danach mit der Schrift ein */
  html.js[data-lesen="offen"] .kopf > :is(.pille, .kopf-rechts) {
    transition: opacity 260ms ease 400ms, transform 620ms var(--aus) 40ms;
  }

  /* Hüllen: oben und offen auf ihrer Kapsel (offen mit ihr nach links gerückt), ganz (clip-path ohne Schnitt) */
  html[data-lesen] .kopf > .lese-fluss { display: block; opacity: 0; transition: opacity 200ms ease 760ms; }

  html[data-lesen] .lese-huelle {
    clip-path: inset(0px 0px 0px 0px round 26px);
    transition: transform 680ms var(--aus) 100ms, clip-path 680ms var(--aus) 100ms, opacity 0s;
  }

  html[data-lesen] .lese-huelle-anfrage { transition-delay: 140ms, 140ms, 0s; }
  html[data-lesen] .lese-huelle-pille { transition-delay: 180ms, 180ms, 0s; }

  html[data-lesen="offen"] .kopf > .lese-fluss { transition: opacity 200ms ease 620ms; }
  html[data-lesen="offen"] .lese-huelle { transition: transform 600ms var(--aus) 40ms, clip-path 600ms var(--aus) 40ms, opacity 0s; }
  html[data-lesen="offen"] .lese-huelle-pille { transform: translateX(calc(-1 * var(--lesen-pille-weg, 0px))); }

  html[data-lesen="offen"] :is(.lese-huelle-anfrage, .lese-huelle-sprache) {
    transform: translateX(calc(-1 * var(--lesen-rechts-weg, 62px)));
  }

  /* zu: der Behälter sofort da, jede Hülle fliesst zum Knopf, zieht sich auf seine Grösse zusammen (die Pille zuerst)
     und blendet im Knopf aus */
  html[data-lesen="zu"] .kopf > .lese-fluss { opacity: 1; transition: opacity 0s; }

  html[data-lesen="zu"] .lese-huelle {
    opacity: 0; transform: translate3d(var(--zu-x, 0px), var(--zu-y, 0px), 0);
    clip-path: inset(var(--zu-oben, 0px) 0px var(--zu-oben, 0px) var(--zu-links, 0px) round 26px);
    transition: transform 720ms cubic-bezier(.6, 0, .25, 1) 120ms, clip-path 720ms cubic-bezier(.6, 0, .25, 1) 120ms,
      opacity 200ms ease 660ms;
  }

  html[data-lesen="zu"] .lese-huelle-pille { transition-delay: 40ms, 40ms, 640ms; }
  html[data-lesen="zu"] .lese-huelle-anfrage { transition-delay: 80ms, 80ms, 650ms; }

  /* Knopf: erscheint, wenn die Hüllen ankommen (an derselben Stelle); ganz oben verschwindet er wieder, zuerst */
  html[data-lesen] .lese-knopf {
    transform: scale(.8);
    transition: opacity 260ms ease 60ms, transform 420ms var(--aus) 60ms, visibility 0s linear 480ms, color 240ms ease,
      border-color 240ms ease;
  }

  html[data-lesen="zu"] .lese-knopf {
    transform: none;
    transition: opacity 300ms ease 520ms, transform 560ms var(--aus) 480ms, visibility 0s, color 240ms ease,
      border-color 240ms ease;
  }

  html[data-lesen="offen"] .lese-knopf {
    transform: none;
    transition: opacity 280ms ease, transform 480ms var(--aus), visibility 0s, color 240ms ease, border-color 240ms ease;
  }

  /* drei Streifen: wachsen im Knopf nacheinander aus ihrer Mitte (zuerst der mittlere), zurück schnell umgekehrt */
  html[data-lesen] .lese-striche > span { transform: scaleX(0); transition: transform 180ms ease 80ms; }
  html[data-lesen] .lese-striche > span:nth-child(1) { transition-delay: 40ms; }
  html[data-lesen] .lese-striche > span:nth-child(3) { transition-delay: 0s; }
  html[data-lesen="zu"] .lese-striche > span { transform: none; transition: transform 320ms var(--aus) 600ms; }
  html[data-lesen="zu"] .lese-striche > span:nth-child(1) { transition-delay: 660ms; }
  html[data-lesen="zu"] .lese-striche > span:nth-child(3) { transition-delay: 720ms; }
  html[data-lesen="offen"] .lese-striche > span { transform: none; transition: transform 340ms var(--aus) 160ms; }
  html[data-lesen="offen"] .lese-striche > span:nth-child(1) { transition-delay: 220ms; }
  html[data-lesen="offen"] .lese-striche > span:nth-child(3) { transition-delay: 280ms; }

  /* Anfangszustand (weiter unten geladen, Kopf unsichtbar), Fenster wieder breit, «Zurück»: ohne Übergang */
  html.js[data-lesen-sofort] .kopf :is(.kopf-logo, .pille, .kopf-rechts, .lese-knopf, .lese-fluss, .lese-huelle, .lese-striche > span) {
    transition: none;
  }
}


/* --- Einblick im Menü: Vorschau der Seite (zweite Demo C, 15.10.2026; seit 19.10.2026 ein kleines Bild der Zielseite
       statt Sätzen, Lia: «keine Textbeschreibung … Stattdessen soll eine kleine visuelle Vorschau der dazugehörigen Seite
       angezeigt werden – ähnlich einer Miniaturansicht oder einem Vorschaubild») ---
   Fährt die Maus über einen Punkt der Pillen-Navigation, erscheint darunter eine kleine, edle Karte (dunkel, Goldrand,
   runde Ecken wie die Karten der Seite) mit einem Vorschaubild der Zielseite (js/seite.js «einblick»: ein
   Bildschirmfoto wie am Computer, bilder/vorschau-* aus werkzeuge/vorschaubilder.js, 16:10). Die Karte hat immer die
   gleiche Grösse (alle Bilder 16:10, übereinander im selben Raster, zu sehen nur das aktuelle .an; beim Wechsel blenden
   sie über, nichts springt). Sie folgt der Maus weich (das Skript setzt transform an .einblick) und verblasst beim
   Verlassen. Nur Schmuck (aria-hidden), lässt jeden Klick durch. Nur am Computer mit Maus; Übergänge nur ohne
   «Bewegung reduzieren» (dort baut das Skript die Karte gar nicht), nur opacity und transform. Breite der Karte und
   Innenabstand gehören zu EINBLICK_GROESSE in js/seite.js (Bild = Karte − 2 × 6 px).
   Einzeln entfernen: diesen Abschnitt, «einblick» in js/seite.js, die Dateien bilder/vorschau-* und
   werkzeuge/vorschaubilder.js und .swift (README «Effekte»). */

.einblick { position: fixed; top: 0; left: 0; z-index: 60; display: none; width: clamp(260px, 22vw, 320px); pointer-events: none; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .einblick { display: block; }

  /* Karte: dunkle Fläche mit feinem Goldrand, weicher Schatten; darin die Bilder übereinander */
  .einblick-karte {
    display: grid; padding: 6px; border-radius: 16px; background: #1d1a16;
    box-shadow: 0 0 0 1px rgba(212,175,55,.6), 0 18px 32px rgba(0,0,0,.5); opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.97); transform-origin: 16px 0;
  }
  .einblick.zeigt .einblick-karte { opacity: 1; transform: none; }

  /* das Vorschaubild einer Seite (16:10, wie das Fenster bei 1280 × 800 px) */
  .einblick-seite {
    grid-area: 1 / 1; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px;
    background: var(--grund); box-shadow: inset 0 0 0 1px rgba(244,238,226,.06); opacity: 0;
  }
  .einblick-seite.an { opacity: 1; }
  .einblick-seite img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .einblick-karte { transition: opacity 260ms ease, transform 520ms var(--aus); }
  .einblick-seite { transition: opacity 300ms ease; }
}

@media print {
  .einblick { display: none !important; }
}


/* ==========================================================================
   3 BÜHNE – nur auf der Startseite (.buehne)
   Grundform (ohne Skript, «Bewegung reduzieren»): Detailbild über den ersten Bildschirm mit Titel und Satz darauf,
   darunter die drei Bilder. Handy (unter 900 px): Detailbild hochkant (buehne-handy-*), ruhiger Ken Burns, kein
   langes Sticky. Ab 900 px mit Skript: Kamerafahrt vom Detail zum ganzen Fest; seite.js rechnet --p (0 … 1) schon
   beim Laden. Seit 14.10.2026 (Lia) ohne Knopf «Anlass anfragen», ohne Telefon und ohne «Bewegung anhalten»: der
   Satz ist das letzte Element unten links; auch der Hinweis «Scrollen …» unten rechts ist weg (Lia 14.10.2026).
   ========================================================================== */

.buehne { --p: 0; --hoehe: max(100svh, 620px); position: relative; background: var(--grund); }
.buehne-rahmen, .buehne-bilder { position: relative; }
.szene, .szene-kamera { position: relative; }
.szene img { width: 100%; height: 100%; object-fit: cover; }
.szene-detail { z-index: 2; height: var(--hoehe); overflow: hidden; background: var(--grund); }
.szene-detail .szene-kamera, .szene-detail picture { height: 100%; }
.szene-detail img { object-position: 64% 36%; }
.szene .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.szene:not(.szene-detail) {
  padding: clamp(48px, 7vw, 112px) max(var(--rand), env(safe-area-inset-right)) 0 max(var(--rand), env(safe-area-inset-left));
  max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
}

.szene:not(.szene-detail) .szene-kamera { overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--flaeche); }
.szene:not(.szene-detail) picture { height: 100%; }
.szene-loeffel img { object-position: 50% 30%; }

.licht, .verlauf, .korn { position: absolute; top: 0; right: 0; left: 0; height: var(--hoehe); pointer-events: none; }
.licht { z-index: 5; background: var(--grund); opacity: .16; }

/* Verlauf links unten (Textstelle: Creme ≥ 7:1, Gold ≥ 4,5:1, auch am Ende des Ken Burns) */
.verlauf { /* mit sharp nachgemessen bei Zoom 1,00–1,12: Creme min. 9,5:1, Gold (95 % der Pixel) 7,2:1 */
  z-index: 6;
  background:
    radial-gradient(54% 96% at 0% 100%, rgba(27,24,20,.88) 0%, rgba(27,24,20,.85) 95%, rgba(27,24,20,.6) 115%, rgba(27,24,20,0) 145%),
    linear-gradient(to top, rgba(27,24,20,.34) 0%, rgba(27,24,20,.1) 14%, rgba(27,24,20,0) 26%),
    linear-gradient(rgba(27,24,20,.42), rgba(27,24,20,0) 18%);
}

.korn { z-index: 7; background-image: url("/bilder/korn-256.png"); background-size: 256px 256px; opacity: .06; }

.buehne-text {
  position: absolute; top: 0; left: 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end;
  width: min(100%, 760px); height: var(--hoehe); /* 760: die Überzeile ohne Namen (522 px) passt in eine Zeile */
  padding: calc(var(--kopf-platz) + var(--band)) max(var(--rand), env(safe-area-inset-right)) var(--unten) max(var(--rand), env(safe-area-inset-left));
  pointer-events: none;
}

.buehne-text > * { pointer-events: auto; }
/* Überzeile seit 14.10.2026 (Lia: zwei Zeilen, «in der ganzen Schweiz» weglassen): ab 900 px «LIA'S KITCHEN» /
   «Catering und Events aus Zürich», auf dem Handy nur «Catering und Events aus Zürich». Beide Zeilen sind kurz
   (höchstens rund 380 px) und stehen links über dem dunklen Bildteil, wo Gold früher mit ≥ 5,3:1 gemessen wurde;
   das helle Ende einer langen Zeile (bis 3,1:1) gibt es nicht mehr. */
.buehne-ueberzeile { margin-bottom: 0; }
.goldlinie { width: 160px; height: 2px; margin: 16px 0 26px; transform-origin: 0 50%; }

.h1-titel {
  display: block; max-width: 5.6em; margin-left: -.045em; font-size: clamp(44px, 12vw, 64px); font-variation-settings: "opsz" 144;
  font-weight: 300; line-height: .98; letter-spacing: -.03em; text-wrap: balance;
}

/* jedes Wort steigt aus einer unsichtbaren Kante (Grundstil: einfach da) */
.wort { display: inline-block; overflow: hidden; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.wort > span { display: inline-block; }

.buehne-satz { max-width: 34em; margin-top: 28px; color: var(--text); }

.schein { display: none; }

@media (min-width: 900px) {
  .h1-titel { font-size: clamp(64px, min(7.2vw, 12svh), 116px); }


  /* Startbild schon vor dem Skript genau so gross wie in der Kamerafahrt: kein Sprung.
     Bildrahmen 16:9, deckend, 5 % Reserve – gilt auch für alle Szenen der Kamerafahrt. «max-width: none» hebt die
     Grundregel «picture { max-width: 100% }» (1 Grundlagen) auf: sonst wäre der Rahmen nur so breit wie das Fenster,
     rechts bliebe ein dunkler Streifen (bei 1440 × 900 rund 120 px, bei 1024 × 768 rund 200 px; beim Dessert links) und
     Detail und Gesamtbild lägen beim Zoom nicht deckungsgleich (Fehler seit ?v=6, behoben 15.10.2026 mit ?v=63). */
  .szene-detail { container-type: size; }
  .szene-detail .szene-kamera { position: absolute; inset: 0; }
  .szene-detail .szene-kamera > :where(picture, .clip), html[data-fahrt] .szene .szene-kamera > :where(picture, .clip) {
    position: absolute; top: calc(50cqh - max(29.53cqw, 52.5cqh)); left: calc(50cqw - max(52.5cqw, 93.33cqh));
    width: max(105cqw, 186.67cqh); max-width: none; height: max(59.06cqw, 105cqh);
  }

  .szene-detail img, html[data-fahrt] .szene img { object-position: 50% 50%; }
}

/* niedrige Fenster: Titel etwas kleiner, damit er unter dem Logo Platz hat (Logo dann 112 px, siehe 2) */
@media (min-width: 900px) and (max-height: 760px) {
  .h1-titel { font-size: clamp(60px, min(7.2vw, 11svh), 116px); }
}

/* Handy und Tablet: das Detailbild hochkant über den ganzen ersten Bildschirm, Überzeile, Titel und Satz unten
   darauf, danach die drei Bilder als ruhige Komposition (ein breites Bild, zwei Quadrate nebeneinander), mit Luft
   bis zur Karte «Mein Angebot». Kein Sticky. */
@media (max-width: 899px) {
  .buehne { --hoehe: max(100svh, 600px); }
  .buehne-ueberzeile { color: var(--gold-hell); text-wrap: balance; }
  .buehne-text .goldlinie { margin: 12px 0 18px; }
  .h1-titel { font-size: clamp(36px, 11.2vw, 52px); }
  .buehne-satz { max-width: 30em; margin-top: 18px; font-size: 16px; line-height: 1.55; }
  .szene-detail img { object-position: 50% 30%; }

  /* Seit 14.10.2026 (Lia) ist die schwebende Pille auf der Startseite (nur dort gibt es die Bühne) gleich von Anfang
     an da (data-schwebe-ab="sofort"; unten max(16px, 10px + Home-Leiste), 52 px hoch, siehe 8): Überzeile, Titel und
     Satz enden 24 px über ihr, sonst läge die letzte Zeile des Satzes darunter. Auch ohne Skript reserviert (kein
     Springen, wenn das Skript kommt). Bewusst ohne :has(), damit auch ältere Browser den Platz freihalten. Der
     Textblock steht damit etwa so hoch wie bis 14.10.2026 mit Knopf und Telefon (Kontrast unten gemessen). */
  .buehne-text {
    width: 100%; padding-bottom: calc(max(16px, 10px + env(safe-area-inset-bottom)) + 52px + 24px);
  }

  /* Verlauf von unten in festen Abständen (der Textblock war mit Knopf und Telefon etwa 420–450 px hoch, seit
     14.10.2026 ohne sie ist er niedriger und steht tiefer im dunklen Teil); oben ein leichter Verlauf für Logo und
     Knöpfe des Kopfs. Mit sharp nachgemessen (320–430 px breit, Ken Burns 1,00–1,12, noch mit Knopf):
     Überzeile Gold-hell min. 5,2:1, Titel Creme min. 11:1, Satz Creme min. 12,5:1 */
  .verlauf {
    background:
      linear-gradient(to top, rgba(27,24,20,.9) 0, rgba(27,24,20,.82) 260px, rgba(27,24,20,.68) 440px, rgba(27,24,20,.3) 540px, rgba(27,24,20,0) 640px),
      linear-gradient(rgba(27,24,20,.6), rgba(27,24,20,0) 150px);
  }

  /* die drei Bilder: Gesamt breit, Löffelwand und Dessert als Quadrate; 40 px Luft zur Creme-Karte */
  .buehne-bilder {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
    padding: 0 max(var(--rand), env(safe-area-inset-right)) 40px max(var(--rand), env(safe-area-inset-left));
  }

  .szene-detail {
    grid-column: 1 / -1;
    margin: 0 calc(-1 * max(var(--rand), env(safe-area-inset-right))) 30px calc(-1 * max(var(--rand), env(safe-area-inset-left)));
  }

  .szene:not(.szene-detail) { max-width: none; margin: 0; padding: 0; }
  .szene-gesamt { grid-column: 1 / -1; }
  .szene-loeffel .szene-kamera, .szene-dessert .szene-kamera { --radius: 20px; aspect-ratio: 1 / 1; }

  /* Lia 14.10.2026 (Handy): die drei Bilder unter der Bühne «weg». Versteckt statt gelöscht, weil sie ab 900 px die
     Kamerafahrt bilden; versteckte Bilder mit loading="lazy" lädt der Browser nicht. */
  .szene:not(.szene-detail) { display: none; }
  .szene-detail { margin-bottom: 0; }
  .buehne-bilder { padding-bottom: 16px; }
}

/* Handy quer und Fenster unter 900 px quer: das Querbild der Bühne (siehe <picture>), Ausschnitt wie am Computer */
@media (max-width: 899px) and (orientation: landscape) {
  .szene-detail img { object-position: 64% 40%; }
}

/* niedrige Handys hoch (z. B. iPhone SE, sichtbar etwa 375 × 550): Text etwas kompakter, damit Überzeile, Titel
   und Satz ganz im ersten Bildschirm stehen und das Logo frei bleibt */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 700px) {
  .buehne { --hoehe: max(100svh, 560px); }
  .buehne-text .goldlinie { margin: 10px 0 14px; }
  .h1-titel { font-size: clamp(34px, 9.6vw, 40px); }
  .buehne-satz { margin-top: 12px; font-size: 15px; line-height: 1.5; }
}

/* Einblenden der drei Bilder auf dem Handy: öffnen sich einmal von unten (Grundzustand sichtbar, nur mit Skript) */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] [data-zeigen="szene"] .szene-kamera { clip-path: inset(0 round var(--radius)); transition: clip-path 1300ms var(--aus) var(--verz, 0ms); }
  html[data-zeigen-an] [data-zeigen="szene"] img { transition: transform 1700ms var(--aus) var(--verz, 0ms); }
  html[data-zeigen-an] [data-zeigen="szene"]:not(.ist-da) .szene-kamera { clip-path: inset(22% 0 0 0 round var(--radius)); }
  html[data-zeigen-an] [data-zeigen="szene"]:not(.ist-da) img { transform: scale(1.1); }
  .szene-dessert { --verz: 120ms; }
}

/* Ken Burns auf dem Handy: nur das Detailbild, ruht ausser Sicht (seit 14.10.2026 ohne «Bewegung anhalten») */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html[data-bewegt] .szene-detail .szene-kamera {
    transform-origin: 50% 30%; animation-name: lk-kamera; animation-duration: 18s;
    animation-timing-function: cubic-bezier(.37, 0, .63, 1); animation-delay: -4s;
    animation-iteration-count: infinite; animation-direction: alternate;
  }

  html[data-bewegt] .buehne.ruht .szene-detail .szene-kamera { animation-play-state: paused; }
}

/* --- Kamerafahrt (ab 900 px; seite.js setzt data-fahrt und --p, auch schon beim Laden) --- */

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html[data-fahrt] .buehne { --hoehe: 100svh; height: 240vh; }
  html[data-fahrt] .buehne-rahmen { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; container-type: size; }
  html[data-fahrt] .buehne-bilder { position: absolute; inset: 0; }
  html[data-fahrt] .szene { position: absolute; inset: 0; max-width: none; height: auto; margin: 0; padding: 0; overflow: visible; background: none; }
  html[data-fahrt] .szene .szene-kamera { position: absolute; inset: 0; overflow: visible; border-radius: 0; aspect-ratio: auto; background: none; }
  html[data-fahrt] .szene .szene-kamera > picture { will-change: transform; }
  html[data-fahrt] .szene-detail .szene-kamera > picture { will-change: transform, opacity; }

  /* Reihenfolge der Ebenen: Gesamt 1 · Detail 2 · Löffel 3 · Dessert 4 · Licht 5–7 */
  html[data-fahrt] .szene-gesamt .szene-kamera { z-index: 1; }
  html[data-fahrt] .szene-loeffel .szene-kamera { z-index: 3; }
  html[data-fahrt] .szene-dessert .szene-kamera { z-index: 4; }

  /* Folgebilder erst nach «load» oder beim ersten Scrollen (erster Bildschirm bleibt leicht) */
  html[data-fahrt]:not([data-szenen]) .szene:not(.szene-detail) picture { display: none; }

  /* Fortschritte aus --p: Zoom 0–40 %, Schnitt Löffelwand, Schnitt Dessert, Karte */
  html[data-fahrt] .buehne {
    --a: clamp(0, var(--p) / .4, 1);
    --l: clamp(0, (var(--p) - .4) / .12, 1);
    --d: clamp(0, (var(--p) - .7) / .1, 1);
    --k: clamp(0, (var(--p) - .88) / .12, 1);
  }

  /* Doppelbild-Zoom: Detail und Gesamt liegen deckungsgleich (Faktor 1,8, Fixpunkt 0 % / 13,46 %) */
  html[data-fahrt] .szene-detail :where(picture, .clip) {
    transform-origin: 0% 13.46%; opacity: calc(1 - clamp(0, (var(--p) - .2) / .2, 1)); transform: scale(calc(1 - .4444 * var(--a)));
  }

  html[data-fahrt] .szene-gesamt picture { transform-origin: 0% 13.46%; transform: scale(calc(1.8 - .8 * var(--a))); }

  /* Löffelwand: Box 112 % hoch, Wischschnitt von unten, gleitet nach unten */
  html[data-fahrt] .szene-loeffel .szene-kamera > picture {
    height: max(66.15cqw, 117.6cqh); clip-path: inset(calc(100% - 100% * var(--l)) 0 0 0);
    transform: translateY(calc(-10.71% + 10.71% * clamp(0, (var(--p) - .4) / .3, 1)));
  }

  /* Dessertbuffet: Box 106 % breit, rechts bündig, Wischschnitt von rechts, Schwenk nach links */
  html[data-fahrt] .szene-dessert .szene-kamera > picture {
    right: calc(50cqw - max(52.5cqw, 93.33cqh)); left: auto; width: max(111.3cqw, 197.87cqh);
    clip-path: inset(0 0 0 calc(100% - 100% * var(--d)));
    transform: translateX(calc(5.66% - 5.66% * clamp(0, (var(--p) - .7) / .3, 1)));
  }

  /* feine Goldkante an jedem Wischschnitt */
  html[data-fahrt] .szene-loeffel picture::after, html[data-fahrt] .szene-dessert picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

  html[data-fahrt] .szene-loeffel picture::after {
    border-top: 1px solid var(--gold); background: linear-gradient(rgba(212,175,55,.22), rgba(212,175,55,0) 28px);
    opacity: calc(1 - clamp(0, (var(--p) - .5) / .02, 1)); transform: translateY(calc(100% - 100% * var(--l)));
  }

  html[data-fahrt] .szene-dessert picture::after {
    border-left: 1px solid var(--gold); background: linear-gradient(90deg, rgba(212,175,55,.22), rgba(212,175,55,0) 28px);
    opacity: calc(1 - clamp(0, (var(--p) - .78) / .02, 1)); transform: translateX(calc(100% - 100% * var(--d)));
  }

  html[data-fahrt] .buehne-rahmen { clip-path: inset(calc(20px * var(--k)) round calc(36px * var(--k))); }
  html[data-fahrt] .licht, html[data-fahrt] .verlauf, html[data-fahrt] .korn { inset: -3%; height: auto; }

  /* Lichtschein folgt der Maus (nur mit Maus) */
  html[data-fahrt] .schein {
    position: absolute; top: 0; left: 0; z-index: 9; display: block; width: 60vmax; height: 60vmax;
    margin: -30vmax 0 0 -30vmax; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255,236,196), rgba(255,236,196,0)); opacity: 0;
    mix-blend-mode: screen; transform: translate(var(--lx, 50vw), var(--ly, 50vh)); transition: opacity 700ms ease;
    pointer-events: none;
  }

  html[data-schein] .schein { opacity: .1; }

  /* Ken Burns in Schleife: alle vier Kameras gleich und gleichzeitig (Detail und Gesamt bleiben deckungsgleich).
     Startet schon in Bewegung (negativer Versatz). Bewusst nur Einzelwerte: der Kurzwert «animation:» setzt
     animation-play-state auf «running» zurück und würde die Ruhe ausser Sicht überstimmen. */
  html[data-fahrt][data-bewegt] .szene-kamera {
    transform-origin: 62% 42%; animation-name: lk-kamera; animation-duration: 16s;
    animation-timing-function: cubic-bezier(.37, 0, .63, 1); animation-delay: -4s;
    animation-iteration-count: infinite; animation-direction: alternate;
  }

  /* ausser Sicht hält sie an (stärker als die Regel oben, auch wenn data-bewegt bleibt) */
  html[data-fahrt][data-bewegt] .buehne.ruht .szene-kamera { animation-play-state: paused; }
}

/* 12 % Zoom in 16 s; Bildrahmen mit 5 % Reserve bleibt bei 16:10 und 16:9 deckend */
@keyframes lk-kamera {
  from { transform: none; }
  to { transform: scale(1.12) translate3d(-2%, -1.4%, 0); }
}

/* --- Einstieg «Licht an» (ohne Skript, sofort beim ersten Bild; Endzustand = Grundstil) ---
   Seit ?v=65 am Computer mit Maus nur noch beim Ankommen von aussen (dort übernimmt ohnehin der Logo-Auftakt das Licht):
   neu geladen, mit «Zurück»/«Vor» oder nach einem Link der Website setzt js/frueh.js vor dem ersten Bild
   html[data-ohne-auftritt], dann ist die Startseite sofort ganz da, ohne Einblenden von Licht, Goldlinie, Titel, Satz
   und Logo (Lia 15.10.2026 abends: kein Zwischenzustand). Handy und Tablet wie bisher (js/frueh.js setzt dort nichts),
   ohne Skript wie bisher. */

@media (prefers-reduced-motion: no-preference) {
  .licht { animation: lk-licht 1700ms cubic-bezier(.25, .1, .25, 1) 60ms backwards; }
  .goldlinie { animation: lk-linie 1100ms cubic-bezier(.65, 0, .35, 1) 420ms backwards; }
  .wort > span { animation: lk-wort 1100ms var(--aus) 240ms backwards; }
  .wort:nth-child(2) > span { animation-delay: 360ms; }
  .wort:nth-child(3) > span { animation-delay: 480ms; }
  .buehne-satz { animation: lk-hoch 1000ms var(--aus) 720ms backwards; }
  :root:has(.buehne) .kopf-logo img { animation: lk-logo 1200ms var(--aus) 120ms backwards; } /* nur Startseite */

  /* ohne Auftakt (data-ohne-auftritt aus js/frueh.js, nur am Computer mit Maus ab 900 px gesetzt): sofort ganz da. Bewusst
     ohne Breite und Zeiger in der Bedingung: das Attribut bleibt stehen, und zöge man das Fenster danach unter 900 px
     (oder fehlte die Maus), begänne «Licht an» sonst von vorn (Prüfung 15.10.2026 abends). */
  html[data-ohne-auftritt] .buehne :is(.licht, .goldlinie, .wort > span, .buehne-satz),
  html[data-ohne-auftritt]:has(.buehne) .kopf-logo img { animation: none; } /* stärker als «:root:has(.buehne) …» oben */
}

@keyframes lk-licht { from { opacity: .62; } }
@keyframes lk-linie { from { transform: scaleX(0); } }
@keyframes lk-wort { from { opacity: 0; transform: translate3d(0, 105%, 0); } }
@keyframes lk-hoch { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes lk-logo { from { opacity: 0; transform: scale(.86); } }

/* --- Einstieg mit dem Logo (nur Startseite; js/seite.js «einstieg»; Lia 13.10.2026: «logo möchte ich mehr in szene
       setzen, slogen kann man kaum erkennen») ---
   Beim Ankommen von aussen erscheint das Rundlogo gross und scharf über der Bühne (Computer rechts in der Mitte, bis
   320 px; Handy an seinem Platz oben links, bis 220 px), steht kurz und gleitet dann an seinen Platz im Kopf: nur
   transform (FLIP, das grosse Logo wird zum kleinen), danach übernimmt das Logo im Kopf. Es liegt nie über Titel, Satz
   und Knöpfen und lässt jeden Klick durch; jede Eingabe überspringt. Ohne Skript und bei «Bewegung reduzieren» bleibt
   es versteckt (hidden), das Logo steht einfach im Kopf. Masse und Lage setzt das Skript (--gross, --x, --y, --x2,
   --y2, --s2). */

.einstieg {
  position: fixed; top: 0; left: 0; z-index: 55; width: var(--gross, 220px); height: var(--gross, 220px);
  border-radius: 50%; box-shadow: 0 24px 64px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(.96); transform-origin: 0 0;
}

.einstieg img { width: 100%; height: 100%; border-radius: 50%; }

html[data-einstieg="zeigen"] .einstieg {
  opacity: 1; transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  transition: opacity 700ms ease, transform 1100ms var(--aus);
}

html[data-einstieg="fliegen"] .einstieg {
  opacity: 1; transform: translate3d(var(--x2, 0px), var(--y2, 0px), 0) scale(var(--s2, 1));
  transition: transform 950ms cubic-bezier(.65, 0, .35, 1);
}

html[data-einstieg="fertig"] .einstieg {
  opacity: 0; transform: translate3d(var(--x2, 0px), var(--y2, 0px), 0) scale(var(--s2, 1));
  transition: opacity 250ms ease;
}

/* das Logo im Kopf wartet, bis das grosse gelandet ist (oder übersprungen wurde) */
html[data-einstieg]:not([data-einstieg="fertig"]) .kopf-logo { opacity: 0; transition: none; }

/* Handy: Telefon und Menü treten zurück, solange das grosse Logo steht und gleitet (antippen geht trotzdem und
   überspringt den Einstieg) */
@media (max-width: 899px) {
  .kopf-rechts { transition: opacity 300ms ease; }
  html:is([data-einstieg="zeigen"], [data-einstieg="fliegen"]) .kopf-rechts { opacity: 0; }
}

/* --- Quer und niedrig (Handy quer, auch grosse iPhones ab 900 px Breite; höchstens 520 px hoch) ---
   Kompakter Kopf (Logo 56 px) und Bühnentext in wenigen Zeilen, damit Überzeile, Titel und Satz ganz im Bild stehen. */

@media (orientation: landscape) and (max-height: 520px) {
  :root { --kopf-platz: 88px; --unten: 24px; } /* 8 + Logo 56 + 24 px Luft zur Überzeile der Unterseiten */
  .kopf { padding-top: calc(8px + env(safe-area-inset-top)); }
  .kopf-logo { width: 56px; height: 56px; }
  html[data-klein] .kopf-logo { transform: scale(.7857); } /* 56 → 44 px */
  .buehne { --hoehe: max(100svh, 320px); }
  .h1-titel { max-width: none; font-size: clamp(30px, 8.6svh, 42px); }
  .buehne-text .goldlinie { margin: 8px 0 12px; }
  .buehne-satz { max-width: 40em; margin-top: 10px; font-size: 15px; line-height: 1.5; }
}

@media (min-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  html[data-klein] .kopf-logo { transform: scale(.9286); } /* 56 → 52 px = Höhe der Pille */
}

/* Handy quer: eigener Verlauf in der Bauart des Computers (dunkel links unten hinter dem Text, das Foto oben rechts
   frei). Die festen Stopps des Hochformats (bis 440 px mindestens 68 % Schwarz) deckten die nur rund 400 px hohe
   Bühne fast ganz ab. Ellipse in px (der Satz ist bis 600 px breit, auch bei 667 px Bildschirmbreite), dazu ein
   dunkles Band unten hinter Titel und Satz. Mit sharp nachgemessen (667 × 375, 740 × 360, 812 × 375, 844 × 390,
   896 × 414, Ken Burns 1,00–1,12): Überzeile Gold-hell min. 8,3:1, Titel Creme min. 13,1:1, Satz Creme min. 12,9:1
   (vorher 7,5 / 11,2 / 11,3); über dem Foto rechts oben im Mittel 43 bis 67 % Deckung statt 85 %. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .verlauf {
    background:
      radial-gradient(640px 115% at 0% 100%, rgba(27,24,20,.88) 0%, rgba(27,24,20,.85) 80%, rgba(27,24,20,.5) 100%, rgba(27,24,20,0) 130%),
      linear-gradient(to top, rgba(27,24,20,.85) 0, rgba(27,24,20,.8) 140px, rgba(27,24,20,0) 260px),
      linear-gradient(rgba(27,24,20,.55), rgba(27,24,20,0) 110px);
  }
}

/* --- Rauch über der Bühne (Effekt 1, Lia 14./15.10.2026: «rauch der sich bewegt wäre toll», «weniger hell, mehr
       Bewegung», «die burgers sollen möglichst scharf bleiben»; Vorlage: Demo «Wow-Effekte» Fassung 9) ---
   Ein <canvas class="rauch"> aus js/seite.js «rauch» (nur mit Skript und ohne «Bewegung reduzieren», ohne Knopf zum
   Ausschalten). Er liegt wie in der Demo über den Bildern, Licht und Verlauf und unter der Körnung (gleicher z-index wie
   .korn, steht im HTML davor; unter dem Verlauf wäre er auf dem Handy fast unsichtbar). Hinter Überzeile, Titel und Satz
   spart das Skript ihn ganz aus (Kontrast wie gemessen, README «Bühne»), ebenso die Burger. Grösse wie .licht (Handy:
   der erste Bildschirm), in der Kamerafahrt das ganze Bild. Am Computer blendet er mit dem Wischschnitt zur Löffelwand
   aus (--l aus --p, gleich wie die Löffelwand herein), auf Löffelwand und Dessert ist er weg und das Skript ruht.
   Einzeln entfernen: diesen Abschnitt, «rauch» in js/seite.js und die Attribute data-rauch-frei in index.html
   (README «Effekte»). */

.rauch { position: absolute; top: 0; left: 0; z-index: 7; display: block; width: 100%; height: var(--hoehe); pointer-events: none; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html[data-fahrt] .rauch { height: 100%; opacity: calc(1 - var(--l)); }
}

@media (prefers-reduced-motion: reduce) {
  .rauch { display: none; }
}

@media print {
  .rauch { display: none; }
}

/* --- Logo-Auftakt (nur Startseite am Computer mit Maus; Lia 15.10.2026: «am besten logo wo anders platzieren, und es
       langsam nach oben links wandert», dann «a, logo grösser, bild unschärfer, texte kommen erst und
       hintergrundbild wird schärfer wenn das logo sich bewegt. ersten eindruck nur logo»; Demo «Logo-Auftakt» A,
       Lia «gut so») ---
   Seit ?v=65 nur beim Ankommen von aussen (Lia 15.10.2026 abends: «nur einmal wenn man auf die seite kommt, sonst wird
   es nervig»): nicht beim Neuladen, mit «Zurück»/«Vor», nach einem Link der Website oder ganz oben zurückgescrollt (die
   Wiederholung und ihr Zustand «vorlauf» sind weg); dann ist die Startseite sofort normal (data-ohne-auftritt, oben
   bei «Licht an»). js/seite.js «auftakt» setzt html[data-auftakt] für Bühne und Logo («vorher», bis der Ablauf beginnt;
   «laeuft»; «gelandet») und html[data-auftakt-kopf] für den Kopf («wartet», «zeigt»);
   «vorher» und «wartet» setzt beim Laden schon js/frueh.js vor dem ersten Bild (dazu html[data-auftakt-frueh]). Den
   Ablauf selbst (Logo gross in der Mitte, Flug im Bogen in den Kopf, Foto wird scharf, Titel Zeile für Zeile, dann
   Überzeile, Goldlinie und Satz) spielt das Skript mit Web Animations, nur opacity und transform; hier stehen die
   Zustände davor und dazwischen. Unscharf wird das Foto durch den Schleier .auftakt-schleier (aus dem Skript; über Bild,
   Licht, Verlauf, Rauch und Körnung, unter dem Text): sein backdrop-filter steht fest, nur seine Deckkraft ändert sich.
   Der Kopf wartet wie beim ruhigen Start nur optisch (opacity und pointer-events: der Platz bleibt, Vorleser und
   Tastatur erreichen alles, Fokus zeigt sofort alles); die Teile gleich wie AUFTAKT_TEILE in js/seite.js. Alles nur
   unter @media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference):
   Handy, Tablet und «Bewegung reduzieren» wie bisher; ohne Skript ist alles sofort da (kein data-auftakt im HTML).
   Einzeln entfernen: diesen Abschnitt und «auftakt» in js/seite.js (README «Effekte»). */

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Schleier über dem Foto: fest unscharf (--auftakt-unschaerfe aus dem Skript: 18 px bei 1440 px Breite) */
  .auftakt-schleier {
    position: absolute; top: 0; right: 0; left: 0; z-index: 8; height: var(--hoehe); pointer-events: none;
    -webkit-backdrop-filter: blur(var(--auftakt-unschaerfe, 18px)); backdrop-filter: blur(var(--auftakt-unschaerfe, 18px));
  }

  html[data-fahrt] .auftakt-schleier { height: 100%; }

  /* der Anfang aus js/frueh.js (vor dem ersten Bild, bevor js/seite.js den Schleier legt): gleich unscharf wie der
     Schleier (18 px bei 1440 px Breite = 1,25vw); js/seite.js nimmt data-auftakt-frueh weg, sobald sein Schleier liegt */
  html[data-auftakt-frueh] .buehne-bilder::after {
    content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 8; height: var(--hoehe); pointer-events: none;
    -webkit-backdrop-filter: blur(1.25vw); backdrop-filter: blur(1.25vw);
  }

  /* Text, Verlauf und grosses Logo bleiben im ganzen Auftakt unsichtbar, bis ihre eigene Einblend-Bewegung wirklich
     läuft (seit ?v=67; Lias Aufnahme in Safari 15.10.2026 23:15: grosses Logo und zugleich der ganze Titel und Satz,
     dann verschwand «Kleine», dann der Rest). Bis ?v=66 stand das Verstecken hier nur in «vorher» (am Elternteil
     .buehne-text); ab «laeuft» hing es allein an der Füllung «backwards» der verzögerten Web Animations, und Safari
     legte sie erst nach und nach an. Darum steht es jetzt am Teil selbst und in jedem Zustand (vorher, laeuft,
     gelandet): seine Bewegung (opacity von 0 auf 1, fill «both») zeigt ihn, sobald sie läuft, und hält ihn, bis «fertig»
     bzw. «ende» in js/seite.js alle Bewegungen im selben Schritt wegnehmen wie data-auftakt (dann gilt der Grundstil:
     alles da). Egal, wann Schriften, Zeilen oder Bewegungen kommen. Nie an einem Elternteil (.buehne-text, h1,
     .h1-titel, .wort): dann blieben die Bewegungen der Kinder unsichtbar. Die Teile sind genau die, die «starten»
     einblendet; kommt einer dazu, braucht er eine eigene Bewegung und einen Platz hier. */
  html[data-auftakt] .buehne-text :is(.buehne-ueberzeile, .goldlinie, .wort > span, .buehne-satz),
  html[data-auftakt] :is(.verlauf, .einstieg img) { opacity: 0; }

  /* das Foto dunkler bis zur Landung (die Bewegung des Lichts beginnt ebenso dunkel, fill «both»: nichts blitzt hell
     auf, bis der Browser sie anlegt); «Licht an» wartet beim Laden (das Skript übernimmt das Licht) */
  html:is([data-auftakt="vorher"], [data-auftakt="laeuft"]) .licht { opacity: .62; }
  html[data-auftakt="vorher"] .licht { animation: none; }

  /* Logo im Kopf: wartet unsichtbar bis zur Landung des grossen und bleibt so lange in voller Grösse (auch wenn die
     Seite dabei rollt: das grosse landet genau dort); nach der Landung sofort da (ohne Übergang der Deckkraft, das
     grosse blendet darüber aus) */
  html:is([data-auftakt="vorher"], [data-auftakt="laeuft"]) .kopf-logo { opacity: 0; transform: none; transition: none; }
  html[data-auftakt="gelandet"] .kopf-logo { transition: transform 600ms var(--weich), box-shadow 600ms ease; }

  /* grosses Logo (#einstieg): Grösse und Lage aus dem Skript (--gross, --x, --y), Flug als Web Animation; Schatten
     am Bild, mit --auftakt-k (gross / Kopf) so gross gezeichnet, dass er nach dem Flug dem im Kopf gleicht */
  html[data-auftakt] .einstieg { box-shadow: none; transform: translate3d(var(--x, 0px), var(--y, 0px), 0); transition: none; }
  html[data-auftakt] .einstieg img { box-shadow: 0 calc(10px * var(--auftakt-k, 1)) calc(32px * var(--auftakt-k, 1)) rgba(0,0,0,.32); }
  html[data-auftakt="laeuft"] .einstieg { opacity: 1; }
  html[data-auftakt="gelandet"] .einstieg { opacity: 0; transition: opacity 250ms ease; }

  /* Lichtschein der Maus (Bühne) erst nach der Landung */
  html:is([data-auftakt="vorher"], [data-auftakt="laeuft"]) .schein { opacity: 0; }

  /* Kopf: Menü-Pille, «Anlass anfragen» mit «DE | EN» und das Entwurfs-Band */
  html[data-auftakt-kopf="wartet"] :is(.kopf > .pille, .kopf > .kopf-rechts) { opacity: 0; pointer-events: none; }
  html[data-auftakt-kopf="zeigt"] :is(.kopf > .pille, .kopf > .kopf-rechts) {
    transition: opacity 800ms cubic-bezier(.4, 0, .2, 1);
  }
}

@media print {
  .auftakt-schleier { display: none; }
}


/* --- Tiefe im Bild (zweite Demo E, Lia 15.10.2026: «alle ausser A») ---
   Am Computer mit Maus rückt auf der Bühne das Foto ganz wenig gegen die Maus (höchstens 12 px), der Text davor etwas
   weniger (5 px): js/seite.js «tiefe» setzt transform an .buehne-bilder und .buehne-text (CSSOM, translate3d; in Ruhe ohne
   Wert), erst nach dem Logo-Auftakt und nur mit der Kamerafahrt (dort haben die Fotos 5 % Reserve, Licht, Verlauf und
   Körnung 3 %: kein Rand wird sichtbar). Hier nur das Sicherheitsnetz: bei «Bewegung reduzieren» und im Druck steht alles
   an seinem Platz.
   Einzeln entfernen: diesen Abschnitt und «tiefe» in js/seite.js (README «Effekte»). */

@media (prefers-reduced-motion: reduce), print {
  .buehne-bilder, .buehne-text { transform: none !important; }
}


/* ==========================================================================
   4 ABSCHNITTE – Wechsel dunkel / hell
   Dunkel ist der Grund der Seite. Ein heller Abschnitt trägt die Klasse «hell»: eine Creme-Karte mit runden
   Kanten (wie bei Noon), die beim Hereinscrollen einmal weich breiter wird ([data-kante]).
   ========================================================================== */

/* --- Helle Abschnitte: Creme-Karten --- */

.hell {
  position: relative; isolation: isolate; margin-inline: var(--kante); padding-block: var(--abstand);
  color: var(--tinte-leise); color-scheme: light;
}

.hell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); background: var(--creme);
  transform-origin: 50% 0;
}

.hell + .hell { margin-top: var(--kante); }
.hell h1, .hell h2, .hell h3, .blatt h2, .blatt h3 { color: var(--tinte); } /* Blatt liegt ausserhalb .hell */
.hell .ueberzeile { color: var(--gold-dunkel); font-weight: 600; }
.dunkel { padding-block: var(--abstand); }

/* Kartenkante (Creme-Karte direkt neben einem dunklen Abschnitt): die Kante trennt schon sichtbar, darum auf der
   dunklen Seite nur 0,7 × --abstand; die Karte behält ihre volle Innenluft (Lia 14.10.2026 «leere fläche»).
   Die letzte Karte vor dem Fuss ebenso unten (:where hält die Spezifität bei .hell: .textseite und die
   Handy-Regel der Anfrage weiter unten gelten weiter). */
.hell + :is(.dunkel, .band, .ablauf) { padding-top: calc(var(--abstand) * .7); }
:is(.dunkel, .stimmen, .galerie-abschnitt):has(+ .hell) { padding-bottom: calc(var(--abstand) * .7); }
.hell:where(main > :last-child) { padding-bottom: calc(var(--abstand) * .7); }

/* --- Seiten-Kopf der Unterseiten (dunkel): Überzeile, Titel, Einleitung, allenfalls Knöpfe ---
   <section class="seiten-kopf"><div class="huelle"><p class="ueberzeile">…</p><h1>…</h1>
   <p class="einleitung">…</p></div></section>. Lässt oben Platz für den Kopf. */

.seiten-kopf {
  position: relative; padding: calc(var(--kopf-platz) + var(--band)) 0 clamp(32px, 4.6vw, 68px);
  background: radial-gradient(90% 120% at 88% 0%, rgba(212,175,55,.09), rgba(212,175,55,0) 62%), var(--grund);
}

.seiten-kopf h1 { max-width: 14em; }
.seiten-kopf .einleitung { color: var(--text); }
.seiten-kopf .goldlinie { margin: 22px 0 0; }

/* --- Über Lia (Startseite und /ueber-mich/) --- */

.ueber-raster { display: grid; gap: 32px; }
.ueber-bild { position: relative; }
.ueber-bild-rahmen { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--sand); clip-path: inset(0 round 24px); }
.ueber-bild-rahmen picture, .ueber-bild-rahmen > img { height: 100%; transform: translate3d(0, calc(var(--v, 0) * -4%), 0) scale(1.1); }
.ueber-bild img { width: 100%; height: 100%; object-fit: cover; }
.ueber-bild figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: 13px; }
.ueber-bild-zeile { color: var(--tinte); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ueber-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.ueber-kopf .ueberzeile { margin-bottom: 10px; }
.portraet { width: 116px; height: 116px; padding: 6px; border: 1px solid var(--gold); border-radius: 50%; }
.portraet picture, .portraet img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.zitat { margin-top: 32px; padding-left: 28px; border-left: 1px solid var(--gold); }
.zitat:first-child { margin-top: 0; }

.zitat p {
  color: var(--tinte); font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 300; line-height: 1.45; text-wrap: balance;
}

.zitat figcaption { margin-top: 18px; color: var(--tinte); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.zitat-rolle { color: var(--tinte-leise); font-weight: 500; }
.zitat-rolle::before { content: "· "; }
.ueber-absatz { max-width: 36em; margin-top: 28px; }
.ueber-absatz + .ueber-absatz { margin-top: 18px; }
.ueber-text .textlink { margin-top: 20px; }
/* «Mehr über Lia» und daneben (bzw. darunter, wenn es nicht passt) der Hinweis auf «Eigene Events» (seit 15.10.2026,
   Lia «a»; Ziel seit ?v=64 /angebot/#eigene-events, Lia «2a»); der Text steht in einem span, so bricht er wie ein Satz
   um (im inline-flex des Textlinks wäre sonst jeder Teil ein eigener Block) */
.ueber-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; margin-top: 20px; }
.ueber-text .ueber-links .textlink { margin-top: 0; }
.ueber-links .textlink > span { text-wrap: pretty; }
/* Der Hinweis «Eigene Events» bei «Wer ist Lia?» ist seit 21.10.2026 ganz weg (Lia «link eigne events entfernen»; auf dem
   Handy schon seit 16.10.2026); die Eigenen Events stehen auf Angebot bzw. Services */

/* Handy: das Buffet-Foto (lia-buffet) bei «Wer ist Lia?» weg (Lia 14.10.2026 «weg»; ab 900 px bleibt es). Das Bild
   hat loading="lazy" und wird versteckt nicht geladen. */
@media (max-width: 899px) {
  #ueber-lia .ueber-bild { display: none; }
}

@media (min-width: 900px) {
  .ueber-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
  .ueber-bild { position: sticky; top: calc(112px + var(--band)); }
  .portraet { width: 172px; height: 172px; }
  .ueber-kopf { gap: 36px; }
}

/* --- Leitsatz «fresh food for fresh people» (Startseite): Lias Rundlogo als ruhiger Mittelpunkt, daneben (Computer)
   bzw. darunter (Handy) der Leitsatz in kursiver Schrift, über einem bewegten Foto ---
   Das Logo trägt den Leitsatz klein, die Zeile wiederholt ihn gross: darum ist die Zeile kleiner als früher, und das
   Logo steht als Siegel davor (Lia 13.10.2026: Logo mehr in Szene setzen).
   Grundstil: alles da. Mit Skript blendet das Logo sanft ein und die Wörter steigen nacheinander aus einer
   unsichtbaren Kante ([data-zeigen="leitsatz"]), das Foto zieht ruhig heran (Ken Burns 20 s, ruht ausser Sicht) und
   folgt am Computer leicht dem Scrollen (Parallax). Handy: eigener Hochformat-Ausschnitt (leitsatz-handy-*). Seit
   14.10.2026 (Lia) ohne Satz unter dem Leitsatz: die Bühne sagt fast dasselbe.
   Kontrast an der Textstelle mit sharp gemessen (siehe .leitsatz-verlauf); die Zeilen liegen weiterhin im dunklen
   Kern des Verlaufs (mindestens .78 Deckkraft), das Logo ist eine deckende Goldscheibe. */

.leitsatz { padding-block: var(--kante); }

.leitsatz-buehne {
  position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(460px, 78svh, 800px);
  margin-inline: var(--kante); overflow: hidden; border-radius: var(--radius); background: var(--flaeche);
}

.leitsatz-bild { position: absolute; inset: 0; z-index: -3; transform: translate3d(0, calc(var(--v, 0) * -5%), 0) scale(1.12); }
.leitsatz-kamera, .leitsatz-kamera picture { height: 100%; }
.leitsatz-kamera { transform-origin: 40% 40%; }
.leitsatz-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }

/* mit sharp gemessen (Handy und Computer, Ken Burns 1,00–1,12): Leitsatz Creme min. 7,8:1, Überzeile min. 5:1;
   bei der kleineren Höhe (14.10.2026, 78svh) im Browser nachgemessen (Foto mit Farbfilter und Verlauf, Ken Burns
   1,00–1,12, Parallax −1…1; 375 × 667 bis 1440 × 900): Leitsatz min. 7,9:1, Überzeile min. 5,6:1, Text überall im
   Kern des Verlaufs (≥ .78 Deckkraft) */
.leitsatz-verlauf {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 52%, rgba(27,24,20,.84) 0%, rgba(27,24,20,.78) 45%, rgba(27,24,20,.58) 100%);
}

.leitsatz-text { width: 100%; max-width: calc(64rem + 2 * var(--rand)); padding: 56px var(--rand) 64px; text-align: center; }
.leitsatz .ueberzeile { margin-bottom: 18px; color: var(--gold-hell); }

/* Rundlogo: deckende Goldscheibe mit dem Leitsatz, gestochen scharf (logo-gross-*, 2x/3x) */
.leitsatz-logo {
  width: clamp(180px, 54vw, 220px); margin: 0 auto 32px; border-radius: 50%;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.leitsatz-logo img { width: 100%; height: auto; border-radius: 50%; }

.leitsatz h2 {
  color: var(--text); font-size: clamp(32px, 8.6vw, 56px); font-style: italic; font-weight: 300; line-height: 1.06;
  letter-spacing: -.015em;
}

.leitsatz-zeile { display: block; }
.leitsatz .wort { padding: 0 .12em .16em; margin: 0 -.12em -.16em; } /* kursive Schwünge nicht abschneiden */
.leitsatz .goldlinie { margin: 26px auto 0; transform-origin: 50% 50%; } /* seit 14.10.2026 das letzte Element (ohne Satz) */

/* Handy: Hochformat-Ausschnitt in der Mitte des Tisches */
@media (max-width: 899px) {
  .leitsatz-bild img { object-position: 50% 45%; }
}

/* Computer: Logo links, Leitsatz rechts daneben, als Gruppe in der Mitte */
@media (min-width: 900px) {
  .leitsatz-text {
    display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
    column-gap: clamp(56px, 6vw, 104px); max-width: calc(76rem + 2 * var(--rand)); padding-block: 72px; text-align: left;
  }

  .leitsatz-logo { width: clamp(260px, 24vw, 320px); margin: 0; }
  .leitsatz h2 { font-size: clamp(56px, 6.2vw, 96px); }
  .leitsatz .goldlinie { margin: 28px 0 0; transform-origin: 0 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-bewegt] .leitsatz-kamera {
    animation-name: lk-kamera; animation-duration: 20s; animation-timing-function: cubic-bezier(.37, 0, .63, 1);
    animation-delay: -6s; animation-iteration-count: infinite; animation-direction: alternate;
  }

  html[data-bewegt] .leitsatz.ruht .leitsatz-kamera { animation-play-state: paused; }

  html[data-zeigen-an] [data-zeigen="leitsatz"] .wort > span { transition: opacity 900ms ease var(--verz, 0ms), transform 1300ms var(--aus) var(--verz, 0ms); }
  html[data-zeigen-an] [data-zeigen="leitsatz"] .ueberzeile { transition: opacity 1000ms ease var(--verz, 0ms), transform 1200ms var(--aus) var(--verz, 0ms); }
  html[data-zeigen-an] [data-zeigen="leitsatz"] .goldlinie { transition: transform 1200ms cubic-bezier(.65, 0, .35, 1) 900ms; }
  html[data-zeigen-an] [data-zeigen="leitsatz"]:not(.ist-da) .wort > span { opacity: 0; transform: translate3d(0, 105%, 0); }
  html[data-zeigen-an] [data-zeigen="leitsatz"]:not(.ist-da) .ueberzeile { opacity: 0; transform: translate3d(0, 14px, 0); }
  html[data-zeigen-an] [data-zeigen="leitsatz"]:not(.ist-da) .goldlinie { transform: scaleX(0); }
  html[data-zeigen-an] [data-zeigen="leitsatz"] .leitsatz-logo { transition: opacity 1200ms ease, transform 1600ms var(--aus); }
  html[data-zeigen-an] [data-zeigen="leitsatz"]:not(.ist-da) .leitsatz-logo { opacity: 0; transform: scale(.94); }
  .leitsatz-zeile:first-child .wort:nth-child(2) { --verz: 140ms; }
  .leitsatz-zeile + .leitsatz-zeile .wort:nth-child(1) { --verz: 360ms; }
  .leitsatz-zeile + .leitsatz-zeile .wort:nth-child(2) { --verz: 500ms; }
  .leitsatz-zeile + .leitsatz-zeile .wort:nth-child(3) { --verz: 640ms; }
  .leitsatz .wort > span, .leitsatz .goldlinie { animation: none; } /* nicht der Einstieg der Bühne: erst beim Hereinscrollen */
}

/* --- Stimmen (dunkel): echte Kundenstimmen (seit 14.10.2026); eine einzelne Stimme steht gross und mittig --- */

.stimmen { position: relative; padding-block: calc(var(--abstand) * .8); }
/* Alter Anker #stimmen (bis 15.10.2026 die id des Abschnitts, heute #referenzen, Menü «Referenzen»): ein leeres Element
   genau an der Oberkante des Abschnitts, so landen alte Links und Lesezeichen auch ohne Skript an derselben Stelle */
.anker-alt { position: absolute; top: 0; left: 0; }
.stimmen-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }

.stimme figure {
  display: flex; flex-direction: column; height: 100%; padding: 20px 22px 18px; border: 1px solid var(--linie-gold);
  border-radius: 24px; background: rgba(244,238,226,.03);
}

.stimme blockquote { flex: 1; margin: 0; }
.stimme blockquote p + p { margin-top: 12px; } /* mehrere Absätze (lange Stimme) */
/* Lange Stimme auf dem Handy: zu = nur der erste Absatz (js/seite.js «stimmeLang»; ohne Skript ganz sichtbar) */
.stimme-lang.zu blockquote p + p { display: none; }
.stimme-lang.zu blockquote p:first-child::after { content: " …"; }
.stimme-mehr {
  display: inline-flex; align-self: flex-start; align-items: center; min-height: 44px; margin-top: 6px; padding: 0;
  border: 0; background: none; color: var(--gold); font: 600 12px/1.4 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--linie-gold); text-underline-offset: .35em;
  cursor: pointer;
}
/* Lia 14.10.2026 «kundenstimme kleiner machen», dann «noch»: 15 px statt 21 px */
.stimme blockquote p { color: var(--text); font-family: var(--serif); font-optical-sizing: auto; font-size: 15px; font-weight: 300; line-height: 1.6; }
/* overflow-wrap (seit 19.10.2026, Name und frei eingetragener Anlass aus dem Programm bis 80 Zeichen): ein sehr langes
   Wort bricht in der Karte um, statt über den Rand zu ragen */
.stimme figcaption { margin-top: 14px; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .stimme blockquote p { font-style: italic; } /* Handy: Kundenstimmen kursiv (Lia 14.10.2026), echte Merriweather-Kursive */
}
.stimme-anlass { color: var(--gedaempft); font-weight: 500; }

/* Handy (unter 600 px): der Anlass in eigener Zeile, ohne Trennpunkt (wie .ueberzeile-trenner). Sonst stand bei 320 px
   ein «·» allein am Zeilenende («Linda & Silvio W. ·» / «Privatevent»), englisch brach «Private / event» um */
@media (max-width: 599px) {
  .stimme-trenner { display: none; }
  .stimme-anlass { display: block; }
}

@media (min-width: 900px) {
  /* 6 Spalten: je Stimme 2 (drei pro Reihe); genau zwei Stimmen je 3; eine einzelne über alle, gross und mittig */
  /* Lia 14.10.2026: Kästen schmaler (zwei Stimmen je rund 470 px), linksbündig unter dem Titel */
  .stimmen-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; max-width: 960px; }
  .stimme { grid-column: span 2; }
  .stimme:first-child:nth-last-child(2), .stimme:first-child:nth-last-child(2) ~ .stimme { grid-column: span 3; }
  .stimme:first-child:nth-last-child(4), .stimme:first-child:nth-last-child(4) ~ .stimme { grid-column: span 3; } /* vier Stimmen: 2 × 2 */
  /* lange Stimmen über die ganze Breite in zwei Spalten, die übrigen je zwei nebeneinander (seit 15.10.2026 zwei lange
     direkt nacheinander, Chrigel Z. und Linda & Silvio W.: die zweite lange bleibt ganz breit, nicht halb). :where hält
     die Regel so schwach wie die frühere «.stimme-lang ~ .stimme» (0,2,0): das Karussell (unten) gewinnt immer */
  .stimme-lang { grid-column: 1 / -1; }
  .stimme-lang blockquote { columns: 2; column-gap: 40px; }
  :where(.stimmen-liste:has(> .stimme-lang)) > .stimme:not(.stimme-lang) { grid-column: span 3; }
  .stimmen-liste > :nth-child(2) { --verz: 120ms; }
  .stimmen-liste > :nth-child(3) { --verz: 240ms; }
  .stimme:only-child { grid-column: 1 / -1; }
  .stimme:only-child figure { max-width: 680px; margin-inline: auto; padding: 26px 30px 22px; }
  .stimme:only-child blockquote p { font-size: 17px; }
}

/* Während die Startseite auf die Stimmen aus dem Programm wartet (js/seite.js «stimmenLaden», höchstens 1,5 s): der ganze
   Abschnitt #referenzen unsichtbar (bis ?v=92 nur der Rahmen), sein Platz bleibt. So springt die Liste nicht sichtbar vom
   Raster ins Karussell bzw. die lange Stimme auf dem Handy nicht auf den ersten Absatz (Prüfung 18.10.2026), und blendet
   das Programm die Kundenstimmen aus (seit ?v=93 der ganze Abschnitt), erscheint über /#referenzen nichts, was gleich
   wieder verschwindet. Der Rahmen nur, falls der Abschnitt fehlt. Nur am Bildschirm; ohne Skript gibt es das Attribut nie. */
@media screen {
  .stimmen[data-laedt], .stimmen-rahmen[data-laedt] { visibility: hidden; }
}

/* --- Karussell der Stimmen (Lia 14.10.2026: «Mischung aus a und b»): nur am Bildschirm ab 900 px und mit Skript
   (js/seite.js «karussell» setzt .karussell am .stimmen-rahmen, data-lage −2 … 2 an den Karten und baut Pfeile, Zähler
   und Ansage). Eine Stimme gross in der Mitte (--karte 600 bis 720 px, Serif 20 bis 22 px), die Nachbarn links und
   rechts kleiner (.86) und gedämpft (.4), weiter weg unsichtbar; zum Rand hin blendet das Band weich aus. Alle Karten
   liegen im selben Rasterfeld: so sind sie gleich hoch, und beim Wechsel springt die Seite nicht. Nur eine
   aufgeklappte lange Stimme macht es höher, dann treten die Nachbarn zurück (.liest). Gleiten nur mit transform und
   opacity (650 ms), bei «Bewegung reduzieren» sofort (12). Druck und Computer ohne Skript: die Liste oben; Handy
   (auch ohne Skript): die wischbare Reihe unten. --- */

@media screen and (min-width: 900px) {
  .stimmen-rahmen.karussell {
    --karte: clamp(600px, 50vw, 720px);
    --luecke: clamp(28px, 3vw, 48px);
    --versatz: calc(var(--karte) * .93 + var(--luecke)); /* Mitte zu Mitte: halbe Karte + halbe Nachbarin + Lücke */
    --schrift: clamp(17px, 1.25vw, 18px); /* Lia 14.10.2026 «etwas kleiner» (vorher 20 bis 22 px) */
    position: relative; margin-inline: calc(50% - 50vw); /* über die ganze Breite, wie das Bildband */
  }

  .karussell .stimmen-liste {
    grid-template-columns: var(--karte); justify-content: center; gap: 0; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 11vw, #000 calc(100% - 11vw), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 11vw, #000 calc(100% - 11vw), transparent);
  }

  .stimmen-rahmen.karussell > .stimmen-liste > .stimme { grid-area: 1 / 1; } /* alle im selben Feld (nach den Regeln oben) */

  .karussell .stimmen-liste > .stimme {
    --x: 0px; --s: 1; --o: 1;
    transform: translate3d(var(--x), 0, 0) scale(var(--s)); opacity: var(--o); cursor: pointer;
  }

  .karussell .stimme[data-lage="0"] { z-index: 1; cursor: auto; }
  .karussell .stimme[data-lage="-1"] { --x: calc(var(--versatz) * -1); --s: .86; --o: .4; }
  .karussell .stimme[data-lage="1"] { --x: var(--versatz); --s: .86; --o: .4; }
  .karussell .stimme[data-lage="-2"] { --x: calc(var(--versatz) * -2); --s: .86; --o: 0; }
  .karussell .stimme[data-lage="2"] { --x: calc(var(--versatz) * 2); --s: .86; --o: 0; }
  /* aufgeklappt: die Nachbarn sofort weg (sie würden sonst mit der hohen Karte mitwachsen), beim Zuklappen blenden sie
     wieder ein */
  .karussell.liest .stimme:not([data-lage="0"]) { --o: 0; visibility: hidden; }
  /* Klick auf eine Nachbarin trifft die ganze Karte (nicht ihren Knopf); unsichtbare lassen Klicks durch */
  .karussell .stimme:not([data-lage="0"]) > figure,
  .karussell .stimme[data-lage="-2"], .karussell .stimme[data-lage="2"],
  .karussell.liest .stimme:not([data-lage="0"]) { pointer-events: none; }

  .karussell .stimme figure { justify-content: center; padding: 36px 44px 30px; background: rgba(244,238,226,.035); }
  .karussell .stimme blockquote { flex: 0 1 auto; }
  .karussell .stimme-lang blockquote { columns: auto; }
  .karussell .stimme blockquote p { font-size: var(--schrift); line-height: 1.6; }
  .karussell .stimme blockquote p + p { margin-top: .6em; }
  .karussell .stimme figcaption { margin-top: 22px; }

  /* lange Stimme: rund 9 Zeilen, die letzten zwei blenden weich aus, darunter «Ganze Referenz lesen»; ganz durchsichtig
     schon kurz vor der Unterkante, denn dort ist wegen der Absatzabstände oft eine Zeile angeschnitten */
  .karussell .stimme-lang.gekuerzt blockquote {
    max-height: calc(var(--schrift) * 1.6 * 9); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--schrift) * 3.4), transparent calc(100% - var(--schrift) * .7));
    mask-image: linear-gradient(#000 calc(100% - var(--schrift) * 3.4), transparent calc(100% - var(--schrift) * .7));
  }

  /* Pfeile: runde Knöpfe mit Goldrand, 12 px neben der grossen Karte (die Lücke ist schmaler als der Knopf: er liegt
     auf dem Rand der gedämpften Nachbarin, nie auf dem Goldrand der grossen Karte), auf Höhe ihrer Mitte (50 % ohne
     den Zähler darunter; eine aufgeklappte lange Stimme schiebt sie höchstens 250 px tief) */
  .karussell-pfeil { position: absolute; top: calc(min(50% - 20px, 250px) - 26px); z-index: 2; width: 52px; height: 52px; }
  .karussell-zurueck { left: calc(50% - var(--karte) / 2 - 12px - 52px); }
  .karussell-weiter { right: calc(50% - var(--karte) / 2 - 12px - 52px); }
  .karussell-zaehler { margin: 22px 0 0; }
}

/* Pfeile und Zähler sehen am Computer (Karussell) und auf dem Handy (Reihe, unten) gleich aus; Grösse und Platz je für
   sich (Druck: weg, 12) */
@media screen {
  .karussell-pfeil {
    display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--gold);
    border-radius: 50%; background: rgba(27,24,20,.92); color: var(--gold); cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }

  .karussell-pfeil svg { width: 24px; height: 24px; }

  .karussell-zaehler {
    color: var(--gold); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-align: center;
    font-variant-numeric: tabular-nums;
  }
}

@media screen and (min-width: 900px) and (hover: hover) {
  .karussell .stimme[data-lage="-1"]:hover, .karussell .stimme[data-lage="1"]:hover { --o: .62; }
}

/* Pfeile mit Maus: golden beim Überfahren, im Karussell und auch in der Reihe (schmales Fenster, Tablet mit Maus);
   gedämpfte Pfeile am Anfang und am Ende der Reihe nicht */
@media screen and (hover: hover) {
  .karussell-pfeil:not([aria-disabled="true"]):hover { background: var(--gold); color: var(--nacht); }
}

@media screen and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .karussell .stimmen-liste > .stimme { transition: transform 650ms var(--weich), opacity 650ms ease; }
  .karussell .stimmen-liste > .stimme.springt { transition: none; }
  /* Einblenden (4): an ihrem Platz von unten herein, nicht aus der Mitte heraus */
  html[data-zeigen-an] .karussell .stimmen-liste > .stimme[data-zeigen]:not(.ist-da) { opacity: 0; transform: translate3d(var(--x), 36px, 0) scale(var(--s)); }
}

/* --- Kundenstimmen auf dem Handy: wischbare Reihe (Lia 14.10.2026 «auf dem handy bitte auch anders»), unter 900 px am
   Bildschirm. Eine Karte fast in voller Breite (86 % des Bildschirms, höchstens 540 px), die nächste schaut am Rand
   herein; mit dem Finger wischen, rastet Karte für Karte ein (scroll-snap wie das Bildband, auch ohne Skript). Nur die
   Reihe rollt seitlich (über die ganze Breite wie das Bildband), nie die Seite; senkrecht rollt sie nie (overflow-y),
   sonst rollte sie beim Einblenden der Karten ein Stück mit. Mit Skript (js/seite.js «karussell» setzt .reihe am
   .stimmen-rahmen) sind alle Karten gleich hoch (die höchste bestimmt), eine aufgeklappte lange Stimme wächst allein,
   und darunter steht «‹  2 / 6  ›»: Zähler (folgt dem Wischen) und runde Pfeile (44 px), am Anfang und am Ende gedämpft.
   Ohne Skript ohne Zähler und Pfeile, die Karten in ihrer eigenen Höhe (die lange steht dann ganz). Druck: die Liste. --- */

@media screen and (max-width: 899px) {
  .stimmen-liste {
    position: relative; display: flex; align-items: flex-start; gap: 12px; margin-inline: calc(50% - 50vw);
    padding: 6px max(var(--rand), env(safe-area-inset-right)) 6px max(var(--rand), env(safe-area-inset-left));
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--rand), env(safe-area-inset-left)) max(var(--rand), env(safe-area-inset-right));
    scrollbar-width: none;
  }

  .stimmen-liste::-webkit-scrollbar { display: none; }
  .stimmen-liste > .stimme { flex: none; width: min(86vw, 540px); scroll-snap-align: start; scroll-snap-stop: always; }
  .stimmen-liste > .stimme:only-child { width: 100%; }

  .stimmen-rahmen.reihe {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; row-gap: 14px;
  }

  .reihe .stimmen-liste { grid-area: 1 / 1 / 2 / -1; align-items: stretch; }
  /* aufgeklappte lange Stimme: sie wächst allein, die anderen bleiben oben und behalten die gemeinsame Höhe von vorher
     (--reihe-hoehe misst js/seite.js vor dem Aufklappen; als Mindesthöhe, so wird nie Text abgeschnitten) */
  .reihe .stimmen-liste:has(> .stimme-lang:not(.zu)) > .stimme:is(:not(.stimme-lang), .zu) { align-self: flex-start; }
  .reihe .stimmen-liste:has(> .stimme-lang:not(.zu)) > .stimme:is(:not(.stimme-lang), .zu) > figure { min-height: var(--reihe-hoehe, auto); }
  /* zugeklappte lange Stimme: «Ganze Referenz lesen» direkt unter dem ersten Absatz (der freie Platz der gleich hohen
     Karten liegt darunter), der Name unten wie bei den anderen */
  .reihe .stimme-lang blockquote { flex: none; }
  .reihe .stimme-lang .stimme-mehr { margin-bottom: auto; }

  .karussell-pfeil { width: 44px; height: 44px; }
  .reihe .karussell-zurueck { grid-area: 2 / 2; }
  .reihe .karussell-zaehler { grid-area: 2 / 3; min-width: 6.5em; margin: 0; padding-left: .16em; } /* Sperrung rechts ausgleichen */
  .reihe .karussell-weiter { grid-area: 2 / 4; }
  .karussell-pfeil[aria-disabled="true"] { border-color: var(--linie-gold); color: var(--gedaempft); cursor: default; }
  /* Pfeile, Zähler und Ansage stehen im HTML vor der Reihe, aber darunter: nie Anker fürs Scrollen (overflow-anchor),
     sonst rollte Chrome beim Aufklappen der langen Stimme ans Ende des Textes statt den Anfang stehen zu lassen */
  .stimmen-rahmen.reihe > :not(.stimmen-liste) { overflow-anchor: none; }
}

/* Einblenden in der Reihe nur über die Deckkraft: ein Gleiten (transform) verschiebt die Rastpunkte mit, und beim
   Umschalten vom Karussell (Fenster schmaler, Tablet gedreht) rollte die Reihe sonst den gleitenden Karten nach */
@media screen and (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] .stimmen-liste > .stimme[data-zeigen] { transition: opacity 1000ms var(--aus) var(--verz, 0ms); }
}

/* --- Firmenkunden unter den Kundenstimmen (Startseite, Lia 15.10.2026 «1a, 2b», «ehemalige Credit Suisse» «a»; bis
       ?v=63 als Zeile unter den zwei Karten auf /angebot/) ---
   Ein kleiner, dezenter Aufklapper als letztes Stück im Abschnitt «Referenzen»: natives <details class="firmenkunden">
   mit <summary class="firmenkunden-knopf"> (ohne Skript, mit Tastatur: Tab und Enter/Leertaste; Vorleser hören
   zugeklappt/aufgeklappt), beim Laden zu. Die Zeile «Eine Auswahl der Firmen, für die ich gekocht habe» klein und gedämpft, daneben ein
   kleines Plus im Goldkreis (offen ein Minus, wie die Häufigen Fragen); Tippfläche 44 px hoch und nur so breit wie Text
   und Zeichen. Aufgeklappt fliessen die Namen wie ein Satz, linksbündig unter der Zeile: kein Name bricht um
   (span.zusammen, li nowrap: auch Punkt und Name bleiben zusammen), umbrochen wird nur zwischen zwei Namen. Goldpunkte:
   li::before ohne Text (nur Schmuck, Vorleser hören eine Liste mit 15 Namen; Gold als Fläche). Damit nie ein Punkt am
   Anfang einer Zeile steht, beginnt jede Zeile um genau einen Trenner (--fk-trenner: Luft, Punkt, Luft) weiter links,
   und clip-path schneidet genau diesen Streifen ab: der Punkt vor dem ersten Namen einer Zeile liegt dort und ist nie zu
   sehen, der Name beginnt bündig mit der Zeile darüber. Bewegung: das Plus dreht sich zum Minus, die Namen blenden beim
   Öffnen kurz ein (nur transform und opacity, nur ohne «Bewegung reduzieren»), dazu das Einblenden ([data-zeigen]).
   Druck: aufgeklappt (js/seite.js «fragenDrucken» öffnet bei «beforeprint»), ohne das Zeichen.
   Einzeln entfernen: diesen Abschnitt, den Block details.firmenkunden in index.html und en/index.html,
   «details.firmenkunden» in js/seite.js «fragenDrucken», Prüfung 24 und den Test (README «Firmenkunden»). */

.firmenkunden { margin-top: clamp(20px, 2.6vw, 36px); }

.firmenkunden-knopf {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--gedaempft); font-size: 14px;
  font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}

.firmenkunden-knopf::-webkit-details-marker { display: none; }
.firmenkunden-knopf:focus-visible { border-radius: 8px; }

/* Plus und Minus: feiner Goldkreis, zwei Striche in Gold; offen dreht sich der senkrechte Strich flach (Minus) */
.firmenkunden-zeichen {
  position: relative; flex: none; width: 22px; height: 22px; border: 1px solid var(--linie-gold); border-radius: 50%;
  transition: border-color 200ms ease;
}

.firmenkunden-zeichen::before, .firmenkunden-zeichen::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px;
  border-radius: 1px; background: var(--gold);
}

.firmenkunden-zeichen::after { transform: rotate(90deg); }
.firmenkunden[open] .firmenkunden-zeichen { border-color: var(--gold); }
.firmenkunden[open] .firmenkunden-zeichen::after { transform: rotate(0deg); }

@media (hover: hover) {
  .firmenkunden-knopf:hover { color: var(--text); }
  .firmenkunden-knopf:hover .firmenkunden-zeichen { border-color: var(--gold); }
}

@media (hover: none) {
  .firmenkunden-knopf:active { color: var(--text); }
}

.firmenkunden-liste {
  --fk-punkt: 4px;                                            /* Goldpunkt */
  --fk-luft: .75em;                                           /* Luft links und rechts vom Punkt */
  --fk-trenner: calc(var(--fk-punkt) + 2 * var(--fk-luft));   /* ein Trenner: Luft, Punkt, Luft */
  max-width: calc(48rem + var(--fk-trenner)); margin: 4px 0 0 calc(-1 * var(--fk-trenner)); padding: 0; list-style: none;
  clip-path: inset(0 0 0 var(--fk-trenner));
  color: var(--gedaempft); font-size: 14px; line-height: 1.7; text-wrap: balance;
}

.firmenkunden-liste li { display: inline; white-space: nowrap; }

.firmenkunden-liste li::before {
  content: ""; display: inline-block; width: var(--fk-punkt); height: var(--fk-punkt); margin-inline: var(--fk-luft);
  border-radius: 50%; background: var(--gold); vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .firmenkunden-zeichen::after { transition: transform 300ms var(--aus); }
  .firmenkunden[open] > .firmenkunden-liste { animation: lk-firmenkunden 450ms var(--aus); }
}

@keyframes lk-firmenkunden { from { opacity: 0; transform: translate3d(0, -6px, 0); } }

@media print {
  .firmenkunden-zeichen { display: none; }
  .firmenkunden[open] > .firmenkunden-liste { animation: none; }
}

/* --- Aufruf am Seitenende (Unterseiten): «Ein Anlass in Planung?» --- */

.aufruf { text-align: center; }
.aufruf .huelle { max-width: calc(44rem + 2 * var(--rand)); }
.aufruf .aufruf-satz { margin-inline: auto; } /* bis 14.10.2026 in css/impressionen.css, gilt auch für /angebot/ */
.aufruf .aktionen { justify-content: center; }

/* Handy: linksbündig wie die anderen Karten (ein zentrierter Absatz über sieben Zeilen liest sich mühsam) */
@media (max-width: 599px) {
  .aufruf { text-align: left; }
  .aufruf .aktionen { justify-content: flex-start; }
  .aufruf .einleitung { margin-inline: 0; }
}

/* --- Einblenden beim Hereinscrollen (seite.js setzt html[data-zeigen-an] und .ist-da) ---
   Grundstil: alles sichtbar. Versteckt wird nur, was das Skript gleich wieder zeigt; was beim Laden im Bild
   steht, zeigt der Beobachter sofort (ohne Scrollen), und nach 4 s ist alles darüber sicher sichtbar. */

@media (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] [data-zeigen=""] { transition: opacity 1000ms var(--aus) var(--verz, 0ms), transform 1200ms var(--aus) var(--verz, 0ms); }
  html[data-zeigen-an] .kachel[data-zeigen] { transition: opacity 1000ms var(--aus) var(--verz, 0ms), transform 1200ms var(--aus) var(--verz, 0ms), box-shadow 600ms ease; }
  html[data-zeigen-an] [data-zeigen=""]:not(.ist-da) { opacity: 0; transform: translate3d(0, 36px, 0); }
  .bento > :nth-child(2) { --verz: 100ms; }
  .bento > :nth-child(3) { --verz: 120ms; }
  .bento > :nth-child(4) { --verz: 220ms; }
  .bento > :nth-child(5) { --verz: 320ms; }
  .ueber-text > :nth-child(2) { --verz: 120ms; }
  .ueber-text > :nth-child(3) { --verz: 220ms; }

  /* Creme-Karte: wird beim Hereinscrollen breiter */
  html[data-zeigen-an] .hell[data-kante]::before { transition: transform 1400ms var(--aus); }
  html[data-zeigen-an] .hell[data-kante]:not(.ist-da)::before { transform: scale(.94, .985); }

  /* Bild (auch das Video im Angebot): öffnet sich von unten, das Foto setzt sich */
  html[data-zeigen-an] [data-zeigen="bild"] .ueber-bild-rahmen,
  html[data-zeigen-an] [data-zeigen="bild"] .video-rahmen { transition: clip-path 1500ms var(--aus); }
  html[data-zeigen-an] [data-zeigen="bild"] img, html[data-zeigen-an] [data-zeigen="bild"] video { transition: transform 1800ms var(--aus); }
  html[data-zeigen-an] [data-zeigen="bild"]:not(.ist-da) .ueber-bild-rahmen,
  html[data-zeigen-an] [data-zeigen="bild"]:not(.ist-da) .video-rahmen { clip-path: inset(22% 0 0 0 round 24px); }
  html[data-zeigen-an] [data-zeigen="bild"]:not(.ist-da) img,
  html[data-zeigen-an] [data-zeigen="bild"]:not(.ist-da) video { transform: scale(1.12); }
}


/* --- Text leuchtet beim Lesen auf (zweite Demo B, Lia 15.10.2026: «alle ausser A») ---
   Startseite, «Wer ist Lia?», Lias Absatz «Kochen ist für mich mehr als eine Leidenschaft …» (p[data-leuchten], deutsch
   und englisch): am Computer mit Maus teilt js/seite.js «leuchten» ihn in Wörter (span.leucht-wort, ohne aria-Attribute)
   und setzt ihre Deckkraft nach der Lage im Fenster (von .4 bis voll, Wort für Wort). Hier nur das weiche Nachziehen
   jedes Worts (nur opacity, nur ohne «Bewegung reduzieren») und das Sicherheitsnetz: bei «Bewegung reduzieren» und im
   Druck ist der Absatz immer voll lesbar.
   Einzeln entfernen: diesen Abschnitt, «leuchten» in js/seite.js und data-leuchten in index.html und en/index.html
   (README «Effekte»). */

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .leucht-wort { transition: opacity 180ms linear; }
}

@media (prefers-reduced-motion: reduce), print {
  .leucht-wort { opacity: 1 !important; }
}


/* ==========================================================================
   5 KARTEN – Bildkacheln (Bento), alle Formen und Bild-Rahmen
   ========================================================================== */

/* --- Angebot (Startseite und /angebot/): Leitsatz mit Video, «Für wen» (zwei grosse Karten), «Alle Formen» (Liste, seit
       14.10.2026 nur auf /angebot/; die Startseite zeigt dafür den Link «Ganzes Angebot») --- */

/* Kopf: Text und Video (Lia 14.10.2026, ein buntes Buffet im Garten). Handy: Video unter dem Text, 4:5, höchstens
   440 px breit und 80 % der Bildschirmhöhe hoch (Handy quer). Computer: Text links, Video rechts daneben, 3:4, 260 bis
   360 px breit (höchstens 480 px hoch, also nie über einen Bildschirm). Rahmen wie die Fotos (runde Ecken, Zeitungslook
   siehe 1), Ausschnitt mittig. Abspielen: js/seite.js «clip» (nur im Bild, nie bei «Bewegung reduzieren»). */
.angebot-kopf { display: grid; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.angebot-kopf .abschnitt-kopf { margin-bottom: 0; }
.angebot-kopf h2 { max-width: 17em; }
/* Drei Botschaften unter dem Titel (Lia 16.10.2026): ruhige Liste mit feiner Goldlinie, danach der Link aufs Angebot */
.angebot-punkte { display: grid; gap: 14px; max-width: 34rem; margin: clamp(22px, 2.4vw, 32px) 0 0; padding: 0; list-style: none; }
.angebot-punkte li { position: relative; padding-left: 30px; color: var(--tinte-leise); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; }
.angebot-punkte li::before { content: ""; position: absolute; left: 0; top: .78em; width: 18px; height: 1px; background: var(--gold); }
.angebot-punkte strong { color: var(--tinte); font-weight: 600; }
.angebot-punkte-link { margin-top: clamp(18px, 2vw, 26px); }
.angebot-video { width: min(100%, 440px); width: min(100%, 440px, 64svh); }

.video-rahmen {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--sand);
  clip-path: inset(0 round 24px);
}

.video-rahmen video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

@media (min-width: 900px) {
  .angebot-kopf { grid-template-columns: minmax(0, 1fr) clamp(260px, 25vw, 360px); align-items: start; gap: clamp(48px, 6vw, 112px); } /* Text oben, auf Höhe des Videos (Lia 14.10.2026) */
  .angebot-video { width: auto; }
  .video-rahmen { aspect-ratio: 3 / 4; }
  /* Startseite: das Video ist genau so hoch wie der Text daneben (Lia 16.10.2026 «video passend zum text»); der Text
     bestimmt die Höhe, das Video füllt sie (mindestens 420 px), Ausschnitt mittig */
  .angebot-kopf { align-items: stretch; }
  .angebot-kopf .angebot-video { position: relative; min-height: 420px; }
  .angebot-kopf .video-rahmen { position: absolute; inset: 0; aspect-ratio: auto; }
}

.angebot-titel {
  display: flex; align-items: center; gap: 16px; margin: 0 0 16px; color: var(--gold-dunkel); font-family: var(--sans);
  font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase;
}

.angebot-titel::after { content: ""; flex: 1; height: 1px; background: var(--linie-hell); }
.bento + .angebot-titel { margin-top: clamp(36px, 4.6vw, 68px); }

/* Startseite: «Ganzes Angebot» unter den zwei Karten führt zu /angebot/ (Lia 14.10.2026) */
.angebot-mehr { margin-top: clamp(16px, 2vw, 28px); }

/* Alle Formen: Zeilen mit Nummer, Name und einem Satz; die ganze Zeile öffnet die Anfrage mit dieser Form */
.formen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 44px; margin: 0; padding: 0; list-style: none; }
.form { position: relative; border-top: 1px solid var(--linie-hell); }

.form::before { /* Goldlinie, die sich beim Überfahren zeichnet */
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--aus);
}

/* Tastatur: :focus-visible (nach dem Antippen bleibt nichts hängen); Maus: Überfahren (hover: hover) */
.form:has(.form-zeile:focus-visible)::before { transform: none; }

.form-zeile {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
  min-height: 44px; padding: 16px 0 18px; color: var(--tinte); text-decoration: none;
}

.form-nr { grid-row: 1 / span 2; color: var(--gold-dunkel); font-size: 12px; font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.form-name { color: var(--tinte); font-family: var(--serif); font-optical-sizing: auto; font-size: 25px; font-weight: 300; line-height: 1.2; }
.form-satz { grid-column: 2; margin-top: 6px; color: var(--tinte-leise); font-size: 15px; line-height: 1.5; }
.form-zeile .pfeil { grid-column: 3; grid-row: 1; align-self: center; color: var(--gold-dunkel); opacity: .45; transition: transform 500ms var(--aus), opacity 300ms ease; }
.form-zeile:focus-visible .pfeil { opacity: 1; transform: translateX(6px); }
.form-zeile:focus-visible { outline-offset: 0; }

@media (hover: hover) {
  .form:hover::before { transform: none; }
  .form-zeile:hover .pfeil { opacity: 1; transform: translateX(6px); }
}

/* Handy: kompakter (Lia 14.10.2026), Tippziel bleibt über 44 px */
@media (max-width: 599px) {
  .form-zeile { grid-template-columns: 2em minmax(0, 1fr) auto; column-gap: 10px; padding: 11px 0 12px; }
  .form-name { font-size: 20px; }
  .form-satz { margin-top: 2px; font-size: 14px; line-height: 1.45; }
}

@media (min-width: 600px) {
  .formen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formen > :nth-child(2n) { --verz: 100ms; }
}

@media (min-width: 1100px) {
  .formen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formen > :nth-child(2n) { --verz: 0ms; }
  .formen > :nth-child(3n+2) { --verz: 100ms; }
  .formen > :nth-child(3n) { --verz: 200ms; }
}

.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }

.kachel {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(120vw, 520px); padding: 26px 26px 22px; overflow: hidden; border-radius: 24px; background: var(--flaeche);
  color: var(--text); box-shadow: 0 0 0 rgba(27,24,20,0);
  transition: box-shadow 600ms ease;
}

.kachel-bild { position: absolute; inset: 0; z-index: -2; transform: translate3d(0, calc(var(--v, 0) * -4%), 0) scale(1.1); }
html[data-parallax-an] [data-parallax] { will-change: transform; }
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--aus); }

.kachel-verlauf {
  position: absolute; inset: 0; z-index: -1;
  /* mit sharp an der Textstelle gemessen (95 % der Pixel): Creme ≥ 9:1, Link Gold-hell ≥ 6:1 */
  background: linear-gradient(to top, rgba(27,24,20,.94), rgba(27,24,20,.88) 40%, rgba(27,24,20,.7) 60%, rgba(27,24,20,.26) 80%, rgba(27,24,20,0) 94%);
}

.kachel-text { display: flex; flex-direction: column; align-items: flex-start; }
.kachel-text > :not(.kachel-link) { transition: transform 700ms var(--aus); }
.kachel-nr { color: var(--gold); font-size: 12px; font-weight: 500; letter-spacing: .2em; }
.kachel h3 { position: relative; margin-top: 8px; padding-bottom: 12px; color: var(--text); font-size: 28px; font-weight: 300; line-height: 1.12; letter-spacing: -.01em; }
.kachel h3::after { content: ""; position: absolute; bottom: 0; left: 0; width: 56px; height: 1px; background: var(--gold); transform: scaleX(.3); transform-origin: 0 50%; transition: transform 800ms var(--aus); }
.kachel p { max-width: 28em; margin-top: 12px; color: rgba(244,238,226,.9); font-size: 15px; line-height: 1.55; }

.kachel-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--gold-hell);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-decoration: none; text-transform: uppercase;
}

/* ganze Kachel = Link */
.kachel-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.kachel-link:focus-visible { outline: none; box-shadow: none; }
.kachel-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--tinte), inset 0 0 0 4px var(--gold); }
.pfeil { width: 18px; height: 18px; flex: none; transition: transform 500ms var(--aus); }

/* Überfahren (nur mit Maus) und Tastatur-Fokus: Bild zieht langsam heran, Text hebt sich, Goldlinie zeichnet sich,
   Pfeil rückt vor. Nicht :focus-within: nach dem Schliessen des Blatts kehrt der Fokus per Skript auf die Karte
   zurück, auf dem iPhone bliebe sie sonst «überfahren» stehen; :focus-visible zeigt ihn nur der Tastatur. */
.kachel:has(.kachel-link:focus-visible) { box-shadow: 0 26px 50px -24px rgba(27,24,20,.55); }
.kachel:has(.kachel-link:focus-visible) .kachel-bild img { transform: scale(1.07); }
.kachel:has(.kachel-link:focus-visible) .kachel-text > :not(.kachel-link) { transform: translateY(-4px); }
.kachel:has(.kachel-link:focus-visible) h3::after { transform: none; }
.kachel:has(.kachel-link:focus-visible) .pfeil { transform: translateX(6px); }

@media (hover: hover) {
  .kachel:hover { box-shadow: 0 26px 50px -24px rgba(27,24,20,.55); }
  .kachel:hover .kachel-bild img { transform: scale(1.07); }
  .kachel:hover .kachel-text > :not(.kachel-link) { transform: translateY(-4px); }
  .kachel:hover h3::after { transform: none; }
  .kachel:hover .pfeil { transform: translateX(6px); }
}

@media (max-width: 899px) {
  .kachel-bild { transform: none; }
}

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kachel { min-height: 0; padding: 30px 32px 24px; }
  .kachel-gross { grid-column: span 6; aspect-ratio: 4 / 3; }
  .kachel-klein { grid-column: span 4; aspect-ratio: 4 / 5; }
  .kachel-gross h3 { font-size: clamp(30px, 2.6vw, 38px); }
  .kachel-klein h3 { font-size: clamp(24px, 2vw, 30px); }
}

/* Bild-Rahmen für ein einzelnes Foto (Unterseiten): runde Ecken, Zeitungslook (siehe 1) */
.bild-rahmen { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: var(--flaeche); clip-path: inset(0 round 24px); }
.bild-rahmen img { width: 100%; height: 100%; object-fit: cover; }

/* --- Karten, die sich neigen (Effekt 2, Lia 14./15.10.2026; Vorlage: Demo «Wow-Effekte» Fassung 9) ---
   Die zwei grossen Karten (.kachel-gross: Firmenevent, Privatevent; Startseite und /angebot/) neigen sich leicht zur
   Maus, höchstens 6° zur Seite und 4,5° nach oben oder unten, mit einem weichen Schatten, der mitwandert; danach
   federn sie weich zurück. Nur mit Maus ((hover: hover) and (pointer: fine)), nicht bei «Bewegung reduzieren», nur
   eine Karte, die schon eingeblendet ist. KEIN Lichtschein unter dem Mauszeiger (Lia: «nicht Schatten, sondern
   Lichteffekt mit dem Cursor» weg). js/seite.js «neigen» setzt html[data-neigen], die Klassen «neigt» (Maus darauf)
   und «federt» (zurück) und --neig-x / --neig-y (Grad); die ganze Karte neigt sich (Parallax liegt auf dem Bild
   darin, .kachel-bild, und stört nicht). Einzeln entfernen: diesen Abschnitt und «neigen» in js/seite.js (README
   «Effekte»). */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-neigen] .kachel-gross.neigt {
    transform: perspective(1100px) rotateX(calc(var(--neig-x, 0) * 1deg)) rotateY(calc(var(--neig-y, 0) * 1deg));
    box-shadow: calc(var(--neig-y, 0) * -2px) calc(30px + var(--neig-x, 0) * 2px) 60px -28px rgba(27,24,20,.5);
    transition: opacity 1000ms var(--aus), transform 240ms cubic-bezier(.2, .7, .2, 1), box-shadow 400ms ease;
  }

  /* weich zurückfedern (leicht über die Mitte hinaus und zurück) */
  html[data-neigen] .kachel-gross.neigt.federt {
    transition: opacity 1000ms var(--aus), transform 900ms cubic-bezier(.3, 1.35, .45, 1), box-shadow 700ms ease;
  }
}


/* --- Goldener Rahmen (zweite Demo D, Lia 15.10.2026: «alle ausser A») ---
   Die zwei grossen Karten (.kachel-gross, Startseite und /angebot/): fährt die Maus darüber, zieht sich eine feine
   Goldlinie einmal um den ganzen Rand, beginnend unten rechts im dunklen Teil; beim Verlassen zieht sie sich zurück. Die
   Linie ist span.goldrahmen (aus js/seite.js «goldrahmen», aria-hidden) mit Goldrand, in Ruhe unsichtbar (opacity: 0);
   das Skript zeigt sie mit einer Web Animation von clip-path (ein Fächer aus der Mitte, dem Rand entlang) und opacity.
   Sie liegt in der Karte über Bild und Text, lässt jeden Klick durch und neigt sich mit der Karte (Effekt 2); ein Hauch
   Schatten hält sie auch auf hellen Stellen des Fotos sichtbar. Nur am Computer mit Maus, nicht bei «Bewegung
   reduzieren», nicht im Druck.
   Einzeln entfernen: diesen Abschnitt und «goldrahmen» in js/seite.js (README «Effekte»). */

.goldrahmen { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kachel > .goldrahmen {
    position: absolute; inset: 0; z-index: 2; display: block; border: 1.5px solid var(--gold); border-radius: inherit;
    box-shadow: 0 0 2px rgba(18,16,13,.45), inset 0 0 2px rgba(18,16,13,.45); opacity: 0; pointer-events: none;
  }
}

@media print {
  .goldrahmen { display: none !important; }
}


/* ==========================================================================
   6 BILDBAND – zieht mit Maus langsam seitlich und lässt sich von Hand bewegen (seit ?v=102: Trackpad, Ziehen,
     Pfeiltasten); auf Touch-Geräten und ohne Skript von Hand wischbar
   ========================================================================== */

.band { padding-block: var(--abstand) calc(var(--abstand) * .9); overflow: hidden; }
.band-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }
.band-kopf .ueberzeile { margin-bottom: 14px; }
.band-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Instagram- und Facebook-Knopf unter dem Bildband: nur auf dem Handy (Lia 14.10.2026), am Computer bleiben die Links
   im Fuss */
.band-sozial { display: none; }
@media (max-width: 899px) {
  .band-sozial { display: grid; gap: 10px; margin-top: 20px; }
  .sozial-knopf {
    display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 20px 10px 16px;
    border: 1px solid var(--linie-gold); border-radius: 999px; background: rgba(212,175,55,.07);
    color: var(--text); font-size: 15px; line-height: 1.35; text-decoration: none;
  }
  .sozial-knopf .sozial-symbol { flex: none; width: 28px; height: 28px; color: var(--gold); }
  .sozial-name { display: block; color: var(--gold); font-weight: 600; letter-spacing: .02em; }
  .sozial-knopf:active { background: rgba(212,175,55,.14); }
}

.band-fenster {
  position: relative; overflow-x: auto; padding-block: 6px; scroll-snap-type: x proximity; scrollbar-width: none;
}

.band-fenster::-webkit-scrollbar { display: none; }
.band-spur { display: flex; width: max-content; margin: 0; padding: 0 var(--rand); list-style: none; }

.band-bild {
  position: relative; isolation: isolate; flex: none; width: 240px; height: 240px; margin-right: 16px; overflow: hidden;
  border-radius: 20px; background: var(--flaeche); clip-path: inset(0 round 20px); scroll-snap-align: start;
}

.band-hoch { width: 192px; }
.band-quer { width: 320px; }
.band-bild picture { height: 100%; }
.band-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--aus); }

@media (hover: hover) {
  .band-bild:hover img { transform: scale(1.06); }
}

@media (min-width: 900px) {
  .band-bild { width: 320px; height: 320px; }
  .band-hoch { width: 256px; }
  .band-quer { width: 427px; }
}

/* Wischen (ohne wanderndes Band): rastet Bild für Bild ein; Hinweis «Wischen» nur auf Touch-Geräten */
html:not([data-band]) .band-fenster { scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); overscroll-behavior-x: contain; }
.band-wisch { display: none; }

@media (pointer: coarse) {
  html:not([data-band]) .band-wisch {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--gedaempft); font-size: 11px;
    font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  }

  html:not([data-band]) .band-wisch::after { content: ""; width: 28px; height: 1px; background: var(--gold); }
}

/* mit Skript am Computer (html[data-band], nur mit Maus; Lia 21.10.2026 «slider … per wischen»): zwei gleiche Reihen;
   js/seite.js «band» verschiebt die Spur mit transform, nahtlos in beide Richtungen: von selbst langsam (ausser Sicht,
   mit Maus darüber, mit Tastatur-Fokus, kurz nach dem eigenen Bewegen und bei «Bewegung reduzieren» nicht) und von
   Hand (zwei Finger auf dem Trackpad, Ziehen, Pfeiltasten). Bis ?v=101 wanderte sie mit der CSS-Animation lk-band
   (140 s, darüber angehalten); die gibt es nicht mehr. Die Hand zeigt, dass man greifen kann; nichts wird markiert
   und kein Bild hängt am Mauszeiger. touch-action: pan-y lässt auf Geräten mit Maus und Touchscreen das senkrechte
   Wischen der Seite und gibt das seitliche dem Band. */
html[data-band] .band-fenster {
  overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

html[data-band] .band-fenster.zieht { cursor: grabbing; }
html[data-band] .band-spur { padding: 0; will-change: transform; }
html[data-band] .band-bild img { -webkit-user-drag: none; }

/* Tastatur (Tab, dann Pfeiltasten): Fokusrahmen innen, aussen schnitte ihn die Maske ab; so liegt oben und unten eine
   Goldlinie über die ganze Breite, die zum Rand hin ausblendet wie das Band */
html[data-band] .band-fenster:focus-visible { outline-offset: -2px; }


/* ==========================================================================
   7 ABLAUF – feine Linie mit vier Punkten, kleine Zahlen, viel Luft
   ========================================================================== */

.ablauf { padding-block: var(--abstand); }
/* zwei dunkle Abschnitte direkt nacheinander (Bildband, Ablauf, Stimmen): ohne Kante dazwischen addierte sich die
   volle Luft beider Abschnitte zu einer leeren Fläche (Lia 14.10.2026 «leere fläche»); oben nur ein Rest, unten
   0,7 × --abstand wie an einer Kartenkante (nur ab 900 px: darunter ist «So läuft es» auf der Startseite weg) */
.band + .ablauf, .ablauf + .stimmen { padding-top: calc(var(--abstand) * .4); }
@media (min-width: 900px) {
  .band:has(+ .ablauf), .ablauf:has(+ .stimmen) { padding-bottom: calc(var(--abstand) * .7); }
}
/* Startseite auf dem Handy ohne «So läuft es» (Lia 14.10.2026 «weg»); die Kontaktseite zeigt den Ablauf weiter
   (dort ebenfalls id="ablauf", darum ohne .kontakt-ablauf). Die Stimmen folgen direkt aufs Bildband: deren Abstand
   oben kleiner, sonst addieren sich beide Abstände (rund 75 px wie zwischen den anderen Abschnitten). */
@media (max-width: 899px) {
  #ablauf:not(.kontakt-ablauf) { display: none; }
  #ablauf + .stimmen { padding-top: 16px; }
}
.ablauf-kopf { max-width: 40rem; margin-bottom: clamp(32px, 4vw, 56px); }
.ablauf-kopf h2 { font-size: clamp(30px, 2.9vw, 44px); line-height: 1.15; }
.ablauf-liste { position: relative; display: grid; gap: 32px; margin: 0; padding: 0; list-style: none; }
.ablauf-schritt { position: relative; }

.ablauf-punkt {
  position: relative; display: block; width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%;
  background: var(--grund);
}

.ablauf-punkt::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: var(--gold); }
.ablauf-nr { display: block; margin-top: 20px; color: var(--gold); font-size: 11px; font-weight: 500; letter-spacing: .26em; font-variant-numeric: tabular-nums; }
.ablauf-schritt h3 { margin-top: 10px; font-size: 22px; font-weight: 300; line-height: 1.25; }
.ablauf-schritt p { max-width: 17em; margin-top: 10px; font-size: 15px; line-height: 1.65; }

@media (max-width: 899px) {
  .ablauf-liste::before {
    content: ""; position: absolute; top: 4px; bottom: 0; left: 4px; width: 1px; background: rgba(212,175,55,.35);
    transform-origin: 50% 0;
  }

  .ablauf-schritt { padding-left: 36px; }
  .ablauf-punkt { position: absolute; top: 0; left: 0; }
  .ablauf-nr { margin-top: 0; }
}

@media (min-width: 900px) {
  .ablauf-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }

  .ablauf-liste::before {
    content: ""; position: absolute; top: 4px; right: 0; left: 0; height: 1px;
    background: linear-gradient(90deg, rgba(212,175,55,.6), rgba(212,175,55,.16)); transform-origin: 0 50%;
  }
}

/* Linie zeichnet sich, Punkte füllen sich nacheinander, Texte folgen */
@media (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] [data-zeigen="ablauf"]::before { transition: transform 1800ms cubic-bezier(.65, 0, .35, 1) 100ms; }
  html[data-zeigen-an] [data-zeigen="ablauf"] .ablauf-punkt { transition: transform 700ms var(--aus) var(--verz, 0ms); }
  html[data-zeigen-an] [data-zeigen="ablauf"] .ablauf-punkt::after { transition: opacity 600ms ease calc(var(--verz, 0ms) + 250ms); }
  html[data-zeigen-an] [data-zeigen="ablauf"] .ablauf-schritt > :not(.ablauf-punkt) { transition: opacity 900ms var(--aus) calc(var(--verz, 0ms) + 120ms), transform 1000ms var(--aus) calc(var(--verz, 0ms) + 120ms); }
  html[data-zeigen-an] [data-zeigen="ablauf"]:not(.ist-da)::before { transform: scaleX(0); }
  html[data-zeigen-an] [data-zeigen="ablauf"]:not(.ist-da) .ablauf-punkt { transform: scale(0); }
  html[data-zeigen-an] [data-zeigen="ablauf"]:not(.ist-da) .ablauf-punkt::after { opacity: 0; }
  html[data-zeigen-an] [data-zeigen="ablauf"]:not(.ist-da) .ablauf-schritt > :not(.ablauf-punkt) { opacity: 0; transform: translate3d(0, 14px, 0); }
  .ablauf-schritt:nth-child(1) { --verz: 200ms; }
  .ablauf-schritt:nth-child(2) { --verz: 600ms; }
  .ablauf-schritt:nth-child(3) { --verz: 1000ms; }
  .ablauf-schritt:nth-child(4) { --verz: 1400ms; }
}

/* Handy: die Schritte stehen untereinander, also kurz nacheinander (nicht 1,4 s wie in der Reihe am Computer);
   die senkrechte Linie zeichnet sich von oben nach unten */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] [data-zeigen="ablauf"]::before { transition: transform 1000ms cubic-bezier(.65, 0, .35, 1); }
  html[data-zeigen-an] [data-zeigen="ablauf"]:not(.ist-da)::before { transform: scaleY(0); }
  .ablauf-schritt:nth-child(1) { --verz: 0ms; }
  .ablauf-schritt:nth-child(2) { --verz: 90ms; }
  .ablauf-schritt:nth-child(3) { --verz: 180ms; }
  .ablauf-schritt:nth-child(4) { --verz: 270ms; }
}


/* ==========================================================================
   8 ANFRAGE – «Anfrage an Lia» (Startseite und /kontakt/, dasselbe Formular). Seit 18.10.2026 eine Seite ohne
   Schritte (Lia 5a): Für wen, Datum, Anzahl Personen, Name, E-Mail, Telefon, Nachricht und ein Knopf. Der Knopf
   sendet direkt ins eigene Programm; klappt das nicht, bleiben die Angaben stehen und es gibt den Weg über die E-Mail
   (README «Formular»).
   Ohne Skript: Knopf gesperrt, Hinweis «braucht JavaScript» sichtbar – erst seite.js gibt das Formular frei (Klasse
   «bereit» am Formular).
   ========================================================================== */

.anfrage .ohne-js {
  max-width: 44em; margin-bottom: 32px; padding: 12px 16px; border-left: 3px solid var(--warnung); border-radius: 0 12px 12px 0;
  background: var(--warnung-flaeche); color: var(--warnung-text); font-size: 16px;
}

.anfrage.bereit .ohne-js { display: none; }
.anfrage-platz { min-height: var(--h, 0px); } /* Höhe halten, solange das Formular im Blatt steht */
.anfrage-modul { max-width: 46rem; } /* eine Spalte, so breit wie der Kopf des Abschnitts (im Blatt die ganze Breite) */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { float: left; width: 100%; padding: 0; }
legend + * { clear: both; }

/* Anfang des Formulars (Hinweis «Pflichtfelder …»): beim Öffnen des Blatts setzt js/seite.js «fokusAnfang» den Fokus
   hierher (tabindex="-1", kein Bedienelement), damit Vorleser am Anfang beginnen. Dort ohne sichtbaren Rahmen (Lia
   15.10.2026 zum Blatt: «kein goldiger rahmen um "für wen…"»; Seite und Blatt, alle Grössen). Jedes Bedienelement
   behält seinen Fokusrahmen. Ebenso die Meldung (.anfrage-meldung, weiter unten), das andere Ziel des Skripts. */
.anfrage .pflicht-hinweis[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.feld + .feld, .feld-paar + .feld, .feld + .feld-paar, .feld-paar + .feld-paar { margin-top: 24px; }
.pflicht-hinweis + .feld { margin-top: 14px; }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.feld-paar > .feld + .feld { margin-top: 0; } /* der Abstand kommt vom Raster: sonst 48 px auf dem Handy, nebeneinander 24 px versetzt */
.feld-name { display: block; margin-bottom: 10px; color: var(--tinte); font: 600 13px/1.4 var(--sans); letter-spacing: .02em; }
legend.feld-name { float: none; }
.pflicht { color: var(--gold-dunkel); }
.pflicht-hinweis { color: var(--tinte-leise); font-size: 14px; }

.feld input, .feld textarea {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--rand-feld); border-radius: 14px; background: var(--feld); color: var(--tinte);
  font: 400 17px/1.4 var(--sans); transition: border-color 200ms ease;
}

.feld input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.feld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.feld textarea { min-height: calc(4 * 1.4em + 26px); resize: vertical; }
@media (hover: hover) {
  .feld input:hover, .feld textarea:hover { border-color: var(--tinte); }
}

.feld [aria-invalid="true"] { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
/* Hinweis unter der Nachricht (Lia 18.10.2026: «Zum Beispiel: Wo findet der Anlass statt? Was wünschst du dir?») */
.feld-hinweis { margin: 8px 0 0; color: var(--tinte-leise); font-size: 14px; line-height: 1.5; }
.fehler { margin: 8px 0 0; color: var(--fehler); font-size: 14px; font-weight: 600; line-height: 1.4; }

/* Spam-Falle: für Menschen unsichtbar (nicht display:none, sonst füllen Bots sie nicht), für Vorleser aria-hidden */
.falle {
  position: absolute !important; top: auto !important; left: -10000px !important; width: 1px !important;
  height: 1px !important; overflow: hidden !important;
}

/* Auswahl als Pillen */
.wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.wahl-pille { position: relative; display: inline-flex; }
.wahl-pille input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.wahl-pille span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--rand-feld); background: var(--feld); color: var(--tinte); font: 500 15px/1.2 var(--sans);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
  .wahl-pille:hover span { border-color: var(--tinte); }
}

/* «Für wen?»: zwei grosse Felder nebeneinander (Firmenevent, Privatevent) */
.wahl-gross { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 34rem; }
.wahl-gross .wahl-pille { display: flex; }

.wahl-gross .wahl-pille span {
  justify-content: center; width: 100%; min-height: 72px; padding: 0 14px; border-radius: 20px; text-align: center;
  font: 300 21px/1.2 var(--serif); font-optical-sizing: auto;
}

/* Computer (ab 900 px und höher als 520 px, Seite und Blatt; Lia 15.10.2026 zum Blatt: «feld kleiner», «c»): ruhiger,
   so hoch wie die Eingabefelder (52 px, Tippfläche ≥ 44 px), Schrift 18 statt 21 px, schmaler. Handy (auch quer, z. B.
   932 × 430) und Tablet unverändert */
@media (min-width: 900px) and (min-height: 521px) {
  .wahl-gross { max-width: 26rem; gap: 10px; }
  .wahl-gross .wahl-pille span { min-height: 52px; border-radius: 16px; font-size: 18px; }
}

.wahl-pille input:checked + span { border-color: var(--tinte); background: var(--tinte); color: var(--creme); }
.wahl-pille input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(212,175,55,.45); }
.wahl-pille input[aria-invalid="true"] + span { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }

@media (forced-colors: active) {
  .wahl-pille input:checked + span { outline: 3px solid Highlight; outline-offset: -6px; }
}

.anfrage-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.knopf-hinweis { max-width: 38em; margin-top: 16px; color: var(--tinte-leise); font-size: 14px; line-height: 1.55; }
.knopf-hinweis a, .anfrage .ohne-js a, .anfrage-meldung a { color: var(--gold-dunkel); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.anfrage .ohne-js a { color: inherit; }

/* Meldung (Fehler, Danke): leer unsichtbar, bleibt aber im Dokument für Bildschirmleser */
.anfrage-meldung { font-size: 16px; line-height: 1.6; color: var(--tinte); }
.anfrage-meldung:focus { outline: none; box-shadow: none; } /* Ziel des Skripts, wie der Anfang des Formulars */
.anfrage-meldung.ist-fehler { margin-top: 24px; padding: 12px 16px; border-left: 3px solid var(--fehler); border-radius: 0 12px 12px 0; background: var(--fehler-flaeche); }
.anfrage-meldung.ist-erfolg { margin-top: 24px; padding: 12px 16px; border-left: 3px solid var(--erfolg); border-radius: 0 12px 12px 0; background: #e3f1e5; }

/* Klappt das Senden nicht (Lia 18.10.2026: nichts geht verloren): «Als E-Mail senden», «Anfrage kopieren» (nur über
   https) und eine kurze Rückmeldung darunter */
.anfrage-rueckfall { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.rueckfall-status { flex: 1 0 100%; color: var(--tinte-leise); font-size: 14px; line-height: 1.5; }
.rueckfall-status:empty { display: none; }

/* Nach dem Senden: «So geht es weiter» mit dem Danke, dem Satz zur Offerte und «Neue Anfrage»; die Felder sind weg */
.anfrage.ist-gesendet .anfrage-ende { padding: 32px; border-radius: 24px; background: var(--sand); color: var(--tinte); }
.anfrage.ist-gesendet .anfrage-meldung.ist-erfolg { margin-top: 0; }
.weiter-titel { margin-bottom: 16px; font-size: 28px; font-weight: 300; outline-offset: 6px; }
.weiter-fuss { margin-top: 12px; }
.weiter-satz { margin-top: 4px; color: var(--tinte-leise); font-size: 15px; }
.weiter-fuss .knopf-zurueck { margin: 8px 0 0 -18px; }

/* Lieber persönlich? – eine ruhige Zeile */
.persoenlich {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--linie-hell); color: var(--tinte-leise); font-size: 15px;
}

.persoenlich h3 { margin-right: 8px; font-size: 20px; font-weight: 300; }

.persoenlich-link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--tinte); font-weight: 500;
  text-decoration-color: rgba(122,92,15,.45); text-decoration-thickness: 1px; text-underline-offset: .3em;
}

@media (hover: hover) {
  .persoenlich-link:hover { text-decoration-color: currentColor; }
}

.persoenlich-trenner { width: 4px; height: 4px; border-radius: 50%; background: #cfc1aa; }
.kopiert { color: var(--tinte-leise); font-size: 14px; }

/* Handy: «Lieber persönlich?» auf der Startseite weg, weil Telefon und E-Mail gleich darunter im Fuss stehen
   (Lia 14.10.2026 «tel und mail stehen jetzt zwei mal»); weniger leere Fläche am Ende der Anfrage */
@media (max-width: 599px) {
  .anfrage-abschnitt .persoenlich { display: none; }
  .anfrage-abschnitt { padding-bottom: 32px; }
}

@media (min-width: 600px) {
  .feld-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Handy: «Anfrage senden» und «Als E-Mail senden» füllen die Zeile (gross genug für den Daumen) */
@media (max-width: 599px) {
  .anfrage-knoepfe [type="submit"], .anfrage-rueckfall .knopf-dunkel { flex: 1 1 auto; }
  .wahl { gap: 8px; }
  .wahl-pille span { padding: 0 18px; }
  .wahl-gross .wahl-pille span { padding: 0 8px; font-size: 18px; } /* «Firmenevent» passt auch bei 320 px (126 von 134 px) */
  .anfrage.ist-gesendet .anfrage-ende { padding: 24px; }
}

/* Felder und «So geht es weiter» blenden ein (nach «Neue Anfrage» bzw. nach dem Senden) */
@media (prefers-reduced-motion: no-preference) {
  .anfrage.bereit .anfrage-felder, .anfrage.bereit .anfrage-ende { transition: opacity 300ms ease, transform 400ms var(--aus); }
  @starting-style { .anfrage.bereit .anfrage-felder { opacity: 0; transform: translateY(10px); } }
}

/* --- Schwebende Pille: Anlass anfragen | 079 486 50 26 (zwischen [data-schwebe-ab] und [data-schwebe-bis]) --- */
/* Ohne WhatsApp (Lia 15.10.2026: nur auf der Kontaktseite, README «WhatsApp»); wieder wie bis 14.10.2026 */

.schwebe {
  position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(16px, calc(10px + env(safe-area-inset-bottom)));
  z-index: 60; display: flex; align-items: stretch; height: 52px; border: 1px solid var(--gold); border-radius: 999px;
  background: var(--grund); box-shadow: 0 16px 48px rgba(0,0,0,.45); opacity: 0; visibility: hidden;
  transform: translateY(18px);
  transition: opacity 300ms ease, transform 450ms var(--aus), visibility 0s linear 450ms;
}

.schwebe.ist-sichtbar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.schwebe-knopf, .schwebe-tel {
  display: flex; align-items: center; min-height: 50px; border: 0; background: none; color: var(--text); font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; transition: color 200ms ease;
}

@media (hover: hover) {
  .schwebe-knopf:hover, .schwebe-tel:hover { color: var(--gold); }
}

.schwebe-knopf { gap: 10px; padding: 0 20px 0 22px; border-radius: 999px 0 0 999px; }
.schwebe-tel { padding: 0 22px 0 18px; border-left: 1px solid rgba(244,238,226,.18); border-radius: 0 999px 999px 0; letter-spacing: .06em; }
.schwebe-tel .symbol { display: none; }

@media (max-width: 899px) {
  .schwebe {
    right: max(var(--kante), env(safe-area-inset-right)); left: max(var(--kante), env(safe-area-inset-left));
    justify-content: space-between;
  }
}

/* Handy quer: die Pille rechts in natürlicher Breite statt über die ganze Breite (mit dem Kopf bliebe sonst wenig
   Platz für den Inhalt) */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .schwebe { left: auto; }
}

/* ab 900 px braucht es die schwebende Pille nicht: der Kopf mit «Anlass anfragen» bleibt stehen, am Computer mit Maus klappt
   er beim Lesen zum runden Knopf zusammen und geht in der Nähe der Maus wieder auf (2 «Beim Lesen») */
@media (min-width: 900px) {
  .schwebe { display: none; }
}

/* schmale Handys: statt der Nummer ein Telefon-Symbol, Anrufen bleibt einen Tipp entfernt (Name für Vorleser im
   aria-label); «Anlass anfragen» füllt den Rest */
@media (max-width: 420px) {
  .schwebe-knopf { flex: 1; justify-content: center; padding: 0 16px 0 20px; }
  .schwebe-tel { flex: none; justify-content: center; width: 58px; padding: 0 4px 0 0; }
  .schwebe-tel .symbol { display: block; }
  .schwebe-nummer { display: none; }
}

/* --- Blatt (<dialog>, nur Startseite): fährt von unten herauf, das Formular wandert hinein ---
   position: fixed und z-index: Safari kennt «overlay» nicht und nimmt das Blatt beim Schliessen sofort aus der
   obersten Ebene; so fährt es trotzdem sichtbar nach unten weg (statt als Kasten am Seitenanfang). */

.blatt {
  position: fixed; inset: 0; z-index: 100;
  width: min(980px, 100vw); max-width: 100vw; height: 84vh; max-height: 84vh; margin: auto auto 0; padding: 0;
  overflow: hidden; border: 0; border-radius: 32px 32px 0 0; background: var(--creme); color: var(--tinte-leise);
  color-scheme: light; box-shadow: 0 -24px 64px rgba(0,0,0,.4); transform: translateY(100%);
  transition: transform 460ms var(--aus), overlay 460ms allow-discrete, display 460ms allow-discrete;
}

.blatt[open] { display: flex; flex-direction: column; transform: none; }
@starting-style { .blatt[open] { transform: translateY(100%); } }

.blatt::backdrop {
  background: rgba(14,10,7,.66); opacity: 0;
  transition: opacity 460ms ease, overlay 460ms allow-discrete, display 460ms allow-discrete;
}

.blatt[open]::backdrop { opacity: 1; }
@starting-style { .blatt[open]::backdrop { opacity: 0; } }

.blatt::before { /* Griff (Dekor) */
  content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
  border-radius: 4px; background: #cfc1aa;
}

.blatt-kopf { display: flex; flex: none; align-items: center; gap: 16px; padding: 24px 28px 18px 32px; border-bottom: 1px solid var(--linie-hell); }
.blatt-bild { flex: none; width: 72px; height: 54px; overflow: hidden; border-radius: 14px; background: var(--sand); }
.blatt-bild img { width: 100%; height: 100%; object-fit: cover; }
.blatt-titel { flex: 1; color: var(--tinte); font: 300 22px/1.2 var(--serif); }

.blatt-zu {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 18px;
  border: 1px solid #cfc1aa; border-radius: 999px; background: none; color: var(--tinte);
  font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}

@media (hover: hover) {
  .blatt-zu:hover { border-color: var(--tinte); }
}

/* scroll-padding: ein Feld, das den Fokus bekommt (z. B. das erste fehlerhafte), rollt nie unter die klebende Knopfzeile */
.blatt-inhalt {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 36px 40px 44px; scroll-padding-block: 16px 104px;
}
.blatt-inhalt .anfrage-modul { max-width: none; }
/* Knopfzeile im Blatt immer im Bild (Durchsicht 16.10.2026: bei 1280 × 800 lag der Knopf unter dem sichtbaren Teil, am
   Mac ohne Rollbalken; seit 18.10.2026 «Anfrage senden» am Ende der einen Seite): sie klebt unten im Blatt, nur der
   Inhalt darüber rollt */
/* bottom so tief wie das Polster unten im Blatt (sticky rechnet das Polster ab): die Zeile steht ganz unten am Rand,
   darunter läuft kein Streifen Inhalt durch */
.blatt-inhalt .anfrage-knoepfe {
  position: sticky; bottom: -44px; z-index: 2; padding-block: 14px; background: var(--creme);
  box-shadow: 0 -1px 0 var(--linie-hell), 0 -12px 16px -12px rgba(36, 30, 22, .18);
}

/* Computer (ab 900 px; Lia 15.10.2026 zum Blatt am Mac: «feld kleiner», dann «c»): so hoch wie sein Inhalt, höchstens
   84 % der Fensterhöhe und 760 px (dann rollt der Inhalt wie bisher), schmaler (900 statt 980 px, die Formen in Schritt 2
   stehen so weiter in vier Reihen) und etwas knapper, ohne leere Fläche unten. Es fährt weiter von unten herauf und
   steht unten am Rand (top: auto, sonst zöge inset: 0 es auf die ganze Höhe). Niedrige Fenster (bis 520 px Höhe)
   behalten das Blatt über die ganze Höhe (weiter unten), Handy und Tablet ebenso. */
@media (min-width: 900px) and (min-height: 521px) {
  .blatt { top: auto; width: min(900px, calc(100vw - 2 * var(--rand))); height: auto; max-height: min(84vh, 760px); }
  .blatt-kopf { padding: 20px 24px 14px 28px; }
  .blatt-inhalt { flex: 0 1 auto; padding: 28px 32px 32px; }
  .blatt-inhalt .anfrage-knoepfe { bottom: -32px; }
  .blatt-fuss { padding-inline: 28px; }
}

/* Fuss: «Lieber persönlich?» mit Telefon und E-Mail als Tippflächen ≥ 44 px */
.blatt-fuss {
  display: flex; flex: none; flex-wrap: wrap; align-items: center; column-gap: 6px; padding: 4px 32px;
  border-top: 1px solid var(--linie-hell); font-size: 14px;
}

.blatt-fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinte); font-weight: 600; text-underline-offset: .2em; }
html.blatt-offen { overflow: hidden; }
/* Handy quer: zu wenig Höhe – ohne Fuss bleibt Platz für Inhalt und die klebende Knopfzeile (Durchsicht 16.10.2026) */
@media (orientation: landscape) and (max-height: 520px) { .blatt-fuss { display: none; } }

/* Beim Tippen braucht es den Fuss nicht (mehr Platz neben der Bildschirm-Tastatur). Nur Handy und Touch-Geräte: am
   Computer mit Maus bliebe er sonst nicht ruhig stehen (weg in Textfeldern, wieder da bei Wahl und Kästchen) */
@media (max-width: 899px), (pointer: coarse) {
  .blatt:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus) .blatt-fuss { display: none; }
}

@media (max-width: 899px) {
  .blatt { width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .blatt::before { display: none; } /* kein Griff: das Blatt füllt den Bildschirm und schliesst über «Schliessen» */

  .blatt-kopf {
    gap: 12px;
    padding: calc(18px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  }

  .blatt-inhalt { padding: 24px 18px 32px; }
  .blatt-inhalt .anfrage-knoepfe { bottom: -32px; }
  .blatt-fuss { column-gap: 16px; padding: 2px 18px calc(2px + env(safe-area-inset-bottom)); }
  .blatt-fuss .trenner { display: none; }
}

/* niedrige Fenster (Handy quer, iPhone SE mit Tastatur): Blatt über die ganze Höhe, eine Spalte, ohne Bild */
@media (max-height: 600px) {
  .blatt-bild { display: none; }
  .blatt-kopf { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 8px; }
  .blatt-titel { font-size: 17px; }
}

@media (min-width: 900px) and (max-height: 520px) {
  .blatt { width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .blatt::before { display: none; }
  .blatt-inhalt { padding: 20px 32px 28px; }
  .blatt-inhalt .anfrage-knoepfe { bottom: -28px; }
}

/* Handy: Titel bekommt Platz – kleineres Bild, «Schliessen» als runder Knopf (Text bleibt für Vorleser) */
@media (max-width: 599px) {
  .blatt-bild { width: 56px; height: 42px; border-radius: 12px; }
  .blatt-titel { font-size: 19px; }
  .blatt-zu { justify-content: center; width: 44px; padding: 0; }
  .blatt-zu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Fuss nur mit Telefon und E-Mail in einer Zeile (Lia 14.10.2026, 4a; mit «Lieber persönlich?» brauchte er unter
     438 px zwei Zeilen); den Titel hören Vorleser weiter (versteckt wie .unsichtbar, nicht display: none) */
  .blatt-fuss-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* View Transition: Kachelbild fliegt in den Kopf des Blatts */
.vt-bild { view-transition-name: blatt-bild; }
.blatt.vt-blatt { transition: none; view-transition-name: blatt; }
::view-transition-group(blatt-bild) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-new(blatt) { animation: lk-blatt .5s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-old(blatt-bild), ::view-transition-new(blatt-bild) { height: 100%; object-fit: cover; }
@keyframes lk-blatt { from { transform: translateY(100%); } }


/* ==========================================================================
   9 FUSS – zwei Gestalten, gleiches HTML (README «Fuss»):
   - Computer und Tablet (ab 600 px, Lia 15.10.2026, Vorschlag H «symmetrisch», bis ?v=63 G2): eine Goldlinie über die
     ganze Breite, mittig darauf das runde Logo; darunter links «Telefon · E-Mail» in Creme, in der Mitte Facebook und
     Instagram als goldene Symbole genau unter dem Logo, rechts klein und gedämpft «Häufige Fragen · Impressum ·
     Datenschutz · © 2026». Ohne Leitsatz und ohne Zeile mit Inhaberin und UID (stehen im Logo bzw. im Impressum).
   - Handy (unter 600 px, Lia 14./15.10.2026, unverändert): Logo klein links, Name, Telefon und E-Mail, Facebook |
     Instagram, unten © mit UID, Häufige Fragen, Impressum | Datenschutz.
   Steht als HTML in jeder Seite gleich (pruefen.py vergleicht). Die Strasse steht sichtbar nur im Impressum (und –
   rechtlich nötig – im Datenschutz). Ohne Ortszeile und ohne Google-Maps-Link (Lia 13.10.2026).
   Ohne WhatsApp (Lia 15.10.2026: WhatsApp nur auf der Kontaktseite bei «Lieber persönlich?», README «WhatsApp»).
   ========================================================================== */

.fuss { padding: 32px 0 calc(24px + env(safe-area-inset-bottom)); color: var(--leise); font-size: 13px; line-height: 1.6; }
.fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.fuss-logo { display: block; flex: none; width: 56px; height: 56px; border-radius: 50%; opacity: .9; transition: opacity 200ms ease; }
.fuss-logo picture, .fuss-logo img { width: 100%; height: 100%; }
.fuss-kontakt { margin-top: 4px; }
.fuss a { color: var(--gedaempft); text-decoration-line: underline; text-decoration-color: rgba(244,238,226,.18); text-decoration-thickness: 1px; text-underline-offset: .3em; transition: color 200ms ease, text-decoration-color 200ms ease; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-line: none; } /* Tippflächen ≥ 44 px */
/* Facebook und Instagram im Fuss in Gold mit Symbol (Lia 14.10.2026) */
.fuss .fuss-sozial { gap: 8px; color: var(--gold); }
.fuss .sozial-symbol { display: block; flex: none; width: 18px; height: 18px; }

@media (hover: hover) {
  .fuss-logo:hover { opacity: 1; }
  .fuss a:hover { color: var(--text); text-decoration-color: currentColor; }
  .fuss-links a:hover { text-decoration-line: underline; }
}

/* Handy kompakt und geordnet (Lia 14.10.2026; seit 15.10.2026 unverändert, Lia: «Auf dem Handy bleibt er, wie er
   ist»): Logo klein links, alles andere in EINER Textspalte daneben: Name, Telefon und E-Mail nebeneinander, darunter
   zwei saubere Spalten: Facebook | Instagram (Gold, mit Symbol), dann ganz unten © mit UID, Häufige Fragen (seit
   15.10.2026, eigene Zeile) und darunter Impressum | Datenschutz. Tippflächen ≥ 44 px. */
@media (max-width: 599px) {
  .fuss { padding-top: 24px; }
  .fuss-zeile { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
  .fuss-logo { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .fuss-text { grid-column: 2; min-width: 0; }
  /* Tippflächen nie übereinander (15.10.2026): row-gap trennt Telefon und E-Mail, wenn die E-Mail ganz schmal
     (unter rund 350 px) in die nächste Zeile bricht (31 + 13 = 44 px); der negative Rand am Namen hebt denselben
     Abstand unter dem Namen wieder auf, dort bleibt alles wie vorher */
  .fuss-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 18px; margin-top: 2px; }
  .fuss-name { flex-basis: 100%; margin-bottom: -13px; }
  .fuss-kontakt .trenner { display: none; }
  /* Tippfläche bleibt 44 px, ragt aber 9 px über die Zeile (weniger Abstand zum Namen, Lia 14.10.2026) und 4 px
     darunter: genau bis dort, wo Facebook und Instagram beginnen (.fuss-zeile Abstand 4 px), ohne Überlappung */
  .fuss-kontakt a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -9px -4px; }
  .fuss-links { grid-column: 2; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 28px; }
  /* Häufige Fragen, Impressum und Datenschutz ganz unten unter dem © (.fuss-recht) */
  .fuss-recht { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 4px 0 0; padding: 0; list-style: none; }
  .fuss-recht a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-line: none; }
  /* Seit 15.10.2026 mit «Häufige Fragen»: auf jeder Handy-Breite in einer eigenen Zeile darüber, darunter Impressum |
     Datenschutz genau wie bis 14.10.2026, linksbündig ganz unten (Lia 14.10.2026). Ohne Grenze, die an Schriftbreiten
     hängt (in einer Zeile neben Impressum rückte Impressum je nach Browser nach rechts) */
  .fuss-recht > :first-child { flex-basis: 100%; }
  /* .fuss davor: die Grundregel .fuss-klein steht weiter unten und gewänne sonst (align-items: center) */
  .fuss .fuss-klein { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 6px; }
  /* UID in eigener Zeile, ohne Trennpunkt am Zeilenende */
  .fuss-uid-trenner { display: none; }
  .fuss-uid { display: block; }
  /* Instagram und Facebook hervorgehoben (nur Handy, Lia 14.10.2026) */
  .fuss .fuss-sozial { gap: 8px; color: var(--gold); }
  .fuss .sozial-symbol { display: block; flex: none; width: 20px; height: 20px; }
}

.fuss-klein {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); font-size: 12px;
}

/* Handy: Fuss etwas grösser (Lesetext auf dem iPhone mindestens 14 px, die ©-Zeile 13 px); am Computer bleibt er klein */
@media (max-width: 899px) {
  .fuss { font-size: 14px; }
  .fuss-klein { font-size: 13px; }
}

.fuss .platzhalter { padding: 2px 10px; font-size: 11px; }

/* --- Computer und Tablet (ab 600 px): Vorschlag H «symmetrisch» (Lia 15.10.2026: G2 «gefällt mir doch nicht so»,
   gewählt «h, facebook und insta aber symmetrisch bzw. unter dem logo», «ja vielleicht») ---
   Die Grenze ist dieselbe wie bisher: unter 600 px gilt der Handy-Fuss oben (bleibt genau so). Gleiches HTML: der Fuss
   selbst ist ein Raster, .fuss-zeile gibt ihre Teile an das Raster weiter (display: contents, ein div ohne Rolle), sein
   seitlicher Rand ist der von .huelle (gleiche Inhaltsbreite wie die Seite). Zwei Zeilen:
   1. eine Goldlinie über die ganze Inhaltsbreite (.fuss::before, nur Schmuck, Vorleser hören nichts), in der Mitte
      unterbrochen, darauf das runde Logo (60 px, Link zur Startseite) mit je 16 px Luft;
   2. drei Spalten, links und rechts gleich breit, die Mitte so breit wie die Symbole: links «Telefon · E-Mail» in Creme,
      in der Mitte Facebook und Instagram als goldene Symbole genau unter dem Logo (Name und « (öffnet in neuem
      Fenster)» hören Vorleser weiter), rechts klein und gedämpft «Häufige Fragen · Impressum · Datenschutz · © 2026».
   Schmaler bricht die Reihe symmetrisch um (unten). Ausgeblendet (display: none) sind nur Name und Firmenzeile
   (.fuss-name, .fuss-marke, .fuss-firma): sie stehen im Logo und im Impressum. Jede Zeile mit Links ist eine
   44-px-Tippfläche, keine überlappt (gemessen 15.10.2026, README «Fuss»). */
@media (min-width: 600px) {
  .fuss {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px 24px;
    padding: 32px max(var(--rand), env(safe-area-inset-right), calc((100% - var(--breite)) / 2))
      calc(12px + env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left), calc((100% - var(--breite)) / 2));
  }
  /* Goldlinie über die ganze Inhaltsbreite, um das Logo unterbrochen (30 px Radius + 16 px Luft) */
  .fuss::before {
    content: ""; grid-row: 1; grid-column: 1 / -1; align-self: center; height: 1px;
    background: linear-gradient(to right, var(--gold) calc(50% - 46px), transparent 0, transparent calc(50% + 46px), var(--gold) 0);
  }
  .fuss-zeile { display: contents; }
  .fuss-logo { grid-row: 1; grid-column: 2; justify-self: center; width: 60px; height: 60px; }
  .fuss-text { grid-row: 2; grid-column: 1; justify-self: start; }
  .fuss-kontakt { display: flex; flex-wrap: wrap; align-items: center; margin: 0; color: var(--text); font-size: 15px; }
  .fuss-name, .fuss-name + .trenner { display: none; }
  .fuss-kontakt .trenner { padding-inline: .5em; color: var(--leise); }
  .fuss-kontakt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
  /* nur die goldenen Symbole, genau unter dem Logo; der Name (.fuss-sozial-name) bleibt für Vorleser (versteckt wie
     .unsichtbar, nie display: none) */
  .fuss-links { grid-row: 2; grid-column: 2; justify-self: center; flex-wrap: nowrap; gap: 0 8px; }
  .fuss .fuss-sozial { justify-content: center; min-width: 44px; }
  .fuss .sozial-symbol { width: 22px; height: 22px; }
  .fuss-sozial-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* rechts klein und gedämpft; .fuss-klein ist im HTML eine .huelle, hier ein Teil des Rasters (ohne eigenen Rand). Im
     HTML steht das © vorn (Handy), hier am Schluss */
  .fuss .fuss-klein {
    grid-row: 2; grid-column: 3; justify-self: end; justify-content: flex-end; gap: 0;
    width: auto; max-width: none; margin: 0; padding: 0; border-top: 0;
  } /* 13 px, ab 900 px 12 px */
  .fuss-recht { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
  /* Polster seitlich: auch das kurze «FAQ» ist breit genug zum Tippen; die Punkte stehen dazwischen, nie darauf */
  .fuss-recht a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5em; text-decoration-line: none; }
  .fuss-copy { order: 1; }
  .fuss-marke, .fuss-firma { display: none; }
  /* Trennpunkte als kleine Kreise (kein Zeichen: Vorleser hören nichts) */
  .fuss-recht li + li::before, .fuss-copy::before {
    content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 .35em; border-radius: 50%;
    background: var(--leise); vertical-align: middle;
  }
  .fuss-copy::before { margin-right: .85em; } /* vor «© 2026» steht kein Link mit Polster */
}

@media (min-width: 600px) and (hover: hover) {
  .fuss-recht a:hover { text-decoration-line: underline; }
}

/* 600 bis 999 px: die Symbole bleiben unter dem Logo, darunter links «Telefon · E-Mail» und rechts die kleinen Links.
   In einer Reihe mit den Symbolen hätte «Häufige Fragen · Impressum · Datenschutz · © 2026» (357 px) erst ab rund
   940 px Platz; die Spalten richten sich hier nach ihrem Inhalt, dazwischen mindestens 24 px */
@media (min-width: 600px) and (max-width: 999px) {
  .fuss { grid-template-columns: auto minmax(24px, 1fr) auto; column-gap: 0; }
  .fuss-logo, .fuss-links { grid-column: 1 / -1; }
  .fuss-text, .fuss .fuss-klein { grid-row: 3; }
}

/* 600 bis 759 px: zu schmal für beide nebeneinander (deutsch 655 px): alles mittig untereinander */
@media (min-width: 600px) and (max-width: 759px) {
  .fuss { grid-template-columns: minmax(0, 1fr); }
  .fuss-text, .fuss .fuss-klein { grid-column: 1; justify-self: center; }
  .fuss .fuss-klein { grid-row: 4; }
}

/* Lücke über dem Fuss (Lia 15.10.2026: wenig leere Fläche): Endet die Seite mit einem dunklen Abschnitt (Kontakt «So
   geht es weiter»; Über mich mit «Eigene Events» nur bis ?v=63), hat er ab 600 px unten nur 0,4 × --abstand; der Fuss
   bringt seine eigenen 32 px mit. Die letzte Creme-Karte behält ihre Innenluft (0,7 × --abstand, Abschnitt 4), ihre
   Kante trennt schon. Die 404-Seite (.seiten-kopf.fehlt, füllt den ersten Bildschirm) bleibt, wie sie ist. */
@media (min-width: 600px) {
  main > :is(.dunkel, .ablauf):last-child { padding-bottom: calc(var(--abstand) * .4); }
}


/* ==========================================================================
   10 TEXTSEITEN – Über mich, Impressum, Datenschutz, 404
   Aufbau: dunkler Seiten-Kopf (4), darunter eine Creme-Karte <div class="hell textseite"> mit
   <div class="huelle huelle-schmal">. Der Rechtstext steht unverändert in <div class="rechtstext">.
   ========================================================================== */

.textseite { padding-block: clamp(40px, 5.4vw, 68px); }

/* Handy: lange Wörter im Titel der Textseiten trennen («Datenschutz-erklärung», bei 40 px breiter als 320–375 px),
   statt sie über den Rand zu schieben; nur lange Wörter (ab 10 Zeichen, je mindestens 4 Zeichen pro Teil) */
@media (max-width: 599px) {
  .textseite-kopf h1 {
    -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
  }
}
.textseite p + p { margin-top: 1em; }

/* gelber Hinweis «Entwurf – bitte prüfen» (bleibt bis zu Lias Freigabe) */
.hinweis-pruefen {
  margin: 0 0 40px; padding: 14px 18px; border: 1px solid #fcd34d; border-left: 6px solid var(--warnung);
  border-radius: 0 12px 12px 0; background: var(--warnung-flaeche); color: #3d2a00; font-size: 16px; line-height: 1.6;
}

.rechtstext { color: var(--tinte); font-size: 16px; line-height: 1.75; -webkit-hyphens: auto; hyphens: auto; }
.rechtstext section + section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie-hell); }
.rechtstext h2 { margin: 0 0 14px; font-size: clamp(1.35rem, 4.5vw, 1.75rem); line-height: 1.3; letter-spacing: -.01em; }
.rechtstext h3 { margin: 24px 0 8px; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.4; }
.rechtstext p, .rechtstext ul, .rechtstext ol { margin: 0 0 1em; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3em; }
.rechtstext li { margin-bottom: .4em; }
.rechtstext li::marker { color: var(--gold-dunkel); }
.rechtstext a { color: var(--gold-dunkel); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.rechtstext strong { font-weight: 600; }

/* Handy: keine automatische Silbentrennung im Rechtstext (sie trennte kurze Wörter und Adressen wie «one.-com»);
   nur die Gestaltung, der Wortlaut bleibt. Was länger als die Zeile ist, bricht über overflow-wrap (Grundstil). */
@media (max-width: 599px) {
  .rechtstext { -webkit-hyphens: manual; hyphens: manual; }
}

/* Handy: Listenpunkte ohne einzelnes Wort in der letzten Zeile (wie die Absätze); Telefon und E-Mail im Kontaktblock
   (Impressum «Kontakt», Datenschutz «Wer ist verantwortlich?») als Tippflächen ≥ 44 px. Links im laufenden Satz
   bleiben, wie sie sind. Nur die Gestaltung, der Wortlaut bleibt. */
@media (max-width: 899px) {
  .rechtstext li { text-wrap: pretty; }
  .rechtstext li > a[href^="tel:"], .rechtstext li > a[href^="mailto:"],
  #verantwortlich a[href^="tel:"], #verantwortlich a[href^="mailto:"] {
    display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle;
  }
}

@media (min-width: 900px) {
  .rechtstext { font-size: 17px; }
}

/* 404: Liste der Seiten */
.seite-fehlt-liste { max-width: 36rem; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.seite-fehlt-liste li { border-bottom: 1px solid var(--linie); }

.seite-fehlt-liste a {
  display: flex; align-items: center; min-height: 56px; color: var(--text); font-family: var(--serif);
  font-optical-sizing: auto; font-size: 1.375rem; font-weight: 300; line-height: 1.3; text-decoration: none;
  transition: color 200ms ease;
}

@media (hover: hover) {
  .seite-fehlt-liste a:hover { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}


/* ==========================================================================
   11 GALERIE/LIGHTBOX – /impressionen/ (js/lightbox.js)
   ========================================================================== */

.galerie-abschnitt { padding-bottom: var(--abstand); }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Rundung über overflow und border-radius (nicht clip-path): so bleibt der Fokusrahmen beim Tippen mit der Tastatur sichtbar */
.galerie a {
  position: relative; isolation: isolate; display: block; min-height: 44px; overflow: hidden; border-radius: 14px;
  background: var(--flaeche);
}

.galerie img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

@media (min-width: 600px) {
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

@media (min-width: 900px) {
  .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .galerie a { border-radius: 20px; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .galerie img { transition: transform 1400ms var(--aus); }
  .galerie a:hover img { transform: scale(1.06); }
}

html.lightbox-offen { overflow: hidden; }

.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(27,24,20,.97); color: var(--text);
}

.lightbox::backdrop { background: rgba(27,24,20,.97); }

.lightbox[open] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 64px var(--rand) calc(16px + env(safe-area-inset-bottom));
}

.lightbox-figur { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-height: 0; margin: 0; }

/* Wischen: das Foto folgt dem Finger (js/lightbox.js setzt --dx/--dy, nur transform) */
.lightbox-bild {
  width: auto; max-width: min(100%, 1400px); height: auto; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
  object-fit: contain; border-radius: 14px; touch-action: pan-y pinch-zoom;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0);
}

.lightbox-bild.laedt { opacity: .35; }
.lightbox-leiste { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 20px; }

.lightbox-zaehler {
  min-width: 5em; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-align: center;
  font-variant-numeric: tabular-nums;
}

.lightbox-knopf {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--linie-gold); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}

@media (hover: hover) {
  .lightbox-knopf:hover { border-color: var(--gold); color: var(--gold); }
}

.lightbox-knopf svg { width: 22px; height: 22px; }
.lightbox-zu { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }

/* quer und niedrig (Handy quer): Pfeile und Zähler rechts neben dem Foto, das Foto nutzt die ganze Höhe */
@media (orientation: landscape) and (max-height: 520px) {
  .lightbox[open] {
    flex-direction: row; gap: 16px;
    padding: 12px max(var(--rand), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
  }
  .lightbox-leiste { flex-direction: column; }
  .lightbox-bild { max-height: calc(100vh - 24px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox-bild { transition: opacity 200ms ease, transform 320ms var(--aus); }
  .lightbox-bild.zieht { transition: opacity 200ms ease; } /* folgt dem Finger ohne Verzögerung */
}


/* --- Fokus in der Galerie (zweite Demo Nr. 6, Lia 15.10.2026: «1, 4, 6, 7 gefällt mir»; seit ?v=65 ohne Unschärfe,
       Lia 15.10.2026 abends: «bei impressionen sollen alle bilder scharf bleiben») ---
   Impressionen und Gallery: fährt die Maus über ein Foto (oder kommt der Fokus der Tastatur darauf), wird es leicht
   grösser (1,04), die anderen werden etwas dunkler; alle Fotos bleiben scharf (kein backdrop-filter, kein filter; bis
   ?v=64 waren die anderen minimal unscharf). js/seite.js «galerieFokus» setzt ul.galerie[data-fokus] («an»; beim
   Verlassen «aus», bis die Fotos wieder hell sind, dann weg) und li.im-fokus. Jedes Foto hat dafür einen Schleier
   (li::after, dunkler Ton): ein- und ausgeblendet wird nur seine Deckkraft. Der Schleier lässt jeden Klick durch, die
   grosse Ansicht öffnet wie bisher. Nur mit Maus und ohne «Bewegung reduzieren» (dort setzt das Skript nichts); nur
   opacity und transform.
   Einzeln entfernen: diesen Abschnitt und «galerieFokus» in js/seite.js (README «Effekte»). */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .galerie > li { position: relative; }

  .galerie > li::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 14px; pointer-events: none;
    background: rgba(18,16,13,.45); opacity: 0; transition: opacity 650ms ease;
  }

  .galerie[data-fokus="an"] > li:not(.im-fokus)::after { opacity: 1; }
  .galerie[data-fokus] > li.im-fokus { z-index: 1; }
  .galerie[data-fokus="an"] > li.im-fokus > a { transform: translate3d(0, -4px, 0) scale(1.04); }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .galerie > li::after { border-radius: 20px; }
}

@media print {
  .galerie > li::after { display: none; }
}


/* ==========================================================================
   12 SCHLUSS – Berührung · Bewegung reduzieren · Druck
   ========================================================================== */

/* --- Berührung (Handy, Tablet): statt «Überfahren» eine kurze, ruhige Rückmeldung beim Antippen. Safari auf dem
       iPhone zeigt :active nur, wenn die Seite auf Berührungen hört (js/seite.js «beruehrung»). --- */

@media (hover: none) {
  .knopf-gold:active { background: var(--gold-hell); }
  .knopf-dunkel:active { background: #3a332b; }
  .knopf-zurueck:active, .knopf-klein:active, .blatt-zu:active { border-color: var(--tinte); }

  .kopf-anfrage:active, .telefon-pille:active, .menue-knopf:active, .menue-zu:active, .lightbox-knopf:active {
    border-color: var(--gold-hell); color: var(--gold);
  }

  .textlink:active, .pille a:active, .sprache a:active, .schwebe-knopf:active, .schwebe-tel:active, .menue-liste a:active, .menue-tel:active,
  .seite-fehlt-liste a:active { color: var(--gold); }
  .hell .textlink:active, .persoenlich-link:active { color: var(--tinte); text-decoration-color: currentColor; }
  .fuss a:active { color: var(--text); }
  .wahl-pille:active span { border-color: var(--tinte); }
  .form:active::before { transform: none; }
  .form-zeile:active .pfeil { opacity: 1; transform: translateX(6px); }
  .karussell-pfeil:active:not([aria-disabled="true"]) { background: var(--gold); color: var(--nacht); }
}

@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .knopf-gold:active, .knopf-dunkel:active { transform: scale(.97); transition-duration: 120ms; }
  .kachel:active, html[data-zeigen-an] .kachel[data-zeigen]:active { transform: scale(.985); transition: transform 160ms ease, box-shadow 600ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hell::before, .kachel-bild, .ueber-bild-rahmen picture, .ueber-bild-rahmen > img { transform: none; }
  .leitsatz-bild { transform: scale(1.04); }
}

@media print {
  /* Eingeblendetes im Endzustand: seite.js gibt bei «beforeprint» allen [data-zeigen], [data-kante] die Klasse
     «ist-da»; ohne Übergang erscheint es sofort ganz (nicht halb eingeblendet auf dem Papier) */
  *, *::before, *::after { transition: none !important; }
  .schwebe, .kopf, .springen, .blatt, .band, .lightbox, .menue, .einstieg, .karussell-pfeil,
  .karussell-zaehler, .stimme-mehr { display: none !important; }
  /* Kundenstimmen auf Papier immer ganz (auch vom Handy aus, wo die lange Stimme sonst nur den ersten Absatz zeigt) */
  .stimme-lang.zu blockquote p + p { display: block !important; }
  .stimme-lang.zu blockquote p:first-child::after { content: none; }
  .hell::before { display: none; }
  .seiten-kopf { padding-top: 24px; }
}

/* Referenz schreiben (bis 21.10.2026 «Kundenstimme schreiben»; Startseite, Abschnitt «Referenzen»; Lia 13.10.2026) */
.stimme-schreiben { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 8px; margin-bottom: 24px; }
.stimme-schreiben-satz { margin: 0; font-size: clamp(17px, 1.4vw, 20px); }
.stimme-schreiben-hinweis { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.6; opacity: .78; }
/* Englische Startseite (Lia 14.10.2026, Entscheid 2a): kurzer Hinweis, dass die Stimmen im deutschen Original stehen */
.stimmen-sprache { margin: 12px 0 0; font-size: 14px; line-height: 1.6; opacity: .78; }
.direkt-stimme { margin: 14px 0 0; font-size: 14px; }

/* Handy: Hinweis 14 px wie .knopf-hinweis; der Link «Datenschutz» darin bleibt in der Schriftgrösse des Satzes
   (als .textlink mit 15 px und 44 px Höhe riss er die letzte Zeile tiefer). Tippfläche über padding-block rund 45 px
   hoch: senkrechtes padding ändert die Zeilenhöhe eines Inline-Links nicht. Ebenso der Link im Hinweis unter dem
   letzten Schritt der Anfrage. Am Computer bleibt alles gleich. */
@media (max-width: 899px) {
  .stimme-schreiben-hinweis { font-size: 14px; }
  .stimme-schreiben-hinweis .textlink {
    display: inline; min-height: 0; font-size: inherit; text-decoration-color: var(--linie-gold); text-underline-offset: .3em;
  }
  .stimme-schreiben-hinweis a, .knopf-hinweis a { padding-block: 14px; }
}