/* =========================================================
   Il Centro – Stylesheet
   Referenzbreite Entwurf: 1920 px, darunter fluessig skalieren.
   Umbruchpunkte: Tablet ab 1024 px, Handy ab 640 px.
   ========================================================= */

/* ---- Schriften (lokal eingebunden, kein Google-CDN, Datenschutz) ----
   Ersatzschriften laut CLAUDE.md: Schreibschrift -> Great Vibes,
   Fliesstext -> Source Sans 3 (Variable Font, Achse wght). */
/* font-display:swap statt optional.
   optional gibt der Schrift nur ein winziges Zeitfenster (~100 ms) und tauscht
   sie danach NICHT mehr ein – ist sie beim ersten Rendern nicht schon im Cache,
   bleibt für diesen Seitenaufruf die Ersatzschrift stehen. Genau das passierte
   auf der frisch geladenen Speisekarten-Seite (Great Vibes fiel auf eine
   Serifenschrift zurück), während index.html durch häufige Besuche im Cache lag.
   swap zeigt zunächst die Ersatzschrift und tauscht Great Vibes ein, sobald die
   Datei da ist – zusammen mit dem <link rel=preload> ist das Umschalten minimal.
   So erscheint die Designschrift zuverlässig auf allen Seiten. */
@font-face{
  font-family:"Great Vibes";
  src:url("fonts/great-vibes.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("fonts/source-sans-3.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --gold-hell:#D0B068;
  --gold-dunkel:#987F48;
  --grau:#4D4D4D;
  --text:#1A1A1A;

  --font-script:"Great Vibes";
  --font-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:#000;
  /* Absicherung: nie horizontales Scrollen (clip erzeugt keinen Scroll-Container) */
  overflow-x:clip;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* =========================================================
   HINWEISBANNER (ganz oben, vom Kunden gepflegt)
   Erscheint nur, wenn im Pflegebereich Text + „Anzeigen“ gesetzt sind
   (siehe public/inc/hinweis.php). Dezenter Balken in Seitenfarben,
   auf dem Handy nur wenige Zeilen hoch.
   ========================================================= */
.site-hinweis{
  background:var(--gold-dunkel);
  color:#fff;
  font-family:var(--font-body);
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.site-hinweis__inner{
  max-width:1100px;
  margin-inline:auto;
  padding:clamp(.5rem,1.4vw,.85rem) clamp(1rem,4vw,2rem);
  font-size:clamp(.95rem,1.15vw,1.15rem);
  line-height:1.45;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;   /* Fallback fuer aeltere Browser ohne svh */
  min-height:100svh;  /* stabile Hoehe auf Handys (Adressleiste ein-/ausfahrend) */
  display:flex;
  flex-direction:column;
  color:#fff;
  /* Innenaufnahme des Bistros, leicht abgedunkelt wie im Entwurf.
     Drei Stufen in Reihenfolge – jede spaetere gewinnt nur, wenn der Browser sie
     versteht; sonst bleibt die vorige gueltig, sodass IMMER ein Hero-Bild da ist:
     1) klassisch (JPEG) – jeder Browser,
     2) -webkit-image-set – aeltere Safari/WebKit,
     3) image-set – moderne Browser (WebP bevorzugt, sonst JPEG). */
  background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("../img/bistro-innen.jpg") center/cover no-repeat;
  background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    -webkit-image-set(
      url("../img/bistro-innen.webp") type("image/webp"),
      url("../img/bistro-innen.jpg") type("image/jpeg")
    ) center/cover no-repeat;
  background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    image-set(
      url("../img/bistro-innen.webp") type("image/webp"),
      url("../img/bistro-innen.jpg") type("image/jpeg")
    ) center/cover no-repeat;
}

/* ---- Navigation ---- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:clamp(1.25rem,3.4vw,4rem) clamp(1.25rem,4.7vw,5.6rem);
}
.nav__menu{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(1rem,2.6vw,3.1rem);
}
.nav__menu a{
  font-size:clamp(1rem,1.45vw,1.72rem);
  font-weight:400;
  letter-spacing:.2px;
  color:#fff;
  padding-bottom:.15em;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease,color .15s ease;
}
.nav__menu a:hover{border-bottom-color:rgba(255,255,255,.6);}
.nav__menu a.is-active{border-bottom-color:#fff;}

.nav__actions{
  display:flex;
  gap:.6rem;
  flex-shrink:0;
}
.iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(44px,3.7vw,68px);
  height:clamp(44px,3.7vw,68px);
  color:#fff;
  background:rgba(120,120,120,.45);
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  backdrop-filter:blur(2px);
  transition:background .15s ease;
}
.iconbtn:hover{background:rgba(150,150,150,.6);}
.iconbtn svg{width:60%;height:60%;}

/* ---- Mittiger Inhalt ---- */
.hero__content{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(1rem,2vw,2rem) 1rem clamp(3rem,7vw,7rem);
}
.hero__logo{
  width:clamp(180px,13.7vw,262px);
  height:auto;
  margin-top:clamp(.5rem,2vw,2.2rem);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
/* Platzhalter, solange die Logo-Datei fehlt */
.hero__logo.is-missing{
  width:clamp(180px,13.7vw,262px);
  aspect-ratio:5/3;
  display:flex;
  background:rgba(0,0,0,.35);
  border:1px dashed rgba(255,255,255,.5);
  border-radius:10px;
  position:relative;
}
.hero__logo.is-missing::after{
  content:"il Centro (Logo fehlt)";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:rgba(255,255,255,.8);
}

.hero__eyebrow{
  font-family:var(--font-script);
  font-weight:400;
  margin:clamp(1.5rem,4.2vw,3.6rem) 0 0;
  font-size:clamp(2rem,3.4vw,4.1rem);
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero__claim{
  font-family:var(--font-script);
  font-weight:400;
  margin:clamp(.4rem,1vw,1rem) 0 0;
  font-size:clamp(2.8rem,5.4vw,6.4rem);
  line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

/* ---- Buttons ---- */
.hero__buttons{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(.7rem,1.1vw,1.1rem);
  margin-top:clamp(2.5rem,6vw,6rem);
}
.hero__buttons-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(.7rem,1.3vw,1.4rem);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(180px,12.8vw,246px);
  padding:clamp(.7rem,1vw,1.05rem) clamp(1.2rem,1.6vw,2rem);
  font-family:var(--font-body);
  font-size:clamp(1.1rem,1.35vw,1.6rem);
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  transition:filter .15s ease,background .15s ease;
}
/* Bistro / Catering: milchig-grau */
.btn--glass{
  background:rgba(190,190,190,.5);
  border-color:rgba(255,255,255,.35);
  color:#fff;
  backdrop-filter:blur(2px);
}
.btn--glass:hover{background:rgba(210,210,210,.62);}
.btn--gold-text{color:var(--gold-hell);}
/* Speisekarte: Gold */
.btn--solid{
  background:var(--gold-hell);
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.btn--solid:hover{filter:brightness(1.05);}

/* =========================================================
   WILLKOMMEN
   ========================================================= */
.container{
  width:100%;
  max-width:2040px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4.6vw,90px);
}
.welcome{
  background:#fff;
  color:var(--text);
  padding-block:clamp(1.7rem,3.7vw,4rem) clamp(2rem,4.7vw,5.3rem);
  text-align:center;
}
.welcome__title{
  font-family:var(--font-script);
  font-weight:400;
  margin:0;
  /* wie .section-title: Zeilenhoehe schuetzt die Great-Vibes-Unterlaengen */
  line-height:1.25;
  /* Groesse an die Viewport-Breite gekoppelt. Der Mindestwert (2.5rem) bleibt
     deutlich groesser als der Fliesstext darunter und wirkt als gestalterisches
     Element; auf schmalen Bildschirmen bricht die Zeile daher in zwei Zeilen um
     ("Willkommen im" / "Il Centro" – Letzteres per nowrap zusammengehalten),
     statt klein zu schrumpfen. Auf dem Desktop einzeilig bis 7rem. */
  font-size:clamp(2.5rem,5.8vw,7rem);
}
.welcome__title-dark{
  color:var(--text);
  text-shadow:0 2px 4px rgba(0,0,0,.18);
}
.welcome__title-gold{
  background:linear-gradient(180deg,#E1C57F 0%,var(--gold-hell) 45%,var(--gold-dunkel) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* Great Vibes greift mit Schwüngen seitlich UND oben über den Textkasten
     hinaus; da der Goldverlauf per background-clip auf diesen Kasten begrenzt
     ist, würde u. a. der linke Schwung des „I“ (Il Centro) und der obere Schwung
     abgeschnitten. Der symmetrische Innenabstand (in em) gibt den Schwüngen
     Platz im Verlaufskasten und hält den Text zugleich zentriert.
     KEIN negativer Außenrand mehr: der schob den (bemalten) Kasten auf schmalen
     Bildschirmen über den rechten Viewport-Rand hinaus (horizontaler Überlauf).
     „Il Centro“ bleibt als Einheit zusammen, damit nicht mitten im Namen
     umbrochen wird; die Schriftgröße wird auf schmalen Bildschirmen begrenzt
     (siehe @media max-width:640px), sodass die Zeile in den Viewport passt. */
  padding:0.12em 0.18em;
  white-space:nowrap;
}
.welcome__subtitle{
  font-family:var(--font-body);
  color:var(--grau);
  margin:clamp(.4rem,.8vw,.8rem) 0 0;
  font-size:clamp(1.2rem,1.7vw,2rem);
}
.welcome__text{
  font-family:var(--font-body);
  color:var(--text);
  max-width:1500px;
  margin:clamp(2rem,4vw,4rem) auto 0;
  font-size:clamp(1.05rem,1.55vw,1.85rem);
  line-height:1.55;
}

/* ---- Drei Kacheln ---- */
.tiles{
  list-style:none;
  margin:clamp(3rem,6vw,7rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3.4rem);
}
/* Inhaltsbilder stehen seit der WebP-Umstellung in <picture>. Der Wrapper ist
   per Default ein Inline-Element und liess die Bilder auf ihre width/height-
   Attributgroesse (bis 1280 px) anwachsen -> sprengte auf dem Handy die
   Bildschirmbreite. Als Block nimmt <picture> die volle Containerbreite ein,
   damit greift die width:100%/max-width:100% der Bilder wieder. height:auto
   fuehrt die Hoehe proportional mit; aspect-ratio/object-fit der Bildklassen und
   die width/height-Attribute (gegen CLS) bleiben erhalten. */
picture{display:block;}
picture img{max-width:100%;height:auto;}
/* Logo als <picture> (SVG mit PNG-Rueckfall): der Wrapper erzeugt KEINE eigene
   Box, damit das <img> im Layout genau wie bisher als direktes Kind wirkt und die
   vorhandene Zentrierung/Groesse (Hero, Unterseiten-Koepfe, Footer) unveraendert
   greift. Ohne dies wuerde die Regel picture{display:block} die Logos vollbreit
   stellen und die Zentrierung brechen. */
.logo-pic{display:contents;}

.tile__img{
  width:100%;
  aspect-ratio:1.72;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.4);
}
.tile__caption{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--text);
  margin:clamp(1rem,1.8vw,2rem) 0 0;
  font-size:clamp(1.5rem,2.2vw,2.7rem);
  /* Great Vibes ragt mit Anfangs-/Endschwüngen (z. B. das „T“ von „Täglich“
     oder das End-„s“ von „Menüs“) über die Textbox hinaus. Großzügige
     Zeilenhöhe schützt Ober-/Unterlängen; der horizontale Innenabstand in em
     gibt den Schwüngen Platz in der eigenen Box, sodass sie nicht auf das
     Verhalten eines Elternelements angewiesen sind. Der gleich große negative
     Außenabstand nimmt den Abstand wieder heraus – die Kachelbreite und die
     Ausrichtung (Welcome links, Catering zentriert) bleiben unverändert. */
  line-height:1.3;
  padding:0.05em 0.2em;
  margin-inline:-0.2em;
  text-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* =========================================================
   ÜBER UNS (Aufbau wie Backwaren: Ueberschrift, Text + Bild)
   ========================================================= */
.about{
  background:#fff;
  color:var(--text);
  padding-block:clamp(1.7rem,3.7vw,4rem) clamp(2rem,4.7vw,5.3rem);
}
.about__body{
  margin-top:clamp(2.5rem,5vw,5rem);
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(2rem,5vw,5.5rem);
  align-items:center;
}
.about__text{max-width:640px;}
.about__text p,
.foodtruck__text p{
  font-family:var(--font-body);
  color:var(--text);
  margin:0 0 1em;
  font-size:clamp(1.05rem,1.4vw,1.7rem);
  line-height:1.6;
}
.about__text p:last-child,
.foodtruck__text p:last-child{margin-bottom:0;}
.about__media{width:clamp(300px,38vw,560px);flex-shrink:0;}
.about__img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 14px 28px -8px rgba(0,0,0,.45);
}

/* =========================================================
   FOODTRUCK (Aufbau wie „Über Uns")
   ========================================================= */
.foodtruck{
  background:#fff;
  color:var(--text);
  padding-block:clamp(1.7rem,3.7vw,4rem) clamp(2rem,4.7vw,5.3rem);
}
/* Ohne Pflege-Text: nur das Bild unter der Überschrift, mittig. */
.foodtruck__body{
  margin-top:clamp(2rem,4vw,3.5rem);
  display:flex;
  justify-content:center;
}
/* Mit Pflege-Text: Text ÜBER dem Bild, beides zentriert gestapelt. */
.foodtruck__body--stacked{
  flex-direction:column;
  align-items:center;
  gap:clamp(1.5rem,3.5vw,3rem);
}
.foodtruck__text{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  /* Schriftgröße, Zeilenhöhe und Absatzabstand kommen von .foodtruck__text p –
     dieselbe Regel wie beim Über-uns-Text (.about__text p). */
}
.foodtruck__media{width:clamp(300px,38vw,560px);flex-shrink:0;}
.foodtruck__img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 14px 28px -8px rgba(0,0,0,.45);
}

/* =========================================================
   BISTRO (Öffnungszeiten + Buttons)
   ========================================================= */
.bistro{
  background:#fff;
  color:var(--text);
  padding-block:clamp(1.7rem,3.7vw,4rem) clamp(2rem,4.7vw,5.3rem);
  text-align:center;
}
.bistro__hours{
  margin-top:clamp(2rem,4vw,3.5rem);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1.5rem,5vw,5rem);
}
.bistro__hours-item{display:flex;flex-direction:column;gap:.35rem;}
.bistro__hours-label{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--gold-dunkel);
  font-size:clamp(1.15rem,1.7vw,1.5rem);
}
.bistro__hours-time{
  font-family:var(--font-body);
  color:var(--text);
  font-size:clamp(1.05rem,1.4vw,1.4rem);
}
.bistro__buttons{
  margin-top:clamp(2rem,4vw,3.5rem);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(1.2rem,3vw,2.5rem);
}
.bistro__dl{display:flex;flex-direction:column;align-items:center;gap:.5rem;}

/* =========================================================
   BACKWAREN
   ========================================================= */
/* wiederverwendbare Schreibschrift-Ueberschrift (dunkel + gold) */
.section-title{
  font-family:var(--font-script);
  font-weight:400;
  margin:0;
  /* grosszuegige Zeilenhoehe: Great Vibes-Unterlaengen/Schwuenge sonst
     unten angeschnitten (Ink-Hoehe > Zeilenbox bei 1.05) */
  line-height:1.25;
  text-align:center;
  font-size:clamp(2.8rem,5.8vw,7rem);
}
.text-dark{
  color:var(--text);
  text-shadow:0 2px 4px rgba(0,0,0,.18);
}
.text-gold{
  background:linear-gradient(180deg,#E1C57F 0%,var(--gold-hell) 45%,var(--gold-dunkel) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* Great Vibes ragt mit Schwüngen seitlich UND oben über den Textkasten hinaus.
     Der Goldverlauf ist per background-clip auf diesen Kasten begrenzt – ohne
     Innenabstand würden die Schwünge (z. B. bei „Gäste“, „anfragen“, „Uns“)
     links/rechts/oben abgeschnitten. Der Innenabstand vergrößert den
     Verlaufskasten in em (skaliert mit der Schrift); der gleich große negative
     Außenabstand hält Wortabstand und Zentrierung, sodass die Überschrift weder
     aus der Mitte rutscht noch auf schmalen Bildschirmen früher umbricht. */
  padding:0.12em 0.18em;
  margin:0 -0.18em;
}

.baked{
  background:#fff;
  color:var(--text);
  padding-block:clamp(1.7rem,3.7vw,4rem) clamp(2rem,4.7vw,5.3rem);
}
.baked__hours{
  text-align:center;
  font-family:var(--font-script);
  color:var(--grau);
  margin:clamp(1.4rem,3vw,3rem) 0 0;
  font-size:clamp(1.6rem,2.6vw,3.1rem);
  line-height:1.2;
}
/* Verweis „Tägliche Angebote“ (ersetzt Bilder/Text im Backwaren-Abschnitt). */
.baked__link{
  margin-top:clamp(1.6rem,3.5vw,3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
}
.baked__link-hint{
  font-family:var(--font-script);
  color:var(--grau);
  font-size:clamp(1.4rem,2.2vw,2.4rem);
  line-height:1.2;
  margin:0;
}
.baked__body{
  margin-top:clamp(2.5rem,5vw,5rem);
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(2rem,5vw,5.5rem);
  align-items:center;
}
.baked__text{max-width:640px;}
.baked__subtitle{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--text);
  margin:0 0 .35em;
  font-size:clamp(1.8rem,2.6vw,3rem);
  line-height:1.1;
}
.baked__desc{
  font-family:var(--font-body);
  color:var(--text);
  margin:0;
  font-size:clamp(1.05rem,1.4vw,1.7rem);
  line-height:1.6;
}
/* zwei hochformatige Bilder, versetzt (links tiefer, rechts hoeher) */
.baked__images{
  display:flex;
  align-items:flex-start;
  gap:clamp(.75rem,1.5vw,1.5rem);
  width:clamp(300px,34vw,600px);
  flex-shrink:0;
}
.baked__img{
  width:50%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 14px 28px -8px rgba(0,0,0,.45);
}
.baked__img--a{margin-top:clamp(1.5rem,4vw,4rem);}

/* Backwaren-Intro (zentriert) + pflegbare Angebotsliste aus dem Pflegebereich.
   Bildstil (Hochformat 3/4, Schatten) bewusst wie die bisherigen Backwaren-Bilder,
   damit die Anmutung erhalten bleibt. */
.baked__intro{
  max-width:760px;
  margin:clamp(2.5rem,5vw,5rem) auto 0;
  text-align:center;
}
.baked__list{
  list-style:none;
  margin:clamp(2.2rem,4.5vw,4rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(1.4rem,3vw,2.8rem);
}
.baked-item{display:flex;flex-direction:column;}
.baked-item__img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 14px 28px -8px rgba(0,0,0,.45);
}
.baked-item__body{margin-top:.9rem;}
.baked-item__name{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--text);
  margin:0;
  /* wie .tile__caption: Zeilenhöhe + em-Innenabstand schützen die Schwünge;
     der negative Außenabstand hält den Namen linksbündig zu Preis/Beschreibung. */
  line-height:1.3;
  font-size:clamp(1.5rem,2vw,2.1rem);
  padding:0.05em 0.2em;
  margin-inline:-0.2em;
}
.baked-item__price{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--gold-dunkel);
  margin:.15rem 0 0;
  font-size:clamp(1.05rem,1.3vw,1.25rem);
}
.baked-item__desc{
  font-family:var(--font-body);
  color:var(--text);
  margin:.35rem 0 0;
  font-size:clamp(.98rem,1.15vw,1.15rem);
  line-height:1.55;
}

/* =========================================================
   CATERING
   ========================================================= */
.catering{
  background:#fff;
  color:var(--text);
  padding-block:clamp(1.7rem,3.7vw,4rem) clamp(2rem,4.7vw,5.3rem);
  text-align:center;
}
.catering__subtitle{
  font-family:var(--font-body);
  color:var(--grau);
  margin:clamp(.4rem,.8vw,.8rem) 0 0;
  font-size:clamp(1.2rem,1.7vw,2rem);
}
.catering__text{
  font-family:var(--font-body);
  color:var(--text);
  max-width:1500px;
  margin:clamp(2.2rem,4.5vw,4.5rem) auto 0;
  font-size:clamp(1.05rem,1.5vw,1.85rem);
  line-height:1.55;
}

/* Gaestestimme */
.testimonial{margin-top:clamp(3rem,7vw,8rem);}
.testimonial__stars{
  display:block;
  width:clamp(150px,20vw,230px);
  height:auto;
  margin:clamp(1.5rem,3vw,2.6rem) auto;
  color:var(--gold-hell);
  fill:currentColor;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.testimonial__quote{
  font-family:var(--font-body);
  color:var(--text);
  max-width:1400px;
  margin:0 auto;
  font-size:clamp(1.05rem,1.5vw,1.85rem);
  line-height:1.6;
}
/* Herkunft der Bewertung: kleiner und dezenter als der Zitattext, mittig. */
.testimonial__source{
  font-family:var(--font-body);
  color:var(--grau);
  text-align:center;
  margin:clamp(.8rem,1.6vw,1.2rem) auto 0;
  font-size:clamp(.85rem,1vw,1.05rem);
  line-height:1.4;
}

/* CTA – Schreibschrift, verlinkt aufs Anfrageformular */
.catering__cta{margin:clamp(3rem,6vw,6.5rem) 0 0;}
.catering__cta a{
  display:inline-block;
  font-family:var(--font-script);
  font-weight:400;
  line-height:1.05;
  font-size:clamp(2.4rem,4.6vw,5rem);
  transition:opacity .15s ease;
}
.catering__cta a:hover{opacity:.88;}

/* =========================================================
   ANFRAGEFORMULAR (reine Optik)
   ========================================================= */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.form-section{
  padding-block:clamp(1.7rem,4vw,4.3rem);
  background:
    linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
    url("../img/chef-styling-the-dishes-at-the-restaurant-2026-01-08-07-29-33-utc.jpg") center/cover no-repeat;
}
.form-panel{
  background:rgba(236,235,231,.92);
  border-radius:14px;
  padding:clamp(1.25rem,3vw,3rem);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.form-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(.8rem,1.6vw,1.25rem);
  align-items:start;
}
.form-col{display:flex;flex-direction:column;gap:clamp(.8rem,1.4vw,1.25rem);}
/* Elemente über die volle Formularbreite (Privat/Firma, Nachricht, Social) */
.form-col--full{grid-column:1 / -1;}

/* Privat/Firma-Auswahl + (nur bei Firma) Firmenbezeichnung.
   Ein-/Ausblenden rein über CSS am gewählten Radio-Knopf – kein JavaScript. */
.kundentyp{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;}
.kundentyp__legend{flex-basis:100%;font-family:var(--font-body);font-size:.9rem;color:#6c6a66;}
.kundentyp__radio{width:1.15rem;height:1.15rem;accent-color:var(--gold-dunkel);flex:none;}
.kundentyp__option{
  display:inline-flex;align-items:center;
  min-height:44px;                       /* Antippfläche */
  margin-right:.4rem;padding-right:.3rem;
  font-family:var(--font-body);font-size:1.05rem;color:#1f1f1f;cursor:pointer;
}
.kundentyp__firma{
  flex-basis:100%;width:100%;
  display:none;                          /* Standard: aus (Privatperson) */
  grid-template-columns:1fr;
  gap:clamp(.8rem,1.4vw,1.25rem);
  margin-top:.2rem;
}
#kt-firma:checked ~ .kundentyp__firma{display:grid;}

/* Feldbezogene Fehlermeldung (von js/main.js gesetzt) */
.field__error,.kundentyp__firma .field__error{
  color:#b3261e;font-family:var(--font-body);font-size:.85rem;line-height:1.35;margin-top:.2rem;
}
.field.has-error{outline:2px solid #b3261e;outline-offset:1px;}

.field{
  background:#f4f3f0;
  border-radius:10px;
  padding:.55rem 1rem;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-height:3.5rem;
  justify-content:center;
}
.field__label{font-family:var(--font-body);font-size:.9rem;color:#6c6a66;}
.field input,.field select,.field textarea{
  border:0;background:transparent;outline:none;width:100%;
  font-family:var(--font-body);font-size:1.05rem;color:#1f1f1f;
}
.field select{cursor:pointer;}
.field__row{display:flex;align-items:center;gap:.5rem;}
.field__row input{flex:1;width:auto;}
.field__sep{color:#6c6a66;}
.field--message{flex:1;}
.field--message textarea{
  flex:1;min-height:clamp(150px,20vh,260px);resize:vertical;line-height:1.5;
}

.form-col--message{display:flex;flex-direction:column;gap:clamp(.8rem,1.4vw,1.25rem);}
.form-msg-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;}
.form-contact-icons{display:flex;gap:.6rem;}
.form-section .iconbtn{
  background:#4d4d4d;
  border-color:rgba(255,255,255,.15);
  color:var(--gold-hell);
  backdrop-filter:none;
}
.form-section .iconbtn:hover{background:#5a5a5a;}
.form-social{display:flex;flex-direction:column;gap:.5rem;}
.form-social__label{color:#4a4a4a;font-size:1rem;}
.form-social__links{display:flex;gap:1rem;}
.social-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.social-btn{
  width:48px;height:48px;border-radius:8px;background:#4d4d4d;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-hell);
}
.social-btn:hover{background:#5a5a5a;}
.social-btn svg{width:60%;height:60%;}
.social-item span{font-size:.9rem;color:#4a4a4a;}

.form-actions{margin-top:clamp(1.5rem,3vw,2.5rem);text-align:center;}
.form-submit{min-width:clamp(200px,20vw,280px);}
.form-note{
  margin:clamp(.9rem,1.6vw,1.2rem) 0 0;
  color:#5a5a5a;font-family:var(--font-body);font-size:.95rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--grau);
  color:#e4e0d8;
  font-family:var(--font-body);
  padding-block:clamp(2.5rem,5vw,4.5rem);
}
.footer__grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:clamp(2rem,4vw,3.5rem);
}
.footer__col{text-align:center;}
.footer__heading{
  font-family:var(--font-script);
  font-weight:400;
  color:#f3efe6;
  margin:0 0 clamp(.7rem,1.4vw,1.3rem);
  font-size:clamp(1.9rem,2.4vw,2.9rem);
  line-height:1;
}
.footer__col p{
  margin:.2em 0;
  font-size:clamp(1rem,1.15vw,1.3rem);
  line-height:1.55;
}
.footer a{color:inherit;text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.footer__logo{
  width:clamp(140px,12vw,200px);
  height:auto;
  margin:0 auto clamp(1rem,2vw,1.5rem);
}
.footer__icons{
  display:flex;
  justify-content:center;
  gap:.6rem;
}
.footer .iconbtn{
  width:clamp(48px,3.4vw,60px);
  height:clamp(48px,3.4vw,60px);
  background:#3d3d3d;
  border-color:rgba(255,255,255,.15);
  color:var(--gold-hell);
  backdrop-filter:none;
}
.footer .iconbtn:hover{background:#4a4a4a;}

/* =========================================================
   KLICK-FENSTER (Modal) fuer die Catering-Kacheln
   ========================================================= */
/* Kacheln als anklickbare Flaeche kenntlich machen */
.tiles--catering .tile{cursor:pointer;}
.tiles--catering .tile:focus-visible{outline:3px solid var(--gold-hell);outline-offset:5px;border-radius:2px;}
.tiles--catering .tile:hover .tile__img{filter:brightness(1.04);}
/* Verlinkte Kachel („Individuelle Buffets“): fuehrt auf eine Unterseite statt
   ein Fenster zu oeffnen. Optik identisch zu den uebrigen Kacheln. */
.tiles--catering .tile--link{cursor:pointer;}
.tiles--catering .tile__link{display:block;color:inherit;text-decoration:none;}
.tiles--catering .tile__link:focus-visible{outline:3px solid var(--gold-hell);outline-offset:5px;border-radius:2px;}
.tiles--catering .tile--link:hover .tile__img{filter:brightness(1.04);}
.tiles--catering .tile__link .tile__caption{display:block;}

.modal[hidden]{display:none;}
.modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,3vw,2.5rem);
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.modal__panel{
  --modal-pad:1.75rem;   /* einheitlicher Innenabstand oben/unten/seitlich */
  position:relative;
  z-index:1;
  width:min(680px,100%);
  /* Das Panel selbst NICHT beschneiden: overflow:auto kappte sonst die
     Great-Vibes-Schwünge der Überschrift (z. B. das „L“ von „Lieferung &
     Aufbau“), weil die Ink-Breite der Schrift über den Textkasten hinausragt.
     Der Bildzuschnitt liegt jetzt auf .modal__img selbst, das Scrollen sehr
     langer Listen auf .modal__list – so bleibt die Überschrift unbeschnitten. */
  overflow:visible;
  background:#fff;
  border-radius:2px;                            /* wie die Kacheln */
  box-shadow:0 12px 26px -8px rgba(0,0,0,.4);   /* wie die Kacheln */
  outline:none;
}
.modal__close{
  position:absolute;
  top:.6rem;right:.6rem;
  z-index:2;
  width:2.75rem;height:2.75rem;   /* >=44px Antippfläche (Position unverändert) */
  display:flex;align-items:center;justify-content:center;
  /* Deckendes Dunkel statt halbtransparentem Grau, damit der Knopf auf jedem
     Bild sichtbar ist. Heller Rand hebt ihn auf dunklen Motiven ab, der
     Schlagschatten auf hellen Motiven (z. B. Espresso-Bild). */
  background:#2b2b2b;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  color:var(--gold-hell);         /* helles X */
  box-shadow:0 2px 8px rgba(0,0,0,.55);
  cursor:pointer;
  transition:background .15s ease;
}
.modal__close:hover{background:#111;}
.modal__close svg{width:58%;height:58%;}
.modal__img{
  width:100%;
  height:190px;            /* fester Bildkopf, einheitlich in allen Fenstern */
  object-fit:cover;
  display:block;
  border-radius:2px 2px 0 0;   /* Zuschnitt/Rundung am Bild selbst, nicht am Panel */
}
/* Waehrend ein neues Bild laedt, unsichtbar (kein Nachzieher vom vorigen Fenster).
   Die feste Hoehe oben bleibt reserviert -> kein Layout-Sprung. main.js nimmt die
   Klasse beim load-Ereignis wieder weg. */
.modal__img--loading{ visibility:hidden; }
.modal__title{
  font-family:var(--font-script);
  font-weight:400;
  text-align:center;
  line-height:1.05;
  margin:var(--modal-pad) var(--modal-pad) 0;
  font-size:clamp(2.2rem,4vw,3.2rem);
  /* .text-gold liefert den Goldverlauf wie bei den Abschnittstiteln */
}
.modal__list{
  list-style:none;
  /* Listenblock mittig unter der Ueberschrift – auch einspaltig */
  width:fit-content;
  max-width:calc(100% - 2 * var(--modal-pad));
  margin:1.25rem auto 0;
  /* Links wie rechts 1.1rem Platz: rechts nimmt den Scrollbalken auf, damit er
     nicht über den Text läuft (z. B. „…Gebäck“); links gleich viel, damit die
     Aufzählung optisch mittig bleibt. (Padding statt scrollbar-gutter, weil es
     in allen Browsern – auch älterem Safari – gleich wirkt.) */
  padding:0 1.1rem var(--modal-pad);
  /* Nur die Liste (reiner Fließtext, keine Schwünge) scrollt, falls sie sehr
     lang wird – damit übernimmt sie das Scrollen, das früher am Panel hing. */
  overflow-y:auto;
  max-height:48vh;
}
.modal__item{
  position:relative;
  padding-left:1.4rem;
  margin:.5em 0;
  font-family:var(--font-body);
  font-size:clamp(1.05rem,1.4vw,1.35rem);
  line-height:1.4;
  color:var(--text);
}
.modal__item::before{
  content:"";
  position:absolute;
  left:0;top:.6em;
  width:.5rem;height:.5rem;
  border-radius:50%;
  background:var(--gold-hell);       /* kleiner goldener Punkt */
}
.modal--placeholder .modal__item{color:#8a8a8a;font-style:italic;}
.modal--placeholder .modal__item::before{background:#b7b7b7;}
/* Fenster mit nur einem Satz (z. B. „Lieferung & Aufbau“): als zentrierter
   Absatz ohne Aufzählungszeichen, im Stil der übrigen Fensterinhalte. */
.modal__list--plain .modal__item{padding-left:0;text-align:center;}
.modal__list--plain .modal__item::before{content:none;}
body.modal-open{overflow:hidden;}

/* =========================================================
   STEMPELKARTEN-POPUP (Kasten, auf dem Handy nicht bildschirmfuellend)
   ========================================================= */
.stamp-popup[hidden]{display:none;}
.stamp-popup{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,4vw,2rem);   /* sorgt auch auf dem Handy fuer Rand-Abstand */
}
.stamp-popup__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.stamp-popup__panel{
  position:relative;
  z-index:1;
  width:min(440px,100%);
  /* Auf die sichtbare Höhe begrenzen – dvh ist die tatsächlich sichtbare Höhe
     (Adressleiste ein-/ausfahrend), 100vh als Fallback davor. Das Panel ist der
     feste Rahmen; gescrollt wird NUR im .stamp-popup__body. Der Schließen-Knopf
     sitzt absolut am Panel und bleibt dadurch beim Scrollen oben rechts sichtbar.
     overflow bleibt visible (Panel selbst scrollt nicht; der Body beschneidet). */
  max-height:calc(100vh - 2 * clamp(1rem,4vw,2rem));
  max-height:calc(100dvh - 2 * clamp(1rem,4vw,2rem));
  display:flex;
  flex-direction:column;
  overflow:visible;
  background:#fff;
  border-radius:2px;
  border-top:4px solid var(--gold-hell);        /* goldene Linie */
  box-shadow:0 12px 26px -8px rgba(0,0,0,.4);
  text-align:center;
  outline:none;
}
.stamp-popup__body{
  flex:1 1 auto;
  min-height:0;              /* erlaubt Schrumpfen im Flex-Rahmen -> scrollt statt zu wachsen */
  overflow-y:auto;
  /* Oben genug Platz, damit die erste Titelzeile nie unter dem X-Knopf liegt;
     seitlich genug, damit die Great-Vibes-Schwünge nicht beschnitten werden
     (overflow-y:auto beschneidet zugleich seitlich – deshalb hier Reserve). */
  padding:3.25rem clamp(1.6rem,4vw,2.5rem) clamp(1.75rem,4vw,2.5rem);
}
.stamp-popup__close{
  position:absolute;
  top:.5rem;right:.5rem;
  width:2.75rem;height:2.75rem;   /* >=44px Antippfläche (Position unverändert) */
  display:flex;align-items:center;justify-content:center;
  /* gleiche, gut sichtbare Gestaltung wie beim Catering-Fenster:
     deckendes Dunkel, heller Rand + Schlagschatten, helles X. */
  background:#2b2b2b;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  color:var(--gold-hell);         /* helles X */
  box-shadow:0 2px 8px rgba(0,0,0,.55);
  cursor:pointer;
  transition:background .15s ease;
}
.stamp-popup__close:hover{background:#111;}
.stamp-popup__close svg{width:58%;height:58%;}
.stamp-popup__title{
  font-family:var(--font-script);
  font-weight:400;
  /* Great Vibes greift mit Schwuengen weit aus: grosszuegige Zeilenhoehe
     schuetzt Ober-/Unterlaengen, der horizontale Innenabstand haelt die
     Schleife des "S" vollstaendig im Kasten (Werte in em -> skalieren mit
     der Schriftgroesse). overflow bleibt sichtbar. */
  line-height:1.35;
  padding:.1em .6em .28em;
  overflow:visible;
  margin:.25rem 0 .75rem;
  font-size:clamp(2.4rem,6vw,3.4rem);
  /* .text-gold liefert den Goldverlauf wie bei den Abschnittstiteln */
}
/* Kräftigeres, dunkleres Gold NUR fürs Kundenkarten-Fenster – auf dem weißen
   Panel deutlich kontrastreicher als das helle .text-gold. Höhere Specificity
   (0,2,0) überschreibt ausschließlich den Verlauf; Zuschnitt/Padding von
   .text-gold bleibt. Die Abschnittstitel der Seiten sind NICHT betroffen. */
.stamp-popup__title.text-gold{
  /* nur das Verlaufsbild ersetzen (background-image, NICHT die background-
     Kurzform) – sonst würde background-clip:text aus .text-gold zurückgesetzt
     und der Verlauf als voller Kasten statt im Text erscheinen. */
  background-image:linear-gradient(180deg,var(--gold-hell) 0%,var(--gold-dunkel) 55%,#6f5a30 100%);
}
.stamp-popup__text{
  font-family:var(--font-body);
  color:var(--text);
  margin:0;
  font-size:clamp(1rem,1.4vw,1.2rem);
  line-height:1.6;
  /* Gescrollt wird der ganze .stamp-popup__body (Überschrift + Text) – der Text
     braucht daher kein eigenes overflow/max-height mehr. */
}
/* Absätze im Kundenkarten-Text: klare Abstände statt eines Blocks,
   damit der Text auf schmalen Bildschirmen gut lesbar bleibt. */
.stamp-popup__text p{margin:0 0 1em;}
.stamp-popup__text p:last-child{margin-bottom:0;}
body.stamp-open{overflow:hidden;}

/* Laptop- und flache Desktop-/Tablet-quer-Fenster: Überschrift und Abstände
   verkleinern, damit Überschrift + Text im Normalfall OHNE Scrollen ins Bild
   passen (das max-height am Panel ist nur das Auffangnetz für sehr flache
   Fenster). „(min-width:601px)“ schließt Handy-Hochformat aus – dort bleibt die
   große Überschrift. Das Body-Top-Padding hält die erste Titelzeile frei vom
   Schließen-Knopf. */
@media (max-height:820px) and (min-width:601px){
  .stamp-popup__title{
    font-size:clamp(2rem,3.6vh,2.6rem);
    line-height:1.15;
    margin:.1rem 0 .5rem;
  }
  .stamp-popup__body{
    padding:3.4rem clamp(1.4rem,3.5vw,2rem) clamp(1.1rem,2.5vh,1.5rem);
  }
}
/* Sehr flache Fenster (~600 px und darunter, z. B. kleines Laptop-Fenster):
   auch Text und Zeilenabstände straffen, damit alles OHNE Scrollen passt. Das
   Body-Top-Padding bleibt bei 3rem – so hält es die erste Titelzeile frei vom
   Schließen-Knopf; gespart wird über Titel-/Textgröße und die unteren/seitlichen
   Abstände. */
@media (max-height:600px) and (min-width:601px){
  .stamp-popup__title{
    font-size:clamp(1.7rem,3vh,2.1rem);
    line-height:1.05;
    margin:.05rem 0 .3rem;
  }
  .stamp-popup__body{
    padding:3.4rem clamp(1.1rem,3vw,1.5rem) .85rem;
  }
  .stamp-popup__text{
    font-size:clamp(.88rem,1.7vh,1rem);
    line-height:1.42;
  }
  .stamp-popup__text p{ margin-bottom:.5em; }
}

/* laengere Listen ab 1024 px zweispaltig.
   Grid statt CSS-columns: fuellt spaltenweise, die Zeilenzahl (= aufgerundet
   die Haelfte) setzt js/main.js per Inline-Style -> ungerader Extra-Punkt links.
   Block nur so breit wie noetig und zentriert, damit er als Einheit unter der
   Ueberschrift steht. */
@media (min-width:1024px){
  .modal__list--cols{
    display:grid;
    grid-auto-flow:column;
    column-gap:clamp(1.25rem,2.6vw,2rem);
    row-gap:.55em;
  }
  .modal__list--cols .modal__item{margin:0;}
}

/* =========================================================
   RECHTSSEITEN (Datenschutz, Impressum)
   ========================================================= */
/* Footer klebt am unteren Rand, auch bei kurzem Inhalt */
body.page-legal{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
body.page-legal .legal{flex:1;}

/* Kopfleiste */
.subhead{background:#1f1f1f;}
.subhead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:clamp(.6rem,1.4vw,1.1rem);
}
.subhead__logo{flex-shrink:0;display:block;}
.subhead__logo img{width:clamp(120px,10vw,168px);height:auto;}
.subhead .nav{padding:0;flex:1;gap:1.5rem;}

/* Inhalt */
.legal{background:#fff;color:var(--text);padding-block:clamp(2.5rem,5vw,5rem);}
.legal__container{max-width:820px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem);}
.legal h1{
  font-family:var(--font-script);font-weight:400;text-align:center;line-height:1.05;
  font-size:clamp(2.6rem,5vw,4.2rem);margin:0 0 clamp(1.5rem,3vw,2.5rem);
}
.legal h2{
  font-family:var(--font-body);font-weight:700;color:var(--gold-dunkel);
  font-size:clamp(1.4rem,2.4vw,1.9rem);margin:clamp(2rem,4vw,3rem) 0 .5rem;
}
.legal h3{
  font-family:var(--font-body);font-weight:700;color:var(--text);
  font-size:clamp(1.15rem,1.8vw,1.45rem);margin:clamp(1.4rem,3vw,2rem) 0 .35rem;
}
.legal h4{
  font-family:var(--font-body);font-weight:600;color:var(--text);
  font-size:clamp(1.02rem,1.5vw,1.2rem);margin:clamp(1rem,2vw,1.3rem) 0 .3rem;
}
.legal p{
  font-family:var(--font-body);color:#2a2a2a;line-height:1.65;
  font-size:clamp(1rem,1.2vw,1.1rem);margin:0 0 .85rem;
}
.legal a{color:var(--gold-dunkel);}
.legal ul{margin:0 0 .85rem;padding-left:1.5rem;}
.legal li{
  font-family:var(--font-body);color:#2a2a2a;line-height:1.65;
  font-size:clamp(1rem,1.2vw,1.1rem);margin:.3em 0;
}
.legal li::marker{color:var(--gold-hell);}
.legal__source{margin-top:clamp(2rem,4vw,3rem);}

/* Rechtslinks im Footer */
.footer__legal{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  padding-top:clamp(1.2rem,2vw,1.75rem);
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;
  font-family:var(--font-body);font-size:.95rem;
}
.footer__legal a{color:#e4e0d8;text-decoration:none;}
.footer__legal a:hover{text-decoration:underline;}

/* Datenschutz-Hinweis am Formular */
.form-datenschutz{
  max-width:640px;margin:clamp(.9rem,1.6vw,1.2rem) auto 0;
  font-family:var(--font-body);color:#5a5a5a;font-size:.95rem;line-height:1.5;
}
.form-datenschutz a{color:var(--gold-dunkel);}

/* Honeypot – fuer Menschen unsichtbar, aber im DOM vorhanden */
.hp-field{
  position:absolute !important;
  left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
/* Fehlermeldungen */
.form-error{
  margin:0 auto 1rem;max-width:640px;text-align:left;
  background:#fdecec;border:1px solid #e0a0a0;border-radius:8px;
  padding:.75rem 1rem;color:#8a1f1f;
  font-family:var(--font-body);font-size:.98rem;line-height:1.45;
  outline:none;
}
.form-error ul{margin:0;padding-left:1.2rem;}
.form-error li{margin:.15em 0;}
/* Bestätigung nach dem Absenden */
.form-confirm{
  text-align:center;outline:none;
  padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);
  font-family:var(--font-body);color:var(--text);
}
.form-confirm__title{
  font-family:var(--font-script);font-weight:400;line-height:1.2;
  font-size:clamp(2rem,4vw,3rem);margin:0 0 .5rem;
  background:linear-gradient(180deg,#E1C57F 0%,var(--gold-hell) 45%,var(--gold-dunkel) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Innenabstand gibt den Great-Vibes-Schwüngen im Goldverlauf-Kasten Platz
     (wie bei .text-gold); sonst würde u. a. das „V“ links angeschnitten. Der
     Block ist zentriert, symmetrischer Innenabstand hält die Mitte. */
  padding:0.12em 0.18em;
}
.form-confirm p{font-size:clamp(1.05rem,1.4vw,1.3rem);margin:.3em 0;}

/* =========================================================
   Umbruchpunkte
   ========================================================= */
@media (max-width:1024px){
  .nav{flex-wrap:wrap;justify-content:center;gap:1rem;}
  .nav__actions{order:-1;}
  /* Backwaren: Text ueber die Bilder, alles zentriert */
  .baked__body{grid-template-columns:1fr;justify-items:center;gap:clamp(2rem,5vw,3rem);}
  .baked__text{text-align:center;max-width:720px;}
  .baked__images{width:min(520px,90%);}
  /* Über Uns: Text ueber das Bild, alles zentriert */
  .about__body{grid-template-columns:1fr;justify-items:center;gap:clamp(2rem,5vw,3rem);}
  .about__text{text-align:center;max-width:720px;}
  .about__media{width:min(560px,90%);}
  /* Foodtruck: nur das Bild, zentriert */
  .foodtruck__media{width:min(560px,90%);}
  /* Formular: zwei Spalten, Nachricht volle Breite darunter */
  .form-cols{grid-template-columns:1fr 1fr;}
  .form-col--message{grid-column:1 / -1;}
}
@media (max-width:640px){
  .nav__menu{gap:.75rem 1.1rem;}
  .btn{width:min(78vw,320px);}
  /* Kacheln untereinander auf dem Handy */
  .tiles{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
  /* Harte Umbrueche im Fliesstext aufheben, Text laeuft natuerlich um */
  .br-desktop{display:none;}
  /* Footer: Spalten untereinander */
  .footer__grid{grid-template-columns:1fr;gap:clamp(2rem,7vw,2.75rem);}
  /* Formular: alles einspaltig */
  .form-cols{grid-template-columns:1fr;}
  /* Klick-Fenster: Vollbild auf dem Handy */
  .modal{padding:0;}
  .modal__panel{
    width:100%;max-width:none;
    height:100%;max-height:100vh;max-height:100dvh;
    border-radius:0;
  }
  /* Rechtsseiten-Kopf: Logo oben, Navigation darunter */
  .subhead__inner{flex-direction:column;gap:.75rem;}
  .subhead .nav{width:100%;}
}

/* =========================================================
   SPEISEKARTE – Unterseite (speisekarte.php)
   Nutzt dieselben Tokens/Schriften wie die Startseite.
   ========================================================= */

/* ---- Kopf der Unterseite (schlanker als der Hero) ---- */
.subhead{
  position:relative;
  color:#fff;
  /* Gleicher dreistufiger Aufbau wie beim Hero: klassisch (JPEG) -> ältere
     Safari (-webkit-image-set) -> moderne Browser (image-set, WebP bevorzugt).
     So laden die Unterseiten nicht unnötig die große JPEG-Datei. */
  background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    url("../img/bistro-innen.jpg") center/cover no-repeat;
  background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    -webkit-image-set(
      url("../img/bistro-innen.webp") type("image/webp"),
      url("../img/bistro-innen.jpg") type("image/jpeg")
    ) center/cover no-repeat;
  background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    image-set(
      url("../img/bistro-innen.webp") type("image/webp"),
      url("../img/bistro-innen.jpg") type("image/jpeg")
    ) center/cover no-repeat;
}
.subhead__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(1rem,3vw,2.5rem) 1rem clamp(2.2rem,5vw,4.5rem);
}
.subhead__logo{
  width:clamp(130px,10vw,190px);
  height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
/* Unterseiten: Rueckweg zur Startseite – verlinktes Logo oben, Knopf unten. */
.subhead__logo-link{ display:inline-block; }
.menu__back{ text-align:center; padding:0 1rem clamp(2rem,5vw,3.5rem); }
.menu__back .btn{ min-height:44px; }   /* sichere Antipphoehe auf dem Handy */
.subhead__title{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--gold-hell);
  margin:clamp(.6rem,1.6vw,1.4rem) 0 0;
  font-size:clamp(3rem,6vw,6.4rem);
  line-height:1.05;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

/* ---- Menü-Fläche ---- */
.menu{
  background:#fff;
  color:var(--text);
  padding-block:clamp(2.5rem,5.5vw,5.5rem);
}
.menu__inner{max-width:940px;}
.menu__empty{
  text-align:center;color:var(--grau);
  font-size:clamp(1.05rem,1.5vw,1.4rem);
}

.menu-cat{margin-bottom:clamp(2.4rem,5vw,4rem);}
.menu-cat__title{
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(2.3rem,4.4vw,3.6rem);
  /* Great Vibes greift mit Schwuengen weit aus. Der Goldverlauf wird per
     background-clip auf den Text beschnitten, und Schwuenge ausserhalb des
     Textkastens fallen dabei weg. Deshalb:
     - grosszuegige line-height schuetzt Ober-/Unterlaengen (oben/unten),
     - horizontaler Innenabstand (in em) haelt die Schleifen von "V"/"S" im
       Kasten, sodass der Verlauf sie mit einfaerbt (seitlich),
     - overflow bleibt sichtbar,
     - negative Raender gleichen das Padding wieder aus -> linksbuendig zu den Gerichten. */
  line-height:1.3;
  padding:.06em .5em .3em;
  margin:0 -.5em .18em;
  overflow:visible;
  border-bottom:1px solid #e4d8b6;
  /* dunkel/gold */
  background:linear-gradient(180deg,#C9A85E 0%,var(--gold-dunkel) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.menu-cat__sub{
  font-family:var(--font-body);
  color:var(--grau);
  font-size:clamp(1rem,1.25vw,1.2rem);
  line-height:1.5;
  margin:0 0 clamp(1.2rem,2.4vw,1.8rem);
}

/* ---- Buffet-Menüs (buffets.php) ---- */
.buffet__price{
  font-family:var(--font-body);
  color:var(--gold-dunkel);
  font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  margin:0 0 clamp(1rem,2vw,1.4rem);
}
.buffet__course{margin:0 0 clamp(1rem,2vw,1.5rem);}
.buffet__course:last-child{margin-bottom:0;}
.buffet__course-title{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--text);
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  margin:0 0 .35rem;
}
.buffet__list{
  list-style:disc;
  margin:0;
  padding-left:1.4em;
  color:var(--text);
  font-size:clamp(1rem,1.25vw,1.15rem);
  line-height:1.6;
}
.buffet__list li{margin:0 0 .2em;}
.buffet__note{
  text-align:center;
  color:var(--grau);
  font-size:clamp(1.05rem,1.4vw,1.3rem);
  line-height:1.6;
  margin:clamp(1.6rem,3.5vw,2.6rem) auto 0;
  max-width:640px;
}

/* ---- Gericht ---- */
.dish{margin:0 0 clamp(1.1rem,2.2vw,1.6rem);}
.dish__line{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  margin:0;
}
.dish__name{
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.05rem,1.35vw,1.3rem);
  color:var(--text);
}
/* gepunktete Führungslinie zwischen Name und Preis (wie im PDF) */
.dish__dots{
  flex:1 1 auto;
  align-self:center;
  border-bottom:2px dotted #cdbf9c;
  min-width:1.5rem;
}
.dish__price{
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.05rem,1.35vw,1.3rem);
  color:var(--gold-dunkel);
  white-space:nowrap;
}
/* ohne Preis: Name nimmt die volle Breite, kein Leader, kein Umbruch-Artefakt */
.dish__line--noprice .dish__name{flex:1 1 auto;}
/* Zwei Portionsgrößen: je eine Zeile „Bezeichnung … Punktlinie … Preis“,
   im selben Stil wie eine normale Preiszeile (Preis golden rechts). */
.dish__size{margin-top:.3rem;}
.dish__size-label{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(1.02rem,1.25vw,1.2rem);
  color:var(--text);
  white-space:nowrap;
}
.dish__desc{
  font-family:var(--font-body);
  color:#6a6a6a;
  font-size:clamp(.92rem,1.05vw,1.02rem);
  line-height:1.4;
  margin:.3rem 0 0;
}

/* ---- Legende (Zusatzstoffe / Allergene) ---- */
.menu-cat--legend .legend{
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.35rem clamp(1.5rem,3vw,3rem);
}
.legend__row{display:flex;gap:.6rem;align-items:baseline;}
.legend__code{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--gold-dunkel);
  min-width:1.8rem;
  flex:0 0 auto;
}
.legend__text{
  font-family:var(--font-body);
  color:#4a4a4a;
  font-size:clamp(.95rem,1.1vw,1.05rem);
  margin:0;
}

@media (max-width:560px){
  .menu-cat--legend .legend{grid-template-columns:1fr;}
}

/* =========================================================
   TAGESESSEN-UNTERSEITE (tagesessen.php)
   Aufbau/Stil wie die Speisekarte-Unterseite; Zeitraum als gut lesbare
   Überschrift, Wochentage mit Schreibschrift-Label.
   ========================================================= */
.tagesmenu{max-width:720px;margin:0 auto;}
.tagesmenu__zeitraum{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--text);
  text-align:center;
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.2;
  margin:0 0 .3rem;
}
.tagesmenu__preis{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--gold-dunkel);
  text-align:center;
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  margin:0 0 clamp(1.2rem,2.4vw,1.8rem);
}
/* "Montag bis Freitag" (Backwaren-Seite) in Schmuckschrift wie die Wochentage.
   Great Vibes baut kleiner und braucht mehr Groesse + Zeilenhoehe/Abstand.
   Nur dieser Modifier – die Basisklasse bleibt fuer den Preishinweis auf der
   Tagesessen-Seite unveraendert (Fliesstext). */
.tagesmenu__preis--script{
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  line-height:1.25;
  margin-bottom:clamp(1.4rem,2.8vw,2rem);
}
.tagesmenu__hinweis{
  font-family:var(--font-body);
  color:var(--grau);
  text-align:center;
  line-height:1.6;
  font-size:clamp(1rem,1.25vw,1.2rem);
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
}
.tagesmenu__hinweis--solo{
  color:var(--text);
  font-size:clamp(1.1rem,1.6vw,1.5rem);
  margin:clamp(1.5rem,4vw,3rem) 0;
}
.tagesmenu__day{
  margin:0 0 clamp(1.1rem,2.2vw,1.6rem);
  padding-bottom:clamp(1.1rem,2.2vw,1.6rem);
  border-bottom:1px solid #e4d8b6;
}
.tagesmenu__day:last-of-type{border-bottom:0;}
.tagesmenu__dayname{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--gold-dunkel);
  font-size:clamp(1.6rem,2.4vw,2.4rem);
  line-height:1.15;
  margin:0 0 .15em;
}
.tagesmenu__dishes{
  font-family:var(--font-body);
  color:var(--text);
  font-size:clamp(1.05rem,1.35vw,1.3rem);
  line-height:1.55;
  margin:0;
}
.tagesmenu__bild{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:2px;
  box-shadow:0 14px 28px -8px rgba(0,0,0,.45);
  margin:clamp(1.8rem,3.5vw,2.6rem) auto 0;
}