/* Anzeigeseite — Gestaltung aus der OpenAI-Skizze „Supra“ (app/globals.css), ohne Tailwind nachgebaut.
   Ergänzt um Rezeptseite, Personen/Maßeinheiten, Einkaufsliste als <dialog> und Vorschau-Leiste. */
:root{--background:#f7f5ef;--foreground:#233b31;--primary:#783b36;--muted-foreground:#606a62;
  /* Ein Maß für die ganze Seite. Vorher hatte der Kopf feste Ränder und der Rumpf prozentuale:
     bei 1900 px begann die Schauzeile bei 64 px, alles darunter bei 94 px — ein sichtbarer Versatz,
     und der Inhalt lief über 1700 px Breite auseinander (Christoph am 2026-09-25 am Breitbild). */
  --seite-breite:1440px;--seite-rand:clamp(20px,5vw,64px);
  --seiten-inset:max(var(--seite-rand),calc((100% - var(--seite-breite)) / 2));
  --tageskarte:min(330px,31vw)}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;font-size:16px}
button,a,input{touch-action:manipulation}button{cursor:pointer;font:inherit}button:disabled{cursor:not-allowed;opacity:.55}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a37b4a;outline-offset:4px}
a{text-decoration:none;color:inherit}
svg{flex-shrink:0}
.vorschau{background:#a37b4a;color:#fff;text-align:center;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;padding:5px}
.vorschau a{text-decoration:underline;font-weight:600}

/* Kopf */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--seiten-inset);background:#f7f5ef}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:38px;height:38px;stroke-width:1.1}
.brand span{font:42px/0.9 Georgia,serif;letter-spacing:-2px}
.brand small{display:block;font:10px/1.4 Arial,sans-serif;letter-spacing:2px;margin-top:9px}
.topbar nav{display:flex;align-items:center;gap:32px;font-size:14px;margin-left:auto}
.topbar nav a{border-bottom:1px solid #793b37;padding:10px 0}
.topbar nav a.sprachwahl{border:1px solid #cbd2c1;border-radius:5px;padding:8px 11px;letter-spacing:1px}
.plain{display:flex;align-items:center;gap:8px;border:0;background:none;text-decoration:underline}
.basket,.primary{background:#773c36;color:white;border:1px solid #773c36;border-radius:5px;padding:13px 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px}
.basket b{border-radius:50%;background:#ffffff25;min-width:22px;line-height:22px;font-size:12px}

/* Bühne */
.hero{position:relative;min-height:clamp(322px,31vw,820px);display:flex;align-items:center;padding:42px 7%;background-color:#243f36;background-size:cover;background-position:center 46%;color:#fff}
.eyebrow{font-size:12px;letter-spacing:2.1px;font-weight:600;margin:0 0 15px}
.hero .eyebrow{color:#e3d7b7}
.hero h1{font:52px/1.08 Georgia,serif;letter-spacing:-1.5px;margin:0 0 18px}
.hero h1 em{font-weight:400;color:#e3d7b7}
.hero p:last-child{font-size:15px;line-height:1.7;color:#f0ede3}
.location{position:absolute;right:5%;bottom:25px;font-size:11px;letter-spacing:2px}

/* Rezept des Tages */
.tagesrezept{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);background:#fff;border:1px solid #dfdfd4;border-radius:8px;overflow:hidden;margin:0 0 48px;box-shadow:0 9px 30px #233b3112}
.tagesbild{position:relative;display:block;min-height:320px;background:#e7e4da;overflow:hidden}
.tagesbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tagestext{padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
.tagestext .eyebrow{color:#88564b;font-size:11px}
.tagestext h2{font:40px/1.1 Georgia,serif;margin:0 0 12px}
.tagestext .beschreibung{font-size:16px;line-height:1.6;color:#4f5d52;margin:0 0 14px}
.fakten-zeile{display:flex;align-items:center;gap:6px;color:#687167;font-size:13px;margin:0 0 22px}
.tagesknoepfe{display:flex;flex-wrap:wrap;gap:10px}
.tagesknoepfe .primary svg{width:18px;height:18px}
@media(max-width:760px){.tagesrezept{grid-template-columns:1fr}.tagesbild{min-height:220px}.tagestext{padding:24px}.tagestext h2{font-size:30px}}

/* Sammlung */
/* Die Breite wird begrenzt und zentriert, nicht mit Innenabstand geschoben. Der prozentuale Abstand
   traf am 2026-09-25 auf .rezeptseite mit ihrer eigenen Maximalbreite von 1040 px und fraß sie von
   beiden Seiten auf: 163 px links und rechts, 713 px Inhalt übrig — die Rezeptvorschau wirkte leer.
   Zentriert stimmt die Fluchtlinie mit dem randlosen Kopf trotzdem überein, an jeder Fensterbreite. */
main{max-width:calc(var(--seite-breite) + 2 * var(--seite-rand));margin:auto;
  padding:40px var(--seite-rand) 65px}
/* Spaltenzahl folgt der Bildschirmbreite: jede Karte mind. 280 px, sonst so viele wie hineinpassen */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}
.section-head .eyebrow{color:#88564b;font-size:11px;margin-bottom:10px}
h2{font:32px/1.2 Georgia,serif;margin:0}
.section-head>span{font-size:14px;color:#69726a}
.filter-top{display:flex;gap:22px;justify-content:space-between;align-items:center}
.search{display:flex;align-items:center;gap:12px;border:1px solid #d4d8cb;background:#fff;padding:14px 18px;border-radius:5px;max-width:660px;flex:1}
.search svg{width:19px;color:#798578}
.search input{border:none;outline:none;width:100%;background:none;font-size:15px;color:#233b31}
.categories{display:flex;gap:4px;flex-wrap:wrap}
.categories button{background:none;border:0;padding:10px 12px;border-radius:4px;font-size:13px;color:#697469}
.categories button.active{background:#e4e9df;color:#284733}
.mehr-filter{font-size:14.5px;font-weight:600;border:1.5px solid var(--foreground);background:#fff;border-radius:10px;
  padding:11px 16px;color:var(--foreground);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  cursor:pointer;transition:background .15s,color .15s}
.mehr-filter:hover{background:var(--foreground);color:#fff}
.mehr-filter.offen{background:var(--foreground);color:#fff}
.mehr-filter svg{width:16px;height:16px;flex:none}
.mehr-filter .pfeilchen{transition:transform .15s}
.mehr-filter.offen .pfeilchen{transform:rotate(180deg)}
.mehr-filter b{background:var(--primary);color:#fff;border-radius:10px;padding:2px 8px;font-size:11.5px}
.mehr-filter b[hidden]{display:none}
.weitere-filter[hidden]{display:none}
.ingredient-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:17px}
.ingredient-chips>span{font-size:12px;color:#677466;margin-right:4px}
.ingredient-chips button{font-size:12px;border:1px solid #dcded2;background:#fafaf6;border-radius:20px;padding:7px 11px;display:flex;gap:4px;align-items:center;color:#5e6b58}
.ingredient-chips button svg{width:13px;height:13px}
.ingredient-chips>span{min-width:112px}
.allergene{margin-top:26px;padding:16px 18px;border:1px solid #e4e6da;border-radius:12px;background:#fafaf6}
.allergene h2{margin:0 0 8px}
.allergene p{margin:0 0 6px;font-size:14px}
.allergene .leise{color:#677466;font-size:12.5px}
.landseite{max-width:1180px;margin:0 auto;padding:28px 5% 60px}
.landseite h1{font:40px/1.1 Georgia,serif;margin:14px 0 6px}
.kartenfeld{margin:18px 0 10px;position:relative}
.kartenname{position:absolute;transform:translate(14px,-28px);pointer-events:none;background:#233b31;color:#f7f5ef;
  font-size:13px;letter-spacing:.04em;padding:5px 11px;border-radius:14px;white-space:nowrap;z-index:2}
.kartenname[hidden]{display:none}
.landkarte{width:100%;height:auto}
.landkarte path{fill:#e3e7dc;stroke:#f7f5ef;stroke-width:1.6;transition:fill .15s;cursor:pointer}
.landkarte path[data-region=""]{cursor:default}
.landkarte path:hover,.landkarte path.aktiv{fill:#783b36}
.landkarte path.leer{fill:#eceee6;cursor:default}
.gebiet{margin-top:34px;scroll-margin-top:16px}
.gebiet.landesweit{margin-top:46px;padding-top:26px;border-top:1px solid #e2e5da}
.rueckmeldung{margin-top:18px;padding:16px 18px;border:1px dashed #d8dccb;border-radius:12px}
.rueckmeldung h2{margin:0 0 8px}
.rueckmeldung p{margin:0 0 10px;font-size:14px;color:#4c5a4f}
.rueckmeldung a.secondary{display:inline-block;text-decoration:none}
@media print{.rueckmeldung{display:none}}
/* Kochmodus: eine Schicht über allem, bedient mit der Fläche statt mit Knöpfchen */
.kochen{background:#1f4d3d;color:#fff;border:none;border-radius:10px;padding:11px 18px;font-size:15px;margin-right:8px}
body.kocht{overflow:hidden}
.kochmodus{position:fixed;inset:0;z-index:999;background:#0c251d;color:#f4f2e8;display:flex;flex-direction:column}
.kochmodus[hidden]{display:none}
.koch-kopf{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.koch-zaehler{flex:1;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#c3cfc4}
.koch-klein{background:transparent;border:1px solid rgba(255,255,255,.35);color:#f4f2e8;border-radius:20px;padding:7px 14px;font-size:14px}
.koch-klein.aus{opacity:.45;text-decoration:line-through}
.koch-quelle{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#93a396;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 12px}
.koch-flaeche{flex:1;width:100%;background:transparent;border:none;color:inherit;text-align:left;
  padding:24px 22px;display:flex;flex-direction:column;justify-content:center;gap:18px;cursor:pointer}
.koch-schritt{font-size:clamp(26px,5.2vw,46px);line-height:1.34;margin:0;font-weight:500}
.koch-wecker{font-size:clamp(34px,8vw,64px);font-variant-numeric:tabular-nums;color:#e8c37a}
.koch-fuss{display:flex;gap:10px;padding:16px 18px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.koch-fuss button{flex:1;min-width:120px;min-height:64px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#f4f2e8;border-radius:12px;font-size:17px}
.koch-fuss button[hidden]{display:none}
.koch-fuss button.aktiv{background:#e8c37a;color:#0c251d;border-color:#e8c37a}
.koch-hinweis{margin:0;padding:0 18px 16px;font-size:12.5px;color:#93a396}
@media print{.kochmodus,.kochen{display:none}}
.ingredient-chips button.active{border-color:#38573d;color:#294832;background:#e8eddf}
.ingredient-chips .reset{border:0;background:none;text-decoration:underline}
.hint{font-size:13px;line-height:1.6;color:#626f61}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:26px;margin-top:28px}
.recipe{background:#fff;border:1px solid #dfdfd4;border-radius:8px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.recipe:hover{box-shadow:0 9px 30px #233b3112;transform:translateY(-3px)}
.food{display:block;height:224px;position:relative;background:#e7e4da;overflow:hidden}
/* „picture" bildet keinen eigenen Kasten: die Bilder darin rechnen ihre Prozenthoehe weiter gegen
   ihre Flaeche (.food, .tagesbild), nicht gegen ein leeres Zwischenelement. Ohne das verliert jedes
   Bild seine Hoehe, sobald es mehrere Web-Fassungen hat. */
picture{display:contents}
.food img{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block}
.recipe:hover .food img{transform:scale(1.03)}
.food>.kat{position:absolute;left:16px;top:16px;font-size:12px;border-radius:3px;background:#f7f5efed;padding:7px 10px;color:#2f4939}
.ohne-bild{position:absolute;inset:0;display:grid;place-items:center;font:72px Georgia,serif;color:#783b3640}
.ai-label{position:absolute;right:10px;bottom:10px;padding:5px 8px;background:#ffffffde;border-radius:4px;font-size:11px;color:#233b31}
.card-content{padding:22px}
.region{font-size:11px!important;letter-spacing:1.6px;text-transform:uppercase;color:#8c6353!important;margin:0 0 9px!important}
h3{font:26px/1.2 Georgia,serif;margin:0 0 12px}
h3 a{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-content>p{font-size:14px;line-height:1.6;color:#677267;min-height:45px}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:15px;border-top:1px solid #eeeee6}
.card-bottom>span{display:flex;gap:6px;align-items:center;color:#687167;font-size:13px}
.dot{margin:0 3px}
.add{border:1px solid #d6dacd;background:#f7f7ef;color:#4f654c;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;padding:0}
.add.selected{background:#294b37;border-color:#294b37;color:white}
.empty{padding:45px 20px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:15px}
.empty h3{font-size:23px;margin:0}.empty p{color:#677267;margin:0 0 6px}
.secondary{border:1px solid #cbd2c1;border-radius:5px;background:#fff;padding:11px 16px;color:#294934;font-size:14px}
.secondary.selected{background:#e8eddf;border-color:#38573d}
.collection-note{font-size:12px;color:#71796d;line-height:1.7;margin:30px 0 0}
footer{border-top:1px solid #d8ddcf;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px var(--seiten-inset);color:#677366;font-size:13px}
.footer-brand{font:32px Georgia,serif;color:#243f36}
.fusslinks{display:flex;gap:18px;flex-wrap:wrap}.fusslinks a{text-decoration:underline}
.rechtstext{max-width:820px}.rechtstext h2{margin:0 0 18px}.rechtstext h2~h2{font-size:21px;margin:28px 0 8px}.rechtstext p{line-height:1.7;font-size:15px}.rechtstext a{text-decoration:underline}

/* Rezeptseite (entspricht dem Rezept-Dialog der Skizze) */
.rezeptseite{max-width:calc(1040px + 2 * var(--seite-rand))}
.zurueck{display:inline-block;font-size:14px;color:#677267;margin-bottom:18px;text-decoration:underline}
.recipe-detail{background:#f9f8f3;border:1px solid #dfdfd4;border-radius:8px;overflow:hidden;color:#243e31}
.detail-figur{margin:0;position:relative}
.detail-image{height:380px;object-fit:cover;width:100%;display:block}
.detail-body{padding:30px}
.dialog-heading{font:40px/1.15 Georgia,serif;margin:0 20px 12px 0}
.beschreibung{font-size:16px;line-height:1.6;color:#4f5d52;margin:0 0 22px}
.einleitung{font-size:15px;line-height:1.75;margin:0 0 22px}
.druckkopf,#druckbereich{display:none}
.muster{font-size:13px;line-height:1.5;background:#f5e4df;border:1px solid #ddb6aa;border-radius:4px;padding:10px 13px;color:#7b312a;margin:0 0 18px}
.regler{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 0 24px;border-bottom:1px solid #dce0d4;margin-bottom:26px}
.people{display:flex;align-items:center;gap:12px;font-size:15px}
.stepper{display:inline-flex;align-items:center;border:1px solid #cfd6c6;border-radius:5px;background:#fff}
.stepper button{border:0;background:none;width:36px;height:36px;font-size:18px;color:#783b36}
.stepper output{min-width:28px;text-align:center;font-weight:600}
.umschalter{display:inline-flex;border:1px solid #cfd6c6;border-radius:5px;overflow:hidden;background:#fff}
.umschalter button{border:0;background:none;padding:9px 13px;font-size:13px;color:#697469}
.umschalter button.active{background:#e4e9df;color:#284733}
.regler .secondary{margin-left:auto}
.recipe-columns{display:grid;grid-template-columns:1fr 1.5fr;gap:35px}
.recipe-columns h2,.recipe-columns h3{font:22px Georgia,serif;margin:0 0 20px}
.ingredients{list-style:none;padding:0;margin:0 0 25px}
.ingredients li{display:flex;gap:14px;border-bottom:1px solid #e0e3d9;padding:10px 0;font-size:14px}
.ingredients b{min-width:70px;font-weight:400}
.ingredients small{display:block;color:#677367;font-size:12px;line-height:1.5;margin-top:4px}
.steps{list-style:decimal;padding-left:24px;margin:0 0 20px}
.steps li{padding-left:8px;margin-bottom:18px;font-size:15px;line-height:1.75}
.steps li::marker{font-family:Georgia,serif;font-size:20px;color:#8d5546}
.credits{padding-left:0;list-style:none;margin-top:24px}
.credits li{font-size:14px;line-height:1.7;margin-bottom:17px}
.credits a{text-decoration:underline}

/* Einkaufsliste */
.utility-dialog{border:0;border-radius:8px;padding:30px;max-width:560px;width:calc(100% - 32px);max-height:90dvh;background:#f9f8f3;color:#243e31}
.utility-dialog::backdrop{background:#12271966}
.dialog-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.icon-button{background:none;border:0;padding:4px;font-size:18px;color:#4e624e}
.chosen{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.chosen>div{display:flex;align-items:center;gap:8px;background:#eaf0e3;padding:9px 12px;border-radius:4px;font-size:13px}
.chosen button{border:0;background:none;padding:0;color:#4e624e}
.shopping-items{list-style:none;padding:0;margin:8px 0}
.shopping-items li{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #e1e4da;font-size:14px}
.shopping-items b{white-space:nowrap;font-weight:500}
.shopping-items small{display:block;color:#77806f;font-size:12px;margin-top:4px}
.korb-aktionen{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

@media(max-width:850px){.topbar nav a:not(.sprachwahl){display:none}.topbar{gap:12px;padding:20px 5%}.hero h1{font-size:44px}.basket{font-size:13px}.food{height:200px}}
@media(max-width:1000px){.filter-top{flex-wrap:wrap;gap:12px}.search{min-width:100%;max-width:none}}
@media(max-width:560px){.topbar{flex-wrap:wrap}.brand span{font-size:35px}.brand small{font-size:9px}.topbar nav{font-size:13px}.basket{width:100%;padding:10px}
  .hero{min-height:300px;padding:32px 6%}.hero h1{font-size:38px}.hero .eyebrow{font-size:10px;letter-spacing:1.3px}.hero p:last-child{font-size:14px}.location{display:none}
  main{padding:30px 5%}.section-head{align-items:start}.section-head>span{white-space:nowrap;font-size:12px;margin-top:27px}h2{font-size:26px}
  .food{height:240px}footer{align-items:start;flex-wrap:wrap}footer p{max-width:220px}
  .categories button{padding:8px 11px}.ingredient-chips{gap:6px}.ingredient-chips>span{width:100%;margin:4px 0}
  .recipe-columns{grid-template-columns:1fr}.detail-image{height:220px}.detail-body,.utility-dialog{padding:23px}.dialog-heading{font-size:30px}
  .regler .secondary{margin-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{
  .vorschau,.topbar,footer,.zurueck,.regler,.drucken,.muster,.detail-figur{display:none!important}
  body{background:#fff}.recipe-detail{border:0}
  .tagesrezept{display:none!important}
  body.drucke-liste>*:not(#korb){display:none!important}
  body.drucke-liste #korb{position:static;display:block;max-height:none;box-shadow:none;padding:0}
  body.drucke-liste .korb-aktionen,body.drucke-liste .dialog-kopf button,body.drucke-liste .chosen button,body.drucke-liste #korb .umschalter{display:none!important}
  .druckkopf{display:block;font-size:11pt;margin:0 0 14pt}
  body.drucke-rezepte>*:not(#druckbereich){display:none!important}
  body.drucke-rezepte #druckbereich{display:block}
  .druckrezept{page-break-after:always;break-after:page}
  .druckrezept:last-child{page-break-after:auto;break-after:auto}
  .druckrezept h1{font:24pt Georgia,serif;margin:0 0 6pt}
}

/* Ausprägungen der Bausteine. Die Vorgabe steht oben; hier nur, was eine Site anders wählen kann.
   Neue Ausprägungen kommen hierher und stehen danach jeder Küche zur Verfügung. */
.hero-schmal{min-height:clamp(180px,18vw,320px)}
.hero-schmal h1{font-size:clamp(30px,3.4vw,46px)}
.cards-liste{grid-template-columns:1fr;gap:14px}
.cards-liste .food{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:stretch}
.cards-liste .food img{height:100%;min-height:150px}
@media(max-width:620px){.cards-liste .food{grid-template-columns:1fr}.cards-liste .food img{min-height:200px}}
.filter-spalte{flex-direction:column;align-items:stretch}
.filter-spalte .categories{flex-wrap:wrap}

/* Kopf mit dem Rezept des Tages und der Streifen darunter — Aufbau nach dem Entwurf vom 21.09.2026.
   Der Entwurf zeichnete die Speisen als CSS; hier stehen echte Bilder, darum .hero-art mit <img>. */
.hero-tagesrezept{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(400px,1.1fr);position:relative;
  min-height:clamp(420px,46vw,690px);padding:clamp(48px,7vw,115px) clamp(20px,4vw,40px) clamp(40px,6vw,96px);
  overflow:hidden;background:none;color:inherit;border-radius:8px}
/* 34ch rechnet in der Grundschrift, nicht in der Schauschrift: Bei 1500 px ergab das rund 300 px für
   eine 74-px-Überschrift, die daraufhin nach jedem Wort umbrach (gesehen am 2026-09-25 am ungarischen
   Entwurf — derselbe Fehler wie zuvor beim Vollbild). Die Spalte bekommt ein Maß in rem. */
.hero-tagesrezept .hero-copy{position:relative;z-index:2;max-width:min(34rem,90%)}
.hero-tagesrezept h1{font:600 clamp(34px,5.4vw,74px)/.92 Georgia,serif;letter-spacing:-.04em;margin:18px 0 22px}
.hero-tagesrezept .hero-intro{max-width:325px;font-size:16px;line-height:1.55}
.hero-tagesrezept .text-link{display:inline-flex;gap:10px;align-items:center;margin-top:14px;padding-bottom:5px;
  border-bottom:1px solid currentColor;font-weight:600;font-size:14px}
.hero-tagesrezept .hero-art{position:absolute;inset:0 0 0 43%;overflow:hidden}
.hero-tagesrezept .hero-art img{width:100%;height:100%;object-fit:cover;display:block}
/* Die Tageskarte hält dieselbe rechte Kante wie der Inhalt darunter — sonst steht sie 24 px daneben
   und man sieht es sofort (gemessen am 2026-09-25 am ungarischen Entwurf). */
.daily-card{position:absolute;z-index:3;right:var(--seiten-inset);bottom:clamp(28px,5vw,77px);
  width:min(330px,30vw);padding:23px;background:var(--foreground,#233b31);color:#f7f5ef;box-shadow:15px 15px 0 #c9a46c}
.daily-meta{display:flex;justify-content:space-between;color:#c9a46c;font:11px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.08em}
.daily-card h2{margin:34px 0 10px;font:600 clamp(26px,2.6vw,41px)/1 Georgia,serif;letter-spacing:-.04em;color:#f7f5ef}
.daily-card p{font-size:14px;line-height:1.5;margin:0}
.recipe-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font:11px ui-monospace,Consolas,monospace;
  letter-spacing:.04em}
.card-link{display:flex;justify-content:space-between;margin-top:24px;padding-top:14px;
  border-top:1px solid rgba(247,245,239,.3);font-size:13px;color:#f7f5ef}
.today-strip{margin:34px 0 10px}
.today-heading h2{font:600 clamp(24px,2.6vw,38px)/1.05 Georgia,serif;letter-spacing:-.03em;margin:6px 0 20px}
.today-recipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px}
.today-recipes a{display:grid;gap:6px;color:inherit}
.today-food{display:block;height:150px;border-radius:6px;background:#e8e4d8 center/cover no-repeat}
.today-recipes b{font:600 20px/1.15 Georgia,serif}
.today-recipes small{color:#677267;font-size:13px}
@media(max-width:860px){
  .hero-tagesrezept{display:block;min-height:0;padding:34px 20px 0}
  .hero-tagesrezept .hero-art{position:relative;inset:auto;height:300px;margin:24px -20px 0;border-radius:0}
  .daily-card{position:relative;right:auto;bottom:auto;width:auto;margin:-40px 0 0;box-shadow:10px 10px 0 #c9a46c}
  .daily-card h2{margin-top:18px}
}

/* ---- Kopf im Bild (Ausprägung „vollbild") -------------------------------------------------------------
   Nach Christophs Skizze vom 21.09.2026: kein Band über dem Bild, das Bild über die volle Breite bis an den
   oberen Rand, und alle Inhalte darüber auf einer halbdurchsichtigen Schicht. Die Navigation schwebt mit. */
.kopf-im-bild .topbar{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border-bottom:0;
  color:#f7f5ef}
.kopf-im-bild .topbar a,.kopf-im-bild .topbar .brand span{color:#f7f5ef}
.kopf-im-bild .topbar .brand small{color:rgba(247,245,239,.72)}
.kopf-im-bild .topbar .basket{color:#f7f5ef;background:rgba(18,22,18,.45);border-color:rgba(247,245,239,.5);
  backdrop-filter:blur(6px)}
.kopf-im-bild .vorschau{position:relative;z-index:6}

.hero-vollbild{display:block;position:relative;margin:0 0 34px;border-radius:0;min-height:clamp(440px,52vw,720px);
  padding:clamp(104px,11vw,168px) var(--seiten-inset) clamp(34px,5vw,64px);overflow:hidden;color:#f7f5ef}
.hero-vollbild .hero-art{position:absolute;inset:0;z-index:0}
.hero-vollbild .hero-art img{width:100%;height:100%;object-fit:cover}
/* Die halbdurchsichtige Schicht: links dicht genug zum Lesen, nach rechts offen fürs Bild. */
.hero-vollbild .hero-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,18,15,.82) 0 34%,rgba(14,18,15,.55) 56%,rgba(14,18,15,.18) 82%,rgba(14,18,15,.1))}
/* Die Spalte muss die Schauzeile tragen: 30ch rechnet in der Grundschrift und ergab bei 900 px rund
   270 px — die 52-px-Ueberschrift brach dort nach jedem Wort um und lief aus der Spalte heraus. */
.hero-vollbild .hero-copy{position:relative;z-index:2;max-width:min(34rem,50%)}
.hero-vollbild .hero-copy h1{color:#f7f5ef}
.hero-vollbild .eyebrow{color:#e6dfd0}
.hero-vollbild .hero-intro{color:#ece7dc}
.hero-vollbild .text-link{color:#f7f5ef;border-bottom-color:rgba(247,245,239,.6)}

/* Zierschrift: ein Wort in der Schrift der Küche, als Bildelement. Es wird nicht vorgelesen und nicht
   ausgewählt — es ist Grafik, die zufällig aus Buchstaben besteht. */
.zier{font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR","Yu Gothic",sans-serif;
  user-select:none;pointer-events:none}
/* Das Zeichen steht links neben der Tageskarte, nicht über ihr: Beide am rechten Rand bedeutet dieselbe
   Spalte, und dann liegt das Zeichen auf der Karte (gemessen am 2026-09-25: 41 px Überlappung). */
.zier-held{position:absolute;z-index:1;top:clamp(96px,11vw,150px);
  right:calc(var(--seiten-inset) + var(--tageskarte) + clamp(24px,3vw,56px));
  writing-mode:vertical-rl;font-size:clamp(46px,6vw,104px);line-height:1;color:rgba(247,245,239,.9);
  letter-spacing:.06em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.zier-sammlung,.zier-heute{display:block;margin:0 0 2px;font-size:15px;letter-spacing:.1em;
  color:var(--zier-farbe,#9E2D24);opacity:.9}
/* Das Schriftzeichen haengt am rechten Rand des Bildes, die Textspalte links davon — zwei getrennte
   Spuren statt einer geteilten. */
@media(max-width:1100px){.zier-held{font-size:clamp(40px,5.5vw,72px)}}
@media(max-width:860px){
  /* Auf dem Telefon steht das Zeichen in der Zeile statt im Bild: Ueber dem Bild findet es keinen freien
     Platz mehr und landet auf der Schauzeile (gesehen am 2026-09-22 auf dem Mobiltelefon). */
  .zier-held{position:static;display:block;writing-mode:horizontal-tb;font-size:34px;line-height:1;
    color:inherit;opacity:.4;text-shadow:none;margin:0 0 4px}
}

.hero-vollbild .daily-card{position:absolute;z-index:3;right:var(--seiten-inset);bottom:clamp(34px,5vw,64px);
  width:var(--tageskarte);background:rgba(18,22,18,.72);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(0,0,0,.28)}
/* Auf dem Telefon wird aus dem Bild mit Text darauf ein Bild MIT Text darunter.
   Grund (Christoph, 2026-09-22): Das Bild lag als Hintergrund ueber der ganzen, hoch gewachsenen Flaeche,
   also ueber Schauzeile UND Tageskarte. Mit der dunklen Schicht darueber blieb nur „eine dunkle Flaeche vor
   irgendetwas". Am Telefon ist Platz fuer beides nacheinander — und das Essen kommt endlich zur Geltung.
   Die Farben kommen ueber `inherit` aus dem Profil, damit das ohne Wissen ueber die Kueche funktioniert. */
@media(max-width:860px){
  .hero-vollbild{display:flex;flex-direction:column;padding:0 0 4px;min-height:0;color:inherit;overflow:visible}
  .hero-vollbild .hero-art{position:static;width:100%;aspect-ratio:4/3;max-height:58vh;order:-1}
  .hero-vollbild .hero-art::after{display:none}
  .hero-vollbild .hero-copy{max-width:none;padding:22px 20px 0}
  .hero-vollbild .hero-copy h1,.hero-vollbild .hero-intro,.hero-vollbild .text-link{color:inherit}
  .hero-vollbild .text-link{border-bottom-color:currentColor}
  .hero-vollbild .eyebrow{color:inherit;opacity:.7}
  .hero-vollbild .daily-card{position:relative;right:auto;bottom:auto;width:auto;margin:22px 20px 0}
  /* Schwebt die Leiste nicht mehr im Bild, darf sie auch nicht mehr so tun: Weiße Schrift auf
     Porzellan ist unlesbar. Sie bekommt ihren gewöhnlichen Grund zurück. */
  .kopf-im-bild .topbar{position:relative;background:var(--background);border-bottom:1px solid #d8ddcf;
    color:inherit}
  .kopf-im-bild .topbar a,.kopf-im-bild .topbar .brand span{color:inherit}
  .kopf-im-bild .topbar .brand small{color:inherit;opacity:.7}
  .kopf-im-bild .topbar .basket{color:inherit;background:transparent;border-color:currentColor}
}

/* ---------- Sprachseite: Wörter am Tisch ---------- */
.ausdruecke h1{margin-bottom:6px}
.ausdruecke .beschreibung{max-width:62ch;margin:0 0 34px}
.ausdruecke h2{font:26px/1.2 Georgia,serif;margin:38px 0 14px}

/* Die Legende erklärt die Zeichen der Aussprachehilfe. Zwei Spalten, damit Zeichen und Erklärung
   nebeneinanderstehen — untereinander liest man sie nicht als Paar. */
.legende{background:rgba(0,0,0,.035);border-radius:10px;padding:18px 22px 22px;max-width:74ch}
.legende h2{margin:0 0 10px;font-size:20px}
.legende dl{display:grid;grid-template-columns:minmax(9ch,auto) 1fr;gap:8px 20px;margin:0}
.legende dt{font-weight:700;white-space:nowrap}
.legende dd{margin:0;color:var(--muted-foreground)}

.woerter table{width:100%;border-collapse:collapse;font-size:15px}
.woerter thead th{text-align:left;font:600 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-foreground);padding:0 14px 8px 0;border-bottom:1px solid #d8ddcf}
.woerter td{padding:11px 14px 11px 0;border-bottom:1px solid rgba(0,0,0,.07);vertical-align:top}
.woerter tr:last-child td{border-bottom:0}
/* Die Schrift der Küche ist die Hauptsache: groß, ungebrochen, in ihrer eigenen Schriftart. */
/* Schriftstapel fuer alle Kuechen der Sammlung: koreanisch, georgisch, japanisch — was das Geraet
   nicht hat, faellt auf die naechste Schrift zurueck. */
.woerter .wort{font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR","Noto Sans Georgian","BPG Nino Mtavruli",Sylfaen,"Noto Sans JP","Yu Gothic",Georgia,serif;
  font-size:21px;line-height:1.3;white-space:nowrap;width:1%}
.woerter .umschrift{font-style:italic;color:var(--muted-foreground);white-space:nowrap;width:1%}
.woerter .sprech{font:15px/1.5 ui-monospace,Consolas,monospace;white-space:nowrap;width:1%}
.woerter td:last-child{width:auto}

@media(max-width:760px){
  /* Vier Spalten passen nicht auf ein Telefon. Aus jeder Zeile wird ein kleiner Block:
     Wort groß, darunter Umschrift und Aussprache, darunter die Bedeutung. */
  .woerter thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .woerter table,.woerter tbody,.woerter tr,.woerter td{display:block;width:auto}
  .woerter tr{padding:14px 0;border-bottom:1px solid rgba(0,0,0,.07)}
  .woerter td{padding:0;border:0}
  .woerter .wort{font-size:26px;white-space:normal;margin-bottom:2px}
  .woerter .umschrift,.woerter .sprech{display:inline-block;white-space:normal}
  .woerter .umschrift::after{content:"·";margin:0 8px;font-style:normal}
  .woerter td:last-child{margin-top:6px}
  .legende dl{grid-template-columns:1fr;gap:2px}
  .legende dt{margin-top:10px}
}

/* Hoerknopf: steht vor dem Wort, weil er zum Wort gehoert und nicht zur Uebersetzung. */
.woerter .wort{display:flex;align-items:center;gap:10px}
.hoeren{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid rgba(0,0,0,.18);border-radius:50%;background:transparent;color:var(--primary);cursor:pointer;
  padding:0;transition:background .15s,border-color .15s,transform .15s}
.hoeren:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.3)}
.hoeren.spielt{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.06)}
@media(max-width:760px){.woerter .wort{gap:12px}.hoeren{width:34px;height:34px}}

/* ---------- Aufmacher: Seitenanfang ohne Foto ----------
   Farbfläche, eine große Zeile, sonst nichts. Wer damit öffnet, hat eine andere erste Bildschirmseite als
   wer mit einem Bild öffnet — das ist der Sinn des Bausteins. Die Farben stellt das Profil. */
.aufmacher{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(380px,46vw,620px);padding:clamp(80px,9vw,130px) var(--seiten-inset) clamp(48px,6vw,80px);
  background:var(--aufmacher-grund,var(--background));color:var(--aufmacher-schrift,var(--foreground));
  overflow:hidden;margin:0 0 clamp(28px,4vw,52px)}
.aufmacher .eyebrow{margin:0 0 18px}
.aufmacher h1{font:600 clamp(42px,7.4vw,108px)/.94 Georgia,serif;letter-spacing:-.045em;margin:0 0 26px;
  max-width:min(20ch,86%)}
.aufmacher h1 em{font-style:italic;color:var(--aufmacher-akzent,var(--primary))}
.aufmacher-text{font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:44ch;margin:0 0 26px;opacity:.9}
.aufmacher .text-link{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;
  padding-bottom:5px;border-bottom:1px solid currentColor;text-decoration:none;color:inherit;
  font-weight:600;letter-spacing:.02em}
.aufmacher-mittel{min-height:clamp(300px,34vw,440px)}
.aufmacher-knapp{min-height:0;padding-top:clamp(70px,8vw,104px);padding-bottom:clamp(34px,4vw,52px)}

/* ---------- Band: eine Aussage über die volle Breite ----------
   Unterbricht das Raster aus Karten und gibt der Seite Rhythmus. */
.band{margin:clamp(32px,5vw,64px) calc(-1 * var(--seiten-inset));
  padding:clamp(52px,7vw,96px) var(--seiten-inset)}
.band-text{max-width:52ch}
.band h2{font:600 clamp(28px,3.6vw,52px)/1.06 Georgia,serif;letter-spacing:-.035em;margin:0 0 16px}
.band h2 em{font-style:italic;color:var(--band-akzent,var(--primary))}
.band p{font-size:clamp(15px,1.2vw,18px);line-height:1.65;margin:0 0 20px;opacity:.9}
.band .text-link{display:inline-flex;gap:10px;align-items:center;padding-bottom:5px;
  border-bottom:1px solid currentColor;text-decoration:none;color:inherit;font-weight:600}
.band-dunkel{background:var(--band-dunkel,#1F3A46);color:#f7f5ef}
.band-dunkel .eyebrow{color:var(--band-dunkel-oben,#E8B950)}
.band-akzent{background:var(--band-grund,var(--primary));color:#fff}
.band-akzent .eyebrow{color:rgba(255,255,255,.75)}
.band-akzent h2 em{color:#fff;opacity:.72}
.band-ruhig{background:var(--band-ruhig,rgba(0,0,0,.05))}

@media(max-width:760px){
  .aufmacher{min-height:0;padding-top:64px;padding-bottom:40px}
  .aufmacher h1{max-width:none}
  .band{margin-left:calc(-1 * var(--seite-rand));margin-right:calc(-1 * var(--seite-rand));
    padding-left:var(--seite-rand);padding-right:var(--seite-rand)}
}

/* Die Kulisse liegt hinter dem Text und läuft nach rechts aus dem Bild — die Textspalte bleibt links
   frei, damit nichts über der Schrift liegt. Sie ist Schmuck: nicht auswählbar, nicht anklickbar. */
.aufmacher .kulisse{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;overflow:hidden}
/* Das Band liegt am unteren Rand über die volle Breite und wird nie beschnitten — der Himmel darüber
   ist die Fläche selbst. Vorher füllte die Zeichnung die ganze Fläche und verlor bei jedem anderen
   Seitenverhältnis ihren oberen Teil: bei 2020 px waren es 243 Punkte, also Sonne und Brunnenbalken. */
.aufmacher .kulisse svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block}
.aufmacher>*:not(.kulisse){position:relative;z-index:1}
.aufmacher .aufmacher-text{max-width:40ch}
@media(max-width:760px){
  /* Auf dem Telefon steht die Landschaft unter dem Text, nicht dahinter — sonst liest man auf Gräsern. */
  .aufmacher .kulisse{inset:auto 0 0 0;height:46%}
  .aufmacher{padding-bottom:calc(46% + 24px)}
}

/* Das Fenster im Band: ein rundes Bild statt einer gezeichneten Scheibe. Es liegt hinter dem Text und
   wird zum Rand hin weicher, damit es nicht wie ein aufgeklebter Kreis wirkt. */
.band-fenster{position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:0;
  width:min(380px,40vw);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.28);pointer-events:none}
.band-fenster::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 58%, var(--band-saum,rgba(51,35,27,.55)) 100%)}
.band-text{position:relative;z-index:1}
@media(max-width:860px){
  .band-fenster{position:relative;right:auto;top:auto;transform:none;width:min(240px,60vw);
    margin:0 0 22px auto;display:block}
  .band{display:flex;flex-direction:column}
  .band-text{order:1}
}

/* Wortmarke in der Mitte: die Navigation links, die Werkzeuge rechts, der Name dazwischen.
   Eine Ausprägung, keine Vorgabe — wer sie nicht setzt, behält die Marke links. */
.topbar-mitte{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.topbar-mitte .brand{grid-column:2;grid-row:1;flex-direction:column;align-items:center;text-align:center;gap:2px}
.topbar-mitte .brand small{letter-spacing:.2em}
.topbar-mitte nav{grid-column:1;grid-row:1;justify-self:start}
.topbar-mitte .basket{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:860px){
  .topbar-mitte{grid-template-columns:1fr auto;gap:12px}
  .topbar-mitte .brand{grid-column:1/-1;grid-row:1}
  .topbar-mitte nav{grid-column:1;grid-row:2;justify-self:start}
  .topbar-mitte .basket{grid-column:2;grid-row:2}
}

/* ---------- Kacheln: Einstiege als Flächen ----------
   Beide fremden Entwürfe hatten sie — Japan als vier Felder, Ungarn als nummerierte Karten. Es ist
   derselbe Baustein; die Farben und Formen kommen aus dem Profil. */
.kacheln{display:grid;gap:clamp(14px,1.8vw,26px);margin:clamp(30px,4vw,56px) 0}
.kacheln-vier{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.kacheln-drei{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.kacheln-zwei{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.kacheln-kopf{grid-column:1/-1;margin:0 0 4px}
.kacheln-kopf h2{margin:0;font:600 clamp(24px,2.6vw,36px)/1.1 Georgia,serif;letter-spacing:-.02em}

.kachel{position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  color:inherit;background:var(--kachel-grund,rgba(0,0,0,.04));border-radius:var(--kachel-rundung,4px);
  transition:transform .18s}
.kachel:hover{transform:translateY(-3px)}
.kachel-bild{display:block;aspect-ratio:4/3;background-size:cover;background-position:center;
  background-color:var(--kachel-flaeche,rgba(0,0,0,.07))}
.kachel-zahl{position:absolute;left:14px;top:12px;font:600 12px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.1em;color:var(--kachel-zahl,#fff);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.kachel-text{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.kachel-text b{font:600 19px/1.25 Georgia,serif;letter-spacing:-.01em}
.kachel-text small{font-size:14px;line-height:1.5;color:var(--muted-foreground)}
.kachel-text em{margin-top:6px;font-style:normal;font-weight:600;font-size:13px;letter-spacing:.02em;
  color:var(--primary);display:inline-flex;gap:8px;align-items:center}