/* ============================================================
    NORD CATERING — style.css
    Mobile-First · BEM · oklch() · CSS-Nesting
    Container Queries · WCAG 2.1 AA
   ============================================================ */

/* ============================================================
    1. LOKALE SCHRIFTEN (@font-face)
    Fonts lokal hosten (DSGVO-konform), Ordner /fonts/
    font-display:swap verhindert FOIT (unsichtbaren Text)
    Download-Link am Ende dieser Datei
   ============================================================ */
@font-face {
  font-family:'Rye';
  src:url('fonts/Rye/Rye-Regular.ttf') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Roboto Slab';
  src:url('fonts/Roboto_Slab/roboto-slab-v34-latin-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Roboto Slab';
  src:url('fonts/Roboto_Slab/roboto-slab-v34-latin-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Roboto Slab';
  src:url('fonts/Roboto_Slab/roboto-slab-v34-latin-800.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Lato';
  src:url('fonts/Lato/lato-v24-latin-300.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Lato';
  src:url('fonts/Lato/lato-v24-latin-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Lato';
  src:url('fonts/Lato/lato-v24-latin-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   2. CSS-VARIABLEN (Design Tokens)
   Farben in oklch() für konsistente barrierefreie Kontraste.
   Keine Spaces zwischen Variablenname und Wert.
   ============================================================ */
:root {
  --clr-dark:oklch(9% 0 0);
  --clr-dark-alt:oklch(11% 0.01 50);
  --clr-amber:oklch(63% 0.13 55);
  --clr-amber-light:oklch(73% 0.13 65);
  --clr-cream:oklch(88% 0.03 80);
  --clr-text-dark:oklch(12% 0.02 50);
  --clr-text-light:oklch(93% 0.022 80);
  --clr-text-muted:oklch(57% 0.04 60);
  --clr-overlay-light:oklch(98% 0.01 80 / 0.88);
  --clr-whatsapp:oklch(68% 0.17 152);
  --clr-whatsapp-h:oklch(62% 0.17 152);

  --ff-display:'Rye', Georgia, serif;
  --ff-heading:'Roboto Slab', Georgia, serif;
  --ff-body:'Lato', Arial, sans-serif;

  --fs-hero:clamp(2.8rem, 8vw + 1rem, 7rem);
  --fs-h1:clamp(2rem, 4vw + 1rem, 3.8rem);
  --fs-h2:clamp(1.5rem, 3vw + 0.5rem, 2.6rem);
  --fs-h3:clamp(1.1rem, 2vw + 0.3rem, 1.6rem);
  --fs-eyecatch:clamp(3.5rem, 9vw + 1rem, 9rem);
  --fs-body:clamp(0.95rem, 1.5vw + 0.4rem, 1.1rem);
  --fs-small:0.85rem;

  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:4rem;
  --space-xl:7rem;

  --radius-sm:4px;
  --radius-md:10px;

  --border-ornament:2px solid var(--clr-amber);

  --transition-base:0.3s ease;
  --transition-slow:0.6s ease;
  --transition-menu:0.4s cubic-bezier(0.77, 0, 0.175, 1);

  --shadow-card:0 4px 24px oklch(0% 0 0 / 0.35);
  --shadow-heavy:0 12px 48px oklch(0% 0 0 / 0.65);
  --shadow-glow:0 0 30px oklch(63% 0.13 55 / 0.25);
}

/* ============================================================
   3. RESET & BOX-MODEL
   ============================================================ */
*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html { scroll-behavior:smooth; }

body {
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  background-color:var(--clr-dark);
  color:var(--clr-text-light);
  line-height:1.7;
  overflow-x:hidden;

  /* Hintergrundscroll sperren wenn Menü offen ist */
  &.menu-open { overflow:hidden; }
}

img { max-width:100%; height:auto; display:block; }

ul, ol { list-style:none; }

a {
  color:inherit;
  text-decoration:none;
}

/* ============================================================
   4. BARRIEREFREIHEIT
   ============================================================ */

/* Skip-Link: beim Fokus eingeblendet */
.skip-link {
  position:absolute;
  top:-100%;
  left:var(--space-sm);
  padding:0.5rem 1.25rem;
  background:var(--clr-amber);
  color:var(--clr-dark);
  font-family:var(--ff-heading);
  font-weight:600;
  font-size:var(--fs-small);
  border-radius:var(--radius-sm);
  z-index:9999;
  transition:top 0.2s ease;

  &:focus { top:var(--space-sm); }
}

/* Focus-Ring für alle interaktiven Elemente */
:focus-visible {
  outline:3px solid var(--clr-amber-light);
  outline-offset:4px;
  border-radius:var(--radius-sm);
}

/* Screenreader-only Hilfsklasse */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ============================================================
   5. FADE-IN SCROLL-ANIMATIONEN
   Elemente starten unsichtbar, erscheinen beim Einscrollen.
   ============================================================ */
.fade-in {
  opacity:0;
  transform:translateY(2rem);
  transition:opacity 0.75s ease, transform 0.75s ease;

  &.visible {
    opacity:1;
    transform:translateY(0);
  }
}

/* Gestaffelte Verzögerungen für Kindelemente */
.fade-in-delay-1 { transition-delay:0.1s; }
.fade-in-delay-2 { transition-delay:0.2s; }
.fade-in-delay-3 { transition-delay:0.3s; }
.fade-in-delay-4 { transition-delay:0.4s; }

/* ============================================================
   6. GLOBALE KOMPONENTEN
   ============================================================ */

/* Dekorative Trennlinie mit Diamant-Icon */
.ornament {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-block:var(--space-md);
  color:var(--clr-amber);

  &::before, &::after {
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(to right, transparent, var(--clr-amber), transparent);
  }

  /* Auf hellem Hintergrund: Gradient anpassen */
  &.ornament--dark {
    &::before, &::after {
      background:linear-gradient(to right, transparent, var(--clr-amber), transparent);
    }
  }
}

.ornament__icon { font-size:1.4rem; line-height:1; }

/* Kategorie-Label über Abschnittstiteln */
.section-label {
  font-family:var(--ff-display);
  font-size:var(--fs-small);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--clr-amber);
}

/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn {
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  padding:0.85em 1.8em;
  font-family:var(--ff-heading);
  font-weight:600;
  font-size:clamp(0.9rem, 1.5vw, 1.05rem);
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-decoration:none;
  border:2px solid transparent;
  transition:background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);

  &:hover { transform:translateY(-2px); box-shadow:var(--shadow-glow); }
}

.btn--primary {
  background:var(--clr-amber);
  color:var(--clr-dark);
  border-color:var(--clr-amber);

  &:hover, &:focus-visible {
    background:var(--clr-amber-light);
    border-color:var(--clr-amber-light);
  }
}

.btn--outline {
  background:transparent;
  color:var(--clr-amber);
  border-color:var(--clr-amber);

  &:hover, &:focus-visible {
    background:var(--clr-amber);
    color:var(--clr-dark);
  }
}

.btn--whatsapp {
  background:var(--clr-whatsapp);
  color:#fff;
  border-color:var(--clr-whatsapp);
  font-size:clamp(1rem, 2vw, 1.2rem);
  padding:1em 2.4em;

  &:hover, &:focus-visible {
    background:var(--clr-whatsapp-h);
    border-color:var(--clr-whatsapp-h);
    box-shadow:0 0 24px oklch(68% 0.17 152 / 0.4);
  }
}

.btn--email {
  background:transparent;
  color:var(--clr-amber-light);
  border-color:var(--clr-amber-light);
  font-size:clamp(1rem, 2vw, 1.2rem);
  padding:1em 2.4em;

  &:hover, &:focus-visible {
    background:var(--clr-amber);
    color:var(--clr-dark);
    border-color:var(--clr-amber);
  }
}

/* Allergen-Hochstellung */
sup.allergens {
  font-family:var(--ff-body);
  font-size:0.65em;
  font-weight:700;
  color:var(--clr-amber-light);
  margin-left:0.2em;
  letter-spacing:0.05em;
}

/* ============================================================
   8. NAVIGATION
   ============================================================ */
.site-nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  padding:var(--space-sm) var(--space-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:background var(--transition-slow), backdrop-filter var(--transition-slow);

  /* Scrolled-State: Glasmorphismus */
  &.scrolled {
    background:oklch(9% 0 0 / 0.95);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid oklch(63% 0.13 55 / 0.2);
  }
}

.nav__logo {
  font-family:var(--ff-display);
  font-size:clamp(1.1rem, 2.5vw, 1.5rem);
  color:var(--clr-amber-light);
  text-decoration:none;
  letter-spacing:0.05em;
  text-shadow:0 2px 8px oklch(0% 0 0 / 0.6);
  z-index:210;
  position:relative;

  & span { color:var(--clr-text-light); }
}

/* Hamburger-Button */
.nav__hamburger {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:2.6rem;
  height:2.6rem;
  padding:0.4rem;
  background:transparent;
  border:2px solid oklch(63% 0.13 55 / 0.4);
  border-radius:var(--radius-sm);
  cursor:pointer;
  z-index:210;
  position:relative;
  flex-shrink:0;

  &:hover { border-color:var(--clr-amber); }

  /* Aktiv: Hamburger-Balken zum X animieren */
  &[aria-expanded="true"] {
    & .hamburger-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    & .hamburger-bar:nth-child(2) { opacity:0; transform:scaleX(0); }
    & .hamburger-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  }
}

.hamburger-bar {
  display:block;
  width:100%;
  height:2px;
  background:var(--clr-amber-light);
  border-radius:2px;
  transform-origin:center;
  transition:transform var(--transition-menu), opacity var(--transition-base), width var(--transition-base);
}

/* Mobile Overlay-Menü */
.nav__mobile-overlay {
  position:fixed;
  inset:0;
  z-index:190;
  background:oklch(9% 0 0 / 0.97);
  background-image:url('Nord-bg.jpg');
  background-blend-mode:multiply;
  background-size:cover;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-md);
  opacity:0;
  visibility:hidden;
  transform:translateY(-1rem);
  transition:opacity var(--transition-menu), visibility var(--transition-menu), transform var(--transition-menu);

  &.is-open {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

.nav__mobile-links {
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-sm);
  text-align:center;

  & a {
    font-family:var(--ff-display);
    font-size:clamp(1.4rem, 5vw, 2rem);
    color:var(--clr-text-light);
    text-decoration:none;
    letter-spacing:0.08em;
    transition:color var(--transition-base);

    &:hover, &:focus-visible { color:var(--clr-amber-light); }
  }
}

.nav__mobile-divider {
  width:60px;
  height:1px;
  background:linear-gradient(to right, transparent, var(--clr-amber), transparent);
}

.nav__mobile-contact {
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
  text-align:center;

  & a { color:var(--clr-amber); text-decoration:none; }
}

/* Desktop-Links: nur ab 768px sichtbar */
.nav__desktop-links {
  display:none;
  list-style:none;
  gap:var(--space-md);

  & a {
    font-family:var(--ff-body);
    font-size:var(--fs-small);
    font-weight:700;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--clr-cream);
    text-decoration:none;
    transition:color var(--transition-base);

    &:hover, &:focus-visible { color:var(--clr-amber-light); }
  }
}

.nav__cta { display:none; }

/* ============================================================
   9. HERO
   ============================================================ */
.hero {
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:var(--space-xl) var(--space-md);
  background-color:var(--clr-dark);
  background-image:url('Nord-bg.jpg'), url('images/home-img.avif');
  background-blend-mode:multiply, normal;
  background-size:cover, cover;
  background-position:center;
  overflow:hidden;

  /* Verlaufs-Overlay für bessere Lesbarkeit */
  &::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
      to bottom,
      oklch(9% 0 0 / 0.55) 0%,
      oklch(9% 0 0 / 0.3)  40%,
      oklch(9% 0 0 / 0.75) 100%
    );
  }
}

.hero__content {
  position:relative;
  z-index:1;
  max-width:900px;
}

.hero__eyebrow {
  font-family:var(--ff-display);
  font-size:var(--fs-small);
  letter-spacing:0.5em;
  text-transform:uppercase;
  color:var(--clr-amber);
  margin-bottom:var(--space-sm);
}

.hero__logo {
  font-family:var(--ff-display);
  font-size:var(--fs-hero);
  line-height:1.05;
  color:var(--clr-text-light);
  text-shadow:0 4px 40px oklch(0% 0 0 / 0.8);
  letter-spacing:0.04em;

  & span { color:var(--clr-amber-light); display:block; }
}

.hero__tagline {
  font-family:var(--ff-heading);
  font-size:clamp(0.95rem, 2vw, 1.3rem);
  font-weight:400;
  color:var(--clr-cream);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-top:var(--space-sm);
  margin-bottom:var(--space-lg);
  text-shadow:0 2px 12px oklch(0% 0 0 / 0.7);

  & strong { color:var(--clr-amber); font-weight:600; }
}

.hero__actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  justify-content:center;
}

/* Bounce-Animation für den Scroll-Pfeil */
.hero__scroll-hint {
  position:absolute;
  bottom:var(--space-md);
  left:50%;
  transform:translateX(-50%);
  color:var(--clr-amber);
  background:none;
  border:none;
  font-size:1.6rem;
  z-index:1;
  cursor:pointer;
  animation:bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform:translateX(-50%) translateY(0); }
  50%       { transform:translateX(-50%) translateY(8px); }
}

/* ============================================================
   10. SEKTION – GEMEINSAME STILE
   ============================================================ */
.section {
  padding-block:var(--space-xl);
  padding-inline:var(--space-md);
}

.section--dark {
  background-color:oklch(9% 0 0 / 0.97);
  background-image:url('Nord-bg.jpg');
  background-blend-mode:multiply;
  background-size:cover;
  background-attachment:fixed;
  color:var(--clr-text-light);
}

.section--light {
  background-image:linear-gradient(var(--clr-overlay-light), var(--clr-overlay-light)), url('Nord-bg.jpg');
  background-size:cover;
  background-attachment:fixed;
  color:var(--clr-text-dark);
}

.section__inner {
  max-width:1200px;
  margin-inline:auto;
}

.section__header {
  text-align:center;
  margin-bottom:var(--space-lg);

  /* Modifier für hellen Abschnittshintergrund */
  &.section__header--dark {
    color:var(--clr-text-dark);
  }
}

/* Dekoratives Schlagwort im Hintergrund */
.section__eyecatch {
  font-family:var(--ff-display);
  font-size:var(--fs-eyecatch);
  line-height:0.9;
  color:var(--clr-amber);
  opacity:0.15;
  pointer-events:none;
  user-select:none;
  display:block;
  margin-bottom:-1.5rem;

  /* Sehr schwaches Eyecatch auf hellem Hintergrund */
  &.section__eyecatch--faint { opacity:0.12; }
}

.section__h2 {
  font-family:var(--ff-heading);
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.2;
  color:var(--clr-text-light);

  /* Modifier für dunklen Text auf hellem Grund */
  &.section__h2--dark { color:var(--clr-text-dark); }

  /* Modifier für hellen Text explizit gesetzt */
  &.section__h2--light { color:var(--clr-text-light); }
}

.section__sub {
  font-size:clamp(0.9rem, 1.5vw, 1.05rem);
  max-width:60ch;
  margin-inline:auto;
  margin-top:var(--space-sm);
  opacity:0.75;
  color:var(--clr-text-light);

  &.section__sub--muted { color:var(--clr-text-muted); }
  &.section__sub--dark  { color:var(--clr-text-dark);  }
}

/* ============================================================
   11. GALERIE / BROKEN GRID
   ============================================================ */
.galerie-section {
  padding-block:var(--space-xl);
  padding-inline:var(--space-md);
  background-color:oklch(9% 0 0 / 0.97);
  background-image:url('Nord-bg.jpg');
  background-blend-mode:multiply;
  background-size:cover;
  background-attachment:fixed;
  overflow:hidden;
}

.galerie__inner { max-width:1200px; margin-inline:auto; }

.galerie__header {
  text-align:center;
  margin-bottom:var(--space-lg);
}

.galerie__layout {
  display:grid;
  gap:var(--space-xl);
  align-items:center;
}

/* ── Broken-Grid Collage ──────────────────────────────────
   Grid mit 2 Spalten: Bild A links (überspannt 2 Zeilen),
   B oben rechts, C unten rechts.
   Negative Margins erzeugen den Überlappungs-Effekt.
   ──────────────────────────────────────────────────────── */
.collage {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  position:relative;
  max-width:560px;
  margin-inline:auto;
}

.collage__img {
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-heavy);
  overflow:hidden;
  border:3px solid oklch(63% 0.13 55 / 0.18);
  transition:transform var(--transition-slow), box-shadow var(--transition-slow);
  position:relative;

  &:hover {
    transform:scale(1.03);
    box-shadow:var(--shadow-heavy), var(--shadow-glow);
    z-index:5;
  }

  & img { width:100%; height:100%; object-fit:cover; display:block; }
}

/* A: hohes Hauptbild, linke Spalte, beide Zeilen */
.collage__img--a {
  grid-column:1;
  grid-row:1 / 3;
  height:clamp(300px, 50vw, 520px);
  margin-top:2.5rem;
  margin-right:-2.5rem;
  z-index:2;
}

/* B: Hochformat oben rechts */
.collage__img--b {
  grid-column:2;
  grid-row:1;
  height:clamp(180px, 28vw, 280px);
  margin-left:-2.5rem;
  align-self:start;
  z-index:3;
}

/* C: Querformat unten rechts */
.collage__img--c {
  grid-column:2;
  grid-row:2;
  height:clamp(150px, 22vw, 240px);
  margin-top:-2rem;
  margin-left:-1.2rem;
  align-self:start;
  z-index:4;
}

/* Amber-Badge auf dem Hauptbild */
.collage__stamp {
  position:absolute;
  bottom:var(--space-sm);
  left:var(--space-sm);
  z-index:6;
  background:var(--clr-amber);
  color:var(--clr-dark);
  font-family:var(--ff-display);
  font-size:0.75rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  padding:0.35em 0.8em;
  border-radius:var(--radius-sm);
  box-shadow:0 2px 12px oklch(0% 0 0 / 0.5);
}

/* Textspalte neben der Collage */
.galerie__copy {
  & .section-label { display:block; margin-bottom:var(--space-xs); }
}

.galerie__copy-heading {
  font-family:var(--ff-heading);
  font-size:var(--fs-h2);
  font-weight:800;
  color:var(--clr-text-light);
  line-height:1.2;
  margin-bottom:var(--space-sm);
}

.galerie__copy p {
  color:var(--clr-text-muted);
  font-size:var(--fs-body);
  max-width:50ch;
  margin-bottom:var(--space-sm);
}

.galerie__stats {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  margin-top:var(--space-md);
}

.galerie__copy-cta { margin-top:var(--space-lg); }

/* Stat-Block mit linker Amber-Linie */
.stat {
  border-left:3px solid var(--clr-amber);
  padding-left:var(--space-sm);
}

.stat__num {
  font-family:var(--ff-heading);
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  font-weight:800;
  color:var(--clr-amber-light);
  line-height:1;
}

.stat__label {
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* ============================================================
   12. HIGHLIGHT – SPANFERKEL
   ============================================================ */
.highlight-section {
  padding-block:var(--space-xl);
  padding-inline:var(--space-md);
  background-image:linear-gradient(var(--clr-overlay-light), var(--clr-overlay-light)), url('Nord-bg.jpg');
  background-size:cover;
  background-attachment:fixed;
  color:var(--clr-text-dark);
}

.highlight__inner {
  max-width:1200px;
  margin-inline:auto;
  display:grid;
  gap:var(--space-xl);
  align-items:center;
}

.highlight__text {
  & .section-label { display:block; margin-bottom:var(--space-xs); }
}

/* Großes dekoratives Hintergrundwort */
.highlight__eyecatch {
  font-family:var(--ff-display);
  font-size:var(--fs-eyecatch);
  line-height:0.85;
  color:var(--clr-amber);
  display:block;
  margin-bottom:var(--space-sm);
}

.highlight__h2 {
  font-family:var(--ff-heading);
  font-size:var(--fs-h1);
  font-weight:800;
  color:var(--clr-text-dark);
  line-height:1.15;
  margin-bottom:var(--space-md);
}

.highlight__desc {
  font-size:var(--fs-body);
  color:var(--clr-text-dark);
  opacity:0.8;
  max-width:50ch;
  margin-bottom:var(--space-lg);
}

/* Preis-Karten mit Container Query */
.price-cards {
  container-type:inline-size;
  container-name:price-cards;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}

.price-card {
  background:var(--clr-dark);
  color:var(--clr-text-light);
  padding:var(--space-md);
  border-radius:var(--radius-md);
  border-top:3px solid var(--clr-amber);
  box-shadow:var(--shadow-card);
  text-align:center;
  transition:transform var(--transition-base), box-shadow var(--transition-base);

  &:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-glow), var(--shadow-card);
  }
}

.price-card__label {
  font-size:var(--fs-small);
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--clr-text-muted);
  margin-bottom:var(--space-xs);
}

.price-card__price {
  font-family:var(--ff-heading);
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  font-weight:800;
  color:var(--clr-amber-light);
  line-height:1;
}

.price-card__unit {
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
  margin-top:0.3em;
}

.highlight__image {
  position:relative;

  & img {
    width:100%;
    height:clamp(300px, 50vw, 580px);
    object-fit:cover;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    transition:transform var(--transition-slow);
  }

  &:hover img { transform:scale(1.02); }

  /* Dekorativer Rahmen mit Abstand */
  &::before {
    content:'';
    position:absolute;
    inset:-8px;
    border:var(--border-ornament);
    border-radius:calc(var(--radius-md) + 8px);
    opacity:0.3;
  }
}

/* ============================================================
   13. MENÜ-KARTEN (Braten & Gratins)
   ============================================================ */
.menu-grid {
  display:grid;
  gap:var(--space-sm);
  grid-template-columns:1fr;
}

/* Container Query für einzelne Menükarte */
.menu-card {
  container-type:inline-size;
  container-name:menu-card;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:oklch(100% 0 0 / 0.04);
  border:1px solid oklch(63% 0.13 55 / 0.2);
  padding:var(--space-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  transition:background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);

  &:hover {
    background:oklch(63% 0.13 55 / 0.08);
    border-color:oklch(63% 0.13 55 / 0.5);
    transform:translateY(-3px);
  }

  /* Anfrage-Karte: gestrichelter Rahmen, zentriert */
  &.menu-card--request {
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:oklch(63% 0.13 55 / 0.06);
    border-style:dashed;
  }
}

.menu-card__category {
  font-size:0.72rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--clr-amber);
  font-weight:700;
}

.menu-card__name {
  font-family:var(--ff-heading);
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--clr-text-light);
  line-height:1.3;

  /* Amber-Variante für die Anfrage-Karte */
  &.menu-card__name--accent { color:var(--clr-amber-light); }
}

.menu-card__desc {
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
  flex:1;
}

.menu-card__price {
  font-family:var(--ff-heading);
  font-size:1.4rem;
  font-weight:800;
  color:var(--clr-amber-light);
  margin-top:auto;
  padding-top:var(--space-xs);
  border-top:1px solid oklch(63% 0.13 55 / 0.15);

  & span { font-size:var(--fs-small); color:var(--clr-text-muted); font-weight:400; }
}

/* CTA-Button innerhalb Anfrage-Karte */
.menu-card__cta-btn { margin-top:auto; }

/* ============================================================
   14. BUFFET
   ============================================================ */
.buffet-section {
  padding-block:var(--space-xl);
  padding-inline:var(--space-md);
  background-image:linear-gradient(var(--clr-overlay-light), var(--clr-overlay-light)), url('Nord-bg.jpg');
  background-size:cover;
  background-attachment:fixed;
  color:var(--clr-text-dark);
}

.buffet__inner { max-width:1200px; margin-inline:auto; }

.buffet__intro {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  align-items:flex-start;
  margin-bottom:var(--space-lg);
}

.buffet__badge {
  flex-shrink:0;
  background:var(--clr-dark);
  color:var(--clr-text-light);
  border-radius:var(--radius-md);
  padding:var(--space-md) var(--space-lg);
  text-align:center;
  border:var(--border-ornament);
  box-shadow:var(--shadow-card);
}

.buffet__badge-price {
  font-family:var(--ff-heading);
  font-size:clamp(2rem, 5vw, 3.5rem);
  font-weight:800;
  color:var(--clr-amber-light);
  line-height:1;
}

.buffet__badge-label {
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.buffet__badge-min {
  font-size:var(--fs-small);
  color:var(--clr-amber);
  margin-top:0.4em;
}

.buffet__text-intro { max-width:50ch; }

.buffet__text-heading {
  font-family:var(--ff-heading);
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--clr-text-dark);
  margin-bottom:var(--space-xs);
}

.buffet-cols {
  display:grid;
  gap:var(--space-md);
}

.buffet-col__title {
  font-family:var(--ff-heading);
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--clr-text-dark);
  padding-bottom:var(--space-xs);
  border-bottom:var(--border-ornament);
  margin-bottom:var(--space-sm);
  display:flex;
  align-items:center;
  gap:var(--space-xs);
}

.buffet-list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.6rem;

  & li {
    font-size:var(--fs-body);
    color:var(--clr-text-dark);
    padding-left:1.4em;
    position:relative;
    opacity:0.85;

    &::before {
      content:'▸';
      position:absolute;
      left:0;
      color:var(--clr-amber);
    }
  }
}

/* ============================================================
   15. WEITERE SPEISEN / EXTRAS
   ============================================================ */
.extras-section {
  padding-block:var(--space-xl);
  padding-inline:var(--space-md);
  background-color:oklch(9% 0 0 / 0.97);
  background-image:url('Nord-bg.jpg');
  background-blend-mode:multiply;
  background-size:cover;
  background-attachment:fixed;
  color:var(--clr-text-light);
}

.extras__inner { max-width:1200px; margin-inline:auto; }

.extras-grid {
  display:grid;
  gap:var(--space-md);
  grid-template-columns:1fr;
}

.extras-block {
  background:oklch(100% 0 0 / 0.04);
  border:1px solid oklch(63% 0.13 55 / 0.2);
  border-radius:var(--radius-md);
  padding:var(--space-md);
}

.extras-block__title {
  font-family:var(--ff-heading);
  font-size:1rem;
  font-weight:600;
  color:var(--clr-amber-light);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:var(--space-sm);
  padding-bottom:var(--space-xs);
  border-bottom:1px solid oklch(63% 0.13 55 / 0.25);
  display:flex;
  align-items:center;
  gap:0.4em;
}

.extras-list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}

.extras-item {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-sm);
  font-size:var(--fs-small);
  color:var(--clr-text-light);
  opacity:0.8;
  border-bottom:1px dotted oklch(63% 0.13 55 / 0.1);
  padding-bottom:0.3rem;

  &:last-child { border-bottom:none; }
}

.extras-item__price {
  color:var(--clr-amber);
  font-weight:700;
  white-space:nowrap;
  font-family:var(--ff-heading);
}

.extras__note {
  text-align:center;
  margin-top:var(--space-lg);
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
}

/* ============================================================
   16. FOOTER
   ============================================================ */
footer {
  background-color:var(--clr-dark-alt);
  background-image:url('Nord-bg.jpg');
  background-blend-mode:multiply;
  background-size:cover;
  color:var(--clr-text-light);
  padding-block:var(--space-xl);
  padding-inline:var(--space-md);
  border-top:3px solid oklch(63% 0.13 55 / 0.4);
}

.footer__inner { max-width:1100px; margin-inline:auto; }

.footer__cta-block {
  text-align:center;
  padding-bottom:var(--space-lg);
  border-bottom:1px solid oklch(63% 0.13 55 / 0.2);
  margin-bottom:var(--space-lg);
}

.footer__cta-headline {
  font-family:var(--ff-heading);
  font-size:var(--fs-h2);
  font-weight:800;
  color:var(--clr-text-light);
  margin-bottom:var(--space-xs);
}

.footer__cta-sub {
  color:var(--clr-text-muted);
  margin-bottom:var(--space-md);
}

.footer__cta-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  justify-content:center;
}

.footer__grid {
  display:grid;
  gap:var(--space-lg);
  grid-template-columns:1fr;
}

.footer-col__title {
  font-family:var(--ff-display);
  font-size:0.9rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--clr-amber);
  margin-bottom:var(--space-sm);
}

.footer-col__logo {
  font-family:var(--ff-display);
  font-size:clamp(1.4rem, 3vw, 2rem);
  color:var(--clr-amber-light);
  margin-bottom:var(--space-xs);
}

.footer-col__tagline {
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
  margin-bottom:var(--space-md);
  max-width:35ch;
  line-height:1.6;
}

.contact-list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.6rem;

  & a {
    color:var(--clr-text-light);
    text-decoration:none;
    font-size:var(--fs-small);
    display:flex;
    align-items:center;
    gap:0.6em;
    opacity:0.85;
    transition:color var(--transition-base), opacity var(--transition-base);

    &:hover, &:focus-visible {
      color:var(--clr-amber-light);
      opacity:1;
    }
  }
}

/* Nicht-verlinkte Kontaktzeile */
.contact-list__item {
  font-size:var(--fs-small);
  opacity:0.75;
  display:flex;
  align-items:center;
  gap:0.6em;
}

.contact-icon {
  color:var(--clr-amber);
  font-size:1rem;
  flex-shrink:0;
}

.footer__legal {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  justify-content:space-between;
  align-items:center;
  padding-top:var(--space-lg);
  border-top:1px solid oklch(63% 0.13 55 / 0.15);
  margin-top:var(--space-lg);
}

.footer__legal-links {
  display:flex;
  gap:var(--space-md);
  list-style:none;
  flex-wrap:wrap;

  & a {
    font-size:var(--fs-small);
    color:var(--clr-text-muted);
    text-decoration:none;
    transition:color var(--transition-base);

    &:hover, &:focus-visible { color:var(--clr-amber); }
  }
}

.footer__copyright {
  font-size:var(--fs-small);
  color:var(--clr-text-muted);
  opacity:0.6;
}

/* Allergen-Legende */
.allergen-legend {
  background:oklch(100% 0 0 / 0.04);
  border:1px solid oklch(63% 0.13 55 / 0.2);
  border-radius:var(--radius-md);
  padding:var(--space-md);
  margin-top:var(--space-md);
}

.allergen-legend__title {
  font-family:var(--ff-heading);
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--clr-amber);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:var(--space-xs);
}

.allergen-legend__list {
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 1.2rem;
  list-style:none;

  & li {
    font-size:0.78rem;
    color:var(--clr-text-muted);

    & strong { color:var(--clr-amber-light); }
  }
}

.allergen-legend__note {
  font-size:0.72rem;
  color:var(--clr-text-muted);
  margin-top:0.5rem;
}

/* ============================================================
   17. BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
  position:fixed;
  bottom:var(--space-md);
  right:var(--space-md);
  z-index:99;
  background:var(--clr-amber);
  color:var(--clr-dark);
  border:none;
  border-radius:50%;
  width:3rem;
  height:3rem;
  font-size:1.3rem;
  cursor:pointer;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition-base), transform var(--transition-base);
  box-shadow:var(--shadow-card);

  &.visible {
    opacity:1;
    pointer-events:auto;
  }

  &:hover, &:focus-visible {
    transform:translateY(-3px);
    background:var(--clr-amber-light);
  }
}

/* ============================================================
   18. IMPRESSUM / DATENSCHUTZ – SEITEN-LAYOUT
   ============================================================ */
.legal-page {
  max-width:800px;
  margin-inline:auto;
  padding:calc(var(--space-xl) + 75px) var(--space-md) var(--space-xl);
  color:var(--clr-text-light);
}

.legal-page h1 {
  font-family:var(--ff-display);
  font-size:var(--fs-h1);
  color:var(--clr-amber-light);
  margin-bottom:var(--space-md);
}

.legal-page h2 {
  font-family:var(--ff-heading);
  font-size:var(--fs-h3);
  color:var(--clr-amber);
  margin-top:var(--space-lg);
  margin-bottom:var(--space-sm);
  padding-bottom:var(--space-xs);
  border-bottom:1px solid oklch(63% 0.13 55 / 0.25);
}

.legal-page h3 {
  font-family:var(--ff-heading);
  font-size:1rem;
  font-weight:600;
  color:var(--clr-cream);
  margin-top:var(--space-md);
  margin-bottom:0.5rem;
}

.legal-page p,
.legal-page li {
  font-size:var(--fs-body);
  color:var(--clr-text-muted);
  line-height:1.8;
  margin-bottom:0.75rem;
}

.legal-page ul {
  list-style:disc;
  padding-left:1.5rem;
  margin-bottom:var(--space-sm);
}

.legal-page a {
  color:var(--clr-amber);
  text-decoration:underline;

  &:hover, &:focus-visible { color:var(--clr-amber-light); }
}

.legal-page address {
  font-style:normal;
  background:oklch(100% 0 0 / 0.04);
  border:1px solid oklch(63% 0.13 55 / 0.2);
  border-left:3px solid var(--clr-amber);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:var(--space-md);
  margin-bottom:var(--space-md);
  color:var(--clr-text-light);
  line-height:2;
}

.legal-back-link {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:var(--fs-small);
  color:var(--clr-amber);
  text-decoration:none;
  margin-bottom:var(--space-lg);
  transition:color var(--transition-base);

  &:hover, &:focus-visible {
    color:var(--clr-amber-light);
  }

  &::before { content:'←'; }
}

/* ============================================================
   19. MEDIA QUERIES — TABLET (ab 600px)
   WICHTIG: Alle @media-Blöcke ausnahmslos am Ende der Datei.
   ============================================================ */
@media (min-width: 600px) {
  .extras-grid { grid-template-columns:1fr 1fr; }
  .buffet-cols { grid-template-columns:1fr 1fr; }
  .menu-grid   { grid-template-columns:1fr 1fr; }

  /* Collage auf Tablet: leichtere Überlappung */
  .collage__img--a { margin-right:-1.5rem; margin-top:1.5rem; }
  .collage__img--b { margin-left:-1.5rem; }
  .collage__img--c { margin-top:-1rem; margin-left:-0.8rem; }

  .footer__cta-buttons { flex-direction:row; }
}

/* ============================================================
   20. MEDIA QUERIES — DESKTOP NAV (ab 768px)
   ============================================================ */
@media (min-width: 768px) {
  .nav__hamburger     { display:none; }
  .nav__desktop-links { display:flex; }
  .nav__cta           { display:inline-flex; }
  .nav__mobile-overlay { display:none !important; }
}

/* ============================================================
   21. MEDIA QUERIES — DESKTOP (ab 900px)
   ============================================================ */
@media (min-width: 900px) {
  .galerie__layout   { grid-template-columns:1fr 1fr; }
  .highlight__inner  { grid-template-columns:1fr 1fr; }
  .menu-grid         { grid-template-columns:repeat(3, 1fr); }
  .extras-grid       { grid-template-columns:repeat(4, 1fr); }
  .footer__grid      { grid-template-columns:2fr 1fr 1fr; }
}

/* ============================================================
   22. MEDIA QUERIES — MOBILE KORREKTUREN (max 599px)
   ============================================================ */
@media (max-width: 599px) {
  .section,
  .highlight-section,
  .buffet-section,
  .galerie-section,
  .extras-section,
  footer { padding-inline:var(--space-sm); }

  /* Collage auf Mobile: einfache Stapelung */
  .collage { grid-template-columns:1fr; grid-template-rows:auto; gap:var(--space-sm); max-width:100%; }
  .collage__img--a { grid-column:1; grid-row:1; margin:0; height:clamp(200px, 60vw, 300px); }
  .collage__img--b { grid-column:1; grid-row:2; margin:0; height:clamp(160px, 48vw, 240px); }
  .collage__img--c { grid-column:1; grid-row:3; margin:0; height:clamp(140px, 42vw, 200px); }

  .price-cards { grid-template-columns:1fr; }
  .buffet__intro { flex-direction:column; }

  .footer__cta-buttons { flex-direction:column; align-items:stretch; }
  .footer__cta-buttons .btn { justify-content:center; }
}

/* ============================================================
   23. REDUCED MOTION
   Animationen deaktivieren wenn im OS eingestellt.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  .hero__scroll-hint { animation:none; }
}

/* ============================================================
   24. HIGH CONTRAST
   Stärkere Kontraste NUR wenn im OS eingestellt.
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --clr-amber:oklch(70% 0.16 55);
    --clr-amber-light:oklch(80% 0.16 65);
    --clr-text-muted:oklch(75% 0.02 80);
    --clr-text-light:oklch(98% 0 0);
  }

  .btn--outline { border-width:3px; }
  .site-nav.scrolled { border-bottom-width:2px; }
}