/* Gästeseite – nach dem Markenbuch: Parkblau (Struktur: Fuß, Sekundärknopf), Parkgelb (nur der Primärknopf), Tinte, Sand;
   Palmgrün als Bereichsfarbe von Kidoo (Band unter dem Kopf, Tisch-Badge – nie Text, nie Knopf); Carlito 400/700;
   H1 40 px, H2 28 px, H3 20 px, aller übrige Text 17 px / 1,6, Preis 24 px in Tinte; Rundung 20 px;
   Tastaturfokus 3 px Parkblau mit 2 px Abstand; Bedienelemente mit 2 px Kontur in Tinte.
   Logos nur als unveränderte Originaldateien: Kidoo im Kopf auf Weiß, das Parklogo im weißen Kreis als Absender im Fuß. */
:root {
  --blau: #005CA9;
  --tiefblau: #004878;
  --gelb: #FFCC00;
  --gruen: #89CF00;
  --tinte: #1E1E1E;
  --sand: #F5F4D8;
  --grau: #5b5b5b;
  --linie: #cfcfc6;
  --rund: 20px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Carlito, Calibri, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinte);
  background: #fff;
}
body.gesperrt { overflow: hidden; }
#app { max-width: 620px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
:where(#app, .blatt-hinter) h1 { font-size: 40px; font-weight: 700; line-height: 1.15; margin: 22px 0 12px; }
:where(#app, .blatt-hinter) h2 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 6px; }
:where(#app, .blatt-hinter) :is(strong, legend) { font-weight: 700; }
:where(#app, .blatt-hinter) p { margin: 0 0 12px; }
:where(#app, .blatt-hinter) :is(button, input, select) { font: inherit; color: inherit; }
:where(#app, .blatt-hinter) button { cursor: pointer; }
:where(#app, .blatt-hinter) :focus { outline: none; }
:where(#app, .blatt-hinter) :focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.zweit:focus-visible, .weg:focus-visible, .fuss :focus-visible { outline-color: var(--tinte); }
.fuss :focus-visible { outline-color: #fff; }
.lade { padding: 48px 16px; text-align: center; }
.klein { font-size: 17px; color: var(--grau); }
.gross { font-size: 20px; }

/* Kopf: das Kidoo-Logo auf Weiß (48 px hoch, die Datei wird nur skaliert – nicht beschnitten, gefärbt oder ergänzt),
   rechts der Ort der Bestellung als Bereichs-Badge (Pille in Palmgrün, Versalien, dunkle Schrift). Darunter ein Band in
   der Bereichsfarbe. Der Kopf läuft mit der Seite weg; oben stehen bleibt nur die Rubrikenleiste. */
.kopf {
  min-height: 84px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; background: #fff; color: var(--tinte); border-bottom: 8px solid var(--gruen);
}
.logo { flex: 0 1 auto; height: 48px; width: auto; max-width: 62%; }
.kopf-name { font-size: 20px; line-height: 1.25; }
.ort {
  flex: 0 0 auto; background: var(--gruen); color: var(--tinte); border-radius: var(--rund); padding: 5px 16px;
  font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .06em;
}

:where(#app) main { flex: 1; padding: 0 16px 120px; }
.meldung, .hinweis, .wartezeit, .rechnung {
  margin: 12px 16px 0; padding: 12px 16px; border-radius: var(--rund);
  background: var(--sand); border: 2px solid var(--tinte);
}
:where(#app) main :is(.hinweis, .wartezeit, .rechnung) { margin: 14px 0; }
.rechnung { font-weight: 700; margin-top: 20px; }
.meldung { font-weight: 700; }
.einleitung { margin: 16px 0 0; }

.rubriken {
  position: sticky; top: var(--oben, 0px); z-index: 4; /* --oben: Höhe des mitlaufenden Website-Kopfs (gast.js) */
  display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 10px 16px;
  background: #fff; border-bottom: 1px solid var(--linie); scrollbar-width: none;
}
.rubriken::-webkit-scrollbar { display: none; }
.rubriken a {
  flex: 0 0 auto; padding: 5px 14px; border-radius: var(--rund); background: #fff; border: 2px solid var(--tinte);
  color: var(--tinte); text-decoration: none; white-space: nowrap; font-size: 17px;
}
.rubrik { padding-top: 26px; scroll-margin-top: 66px; }
.rubriktext { color: var(--grau); margin-bottom: 6px; }

/* Artikelzeile: Bild · Name, Beschreibung und Preis · Plus. Der Preis steht unter dem Namen, damit neben dem Bild
   auch auf schmalen Handys genug Platz für lange Namen bleibt. */
.artikel {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  width: 100%; padding: 16px 0; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--linie);
}
.a-bild { flex: 0 0 auto; width: 88px; height: 88px; border-radius: var(--rund); object-fit: cover; background: var(--sand); }
.artikel.aus .a-bild { opacity: .45; }
/* Schmale Handys: kleineres Bild, damit lange Namen neben Bild und Plus Platz haben (sie dürfen außerdem umbrechen) */
@media (max-width: 380px) {
  .artikel { gap: 10px; }
  .a-bild { width: 72px; height: 72px; }
}
.a-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-text strong { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.a-beschr { color: var(--grau); font-size: 17px; line-height: 1.6; }
.a-allergene, .a-alter { font-size: 17px; line-height: 1.6; color: var(--grau); }
.a-preis { margin-top: 6px; font-weight: 700; font-size: 24px; line-height: 1.2; white-space: nowrap; color: var(--tinte); }
.a-preis.leise { font-weight: 400; font-size: 17px; color: var(--grau); }
.a-plus {
  flex: 0 0 auto; align-self: center;
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tinte); background: #fff;
  font-size: 26px; line-height: 34px; text-align: center; font-weight: 700;
}
.artikel.aus { cursor: default; }
.artikel.aus .a-text strong { color: var(--grau); }

/* Zwei Stufen: Primär = Parkgelb mit Kontur in Tinte, Sekundär = Parkblau mit weißer Schrift */
.haupt, .zweit, .korbleiste {
  display: block; width: 100%; padding: 14px 18px; border-radius: var(--rund);
  font-weight: 700; font-size: 18px; line-height: 1.3; text-align: center;
}
.haupt, .korbleiste { background: var(--gelb); color: var(--tinte); border: 2px solid var(--tinte); }
.haupt:disabled { background: #eee; border-color: #767676; color: #555; cursor: default; }
.zweit { background: var(--blau); color: #fff; border: 2px solid var(--blau); margin-top: 12px; }
.korbleiste {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 588px; z-index: 6;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.korbleiste strong { font-size: 20px; }
.zurueck { background: none; border: 0; padding: 14px 0 0; color: var(--blau); font-weight: 700; }

.blatt-hinter { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; }
.blatt {
  position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: var(--rund) var(--rund) 0 0; padding: 24px 16px 20px;
}
.blatt h2 { padding-right: 52px; }
.blatt-bild { display: block; width: 160px; height: 160px; margin: 0 0 14px; border-radius: var(--rund); object-fit: cover; background: var(--sand); }
.zu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--tinte); background: #fff; font-size: 26px; line-height: 1; }
:where(#app, .blatt-hinter) fieldset { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
:where(#app, .blatt-hinter) legend { padding: 0; margin-bottom: 4px; font-size: 20px; }
.wahl-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
.wahl-zeile input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--blau); }
.wahl-zeile span { flex: 1; display: flex; flex-direction: column; line-height: 1.6; }
.wahl-zeile small { color: var(--grau); font-size: 17px; }
.wahl-zeile .plus { flex: 0 0 auto; color: var(--grau); }
.feld { display: block; margin-top: 14px; }
.feld span { display: block; font-weight: 700; margin-bottom: 4px; }
.feld input, .feld select {
  width: 100%; min-height: 50px; padding: 11px 16px; border: 2px solid var(--tinte); border-radius: var(--rund); background: #fff; font-size: 17px;
}
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.menge { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 20px 0; }
.menge button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--tinte); background: #fff; font-size: 24px; line-height: 1; font-weight: 700; }
.menge button:disabled { border-color: #767676; color: #767676; cursor: default; }
.menge span { min-width: 28px; text-align: center; font-size: 24px; font-weight: 700; }
.menge.klein { gap: 10px; margin: 0; }
.menge.klein button { width: 44px; height: 44px; font-size: 22px; }
.menge.klein span { min-width: 22px; font-size: 20px; }

.positionen { list-style: none; margin: 8px 0 0; padding: 0; }
.positionen li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.p-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.p-text span { color: var(--grau); font-size: 17px; }
.p-summe { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.zeile { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 0; }
.zeile.summe { font-size: 20px; padding-top: 10px; font-weight: 700; }
.preis { font-size: 28px; line-height: 1.2; color: var(--tinte); }
.daten { margin-top: 10px; }
.daten .gesamt { margin-top: 22px; }
.daten .haupt { margin-top: 12px; }
.daten > .klein { margin-top: 10px; }

.wahl { padding-top: 12px; }
.weg {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; margin: 14px 0 0; padding: 16px 18px;
  background: var(--blau); color: #fff; border: 2px solid var(--blau); border-radius: var(--rund);
}
.weg strong { font-size: 20px; }
/* Lieferung, erster Schritt: Postleitzahl und Liefergebiet */
.wahl.plz .daten .haupt, .wahl.plz .daten .zweit { margin-top: 14px; }
.wahl.plz .hinweis .haupt { margin-top: 10px; }
.wahl.plz h2 { margin-top: 30px; }
.gebiet { list-style: none; margin: 8px 0 14px; padding: 0; }
.gebiet li { padding: 6px 0; border-bottom: 1px solid var(--linie); }

.status { padding-top: 26px; text-align: center; }
.status .gross { margin-bottom: 8px; }
.zeichen {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: var(--blau); color: #fff;
  font-size: 40px; line-height: 72px; font-weight: 700;
}
.zeichen.storniert, .zeichen.abgelaufen, .zeichen.zahlung { background: var(--tinte); }
.beleg { text-align: left; margin: 22px 0 0; padding: 16px; background: var(--sand); border-radius: var(--rund); }
.belegkopf { display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.beleg .positionen li { border-color: #bdbc9f; }
.status .haupt { margin-top: 18px; }
.status .hinweis { text-align: left; }

/* Fuß in Parkblau (Struktur). Das Parklogo steht als Absender im weißen Kreis: 168 px, die Marke selbst misst darin
   146 px und liegt damit über den 140 px Mindestbreite der Vollmarke. Rundum bleibt Schutzraum. */
.fuss { margin-top: 28px; padding: 28px 16px 110px; font-size: 17px; background: var(--blau); color: #fff; text-align: center; }
.fuss .absender { display: block; width: 168px; height: 168px; margin: 0 auto 22px; }
.fuss p { margin: 0 0 10px; }
.fuss .links a { color: #fff; margin: 0 8px; }
/* Mit Kopf und Fuß der Website: statt des blauen Fußes nur eine schmale Zeile mit dem Pflichtteil der Bestellung */
.rechtliches { margin: 24px auto 0; padding: 14px 16px 110px; max-width: 620px; border-top: 1px solid var(--linie); font-size: 14px; line-height: 1.5; color: var(--grau); text-align: center; }
.rechtliches p { margin: 0 0 6px; }
.rechtliches .links a { color: var(--blau); margin: 0 8px; }
.rechtliches .legende { text-align: left; display: inline-block; }
.datenschutz-zeile a { color: var(--blau); margin-right: 14px; }
/* Allergene und Zusatzstoffe: Legende im Fuß, aufklappbar und unaufdringlich */
.legende { font-size: 14px; line-height: 1.5; color: var(--grau); margin: 8px 0; }
.legende summary { cursor: pointer; text-decoration: underline; }
.legende-liste { list-style: none; padding: 0; margin: 6px 0 0; columns: 2; column-gap: 16px; }
.legende-liste li { break-inside: avoid; }

/* Kopf und Fuß der Website (Einstellung „kopf_fuss“): Elementor-Vorlagen um die Bestellseite. Sie bringen ihre eigenen
   Stile mit (Kit-Klasse nur an ihrer Hülle, damit die Kit-Regeln die Bestellseite nicht umfärben). */
.fplb-website { font-size: 16px; line-height: 1.5; }
.fplb-website-kopf { position: relative; z-index: 50; }

/* Speisekarte im Park: Standort bestätigen, bevor die Karte erscheint */
.ort-pruefen { padding-top: 8px; }
.ort-pruefen .haupt { margin-top: 18px; }

/* Warten auf die Abholung: Hinweis, Seite offen zu lassen */
.wach-hinweis { margin: 16px 0; padding: 14px 16px; border-radius: var(--rund); background: var(--sand); border: 2px solid var(--tinte); }
.wach-hinweis p { margin: 0 0 6px; }
.wach-hinweis .zweit { margin-top: 6px; }

/* Fertig-Meldung: über allem, groß und deutlich, mit Bestellnummer */
.fertig-hinter { position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fertig-meldung {
  width: 100%; max-width: 460px; background: #fff; border: 6px solid var(--gruen); border-radius: var(--rund);
  padding: 28px 20px 22px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.fertig-zeichen {
  width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; background: var(--gruen); color: var(--tinte);
  font-size: 60px; font-weight: 700; line-height: 96px; animation: fertig-puls 1.2s ease-in-out infinite;
}
.fertig-meldung h2 { font-size: 32px; line-height: 1.15; margin: 0 0 8px; }
.fertig-nr { font-size: 44px; font-weight: 700; margin: 4px 0 8px; letter-spacing: .02em; }
.fertig-text { font-size: 20px; margin: 0 0 18px; }
.fertig-meldung .haupt { width: 100%; }
@keyframes fertig-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fertig-zeichen { animation: none; } }

/* Mit Kopf und Fuß der Website: keine volle Bildschirmhöhe und kein großer Abstand nach unten (sonst Lücke vor dem Fuß) */
.mit-website #app { min-height: 0; }
.mit-website #app main { padding-bottom: 48px; }