/* Iberische Site — nach Christophs Entwürfen „Casa Ibérica" und „Mesa Ibérica" vom 28.09.2026.
   Sein Einwand zur ersten Fassung: „das erinnert mich aber sehr an Himalaya — wir wollten doch jede
   Seite anders machen." Er hatte recht: Ich hatte Hochlands Aufbau übernommen. Was seine Entwürfe
   stattdessen zeigen, und was keine andere Küche hat:

     - Kalkweisses Papier statt getönter Flächen; die Farbe kommt aus Terrakotta und Azulejo-Blau.
     - Ein geteilter Aufmacher: Schlagzeile links, Foto rechts daneben.
     - Handschriftliche Notizen in den Aussenspalten.
     - Sechs Wege in einer Reihe statt zweier Reihen zu dritt.
     - Ein Azulejo-Streifen am linken Rand des Regionenbandes.
     - Ein Fuss mit einem Satz in der Mitte: „Zwei Länder. Ein Tisch." */

:root{
  --kalk:#F8F5EE;          /* Kalkweiss: das Papier der Seite */
  --sand:#ECE4D5;          /* warmer Sand fuer abgesetzte Flaechen */
  --tinte:#292E27;         /* Schrift */
  --terrakotta:#A3452D;    /* Akzent: Knoepfe, Verweise, Zierstriche */
  --azulejo:#274C79;       /* tiefes Kachelblau fuer Baender und Fuss */
  --olive:#596249;         /* Olivgruen als zweiter, ruhiger Ton */
  --safran:#C8933B;        /* Safran nur fuer kleine Auszeichnungen */
  /* Nicht --seiten-inset festsetzen: Dieser Wert haelt Kopfleiste, Fuss und Baender am
     Satzspiegel fest und muss darum mit der Fensterbreite rechnen. Als fester Wert klebte die
     Wortmarke auf einem breiten Schirm tausend Punkte links vom Inhalt (Christoph am 09.10.2026). */
  --seite-rand:clamp(20px,5vw,72px);
  --band-dunkel:var(--azulejo);
  --band-ruhig:var(--sand);
  --band-akzent:var(--terrakotta);
  --band-schleier:rgba(28,63,94,.80);
  --primary:var(--terrakotta);
}
body{background:var(--kalk);color:var(--tinte)}

/* Kopfleiste: leicht, fast durchsichtig, mit einem feinen Terrakottastrich darunter. */
.topbar{background:rgba(250,247,240,.93);border-bottom:1px solid rgba(42,37,32,.12);backdrop-filter:blur(10px)}
.brand b{font-family:Georgia,serif;font-weight:600;letter-spacing:-.01em;color:var(--terrakotta)}
.brand small{color:rgba(42,37,32,.55);letter-spacing:.18em;font-size:11.5px}

/* Der Aufmacher: die Mechanik des Frieses steht im Hauptstilblatt, hier nur das iberische Gesicht —
   Papier statt Farbflaeche, Georgia fuer die Schlagzeile, Terrakotta fuer Akzent und Strich. */
.aufmacher-geteilt{background:var(--kalk);color:var(--tinte)}
.aufmacher-geteilt > .eyebrow{letter-spacing:.2em;color:var(--terrakotta)}
.aufmacher-geteilt > h1{font-family:Georgia,serif;letter-spacing:-.03em}
.aufmacher-geteilt > h1 em{font-style:italic;color:var(--terrakotta)}
.aufmacher-geteilt > h1::after{content:"";display:block;width:4.4cqw;height:.22cqw;min-height:2px;
  background:var(--terrakotta);margin:2.6% 0 2.8%}
.aufmacher-geteilt > .aufmacher-text{opacity:.85}
.aufmacher-geteilt > .text-link{color:var(--terrakotta)}
/* Die Notiz liegt ueber dem Foto und braucht darum die helle Farbe. */
.aufmacher-geteilt .randnotiz{color:var(--kalk);opacity:.9}
@media(max-width:860px){
  .aufmacher-geteilt > h1::after{width:56px;height:3px;margin:16px 0 18px}
}

/* Randnotizen: die Handschrift des Hauses. */
.randnotiz{color:var(--terrakotta);opacity:.72;font-size:12.5px}

/* Die sechs Wege: schmale, ruhige Felder mit Papierrand statt Schattenkarten. */
.kacheln .kachel{background:var(--sand);border:1px solid rgba(42,37,32,.1);border-radius:2px}
.kacheln .kachel-text b{font-family:Georgia,serif;font-weight:600}
.kacheln .kachel-text em{color:var(--terrakotta)}
.kacheln .kachel-zahl{color:var(--kalk);opacity:.9}

/* Das Rezept des Tages: Bild links, Text rechts auf Sand — wie im Entwurf. */
.tagesrezept{position:relative;background:var(--sand);border:1px solid rgba(42,37,32,.1);border-radius:2px}
.tagesrezept .eyebrow{color:var(--terrakotta)}
.tagesrezept h2,.tagesrezept h3{font-family:Georgia,serif;letter-spacing:-.02em}

/* Das Band der Regionen traegt links einen Azulejo-Streifen. */
.band-ruhig{position:relative;color:var(--tinte)}
.band-ruhig::before{content:"";position:absolute;left:0;top:0;bottom:0;width:clamp(14px,2.2vw,34px);
  background:
    repeating-linear-gradient(45deg,var(--azulejo) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(-45deg,var(--azulejo) 0 6px,transparent 6px 12px),
    var(--kalk);
  opacity:.55}
.band h2{font-family:Georgia,serif}
.band-ruhig h2 em{color:var(--terrakotta)}

/* Der Fuss ist dunkelblau mit einem Satz in der Mitte. */
.fuss,footer.fuss{background:var(--azulejo);color:var(--kalk)}
.fuss a{color:rgba(250,247,240,.82)}
.fuss a:hover{color:#fff}

/* Karten der Sammlung: Papier mit feinem Rand, kein Schatten. */
.recipe,.cards>*{background:var(--sand);border:1px solid rgba(42,37,32,.1);box-shadow:none}
.card-title,.recipe b{font-family:Georgia,serif}

/* Knoepfe und Filter in Terrakotta. */
button.active,.categories button.active{background:var(--terrakotta);border-color:var(--terrakotta);color:var(--kalk)}
.text-link,.recipe a{color:var(--terrakotta)}

/* Masse und Farben aus Christophs Gestaltungspaket vom 09.10.2026. Die Farben waren vorher nach
   Augenmass gesetzt und lagen daneben — das Terrakotta des Pakets ist deutlich kraeftiger. Der
   Inhaltsbereich ist dort 1280 breit statt 1440; der Einstieg darf bis 1600 gehen. */
:root{--seite-breite:1280px;--papier:var(--kalk);--leise:#686C60;--linie:#D8D4C8}
.aufmacher-tisch .eyebrow{color:var(--olive)}
.aufmacher-tisch h1{color:var(--tinte)}
.aufmacher-tisch h1 em{color:var(--terrakotta);font-style:italic;display:inline-block}
.aufmacher-tisch .aufmacher-text{color:var(--leise)}
.tagesrezept-tisch .eyebrow{color:var(--olive)}
.kacheln-sechs .kachel-text b{color:var(--tinte)}
:root{--knopf-grund:var(--terrakotta);--knopf-schrift:#fff}

/* Das Rezeptblatt nach dem Gestaltungspaket (paella.html).

   Bild und Titel stehen nebeneinander statt untereinander, die Zutaten in einer Sandfläche, die
   Schritte mit grossen Ziffern in Terrakotta. Masse aus dem Paket: Kopf 1.1 zu 1 mit 65 Punkten
   Abstand und Bild im Verhältnis 1.12, Körper 350 Punkte zu Rest mit 75 Punkten Abstand. Die
   Klammer um den Kopf (.detail-kopf) ist das Einzige, was dafür am gemeinsamen Gerüst nötig war. */
/* Das Rezeptblatt ist im Paket so breit wie die Sammlung (1280), nicht so schmal wie eine
   Lesespalte — Bild und Titel stehen ja nebeneinander. */
.rezeptseite{max-width:calc(var(--seite-breite) + 2 * var(--seite-rand))}
.recipe-detail{background:none;border:0;border-radius:0;overflow:visible;color:var(--tinte);
  display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center}
.recipe-detail > figure{margin:0;position:relative;aspect-ratio:1.12;overflow:hidden}
.recipe-detail .detail-image{height:100%;width:100%;object-fit:cover}
/* „display:contents" loest die Klammer in der Darstellung auf, nicht in den Regeln: Fuer einen
   Waehler bleibt .recipe-columns ein Kind von .detail-body. Mit „>" griff die Regel darunter ins
   Leere, und Zutaten und Zubereitung landeten in der schmalen Bildspalte, waehrend die halbe Seite
   leer blieb (Christoph am 09.10.2026). */
.recipe-detail > .detail-body{display:contents}
.detail-kopf{min-width:0;padding:0 4px}
.detail-kopf h1{font:600 clamp(40px,6.2vw,92px)/1 Georgia,serif;letter-spacing:-.06em;margin:23px 0}
.detail-kopf .region{font-size:clamp(12px,.38vw,14px);color:var(--leise);letter-spacing:.07em}
.detail-kopf .beschreibung{font-size:clamp(14px,.46vw,17px);color:var(--leise);margin-bottom:27px}
.detail-kopf .einleitung{font-size:clamp(14px,.46vw,17px);color:var(--leise);line-height:1.8}
/* Zutaten und Zubereitung stehen unter dem Kopf über die ganze Breite. */
.recipe-detail .recipe-columns{grid-column:1 / -1;grid-template-columns:350px 1fr;gap:75px;
  align-items:start;margin-top:clamp(30px,4vw,56px)}
.recipe-columns > section:first-child{background:var(--sand);padding:26px 25px}
.recipe-columns h2{font:400 36px Georgia,serif;letter-spacing:-.03em;margin:0 0 11px}
.recipe-columns > section:last-child h2{font-size:42px}
/* Die Schritte: zweistellige Ziffer in Terrakotta, Zeile darunter. */
.recipe-columns .steps{list-style:none;margin:0;padding:0;counter-reset:schritte}
.recipe-columns .steps > li{display:grid;grid-template-columns:35px 1fr;gap:22px;padding:25px 0;
  border-bottom:1px solid var(--linie);counter-increment:schritte}
.recipe-columns .steps > li::before{content:counter(schritte,decimal-leading-zero);
  font:29px/1.1 Georgia,serif;color:var(--terrakotta)}
@media(max-width:980px){
  .recipe-detail{grid-template-columns:1fr;gap:28px}
  .recipe-detail .recipe-columns{grid-template-columns:1fr;gap:34px}
}

/* Die Sammlung als eigener Abschnitt mit getöntem Grund — im Paket umfasst ein Band aus
   #F0ECE2 Suche, Filter und Raster, oben und unten mit einer feinen Linie abgesetzt. Unsere drei
   Bausteine (Kopf, Filter, Sammlung) stehen als Geschwister nebeneinander; jeder bekommt denselben
   Grund und zieht sich über die volle Breite, damit sie als ein Band erscheinen. */
.section-head, .filter-top, .weitere-filter, #karten, .mehr-zeile, [data-leer]{
  background:#F0ECE2;margin-inline:calc(-1 * var(--seiten-inset));
  padding-inline:var(--seiten-inset)}
.section-head{border-top:1px solid var(--linie);padding-top:clamp(34px,5vw,62px);margin-top:clamp(40px,6vw,86px)}
.mehr-zeile{border-bottom:1px solid var(--linie);padding-bottom:clamp(34px,5vw,62px)}
/* Drei Karten nebeneinander, Abstände aus dem Paket. */
#karten.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
@media(max-width:900px){#karten.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#karten.cards{grid-template-columns:1fr}}
/* Die Ernährungsfilter als Pillen, wie im Entwurf. */
.categories button{border-radius:100px;font-size:clamp(12px,.38vw,14px);padding:8px 15px;min-height:38px}
.categories button.active{background:var(--olive);border-color:var(--olive);color:#fff}
.mehr-filter[aria-expanded="true"]{background:var(--olive);border-color:var(--olive);color:#fff}
.weitere-filter{background:#E7E3D7}

/* Der Gebietsabschnitt aus „Mesa Iberica": Bild links mit Bildunterschrift, rechts Olivgruen
   fuer die Augenbrauen, Oliv fuer die gewaehlte Pille, Terrakotta fuer das hervorgehobene Gebiet. */
.band-regionen{--pille-grund:var(--olive);gap:70px}
.band-regionen h2{font:400 clamp(34px,3.4vw,52px)/1.08 Georgia,serif;letter-spacing:-.04em}
.band-regionen h2 em{font-style:italic;color:var(--terrakotta)}
.band-regionen > .regionen-text > .eyebrow{color:var(--olive);margin-bottom:18px}
.regionen-text > p:not(.eyebrow){font-size:clamp(13.5px,.44vw,16px);color:var(--leise);margin:22px 0;
  opacity:1}
.regionen-pillen .pill{border-color:#CDCEC1}
.regionen-pillen .pill:hover{background:#E3E2D5}
.regionen-hinweis{border-top-color:var(--linie)}
.regionen-hinweis .eyebrow{color:var(--terrakotta)}
.regionen-hinweis p:not(.eyebrow){color:var(--leise);opacity:1}
.regionen-hinweis .text-link{font-size:clamp(13px,.42vw,15px);color:var(--terrakotta);border-bottom:none;
  text-decoration:underline;text-underline-offset:5px}

/* Der Reihenhinweis als blaues Feld mit einem grossen, blassen Zeichen — die „series-section"
   aus dem Entwurf. Dieselbe Aussage wie bei den anderen Kuechen, nur iberisch gekleidet. */
.partnerhinweis{position:relative;overflow:hidden;background:var(--azulejo);color:var(--kalk);
  max-width:none;margin-left:calc(-1 * var(--seiten-inset));margin-right:calc(-1 * var(--seiten-inset));
  padding:clamp(40px,5vw,65px) clamp(23px,4vw,48px) clamp(44px,5vw,70px);text-align:center}
.partnerhinweis > div{max-width:62ch;margin:0 auto;position:relative;z-index:1}
.partnerhinweis .eyebrow{color:#D6E0D8;margin-bottom:20px;letter-spacing:.19em}
.partnerhinweis h2{font:400 clamp(39px,3.5vw,50px)/1.08 Georgia,serif;letter-spacing:-.04em;
  margin-bottom:22px}
.partnerhinweis h2 em{font-style:italic;color:#EAD4B2}
.partnerhinweis p{font-size:clamp(13.5px,.45vw,16px);color:#E0E1D8;margin-bottom:22px;opacity:1}
.partnerhinweis .text-link{display:inline-flex;gap:18px;align-items:center;justify-content:center;
  min-height:50px;padding:14px 24px;border:1px solid #929EAB;border-radius:3px;color:var(--kalk);
  font-size:clamp(13px,.42vw,15px);font-weight:500;text-decoration:none;transition:background .18s}
.partnerhinweis .text-link:hover{background:rgba(255,255,255,.09)}
.partnerhinweis::after{content:"\2733";position:absolute;right:6%;top:15%;z-index:0;
  font-size:clamp(165px,13vw,190px);line-height:1;color:rgba(255,255,255,.07);pointer-events:none}
@media(max-width:650px){.partnerhinweis::after{top:28%;right:-55px}}

/* Die Merkliste iberisch: das Herz auf Kalkweiss ueber dem Bild, gefuellt in Terrakotta. */
.merken-knopf{background:var(--kalk);color:var(--tinte);border-radius:50%}
.merken-knopf.gemerkt,.merken-rund.gemerkt,.nur-gemerkte.active{color:var(--terrakotta)}
.merken-rund{border-color:var(--linie)}
.merken-rund:hover{background:var(--sand)}
.nur-gemerkte{border-radius:100px;font-size:clamp(12px,.38vw,14px);padding:8px 15px;min-height:38px;
  border:1px solid var(--linie)}
.nur-gemerkte.active{background:var(--sand);border-color:var(--terrakotta)}

/* Einstieg und Einladungszeile nach dem Entwurf: Olivgruen fuer die Zeilen, Terrakotta fuer
   den Punkt vor der Vorzeile und fuer die Sonne zwischen den beiden Gruessen. */
.aufmacher-tisch .eyebrow{display:flex;align-items:center;gap:10px}
.aufmacher-tisch .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--terrakotta);flex-shrink:0}
.aufmacher-notiz{color:var(--leise)}
.einladung{color:var(--olive);border-bottom-color:var(--linie)}
.einladung svg{color:var(--terrakotta)}

/* Die Filterzeile nach dem Entwurf: oben Suche und „Mehr Filter" über die ganze Breite, darunter
   die Pillen links und die Sortierung rechts. Vorher stand alles in einer Reihe und war
   entsprechend gequetscht (Christoph am 09.10.2026). */
.filter-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 14px;align-items:center}
.filter-top > .search{grid-column:1;grid-row:1;max-width:none;height:57px;padding:0 19px;
  border:1px solid #D1D0C2;border-radius:3px;background:var(--kalk)}
.filter-top > .search input{font-size:clamp(14px,.45vw,16px)}
.filter-top > .mehr-filter{grid-column:2;grid-row:1;min-width:166px;height:57px;border-radius:3px;
  border:1px solid #C9C9BB;background:var(--kalk);font-size:clamp(13px,.42vw,15px);font-weight:400}
.filter-top > .mehr-filter.offen{background:var(--olive);border-color:var(--olive);color:var(--kalk)}
.filter-top > .categories{grid-column:1;grid-row:2;gap:8px}
.filter-top > .sortierung{grid-column:2;grid-row:2;justify-self:end}
.sortierung select{border:none;background:none;padding-right:0}
@media(max-width:650px){
  .filter-top{grid-template-columns:1fr;gap:14px}
  .filter-top > .search,.filter-top > .mehr-filter,.filter-top > .categories,
  .filter-top > .sortierung{grid-column:1;grid-row:auto;justify-self:start}
}

/* Das Filterfeld als Tafel mit drei Spalten und Beschriftungen darueber — wie im Entwurf.
   Unsere Achsen sind mehrfach waehlbar und bleiben darum Pillen; die Gesamtzeit ist eine
   Schwelle und darum eine Auswahl. */
/* Spalten statt Raster: Die Gruppen sind unterschiedlich hoch, in einem Raster haetten alle
   Zellen die Hoehe der groessten und die Tafel waere voller Luft. */
.weitere-filter{display:block;columns:3;column-gap:28px;
  padding:22px var(--seiten-inset);border:1px solid var(--linie);border-radius:3px}
.weitere-filter .ingredient-chips{display:block;break-inside:avoid;margin:0 0 20px}
.weitere-filter .ingredient-chips > span{display:block;margin:0 0 9px;font-size:clamp(12px,.38vw,13.5px);
  color:var(--leise)}
.weitere-filter .ingredient-chips button{border-radius:100px;font-size:clamp(12px,.38vw,14px);
  padding:7px 14px;min-height:36px;margin:0 6px 7px 0}
.weitere-filter select{width:100%;padding:12px 14px;border:1px solid var(--linie);border-radius:3px;
  background:var(--kalk);font-size:clamp(13px,.42vw,15px);color:var(--tinte)}
.kopf-notiz{color:var(--leise)}
@media(max-width:900px){.weitere-filter{columns:2}}
@media(max-width:650px){.weitere-filter{columns:1}}


/* Die Flaeche bekommt Struktur — Christophs Frage vom 09.10.2026: „nicht einfach creme, sondern
   eine ganz leichte struktur ... wie die oberflaeche eines felsens in dieser farbe". Seine erste
   Fassung war ihm zu stark und zu grau; das Muster, auf das er zeigte, ist heller Sandstein mit
   einer kaum sichtbaren ockerfarbenen Maserung.

   Darum: kein Bild, sondern Rauschen aus dem Stilblatt, und zwar ockerfarben statt grau. Eine
   grossflaechige Wolkigkeit traegt die Struktur, ein Hauch Korn liegt darueber. Die Staerke ist
   absichtlich unter der Schwelle, an der man ein Muster benennen koennte — man sieht nicht die
   Struktur, sondern nur, dass die Flaeche nicht tot ist. Beim Drucken faellt sie weg. */
body{background-color:var(--kalk);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22420%22%3E%3Cfilter%20id%3D%22w%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.009%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.74%200%200%200%200%200.64%200%200%200%200%200.46%200%200%200%200.2%200%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22k%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.62%200%200%200%200%200.55%200%200%200%200%200.42%200%200%200%200.055%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22420%22%20height%3D%22420%22%20filter%3D%22url%28%23w%29%22%2F%3E%3Crect%20width%3D%22420%22%20height%3D%22420%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  background-size:420px 420px;background-repeat:repeat}
@media print{body{background-image:none}}