/* =============================================================================
   Mini Cafe · Fassung 2 · Startseite (seite-start.css)
   Nur Rollen-Variablen aus basis.css, Bausteine aus bausteine.css.
   Eigene Teile: .start-hero, .schritte, .leiste-produkte (Kaffee + Kuchen), .club, .ueber-collage,
   .bewertungen, .cat. Seitenränder immer var(--rand) (Mahdi 9.1.2), Abstände zwischen Bereichen
   aus dem Fundament (--abstand-abschnitt, Mahdi 9.1.1). Computer = ab 1024 px.
   ============================================================================= */

/* Bereiche, die zusammengehören, stehen etwas näher (So funktioniert’s → Bowls, Kaffee → Kuchen) */
.abschnitt--nah { padding-top: calc(var(--abstand-abschnitt) * .72); }
.abschnitt--paar { padding-top: calc(var(--abstand-abschnitt) * .6); }
.abschnitt--letzt { padding-bottom: var(--a-4, 16px); }

/* Umschalten Öffnen/Geschlossen im Hauptknopf (die Klasse setzt abholzeit.js) */
.nur-zu { display: none; }
html.ist-geschlossen .nur-offen { display: none; }
html.ist-geschlossen .nur-zu { display: inline; }

/* Bestellen kommt bald (window.BESTELLEN_BALD, Schalter setzt html[data-bestellen="bald"]; 08.11.2026):
   Online-Texte weg, bald-Texte da, Knopf führt zur Speisekarte, kein „+“ (Warenkorb), Ablauf nur als ruhiger Hinweis.
   Schalter auf false = alles wie vorher (der Code bleibt). */
html:not([data-bestellen="bald"]) .nur-bald { display: none !important; }
html[data-bestellen="bald"] .nur-bestellen { display: none !important; }
html[data-bestellen="bald"] .start-hero .start-karte { display: none !important; }
html[data-bestellen="bald"] .start-hero .start-bauen { display: inline-flex; }
html[data-bestellen="bald"] .karte-produkt .plus,
html[data-bestellen="bald"] .lieblinge .plus { display: none !important; }
html[data-bestellen="bald"] #ablauf .bestellen-bald { margin-inline: auto; }

/* Die Infozeile steht im ersten Bildschirm selbst (.start-info); die automatische unter dem Kopf entfällt. */
body[data-seite="start"] > .infozeile-leiste { display: none; }

/* Druck-Rückmeldung für alles Antippbare dieser Seite (Fundament-Knöpfe bleiben, wie sie sind) */
.karte-getraenk .karte-foto { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.karte-getraenk .karte-foto:active { transform: scale(.97); }

/* ============================ 1. Erster Bildschirm ============================
   Inhaber 29.10. (2. Runde): die Fotos RICHTIG IN die Buchstaben. Gestaltung über data-hero:
     foto  Standard: „MINI“ mit dem Kaffee-Foto, „CAFE“ mit dem Bowl-Foto (fotowort-foto.js, data-fuellung="woerter")
     a  Zwei Felder: ein Bildfeld, oben/links Kaffee mit „MINI“, unten/rechts Bowl mit „CAFE“
     b  Band: ein randloses Fotoband, beide Fotos weich ineinander, Schriftzug in Creme
     c  Plakat: beide Fotos tragen den ganzen ersten Bildschirm, Satz und Knöpfe stehen auf dem Grün
     alt  bisher: Buchstaben mit einem Foto gefüllt
   Die Fotos sind auf das Motiv zentriert zugeschnitten (inhalt/hero/*-handy|computer.webp, Bildmitte = Tasse/Bowl),
   und der ruhige Grund ist nach allen Seiten verlängert (Leinwand = 2,2 × Motiv-Ausschnitt). Darum hier nur:
   background-size = 2,2 × g (g = gewünschte Breite des Motiv-Ausschnitts) und Abstand der Motivmitte vom Rand
   minus halbe Bildgröße (waagrecht 1,1 g; senkrecht Kaffee 0,591 g, Bowl 0,643 g).
   Schrift im Feld: auf Gold dunkles Grün, auf Grün Creme (beides ≥ 4,5 : 1). */
.start-hero {
  padding: 16px var(--rand) 8px;
  --tinte-gold: #0f2a20;          /* Schrift auf dem Kaffee-Gold */
  --tinte-gruen: #f7f2ea;         /* Schrift auf dem Bowl-Grün */
}
.start-buehne { position: relative; }
.start-wort { width: 100%; }
.start-feld { display: none; }
.start-text { margin-top: 26px; }
.start-text h1 {
  font: var(--gewicht-titel) var(--gr-titel-1)/var(--zeile-titel) var(--schrift-titel);
  letter-spacing: var(--sperrung-titel);
  text-wrap: balance;
}
.start-satz { margin-top: 10px; font-size: var(--gr-text); line-height: 1.45; color: var(--text); max-width: 30em; text-wrap: pretty; }
.start-tun { margin-top: 22px; }
.start-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.start-knoepfe .knopf { flex: 1 1 auto; padding-inline: 20px; }
.start-knoepfe .knopf:first-child { flex-grow: 1.5; }
.start-info { margin-top: 18px; min-height: 0; padding-bottom: 0; flex-direction: column; align-items: flex-start; row-gap: 4px; }
.start-info .info-trenner { display: none; }
.start-adresse {
  margin-top: 6px; display: flex; align-items: center; gap: 8px;
  font-size: var(--gr-klein); color: var(--text);
}
.start-adresse .symbol { width: 18px; height: 18px; flex: none; color: var(--text-neben); }
/* geschlossen: längerer Hauptknopf, beide Knöpfe sollen am Handy trotzdem in eine Zeile */
@media (max-width: 1023px) {
  html.ist-geschlossen .start-knoepfe { gap: 8px; }
  html.ist-geschlossen .start-knoepfe .knopf { font-size: 15px; padding-inline: 12px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .start-knoepfe { max-width: 520px; }
}

/* ---------- gemeinsam für a/b/c: Fotofelder ---------- */
.start-hero:is([data-hero="a"], [data-hero="b"], [data-hero="c"]) .start-feld {
  display: block; position: absolute; background-repeat: no-repeat;
}
.start-feld--kaffee {
  background-color: #b08a30;
  background-image: url("inhalt/hero/kaffee-handy.jpg");
  background-image: image-set(url("inhalt/hero/kaffee-handy.webp") type("image/webp"), url("inhalt/hero/kaffee-handy.jpg") type("image/jpeg"));
}
.start-feld--bowl {
  background-color: #2c4329;
  background-image: url("inhalt/hero/bowl-handy.jpg");
  background-image: image-set(url("inhalt/hero/bowl-handy.webp") type("image/webp"), url("inhalt/hero/bowl-handy.jpg") type("image/jpeg"));
}
@media (min-width: 1024px) {
  .start-feld--kaffee {
    background-image: url("inhalt/hero/kaffee-computer.jpg");
    background-image: image-set(url("inhalt/hero/kaffee-computer.webp") type("image/webp"), url("inhalt/hero/kaffee-computer.jpg") type("image/jpeg"));
  }
  .start-feld--bowl {
    background-image: url("inhalt/hero/bowl-computer.jpg");
    background-image: image-set(url("inhalt/hero/bowl-computer.webp") type("image/webp"), url("inhalt/hero/bowl-computer.jpg") type("image/jpeg"));
  }
}
.start-hero:is([data-hero="a"], [data-hero="b"], [data-hero="c"]) .start-wort { position: relative; z-index: 2; }
.fotowort-foto .fwf-wort { fill: var(--tinte-gruen); }

/* ============ FOTO · je Wort ein Foto in den Buchstaben (Standard) ============ */
/* Kontur + weicher Schatten, damit das goldene Kaffee-Foto auf Beige und das grüne Bowl-Foto auf Grün klar umrissen bleiben */
.start-hero[data-hero="foto"] .fotowort-foto svg { filter: drop-shadow(0 5px 12px rgba(48, 30, 6, .20)); }
.start-hero[data-hero="foto"] .fwf-rand text { stroke: #2b1c08; stroke-width: 3; stroke-opacity: .4; }
html[data-look="dunkel"] .start-hero[data-hero="foto"] .fotowort-foto svg { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
html[data-look="dunkel"] .start-hero[data-hero="foto"] .fwf-rand text { stroke: #f7f2ea; stroke-width: 3; stroke-opacity: .7; }
/* Handy: zwei Zeilen, volle Breite. Computer: eine Zeile „MINI CAFE“, so breit, dass die Fotos noch scharf bleiben */
@media (min-width: 1024px) {
  .start-hero[data-hero="foto"] { padding-top: 28px; }
  .start-hero[data-hero="foto"] .start-buehne { max-width: 1120px; margin-inline: auto; }
}

/* ============ A · Zwei Felder ============ */
/* Handy: oben Kaffee + „MINI“, unten Bowl + „CAFE“; Wort links, Motiv rechts angeschnitten */
.start-hero[data-hero="a"] .start-buehne {
  height: 232px; border-radius: var(--rund-karte); overflow: hidden; isolation: isolate;
}
.start-hero[data-hero="a"] .start-feld--kaffee {
  inset: 0 0 50% 0;
  background-size: 968px auto; background-position: right calc(60px - 484px) center;
}
.start-hero[data-hero="a"] .start-feld--bowl {
  inset: 50% 0 0 0;
  background-size: 1012px auto; background-position: right calc(58px - 506px) center;
}
.start-hero[data-hero="a"] .start-wort {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: auto;
}
/* Höhe statt Breite: jede Zeile steht mittig in ihrem Feld. Mit Zeilenabstand L (data-luft, in Großbuchstaben-Höhen)
   gilt: Feldhöhe = (2L + 2) · Großbuchstabe, Schriftzug = (2 + L) · Großbuchstabe. L = 1,2 → Wort kleiner, Motiv frei. */
.start-hero[data-hero="a"] .fotowort-foto { height: calc(232px * 3.2 / 4.4); width: auto; }
.start-hero[data-hero="a"] .fwf-wort-1 { fill: var(--tinte-gold); }

@media (min-width: 1024px) {
  /* Computer: links Kaffee, rechts Bowl; „MINI CAFE“ in einer Zeile, die Lücke liegt genau auf der Naht */
  .start-hero[data-hero="a"] { padding-top: 20px; }
  .start-hero[data-hero="a"] .start-buehne { height: clamp(380px, 46vh, 440px); border-radius: var(--rund-gross); }
  .start-hero[data-hero="a"] .start-feld--kaffee {
    inset: 0 50% 0 0;
    background-size: 2200px auto; background-position: center bottom calc(96px - 591px);
  }
  .start-hero[data-hero="a"] .start-feld--bowl {
    inset: 0 0 0 50%;
    background-size: 2288px auto; background-position: center bottom calc(96px - 669px);
  }
  .start-hero[data-hero="a"] .start-wort {
    left: 50%; top: 40px; transform: translateX(-50%); width: min(68%, 920px);
  }
  .start-hero[data-hero="a"] .fotowort-foto { height: auto; width: 100%; }
}

/* ============ B · Band ============ */
/* randlos, beide Fotos weich ineinander (Kaffee links oben, Bowl rechts unten), Schriftzug Creme */
.start-hero[data-hero="b"] .start-buehne {
  margin-inline: calc(-1 * var(--rand)); height: 232px; overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
}
.start-hero[data-hero="b"] .start-feld--bowl {
  inset: 0;
  background-size: 880px auto; background-position: right calc(64px - 440px) bottom calc(52px - 257px);
}
.start-hero[data-hero="b"] .start-feld--kaffee {
  inset: 0; z-index: 1;
  background-size: 836px auto; background-position: left calc(70px - 418px) top calc(56px - 225px);
  -webkit-mask-image: linear-gradient(158deg, #000 34%, transparent 62%);
          mask-image: linear-gradient(158deg, #000 34%, transparent 62%);
}
/* ruhige Mitte hinter der Schrift, damit Creme auch auf dem Gold lesbar bleibt */
.start-hero[data-hero="b"] .start-buehne::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* über den Fotos, unter der Schrift */
  background: radial-gradient(ellipse 62% 46% at 50% 50%, rgba(10, 24, 16, .4), rgba(10, 24, 16, 0) 100%);
}
.start-hero[data-hero="b"] .start-wort { width: 86%; }
.start-hero[data-hero="b"] .fotowort-foto svg { filter: drop-shadow(0 2px 14px rgba(8, 20, 14, .45)); }
@media (min-width: 1024px) {
  .start-hero[data-hero="b"] { padding-top: 0; }
  .start-hero[data-hero="b"] .start-buehne { height: clamp(320px, 40vh, 380px); }
  .start-hero[data-hero="b"] .start-feld--kaffee {
    background-size: 1980px auto; background-position: left calc(200px - 990px) center;
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 58%);
            mask-image: linear-gradient(90deg, #000 30%, transparent 58%);
  }
  .start-hero[data-hero="b"] .start-feld--bowl {
    background-size: 2068px auto; background-position: right calc(200px - 1034px) center;
  }
  .start-hero[data-hero="b"] .start-wort { width: min(52%, 760px); }
  .start-hero[data-hero="b"] .start-buehne::after { background: radial-gradient(ellipse 40% 48% at 50% 50%, rgba(10, 24, 16, .42), rgba(10, 24, 16, 0) 100%); }
}

/* ============ C · Plakat ============ */
/* Fotos tragen den ganzen ersten Bildschirm; Satz, Knöpfe und Öffnungszeit stehen in Creme auf dem Bowl-Grün */
.start-hero[data-hero="c"] {
  position: relative; isolation: isolate; padding: 0;
  /* Rollen wie im dunklen Look, nur hier im Grün */
  --text: #f7f2ea; --text-neben: #d9d0bf; --haupt: #e9b949; --haupt-druck: #f3cd6e; --auf-haupt: #070b0a;
  --flaeche-tief: rgba(247, 242, 234, .14); --flaeche-druck: rgba(247, 242, 234, .22);
  --live: #f7f2ea; --live-zeit: #e9b949; --live-punkt: #e9b949; --link: #f7f2ea; --fokus: #e9b949;
  color: var(--text);
}
.start-hero[data-hero="c"] .start-buehne { position: static; height: 236px; padding: 0 var(--rand); display: flex; align-items: center; }
.start-hero[data-hero="c"] .start-feld--kaffee {
  inset: 0 0 auto 0; height: 236px; z-index: -1;
  background-size: 1034px auto; background-position: right calc(58px - 517px) center;
}
.start-hero[data-hero="c"] .start-feld--bowl {
  inset: 236px 0 0 0; z-index: -1;
  background-size: 1408px auto; background-position: right calc(40px - 704px) bottom calc(40px - 412px);
}
.start-hero[data-hero="c"] .start-wort { width: auto; }
.start-hero[data-hero="c"] .fotowort-foto { height: 150px; width: auto; }
.start-hero[data-hero="c"] .fwf-wort { fill: var(--tinte-gold); }
.start-hero[data-hero="c"] .start-text { margin-top: 0; padding: 28px var(--rand) 32px; }
.start-hero[data-hero="c"] .start-satz { color: var(--text); }
.start-hero[data-hero="c"] .knopf--neben { background: #f7f2ea; color: #0f2a20; }
.start-hero[data-hero="c"] .knopf--neben:hover,
.start-hero[data-hero="c"] .knopf--neben:active { background: #e6dccb; }
@media (min-width: 1024px) {
  .start-hero[data-hero="c"] {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; min-height: min(640px, calc(100vh - 140px));
  }
  .start-hero[data-hero="c"] .start-buehne { grid-column: 1 / -1; height: auto; padding: 48px var(--rand) 0; justify-content: center; }
  .start-hero[data-hero="c"] .start-feld--kaffee {
    inset: 0 50% 0 0; height: auto;
    background-size: 2156px auto; background-position: center bottom calc(110px - 579px);
  }
  .start-hero[data-hero="c"] .start-feld--bowl {
    inset: 0 0 0 50%;
    background-size: 2200px auto; background-position: right calc(120px - 1100px) bottom calc(50px - 643px);
  }
  .start-hero[data-hero="c"] .start-wort { width: min(74%, 1000px); }
  .start-hero[data-hero="c"] .fotowort-foto { height: auto; width: 100%; }
  .start-hero[data-hero="c"] .fwf-wort-2 { fill: var(--tinte-gruen); }
  .start-hero[data-hero="c"] .start-text { grid-column: 2; align-self: end; padding: 32px var(--rand) 56px 56px; max-width: 560px; }
}

/* ============ ZUG · neue Schriftzug-Varianten (?zug=a|b|c, Inhaber 01.11.; fotowort/schriftzug.js) ============
   a  Nur Schrift: Prata, „MINI“ klein gesperrt über großem „CAFE“, hell Mahdis Grün, dunkel Beige
   b  Ein Foto, ruhig: Archivo 900 breit, ein Bowl-Foto durch alle Buchstaben (keine Farbe nötig)
   c  Schild: Yellowtail „Mini Cafe“, hell Espresso, dunkel Gold wie der Schriftzug über der Tür
   Keine Ränder, Schatten oder Effekte. Handy: Schriftzug über dem Text; Computer: Schriftzug links, Text rechts. */
.start-hero[data-hero="zug"] { padding-top: 22px; }
.start-hero[data-zug="a"] { --sz-farbe: var(--haupt); }
html[data-look="dunkel"] .start-hero[data-zug="a"] { --sz-farbe: var(--text); }
.start-hero[data-zug="c"] { --sz-farbe: #3a2619; }                 /* Espresso, 12 : 1 auf Beige */
html[data-look="dunkel"] .start-hero[data-zug="c"] { --sz-farbe: var(--akzent); }
.start-hero[data-hero="zug"] .start-text { margin-top: 28px; }
@media (min-width: 1024px) {
  .start-hero[data-hero="zug"] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 72px; align-items: center;
    padding-top: 40px; padding-bottom: 8px;
  }
  .start-hero[data-hero="zug"] .start-wort { max-width: 640px; }
  .start-hero[data-zug="c"] .start-wort { max-width: 720px; }
  .start-hero[data-hero="zug"] .start-text { margin-top: 0; }
}

/* ---------- Text unter dem Bildfeld (a, b) am Computer: Satz links, Knöpfe rechts ---------- */
@media (min-width: 1024px) {
  .start-hero[data-hero="a"] .start-text,
  .start-hero[data-hero="b"] .start-text,
  .start-hero[data-hero="foto"] .start-text {
    margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; align-items: start;
  }
  .start-text h1 { font-size: 42px; }
  .start-satz { margin-top: 14px; font-size: 19px; }
  .start-tun { margin-top: 28px; }
  .start-hero:is([data-hero="a"], [data-hero="b"], [data-hero="c"], [data-hero="foto"]) .start-tun { margin-top: 0; }
  .start-knoepfe .knopf { flex: 0 0 auto; }
  .start-knoepfe .knopf:first-child { flex-grow: 0; }
  .start-info { margin-top: 20px; }
}

/* ============ alt · Buchstaben mit einem Foto gefüllt (bisheriger Stand) ============ */
@media (min-width: 1024px) {
  /* Schriftzug links groß (zwei Zeilen: das Foto bleibt gut sichtbar), Satz und Knöpfe rechts */
  .start-hero[data-hero="alt"] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 56px; align-items: center;
    padding-top: 24px; padding-bottom: 0;
  }
  .start-hero[data-hero="alt"] .start-buehne { max-width: 860px; }
  .start-hero[data-hero="alt"] .start-text { margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .start-hero[data-hero="alt"] { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; }
  .start-text h1 { font-size: 36px; }
}

/* ============================ 2. So funktioniert's ============================ */
.schritte { list-style: none; margin: 16px 0 0; padding: 6px 16px; display: grid; border-radius: var(--rund-karte); background: var(--flaeche); }
.schritt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; }
.schritt-ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--flaeche-tief); color: var(--text); }
.schritt-ikon .symbol { width: 20px; height: 20px; }
.schritt h3 { font: 700 var(--gr-name)/1.25 var(--schrift); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
html[data-look="dunkel"] .schritt h3 { font: 400 19px/1.2 var(--schrift-titel); letter-spacing: 0; }
.schritt-nr { color: var(--text-neben); font-weight: 600; font-size: .9em; }
.schritt p { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--text); }
@media (min-width: 700px) {
  /* ab Tablet: drei Spalten mit großer Ziffer, keine Karten und keine Symbole */
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 28px; padding: 0; background: none; border-radius: 0; }
  .schritt { grid-template-columns: 1fr; gap: 6px; align-items: start; padding: 0; }
  .schritt-ikon { display: none; }
  .schritt h3 { display: block; font-size: 21px; }
  html[data-look="dunkel"] .schritt h3 { font-size: 26px; }
  .schritt-nr { display: block; margin-bottom: 8px; font: var(--gewicht-titel) 64px/1 var(--schrift-titel); letter-spacing: var(--sperrung-titel); color: var(--haupt); }
  html[data-look="dunkel"] .schritt-nr { font-weight: 400; color: var(--akzent); }
  .schritt p { font-size: 17px; margin-top: 4px; }
}

/* ============================ 3. Bowls (Bühne: Fundament F3) ============================ */

/* ============================ 4./5. Kaffee-Leiste und Kuchen-Reihe ============================ */
.leiste-produkte {
  display: flex; gap: 12px; margin-top: 16px;
  padding: 0 var(--rand) 6px;                     /* Seitenrand eingebaut, wischbar */
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--rand);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.leiste-produkte::-webkit-scrollbar { display: none; }
.leiste-produkte .karte-produkt { flex: 0 0 152px; scroll-snap-align: start; }
.leiste-produkte .karte-name { font-size: 15px; }
/* Kaffee: Zeichnung auf ruhigem Grund, etwas schmaler als die Kuchen – man sieht sofort: viele Sorten */
.karte-getraenk { flex-basis: 136px !important; }
.karte-getraenk .karte-foto { aspect-ratio: 1 / .9; }
.karte-getraenk .karte-foto > svg { width: 58%; }
@media (max-width: 1023px) {
  .leiste-produkte { margin-top: 12px; }
  .leiste-produkte .karte-name { font-size: 14px; }
  .vitrine .karte-name { white-space: nowrap; }
  .vitrine .karte-foto { aspect-ratio: 1 / .72; }
  .leiste-produkte .karte-unten { padding-top: 6px; }
  html[data-look="dunkel"] .leiste-produkte .karte-name { min-height: 2.6em; font-size: 15px; }
  html[data-look="dunkel"] .vitrine .karte-foto { width: 104px; height: 104px; margin-bottom: 8px; }
  html[data-look="dunkel"] .karte-getraenk .karte-foto { width: 88px; height: 88px; margin-bottom: 8px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  /* Tablet: Kuchen alle fünf nebeneinander; Kaffee bleibt wischbar */
  .vitrine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; overflow: visible; }
  .vitrine .karte-produkt { flex: none; }
}
@media (min-width: 1024px) {
  .leiste-produkte { margin: 32px 0 0; padding: 0; overflow: visible; display: grid; gap: 20px; }
  .leiste-produkte .karte-produkt { flex: none; }
  #kaffeeleiste { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
  .vitrine { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vitrine .karte-name { font-size: 17px; }
  .karte-getraenk .karte-name { font-size: 16px; }
}

/* ============================ 6. MiniClub (Handy: Kopf, Text, zwei Knöpfe mit Abstand) ============================ */
.club {
  display: grid; gap: 14px; padding: 22px 20px 24px;
  border-radius: var(--rund-gross); background: var(--flaeche);
}
.club-kopf { display: flex; align-items: center; gap: 14px; }
.club-muenze, .club-muenze .symbol, .club-muenze > img, .club-muenze > svg { width: 48px; height: 48px; flex: none; }
.club h2 { font-size: var(--gr-titel-2); }
.club-text p { font-size: var(--gr-text); line-height: 1.45; }
.club-text p + p { margin-top: 10px; }
.club-bonus strong { font-weight: 700; }
html[data-look="dunkel"] .club-bonus strong { font-weight: 500; color: var(--text); }
.club-bonus .abzeichen { display: flex; width: fit-content; margin-top: 8px; }
/* zwei gleich breite Knöpfe untereinander, nicht über die ganze Breite (Mahdi 9.3.3) */
.club-knoepfe { display: grid; grid-template-columns: minmax(0, 264px); gap: 12px; margin-top: 10px; }
.club-knoepfe .knopf { min-height: 50px; padding-inline: 22px; }
#miniclub + .abschnitt { padding-top: calc(var(--abstand-abschnitt) + 12px); }   /* Mahdi 9.3.3: mehr Abstand danach */
@media (min-width: 1024px) {
  .club { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "muenze titel knoepfe" "muenze text knoepfe"; column-gap: 40px; row-gap: 8px; align-items: center; padding: 44px 48px; }
  .club-kopf { display: contents; }
  .club-muenze { grid-area: muenze; }
  .club-muenze, .club-muenze .symbol, .club-muenze > img, .club-muenze > svg { width: 88px; height: 88px; }
  .club h2 { grid-area: titel; align-self: end; }
  .club-text { grid-area: text; align-self: start; max-width: 44em; }
  .club-text p { font-size: 18px; }
  .club-knoepfe { grid-area: knoepfe; margin-top: 0; grid-template-columns: 240px; }
  .club-knoepfe .knopf { min-height: 54px; }
  #miniclub + .abschnitt { padding-top: var(--abstand-abschnitt); }
}

/* ============================ 7. Über uns: Collage aus Rechtecken ============================ */
.ueber { display: grid; gap: 22px; }
.ueber-collage {
  display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;
  aspect-ratio: 4 / 3.1;
}
.ueber-foto { margin: 0; overflow: hidden; border-radius: var(--rund-foto); background: var(--flaeche-tief); min-height: 0; }
.ueber-foto img { width: 100%; height: 100%; object-fit: cover; }
.ueber-foto--gross { grid-row: 1 / 3; }
.ueber-foto--gross img { object-position: 50% 45%; }
.ueber h2 { font-size: var(--gr-titel-2); }
.ueber-text p { margin: 8px 0 6px; font-size: var(--gr-text); line-height: 1.5; max-width: 34em; }
@media (min-width: 1024px) {
  .ueber { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
  .ueber-collage { gap: 16px; aspect-ratio: 16 / 11; }
  .ueber-text p { margin: 16px 0 12px; font-size: 20px; }
}

/* ============================ 8. Bewertungen (Platzhalter) ============================ */
#bewertungen .abschnitt-kopf { align-items: center; gap: 8px; }
#bewertungen h2 { font-size: 24px; white-space: nowrap; }
.bewertungen { display: grid; gap: 10px; margin-top: 14px; }
.bew { padding: 16px 18px; border-radius: var(--rund-karte); background: var(--flaeche); }
.bew-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bew-sterne { display: flex; gap: 2px; color: var(--text-still); }
.bew-sterne .symbol { width: 16px; height: 16px; }
.bew-text { margin-top: 8px; font-size: var(--gr-klein); line-height: 1.45; color: var(--text); }
.bew-name { display: flex; align-items: center; gap: 8px; font-size: var(--gr-mini); font-weight: 600; color: var(--text-neben); }
.bew--weiter { display: none; }
.bew-linie { margin-top: 10px; height: 10px; border-radius: 6px; background: var(--flaeche-tief); }
.bew-linie--kurz { width: 62%; margin-top: 8px; }
@media (min-width: 1024px) {
  #bewertungen h2 { font-size: var(--gr-titel-2); }
  .bewertungen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
  .bew { padding: 28px; }
  .bew--weiter { display: block; }
  .bew-sterne .symbol { width: 22px; height: 22px; }
  .bew-text { font-size: 18px; margin-top: 12px; }
  .bew-name { font-size: 15px; }
}

/* ============================ 9. Catering: Text + Bilderband + Knopf (Inhaber 06.11.2026) ============================ */
.cat {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px 16px 20px; border-radius: var(--rund-gross); background: var(--flaeche);
}
.cat h2 { font-size: 24px; line-height: 1.2; }
html[data-look="dunkel"] .cat h2 { font-size: 28px; }
.cat-text p { margin-top: 4px; font-size: var(--gr-klein); line-height: 1.4; color: var(--text); }
/* Band: feste Höhe, jedes Bild in seiner Form; am Handy seitlich wischen */
.cat-band {
  list-style: none; margin: 0 -16px; padding: 0 16px; display: flex; gap: 10px; height: 168px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.cat-band::-webkit-scrollbar { display: none; }
.cat-bild { flex: 0 0 auto; height: 100%; aspect-ratio: var(--seiten, 1.5); border-radius: var(--rund-foto); overflow: hidden; background: var(--flaeche-tief); scroll-snap-align: start; }
.cat-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-bild--team img { object-position: 50% 35%; }
.cat-knopf { justify-self: start; min-width: 160px; min-height: 50px; padding-inline: 28px; }
@media (min-width: 1024px) {
  .cat { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; padding: 28px 32px 32px; align-items: center; }
  .cat h2 { font-size: 32px; }
  html[data-look="dunkel"] .cat h2 { font-size: 36px; }
  .cat-text p { font-size: 18px; margin-top: 8px; }
  .cat-band { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; height: 260px; overflow: visible; gap: 14px; }
  .cat-bild { flex: var(--seiten, 1.5) 1 0; min-width: 0; aspect-ratio: auto; }
  .cat-knopf { grid-column: 2; grid-row: 1; justify-self: end; min-height: 54px; }
}

/* ============================ Handy: Überschriften, Kopf-Zeilen ============================ */
@media (max-width: 1023px) {
  .nur-computer-satz { display: none; }
  #bowls .abschnitt-zaehler { display: none; }
  #ablauf h2, .club h2, .ueber h2 { font-size: 26px; }
  html[data-look="dunkel"] #ablauf h2, html[data-look="dunkel"] .club h2, html[data-look="dunkel"] .ueber h2 { font-size: 30px; }
  .abschnitt-satz { font-size: 14px; }
  .buehne-zeile .allergene { display: none !important; }
}

/* =============================================================================
   BAUKASTEN Startseite (Inhaber 02.11.2026, Vorbild haven-annecy.fr). Varianten über bk-…= (seite-start.js setzt
   data-schriftzug/-umriss/-route/-speisekarte an .start-hero). Eleganz durch wenige, feine, einheitliche Linien.
   ============================================================================= */
/* Linienfarbe aller Zeichnungen (Umriss, Ablauf, Ladenfront, kleine Begleiter) */
:root { --linie: #b08d6a; }                                   /* warmes Hellbraun */
html[data-look="dunkel"] { --linie: rgba(232, 220, 200, .45); } /* helles Beige, wenig Deckkraft */

.start-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- schriftzug a/c: jeder Buchstabe ein anderes Foto (fotowort/buchstaben.js) ---------- */
.start-hero[data-hero="haven"] .start-wort { container-type: inline-size; }
.start-hero[data-hero="haven"] .start-text { margin-top: 26px; }
@media (min-width: 1024px) {
  .start-hero[data-hero="haven"] { padding-top: 30px; }
  .start-hero[data-hero="haven"] .start-text {
    margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; align-items: start;
  }
  .start-hero[data-hero="haven"] .start-tun { margin-top: 0; }
}

/* ---------- umriss: Wien groß und blass HINTER dem Schriftzug, angeschnitten (nie seitlicher Überlauf) ----------
   Die Zeichnung wird so gelegt, dass der Café-Punkt an (--zx, --zy) sitzt; --zy setzt seite-start.js genau in die Lücke
   zwischen Schriftzug und Text (dort ist der Punkt immer frei sichtbar).
   --px/--py = Lage des Punkts in der Zeichnung (Anteil), --ub = Breite der Zeichnung. */
.start-hero { position: relative; isolation: isolate; }
/* reicht unten in den Abstand vor dem nächsten Abschnitt; die Zeichnung wird per JS GANZ hinein gesetzt (nie harte Kante),
   die letzten 70 px blenden sanft aus (U, 02.11.2026) */
.start-umriss {
  position: absolute; inset: 0 0 calc(-1.4 * var(--abstand-abschnitt)) 0; overflow: hidden; pointer-events: none; z-index: 0; color: var(--linie);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
  --umriss-text: color-mix(in srgb, var(--linie) 68%, var(--text));
}
html[data-look="dunkel"] .start-umriss { color: rgba(232, 220, 200, .55); --umriss-text: rgba(232, 220, 200, .8); }
.start-umriss[hidden] { display: none; }
.start-hero > .start-buehne, .start-hero > .start-text { position: relative; z-index: 1; }
.start-umriss .umriss-linie {
  position: absolute; left: var(--zx); top: var(--zy); width: var(--ub); height: auto;
  transform: translate(calc(-100% * var(--px)), calc(-100% * var(--py))); max-width: none;
  opacity: .85;
}
html[data-look="dunkel"] .start-umriss .umriss-linie { opacity: 1; }
/* Rückfallwerte; --ub/--zx/--zy/--px/--py setzt seite-start.js (ganz Wien einpassen) */
.start-hero[data-umriss="a"], .start-hero[data-umriss="c"], .start-hero[data-umriss="d"] { --px: .4315; --py: .4755; --ub: 92vw; --zx: 50%; --zy: 50%; }
.start-hero[data-umriss="b"] { --px: .3419; --py: .4607; --ub: 96vw; --zx: 72%; --zy: 50%; }
@media (min-width: 700px) {
  .start-hero[data-umriss="a"], .start-hero[data-umriss="c"], .start-hero[data-umriss="d"] { --ub: min(720px, 60vw); --zx: 57%; }
  .start-hero[data-umriss="b"] { --ub: min(640px, 46vw); --zx: 57%; }
}
/* Café-Punkt: Akzent, mit feinem Ring; leises Pulsieren nur ohne Fotomodus und ohne „weniger Bewegung“ (Klon nur dann) */
:is(.start-umriss, .start-umriss-hell, .start-wien-frei) .umriss-punkt { fill: var(--haupt); stroke: var(--grund); stroke-width: 3px; paint-order: stroke; r: 8px; }
html[data-look="dunkel"] :is(.start-umriss, .start-umriss-hell, .start-wien-frei) .umriss-punkt { fill: var(--akzent); }
/* Puls nur, wenn Bewegung erwünscht ist (prefers-reduced-motion: no-preference) */
:is(.start-umriss, .start-umriss-hell, .start-wien-frei) .umriss-puls {
  display: none; fill: var(--haupt); stroke: none; r: 8px; transform-box: fill-box; transform-origin: center;
}
html[data-look="dunkel"] :is(.start-umriss, .start-umriss-hell, .start-wien-frei) .umriss-puls { fill: var(--akzent); }
@keyframes umriss-puls { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.start-umriss, .start-umriss-hell, .start-wien-frei) .umriss-puls { display: inline; animation: umriss-puls 3.2s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
}
/* umriss d: feine Beschriftung in der Lücke zwischen Schriftzug und Text: „WIEN“ links, „MINI CAFE“ mit kurzer Linie rechts vom Punkt */
.start-umriss .umriss-beschr {
  position: absolute; left: var(--zx); top: var(--zy); white-space: nowrap; color: var(--umriss-text);
  font: 600 10.5px/1 var(--schrift); letter-spacing: .26em; text-transform: uppercase;
}
.start-umriss .umriss-beschr--wien { transform: translate(calc(-100% - 22px), -50%); margin-left: .26em; }
.start-umriss .umriss-beschr--cafe { transform: translate(36px, -50%); }
.start-umriss .umriss-beschr--cafe::before { content: ""; position: absolute; left: -22px; top: 50%; width: 15px; border-top: 1px solid currentColor; opacity: .8; }
@media (min-width: 700px) { .start-umriss .umriss-beschr { font-size: 12px; } }

/* ---------- bezirke (W2, 02.11.2026): a = Bezirke hauchdünn (Zeichnung wien-bezirke), aus = nur Außenlinie ---------- */
:is(.start-umriss, .start-wien-frei) .wien-bezirke { opacity: .75; }
html[data-look="dunkel"] :is(.start-umriss, .start-wien-frei) .wien-bezirke { opacity: .6; }
:is(.start-umriss, .start-wien-frei) .wien-bezirk-9 { fill-opacity: .16; }
html[data-look="dunkel"] :is(.start-umriss, .start-wien-frei) .wien-bezirk-9 { fill-opacity: .12; }

/* ---------- umriss e „Wien ganz, wie Haven“ (W2): Lage, Größe und Aussparung setzt seite-start.js (umrissE) ----------
   Regler: Größe E_GROESSE und Abstand/Weichheit AUSSPAREN in seite-start.js; Deckkraft hinten .umriss-linie (unten),
   vorne .umriss-hell-linie (Farbe + Deckkraft + feiner Schatten). */
.start-hero[data-umriss="e"] { --px: .4315; --py: .4755; --ub: 92vw; --zx: 50%; --zy: 40%; }
.start-hero[data-umriss="e"] .start-umriss {
  -webkit-mask-image: var(--aussparen, linear-gradient(#000, #000)), linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
  mask-image: var(--aussparen, linear-gradient(#000, #000)), linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.start-hero[data-umriss="e"] .start-umriss .umriss-linie { opacity: .8; }
html[data-look="dunkel"] .start-hero[data-umriss="e"] .start-umriss .umriss-linie { opacity: 1; }
.start-hero[data-umriss="e"] .start-umriss :is(.umriss-punkt, .umriss-puls) { display: none; }   /* Punkt liegt vorne */
.start-umriss-hell { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.start-umriss-hell svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.start-umriss-hell text { font-kerning: none; }
.umriss-hell-linie { color: #fbf6ee; opacity: .94; filter: drop-shadow(0 0 1.3px rgba(30, 18, 6, .6)); }
.umriss-hell-linie .wien-grenze { stroke-width: 2.2px; }
.umriss-hell-linie svg { overflow: visible; }
.umriss-hell-linie :is(.wien-bezirke, .wien-bezirk-9) { display: none; }   /* auf den Fotos ruhig: nur Grenze + Flüsse */
.start-umriss-hell .umriss-punkt { r: 7px; stroke: #fbf6ee; }   /* heller Ring: auch auf einem Foto gut zu sehen */
.start-umriss-hell .umriss-puls { r: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .start-umriss-hell.ist-spaet .umriss-hell-linie { animation: umriss-hell-ein 1.4s cubic-bezier(0.23, 1, 0.32, 1) 1s backwards; }
}
@keyframes umriss-hell-ein { from { opacity: 0; } }

/* ---------- umriss f „Wien frei daneben“ (W2): eigene Fläche, nichts liegt darüber ----------
   Handy/Tablet: zwischen Schriftzug und Überschrift (gleich im ersten Bildschirm zu sehen; Knöpfe rutschen etwas nach unten)
   · Computer: rechte Spalte neben Überschrift + Knöpfen (Text links untereinander). */
.start-wien-frei { color: var(--linie); width: min(82%, 300px); margin: 2px auto 22px; }
@media (max-width: 1023px) {
  .start-hero[data-umriss="f"] .start-text { display: flex; flex-direction: column; }
  .start-hero[data-umriss="f"] .start-wien-frei { order: -1; }
}
@media (min-width: 700px) and (max-width: 1023px) { .start-wien-frei { width: min(70%, 380px); } }
html[data-look="dunkel"] .start-wien-frei { color: rgba(232, 220, 200, .55); }
.start-wien-frei .umriss-linie { display: block; width: 100%; height: auto; opacity: .85; overflow: visible; }
html[data-look="dunkel"] .start-wien-frei .umriss-linie { opacity: 1; }
.start-wien-frei .umriss-punkt, .start-wien-frei .umriss-puls { r: 17px; }   /* Einheiten der Zeichnung (1080 breit) */
.start-wien-frei .umriss-punkt { stroke-width: 6px; }
@media (min-width: 1024px) {
  .start-hero[data-umriss="f"] .start-text {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); column-gap: 64px; align-items: center;
  }
  .start-hero[data-umriss="f"] .start-kopf { grid-column: 1; grid-row: 1; align-self: end; }
  .start-hero[data-umriss="f"] .start-tun { grid-column: 1; grid-row: 2; align-self: start; margin-top: 26px; }
  .start-hero[data-umriss="f"] .start-knoepfe .knopf { flex: 0 0 auto; }
  .start-hero[data-umriss="f"] .start-wien-frei { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: -6px 0 0; }
}
/* e und f: kein Schein um die Schrift mehr nötig (e spart aus, f liegt daneben) */
.start-hero:is([data-umriss="e"], [data-umriss="f"]) :is(.start-text h1, .start-satz, .start-info, .start-adresse) { text-shadow: none; }

/* ---------- route: Weg zum Café (Adresse im ersten Bildschirm) ---------- */
.start-adresse { position: relative; flex-wrap: wrap; row-gap: 6px; }
.start-route {
  /* Inhaber 02.11.: „geht so unter“ -> gefüllte Pille in der Markenfarbe (hell grün, dunkel gold), 44 px hoch */
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px 0 14px; margin-left: 0;
  border: 0; border-radius: var(--rund-pille); font: 700 15px/1 var(--schrift); cursor: pointer;
  color: var(--auf-haupt); background: var(--haupt); text-decoration: none; box-shadow: 0 2px 8px color-mix(in srgb, var(--haupt) 30%, transparent);
  position: relative; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}
.start-route:active { transform: scale(.97); background: var(--haupt-druck); }
@media (hover: hover) and (pointer: fine) { .start-route:hover { background: var(--haupt-druck); } }
.start-route .symbol { width: 18px; height: 18px; color: inherit; }
.start-route .start-route-pfeil { display: inline-flex; transition: transform 200ms ease; }
.start-route .start-route-pfeil .symbol { width: 14px; height: 14px; }
.start-route[aria-expanded="true"] .start-route-pfeil { transform: rotate(180deg); }
.start-route-wahl { display: contents; }
.start-route-liste {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 220px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 16px;
  background: var(--flaeche); box-shadow: 0 10px 30px rgba(30, 20, 5, .16), 0 0 0 1px rgba(30, 20, 5, .06);
  transform-origin: top left; animation: route-auf 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.start-route-liste[hidden] { display: none; }
.start-route-liste.nach-oben { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
html[data-look="dunkel"] .start-route-liste { background: var(--flaeche-tief); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.start-route-liste a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 11px;
  font: 500 15px/1.2 var(--schrift); color: var(--text); text-decoration: none;
}
.start-route-liste a:hover, .start-route-liste a:focus-visible { background: var(--flaeche-tief); }
html[data-look="dunkel"] .start-route-liste a:hover, html[data-look="dunkel"] .start-route-liste a:focus-visible { background: var(--flaeche-druck); }
@keyframes route-auf { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .start-route-liste { animation: none; } }
/* c: die ganze Adresszeile ist der Knopf */
.start-adresse-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -12px; padding: 0 8px 0 14px;
  border-radius: var(--rund-pille); color: var(--text); text-decoration: none; font-weight: 600;
  background: color-mix(in srgb, var(--haupt) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--haupt);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}
.start-adresse-link:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .start-adresse-link:hover { background: var(--flaeche); } }
.start-adresse-link .symbol { width: 18px; height: 18px; flex: none; color: var(--text-neben); }
.start-adresse-link .start-adresse-pfeil { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--haupt); }
.start-adresse-link .start-adresse-pfeil .symbol { width: 16px; height: 16px; color: var(--auf-haupt); }

/* ---------- speisekarte: Nebenknopf unter dem Schriftzug ---------- */
.start-karte { gap: 8px; }
/* aus (Standard, Inhaber 02.11.): nur „Jetzt vorbestellen“; mit route=d übernimmt „Route“ den Platz des Speisekarte-Knopfs */
.start-hero[data-speisekarte="aus"] .start-karte, .start-hero[data-route="d"] .start-karte { display: none; }
/* route d: großer Zweitknopf in warmem Gold, gleiche Größe wie der Hauptknopf */
.start-route-gross { gap: 8px; background: var(--akzent); color: var(--c-schwarz, #1D1D1B); }
.start-route-gross .symbol { width: 22px; height: 22px; flex: none; }
.start-route-gross:active { background: color-mix(in srgb, var(--akzent) 85%, #000); }
html[data-look="dunkel"] .start-route-gross {
  background: color-mix(in srgb, var(--akzent) 22%, var(--grund)); color: var(--c-gold-hell, #f3cd6e);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
}
@media (hover: hover) and (pointer: fine) { .start-route-gross:hover { background: color-mix(in srgb, var(--akzent) 90%, #000); } html[data-look="dunkel"] .start-route-gross:hover { background: color-mix(in srgb, var(--akzent) 32%, var(--grund)); } }
/* a: grüner Rand + grüne Schrift (dunkel: helles Salbeigrün, 8 : 1 auf dem Samtgrün) */
.start-hero[data-speisekarte="a"] .start-karte { background: transparent; color: var(--haupt); box-shadow: inset 0 0 0 1.5px var(--haupt); }
.start-hero[data-speisekarte="a"] .start-karte:active { background: color-mix(in srgb, var(--haupt) 10%, transparent); }
html[data-look="dunkel"] .start-hero[data-speisekarte="a"] .start-karte { color: #a6d6b8; box-shadow: inset 0 0 0 1.5px #a6d6b8; }
html[data-look="dunkel"] .start-hero[data-speisekarte="a"] .start-karte:active { background: rgba(166, 214, 184, .12); }
/* b: warmes Gold gefüllt (hell: Gold mit dunkler Schrift 9 : 1; dunkel: gedämpftes Gold, damit der Hauptknopf Hauptknopf bleibt) */
.start-hero[data-speisekarte="b"] .start-karte { background: var(--akzent); color: var(--c-schwarz, #1D1D1B); }
.start-hero[data-speisekarte="b"] .start-karte:active { background: color-mix(in srgb, var(--akzent) 85%, #000); }
html[data-look="dunkel"] .start-hero[data-speisekarte="b"] .start-karte {
  background: color-mix(in srgb, var(--akzent) 22%, var(--grund)); color: var(--c-gold-hell, #f3cd6e);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
}
/* c: hell gefüllt mit kleiner Linien-Tasse */
.start-hero[data-speisekarte="c"] .start-karte { background: var(--flaeche); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); padding-left: 16px; }
html[data-look="dunkel"] .start-hero[data-speisekarte="c"] .start-karte { background: rgba(240, 230, 211, .1); }
.start-karte-tasse { width: 28px; height: 28px; flex: none; color: var(--linie); margin-top: -4px; }
html[data-look="dunkel"] .start-karte-tasse { color: var(--akzent); }
@media (max-width: 1023px) {
  .start-hero[data-speisekarte="c"] .start-karte { gap: 5px; padding-left: 12px; padding-right: 16px; }
  .start-karte-tasse { width: 22px; height: 22px; margin-top: -3px; }
}
@media (hover: hover) and (pointer: fine) {
  .start-hero[data-speisekarte="a"] .start-karte:hover { background: color-mix(in srgb, var(--haupt) 8%, transparent); }
  html[data-look="dunkel"] .start-hero[data-speisekarte="a"] .start-karte:hover { background: rgba(166, 214, 184, .1); }
  .start-hero[data-speisekarte="b"] .start-karte:hover { background: color-mix(in srgb, var(--akzent) 90%, #000); }
  .start-hero[data-speisekarte="c"] .start-karte:hover { background: var(--flaeche-tief); }
}

/* ---------- bilderband: große Produktfotos nach den Bowls ---------- */
.start-band { padding-top: calc(var(--abstand-abschnitt) * .72); }
.start-band[hidden] { display: none; }

/* ---------- laden: Ladenfront ganz unten, ruhig und mittig, darunter groß und blass „Bis bald!“ ---------- */
.start-laden { padding: calc(var(--abstand-abschnitt) * .9) var(--rand) 8px; color: var(--linie); }
.start-laden[hidden] { display: none; }
/* Abnahme Z-3 (W9): zwischen „Bis bald!“ und kompakter Fußzeile nur noch wenig Luft (vorher 120 px Computer / 76 px Handy) */
body > footer.fuss, main ~ footer.fuss { margin-top: 32px; }
@media (min-width: 1024px) { body > footer.fuss, main ~ footer.fuss { margin-top: 40px; } }
.laden-bild { width: min(100%, 400px); margin-inline: auto; }
.laden-bild .laden-front { display: block; width: 100%; height: auto; }
.laden-bild .laden-gruss { display: block; width: 78%; height: auto; margin: 6px auto 0; opacity: .55; }
html[data-look="dunkel"] .laden-bild .laden-gruss { opacity: .8; }
@media (min-width: 1024px) {
  .laden-bild { width: min(38%, 480px); }
  .laden-bild .laden-gruss { width: 84%; margin-top: 10px; }
}
/* laden g (Inhaber 06.11.2026): nur der Gruß, ohne Zeichnung – wenig Abstand nach oben, nicht zu groß */
.start-laden[data-laden="g"] { padding-top: 28px; padding-bottom: 8px; }
.start-laden[data-laden="g"] .laden-bild { width: min(64%, 280px); }
.start-laden[data-laden="g"] .laden-bild .laden-gruss { width: 100%; margin: 0 auto; }
@media (min-width: 1024px) { .start-laden[data-laden="g"] .laden-bild { width: min(24%, 320px); } }
/* Inhabers Zeichnung (laden c/d): hochformatig, oben und unten sanft auslaufend; am Computer oben ein Stück abgeschnitten, damit sie nicht zu hoch wird */
.start-laden[data-laden="c"] .laden-bild, .start-laden[data-laden="d"] .laden-bild { width: min(100%, 440px); }
.laden-rahmen { position: relative; }
.laden-rahmen .laden-front { position: static; }
@media (min-width: 1024px) {
  .start-laden:not(.wk-mit)[data-laden="c"] .laden-bild, .start-laden:not(.wk-mit)[data-laden="d"] .laden-bild { width: min(42%, 560px); }
  .start-laden[data-laden="c"] .laden-rahmen, .start-laden[data-laden="d"] .laden-rahmen {
    aspect-ratio: 1459 / 1320; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  }
  .start-laden[data-laden="c"] .laden-rahmen .laden-front, .start-laden[data-laden="d"] .laden-rahmen .laden-front { position: absolute; left: 0; bottom: 0; }
  .start-laden[data-laden="c"] .laden-bild .laden-gruss, .start-laden[data-laden="d"] .laden-bild .laden-gruss { width: 60%; margin-top: 0; }
}

/* ---------- begleiter: kleine Linien-Zeichnung neben einer Überschrift (höchstens eine je Bildschirmhöhe) ---------- */
.mit-begleiter > h2 { display: inline-block; vertical-align: middle; }
.begleiter { display: inline-block; vertical-align: middle; width: 42px; height: 42px; margin: -6px 0 0 10px; color: var(--linie); }
.club-kopf .begleiter { margin: 0 0 0 4px; }
@media (min-width: 1024px) { .begleiter { width: 54px; height: 54px; margin-left: 14px; } }

/* Umriss hinter dem Text (02.11., nach Inhabers Notiz): Schrift im Startbereich bekommt einen weichen Schein in Grundfarbe,
   damit die Wien-Linie um die Buchstaben herum ausspart und alles gut lesbar bleibt. */
.start-hero .start-text h1,
.start-hero .start-satz,
.start-hero .start-info,
.start-hero .start-adresse { text-shadow: 0 0 2px var(--grund), 0 0 5px var(--grund), 0 0 10px var(--grund), 0 0 16px var(--grund); }
/* … aber nicht auf Knöpfen (Route-Pille, Auswahl, Adresse als Knopf): dort würde der Schein die Schrift verschmieren. */
.start-hero .start-adresse a, .start-hero .start-adresse button,
.start-hero .start-route, .start-hero .start-route-liste, .start-hero .start-route-wahl { text-shadow: none; }


/* ============================ 4. Lieblinge + Wegweiser (06.11.2026, Standard; ersetzt die Leisten „Kaffee & Getränke“ und „Kuchen“) ============================ */
#kaffee, #kuchen { display: none; }   /* alte Leisten bleiben im HTML, werden aber nicht mehr ausgegeben */

.lieblinge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.lieblinge .karte-name { font-size: 15px; min-height: 2.4em; }
.lieb .karte-foto--gezeichnet, .lieb .karte-foto--kuchen { aspect-ratio: 1 / .9; }
.lieb .karte-foto--gezeichnet > svg { width: 58%; }
html[data-look="dunkel"] .lieb .karte-foto { width: 96px; height: 96px; aspect-ratio: auto; }
html[data-look="dunkel"] .lieb .karte-foto--kuchen > img { transform: scale(1.1); }

.wegweiser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
/* Handy: flache Kacheln, kleines Bild links, Text rechts (2 Spalten = 3 niedrige Reihen). Ab 700 px wieder Bild oben. */
.wegweiser-kachel {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px 8px 8px;
  border-radius: var(--rund-karte); background: var(--flaeche); color: var(--text); text-decoration: none;
  transition: transform 160ms var(--kurve-druck), background-color 160ms var(--kurve-druck);
}
.wegweiser-kachel:active { transform: scale(.97); background: var(--flaeche-druck); }
.wegweiser-kachel:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wegweiser-bild { width: 52px; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--rund-foto); overflow: hidden; background: var(--flaeche-tief); }
.wegweiser-bild > svg { width: 62%; height: auto; max-height: 86%; aspect-ratio: 1; color: var(--text); }
.wegweiser-bild > img { width: 100%; height: 100%; object-fit: cover; }
/* Sticker-Icon aus bilder/wegweiser/<id>.webp: sobald es geladen ist, ersetzt es das vorläufige Bild; ohne Grund, ganz sichtbar */
.wegweiser-bild.hat-icon { background: none; overflow: visible; }
.wegweiser-bild.hat-icon > :not(.wegweiser-icon) { display: none; }
.wegweiser-bild > img.wegweiser-icon { width: 100%; height: 100%; object-fit: contain; }
.wegweiser-text { display: grid; gap: 2px; min-width: 0; align-content: center; }
.wegweiser-name { font: 700 15px/1.15 var(--schrift); letter-spacing: -0.01em; }
.wegweiser-zahl { font-size: 12.5px; line-height: 1.25; color: var(--text-neben); font-variant-numeric: tabular-nums; }
html[data-look="dunkel"] .wegweiser-name { font-family: var(--schrift-titel); font-weight: 400; font-size: 20px; }
html[data-look="dunkel"] .wegweiser-bild { background: var(--c-schwarz); }
@media (min-width: 700px) {
  .lieblinge { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .wegweiser { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .wegweiser-kachel { grid-template-columns: none; grid-template-rows: auto 1fr; align-items: stretch; gap: 10px; padding: 8px 8px 14px; }
  .wegweiser-bild { width: auto; aspect-ratio: 1 / .62; }
  .wegweiser-bild > svg { width: 38%; }
  .wegweiser-bild.hat-icon { position: relative; min-width: 0; }
  .wegweiser-bild.hat-icon > img.wegweiser-icon { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); width: auto; height: 88%; aspect-ratio: 1; }
  .wegweiser-text { margin: 0 6px; align-content: start; gap: 3px; }
  .wegweiser-name { font-size: 17px; }
  .wegweiser-zahl { font-size: 13px; }
}
@media (min-width: 1024px) {
  .lieblinge { margin-top: 32px; gap: 20px; }
  .lieblinge .karte-name { font-size: 17px; }
  .wegweiser { margin-top: 32px; gap: 20px; }
  .wegweiser-bild { aspect-ratio: 1 / .5; }
  .wegweiser-name { font-size: 19px; }
  .wegweiser-zahl { font-size: 14.5px; }
}
@media (hover: hover) { .wegweiser-kachel:hover { background: var(--flaeche-druck); } }
.wegweiser-ab { white-space: nowrap; }


/* ===== MiniClub „kommt bald“ (Schalter: gemeinsam/seite.js, MINICLUB_BALD → html[data-miniclub="bald"]) ===== */
.club-bald, .club-knoepfe--bald { display: none; }
html[data-miniclub="bald"] .club-text--offen, html[data-miniclub="bald"] .club-knoepfe--offen { display: none; }
html[data-miniclub="bald"] .club-bald { display: grid; gap: 14px; justify-items: start; }
html[data-miniclub="bald"] .club-knoepfe--bald { display: grid; grid-template-columns: minmax(0, 264px); gap: 12px; margin-top: 10px; }
html[data-miniclub="bald"] .club-knoepfe--bald .knopf { min-height: 50px; padding-inline: 22px; }
html[data-miniclub="bald"] .club-bald p { font-size: var(--gr-text); line-height: 1.45; }
.club-siegel {
  display: grid; justify-items: center; gap: 4px; padding: 8px 16px 9px; border-radius: 12px; rotate: -5deg; white-space: nowrap;
  color: var(--akzent); text-transform: uppercase; text-align: center;
  box-shadow: inset 0 0 0 2.5px var(--akzent), inset 0 0 0 5px transparent, inset 0 0 0 6.5px var(--akzent);
}
.club-siegel-gross { font: 900 24px/1 var(--schrift-titel); letter-spacing: .06em; }
.club-siegel-klein { font: 700 10.5px/1 var(--schrift); letter-spacing: .24em; opacity: .9; }
@media (min-width: 1024px) {
  html[data-miniclub="bald"] .club-bald { grid-area: text; align-self: start; max-width: 44em; gap: 18px; padding-top: 12px; }
  html[data-miniclub="bald"] .club-bald p { font-size: 18px; }
}