/* Nordmark — nordische Küche. Nach Christophs Gestaltungspaket vom 09.10.2026.

   Die Vorgabe des Pakets: ein Küstenjournal. Kühles Tageslicht, birkenhelles Papier, dunkles
   Seegrün, ein kleiner Kupferakzent. Große sachliche Schrift, dünne Linien, asymmetrische
   Flächen, Rezepte als nummeriertes Register.

   Bewahren (so steht es in der Übergabe):
     - DM Sans, lokal ausgeliefert (SIL Open Font License). Keine Serifen.
     - Farben: Papier, Tinte, Linie, dunkle Linie, Kupfer, Akzent.
     - Ruhige Struktur, viel Weissraum, Nummern vor den Abschnitten.
     - Kein Wikinger-Kitsch: keine Hörner, keine Runen, keine Felle, kein Kerzen-Hygge.

   Gegen die Geschwister abgegrenzt: Iberien ist warm und seriös gesetzt, Mexiko laut und
   plakativ, Persien verziert. Der Norden ist kühl, sachlich und asymmetrisch. */

@font-face{
  font-family:DM;
  src:url('/assets/DM-Sans-variable.ttf') format('truetype');
  font-style:normal;font-weight:100 1000;font-display:swap;
}

:root{
  --papier:#F0F0E9;
  --tinte:#202B2A;
  --leise:#69706B;
  --linie:#C9CDC5;
  --dunkellinie:#52605A;
  --kupfer:#CEAA91;
  --akzent:#71513C;
  --schrift:DM,'Segoe UI',Arial,sans-serif;
  --seite-breite:1280px;
  --seite-rand:clamp(22px,5.3vw,92px);
  --primary:var(--akzent);
  --knopf-grund:var(--tinte);
  --knopf-schrift:var(--papier);
  --band-dunkel:var(--tinte);
  --band-ruhig:#E6E7DF;
  --band-akzent:var(--akzent);
}
body{background:var(--papier);color:var(--tinte);font-family:var(--schrift);line-height:1.65}
h1,h2,h3{font-family:var(--schrift);font-weight:500;letter-spacing:-.03em;line-height:1.02}
h1 em,h2 em,h3 em{font-style:normal;color:var(--kupfer)}
.eyebrow{font-size:clamp(11px,.34vw,12.5px);letter-spacing:.17em;font-weight:600;color:var(--leise);
  text-transform:uppercase}

/* Kopfleiste und Fuss: Papier, dünne Linie, nichts Farbiges. */
.topbar{background:var(--papier);border-bottom:1px solid var(--linie);backdrop-filter:none}
.brand b{font-family:var(--schrift);font-weight:500;letter-spacing:-.04em;color:var(--tinte);
  text-transform:lowercase}
.brand small{color:var(--leise);letter-spacing:.2em}
.basket{background:none;border:1px solid var(--linie);color:var(--tinte);border-radius:2px}
.basket b{background:var(--kupfer);color:var(--tinte)}
footer{background:var(--papier);border-top:1px solid var(--linie);color:var(--leise)}
.footer-brand{font-family:var(--schrift);font-weight:500;letter-spacing:-.04em;color:var(--tinte);
  text-transform:lowercase}

/* Der Auftakt: Küstenbild über die volle Breite, Schrift unten links im Bild, ein Kreuz und eine
   gedrehte Zeile am Rand. Der Schleier liegt unten, nicht über dem ganzen Bild — oben soll die
   Küste frei bleiben. */
.aufmacher-plakat{position:relative;display:block;min-height:min(78vh,660px);overflow:hidden;
  margin:0;padding:0 max(var(--seite-rand),calc((100% - var(--seite-breite)) / 2));
  background:var(--tinte);color:var(--papier)}
.aufmacher-plakat .aufmacher-bild{position:absolute;inset:0;width:100%;border-radius:0;z-index:0;
  background-size:cover;background-position:50% 45%}
/* Seit dem 10.10.2026 steht hier ein echtes <img> statt eines Hintergrundbildes, damit die
   Bildersuche und ein Vorlesegeraet es sehen. Der Ausschnitt muss darum zweimal dastehen:
   einmal fuer den Hintergrund, einmal fuer das Bild. Ohne die zweite Zeile faellt der
   gewaehlte Ausschnitt auf die Mitte zurueck. */
.aufmacher-plakat .aufmacher-bild > .flaechenbild{object-fit:cover;object-position:50% 45%}
.plakat-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(32,43,42,.30) 0%,rgba(32,43,42,.04) 34%,
    rgba(32,43,42,.62) 78%,rgba(32,43,42,.86) 100%)}
.plakat-text{position:relative;z-index:2;max-width:38ch;
  padding:clamp(150px,30vh,330px) 0 clamp(40px,6vw,66px)}
.aufmacher-plakat .eyebrow{color:rgba(240,240,233,.78);margin:0 0 clamp(14px,2vw,22px)}
.aufmacher-plakat h1{font:500 clamp(46px,7.4vw,112px)/1.0 var(--schrift);letter-spacing:-.045em;
  color:var(--papier);margin:0;max-width:none}
.aufmacher-plakat h1 em{color:var(--kupfer)}
.aufmacher-plakat .aufmacher-text{font-size:clamp(14px,.47vw,17px);line-height:1.6;max-width:44ch;
  margin:clamp(20px,2.6vw,30px) 0 22px;color:rgba(240,240,233,.9)}
/* Kein gefüllter Knopf: eine Zeile mit dünnem Strich darunter. */
.aufmacher-plakat .knopf{display:inline-flex;gap:14px;align-items:center;background:none;border:0;
  border-bottom:1px solid var(--kupfer);border-radius:0;color:var(--papier);padding:7px 2px;
  min-height:0;font-size:clamp(13px,.42vw,15px);font-weight:500;letter-spacing:.02em}
.aufmacher-plakat .knopf:hover{transform:none;color:var(--kupfer)}
/* Die gedrehte Zeile am rechten Rand und das Kreuz — Schmuck des Entwurfs. */
.plakat-notiz{position:absolute;z-index:2;right:clamp(10px,1.4vw,22px);top:50%;margin:0;
  transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-size:clamp(11px,.34vw,12.5px);letter-spacing:.2em;color:rgba(240,240,233,.62);
  white-space:nowrap}
.aufmacher-plakat::after{content:"+";position:absolute;z-index:2;left:clamp(16px,2vw,34px);
  top:clamp(16px,2vw,34px);font-size:22px;line-height:1;color:rgba(240,240,233,.6)}
.aufmacher-plakat .ki-motiv{bottom:12px;right:12px}
@media(max-width:860px){
  .aufmacher-plakat{min-height:0}
  .plakat-text{padding-top:clamp(120px,36vh,260px);max-width:none}
  .plakat-notiz{display:none}
}

/* Die Einladungszeile: zwei Grüße, dünne Linien darüber und darunter. */
.einladung{border-bottom:1px solid var(--linie);border-top:1px solid var(--linie);
  color:var(--leise);gap:16px 34px;padding:18px 22px}
.einladung > span{font-family:var(--schrift);font-style:normal;font-weight:500;
  font-size:clamp(15px,1.2vw,19px);letter-spacing:-.02em;color:var(--tinte)}
.einladung svg{color:var(--kupfer);width:20px;height:20px}
.einladung p{letter-spacing:.14em;text-transform:uppercase}

/* Das Rezept des Tages: Bild links randlos, Text rechts, Zahlen und Linien. */
.tagesrezept-tisch{background:none;border:0;border-top:1px solid var(--linie);padding:clamp(28px,4vw,56px) 0 0;
  grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px)}
.tagesrezept-tisch > .tages-bild{aspect-ratio:1.5;background:var(--band-ruhig)}
.tagesrezept-tisch .tages-marke{background:var(--papier);color:var(--tinte);border-radius:0;
  letter-spacing:.17em;font-weight:600}
.tagesrezept-tisch .eyebrow{color:var(--leise)}
.tagesrezept-tisch h2{font:500 clamp(28px,3.2vw,52px)/1.04 var(--schrift);letter-spacing:-.04em}
.tagesrezept-tisch .beschreibung{color:var(--leise)}
.tagesrezept-tisch .fakten-zeile{border-top:1px solid var(--linie);padding-top:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.tagesrezept-tisch .knopf{background:var(--tinte);border-color:var(--tinte);border-radius:2px;
  color:var(--papier)}
.tagesrezept-tisch .merken{border-color:var(--linie);border-radius:2px}

/* Das Register: dünne Linien statt Kästen, Zahlen vor den Karten. */
.section-head{border-top:1px solid var(--linie);padding-top:clamp(26px,3.4vw,48px);
  margin-top:clamp(38px,5vw,76px)}
.section-head h2{font:500 clamp(28px,3.4vw,52px)/1.04 var(--schrift);letter-spacing:-.04em}
.kopf-notiz{color:var(--leise)}
.search{border:1px solid var(--linie);background:var(--papier);border-radius:2px}
.categories button{border-radius:2px;font-size:clamp(12px,.38vw,13.5px);padding:8px 14px;
  min-height:38px;letter-spacing:.06em}
.categories button.active,button.active{background:var(--tinte);border-color:var(--tinte);
  color:var(--papier)}
.mehr-filter{border-radius:2px;border-color:var(--tinte);color:var(--tinte)}
.mehr-filter.offen{background:var(--tinte);color:var(--papier)}
.weitere-filter{background:#E6E7DF;border:1px solid var(--linie);border-radius:2px}
#karten.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
@media(max-width:900px){#karten.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#karten.cards{grid-template-columns:1fr}}
.recipe{background:none;border:0;border-radius:0;border-top:1px solid var(--linie);padding-top:14px}
.recipe h3{font-family:var(--schrift);font-weight:500;letter-spacing:-.03em}
.recipe h3 a{color:var(--tinte)}
.recipe h3 a:hover,.recipe a,.text-link{color:var(--akzent)}
.region{color:var(--leise)!important;letter-spacing:.17em}
.merken-knopf{background:var(--papier);color:var(--tinte);border-radius:2px}
.merken-knopf.gemerkt,.merken-rund.gemerkt,.nur-gemerkte.active{color:var(--akzent)}

/* Die Gebiete: Bild links, Text rechts auf dunklem Grund — die Küstenseite des Journals. */
.band-regionen{background:var(--tinte);color:var(--papier);gap:0;align-items:stretch;padding:0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.band-regionen .regionen-bild{min-height:clamp(320px,38vw,520px)}
.band-regionen .regionen-bild::after{background:linear-gradient(transparent,rgba(32,43,42,.5))}
.regionen-bildtext{left:clamp(18px,2vw,30px);bottom:clamp(14px,1.8vw,24px);
  font:600 clamp(11px,.34vw,12.5px)/1.6 var(--schrift);letter-spacing:.17em;text-transform:uppercase}
.regionen-bildtext em{font-style:normal;color:var(--kupfer)}
.regionen-text{padding:clamp(32px,4vw,64px) max(var(--seite-rand),calc(50vw - var(--seite-breite)/2))
  clamp(32px,4vw,64px) clamp(26px,4vw,60px)}
.band-regionen .eyebrow{color:rgba(240,240,233,.7)}
.band-regionen h2{font:500 clamp(28px,3.2vw,52px)/1.04 var(--schrift);letter-spacing:-.04em;
  color:var(--papier)}
.band-regionen h2 em{color:var(--kupfer)}
.regionen-text > p:not(.eyebrow){color:rgba(240,240,233,.84)}
.regionen-pillen .pill{border-color:rgba(240,240,233,.35);color:var(--papier);border-radius:2px;
  letter-spacing:.06em}
.regionen-pillen .pill:hover{background:rgba(240,240,233,.1)}
.regionen-pillen .pill.active{background:var(--kupfer);border-color:var(--kupfer);color:var(--tinte)}
.regionen-hinweis{border-top-color:rgba(240,240,233,.28)}
.regionen-hinweis .eyebrow{color:var(--kupfer)}
.regionen-hinweis p:not(.eyebrow){color:rgba(240,240,233,.84)}
.regionen-hinweis .text-link{color:var(--kupfer);border-bottom-color:var(--kupfer)}
@media(max-width:860px){
  .band-regionen{display:block}
  .regionen-text{padding:clamp(26px,5vw,40px) var(--seite-rand)}
}

/* Der Ausklang: viel Luft, ein Satz, eine Linie. */
.partnerhinweis{background:none;border-top:1px solid var(--linie);color:var(--tinte);
  text-align:center;max-width:var(--seite-breite);margin-inline:auto;
  padding:clamp(40px,5vw,80px) clamp(22px,4vw,48px)}
.partnerhinweis > div{max-width:46ch;margin:0 auto}
.partnerhinweis .eyebrow{color:var(--leise)}
.partnerhinweis h2{font:500 clamp(28px,3.4vw,52px)/1.06 var(--schrift);letter-spacing:-.04em}
.partnerhinweis h2 em{color:var(--kupfer)}
.partnerhinweis p{color:var(--leise)}
.partnerhinweis .text-link{border-bottom:1px solid var(--kupfer);padding-bottom:5px;
  color:var(--tinte)}

/* Rezeptseite: grosse sachliche Zeile, Zutaten auf hellem Grund, Ziffern in Kupfer. */
.detail-kopf h1{font:500 clamp(32px,4.4vw,66px)/1.02 var(--schrift);letter-spacing:-.045em;
  margin:16px 0}
.detail-kopf .region{letter-spacing:.17em;color:var(--leise)}
.detail-kopf .beschreibung,.detail-kopf .einleitung{color:var(--leise);font-size:clamp(14px,.46vw,16px)}
.recipe-columns > section:first-child{background:#E6E7DF;padding:26px 25px}
.recipe-columns h2{font:500 clamp(24px,2.2vw,34px)/1.1 var(--schrift);letter-spacing:-.03em}
.recipe-columns .steps > li::before{color:var(--kupfer);font-family:var(--schrift);font-weight:500}

/* ---- Vier Wege zum Geschmack: die Reiter der Vorlage ---- */
.wege .abschnitt-kopf .eyebrow{color:var(--leise)}
.weg-reiter:hover{background:#E7E8DF}
.weg-reiter.ist-hier{border-bottom-color:var(--tinte)}
.weg-reiter.ist-hier .weg-kreuz{color:var(--akzent)}
.weg-text h2{letter-spacing:-.05em;font-weight:470}
.weg-text > p:not(.eyebrow){color:var(--leise)}
.weg-text .text-link{min-width:230px;justify-content:space-between;gap:28px;padding:17px 0;
  border-top:1px solid currentColor;border-bottom:0;font-size:15px;line-height:1.4}
.weg-text .text-link span{font-size:25px;transition:transform .25s}
.weg-text .text-link:hover span{transform:translate(3px,-3px)}
.weg-unterzeile{color:var(--leise)}
.weg-bild figcaption{color:var(--leise)}

/* ---- Spaltenband: die Gebiete auf dunklem Grund ---- */
.spaltenband{background:var(--tinte);color:var(--papier)}
.spaltenband .abschnitt-kopf .eyebrow{color:#B8C2BA}
.spaltenband > h2{font-weight:450;letter-spacing:-.05em}
.spalten article{border-top-color:var(--dunkellinie)}
.spalten .eyebrow{color:var(--kupfer);margin:0}
.spalten h3{font-weight:450;letter-spacing:-.035em}
.spalten p:not(.eyebrow){color:#B9C4BB}
.spalten a{color:inherit}
.spalten a:hover{color:var(--kupfer)}

/* ---- Der Schluss: ein Satz auf hellem Grund ---- */
.abschluss{background:#DCE1D7;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:clamp(48px,7vw,90px) max(var(--seite-rand),calc(50vw - var(--seite-breite) / 2));
  text-align:left;max-width:none}
.abschluss-text{max-width:1100px;margin:0}
.abschluss-text .eyebrow{color:var(--leise)}
.abschluss-text h2{font-size:clamp(50px,6.7vw,101px);letter-spacing:-.06em;font-weight:420;
  line-height:1.04;margin:clamp(24px,3vw,42px) 0 clamp(28px,4vw,47px)}
.abschluss-text h2 em{font-style:normal;font-weight:450;color:var(--akzent)}
.abschluss-text .text-link{max-width:330px;justify-content:space-between;gap:28px;
  padding:17px 0;border-top:1px solid currentColor;border-bottom:0;font-size:15px}
.abschluss-text .text-link span{font-size:25px}

/* ---- Das Rezeptregister: eine nummerierte Zeile je Rezept (Vorlage, Abschnitt Register) ----
   Die Karte bleibt dieselbe; nur ihre Teile stehen hier nebeneinander statt uebereinander.
   Darum traegt der Inhaltskasten display:contents - seine Stuecke werden selbst zu Feldern
   der Zeile, und die Angaben koennen nach rechts. */
#karten.cards-liste{grid-template-columns:1fr;gap:0;counter-reset:zeile}
.cards-liste .recipe{display:grid;
  grid-template-columns:clamp(28px,3.4vw,54px) clamp(88px,10vw,165px) minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr;column-gap:clamp(16px,2.4vw,34px);align-items:start;
  border-top:1px solid var(--linie);border-radius:0;background:none;box-shadow:none;
  padding:clamp(18px,2.4vw,30px) 0;counter-increment:zeile}
.cards-liste .recipe::before{content:counter(zeile,decimal-leading-zero);grid-column:1;
  grid-row:1/4;font-size:12px;letter-spacing:.12em;color:var(--leise);padding-top:5px}
/* Die allgemeine Listenform macht aus dem Bildfeld selbst zwei Spalten (Bild links,
   Inhalt rechts). Hier ist das Bildfeld nur das Bild - die Zeile teilt sich selbst auf. */
/* width und align-self gehoeren dazu: Ueber die ganze Zeilenhoehe gespannt rechnet das
   Seitenverhaeltnis die Breite aus der Hoehe - das Bild lief dann ueber seine Spalte
   hinaus und der Titel stand darauf. */
.cards-liste .recipe > .food{grid-column:2;grid-row:1/4;display:block;
  grid-template-columns:none;width:100%;height:auto;align-self:start;aspect-ratio:1.12;
  border-radius:0;overflow:hidden}
.cards-liste .recipe > .food img{width:100%}
.cards-liste .recipe > .food img{min-height:0;height:100%}
.cards-liste .recipe .kat{display:none}
.cards-liste .card-content{display:contents}
.cards-liste .card-content > .region{grid-column:3;grid-row:1;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--leise);margin:0 0 12px}
.cards-liste .card-content > h3{grid-column:3;grid-row:2;margin:0 0 12px;
  font-size:clamp(24px,2.4vw,36px);line-height:1.1;letter-spacing:-.035em}
.cards-liste .card-content > p{grid-column:3;grid-row:3;margin:0;max-width:62ch;
  font-size:14px;line-height:1.7;color:var(--leise)}
.cards-liste .recipe > .merken-knopf{grid-column:4;grid-row:1;justify-self:end}
.cards-liste .card-bottom{grid-column:4;grid-row:2/4;align-self:start;display:flex;
  flex-direction:column;align-items:flex-end;text-align:right;gap:10px;
  font-size:12px;letter-spacing:.08em;color:var(--leise);border:0;padding:0}
@media(max-width:860px){
  .cards-liste .recipe{grid-template-columns:clamp(88px,22vw,140px) minmax(0,1fr);
    grid-template-rows:auto auto auto auto;column-gap:18px}
  .cards-liste .recipe::before{display:none}
  .cards-liste .recipe > .food{grid-column:1;grid-row:1/5}
  .cards-liste .card-content > .region{grid-column:2;grid-row:1}
  .cards-liste .card-content > h3{grid-column:2;grid-row:2}
  .cards-liste .card-content > p{grid-column:2;grid-row:3}
  .cards-liste .recipe > .merken-knopf{grid-column:2;grid-row:4;justify-self:start}
  .cards-liste .card-bottom{grid-column:2;grid-row:4;align-items:flex-start;text-align:left}
}

/* ---- Filterzeile: keine Rundungen, Felder nur mit einer Linie darunter ---- */
.filter-top .search{border:0;border-bottom:1px solid var(--linie);border-radius:0;
  background:none;padding-left:0}
.filter-top .search input{background:none}
.filter-top .mehr-filter{border:0;border-bottom:1px solid var(--tinte);border-radius:0;
  background:none;font-weight:550;font-size:13px;letter-spacing:.04em;padding:10px 0}
.filter-top .mehr-filter:hover,.filter-top .mehr-filter.offen{background:none;
  color:var(--akzent);border-bottom-color:var(--akzent)}
.filter-top .mehr-filter b{border-radius:0;background:var(--akzent)}
.filter-top .categories button{border-radius:0;border:0;border-bottom:2px solid transparent;
  padding:9px 2px;margin-right:14px}
.filter-top .categories button.active{background:none;color:var(--tinte);
  border-bottom-color:var(--tinte)}
.filter-top select{border:0;border-bottom:1px solid var(--linie);border-radius:0;
  background:none;padding:9px 0}