/* Teller-Check-App „Dein Kraftcode“. SEOtopia (Julia&Jarvis<3)
   Farben und Schriften wie die Website (Sabines Konzept). Viel Sand und Weiß, Tiefgrün für Struktur,
   Petrol nur für Anklickbares, Gold als Hauch. Ampelfarben gedämpft, immer mit Wort daneben.
   Gestaltung „Teller und Wischen“ (SEO-669): gedeckter Tisch als Hintergrund, Teller mit drei Bögen,
   Lebensmittel als Fotokacheln, Ideen als Fotokarten zum Wischen. Keine Inline-Styles (CSP). */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/schriften/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/schriften/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/schriften/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/schriften/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/schriften/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/schriften/manrope-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --sand: #FBF8F1;
  --weiss: #FFFFFF;
  --creme: #EFE6D6;
  --tiefgruen: #1E3B39;
  --petrol: #1F6B66;
  --petrol-dunkel: #18554F;
  --petrol-hauch: #E6F0EE;
  --schiefer: #3B4148;
  --schiefer-hell: #5E656C;
  --gold: #A88A55;
  --gold-hell: #C2A46A;
  --linie: #E4DCCB;
  --rot: #B5523B;
  --orange: #C98A1E;
  --gruen: #3D7F55;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breite: 560px;
  --rand: 16px;
  --unten: env(safe-area-inset-bottom, 0px);
  --kopf: 63px; /* die App misst die echte Höhe des Kopfes und setzt sie hier ein */
  /* Tisch (Standard hell) */
  --tf: #D2CDC5;
  --tfr: 210, 205, 197;
  --t-titel: var(--tiefgruen);
  --t-text: var(--schiefer);
  --t-leise: var(--schiefer-hell);
  --t-akzent: var(--petrol-dunkel);
  --t-link: var(--petrol-dunkel);
}
body[data-tisch="tiefgruen"] {
  --tf: #1E2E2D;
  --tfr: 30, 46, 45;
  --t-titel: var(--weiss);
  --t-text: var(--creme);
  --t-leise: #CFC6B4;
  --t-akzent: var(--gold-hell);
  --t-link: var(--gold-hell);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--tiefgruen); } /* grün statt Weiß, solange beim Laden noch nichts gezeichnet ist */
body {
  margin: 0; background: var(--sand); color: var(--schiefer);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  min-height: 100vh; min-height: 100dvh;
  padding-bottom: calc(76px + var(--unten));
  overflow-x: hidden;
}
body.tisch-an { background: var(--tf); }
body.mit-leiste { padding-bottom: calc(76px + 92px + var(--unten)); }
img, svg { display: block; max-width: 100%; }
a { color: var(--petrol); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3 { color: var(--tiefgruen); line-height: 1.2; margin: 0 0 .4em; font-variant-numeric: lining-nums; text-wrap: balance; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 25px; }
h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .01em; }
p { margin: 0 0 .7em; }

/* ---------- Kopf und Leiste */
.kopf {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--rand) 10px;
  background: var(--tiefgruen); color: var(--creme);
}
.kopf img { width: 36px; height: 36px; flex: none; }
.kopf-marke { display: block; font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.1; color: var(--creme); }
.kopf-titel { display: block; font-size: 13px; letter-spacing: .04em; color: var(--gold-hell); }

.inhalt { outline: none; }
.spalte { max-width: var(--breite); margin: 0 auto; padding: 22px var(--rand) 28px; }
.spalte.titel { padding-bottom: 6px; }
.spalte.schmal { padding-top: 0; padding-bottom: 0; }

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: center;
  background: var(--weiss); border-top: 1px solid var(--linie);
  padding-bottom: var(--unten);
}
.leiste a {
  flex: 1; max-width: 180px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--schiefer-hell); font-size: 12.5px; font-weight: 600;
}
.leiste svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.leiste a[aria-current="page"] { color: var(--petrol); }
.leiste a[aria-current="page"] svg { stroke-width: 2.1; }

/* ---------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--petrol); color: var(--weiss); font-weight: 700; font-size: 16px;
}
.knopf:hover { background: var(--petrol-dunkel); }
.knopf:disabled { background: #9DB5B2; cursor: default; }
.knopf-leise {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--petrol); background: transparent; color: var(--petrol); font-weight: 700; font-size: 15px;
}
.knopf-leise:hover { background: var(--petrol-hauch); }
.knopf-leise.warnung { border-color: var(--rot); color: var(--rot); }
.spalte > .knopf { width: 100%; margin-top: 8px; }

.zurueck {
  border: 0; background: none; padding: 6px 0; margin-bottom: 4px; min-height: 44px;
  color: var(--petrol); font-weight: 600; font-size: 15px;
}
.zurueck::before { content: "‹"; font-size: 22px; line-height: 0; margin-right: 6px; position: relative; top: 1px; }
.tisch-an .zurueck { color: var(--t-link); }
.tisch-an .zurueck:focus-visible, .tisch-an .platz:focus-visible { outline-color: var(--t-link); }

.einleitung { color: var(--schiefer-hell); }
.tisch-an .einleitung { color: var(--t-text); }
.klein, .hilfe { font-size: 14px; color: var(--schiefer-hell); }
.hilfe { margin: 0 0 6px; }
.leer { color: var(--schiefer-hell); }
.laden { color: var(--schiefer-hell); padding: 22px var(--rand); }
.hinweis-box { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 16px; margin: 22px var(--rand); }

.abschnitt { margin-top: 30px; }
.abschnitt > h2 { padding-bottom: 6px; border-bottom: 1px solid var(--linie); margin-bottom: 14px; }

.augenbraue { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tisch-an .augenbraue { color: var(--t-akzent); }
.tisch-an h1, .tisch-an h2.frage { color: var(--t-titel); }
h1 i, h2 i { font-style: italic; font-weight: 500; color: var(--petrol); }
.tisch-an h1 i { color: var(--t-akzent); }
.titel h1 { margin-bottom: 0; }

/* ---------- Tisch, Teller und Bögen */
.buehne-rahmen {
  --s: 1; --pt: 40px; --pb: 20px; /* oben Platz für den Getränkeplatz */
  position: relative; z-index: 3; overflow: hidden; isolation: isolate;
  height: calc(270px * var(--s) + var(--pt) + var(--pb));
  background: var(--tf);
}
.buehne-rahmen.klein { --s: .62; --pt: 26px; --pb: 12px; }
.buehne-rahmen.klebt { position: sticky; top: var(--kopf); }
/* Ränder des Fotos laufen weich in die Tischfarbe aus */
.buehne-rahmen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--tf) 0, rgba(var(--tfr), 0) 7%, rgba(var(--tfr), 0) 82%, var(--tf) 100%);
}
.buehne {
  position: relative; width: 270px; height: 270px; margin: var(--pt) auto 0;
  transform: scale(var(--s)); transform-origin: top center;
}
.tisch-bild {
  position: absolute; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
/* Mitte des Tellers im Foto steht genau unter der Mitte der Bühne */
body[data-tisch="hell"] .tisch-bild, body:not([data-tisch]) .tisch-bild {
  /* Tischfotos ohne Glas (05.11.2026): Teller im Foto 442 von 1024 px, Mitte bei 516/518 */
  width: 486px; height: 486px; left: calc(135px - 245px); top: calc(135px - 246px); background-image: url("/bilder/tisch-hell.webp");
}
body[data-tisch="tiefgruen"] .tisch-bild {
  /* Teller im Foto 448 von 1024 px, Mitte bei 523/526 */
  width: 480px; height: 480px; left: calc(135px - 245px); top: calc(135px - 247px); background-image: url("/bilder/tisch-gruen.webp");
}
.buehne svg { position: absolute; inset: 0; width: 270px; height: 270px; max-width: none; overflow: visible; z-index: 1; }
.bogen-fuellung { transition: stroke-dasharray .8s cubic-bezier(.3, 1.2, .5, 1), opacity .3s; }
.teller {
  position: absolute; inset: 30px; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 56%, #F7F3EA 57% 62%, #fff 63% 70%, #EFE9DC 71% 100%);
  box-shadow: 0 22px 34px -14px rgba(30, 30, 20, .5), inset 0 -6px 14px rgba(120, 100, 60, .08);
}
.teller::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .9), transparent 40%); }
.glanz .teller { box-shadow: 0 0 0 3px var(--gold-hell), 0 0 40px 6px rgba(194, 164, 106, .45), 0 22px 34px -14px rgba(30, 30, 20, .5); }

.scheibe {
  position: absolute; z-index: 2; width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 12px -4px rgba(40, 30, 10, .35);
  transition: left .4s, top .4s;
  animation: plopp .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.scheibe img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.5); }
.scheibe.ersatz {
  display: grid; place-items: center; background: var(--tiefgruen); color: var(--creme);
  font-family: var(--serif); font-weight: 600; font-size: 26px; box-shadow: 0 0 0 2px var(--gold-hell), 0 6px 12px -4px rgba(40, 30, 10, .35);
}
.scheibe-zahl {
  position: absolute; right: 2px; bottom: 2px; z-index: 3; min-width: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--tiefgruen); color: var(--creme); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
}
.scheibe-mehr {
  position: absolute; z-index: 2; left: 50%; bottom: 36px; margin-left: -20px; width: 40px; line-height: 24px; text-align: center;
  border-radius: 999px; background: var(--tiefgruen); color: var(--creme); font-size: 12.5px; font-weight: 700;
}
.scheibe.frei {
  /* Freigestelltes Lebensmittel auf Weiß: etwas größer, ohne Rund und Schatten, Weiß verschwindet auf dem Teller */
  width: 84px; height: 84px; margin: -13px 0 0 -13px; border-radius: 0; overflow: visible; box-shadow: none; mix-blend-mode: multiply;
}
/* Keine mask-image hier: Firefox zeichnet das Bild dann gar nicht (05.11.2026). Den weichen Rand trägt das Bild selbst. */
.scheibe.frei img { transform: none; object-fit: contain; }
.scheibe.frei .scheibe-zahl { right: 6px; bottom: 6px; }
/* Getränkeplatz oben rechts: weißer Untersetzer, darauf das Getränk per multiply, auf beiden Tischen gleich */
.untersetzer {
  position: absolute; z-index: 2; width: 58px; height: 58px; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 12px -4px rgba(40, 30, 10, .35), inset 0 0 0 1px rgba(120, 100, 60, .12);
  animation: plopp .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.glas-platz {
  position: absolute; z-index: 2; width: 70px; height: 70px; mix-blend-mode: multiply;
  animation: plopp .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.glas-platz img { width: 100%; height: 100%; max-width: none; }
.glas-platz .scheibe-zahl { right: 0; bottom: 0; }
@keyframes plopp { from { transform: scale(0); } to { transform: scale(1); } }

.platz {
  position: absolute; z-index: 4; width: 58px; height: 58px; border-radius: 50%; padding: 0;
  border: 2px dashed var(--petrol); background: rgba(31, 107, 102, .08);
  display: grid; place-items: center; color: var(--petrol); font-size: 28px; font-weight: 600; line-height: 1;
  transition: left .4s, top .4s;
  animation: atmen 2.4s ease-in-out infinite;
}
.platz::after { content: ""; position: absolute; inset: -9px; } /* größere Trefferfläche */
body[data-tisch="tiefgruen"] .platz { border-color: var(--gold-hell); color: var(--gold-hell); background: rgba(194, 164, 106, .12); }
@keyframes puls { 50% { transform: scale(1.35); } }
@keyframes atmen { 50% { transform: scale(1.1); background: rgba(31, 107, 102, .18); } }

/* ---------- Mahlzeit */
.willkommen { background: var(--tiefgruen); color: var(--creme); border-radius: 18px; padding: 20px; margin: 4px 0 22px; }
.willkommen h2 { color: var(--weiss); font-size: 24px; }
.willkommen p { color: var(--creme); }
.willkommen .knopf-leise { border-color: var(--gold-hell); color: var(--weiss); }
.willkommen .knopf-leise:hover { background: rgba(255, 255, 255, .08); }
.willkommen :focus-visible { outline-color: var(--gold-hell); }

.frage { margin-top: 10px; }
.mahlzeiten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mahlzeit {
  min-height: 92px; padding: 16px; border-radius: 18px; text-align: left;
  border: 1.5px solid var(--linie); background: var(--weiss);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  box-shadow: 0 8px 20px -14px rgba(30, 59, 57, .5);
}
.mahlzeit:hover { border-color: var(--petrol); }
.mahlzeit-name { font-family: var(--serif); font-weight: 600; font-size: 25px; color: var(--tiefgruen); line-height: 1.1; }
.mahlzeit-tipp { font-size: 13px; color: var(--petrol); font-weight: 600; }
.mahlzeit.vorschlag { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 8px 20px -14px rgba(30, 59, 57, .5); }

/* ---------- Auswahl: Regal mit Fotokacheln */
.regal {
  position: relative; z-index: 1; max-width: 620px; margin: 0 auto; background: var(--weiss);
  border-radius: 28px 28px 0 0; padding: 18px var(--rand) 28px; box-shadow: 0 -12px 30px -18px rgba(30, 59, 57, .35);
}
.regal .einleitung, .tisch-an .regal .einleitung { color: var(--schiefer-hell); font-size: 15px; margin-bottom: 10px; }
.suchzeile { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; }
.suche {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--linie); border-radius: 12px; background: var(--weiss);
  font-size: 16px;
}
.suche:focus { border-color: var(--petrol); outline: none; box-shadow: 0 0 0 3px var(--petrol-hauch); }
.suchzeile .knopf-leise { flex: none; }

.gruppe { margin-top: 22px; }
.gruppe h3 { margin-bottom: 2px; }
.gruppe-frage { font-size: 14.5px; color: var(--schiefer-hell); margin-bottom: 8px; }
.kacheln { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kachel {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.16; padding: 0; border: 0; border-radius: 16px;
  overflow: hidden; isolation: isolate; text-align: left; color: #fff; background: var(--tiefgruen);
  transition: transform .2s, box-shadow .2s;
}
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.6); }
.kachel.frei { background: #fff; }
.kachel.frei img { transform: scale(1.12); }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 38%, rgba(0, 0, 0, .62)); }
.kachel-text { position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 2; display: flex; flex-direction: column; gap: 1px; }
.kachel-name { font-size: 12.5px; font-weight: 700; line-height: 1.18; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kachel-portion { font-size: 11px; font-weight: 500; opacity: .9; line-height: 1.2; }
.kachel.ersatz::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 50% 36%, transparent 0 13px, rgba(194, 164, 106, .6) 14px 15px, transparent 16px 25px, rgba(194, 164, 106, .35) 26px 27px, transparent 28px 38px, rgba(194, 164, 106, .18) 39px 40px, transparent 41px);
}
.kachel.ersatz { background: linear-gradient(155deg, #1E3B39, #2D5C58); }
.kachel.ersatz.ton-1 { background: linear-gradient(155deg, #18554F, #2F7A73); }
.kachel.ersatz.ton-2 { background: linear-gradient(155deg, #6F5A33, #8F7646); }
.kachel.ersatz.ton-3 { background: linear-gradient(155deg, #343B42, #4F5760); }
.kachel:hover { transform: translateY(-1px); }
.kachel.an { transform: scale(.93); box-shadow: 0 0 0 3px var(--gold-hell); }
.kachel-merk {
  position: absolute; top: 6px; right: 6px; z-index: 3; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  background: var(--creme); color: var(--tiefgruen); display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

.kachel-platz { position: relative; }
.kachel-weg {
  position: absolute; top: 10px; left: 10px; z-index: 3; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: var(--tiefgruen); color: var(--creme); display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
}
.kachel-weg::after { content: ""; position: absolute; inset: -9px; } /* größere Trefferfläche */

.teller-leiste {
  position: fixed; left: 0; right: 0; bottom: calc(61px + var(--unten)); z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 10px max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  background: var(--tiefgruen);
}
.teller-chips { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.teller-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--creme); font-size: 13.5px; white-space: nowrap;
}
.chip button { border: 0; background: none; color: var(--gold-hell); font-size: 18px; line-height: 1; padding: 0 2px; min-width: 28px; min-height: 28px; }
.teller-leer { color: var(--creme); font-size: 14px; }
.teller-leiste .knopf { flex: none; min-height: 48px; padding: 10px 18px; }
.teller-leiste .knopf:disabled { background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .6); }
.teller-leiste :focus-visible { outline-color: var(--gold-hell); }

/* ---------- Info-Karten */
.info { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; margin: 10px 0; }
.info summary {
  list-style: none; cursor: pointer; padding: 13px 44px 13px 16px; position: relative;
  font-weight: 700; color: var(--tiefgruen); min-height: 48px; display: flex; align-items: center;
}
.info summary::-webkit-details-marker { display: none; }
.info summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform .2s;
}
.info[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.info p { padding: 0 16px 14px; margin: 0; }
.info-klein { background: transparent; border-style: dashed; }
.info-klein summary { font-size: 14.5px; font-weight: 600; color: var(--petrol); min-height: 44px; }
.info-klein p { font-size: 15px; }
.tipps { margin: 8px 0; }

/* ---------- Fertiggericht */
.fertig-bild { width: 100%; height: 150px; object-fit: cover; border-radius: 18px; margin: 4px 0 6px; max-width: none; }
.fertig-form { margin-top: 16px; }
.feld { margin: 0 0 18px; border: 0; padding: 0; }
.feld label, .feld legend { display: block; font-weight: 700; color: var(--tiefgruen); margin-bottom: 4px; padding: 0; }
.feld input[type="text"], textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font-size: 16px;
  border: 1.5px solid var(--linie); border-radius: 12px; background: var(--weiss);
}
.feld input:focus, textarea:focus { border-color: var(--petrol); outline: none; box-shadow: 0 0 0 3px var(--petrol-hauch); }
.option, .feld .option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-weight: 500 !important; color: var(--schiefer) !important; cursor: pointer; }
.option input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--petrol); }
.meldung { color: var(--rot); font-weight: 600; outline: none; }
.fertig-form .knopf { width: 100%; }

/* ---------- Ergebnis */
.tipp { margin: 0 0 14px; text-align: center; font-size: 14px; font-weight: 600; color: var(--petrol-dunkel); }
.tisch-an .tipp { color: var(--t-akzent); }
.tipp::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; animation: puls 2.4s ease-in-out infinite; }
.begleiter, .alles-gruen {
  text-align: center; font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.2; color: var(--tiefgruen); margin: 4px 0 16px;
}
.tisch-an .begleiter, .tisch-an .alles-gruen { color: var(--t-titel); }
.ampeln { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.ampel {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 8px 20px -16px rgba(30, 59, 57, .5);
}
.ampel p { margin: 0; }
.ampel-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 4px !important; }
.ampel-kopf strong { color: var(--tiefgruen); }
.ampel-wort { font-size: 14px; font-weight: 700; }
.ampel.rot .ampel-wort { color: var(--rot); }
.ampel.orange .ampel-wort { color: #8F5F0E; }
.ampel.gruen .ampel-wort { color: var(--gruen); }
.punkt { flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 3px; background: var(--linie); }
.punkt.klein { width: 11px; height: 11px; margin: 0; }
.punkt.rot { background: var(--rot); }
.punkt.orange { background: var(--orange); }
.punkt.gruen { background: var(--gruen); }

.rueckenwind {
  margin: 30px 0 22px; padding: 22px 20px; border-radius: 18px; background: var(--tiefgruen); text-align: center;
}
.rueckenwind p { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.35; color: var(--creme); }
.rueckenwind::before { content: ""; display: block; width: 36px; height: 1px; background: var(--gold-hell); margin: 0 auto 14px; }

.journal-speichern { margin-bottom: 18px; padding: 16px; border-radius: 18px; background: var(--weiss); border: 1px solid var(--linie); }
.journal-speichern label { display: block; font-weight: 700; color: var(--tiefgruen); }
.journal-speichern textarea { margin-bottom: 10px; resize: vertical; }
.gespeichert { color: var(--gruen); font-weight: 700; margin: 0; }
.marke { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--creme); color: var(--tiefgruen); }

/* ---------- Wisch-Blatt mit Ideenkarten */
.schleier { position: fixed; inset: 0; z-index: 19; background: rgba(12, 26, 24, .45); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.schleier.an { opacity: 1; visibility: visible; transition: opacity .35s; }
.blatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 560px; margin: 0 auto;
  max-height: calc(100dvh - 24px); overflow-y: auto;
  background: var(--sand); border-radius: 30px 30px 0 0; padding: 0 0 calc(18px + var(--unten));
  box-shadow: 0 -20px 40px -10px rgba(12, 26, 24, .45);
  transform: translateY(105%); visibility: hidden; transition: transform .45s cubic-bezier(.2, .9, .3, 1), visibility 0s .45s;
}
.blatt.offen { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2, .9, .3, 1); }
.blatt:focus { outline: none; }
.griff { width: 40px; height: 4px; border-radius: 2px; background: var(--linie); margin: 10px auto 8px; }
.blatt-kopf { display: flex; align-items: baseline; gap: 12px; padding: 0 20px; }
.blatt-kopf h2 { margin: 0; flex: 1; }
.blatt-zahl { font-size: 13px; color: var(--schiefer-hell); font-weight: 600; }
.blatt-zu { border: 0; background: none; color: var(--petrol); font-weight: 700; font-size: 14px; min-height: 44px; padding: 0 4px; margin: -10px -4px -10px 0; }
.filter { display: flex; gap: 6px; padding: 4px 20px 0; flex-wrap: wrap; }
.filter button {
  min-height: 36px; font-size: 13px; font-weight: 700; padding: 4px 13px; border-radius: 999px; background: transparent;
  border: 1px solid var(--linie); color: var(--tiefgruen);
}
.filter button[aria-pressed="true"] { background: var(--tiefgruen); color: var(--creme); border-color: var(--tiefgruen); }
.filter button:disabled { opacity: .45; cursor: default; }
.stapel { position: relative; height: 250px; margin: 14px 22px 0; }
.karte {
  position: absolute; inset: 0; isolation: isolate; overflow: hidden; border-radius: 24px; background: var(--tiefgruen);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 16px 28px -16px rgba(30, 40, 30, .5); transition: transform .35s, opacity .35s;
}
.karte img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.karte.frei { background: #fff; }
.karte::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(transparent 30%, rgba(10, 22, 20, .88)); }
.karte.ersatz { background: linear-gradient(155deg, #1E3B39, #2D5C58); }
.karte.ersatz.ton-1 { background: linear-gradient(155deg, #18554F, #2F7A73); }
.karte.ersatz.ton-2 { background: linear-gradient(155deg, #6F5A33, #8F7646); }
.karte.ersatz.ton-3 { background: linear-gradient(155deg, #343B42, #4F5760); }
.karte.ersatz::before {
  content: ""; position: absolute; left: 50%; top: 38%; z-index: 0; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 34px, rgba(194, 164, 106, .55) 35px 36px, transparent 37px 60px, rgba(194, 164, 106, .3) 61px 62px, transparent 63px 88px, rgba(194, 164, 106, .16) 89px 90px, transparent 91px);
}
.karte-inhalt { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; }
.marken { display: flex; gap: 5px; flex-wrap: wrap; }
.marken small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--creme); color: var(--tiefgruen); }
.marken small.zeit { background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.karte-text { display: block; margin: 8px 0 0; font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.12; color: #fff; }
.stempel {
  position: absolute; top: 18px; z-index: 3; padding: 4px 12px; border-radius: 10px; font-weight: 700; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; opacity: 0; border: 2px solid #fff; color: #fff; pointer-events: none;
}
.stempel.ja { left: 16px; background: var(--gruen); transform: rotate(-10deg); }
.stempel.nein { right: 16px; background: rgba(60, 60, 60, .7); transform: rotate(10deg); }
.karte:nth-last-child(2) { transform: translateY(10px) scale(.95); }
.karte:nth-last-child(3) { transform: translateY(20px) scale(.9); }
.karte.weg-ja { transform: translate(10px, -330px) scale(.25) !important; opacity: 0; }
.karte.weg-nein { transform: translateX(-420px) rotate(-24deg) !important; opacity: 0; }
.karte.zieht { transition: none; }
.stapel-leer {
  height: 100%; display: grid; place-content: center; text-align: center; padding: 0 20px;
  font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--tiefgruen);
}
.wahl { display: flex; justify-content: center; align-items: center; gap: 26px; margin-top: 30px; }
.wahl button {
  width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 6px 16px -6px rgba(30, 59, 57, .35);
  font-size: 21px; display: grid; place-items: center; color: var(--schiefer-hell);
}
.wahl button.ja { width: 66px; height: 66px; background: var(--tiefgruen); color: var(--creme); font-size: 24px; }
.wahl button:disabled { opacity: .4; cursor: default; }
.wahl-hinweis { text-align: center; font-size: 12.5px; color: var(--schiefer-hell); margin: 10px 20px 0; }

/* ---------- Wissen */
.saisons { display: grid; gap: 10px; }
.saison-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; }
.saison-karte.jetzt { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.saison-karte h3 { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0; }
.saison-karte h3 .marke { font-family: var(--sans); }
.saison-monate { font-size: 14px; color: var(--schiefer-hell); }
.saison-karte p:last-child { margin: 0; }
.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.downloads a, .downloads .ohne-netz {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px; border-radius: 14px; background: var(--weiss); border: 1px solid var(--linie);
  font-weight: 700; text-decoration: none;
}
.downloads .ohne-netz { color: var(--schiefer-hell); }
.groesse { font-size: 13px; font-weight: 500; color: var(--schiefer-hell); white-space: nowrap; }
/* Beispielgerichte im Ergebnis: immer eine Spalte, die Namen sind lang */
.beispiele .downloads { grid-template-columns: 1fr; }
.beispiele { margin-bottom: 22px; }
.beispiele .hilfe { margin-bottom: 12px; }

/* ---------- Ich */
.einwilligung { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 12px 14px; }
.profil-option { margin-top: 6px; }
.profil-option .option:has(input:disabled) { opacity: .5; cursor: default; }
.tisch-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; margin: 0; }
.tisch-wahl legend { padding: 0; margin-bottom: 8px; font-weight: 700; color: var(--tiefgruen); grid-column: 1 / -1; }
.tisch-karte {
  position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--weiss); border: 2px solid var(--linie);
  cursor: pointer; text-align: center; font-weight: 700; color: var(--tiefgruen);
}
.tisch-karte:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.tisch-karte:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 2px; }
.tisch-karte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tisch-vorschau { display: block; height: 96px; background-size: 150%; background-position: 50% 46%; }
.tisch-vorschau.hell { background-image: url("/bilder/tisch-hell.webp"); background-color: #D2CDC5; }
.tisch-vorschau.tiefgruen { background-image: url("/bilder/tisch-gruen.webp"); background-color: #1E2E2D; }
.tisch-name { display: block; padding: 8px 6px 10px; font-size: 14.5px; }
.journal { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.journal li { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 12px 16px; }
.journal-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--tiefgruen); }
.journal-ampeln { display: flex; gap: 5px; }
.journal-teller { font-size: 15px; margin: 6px 0 4px; }
.journal-schritt { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--tiefgruen); margin: 4px 0; }
.entfernen { border: 0; background: none; padding: 6px 0; min-height: 36px; color: var(--schiefer-hell); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Anmeldung */
body.zugang { padding: 0; display: grid; place-items: center; background: var(--tiefgruen); color: var(--creme); }
.zugang-box { width: 100%; max-width: 400px; padding: 40px 24px; text-align: center; }
.zugang-box img { margin: 0 auto 14px; width: 88px; height: 88px; }
.zugang-box .kopf-marke { color: var(--gold-hell); font-size: 22px; }
.zugang-box h1 { color: var(--weiss); font-size: 40px; }
.zugang-box form { text-align: left; margin-top: 22px; }
.zugang-box label { display: block; font-weight: 700; margin-bottom: 6px; }
.zugang-box input {
  width: 100%; min-height: 50px; padding: 10px 14px; font-size: 17px;
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(255,255,255,.08); color: var(--weiss);
}
.zugang-box input:focus { outline: none; border-color: var(--gold-hell); }
.zugang-box .knopf { width: 100%; margin-top: 16px; background: var(--creme); color: var(--tiefgruen); }
.zugang-box .knopf:hover { background: var(--weiss); }
.zugang-box .meldung { color: #F2B8A6; margin-top: 10px; }
.zugang-box :focus-visible { outline-color: var(--gold-hell); }

@media (min-width: 420px) {
  .kacheln { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) {
  h1 { font-size: 40px; }
  .mahlzeiten { grid-template-columns: repeat(4, 1fr); }
  .regal { border-radius: 28px; margin-bottom: 20px; }
}
/* ---------- Desktop (ab 960 px): Navigation oben, Teller links groß und mitlaufend, Inhalt rechts.
   .links und .rechts sind auf dem Handy wirkungslos (display: contents), die Reihenfolge bleibt dort wie gehabt. */
.links, .rechts { display: contents; }
@media (min-width: 960px) {
  :root { --weit: 1200px; --seite: max(32px, calc((100% - var(--weit)) / 2 + 32px)); }
  body, body.mit-leiste { padding-bottom: 0; }

  .kopf { padding: 14px var(--seite); }
  .kopf img { width: 40px; height: 40px; }
  .kopf-marke { font-size: 22px; }
  .leiste {
    top: 0; bottom: auto; left: auto; right: var(--seite); height: var(--kopf);
    align-items: center; gap: 6px; padding: 0; background: transparent; border: 0;
  }
  .leiste a {
    flex: none; max-width: none; min-height: 42px; padding: 0 18px; flex-direction: row; gap: 9px;
    border-radius: 999px; color: var(--creme); font-size: 14.5px;
  }
  .leiste svg { width: 20px; height: 20px; }
  .leiste a:hover { background: rgba(255, 255, 255, .09); }
  .leiste a[aria-current="page"] { color: var(--tiefgruen); background: var(--creme); }
  .leiste :focus-visible { outline-color: var(--gold-hell); }

  /* Einspaltige Bereiche (Wissen, Ich, Fertiggericht): ruhige Lesebreite */
  .spalte { max-width: 780px; padding: 44px 32px 72px; }
  h1 { font-size: 46px; }
  .saisons { grid-template-columns: 1fr 1fr; gap: 14px; }
  .downloads { grid-template-columns: 1fr 1fr; }
  .fertig-bild { height: 220px; }

  /* Zwei Spalten für Mahlzeit, Auswahl und Ergebnis */
  .inhalt.zwei {
    display: grid; grid-template-columns: minmax(420px, 5fr) minmax(0, 6fr); gap: 0 64px; align-items: start;
    max-width: var(--weit); margin: 0 auto; padding: 40px 32px 72px;
  }
  .zwei .links { display: block; position: sticky; top: calc(var(--kopf) + 28px); }
  .zwei .rechts { display: block; min-width: 0; }
  .zwei .spalte { max-width: none; padding: 0; }
  .zwei .spalte.titel { padding: 0 0 8px; }
  .zwei[data-ansicht="mahlzeit"] { align-items: center; min-height: calc(100dvh - var(--kopf)); }

  .zwei .buehne-rahmen, .zwei .buehne-rahmen.klein, .zwei .buehne-rahmen.klebt {
    --s: 1.36; --pt: 60px; --pb: 34px; position: relative; top: auto;
  }
  /* Tischfoto läuft auch seitlich weich aus, die Spalte ist schmaler als das Foto */
  .zwei .buehne-rahmen::after {
    background:
      linear-gradient(90deg, var(--tf) 0, rgba(var(--tfr), 0) 13%, rgba(var(--tfr), 0) 87%, var(--tf) 100%),
      linear-gradient(180deg, var(--tf) 0, rgba(var(--tfr), 0) 9%, rgba(var(--tfr), 0) 84%, var(--tf) 100%);
  }

  /* Mahlzeit */
  .zwei .willkommen { margin-top: 0; padding: 26px 28px; }
  .zwei .frage { margin-top: 0; font-size: 30px; }
  .zwei .willkommen + .frage { margin-top: 8px; }
  .zwei .mahlzeiten { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
  .zwei .mahlzeit { min-height: 132px; padding: 22px 26px; border-radius: 22px; transition: transform .2s, box-shadow .2s, border-color .2s; }
  .zwei .mahlzeit-name { font-size: 32px; }

  /* Auswahl */
  .zwei .regal { max-width: none; margin: 0; border-radius: 28px; padding: 26px 30px 30px; box-shadow: 0 24px 50px -30px rgba(30, 59, 57, .45); }
  .zwei .kacheln { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 12px; }
  .zwei .kachel-name { font-size: 13.5px; }
  .zwei .teller-leiste {
    position: sticky; bottom: 24px; left: auto; right: auto; margin-top: 18px; padding: 12px 14px 12px 20px;
    border-radius: 22px; box-shadow: 0 22px 40px -20px rgba(12, 26, 24, .7);
  }

  /* Ergebnis */
  .zwei .tipp, .zwei .begleiter, .zwei .alles-gruen { text-align: left; }
  .zwei .begleiter, .zwei .alles-gruen { font-size: 30px; margin-top: 0; }
  .zwei .ampel { padding: 18px 20px; }
  .zwei .rueckenwind { padding: 28px 32px; }
  .zwei[data-ansicht="ergebnis"] .spalte > .knopf { width: auto; }

  /* Ideen als Fenster in der Mitte statt Blatt von unten */
  .blatt {
    top: 50%; bottom: auto; left: 50%; right: auto; width: 500px; margin: 0;
    max-height: calc(100dvh - 48px); border-radius: 30px; padding: 22px 0 26px;
    transform: translate(-50%, -46%) scale(.96); opacity: 0;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1), opacity .25s, visibility 0s .35s;
  }
  .blatt.offen { transform: translate(-50%, -50%); opacity: 1; transition: transform .35s cubic-bezier(.2, .9, .3, 1), opacity .25s; }
  .griff { display: none; }
  .blatt-kopf, .filter { padding-left: 28px; padding-right: 28px; }
  .stapel { height: 300px; margin: 18px 28px 0; }
}
@media (min-width: 960px) and (max-height: 820px) {
  .zwei .buehne-rahmen, .zwei .buehne-rahmen.klein, .zwei .buehne-rahmen.klebt { --s: 1.1; --pt: 48px; --pb: 24px; }
  .zwei .links { top: calc(var(--kopf) + 18px); }
}
@media (min-width: 960px) and (hover: hover) {
  .zwei .mahlzeit:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(30, 59, 57, .55); }
  .kachel:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -14px rgba(30, 30, 20, .55); }
  .kachel.an:hover { transform: scale(.93); box-shadow: 0 0 0 3px var(--gold-hell); }
  .wahl button:hover { transform: scale(1.06); }
  .wahl button { transition: transform .15s; }
}

/* Startbild: nur das Logo groß auf Grün, bis die App steht */
.start { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--tiefgruen); transition: opacity .5s ease; }
.start img { width: min(62vw, 280px); height: auto; }
.start.weg { opacity: 0; pointer-events: none; }

/* Ankommen: ein Atemzug beim Öffnen (Mockup B). 10 Sekunden je Atemzug (rund 6 pro Minute): 4 ein, 6 aus.
   Takt-Wort läuft mit dem äußeren Kreis, die inneren folgen leicht versetzt */
.atem {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: var(--tiefgruen); color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) var(--rand) calc(var(--unten) + 24px);
  transition: opacity .6s ease;
}
.atem:focus { outline: none; }
.atem.weg { opacity: 0; pointer-events: none; }
.atem .atem-satz { font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1.15; margin: 0 0 40px; color: #fff; }
.atem-kreise { position: relative; flex: none; width: 240px; height: 240px; }
.atem-kreise i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(194, 164, 106, .85); animation: atem-kreis 10s ease-in-out infinite backwards; }
.atem-kreise i:nth-child(2) { inset: 32px; animation-delay: .4s; }
.atem-kreise i:nth-child(3) { inset: 64px; animation-delay: .8s; background: radial-gradient(circle, rgba(194, 164, 106, .4), transparent 70%); }
@keyframes atem-kreis { 0%, 100% { transform: scale(.72); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.atem-takt { position: relative; width: 100%; min-height: 28px; margin: 18px 0 0; font-size: 18px; letter-spacing: .06em; color: var(--gold-hell); }
.atem-takt span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.takt-ein { animation: takt-ein 10s ease-in-out infinite; }
.takt-aus { animation: takt-aus 10s ease-in-out infinite; }
.atem-takt .takt-ruhig { display: none; }
@keyframes takt-ein { 0% { opacity: 0; } 5%, 35% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes takt-aus { 0%, 40% { opacity: 0; } 47%, 93% { opacity: 1; } 100% { opacity: 0; } }
.atem-weiter { margin-top: 44px; min-height: 52px; padding: 14px 34px; border: 0; border-radius: 999px; background: var(--creme); color: var(--tiefgruen); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.atem-weiter:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .atem-takt .takt-ein, .atem-takt .takt-aus { display: none; }
  .atem-takt .takt-ruhig { display: block; position: static; opacity: 1; }
}