@charset "UTF-8";
/* Brückenterrassen Rendsburg — Stylesheet
   Schriften liegen lokal unter /assets/fonts (kein Google-Fonts-CDN). */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Inter var";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair var";
  src: url("/assets/fonts/playfair-display-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design-Tokens ---------- */
:root {
  --navy-950: #0d1b26;
  --navy-900: #132635;
  --navy-800: #1b3345;
  --navy-700: #24455c;
  --gold-500: #c9975a;   /* nur auf dunklem Grund oder als Fläche */
  --gold-400: #dcae76;
  --gold-ink: #8a5f24;   /* Goldton für Text auf hellem Grund, 5,4:1 */
  --cream-100: #f7f2ea;
  --cream-50: #fdfbf7;
  --ink: #1b2229;
  --muted: #4c565f;
  --line: #e3ded4;
  --ok: #1c6b45;
  --warn: #8a3d21;

  --focus: #12384f;
  /* 1280 statt der im Briefing genannten 76rem: die siebenteilige Navigation passt
     sonst mitsamt Marke, Sprachumschalter und CTA nicht in eine Zeile. */
  --max-width: 1280px;
  --radius: 14px;
  --shadow: 0 20px 45px -22px rgba(13, 27, 38, .42);
  --shadow-sm: 0 8px 20px -14px rgba(13, 27, 38, .5);

  --sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Playfair var", Georgia, "Times New Roman", serif;

  /* Drei Kurven, mehr braucht die Seite nicht: --ease-out für alles, was
     hereinkommt, --ease-in-out für Zustandswechsel, --ease-drawer für alles,
     was aufklappt. Dauern stehen an der jeweiligen Regel. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Erlaubt das Animieren auf height: auto (Allergen-Legende). */
  interpolate-size: allow-keywords;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-700); text-underline-offset: .18em; }
a:hover { color: var(--navy-900); }

img, picture, svg, video { max-width: 100%; }
img { display: block; height: auto; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
ul.plain { list-style: none; padding: 0; margin: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Das dunkle --focus (#12384f) traegt nur auf hellem Grund: gegen die creme-
   farbene Seitenflaeche sind das 11,9:1, gegen das Navy der Kopfleiste und des
   Heros nur 1,26:1 — WCAG 2.2 verlangt fuer Fokusindikatoren 3:1 (SC 1.4.11).
   Auf jeder dunklen Flaeche deshalb der helle Ring (#f0c489 = 9,6:1).
   Wer hier eine neue dunkle Sektion ergaenzt, muss sie in diese Liste
   aufnehmen — sonst wird der Fokus dort unsichtbar. */
.on-dark :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible, .section--dark :focus-visible,
.hero :focus-visible, .action-bar :focus-visible,
dialog.lightbox :focus-visible,
.skip-link:focus-visible, .skip-link:focus { outline-color: #f0c489; }

::selection { background: var(--gold-400); color: var(--navy-950); }

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 300;
  background: var(--navy-900);
  color: var(--cream-50);
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--cream-50); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; }

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt { background: var(--cream-100); }
.section--dark { background: var(--navy-900); color: var(--cream-100); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--cream-50); }
.section--dark a { color: var(--gold-400); }
.section--dark a:hover { color: #f0c489; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--gold-400); }

.section-head { max-width: 62ch; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.section--dark .section-head p { color: rgba(247, 242, 234, .85); }

.lead { font-size: 1.15rem; color: var(--muted); }
.section--dark .lead { color: rgba(247, 242, 234, .88); }
.prose { max-width: 68ch; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s var(--ease-out), background .15s ease, color .15s ease, border-color .15s ease;
}
/* Der Lift ist eine Zeigergeste. Auf Touch bleibt er nach dem Antippen kleben,
   solange der Finger den Knopf zuletzt berührt hat — darum nur für echte Zeiger. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}
.btn--gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); color: var(--navy-950); box-shadow: 0 12px 24px -12px rgba(201, 151, 90, .75); }
.btn--gold:hover { color: var(--navy-950); }
.btn--dark { background: var(--navy-900); color: var(--cream-50); }
.btn--dark:hover { background: var(--navy-800); color: var(--cream-50); }
.btn--ghost { background: transparent; border-color: rgba(247, 242, 234, .45); color: var(--cream-50); }
.btn--ghost:hover { background: rgba(247, 242, 234, .12); color: var(--cream-50); }
.btn--outline { background: transparent; border-color: rgba(27, 34, 41, .3); color: var(--ink); }
.btn--outline:hover { background: rgba(27, 34, 41, .06); color: var(--ink); }
.btn--sm { padding: 10px 18px; font-size: .88rem; }
/* Ruhige Variante für die mitlaufende Kopfleiste: einfarbig, ohne Schein.
   Kein Anheben beim Hover — das würde in der sticky Leiste springen. */
.btn--flat {
  background: var(--gold-400);
  box-shadow: none;
  height: 40px;
  padding: 0 20px;
  font-size: .9rem;
}
.btn--flat:hover { background: #e8bd8a; color: var(--navy-950); transform: none; }
/* Nach .btn--flat:hover, sonst gewinnt dessen transform: none bei gleicher
   Spezifität und der Druck bliebe im Kopfbereich ohne Rückmeldung.
   Auf Touch ist das die einzige Quittung, die die Seite überhaupt gibt. */
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-900);
  color: var(--cream-100);
  box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .8);
}
/* Abstandsraster der Leiste, von außen nach innen enger:
   22px zwischen den drei Gruppen, 18px innerhalb der Navigation, 14px bei den Werkzeugen. */
.site-header .container {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 74px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand { display: flex; flex-direction: column; color: var(--cream-50); text-decoration: none; margin-right: auto; }
.brand strong { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; white-space: nowrap; }
.brand span { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); white-space: nowrap; }

.main-nav ul { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  color: var(--cream-100);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding: 8px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--gold-400); }
.main-nav a[aria-current="page"] { color: var(--gold-400); border-bottom-color: var(--gold-500); }

.lang-switch { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: .8rem; }
/* inline-flex mit Mindestmass: als reines Inline-Element war die Trefferflaeche
   rund 23 x 28 px und damit unter dem Mindestziel von 24 x 24 px (WCAG 2.5.8). */
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px;
  color: rgba(247, 242, 234, .72); text-decoration: none;
  padding: 5px 8px; border-radius: 6px;
  font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}
/* Auf Touchgeraeten auf die 44 px der Apple- und Android-Richtlinien anheben. */
@media (pointer: coarse) {
  .lang-switch a { min-width: 44px; min-height: 44px; }
}
.lang-switch a:hover { color: var(--cream-50); background: rgba(247, 242, 234, .12); }
.lang-switch a[aria-current="true"] { color: var(--navy-950); background: var(--gold-400); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(247, 242, 234, .35);
  color: var(--cream-50);
  border-radius: 999px;
  padding: 9px 15px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(247, 242, 234, .1); }
.nav-toggle .bars { position: relative; width: 16px; height: 2px; background: currentColor; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
}
.nav-toggle .bars::before { top: -5px; }
.nav-toggle .bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

/* Ab hier reicht der Platz für Marke + sieben Menüpunkte + Sprachen + CTA nicht mehr.
   Gemessen im Härtefall Deutsch: ~1182px Inhalt + 48px Padding = 1230px Fensterbreite,
   plus Reserve für abweichendes Schriftrendering. Darunter greift das Burger-Menü. */
@media (max-width: 1250px) {
  .nav-toggle { display: inline-flex; }
  .header-tools { order: 3; }
  /* Aufklappen über die Rasterzeile: 0fr -> 1fr lässt sich animieren,
     display: none nicht. visibility hält die Links solange aus der
     Tab-Reihenfolge heraus und schaltet beim Schließen erst am Ende der
     Bewegung um — als interpolierbare Eigenschaft braucht sie kein
     allow-discrete.
     .nav-inner misst die Zeile und muss darum selbst randlos sein: Padding und
     Rahmen lassen sich mit box-sizing: border-box nicht unter ihre eigene
     Summe stauchen und blieben sonst als 33px hohe Leiste stehen. Sie sitzen
     deshalb an der Liste darin, die vom Wrapper beschnitten wird. */
  .main-nav {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    order: 4;
    width: 100%;
    transition: grid-template-rows .22s var(--ease-drawer), visibility .22s;
  }
  .main-nav > .nav-inner { min-height: 0; overflow: hidden; }
  .main-nav > .nav-inner > ul {
    border-top: 1px solid rgba(247, 242, 234, .15);
    padding: 14px 0 18px;
  }
  .site-header.is-open .main-nav { grid-template-rows: 1fr; visibility: visible; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid rgba(247, 242, 234, .1); font-size: 1rem; }
  .main-nav a[aria-current="page"] { border-bottom-color: var(--gold-500); }
  .site-header .container { flex-wrap: wrap; }
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid rgba(247, 242, 234, .18);
}
@media (max-width: 1250px) {
  /* Ohne sichtbare Navigation daneben hätte der Trenner nichts zu trennen. */
  .header-tools { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .header-tools .btn--gold { display: none; }
  .brand strong { font-size: 1.12rem; }
}

/* ---------- Mobile Aktionsleiste ---------- */
.action-bar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  background: var(--navy-900);
  border-top: 1px solid rgba(247, 242, 234, .16);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}
.action-bar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s var(--ease-out);
}
/* Die meistgedrückte Fläche der Seite und die einzige ohne Hover-Zustand. */
.action-bar a:active { transform: scale(.97); }
.action-bar .call { background: rgba(247, 242, 234, .12); color: var(--cream-50); }
.action-bar .book { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); color: var(--navy-950); }
@media (max-width: 760px) {
  .action-bar { display: flex; }
  body { padding-bottom: 72px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--navy-900); color: var(--cream-100); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Zwei Verläufe: der senkrechte hält den Text lesbar, der waagerechte lässt
   das Foto rechts sichtbar. Auf schmalen Geräten nur der senkrechte, weil der
   Text dort die ganze Breite einnimmt.

   Achtung beim Anfassen: die beiden Verläufe liegen übereinander, ihre
   Deckkraft multipliziert sich. 0,3 waagerecht plus 0,34 senkrecht ergaben
   zusammen 0,54 — auf einem ohnehin mittelhellen Foto blieb rechts nichts
   Erkennbares übrig. Der senkrechte Verlauf ist deshalb jetzt nur noch ein
   Saum oben und unten (Mitte transparent), die eigentliche Textabdeckung
   macht allein der waagerechte. Gemessen an der Stelle der Überschrift bleibt
   der Kontrast bei über 15:1. */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 27, 38, .7) 0%, rgba(13, 27, 38, .64) 45%, rgba(13, 27, 38, .86) 100%);
}
@media (min-width: 60rem) {
  .hero-media::after {
    background:
      linear-gradient(90deg, rgba(13, 27, 38, .92) 0%, rgba(13, 27, 38, .76) 42%, rgba(13, 27, 38, .18) 80%),
      linear-gradient(180deg, rgba(13, 27, 38, .28) 0%, rgba(13, 27, 38, 0) 42%, rgba(13, 27, 38, .48) 100%);
  }
}
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 44rem; padding: clamp(56px, 9vw, 104px) 0 clamp(64px, 8vw, 96px); }
.hero-content h1 { color: var(--cream-50); margin-bottom: 18px; }
.hero .lead, .hero p { color: rgba(247, 242, 234, .92); }
.hero .eyebrow { color: var(--gold-400); }
.hero-content h1 em { font-style: normal; color: var(--gold-400); }
.hero-content .lead { max-width: 38rem; margin-bottom: 30px; }
/* width: 100% ist nicht überflüssig neben left/right: 0. Das SVG trägt mit
   width="1440" eine Eigenbreite, und die deckelt bei width: auto die aus
   left/right errechnete Breite. Auf Fenstern über 1440px endete die Welle
   deshalb mittendrin und der Rest der Kante blieb gerade abgeschnitten.
   Das Strecken übernimmt preserveAspectRatio="none" im Markup. */
.hero-waves { position: absolute; left: 0; right: 0; width: 100%; bottom: -1px; z-index: 1; line-height: 0; color: var(--cream-50); }
.hero--alt-wave .hero-waves { color: var(--cream-100); }

.hero--page .hero-content { max-width: 52rem; padding: clamp(40px, 6vw, 68px) 0 clamp(48px, 6vw, 76px); }
.hero--page h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); }
/* Unterseiten-Hero ist flacher: das Motiv braucht mehr Licht, der Text sitzt links. */
@media (min-width: 60rem) {
  .hero--page .hero-media::after {
    background: linear-gradient(90deg, rgba(13, 27, 38, .93) 0%, rgba(13, 27, 38, .8) 38%, rgba(13, 27, 38, .34) 72%);
  }
}

/* Öffnungsstatus */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(247, 242, 234, .1);
  border: 1px solid rgba(247, 242, 234, .22);
  font-size: .95rem;
  color: var(--cream-50);
  /* Steht hidden im HTML und wird erst von JS gefüllt. Ohne Blende ploppt sie
     above the fold nach. Bewusst nur Opacity: der Satz "jetzt geöffnet" wird
     gelesen, er darf sich nicht auch noch bewegen. display muss in der Liste
     stehen, sonst springt [hidden] am @starting-style vorbei. */
  transition: opacity .15s var(--ease-out), display .15s allow-discrete;
}
@starting-style {
  .status { opacity: 0; }
}
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: #7fc9a3; flex: none; }
.status.is-closed .dot { background: #e39c7f; }
.status b { font-weight: 700; }
.status--light { background: var(--cream-100); border-color: var(--line); color: var(--ink); }
.status--light .dot { background: var(--ok); }
.status--light.is-closed .dot { background: var(--warn); }

.hero-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-fact {
  display: flex; flex-direction: column;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(247, 242, 234, .08);
  border: 1px solid rgba(247, 242, 234, .18);
}
.hero-fact b { font-family: var(--serif); font-size: 1rem; color: var(--gold-400); }
.hero-fact b a { color: var(--gold-400); }
.hero-fact b a:hover { color: #f0c489; }
.hero-fact span { font-size: .8rem; color: rgba(247, 242, 234, .8); }

/* ---------- USP-Streifen ---------- */
.usp-strip { background: var(--cream-100); border-bottom: 1px solid var(--line); }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 40px 0; }
.usp-item { display: flex; gap: 14px; align-items: flex-start; }
.usp-icon {
  width: 42px; height: 42px; flex: none;
  border-radius: 11px;
  background: var(--navy-900);
  color: var(--gold-400);
  display: grid; place-items: center;
}
.usp-item h3 { font-size: 1rem; margin-bottom: 3px; }
.usp-item p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- Kacheln / Karten ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tile {
  display: flex; flex-direction: column;
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.section--alt .tile { background: #fff; }
.tile > .figure { aspect-ratio: 4 / 3; }
.tile-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tile-body h3 { margin: 0; }
.tile-body p { color: var(--muted); font-size: .95rem; margin: 0; }
.tile-body .btn, .tile-body .textlink { margin-top: auto; align-self: flex-start; }

.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

.figure { position: relative; overflow: hidden; background: var(--navy-800); }
.figure picture { display: block; width: 100%; height: 100%; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }
figcaption { font-size: .84rem; color: var(--muted); padding-top: 8px; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split--wide { grid-template-columns: 1.1fr .9fr; }
.split--top { align-items: start; }
.split.reverse .split-media { order: -1; }
.split-media .figure { border-radius: var(--radius); aspect-ratio: 4 / 3; box-shadow: var(--shadow); }

.pull-quote {
  border-left: 3px solid var(--gold-500);
  padding-left: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  margin: 26px 0;
}

/* ---------- Öffnungszeiten ---------- */
.hours-card { background: var(--navy-900); color: var(--cream-100); border-radius: var(--radius); padding: clamp(26px, 4vw, 38px); box-shadow: var(--shadow); }
.hours-card h3 { color: var(--cream-50); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); padding-bottom: 12px; font-weight: 700; }
.hours th, .hours td { text-align: left; padding: 13px 0; border-bottom: 1px solid rgba(247, 242, 234, .14); font-weight: 400; font-size: .97rem; }
.hours td { text-align: right; font-weight: 600; color: var(--gold-400); white-space: nowrap; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours-card .note { margin-top: 18px; font-size: .87rem; color: rgba(247, 242, 234, .78); }

.hours--light { color: var(--ink); }
.hours--light caption { color: var(--gold-ink); }
.hours--light th, .hours--light td { border-bottom-color: var(--line); }
.hours--light td { color: var(--navy-900); }

/* ---------- Fahrplan Schiffsbegrüßung ---------- */
.timetable { border: 1px solid rgba(247, 242, 234, .2); border-radius: var(--radius); overflow: hidden; }
.timetable-row { display: flex; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgba(247, 242, 234, .12); }
.timetable-row:last-child { border-bottom: 0; }
.timetable-row .season { font-weight: 700; color: var(--gold-400); }
.timetable-row .time { text-align: right; color: rgba(247, 242, 234, .88); font-size: .93rem; }

/* ---------- Preiskarten (Brunch) ---------- */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.price-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
}
.price-card .when { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.price-card h3 { margin: 0; }
.price-card .price { font-family: var(--serif); font-size: 2.1rem; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.price-card .price small { font-family: var(--sans); font-size: .85rem; font-weight: 400; color: var(--muted); }
.price-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: .93rem; color: var(--muted); }
.price-card ul li { padding-left: 16px; position: relative; }
.price-card ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold-ink); }

.notice {
  border-left: 4px solid var(--gold-500);
  background: var(--cream-100);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  font-size: .95rem;
}
.notice strong { color: var(--navy-900); }
.section--alt .notice { background: #fff; }

/* ---------- Speisekarte ---------- */
.menu-jump { position: sticky; top: 74px; z-index: 40; background: var(--cream-50); border-bottom: 1px solid var(--line); }
.menu-jump ul { display: flex; gap: 8px; overflow-x: auto; list-style: none; margin: 0; padding: 12px 24px; scrollbar-width: thin; }
.menu-jump a {
  display: block; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: .85rem; font-weight: 600;
  text-decoration: none; color: var(--ink);
}
.menu-jump a:hover { border-color: var(--gold-500); color: var(--ink); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 32px; }
.filters .label { font-size: .85rem; font-weight: 600; color: var(--muted); margin-right: 4px; }
.chip {
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: .87rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.chip:hover { border-color: var(--gold-500); }
.chip[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--cream-50); }

.menu-section { margin-bottom: 52px; scroll-margin-top: 140px; }
.menu-section > h2 { padding-bottom: 10px; border-bottom: 2px solid var(--gold-500); }
.menu-group { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 28px 0 6px; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 13px 0;
  border-bottom: 1px dotted rgba(27, 34, 41, .22);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item.is-sub { padding: 5px 0 5px 22px; border-bottom: 0; }
.menu-item.is-sub .name { font-size: .9rem; color: var(--muted); }
.menu-item .name { font-weight: 600; }
.menu-item .desc { display: block; font-weight: 400; font-size: .89rem; color: var(--muted); margin-top: 2px; }
.menu-item .price { white-space: nowrap; font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.menu-item[hidden] { display: none; }

.tagpill {
  display: inline-block;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-ink); background: rgba(201, 151, 90, .18);
  padding: 2px 8px; border-radius: 999px; margin-left: 7px; vertical-align: 1px;
}
abbr.zst {
  font-size: .7rem; color: var(--muted); margin-left: 4px;
  text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help;
}
.menu-hint { font-size: .88rem; color: var(--muted); font-style: italic; margin: 12px 0 0; }
.no-hits { padding: 20px 0; color: var(--muted); }

details.legend { border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-100); padding: 0; margin-top: 12px; }
details.legend > summary { cursor: pointer; padding: 16px 22px; font-weight: 600; list-style-position: inside; }
details.legend > summary::marker { color: var(--gold-ink); }
details.legend .legend-body { padding: 0 22px 20px; font-size: .88rem; color: var(--muted); }
/* Nur wenn beides da ist. Ohne die Abfrage würde height: 0 in Browsern, die
   ::details-content kennen aber nicht animieren können, den Inhalt dauerhaft
   verstecken. Fällt sonst auf das bisherige harte Aufklappen zurück. */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
  details.legend::details-content {
    height: 0;
    overflow: hidden;
    transition: height .2s var(--ease-out), content-visibility .2s allow-discrete;
  }
  details.legend[open]::details-content { height: auto; }
}
details.legend dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 20px; margin: 0 0 14px; }
details.legend dt { float: left; font-weight: 700; margin-right: 6px; }
details.legend dd { margin: 0; }

/* ---------- Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-item .figure { aspect-ratio: 3 / 2; }
.gallery-item img { transition: transform .5s var(--ease-out); }
/* Gleicher Grund wie beim Knopf: auf Touch bliebe der Zoom nach dem Antippen stehen. */
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.04); }
}
.gallery-item .cap { display: block; padding: 10px 14px; font-size: .85rem; text-align: left; color: var(--muted); background: #fff; }

/* Öffnen und Schließen: zentriert einblenden, nicht aus der Kachel heraus —
   ein Modal bleibt in der Mitte. scale startet bei .97, nie bei 0.
   display und overlay müssen mit in die Liste, sonst gibt es nur einen
   Eintritt und das Schließen bleibt hart. */
dialog.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: min(94vw, 1100px); max-height: 94vh;
  opacity: 0;
  scale: .97;
  transition: opacity .2s var(--ease-out), scale .2s var(--ease-out),
              display .2s allow-discrete, overlay .2s allow-discrete;
}
dialog.lightbox[open] { opacity: 1; scale: 1; }
dialog.lightbox::backdrop {
  background: rgba(9, 18, 25, .9);
  opacity: 0;
  transition: opacity .2s var(--ease-out),
              display .2s allow-discrete, overlay .2s allow-discrete;
}
dialog.lightbox[open]::backdrop { opacity: 1; }
@starting-style {
  dialog.lightbox[open] { opacity: 0; scale: .97; }
  dialog.lightbox[open]::backdrop { opacity: 0; }
}
.lightbox-inner { background: var(--navy-950); border-radius: var(--radius); overflow: hidden; }
.lightbox-inner img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: #000; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; color: var(--cream-100); font-size: .9rem; }
.lightbox-bar button { background: rgba(247, 242, 234, .12); border: 0; color: var(--cream-50); font: inherit; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.lightbox-bar button:hover { background: rgba(247, 242, 234, .22); }

/* ---------- Kontakt / Karte ---------- */
.contact-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 5vw, 56px); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { padding-top: 0; }
.contact-list .icon { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--navy-900); color: var(--gold-400); display: grid; place-items: center; }
.contact-list strong { display: block; font-size: .95rem; }
.contact-list a, .contact-list span { font-size: .95rem; color: var(--muted); }
.contact-list a { color: var(--navy-700); }

.map-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.map-card .figure { aspect-ratio: 4 / 3; }
.map-card .map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.map-card .attrib { font-size: .74rem; color: var(--muted); }

.social-row { display: flex; gap: 12px; margin-top: 22px; }
.social-row a { width: 42px; height: 42px; border-radius: 50%; background: var(--navy-900); color: var(--cream-50); display: grid; place-items: center; }
.social-row a:hover { background: var(--gold-ink); color: var(--cream-50); }

.insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.insta-grid .figure { aspect-ratio: 1; border-radius: 10px; }

/* ---------- Formulare ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid #b9b3a8;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--focus); }
.field .err { font-size: .85rem; color: #97290f; font-weight: 600; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #97290f; border-width: 2px; }
.req { color: #97290f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .87rem; color: var(--muted); margin: 18px 0; }
/* Der eine Moment auf dieser Seite, der ein bisschen Aufwand verdient: die
   Bestätigung nach einer Reservierung. Nur Opacity und Transform anfassen —
   das Element ist role="status" aria-live="polite", ein Umschalten von
   visibility würde die Ansage stören. */
.form-status {
  margin-top: 16px; padding: 14px 18px; border-radius: 10px; font-size: .95rem;
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out),
              display .26s allow-discrete;
}
.form-status:empty { display: none; }
@starting-style {
  .form-status { opacity: 0; transform: translateY(6px); }
}
.form-status.ok { background: #e6f2ec; border-left: 4px solid var(--ok); color: #12452c; }
.form-status.fail { background: #fbeceb; border-left: 4px solid #97290f; color: #6e1f0c; }

/* ---------- Info-Boxen / Listen ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { padding-left: 28px; position: relative; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px; border-left: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink);
  transform: rotate(-45deg);
}
.section--dark .checklist li::before { border-color: var(--gold-400); }

.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 48px); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--muted); font-size: .95rem; }

.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  background: var(--cream-100); border-radius: var(--radius);
  padding: 26px 30px; margin-top: 44px;
}
.section--alt .cta-band { background: #fff; }
.cta-band p { margin: 0; max-width: 58ch; color: var(--muted); }
.cta-band h2, .cta-band h3 { margin-bottom: 6px; }

/* ---------- Rechtsseiten / Fließtext ---------- */
.legal { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.legal h2 { margin-top: 2.2em; font-size: 1.35rem; }
.legal h3 { margin-top: 1.6em; font-size: 1.08rem; font-family: var(--sans); font-weight: 700; }
.legal li { margin-bottom: .35em; }
.legal address { font-style: normal; }
.todo {
  background: #fdf3e3;
  border-left: 4px solid var(--gold-500);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: .9rem;
  margin: 16px 0;
}
.todo b { color: #7a4c12; }

table.data { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: .95rem; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-weight: 700; background: var(--cream-100); }
.table-scroll { overflow-x: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: rgba(247, 242, 234, .74); padding: 56px 0 24px; font-size: .92rem; }
.site-footer a { color: rgba(247, 242, 234, .82); text-decoration: none; }
.site-footer a:hover { color: var(--gold-400); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 34px; border-bottom: 1px solid rgba(247, 242, 234, .14); }
.footer-grid h2 { font-size: .95rem; color: var(--cream-50); margin-bottom: 14px; font-family: var(--sans); letter-spacing: .04em; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid address { font-style: normal; line-height: 1.8; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; font-size: .82rem; }

/* ---------- Responsiv ----------
   Drei Stufen statt zwei. Der Sprung von drei Spalten direkt auf eine ergab auf
   dem Tablet (768-1000 px) unnoetig breite, flach wirkende Karten. Dazwischen
   liegt jetzt eine Zweierstufe; einspaltig wird erst auf dem Telefon. */
@media (max-width: 1000px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .tiles, .price-cards, .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid, .cols-2 { grid-template-columns: 1fr; }
  .split--wide { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-jump { top: 0; }
}
@media (max-width: 620px) {
  .usp-grid { grid-template-columns: 1fr; }
  .tiles, .price-cards, .cols-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Galerie bleibt zweispaltig: 18 Motive einspaltig ergaben eine sehr lange
     Scrollstrecke, in der die Uebersicht verlorengeht. */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-item .cap { padding: 8px 10px; font-size: .78rem; }
  .menu-item { flex-direction: column; align-items: flex-start; gap: 3px; }
  .timetable-row { flex-direction: column; }
  .timetable-row .time { text-align: left; }
  .hero-facts { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .gallery-item:hover img { transform: none; }

  /* Die Pauschalregel oben setzt alles auf null. Was nichts verschiebt, darf
     bleiben: reine Blenden bewegen keinen Inhalt, sie verhindern nur das
     Aufblitzen. Alles mit Ortswechsel (Menü aufklappen, Legende, translateY)
     bleibt abgeschaltet. */
  .status { transition-duration: .15s !important; }
  dialog.lightbox {
    scale: 1 !important;
    transition-property: opacity, display, overlay !important;
    transition-duration: .2s !important;
  }
  dialog.lightbox::backdrop { transition-duration: .2s !important; }
  .form-status {
    transform: none !important;
    transition-property: opacity, display !important;
    transition-duration: .26s !important;
  }
  /* Druckrückmeldung ist Rückmeldung, keine Zierde: 3 % Skalierung liegt weit
     unter jeder Reizschwelle, und hartes Umspringen wäre das schlechtere Ende. */
  .btn:active, .action-bar a:active { transition-duration: .12s !important; }
}

@media print {
  .site-header, .action-bar, .menu-jump, .filters, .site-footer, .hero-media, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 12px 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}