/* Webseite yumories (REQ-029), Stil B: Creme mit Punktraster, Karten mit Rand und gruenem Versatzschatten,
   Bilder aus Higgsfield, Comic-Figuren aus dem Avatar-Baukasten. Zuerst fuers Handy; kein waagrechtes Rollen ab 320 px. */

@font-face {
  font-family: 'Fraunces';
  src: url(schriften/fraunces-latin.woff2) format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url(schriften/nunito-latin.woff2) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --creme: #FFF8EB;
  --raster: #f1e3c8;
  --gruen: #195657;
  --orange: #EF510D;
  --tinte: #2b2622;
  --grau: #6b625a;
  --weiss: #fff;
  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  --sans: Nunito, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--creme);
  background-image: radial-gradient(var(--raster) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  color: var(--tinte);
  font: 16px/1.55 var(--sans);
  overflow-wrap: anywhere;
}
img, svg, video { max-width: 100%; }
a { color: var(--gruen); font-weight: 700; text-decoration: none; }
a:hover { color: var(--orange); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Titel ohne automatische Silbentrennung (der Browser trennte «an-dere Rezepte-App»); umbrochen wird nur zwischen Woertern. */
h1, h2, h3 { font-family: var(--serif); color: var(--gruen); overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
h1 { font-size: 2.1rem; line-height: 1.1; font-weight: 700; margin: 0 0 0.75rem; }
h2 { font-size: 1.55rem; line-height: 1.2; font-weight: 700; margin: 0 0 0.75rem; }
h3 { font-size: 1.2rem; line-height: 1.25; font-weight: 700; margin: 0.75rem 0 0.25rem; }

/* Kopf */
.kopf, main, .fuss { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
/* Am Handy eine Zeile: Logo, DE|EN, kompakter «Anmelden»; Funktionen und Kontakt erst ab 600 px (Kontakt steht im Fuss). */
.kopf { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; padding-bottom: 6px; }
.logo { display: block; flex: 0 1 auto; min-width: 0; }
.logo img { display: block; height: 32px; width: auto; max-width: 100%; }
.nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; flex: none; }
.nav-gross { display: none; }
.nav .knopf.hell { padding: 4px 11px; }
.nav > a:not(.knopf) { text-decoration: none; }
.nav > a:not(.knopf):hover { color: var(--orange); }
.sprachen { position: relative; color: var(--grau); }
.sprachen summary { display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; padding: 6px 10px;
  border: 1px solid #dde3e3; border-radius: 999px; background: var(--weiss); font-weight: 600; font-size: 0.85rem; color: var(--tinte); }
.sprachen summary::-webkit-details-marker { display: none; }
.sprachen ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px;
  min-width: 9rem; background: var(--weiss); border: 1px solid #dde3e3; border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.sprachen li a, .sprachen li strong { display: block; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--tinte); }
.sprachen li strong { background: #d7ecea; }
.sprachen li a:hover { background: var(--raster, #f3efe6); }

/* Knoepfe */
.knopf {
  display: inline-block; background: var(--orange); color: var(--weiss); padding: 12px 22px; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 2px solid var(--tinte); box-shadow: 3px 3px 0 var(--gruen);
}
.knopf:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--gruen); }
.knopf.hell { background: var(--weiss); color: var(--gruen); border-color: var(--gruen); padding: 5px 14px; box-shadow: none; }
.knopf.hell:hover { transform: none; background: var(--creme); }
/* Zweiter Knopf neben dem Hauptknopf: weiss mit dunklem Rand, nicht orange. */
.knopf.zweit { background: var(--weiss); color: var(--gruen); }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0; }

/* Einstieg (Texte Runde 4): fest, keine Slideshow. Am Handy Text, darunter der Clip; am PC Text links, Clip rechts. */
.einstieg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px 0 8px; }
.einstieg-text { min-width: 0; }
.dachzeile { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.95rem; color: var(--gruen); letter-spacing: 0.01em; }
.unterzeile { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: var(--tinte); margin: 0 0 0.75rem; }
.satz { font-size: 1.05rem; margin: 0 0 22px; }

/* Bilder und Clips: Karte mit dunklem Rand und gruenem Versatzschatten */
.medien {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 100% 50%; background: var(--weiss);
  /* Katja 2026-10-22: links in den Bildern ist viel leerer Grund - zuschneiden, die Figuren stehen rechts. */
  border: 2px solid var(--tinte); border-radius: 16px; box-shadow: 4px 4px 0 var(--gruen); min-width: 0;
}

/* Abschnitte */
.abschnitt { padding: 40px 0 8px; scroll-margin-top: 12px; }
.einleitung { font-size: 1.1rem; max-width: 46rem; margin: 0 0 1.25rem; }

/* Drei Schritte */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.schritte li {
  background: rgba(255, 255, 255, 0.75); border: 2px solid var(--tinte); border-radius: 14px; padding: 12px 16px 14px;
  box-shadow: 4px 4px 0 var(--gruen); min-width: 0;
}
.schritt-nr { display: block; font: 700 2.6rem/1 var(--serif); color: var(--gruen); }
.schritte h3 { margin-top: 0.35rem; }
.schritte p { margin: 0; }

/* Text neben Bild bzw. Clip: «Was gut schmeckt, bleibt.» und die drei Beispiele */
.paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.paar-text { min-width: 0; }
.paar .einleitung { margin: 0; }
.beispiele { display: grid; gap: 36px; }

/* REQ-051 «Was habe ich da?»: kleines Beispiel wie in der App (Chips, darunter Treffer mit «3 von 3») */
.kuehlschrank-tipps { margin: 0; padding-left: 1.2rem; }
.kuehlschrank-tipps li { margin: 0.2rem 0; }
/* Seit 2026-10-26 bildlich: die Vorrat-Szene (Higgsfield), Yumos Blase darueber, die Karte ragt unten rechts ins Bild.
   Das Bild haelt dafuer oben links und unten rechts ruhigen Grund frei. */
.vorrat { margin: 0; min-width: 0; }
.vorrat-buehne { display: flex; flex-direction: column; }
.vorrat-szene {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--raster);
  border: 2px solid var(--tinte); border-radius: 16px; box-shadow: 4px 4px 0 var(--gruen);
}
.vorrat-blase { order: -1; align-self: flex-start; max-width: 20rem; margin: 0 0 16px 8px; }
.kuehlschrank-beispiel {
  position: relative; margin: -24px 8px 0; background: var(--weiss); border: 2px solid var(--tinte); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--gruen); padding: 14px 16px; min-width: 0;
}
.kuehlschrank-eingabe { font-weight: 700; color: var(--grau); font-size: 0.9rem; margin: 0 0 8px; }
.kuehlschrank-chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kuehlschrank-chips li { background: #d7ecea; color: var(--tinte); border-radius: 999px; padding: 4px 14px; font-weight: 600; }
.kuehlschrank-treffer { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kuehlschrank-treffer li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  border: 1px solid #dde3e3; border-radius: 12px; padding: 10px 12px;
}
.kuehlschrank-name { font-weight: 700; color: var(--gruen); }
.kuehlschrank-passt { background: var(--gruen); color: var(--weiss); border-radius: 999px; padding: 1px 10px; font-weight: 700; font-size: 0.85rem; }
.kuehlschrank-fehlt { grid-column: 1 / -1; color: var(--grau); font-size: 0.9rem; }

/* Yumo mit Sprechblase (Startseite, Hilfeseiten). Das Bild ist freigestellt; die Blase zeigt mit der Spitze auf Yumo. */
.sprechblase {
  position: relative; margin: 0; background: var(--weiss); border: 2px solid var(--tinte); border-radius: 16px;
  padding: 10px 14px; box-shadow: 3px 3px 0 var(--gruen); font-size: 1rem; line-height: 1.4; min-width: 0;
}
.sprechblase-name { display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
/* Spitze nach unten (ueber dem Bild) */
.sprechblase::after {
  content: ''; position: absolute; left: 36px; bottom: -11px; width: 18px; height: 18px; background: var(--weiss);
  border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(45deg) skew(8deg, 8deg);
}
.yumo-sagt { display: flex; gap: 12px; align-items: center; margin: 22px 0 0; }
.yumo-figur { flex: none; width: 96px; }
.yumo-bild { display: block; width: 100%; height: auto; transform-origin: 50% 90%; animation: yumo-wippen 4s ease-in-out infinite; }
/* Spitze nach links (Yumo steht links daneben) */
.yumo-sagt .sprechblase::after { left: -11px; bottom: auto; top: calc(50% - 9px); transform: rotate(135deg) skew(8deg, 8deg); }
.yumo-tipp { margin: 32px 0 0; }
.yumo-tipp + .frage { margin-top: 18px; }
@keyframes yumo-wippen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Die sechs Huete aus der App */
.huete { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hut-karte {
  display: grid; justify-items: center; gap: 2px; text-align: center; background: rgba(255, 255, 255, 0.75);
  border: 2px solid var(--tinte); border-radius: 14px; padding: 8px 4px 12px; min-width: 0;
}
.hut-karte svg { display: block; width: 100%; max-width: 96px; height: auto; transition: transform 0.2s; }
.hut-karte:hover svg { transform: rotate(-6deg) translateY(-2px); }
.hut-name { font: 700 1.1rem/1.2 var(--serif); color: var(--gruen); }
.hut-unter { font-size: 0.8rem; color: var(--grau); line-height: 1.25; }
.helfer .yumo-sagt { margin-top: 4px; }

.ueblich { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.ueblich li { background: rgba(255, 255, 255, 0.75); border: 2px solid var(--tinte); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.ueblich h3 { margin-top: 0; font-size: 1.1rem; }
.kachel-symbol { display: block; width: 44px; height: 44px; margin: 2px 0 8px; }
.ueblich p { margin: 0; }

.bald-figur svg, .weg-figur svg { border: 2px solid var(--tinte); border-radius: 50%; flex: none; display: block; }
.bald-kasten {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: var(--gruen); color: var(--creme);
  border: 2px solid var(--tinte); border-radius: 18px; padding: 20px; box-shadow: 4px 4px 0 var(--orange);
}
.bald-kasten > div:last-child { flex: 1 1 14rem; min-width: 0; }
.bald-kasten h2 { color: var(--creme); }
.bald-kasten p { margin: 0 0 0.75rem; }
.bald-kasten p:last-child { margin: 0; }
.bald-kasten .knopf.hell { margin-left: 6px; }

/* «Bald da» (Katja 2026-10-26): Startseite auf yumories.com, bis die richtige Webseite live ist. Am Handy Text, darunter
   Yumo mit der Blase darueber; am PC Text links, Yumo rechts. */
.bald-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 0 8px; }
.bald-text { min-width: 0; }
.bald-text .satz { font-weight: 700; color: var(--gruen); margin: 0; }
.bald-yumo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.bald-yumo .sprechblase { max-width: 20rem; align-self: center; }
.bald-yumo-bild { display: block; width: min(240px, 70vw); height: auto; transform-origin: 50% 90%; animation: yumo-wippen 4s ease-in-out infinite; }
.bald-clips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bald-clips .medien { width: 100%; height: auto; }
.bald-start ~ .abschnitt .bald-kasten a { color: var(--creme); font-weight: 700; }

/* Textseiten */
.text-seite { max-width: 44rem; padding: 24px 0 8px; }
.text-seite h2 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.35rem; }
.text-seite p { margin: 0 0 0.75rem; }
.stand { color: var(--grau); font-size: 0.9rem; margin-top: 1.5rem; }
.wege { display: grid; gap: 16px; margin: 0 0 8px; }
.weg { display: flex; gap: 14px; align-items: flex-start; background: var(--weiss); border: 2px solid var(--tinte); border-radius: 16px; padding: 14px; box-shadow: 4px 4px 0 var(--gruen); }
.weg h2 { margin-top: 0; }
.weg p { margin: 0; }
.mail { font-weight: 700; }

/* Hilfe und Anleitungen (Etappe 2): Karten wie oben, Bilder nur aus der App */
.hilfe { max-width: 48rem; padding: 24px 0 8px; }
.hilfe > h2, .anleitung > h2 { margin-top: 2rem; }
.hilfe-kopf { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.hilfe-kopf .einleitung { margin: 0; }
.hilfe-kopf h1 { margin-bottom: 0.35rem; }
.hilfe-figur svg { border: 2px solid var(--tinte); border-radius: 50%; display: block; flex: none; }
.hilfe-figur { flex: none; }
.anleitungen { display: grid; gap: 16px; margin: 20px 0 28px; }
.anleitung-karte {
  display: flex; gap: 14px; align-items: flex-start; background: var(--weiss); color: var(--tinte); text-decoration: none;
  border: 2px solid var(--tinte); border-radius: 16px; padding: 16px; box-shadow: 4px 4px 0 var(--gruen); min-width: 0;
}
.anleitung-karte:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--gruen); }
.anleitung-bild { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--creme); color: var(--gruen); border: 2px solid var(--gruen); }
.anleitung-bild img { width: 40px; height: 40px; border-radius: 9px; display: block; }
.anleitung-text { display: grid; gap: 4px; min-width: 0; }
.anleitung-titel { font: 700 1.2rem/1.25 var(--serif); color: var(--gruen); }
.weiter { font-weight: 700; color: var(--orange); }
.frage { margin-top: 28px; }
.zurueck-link { margin: 0 0 12px; font-weight: 700; }
.zurueck-link a { text-decoration: none; }
.anleitung h1 { font-size: 1.9rem; }

/* App installieren */
.oeffnen-kasten { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 18px; }
.oeffnen-kasten p { margin: 0; flex: 1 1 14rem; color: var(--grau); }
.geraet-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.geraet-wahl a {
  background: var(--weiss); border: 2px solid var(--gruen); border-radius: 999px; padding: 4px 14px; font-weight: 700; text-decoration: none;
}
.geraet-wahl a:hover { background: var(--creme); }
.geraet { margin-top: 24px; scroll-margin-top: 12px; }
.geraet h2 { margin-bottom: 0.6rem; }
.schritt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.schritt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--weiss); border: 2px solid var(--tinte); border-radius: 14px; padding: 10px 12px; box-shadow: 3px 3px 0 var(--gruen);
}
.schritt-zahl { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gruen); color: var(--weiss); font: 700 1.15rem/1 var(--serif); }
.schritt-text { font-size: 1.05rem; }
.schritt-bild { color: var(--gruen); display: flex; align-items: center; justify-content: flex-end; }
.schritt-bild svg { display: block; height: 40px; width: auto; max-width: 96px; }
.schritt-logo { display: block; width: 36px; height: 36px; border-radius: 8px; }
.geraet-hinweis { margin: 10px 0 0; color: var(--grau); }
.in-der-app { margin: 28px 0 0; padding: 12px 16px; border-left: 4px solid var(--orange); background: rgba(255, 255, 255, 0.75); border-radius: 0 12px 12px 0; }

/* Rezepte auswaehlen */
.wege-start { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.weg-karte { background: rgba(255, 255, 255, 0.75); border: 2px solid var(--tinte); border-radius: 14px; padding: 12px 14px; box-shadow: 4px 4px 0 var(--gruen); min-width: 0; }
.weg-karte h3 { margin-top: 0.5rem; }
.weg-karte p { margin: 0; }
.weg-bild { display: flex; align-items: center; height: 48px; }
.weg-bild > svg { border: 2px solid var(--tinte); border-radius: 50%; }
.taste {
  display: inline-block; min-width: 3.2rem; padding: 6px 10px; text-align: center; font-weight: 700; background: var(--weiss);
  border: 2px solid var(--tinte); border-bottom-width: 4px; border-radius: 8px;
}
/* Wie der Knopf «Auswählen» in der App: weiss mit orangem Rand (Katja 2026-10-25: an die App angleichen) */
.filter-knopf { display: grid; place-items: center; width: 46px; height: 42px; background: var(--weiss); color: var(--orange); border: 2px solid var(--orange); border-radius: 999px; }
.band-liste, .teilen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.band-liste li, .teilen-liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--weiss); border: 2px solid var(--tinte); border-radius: 14px; padding: 10px 12px;
}
.band-liste h3, .teilen-liste h3 { margin: 0.1rem 0 0.15rem; font-size: 1.1rem; }
.band-liste p, .teilen-liste p { margin: 0; }
/* Wie im Auswahlband: runde orange Knoepfe mit weissem Symbol */
.band-knopf { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--weiss); }
.band-knopf svg { display: block; }
.band-zeichen { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.teilen-bild { display: grid; place-items: center; width: 44px; height: 44px; color: var(--gruen); }
.tipps { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; }

/* Unsere Knoepfe einfach erklaert: jedes Bild so, wie der Knopf in der App aussieht (web/app/app.css) */
.regel-kasten {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 20px 0;
  background: var(--weiss); border: 2px solid var(--tinte); border-radius: 14px; padding: 14px 16px; box-shadow: 4px 4px 0 var(--orange);
}
.regel-kasten h2 { margin: 0; font-size: 1.3rem; }
.regel-kasten p { margin: 0.3rem 0 0; }
.regel-satz { font: 700 1.25rem/1.3 var(--serif); color: var(--orange); }
.regel-bilder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kb-gruppe { scroll-margin-top: 16px; }
.kb-gruppe > h2 { margin-top: 2rem; }
.kb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kb-eintrag {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--weiss); border: 2px solid var(--tinte); border-radius: 14px; padding: 10px 12px;
}
.kb-eintrag h3 { margin: 0.1rem 0 0.15rem; font-size: 1.1rem; }
.kb-eintrag h3::first-letter { text-transform: uppercase; }
.kb-eintrag p { margin: 0; }
/* Spalte des Bilds: 6 rem, Platz fuer «Übernehmen»; Textknoepfe trennen nur an Leerzeichen */
.kb-bild { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; min-height: 44px; width: 6rem; }
.kb-bild .kb-text { overflow-wrap: normal; padding: 5px 7px; font-size: 0.8rem; }
.kb { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; position: relative; }
.kb svg { display: block; }
.kb-zeichen { font-size: 1.1rem; font-weight: 700; line-height: 1; }
/* Handlung: rund, orange, weisses Symbol */
.kb-voll { background: var(--orange); color: var(--weiss); }
/* Schliessen: das ✕ ist neutral, weiss mit grauem Rand (App seit Paket FK) */
.kb-zu { background: var(--weiss); color: var(--grau); border: 1.5px solid #dde3e3; }
/* Umschalter: weiss mit orangem Rand, an = ganz orange */
.kb-rand { background: var(--weiss); color: var(--orange); border: 1.5px solid var(--orange); }
.kb-rand.an { background: var(--orange); color: var(--weiss); }
/* Ohne Rand, in Gruen (ⓘ, Nadel, ⇄) */
.kb-leise { color: var(--gruen); }
.kb-leise .kb-zeichen { font-size: 1.35rem; font-weight: 400; }
/* Ein Feld der Leiste unten: weiss auf Dunkelgruen */
.kb-leiste { width: 46px; height: 42px; border-radius: 10px; background: var(--gruen); color: var(--weiss); }
.kb-konto svg { border-radius: 50%; }
.kb-zahl {
  position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--orange); color: var(--weiss); font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center;
}
/* Das + in der Leiste: gross, orange, mit dunkelgruenem Ring */
.kb-neu { width: 50px; height: 50px; background: var(--orange); color: var(--weiss); border: 3px solid var(--gruen); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
.kb-neu svg { stroke-width: 2.4; }
/* Oranger Textknopf */
.kb-text {
  display: inline-block; max-width: 100%; padding: 5px 10px; border-radius: 10px; background: var(--orange); color: var(--weiss);
  font-weight: 700; font-size: 0.85rem; line-height: 1.2; text-align: center;
}
.kb-wahl { display: inline-block; padding: 6px 8px; border: 1.5px solid #c9cfcf; border-radius: 8px; background: var(--weiss); color: var(--gruen); font-size: 0.85rem; letter-spacing: -1px; }
.kb-schritt { display: inline-flex; align-items: center; gap: 2px; }
.kb-schritt .kb { width: 26px; height: 26px; font-weight: 700; }
.kb-wert { min-width: 1.2rem; text-align: center; font-weight: 700; }
.kb-feld { display: grid; gap: 5px; width: 4.25rem; padding: 7px 6px; border: 1.5px solid #c9cfcf; border-radius: 8px; background: var(--weiss); }
.kb-feld span { display: block; height: 4px; border-radius: 2px; background: var(--tinte); opacity: 0.55; }
.kb-feld span + span { width: 70%; }
.kb-verweis { margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid var(--orange); background: rgba(255, 255, 255, 0.75); border-radius: 0 12px 12px 0; }
.kb-verweis a { font-weight: 700; }
.anleitung-bild .kb-voll { width: 36px; height: 36px; }

/* Fuss */
/* Linie nur ueber dem Inhalt, nicht ueber den Seitenabstaenden */
.fuss { margin-top: 40px; padding-top: 0; padding-bottom: 28px; font-size: 0.95rem;
  background: linear-gradient(var(--tinte), var(--tinte)) content-box top / 100% 2px no-repeat; }
.fuss nav { padding-top: 18px; }
.fuss nav a { font-weight: 700; }
.fuss p { margin: 6px 0 0; color: var(--grau); }

/* Groessere Bildschirme */
@media (min-width: 600px) {
  .kopf { gap: 10px 16px; padding-top: 14px; }
  .logo img { height: 40px; }
  .nav { gap: 6px 14px; font-size: 0.95rem; }
  .nav-gross { display: inline; }
  .nav .knopf.hell { padding: 5px 14px; }
  .ueblich { grid-template-columns: repeat(2, 1fr); }
  .anleitungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regel-kasten { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
  .regel-bilder { flex-direction: column; }
  .anleitung h1 { font-size: 2.3rem; }
  /* Ab Tablet steht Yumos Blase oben links im Bild, die Karte ragt unten rechts hinein. */
  .vorrat-buehne { position: relative; display: block; }
  .vorrat-blase { position: absolute; top: 16px; left: 16px; max-width: min(46%, 17rem); margin: 0; }
  /* Katja 2026-10-27: die Karte deutlich kleiner und weiter ins Bild (rechts unten auf die leere Wand). */
  .vorrat { position: relative; }
  .kuehlschrank-beispiel { position: absolute; right: 5%; bottom: 6%; margin: 0; width: min(46%, 15.5rem); padding: 10px 12px; font-size: 0.82rem;
    box-shadow: 3px 3px 0 var(--gruen); }
  .kuehlschrank-beispiel .kuehlschrank-chips { margin-bottom: 8px; gap: 5px; }
  .kuehlschrank-beispiel .kuehlschrank-chips li { padding: 2px 10px; }
  .kuehlschrank-beispiel .kuehlschrank-treffer { gap: 6px; }
  .kuehlschrank-beispiel .kuehlschrank-treffer li { padding: 6px 9px; border-radius: 10px; }
  .kuehlschrank-beispiel .kuehlschrank-passt, .kuehlschrank-beispiel .kuehlschrank-fehlt, .kuehlschrank-beispiel .kuehlschrank-eingabe { font-size: 0.78rem; }
  .huete { gap: 14px; }
}
@media (min-width: 900px) {
  .wege-start { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .kopf, main, .fuss { padding-left: 32px; padding-right: 32px; }
  .logo img { height: 52px; }
  h1 { font-size: 3rem; }
  h2 { font-size: 1.9rem; }
  .einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding-top: 28px; }
  .unterzeile { font-size: 1.45rem; }
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; }
  /* Beispiele abwechselnd: Bild links (1. und 3.), rechts (2.) */
  .paar.bild-links { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .paar.bild-links .medien { order: -1; }
  .beispiele { gap: 48px; }
  .ueblich { grid-template-columns: repeat(3, 1fr); }
  .bald-start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; padding-top: 36px; }
  .bald-yumo-bild { width: 280px; }
  .bald-clips { max-width: 880px; }
  .ueblich.bald-punkte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .bald-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .knopf:hover { transform: none; }
  .yumo-bild { animation: none; }
  .bald-yumo-bild { animation: none; }
  .hut-karte:hover svg { transform: none; }
}

/* «Was koche ich?» (Katja 2026-10-27): «Worauf hast du Lust?» als Chips, die Szene links. */
.waskoche-fragen-titel { font-weight: 700; color: var(--grau); font-size: 0.9rem; margin: 18px 0 8px; }
@media (min-width: 900px) {
  .paar.waskoche.bild-links .vorrat { order: -1; }
  .waskoche .waskoche-blase { left: auto; right: 16px; top: 42%; }
}

/* Handgeschriebene Familienrezepte (Katja 2026-10-27): Collage mit Rahmen wie die Vorrat-Szene, die Handschrift als
   leicht gedrehte Karte darauf. */
.handschrift-buehne { position: relative; margin: 0; padding-bottom: 2.5rem; }
.handschrift-collage { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border: 2px solid var(--tinte); border-radius: 16px; box-shadow: 4px 4px 0 var(--gruen); background: var(--raster); }
.handschrift-seite { position: absolute; right: 3%; bottom: 0; width: 42%; height: auto; transform: rotate(4deg);
  border: 6px solid var(--weiss); border-radius: 4px; box-shadow: 0 8px 24px rgb(0 0 0 / 25%); }
.handschrift-buehne figcaption { margin-top: 0.7rem; max-width: 55%; font-size: 0.85rem; color: var(--grau); }
@media (min-width: 900px) {
  .handschrift-buehne { max-width: 520px; justify-self: center; }
  .handschrift-seite { right: -4%; }
}

/* Preise (Katja 2026-10-29): Tabelle als Karte; am Handy rollt nur sie seitwaerts, die Seite nie. */
.preis-seite { padding: 24px 0 8px; }
.preis-seite .einleitung { max-width: none; } /* Katja 2026-10-30: kein Umbruch nach «Platz» */
/* Katja 2026-10-30: entweder CHF oder € (WAEHRUNG_SKRIPT in seiten.js); ohne JavaScript beide und kein Umschalter. */
html[data-waehrung] .w-und, html[data-waehrung="CHF"] .w-eur, html[data-waehrung="EUR"] .w-chf { display: none; }
.waehrung-wahl { display: none; margin: 0 0 1rem; }
html[data-waehrung] .waehrung-wahl { display: inline-flex; border: 2px solid var(--tinte); border-radius: 999px; overflow: hidden; }
.waehrung-wahl button { border: 0; background: var(--weiss); color: var(--tinte); font: inherit; font-weight: 600; padding: 4px 14px; cursor: pointer; }
html[data-waehrung="CHF"] .waehrung-wahl [data-waehrung-wahl="CHF"],
html[data-waehrung="EUR"] .waehrung-wahl [data-waehrung-wahl="EUR"] { background: var(--gruen); color: var(--weiss); }
.preis-huelle { overflow-x: auto; background: var(--weiss); border: 2px solid var(--tinte); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--gruen); margin: 20px 0 12px; }
.preis-tabelle { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.95rem; }
.preis-tabelle th, .preis-tabelle td { padding: 8px 10px; text-align: center; vertical-align: top; border-bottom: 1px solid #eadfcb; }
.preis-tabelle th[scope="row"] { text-align: left; font-weight: 400; }
.preis-tabelle thead th { vertical-align: bottom; border-bottom: 2px solid var(--tinte); }
.stufe-name { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--gruen); white-space: nowrap; }
.preis-tabelle thead th { width: 16.5%; }
.stufe-preis { display: block; font-weight: 700; margin-top: 2px; }
.stufe-fuer { display: block; color: var(--grau); font-size: 0.85rem; font-weight: 400; }
.preis-tabelle tr.gruppe th { text-align: left; font-family: var(--serif); color: var(--gruen); background: var(--creme); }
.preis-tabelle td.ja { color: var(--gruen); font-weight: 700; }
.preis-tabelle td.nein { color: var(--grau); }
.fussnoten, .preis-hinweis { color: var(--grau); font-size: 0.9rem; max-width: 44rem; }
.preis-frei { background: var(--weiss); border: 2px solid var(--tinte); border-radius: 16px; padding: 16px 20px; margin: 24px 0;
  max-width: 44rem; }
.preis-frei ul { margin: 0 0 0.75rem; padding-left: 1.2rem; }
.preis-seite .knoepfe { margin-top: 20px; }
.text-seite .formular p { margin: 0 0 0.35rem; }

/* Am Handy bleibt beim Seitwaertsrollen die Spalte mit den Funktionen stehen. */
.preis-tabelle th[scope="row"] { position: sticky; left: 0; background: var(--weiss); min-width: 9.5rem; z-index: 1; }
.gruppe-titel { position: sticky; left: 10px; }