/* ==================================================================
   Leben ohne Gallenblase – Gestaltung
   Weißer Grund, weiche Farbflächen dahinter, darüber Glasflächen.
================================================================== */
:root {
  --tinte: #1d1d1f;
  --grau: #62626a;
  --jade: #12897f;
  --jade-tief: #0c5b5a;
  --gold: #8fbf1f;
  --logo-dunkel: #0b3438;
  --koralle: #e2674f;
  --gut: #23a065;
  --test: #dd9416;
  --spaeter: #d9553f;
  --linie: rgba(16, 60, 52, 0.09);
  --rund-gross: 34px;
  --rund: 24px;
  --rund-klein: 16px;
  --breite: 1180px;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--tinte);
  font: 400 17px/1.5 var(--schrift); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { padding: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 3px; border-radius: 10px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 12px; }
.sprung:focus { top: 16px; }

/* ---------- Farbflächen hinter dem Glas ---------- */
.hintergrund { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hintergrund i { position: absolute; border-radius: 50%; filter: blur(70px); }
.hintergrund i:nth-child(1) { width: 52vmax; height: 52vmax; left: -16vmax; top: -14vmax; background: radial-gradient(circle, rgba(64, 210, 180, 0.42), rgba(64, 210, 180, 0) 68%); }
.hintergrund i:nth-child(2) { width: 46vmax; height: 46vmax; right: -14vmax; top: 6vmax; background: radial-gradient(circle, rgba(175, 215, 70, 0.34), rgba(250, 205, 90, 0) 68%); }
.hintergrund i:nth-child(3) { width: 44vmax; height: 44vmax; left: 10vmax; bottom: -20vmax; background: radial-gradient(circle, rgba(120, 190, 250, 0.34), rgba(120, 190, 250, 0) 68%); }
.hintergrund i:nth-child(4) { width: 34vmax; height: 34vmax; right: 4vmax; bottom: -6vmax; background: radial-gradient(circle, rgba(250, 150, 125, 0.3), rgba(250, 150, 125, 0) 68%); }

/* ---------- Glas ---------- */
.glas {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46));
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px var(--linie),
    0 18px 48px -18px rgba(14, 80, 70, 0.22);
}

/* ---------- Navigation ---------- */
.leiste {
  position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  padding: 7px 8px 7px 22px; border-radius: 999px; max-width: calc(100vw - 28px);
}
.marke-name { display: block; flex: none; line-height: 0; text-decoration: none; }
.marke-name img { height: 30px; width: auto; }
.start-logo { display: block; width: min(440px, 100%); height: auto; margin: 0 0 30px -6px; }
.fuss-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 0.92rem; }
.fuss-links img { height: 28px; width: auto; margin-right: 6px; }
.fuss-links a { color: var(--tinte); font-weight: 600; }
.leiste ul { display: flex; gap: 2px; }
.leiste li a {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px;
  text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--grau); white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.leiste li a svg { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.leiste li a:hover { color: var(--tinte); background: rgba(255, 255, 255, 0.7); }
.leiste li a.aktiv { color: var(--jade-tief); background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--linie), 0 4px 14px -6px rgba(14, 80, 70, 0.3); }

/* ---------- Seitenraster ---------- */
main, .fuss { width: min(var(--breite), calc(100% - 40px)); margin-inline: auto; }
.start { padding: 150px 0 34px; max-width: 880px; }
h1 { font-size: clamp(2.6rem, 7.2vw, 5.2rem); line-height: 1; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; }
.vorspann { margin-top: 22px; font-size: clamp(1.08rem, 1.7vw, 1.32rem); line-height: 1.45; color: var(--grau); max-width: 40em; text-wrap: pretty; }
.abschnitt { padding: 26px 0 74px; }
.kopfzeile { max-width: 720px; margin-bottom: 30px; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.kopfzeile p { margin-top: 12px; color: var(--grau); font-size: 1.08rem; text-wrap: pretty; }
h3 { font-size: 1.18rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 650; }
.raster { display: grid; gap: 16px; }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
.karte { padding: 22px; border-radius: var(--rund); }
.karte p { margin-top: 8px; color: var(--grau); font-size: 0.98rem; }

/* ---------- 3D-Bühne ---------- */
.buehnen-karte { border-radius: var(--rund-gross); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); overflow: hidden; }
.buehne { --unten-frei: 62px; position: relative; min-height: 560px; background: radial-gradient(ellipse 60% 14% at 50% 93%, rgba(14, 80, 70, 0.13), rgba(14, 80, 70, 0) 70%); }
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; border-radius: var(--rund-gross); }
.buehne canvas.greift { cursor: grabbing; }
.marken { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.marke {
  position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap;
  padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--linie), 0 6px 16px -8px rgba(14, 80, 70, 0.4);
  transition: opacity 0.4s, background 0.2s;
}
.marke::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); margin-right: 7px; vertical-align: 1px; }
.marke:hover, .marke.gewaehlt { background: #fff; }
.marke.gewaehlt::before { background: var(--koralle); }
.marke.aus { opacity: 0; pointer-events: none; }
.umschalter { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; }
.umschalter button { position: relative; z-index: 1; padding: 9px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--grau); transition: color 0.3s; }
.umschalter button[aria-pressed="true"] { color: var(--tinte); }
.umschalter i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 4px 12px -4px rgba(14, 80, 70, 0.35); transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
.umschalter.nachher i { transform: translateX(100%); }
.ar-knopf { position: absolute; z-index: 2; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 650; color: var(--jade-tief); text-decoration: none; transition: transform 0.15s, background 0.2s; }
.ar-knopf:hover { background: #fff; }
.ar-knopf:active { transform: scale(0.97); }
.ar-knopf img { display: block; width: 22px; height: 22px; }
.ar-blatt { text-align: center; margin: 0 auto; }
.ar-blatt .blatt-teil { margin-top: 24px; }
.ar-blatt .fliess { max-width: 30em; margin: 10px auto 0; }
.ar-blatt .ar-qr { display: block; width: 190px; height: 190px; margin: 6px auto 4px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.ar-blatt .punkte { text-align: left; max-width: 30em; margin: 0 auto; }
.ar-laden { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 8px; }
.dreh-hinweis { position: absolute; bottom: 14px; left: 20px; right: auto; text-align: left; font-size: 13px; color: var(--grau); pointer-events: none; }
.ohne-3d { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; text-align: center; color: var(--grau); }
.ohne-3d[hidden] { display: none; }

.buehne-seite { padding: 30px 30px 28px; display: flex; flex-direction: column; gap: 22px; border-left: 1px solid rgba(255, 255, 255, 0.9); box-shadow: -1px 0 0 var(--linie); background: rgba(255, 255, 255, 0.34); }
.status { min-height: 11.5em; }
.status h3 { font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.12; }
.status p { margin-top: 10px; color: var(--grau); text-wrap: pretty; }
.mahl-frage { font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; }
.mahl-knoepfe { display: grid; gap: 10px; }
.knopf {
  padding: 13px 18px; border-radius: 999px; font-weight: 600; font-size: 15.5px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #16a294, var(--jade-tief));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(0, 50, 44, 0.25), 0 10px 22px -10px rgba(10, 110, 98, 0.75);
  transition: transform 0.15s, filter 0.2s;
}
.knopf[data-mahl="fett"] { background: linear-gradient(180deg, #f3a94a, #d4741c); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(90, 40, 0, 0.22), 0 10px 22px -10px rgba(212, 116, 28, 0.75); }
.knopf:hover { filter: brightness(1.06); }
.knopf:active { transform: scale(0.97); }
.knopf:disabled { filter: grayscale(0.6) opacity(0.55); cursor: default; }
.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--grau); }
.legende i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--f); margin-right: 6px; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06); vertical-align: -1px; }
.organ-info { margin-top: auto; min-height: 7.2em; padding: 16px 18px; border-radius: var(--rund-klein); background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px var(--linie); }
.organ-info h3 { font-size: 1rem; }
.organ-info p { margin-top: 4px; font-size: 0.95rem; color: var(--grau); }

.vergleich { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 16px; margin-top: 16px; }
.vergleich article { padding: 24px; border-radius: var(--rund); }
.vergleich ol { margin-top: 12px; counter-reset: s; display: grid; gap: 9px; }
.vergleich li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 0.98rem; color: var(--grau); }
.vergleich li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--jade-tief); background: rgba(15, 157, 138, 0.12); }
.vergleich p { margin-top: 12px; color: var(--grau); }

/* ---------- Zeitstrahl ---------- */
.zeitstrahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: z; }
.zeitstrahl li.stufe { counter-increment: z; padding: 24px; border-radius: var(--rund); position: relative; }
.zeitstrahl .wann { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; color: var(--jade-tief); }
.zeitstrahl .wann::before { content: counter(z); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; background: linear-gradient(180deg, #16a294, var(--jade-tief)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.zeitstrahl h3 { margin-top: 12px; font-size: 1.3rem; letter-spacing: -0.025em; }
.zeitstrahl ul { margin-top: 12px; display: grid; gap: 9px; }
.zeitstrahl ul li { position: relative; padding-left: 18px; color: var(--grau); font-size: 0.98rem; }
.zeitstrahl ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- Lebensmittel-Finder ---------- */
.finder { margin-top: 16px; border-radius: var(--rund-gross); padding: 28px; }
.finder-kopf > p { margin-top: 8px; color: var(--grau); max-width: 46em; }
.finder-kopf h3 { font-size: 1.55rem; letter-spacing: -0.03em; }
.suche { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 52px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 3px rgba(14, 60, 52, 0.1), 0 0 0 1px var(--linie); }
.suche:focus-within { box-shadow: 0 0 0 3px rgba(15, 157, 138, 0.35), 0 0 0 1px var(--jade); }
.suche svg { width: 20px; height: 20px; fill: none; stroke: var(--grau); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: inherit; }
.filter { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.filter button { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 550; color: var(--grau); background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px var(--linie); }
.filter button[aria-pressed="true"] { color: var(--tinte); background: #fff; box-shadow: 0 0 0 1.5px var(--tinte); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.punkt.gut { background: var(--gut); } .punkt.test { background: var(--test); } .punkt.spaeter { background: var(--spaeter); }
.lebensmittel { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.lebensmittel li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: start; padding: 12px 12px 12px 16px; border-radius: var(--rund-klein); background: rgba(255, 255, 255, 0.62); box-shadow: 0 0 0 1px var(--linie); }
.lebensmittel .punkt { margin: 0.5em 0 0; }
.lebensmittel strong { font-weight: 600; display: block; }
.lebensmittel span { color: var(--grau); font-size: 0.93rem; display: block; }
.merker { display: flex; gap: 4px; }
.merker button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #a5a8ae; box-shadow: 0 0 0 1px var(--linie); background: rgba(255, 255, 255, 0.8); }
.merker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.merker button[aria-pressed="true"][data-wert="ja"] { background: var(--gut); color: #fff; box-shadow: none; }
.merker button[aria-pressed="true"][data-wert="nein"] { background: var(--spaeter); color: #fff; box-shadow: none; }
.leer { margin-top: 18px; color: var(--grau); }
.mehr-zeigen { margin-top: 16px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--jade-tief); background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px var(--linie), 0 6px 16px -8px rgba(14, 80, 70, 0.35); }
.mehr-zeigen[hidden] { display: none; }

/* ---------- Rezepte ---------- */
.wochen { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; gap: 2px; }
.wochen button { padding: 10px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--grau); white-space: nowrap; }
.wochen button[aria-selected="true"] { color: var(--tinte); background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 4px 12px -4px rgba(14, 80, 70, 0.35); }
.wochen-text { margin: 16px 0 18px; font-size: 1.08rem; }
.wochen-text strong { font-weight: 650; }
.tagesplan { border-radius: var(--rund-gross); padding: 26px 28px 28px; }
.tagesplan h3 { font-size: 1.55rem; letter-spacing: -0.03em; }
.tagesplan > p { margin-top: 6px; color: var(--grau); }
.tagesplan ol { margin-top: 20px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; }
.tagesplan li { display: flex; }
.tagesplan button { flex: 1; display: grid; grid-template-columns: 1fr; justify-items: start; align-content: start; gap: 6px; text-align: left; padding: 16px; border-radius: var(--rund-klein); background: rgba(255, 255, 255, 0.72); box-shadow: 0 0 0 1px var(--linie); transition: background 0.2s, transform 0.2s; }
.tagesplan button:hover { background: #fff; transform: translateY(-2px); }
.tagesplan .zeitpunkt { font-size: 13px; font-weight: 650; color: var(--jade-tief); }
.tagesplan .klein-bild { margin: 6px 0 6px 5px; }
.tagesplan strong { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.tagesplan small { font-size: 13px; color: var(--grau); }
.alle-rezepte { margin: 30px 0 14px; font-size: 1.3rem; letter-spacing: -0.025em; }
.rezept { text-align: left; border-radius: var(--rund); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s; }
.rezept:hover { transform: translateY(-3px); }
.teller { aspect-ratio: 16 / 10; position: relative; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 55%), var(--f); }
.teller::before { content: ""; position: absolute; left: 50%; top: 54%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--f) 0 52%, rgba(255, 255, 255, 0.96) 53% 100%); box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.07), 0 14px 22px -12px rgba(0, 0, 0, 0.3); }
.teller::after { content: ""; position: absolute; left: 50%; top: 54%; width: 30%; aspect-ratio: 1; transform: translate(-56%, -58%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 60%); }
.rezept-text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rezept-text small { font-size: 13px; color: var(--grau); font-weight: 550; }
.rezept-text h3 { font-size: 1.08rem; }
.rezept-text .mehr { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--jade-tief); }

.blatt { border: 0; padding: 0; width: min(820px, calc(100% - 24px)); max-height: min(88vh, 900px); border-radius: var(--rund-gross); color: var(--tinte); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 1.5px 0 #fff, 0 0 0 1px var(--linie), 0 40px 90px -30px rgba(10, 60, 52, 0.5); overflow: auto; }
.blatt::backdrop { background: rgba(240, 248, 246, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.blatt[open] { animation: auf 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes auf { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
.schliessen { position: sticky; float: right; top: 14px; margin: 14px 14px 0 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px var(--linie), 0 6px 14px -6px rgba(0, 0, 0, 0.3); }
.blatt-kopf-text { padding: 30px 34px 26px; }
.blatt-kopf { background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%), var(--f, #eee); }
.blatt-kopf h3 { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.08; max-width: 16em; }
.rz-meta { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: rgba(29, 29, 31, 0.72); }
.blatt-inhalt { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; padding: 28px 34px 34px; }
.blatt h4 { font-size: 0.95rem; font-weight: 650; margin-bottom: 12px; }
.zutaten li { padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 0.98rem; display: flex; justify-content: space-between; gap: 14px; }
.zutaten b { font-weight: 600; text-align: right; flex: none; max-width: 55%; }
.schritte { counter-reset: s; display: grid; gap: 14px; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.schritte li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--jade-tief); background: rgba(15, 157, 138, 0.12); }
.tipp { margin-top: 20px; padding: 14px 16px; border-radius: var(--rund-klein); background: rgba(143, 191, 31, 0.15); font-size: 0.96rem; }
.tipp strong { font-weight: 650; }

/* ---------- Bilder ---------- */
.teller img, .klein-bild img, .blatt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.mit-bild img { opacity: 1; }
.teller.mit-bild::before, .teller.mit-bild::after { display: none; }
.klein-bild { position: relative; display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%), var(--f); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--linie), 0 6px 10px -4px rgba(0, 0, 0, 0.25); }
.blatt-bild { position: relative; display: none; }
.blatt-bild.mit-bild { display: block; aspect-ratio: 16 / 9; max-height: 380px; width: 100%; }
.blatt-bild:not(.mit-bild) img { position: absolute; width: 1px; height: 1px; }

/* ---------- Rezeptkarten und Filter ---------- */
#mahlfilter { margin: 0 0 16px; }
#wissenfilter { margin: 0 0 18px; }
.rezept-kern { font-size: 0.92rem; color: var(--grau); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.textknopf { font-weight: 600; font-size: 0.95em; color: var(--jade-tief); text-decoration: underline; text-decoration-color: rgba(15, 157, 138, 0.4); text-underline-offset: 3px; text-align: left; }
.textknopf:hover { text-decoration-color: currentColor; }
.wochen-text .textknopf { white-space: nowrap; }

/* ---------- Blatt: ausführliches Rezept und Wissensartikel ---------- */
.kernsatz { margin-top: 8px; font-weight: 600; font-size: 1.05rem; color: rgba(29, 29, 31, 0.78); max-width: 34em; }
.marken-zeile { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.marken-zeile li { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, 0.78); box-shadow: 0 0 0 1px var(--linie); }
.marken-zeile.hell { margin-top: 0; }
.marken-zeile.hell li { background: rgba(15, 157, 138, 0.1); color: var(--jade-tief); box-shadow: none; }
.blatt-teil + .blatt-teil { margin-top: 26px; }
.blatt h5 { margin: 14px 0 2px; font-size: 13px; font-weight: 650; color: var(--jade-tief); }
.fliess { color: var(--grau); font-size: 0.98rem; }
.fliess + .fliess { margin-top: 8px; }
.fliess.gross { font-size: 1.06rem; color: var(--tinte); }
.punkte { display: grid; gap: 7px; }
.punkte li { position: relative; padding-left: 18px; font-size: 0.97rem; }
.punkte li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
section.tipp { margin-top: 26px; }
section.tipp h4 { margin-bottom: 8px; }
.naehrwerte { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.naehrwerte th { text-align: left; font-weight: 400; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.naehrwerte td { text-align: right; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.blatt .klein { margin-top: 8px; color: var(--grau); }
.einkauf { padding: 14px 16px; border-radius: var(--rund-klein); background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px var(--linie); }
.einkauf summary { cursor: pointer; font-weight: 650; font-size: 0.95rem; }
.breit { padding: 0 34px 34px; }
.einspaltig { grid-template-columns: 1fr; max-width: 46em; }
.zeilen { display: grid; gap: 8px; }
.zeile { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 16px; border-radius: var(--rund-klein); background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px var(--linie); transition: background 0.2s; }
.zeile:hover { background: #fff; }
.zeile strong { display: block; font-weight: 600; line-height: 1.3; }
.zeile small { display: block; font-size: 13px; color: var(--grau); margin-top: 2px; }
.wissen-zeile { border-left: 3px solid var(--jade); border-radius: 6px var(--rund-klein) var(--rund-klein) 6px; }
.wissen-kopf { background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%), #cdeee6; }

/* ---------- Wissenskarten ---------- */
.wissenkarte { display: flex; flex-direction: column; }
.wissenkarte small { font-size: 13px; font-weight: 650; color: var(--jade-tief); }
.wissenkarte h3 { margin-top: 8px; font-size: 1.22rem; }
.wissenkarte .kernsatz { margin-top: 6px; font-size: 0.98rem; color: var(--tinte); }
.wissen-fuss { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; font-size: 14px; }
.wissen-fuss .anzahl { color: var(--grau); }

/* ---------- Mythos oder Wahrheit? ---------- */
.check { border-radius: var(--rund-gross); padding: 30px 34px 32px; max-width: 820px; }
.check-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.check-zahl { font-size: 14px; font-weight: 650; color: var(--jade-tief); }
.check-punkte { display: flex; gap: 6px; }
.check-punkte li { width: 10px; height: 10px; border-radius: 50%; background: rgba(16, 60, 52, 0.12); transition: background 0.3s, transform 0.3s; }
.check-punkte li.jetzt { background: var(--tinte); transform: scale(1.25); }
.check-punkte li.ok { background: var(--gut); }
.check-punkte li.nein { background: var(--koralle); }
.check-punkte.gross { justify-content: center; margin: 22px 0 26px; flex-wrap: wrap; }
.check-punkte.gross li { width: 16px; height: 16px; }
.check-frage { margin-top: 18px; font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; outline: none; }
.check-antworten { margin-top: 22px; display: grid; gap: 10px; }
.check-antwort { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; padding: 17px 20px; border-radius: 20px; font-size: 1.04rem; font-weight: 550; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--linie), 0 8px 20px -14px rgba(14, 80, 70, 0.5); transition: background 0.25s, box-shadow 0.25s, transform 0.15s, opacity 0.3s; }
.check-antwort:not(:disabled):hover { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px var(--jade), 0 10px 24px -14px rgba(14, 80, 70, 0.6); }
.check-antwort:not(:disabled):active { transform: scale(0.985); }
.check-antwort:disabled { cursor: default; }
.check-antwort.wahr { background: rgba(35, 160, 101, 0.1); box-shadow: 0 0 0 2px var(--gut); }
.check-antwort.mythos { opacity: 0.72; }
.check-antwort.mythos.gewaehlt { opacity: 1; background: rgba(226, 103, 79, 0.08); box-shadow: 0 0 0 2px var(--koralle); }
.check-marke { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; animation: auf 0.35s ease-out; }
.wahr .check-marke { background: var(--gut); }
.mythos .check-marke { background: #9a9ca3; }
.mythos.gewaehlt .check-marke { background: var(--koralle); }
.check-rueckmeldung { margin-top: 0; }
.check-rueckmeldung.sichtbar { margin-top: 20px; padding: 18px 20px 20px; border-radius: var(--rund); animation: auf 0.4s ease-out; }
.check-rueckmeldung.ok { background: rgba(35, 160, 101, 0.08); }
.check-rueckmeldung.nein { background: rgba(227, 176, 32, 0.12); }
.check-rueckmeldung p { color: var(--tinte); }
.check-urteil { font-weight: 700; font-size: 1.08rem; margin-bottom: 6px; }
.check-aktionen { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.check-weiter { margin-left: auto; padding: 12px 26px; }
.check-ergebnis { text-align: center; padding: 10px 0 4px; }
.check-ergebnis .check-frage { margin-top: 8px; }
.check-score { font-size: 1.05rem; color: var(--grau); }
.check-score strong { display: block; font-size: 4rem; line-height: 1; letter-spacing: -0.05em; color: var(--jade-tief); }
.check-ergebnis-text { margin: 12px auto 0; max-width: 34em; color: var(--grau); }
.check-ergebnis .knopf { padding: 12px 30px; }
.kopfzeile a { color: var(--jade-tief); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Warnzeichen ---------- */
.warnung { margin-top: 16px; border-radius: var(--rund-gross); padding: 30px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px 40px; background: linear-gradient(140deg, rgba(255, 244, 240, 0.9), rgba(255, 255, 255, 0.5)); }
.warnung h3 { font-size: 1.55rem; letter-spacing: -0.03em; }
.warnung > div p { margin-top: 10px; color: var(--grau); }
.warnung ul { display: grid; gap: 10px; }
.warnung ul li { position: relative; padding-left: 30px; font-weight: 500; }
.warnung ul li::before { content: "!"; position: absolute; left: 0; top: 0.12em; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--koralle); }
.notfall { grid-column: 1 / -1; padding: 14px 18px; border-radius: var(--rund-klein); background: var(--koralle); color: #fff; font-weight: 600; }

/* ---------- Fragen ---------- */
.zweispaltig { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.fragenliste { display: grid; gap: 10px; }
.fragenliste details { border-radius: var(--rund); }
.fragenliste summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font-weight: 600; position: relative; border-radius: var(--rund); }
.fragenliste summary::-webkit-details-marker { display: none; }
.fragenliste summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau); transform: translateY(-70%) rotate(45deg); transition: transform 0.25s; }
.fragenliste details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.fragenliste details p { padding: 0 22px 20px; color: var(--grau); max-width: 44em; }
.angehoerige { border-radius: var(--rund-gross); padding: 28px; position: sticky; top: 96px; }
.angehoerige h3 { font-size: 1.55rem; letter-spacing: -0.03em; }
.angehoerige > p { margin-top: 8px; color: var(--grau); }
.angehoerige ul { margin-top: 16px; display: grid; gap: 12px; }
.angehoerige li { position: relative; padding-left: 28px; font-size: 0.98rem; }
.angehoerige li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; background: rgba(15, 157, 138, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.300l2.700 2.700 5.300-5.500' fill='none' stroke='%230a6e62' stroke-width='1.800' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Fuß ---------- */
.fuss { padding: 30px 0 60px; border-top: 1px solid var(--linie); color: var(--grau); font-size: 0.95rem; display: grid; gap: 14px; }
.fuss strong { color: var(--tinte); }
.fuss summary { cursor: pointer; font-weight: 600; color: var(--tinte); }
.fuss ul { margin-top: 10px; display: grid; gap: 8px; }
.fuss a { text-decoration-color: rgba(15, 157, 138, 0.5); text-underline-offset: 3px; overflow-wrap: anywhere; }
.klein { font-size: 0.85rem; }

/* ---------- Impressum und Datenschutz ---------- */
.recht-kopf { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.recht-logo img { height: 40px; width: auto; display: block; }
.recht { width: min(860px, calc(100% - 32px)); margin: 0 auto 40px; padding: 38px 42px 44px; border-radius: var(--rund-gross); }
.recht h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05; }
.recht h2 { margin: 30px 0 8px; font-size: 1.2rem; letter-spacing: -0.02em; }
.recht p + p { margin-top: 10px; }
.recht p, .recht li { color: #3a3a40; }
.recht .punkte { margin: 8px 0; }
.recht code { font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: rgba(16, 60, 52, 0.07); }
.recht-hinweis { margin-top: 16px; padding: 12px 16px; border-radius: var(--rund-klein); background: rgba(255, 214, 10, 0.18); font-size: 0.95rem; }
.platzhalter { background: #fff1a8; color: var(--tinte); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.rechtsseite .fuss { width: min(860px, calc(100% - 32px)); }
.rechtsseite .fuss-links { border-top: 0; padding-top: 0; }
@media (max-width: 760px) { .rechtsseite { padding-bottom: 0; } .recht { padding: 26px 20px 30px; border-radius: var(--rund); } }

/* ---------- Tablet ---------- */
@media (max-width: 1020px) {
  .buehnen-karte { grid-template-columns: 1fr; }
  .buehne { min-height: 0; aspect-ratio: 1.12; }
  .buehne-seite { border-left: 0; box-shadow: 0 -1px 0 var(--linie); }
  .status { min-height: 8.5em; }
  .mahl-knoepfe { grid-template-columns: 1fr 1fr; }
  .raster.vier { grid-template-columns: repeat(2, 1fr); }
  .raster.drei, .zeitstrahl { grid-template-columns: repeat(2, 1fr); }
  .vergleich { grid-template-columns: 1fr 1fr; }
  .vergleich article:last-child { grid-column: 1 / -1; }
  .zweispaltig { grid-template-columns: 1fr; }
  .tagesplan ol { grid-template-columns: repeat(3, 1fr); }
  .angehoerige { position: static; }
}

/* ---------- Telefon: Navigation wandert nach unten ---------- */
@media (max-width: 760px) {
  body { font-size: 16.5px; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: 20px; }
  main, .fuss { width: calc(100% - 28px); }
  .leiste { background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.76)); top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 6px; gap: 0; width: calc(100vw - 20px); border-radius: 30px; }
  .marke-name { display: none; }
  .leiste ul { width: 100%; justify-content: space-between; gap: 0; }
  .leiste li { flex: 1; min-width: 0; }
  .leiste li a { flex-direction: column; gap: 2px; padding: 7px 0 6px; font-size: 10px; border-radius: 22px; letter-spacing: 0; }
  .leiste li a svg { display: block; }
  .start { padding: 34px 0 24px; }
  .start-logo { width: min(330px, 100%); margin-bottom: 22px; }
  .abschnitt { padding: 18px 0 54px; }
  .buehne { aspect-ratio: 0.78; --oben-frei: 122px; --unten-frei: 70px; }
  .buehne > .mahl { position: absolute; z-index: 2; top: 66px; left: 12px; right: 12px; }
  .buehne > .mahl .mahl-frage { display: none; }
  .buehne > .mahl .knopf { padding: 10px 6px; font-size: 14.5px; white-space: nowrap; }
  .buehne-seite { padding: 22px 20px 22px; gap: 18px; }
  .status { min-height: 8.5em; }
  .status h3 { font-size: 1.35rem; }
  .mahl-knoepfe { grid-template-columns: 1fr 1fr; }
  .marke { font-size: 11.5px; padding: 4px 9px 4px 7px; }
  .marke::before { width: 6px; height: 6px; margin-right: 5px; }
  .umschalter { top: 12px; }
  .umschalter button { padding: 8px 22px; }
  .raster.drei, .raster.vier, .zeitstrahl, .vergleich, .lebensmittel { grid-template-columns: 1fr; }
  .tagesplan { padding: 22px 18px; border-radius: var(--rund); }
  .tagesplan ol { grid-template-columns: 1fr; gap: 8px; }
  .tagesplan button { grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 1px; align-items: center; padding: 12px 14px; }
  .tagesplan .klein-bild { grid-row: 1 / span 3; margin: 0 0 0 5px; }
  .tagesplan .zeitpunkt, .tagesplan strong, .tagesplan small { grid-column: 2; }
  .rezept { flex-direction: row; }
  .rezept .teller { aspect-ratio: auto; width: 34%; flex: none; }
  .teller::before { width: 78%; top: 50%; }
  .teller::after { width: 40%; top: 50%; }
  .finder, .warnung, .angehoerige { padding: 22px 18px; border-radius: var(--rund); }
  .check { padding: 22px 18px 24px; border-radius: var(--rund); }
  .check-antwort { padding: 15px 16px; font-size: 1rem; }
  .check-weiter { width: 100%; margin-left: 0; }
  .check-aktionen { flex-direction: column-reverse; align-items: stretch; }
  .check-aktionen .textknopf { text-align: center; }
  .warnung { grid-template-columns: 1fr; }
  .wochen { display: grid; width: 100%; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); border-radius: 26px; }
  .wochen button { padding: 10px 6px; }
  .blatt { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--rund-gross) var(--rund-gross) 0 0; }
  .blatt[open] { animation-name: hoch; }
  .blatt-kopf-text { padding: 24px 20px 20px; }
  .breit { padding: 0 20px calc(30px + env(safe-area-inset-bottom)); }
  .blatt-bild.mit-bild { max-height: 240px; }
  .blatt-inhalt { grid-template-columns: 1fr; padding: 22px 22px calc(30px + env(safe-area-inset-bottom)); gap: 24px; }
}
@media (max-width: 370px) { .leiste .nav-alltag { display: none; } }
@keyframes hoch { from { transform: translateY(60px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .leiste, .hintergrund, .buehnen-karte { display: none; }
  body { padding: 0; }
}

/* Wissenswelt: viele Kategorien – auf dem Handy als wischbare Zeile */
@media (max-width: 760px) {
  #wissenfilter { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
  #wissenfilter::-webkit-scrollbar { display: none; }
  #wissenfilter button { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Die Operation: Journey mit 3D-Modell ---------- */
.op-reise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 26px; margin-bottom: 16px; }
.op-reise button { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; border-radius: 20px; text-align: left; color: var(--grau); transition: background 0.25s, box-shadow 0.25s; }
.op-reise button[aria-selected="true"] { background: #fff; color: var(--tinte); box-shadow: 0 0 0 1px var(--linie), 0 6px 16px -8px rgba(14, 80, 70, 0.35); }
.op-reise-nr { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--jade-tief); background: rgba(18, 137, 127, 0.1); }
.op-reise button[aria-selected="true"] .op-reise-nr { color: #fff; background: linear-gradient(180deg, #16a294, var(--jade-tief)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.op-reise-text { display: grid; gap: 1px; min-width: 0; }
.op-reise-text strong { font-size: 15.5px; font-weight: 650; }
.op-reise-text small { font-size: 12.5px; color: var(--grau); }
.op-reise-balken { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(16, 60, 52, 0.08); overflow: hidden; }
.op-reise-balken b { display: block; height: 100%; background: linear-gradient(90deg, #16a294, var(--gold)); transform-origin: left; transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.3, 1, 0.5, 1); }

.op-buehne { --oben-frei: 52px; --unten-frei: 62px; min-height: 600px; background: radial-gradient(ellipse 55% 12% at 50% 94%, rgba(14, 80, 70, 0.12), rgba(14, 80, 70, 0) 70%); }
.op-zaehler { position: absolute; top: 16px; right: 16px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--jade-tief); font-variant-numeric: tabular-nums; }
.op-seite { gap: 20px; }
.op-erklaerung { min-height: 21em; }
.op-phase { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jade); }
.op-erklaerung h3 { margin-top: 6px; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.12; }
.op-erklaerung > p:not(.op-phase):not(.op-weiter-links) { margin-top: 10px; color: var(--grau); text-wrap: pretty; }
.op-fakten { margin-top: 14px; display: grid; gap: 8px; }
.op-fakten li { position: relative; padding: 9px 12px 9px 36px; border-radius: 14px; font-size: 0.95rem; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px var(--linie); }
.op-fakten li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.op-weiter-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.op-weiter-links:empty { display: none; }
.op-steuerung { margin-top: auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.knopf.zweit { color: var(--jade-tief); background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 6px 16px -8px rgba(14, 80, 70, 0.35); }
.op-punkte { display: flex; justify-content: center; gap: 4px; }
.op-punkt { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.op-punkt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(16, 60, 52, 0.16); transition: transform 0.25s, background 0.25s; }
.op-punkt.erledigt::before { background: rgba(18, 137, 127, 0.5); }
.op-punkt[aria-current="step"]::before { background: var(--jade); transform: scale(1.45); box-shadow: 0 0 0 3px rgba(18, 137, 127, 0.18); }
.op-punkt.waehrend[aria-current="step"]::before { background: var(--jade-tief); }
.op-punkt.danach[aria-current="step"]::before { background: #6aa317; box-shadow: 0 0 0 3px rgba(143, 191, 31, 0.25); }

.op-wissen { margin-top: 22px; }
.op-wissen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.op-wissen-kopf h3 { font-size: 1.3rem; }

@media (max-width: 1020px) {
  .op-buehne { min-height: 0; aspect-ratio: 1.1; }
  .op-erklaerung { min-height: 0; }
}
@media (max-width: 760px) {
  .op-reise { gap: 2px; padding: 4px; border-radius: 22px; }
  .op-reise button { flex-direction: column; gap: 4px; padding: 9px 4px 14px; text-align: center; border-radius: 18px; }
  .op-reise-nr { width: 24px; height: 24px; font-size: 12.5px; }
  .op-reise-text strong { font-size: 13.5px; }
  .op-reise-text small { display: none; }
  .op-reise-balken { left: 14px; right: 14px; bottom: 6px; }
  .op-buehne { aspect-ratio: 0.8; }
  .op-zaehler { top: 12px; right: 12px; }
  .op-erklaerung h3 { font-size: 1.35rem; }
  .op-steuerung { grid-template-columns: 1fr 1.5fr; }
}
@media (max-width: 420px) { .leiste .nav-alltag { display: none; } }
.op-pfeile { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.op-pfeile button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--jade-tief); }
.op-pfeile button:hover { background: #fff; }
.op-pfeile button:disabled { opacity: 0.35; cursor: default; background: none; }
.op-pfeile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Handy quer: 3D-Bühnen passen in die Bildschirmhöhe */
@media (orientation: landscape) and (max-height: 540px) {
  .buehne, .op-buehne { min-height: 250px; aspect-ratio: auto; max-height: 520px; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 761px) {
  html { scroll-padding-top: 62px; }
  .leiste { top: 8px; gap: 12px; padding: 4px 6px 4px 14px; }
  .leiste li a { padding: 6px 10px; font-size: 13.5px; }
  .marke-name img { height: 24px; }
  .buehne, .op-buehne { height: calc(100svh - 98px); }
  .buehne { --oben-frei: 64px; --unten-frei: 58px; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 760px) {
  html { scroll-padding-top: 10px; }
  .buehne, .op-buehne { height: calc(100svh - 112px - env(safe-area-inset-bottom)); }
  /* Umschalter links, Mahlzeit-Knöpfe rechts in einer Zeile */
  .buehne { --oben-frei: 62px; --unten-frei: 56px; }
  .buehne > .umschalter { left: 12px; transform: none; }
  .buehne > .mahl { top: 12px; left: auto; right: 12px; width: min(330px, 52%); }
  .buehne > .mahl .knopf { padding: 9px 6px; font-size: 13.5px; }
}

/* ---------- Feedback und Vorschläge ---------- */
.mitmachen { border-radius: var(--rund-gross); padding: clamp(22px, 4vw, 40px); max-width: 860px; }
.formular { display: grid; gap: 18px; }
.formular[hidden], .formular-reihe[hidden] { display: none; }
.formular-art { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.formular-art legend { font-weight: 650; margin-bottom: 10px; }
.formular-art label { position: relative; }
.formular-art input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.formular-art span { display: inline-block; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--grau); background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px var(--linie); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.formular-art input:checked + span { color: #fff; background: linear-gradient(180deg, #16a294, var(--jade-tief)); box-shadow: 0 6px 16px -8px rgba(14, 80, 70, 0.6); }
.formular-art input:focus-visible + span { outline: 3px solid rgba(18, 137, 127, 0.35); outline-offset: 2px; }
.formular-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feld { display: grid; gap: 6px; }
.feld > span { font-size: 14.5px; font-weight: 600; }
.feld em { font-style: normal; font-weight: 400; color: var(--grau); }
.feld input, .feld textarea, .feld select { width: 100%; font: inherit; font-size: 16px; color: var(--tinte); padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow 0.2s; }
.feld textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--jade), 0 0 0 4px rgba(18, 137, 127, 0.12); }
.formular-hinweis { font-size: 0.9rem; color: var(--grau); padding: 12px 14px; border-radius: 14px; background: rgba(143, 191, 31, 0.1); }
.einwilligung { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: var(--grau); }
.einwilligung input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--jade); }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.formular-fuss .knopf { min-width: 180px; }
.formular-fuss .knopf:disabled { opacity: 0.6; cursor: progress; }
.formular-status { font-size: 0.92rem; color: var(--jade-tief); }
.formular-status.fehler { color: #b2402c; }
.formular-danke { text-align: center; padding: 20px 0; outline: none; }
.formular-danke h3 { font-size: 1.5rem; margin: 14px 0 6px; }
.formular-danke p { color: var(--grau); max-width: 460px; margin: 0 auto 12px; }
.danke-zeichen { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #16a294, var(--jade-tief)); box-shadow: 0 10px 24px -10px rgba(14, 80, 70, 0.6); }
.danke-zeichen svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .formular-reihe { grid-template-columns: 1fr; }
  .formular-art span { padding: 9px 14px; font-size: 14.5px; }
  .formular-fuss .knopf { width: 100%; }
}