@font-face {
  font-family: "Jakarta";
  src: url("/app/schrift/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Jakarta";
  src: url("/app/schrift/jakarta-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --grund: #0d0d0d;
  --flaeche: #171717;
  --flaeche-2: #212121;
  --linie: #2b2b2b;
  --text: #f6f6f4;
  --leise: #9d9d98;
  --gelb: #ffd54a;
  --gelb-weich: #ffe58f;
  --gelb-text: #1d1600;


  --rot-1: #c8102e;
  --rot-2: #d6303f;
  --gut: #6fd08c;
  --gut-text: #06210f;
  --akzent-schrift: var(--gelb);
  --fehler: #ff6a5c;
  --radius: 22px;
  --radius-klein: 14px;
  --marke: var(--gelb);
  --schatten: 0 14px 40px rgb(0 0 0 / .45);
  --schrift-text: "Jakarta";
  --schrift-titel: var(--schrift-text);
  --schrift-auszeichnung: var(--schrift-text);
  --schrift-hand: var(--schrift-text);
  --titel-gewicht: 800;
  color-scheme: dark;
}








:root.hell {
  color-scheme: light;
  --grund: #f6f1ea;
  --flaeche: #ffffff;
  --flaeche-2: #efe8de;
  --linie: #e4dacd;
  --text: #1f1813;
  --leise: #6d6258;
  --gelb: #b47c00;
  --gelb-weich: #ffcf5a;
  --gelb-text: #241800;
  --gut: #1e7d46;
  --gut-text: #fff;
  --akzent-schrift: #8a5d00;
  --fehler: #b3261e;
  --schatten: 0 10px 30px rgb(60 40 20 / .12);
}
:root.hell .kopf { background: color-mix(in srgb, #14100d 92%, transparent); color: #f6f1ea; --marke: #ffd54a; }
:root.hell .kopf .rund { background: #221c17; border-color: #3a3029; color: #f6f1ea; }

.hell-knopf { display: grid; place-items: center; padding: 0; color: var(--text); }
.hell-knopf .mond, :root.hell .hell-knopf .sonne { display: none; }
:root.hell .hell-knopf .mond { display: block; }



:root.hell .blatt .titelbild:not(.ohne-bild) { border-radius: 0 0 28px 28px; overflow: hidden; }
:root.hell .blatt .titelbild:not(.ohne-bild)::after { display: none; }
:root.hell .blatt .titelbild:not(.ohne-bild) + .inhalt { margin-top: 0; padding-top: 20px; }
:root.hell .gericht, :root.hell .feldgruppe, :root.hell .summen { box-shadow: var(--schatten); }
:root.hell .knopf-gelb { background: linear-gradient(180deg, #ffd977, #f5b83b); }
:root.hell .segment input:checked + span, :root.hell .trinkgeld-knoepfe input:checked + span { background: #ffd977; }
:root.eigene-titel :is(h1, h2, h3, .marke-name) { font-family: var(--schrift-titel), var(--schrift-text), sans-serif; font-weight: var(--titel-gewicht); letter-spacing: 0; }
:root.titel-gross :is(h1, h2, h3, .marke-name) { text-transform: uppercase; }

:root.ohne-symbol .marke-name img:not(.logo) { display: none; }
:root.eigene-auszeichnung :is(.kategorien a, .plakette, .groesse em, .nr) { font-family: var(--schrift-auszeichnung), var(--schrift-text), sans-serif; }
.spruch { font-family: var(--schrift-hand), var(--schrift-text), cursive; font-size: 1.5rem; line-height: 1.1; color: rgb(255 255 255 / .92); margin: 0 0 6px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.45 var(--schrift-text), "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
a { color: var(--akzent-schrift); }
button { font: inherit; color: inherit; }
img { display: block; }
.leise { color: var(--leise); }
.mitte { text-align: center; padding: 48px 16px; }
[hidden] { display: none !important; }
.nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 2px solid var(--gelb); outline-offset: 4px; }

.link-knopf { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.link-knopf:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }


.kopf {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 820px; margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.marke-name {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--marke); text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em;
}
.marke-name img { border-radius: 8px; flex: none; }
.marke-name span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; }
.marke-name.mit-logo > img:not(.logo), .marke-name.mit-logo > span { display: none; }
.marke-name img.logo { height: 46px; width: auto; max-width: 100%; border-radius: 0; object-fit: contain; object-position: left center; }
.rund {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--flaeche);
  font-weight: 700; font-style: italic; font-family: Georgia, serif; font-size: 1.1rem; cursor: pointer;
}

main { max-width: 820px; margin: 0 auto; padding: 0 16px; }


.laedt { display: grid; gap: 14px; padding-top: 12px; }
.laedt div { height: 180px; border-radius: var(--radius); background: linear-gradient(90deg, var(--flaeche) 30%, var(--flaeche-2) 50%, var(--flaeche) 70%); background-size: 300% 100%; animation: schimmer 1.4s infinite linear; }
.laedt div:first-child { height: 320px; }
@keyframes schimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }


.held {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; min-height: 380px; margin-top: 6px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; background: var(--flaeche); color: #fff;
  box-shadow: var(--schatten); cursor: pointer;
}
.held img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transform: scale(1.02); transition: transform 6s ease-out;
}
.held:hover img { transform: scale(1.08); }
.held::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / .05) 0%, rgb(0 0 0 / .15) 35%, rgb(0 0 0 / .82) 78%, rgb(0 0 0 / .92) 100%);
}
.held.ohne-bild { min-height: 220px; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--rot-1) 45%, var(--grund)) 0%, color-mix(in srgb, var(--rot-1) 12%, var(--grund)) 55%, var(--flaeche) 100%); }
.held .plakette { align-self: flex-start; margin-bottom: auto; }
.held h2 { font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; line-height: 1.02; text-shadow: 0 2px 20px rgb(0 0 0 / .5); }
.held p { margin: 10px 0 0; color: rgb(255 255 255 / .82); max-width: 40ch; }
.held .knopf-gelb { margin-top: 18px; align-self: flex-start; }

.plakette {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: var(--gelb); color: var(--gelb-text);
}
.plakette.rot { background: linear-gradient(135deg, var(--rot-1), var(--rot-2)); color: #fff; }
.plakette.dunkel { background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(6px); }
.plakette.gruen { background: var(--gut); color: var(--gut-text); }

.plakette.alter { background: #1c1c1c; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }


.fakten { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 0; padding: 4px 16px; }
.fakten::-webkit-scrollbar { display: none; }
.fakt {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; background: var(--flaeche); font-size: .88rem; color: var(--leise);
}
.fakt strong { color: var(--text); font-weight: 700; }
.fakt .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 18%, transparent); }
.fakt .punkt.zu { background: var(--rot-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rot-2) 18%, transparent); }



.bewertungs-link { text-decoration: none; border: 1px solid var(--linie); }
.bewertungs-link:focus-visible { outline: 2px solid var(--gelb); }
.bewertungs-hinweis { font-size: .75rem; margin: 10px 0; }
.bewertungs-liste { display: grid; gap: 16px; padding-top: 20px; }
.bewertungs-karte { min-width: 0; padding: 20px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.bewertungs-kopf { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; overflow-wrap: anywhere; }
.bewertungs-sterne { color: var(--akzent-schrift); }
.bewertungs-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bewertungs-antwort { border-inline-start: 3px solid var(--gelb); padding-inline-start: 14px; margin-top: 16px; }
.bewertungs-seiten { display: flex; flex-wrap: wrap; gap: 12px; }
.bewertungs-form { margin-top: 18px; }
.bewertungs-form .bewertungs-wahl { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.bewertungs-wahl legend { color: var(--text); font-weight: 700; margin-bottom: 8px; }
.bewertungs-form .bewertungs-wahl label { margin: 0; display: flex; align-items: center; gap: 6px; padding: 10px 8px; border-radius: var(--radius-klein); background: var(--flaeche-2); color: var(--text); cursor: pointer; }
.bewertungs-wahl input { accent-color: var(--gelb); }
.bewertungs-form .bewertungs-wahl label:has(input:checked) { outline: 2px solid var(--gelb); }
.bewertungs-sichtbarkeit { overflow-wrap: anywhere; margin: 0; }


.navi {
  position: sticky; top: calc(62px + env(safe-area-inset-top)); z-index: 7;
  margin: 18px -16px 0; padding: 8px 16px 12px;
  background: linear-gradient(var(--grund) 75%, color-mix(in srgb, var(--grund) 0%, transparent));
}
.suche {
  display: flex; align-items: center; gap: 10px;
  background: var(--flaeche); border-radius: 999px; padding: 0 16px; margin-bottom: 10px;
}
.suche svg { flex: none; opacity: .6; }
.suche input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; padding: 12px 0; outline: none;
}
.suche:focus-within { outline: 2px solid var(--gelb); outline-offset: 2px; }
.suche input::placeholder { color: var(--leise); }
.kategorien { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; margin-block: -4px; }
.kategorien a:focus-visible { outline: 2px solid var(--gelb); outline-offset: -3px; }
.kategorien::-webkit-scrollbar { display: none; }
.kategorien a {
  flex: none; padding: 10px 18px; border-radius: 999px;
  background: var(--flaeche); color: var(--text); text-decoration: none;
  font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.kategorien a.aktiv { background: var(--gelb); color: var(--gelb-text); box-shadow: 0 6px 22px color-mix(in srgb, var(--gelb) 28%, transparent); }


.abschnitt { margin-top: 30px; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.abschnitt-kopf h2 { font-size: 1.55rem; font-weight: 800; }
.abschnitt-kopf p { margin: 4px 0 0; color: var(--leise); font-size: .9rem; }


.leiste-quer {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 6px 16px 10px;
}
.leiste-quer::-webkit-scrollbar { display: none; }
.kachel-hoch {
  position: relative; isolation: isolate; overflow: hidden; flex: none; scroll-snap-align: start;
  width: min(70vw, 280px); aspect-ratio: 4 / 5; border-radius: var(--radius); border: 0; padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end; text-align: start;
  background: var(--flaeche); box-shadow: var(--schatten); cursor: pointer; color: #fff;
}
.kachel-hoch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
.kachel-hoch:hover img { transform: scale(1.05); }
.kachel-hoch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .85)); }
.kachel-hoch .plakette { position: absolute; top: 14px; inset-inline-start: 14px; }
.kachel-hoch .kachel-titel { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.kachel-hoch .preis { color: #ffd54a; font-weight: 800; margin-top: 4px; }
.kachel-hoch .deutscher-name { color: rgb(255 255 255 / .8); }
.kachel-hoch:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }


.gerichte { display: grid; gap: 16px; }
@media (min-width: 640px) { .gerichte { grid-template-columns: 1fr 1fr; } }
.gericht {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--flaeche); border-radius: var(--radius); cursor: pointer;
  transition: transform .15s;
}
.gericht:active { transform: scale(.985); }
.gericht.aus { opacity: .45; cursor: default; }
.gericht .foto { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--flaeche-2); }
.gericht .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gericht:hover .foto img { transform: scale(1.04); }
.gericht .foto .plaketten { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.gericht .koerper { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gericht h3 { font-size: 1.2rem; font-weight: 800; }
.gericht .nr { color: var(--leise); font-weight: 600; margin-inline-end: 4px; }
.gericht p { margin: 0; color: var(--leise); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gericht .fuss-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.gericht .preis { font-size: 1.2rem; font-weight: 800; color: var(--akzent-schrift); }
.gericht .preis small { font-size: .78rem; color: var(--leise); font-weight: 600; margin-inline-end: 3px; }
.titelzeile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
.kennung { font-size: .72rem; color: var(--leise); font-weight: 500; letter-spacing: 0; }
.preis-zusatz { display: block; font-size: .78rem; font-weight: 600; color: var(--leise); line-height: 1.35; letter-spacing: 0; }
.gericht .preis .preis-zusatz { margin: 2px 0 0; }
.hell-auf-bild { color: rgb(255 255 255 / .86); text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
.ki-marke {
  position: absolute; inset-block-end: 8px; inset-inline-end: 8px; z-index: 2; pointer-events: none;
  padding: 3px 7px; border-radius: 6px; background: rgb(0 0 0 / .72); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
}
.held > .ki-marke, .buehne > .ki-marke, .saison-band > .ki-marke { inset-block-end: auto; inset-block-start: 14px; inset-inline-end: 14px; }
.blatt .titelbild > .ki-marke { inset-block-end: auto; inset-block-start: calc(64px + env(safe-area-inset-top)); }
.kachel-hoch > .ki-marke { inset-block-end: auto; inset-block-start: 14px; inset-inline-end: 14px; }
.marken { display: flex; gap: 6px; flex-wrap: wrap; }


.gericht.zeile-art { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
.gericht.zeile-art .koerper { padding: 0; }
.gericht.zeile-art .fuss-zeile { padding: 0; margin: 0; flex-direction: column; align-items: flex-end; gap: 8px; }
.gericht.zeile-art .preis { font-size: 1.05rem; }

.plus {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--flaeche-2); color: var(--text); font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.plus:hover, .gericht:hover .plus { background: var(--gelb); color: var(--gelb-text); }
.plus:active { transform: scale(.9); }
.plus:disabled { opacity: .4; }

.wieder {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 14px 16px;
  border: 1px dashed var(--linie); border-radius: var(--radius-klein); background: none; text-align: start; cursor: pointer;
}
.wieder strong { display: block; }
.wieder span { color: var(--leise); font-size: .88rem; }
.wieder .pfeil { margin-inline-start: auto; color: var(--akzent-schrift); font-size: 1.3rem; }
.keine-treffer { color: var(--leise); text-align: center; padding: 40px 0; }


.knopf-gelb, .knopf-rot, .knopf-hell {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 15px 26px; cursor: pointer;
  font-weight: 800; font-size: 1rem; letter-spacing: -.01em; transition: transform .12s, filter .15s;
}
.knopf-gelb { background: linear-gradient(180deg, var(--gelb-weich), var(--gelb)); color: var(--gelb-text); box-shadow: 0 10px 30px color-mix(in srgb, var(--gelb) 30%, transparent); }
.knopf-rot { background: linear-gradient(135deg, var(--rot-1), var(--rot-2)); color: #fff; box-shadow: 0 12px 32px color-mix(in srgb, var(--rot-1) 38%, transparent); }
.knopf-hell { background: var(--flaeche-2); color: var(--text); }
.knopf-gelb:active, .knopf-rot:active, .knopf-hell:active { transform: scale(.97); }
.knopf-rot:disabled { filter: grayscale(.8) brightness(.7); box-shadow: none; cursor: default; }
.knopf-rot[aria-disabled="true"] { background: #4a4a4a; box-shadow: none; cursor: not-allowed; }
.knopf-gelb:focus-visible, .knopf-rot:focus-visible, .knopf-hell:focus-visible, .rund:focus-visible, .plus:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.breit { width: 100%; }


.korb-leiste {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(color-mix(in srgb, var(--grund) 0%, transparent), var(--grund) 40%);
}
.korb-leiste .knopf-rot { width: 100%; max-width: 788px; margin: 0 auto; display: flex; justify-content: space-between; padding-block: 12px; padding-inline: 12px 22px; }
.korb-symbol {
  position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .18);
  display: grid; place-items: center;
}
.korb-symbol::before {
  content: ""; width: 18px; height: 16px; border: 2.5px solid #fff; border-top: 0; border-radius: 0 0 6px 6px; margin-top: 4px;
}
.korb-symbol::after {
  content: ""; position: absolute; top: 9px; width: 10px; height: 8px; border: 2.5px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0;
}
#korb-anzahl {
  position: absolute; top: -4px; inset-inline-end: -4px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--gelb); color: var(--gelb-text); font-size: .75rem; font-weight: 800;
  display: grid; place-items: center;
}
.korb-leiste.huepft .knopf-rot { animation: huepf .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes huepf { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

.meldung {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 12; transform: translateX(-50%);
  padding: 11px 18px; border-radius: 22px; background: var(--text); color: var(--grund);
  font-weight: 700; font-size: .92rem; box-shadow: var(--schatten); width: max-content; max-width: calc(100% - 32px); text-align: center;
  animation: auftauchen .25s ease-out;
}
.meldung:not(.zeigt) {
  width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none; animation: none;
}
@keyframes auftauchen { from { opacity: 0; transform: translate(-50%, 10px); } }


.blatt, .dialog {
  border: 0; padding: 0; color: var(--text); background: var(--grund);
}
.blatt {
  width: 100%; max-width: 560px; height: 100%; max-height: 100%; margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 600px) { .blatt { height: auto; max-height: calc(100% - 48px); margin: auto; border-radius: 28px; box-shadow: var(--schatten); } }
.blatt::backdrop, .dialog::backdrop { background: rgb(0 0 0 / .7); backdrop-filter: blur(4px); }
.blatt[open] { animation: hochfahren .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes hochfahren { from { transform: translateY(40px); opacity: 0; } }
.blatt form { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.blatt .rollen { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.blatt .titelbild { position: relative; aspect-ratio: 4 / 3; background: var(--flaeche); }
.blatt .titelbild img { width: 100%; height: 100%; object-fit: cover; }
.blatt .titelbild::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, var(--grund)); }
.blatt .ohne-bild { height: 64px; }

.blatt .ohne-bild + .inhalt { margin-top: 0; }
.schliessen {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); inset-inline-end: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(0 0 0 / .55); color: #fff; font-size: 1.3rem; backdrop-filter: blur(6px);
}
.blatt .inhalt { padding: 0 22px 24px; margin-top: -54px; position: relative; z-index: 1; }
.blatt h2 { font-size: 2.1rem; font-weight: 800; line-height: 1.05; }
.blatt .beschreibung { color: var(--leise); margin: 10px 0 0; font-size: 1rem; }
.blatt .titelzeile { column-gap: 8px; }
.allergen-zeile, .alter-hinweis { margin: 10px 0 0; font-size: .88rem; color: var(--leise); }
.allergen-zeile strong { color: var(--text); font-weight: 700; }
.alter-hinweis { color: var(--text); font-weight: 600; }
.blatt-zusatz { margin: 14px 0 0; font-size: .85rem; }
.blatt .marken { margin-bottom: 12px; }
.blatt fieldset { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.blatt legend { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin-bottom: 12px; padding: 0; }

.groessen { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 12px 2px 6px; margin: -8px -2px 0; }
.groessen::-webkit-scrollbar { display: none; }
.groesse {
  position: relative; flex: 1 0 96px; min-height: 96px; border-radius: 999px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 14px;
  background: var(--flaeche); transition: background .2s, transform .2s, box-shadow .2s;
}
.groesse input { position: absolute; opacity: 0; pointer-events: none; }
.groesse strong { font-size: 1.02rem; font-weight: 800; white-space: nowrap; }
.groesse span { font-size: .82rem; color: var(--leise); white-space: nowrap; }
.groesse:has(input:checked) { background: var(--gelb-weich); color: var(--gelb-text); }
.groesse:has(input:checked) span { color: color-mix(in srgb, var(--gelb-text) 70%, transparent); }
.groesse:has(input:focus-visible) { outline: 2px solid var(--gelb); outline-offset: 3px; }
.groesse .groesse-zusatz { font-size: .7rem; font-weight: 600; color: var(--leise); text-align: center; line-height: 1.25; }
.groesse:has(input:checked) .groesse-zusatz { color: color-mix(in srgb, var(--gelb-text) 75%, transparent); }
.groesse em {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--rot-1), var(--rot-2)); color: #fff; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

.extras { display: grid; gap: 10px; }
.extra {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  background: var(--flaeche); transition: background .15s;
}
.extra input { position: absolute; opacity: 0; pointer-events: none; }
.extra .name { flex: 1; font-weight: 700; }
.extra .name small { display: block; color: var(--akzent-schrift); font-weight: 700; font-size: .85rem; margin-top: 2px; }
.extra .haken {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  display: grid; place-items: center; font-size: 1.2rem; color: var(--leise); transition: all .15s;
}
.extra .haken::before { content: "+"; }
.extra:has(input:checked) { background: var(--flaeche-2); }
.extra:has(input:checked) .haken { background: var(--gelb-weich); border-color: var(--gelb-weich); color: var(--gelb-text); }
.extra:has(input:checked) .haken::before { content: "✓"; font-size: 1rem; font-weight: 800; }
.extra:has(input:disabled) { opacity: .45; cursor: default; }
.extra:has(input:focus-visible) { outline: 2px solid var(--gelb); }

.blatt-fuss {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--grund); border-top: 1px solid var(--linie);
}
.blatt-fuss .knopf-rot { flex: 1; padding: 15px 18px; white-space: nowrap; justify-content: space-between; }
.menge { display: flex; align-items: center; gap: 2px; background: var(--flaeche); border-radius: 999px; padding: 4px; }
.menge button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.2rem; font-weight: 700;
  background: var(--flaeche-2); color: var(--text);
}
.menge button.mehr { background: var(--gelb); color: var(--gelb-text); }
.menge output { min-width: 30px; text-align: center; font-weight: 800; }


.dialog { width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); border-radius: 24px; background: var(--flaeche); }
.dialog form { padding: 24px; }
.dialog h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; }
.dialog h3 { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin: 20px 0 8px; }
.dialog .knopf-hell { margin-top: 20px; }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.zeiten dd { margin: 0; color: var(--leise); }
.zeiten .heute { color: var(--akzent-schrift); font-weight: 700; }
.legende { columns: 2 12rem; overflow-wrap: anywhere; font-size: .9rem; padding-inline-start: 18px; color: var(--leise); }
.impressum, .nachweise { white-space: pre-line; color: var(--leise); }
.nachweise { font-size: .85rem; overflow-wrap: anywhere; }


.zurueck { background: none; border: 0; color: var(--leise); padding: 14px 0 6px; cursor: pointer; font-weight: 600; }
.oberzeile { margin: 8px 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-schrift); }
.seitentitel { font-size: 2.2rem; font-weight: 800; margin-bottom: 18px; }
.korb-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.korb-liste > li {
  display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius); background: var(--flaeche);
}
.korb-liste .vorschau { flex: none; width: 84px; height: 84px; border-radius: 18px; object-fit: cover; background: var(--flaeche-2); }
.korb-liste .vorschau-rahmen { position: relative; flex: none; }
.korb-liste .vorschau-rahmen .ki-marke { inset-block-end: 4px; inset-inline-end: 4px; font-size: .62rem; padding: 2px 5px; }
.korb-liste .vorschau.leer { display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; color: var(--akzent-schrift); }
.korb-liste .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.korb-liste .oben { display: flex; justify-content: space-between; gap: 8px; }
.korb-liste strong { font-weight: 800; font-size: 1.02rem; }
.korb-liste small { color: var(--leise); font-size: .85rem; }
.korb-liste .preis { color: var(--akzent-schrift); font-weight: 800; white-space: nowrap; }
.korb-liste .menge { align-self: flex-start; margin-top: 4px; padding: 3px; }
.korb-liste .menge button { width: 30px; height: 30px; font-size: 1rem; }
.korb-liste.schlicht > li { padding: 14px 16px; }

.dazu { margin-top: 26px; }
.dazu h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; }
.kachel-klein {
  flex: none; scroll-snap-align: start; width: 150px; border: 0; padding: 0; text-align: start; cursor: pointer;
  background: var(--flaeche); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
}
.kachel-klein .kachel-bild { position: relative; display: block; }
.kachel-klein img, .kachel-klein .leer { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche-2); }
.kachel-klein .leer { display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; color: var(--akzent-schrift); }
.kachel-klein div { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.kachel-klein strong { font-size: .92rem; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kachel-klein .kachel-preis { display: flex; justify-content: space-between; align-items: center; color: var(--akzent-schrift); font-weight: 800; font-size: .9rem; }
.kachel-klein .kachel-preis b { width: 26px; height: 26px; border-radius: 50%; background: var(--gelb); color: var(--gelb-text); display: grid; place-items: center; font-size: 1rem; }
.kachel-klein:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }

.formular { margin-top: 26px; display: grid; gap: 18px; }
.feldgruppe { background: var(--flaeche); border-radius: var(--radius); padding: 6px 18px 18px; }
.formular label { display: block; margin: 12px 0 0; font-size: .85rem; color: var(--leise); font-weight: 600; }
.formular input:not([type=radio]):not([type=checkbox]), .formular textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; color: var(--text);
  background: var(--flaeche-2); border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius: 14px; padding: 13px 14px;
}
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--gelb); }
.formular input:focus-visible, .formular textarea:focus-visible, .formular select:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }
.formular [aria-invalid="true"] { border-color: var(--fehler) !important; border-width: 2px; }
.feld label { margin-top: 12px; }
.pflicht { font-weight: 500; }
.feldhinweis { margin: 6px 0 0; font-size: .8rem; color: var(--leise); line-height: 1.4; }
.feldfehler { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--fehler); }
.formular .haken { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--text); cursor: pointer; }
.formular .haken input { margin-top: 3px; flex: none; width: 20px; height: 20px; accent-color: var(--gelb); }
.formular .haken input:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }
.merken { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.merken .feldhinweis { margin-inline-start: 30px; }
.merken .link-knopf { margin: 8px 0 0 30px; font-size: .85rem; color: var(--text); }
.alter { padding: 14px 16px; border-radius: var(--radius-klein); background: var(--flaeche); border: 1.5px solid var(--linie); }
.alter .haken { margin: 0; font-weight: 600; }
.zeile { display: flex; gap: 12px; }
.zeile .schmal { flex: 0 0 100px; }
.zeile label:not(.schmal), .zeile > .feld:not(.schmal) { flex: 1; min-width: 0; }
.segment { border: 0; padding: 0; margin: 0; min-width: 0; }
.segment legend { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin: 0 0 10px; padding: 0; }
.segment-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--flaeche); border-radius: 999px; padding: 5px; }
.segment label { margin: 0; position: relative; }
.segment input { position: absolute; opacity: 0; }
.segment span { display: block; text-align: center; padding: 12px 8px; border-radius: 999px; color: var(--text); font-weight: 700; cursor: pointer; transition: background .2s; }
.segment input:checked + span { background: var(--gelb-weich); color: var(--gelb-text); }
.segment input:focus-visible + span { outline: 2px solid var(--gelb); }
.segment label.aus { opacity: .45; }
.hinweis { font-size: .88rem; margin: 10px 0 0; color: var(--leise); }
.hinweis.schlecht, .fehler { color: var(--fehler); }
.fehler { margin: 0; font-weight: 600; }
.fehler:empty { display: none; }
.grund { margin: 0; font-weight: 600; color: var(--text); }
.pruefen { background: var(--flaeche); border-radius: var(--radius); padding: 18px 20px; }
.pruefen h2, .bestaetigung-karte h2 { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin-bottom: 12px; }
.ueberblick { display: grid; grid-template-columns: minmax(7.5em, auto) 1fr; gap: 6px 14px; margin: 0; }
.ueberblick dt { color: var(--leise); font-size: .88rem; }
.ueberblick dd { margin: 0; overflow-wrap: anywhere; }
.ueberblick .anbieter, .bestaetigung-karte dd { white-space: pre-line; }
.pruefen p { margin: 12px 0 0; font-size: .85rem; }
.datenschutz-hinweis { color: var(--leise); line-height: 1.45; }
.datenschutz-hinweis a { color: var(--text); font-weight: 600; }
@media (max-width: 380px) { .ueberblick { grid-template-columns: 1fr; } .ueberblick dd { margin-bottom: 6px; } }
.fortschritt { height: 8px; border-radius: 4px; background: var(--flaeche-2); margin-top: 8px; overflow: hidden; }
.fortschritt div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gelb), var(--rot-2)); transition: width .4s; }

.summen {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0;
  background: var(--flaeche); border-radius: var(--radius); padding: 20px 22px;
}
.summen dt { color: var(--leise); }
.summen dd { margin: 0; text-align: end; }
.summen .gesamt { font-weight: 800; font-size: 1.15rem; color: var(--text); padding-top: 12px; border-top: 1px solid var(--linie); }
.summen dd.gesamt { color: var(--akzent-schrift); font-size: 1.5rem; }


.stand { padding-top: 12px; display: grid; gap: 16px; }
.stand .seitentitel { font-size: 1.8rem; margin-bottom: 6px; }
.stand-karte { background: radial-gradient(130% 100% at 100% 0%, color-mix(in srgb, var(--rot-1) 22%, var(--flaeche)) 0%, var(--flaeche) 60%); border-radius: 26px; padding: 22px; }
.zusage { font-size: 1.15rem; font-weight: 800; color: var(--akzent-schrift); margin: 0 0 6px; }
.stand-erklaerung { margin: 4px 0 8px; font-weight: 600; }
.stand .alter-hinweis { margin: 0; padding: 12px 16px; border-radius: var(--radius-klein); background: var(--flaeche); border: 1.5px solid var(--linie); }
.bestaetigung-karte { background: var(--flaeche); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 12px; justify-items: start; }
.bestaetigung-karte .ueberblick { width: 100%; }
.bestaetigung-karte p { margin: 0; font-size: .85rem; }
.belehrung-adresse { overflow-wrap: anywhere; }
.schritte { list-style: none; padding: 0; margin: 16px 0 0; }
.schritte li { padding-block: 9px; padding-inline: 36px 0; position: relative; color: var(--leise); font-weight: 600; }
.schritte li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: 11px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); background: var(--grund); z-index: 1;
}
.schritte li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 12px; top: 27px; bottom: -11px; width: 2px; background: var(--linie); }
.schritte li.erledigt { color: var(--text); }
.schritte li.erledigt::before { background: var(--gut); border-color: var(--gut); }
.schritte li.erledigt::after { background: var(--gut); }
.schritte li.jetzt { color: var(--text); font-weight: 800; }
.schritte li.jetzt::before { border-color: var(--gelb); background: var(--gelb); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gelb) 20%, transparent); animation: pulsieren 1.6s infinite; }
@keyframes pulsieren { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--gelb) 0%, transparent); } }

.hinweis-band {
  margin: 10px 0 0; padding: 14px 16px; border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--rot-2) 12%, transparent); color: color-mix(in srgb, var(--rot-2) 60%, var(--text)); font-weight: 600;
}
.text-seite { padding-top: 24px; padding-bottom: 48px; }
.text-seite h2 { font-size: 1.1rem; margin: 24px 0 8px; }
.text-seite p, .text-seite li { max-width: 65ch; color: var(--leise); }
.fuss { max-width: 820px; margin: 48px auto 0; padding: 0 16px; font-size: .82rem; color: var(--leise); }
.fuss a, .fuss .link-knopf { color: var(--leise); }
.ladenbote-siegel { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); text-decoration: none; }
.ladenbote-siegel b { font-weight: 800; letter-spacing: -.02em; color: var(--text); }


.laden-liste { display: grid; gap: 12px; padding-top: 12px; }
.laden-liste a { display: block; padding: 18px 20px; border-radius: var(--radius); background: var(--flaeche); color: var(--text); text-decoration: none; }
.laden-liste strong { display: block; font-size: 1.15rem; font-weight: 800; }
.laden-liste span { color: var(--leise); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


:root.ruhig *, :root.ruhig *::before, :root.ruhig *::after { animation: none !important; transition: none !important; }
:root.ruhig .deko i, :root.ruhig .deko-sonne::after { display: none; }
.ruhe-knopf { display: grid; place-items: center; padding: 0; color: var(--text); }
.ruhe-knopf .weiter, :root.ruhig .ruhe-knopf .pause { display: none; }
:root.ruhig .ruhe-knopf .weiter { display: block; }


.vorschau-band {
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; text-align: center;
  font-size: .8rem; font-weight: 700; background: var(--gelb); color: var(--gelb-text);
}


.install-band {
  max-width: 788px; margin: 4px auto 14px; padding: 14px 16px;
  display: grid; grid-template-columns: 44px 1fr; gap: 10px 12px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
}
@media (min-width: 821px) { .install-band { width: calc(100% - 32px); } }
@media (max-width: 820px) { .install-band { margin-inline-start: 16px; margin-inline-end: 16px; } }
.install-band img { border-radius: 10px; }
.install-text { display: grid; gap: 2px; min-width: 0; }
.install-text span { color: var(--leise); font-size: .9rem; }
.install-knoepfe { grid-column: 1 / -1; display: flex; gap: 10px; }
.install-knoepfe button { flex: 1; padding: 11px 14px; border-radius: 999px; font-weight: 700; }
.install-nie { grid-column: 1 / -1; justify-self: center; background: none; border: 0; color: var(--leise); font-size: .85rem; text-decoration: underline; padding: 2px; }


.angebote { display: grid; gap: 10px; margin: 0 0 22px; }
.angebot {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: start;
  padding: 12px 14px; border-radius: var(--radius-klein); color: var(--text); font: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gelb) 14%, var(--flaeche)), var(--flaeche));
  border: 1px solid color-mix(in srgb, var(--gelb) 45%, transparent);
}
button.angebot { cursor: pointer; }
.angebot-prozent { font-family: var(--schrift-titel), var(--schrift-text), sans-serif; font-weight: var(--titel-gewicht); font-size: 1.35rem; color: var(--akzent-schrift); min-width: 3.4em; }
.angebot-text { display: grid; gap: 2px; min-width: 0; }
.angebot-text small { color: var(--leise); }
.angebot-code { font-weight: 800; letter-spacing: .06em; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--gelb); color: var(--akzent-schrift); }
.gutschein { margin: 6px 0 14px; }
.gutschein label { display: block; margin-bottom: 6px; }
.gutschein-zeile { display: flex; gap: 8px; }
.gutschein-zeile input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .05em; }
.gutschein-zeile button { flex: none; padding: 0 18px; border-radius: 999px; font-weight: 700; }
.treue-karte {
  margin: 16px 0; padding: 16px 18px; border-radius: var(--radius-klein); display: grid; gap: 8px; justify-items: start;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gelb) 14%, var(--flaeche)), var(--flaeche));
  border: 1px solid color-mix(in srgb, var(--gelb) 45%, transparent);
}
.treue-karte p { margin: 0; }
.treue-karte small { color: var(--leise); }
.treue-code { font-size: 1.3rem; background: none; cursor: pointer; }


.meine-link { display: block; margin: -8px 0 18px; color: var(--leise); text-align: end; font-weight: 600; text-decoration: none; }
.meine { display: grid; gap: 12px; }
.meine > a { color: var(--leise); }
.meine-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.meine-liste li { display: grid; gap: 8px; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.meine-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--text); text-decoration: none; }
.meine-kopf .preis { margin-inline-start: auto; font-weight: 700; color: var(--akzent-schrift); }
.meine-liste small { color: var(--leise); }
.meine-liste button { justify-self: start; padding: 9px 16px; border-radius: 999px; font-weight: 700; }
.meine-stand { font-size: .8rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--linie); color: var(--leise); }
.meine-stand.erledigt { color: var(--gut); border-color: currentColor; }
.meine-stand.abgelehnt, .meine-stand.storniert { color: var(--fehler); border-color: currentColor; }


.newsletter { display: grid; gap: 10px; margin: 0 0 14px; }
.newsletter .haken { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--leise); }
.newsletter .haken input { margin-top: 3px; flex: none; width: 20px; height: 20px; }
.seite-schlicht { max-width: 560px; margin: 0 auto; padding: 48px 20px; display: grid; gap: 14px; }
.seite-schlicht form button { width: 100%; padding: 14px; border-radius: 999px; font-weight: 700; border: 0; }


.segment [data-feld="wunsch"] { margin-top: 10px; }
.segment select {
  width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); font: inherit;
}
.segment input:disabled + span { opacity: .4; cursor: default; }
.trinkgeld { margin-top: 12px; }
.trinkgeld p { margin: 0 0 8px; color: var(--leise); font-size: .92rem; }
.trinkgeld-knoepfe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: var(--flaeche); border-radius: 999px; padding: 5px; }
.trinkgeld-knoepfe label { margin: 0; position: relative; }
.trinkgeld-knoepfe input { position: absolute; opacity: 0; }
.trinkgeld-knoepfe span { display: block; text-align: center; padding: 10px 2px; border-radius: 999px; font-weight: 700; cursor: pointer; }
.trinkgeld-knoepfe input:checked + span { background: var(--gelb-weich); color: var(--gelb-text); }
.trinkgeld-knoepfe input:focus-visible + span { outline: 2px solid var(--gelb); }



.auswahl-felder { min-width: 0; }
.blatt .menue-wahl { border-top: 1px solid var(--linie); padding-top: 18px; }
.menue-wahl select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text); font: inherit; }
.auswahl-hinweis { color: var(--leise); font-size: .9rem; margin-top: 12px; overflow-wrap: anywhere; }
.korb-liste small { white-space: pre-line; overflow-wrap: anywhere; }


.sprachwahl { margin-inline-start: auto; max-width: 9rem; min-width: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; font-size: .85rem; }
.kopf .marke-name { min-width: 0; flex-shrink: 1; }
.deutscher-name { display: block; font-size: .78rem; font-weight: 500; color: var(--leise); line-height: 1.4; overflow-wrap: anywhere; text-align: start; }
.held > .deutscher-name { position: relative; z-index: 1; }
[dir="rtl"] .marke-name img.logo { object-position: right center; }
[dir="rtl"] .groesse em { left: auto; right: 50%; transform: translateX(50%); }
[dir="rtl"] .legende { columns: 1; }
:lang(ar) { font-family: Tahoma, Arial, sans-serif; letter-spacing: normal; }
:lang(ar) :is(h1,h2,h3,legend,.oberzeile,.plakette) { letter-spacing: normal; line-height: 1.5; }
input[type="tel"], input[inputmode="numeric"] { direction: ltr; text-align: start; }
.segment span, .blatt-fuss .knopf-rot { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 400px) { .kopf { gap: 8px; } .sprachwahl { max-width: 7rem; } .marke-name { font-size: 1rem; } .blatt-fuss { gap: 6px; padding-inline: 8px; } }

:root { --thema-1: var(--gelb); --thema-2: var(--gelb-weich); --thema-text: #150f05; }
[data-thema="fruehling"]    { --thema-1: #8be26a; --thema-2: #ffc6d6; }
[data-thema="sommer"]       { --thema-1: #ffd23f; --thema-2: #4fd6e0; }
[data-thema="herbst"]       { --thema-1: #ff8a3d; --thema-2: #ffc06a; }
[data-thema="winter"]       { --thema-1: #9fdcff; --thema-2: #f1fbff; }
[data-thema="valentinstag"] { --thema-1: #ff4f7b; --thema-2: #ffb1c4; }
[data-thema="karneval"]     { --thema-1: #ff4d6d; --thema-2: #ffd23f; }
[data-thema="ostern"]       { --thema-1: #c4ec8f; --thema-2: #ffd9ef; }
[data-thema="muttertag"]    { --thema-1: #ff8fb1; --thema-2: #ffe0ea; }
[data-thema="vatertag"]     { --thema-1: #5cc8ff; --thema-2: #ffd23f; }
[data-thema="fussball"]     { --thema-1: #3ddc84; --thema-2: #f4f4f4; }
[data-thema="halloween"]    { --thema-1: #ff7a1a; --thema-2: #c084fc; }
[data-thema="weihnachten"]  { --thema-1: #ff5a4e; --thema-2: #ffd66b; }
[data-thema="silvester"]    { --thema-1: #ffd700; --thema-2: #fff1a8; }
[data-thema="ramadan"]      { --thema-1: #f4c95d; --thema-2: #b9b4ff; }
[data-thema="pizza"]        { --thema-1: #ff6a3d; --thema-2: #ffc15e; }
[data-thema="schnitzel"]    { --thema-1: #f6b93b; --thema-2: #c6e48b; }
[data-thema="pasta"]        { --thema-1: #ffcf4d; --thema-2: #ff7b72; }
[data-thema="burger"]       { --thema-1: #ff7b22; --thema-2: #ffd23f; }
[data-thema="doener"]       { --thema-1: #ff6b35; --thema-2: #b5e48c; }
[data-thema="indisch"]      { --thema-1: #ffa21f; --thema-2: #ff6fae; }
[data-thema="scharf"]       { --thema-1: #ff3b30; --thema-2: #ffb340; }
[data-thema="veggie"]       { --thema-1: #7ddc5c; --thema-2: #ffe066; }







:root[data-thema] body {
  background-image: radial-gradient(130% 55% at 50% -12%, color-mix(in srgb, var(--thema-1) 15%, transparent), transparent 70%);
  background-repeat: no-repeat; background-attachment: fixed;
}
:root.hell[data-thema] body {
  background-image: radial-gradient(130% 55% at 50% -12%, color-mix(in srgb, var(--thema-1) 8%, transparent), transparent 70%);
}



:root[data-girlande] { scroll-padding-top: 152px; }
:root[data-girlande] .kopf::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none;
  background: var(--girlande) repeat-x 0 0 / 94px 22px,
              linear-gradient(color-mix(in srgb, var(--grund) 88%, transparent) 30%, transparent);
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / .3));
}
:root[data-girlande] .navi { top: calc(84px + env(safe-area-inset-top)); }
:root[data-girlande="halloween"] { --girlande: url("/app/deko/girlande-halloween.svg"); }
:root[data-girlande="lichter"]   { --girlande: url("/app/deko/girlande-lichter.svg"); }
:root[data-girlande="wimpel"]    { --girlande: url("/app/deko/girlande-wimpel.svg"); }
:root[data-girlande="konfetti"]  { --girlande: url("/app/deko/girlande-konfetti.svg"); }
:root[data-girlande="herzen"]    { --girlande: url("/app/deko/girlande-herzen.svg"); }
:root[data-girlande="eier"]      { --girlande: url("/app/deko/girlande-eier.svg"); }
:root[data-girlande="blueten"]   { --girlande: url("/app/deko/girlande-blueten.svg"); }
:root[data-girlande="blaetter"]  { --girlande: url("/app/deko/girlande-blaetter.svg"); }
:root[data-girlande="schnee"]    { --girlande: url("/app/deko/girlande-schnee.svg"); }
:root[data-girlande="sonne"]     { --girlande: url("/app/deko/girlande-sonne.svg"); }



.deko.saison-deko { position: fixed; z-index: -1; opacity: .5; }

.saison-band {
  position: relative; overflow: hidden; isolation: isolate; margin-top: 16px; border-radius: 24px;
  min-height: 150px; padding: 22px; display: flex; align-items: flex-end; background: #0b0b0b; color: #fff;
  box-shadow: var(--schatten), 0 0 0 1px color-mix(in srgb, var(--thema-1) 30%, transparent);
}
.saison-band-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.saison-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 90% at 88% 40%, color-mix(in srgb, var(--thema-1) 24%, transparent), transparent 70%),
    linear-gradient(90deg, rgb(0 0 0 / .84) 0%, rgb(0 0 0 / .5) 58%, rgb(0 0 0 / .12) 100%);
}
.saison-band .deko { z-index: -1; }
.saison-band-text { position: relative; max-width: 36ch; }
.saison-band-text h2 {
  margin: 10px 0 4px; font-family: var(--schrift-titel), var(--schrift-text); font-weight: var(--titel-gewicht);
  font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.05; text-shadow: 0 2px 18px rgb(0 0 0 / .6);
}
.saison-band-text p { margin: 0; color: rgb(255 255 255 / .82); font-size: .92rem; }


.saison-ansicht {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 30;

  width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; text-align: center;
  background: color-mix(in srgb, var(--thema-1) 88%, #000); color: var(--thema-text); font-weight: 800; font-size: .88rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / .4);
}

.plakette.thema {
  background: linear-gradient(135deg, var(--thema-1), color-mix(in srgb, var(--thema-1) 55%, var(--thema-2)));
  color: var(--thema-text);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--thema-1) 35%, transparent);
}

.buehne {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; min-height: 560px; margin-top: 6px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 36px 22px 22px; background: #0b0b0b; color: #fff;
  box-shadow: var(--schatten), 0 0 0 1px color-mix(in srgb, var(--thema-1) 18%, transparent);
}
.buehne .kulisse, .buehne .kulisse img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -4; }

.buehne::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(46% 26% at 50% 28%, color-mix(in srgb, var(--thema-1) 26%, transparent), transparent 72%),
    linear-gradient(180deg, rgb(0 0 0 / .05) 0%, transparent 38%, rgb(0 0 0 / .62) 60%, rgb(0 0 0 / .92) 100%);
}
.buehne .teller {
  position: relative; z-index: -1; align-self: center; flex-shrink: 0;
  width: min(88%, 380px); aspect-ratio: 1; margin-bottom: -16%;
  border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer;
  animation: schweben 7s ease-in-out infinite;
}
.buehne .teller img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  transition: transform .6s ease-out;
}
.buehne .teller:hover img { transform: scale(1.04); }
.buehne .teller::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 2%; height: 14%; z-index: -1;
  background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent);
}
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.buehne.ohne-teller { min-height: 380px; }

.buehne-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.buehne-text .plakette { margin-bottom: 12px; }
.buehne-text .spruch { margin: 0 0 2px; font-family: var(--schrift-hand), var(--schrift-text); font-size: 1.25rem; color: rgb(255 255 255 / .85); }
.buehne-text h2 {
  margin: 0; font-family: var(--schrift-titel), var(--schrift-text); font-weight: var(--titel-gewicht);
  font-size: clamp(2.1rem, 10vw, 3.4rem); line-height: 1; text-wrap: balance;
  text-shadow: 0 2px 24px rgb(0 0 0 / .6);
}
.buehne-text .unterzeile { margin: 10px 0 0; color: rgb(255 255 255 / .84); max-width: 42ch; }
.buehne-text .teller-name { margin: 8px 0 0; font-weight: 700; color: var(--thema-2); text-shadow: 0 1px 8px rgb(0 0 0 / .8); }
.buehne-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.buehne-bis {
  font-size: .85rem; font-weight: 700; color: var(--thema-2);
  padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .45); backdrop-filter: blur(6px);
}

@media (min-width: 700px) {
  .buehne { min-height: 460px; padding: 34px; }
  .buehne .teller { position: absolute; margin: 0; right: 4%; top: 50%; translate: 0 -50%; width: min(46%, 400px); }
  .buehne::before {
    background:
      radial-gradient(34% 46% at 74% 50%, color-mix(in srgb, var(--thema-1) 24%, transparent), transparent 72%),
      linear-gradient(90deg, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .55) 40%, transparent 62%);
  }
  .buehne-text { max-width: 52%; }
}


.deko { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.deko i {
  position: absolute; top: -12%; width: 22px; height: 22px; opacity: .75;
  background: center / contain no-repeat; animation: fallen 14s linear infinite;
}
.deko-blaetter i  { background-image: url("/app/deko/blatt.svg"); }
.deko-schnee i    { background-image: url("/app/deko/schnee.svg"); width: 14px; height: 14px; opacity: .65; }
.deko-blueten i   { background-image: url("/app/deko/bluete.svg"); width: 16px; height: 16px; }
.deko-kraeuter i  { background-image: url("/app/deko/kraut.svg"); width: 18px; height: 18px; }
.deko-herzen i    { background-image: url("/app/deko/herz.svg"); top: auto; bottom: -10%; width: 16px; height: 16px; animation-name: steigen; }
.deko-sterne i    { background-image: url("/app/deko/stern.svg"); width: 14px; height: 14px; animation: funkeln 4s ease-in-out infinite; }
.deko-funken i    {
  top: auto; bottom: -6%; width: 6px; height: 6px; border-radius: 50%; opacity: .9;
  background: radial-gradient(circle, #fff3c4 0%, var(--thema-1) 45%, transparent 72%);
  animation-name: steigen; animation-duration: 7s;
}
.deko-fledermaeuse i {
  background-image: url("/app/deko/fledermaus.svg"); top: auto; bottom: -8%; width: 28px; height: 14px; opacity: .8;
  animation-name: flattern;
}
.deko-konfetti i { width: 7px; height: 11px; border-radius: 2px; opacity: .85; background: var(--thema-1); }
.deko-konfetti i:nth-child(3n)   { background: var(--thema-2); }
.deko-konfetti i:nth-child(4n+1) { background: #4fa3ff; }
.deko-konfetti i:nth-child(5n+2) { background: #3ddc84; }

.deko-gewuerze i { width: 6px; height: 6px; border-radius: 50%; opacity: .8; background: var(--thema-1); }
.deko-gewuerze i:nth-child(3n)   { background: var(--thema-2); }
.deko-gewuerze i:nth-child(4n+1) { background: #ffd23f; width: 4px; height: 4px; }
.deko-sonne::after {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg at 85% 0%, transparent 0 20deg, rgb(255 230 150 / .10) 24deg, transparent 30deg 48deg, rgb(255 230 150 / .08) 52deg, transparent 58deg);
  animation: strahlen 18s ease-in-out infinite alternate;
}
.deko-sonne i, .deko-keine i { display: none; }
.deko i:nth-child(1)  { left: 4%;  animation-delay: -1s;  animation-duration: 13s; scale: .9; }
.deko i:nth-child(2)  { left: 11%; animation-delay: -7s;  animation-duration: 16s; scale: .7; }
.deko i:nth-child(3)  { left: 19%; animation-delay: -3s;  animation-duration: 12s; scale: 1.1; }
.deko i:nth-child(4)  { left: 26%; animation-delay: -11s; animation-duration: 17s; scale: .8; }
.deko i:nth-child(5)  { left: 34%; animation-delay: -5s;  animation-duration: 14s; scale: .6; }
.deko i:nth-child(6)  { left: 43%; animation-delay: -9s;  animation-duration: 15s; scale: .9; }
.deko i:nth-child(7)  { left: 51%; animation-delay: -2s;  animation-duration: 18s; scale: .7; }
.deko i:nth-child(8)  { left: 59%; animation-delay: -13s; animation-duration: 13s; scale: 1; }
.deko i:nth-child(9)  { left: 66%; animation-delay: -6s;  animation-duration: 16s; scale: .8; }
.deko i:nth-child(10) { left: 74%; animation-delay: -4s;  animation-duration: 12s; scale: 1.1; }
.deko i:nth-child(11) { left: 81%; animation-delay: -10s; animation-duration: 15s; scale: .7; }
.deko i:nth-child(12) { left: 88%; animation-delay: -8s;  animation-duration: 17s; scale: .9; }
.deko i:nth-child(13) { left: 94%; animation-delay: -12s; animation-duration: 14s; scale: .6; }
.deko i:nth-child(14) { left: 98%; animation-delay: -14s; animation-duration: 19s; scale: .8; }
.deko-sterne i:nth-child(odd)  { top: 12%; }
.deko-sterne i:nth-child(even) { top: 30%; }
.deko-sterne i:nth-child(3n)   { top: 52%; }
@keyframes fallen {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(18px, 360px) rotate(160deg); }
  100% { transform: translate(-10px, 760px) rotate(340deg); }
}
@keyframes steigen {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translate(14px, -680px); opacity: 0; }
}
@keyframes flattern {
  0%   { transform: translate(0, 0) scale(1, 1); opacity: 0; }
  10%  { opacity: .8; }
  25%  { transform: translate(34px, -170px) scale(1, .55); }
  50%  { transform: translate(-22px, -340px) scale(1, 1); }
  75%  { transform: translate(30px, -510px) scale(1, .55); }
  100% { transform: translate(-6px, -700px) scale(1, 1); opacity: 0; }
}
@keyframes funkeln { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .95; transform: scale(1.1); } }
@keyframes strahlen { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }

.rampenlicht .abschnitt-kopf p { color: var(--thema-2); font-weight: 700; }
.rampenlicht .kachel-hoch { box-shadow: 0 0 0 1px color-mix(in srgb, var(--thema-1) 35%, transparent), var(--schatten); }
.kategorien a[data-ziel="rampenlicht"]:not(.aktiv) { color: var(--thema-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--thema-1) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .buehne .teller { animation: none; }
  .deko i, .deko-sonne::after { animation: none; display: none; }
}

.vorab { max-width: 820px; margin: 0 auto; padding: 24px 16px; color: var(--leise); font-size: .9rem; }
.vorab h1 { font-size: 1.4rem; color: var(--text); margin: 0 0 8px; }
.vorab h2 { font-size: 1.05rem; color: var(--text); margin: 24px 0 8px; }
.vorab h3 { font-size: .95rem; color: var(--text); margin: 16px 0 6px; }
.vorab ul { margin: 0; padding-left: 18px; }
.google-bewerten { margin-top: 16px; }

.widerruf-hinweis { margin: 14px 0 10px; font-size: .84rem; line-height: 1.45; color: var(--leise); }
.widerruf-hinweis a { color: var(--text); font-weight: 600; }
.vertrag-widerrufen { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1.5px solid currentColor; color: var(--text); font-weight: 700; text-decoration: none; }
.vertrag-widerrufen.gross { margin-top: 18px; padding: 12px 18px; }
.widerruf-links { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.stand-widerruf { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.rechtsseite { padding: 24px 16px 48px; }
.rechtstext { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; padding-bottom: 24px; }
.rechtsseite a { color: inherit; }
.rechtstext > a:first-child { color: var(--leise); }
.rechtstext h2 { margin: 18px 0 0; font-size: 1.15rem; }
.rechtstext h3 { margin: 8px 0 0; font-size: 1rem; }
.rechtstext p { margin: 0; line-height: 1.55; }
.rechtstext .verkaeufer { font-weight: 600; }
.musterformular { display: grid; gap: 8px; padding: 14px 16px; border: 1px dashed var(--linie); border-radius: var(--radius-klein); }
.bestaetigung { white-space: pre-wrap; font: inherit; font-size: .9rem; padding: 14px 16px; background: var(--flaeche); border-radius: var(--radius-klein); }
.widerruf-form textarea, .widerruf-form input { width: 100%; }
.widerruf-form .zeile { display: flex; gap: 12px; flex-wrap: wrap; }
.widerruf-form .zeile > label { flex: 1 1 160px; }

@media (max-height: 520px) {
  html, :root[data-girlande] { scroll-padding-top: 0; }
  .kopf, .navi { position: static; }
  :root[data-girlande] .kopf::after { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .korb-leiste { padding-block: 4px calc(4px + env(safe-area-inset-bottom)); background: var(--grund); }
  .korb-leiste .knopf-rot { padding-block: 6px; }
  .korb-symbol { width: 28px; height: 28px; }
  .meldung { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .blatt .titelbild:not(.ohne-bild) { aspect-ratio: 16 / 9; }
  .blatt-fuss { padding-block: 6px calc(6px + env(safe-area-inset-bottom)); }
  .blatt-fuss .knopf-rot { padding-block: 10px; }
}

@media (forced-colors: active) {
  .segment input:checked + span, .trinkgeld-knoepfe input:checked + span,
  .groesse:has(input:checked), .extra:has(input:checked) .haken { outline: 3px solid Highlight; forced-color-adjust: none; }
  .ki-marke, .plakette { border: 1px solid CanvasText; }
}












:root[data-stil="papier"] {
  color-scheme: light;
  --grund: #f4ede2;
  --flaeche: #fffaf2;
  --flaeche-2: #ebe2d3;
  --linie: #dccfbc;
  --text: #1f1a16;
  --leise: #66594c;
  --gelb: #1f1a16;
  --gelb-weich: #3a322b;
  --gelb-text: #fffaf2;
  --rot-1: #b8321f;
  --rot-2: #9a2817;
  --gut: #2f6b3a;
  --gut-text: #fff;
  --akzent-schrift: #a3301f;
  --fehler: #a3301f;
  --marke: #f4ede2;
  --radius: 10px;
  --radius-klein: 8px;
  --schatten: none;
}
:root[data-stil="papier"]:not(.hell) {
  color-scheme: dark;
  --grund: #15110e;
  --flaeche: #1e1915;
  --flaeche-2: #28211c;
  --linie: #362d26;
  --text: #f4ede2;
  --leise: #b6a894;
  --gelb: #f4ede2;
  --gelb-weich: #fffaf2;
  --gelb-text: #15110e;
  --akzent-schrift: #f19a86;
  --fehler: #f19a86;
  --gut: #3f8a4c;
}
:root[data-stil="papier"] body { font-size: 16px; }
:root[data-stil="papier"] :is(h1, h2, h3) { letter-spacing: -.01em; }
:root[data-stil="papier"] .kopf { background: color-mix(in srgb, #15110e 94%, transparent); color: #f4ede2; }
:root[data-stil="papier"] .kopf .rund { background: #241d18; border-color: #3a3029; color: #f4ede2; }
:root[data-stil="papier"] .spruch { color: var(--akzent-schrift); font-style: italic; font-size: 1.25rem; }


:root[data-stil="papier"] .held {
  background: none; color: var(--text); box-shadow: none; border-radius: 0;
  min-height: 0; padding: 0; margin-top: 10px; justify-content: flex-start;
}
:root[data-stil="papier"] .held::before { display: none; }
:root[data-stil="papier"] .held img {
  position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 4 / 3;
  border-radius: var(--radius); transform: none; margin-bottom: 18px;
}
:root[data-stil="papier"] .held:hover img { transform: none; }
:root[data-stil="papier"] .held .plakette { position: absolute; top: 14px; left: 14px; margin: 0; }
:root[data-stil="papier"] .held h2 { text-shadow: none; font-size: clamp(2.3rem, 10vw, 3.4rem); line-height: 1; }
:root[data-stil="papier"] .held p:not(.spruch) { color: var(--leise); }
:root[data-stil="papier"] .held .deutscher-name, :root[data-stil="papier"] .held .hell-auf-bild { color: var(--leise); text-shadow: none; }
:root[data-stil="papier"] .held.ohne-bild { padding: 28px 22px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }


:root[data-stil="papier"] :is(.knopf-gelb, .knopf-rot, .knopf-hell) { border-radius: var(--radius); box-shadow: none; letter-spacing: 0; }
:root[data-stil="papier"] .knopf-gelb { background: var(--gelb); color: var(--gelb-text); }
:root[data-stil="papier"] .knopf-rot { background: var(--rot-1); }
:root[data-stil="papier"] .plakette { border-radius: 4px; letter-spacing: .1em; }
:root[data-stil="papier"] .plakette:not(.rot, .gruen, .dunkel, .alter) { background: var(--flaeche); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); }


:root[data-stil="papier"] .navi { background: var(--grund); padding-bottom: 0; }
:root[data-stil="papier"] .suche { border-radius: var(--radius); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
:root[data-stil="papier"] .kategorien { gap: 18px; border-bottom: 1px solid var(--linie); }
:root[data-stil="papier"] .kategorien a {
  background: none; border: 0; border-radius: 0; padding: 12px 0 10px; color: var(--leise);
  box-shadow: none; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700;
}
:root[data-stil="papier"] .kategorien a.aktiv { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--rot-1); }
:root[data-stil="papier"] .fakt { border-radius: var(--radius-klein); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }


:root[data-stil="papier"] .abschnitt { margin-top: 38px; }
:root[data-stil="papier"] .abschnitt-kopf { border-bottom: 2px solid var(--text); padding-bottom: 8px; margin-bottom: 4px; }
:root[data-stil="papier"] .abschnitt-kopf h2 { font-size: 2rem; text-transform: none; }


:root[data-stil="papier"] .gerichte { gap: 0; }
:root[data-stil="papier"] .gericht,
:root[data-stil="papier"].hell .gericht {
  flex-direction: row; align-items: flex-start; gap: 16px;
  background: none; border-radius: 0; box-shadow: none; padding: 18px 0;
  border-bottom: 1px solid var(--linie);
}
:root[data-stil="papier"] .gericht:active { transform: none; background: var(--flaeche); }
:root[data-stil="papier"] .gericht .foto { order: 2; flex: none; width: 108px; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
:root[data-stil="papier"] .gericht .foto .plaketten { top: auto; bottom: 6px; left: 6px; }
:root[data-stil="papier"] .gericht .foto .plakette { font-size: .58rem; padding: 3px 6px; }
:root[data-stil="papier"] .gericht .foto .ki-marke { font-size: .58rem; padding: 2px 5px; inset-block-end: auto; inset-block-start: 6px; inset-inline-end: 6px; }
:root[data-stil="papier"] .gericht .koerper { padding: 0; flex: 1; min-width: 0; }
:root[data-stil="papier"] .gericht h3 { font-size: 1.22rem; text-transform: none; }
:root[data-stil="papier"] .gericht .nr { color: var(--akzent-schrift); font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
:root[data-stil="papier"] .gericht p { font-size: .9rem; }
:root[data-stil="papier"] .gericht .fuss-zeile { padding: 0; margin-top: 10px; }
:root[data-stil="papier"] .gericht .preis { color: var(--text); font-size: 1.08rem; }
:root[data-stil="papier"] .plus {
  width: 42px; height: 42px; background: none; color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--text); font-weight: 600;
}
:root[data-stil="papier"] .plus:hover, :root[data-stil="papier"] .gericht:hover .plus { background: var(--text); color: var(--grund); }
:root[data-stil="papier"] .kachel-hoch { border-radius: var(--radius); }
:root[data-stil="papier"] .kachel-hoch .preis { color: #fff; }
:root[data-stil="papier"] :is(.feldgruppe, .summen) { box-shadow: inset 0 0 0 1px var(--linie); }


















:root[data-stil="sole"] {
  color-scheme: light;
  --grund: #efe7da;
  --flaeche: #faf6ef;
  --flaeche-2: #e6dccb;
  --linie: #d9cdb9;
  --linie-fest: #8a7a66;
  --text: #2b2118;
  --leise: #6b5a48;
  --gelb: #3f5a2c;
  --gelb-weich: #3f5a2c;
  --gelb-text: #ffffff;
  --rot-1: #a8432a;
  --rot-2: #8f3a20;
  --gut: #2f6b3a;
  --gut-text: #fff;
  --akzent-schrift: #9c3b22;
  --fehler: #9c3b22;
  --marke: #2b2118;
  --radius: 18px;
  --radius-klein: 10px;
  --bogen: 999px 999px var(--radius-klein) var(--radius-klein);
  --schatten: 0 1px 0 rgb(43 33 24 / .06), 0 18px 40px -24px rgb(90 60 30 / .35);
}
:root[data-stil="sole"]:not(.hell) {
  color-scheme: dark;
  --grund: #141712;
  --flaeche: #1c201a;
  --flaeche-2: #262b23;
  --linie: #343a30;
  --linie-fest: #7d8473;
  --text: #efe7da;
  --leise: #b5ad9c;
  --gelb: #a9c08f;
  --gelb-weich: #a9c08f;
  --gelb-text: #141712;
  --akzent-schrift: #e8a07f;
  --fehler: #e8a07f;
  --gut: #3f7a45;
  --marke: #efe7da;
  --schatten: 0 18px 40px -24px rgb(0 0 0 / .7);
}


:root[data-stil="sole"] body { font-size: 16.5px; line-height: 1.5; }
:root[data-stil="sole"].hell body {
  background-attachment: fixed;
  background-image:
    radial-gradient(38% 26% at 12% 18%, rgb(255 255 255 / .45), transparent 70%),
    radial-gradient(30% 22% at 86% 34%, rgb(176 150 115 / .10), transparent 70%),
    radial-gradient(44% 30% at 70% 82%, rgb(255 255 255 / .38), transparent 70%),
    radial-gradient(26% 18% at 24% 70%, rgb(176 150 115 / .09), transparent 70%);
}
:root[data-stil="sole"] :is(h1, h2, h3, .marke-name) { font-family: var(--schrift-titel), Georgia, serif; font-weight: 560; letter-spacing: -.015em; text-transform: none; }
:root[data-stil="sole"] :is(.kopf, main, .fuss) { max-width: 1120px; }




:root[data-stil="sole"] .kopf,
:root[data-stil="sole"].hell .kopf {
  --marke: var(--text);
  position: relative; flex-wrap: wrap; row-gap: 6px; justify-content: flex-end;
  background: none; color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: calc(10px + env(safe-area-inset-top)) 16px 16px;
}
:root[data-stil="sole"] .kopf::after {
  content: ""; position: absolute; inset-inline: 16px; bottom: 0; height: 4px;
  border-block: 1px solid var(--linie-fest);
}
:root[data-stil="sole"] .marke-name {
  order: 9; flex: 1 0 100%; justify-content: center; text-align: center; color: var(--marke);
  font-size: clamp(1.85rem, 8.4vw, 2.5rem); font-weight: 500; letter-spacing: -.02em; padding-top: 2px;
}
:root[data-stil="sole"] .marke-name > img { display: none; }
:root[data-stil="sole"] .marke-name.mit-logo > span { display: block; }
:root[data-stil="sole"] .marke-name span { display: block; line-height: 1.05; text-wrap: balance; }
:root[data-stil="sole"] .kopf :is(.rund, .sprachwahl),
:root[data-stil="sole"].hell .kopf .rund {
  background: transparent; color: var(--text); border: 1px solid var(--linie-fest);
}
:root[data-stil="sole"] .kopf .rund { width: 38px; height: 38px; }
:root[data-stil="sole"] .kopf .sprachwahl {
  margin-inline: 0 auto; -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--linie-fest); padding: 8px 20px 6px 2px; height: auto; width: auto;
  font: 700 .74rem/1.2 var(--schrift-text), sans-serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;

  background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 6px center / 5px 5px no-repeat,
              linear-gradient(135deg, currentColor 50%, transparent 50%) right 1px center / 5px 5px no-repeat;
}
:root[data-stil="sole"] .kopf .sprachwahl:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; }
:root[data-stil="sole"] .kopf .sprachwahl option { background: var(--flaeche); color: var(--text); text-transform: none; letter-spacing: 0; }
@media (min-width: 900px) {
  :root[data-stil="sole"] .kopf { flex-wrap: nowrap; padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: 20px; }
  :root[data-stil="sole"] .marke-name { order: 0; flex: 1 1 auto; justify-content: flex-start; text-align: start; font-size: 2.3rem; }
  :root[data-stil="sole"] .kopf .sprachwahl { margin-inline-end: 0; }
}
:root[data-stil="sole"] .vorschau-band { background: var(--text); color: var(--grund); font-weight: 600; letter-spacing: .01em; }




:root[data-stil="sole"] .held {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  background: none; color: var(--text); box-shadow: none; border-radius: 0; overflow: visible;
  min-height: 0; padding: 0; margin-top: 22px;
}
:root[data-stil="sole"] .held::before { display: none; }
:root[data-stil="sole"] .held > * { grid-column: 1; }
:root[data-stil="sole"] .held img {
  position: relative; inset: auto; z-index: 0; grid-row: 1; width: 100%; height: auto; aspect-ratio: 1;
  max-width: 560px; justify-self: center; border-radius: 50% 50% var(--radius) var(--radius) / 50% 50% var(--radius) var(--radius);
  transform: none; transition: none; box-shadow: var(--schatten);
}
:root[data-stil="sole"] .held:hover img { transform: none; }
:root[data-stil="sole"] .held > .ki-marke { position: relative; grid-row: 1; inset: auto; justify-self: end; align-self: end; margin: 0 14px 14px 0; }
:root[data-stil="sole"] .held .plakette,
:root[data-stil="sole"] .held .plakette:not(.rot, .gruen, .dunkel, .alter) {
  grid-row: 1; justify-self: start; align-self: end; z-index: 1; position: relative;
  width: 96px; height: 96px; margin: 0 0 22px 2px; padding: 10px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; white-space: normal;
  background: var(--rot-1); color: #fff; box-shadow: 0 0 0 4px var(--grund);
  font: 700 .64rem/1.25 var(--schrift-text), sans-serif; letter-spacing: .12em; transform: rotate(-9deg);
}
:root[data-stil="sole"] .held .spruch {
  margin: 26px 0 8px; color: var(--akzent-schrift); font: 700 .78rem/1.3 var(--schrift-text), sans-serif;
  letter-spacing: .24em; text-transform: uppercase;
}
:root[data-stil="sole"] .held img + .ki-marke + .plakette + h2,
:root[data-stil="sole"] .held img + .ki-marke + .plakette + .spruch { margin-top: 26px; }
:root[data-stil="sole"] .held h2 { text-shadow: none; font-size: clamp(2.8rem, 13vw, 4.6rem); font-weight: 480; line-height: .95; letter-spacing: -.03em; }
:root[data-stil="sole"] .held p:not(.spruch) { color: var(--leise); font-size: 1.05rem; margin-top: 12px; }
:root[data-stil="sole"] .held .deutscher-name, :root[data-stil="sole"] .held .hell-auf-bild { color: var(--leise); text-shadow: none; }
:root[data-stil="sole"] .held .knopf-gelb { justify-self: start; margin-top: 22px; }
:root[data-stil="sole"] .held.ohne-bild { padding: 34px 24px; background: var(--flaeche); border-radius: var(--bogen); text-align: center; }
:root[data-stil="sole"] .held.ohne-bild .plakette { position: static; transform: none; width: auto; height: auto; border-radius: 999px; justify-self: center; margin: 0 0 14px; }
@media (min-width: 900px) {
  :root[data-stil="sole"] .held {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-content: center;
    grid-template-rows: 1fr repeat(6, auto) 1fr; min-height: 560px; margin-top: 34px;
  }
  :root[data-stil="sole"] .held::before { display: block; content: ""; grid-column: 1; grid-row: 1; position: static; background: none; }
  :root[data-stil="sole"] .held > * { grid-column: 1; }
  :root[data-stil="sole"] .held img { grid-column: 2; grid-row: 1 / -1; align-self: end; max-width: 540px; }
  :root[data-stil="sole"] .held > .ki-marke { grid-column: 2; grid-row: 1 / -1; }
  :root[data-stil="sole"] .held .plakette,
  :root[data-stil="sole"] .held .plakette:not(.rot, .gruen, .dunkel, .alter) { grid-column: 2; grid-row: 1 / -1; align-self: start; margin: 70px 0 0 -18px; width: 112px; height: 112px; font-size: .7rem; }
  :root[data-stil="sole"] .held .spruch { margin-top: 0; }
  :root[data-stil="sole"] .held h2 { font-size: clamp(4rem, 6vw, 5.6rem); }
}


:root[data-stil="sole"] :is(.knopf-gelb, .knopf-rot, .knopf-hell) {
  border-radius: var(--radius-klein); box-shadow: none; letter-spacing: .1em; text-transform: uppercase;
  font-size: .86rem; font-weight: 700; padding: 18px 28px;
}


:root[data-stil="sole"] .ki-marke {
  background: rgb(250 246 239 / .92); color: #2b2118; border-radius: 999px; padding: 3px 8px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 1px 2px rgb(43 33 24 / .2);
}
:root[data-stil="sole"] .knopf-gelb,
:root[data-stil="sole"].hell .knopf-gelb { background: var(--gelb); color: var(--gelb-text); }
:root[data-stil="sole"] .knopf-rot { background: var(--rot-1); }
:root[data-stil="sole"] .knopf-hell { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-fest); }
:root[data-stil="sole"] .plakette { border-radius: 4px; letter-spacing: .12em; font-weight: 700; }
:root[data-stil="sole"] .plakette:not(.rot, .gruen, .dunkel, .alter) { background: var(--flaeche); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-fest); }


:root[data-stil="sole"] .fakten { gap: 0; margin-top: 30px; padding-block: 12px; border-block: 1px solid var(--linie); }
:root[data-stil="sole"] .fakt { background: none; border-radius: 0; padding: 2px 16px; box-shadow: none; border: 0; border-inline-start: 1px solid var(--linie); }
:root[data-stil="sole"] .fakt:first-child { border-inline-start: 0; padding-inline-start: 0; }
:root[data-stil="sole"] .bewertungs-link { text-decoration: underline; text-decoration-color: var(--linie-fest); text-underline-offset: 3px; }



:root[data-stil="sole"] { scroll-padding-top: 120px; }
:root[data-stil="sole"] .navi {
  top: env(safe-area-inset-top); margin-top: 26px; padding: 10px 16px 0;
  background: color-mix(in srgb, var(--grund) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
:root[data-stil="sole"] .suche {
  border-radius: 0; background: none; padding: 0 2px; margin-bottom: 6px;
  box-shadow: inset 0 -1.5px 0 var(--linie-fest);
}
:root[data-stil="sole"] .suche:focus-within { outline: none; box-shadow: inset 0 -2.5px 0 var(--gelb); }
:root[data-stil="sole"] .suche input { padding: 11px 0; }
:root[data-stil="sole"] .kategorien { gap: 4px; padding-block: 6px 0; margin-block: 0; }
:root[data-stil="sole"] .kategorien a {
  background: none; color: var(--leise); box-shadow: none; text-transform: none; letter-spacing: 0;
  font: 500 1.02rem/1.2 var(--schrift-titel), Georgia, serif; padding: 12px 16px 11px; border-radius: var(--bogen);
  border-end-start-radius: 0; border-end-end-radius: 0;
}
:root[data-stil="sole"] .kategorien a:hover { color: var(--text); }
:root[data-stil="sole"] .kategorien a.aktiv { background: var(--text); color: var(--grund); box-shadow: none; }
:root[data-stil="sole"] .kategorien a:focus-visible { outline: 2px solid var(--gelb); outline-offset: -2px; }



:root[data-stil="sole"] main { counter-reset: gang; }
:root[data-stil="sole"] .abschnitt { margin-top: 56px; }
:root[data-stil="sole"] .abschnitt.kategorie { counter-increment: gang; }
:root[data-stil="sole"] .abschnitt-kopf { display: block; text-align: center; margin-bottom: 8px; }
:root[data-stil="sole"] .abschnitt-kopf h2 { font-size: clamp(2.1rem, 9vw, 3rem); font-weight: 480; letter-spacing: -.025em; }
:root[data-stil="sole"] .abschnitt-kopf p { margin-top: 6px; font-size: .95rem; }
:root[data-stil="sole"] .abschnitt.kategorie .abschnitt-kopf h2::before {
  content: "—  " counter(gang, upper-roman) "  —";
  content: "—  " counter(gang, upper-roman) "  —" / "";
  display: block; margin-bottom: 10px; white-space: pre;
  font: 700 .74rem/1 var(--schrift-text), sans-serif; letter-spacing: .3em; color: var(--akzent-schrift);
}


:root[data-stil="sole"] .leiste-quer { gap: 18px; padding-block: 8px 14px; }
:root[data-stil="sole"] .kachel-hoch {
  width: min(62vw, 240px); aspect-ratio: auto; padding: 12px 12px 16px; justify-content: flex-start; gap: 2px;
  background: var(--flaeche); color: var(--text); border-radius: var(--bogen); box-shadow: var(--schatten);
}
:root[data-stil="sole"] .kachel-hoch::before { display: none; }
:root[data-stil="sole"] .kachel-hoch img { position: relative; inset: auto; z-index: 0; width: 100%; height: auto; aspect-ratio: 1; border-radius: 999px 999px 8px 8px; margin-bottom: 12px; }
:root[data-stil="sole"] .kachel-hoch .kachel-titel { font-family: var(--schrift-titel), Georgia, serif; font-weight: 560; font-size: 1.25rem; }
:root[data-stil="sole"] .kachel-hoch .preis { color: var(--akzent-schrift); font-weight: 700; }
:root[data-stil="sole"] .kachel-hoch .deutscher-name, :root[data-stil="sole"] .kachel-hoch .hell-auf-bild { color: var(--leise); text-shadow: none; }
:root[data-stil="sole"] .kachel-hoch .plakette { top: 18px; inset-inline-start: 18px; }
:root[data-stil="sole"] .kachel-hoch > .ki-marke { inset-block-start: auto; top: calc(min(62vw, 240px) - 24px - 22px); inset-inline-end: 20px; }
:root[data-stil="sole"] .kachel-hoch:focus-visible { outline: 3px solid var(--gelb); }



:root[data-stil="sole"] .gerichte { gap: 0; }
@media (min-width: 640px) { :root[data-stil="sole"] .gerichte { column-gap: 44px; } }
:root[data-stil="sole"] .gericht,
:root[data-stil="sole"].hell .gericht {
  flex-direction: row; align-items: center; gap: 18px; overflow: visible;
  background: none; border-radius: 0; box-shadow: none; padding: 20px 0;
  border-bottom: 1px dashed var(--linie-fest);
}
:root[data-stil="sole"] .gericht:active { transform: none; }
:root[data-stil="sole"] .gericht:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:root[data-stil="sole"] .gericht .foto { flex: none; width: 108px; aspect-ratio: 1; overflow: visible; background: none; }
:root[data-stil="sole"] .gericht .foto img {
  border-radius: 50%; box-shadow: 0 0 0 4px var(--flaeche), 0 0 0 5px var(--linie), 0 14px 22px -14px rgb(60 40 20 / .5);
}
:root[data-stil="sole"] .gericht:hover .foto img { transform: rotate(-6deg); }
:root[data-stil="sole"] .gericht .foto .plaketten {
  top: auto; bottom: -10px; inset-inline: -10px;
  flex-direction: column; align-items: center; gap: 3px;
}
:root[data-stil="sole"] .gericht .foto .plakette { font-size: .56rem; padding: 3px 6px; letter-spacing: .08em; }
:root[data-stil="sole"] .gericht .foto .ki-marke { font-size: .58rem; padding: 2px 5px; inset-block-end: auto; inset-block-start: -2px; inset-inline-end: -6px; }
:root[data-stil="sole"] .gericht .koerper { padding: 0; flex: 1; min-width: 0; gap: 4px; }
:root[data-stil="sole"] .gericht h3 { font-size: 1.24rem; font-weight: 560; }
:root[data-stil="sole"] .gericht .nr {
  display: inline-block; margin-inline-end: 8px; color: var(--akzent-schrift); vertical-align: .18em;
  font: 700 .7rem/1 var(--schrift-text), sans-serif; letter-spacing: .1em;
}
:root[data-stil="sole"] .gericht .nr::before { content: "Nº\a0"; }
:root[data-stil="sole"] .gericht p { font-size: .92rem; }
:root[data-stil="sole"] .gericht .fuss-zeile { padding: 0; margin-top: 8px; }
:root[data-stil="sole"] .gericht .preis { color: var(--text); font: 600 1.14rem/1.2 var(--schrift-titel), Georgia, serif; }
:root[data-stil="sole"] .gericht .preis small { font-family: var(--schrift-text), sans-serif; }
:root[data-stil="sole"] .gericht.zeile-art { padding: 16px 0; }
:root[data-stil="sole"] .plus {
  width: 40px; height: 40px; border-radius: 12px; background: var(--gelb); color: var(--gelb-text);
  font-size: 1.35rem; font-weight: 400;
}
:root[data-stil="sole"] .plus:hover, :root[data-stil="sole"] .gericht:hover .plus { background: var(--text); color: var(--grund); }


:root[data-stil="sole"] .korb-leiste { padding: 0; background: none; }
:root[data-stil="sole"] .korb-leiste .knopf-rot {
  max-width: 640px; border-radius: 28px 28px 0 0; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)) 14px;
  box-shadow: 0 -10px 30px -12px rgb(60 30 15 / .45); text-transform: none; letter-spacing: 0; font-size: 1rem;
}
:root[data-stil="sole"] .korb-symbol { background: rgb(255 255 255 / .16); border-radius: 50% 50% 8px 8px; }
:root[data-stil="sole"] #korb-anzahl { background: var(--flaeche); color: var(--text); }


:root[data-stil="sole"] .blatt { background: var(--grund); }
@media (min-width: 600px) { :root[data-stil="sole"] .blatt { border-radius: var(--radius); } }
:root[data-stil="sole"] .blatt .titelbild,
:root[data-stil="sole"].hell .blatt .titelbild:not(.ohne-bild) { aspect-ratio: 3 / 2; border-radius: 0 0 50% 50% / 0 0 14% 14%; overflow: hidden; }
:root[data-stil="sole"] .blatt .titelbild::after { display: none; }
:root[data-stil="sole"] .blatt .inhalt { margin-top: 0; padding-top: 20px; }
:root[data-stil="sole"] .blatt h2 { font-size: 2.3rem; font-weight: 480; letter-spacing: -.025em; }
:root[data-stil="sole"] .blatt legend { color: var(--akzent-schrift); letter-spacing: .2em; }
:root[data-stil="sole"] .groesse { border-radius: var(--radius-klein); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie-fest); min-height: 84px; }
:root[data-stil="sole"] .groesse strong { font-family: var(--schrift-titel), Georgia, serif; font-weight: 600; }
:root[data-stil="sole"] .groesse:has(input:checked) { background: var(--gelb); color: var(--gelb-text); box-shadow: none; }
:root[data-stil="sole"] .groesse em { background: var(--rot-1); border-radius: 4px; }
:root[data-stil="sole"] .extras { gap: 0; }
:root[data-stil="sole"] .extra { background: none; border-radius: 0; border-bottom: 1px solid var(--linie); padding: 12px 2px; }
:root[data-stil="sole"] .extra:has(input:checked) { background: none; }
:root[data-stil="sole"] .extra .haken { border-radius: 8px; border-color: var(--linie-fest); }
:root[data-stil="sole"] .menge, :root[data-stil="sole"] .menge button { border-radius: var(--radius-klein); }
:root[data-stil="sole"] .menge { box-shadow: inset 0 0 0 1px var(--linie-fest); background: none; }
:root[data-stil="sole"] .menge button { background: none; }
:root[data-stil="sole"] .menge button.mehr { background: var(--gelb); color: var(--gelb-text); }
:root[data-stil="sole"] .blatt-fuss { background: var(--flaeche); }
:root[data-stil="sole"] .dialog { border-radius: var(--radius); }
:root[data-stil="sole"] :is(.feldgruppe, .summen),
:root[data-stil="sole"].hell :is(.feldgruppe, .summen) { box-shadow: inset 0 0 0 1px var(--linie); border-radius: var(--radius); }
:root[data-stil="sole"] .korb-liste > li { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
:root[data-stil="sole"] .korb-liste .vorschau { border-radius: 50%; }
:root[data-stil="sole"] .seitentitel { font-weight: 480; font-size: 2.6rem; }
:root[data-stil="sole"] .oberzeile { letter-spacing: .24em; }
:root[data-stil="sole"] .fuss { border-top: 1px solid var(--linie); padding-top: 22px; }



:root:is([data-stil="papier"], [data-stil="sole"]).hell :is(.segment, .trinkgeld-knoepfe) input:checked + span { background: var(--gelb-weich); color: var(--gelb-text); }
:root[data-stil="sole"] :is(.segment, .trinkgeld-knoepfe) input:checked + span { border-radius: var(--radius-klein); }
:root[data-stil="sole"] .segment-knoepfe { border-radius: calc(var(--radius-klein) + 4px); box-shadow: inset 0 0 0 1px var(--linie); }
:root[data-stil="sole"] .segment span { border-radius: var(--radius-klein); }



@media print {

  :root, :root.hell, :root[data-stil]:not(.hell), :root[data-stil].hell {
    --grund: #fff; --flaeche: #fff; --flaeche-2: #fff; --linie: #999; --text: #000; --leise: #333;
    --gelb: #000; --akzent-schrift: #000; --fehler: #000; color-scheme: light;
  }
  body { background: #fff !important; color: #000; padding: 0; }
  .kopf, .fuss, .korb-leiste, .meldung, .deko, .install-band, .vorschau-band, .saison-ansicht,
  .nicht-drucken, .stand-widerruf, .stand > button, .treue-karte, .bewertungs-karte, .stand-alarm,
  .schritte, .ki-marke { display: none !important; }
  .stand-karte, .summen, .bestaetigung-karte, .korb-liste > li { background: none !important; box-shadow: none; padding: 6px 0; }
  .stand .seitentitel { font-size: 1.3rem; }
  a { color: #000; text-decoration: none; }
}


.vf-band { position: sticky; top: 0; z-index: 50; padding: 6px 12px; text-align: center; font: 600 12px/1.3 system-ui, sans-serif; background: #f2b632; color: #13201b; }
.vf-hinweis { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(242, 182, 50, .16); border: 1px solid rgba(242, 182, 50, .5); font-size: .9rem; }
.vf-schloss { font-size: .8em; font-weight: 600; color: #b07d10; margin-left: 4px; white-space: nowrap; }
input.vf-fest { cursor: not-allowed; opacity: .8; border-style: dashed !important; }


.vertragspartner { display: block; margin-top: .25rem; font-size: .82rem; line-height: 1.35; }

.urheber { display: block; margin-top: .3rem; font-size: .75rem; opacity: .75; }