/* Japanische Site — nach Christophs Konzeptbild vom 26.09.2026.
   Sein Urteil zur ersten Fassung: „die vorlage wirkte extrem fein und das was du da hast wirkt eher bulky."
   Er hatte recht, und die Gründe ließen sich benennen: Fotos statt Zeichnungen, Braun statt Papier und
   Tinte, Kärtchen mit Bildklotz statt offener Felder, serifenlose Kleinschrift, und die feinen Zeichen des
   Entwurfs fehlten ganz — die senkrechte japanische Schrift, die roten Siegel, der kurze rote Strich.

   Drei Werte, mehr nicht: Papier, Tinte, Zinnober. Was trennt, ist eine Haarlinie, keine Fläche. */
/* Die Werte sind aus Christophs Entwurf gemessen, nicht geschaetzt (26.09.2026: „die farbe der
   webseite scheint mir zu kalt verglichen mit dem beispiel"). Papier #EAE5DB statt #F4F1E8 - zehn
   Punkte dunkler und waermer. Tinte #2F2B25 statt fast Schwarz. Und die Flaechen im Entwurf sind
   DUNKLER als der Grund, nicht heller; bei mir war es andersherum. */
:root{--papier:#EAE5DB;--papier-hell:#E2DACC;--tinte:#2F2B25;--grau:#5C564C;--linie:#D2CBBA;
  --zinnober:#A8442E;--sumi:#2A2721;
  --background:var(--papier);--foreground:var(--tinte);--primary:var(--zinnober);--muted-foreground:var(--grau)}

/* Papier hat eine Faser. Ein ganz feines Rauschen, sonst wirkt die Fläche tot. */
body{background:var(--papier);color:var(--tinte);
  background-image:radial-gradient(rgba(47,43,37,.028) 1px,transparent 1px);background-size:3px 3px}

/* Serife überall, nicht nur in den Überschriften. Das ist die halbe Miete. */
body,.recipe small,.today-recipes small,.kachel-text small,.band p,.hero-intro,.aufmacher-text,
.categories button,.text-link,.card-link,footer,footer p{font-family:Georgia,"Iowan Old Style",serif}
/* Gemessen am 27.09.2026: Das Grau #6E685C auf dem Papier ergab Kontrast 4,41 - unter der Schwelle von
   4,5 fuer normalen Text. Bei 10 px und weitem Sperrsatz las sich das nicht mehr als Schrift. Christoph:
   "die schrift wirklich so fein dass man es mehr als flecken wahrnimmt." Jetzt 12 px auf #5C564C,
   Kontrast 5,79. */
.eyebrow,.kachel-zahl,.recipe-facts,.daily-meta{font:500 12px/1.5 Georgia,serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grau)}

/* Die Kopfleiste ist eine Linie, kein Band — und die Wortmarke steht in der Mitte. */
.topbar{background:transparent;border-bottom:1px solid var(--tinte);backdrop-filter:none;padding:22px 5% 16px}
.brand span{font:400 27px/1 Georgia,serif;letter-spacing:.01em}
.brand small{display:none}          /* die Unterzeile doppelt nur, was der Name schon sagt */
.brand svg{display:none}
.topbar nav a{font:400 14px/1 Georgia,serif;color:var(--tinte);letter-spacing:.02em}
.basket{background:transparent;border:1px solid var(--linie);color:var(--tinte);border-radius:2px;
  font:400 13px/1 Georgia,serif}
.basket svg{display:none}

/* Überschriften: leichtes Gewicht, darunter ein kurzer roter Strich. Der ersetzt jede Umrandung. */
h1,h2,h3,.hero h1,.aufmacher h1,.band h2,.kacheln-kopf h2,.section-head h2{font-weight:400;letter-spacing:-.01em}
.band h2::after,.kacheln-kopf h2::after,.section-head h2::after,.today-heading h2::after,.aufmacher h1::after{
  content:"";display:block;width:34px;height:3px;background:var(--zinnober);margin:14px 0 0}
.hero h1 em,.aufmacher h1 em,.band h2 em{color:var(--tinte);font-style:italic;font-weight:400}

/* Der Aufmacher trägt Schrift und die Zeichnung, sonst nichts. */
.aufmacher{--aufmacher-grund:transparent;--aufmacher-schrift:var(--tinte);--aufmacher-akzent:var(--zinnober);
  border-bottom:1px solid var(--linie)}
.aufmacher-text{color:var(--grau)}
/* Die Textspalte bleibt schmal und links: Rechts liegt die Zeichnung, und Schmuck unter Text ist keiner.
   Die erste Fassung lief mit 916 von 1200 Punkten quer durch das Bild. */
.aufmacher{padding-block:clamp(48px,6vw,86px)}
/* Die Satzbreite von 26 Zeichen gehoert der Ueberschrift. Die Auszeichnung darueber ist 10 px gross und
   weit gesperrt - 26ch messen dort keine 26 Zeichen, weil der Sperrsatz nicht mitzaehlt. "EINE SUPPE,
   DREI BEILAGEN" brach deshalb mitten im Wort um. */
.aufmacher h1,.aufmacher .aufmacher-text{max-width:26ch}
.aufmacher h1{font-size:clamp(34px,4.4vw,60px);line-height:1.08}
.aufmacher .aufmacher-text{font-size:17px;line-height:1.6;max-width:40ch}
@media(max-width:860px){.aufmacher h1,.aufmacher .aufmacher-text{max-width:none}}

/* Flächen sind keine Kästen: eine Haarlinie, ein Hauch helleres Papier, viel Innenraum. */
.band,.tagesrezept,.recipe,.kachel,.today-strip,.legende,.recipe-detail{
  background:var(--papier-hell);border:1px solid var(--linie);border-radius:0;box-shadow:none}
/* Das Band bricht im Grundgeruest bewusst aus der Satzspalte aus - es soll die Reihe der Karten
   unterbrechen. Auf dieser Seite gibt es aber keine Farbe, die den Ausbruch erklaert: Gemessen am
   27.09.2026 stand das Band 64 px links und rechts ueber allem anderen, und das las sich nicht als
   Absicht, sondern als schiefe Kante. Hier steht es in derselben Spalte wie Tagesrezept und Kacheln. */
/* Die senkrechte Schrift und das Siegel stehen links im Band. Sie brauchen eine eigene Spalte - mit dem
   gewoehnlichen Innenrand standen sie zehn Pixel neben dem Text (gemessen am 27.09.2026). */
.band{color:var(--tinte);padding:clamp(34px,4vw,58px);padding-left:clamp(76px,9vw,132px);
  margin-left:0;margin-right:0}
.band-ruhig,.band-dunkel,.band-akzent{--band-ruhig:var(--papier-hell)}
.band-fenster{--band-saum:transparent;box-shadow:none;border-radius:0}
.band-fenster::after{display:none}   /* ein Saum über einer Zeichnung macht sie zum Foto */

/* Das Rezept des Tages: zwei Spalten, getrennt durch eine Linie statt durch eine Farbe. */
.tagesrezept{border-left:0;border-right:0}
.daily-card{background:transparent;box-shadow:none;color:var(--tinte);position:static;padding:0}
.daily-card h2{color:var(--tinte)}
.daily-meta{color:var(--grau)}
.recipe-facts{color:var(--grau);border:0}

/* Karten: kein Rahmen um das Bild, kein Schatten, kein Anheben beim Zeigen. */
.recipe{background:transparent;border:0}
.recipe:hover{box-shadow:none;transform:none}
.food{border-radius:0;background:var(--papier-hell)}
/* Die Zeichnungen sind freigestellt, also braucht es kein multiply mehr, das Graustufen anhebt. */
.today-food{border-radius:0;background:var(--papier-hell) center/contain no-repeat}
.categories button{background:transparent;border:1px solid var(--linie);border-radius:0;color:var(--grau)}
.categories button[aria-pressed="true"],.categories button.active{background:transparent;
  border-color:var(--zinnober);color:var(--zinnober)}
.mehr-filter{border-radius:0}
.section-head{border-bottom:1px solid var(--tinte)}

/* Die Einstiege: zwei große Felder je Reihe. Die Zeichnung schwebt im Feld neben dem Text —
   kein Bildklotz obendrauf, denn genau der machte die erste Fassung schwer. */
.kachel{flex-direction:row;align-items:center;gap:0;padding:clamp(26px,2.6vw,38px);min-height:230px}
.kachel:hover{transform:none;border-color:var(--tinte)}
.kachel-bild{order:2;flex:0 0 44%;align-self:stretch;aspect-ratio:auto;background-size:contain;
  background-repeat:no-repeat;background-position:center right;background-color:transparent;
  mix-blend-mode:multiply}
.kachel-text{order:1;flex:1 1 auto;padding:0;gap:10px}
.kachel-text b{font:400 25px/1.15 Georgia,serif}
.kachel-text b::after{content:"";display:block;width:28px;height:3px;background:var(--zinnober);margin:12px 0 0}
.kachel-text small{color:var(--grau);font-size:15px;line-height:1.55}
.kachel-text em{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte)}
.kachel-zahl{display:none}          /* im Entwurf trägt keine Kachel eine Nummer */

/* Die senkrechte japanische Schrift am Rand — im Entwurf trägt sie viel von der Feinheit.
   Sie steht als Schmuck da und wird Vorlesegeräten nicht angeboten. */
.senkrecht{position:absolute;writing-mode:vertical-rl;font:400 19px/1 Georgia,"Yu Mincho","Hiragino Mincho ProN",
  "Noto Serif JP",serif;letter-spacing:.34em;color:var(--grau);user-select:none;pointer-events:none}
.senkrecht::after{content:"";display:block;width:2px;height:30px;background:var(--zinnober);margin:24px auto 0}
.senkrecht-links{left:clamp(14px,2vw,30px);top:clamp(28px,4vw,52px)}
.senkrecht-rechts{right:clamp(14px,1.6vw,24px);top:clamp(24px,3vw,40px)}
.band,.kachel{position:relative}
/* Das Siegel sitzt unten links im Band, wie im Entwurf die roten Stempel. */
.band .siegel{position:absolute;left:clamp(14px,2vw,30px);bottom:clamp(24px,3vw,40px)}
@media(max-width:860px){.senkrecht{display:none}}   /* am Telefon fehlt der Rand dafuer */

/* Das rote Siegel, klein, wie eine Signatur. */
.siegel{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:2px;
  border:1.5px solid var(--zinnober);color:var(--zinnober);font:400 15px/1 "Yu Mincho","Hiragino Mincho ProN",
  "Noto Serif JP",serif;opacity:.85}

.legende{background:var(--papier-hell)}
.hoeren{border-color:var(--linie);color:var(--zinnober);border-radius:0}
.hoeren.spielt{background:var(--zinnober);border-color:var(--zinnober)}

footer{background:transparent;border-top:1px solid var(--tinte);color:var(--grau)}
footer a,.footer-brand{color:var(--grau)}
.footer-brand{font:400 17px/1 Georgia,serif}
:focus-visible{outline:2px solid var(--zinnober);outline-offset:4px}

.zier-sammlung,.zier-heute,.zier-held{--zier-farbe:var(--zinnober);color:rgba(28,26,23,.09);text-shadow:none}

/* ---- Der Titelfries ------------------------------------------------------
   Ein Fries, nicht fuenf Einzelteile. .aufmacher ist die Buehne: eine Box mit
   der Seitenbreite und festem Seitenverhaeltnis. Alles darin - Zweig, Enso, Text,
   Berge, senkrechte Schrift - sitzt in Prozent dieser Buehne und in cqw (Prozent
   der Friesbreite). Damit behaelt die Komposition ihre Anordnung in jeder
   Fensterbreite; sie wird als Ganzes groesser und kleiner.
   Vorher war jedes Stueck einzeln gegen den Fensterrand gerechnet. Auf breiten
   Schirmen zog das die Teile auseinander, und ich habe drei Tage lang je Stueck
   nachkorrigiert, statt den Fries zu bauen. Christoph am 27.09.2026: "bau doch
   einfach einen gemeinsamen titelfries mit den elementen statt die elemente je
   nach aufloesung herumzuschieben". */
.aufmacher{position:relative;overflow:hidden;container-type:inline-size;
  width:min(var(--seite-breite), 100% - 2 * var(--seite-rand));margin-inline:auto;
  aspect-ratio:1440 / 380;min-height:0;padding:0;
  display:flex;flex-direction:column;justify-content:center}
.schmuck{position:absolute;background-repeat:no-repeat;background-size:contain;
  pointer-events:none;user-select:none;z-index:0}

/* Die Textsaeule ist der dritte Platz im Fries, zwischen Enso und Bergen. */
.aufmacher > .eyebrow,.aufmacher > h1,.aufmacher > .aufmacher-text,.aufmacher > .text-link{
  margin-left:26%;width:30%;max-width:none;position:relative;z-index:1}
.aufmacher .eyebrow{margin-block:0 8px}
.aufmacher h1{font-size:clamp(17px,1.9cqw,23px);line-height:1.3;margin-block:0 10px;letter-spacing:-.01em}
.aufmacher h1 em{font-style:italic}
.aufmacher h1::after{width:34px}
.aufmacher .aufmacher-text{font-size:clamp(12px,1.25cqw,15px);line-height:1.7;margin-block:0 14px}
.aufmacher .text-link{font-size:clamp(11px,1.15cqw,13px)}

/* Die vier Plaetze im Fries, in Prozent der Buehne. Der Zweig haengt oben hinaus
   und wird vom Fries beschnitten - so steht er im Entwurf unter der Kopfleiste. */
.schmuck-links-oben{left:1%;top:-16%;width:20%;aspect-ratio:3/2;background-position:left top}
.schmuck-mitte{left:13%;top:30%;width:10%;aspect-ratio:1;background-position:center;right:auto;transform:none}
.schmuck-rechts{left:55%;top:8%;width:37%;aspect-ratio:3/2;background-position:center;right:auto;bottom:auto}
.zier-held{position:absolute;left:96.5%;top:24%;right:auto;bottom:auto;transform:none;
  writing-mode:vertical-rl;width:auto;font-size:clamp(13px,1.6cqw,19px);letter-spacing:.3em;
  color:var(--grau);opacity:.75;text-shadow:none;z-index:1}

/* Auf dem Telefon traegt der Fries nicht: 300 Punkte Hoehe auf 380 Breite waere ein
   Streifen. Dort wird daraus wieder ein gewoehnlicher Kopf, nur die Berge bleiben. */
@media(max-width:860px){
  .aufmacher{aspect-ratio:auto;display:block;padding-block:36px;container-type:normal}
  .aufmacher > .eyebrow,.aufmacher > h1,.aufmacher > .aufmacher-text,.aufmacher > .text-link{
    margin-left:0;width:auto}
  .aufmacher h1{font-size:26px}
  .aufmacher .aufmacher-text{font-size:15px}
  .aufmacher .text-link{font-size:13px}
  .schmuck-links-oben,.schmuck-mitte,.zier-held{display:none}
  .schmuck-rechts{left:auto;right:-4%;top:auto;bottom:-10%;width:62%;opacity:.45}
}

/* Graeser am Kopf der Sammlung: sie sollen links neben der Spalte haengen, nicht darin.
   „left" rechnete vom Innenabstand der Spalte aus - der ist auf breiten Schirmen klein, und die
   Zeichnung landete auf der Ueberschrift: bei 3440 Punkten reichte sie 40 Pixel in „Was kommt heute
   auf den Tisch?" hinein (Christoph am 28.09.2026: „da scheint ein bisschen ein durcheinander zu
   sein"). „right:100%" setzt sie vor die Spalte, bei jeder Breite.
   Unterhalb von 1700 Punkten ist links kein Platz mehr; dann entfaellt sie, statt den Schirm zu
   verbreitern. */
.section-head{position:relative}
.schmuck-graeser{right:100%;left:auto;bottom:-30px;margin-right:clamp(10px,1.2vw,28px);
  width:min(96px,7vw);aspect-ratio:2/3;background-position:left bottom;opacity:.75}
@media(max-width:1700px){.schmuck-graeser{display:none}}

/* Die Fusszeile trug das Bild als Hintergrund und schnitt es ab, weil sie niedriger ist als das Bild.
   Jetzt bekommt sie eine eigene Hoehe dafuer, und das Bild sitzt vollstaendig darin. */
footer{position:relative;padding-top:clamp(150px,15vw,220px);background-repeat:no-repeat;
  background-image:url(/bilder/profil/schmuck-fuss.png);
  background-size:auto clamp(120px,12vw,180px);background-position:center 18px}
@media(max-width:860px){footer{padding-top:120px;background-size:auto 92px}}



/* Das Bild im Band: kleiner als die Bandhoehe, mit Luft ringsum. */
.band{padding-right:clamp(300px,28vw,420px)}
.band-fenster{width:min(250px,20vw);right:calc(var(--seiten-inset) + 1vw)}
@media(max-width:860px){.band{padding-right:clamp(26px,5vw,40px)}
  .band-fenster{width:min(200px,50vw)}}

/* Telefon zuletzt: Meine spaeteren Groessenregeln haben die weiter oben stehenden Telefon-Regeln
   ueberschrieben — die Berge schrumpften dort auf 66 Punkte (bei 390 nachgemessen). Was am Rand
   haengt, braucht auf dem schmalen Schirm eigene Werte, und das Zierzeichen steht dort in der Zeile. */
@media(max-width:860px){
  .schmuck-graeser{display:none}
  .band{padding-right:clamp(26px,5vw,40px)}
  .band-fenster{width:min(200px,52vw)}
}