/* 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 */
/* Der Kopf steht ueber der Seite, nicht darin. Ohne diese Zeile liegt das Klappmenue unter dem
   Buehnenbild, sobald eine Kueche ihren Aufmacher stapelt — Christoph am 10.10.2026 bei Iberien:
   Das Menue oeffnete sich und war unterhalb der Kopfleiste abgeschnitten. Ein Menue, das sich
   hinter den Inhalt legt, ist kaputt, und zwar bei jeder Kueche, die kuenftig stapelt. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px var(--seiten-inset);background:#f7f5ef;position:relative;z-index:60}
.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}
/* Herz und Einkaufsliste sind eine Gruppe: Im mittigen Entwurf steht die Marke nur
   dann mittig, wenn die rechte Seite ein einziges Element ist (11.10.2026). */
.topbar-rechts{display:flex;align-items:center;gap:14px}
.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}
/* Ein Menüpunkt, darunter die Sprachen. Vier Wörterseiten nebeneinander waren vier Punkte für
   eine Sache — „sonst haben wir bald ein hauptmenü für das wir breitere seiten finden müssen"
   (Christoph, 10.10.2026). */
.menugruppe{position:relative}
.menugruppe>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  border-bottom:1px solid #793b37;padding:10px 0}
.menugruppe>summary::-webkit-details-marker{display:none}
.menugruppe-pfeil{font-size:12px;line-height:1;transition:transform .15s}
.menugruppe[open] .menugruppe-pfeil{transform:rotate(180deg)}
.menugruppe-auswahl{position:absolute;top:calc(100% + 12px);right:0;z-index:30;display:grid;gap:2px;
  min-width:190px;padding:8px;border:1px solid #d8ddcf;border-radius:7px;
  background:var(--background);color:var(--foreground);box-shadow:0 14px 34px rgba(0,0,0,.15)}
.topbar nav .menugruppe-auswahl a{border-bottom:0;padding:9px 11px;border-radius:4px;white-space:nowrap}
.topbar nav .menugruppe-auswahl a:hover,.topbar nav .menugruppe-auswahl a:focus-visible{background:rgba(0,0,0,.06)}
/* Auf der Wörterseite: die Geschwistersprachen als Reiter. */
.sprachregister{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.sprachregister a,.sprachregister .ist-hier{padding:8px 14px;border:1px solid #d8ddcf;border-radius:100px;
  font-size:14px;line-height:1.2}
.sprachregister a:hover{border-color:currentColor}
.sprachregister .ist-hier{background:var(--foreground);border-color:var(--foreground);color:var(--background)}
.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:12px}
.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:12px;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:12px}
.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:12px;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}
.mehr-zeile{display:flex;justify-content:center;margin:32px 0 0}
.mehr-zeile b{font-weight:600;color:#677267;margin-left:6px}
.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),.topbar nav .menugruppe{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:10px;letter-spacing:.16em}.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}
/* Die Spaltenzahl folgt der Zahl der Rezepte, damit unten keines allein stehen bleibt: sechs stehen
   als zwei Reihen zu dritt, vier als zwei Paare. Mit auto-fit hing bei sechs das letzte als Waise. */
.today-recipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:26px 22px}
.today-recipes[data-spalten="6"]{grid-template-columns:repeat(3,1fr)}
.today-recipes[data-spalten="4"]{grid-template-columns:repeat(4,1fr)}
.today-recipes[data-spalten="3"]{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.today-recipes[data-spalten]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.today-recipes[data-spalten]{grid-template-columns:1fr}}
/* Jede Kachel ist eine Spalte, die sich streckt: So sitzt die Zeile mit Zeit und Personen bei allen
   auf derselben Hoehe, auch wenn ein Titel zwei Zeilen braucht. Vorher rutschte sie mit. */
.today-recipes a{display:flex;flex-direction:column;gap:6px;color:inherit;height:100%}
/* Blätterknoepfe im Feld der Namensgerichte: klein, rechts neben der Überschrift. */
.today-heading{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.today-blaettern{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;opacity:.75}
.today-blaettern button{border:1px solid currentColor;background:none;color:inherit;border-radius:50%;
  width:28px;height:28px;line-height:1;cursor:pointer;font-size:14px}
.today-blaettern button:hover{background:currentColor;color:var(--seite-grund,#f7f5ef)}
.today-recipes a[hidden]{display:none}
/* Karte im Feld der Namensgerichte: oben das Gericht, darunter der Mensch, nach dem es heisst.
   Das Portraet ist rund und klein — es begleitet das Gericht, es ersetzt es nicht. */
.today-kopf{display:block;width:58px;height:58px;border-radius:50%;background-size:cover;
  background-position:center top;margin:12px 0 6px;border:1px solid rgba(0,0,0,.12)}
.today-daten{display:block;font-size:11px;letter-spacing:.06em;opacity:.55;margin-top:-2px}
.today-recipes a em.today-person{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:-2px}
.today-recipes i{font-style:normal;font-size:14px;line-height:1.45;opacity:.82}
.today-recipes small{margin-top:auto;padding-top:4px}
.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:60;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. */
/* Das Band traegt ein rund beschnittenes Bild (.band-fenster), und das ist absolut gesetzt. Ohne
   position:relative hier bezieht es sich auf den Anfang des Dokuments statt auf das Band: Bei
   Hochland schwebte der Kreis mitten ueber dem Rezept des Tages, weil top:50% dann die halbe
   Fensterhoehe meint (Christoph am 28.09.2026: „bei kleinem Format wandert der runde Kreis ueber
   das Rezept"). Bei Japan fiel es nicht auf, weil dessen Band zufaellig an der richtigen Stelle lag. */
.band{position:relative;margin:clamp(32px,5vw,64px) calc(-1 * var(--seiten-inset));
  padding:clamp(52px,7vw,96px) var(--seiten-inset)}
.band-text{max-width:52ch}
/* Die Randnotiz des Bandes gehoert in das Band hinein. Die allgemeine Regel setzt sie
   absichtlich neben die Textspalte, in den Seitenrand — beim Band ist dort aber die
   Farbflaeche zu Ende, und die Notiz stand halb daneben wie ein Ausreisser (Christoph am
   08.10.2026). Innerhalb des Bandes gehoert sie an dessen rechten Rand. */
.band .randnotiz{right:clamp(16px,2.5%,48px);left:auto;top:auto;bottom:clamp(20px,12%,64px);
  width:min(16ch,22%);max-width:none;text-align:right}
.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))}

/* Das Band als Gebietsabschnitt: kein Farbfeld ueber die volle Breite, sondern zwei Spalten
   innerhalb des Satzspiegels — links ein hohes Bild mit Bildunterschrift, rechts der Text mit
   den Gebieten (Iberiens Entwurf, 09.10.2026). Darum nimmt es die Randmarge des Bandes zurueck. */
.band-regionen{margin-left:0;margin-right:0;padding-left:0;padding-right:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px);align-items:center}
.regionen-bild{position:relative;margin:0;min-height:490px;align-self:stretch;overflow:hidden}
.regionen-foto{position:absolute;inset:0;background-size:cover;background-position:35% center}
.regionen-bild::after{content:"";position:absolute;inset:50% 0 0;
  background:linear-gradient(transparent,rgba(21,34,21,.54))}
.regionen-bildtext{position:absolute;bottom:30px;left:30px;z-index:1;color:#fff;
  font:400 clamp(27px,2.7vw,38px)/1.15 Georgia,serif;letter-spacing:-.03em}
.regionen-bildtext em{font-style:italic;color:#ffefd5}
.regionen-text{max-width:none}
.regionen-pillen{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 25px}
.regionen-pillen .pill{min-height:40px;padding:8px 18px;border:1px solid var(--linie,rgba(0,0,0,.18));
  border-radius:100px;background:none;color:inherit;font-size:clamp(12px,.38vw,14px);line-height:1.3;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.regionen-pillen .pill:hover{background:rgba(0,0,0,.06)}
.regionen-pillen .pill.active{background:var(--pille-grund,var(--primary));color:#fff;
  border-color:var(--pille-grund,var(--primary))}
.regionen-hinweis{border-top:1px solid var(--linie,rgba(0,0,0,.18));padding-top:23px}
.regionen-hinweis .eyebrow{color:var(--primary);margin-bottom:10px}
.regionen-hinweis p:not(.eyebrow){font-size:clamp(13.5px,.44vw,16px);margin-bottom:20px;min-height:45px}
@media(max-width:900px){
  .regionen-bild{min-height:460px}
}
@media(max-width:760px){
  .band-regionen{grid-template-columns:1fr;gap:27px}
  .regionen-bild{min-height:0;height:350px}
  .regionen-foto{background-position:30% 75%}
  .regionen-bildtext{left:23px;bottom:26px}
  .regionen-hinweis p:not(.eyebrow){min-height:0}
}

@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)}
}

/* Randnotizen: kurze Sätze in den Aussenspalten, wie mit der Hand danebengeschrieben. Sie stehen im
   Profil, nicht im Code — jede Küche bekommt ihre eigenen oder gar keine. Auf schmalen Bildschirmen
   gibt es keine Aussenspalte, dort verschwinden sie. */
.randnotiz{position:absolute;z-index:2;max-width:13ch;white-space:pre-line;pointer-events:none;
  font-style:italic;font-size:13px;line-height:1.5;opacity:.68}
.randnotiz-links{left:calc(-1 * var(--seiten-inset,24px) + 6px);top:18%}
.randnotiz-rechts{right:calc(-1 * var(--seiten-inset,24px) + 6px);top:22%;text-align:right}
@media(max-width:1500px){.randnotiz{display:none}}

/* Geteilter Aufmacher: Text links, Bild rechts daneben — und zwar als Fries.

   Ein Fries, nicht zwei Einzelteile: Die Flaeche hat eine feste Proportion, und alles darin sitzt in
   Prozent dieser Flaeche (cqw = Prozent der Friesbreite). So behaelt die Komposition ihre Anordnung in
   jeder Fensterbreite und wird als Ganzes groesser und kleiner. Die erste Fassung war ein Raster aus
   zwei Spalten, beide gegen die Fensterbreite gerechnet — auf breiten Schirmen liefen Text und Bild
   auseinander. Christoph am 28.09.2026: „du musst das Titelbild unbedingt als Fries gestalten — es hat
   schon wieder breitenprobleme und driftet auseinander." Derselbe Befund wie beim japanischen Kopf im
   September, und dieselbe Loesung. Die Proportion und die Plaetze darf jede Kueche in ihrem eigenen
   Stilblatt verschieben; was hier steht, ist die tragende Mechanik. */
.aufmacher-geteilt{position:relative;overflow:hidden;container-type:inline-size;display:block;
  width:min(var(--seite-breite), 100% - 2 * var(--seite-rand));margin-inline:auto;
  aspect-ratio:1440 / 520;min-height:0;padding:0}
.aufmacher-geteilt > .eyebrow,
.aufmacher-geteilt > h1,
.aufmacher-geteilt > .aufmacher-text,
.aufmacher-geteilt > .text-link{position:relative;z-index:1;width:44%;max-width:none}
.aufmacher-geteilt > .eyebrow{padding-top:11%;margin-block:0 2.2%;font-size:clamp(11px,.82cqw,13px);
  letter-spacing:.14em}
.aufmacher-geteilt > h1{font-size:clamp(26px,3.9cqw,58px);line-height:1.02;margin-block:0}
.aufmacher-geteilt > .aufmacher-text{font-size:clamp(13px,1.1cqw,18px);line-height:1.7;margin-block:0 3.4%}
.aufmacher-geteilt > .text-link{font-size:clamp(12.5px,.95cqw,15px)}
.aufmacher-bild{position:absolute;right:0;top:0;bottom:0;width:52%;min-height:0;
  background-size:cover;background-position:center;border-radius:2px;z-index:0}
/* Die Randnotiz gehoert in den Fries, nicht an den Fensterrand. */
.aufmacher-geteilt .randnotiz{position:absolute;right:1.5%;top:8%;width:11%;max-width:none;
  font-size:clamp(12px,.8cqw,14px);text-align:right;z-index:2}

/* Auf schmalen Schirmen traegt der Fries nicht: 520 Punkte Hoehe auf 380 Breite waere ein Streifen.
   Dort wird daraus wieder ein gewoehnlicher Kopf — Text, darunter das Bild. */
@media(max-width:860px){
  .aufmacher-geteilt{aspect-ratio:auto;container-type:normal;padding-block:32px}
  .aufmacher-geteilt > .eyebrow,
  .aufmacher-geteilt > h1,
  .aufmacher-geteilt > .aufmacher-text,
  .aufmacher-geteilt > .text-link{width:auto}
  .aufmacher-geteilt > .eyebrow{padding-top:0;margin-bottom:12px}
  .aufmacher-geteilt > h1{font-size:32px}
  .aufmacher-bild{position:relative;right:auto;top:auto;bottom:auto;width:100%;display:block;
    aspect-ratio:16/9;margin-top:22px}
  .aufmacher-geteilt .randnotiz{display:none}
}

/* 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}
/* Kulisse und gezeichneter Schmuck liegen hinter dem Text und bringen ihre eigene Lage mit. Ohne das
   zweite :not() standen die Schmuckbilder im Textfluss und schoben die Ueberschrift 1340 Punkte nach
   unten — am 2026-09-26 auf der japanischen Seite zu sehen. */
/* Der Text im Aufmacher liegt ueber der Kulisse. Das Zierzeichen gehoert aber zur Zeichnung, nicht zum
   Text: Es hier mitzuheben machte es zu einem Element im Fluss, und es lief 1087 Pixel breit quer durch
   den japanischen Fries (gemessen am 27.09.2026).
   Achtung bei Aenderungen: Diese Regel ist spezifischer als ein schlichtes .zier-held im Profil - wer
   dort etwas anderes braucht, kommt gegen sie nicht an. */
/* .aufmacher-bild gehoert in dieselbe Ausnahmeliste: Es ist Hintergrund, keine Zeile. Ohne den
   Ausschluss gewinnt diese Regel (vier Klassen) gegen jede Angabe der einzelnen Auspraegung und
   stellt das Foto auf position:relative — ein leeres Feld von null Hoehe. Beim Fries fuer Iberien
   war genau das der Grund, warum die Terrasse unsichtbar blieb (07.10.2026) - und die
   Randnotiz schwamm aus demselben Grund mitten im Text, statt am Rand zu stehen. */
/* Diese Regel hebt die Kinder des Aufmachers ueber das Bild. Wer selbst absolut sitzt, darf
   nicht dabei sein — sonst faellt er in den Fluss zurueck und steht irgendwo. Die Liste ist
   schon dreimal gewachsen: Buehnenbild, Randnotiz, und jetzt Schleier, Siegel und Notiz des
   mexikanischen Plakats samt dem KI-Hinweis. */
.aufmacher>*:not(.kulisse):not(.schmuck):not(.zier):not(.aufmacher-bild):not(.randnotiz):not(.plakat-schleier):not(.plakat-siegel):not(.plakat-notiz):not(.ki-motiv){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}

/* Band mit Landkarte: das Bild liegt flaechig dahinter, ein halbdurchsichtiger Schleier darueber,
   die Karte davor. So bleibt die Schrift lesbar und die Landschaft sichtbar (Christoph, 28.09.2026). */
.band-mit-karte{display:grid;grid-template-columns:minmax(0,44ch) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);align-items:center;overflow:hidden}
.band-grund{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  pointer-events:none;user-select:none}
.band-grund::after{content:"";position:absolute;inset:0;
  background:var(--band-schleier,rgba(31,58,70,.82))}
/* Beide Spalten gehoeren in dieselbe Zeile. Die Karte steht im Quelltext vor dem Text; ohne die
   ausdrueckliche Zeile setzt die Automatik den Text darunter statt daneben, und das Band wird
   doppelt so hoch (1308 statt 790 Punkte, gemessen am 28.09.2026). */
.band-mit-karte>.band-text{grid-column:1;grid-row:1}
.band-karte{position:relative;z-index:1;grid-column:2;grid-row:1;justify-self:stretch;width:100%;
  /* Die Karte darf Platz nehmen — sie ist hier der Inhalt, nicht die Verzierung (Christoph,
     28.09.2026: „ich finde es sehr schön, würde aber die Karte etwas grösser machen"). */
  max-width:min(860px,58vw)}
.band-karte .landkarte{width:100%;height:auto;display:block}
/* Die Flaechen sind anklickbar; wo es keine Rezepte gibt, bleiben sie ruhig stehen. */
.band-karte .landkarte path{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.45);stroke-width:1;
  cursor:pointer;transition:fill .15s}
.band-karte .landkarte path:hover,.band-karte .landkarte path.aktiv{fill:rgba(255,255,255,.38)}
.band-karte .landkarte path.leer{cursor:default;fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.22)}
.band-karte .landkarte path.leer:hover{fill:rgba(255,255,255,.06)}
@media(max-width:860px){
  /* Auf dem Telefon steht die Karte unter dem Text, nicht daneben. */
  .band-mit-karte{grid-template-columns:1fr}
  .band-mit-karte>.band-text{grid-column:1;grid-row:1}
  .band-karte{grid-column:1;grid-row:2}
}
@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. */
/* Die mittige Leiste bekommt eine eigene Breite. Ueber die ganze Seite gespannt standen Navigation,
   Wortmarke und Einkaufsliste bei 1600 Punkten mit 429 und 477 Punkten Luft dazwischen - drei Dinge
   ohne Beziehung (Christoph am 27.09.2026). Der Streifen selbst bleibt randlos, nur sein Inhalt rueckt
   zusammen. */
.topbar-mitte{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
/* Zwei Klassen, damit diese Breite auch gegen ein padding-Kuerzel aus dem Profil steht: Japan setzt
   dort padding:22px 5% 16px, und ein Kuerzel loescht sonst still den Innenrand wieder. */
.topbar.topbar-mitte{padding-inline:max(var(--seiten-inset),calc((100% - 1120px) / 2))}
.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}
/* Das margin-left:auto aus der gewoehnlichen Leiste schiebt die Navigation auch im Raster nach rechts -
   dann steht sie an der Wortmarke statt am Rand, und die Mitte ist keine Mitte mehr. */
.topbar-mitte nav{grid-column:1;grid-row:1;justify-self:start;margin-left:0}
.topbar-mitte .topbar-rechts{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 .topbar-rechts{grid-column:2;grid-row:2;justify-self:end}
}

/* ---------- 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}
/* Die Ausprägung sagt, wie viele nebeneinander stehen - und das tat sie bisher nicht: Sie setzte nur
   eine Mindestbreite, und wie viele hineinpassten, entschied das Fenster. Vier Kacheln unter der
   Überschrift "Vier Wege an den Tisch" standen so als drei plus eine da. */
.kacheln-vier{grid-template-columns:repeat(4,1fr)}
.kacheln-drei{grid-template-columns:repeat(3,1fr)}
.kacheln-zwei{grid-template-columns:repeat(2,1fr)}
.kacheln-sechs{grid-template-columns:repeat(6,1fr)}
@media(max-width:1400px){.kacheln-sechs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.kacheln-vier,.kacheln-drei{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.kacheln-vier,.kacheln-drei,.kacheln-zwei,.kacheln-sechs{grid-template-columns:repeat(2,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}

/* Freigestellte Gestaltungsbilder: eingepasst, nie beschnitten. Ein Bild ohne Hintergrund hat keinen
   Rand zu verlieren - das runde Fenster schnitt die japanische Schale mittendurch. */
.band-fenster.freigestellt,.kachel-bild.freigestellt{background-size:contain;background-repeat:no-repeat;
  background-position:center}
.band-fenster.freigestellt{aspect-ratio:3/2;border-radius:0;background-color:transparent}
.band-fenster.freigestellt::after{display:none}

/* Freigestellte Rezeptbilder: Sie haben keinen Rand zu verlieren, also werden sie eingepasst und
   sitzen auf dem Papier der Karte statt auf ihrem eigenen Hintergrund. */
[data-bilder="freigestellt"] .food img,
[data-bilder="freigestellt"] .tagesbild img,
[data-bilder="freigestellt"] .detail-image,
[data-bilder="freigestellt"] .hero-tagesrezept .hero-art img,
[data-bilder="freigestellt"] .hero-vollbild .hero-art img{object-fit:contain}
[data-bilder="freigestellt"] .today-food{background-size:contain}

/* ---------- Die Person hinter dem Gericht ----------
   Steht am Fuß des Rezepts, nach den Allergenen: Wer kochen will, kocht erst; wer wissen will, woher
   der Name kommt, liest danach. Das Bild ist ein echtes Porträt und trägt darum seinen Nachweis. */
.person{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,32px);align-items:start;
  margin-top:clamp(28px,4vw,44px);padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--linie,rgba(0,0,0,.12))}
.person img{width:clamp(110px,14vw,180px);height:auto;border-radius:3px;filter:grayscale(1) contrast(1.05);
  background:rgba(0,0,0,.04)}
.person .eyebrow{margin:0 0 6px}
.person h2{font-size:clamp(17px,1.5vw,21px);margin:0 0 10px;font-weight:600}
.person-text p{margin:0 0 10px;line-height:1.65;max-width:62ch}
.person-belege{font-size:13px;opacity:.72}
.person-belege a{color:inherit}
@media(max-width:640px){.person{grid-template-columns:1fr}
  .person img{width:min(150px,45%)}}

/* ---------- Aus unseren Küchen: Gerichte der Schwestersammlungen ----------
   Steht nach dem Rezept, nicht darin. Wer hier ankommt, hat gelesen und ist in Stimmung für das
   nächste Gericht — darum ein Bild und ein Name, kein Seitenname. */
.entdecken{max-width:var(--seite-breite);margin:clamp(36px,5vw,64px) auto 0;
  padding:clamp(26px,3.5vw,42px) var(--seiten-inset) 0;border-top:1px solid var(--linie,rgba(0,0,0,.12))}
.entdecken .eyebrow{margin:0 0 6px}
.entdecken h2{margin:0 0 clamp(16px,2vw,24px);font-size:clamp(20px,2vw,27px);font-weight:600}
.entdecken-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.entdecken-karte{display:block;text-decoration:none;color:inherit}
.entdecken-karte img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;
  background:rgba(0,0,0,.05)}
[data-bilder="freigestellt"] .entdecken-karte img{object-fit:contain}
.entdecken-kueche{display:block;margin:10px 0 3px;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.6}
.entdecken-karte b{display:block;font-size:clamp(15px,1.3vw,18px);font-weight:600;line-height:1.3}
.entdecken-karte small{display:block;margin-top:4px;font-size:13px;line-height:1.5;opacity:.75}
.entdecken-karte:hover b{text-decoration:underline}
@media(max-width:760px){.entdecken-reihe{grid-template-columns:1fr;gap:18px}
  .entdecken-karte{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
  .entdecken-karte img{aspect-ratio:1}
  .entdecken-kueche{margin-top:0}}
@media print{.entdecken{display:none}}

/* ---------- Tagesrezepte: was heute in jeder unserer Küchen auf den Tisch kommt ---------- */
.partnerseite .beschreibung{max-width:56ch}
.tageskarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(24px,3vw,40px)}
.tageskarte{display:flex;flex-direction:column}
.tageskarte img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;display:block;
  background:rgba(0,0,0,.05)}
[data-bilder="freigestellt"] .tageskarte img{object-fit:contain}
.tageskarte .eyebrow{margin:14px 0 4px}
.tageskarte h2{margin:0 0 6px;font-size:clamp(18px,1.6vw,23px);font-weight:600;line-height:1.25}
.tageskarte-text{margin:0 0 8px;font-size:15px;line-height:1.55;opacity:.85}
.tageskarte-daten{margin:0 0 12px;font-size:13px;opacity:.6}
.tageskarte .text-link{align-self:flex-start;margin-top:auto}
/* Das eigene Gericht steht zuerst und darf sich zeigen. */
.tageskarte-eigen h2{font-size:clamp(20px,1.9vw,26px)}

/* ---------- Diese Sammlung gehört zu einer Reihe ----------
   Am Fuß der Titelseite, nach den Rezepten. Wer herkommt, will erst kochen; die Einordnung
   kommt danach. Ruhig gesetzt, kein Kasten, der sich vordrängt. */
.partnerhinweis{max-width:var(--seite-breite);margin:clamp(40px,5vw,72px) auto 0;
  padding:clamp(28px,3.6vw,46px) var(--seiten-inset) 0;border-top:1px solid var(--linie,rgba(0,0,0,.12))}
.partnerhinweis > div{max-width:64ch}
.partnerhinweis .eyebrow{margin:0 0 6px}
.partnerhinweis h2{margin:0 0 12px;font-size:clamp(19px,1.8vw,25px);font-weight:600}
.partnerhinweis p{margin:0 0 12px;line-height:1.65}
.partnerhinweis .text-link{margin-top:4px}
/* Daneben, was nebenan heute kocht. Die Schwestern melden ihr Rezept des Tages ohnehin samt
   Quadratbild — ohne sie blieb die rechte Haelfte der Zeile leer (Christoph, 10.10.2026). */
.partnerhinweis-karten{display:grid;align-items:start;gap:clamp(24px,3vw,52px);
  grid-template-columns:minmax(0,1fr) clamp(320px,38vw,560px)}
.partner-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.partner-karte{display:block;text-decoration:none;color:inherit}
.partner-karte img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:3px;background:rgba(0,0,0,.05)}
.partner-kueche{display:block;margin:9px 0 1px;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;opacity:.6}
.partner-gericht{display:block;font-size:15px;line-height:1.35}
.partner-karte:hover .partner-gericht,
.partner-karte:focus-visible .partner-gericht{text-decoration:underline}
@media(max-width:880px){
  .partnerhinweis-karten{grid-template-columns:minmax(0,1fr)}
  .partner-reihe{width:100%;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}

/* Aufmacher „fries": die Schlagzeile im Bild, über die volle Breite.

   Dieselbe Mechanik wie beim geteilten Aufmacher — feste Proportion, alles darin in Prozent der
   Friesbreite (cqw) — nur liegt der Text hier nicht neben dem Bild, sondern darin. Christophs
   Entwurf für die iberische Küche zeigt genau das: eine weite Landschaft, die Überschrift ruhig in
   ihrer Mitte, viel Freiraum ringsum. Der Entwurf verlangt ausdrücklich „ruhige Fläche in der
   Bildmitte für die Überschrift"; der Schleier darunter hält die Schrift lesbar, ohne das Bild
   zuzudecken.

   Was hier steht, ist die tragende Mechanik. Proportion, Farben und die Lage des Textes verschiebt
   jede Küche in ihrem eigenen Stilblatt. */
.aufmacher-fries{position:relative;overflow:hidden;container-type:inline-size;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:100%;margin-inline:0;padding:0;min-height:0;
  /* Hoehe gesetzt, nicht aus der Breite gerechnet. Mit aspect-ratio wuchs der Fries mit dem
     Fenster: auf einem 2560 Punkte breiten Schirm fast tausend Punkte hoch, also ein ganzer
     Monitor fuer eine Ueberschrift (Christoph am 08.10.2026). Die Schriftgroessen haengen
     weiter an der Breite (cqw) und sind nach oben gedeckelt. */
  height:var(--fries-hoehe, clamp(320px, 38vw, 560px))}
.aufmacher-fries > .eyebrow,
.aufmacher-fries > h1,
.aufmacher-fries > .aufmacher-text,
.aufmacher-fries > .text-link{position:relative;z-index:2;width:min(62%, 62cqw);max-width:none;
  align-self:var(--fries-lage, center);color:var(--fries-schrift, inherit)}
.aufmacher-fries > .eyebrow{margin-block:0 1.6%;font-size:clamp(11px,.82cqw,14px);letter-spacing:.14em}
.aufmacher-fries > h1{font-size:clamp(28px,4.4cqw,66px);line-height:1.04;margin-block:0 2%;
  letter-spacing:-.03em}
.aufmacher-fries > .aufmacher-text{font-size:clamp(13px,1.15cqw,19px);line-height:1.7;margin-block:0 2.6%}
.aufmacher-fries > .text-link{font-size:clamp(12.5px,.95cqw,15px);width:auto;
  align-self:var(--fries-lage, center)}
/* Das Bild füllt den Fries; der Schleier liegt dazwischen, nicht darüber. */
.aufmacher-fries .aufmacher-bild{position:absolute;inset:0;width:100%;border-radius:0;z-index:0}
.aufmacher-fries::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--fries-schleier, radial-gradient(ellipse at center, rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 78%))}
.aufmacher-fries .randnotiz{position:absolute;right:2%;top:auto;bottom:7%;width:13%;max-width:none;
  font-size:clamp(12px,.8cqw,14px);text-align:right;z-index:3}

/* Schmale Schirme: aus dem Fries wird wieder ein gewöhnlicher Kopf. 600 Punkte Höhe auf 380 Breite
   wäre ein Streifen, in dem weder Bild noch Schlagzeile etwas zeigen. */
@media(max-width:860px){
  .aufmacher-fries{aspect-ratio:auto;container-type:normal;padding:clamp(34px,9vw,60px) var(--seiten-inset)}
  .aufmacher-fries > .eyebrow,
  .aufmacher-fries > h1,
  .aufmacher-fries > .aufmacher-text,
  .aufmacher-fries > .text-link{width:auto}
  .aufmacher-fries > h1{font-size:clamp(30px,8vw,46px)}
  .aufmacher-fries .randnotiz{display:none}
}

/* Aufmacher „tisch": Schlagzeile links auf Papier, Foto rechts — nach Christophs Gestaltungspaket
   „Mesa Ibérica" vom 09.10.2026.

   Dessen Begründung nennt den Grund, an dem der Fries scheiterte: „Titel auf ruhigen Flächen, keine
   kontrastarmen Texte direkt auf unruhigen Motiven." Also keine Schrift im Bild — bis auf einen
   Satz unten links, der auf der ruhigen Mauer sitzt und einen Verlauf unter sich hat.

   Die Masse stammen aus dem Paket: zwei Spalten 44/56, Einstieg höchstens 1600 breit, Schlagzeile
   zwischen 66 und 104 Punkten, Bildausschnitt bei 47 Prozent der Breite. Anders als beim Fries
   hängt hier nichts an der Fensterbreite, was in die Höhe wirkt — das war der Fehler, durch den der
   Fries auf breiten Schirmen einen ganzen Monitor einnahm. */
/* Derselbe Satzspiegel wie der Inhalt darunter: Der Aufmacher steht ausserhalb von <main>, also
   bildet er dessen Breite und Rand selbst nach. Vorher war er 1600 breit und in das Fenster
   zentriert, der Inhalt 1280 in den Satzspiegel — auf einem breiten Schirm stand er rechts
   deutlich ueber, und jeder Bildblock fing woanders an (Christoph am 09.10.2026). */
.aufmacher-tisch{display:grid;grid-template-columns:44% 56%;min-height:640px;
  max-width:calc(var(--seite-breite) + 2 * var(--seite-rand));margin-inline:auto;width:100%;
  padding:0 var(--seite-rand);align-items:stretch;background:var(--papier,#f8f5ee)}
.aufmacher-tisch > .tisch-text{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;min-width:0;padding:74px 35px 58px 0}
.aufmacher-tisch .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 26px}
/* Normalschnitt, nicht fett: Das Paket setzt die Schlagzeile in Georgia regular. Fett ist rund
   acht Prozent breiter — genug, damit „Der Süden." nicht mehr in die Spalte passt und die
   Zeile mitten im Wortpaar umbricht (Christoph am 09.10.2026). */
.aufmacher-tisch h1{font:400 clamp(48px,6.7vw,104px)/.98 Georgia,serif;letter-spacing:-.065em;
  margin:0;max-width:none}   /* der Tischkopf setzt seine Zeilen selbst — keine 86-Prozent-Bremse */
.aufmacher-tisch .aufmacher-text{font-size:clamp(15px,.49vw,18px);line-height:1.65;margin:28px 0 26px;
  max-width:38ch}
.aufmacher-tisch .knopf{align-self:flex-start}
/* Die Bildspalte: das Foto füllt sie, der Satz sitzt unten links auf einem weichen Verlauf. */
.aufmacher-tisch > .tisch-bild{position:relative;overflow:hidden;margin:0;min-height:640px}
.aufmacher-tisch .aufmacher-bild{position:absolute;inset:0;width:100%;border-radius:0;
  background-size:cover;background-position:47% center}
.aufmacher-tisch > .tisch-bild::after{content:"";position:absolute;inset:50% 0 0;pointer-events:none;
  background:linear-gradient(transparent, rgba(25,26,20,.40))}
.aufmacher-tisch figcaption{position:absolute;z-index:1;left:42px;bottom:48px;color:#fff;
  font:clamp(20px,2.1vw,30px)/1.25 Georgia,serif;letter-spacing:-.02em}
.aufmacher-tisch figcaption .randnotiz{position:static;color:inherit;opacity:1;font-size:inherit;
  max-width:none;white-space:pre-line;display:block;text-align:left}

@media(max-width:1200px){
  .aufmacher-tisch{grid-template-columns:46% 54%;min-height:550px}
  .aufmacher-tisch > .tisch-bild{min-height:550px}
  .aufmacher-tisch > .tisch-text{padding:45px 22px 40px 30px}
}
/* Schmale Schirme: untereinander, das Bild als Streifen darunter. */
@media(max-width:860px){
  .aufmacher-tisch{display:flex;flex-direction:column;min-height:0}
  .aufmacher-tisch > .tisch-text{padding:39px var(--seiten-inset) 37px;min-height:0}
  .aufmacher-tisch h1{font-size:clamp(40px,11vw,70px)}
  .aufmacher-tisch > .tisch-bild{min-height:0;height:340px}
  .aufmacher-tisch .aufmacher-bild{background-position:50% 65%}
  .aufmacher-tisch figcaption{left:24px;bottom:28px}
}
/* Der Knopf des Aufmachers — Masse aus dem Gestaltungspaket: 48 Punkte hoch, 3 Punkte Radius,
   18 Punkte Abstand zwischen Wort und Pfeil. Farbe setzt die Küche. */
.aufmacher-tisch .knopf{display:inline-flex;align-items:center;justify-content:center;gap:18px;
  min-height:50px;padding:14px 24px;border-radius:3px;font-size:clamp(13px,.42vw,15px);font-weight:500;
  line-height:1.4;
  text-decoration:none;background:var(--knopf-grund,var(--primary));color:var(--knopf-schrift,#fff);
  border:1px solid var(--knopf-grund,var(--primary));transition:background .18s,transform .18s}
.aufmacher-tisch .knopf:hover{transform:translateY(-1px)}
.aufmacher-tisch .knopf span{font-size:20px;line-height:1}

/* Rezept des Tages, Ausprägung „tisch" — Masse aus dem Gestaltungspaket vom 09.10.2026:
   zwei Spalten 1.08 zu 1, 70 Punkte Abstand, Bild im Verhältnis 1.32, Schlagzeile 32 bis 47. */
.tagesrezept-tisch{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:70px;
  background:none;padding:0;margin:clamp(40px,6vw,86px) 0}
.tagesrezept-tisch > .tages-bild{position:relative;overflow:hidden;aspect-ratio:1.32;display:block;
  background:var(--sand,#ece4d5)}
.tagesrezept-tisch > .tages-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tagesrezept-tisch > .tages-bild:hover img{transform:scale(1.025)}
/* Die Marke auf dem Bild sagt, was dieser Block ist; die Vorzeile daneben sagt, woher das Gericht kommt. */
.tagesrezept-tisch .tages-marke{position:absolute;top:16px;left:16px;z-index:1;
  background:rgba(248,245,238,.92);color:var(--tinte,#292e27);font-size:11px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;padding:7px 11px;border-radius:3px}
.tagesrezept-tisch .tages-text{min-width:0;padding:0 4px}
.tagesrezept-tisch .eyebrow{margin:0 0 22px}
.tagesrezept-tisch h2{font:600 clamp(32px,3vw,47px)/1.06 Georgia,serif;letter-spacing:-.035em;margin:0}
.tagesrezept-tisch h2 a{color:inherit;text-decoration:none}
.tagesrezept-tisch .beschreibung{max-width:46ch;font-size:clamp(14px,.46vw,17px);line-height:1.7;margin:22px 0 0;
  color:var(--leise,#686c60)}
.tagesrezept-tisch .fakten-zeile{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:clamp(12.5px,.4vw,14px);
  margin:24px 0;color:var(--leise,#686c60)}
.tagesrezept-tisch .fakten-zeile svg{height:15px;width:15px}
.tagesrezept-tisch .tages-knoepfe{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.tagesrezept-tisch .knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 18px;border-radius:3px;font-size:12px;font-weight:500;text-decoration:none;
  background:var(--knopf-grund,var(--primary));color:var(--knopf-schrift,#fff);
  border:1px solid var(--knopf-grund,var(--primary));transition:transform .18s}
.tagesrezept-tisch .knopf:hover{transform:translateY(-1px)}
.tagesrezept-tisch .merken{min-height:48px;padding:12px 18px;border-radius:3px;font-size:12px;
  background:none;border:1px solid var(--linie,#d8d4c8);color:inherit;cursor:pointer}

/* Sechs Wege in einer Reihe — Masse aus dem Paket: sechs Spalten, 18 Punkte Abstand, Bild im
   Verhältnis 0.78, die Zahl gross auf dem Bild, der Name mit einem Pfeil daneben. */
.kacheln-sechs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.kacheln-sechs .kachel{display:block;background:none;border:0;padding:0;text-decoration:none;color:inherit}
.kacheln-sechs .kachel-bild{display:block;position:relative;aspect-ratio:.78;width:100%;
  background-size:cover;background-position:center;background-color:var(--sand,#ece4d5);
  transition:transform .45s;filter:saturate(.86)}
.kacheln-sechs .kachel:hover .kachel-bild{transform:scale(1.045);filter:saturate(1)}
.kacheln-sechs .kachel-zahl{position:absolute;left:12px;bottom:8px;color:#fff;font:32px Georgia,serif;
  text-shadow:0 1px 5px rgba(0,0,0,.53)}
.kacheln-sechs .kachel-text{display:block}
.kacheln-sechs .kachel-text b{display:flex;align-items:center;justify-content:space-between;
  font:400 clamp(19px,.62vw,23px)/1.2 Georgia,serif;letter-spacing:-.04em;margin:16px 0 7px}
.kacheln-sechs .kachel-text small{display:block;font-size:clamp(12.5px,.4vw,15px);line-height:1.55;
  color:var(--leise,#686c60)}
.kacheln-sechs .kachel-text em{display:none}        /* der Pfeil steht neben dem Namen, nicht darunter */
.kacheln-sechs .kachel-text b::after{content:"\2192";font:15px var(--schrift-sans,system-ui);
  color:var(--primary);margin-left:10px}
@media(max-width:1100px){.kacheln-sechs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.kacheln-sechs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:860px){
  .tagesrezept-tisch{grid-template-columns:1fr;gap:26px}
  .tagesrezept-tisch .beschreibung{max-width:none}
}
/* Die Sortierung steht in der Filterzeile neben den Kategorien. */
.sortierung{display:inline-flex;align-items:center;gap:8px;font-size:clamp(12.5px,.4vw,14px);
  color:var(--leise,#686c60)}
.sortierung select{font:inherit;padding:7px 10px;border:1px solid var(--linie,#d8d4c8);border-radius:3px;
  background:var(--papier,#fff);color:inherit}

/* ---------- Merkliste: das Herz am Rezept ----------
   Zwei Listen, zwei Fragen: Die Einkaufsliste beantwortet „was kaufe ich heute", die Merkliste
   „was will ich irgendwann kochen". Das Herz ist offen, solange nichts gemerkt ist, und fuellt
   sich, sobald es gemerkt ist — mehr Rueckmeldung braucht es nicht. */
.recipe{position:relative}
.merken-knopf{position:absolute;top:12px;right:12px;z-index:2;width:35px;height:35px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--papier,#f7f5ef);color:var(--foreground,#233b31);opacity:.9;transition:opacity .2s,color .2s}
.merken-knopf:hover{opacity:1}
.merken-knopf.gemerkt,.merken-rund.gemerkt{color:var(--primary)}
.merken-knopf.gemerkt svg,.merken-rund.gemerkt svg{fill:currentColor}
/* Das Herz im Kopf der Seite ist gefuellt, solange ueberhaupt etwas gemerkt ist. */
.merkknopf:has(b:not([hidden])){color:var(--primary)}
.merkknopf:has(b:not([hidden])) svg{fill:currentColor}
.merken-rund{width:46px;height:46px;padding:0;display:inline-grid;place-items:center;cursor:pointer;
  border:1px solid var(--linie,rgba(0,0,0,.18));border-radius:50%;background:none;color:inherit;
  transition:background .2s,color .2s}
.merken-rund:hover{background:rgba(0,0,0,.05)}
.merkknopf{position:relative;display:inline-flex;align-items:center;gap:5px;color:inherit;
  text-decoration:none;padding:6px}
.merkknopf b{font-size:12px;font-weight:600;line-height:1}
.merkknopf:hover{color:var(--primary)}
.nur-gemerkte{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  padding:10px 12px;border-radius:4px;font-size:13px;color:inherit}
.nur-gemerkte.active{color:var(--primary)}
.nur-gemerkte.active svg{fill:currentColor}
@media print{.merken-knopf,.merken-rund,.merkknopf,.nur-gemerkte{display:none}}

/* Die Einladungszeile zwischen Einstieg und Inhalt: zwei Grüße und ein Satz. Sie traegt nichts
   zur Bedienung bei — sie ist der Atemzug zwischen dem grossen Bild und dem ersten Rezept. */
.einladung{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 24px;
  padding:24px 30px;border-bottom:1px solid var(--linie,rgba(0,0,0,.12))}
.einladung > span{font:italic 400 clamp(19px,2vw,24px)/1.2 Georgia,serif}
.einladung svg{width:28px;height:28px;color:var(--primary)}
.einladung p{margin:0 0 0 clamp(0px,3vw,48px);font-size:clamp(12px,.38vw,14px);letter-spacing:.07em}
.aufmacher-notiz{font-size:clamp(12px,.38vw,14px);margin:22px 0 0;opacity:.75}
@media(max-width:650px){
  .einladung{gap:12px;padding:20px 12px}
  .einladung p{display:none}
}

/* Der KI-Hinweis an den grossen gestalterischen Bildern. Die Rezeptbilder tragen ihn im Bild
   („KI-Bild"); die Buehnen- und Gebietsbilder sind Gestaltung und tragen ihn als kleine Marke.
   Christoph am 09.10.2026: „bei den editoralen bildern braucht es dann auch noch einen ki hinweis". */
.ki-motiv{position:absolute;z-index:2;right:10px;bottom:10px;padding:4px 8px;border-radius:2px;
  background:rgba(41,46,39,.48);color:#fff;font-size:clamp(10.5px,.33vw,12px);line-height:1.3;
  letter-spacing:.04em}

/* Die Notiz rechts neben der Ueberschrift der Sammlung, darunter die Trefferzahl. */
.kopf-rechts{text-align:right}
.kopf-notiz{margin:0 0 6px;font-size:clamp(13px,.42vw,15px);line-height:1.55;white-space:pre-line;
  color:var(--leise,#686c60)}
.kopf-rechts > span{font-size:clamp(13px,.42vw,15px)}

/* Nur fuer Lesegeraete: Beschriftungen, die auf dem Schirm aus der Gestaltung hervorgehen, fuer
   eine Vorlesesoftware aber genannt werden muessen. */
.nur-lesegeraete{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Ein Gestaltungsbild, das beschrieben ist, wird ein echtes Bild statt einer Farbflaeche — es
   soll aber genauso sitzen wie vorher. Die Lage macht weiter die jeweilige Klasse. */
.flaechenbild{display:block;width:100%;height:100%;object-fit:cover}
/* Wer ein Bild mit `inset:0` in seinen Rahmen legt, muss den Rahmen auch positionieren — sonst
   spannt es sich ueber die naechstbeste positionierte Huelle. Bei Ungarns Namensgerichten war das
   die ganze Karte: Das Portraet, 58 Pixel gross gedacht, fuellte den Bildschirm (Christoph am
   10.10.2026). `position:relative` gehoert hier zur Rahmenangabe, nicht zur Kuer. */
.kachel-bild,.today-kopf{position:relative}
.kachel-bild > .kachel-foto{position:absolute;inset:0}
.band-fenster > .band-foto,.today-kopf > .kopf-foto{position:absolute;inset:0;border-radius:inherit}

/* Die anderen Namen desselben Gerichts, unter der Schlagzeile. Wer nach dem deutschen Namen sucht,
   findet ihn hier — und wer die Seite liest, erfaehrt ihn nebenbei. */
.weitere-namen{margin:0 0 14px;font-size:clamp(12.5px,.4vw,14px);color:var(--leise,#686c60)}
.weitere-namen span{font-weight:600;letter-spacing:.04em}
.weitere-namen i{font-style:normal;opacity:.5;margin:0 4px}

/* Persisch und Arabisch laufen von rechts nach links. Ohne diese Angabe setzt der Browser die
   Zeichen zwar richtig, Satzzeichen und Zahlen aber an die falsche Seite. */
.woerter td.wort[lang="fa"],.woerter td.wort[lang="ar"]{direction:rtl;text-align:right;
  font-size:1.25em;line-height:1.5}
.woerter td.wort[lang="fa"] .hoeren,.woerter td.wort[lang="ar"] .hoeren{float:left}

/* ---------- Rezeptberater ----------
   Steht verborgen im Markup und wird erst sichtbar, wenn er fuer diesen Besucher gilt. Darum
   darf hier nichts stehen, was ohne Skript schon auffaellt. */
.berater{max-width:var(--seite-breite);margin:clamp(40px,5vw,72px) auto 0;
  padding:clamp(26px,3.4vw,44px) var(--seiten-inset);border-top:1px solid var(--linie,rgba(0,0,0,.12))}
.berater-kopf{max-width:60ch}
.berater-kopf h2{margin:0 0 8px;font-size:clamp(20px,2vw,27px);font-weight:600}
.berater-gruss{margin:0;line-height:1.6;color:var(--muted-foreground)}
.berater-faden{display:grid;gap:12px;margin:22px 0 0;max-width:68ch}
.berater-satz{margin:0;line-height:1.6;padding:10px 14px;border-radius:12px;max-width:52ch}
.berater-gast{background:var(--primary);color:#fff;justify-self:end;border-bottom-right-radius:3px}
.berater-berater{background:rgba(0,0,0,.05);border-bottom-left-radius:3px}
.berater-treffer{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:4px 0 8px}
.berater-karte{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--linie,rgba(0,0,0,.14));
  border-radius:9px;background:var(--karte,#fff)}
.berater-karte:hover{border-color:currentColor}
.berater-karte b{font-size:16px}
.berater-karte span{font-size:14px;line-height:1.45;color:var(--muted-foreground)}
.berater-karte i{font-style:normal;font-size:13px;color:var(--muted-foreground)}
.berater-einstiege{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.berater-einstieg{font:inherit;font-size:14px;border:1px solid var(--linie,rgba(0,0,0,.18));
  background:none;color:inherit;border-radius:100px;padding:7px 15px;cursor:pointer}
.berater-einstieg:hover{border-color:currentColor}
.berater-feld{display:flex;gap:8px;margin:16px 0 0;max-width:52ch}
.berater-feld input{flex:1 1 auto;font:inherit;font-size:16px;padding:11px 14px;border-radius:8px;
  border:1px solid var(--linie,rgba(0,0,0,.2));background:var(--karte,#fff);color:inherit}
.berater-feld button{font:inherit;font-size:15px;border:0;border-radius:8px;padding:11px 18px;
  background:var(--primary);color:#fff;cursor:pointer}
.berater-feld input:disabled{opacity:.6}
.berater-fuss{margin:14px 0 0;font-size:13px;max-width:60ch}
@media(max-width:560px){.berater-feld{flex-wrap:wrap}.berater-feld button{width:100%}}

/* Zutatenkunde: eine Zutat, die man nicht kennt, sagt auf Antippen, was sie ist.
   Die vertrauten Zutaten bleiben unberuehrt - ist alles unterstrichen, ist nichts
   unterstrichen, und die Fussnoten, die gebraucht werden, gehen unter. */
.zutat-wort{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;text-align:left;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:#9aa893}
.zutat-wort:hover,.zutat-wort[aria-expanded="true"]{text-decoration-color:#38573d}
.zutat-kunde{display:block;margin-top:8px;padding:9px 12px;border-left:2px solid #c9cfbd;background:#f6f7f1;border-radius:0 6px 6px 0;font-size:12.5px;line-height:1.6;color:#4a5547}
/* Ohne diese Zeile gewinnt display:block gegen das hidden-Attribut, und die Erklaerung
   stuende von Anfang an offen - bei jeder erklaerten Zutat auf der Seite. */
.zutat-kunde[hidden]{display:none}
.zutat-kunde>span{display:block}
.zutat-kunde>i{display:block;margin-top:6px;font-style:normal;color:#5e6b58}
/* Die Warnung ist die einzige Angabe, die niemand uebersehen darf. */
.ingredients b.zutat-achtung{display:block;min-width:0;margin:0 0 6px;font-weight:600;color:#8a3324}

/* Zutatenlexikon: Uebersicht, Einzelseite, und der Weg zurueck in die Rezepte. */
.zutaten-feld{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:22px}
.zutat-eintrag{display:block;border:1px solid #e0e3d9;border-radius:10px;padding:14px 16px;background:#fff;text-decoration:none;color:inherit}
.zutat-eintrag:hover{border-color:#b9c3ad;background:#fcfcf8}
.zutat-eintrag b{display:block;font-size:15px;margin-bottom:5px}
.zutat-eintrag span{display:block;font-size:12.5px;line-height:1.6;color:#5a6557}
.zutat-eintrag i{display:block;margin-top:9px;font-style:normal;font-size:12px;color:#7d8878}
/* Das Ausrufezeichen sagt: Hier steht etwas, das man vor dem Kochen wissen muss. */
.zutat-marke{display:inline-block;margin-left:7px;width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;background:#8a3324;color:#fff;font-size:12px;font-style:normal;vertical-align:1px}
.zutatseite .zutat-text{max-width:70ch;margin-top:20px}
.zutatseite .zutat-text p{line-height:1.75;margin:0 0 14px}
.zutat-achtung-gross{border-left:3px solid #8a3324;background:#fbf2f0;padding:11px 14px;border-radius:0 6px 6px 0;color:#6f2a1e;font-weight:500}
.zutat-ersatz{margin-top:8px}
.zutat-ersatz h2{font-size:15px;margin:0 0 6px}
.zutat-verwendung{margin-top:34px}
.zutat-verwendung h2{font-size:17px;margin:0 0 14px}
.zutat-rezepte{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.zutat-rezept{display:block;border:1px solid #e0e3d9;border-radius:10px;padding:13px 15px;background:#fff;text-decoration:none;color:inherit}
.zutat-rezept:hover{border-color:#b9c3ad;background:#fcfcf8}
.zutat-rezept b{display:block;margin-bottom:4px}
.zutat-rezept span{display:block;font-size:12.5px;line-height:1.55;color:#5a6557}
.zutat-rezept i{display:block;margin-top:8px;font-style:normal;font-size:12px;color:#7d8878}
/* Der Weg aus der Zutatenzeile ins Lexikon. */
.zutat-mehr{display:inline-block;margin-top:8px;font-size:12px;color:#38573d}
@media(max-width:560px){.zutaten-feld,.zutat-rezepte{grid-template-columns:1fr}}

/* Kulturband: ein ganzflaechiges Band, Bild auf der einen Seite, Text auf der anderen.
   Aus Christophs Golestan-Vorlage (11.10.2026); die Farbe kommt aus dem Profil. */
.kulturband{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--bandfarbe,#234b61);color:var(--bandschrift,#f6f1e4)}
.kulturband-bild{position:relative;min-height:420px}
.kulturband-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band-bildtext{position:absolute;left:0;right:0;bottom:0;padding:9px 16px;font-size:12px;letter-spacing:.14em;background:rgba(0,0,0,.35);color:#fff}
.kulturband-text{padding:64px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.kulturband-text h2{margin:0;font-size:clamp(28px,3.4vw,42px);line-height:1.15}
.kulturband-text p{margin:0;max-width:52ch;line-height:1.75;opacity:.92}
.kulturband-text .eyebrow{opacity:.8}
.band-signet{width:48px;height:48px;opacity:.85}
.text-link.hell{color:inherit;border-bottom:1px solid currentColor;align-self:flex-start}

/* Abschluss: ein ruhiger Schluss nach der Sammlung — ein Satz, dann ein breites Bild. */
.abschluss{padding:72px clamp(16px,4vw,32px) 84px;text-align:center}
.abschluss-text h2{margin:6px 0 12px;font-size:clamp(28px,3.4vw,42px);line-height:1.15}
.abschluss-text p{margin:0 auto 14px;max-width:56ch;line-height:1.75}
.abschluss-bild{margin:30px auto 0;max-width:1000px;position:relative}
.abschluss-foto{width:100%;height:auto;display:block}
@media(max-width:860px){
  .kulturband{grid-template-columns:1fr}
  .kulturband-bild{min-height:300px}
  .kulturband-text{padding:44px 20px}
}

/* Stille Leiste: ein Atemzug zwischen Auftakt und Rezeptbuch (Golestan-Vorlage). */
.stille-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;padding:22px 16px;font-size:12px;letter-spacing:.2em;color:var(--leise,#6b7360);border-bottom:1px solid var(--linie,#e0e3d9)}
.stille-leiste i{font-style:normal;opacity:.55}

/* Duftkompass: ein paar gezeichnete Zutaten, darunter ein Satz dazu. */
.aromen{padding:72px clamp(16px,4vw,32px);text-align:center}
.aromen-kopf h2{margin:6px 0 10px;font-size:clamp(26px,3.2vw,40px);line-height:1.15}
.aromen-kopf p{margin:0 auto;max-width:60ch;line-height:1.7}
.aromen-wahl{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,5vw,56px);margin:34px 0 10px}
.aroma-wahl{background:none;border:0;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;cursor:pointer;border-bottom:2px solid transparent}
.aroma-wahl svg{width:42px;height:42px}
.aroma-wahl span{font-size:16px}
.aroma-wahl small{font-size:12px;letter-spacing:.16em;color:var(--leise,#6b7360)}
.aroma-wahl.ist-hier{border-bottom-color:var(--gold,#9d773b)}
.aroma-wahl:hover{color:var(--primary,#773c36)}
.aromen-satz{max-width:62ch;margin:26px auto 0;border-top:1px solid var(--linie,#e0e3d9);padding-top:22px}
.aroma-note{display:block;font-size:12px;letter-spacing:.2em;color:var(--leise,#6b7360);margin-bottom:10px}
.aromen-satz p{margin:0 0 14px;line-height:1.75}

/* Rezeptbuch: eine Doppelseite zum Blaettern — Bild links, Text rechts. */
.rezeptbuch{padding:72px clamp(16px,4vw,32px);text-align:center}
.buch-reiter-reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0}
.buch-reiter{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;padding:8px 12px;color:inherit;display:inline-flex;align-items:baseline;gap:9px;font-size:14px}
.buch-reiter span{font-size:13px;color:var(--leise,#6b7360)}
.buch-reiter.ist-hier{border-bottom-color:var(--gold,#9d773b)}
.buch-buehne{max-width:1000px;margin:0 auto}
.buch-seite{display:grid;grid-template-columns:1fr 1fr;background:var(--karte,#fff);border:1px solid var(--linie,#e0e3d9);text-align:left;overflow:hidden}
.buch-seite figure{margin:0;position:relative;min-height:340px}
.buch-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.buch-seite figcaption{position:absolute;left:0;bottom:0;padding:8px 14px;font-size:11.5px;letter-spacing:.14em;background:rgba(0,0,0,.42);color:#fff}
.buch-text{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;gap:11px;position:relative}
.buch-text .kapitel{margin:0;font-size:12px;letter-spacing:.18em;color:var(--leise,#6b7360)}
.buch-text h3{margin:0;font-size:clamp(22px,2.6vw,32px);line-height:1.2}
.buch-text p{margin:0;line-height:1.7}
.buch-angaben{display:flex;gap:18px;font-size:12.5px;color:var(--leise,#6b7360)}
.buch-zutaten{font-style:italic}
.buch-text .knopf{align-self:flex-start;margin-top:4px}
.folio{position:absolute;right:16px;bottom:14px;font-size:12px;color:var(--leise,#6b7360)}
.buch-steuer{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0 10px;font-size:12.5px;letter-spacing:.16em;color:var(--leise,#6b7360)}
.buch-steuer button{width:34px;height:34px;border-radius:50%;border:1px solid var(--linie,#e0e3d9);background:none;color:inherit;cursor:pointer}
.buch-steuer button:hover{border-color:var(--gold,#9d773b)}
@media(max-width:860px){
  .buch-seite{grid-template-columns:1fr}
  .buch-seite figure{min-height:220px}
  .aromen-wahl{gap:18px}
}

/* ---------- Wege in die Kueche: Reiter, darunter ein Blatt aus Text und Bild ----------
   Aus Christophs Nordmark-Entwurf. Der Baustein ist allgemein: Wie viele Wege es gibt und
   wie sie heissen, steht im Profil. */
.abschnitt-kopf{display:flex;justify-content:space-between;gap:24px;align-items:baseline;flex-wrap:wrap}
.abschnitt-kopf .eyebrow{margin:0}
.wege{padding:clamp(34px,5vw,51px) 0 clamp(44px,6vw,85px)}
.wege-reiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:clamp(22px,3vw,35px) 0 clamp(30px,4vw,54px);border-top:1px solid var(--linie,#c9cdc5);border-bottom:1px solid var(--linie,#c9cdc5)}
.weg-reiter{display:flex;align-items:center;gap:clamp(12px,1.6vw,21px);background:none;border:0;border-bottom:3px solid transparent;color:inherit;cursor:pointer;text-align:left;font-size:clamp(23px,2.7vw,41px);font-weight:450;padding:clamp(16px,2vw,26px) 25px 25px 0}
.weg-reiter + .weg-reiter{padding-left:25px;border-left:1px solid var(--linie,#c9cdc5)}
.weg-zahl{font-size:11px;letter-spacing:.05em;color:var(--leise,#69706b);align-self:flex-start;padding-top:10px}
.weg-kreuz{margin-left:auto;font-style:normal;transition:transform .25s}
.weg-reiter.ist-hier{border-bottom-color:currentColor}
.weg-reiter.ist-hier .weg-kreuz{transform:rotate(45deg)}
.weg-blatt{display:grid;grid-template-columns:.83fr 1.17fr;gap:clamp(28px,8vw,120px);align-items:stretch}
.weg-text{display:flex;flex-direction:column;align-items:flex-start;padding-top:8px}
.weg-text h2{font-size:clamp(35px,3.7vw,58px);line-height:1.1;margin:clamp(20px,3vw,43px) 0 0}
.weg-text > p:not(.eyebrow){font-size:16px;line-height:1.75;color:var(--leise,#69706b);max-width:390px;margin:28px 0 35px}
.weg-unterzeile{margin-top:auto;padding-top:35px;color:var(--leise,#69706b);font-size:12px;letter-spacing:.1em;line-height:1.6}
.weg-bild{position:relative;margin:0;padding-bottom:25px}
.weg-foto{width:100%;height:100%;min-height:400px;max-height:560px;object-fit:cover}
.weg-bild figcaption{position:absolute;left:0;bottom:0;font-size:10px;letter-spacing:.11em;text-transform:uppercase}

/* ---------- Spaltenband: eine Ueberschrift, darunter mehrere Gedanken nebeneinander ---------- */
/* Ein Band laeuft ueber die ganze Fensterbreite, nicht nur ueber den Satzspiegel: Auf einem
   breiten Schirm stand der dunkle Grund sonst als Kasten mitten auf dem Papier. */
.spaltenband{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:clamp(40px,5vw,65px) max(var(--seite-rand),calc(50vw - var(--seite-breite) / 2)) clamp(48px,6vw,77px)}
.spaltenband > h2{font-size:clamp(43px,4.8vw,74px);line-height:1.05;margin:clamp(26px,3vw,46px) 0 clamp(34px,5vw,74px)}
.spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(30px,4vw,55px)}
.spalten article{padding-top:23px;border-top:1px solid var(--linie,#c9cdc5)}
.spalten h3{font-size:clamp(25px,2vw,30px);line-height:1.13;margin:24px 0 22px}
.spalten p:not(.eyebrow){font-size:14px;line-height:1.85;margin:0}
.spalten a{display:block;font-size:12px;margin-top:27px;text-decoration:underline;text-underline-offset:5px;line-height:1.6}
@media(max-width:860px){
  .weg-blatt{grid-template-columns:1fr;gap:30px}
  .weg-reiter{display:block;padding:16px 10px 13px 0;font-size:23px}
  .weg-reiter + .weg-reiter{padding-left:14px}
  .weg-zahl{display:block;padding:0 0 7px}
  .weg-kreuz{display:none}
  .weg-unterzeile{display:none}
  .weg-foto{height:330px;min-height:0;max-height:none}
}