:root {
  /*Farben*/
  --txt-color: #fafaf7;
  --bg-color: #000000;
  --bg-cards: #1d1d1d;
  --accents: #96bf0c;
  /* Abgedunkeltes Grün für Textlinks (auf Schwarz 5,4:1 — WCAG AA erfüllt) */
  --links-light-bg: #6d8c09;
  /* Buttons: Firmengrün als Fläche, dazu fast schwarze Schrift. Weiß auf
     #96bf0c ergibt nur 2,15:1 und fällt durch WCAG AA; --cta-text auf
     --cta-color kommt auf ca. 8:1, auf --hover-color auf ca. 10:1. */
  --cta-color: #96bf0c;
  --hover-color: #a9d50e;
  --cta-text: #141f06;

  /*Schriften*/
  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --weight-headlines: 700;
  --weight-txt: 400;
  --txt-size: 20px;

  /* Höhe des sticky Headers; wird von script.js live gemessen (Logo skaliert
     mit der Viewportbreite), Wert hier nur als Fallback ohne JavaScript */
  --header-hoehe: 6rem;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
}

/* Elemente, die ohne JavaScript sinnlos wären (z. B. der Button zum Laden
   der Google-Karte), sind standardmäßig verborgen. script.js setzt die
   Klasse "js" auf <html> und schaltet sie damit frei. So bleibt die Seite
   ohne JavaScript frei von toten Bedienelementen. */
.nur-mit-js {
  display: none;
}

html.js .nur-mit-js {
  display: revert;
}

/* Umgekehrter Fall: Inhalte, die nur ohne JavaScript gebraucht werden */
html.js .ohne-js {
  display: none;
}

#js-hinweis {
  background-color: var(--bg-cards);
  color: var(--txt-color);
  border-bottom: 2px solid var(--accents);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  padding: 0.9rem 1.5rem;
}

/* Einheitliches Container-Muster: feste max-width statt Prozentbreiten,
   damit Inhalte auf kleinen Screens nicht winzig und auf großen nicht
   unbegrenzt breit werden. */
#ueber-uns,
.karten-reihe,
.angebot-hinweisblock,
.kontakt-inhalt,
.footer-inner,
#hero-content {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
}

header {
  background-color: var(--bg-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

#logo-link {
  display: flex;
  width: 12%;
  padding: 1.5rem;
}

#logo {
  width: 100%;
  height: auto;
}

#hero {
  width: 100%;
  min-height: 60vh;
  background-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.35) 45%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url("/img/hero-fingerfood.jpg");
  background-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.35) 45%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    image-set(
      url("/img/hero-fingerfood.webp") type("image/webp"),
      url("/img/hero-fingerfood.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

#nav {
  display: flex;
  gap: 1.8rem;
  margin-right: 2rem;
}

.nav-links {
  text-decoration: none;
  color: var(--links-light-bg);
  font-family: var(--font-family);
  font-weight: var(--weight-txt);
  font-size: var(--txt-size);
  text-transform: uppercase;
}

.nav-links:hover {
  color: var(--hover-color);
  transition: 0.5s;
}

/* Burger-Button: nur auf Handy sichtbar (siehe 600px-Breakpoint) */
#burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.burger-linie {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--txt-color);
  transition:
    transform 0.3s,
    opacity 0.3s;
}

/* Geöffneter Zustand: drei Striche werden zum X */
#burger-btn.aktiv .burger-linie:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#burger-btn.aktiv .burger-linie:nth-child(2) {
  opacity: 0;
}

#burger-btn.aktiv .burger-linie:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

#hero-content {
  /* Flex-Kind von #hero: Breite explizit setzen, sonst schrumpft es nur
     auf Inhaltsbreite statt sich am max-width-Container zu orientieren. */
  width: 100%;
  padding: 2.5rem 3.5rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--accents);
  border-radius: 1.75rem;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
}

#hero-headline {
  font-family: var(--font-family);
  color: #1a1a1a;
  text-transform: uppercase;
  font-size: 2.7rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25);
}

#hero-content p {
  font-size: 1.6rem;
  font-family: var(--font-family);
  color: #1a1a1a;
  font-weight: 700;
  margin-bottom: 3rem;
}

#hero-cta {
  font-size: var(--txt-size);
  padding: 0.8rem 2rem;
  font-weight: bold;
  color: var(--cta-text);
  background-color: var(--cta-color);
  border: none;
  margin-bottom: 3rem;
  border-radius: 6px;
  text-transform: uppercase;
}

#hero-cta:hover {
  background-color: var(--hover-color);
  transition: 0.7s;
}

.hero-links {
  font-size: var(--txt-size);
  font-family: var(--font-family);
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 700;
  line-height: 3rem;
  border-bottom: 1px solid transparent;
  transition:
    color 0.3s,
    border-color 0.3s;
}

.hero-links:hover {
  color: rgb(36, 35, 35);
}

#ueber-uns {
  margin: 6rem auto;
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}

.überuns-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 3rem;
  background-color: var(--bg-cards);
  border: 1px solid rgba(150, 191, 12, 0.25);
  border-radius: 1.5rem;
  box-sizing: border-box;
}

.überuns-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1rem;
}

.überuns-body {
  text-align: left;
}

.überuns-eyebrow {
  display: inline-block;
  color: var(--accents);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.überuns-headline {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 2.75rem;
  margin: 0 0 1.25rem;
}

.überuns-txt {
  color: var(--txt-color);
  opacity: 0.85;
  font-family: var(--font-family);
  font-size: var(--txt-size);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================
   Referenzen (inkl. Unterbereich Partner)
   ========================================================== */
#referenzen {
  margin-bottom: 6rem;
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}

#referenzen-headline {
  display: flex;
  justify-content: center;
  color: var(--txt-color);
  font-weight: var(--weight-headlines);
  font-size: 3rem;
  font-family: var(--font-family);
  margin-bottom: 0.5rem;
}

#referenzen-linie {
  width: 70%;
  height: 1px;
  background-color: var(--accents);
  margin-inline: auto;
  margin-bottom: 3rem;
}

.referenzen-inhalt,
.partner-block {
  box-sizing: border-box;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.referenzen-inhalt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

/* Ausgeblendete Referenzen (z. B. Schauinsland bis zur Freigabe) dürfen
   im Grid keinen leeren Platz belegen */
.referenz-karte[hidden] {
  display: none;
}

.referenz-karte {
  background-color: var(--bg-cards);
  border: 1px solid var(--accents);
  border-radius: 1rem;
  padding: 1.75rem;
  color: var(--txt-color);
}

.referenz-karte-headline {
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
}

.referenz-karte-txt {
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
}

.referenz-bewertung {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
}

.referenz-sterne {
  color: var(--accents);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.referenz-note {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 1.5rem;
}

.referenz-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accents);
  font-family: var(--font-family);
  font-weight: bold;
  font-size: 1rem;
  text-decoration: underline;
}

.referenz-link:hover {
  color: var(--hover-color);
}

.partner-block {
  margin-top: 3rem;
}

.partner-headline {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 1.8rem;
  text-align: center;
  margin: 0 0 0.5rem;
}

.partner-intro {
  color: var(--txt-color);
  opacity: 0.8;
  font-family: var(--font-family);
  font-size: 1rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

.partner-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}

.partner-karte {
  background-color: var(--bg-cards);
  border: 1px solid rgba(150, 191, 12, 0.35);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--txt-color);
}

/* Platzhalter in den späteren Logo-Proportionen (3:1), damit das Layout
   beim Einsetzen der echten Logos nicht springt */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 1;
  margin-bottom: 1rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(150, 191, 12, 0.5);
  border-radius: 6px;
  font-family: var(--font-family);
  font-size: 0.85rem;
  opacity: 0.7;
}

.partner-name {
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
}

.partner-rolle {
  font-family: var(--font-family);
  font-size: 0.95rem;
  opacity: 0.8;
  margin: 0;
}

.partner-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--accents);
  font-family: var(--font-family);
  font-size: 0.95rem;
  text-decoration: underline;
}

/* Solange kein echter Link hinterlegt ist (href=""), nicht als
   funktionierender Link erscheinen */
.partner-link[href=""] {
  color: var(--txt-color);
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}

#angebote {
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}

#angebote-headline {
  display: flex;
  justify-content: center;
  color: var(--txt-color);
  font-weight: var(--weight-headlines);
  font-size: 3rem;
  font-family: var(--font-family);
}

#angebote-linie {
  width: 70%;
  height: 1px;
  background-color: var(--accents);
  margin-inline: auto;
}

.angebote-underheadline {
  display: flex;
  justify-content: center;
  color: var(--txt-color);
  font-weight: var(--weight-headlines);
  font-size: 2.5rem;
  font-family: var(--font-family);
  margin-top: 3rem;
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}

/* Grundhinweis direkt unter der Angebots-Headline: Geschirr inklusive und
   Mindestgröße 20 Personen gelten für alle Karten, stehen deshalb einmal
   zentral statt auf jeder Karte. */
.angebote-grundhinweis {
  /* Breite wie die Kartenreihen, aber mit sichtbarem Seitenabstand, damit
     der Rahmen auf dem Handy nicht am Displayrand klebt */
  box-sizing: border-box;
  width: calc(100% - 3rem);
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  text-align: center;
  background-color: rgba(150, 191, 12, 0.08);
  border: 1px solid var(--accents);
  border-radius: 8px;
}

.angebote-grundhinweis-stark {
  color: var(--accents);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.angebote-grundhinweis-txt {
  color: var(--txt-color);
  opacity: 0.85;
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.angebot-kategorie-hinweis {
  text-align: center;
  color: var(--txt-color);
  opacity: 0.7;
  font-family: var(--font-family);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

/* Kartenraster: Grid statt Flex mit Prozentbreiten. align-items: start statt
   Grid-Default "stretch", sonst zieht das Aufklappen einer Karte
   (.karten-mehr) alle Karten derselben Reihe auf die gleiche Höhe mit.
   Gleiche Starthöhe im geschlossenen Zustand übernimmt stattdessen
   kartenHoeheAngleichen() in script.js. */
.karten-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Unvollständige Reihen (nur 1 oder 2 Karten) zentrieren statt links
   anzuhängen; Kartenbreite bleibt identisch zur vollen 3er-Reihe */
.karten-reihe:has(.angebot-karte:nth-child(1):last-child) {
  grid-template-columns: calc((100% - 3rem) / 3);
  justify-content: center;
}

.karten-reihe:has(.angebot-karte:nth-child(2):last-child) {
  grid-template-columns: repeat(2, calc((100% - 3rem) / 3));
  justify-content: center;
}

.angebot-karte {
  box-sizing: border-box;
  color: var(--txt-color);
  text-align: center;
  background-color: var(--bg-cards);
  border: 1px solid var(--accents);
  border-radius: 1rem;
  padding: 1rem;
  font-size: var(--txt-size);
}

.karte-headline {
  font-size: 2rem;
  margin: 1rem 0 0 0;
}

.angebot-karte p {
  font-family: var(--font-family);
}

.karte-p-fett {
  font-weight: bold;
  margin: 1rem 0 0.25rem;
}

.karte-hinweis {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 1rem;
}

.karten-mehr {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}

.karte-btn {
  font-size: var(--txt-size);
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  color: var(--cta-text);
  background-color: var(--cta-color);
  border: none;
  margin-bottom: 1rem;
  border-radius: 6px;
  text-transform: uppercase;
}

/* @media (hover: hover): Hover-Farbe nur auf Geräten mit echtem Zeiger
   (Maus), sonst bleibt der Button auf Touch-Geräten nach dem Tippen
   dauerhaft in der Hover-Farbe hängen */
@media (hover: hover) {
  .karte-btn:hover {
    background-color: var(--hover-color);
    transition: 0.7s;
  }
}

.karte-cta {
  display: inline-block;
  font-size: var(--txt-size);
  padding: 0.6rem 1.5rem;
  font-weight: bold;
  color: var(--cta-text);
  background-color: var(--cta-color);
  border-radius: 6px;
  text-decoration: none;
  margin: 1rem 0 1.5rem;
}

/* @media (hover: hover): siehe .karte-btn weiter oben — verhindert, dass der
   Button auf Touch-Geräten nach dem Antippen in der Hover-Farbe hängen bleibt */
@media (hover: hover) {
  .karte-cta:hover {
    background-color: var(--hover-color);
    transition: 0.7s;
  }
}

/* ==========================================================
   Live-Cooking & Grillen vor Ort — hervorgehobener Sonderblock
   ========================================================== */
.livecooking-block {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.5rem;
  width: calc(100% - 3rem);
  max-width: 1100px;
  margin: 4rem auto 2rem;
  padding: 2.5rem;
  background:
    linear-gradient(
      135deg,
      rgba(150, 191, 12, 0.14) 0%,
      rgba(150, 191, 12, 0.03) 60%
    ),
    var(--bg-cards);
  border: 2px solid var(--accents);
  border-radius: 1.5rem;
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}

.livecooking-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 1rem;
}

.livecooking-eyebrow {
  display: inline-block;
  color: var(--accents);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.livecooking-headline {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 2.2rem;
  margin: 0 0 1rem;
}

.livecooking-txt {
  color: var(--txt-color);
  opacity: 0.85;
  font-family: var(--font-family);
  font-size: var(--txt-size);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.livecooking-cta {
  margin: 0;
}

.angebot-hinweisblock {
  margin: 3rem auto 2rem;
  padding: 2rem;
  text-align: center;
  background-color: var(--bg-cards);
  border: 1px solid var(--accents);
  border-radius: 8px;
  box-sizing: border-box;
}

.hinweisblock-headline {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 1.8rem;
  margin: 0 0 1rem;
}

.hinweisblock-txt {
  color: var(--txt-color);
  opacity: 0.85;
  font-family: var(--font-family);
  font-size: var(--txt-size);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.hinweisblock-link {
  display: inline-block;
  color: var(--links-light-bg);
  font-family: var(--font-family);
  font-weight: bold;
  font-size: var(--txt-size);
  text-decoration: underline;
  transition: color 0.3s;
}

.hinweisblock-link:hover {
  color: var(--accents);
}

#kontakt {
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}

#kontakt-headline {
  display: flex;
  justify-content: center;
  color: var(--txt-color);
  font-weight: var(--weight-headlines);
  font-size: 3rem;
  font-family: var(--font-family);
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}

#kontakt-linie {
  width: 70%;
  height: 1px;
  background-color: var(--accents);
  margin-inline: auto;
  margin-bottom: 3rem;
}

.kontakt-inhalt {
  display: flex;
  gap: 3rem;
  margin: 0 auto 4rem;
  align-items: flex-start;
}

.kontakt-formular {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.formular-feld {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.formular-feld[hidden] {
  display: none;
}

.formular-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.formular-zeile .formular-feld {
  flex: 1;
  min-width: 10rem;
  margin-bottom: 0;
}

/* Honeypot: für Menschen unsichtbar, für Bots aber ein normales Feld.
   Bewusst kein display:none — manche Bots überspringen genau das. */
.formular-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-fieldset {
  /* min-width: 0 — <fieldset> hat vom Browser min-width: min-content und
     würde das Flex-Layout des Formulars sonst auseinanderschieben */
  min-width: 0;
  border: 1px solid rgba(150, 191, 12, 0.35);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.25rem;
}

.formular-legend {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 0.95rem;
  padding: 0 0.4rem;
}

.formular-radio-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* Radios und Checkboxen: große Klickfläche, da viele Nutzer am Handy und
   die Zielgruppe eine breite Altersspanne hat */
.formular-radio,
.formular-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 1rem;
  cursor: pointer;
}

.formular-radio input,
.formular-checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accents);
  flex: none;
  cursor: pointer;
}

/* Deaktivierte Option (z. B. Getränke unter 50 Personen) klar erkennbar */
.formular-radio input:disabled,
.formular-checkbox input:disabled {
  cursor: not-allowed;
}

.formular-radio:has(input:disabled),
.formular-checkbox:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.formular-option {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.formular-option + .formular-option {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(150, 191, 12, 0.18);
}

.formular-option textarea {
  background-color: var(--bg-cards);
  color: var(--txt-color);
  border: 1px solid var(--accents);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-family);
  font-size: 1rem;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
}

.formular-option textarea:focus {
  outline: 2px solid var(--hover-color);
  outline-offset: 1px;
}

.formular-option-hinweis {
  color: var(--txt-color);
  opacity: 0.7;
  font-family: var(--font-family);
  font-size: 0.85rem;
  margin: 0;
}

.formular-warnung {
  color: var(--txt-color);
  background-color: rgba(150, 191, 12, 0.1);
  border-left: 3px solid var(--accents);
  font-family: var(--font-family);
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}

/* Gesperrte Termine (Weihnachten, Ostern) sind der einzige Fall, in dem
   nicht abgeschickt werden kann — deshalb optisch abgesetzt */
.formular-warnung-sperre {
  background-color: rgba(255, 255, 255, 0.06);
  border-left-color: var(--txt-color);
  font-weight: bold;
}

.formular-warnung[hidden] {
  display: none;
}

/* Sammelcontainer der Termin-Meldungen: Abstand nur, wenn gefüllt */
#termin-warnungen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#termin-warnungen:not(:empty) {
  margin-bottom: 1rem;
}

#termin-warnungen .formular-warnung {
  margin: 0;
}

/* Container für mehrere Angebots-Warnungen gleichzeitig: Abstand nach unten
   nur, wenn tatsächlich Hinweise drinstehen, sonst kein leerer Kasten */
#angebote-warnungen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#angebote-warnungen:not(:empty) {
  margin-bottom: 1rem;
}

#angebote-warnungen .formular-warnung {
  margin: 0;
}

.formular-feld label {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 0.95rem;
}

.formular-feld input,
.formular-feld textarea,
.formular-feld select {
  background-color: var(--bg-cards);
  color: var(--txt-color);
  border: 1px solid var(--accents);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-family);
  font-size: 1rem;
  box-sizing: border-box;
  width: 100%;
}

.formular-feld select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 3rem;
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fafaf7' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.formular-feld input[type="date"],
.formular-feld input[type="time"] {
  color-scheme: dark;
}

.formular-feld input:focus,
.formular-feld textarea:focus,
.formular-feld select:focus {
  outline: 2px solid var(--hover-color);
  outline-offset: 1px;
}

.formular-feld textarea {
  resize: vertical;
}

#angebote-liste {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.angebote-eintrag {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--accents);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.angebote-eintrag-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.angebote-eintrag-name {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: bold;
}

.angebote-eintrag-entfernen {
  background: none;
  border: none;
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}

.angebote-eintrag-entfernen:hover {
  color: var(--hover-color);
}

.angebote-eintrag-auswahl-label {
  color: var(--txt-color);
  opacity: 0.8;
  font-family: var(--font-family);
  font-size: 0.85rem;
}

/* Mengenfeld bei Angeboten mit Stückpreis (Brötchenhälften, Bagels,
   Canapés): schmaler als die Auswahlmenüs, da nur Zahlen hineinkommen */
.angebote-eintrag-menge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.angebote-eintrag-menge input {
  width: 7rem;
  background-color: var(--bg-cards);
  color: var(--txt-color);
  border: 1px solid var(--accents);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-family);
  font-size: 1rem;
  box-sizing: border-box;
}

.angebote-eintrag-menge input:focus {
  outline: 2px solid var(--hover-color);
  outline-offset: 1px;
}

.angebote-eintrag-preis {
  color: var(--accents);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: bold;
}

/* ==========================================================
   Richtpreis-Block
   ========================================================== */
.richtpreis-block {
  background-color: rgba(150, 191, 12, 0.08);
  border: 1px solid var(--accents);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 0 0 1.25rem;
  color: var(--txt-color);
  font-family: var(--font-family);
}

.richtpreis-headline {
  font-weight: var(--weight-headlines);
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.richtpreis-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  padding: 0.2rem 0;
}

.richtpreis-zeile-wert {
  white-space: nowrap;
}

/* Positionen ohne berechenbaren Preis ("auf Anfrage") abgesetzt */
.richtpreis-zeile-offen .richtpreis-zeile-wert {
  opacity: 0.75;
  font-style: italic;
}

.richtpreis-summe {
  font-weight: var(--weight-headlines);
  font-size: 1.4rem;
  margin: 0.75rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(150, 191, 12, 0.35);
}

.richtpreis-hinweis {
  opacity: 0.8;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.4rem 0 0;
}

.kontakt-formular .karte-cta {
  /* Gleiche Optik wie die Angebots-CTAs, nur als <button> statt <a>:
     Browser-Default-Rahmen weg, Zeiger setzen, Schriftgröße erben */
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-size: var(--txt-size);
}

.formular-hinweis {
  color: var(--txt-color);
  opacity: 0.7;
  font-family: var(--font-family);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.formular-hinweis a {
  color: var(--accents);
}

/* Hervorgehobener Hinweis (Geschirr inklusive) — gleiche Größe, aber
   nicht abgedunkelt, damit er im Formular wirklich auffällt */
.formular-hinweis-stark {
  color: var(--accents);
  opacity: 1;
  font-weight: bold;
}

.kontakt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--bg-cards);
  border: 1px solid var(--accents);
  border-radius: 1rem;
  padding: 2rem;
  color: var(--txt-color);
}

.kontakt-info-headline {
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  margin: 0;
}

/* Telefon und WhatsApp sind gleichwertige Kontaktwege und sehen deshalb
   identisch aus — beide gefüllt grün mit dunkler Schrift. */
.kontakt-info-link {
  display: inline-block;
  width: fit-content;
  text-decoration: none;
  color: var(--cta-text);
  font-family: var(--font-family);
  font-weight: bold;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  background-color: var(--cta-color);
}

.kontakt-info-link:hover {
  background-color: var(--hover-color);
  transition: 0.7s;
}

.kontakt-info-text {
  font-family: var(--font-family);
  margin: 0;
}

/* Platzhalterkasten der 2-Klick-Karte: gleiche Fläche wie die später
   eingesetzte Karte, damit beim Laden nichts springt */
.kontakt-karte-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 1.25rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--accents);
  border-radius: 0.75rem;
}

/* Nach dem Laden der Karte: gestrichelter Platzhalterrahmen und
   Innenabstand entfallen, die Karte füllt den Kasten */
.kontakt-karte-box-geladen {
  padding: 0;
  background: none;
  border: none;
}

.kontakt-karte-hinweis {
  color: var(--txt-color);
  opacity: 0.85;
  font-family: var(--font-family);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.kontakt-karte-box .karte-cta {
  /* Buttontext ist lang — kleinere Schrift und Umbruch erlauben */
  font-size: 0.95rem;
  text-align: left;
  border: none;
  cursor: pointer;
  margin: 0;
}

.kontakt-karte-link {
  color: var(--accents);
  font-family: var(--font-family);
  font-size: 0.9rem;
  text-decoration: underline;
}

.kontakt-karte-link:hover {
  color: var(--hover-color);
}

/* Erst nach dem Klick per JavaScript eingesetzt. Die feste Pixelgröße des
   Google-Einbettungscodes wird durch Breite + Seitenverhältnis ersetzt,
   damit die Karte auf jedem Screen in den Kasten passt. */
.kontakt-karte {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--accents);
  border-radius: 0.75rem;
  margin-top: 0.5rem;
}

.formular-rueckmeldung {
  max-width: 40rem;
  margin: 4rem auto;
  padding: 2rem;
  text-align: center;
  color: var(--txt-color);
  font-family: var(--font-family);
}

.formular-rueckmeldung h1 {
  font-weight: var(--weight-headlines);
}

.formular-rueckmeldung ul {
  text-align: left;
  display: inline-block;
  margin-bottom: 2rem;
}

.formular-rueckmeldung .karte-cta {
  display: inline-block;
}

/* ==========================================================
   Rechtsseiten (Impressum, AGB, Datenschutz)
   ========================================================== */
.rechtsseite {
  box-sizing: border-box;
  /* Schmaler als der Inhaltscontainer der Startseite: lange Fließtexte
     sind bei etwa 70 Zeichen pro Zeile am besten lesbar */
  max-width: 48rem;
  margin: 3rem auto 5rem;
  padding-inline: 1.5rem;
  color: var(--txt-color);
  font-family: var(--font-family);
}

.rechtsseite-headline {
  font-weight: var(--weight-headlines);
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.rechtsseite-linie {
  height: 1px;
  background-color: var(--accents);
  margin-bottom: 2.5rem;
}

.rechtsseite-unterheadline {
  font-weight: var(--weight-headlines);
  font-size: 1.4rem;
  margin: 2.5rem 0 0.75rem;
}

.rechtsseite-txt {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.9;
  margin: 0 0 1rem;
}

.rechtsseite-liste {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.9;
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.rechtsseite-liste li {
  margin-bottom: 0.4rem;
}

.rechtsseite a {
  color: var(--accents);
}

/* Kasten für noch fehlende Rechtstexte — absichtlich auffällig,
   damit er nicht versehentlich live geht */
.rechtsseite-platzhalter {
  background-color: rgba(255, 255, 255, 0.06);
  border: 2px dashed var(--accents);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.rechtsseite-platzhalter p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Markierung der Abschnitte, die gegenüber der alten Seite neu sind
   oder sich geändert haben — Grundlage für die rechtliche Prüfung */
.rechtsseite-aenderung {
  display: inline-block;
  color: var(--cta-text);
  background-color: var(--accents);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin: 0 0 0.75rem;
}

.rechtsseite-zurueck {
  margin-top: 3rem;
}

#site-footer {
  background-color: var(--bg-cards);
  border-top: 1px solid var(--accents);
  margin-top: 6rem;
  padding: 3rem 0 2rem;
}

.footer-inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  box-sizing: border-box;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
}

.footer-social-link {
  display: inline-flex;
  color: #fafaf7;
  opacity: 0.7;
  transition:
    color 0.3s,
    opacity 0.3s;
}

.footer-social-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.footer-social-link:hover {
  color: var(--accents);
  opacity: 1;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.footer-links a {
  color: var(--txt-color);
  opacity: 0.75;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: var(--weight-txt);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color 0.3s,
    opacity 0.3s;
}

.footer-links a:hover {
  color: var(--accents);
  opacity: 1;
}

.footer-copy {
  color: var(--txt-color);
  opacity: 0.6;
  font-family: var(--font-family);
  font-size: 0.85rem;
  margin: 0;
}

/* ==========================================================
   Responsive: Tablet (max-width: 900px)
   ========================================================== */
@media (max-width: 900px) {
  /* Kartenraster: zwei statt drei Spalten */
  .karten-reihe {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Einzelne Karte im 2-Spalten-Raster zentrieren */
  .karten-reihe:has(.angebot-karte:nth-child(1):last-child) {
    grid-template-columns: calc((100% - 1.5rem) / 2);
    justify-content: center;
  }

  /* Zwei Karten füllen die 2-Spalten-Reihe bereits vollständig
     (überschreibt die 3-Spalten-Zentrierung von oben) */
  .karten-reihe:has(.angebot-karte:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    justify-content: normal;
  }

  /* Über-uns-Karte stapeln; Bild bleibt oben, da im HTML vor dem Text */
  .überuns-card {
    grid-template-columns: 1fr;
  }

  /* Live-Cooking-Block ebenso stapeln, Bild oben */
  .livecooking-block {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.75rem;
  }

  /* Kontaktbereich stapeln: Formular oben, Infobox darunter (HTML-Reihenfolge);
     align-items: stretch, damit beide Spalten die volle Breite nutzen */
  .kontakt-inhalt {
    flex-direction: column;
    align-items: stretch;
  }

  /* Logo nicht länger prozentual mitschrumpfen lassen */
  #logo-link {
    width: auto;
    max-width: 150px;
  }

  /* Seitlicher Abstand, damit die Hero-Box nicht am Viewport-Rand klebt
     (Handy setzt das unten bewusst wieder auf 0 zurück, da dort die Box
     randlos über den kompletten Hero-Bereich gehen soll) */
  #hero {
    padding-inline: 1.5rem;
  }

  /* Burger-Button rechts neben dem Logo einblenden (ab Tablet, da 8 Links
     auch verkleinert nicht mehr in eine Zeile passen) */
  #burger-btn {
    display: flex;
  }

  /* Anker für die absolut positionierte Nav-Klappe */
  header {
    position: relative;
  }

  /* Nav-Links standardmäßig eingeklappt; script.js schaltet die Klasse
     "nav-offen" beim Klick auf den Burger-Button um */
  #nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background-color: var(--bg-color);
    border-top: 1px solid var(--accents);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  #nav.nav-offen {
    max-height: 34rem;
  }

  #nav .nav-links {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(150, 191, 12, 0.15);
  }

  /* Dritte Karte einer vollen Reihe, die im 2-Spalten-Raster in eine neue
     Zeile umbricht, zentrieren statt links hängen lassen; gleiche Breite
     wie die anderen Karten der Reihe */
  .karten-reihe:has(.angebot-karte:nth-child(3):last-child) .angebot-karte:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - 1.5rem) / 2);
  }

  /* Überschriften eine Stufe kleiner */
  #hero-headline {
    font-size: 2.2rem;
  }

  #angebote-headline,
  #kontakt-headline,
  #referenzen-headline {
    font-size: 2.4rem;
  }

  .angebote-underheadline {
    font-size: 2rem;
  }

  .livecooking-headline {
    font-size: 1.8rem;
  }

  .überuns-headline {
    font-size: 2.2rem;
  }

  .karte-headline {
    font-size: 1.7rem;
  }
}

/* ==========================================================
   Responsive: Handy (max-width: 600px)
   ========================================================== */
@media (max-width: 600px) {
  /* Kartenraster: eine Spalte */
  .karten-reihe {
    grid-template-columns: 1fr;
  }

  /* Zentrierungs-Overrides aus Desktop/Tablet zurücksetzen: bei 1 Spalte
     füllt jede Karte ohnehin die ganze Zeile */
  .karten-reihe:has(.angebot-karte:nth-child(1):last-child),
  .karten-reihe:has(.angebot-karte:nth-child(2):last-child) {
    grid-template-columns: 1fr;
    justify-content: normal;
  }

  /* Tablet-Override für die umbrechende 3. Karte zurücksetzen: bei 1 Spalte
     braucht es kein Spannen/Zentrieren mehr */
  .karten-reihe:has(.angebot-karte:nth-child(3):last-child) .angebot-karte:last-child {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

  /* Burger-Button, Header-Anker und Nav-Klappe sind bereits im
     900px-Breakpoint definiert und gelten hier unverändert weiter */

  /* Tablet-Seitenabstand wieder entfernen: auf dem Handy soll die Box
     randlos über den kompletten Hero-Bereich gehen */
  #hero {
    padding-inline: 0;
  }

  /* Keine "Box"-Optik mehr: Hintergrund/Blur der Box deckt den kompletten
     Hero-Bereich ab, kein Rahmen, kein Schatten, keine Rundung */
  #hero-content {
    align-self: stretch;
    width: 100%;
    padding: 1.5rem 1.25rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Über-uns-Karte: weniger Innenabstand */
  .überuns-card {
    padding: 1.5rem;
  }

  /* Datum/Uhrzeit im Formular untereinander statt nebeneinander */
  .formular-zeile {
    flex-direction: column;
  }

  /* Kontakt-Infobox: weniger Innenabstand */
  .kontakt-info {
    padding: 1.25rem;
  }

  /* Überschriften nochmals verkleinern (Fließtext bleibt unverändert) */
  #hero-headline {
    font-size: 1.7rem;
  }

  #angebote-headline,
  #kontakt-headline,
  #referenzen-headline {
    font-size: 2rem;
  }

  .angebote-underheadline {
    font-size: 1.6rem;
  }

  .livecooking-headline {
    font-size: 1.5rem;
  }

  /* Referenz- und Partnerkarten mit weniger Innenabstand */
  .referenz-karte,
  .partner-karte {
    padding: 1.25rem;
  }

  .rechtsseite-headline {
    font-size: 1.8rem;
  }

  .rechtsseite-unterheadline {
    font-size: 1.25rem;
  }

  .überuns-headline {
    font-size: 1.8rem;
  }

  .karte-headline {
    font-size: 1.4rem;
  }

  /* Footer-Reihen enger anordnen */
  .footer-links,
  .footer-social {
    gap: 1rem;
  }
}

@media print {
  .angebot-hinweisblock {
    display: none;
  }
}
/* Kleineres Titelbild für Handys (spart Ladezeit) */
@media (max-width: 700px) {
  #hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.8) 100%
      ),
      url("/img/hero-fingerfood-mobil.jpg");
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.8) 100%
      ),
      image-set(
        url("/img/hero-fingerfood-mobil.webp") type("image/webp"),
        url("/img/hero-fingerfood-mobil.jpg") type("image/jpeg")
      );
  }
}

/* ============================================================
   Monatskalender im Anfrageformular
   ============================================================
   Ersetzt mit JavaScript die Bedienung des Datumsfelds. Das echte
   <input type="date"> bleibt im Formular (Wert, Pflichtfeld), wird
   aber nur noch unsichtbar mitgeführt. */
html.js .datum-feld input[type="date"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.datum-feld {
  position: relative;
}

html.js .datum-kalender {
  display: block;
  max-width: 26rem;
  background-color: var(--bg-cards);
  border: 1px solid var(--accents);
  border-radius: 10px;
  padding: 0.9rem;
  font-family: var(--font-family);
  color: var(--txt-color);
  box-sizing: border-box;
}

.kal-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.kal-monat {
  font-size: 1.05rem;
  font-weight: var(--weight-headlines);
  text-align: center;
  flex: 1;
}

.kal-nav {
  background: transparent;
  color: var(--txt-color);
  border: 1px solid rgba(250, 250, 247, 0.35);
  border-radius: 6px;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.kal-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.kal-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.kal-wochentag {
  font-size: 0.75rem;
  text-align: center;
  color: rgba(250, 250, 247, 0.6);
  padding-bottom: 0.2rem;
}

.kal-tag {
  aspect-ratio: 1 / 1;
  min-height: 2.4rem;
  border-radius: 6px;
  border: 1px solid rgba(150, 191, 12, 0.55);
  background: transparent;
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
}

.kal-tag:focus-visible,
.kal-nav:focus-visible {
  outline: 2px solid var(--hover-color);
  outline-offset: 1px;
}

/* Frei, aber unter zwei Wochen Vorlauf: nur nach Absprache */
.kal-tag.kurzfristig {
  border-style: dashed;
  border-color: rgba(250, 250, 247, 0.3);
  color: rgba(250, 250, 247, 0.75);
}

/* Vergangen: blass, nicht wählbar */
.kal-tag.vergangen,
.kal-tag.zuweit {
  border-color: transparent;
  color: rgba(250, 250, 247, 0.22);
  cursor: default;
}

/* Ausgebucht oder geschlossen: grau, durchgestrichen, nicht wählbar */
.kal-tag.ausgebucht,
.kal-tag.geschlossen {
  background-color: #333;
  border-color: #333;
  color: rgba(250, 250, 247, 0.45);
  text-decoration: line-through;
  cursor: not-allowed;
}

.kal-tag.heute {
  font-weight: var(--weight-headlines);
  box-shadow: inset 0 -3px 0 rgba(250, 250, 247, 0.5);
}

.kal-tag.gewaehlt {
  background-color: var(--cta-color);
  border-color: var(--cta-color);
  color: var(--cta-text);
  font-weight: var(--weight-headlines);
}

@media (hover: hover) {
  .kal-tag:not(:disabled):not(.gewaehlt):hover {
    background-color: rgba(150, 191, 12, 0.2);
  }
  .kal-nav:not(:disabled):hover {
    border-color: var(--accents);
  }
}

.kal-auswahl {
  margin: 0.8rem 0 0;
  font-size: 0.95rem;
}

.kal-auswahl strong {
  color: var(--accents);
}

.kal-auswahl.fehlt {
  color: #ffb4a8;
}

.kal-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: rgba(250, 250, 247, 0.8);
}

.kal-legende li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.kal-muster {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 3px;
  border: 1px solid rgba(150, 191, 12, 0.55);
  box-sizing: border-box;
}

.kal-muster.gewaehlt {
  background-color: var(--cta-color);
  border-color: var(--cta-color);
}

.kal-muster.ausgebucht {
  background-color: #333;
  border-color: #333;
}

.kal-muster.kurzfristig {
  border-style: dashed;
  border-color: rgba(250, 250, 247, 0.4);
}

@media (max-width: 600px) {
  html.js .datum-kalender {
    max-width: none;
    padding: 0.7rem;
  }
  .kal-raster {
    gap: 0.25rem;
  }
}

/* ============================================================
   Rechtsseiten: Überblick, Inhaltsverzeichnis, Abschnitte
   ============================================================ */
.rechtsseite-stand {
  font-size: 0.9rem;
  color: rgba(250, 250, 247, 0.65);
  margin: -1.75rem 0 2rem;
}

.rechtsseite-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 2rem;
}

/* "Das Wichtigste auf einen Blick" */
.rechtsseite-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.rechtsseite-fakten li {
  background-color: var(--bg-cards);
  border: 1px solid rgba(150, 191, 12, 0.45);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  line-height: 1.45;
}

.rechtsseite-fakten strong {
  display: block;
  color: var(--accents);
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.rechtsseite-fakten span {
  font-size: 0.95rem;
  opacity: 0.85;
}

.rechtsseite-hinweis {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0 0 2.5rem;
}

/* Inhaltsverzeichnis */
.rechtsseite-toc {
  background-color: var(--bg-cards);
  border-left: 3px solid var(--accents);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.4rem;
  margin: 0 0 2.5rem;
}

.rechtsseite-toc p {
  font-weight: var(--weight-headlines);
  margin: 0 0 0.6rem;
}

.rechtsseite-toc ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2 16rem;
  column-gap: 2rem;
  line-height: 1.9;
}

.rechtsseite-toc a {
  text-decoration: none;
}

.rechtsseite-toc a:hover,
.rechtsseite-toc a:focus-visible {
  text-decoration: underline;
}

/* Abschnitt mit grüner Nummer */
.rechtsseite-abschnitt {
  scroll-margin-top: calc(var(--header-hoehe) + 1rem);
  border-top: 1px solid rgba(250, 250, 247, 0.12);
  padding-top: 0.5rem;
}

.rechtsseite-abschnitt .rechtsseite-unterheadline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.rechtsseite-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--accents);
  color: var(--cta-text);
  font-size: 1rem;
  transform: translateY(-0.1rem);
}

.rechtsseite-txt + .rechtsseite-liste {
  margin-top: -0.25rem;
}

/* Impressum: Angaben als Karten */
.impressum-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}

.impressum-karte {
  background-color: var(--bg-cards);
  border: 1px solid rgba(150, 191, 12, 0.45);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
}

.impressum-karte h2 {
  font-size: 0.85rem;
  font-weight: var(--weight-headlines);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accents);
  margin: 0 0 0.6rem;
}

.impressum-karte p {
  margin: 0;
  line-height: 1.7;
  font-size: 1.05rem;
}

@media (max-width: 600px) {
  .rechtsseite-stand {
    margin-top: -1.25rem;
  }
  .rechtsseite-toc ol {
    columns: 1;
  }
  .rechtsseite-nr {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }
}

@media print {
  .rechtsseite-toc,
  .rechtsseite-zurueck {
    display: none;
  }
  .rechtsseite-fakten li,
  .impressum-karte {
    border-color: #999;
  }
}

/* Button "Zurück zur Startseite": Linkfarbe der Rechtsseiten würde die
   Schrift sonst grün auf grün machen */
.rechtsseite a.karte-cta {
  color: var(--cta-text);
  text-decoration: none;
}

/* ============================================================
   Anfrageformular: optionale Angaben zum Aufklappen
   ============================================================ */
.formular-optional {
  border: 1px solid rgba(150, 191, 12, 0.55);
  border-radius: 10px;
  background-color: var(--bg-cards);
  margin: 0 0 1.5rem;
  font-family: var(--font-family);
  color: var(--txt-color);
}

.formular-optional > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 1rem 3rem 1rem 1.1rem;
  position: relative;
  border-radius: 10px;
}

.formular-optional > summary::-webkit-details-marker {
  display: none;
}

/* Pfeil rechts, dreht sich beim Öffnen */
.formular-optional > summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--accents);
  border-bottom: 2px solid var(--accents);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.formular-optional[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.formular-optional > summary:focus-visible {
  outline: 2px solid var(--hover-color);
  outline-offset: 2px;
}

@media (hover: hover) {
  .formular-optional > summary:hover {
    background-color: rgba(150, 191, 12, 0.08);
  }
}

.formular-optional-titel {
  font-weight: var(--weight-headlines);
  font-size: 1.05rem;
}

.formular-optional-zusatz {
  font-size: 0.85rem;
  color: rgba(250, 250, 247, 0.65);
}

.formular-optional-zaehler {
  font-size: 0.75rem;
  font-weight: var(--weight-headlines);
  color: var(--cta-text);
  background-color: var(--accents);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.formular-optional-zaehler[hidden] {
  display: none;
}

.formular-optional-inhalt {
  padding: 0.25rem 1.1rem 0.5rem;
  border-top: 1px solid rgba(250, 250, 247, 0.12);
}

.formular-optional-inhalt > .formular-fieldset {
  margin-top: 1rem;
}

@media print {
  .formular-optional > summary::after {
    display: none;
  }
}

/* ============================================================
   Partner ganz unten auf der Startseite
   ============================================================ */
#partner {
  margin: 0 0 2rem;
}

#partner .partner-block {
  margin-top: 4rem;
}

/* ============================================================
   Angebotskarten kompakter (Okt. 2026)
   ============================================================
   Vorher ~260 px hoch mit viel Luft. Jetzt: Name, Preis und
   Mindestmenge dicht beieinander, Button kleiner und als Umriss,
   damit die grünen "Anfragen"-Buttons die stärkeren bleiben. */
.karten-reihe {
  gap: 1rem;
}

.angebot-karte {
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 12px;
}

.karte-headline {
  font-family: var(--font-family);
  font-weight: var(--weight-headlines);
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
}

.angebot-karte > p {
  margin: 0;
  line-height: 1.4;
}

/* Preis */
.angebot-karte > p:nth-of-type(1) {
  font-size: 1.05rem;
  font-weight: var(--weight-headlines);
  color: var(--accents);
}

/* Mindestmenge */
.angebot-karte > p:nth-of-type(2) {
  font-size: 0.9rem;
  color: rgba(250, 250, 247, 0.65);
}

.karte-btn {
  font-family: var(--font-family);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 0.45rem 1rem;
  margin: 0.75rem 0 0;
  color: var(--accents);
  background-color: transparent;
  border: 1px solid var(--accents);
  cursor: pointer;
}

@media (hover: hover) {
  .karte-btn:hover {
    color: var(--cta-text);
    background-color: var(--cta-color);
  }
}

.karte-btn:focus-visible {
  outline: 2px solid var(--hover-color);
  outline-offset: 2px;
}

/* Aufgeklappter Inhalt: etwas kleinere Schrift, linksbündig lesbar */
.karten-mehr {
  font-size: 1rem;
}

.karten-mehr .karte-cta {
  font-size: 1rem;
  margin: 0.75rem 0 0.5rem;
}

@media (max-width: 900px) {
  .karte-headline {
    font-size: 1.25rem;
  }
}

/* Handy: Karte als flache Zeile – links Name/Preis, rechts der Button */
@media (max-width: 600px) {
  .angebot-karte {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    align-items: center;
    text-align: left;
    padding: 0.85rem 1rem;
  }

  .angebot-karte > .karte-headline {
    grid-column: 1;
    font-size: 1.15rem;
    margin-bottom: 0.15rem;
  }

  .angebot-karte > p {
    grid-column: 1;
  }

  .angebot-karte > .karte-btn {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    padding: 0.45rem 0.8rem;
    font-size: 0.8rem;
  }

  .angebot-karte > .karten-mehr {
    grid-column: 1 / -1;
    text-align: center;
  }

  /* Gleiche Höhen (kartenHoeheAngleichen) sind in einer Spalte unnötig */
  .angebot-karte {
    min-height: 0 !important;
  }

  .angebot-karte > p:nth-of-type(1) {
    white-space: nowrap;
  }

  .karten-reihe {
    gap: 0.6rem;
    margin-bottom: 0.6rem;
  }
}

.karte-cta {
  font-family: var(--font-family);
}

/* ============================================================
   Mehrfachauswahl im Formular (Suppen, Eintöpfe, Desserts, …)
   ============================================================ */
.mehrfach-auswahl {
  border: 0;
  margin: 0.4rem 0 0;
  padding: 0;
  min-width: 0;
}

.mehrfach-auswahl > legend {
  padding: 0;
  margin-bottom: 0.4rem;
}

.mehrfach-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-family: var(--font-family);
  font-size: 0.95rem;
}

.mehrfach-zeile + .mehrfach-zeile {
  border-top: 1px solid rgba(250, 250, 247, 0.08);
}

.mehrfach-zeile.gewaehlt {
  background-color: rgba(150, 191, 12, 0.12);
}

.mehrfach-box {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accents);
  margin: 0;
}

.mehrfach-name {
  cursor: pointer;
  line-height: 1.35;
}

.mehrfach-mengebox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  visibility: hidden;
}

.mehrfach-zeile.gewaehlt .mehrfach-mengebox {
  visibility: visible;
}

.formular-feld .mehrfach-menge,
.mehrfach-menge {
  width: 5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
}

.mehrfach-einheit {
  font-size: 0.8rem;
  opacity: 0.7;
}

.mehrfach-fehlt-text {
  display: none;
  margin: 0.5rem 0 0;
}

.angebote-eintrag.mehrfach-fehlt .mehrfach-fehlt-text {
  display: block;
}

@media (max-width: 600px) {
  .mehrfach-zeile {
    grid-template-columns: auto 1fr;
  }
  .mehrfach-mengebox {
    grid-column: 2;
    display: none;
  }
  .mehrfach-zeile.gewaehlt .mehrfach-mengebox {
    display: inline-flex;
  }
}

.mehrfach-einheit {
  color: var(--txt-color);
}

/* Häkchen "Geschirr dazubuchen" in jedem gewählten Angebot */
.geschirr-option {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(250, 250, 247, 0.15);
  font-size: 0.95rem;
}

/* Ankreuzfelder im Angebotsbereich nicht von ".formular-feld input"
   (volle Breite) aufziehen lassen */
.formular-feld .geschirr-option input,
.formular-feld .mehrfach-box {
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  flex: none;
}

/* ==========================================================
   Ihre Auswahl – Shop-Ansicht
   ========================================================== */

/* Der alte Link in „Mehr erfahren“ ist durch den Button auf der
   Karte ersetzt (nur mit JavaScript) */
html.korb-aktiv .karten-mehr .karte-cta:not([data-nachricht]):not([data-ziel-checkbox]) {
  display: none;
}

.korb-karte {
  margin-top: 0.75rem;
}

.angebot-karte.im-korb {
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(150, 191, 12, 0.35), 0 0 18px rgba(150, 191, 12, 0.15);
}

.korb-bedienung {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-family);
}

.korb-zaehler,
.korb-gewaehlt-btn {
  display: none;
}

.korb-bedienung.aktiv .korb-dazu-btn {
  display: none;
}

.korb-bedienung.aktiv .korb-zaehler {
  display: inline-flex;
}

.korb-bedienung.aktiv .korb-gewaehlt-btn {
  display: inline-block;
}

.korb-zaehler {
  align-items: center;
  gap: 0.4rem;
}

.korb-dazu-btn,
.korb-gewaehlt-btn {
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.korb-dazu-btn {
  border: none;
  color: var(--cta-text);
  background-color: var(--cta-color);
}

.korb-gewaehlt-btn {
  border: 1px solid var(--accents);
  color: var(--accents);
  background-color: rgba(150, 191, 12, 0.12);
}

.korb-dazu-btn:disabled {
  cursor: not-allowed;
  color: rgba(250, 250, 247, 0.55);
  background-color: #3a3a3a;
}

.korb-sperre {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(250, 250, 247, 0.6);
}

.korb-sperre:empty {
  display: none;
}

.korb-bedienung.gesperrt {
  opacity: 0.9;
}

.korb-pm {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--accents);
  background: transparent;
  color: var(--accents);
  font-family: var(--font-family);
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

@media (hover: hover) {
  .korb-dazu-btn:not(:disabled):hover,
  .korb-pm:hover,
  .korb-gewaehlt-btn:hover {
    color: var(--cta-text);
    background-color: var(--hover-color);
  }
}

.korb-dazu-btn:focus-visible,
.korb-gewaehlt-btn:focus-visible,
.korb-pm:focus-visible,
.korb-zahl:focus {
  outline: 2px solid var(--hover-color);
  outline-offset: 2px;
}

.korb-zahl,
.formular-feld input.korb-zahl {
  flex: none;
  width: 3.4rem;
  box-sizing: border-box;
  text-align: center;
  padding: 0.35rem 0.2rem;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: bold;
  color: var(--txt-color);
  background-color: rgba(150, 191, 12, 0.12);
  border: 1px solid var(--accents);
  border-radius: 6px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.korb-zahl::-webkit-inner-spin-button,
.korb-zahl::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.korb-einheit {
  color: var(--txt-color);
  opacity: 0.7;
  font-size: 0.8rem;
}

/* ---------- Kopf-Button ---------- */
.korb-symbol {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}

.korb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accents);
  border-radius: 999px;
  background: transparent;
  color: var(--accents);
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

@media (hover: hover) {
  .korb-btn:hover {
    color: var(--cta-text);
    background-color: var(--hover-color);
  }
}

.korb-anzahl {
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  box-sizing: border-box;
  border-radius: 999px;
  background-color: var(--cta-color);
  color: var(--cta-text);
  font-size: 0.8rem;
  line-height: 1.4rem;
  text-align: center;
}

/* Mittlere Bildschirme: nur Symbol + Zahl, damit das Menü nicht umbricht */
@media (max-width: 1500px) {
  .korb-btn-text {
    display: none;
  }

  .korb-btn {
    padding: 0.5rem 0.75rem;
  }
}

/* ---------- Leiste unten (Handy/Tablet) ---------- */
.korb-leiste {
  display: none;
}

@media (max-width: 900px) {
  .korb-btn {
    margin-left: auto;
    margin-right: 0.75rem;
    padding: 0.45rem 0.7rem;
  }

  .korb-btn-text {
    display: none;
  }

  .korb-leiste:not([hidden]) {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 10px;
    background-color: var(--cta-color);
    color: var(--cta-text);
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: bold;
    text-align: left;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    cursor: pointer;
  }

  .korb-leiste-text {
    flex: 1;
  }

  .korb-leiste-weiter {
    white-space: nowrap;
  }

  body.korb-leiste-an {
    padding-bottom: 5rem;
  }

  body.korb-offen .korb-leiste {
    display: none;
  }
}

/* ---------- Seitliche Auswahl ---------- */
body.korb-offen {
  overflow: hidden;
}

.korb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background-color: rgba(0, 0, 0, 0.6);
}

.korb-overlay[hidden] {
  display: none;
}

.korb {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #111;
  border-left: 1px solid var(--accents);
  color: var(--txt-color);
  font-family: var(--font-family);
  transform: translateX(105%);
  transition: transform 0.3s ease;
  visibility: hidden;
}

.korb.offen {
  transform: translateX(0);
  visibility: visible;
}

.korb-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(150, 191, 12, 0.35);
}

.korb-titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.35rem;
  color: var(--txt-color);
}

.korb-titel .korb-symbol {
  color: var(--accents);
}

.korb-zu {
  background: none;
  border: none;
  color: var(--txt-color);
  font-size: 2rem;
  line-height: 1;
  padding: 0 0.3rem;
  cursor: pointer;
}

.korb-inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.korb-personen-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: bold;
}

.korb-personen-zeile input {
  width: 6rem;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--accents);
  border-radius: 6px;
  background-color: var(--bg-cards);
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 1rem;
  text-align: center;
}

.korb-personen-hinweis {
  margin: 0.3rem 0 1rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

.korb-liste {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.korb-zeile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(150, 191, 12, 0.45);
  border-radius: 8px;
  background-color: var(--bg-cards);
}

.korb-zeile-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.korb-zeile-name {
  font-weight: bold;
  line-height: 1.3;
}

.korb-zeile-weg {
  background: none;
  border: none;
  color: var(--txt-color);
  opacity: 0.7;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}

.korb-zeile-weg:hover {
  opacity: 1;
  color: var(--hover-color);
}

.korb-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--accents);
  border-radius: 6px;
  background-color: #111;
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 0.9rem;
}

.korb-zeile-unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.korb-zeile-unten .korb-zaehler {
  display: inline-flex;
}

.korb-zeile-info {
  font-size: 0.85rem;
  opacity: 0.75;
}

.korb-zeile-preis {
  font-weight: bold;
  color: var(--accents);
  white-space: nowrap;
}

.korb-leer {
  padding: 1.5rem 0.5rem;
  text-align: center;
  opacity: 0.8;
  font-size: 0.95rem;
  line-height: 1.5;
}

.korb-leer[hidden] {
  display: none;
}

.korb-fuss {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(150, 191, 12, 0.35);
  background-color: #0b0b0b;
}

.korb-summe-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 1.05rem;
}

.korb-summe-zeile small {
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
  opacity: 0.6;
}

.korb-summe-zeile strong {
  font-size: 1.35rem;
  color: var(--accents);
}

.korb-fuss-hinweis {
  margin: 0.4rem 0 0.9rem;
  font-size: 0.8rem;
  opacity: 0.65;
  line-height: 1.4;
}

.korb-weiter {
  width: 100%;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 8px;
  background-color: var(--cta-color);
  color: var(--cta-text);
  font-family: var(--font-family);
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
}

.korb-stoebern {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  color: var(--txt-color);
  opacity: 0.8;
  font-family: var(--font-family);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (hover: hover) {
  .korb-weiter:hover {
    background-color: var(--hover-color);
  }
}

/* ---------- „Noch etwas dazu?“ im Formular ---------- */
.korb-block {
  margin: 1rem 0 0.5rem;
  padding: 0.85rem 1rem 0.4rem;
  border: 1px dashed var(--accents);
  border-radius: 8px;
  background-color: rgba(150, 191, 12, 0.05);
}

.korb-block-titel {
  margin: 0;
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 1.05rem;
  font-weight: bold;
}

.korb-block-hinweis {
  margin: 0.25rem 0 0.6rem;
  color: var(--txt-color);
  opacity: 0.75;
  font-family: var(--font-family);
  font-size: 0.85rem;
  line-height: 1.4;
}

.korb-gruppe {
  border-top: 1px solid rgba(150, 191, 12, 0.35);
}

.korb-gruppe > summary {
  cursor: pointer;
  padding: 0.65rem 0;
  color: var(--accents);
  font-family: var(--font-family);
  font-weight: bold;
}

.korb-gruppe-anzahl {
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  color: var(--cta-text);
  background-color: var(--cta-color);
  font-size: 0.75rem;
}

.korb-block-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.korb-block-zeile:last-child {
  border-bottom: none;
  margin-bottom: 0.4rem;
}

.korb-block-name {
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 0.95rem;
}

.korb-block-zeile.gewaehlt .korb-block-name {
  color: var(--accents);
  font-weight: bold;
}

.korb-block-preis {
  display: block;
  margin-top: 0.1rem;
  color: var(--txt-color);
  opacity: 0.6;
  font-size: 0.8rem;
  font-weight: normal;
}

/* ---------- Kurze Meldung ---------- */
.korb-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--accents);
  border-radius: 8px;
  background-color: var(--bg-cards);
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, 250%);
  transition: transform 0.3s ease;
}

.korb-toast.sichtbar {
  transform: translate(-50%, 0);
}

body.korb-leiste-an .korb-toast {
  bottom: 5.5rem;
}

.korb-toast-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accents);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 600px) {
  .angebot-karte > .korb-karte {
    grid-column: 1 / -1;
    margin-top: 0.6rem;
  }

  .angebot-karte > .korb-karte .korb-bedienung {
    align-items: flex-start;
  }
}

@media print {
  .korb-karte,
  .korb-block,
  .korb-toast,
  .korb-btn,
  .korb-leiste,
  .korb,
  .korb-overlay {
    display: none !important;
  }
}

/* ==========================================================
   Getränke-Auswahl (Kisten je Sorte)
   ========================================================== */
.getraenke-auswahl {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--accents);
  border-radius: 8px;
  background-color: rgba(150, 191, 12, 0.05);
  font-family: var(--font-family);
  color: var(--txt-color);
}

.getraenke-auswahl[hidden] {
  display: none;
}

.getraenke-auswahl-hinweis {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  opacity: 0.75;
  line-height: 1.4;
}

.getraenk-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.getraenk-zeile:last-child {
  border-bottom: none;
}

.getraenk-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.getraenk-zeile.gewaehlt .getraenk-name {
  color: var(--accents);
  font-weight: bold;
}

.getraenk-box {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accents);
}

.getraenk-menge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.getraenk-pm {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--accents);
  background: transparent;
  color: var(--accents);
  font-family: var(--font-family);
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

@media (hover: hover) {
  .getraenk-pm:hover {
    color: var(--cta-text);
    background-color: var(--hover-color);
  }
}

.getraenk-kisten,
.formular-option input.getraenk-kisten,
.formular-feld input.getraenk-kisten {
  flex: none;
  width: 3rem;
  box-sizing: border-box;
  padding: 0.3rem 0.2rem;
  text-align: center;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: bold;
  color: var(--txt-color);
  background-color: rgba(150, 191, 12, 0.12);
  border: 1px solid var(--accents);
  border-radius: 6px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.getraenk-kisten:disabled {
  opacity: 0.4;
}

.getraenk-kisten::-webkit-inner-spin-button,
.getraenk-kisten::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.getraenk-einheit {
  font-size: 0.8rem;
  opacity: 0.7;
}

.getraenk-box {
  flex: none;
}

@media (max-width: 600px) {
  .getraenke-auswahl {
    padding: 0.7rem 0.75rem;
  }

  .getraenk-zeile {
    gap: 0.4rem 0.5rem;
  }

  .getraenk-einheit {
    display: none;
  }

  .getraenk-pm {
    width: 1.9rem;
    height: 1.9rem;
  }
}

/* ==========================================================
   Kompaktere Bedienung auf den Karten (+ dazu / Zähler)
   ========================================================== */
.korb-karte {
  margin-top: 0.5rem;
}

.korb-karte .korb-dazu-btn,
.korb-karte .korb-gewaehlt-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.korb-karte .korb-zaehler {
  gap: 0.3rem;
}

.korb-karte .korb-pm {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1rem;
}

.korb-karte .korb-zahl {
  width: 2.6rem;
  padding: 0.2rem 0.1rem;
  font-size: 0.9rem;
}

.korb-karte .korb-einheit {
  font-size: 0.7rem;
}

.korb-karte .korb-sperre {
  font-size: 0.7rem;
}

@media (max-width: 600px) {
  .angebot-karte > .korb-karte {
    margin-top: 0.4rem;
  }
}

/* ==========================================================
   Desserts & Imbiss als Speisekarten-Liste
   ========================================================== */
.karten-liste-box {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.karten-liste-hinweis {
  margin: -0.5rem 0 1.25rem;
  text-align: center;
  color: rgba(250, 250, 247, 0.65);
  font-family: var(--font-family);
  font-size: 0.9rem;
}

.karten-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
}

.karten-liste .angebot-karte.als-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  align-content: center;
  column-gap: 1rem;
  row-gap: 0.15rem;
  min-height: 0 !important;
  padding: 0.75rem 0;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(150, 191, 12, 0.25);
  border-radius: 0;
  box-shadow: none;
}

.karten-liste .als-zeile > .karte-headline {
  grid-column: 1;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.karten-liste .als-zeile.im-korb > .karte-headline {
  color: var(--accents);
}

.karten-liste .als-zeile > p {
  grid-column: 1;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.karten-liste .als-zeile > p:nth-of-type(2) {
  color: rgba(250, 250, 247, 0.55);
  font-size: 0.78rem;
}

.karten-liste .als-zeile.ohne-min > p:nth-of-type(2) {
  display: none;
}

.karten-liste .als-zeile > .karte-beschr {
  color: rgba(250, 250, 247, 0.6);
  font-size: 0.8rem;
}

.karten-liste .als-zeile > .karte-btn,
.karten-liste .als-zeile > .karten-mehr {
  display: none;
}

.karten-liste .als-zeile > .korb-karte {
  grid-column: 2;
  margin: 0;
  align-self: center;
}

.karten-liste .als-zeile .korb-bedienung {
  align-items: flex-end;
}

@media (max-width: 600px) {
  .karten-liste-box {
    padding: 0 1rem;
  }

  .karten-liste {
    grid-template-columns: 1fr;
  }

  .karten-liste .als-zeile > .karte-headline {
    font-size: 1rem;
  }
}

/* Partner mit Foto statt Logo-Platzhalter */
.partner-logo.partner-foto {
  display: block;
  padding: 0;
  border: none;
  background: none;
  opacity: 1;
  overflow: hidden;
}

.partner-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   Personen & Datum oben (Startbild + mitlaufende Leiste)
   ========================================================== */
.plan-box {
  font-family: var(--font-family);
}

.plan-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
  max-width: 34rem;
  margin: -1.5rem auto 2rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--accents);
  text-align: left;
}

.plan-titel {
  grid-column: 1 / -1;
  margin: 0 !important;
  color: var(--txt-color) !important;
  font-size: 1.05rem !important;
  font-weight: bold;
}

.plan-feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.plan-feld label {
  color: var(--txt-color);
  font-size: 0.8rem;
  opacity: 0.85;
}

.plan-feld input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--accents);
  border-radius: 6px;
  background-color: var(--bg-cards);
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 1rem;
  color-scheme: dark;
}

.plan-feld input:focus {
  outline: 2px solid var(--hover-color);
  outline-offset: 1px;
}

.plan-status {
  grid-column: 1 / -1;
  margin: 0 !important;
  font-size: 0.85rem !important;
  font-weight: bold;
  color: var(--accents) !important;
}

.plan-status[data-art="hinweis"] {
  color: #e8c547 !important;
}

.plan-status[data-art="sperre"] {
  color: #ff8a7a !important;
}

.plan-status[hidden] {
  display: none;
}

/* Mitlaufende Leiste */
.plan-leiste {
  position: sticky;
  top: var(--header-hoehe);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0.5rem 1rem;
  background-color: #111;
  border-top: 1px solid rgba(150, 191, 12, 0.35);
  border-bottom: 1px solid rgba(150, 191, 12, 0.35);
}

.plan-leiste[hidden] {
  display: none;
}

.plan-leiste .plan-feld {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.plan-leiste .plan-feld label {
  white-space: nowrap;
}

.plan-leiste .plan-personen {
  width: 5rem;
}

.plan-leiste .plan-datum {
  width: 10.5rem;
}

.plan-leiste .plan-feld input {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
}

html.plan-leiste-an section,
html.plan-leiste-an .angebote-underheadline {
  scroll-margin-top: calc(var(--header-hoehe) + 4rem);
}

@media (max-width: 600px) {
  .plan-hero {
    grid-template-columns: 1fr;
    margin: -1rem auto 1.5rem;
    padding: 0.85rem 1rem;
  }

  .plan-leiste {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3rem 0.5rem;
    padding: 0.4rem 0.75rem;
  }

  .plan-leiste .plan-feld {
    gap: 0.3rem;
  }

  .plan-leiste .plan-lang {
    display: none;
  }

  .plan-leiste .plan-feld label {
    font-size: 0.75rem;
  }

  .plan-leiste .plan-personen {
    width: 3.6rem;
  }

  .plan-leiste .plan-datum {
    width: 8.8rem;
  }

  .plan-leiste .plan-status {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.75rem !important;
  }
}

@media print {
  .plan-leiste,
  .plan-hero {
    display: none;
  }
}

.plan-unverbindlich {
  grid-column: 1 / -1;
  margin: -0.4rem 0 0.2rem !important;
  color: var(--txt-color) !important;
  opacity: 0.75;
  font-size: 0.8rem !important;
  font-weight: normal !important;
}

/* Hinweis „keine Bestellung“ über dem Absende-Button */
.anfrage-hinweis {
  margin: 1.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accents);
  border-radius: 6px;
  background-color: rgba(150, 191, 12, 0.08);
  color: var(--txt-color);
  font-family: var(--font-family);
  font-size: 0.95rem;
  line-height: 1.45;
}

.anfrage-hinweis strong {
  color: var(--accents);
}

.korb-fuss-hinweis strong {
  color: var(--accents);
}

/* ==========================================================
   Handy/Tablet: Leiste unten (Personen & Datum + Ihre Auswahl)
   ========================================================== */
.unten-dock,
.plan-fenster,
.plan-fenster-overlay {
  display: none;
}

@media (max-width: 900px) {
  /* oben keine mitlaufende Leiste mehr */
  #plan-leiste {
    display: none !important;
  }

  html.plan-leiste-an section,
  html.plan-leiste-an .angebote-underheadline {
    scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
  }

  .unten-dock {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem;
    border: 1px solid rgba(150, 191, 12, 0.5);
    border-radius: 12px;
    background-color: rgba(17, 17, 17, 0.97);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    font-family: var(--font-family);
  }

  body {
    padding-bottom: calc(var(--dock-hoehe, 3.5rem) + 1rem);
  }

  body.korb-leiste-an {
    padding-bottom: calc(var(--dock-hoehe, 7rem) + 1rem);
  }

  body.korb-offen .unten-dock,
  body.plan-fenster-offen .unten-dock {
    display: none;
  }

  .dock-plan {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: none;
    border-radius: 8px;
    background-color: var(--bg-cards);
    color: var(--txt-color);
    font-family: var(--font-family);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
  }

  .dock-plan-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dock-plan-status {
    flex: none;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accents);
    white-space: nowrap;
  }

  .dock-plan-status[data-art="hinweis"] {
    color: #e8c547;
  }

  .dock-plan-status[data-art="sperre"] {
    color: #ff8a7a;
  }

  .dock-plan-status[hidden] {
    display: none;
  }

  .dock-plan-stift {
    flex: none;
    color: var(--accents);
    font-size: 1rem;
  }

  /* „Ihre Auswahl“ sitzt jetzt im Dock statt frei schwebend */
  .unten-dock .korb-leiste:not([hidden]) {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    box-shadow: none;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
  }

  .korb-toast,
  body.korb-leiste-an .korb-toast {
    bottom: calc(var(--dock-hoehe, 3.5rem) + 1.25rem);
  }

  /* Fenster von unten */
  .plan-fenster-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .plan-fenster:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 1.25rem;
    border-top: 1px solid var(--accents);
    border-radius: 16px 16px 0 0;
    background-color: #111;
    font-family: var(--font-family);
    color: var(--txt-color);
    animation: plan-hoch 0.25s ease;
  }

  @keyframes plan-hoch {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .plan-fenster-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .plan-fenster-titel {
    margin: 0;
    font-size: 1.15rem;
    font-weight: bold;
  }

  .plan-fenster-zu {
    background: none;
    border: none;
    color: var(--txt-color);
    font-size: 1.8rem;
    line-height: 1;
    padding: 0 0.3rem;
    cursor: pointer;
  }

  .plan-fenster .plan-box {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.6rem 0.75rem;
  }

  .plan-fenster .plan-unverbindlich {
    margin: 0 !important;
  }

  .plan-fenster-fertig {
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 8px;
    background-color: var(--cta-color);
    color: var(--cta-text);
    font-family: var(--font-family);
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
  }
}

@media print {
  .unten-dock,
  .plan-fenster,
  .plan-fenster-overlay {
    display: none !important;
  }
}

/* ==========================================================
   Startbild kompakter (Hintergrundbild bleibt)
   ========================================================== */
#hero {
  min-height: 0;
  padding-block: 2rem;
}

#hero-content {
  padding: 1.5rem 2.5rem;
}

#hero-headline {
  margin: 0 0 0.4rem;
  font-size: 2.2rem;
}

#hero-content > p {
  margin: 0 0 1.25rem;
  font-size: 1.2rem;
}

#hero-content .plan-hero {
  margin: 0 auto 1.25rem;
}

#hero-cta {
  margin-bottom: 0.5rem;
  padding: 0.65rem 1.75rem;
}

.hero-links {
  line-height: 2rem;
  font-size: 1rem;
}

@media (max-width: 600px) {
  #hero {
    padding-block: 0;
  }

  #hero-content {
    padding: 1.1rem 1rem;
  }

  #hero-headline {
    font-size: 1.45rem;
  }

  #hero-content > p {
    margin-bottom: 0.9rem;
    font-size: 1rem;
  }

  #hero-content .plan-hero {
    grid-template-columns: 1fr 1.5fr;
    gap: 0.5rem 0.6rem;
    margin-bottom: 0.9rem;
  }
}

/* ==========================================================
   Adresse, Leergut, Spülservice, Kosten in „Ihre Auswahl“
   ========================================================== */
#spuelen-feld[hidden],
#abweichend-feld[hidden],
#leergut-feld[hidden] {
  display: none !important;
}

.spuelen-option {
  margin-top: 0.75rem;
}

.leergut-feld {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(150, 191, 12, 0.25);
}

.leergut-titel {
  margin: 0 0 0.5rem;
  color: var(--txt-color);
  font-family: var(--font-family);
  font-weight: bold;
  font-size: 0.95rem;
}

#lieferadresse-feld label + input {
  margin-bottom: 0.75rem;
}

.korb-kosten-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0;
  font-size: 0.85rem;
  color: rgba(250, 250, 247, 0.8);
}

#korb-kosten:not(:empty) {
  margin-bottom: 0.35rem;
}

.korb-fuss .korb-summe-zeile {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(150, 191, 12, 0.25);
}

/* Neue Häkchen nicht von ".formular-feld input" auf volle Breite ziehen */
.formular-feld .formular-checkbox input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  flex: none;
}

.spuelen-option {
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(250, 250, 247, 0.15);
  font-size: 0.95rem;
}

/* Getränke: Preis pro Flasche neben der Sorte */
.getraenk-preis {
  margin-left: 0.4rem;
  font-size: 0.85em;
  color: var(--accents);
  white-space: nowrap;
}

/* Austausch-Wunsch je Buffet */
.austausch { margin-top: 0.4rem; }
.austausch-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accents); font-family: var(--font-family); font-size: 0.85rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.austausch-feld { margin-top: 0.35rem; }
.austausch-feld[hidden] { display: none; }
.austausch-feld textarea {
  width: 100%; min-height: 3.2rem; padding: 0.45rem 0.55rem; resize: vertical;
  border: 1px solid #444; border-radius: 6px; background: #111; color: var(--txt-color);
  font-family: var(--font-family); font-size: 0.9rem;
}
.austausch-hinweis { margin: 0.25rem 0 0; font-size: 0.75rem; opacity: 0.75; }

/* Komponenten tauschen (Variante B) */
.austausch-panel {
  margin-top: 0.4rem; padding: 0.55rem 0.65rem; border: 1px solid #333;
  border-radius: 8px; background: #141414;
}
.austausch-gruppe {
  margin: 0.45rem 0 0.2rem; font-size: 0.75rem; font-weight: bold;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--accents);
}
.austausch-gruppe:first-child { margin-top: 0; }
.austausch-teil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem;
  padding: 0.3rem 0; border-bottom: 1px dashed #2a2a2a; font-size: 0.88rem;
}
.austausch-teil-name { flex: 1 1 10rem; }
.austausch-teil.getauscht .austausch-teil-name { text-decoration: line-through; opacity: 0.7; }
.austausch-teil-btn {
  flex: none; padding: 0.15rem 0.55rem; border: 1px solid var(--accents); border-radius: 999px;
  background: none; color: var(--accents); font-family: var(--font-family); font-size: 0.75rem; cursor: pointer;
}
.austausch-teil.getauscht .austausch-teil-btn { border-color: #777; color: #bbb; }
.austausch-wunsch, .austausch-sonst textarea {
  width: 100%; padding: 0.4rem 0.55rem; border: 1px solid #444; border-radius: 6px;
  background: #111; color: var(--txt-color); font-family: var(--font-family); font-size: 0.88rem;
}
.austausch-sonst { display: block; margin-top: 0.55rem; font-size: 0.8rem; }
.austausch-wahl {
  width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--accents); border-radius: 6px;
  background: #111; color: var(--txt-color); font-family: var(--font-family); font-size: 0.85rem;
}
.austausch-wunsch[hidden] { display: none; }
.austausch-sonst textarea { display: block; margin-top: 0.25rem; resize: vertical; }

/* Austausch: bessere Lesbarkeit */
.austausch-link { font-size: 0.95rem; font-weight: bold; }
.austausch-panel { background: #1b1b1b; border-color: #4a4a4a; }
.austausch-gruppe { font-size: 0.8rem; color: var(--accents); }
.austausch-teil { font-size: 0.95rem; color: var(--txt-color); border-bottom-color: #3a3a3a; }
.austausch-teil.getauscht .austausch-teil-name { opacity: 1; color: #c8c8c8; text-decoration-thickness: 2px; }
.austausch-teil-btn { font-size: 0.85rem; padding: 0.25rem 0.7rem; font-weight: bold; }
.austausch-teil.getauscht .austausch-teil-btn { border-color: #bbb; color: #eee; }
.austausch-wahl, .austausch-wunsch, .austausch-sonst textarea {
  font-size: 0.95rem; background: #262626; color: #fff; border-color: var(--accents);
}
.austausch-wahl option, .austausch-wahl optgroup { background: #262626; color: #fff; }
.austausch-wahl optgroup { color: var(--accents); font-style: normal; }
.austausch-wunsch::placeholder, .austausch-sonst textarea::placeholder { color: #aaa; }
.austausch-sonst { font-size: 0.9rem; color: var(--txt-color); }
.austausch-hinweis { opacity: 1; color: #e0e0e0; font-size: 0.82rem; }

/* Suppen & Desserts einklappbar */
#angebote .eingeklappt { display: none !important; }
.einklapp-kopf { cursor: pointer; }
.einklapp-btn {
  display: block; margin: -0.3rem auto 2rem; padding: 0.6rem 1.4rem;
  border: 2px solid var(--accents); border-radius: 999px;
  background: transparent; color: var(--accents);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 0.95rem; font-weight: bold; cursor: pointer;
}
.einklapp-btn:hover, .einklapp-btn:focus-visible { background: var(--accents); color: #000; }

/* Kunden-Banner „Unternehmen, die uns vertrauen“ (Laufband) */
#kunden { margin: 64px 0 0; text-align: center; }
.kunden-headline {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); font-weight: 700;
  color: #fafaf7; margin: 0 16px 24px;
}
.kunden-band {
  overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kunden-spur {
  display: flex; gap: 16px; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: kunden-lauf 72s linear infinite;
}
.kunden-band:hover .kunden-spur { animation-play-state: paused; }
.kunden-logo {
  flex: 0 0 auto; width: 190px; height: 88px; padding: 14px 20px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 14px;
}
.kunden-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@keyframes kunden-lauf { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (max-width: 600px) {
  #kunden { margin-top: 48px; }
  .kunden-logo { width: 150px; height: 72px; padding: 12px 14px; }
  .kunden-spur { gap: 12px; animation-duration: 54s; }
  @keyframes kunden-lauf { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .kunden-band { -webkit-mask-image: none; mask-image: none; padding: 0 16px; }
  .kunden-spur { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .kunden-logo[aria-hidden="true"] { display: none; }
}

/* Laufschrift: Logos mit dunklem Hintergrund (Spiritus Sanctus, plan projekt) */
.kunden-logo.kunden-logo-dunkel {
  background: #000;
  padding: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.kunden-logo-dunkel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Partner: höchstens drei Karten pro Reihe */
.partner-liste {
  grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc((100% - 3rem) / 3)), 1fr));
}

/* ===== Über uns (neu, 22.10.2026): Fakten, Gruß, Einblicke-Galerie ===== */
.überuns-body .überuns-txt + .überuns-txt { margin-top: 0.9rem; }
.überuns-fakten {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.überuns-fakten li {
  padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid rgba(150, 191, 12, 0.45);
  color: var(--txt-color); font-family: var(--font-family); font-size: 0.95rem;
}
.überuns-fakten strong { color: var(--accents); font-weight: var(--weight-headlines); }
.überuns-gruss {
  margin: 1.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--accents);
  color: var(--txt-color); opacity: 0.85; font-family: var(--font-family);
  font-size: 1.05rem; font-style: italic; line-height: 1.5;
}
.überuns-gruss span {
  display: block; margin-top: 0.4rem; font-style: normal;
  font-weight: var(--weight-headlines); color: var(--accents); opacity: 1;
}
.überuns-einblicke { margin-top: 2.5rem; }
.überuns-einblicke-titel {
  color: var(--txt-color); font-family: var(--font-family);
  font-weight: var(--weight-headlines); font-size: 1.6rem; margin: 0 0 1rem;
}
.überuns-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.überuns-foto {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 1rem; overflow: hidden;
}
.überuns-foto picture { display: block; }
.überuns-foto img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.4s ease;
}
.überuns-foto:hover img, .überuns-foto:focus-visible img { transform: scale(1.05); }
.überuns-foto:focus-visible { outline: 3px solid var(--accents); outline-offset: 2px; }
@media (max-width: 700px) {
  .überuns-galerie {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 75%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .überuns-galerie::-webkit-scrollbar { display: none; }
  .überuns-foto { scroll-snap-align: start; }
}
/* große Ansicht */
.überuns-gross {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0, 0, 0, 0.9); cursor: zoom-out;
}
.überuns-gross img { max-width: 100%; max-height: 90vh; border-radius: 0.75rem; }
.überuns-gross button {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--accents); background: #000;
  color: var(--accents); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
/* Bild links so hoch wie der Text (nur Desktop) */
@media (min-width: 901px) {
  #ueber-uns .überuns-card { align-items: stretch; }
  #ueber-uns .überuns-media, #ueber-uns .überuns-media picture { display: block; height: 100%; }
  #ueber-uns .überuns-media img { height: 100%; aspect-ratio: auto; min-height: 320px; }
}

/* ===== Getränke-Auswahl: nichts mehr über den Rand (22.10.2026) ===== */
.kontakt-formular { min-width: 0; }
.getraenk-zeile { grid-template-columns: minmax(0, 1fr) auto; }
.getraenk-name { min-width: 0; flex-wrap: wrap; row-gap: 0.15rem; }
.getraenk-name .getraenk-preis { flex-basis: 100%; padding-left: 1.75rem; }
@media (max-width: 560px) {
  .getraenke-auswahl { padding: 0.6rem 0.75rem; }
  .getraenk-zeile { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; }
  .getraenk-name .getraenk-preis { flex-basis: auto; padding-left: 0; margin-left: auto; }
  .getraenk-menge { padding-left: 1.75rem; }
  .getraenk-menge .getraenk-einheit { display: inline; font-size: 0.85rem; opacity: 0.75; }
}

/* ===== Brötchen als bunte Mischung: Wünsche im Anfrageformular (22.10.2026) ===== */
.mischung-felder {
  margin-top: 0.75rem; padding: 0.75rem 0.9rem;
  border: 1px dashed rgba(150, 191, 12, 0.5); border-radius: 8px;
  background-color: rgba(150, 191, 12, 0.05);
  font-family: var(--font-family); color: var(--txt-color);
}
.mischung-titel { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: var(--weight-headlines); color: var(--accents); }
.mischung-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-size: 0.95rem; }
.mischung-zeile input.mischung-kaese { width: 4.5rem; box-sizing: border-box; padding: 0.35rem 0.4rem; text-align: center; }
.mischung-schwein { font-size: 0.95rem; }

/* Live-Cooking: Foto mit kleinem Bildnachweis (24.10.2026) */
.livecooking-media { position: relative; }
.livecooking-foto-hinweis {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); color: var(--txt-color);
  font-family: var(--font-family); font-size: 0.72rem; line-height: 1.4;
  letter-spacing: 0.02em; opacity: 0.9; pointer-events: none;
}

/* Einheitliche Schrift: Grundschrift war Times New Roman (Browser-Standard) (24.10.2026) */
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
button, input, select, textarea { font-family: inherit; }

/* Sprungmenü über den Angeboten */
.sprung-menue {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 24px; padding: 10px 2px;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sprung-menue::-webkit-scrollbar { display: none; }
.sprung-menue a {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--accents); color: var(--accents);
  font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.sprung-menue a:hover, .sprung-menue a:focus-visible, .sprung-menue a.aktiv {
  background: var(--accents); color: #000;
}
#angebote .angebote-underheadline { scroll-margin-top: 72px; }

/* Häufige Fragen (24.10.2026) */
#fragen {
  box-sizing: border-box;
  width: calc(100% - 3rem);
  max-width: 50rem;
  margin: 4rem auto 2rem;
  scroll-margin-top: calc(var(--header-hoehe) + 1.5rem);
}
#fragen-headline {
  display: flex; justify-content: center; text-align: center;
  color: var(--txt-color); font-weight: var(--weight-headlines);
  font-size: 3rem; font-family: var(--font-family); margin: 0 0 0.5rem;
}
#fragen-linie {
  width: 70%; height: 1px; background-color: var(--accents);
  margin-inline: auto; margin-bottom: 3rem;
}
.fragen-liste { display: flex; flex-direction: column; gap: 0.75rem; }
.frage {
  border: 1px solid rgba(150, 191, 12, 0.35);
  border-radius: 1rem;
  background: var(--bg-cards);
}
.frage summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.1rem 3.25rem 1.1rem 1.25rem;
  color: var(--txt-color); font-family: var(--font-family);
  font-weight: 600; font-size: 1.05rem; line-height: 1.4;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: 1.25rem; top: 50%;
  transform: translateY(-50%);
  color: var(--accents); font-size: 1.6rem; font-weight: 400; line-height: 1;
}
.frage[open] summary::after { content: "–"; }
.frage summary:focus-visible { outline: 2px solid var(--accents); outline-offset: 2px; border-radius: 1rem; }
.frage p {
  margin: 0; padding: 0 1.25rem 1.2rem;
  color: var(--txt-color); opacity: 0.85;
  font-family: var(--font-family); font-size: 1rem; line-height: 1.6;
}
.frage a { color: var(--accents); }
@media (max-width: 900px) { #fragen-headline { font-size: 2.4rem; } }
@media (max-width: 600px) {
  #fragen { width: calc(100% - 2rem); }
  #fragen-headline { font-size: 2rem; }
  .frage summary { font-size: 1rem; padding: 1rem 3rem 1rem 1rem; }
  .frage p { padding: 0 1rem 1rem; }
}


/* Buffets & Vorspeisen, 2. Dessert, kompakte Fragen (24.10.2026) */
.karte-zweites-dessert {
  color: var(--accents); font-weight: 600; font-size: 0.95rem;
}
.zweites-dessert {
  margin: 1rem 0; padding: 1rem 1.1rem;
  border: 1px solid rgba(150, 191, 12, 0.45); border-radius: 0.8rem;
  background: rgba(150, 191, 12, 0.08);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.zweites-dessert[hidden] { display: none; }
.zweites-dessert label { font-weight: 600; color: var(--txt-color); }
.zweites-dessert label span { font-weight: 400; opacity: 0.8; }
.zweites-dessert select { max-width: 100%; font: inherit; padding: 0.55rem 0.7rem; border-radius: 0.5rem; }
#fragen { max-width: 72rem; margin: 3rem auto 1.5rem; }
#fragen-headline { margin-bottom: 0.25rem; }
#fragen-linie { margin-bottom: 1.75rem; }
.fragen-liste { gap: 0.55rem; }
.frage summary { padding: 0.8rem 3rem 0.8rem 1.1rem; font-size: 1rem; }
.frage p { padding: 0 1.1rem 0.9rem; font-size: 0.95rem; line-height: 1.55; }
@media (min-width: 900px) {
  .fragen-liste { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 1rem; }
}
/* Kartennamen am PC eine Spur kleiner, damit lange Namen in eine Zeile passen (24.10.2026) */
@media (min-width: 1101px) {
  .karte-headline { font-size: 1.28rem; }
}
/* Sprungmenü mittig (24.10.2026) – Ränder statt justify-content, damit es am Handy beim Wischen nicht links abgeschnitten wird */
.sprung-menue > a:first-child { margin-left: auto; }
.sprung-menue > a:last-child { margin-right: auto; }
/* Austausch: gesperrte Komponenten (24.10.2026) */
.austausch-fest { font-size: 0.85rem; opacity: 0.7; font-style: italic; white-space: nowrap; }

/* Datum oben (Startbild + Leiste): Knopf mit eigenem Monatskalender (24.10.2026) */
.plan-datum-wrap { position: relative; }
.plan-feld .plan-datum {
  box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--accents); border-radius: 6px;
  background-color: var(--bg-cards); color: var(--txt-color);
  font-family: var(--font-family); font-size: 1rem; text-align: left; cursor: pointer;
}
.plan-feld .plan-datum:focus-visible { outline: 2px solid var(--hover-color); outline-offset: 1px; }
.plan-datum-icon { flex-shrink: 0; color: var(--accents); }
.plan-leiste .plan-feld .plan-datum { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.plan-kal {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
  box-sizing: border-box; width: 19.5rem; max-width: calc(100vw - 2rem);
  padding: 0.85rem; border: 1px solid var(--accents); border-radius: 12px;
  background-color: #111; color: var(--txt-color); font-family: var(--font-family);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); text-align: left;
}
.plan-kal[hidden] { display: none; }
.plan-kal .kal-nav { width: 2.2rem; height: 2.2rem; }
.plan-kal .kal-raster { gap: 0.25rem; }
.plan-kal .kal-tag { min-height: 2.1rem; font-size: 0.85rem; }
.plan-kal .kal-legende { margin-top: 0.6rem; font-size: 0.75rem; }
.plan-kal-hinweis { margin: 0.45rem 0 0 !important; font-size: 0.78rem !important; opacity: 0.85; color: var(--txt-color) !important; }
.plan-leiste .plan-kal { top: calc(100% + 8px); }
@media (max-width: 600px) { .plan-kal { right: auto; left: 50%; transform: translateX(-50%); width: min(19.5rem, calc(100vw - 1.5rem)); } .plan-datum-wrap { position: static; } .plan-box { position: relative; } }
.kal-hinweis-sonntag { margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--txt-color); opacity: 0.8; }

/* Kalender oben: Monat und Legende gut lesbar (Startbild-Texte überschreiben sonst Farbe/Größe) */
#hero-content .plan-kal .kal-monat, .plan-kal .kal-monat {
  margin: 0 !important; color: var(--txt-color) !important;
  font-family: var(--font-family) !important; font-size: 1.1rem !important; font-weight: 700 !important;
  line-height: 1.3 !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important;
}
.plan-kal .kal-wochentag { color: var(--txt-color) !important; opacity: 0.75; }
.plan-kal .kal-legende, .plan-kal .kal-legende li { color: var(--txt-color) !important; }

/* Geschirr & Spülservice in „Ihre Auswahl“ (24.10.2026) */
.korb-optionen { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(150, 191, 12, 0.45); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.korb-optionen[hidden], .korb-option[hidden] { display: none; }
.korb-optionen-titel { margin: 0; font-weight: 600; color: var(--accents); font-size: 0.95rem; }
.korb-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 0.92rem; line-height: 1.4; color: var(--txt-color); }
.korb-option input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accents); cursor: pointer; }

/* Getauschte Komponenten sichtbar, auch zugeklappt (Formular + Warenkorb) */
.austausch-uebersicht { list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.85rem; line-height: 1.45; color: var(--txt-color); }
.austausch-uebersicht li { padding: 0.1rem 0; }
.austausch-alt { text-decoration: line-through; opacity: 0.6; }

/* Kalender im Fenster unten (Handy): nach oben öffnen, damit er sichtbar ist */
.plan-fenster .plan-datum-wrap, .plan-blatt .plan-datum-wrap { position: static; }
.plan-fenster .plan-box, .plan-blatt { position: relative; }
.plan-fenster .plan-kal, .plan-blatt .plan-kal { top: auto; bottom: calc(100% + 8px); left: 50%; right: auto; transform: translateX(-50%); width: min(19.5rem, calc(100vw - 1.5rem)); }

/* Fenster unten: Kalender über die ganze Breite im Fenster, Fenster scrollt bei Bedarf */
.plan-fenster:not([hidden]) { max-height: calc(100dvh - 0.5rem); overflow-y: auto; }
.plan-kal.plan-kal-inline { position: static; grid-column: 1 / -1; width: auto; max-width: none; transform: none; margin: 0.25rem 0 0; box-shadow: none; background-color: #1a1a1a; }

/* Fenster unten: Innenabstand in die Höhe einrechnen, damit oben nichts abgeschnitten wird */
.plan-fenster:not([hidden]) { box-sizing: border-box; }

/* Gesamttest 24.10.2026: Sprungmenü unter Header/Leiste, Toast, Korb-Hinweis */
.sprung-menue { top: var(--oben-belegt, 0px); }
#angebote .angebote-underheadline { scroll-margin-top: calc(var(--oben-belegt, 0px) + 5rem); }
.korb-toast { transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s; }
.korb-toast:not(.sichtbar) { opacity: 0; visibility: hidden; pointer-events: none; }
.korb-zeile-warnung { margin: 0.35rem 0 0; font-size: 0.8rem; line-height: 1.3; color: #ffb36b; }

/* Startbild: helle, gut lesbare Schrift auf dem dunklen Foto (24.10.2026) */
#hero-content { background-color: rgba(0, 0, 0, 0.35); }
#hero-headline { color: #fafaf7; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
#hero-content > p { color: #fafaf7; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.hero-links { color: #fafaf7; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.hero-links:hover, .hero-links:focus-visible { color: var(--accents); }

/* Kopf-Menü mit 11 Links (inkl. Partyplaner, 24.10.2026): zwischen 901 und 1399 px enger setzen,
   damit nichts rechts aus dem Bild läuft. Am Handy darf das aufgeklappte Menü länger werden. */
@media (min-width: 901px) and (max-width: 1399px) {
  #nav { gap: clamp(0.6rem, 1.1vw, 1.4rem); margin-right: 1rem; }
  #nav .nav-links { font-size: clamp(15px, 1.4vw, 19px); }
}
@media (max-width: 900px) {
  #nav.nav-offen { max-height: min(44rem, calc(100vh - var(--header-hoehe, 6rem))); overflow-y: auto; }
}

/* Kinderfelder im Anfrageformular (nur Privatkunden, 24.10.2026) */
.kinder-felder .kinder-titel { display: block; color: var(--txt-color); font-family: var(--font-family); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; }
.kinder-felder .kinder-titel small { font-weight: 400; opacity: 0.8; }
.kinder-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.kinder-reihe label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 400; }
.kinder-reihe input { width: 100%; box-sizing: border-box; }

/* Fotos auf den Angebotskarten (Martin Valk, 24.10.2026): 3:2, oben bündig in der Karte */
.karte-bild { display: block; width: calc(100% + 2rem); height: auto; margin: -1rem -1rem 0; border-radius: 1rem 1rem 0 0; aspect-ratio: 3 / 2; object-fit: cover; background: #111; }
.angebot-karte:has(.karte-bild) { overflow: hidden; }
@media (max-width: 600px) {
  /* Handy: Foto oben über die ganze Karte, Knopf rückt eine Zeile tiefer */
  .angebot-karte > .karte-bild { grid-column: 1 / -1; grid-row: 1; width: calc(100% + 2rem); margin: -0.85rem -1rem 0.6rem; border-radius: 1rem 1rem 0 0; }
  .angebot-karte:has(.karte-bild) > .karte-btn { grid-row: 2 / span 3; }
}

/* Startbereich: Versprechen + drei Einstiege (24.10.2026) */
.hero-kicker { display: block; color: var(--accents); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0.4rem; }
#hero-content > p { max-width: 42rem; margin-inline: auto; }
.einstiege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; max-width: 900px; margin: 1.4rem auto 1rem; }
.einstieg { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; padding: 0.9rem 1rem; border: 1px solid rgba(150, 191, 12, 0.45); border-radius: 0.9rem; background: rgba(0, 0, 0, 0.45); color: var(--txt-color); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.einstieg:hover, .einstieg:focus-visible { border-color: var(--accents); background: rgba(150, 191, 12, 0.12); }
.einstieg strong { font-size: 1.1rem; color: #fff; }
.einstieg span:last-child { font-size: 0.9rem; color: rgba(250, 250, 247, 0.8); line-height: 1.35; }
.einstieg-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; border-radius: 50%; background: rgba(150, 191, 12, 0.14); color: var(--accents); margin-bottom: 0.15rem; }
.einstieg-icon svg { width: 1.35rem; height: 1.35rem; display: block; }
@media (max-width: 700px) { .einstiege { grid-template-columns: 1fr; gap: 0.6rem; } .einstieg { flex-direction: row; align-items: center; flex-wrap: wrap; } .einstieg strong { flex: 1; } .einstieg span:last-child { flex-basis: 100%; } }

/* WhatsApp-Knopf unten rechts (24.10.2026) */
.wa-knopf { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem 0.7rem 0.9rem; border-radius: 2rem; background: #25d366; color: #062b12; font-family: var(--font-family); font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); transition: transform 0.15s, box-shadow 0.15s; }
.wa-knopf:hover, .wa-knopf:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); color: #062b12; }
.wa-knopf svg { flex: none; }
@media (max-width: 900px) { .wa-knopf { right: 0.75rem; bottom: calc(var(--dock-hoehe, 0px) + 1rem); width: 3.2rem; height: 3.2rem; padding: 0; justify-content: center; border-radius: 50%; } .wa-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } body.plan-fenster-offen .wa-knopf { display: none; } }
@media print { .wa-knopf { display: none; } }

/* Termin frei – positiver Hinweis im Formular (24.10.2026) */
.formular-frei { color: var(--accents); font-family: var(--font-family); font-weight: 600; font-size: 0.95rem; margin: 0 0 1rem; }

/* Dankeseite nach der Anfrage (24.10.2026) */
.danke-schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.8rem; text-align: left; }
.danke-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.8rem; align-items: start; }
.danke-schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accents); color: #000; font-weight: 800; }
.danke-schritte strong { display: block; color: #fff; }
.danke-schritte span { color: rgba(250, 250, 247, 0.8); font-size: 0.95rem; }
.danke-box { border: 1px solid rgba(150, 191, 12, 0.45); border-radius: 0.9rem; padding: 1rem 1.1rem; margin: 1.2rem 0; background: rgba(0, 0, 0, 0.35); text-align: left; }
.danke-box h2 { font-size: 1.05rem; color: var(--accents); margin: 0 0 0.5rem; text-align: left; } .danke-box h2 + ul { margin-bottom: 1rem; }
.danke-box ul { margin: 0; padding-left: 1.1rem; }
.danke-box li { margin: 0.15rem 0; }
.danke-box li small { display: block; color: rgba(250, 250, 247, 0.75); padding-left: 0.2rem; }
.danke-preis { margin: 0.7rem 0 0; font-weight: 700; color: #fff; }

/* Kategorie-Fotos unter den Überschriften Vorspeisen, Imbiss, Salate, Desserts (Martin Valk, 24.10.2026) */
.kategorie-bild { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 1200 / 457; object-fit: cover; margin: 0.2rem auto 1.1rem; border-radius: 1rem; background: #111; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
@media (max-width: 600px) {
  .kategorie-bild { width: calc(100% - 2rem); border-radius: 0.8rem; margin-bottom: 0.9rem; }
}

/* Handy-Leiste unten: eigene Symbole statt Emojis (24.10.2026) */
.dock-icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin-right: 0.3em; color: var(--accents); }
.dock-plan-stift svg { display: block; width: 1rem; height: 1rem; }

/* Suppen bei Abholung: heiß oder kalt vakuumiert (24.10.2026) */
.formular-suppen-art { margin: 0.8rem 0 0.4rem; padding: 0.8rem 1rem; border: 1px solid rgba(150, 191, 12, 0.45); border-radius: 0.8rem; background: rgba(150, 191, 12, 0.06); }
.formular-suppen-art[hidden], #suppen-art-wahl[hidden] { display: none; }
.formular-suppen-art-titel { margin: 0 0 0.5rem; font-weight: bold; color: var(--accents); }
.formular-suppen-art .formular-hinweis { margin: 0.5rem 0 0; }

/* Startbereich am Handy kürzer (24.10.2026): kurzer Einleitungssatz, drei Einstiege als kleine Kacheln nebeneinander ohne Beschreibung */
.hero-text-handy { display: none; }
@media (max-width: 700px) {
  .hero-text-lang { display: none; }
  .hero-text-handy { display: inline; }
  .einstiege { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.9rem auto 0.8rem; }
  .einstieg { flex-direction: column; align-items: center; justify-content: flex-start; flex-wrap: nowrap; text-align: center; padding: 0.7rem 0.35rem; gap: 0.35rem; }
  .einstieg strong { flex: none; font-size: 0.85rem; line-height: 1.2; }
  .einstieg span:last-child { display: none; }
}

/* Info-Leiste über den Angeboten statt langem Grundhinweis + Kennzeichen 2. Dessert auf Buffetkarten (24.10.2026) */
.infoleiste { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.8rem; }
.infoleiste li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; line-height: 1.35; text-align: left; }
.infoleiste svg { width: 1.45rem; height: 1.45rem; color: var(--accents); flex: none; }
.infoleiste strong { color: #fff; }
.infoleiste-link { display: block; width: fit-content; margin: 0.7rem auto 0; font-size: 0.85rem; color: var(--accents); }
@media (max-width: 700px) {
  .infoleiste { flex-direction: column; align-items: flex-start; gap: 0.55rem; width: fit-content; }
}
.karte-badge { display: inline-block; width: fit-content; margin: 0.15rem 0 0.5rem; padding: 0.15rem 0.6rem; border: 1px solid rgba(150, 191, 12, 0.5); border-radius: 999px; background: rgba(150, 191, 12, 0.15); color: var(--accents); font-size: 0.78rem; font-weight: bold; line-height: 1.4; }

/* Referenzen als Karten (24.10.2026): große Karte Sommerfest, darunter Weihnachtsfeier + SAPV, Emscher breit */
.ref-liste { box-sizing: border-box; max-width: calc(1080px + 2rem); margin: 0 auto 2.5rem; padding-inline: 1rem; display: flex; flex-direction: column; gap: 1.4rem; text-align: left; }
.ref-einleitung { max-width: 60ch; margin: 0 auto; text-align: center; color: rgba(250, 250, 247, 0.8); }
.ref { display: grid; background: var(--bg-cards); border: 1px solid rgba(150, 191, 12, 0.3); border-radius: 1rem; overflow: hidden; }
.ref-gross { grid-template-columns: 1.25fr 1fr; }
.ref-fotos { display: grid; gap: 3px; background: #000; }
.ref-fotos img { display: block; width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
.ref-gross .ref-fotos { grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; }
.ref-gross .ref-fotos img:first-child { grid-column: 1 / -1; }
.ref-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.ref-reihe .ref:not(.ref-ohne-foto) { grid-template-rows: auto 1fr; }
.ref-reihe .ref-fotos { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
.ref-ohne-foto { align-content: center; }
.ref-text { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.6rem; min-width: 0; }
.ref-text h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; color: #fff; }
.ref-text p { margin: 0; color: rgba(250, 250, 247, 0.8); line-height: 1.5; }
.ref-logos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ref-logo { display: block; width: auto; height: 2.1rem; padding: 0.3rem 0.6rem; background: #fff; border-radius: 0.4rem; align-self: flex-start; }
.ref-fakten { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ref-fakten span { padding: 0.15rem 0.7rem; border: 1px solid rgba(150, 191, 12, 0.5); border-radius: 999px; background: rgba(150, 191, 12, 0.14); color: var(--accents); font-size: 0.8rem; font-weight: bold; }
.ref-leistungen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.92rem; }
.ref-leistungen li { display: flex; align-items: center; gap: 0.4rem; color: rgba(250, 250, 247, 0.9); }
.ref-leistungen li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accents); flex: none; }
@media (max-width: 820px) {
  .ref-gross { grid-template-columns: 1fr; }
  .ref-gross .ref-fotos { aspect-ratio: 3 / 2; }
  .ref-reihe { grid-template-columns: 1fr; }
  .ref-text { padding: 1.2rem; }
}
/* Kennzeichen 2. Dessert am Handy über die volle Kartenbreite in einer Zeile */
@media (max-width: 600px) {
  .angebot-karte > .karte-badge { grid-column: 1 / -1; white-space: nowrap; margin: 0.35rem 0 0.1rem; }
}

/* Startbereich: nur noch zwei Einstiege (Familien- & Trauerfeier entfernt, 25.10.2026) */
.einstiege { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
@media (max-width: 700px) {
  .einstiege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fehlerkorrektur 25.10.2026 */
/* Kontaktzeile im Fuß */
.footer-kontakt { margin: 0; color: var(--txt-color); opacity: 0.8; font-family: var(--font-family); font-size: 0.9rem; line-height: 1.7; }
.footer-kontakt a { color: var(--accents); text-decoration: none; }
.footer-kontakt a:hover { text-decoration: underline; }
/* Untere Leiste nur auf Seiten mit Anfrageformular (nicht AGB/Datenschutz/Impressum) */
body:not(:has(#kontakt-formular)) #unten-dock { display: none !important; }
/* Knöpfe auf den Karten am Handy größer (Daumen) */
@media (max-width: 700px) {
  .korb-karte .korb-dazu-btn, .korb-karte .korb-gewaehlt-btn { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.8rem; }
}
/* Meldung „in Ihrer Auswahl“ verdeckt nicht den WhatsApp-Knopf */
body:has(.korb-toast.sichtbar) .wa-knopf { opacity: 0; pointer-events: none; }
.wa-knopf { transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s; }