/* ============================================================
   Restaurant Olympia Zeuthen
   Implementation of "Olympia Seeblick v2" (Claude Design)
   Desktop values are exact to the artboard (>=1440px);
   everything below that scales down fluidly.
   ============================================================ */

/* ----------------------------- Tokens ----------------------------- */
:root {
  /* Palette - die Seite steht auf hellem Grund. Die dunklen Bahnen sind
     Einschuebe: Speisekarte, Feiern und der Fussbereich. */
  --ground:        #F4EDDE;
  --ground-rgb:    244, 237, 222;
  --ground-2:      #FFFDF6;   /* Karten auf hellem Grund */
  --on-ground:     #191713;
  --on-ground-mut: #6B6155;

  --inset-bg:      #191713;   /* dunkler Einschub */
  --inset-rgb:     25, 23, 19;
  --inset-2:       #221E19;
  --on-inset:      #F4EDDE;
  --on-inset-mut:  #A39A8C;

  /* Rot der Stahlpergola, zwei Werte fuer die beiden Gruende */
  --accent:        #7E1F2E;   /* auf Hell */
  --accent-hover:  #9A2A3C;
  --accent-light:  #BC3A4A;   /* auf Dunkel: dasselbe Weinrot, nur so weit aufgehellt, dass es auf Schwarz noch traegt */

  --blue:          #24557E;
  --open:          #3E9E5C;
  --closed:        #C0432F;

  /* Altbezeichner, damit bestehende Regeln weiterlaufen */
  --cream:        var(--ground);
  --cream-card:   var(--ground-2);
  --cream-light:  var(--on-inset);
  --ink:          var(--on-ground);
  --wine:         var(--accent);
  --wine-hover:   var(--accent-hover);
  --muted:        var(--on-ground-mut);
  --muted-body:   var(--on-ground-mut);
  --muted-dark:   var(--on-inset-mut);
  --on-wine:      #FFF6E9;
  --footer-text:  var(--on-inset);
  --tab-idle:     #C9C2B6;
  --surface-dark:     var(--inset-bg);
  --surface-dark-rgb: var(--inset-rgb);
  --surface-dark-2:   #2C2822;
  --accent-dark:      var(--on-inset);
  --accent-dark-ink:  var(--inset-bg);
  --muted-on-dark:    var(--on-inset-mut);
  --light:        var(--ground);
  --light-2:      var(--ground-2);
  --on-light:     var(--on-ground);
  --on-light-mut: var(--on-ground-mut);
  --accent-deep:  var(--accent);

  --font-sans:  'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Fraunces hat eine optische Groessenachse - nur fuer Display ab ~28px.
     Alles Kleinere laeuft ueber den Sans, sonst brechen die Haarlinien weg. */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Harte Kante als Grundform. Die Pille bleibt nur dort, wo sie etwas
     bedeutet: Status, Kategorie, Schlagwort. */
  --radius: 2px;
  --radius-pill: 999px;

  --maxw: 1720px;
  --pad: max(48px, env(safe-area-inset-left), env(safe-area-inset-right));   /* horizontal gutter, quer am iPhone nicht unter der Kamera-Aussparung */
  --section-y: 96px;     /* vertical rhythm between sections */

  --shadow-card:       0 10px 30px rgba(60, 30, 20, .12);
  --shadow-card-hover: 0 22px 50px rgba(60, 30, 20, .22);
  --shadow-soft:       0 6px 20px rgba(60, 30, 20, .1);
  --ease: cubic-bezier(.4, .14, .3, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  font-family: var(--font-sans);
  color: var(--on-ground);
  overflow-x: hidden;
}

h1, h2, h3, p, figure, address, ul { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; transition: color .18s var(--ease), border-color .18s var(--ease); }
/* Antippen auf dem Handy: leichter Weinrot-Schimmer statt grauem Kasten. */
a, button { -webkit-tap-highlight-color: rgba(126, 31, 46, .12); }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible,
.menu :focus-visible,
.site-footer :focus-visible,
.quick-actions :focus-visible { outline-color: var(--accent-dark); }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--cream-light); color: var(--ink);
  padding: 12px 20px; border-radius: var(--radius);
  font: 700 15px var(--font-sans);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--ink); }

.muted { opacity: .6; }

/* ---------------------------- Buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius);
  font: 700 15px var(--font-sans);
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.btn--lg { padding: 18px 34px; font: 800 16px var(--font-sans); }

.btn--phone { background: var(--accent); color: var(--on-wine); padding: 13px 24px; }
.btn--phone:hover { background: var(--accent-hover); color: var(--on-wine); }
.btn--lg.btn--phone { padding: 18px 34px; }

.btn--cream { background: var(--ground); color: var(--on-ground); }
.btn--cream:hover { background: #FFFFFF; color: var(--accent); }

.btn--outline {
  /* Farbe explizit pro Grund setzen - currentColor erbt sonst das dunkle
     Weinrot der Links und wird auf dunklem Grund unlesbar. */
  color: var(--on-ground); border: 1.5px solid currentColor;
  padding: 12px 20px; border-radius: var(--radius);
  font: 700 14px var(--font-sans);
}
.btn--outline:hover { background: var(--on-ground); color: var(--ground); }
.inset .btn--outline { color: var(--on-inset); }
.inset .btn--outline:hover { background: var(--on-inset); color: var(--inset-bg); }

.link-underline {
  font: 700 15px var(--font-sans);
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  white-space: nowrap;
}
.link-underline:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

.eyebrow {
  /* Klein und leise: das Label soll die Ueberschrift ankuendigen, nicht
     mit ihr konkurrieren. Der Groessensprung macht die Hierarchie. */
  font: 600 11px var(--font-sans);
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow--blue { color: var(--blue); }
.eyebrow--onDark { color: var(--on-light-mut); margin-bottom: 10px; }

/* ==================== Dunkle Einschuebe ====================
   Speisekarte und Feiern sitzen als randlose dunkle Bahnen im hellen
   Fluss - gleiche Polsterung, gleiche Breite, kein Sonderweg. */
.inset {
  background: var(--inset-bg); color: var(--on-inset);
  padding: clamp(64px, 7vw, 104px) var(--pad);
  margin: 0;
}
/* Innenkanten aller Bahnen liegen auf derselben Linie wie .section:
   1440 abzueglich der Seitenpolsterung. */
.inset__inner { max-width: calc(var(--maxw) - 2 * var(--pad)); }
.inset__inner { margin: 0 auto; }
.inset .eyebrow--blue,
.inset .eyebrow--onDark { color: var(--on-inset-mut); }
.inset .section__title,
.inset h2, .inset h3 { color: var(--on-inset); }
.inset .section__title em { color: var(--accent-light); }
.inset p { color: rgba(244, 237, 222, .8); }
.inset :focus-visible { outline-color: var(--on-inset); }
.inset .link-underline { color: var(--on-inset); border-color: var(--accent-light); }
.inset .link-underline:hover { color: var(--on-inset); border-color: var(--on-inset); }
.inset .btn--phone { background: var(--accent); color: var(--on-wine); }
.inset .btn--phone:hover { background: var(--accent-hover); }

/* ---------------------------- Sections ---------------------------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--pad) 0;
}
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 40px;
}
/* Ruhiger als frueher: 68 px waren Plakat, 52 px sind Buch. Kein
   Wechsel von Farbe oder Schnitt innerhalb der Ueberschrift. */
.section__title {
  font: 400 clamp(32px, 3.5vw, 52px) var(--font-serif);
  line-height: 1.08; letter-spacing: -.005em; text-wrap: balance;
}

.inset + .section--voices .voices { border-top: 0; }

/* =========================== Navigation ===========================
   Feste, deckende Leiste - kein Verlauf, kein Glas, kein Schrumpfen beim
   Scrollen. Sie ist Rahmen, nicht Effekt. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  background: var(--inset-bg);
  border-bottom: 1px solid rgba(244, 237, 222, .12);
}
.brand { display: flex; align-items: center; gap: 16px; }
/* The logo artwork is white on transparency, so on the dark header and footer it
   reads on its own - no cream chip needed. */
.brand__mark { display: inline-flex; }
.brand__mark img { height: 60px; width: auto; display: block; }
.brand__mark--lg img { height: 68px; }


.site-nav { display: flex; gap: 34px; font: 600 16.5px var(--font-sans); }
.header__phone { padding: 15px 28px; font-size: 16px; }
.site-nav a { color: var(--cream-light); }
.site-nav a:hover { color: var(--cream-light); text-decoration: underline;
  text-underline-offset: 7px; text-decoration-thickness: 1px; }

.nav-toggle {
  display: none;
  width: 52px; height: 52px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(248, 242, 226, .3);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle__bars i {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--cream-light); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .16s var(--ease);
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6px; }
.nav-toggle__bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================== Hero ==============================
   Bild und Text sind getrennt: das Foto steht ohne Schleier, ohne Zoom,
   ohne Schatten. Der Text sitzt auf einer Platte aus dem Seitengrund, die
   unten links ins Bild ragt - Schrift auf Flaeche statt Schrift auf Foto. */
.hero { position: relative; background: var(--ground); --kopf: 101px; }
.hero__media {
  position: relative; overflow: hidden;
  /* Bild, Ueberschrift, Text und Knopf sollen beim Ankommen ohne Scrollen
     sichtbar sein: Fensterhoehe minus Kopfleiste minus dem Teil der
     Platte, der unter dem Bild herausragt. */
  height: clamp(560px, calc(100vh - var(--kopf) - 84px), 900px);
  height: clamp(560px, calc(100svh - var(--kopf) - 84px), 900px);
  /* Winziges unscharfes Standbild, direkt eingebettet: fuellt den Platz
     sofort, auch bei schwachem Netz. */
  background: var(--surface-dark) url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAeACgDASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAABAUAAgYDB//EACUQAAIBAwMEAgMAAAAAAAAAAAECAwAEEQUSIRMxQVEGFBUyYf/EABkBAAIDAQAAAAAAAAAAAAAAAAECAAMEBf/EAB0RAAEEAgMAAAAAAAAAAAAAAAEAAgMRBCESMVH/2gAMAwEAAhEDEQA/AM9pOnW8Mm65Ukj1T9Y1lOIf18ClelyNG2eGUdwaOt7tfsM23aPGKeDLbENhGfHdLolMYLCQtkg0P8hsna2RUQnnk0ba6m0R2soYHtRF7fmW2ZOjjcODTz5bpGltKiPFDHXa89uLZlYhV7dzUrWSaeFsSxQFjUrlh58WsxD1ZZRPE5iCtz5rosdzDIMtx6zTq4JeF3XCkfys/O7256rOXJ7Z8Vo07pWDXaZLdywzr1zsT3XWTWPsyFI2LKvY1SWxN7pySs+CRmq2VpHEAqjnHJqWW6KPEONhFfkpJounGrbl7ipSW51GXTblzFg591KHG0pAtf/Z") center/cover no-repeat;
}
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 55%; display: block;
}
/* Die Platte sitzt als Ausschnitt in der unteren linken Ecke des Bildes,
   buendig mit dessen Unterkante - nicht halb drin, halb drunter. */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end; pointer-events: none;
}
.hero__plate {
  pointer-events: auto;
  /* Schmaler als der halbe Schirm: die Aufnahme bleibt die Hauptsache,
     die Platte ist der ruhige Block darin. */
  --rand: max(0px, (100% - var(--maxw)) / 2);
  max-width: min(calc(700px + var(--rand)), 46%);
  background: var(--ground); color: var(--on-ground);
  padding: 40px clamp(32px, 4vw, 64px) 36px calc(var(--pad) + var(--rand));
}
.hero__body { position: relative; max-width: var(--maxw); margin: 0 auto; padding-bottom: var(--section-y); }
.hero__title {
  font: 400 clamp(36px, 4.6vw, 76px) / 1.02 var(--font-serif);
  text-wrap: balance;
  letter-spacing: -.005em; margin: 0 0 22px;
}
.hero__lead {
  font: 500 clamp(16px, 1.3vw, 19px) / 1.6 var(--font-sans);
  color: var(--on-ground-mut); max-width: 46ch; margin: 0 0 30px; text-wrap: pretty;
}
.hero__actions { display: flex; align-items: center; gap: 12px 30px; flex-wrap: wrap; }
/* Eine Zeile, vier Zeichen: Uhr, Ort, Anker, Gaeste. Duenner Strich in
   Weinrot, Text daneben - klein und ruhig, kein Kasten. */
/* Vier Angaben in gleich breiten Feldern, zweizeilig: oben die Sache in
   der Serife, darunter das Detail. Nur Desktop und Tablet - auf dem Handy
   steht das alles in der Leiste unten und im Fuss. */
.hero__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--pad); padding: 0;
  border-top: 1px solid rgba(25, 23, 19, .16);
}
.hero__facts li { display: flex; }
.hero__facts li + li { border-left: 1px solid rgba(25, 23, 19, .12); }
/* Jedes Feld mittig in seiner Spalte: Zeichen und Text als eine Einheit. */
.hero__facts li { justify-content: center; }
.hero__facts li:first-child, .hero__facts a {
  display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%;
  padding: 18px 16px; color: inherit;
}
.hero__facts svg {
  width: 30px; height: 30px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.hero__facts span { display: flex; flex-direction: column; gap: 2px; font: 500 14px / 1.35 var(--font-sans); color: var(--on-ground-mut); }
.hero__facts b { font: 400 19px / 1.2 var(--font-serif); color: var(--on-ground); }
.hero__facts a:hover b { color: var(--accent); }
/* Karte mit Pinnadel: das Restaurant sitzt genau in der Bildmitte, die
   Nadel steht mit der Spitze darauf. Kantig, Haarlinie, kein Schatten. */
.boat__karte {
  position: relative; display: block; margin: 30px 0 0; max-width: 720px;
  color: inherit; border: 1px solid rgba(25, 23, 19, .16); border-radius: var(--radius);
  overflow: hidden; background: var(--ground-2);
}
.boat__karte-bild { position: relative; display: block; }
.boat__karte img { display: block; width: 100%; height: auto; }
.boat__pin {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 47px;
  transform: translate(-50%, -100%);   /* Spitze genau auf der Bildmitte */
  fill: var(--accent);
}
.boat__pin circle { fill: var(--ground); }
.boat__karte-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px 15px; border-top: 1px solid rgba(25, 23, 19, .16);
  font: 600 14.5px var(--font-sans); color: var(--on-ground);
}
.boat__karte-zeile span { color: var(--accent); }
.boat__karte:hover .boat__karte-zeile span { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.boat__karte-quelle { margin: 8px 0 0; font: 500 11.5px var(--font-sans); color: var(--on-ground-mut); opacity: .8; }

/* Offen/geschlossen: eine Zeile Text mit Punkt - keine Pille. */
.status-badge {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px;
  font: 600 14px var(--font-sans); color: var(--on-ground); letter-spacing: .01em;
}
.status-badge[hidden] { display: none; }
.status-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--open); flex: none; }
.status-badge[data-open="false"] .status-badge__dot { background: var(--on-ground-mut); opacity: .5; }

/* ============================ Fotoband ============================ */

/* ==================== Klassiker (in der Speisekarte) ====================
   Vier Bilder mit Unterschrift auf dem dunklen Grund - keine Kaesten. */
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 0; }
.pick { display: flex; flex-direction: column; }
.pick__media { position: relative; }
.pick__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--radius); }
/* Nummer als aufgedrucktes Etikett in der Ecke - deckend, kantig. */
/* Helles Etikett: die Karten stehen in der dunklen Bahn, ein dunkler
   Kasten waere dort unsichtbar und riss ein Loch ins Bild. */
.pick__nr {
  display: block; margin: 0 0 3px;
  font: 600 12px var(--font-sans); color: var(--on-inset-mut);
}
.pick__body { padding: 12px 0 0; display: flex; flex-direction: column; flex: 1; }
.pick__name {
  font: 400 clamp(19px, 1.4vw, 21px) / 1.15 var(--font-serif);
  margin-bottom: 4px; text-wrap: balance;
}
.pick__desc {
  font: 400 13.5px / 1.5 var(--font-sans); color: var(--on-inset-mut);
  margin-bottom: 8px; flex: 1;
}
/* Doppelt benannt, damit ".inset p" den Preis nicht ausgraut. */
.pick__price, .inset .pick__price { font: 700 17px var(--font-sans); color: var(--accent-light); letter-spacing: -.01em; }

/* =========================== Speisekarte =========================== */

.menu { display: block; }
/* Kompakter als die anderen Bahnen: die Karte soll auf dem Laptop in
   einen Bildschirm passen. */
.section--menu.inset { padding-top: clamp(56px, 5vw, 76px); padding-bottom: clamp(56px, 5vw, 72px); }
.menu__sub {
  font: 400 clamp(19px, 1.5vw, 22px) / 1.2 var(--font-serif);
  margin: 0 0 16px;
}
.menu__sub--karte {
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(244, 237, 222, .18);
}
.menu__main { padding: 0; color: var(--on-inset); min-width: 0; }
.menu__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.menu__title { font: 400 clamp(32px, 3.5vw, 52px) / 1.05 var(--font-serif); }
.menu__pdf { flex-direction: column; gap: 3px; padding: 14px 22px; }
.menu__pdf-info { font: 400 12px var(--font-sans); opacity: .62; }

/* Schalter fuer die vollstaendige Liste - nur auf schmalen Schirmen. */
.menu__aufklappen {
  display: block; width: 100%; margin: 4px 0 0;
  background: transparent; border: 0; border-top: 1px solid rgba(244, 237, 222, .16);
  padding: 18px 0; cursor: pointer; text-align: left;
  font: 600 14.5px var(--font-sans); color: var(--on-inset);
}
.menu__aufklappen::after { content: " \2193"; color: var(--accent-light); }
.menu__aufklappen[aria-expanded="true"]::after { content: " \2191"; }
.menu__aufklappen[hidden] { display: none; }
.menu__tabs[hidden] { display: none; }
.menu__aufklappen:hover { color: var(--on-inset); }

/* Reiter als Textzeile mit Unterstrich - wie Rubriken in einer gedruckten
   Karte, nicht wie Filter-Pillen. */
.menu__tabs {
  display: flex; gap: 0 26px; flex-wrap: wrap;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(244, 237, 222, .18);
}
.menu__tab {
  background: transparent; color: var(--tab-idle);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 0 11px; border-radius: 0;
  font: 700 14px var(--font-sans);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.menu__tab:hover { color: var(--on-inset); }
.menu__tab[aria-selected="true"] { color: var(--on-inset); border-bottom-color: var(--on-inset); }

.menu__items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 44px; }
.menu__items:focus-visible { outline-offset: 6px; }
.dish {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(244, 237, 222, .22);
}
/* Die Nummernspalte traegt den Rhythmus der Karte - dafuer muss sie
   sichtbar sein, nicht weggeduckt. */
.dish__nr {
  font: 600 14px var(--font-sans); color: var(--accent-light);
  min-width: 40px; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.dish__text { flex: 1; min-width: 0; }
.dish__name { font: 600 16px var(--font-sans); letter-spacing: .005em; }
.dish__desc { font: 500 13px / 1.5 var(--font-sans); color: var(--on-inset-mut); }
.dish__price { font: 700 15px var(--font-sans); color: var(--on-inset); white-space: nowrap; }
.menu__note { font: 500 12.5px var(--font-sans); color: var(--on-inset-mut); margin-top: 14px; }


/* ============================ Bootssteg ============================
   Dasselbe Motiv wie der Hero, gespiegelt: Foto, Platte von rechts. */
.boat { position: relative; background: var(--ground); padding-top: var(--section-y); }
.boat__media { height: clamp(340px, 44vw, 620px); overflow: hidden; }
.boat__media img, .boat__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
/* Zwei Spalten unter dem Bild: links der Beleg eines Gastes, rechts die
   Erklaerung. Der freie Grund ist damit belegt, nicht dekoriert. */
.boat__body {
  position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad) var(--section-y);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px clamp(48px, 6vw, 110px); align-items: start;
}
/* Das Zitat traegt den Abschnitt: ein Gast bestaetigt genau das, was
   danebensteht. Gross in der Serife, mit Haarlinie darueber. */
/* Anfahrt: drei Zeilen wie die Raumliste, unter dem Gaestezitat. */
.anfahrt { margin: 48px 0 0; border-bottom: 1px solid rgba(25, 23, 19, .14); }
.anfahrt div {
  display: grid; grid-template-columns: minmax(150px, 12rem) 1fr; gap: 4px 24px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid rgba(25, 23, 19, .14);
}
.anfahrt dt { font: 400 clamp(21px, 1.7vw, 26px) / 1.2 var(--font-serif); color: var(--on-ground); }
.anfahrt dd { margin: 0; font: 500 15.5px / 1.5 var(--font-sans); color: var(--on-ground-mut); }
.boat__beleg {
  margin: 64px 0 0; padding-top: 34px;
  border-top: 2px solid var(--accent);
}
.boat__beleg blockquote::before { content: "\201E"; }
.boat__beleg blockquote::after  { content: "\201C"; }
.boat__beleg blockquote {
  margin: 0 0 18px;
  font: 400 clamp(25px, 2.4vw, 38px) / 1.3 var(--font-serif);
  color: var(--on-ground); text-wrap: pretty;
}
.boat__beleg figcaption { font: 600 14.5px var(--font-sans); color: var(--on-ground); }
.boat__beleg figcaption { display: flex; align-items: center; gap: 10px; }
.boat__beleg figcaption span:not(.sterne) { color: var(--on-ground-mut); font-weight: 400; }

.boat__plate {
  position: relative; z-index: 1; margin-top: -150px;
  --rand: max(0px, (100vw - var(--maxw)) / 2);
  margin-right: calc(-1 * (var(--pad) + var(--rand)));
  background: var(--ground); padding: 40px calc(var(--pad) + var(--rand)) 0 clamp(32px, 4vw, 64px);
}
.boat__title { margin: 0 0 22px; }
.boat__title em { color: var(--accent); }
.boat__lead {
  font: 500 17px / 1.7 var(--font-sans); color: var(--on-ground-mut);
  margin: 0 0 24px; max-width: 54ch; text-wrap: pretty;
}
.boat__quote { margin: 0; border-left: 2px solid var(--accent); padding-left: 18px; }
.boat__quote p { font: 400 clamp(19px, 1.5vw, 22px) / 1.4 var(--font-serif); font-style: italic; margin: 0 0 6px; }
.boat__quote footer { font: 600 13.5px var(--font-sans); color: var(--on-ground-mut); }

/* ============================= Feiern ============================= */
/* Feiern: das Bild laeuft links randlos bis an den Bildschirmrand und
   so hoch wie der Text; rechts Anlaesse, Text, zwei Zahlen, Knopf. */
.feiern {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ground); border-top: 1px solid rgba(25, 23, 19, .14);
}
.feiern__bild { position: relative; min-height: 560px; background: var(--inset-bg); }
.feiern__bild img, .feiern__bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.feiern__text {
  padding: clamp(56px, 6vw, 96px) max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) clamp(56px, 6vw, 96px) clamp(40px, 5vw, 88px);
  max-width: calc(var(--maxw) / 2 + 40px);
}
.feiern .section__title { margin: 0 0 18px; }
.feiern__anlaesse { font: 400 clamp(19px, 1.6vw, 23px) / 1.5 var(--font-serif); color: var(--on-ground); margin: 0 0 20px; }
.feiern__anlaesse i { font-style: normal; color: var(--accent); margin: 0 .15em; }
.feiern__lead { font: 500 16.5px / 1.7 var(--font-sans); color: var(--on-ground-mut); max-width: 50ch; margin: 0 0 30px; }
.feiern__zahlen { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 34px; border-top: 1px solid rgba(25, 23, 19, .14); }
.feiern__zahlen div { padding: 18px 20px 0 0; }
.feiern__zahlen div + div { padding-left: 24px; border-left: 1px solid rgba(25, 23, 19, .14); }
.feiern__zahlen dt { font: 400 clamp(52px, 5vw, 76px) / 1 var(--font-serif); color: var(--accent); letter-spacing: -.02em; }
.feiern__zahlen dd { margin: 6px 0 0; font: 500 14.5px / 1.4 var(--font-sans); color: var(--on-ground-mut); }
.feiern__aktion { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ============================ Ambiente ============================
   Linksbuendig wie der Rest der Seite: Ueberschrift ueber die volle
   Breite, darunter Text links und die vier Fakten als Tafel rechts. */
.ambience {
  display: grid; text-align: left;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "titel bilder" "lead bilder" "raeume bilder" "links bilder";
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(48px, 7vw, 120px);
}
.ambience__title { grid-area: titel; margin: 0 0 26px; }
.ambience__title em { color: var(--accent); }
.ambience__lead {
  grid-area: lead;
  font: 500 17px / 1.7 var(--font-sans); color: var(--muted-body);
  margin: 0 0 40px; max-width: 46ch; text-wrap: pretty;
}
/* Grosses Bild rechts, drei Raeume links. Der aktive Raum ist weinrot,
   ein Strich darunter laeuft in fuenf Sekunden durch - dann kommt der naechste. */
.raumbild {
  grid-area: bilder; position: relative; overflow: hidden;
  aspect-ratio: 5 / 4; width: 100%; align-self: start;
  justify-self: end; background: var(--inset-bg); border-radius: var(--radius);
}
.raumbild__bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03);
  transition: opacity .8s var(--ease), transform 6s linear;
}
.raumbild__bild.is-aktiv { opacity: 1; transform: scale(1); }
.ambience__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 30px; align-self: start; }
.raeume { grid-area: raeume; margin: 0; border-bottom: 1px solid rgba(25, 23, 19, .14); }
.raum {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px;
  width: 100%; padding: 20px 0 22px; background: none; border: 0; border-top: 1px solid rgba(25, 23, 19, .14);
  text-align: left; cursor: pointer; color: var(--on-ground);
}
.raum__name { font: 400 clamp(26px, 2.4vw, 36px) / 1.1 var(--font-serif); transition: color .25s var(--ease); }
.raum__text { font: 500 15px / 1.4 var(--font-sans); color: var(--on-ground-mut); text-align: right; }
.raum.is-aktiv .raum__name, .raum:hover .raum__name { color: var(--accent); }
.raum::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent);
}
.raum.is-aktiv::after { width: 100%; transition: none; }
.raeume.laeuft .raum.is-aktiv::after { animation: raum-zeit 5s linear forwards; }
@keyframes raum-zeit { from { width: 0; } to { width: 100%; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.fact { padding: 18px 20px 20px 0; border-bottom: 1px solid rgba(25, 23, 19, .15); }
.fact:nth-child(-n+2) { padding-top: 6px; }
.fact:nth-child(odd) { border-right: 1px solid rgba(25, 23, 19, .15); }
.fact:nth-child(even) { padding-left: 24px; padding-right: 0; }
.fact:nth-last-child(-n+2) { border-bottom: 0; }
.fact a { color: inherit; display: block; }
.fact a:hover .fact__big { color: var(--accent-hover); }
.fact a:hover .fact__small { color: var(--muted-body); }
.fact__big {
  display: block; margin-bottom: 6px;
  font: 400 clamp(28px, 2.5vw, 38px) / 1.05 var(--font-serif); color: var(--accent);
}
.fact__small { display: block; font: 500 14px / 1.45 var(--font-sans); color: var(--muted); }

/* ========================= Abends am See =========================
   Dunkle Bahn, links Titel und Knopf, rechts die zwei Hochkant-Videos
   gleich gross nebeneinander. */
.abend__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 1.4vw, 22px); align-items: end;
}
.abend__text { align-self: start; display: flex; flex-direction: column; padding-right: clamp(8px, 3vw, 48px); }
.abend .section__title { margin: 0 0 24px; }
.abend__lead { font: 500 17px / 1.7 var(--font-sans); margin: 0 0 32px; max-width: 34ch; text-wrap: pretty; }
.abend__text .btn { align-self: flex-start; }
.abend__clip { margin: 0; background: var(--inset-2); border-radius: var(--radius); overflow: hidden; }
.abend__clip video { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }

/* =========================== Gästestimmen ===========================
   Dunkel gesetzt: bricht die lange helle Strecke auf und gibt den Zitaten
   Gewicht. Gesamtnote steht bewusst daneben - ausgewaehlte Lobzitate ohne
   echten Durchschnitt waeren ein schiefes Bild. */
.section--voices { max-width: none; padding: 0; margin: 0; }
.voices {
  color: var(--on-ground);
  padding: 76px var(--pad) 40px;
  border-top: 1px solid rgba(25, 23, 19, .14);
}
.voices__kopf {
  max-width: calc(var(--maxw) - 2 * var(--pad)); margin: 0 auto;
  display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap;
}
.voices__info { display: flex; flex-direction: column; gap: 6px; }
.voices__alle { margin-left: auto; }
.voices__title { font: 400 clamp(56px, 5.8vw, 84px) / .92 var(--font-serif); margin: 0; letter-spacing: -.02em; color: var(--accent); }
.voices__title span { font-size: .34em; letter-spacing: 0; color: var(--on-ground-mut); }

/* ---- Sterne: fuenf Umrisse, darueber fuenf gefuellte, auf 86 % maskiert
        (4,3 von 5). Dieselbe Form auch klein bei jeder Stimme. ---- */
.sterne { display: inline-flex; gap: 4px; vertical-align: middle; line-height: 0; }
.sterne svg { width: 24px; height: 24px; flex: none; fill: var(--accent); }
.voices__sterne { position: relative; display: inline-block; margin: 0 0 12px; line-height: 0; }
.voices__sterne .sterne--leer svg { fill: none; stroke: var(--accent); stroke-width: 1.3; }
/* Die gefuellte Reihe liegt pixelgenau ueber der Umrissreihe und wird bei
   86 Prozent abgeschnitten - 4,3 von 5. Beide Reihen haben dieselbe Breite,
   deshalb duerfen die Sterne der oberen nicht schrumpfen: flex-none. */
.voices__sterne .sterne--voll {
  position: absolute; left: 0; top: 0; overflow: hidden;
  width: 87.6%; flex-wrap: nowrap;   /* (4 x 28 + 0,3 x 24) / 136 */
}
.sterne--klein svg { width: 15px; height: 15px; }
.sterne--klein { gap: 2px; }

.voices__meta { font: 500 14.5px var(--font-sans); color: var(--on-ground-mut); margin: 0; }
.voices__sterne { margin: 0; align-self: flex-start; width: max-content; }

/* ---- Das Band: echte Google-Stimmen laufen von rechts nach links. ---- */
.stimmenband { overflow: hidden; padding: 0 0 76px; }
.stimmenband__spur {
  display: flex; gap: 20px; width: max-content; margin: 0; padding: 0 0 0 20px;
  animation: stimmen-lauf 90s linear infinite;
}
.stimmenband:not(.is-onscreen) .stimmenband__spur { animation-play-state: paused; }
@keyframes stimmen-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stimme {
  flex: none; width: 360px; display: flex; flex-direction: column;
  background: var(--ground-2); border: 1px solid rgba(25, 23, 19, .1); border-radius: var(--radius);
  padding: 24px 26px 22px;
}
.stimme__sterne { line-height: 0; margin: 0 0 14px; }
.stimme__text { margin: 0 0 18px; font: 400 18px / 1.45 var(--font-serif); color: var(--on-ground); text-wrap: pretty; }
.stimme__text::before { content: "\201E"; }
.stimme__text::after { content: "\201C"; }
.stimme__name { margin-top: auto; font: 600 14px var(--font-sans); color: var(--on-ground); display: flex; gap: 8px; align-items: baseline; }
.stimme__name span { font-weight: 400; font-size: 13px; color: var(--on-ground-mut); }

/* ============================ Galerie ============================ */
.section--gallery .section__head { margin-bottom: 36px; }
/* Die Galerie ist jetzt eine dunkle Bahn - .inset traegt Grund und Polsterung. */
.section--gallery.inset { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(210px, 17vw, 300px); gap: 16px; grid-auto-flow: dense; }
.gallery__item { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.gallery__item--hero { grid-column: span 2; grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--alt { object-position: 50% 62%; }

/* ============================ Reservieren ============================
   Links Titel, Satz, die Nummer gross und die Stegzeichnung; rechts das
   Online-Formular von DISH in einer ruhigen Flaeche. */
.reservieren { padding-bottom: var(--section-y); }
.reservieren__inner {
  max-width: calc(var(--maxw) - 2 * var(--pad)); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px clamp(48px, 6vw, 110px);
  align-items: start;
}
.reservieren__text { display: flex; flex-direction: column; align-items: flex-start; }
.reservieren__titel { font: 400 clamp(32px, 3.5vw, 52px) / 1.08 var(--font-serif); margin: 0 0 18px; }
.reservieren__lead { font: 500 17px / 1.7 var(--font-sans); color: var(--on-ground-mut); max-width: 40ch; margin: 0 0 30px; }
.reservieren__nummer {
  display: inline-block; white-space: nowrap; font: 400 clamp(40px, 4.6vw, 72px) / 1 var(--font-serif);
  letter-spacing: -.02em; color: var(--accent); margin: 0 0 10px;
}
.reservieren__nummer:hover { color: var(--accent-hover); }
.reservieren__info { font: 500 15.5px / 1.6 var(--font-sans); color: var(--on-ground-mut); }
.reservieren__grafik { width: 100%; max-width: 460px; height: auto; opacity: .55; margin-top: 44px; }
/* Das Formular: DISH-iframe auf derselben hellen Flaeche wie die Karten. */
.reservieren__formular { min-width: 0; }
.buchung {
  background: var(--ground-2); border: 1px solid rgba(25, 23, 19, .14); border-radius: var(--radius);
  min-height: 540px;
}
.buchung iframe { display: block; width: 100%; height: 540px; border: 0; }
.buchung__platzhalter {
  display: flex; align-items: center; justify-content: center; height: 540px; margin: 0;
  font: 500 14px var(--font-sans); color: var(--on-ground-mut);
}
.buchung__alternativ { margin: 12px 0 0; font: 500 13px var(--font-sans); }
.buchung__alternativ a { color: var(--on-ground-mut); text-decoration: underline; text-underline-offset: 3px; }
.buchung__alternativ a:hover { color: var(--accent); }
.nur-mobil { display: none; }
.zusammen { white-space: nowrap; }

/* ============================== Footer ============================== */
.site-footer {
  background: var(--inset-bg); color: var(--on-inset);
  padding: 72px var(--pad) 56px;
}
.site-footer__inner {
  max-width: calc(var(--maxw) - 2 * var(--pad)); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px;
}
.site-footer__brand p { font: 500 14px / 1.7 var(--font-sans); opacity: .7; }
.site-footer__brand .brand__mark { margin-bottom: 18px; }
.site-footer__col { font: 500 14px / 1.9 var(--font-sans); }
.site-footer__label {
  font: 600 14px var(--font-sans);
  opacity: .55; margin-bottom: 10px;
}
.site-footer a { color: var(--on-inset); }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* =================== Schnellaktionen (mobil) ===================
   Schwebende Icon-Tabs am rechten Rand statt einer breiten Leiste:
   immer erreichbar, kosten aber keine vertikale Hoehe. */
.quick-actions { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
  :root { --pad: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); --section-y: 72px; }
  html { scroll-padding-top: 84px; }

  .picks { grid-template-columns: repeat(3, 1fr); }


  /* Im Raster wuerde die Sternleiste auf Spaltenbreite gezogen - dann
     deckt die gefuellte Reihe alle fuenf Umrisse ab und 4,3 sieht aus wie 5. */
  .voices__sterne { justify-self: start; width: max-content; }
  .voices { padding: 40px var(--pad) 28px; }
  /* Kompakt: Zahl und Sterne nebeneinander in einer Zeile, darunter der
     Knopf. Das Zitat klein und ohne Ornament. */
  .voices__title { font-size: 52px; }
  .voices__sterne { margin: 0; align-self: end; }
  .voices__sterne .sterne svg { width: 17px; height: 17px; }
  .voices__meta { margin: 0; align-self: start; font-size: 13px; }
  .reservieren__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
  .site-footer__brand { grid-column: span 2; }
}

/* Nav collapses; the sticky action bar takes over the primary CTAs. */
@media (max-width: 900px) {
  .feiern { grid-template-columns: minmax(0, 1fr); }
  .feiern__bild { min-height: 0; }
  .feiern__bild img, .feiern__bild video { position: static; aspect-ratio: 16 / 10; height: auto; }
  .feiern__text { padding: 44px var(--pad) 52px; max-width: none; }
  /* Am unteren Rand statt am Seitenrand: der Turm rechts lag ueber
     Ueberschriften, Preisen und Zitaten. Unten liegt er ueber nichts,
     weil der Seitenfuss entsprechend Platz laesst. */
  .quick-actions {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .9fr); gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(244, 237, 222, .2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .quick-actions__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 8px;
    background: var(--surface-dark-2); color: var(--cream-light);
    font: 700 14.5px var(--font-sans);
    transition: background-color .18s var(--ease);
  }
  .quick-actions__btn svg { width: 20px; height: 20px; flex: none; }
  /* Kurze Beschriftung neben dem Zeichen. Der ausfuehrliche Text bleibt
     unsichtbar fuer die Sprachausgabe stehen. */
  .quick-actions__text { white-space: nowrap; }
  .quick-actions__btn--call { background: var(--wine); color: var(--on-wine); }
  .quick-actions__btn--call:hover { background: var(--wine-hover); color: var(--on-wine); }
  .quick-actions__btn:hover { background: var(--surface-dark-2); color: #FFFFFF; }
  /* Platz fuer die Leiste, damit sie nichts verdeckt. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  .nav-toggle { display: inline-flex; }
  .header__phone { display: none; }

  /* Flacher Kopf: 60 statt 78 px - der Platz gehoert dem Video. */
  .site-header { padding: 9px var(--pad); }
  .brand__mark img { height: 42px; }
  .nav-toggle { width: 44px; height: 44px; }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--inset-bg);
    padding: 0 var(--pad);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .28s var(--ease), padding .28s var(--ease), visibility 0s linear .28s;
  }
  .site-nav[data-open="true"] { max-height: 320px; padding: 8px var(--pad) 20px; visibility: visible; transition-delay: 0s; }
  .site-nav a {
    padding: 15px 0;
    font: 700 17px var(--font-sans);
    border-bottom: 1px solid rgba(248, 242, 226, .14);
  }
  .site-nav a:last-child { border-bottom: 0; }

  .hero__media { height: auto; overflow: visible; }
  .hero__media picture { display: block; height: 48vh; height: 48svh; min-height: 300px; max-height: 520px; overflow: hidden; }
  .hero__bg { position: static; object-position: 50% 58%; }
  .hero__overlay { position: relative; z-index: 1; display: block; margin-top: 0; max-width: none; }
  .hero__plate { max-width: none; margin-right: 0; padding: 30px var(--pad) 0; }
  /* Reservieren und Speisekarte stehen zwei Zentimeter tiefer schon in der
     festen Leiste - hier waeren sie nur die Dopplung, die den Hero laenger
     macht, ohne etwas hinzuzufuegen. */
  .hero__actions { display: none; }
  .hero__facts { margin-top: 30px; }
  .hero__title { font-size: clamp(33px, 9.2vw, 80px); }
  /* Das Bild traegt den Abschnitt an - es braucht oben keine eigene
     Polsterung zusaetzlich zum Abstand des vorigen Abschnitts. */
  .boat { padding-top: 44px; }
  .boat__media { height: 62vw; min-height: 280px; max-height: 420px; }
  .boat__body { grid-template-columns: 1fr; gap: 0; }
  /* Die Platte muss bis an beide Raender laufen, sonst bleibt links und
     rechts ein Streifen Bild stehen und es sieht nach Darstellungsfehler
     aus. Sie bricht dafuer aus der Polsterung des Elternteils aus. */
  .boat__plate {
    order: -1;
    margin: -60px calc(var(--pad) * -1) 0;
    padding: 28px var(--pad) 0;
  }
  .boat__beleg { margin-top: 36px; }
  .boat__karte { max-width: none; }
  .boat__karte-zeile { flex-direction: column; gap: 4px; padding: 12px 16px 14px; }
  .ambience {
    grid-template-columns: 1fr;
    grid-template-areas: "titel" "lead" "bilder" "raeume" "links";
    grid-template-rows: none;
  }
  .ambience__lead { margin-bottom: 28px; }
  .raumbild { aspect-ratio: 4 / 3; max-height: none; margin: 0 0 8px; }
  .abend__inner { grid-template-columns: 1fr 1fr; }
  .abend__text { grid-column: 1 / -1; padding: 0 0 28px; }
  .abend__text .btn { margin-top: 0; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 128px; }

}

@media (min-width: 761px) and (max-width: 1024px) {
  .hero__facts { grid-template-columns: 1fr 1fr; }
  .hero__facts li:nth-child(3) { border-left: 0; }
  .hero__facts li:nth-child(n+3) { border-top: 1px solid rgba(25, 23, 19, .12); margin-top: 18px; }
  /* Zwei Stimmen passen nebeneinander - kein Karussell, das mitten im Satz abschneidet. */
  .site-nav { gap: 22px; font-size: 15px; }
  .header__phone { padding: 12px 18px; font-size: 15px; }
  .brand__mark img { height: 48px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 3px; }
  .gallery__item { aspect-ratio: 1; height: auto; border-radius: 0; }
  .gallery__item--hero, .gallery__item--wide, .gallery__item--tall { grid-column: auto; grid-row: auto; }
  .gallery__item:nth-child(n+7) { display: none; }
}
@media (min-width: 761px) and (max-width: 880px) {
  .menu__tabs { display: grid; grid-template-columns: repeat(4, max-content); column-gap: 26px; }
}

@media (max-width: 760px) {
  :root { --section-y: 56px; }
  /* Die Bahnen hatten die Desktop-Polsterung - auf dem Handy schlaegt das
     bei jeder Bahn doppelt durch. */
  .inset { padding: 48px var(--pad); }
  .section--menu.inset { padding: 40px var(--pad) 44px; }

  /* --- Randlos: Bilder und dunkle Flaechen laufen bis an den Bildschirmrand,
         wie in der Referenz. Text bleibt eingerueckt. --- */

  /* Vier gleich grosse Quadrate mit schmaler Fuge, eingerueckt wie der
     Text. Randlos und ohne Fuge sah es nach Fotocollage aus; das grosse
     Bild oben machte den Abschnitt zu einem eigenen Bildschirm. */
  .gallery {
    grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 3px;
    margin-inline: 0;
  }
  .gallery__item { aspect-ratio: 1; height: auto; border-radius: 0; }
  .gallery__item--hero, .gallery__item--wide, .gallery__item--tall { grid-column: auto; grid-row: auto; }
  /* Sechs Bilder, sechs Motive; die ersten sechs im HTML sind der Handy-Satz. */
  .gallery__item:nth-child(n+7) { display: none; }







  /* Vier gestapelte Karten waren ueber 1900px hoch - als Wischkarussell
     bleibt der Abschnitt auf einer Bildschirmhoehe. Die angeschnittene
     naechste Karte zeigt, dass es weitergeht. */
  .picks {
    display: flex; gap: 14px;
    grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding: 2px var(--pad) 10px;
    scroll-padding-inline: var(--pad);   /* sonst rastet die erste Karte am Rand ein */
  }
  .picks::-webkit-scrollbar { display: none; }
  .pick { flex: 0 0 76%; scroll-snap-align: start; }
  .pick__media img { aspect-ratio: 16 / 10; }
  .pick__body { padding-top: 14px; }
  .menu__sub { text-align: left; }
  /* Die Ueberschrift sagt dasselbe wie der Schalter darunter - auf dem
     Handy traegt der Schalter allein. */
  .menu__sub--karte { display: none; }
  .menu__aufklappen { margin-top: 30px; padding: 20px 0; font-size: 15.5px; }
  .menu__pdf { width: 100%; padding: 17px 22px; font-size: 16px; }
  .menu__head { gap: 20px; }

  /* --- Luftiger, zentriert: Labels und Titel mittig, kurzer Trennstrich --- */
  .section__head { flex-direction: column; align-items: flex-start; text-align: left; gap: 18px; }
  .voices { padding: 44px var(--pad) 24px; }
  .voices__alle { margin-left: 0; }
  .stimmenband { padding-bottom: 48px; }
  .stimmenband__spur { gap: 12px; padding-left: 12px; animation-duration: 70s; }
  .stimme { width: 272px; padding: 18px 20px 18px; }
  .stimme__text { font-size: 16px; margin-bottom: 14px; }
  .feiern__zahlen dt { font-size: 50px; }
  .feiern__anlaesse { font-size: 18px; }
  .feiern__lead { font-size: 15.5px; }
  /* Vier gestapelte Karten waeren zu hoch - als Wischkarussell wie die Empfehlungen. */
  .hero__facts { display: none; }
  .menu__head { flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; }
  .menu__tabs { justify-content: flex-start; }


  .menu__items { display: block; }
  /* display ueberschreibt das hidden-Attribut - ohne diese Zeile bleibt
     die eingeklappte Liste im Fluss stehen und kostet ihre volle Hoehe. */
  .menu__items[hidden] { display: none; }

  /* Die Karte als Liste zum Aufklappen: alle acht Kategorien stehen
     untereinander, die Zahl sagt, wie viele Gerichte darin sind. Die
     Reiterleiste ist hier ausgeblendet (das JS setzt sie auf hidden). */
  .menu__gruppe + .menu__gruppe { border-top: 1px solid rgba(244, 237, 222, .16); }
  .menu__kopf {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: transparent; border: 0; cursor: pointer;
    padding: 17px 0; text-align: left;
    font: 400 20px / 1.25 var(--font-serif); color: var(--on-inset);
  }
  .menu__kopf-zahl {
    flex: none; min-width: 44px; text-align: right;
    font: 600 13px var(--font-sans); color: var(--on-inset-mut);
    font-variant-numeric: tabular-nums;
  }
  /* Ein Winkel statt eines Plus: er dreht sich beim Aufklappen. */
  .menu__kopf-zahl::after {
    content: ""; display: inline-block; vertical-align: 1px; margin-left: 12px;
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transform-origin: 60% 60%;
    transition: transform .2s var(--ease);
  }
  .menu__kopf[aria-expanded="true"] .menu__kopf-zahl::after { transform: rotate(-135deg); }
  .menu__kopf[aria-expanded="true"] { color: var(--accent-light); }
  .menu__fach { padding-bottom: 8px; }
  .menu__fach .dish:last-child { border-bottom: 0; }




  /* Fingerfreundliche Trefferflaechen: 44px ist das Minimum, das sich
     auf dem Handy zuverlaessig treffen laesst. */
  .menu__tab { padding: 13px 0; }
  .link-underline { padding-block: 13px 10px; }
  .site-footer__col { line-height: 2.1; }
  .site-footer a { display: inline-block; padding-block: 9px; }

  /* Vier Karten untereinander lasen sich wie eine Liste ohne Grund.
     Als 2x2-Raster mit Haarlinien wird daraus eine Datentafel - halb so
     hoch und deutlich ruhiger. */
  /* Auf dem Handy mittig wie die anderen Abschnitte dort. */
  .ambience { text-align: left; }
  .facts { text-align: center; }
  .fact { padding: 14px 12px 16px; }
  .fact:nth-child(even) { padding-left: 12px; }
  .fact__big { font-size: 26px; }
  .fact__small { font-size: 13px; }
  /* Abends am See: Titel oben, die zwei Videos nebeneinander, Knopf darunter. */
  .abend__inner { grid-template-columns: 1fr 1fr; gap: 3px; }
  .abend__text { grid-column: 1 / -1; padding: 0 0 26px; }
  .abend__lead { margin-bottom: 0; }
  .abend__text .btn { display: none; }
  /* Auf dem Handy nur das Abendrot, dafuer gross. */
  .abend__clip--hafen { display: none; }
  /* Das Hero-Foto vom Desktop als Ausschnitt: randlos, ohne Text darauf. */
  .hero__media picture { height: auto; min-height: 0; max-height: none; }
  .hero__bg {
    width: 100%; height: auto; aspect-ratio: 4 / 5;
    max-height: 56vh; max-height: 56svh; object-fit: cover; object-position: 75% 50%;   /* Sonne rechts im Bild halten */
    background: var(--inset-bg);
  }
  /* Die Nummer, Adresse und Zeiten stehen direkt darueber gross - das Logo
     im Fuss wiederholt nur den Kopf. */
  .site-footer__brand { display: none; }
  /* Kuerzer auf dem Handy: das Zitat zum Steg steht bei den Stimmen,
     die Raeume als einzeilige Posten, die Fotos etwas flacher. */
  .boat__links { display: none; }
  .raumbild { aspect-ratio: 1; }
  .raum { padding: 13px 0 14px; grid-template-columns: 1fr; gap: 3px; }
  .raum__text { text-align: left; }
  .raum__name { font-size: 23px; }
  .raum__text { font-size: 13.5px; }
  .abend__inner { grid-template-columns: 1fr; }
  .abend__clip video { aspect-ratio: 4 / 5; }
  .abend__clip { border-radius: 0; }
  .abend__inner { margin-inline: calc(var(--pad) * -1); }
  .abend__text { padding-inline: var(--pad); }

  .nur-mobil { display: inline; }
}

@media (max-width: 560px) {
  :root { --pad: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }

  .hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .btn--lg { padding: 16px 26px; }
  .status-badge { font-size: 13px; margin-bottom: 18px; }



  .site-footer { padding: 40px var(--pad) 28px; }
  .site-footer__col { line-height: 1.85; }
  .site-footer a { padding-block: 5px; }
  .site-footer__brand p { margin-bottom: 4px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__brand { grid-column: span 1; }

}

/* ------------------------ Scroll-Reveals ------------------------
   Ein einziger, konsistenter Effekt statt vieler verschiedener - mehrere
   Effekte nebeneinander wirken schnell nach Baukasten. Nur aktiv, wenn JS
   laeuft, damit ohne JS nichts unsichtbar bleibt. */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }
/* Gruppen: das Elternteil loest aus, die Kinder kommen versetzt nach.
   Wichtig fuer das Empfehlungs-Karussell - dessen hintere Karten stehen
   seitlich ausserhalb und wuerden einzeln beobachtet nie ausloesen. */
.js [data-reveal-group] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal-group].is-visible > * { opacity: 1; transform: none; }

/* --------------------------- Preferences --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stimmenband { overflow-x: auto; }
  .stimmenband__spur { animation: none; }
  .raumbild__bild { transition: none; }
  .js [data-reveal],
  .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pick:hover { transform: none; }
}

/* Nur auf dem Handy sichtbare Zusaetze - auf dem Desktop unveraendert. */
.hero__bewertung, .boat__parken, .raum-karten, .feiern__fakten, .voices__mehr, .nur-klein { display: none; }

/* ======================= Handy-Feinschliff =======================
   Eigene Handy-Gestaltung statt geschrumpftem Desktop. Steht am Ende,
   damit es die frueheren Breiten-Regeln sicher ueberschreibt.
   Zwei Masse: --luft zwischen Abschnitten (grosszuegig, damit die
   Abschnitte beim Wischen nicht aneinanderkleben), --innen zwischen
   einem Bild und seinem Text. Fotos randlos, Text eingerueckt. */
@media (max-width: 760px) {
  :root { --section-y: 72px; --luft: 72px; --innen: 28px; }
  .nur-gross { display: none; }

  /* Kopf scrollt mit weg - Reservieren, Karte und Route stehen unten fest. */
  .site-header { position: relative; }
  html { scroll-padding-top: 0; }
  .nav-toggle { border-color: transparent; }
  /* Beim schnellen Wischen keine leeren Flaechen durch Einblenden. */
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; will-change: auto; }

  /* Schrift: Ueberschriften einheitlich, eine Groesse fuer Fliesstext */
  .section__title, .menu__title { font-size: 32px; line-height: 1.12; }
  .hero__lead, .boat__lead, .abend__lead, .feiern__lead, .ambience__lead { font-size: 15.5px; line-height: 1.6; }

  /* Hero: Status, Bewertung, Titel, ein Satz */
  .hero__body { display: none; }
  /* 46 % der sichtbaren Hoehe: auf dem iPhone mit Safari-Leisten stehen
     Status, Bewertung, Titel und Satz dann vollstaendig ueber der Leiste. */
  .hero__bg { max-height: 46vh; max-height: 46svh; }
  .hero__plate { padding-top: 22px; padding-bottom: 44px; }
  .status-badge { margin-bottom: 8px; }
  .hero__bewertung {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
    font: 500 13.5px var(--font-sans); color: var(--on-ground-mut);
  }
  .hero__bewertung b { color: var(--on-ground); font-weight: 700; }
  .hero__bewertung .sterne svg { width: 14px; height: 14px; }
  .hero__title { margin-bottom: 14px; }
  .hero__lead { margin-bottom: 0; }

  /* Speisekarte: PDF ist die Hauptaktion - gefuellt statt Umriss */
  .section--menu.inset { padding: 64px var(--pad) 64px; }
  .menu__head { margin-bottom: 36px; gap: 22px; }
  .inset .menu__pdf.btn--outline { background: var(--on-inset); color: var(--inset-bg); border-color: var(--on-inset); }
  .inset .menu__pdf.btn--outline:hover { background: #FFFFFF; color: var(--inset-bg); }
  .menu__pdf .menu__pdf-info { opacity: .7; }
  .menu__sub { margin-bottom: 18px; }
  .menu__aufklappen { margin-top: 28px; padding: 18px 0; }
  .menu__note { font-size: 13px; line-height: 1.5; margin-top: 18px; }

  /* Ambiente: Titel, dann die drei Raeume als Wischkarussell. Reiter und
     Wechselbild sind Desktop - auf dem Handy standen dort zwei randlose
     Fotos mit einem leeren Band dazwischen. */
  .section--ambience { padding-top: var(--luft); }
  .ambience { grid-template-areas: "titel" "karten"; }
  .ambience__lead, .ambience__links, .raumbild, .raeume { display: none; }
  .ambience__title { margin-bottom: 24px; }
  .raum-karten {
    grid-area: karten; display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 4px; scroll-padding-inline: var(--pad);
  }
  .raum-karten::-webkit-scrollbar { display: none; }
  .raum-karte { flex: 0 0 80%; scroll-snap-align: start; }
  .raum-karte img, .raum-karte video { display: block; background: var(--inset-bg); width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
  .raum-karte__name { margin: 14px 0 4px; font: 400 22px / 1.2 var(--font-serif); color: var(--on-ground); }
  .raum-karte__text { margin: 0; font: 500 14px / 1.45 var(--font-sans); color: var(--on-ground-mut); }

  /* Bootssteg: deutlicher Abstand zum Raumbild darueber */
  .boat { padding-top: var(--luft); }
  .boat__plate { padding-top: var(--innen); }
  .boat__title { margin-bottom: 16px; }
  .boat__lead { margin-bottom: 24px; }
  .boat__karte { margin-top: 0; }
  .boat__parken { display: block; margin-top: 6px; font: 500 13.5px var(--font-sans); color: var(--on-ground-mut); }
  .boat__body { padding-bottom: var(--luft); }

  /* Abends am See: erst das Video randlos, darunter Titel als Bildzeile */
  .abend.inset { padding: 0 0 56px; }
  .abend__inner { margin-inline: 0; }
  .abend__clip { order: 1; }
  .abend__clip video { aspect-ratio: 1 / 1; object-position: 50% 70%; }
  .abend__text { order: 2; padding: var(--innen) var(--pad) 0; }
  .abend .section__title { margin-bottom: 10px; }
  .abend__lead { margin: 0; }

  /* Feiern: Bild, Titel, Anlaesse, drei Zeilen wie in der Karte, zwei
     gleich grosse Knoepfe. Die grossen Zahlen bleiben dem Desktop. */
  .nur-klein { display: inline; }
  .feiern__bild img, .feiern__bild video { aspect-ratio: 16 / 10; object-position: 50% 50%; }
  .feiern__text { padding: var(--innen) var(--pad) 56px; }
  .feiern .section__title { margin-bottom: 14px; }
  .feiern__anlaesse { font-size: 16.5px; line-height: 1.55; margin-bottom: 28px; }
  .feiern__anlaesse br.nur-mobil { display: inline; }
  .feiern__lead, .feiern__zahlen { display: none; }
  .feiern__fakten { display: block; margin: 0 0 28px; border-bottom: 1px solid rgba(25, 23, 19, .14); }
  .feiern__fakten div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 13px 0; border-top: 1px solid rgba(25, 23, 19, .14);
  }
  .feiern__fakten dt { font: 400 19px / 1.2 var(--font-serif); color: var(--on-ground); }
  .feiern__fakten dd { margin: 0; font: 500 14.5px / 1.3 var(--font-sans); color: var(--on-ground-mut); }
  .feiern__aktion { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .feiern__aktion .btn, .feiern__aktion .link-underline {
    display: flex; align-items: center; justify-content: center; width: auto;
    min-height: 50px; padding: 0 12px; font: 700 15px var(--font-sans); border-radius: var(--radius);
  }
  /* Anrufen zuerst und gefuellt - reserviert wird telefonisch. */
  .feiern__aktion .link-underline { order: -1; background: var(--accent); color: var(--on-wine); border: 0; }
  .feiern__aktion .btn { background: transparent; color: var(--on-ground); border: 1.5px solid var(--on-ground); }

  /* Bewertungen: Sterne, Zahl und Anzahl untereinander an der linken
     Kante wie alles andere, der Link zu Google unter den Karten. */
  .voices { padding: 56px var(--pad) 28px; }
  .voices__kopf { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
  .voices__info { display: contents; }
  .voices__sterne { order: -1; align-self: flex-start; margin-bottom: 4px; }
  .voices__sterne .sterne svg { width: 20px; height: 20px; }
  .voices__title { font-size: 44px; }
  .voices__title span { font-size: .4em; }
  .voices__meta { font-size: 13.5px; align-self: flex-start; }
  .voices__title { align-self: flex-start; }
  .voices__alle { display: none; }
  .voices__mehr { display: block; text-align: left; margin: 0; padding: 0 var(--pad) var(--luft); }
  .stimmenband { padding-bottom: 24px; }
  .stimmenband.is-wisch { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stimmenband.is-wisch::-webkit-scrollbar { display: none; }
  .stimmenband.is-wisch .stimmenband__spur { animation: none; padding-left: var(--pad); }

  /* Galerie: randloses 3x2-Raster */
  .section--gallery.inset { padding: 64px var(--pad) 64px; }
  .section--gallery .section__head { margin-bottom: 24px; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 2px; margin-inline: calc(var(--pad) * -1); }
  .gallery__item:nth-child(5) { object-position: 35% 50%; }

  /* Reservieren */
  /* Reservieren: Titel und Satz, dann das Formular, darunter die Nummer
     fuer alle, die lieber anrufen, und zum Schluss der Steg. */
  .reservieren { padding-top: var(--luft); padding-bottom: 64px; }
  .reservieren__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reservieren__text { display: contents; }
  .reservieren__titel { order: 1; font-size: 32px; margin-bottom: 12px; }
  .reservieren__lead { order: 2; font-size: 15.5px; line-height: 1.6; margin-bottom: 24px; }
  .reservieren__formular { order: 3; margin: 0 0 36px; }
  .reservieren__nummer { order: 4; font-size: 40px; margin-bottom: 6px; }
  .reservieren__info { order: 5; }
  .reservieren__grafik { order: 6; max-width: 80%; opacity: .8; margin-top: 32px; }

  /* Fuss: Adresse und Zeiten nebeneinander */
  .site-footer { padding: 48px var(--pad) 28px; }
  .site-footer__inner { grid-template-columns: auto 1fr; gap: 28px 36px; }
  .site-footer__col { line-height: 1.6; }
  .site-footer__col:nth-child(3) { grid-column: 1 / -1; order: 1; }
  .site-footer__col a[href^="tel:"], .site-footer__col a[href^="tel:"] + br { display: none; }
  .site-footer__label { margin-bottom: 6px; }
  .site-footer a { padding-block: 6px; }

  /* Leiste unten: Haarlinie oben */
  .quick-actions { padding-top: 1px; }

  /* Trefferflaechen mindestens 44 px hoch, ohne dass sich die Zeilen
     verschieben: Polsterung nach aussen, gleich grosser negativer Rand. */
  .hero__bewertung { padding-block: 12px; margin: -12px 0 4px; }
  .site-footer a { padding-block: 11px; margin-block: -5px; }
  .buchung__alternativ a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
@media (max-width: 380px) {
  /* Schritt 2 des DISH-Formulars (Kontaktdaten) braucht bei 278 px Breite 548 px. */
  .buchung iframe { height: 560px; }
  .feiern__anlaesse { font-size: 15.5px; }
  .raum__name { font-size: 18px; }
}

/* Feiern auf schmalen Handys: Anlaesse in zwei sauberen Zeilen statt vier
   mit haengenden Punkten, die Fakten-Zeilen ohne Umbruch. */
/* Fuss auf schmalen Handys untereinander: zweispaltig brach
   "Taeglich 12:00 - 23:00 Uhr" und "Impressum - Datenschutz" um. */
@media (max-width: 380px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 359px) {
  .feiern__fakten div { gap: 12px; }
  .feiern__fakten dt { font-size: 18px; }
  .feiern__fakten dd { font-size: 13.5px; }
}
@media (max-width: 339px) {
  .feiern__anlaesse { font-size: 14px; }
}

/* Leiste unten auf kleinen Handys: Bei 14,5 px brauchen die drei Tasten
   386 px - darunter wurde "Route" abgeschnitten (iPhone SE, kleine Androids). */
@media (max-width: 400px) {
  .quick-actions { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); }
  .quick-actions__btn { gap: 7px; padding: 0 4px; font-size: 13.5px; }
  .quick-actions__btn svg { width: 18px; height: 18px; }
}
@media (max-width: 350px) {
  .quick-actions__btn { gap: 5px; padding: 0 2px; font-size: 12.5px; }
  .quick-actions__btn svg { width: 16px; height: 16px; }
}

/* Handy quer: fester Kopf und Leiste nahmen zusammen ein Drittel der
   Hoehe weg. Kopf scrollt mit, die Leiste wird flacher. */
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .site-header { position: relative; }
  html { scroll-padding-top: 0; }
  .quick-actions__btn { min-height: 46px; }
  body { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
}

@media print {
  .site-header, .quick-actions, .skip-link { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .inset, .site-footer { background: #fff !important; color: #191713 !important; }
  .inset p, .inset h2, .inset h3, .site-footer a { color: #191713 !important; }
  video, .menu__aufklappen { display: none !important; }
}