/* ================================================================
 * Screen 02 — WILLKOMMEN BEI OSPELLA
 * Vorlage: 02_konto_anlegen.png (der Dateiname ist um eins verschoben)
 *
 * Aufbau der Vorlage, von oben nach unten, VOLLSTAENDIG:
 *   Statusleiste — Titel (2 Zeilen) — Absatz (3 Zeilen) — Pager (4) —
 *   Foto ueber die volle Breite — Knopf "Konto anlegen" — Knopf "Anmelden"
 *
 * Was die Vorlage NICHT hat und deshalb hier auch nicht steht:
 * kein Erklaerabsatz, kein Rechtshinweis-Kasten, kein dritter Knopf.
 * (Genau die drei Zutaten hatten den alten Screen zerschossen.)
 * ================================================================ */

.willkommen {
  display: flex;
  flex-direction: column;

  /* HOEHE, nicht MIN-HOEHE — gemessen am 09.09.2026 im Rahmen 390 x 745.
   *
   * Mit `min-height` waechst der Kasten mit seinem Inhalt, und Flexbox hat
   * dann nichts zu verteilen: Das Foto blieb bei seiner natuerlichen Hoehe
   * von 576 px (77 % des Bildschirms), das Dokument wurde 996 px hoch, und
   * die beiden Knoepfe lagen 111 px UNTER der Kante. Erreichbar nur durch
   * Scrollen — auf einem Willkommensbildschirm, den die Vorlage
   * (02_konto_anlegen.png) vollstaendig auf EINEM Bild zeigt.
   *
   * Das ist derselbe Fehler wie in Ospella 1, Protokoll Teil 362: „auch der
   * erste Bildschirm versteckt seinen Hauptknopf unter der Falz".
   *
   * `overflow-y: auto` ist der Notausgang: .telefon hat `overflow: hidden`,
   * und mit fester Hoehe wuerde der Fusz bei sehr grosser Schrift
   * abgeschnitten statt nur verschoben — das waere schlimmer als vorher. */
  height: 100dvh;
  overflow-y: auto;
}

.willkommen__kopf {
  padding: 46px var(--rand) 0;
  flex: 0 0 auto;
}

.willkommen__titel {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: clamp(30px, 8.7vw, 38px);   /* an der BREITE bemessen, nicht an
                                          * der Hoehe: die Vorlage ist 1:2,56,
                                          * ein Telefon 1:2,16 — Hoehen sind
                                          * daraus nicht uebertragbar. */
  line-height: 1.14;
  letter-spacing: -0.4px;
  margin: 0 0 14px;
  color: var(--text);
}

.willkommen__absatz {
  font-size: clamp(15px, 4.1vw, 17px);
  line-height: 1.45;
  color: var(--text-leise);
  margin: 0;
  max-width: 20em;
}

/* Pager: ENTFERNT 10.09.2026 auf Anweisung — die Punkte standen unter
 * Bildern, auf denen sich nichts wischen laesst, und behaupteten damit
 * eine Funktion, die es nicht gibt. */

/* Die Fotoflaeche. Sie nimmt den Rest der Hoehe — deshalb sitzt der Screen
 * auf jedem Geraet richtig, obwohl die Vorlage ein anderes Seitenverhaeltnis
 * hat. Oben und unten blendet das Foto weich ins Creme, wie in der Vorlage;
 * es hat dort keine sichtbare Kante. */
.willkommen__bild {
  flex: 1 1 auto;
  /* Untergrenze in rem waechst bei 200 % Schrift ueber den Bildschirm hinaus
   * — deshalb gegen dvh gedeckelt.
   *
   * Am 09.09.2026 von min(22rem, 42dvh) auf min(14rem, 26dvh) gesenkt: Der
   * alte Wert war bei 745 px Hoehe 313 px und damit hoeher als der Platz,
   * der nach Kopf (280 px) und Fusz (140 px) uebrig bleibt. Das Foto konnte
   * deshalb nicht weit genug schrumpfen und schob die Knoepfe hinaus.
   * Bei normaler Schrift ist der Wert ohne Wirkung — dort waechst das Foto
   * ueber `flex-grow` auf den freien Rest (gemessen 325 px). Er greift nur,
   * wenn es eng wird, und genau dafuer ist er da. */
  min-height: min(14rem, 26dvh);
  position: relative;
  overflow: hidden;
}
.willkommen__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, #000 13%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%, #000 13%, #000 90%, transparent 100%);
}

.willkommen__fusz {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px var(--rand) 28px;
  background: var(--creme);
}

/* ================================================================
 * Screen 03 — KONTO ANLEGEN
 * Vorlage: 03_interessen.png (Dateiname verschoben)
 *
 * Aufbau der Vorlage, VOLLSTAENDIG:
 *   Zurueck-Pfeil + dreiteilige Fortschrittsleiste — Titel —
 *   "Schon dabei? Jetzt anmelden" — drei Felder mit Zeichen —
 *   Knopf — Trenner "oder weiter mit" — drei Dienstkacheln —
 *   Fuszzeile zu AGB und Datenschutz
 *
 * Apple, Google und Facebook sind ATTRAPPEN: Ospella hat keinen Server,
 * und echtes OAuth braucht Weiterleitungen, eine Domain und
 * Entwicklerkonten. Die Kacheln sehen aus wie in der Vorlage und tun
 * nichts. Das ist so entschieden und in NICHT-ECHT.md aufgefuehrt.
 * ================================================================ */

.seite {
  padding: 0 var(--rand);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.kopfzeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0 44px;
}
.zurueck {
  background: none;
  border: none;
  padding: 6px;
  margin-left: -6px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  line-height: 0;
}

/* Fortschritt: drei Abschnitte, der erste gefuellt.
 * GEMESSEN am hochaufloesenden Screen (941 px breit): der Balken laeuft von
 * x 330 bis 585, also 27 % der Screenbreite, und steht ZENTRIERT — nicht
 * links neben dem Pfeil. Bei 390 px sind das 106 px. */
.fortschritt {
  display: flex;
  gap: 6px;
  width: 27%;
  min-width: 96px;
  margin: 0 auto;
  transform: translateX(-14px);   /* der Pfeil links zieht die Mitte, die
                                   * Vorlage gleicht das aus */
}
.fortschritt__teil {
  height: 4px;
  flex: 1 1 0;
  border-radius: 999px;
  background: #EDE3D7;
}
.fortschritt__teil--voll { background: var(--knopf); }

.konto__titel { margin: 0 0 6px; }
.konto__wechsel {
  font-size: 14px;
  color: var(--text-leise);
  margin: 0 0 44px;
}
.konto__wechsel a {
  color: var(--akzent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Eingabefeld: Sandflaeche, duenner Rand, Zeichen links.
 * GEMESSEN: Fuellung #F6ECE2 (= Sand der Legende), Rand #ABA59D. */
.feld {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sand);
  border: 1px solid #E2D7C9;
  border-radius: 12px;
  padding: 0 14px;
  height: 52px;
  margin-bottom: 12px;
}
.feld svg { flex: 0 0 auto; color: #8C8478; }
.feld input {
  border: none;
  background: none;
  outline: none;
  font-family: var(--schrift-text);
  font-size: 16px;          /* unter 16px zoomt iOS beim Tippen hinein */
  color: var(--text);
  width: 100%;
  padding: 0;
}
.feld input::placeholder { color: #8C8478; }

.konto__knopf { margin-top: 10px; }

/* Trenner. In der Vorlage laeuft eine Linie durch, der Text sitzt darauf. */
.trenner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--text-leise);
  font-size: 13px;
}
.trenner::before, .trenner::after {
  content: '';
  height: 1px;
  background: #E7DCCE;
  flex: 1 1 auto;
}

.dienste { display: flex; gap: 12px; }
.dienst {
  flex: 1 1 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--creme);
  border: 1px solid #E2D7C9;
  border-radius: 14px;
  cursor: pointer;
}

.konto__fusz {
  font-size: 12px;
  line-height: 1.5;
  color: #8C8478;
  margin: 0 0 24px;
  padding-top: 34px;
}

/* ================================================================
 * Screen 01 — SPLASH: ENTFERNT 10.09.2026. Der Film springt seither
 * direkt auf Willkommen; splash.html und splashweiter.js sind
 * geloescht, dieser Stilblock ist mit ihnen gegangen.
 * ================================================================ */

/* ================================================================
 * Screen 04 — WAS MACHT DICH AUS?
 * Vorlage: "Was macht dich aus.png" (941 x 1672, die einzige hochaufloesende)
 *
 * ACHTUNG, zwei Fassungen: Der kleine Screen im Master-Sheet zeigt ein
 * 3x3-Raster mit neun Eintraegen. Die separat gelieferte hochaufloesende
 * Fassung zeigt VIER Rubriken mit 12 + 6 + 6 + 6 Eintraegen — und dazu
 * passen die 30 gelieferten Icon-Dateien. Gebaut ist die hochaufloesende.
 *
 * ABWEICHUNG, bewusst und gemeldet: Der Seitenrand ist hier 20 px statt der
 * sonstigen 38 px. Sechs Spalten passen bei 390 px Screenbreite anders nicht
 * — die Vorlage ist fuer eine breitere Flaeche gezeichnet.
 * ================================================================ */

.interessen { padding: 0 16px; }

.interessen__kopf { position: relative; }

.interessen__titel {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: clamp(30px, 8.8vw, 37px);
  line-height: 1.12;
  margin: 0 0 10px;
  max-width: 58%;              /* rechts steht die Foto-Ecke */
}
.interessen__unterzeile {
  font-size: 15px;
  color: var(--text-leise);
  margin: 0 0 22px;
}

/* Die Foto-Ecke oben rechts: Kraeuter auf Holz, darauf der Spruch in
 * Schreibschrift und ein kleines Herz. In der Vorlage laeuft sie ueber den
 * Bildrand hinaus. */
.interessen__ecke {
  position: absolute;
  top: -92px;
  right: -16px;
  width: 54%;
  pointer-events: none;
}
.interessen__ecke img {
  width: 100%;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 78% 22%, #000 52%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 82% at 78% 22%, #000 52%, transparent 78%);
}
.interessen__spruch {
  position: absolute;
  left: 4%;
  bottom: 4px;
  font-family: 'Satisfy', cursive;
  font-size: 15px;
  line-height: 1.3;
  color: #4A4032;
  transform: rotate(-7deg);
  margin: 0;
}

.rubrik { margin-bottom: 26px; }
.rubrik__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rubrik__zeichen { flex: 0 0 auto; color: var(--knopf); display: flex; }
.rubrik__titel {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 19px;
  margin: 0;
  flex: 1 1 auto;
}
/* GEMESSEN: dieser Link misst 4,05:1 auf Creme und liegt damit unter 4,5.
 * So gebaut wie die Vorlage, gemeldet, nicht still nachgezogen. */
.rubrik__alle {
  font-size: 13px;
  color: var(--akzent-text);
  text-decoration: none;
  white-space: nowrap;
}

.wahlraster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));  /* 1fr waechst bis
                                   * max-content und sprengt das Raster */
  gap: 12px 6px;
}
.wahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--schrift-text);
}
.wahl__kreis {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  /* Die Icon-Dateien sind aus dem Vorlagenbild geschnitten und tragen an den
   * Raendern Reste der Nachbarschaft. Der runde Ausschnitt plus leichter
   * Zoom nimmt sie weg. */
}
.wahl__kreis img {
  width: 114%;
  height: 114%;
  margin: -7% 0 0 -7%;
  display: block;
  object-fit: cover;
}
/* Die nachgelieferten SVG-Icons (10.09.2026) sind sauber gezeichnet und
 * haben keine Schnittraender — der Zoom wuerde ihnen nur die Striche
 * anschneiden. */
.wahl__kreis img[src$=".svg"] {
  width: 78%;
  height: 78%;
  margin: 11%;
  object-fit: contain;
}
.wahl__wort {
  font-size: 9.5px;
  line-height: 1.18;
  color: var(--text-leise);
  text-align: center;
  hyphens: auto;
}
.wahl--gewaehlt .wahl__wort { color: var(--text); font-weight: 500; }

.interessen__fusz {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 26px;
}

/* ================================================================
 * GEMEINSAME BAUTEILE der Tab-Screens
 * ================================================================ */

/* Navigationsleiste. ENTSCHIEDEN am 09.09.2026: Die Vorlage zeigt ZWEI
 * verschiedene Leisten — im Entdecken-Screen "Entdecken · Matches · Küche ·
 * Nachrichten · Profil", in Rezepte und Mein Profil "Entdecken · Rezepte ·
 * Planen · Nachrichten · Profil". Gilt die zweite (steht in zwei von drei
 * Screens und passt zu den Screens, die es gibt). */
.leiste {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid #EFE5D9;
  background: var(--creme);
  flex: 0 0 auto;
}
.leiste__reiter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-leise);
  font-family: var(--schrift-text);
  font-size: 10px;
  text-decoration: none;
  min-width: 56px;
}
.leiste__reiter--offen { color: var(--knopf); }
.leiste__reiter--offen .leiste__wort { font-weight: 600; }

/* Chip-Reihe. Waechst waagrecht ueber den Rand hinaus und wird gewischt. */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--rand) 2px;
  margin: 0 calc(-1 * var(--rand));
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  border: 1px solid #E4D9CB;
  background: var(--creme);
  color: var(--text-leise);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-family: var(--schrift-text);
  white-space: nowrap;
  cursor: pointer;
}
.chip--offen {
  background: var(--olive);
  border-color: var(--olive);
  color: #FFFFFF;
  font-weight: 500;
}

/* ================================================================
 * Screen 06 — ENTDECKEN (die Wischkarte)
 * Vorlage: aus dem Master-Sheet geschnitten — sie fehlte als Einzeldatei.
 *
 * Aufbau: Kopf "Entdecken" + Filterzeichen — Chip-Reihe — grosze Fotokarte
 * mit Namen, Entfernung und drei Merkmalen — drei runde Knoepfe AUF der
 * Karte — Navigationsleiste.
 *
 * "3 km entfernt" und das Verifiziert-Haekchen sind Attrappen (NICHT-ECHT.md
 * Nr. 4 und 5): Ospella fuehrt keine Koordinaten und kein Pruefverfahren.
 * ================================================================ */

.tabkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--rand) 14px;
}
.tabkopf__titel {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 26px;
  margin: 0;
}
.tabkopf__knopf {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text);
  display: flex;
}

.entdecken__buehne {
  flex: 1 1 auto;
  padding: 14px var(--rand) 10px;
  display: flex;
  min-height: 0;
}

.karte {
  position: relative;
  flex: 1 1 auto;
  border-radius: 22px;
  overflow: hidden;
  background: #2A2520;
  min-height: min(24rem, 46dvh);   /* Untergrenze in rem waechst bei 200 %
                                    * Schrift ueber den Bildschirm — gegen
                                    * dvh gedeckelt. */
}
.karte__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* EIN Verlauf mit fester Pixelhoehe, nicht zwei und nicht in Prozent:
 * die Karte ist elastisch, der Textfusz nicht. Ein Verlauf ueber einen
 * Prozentsatz der Kartenhoehe misst bei niedriger Karte 2,7:1. */
.karte__schleier {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 300px;
  background: linear-gradient(to top,
      rgba(20, 16, 12, 0.92) 0px,
      rgba(20, 16, 12, 0.86) 120px,
      rgba(20, 16, 12, 0.42) 210px,
      rgba(20, 16, 12, 0) 300px);
}

.karte__zahl {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(28, 22, 18, 0.55);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}

.karte__angaben {
  position: absolute;
  left: 18px; right: 18px;
  bottom: 96px;                 /* darueber liegen die drei Knoepfe */
  color: #FFFFFF;
}
.karte__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--schrift-text);
  font-size: 25px;
  font-weight: 600;
  margin: 0 0 5px;
}
.karte__ort {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  margin: 0 0 10px;
  opacity: 0.95;
}
.karte__merkmale { display: flex; gap: 14px; flex-wrap: wrap; }
.karte__merkmal {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
}

.entscheidung {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 22px;
}
.rundknopf {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.rundknopf--klein { width: 50px; height: 50px; }

/* ================================================================
 * Screen 07 — CHAT
 * Vorlage: 07_chat.png
 *
 * Telefonhoerer, "Online" und die Sprachnachricht sind Attrappen
 * (NICHT-ECHT.md Nr. 6, 7, 8).
 * GEMESSEN: fremde Blase #F7EEE3 (= Sand), eigene #FADCBF, Online #45623B.
 * ================================================================ */

.chatkopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--rand) 12px;
  border-bottom: 1px solid #F0E7DA;
}
.chatkopf__bild {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.chatkopf__wer { flex: 1 1 auto; min-width: 0; }
.chatkopf__name { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.2; }
.chatkopf__zustand {
  font-size: 12px;
  color: #45623B;               /* GEMESSEN, Kontrast 6,4 auf Creme */
  margin: 0;
}

.verlauf {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px var(--rand) 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nachricht { max-width: 78%; }
.nachricht--eigen { align-self: flex-end; }
.blase {
  border-radius: 18px;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.4;
  background: var(--sand);
  color: var(--text);
}
.nachricht--eigen .blase { background: #FADCBF; }
.zeit {
  font-size: 10.5px;
  color: #8C8478;
  margin: 4px 2px 10px;
  display: block;
}
.zeit { text-align: right; }

/* Sprachnachricht: Abspielzeichen, Wellenform, Dauer. */
.sprachblase {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FADCBF;
  border-radius: 18px;
  padding: 11px 14px;
}
.sprachblase__welle { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
.sprachblase__welle span {
  width: 2.5px;
  border-radius: 2px;
  background: #B0724A;
  display: block;
}
.sprachblase__dauer { font-size: 11.5px; color: #6B5B4A; }

/* Der Tipp-Hinweis: drei Punkte in einer eigenen Blase. */
.tippt {
  align-self: flex-start;
  background: var(--sand);
  border-radius: 18px;
  padding: 12px 15px;
  display: flex;
  gap: 4px;
}
.tippt span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #B5ACA0;
  display: block;
}

.eingabezeile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px var(--rand) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #F0E7DA;
  flex: 0 0 auto;
}
.eingabezeile__plus {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: #A08D78;          /* GEMESSEN: in der Vorlage gefuellt, nicht hell */
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.eingabezeile__feld {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sand);
  border: 1px solid #EDE2D4;
  border-radius: 999px;
  padding: 0 14px;
  height: 40px;
}
.eingabezeile__feld input {
  border: none; background: none; outline: none;
  font-family: var(--schrift-text);
  font-size: 15px;
  width: 100%;
}
.eingabezeile__feld input::placeholder { color: #9A9187; }

/* ================================================================
 * Screen 05 — DEIN PROFIL (Onboarding, Fotos)
 * Vorlage: 05_entdecken.png (Dateiname verschoben)
 * Kopf und Unterzeile stehen hier ZENTRIERT — anders als bei "Konto
 * anlegen" und "Was macht dich aus?", wo sie links stehen.
 * ================================================================ */

.profilbau { text-align: center; }
.profilbau__titel { margin: 0 0 6px; }
.profilbau__unterzeile {
  font-size: 14px;
  color: var(--text-leise);
  margin: 0 0 20px;
}
.profilbau__gross {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1.12;
  background: var(--sand);
}
.profilbau__gross img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profilbau__kamera {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(24, 20, 16, 0.72);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.profilbau__reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 14px 0 26px;
}
.profilbau__klein {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand);
}
.profilbau__klein img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profilbau__mehr {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid #E4D9CB;
  background: var(--sand);
  color: var(--text-leise);
  font-size: 26px;
  cursor: pointer;
}
.profilbau__fusz { display: flex; flex-direction: column; gap: 10px; padding-bottom: 26px; }

/* ================================================================
 * Screen 08 — MATCH ("Da ist was am Köcheln.")
 * Vorlage: 06_match.png
 * ================================================================ */

.match { text-align: center; position: relative; }
.match__buehne {
  position: relative;
  padding: 6px 0 0;
}
.match__grund {
  position: absolute;
  inset: -70px 0 auto 0;
  height: 430px;
  width: 100%;
  object-fit: cover;
  object-position: center 72%;   /* oben im Foto liegen Brot und Oliven; die
                                  * Statusleiste braucht das helle Tuch */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 99%);
  opacity: 0.82;   /* die Vorlage zeigt ein deutlich helleres Tuch */
}
.match__haube {
  position: relative;
  width: 78px;
  margin: 6px auto 2px;
  display: block;
  filter: drop-shadow(0 0 7px rgba(255, 236, 205, 1))
          drop-shadow(0 0 16px rgba(255, 216, 165, 0.9));
}
.match__teller {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 calc(-1 * var(--rand)) 26px;
  padding: 0 4%;
}

/* Ein Teller ist zweiteilig: das Gesicht liegt UNTER dem freigestellten
 * Tellerbild und scheint durch dessen durchsichtige Mitte.
 * Die Prozentwerte sind am Vorlagenbild gemessen, nicht geschaetzt:
 * Oeffnung 55,20 % des Tellers, Gesicht 56,4 % (muss die Oeffnung sicher
 * fuellen), Ueberlappung der beiden Teller 7,35 %.
 * Nicht nach Augenmasz aendern. */
.teller {
  position: relative;
  width: 49%;
  aspect-ratio: 1;
  flex: 0 0 auto;
}
.teller + .teller { margin-left: -7.35%; }
.teller__gesicht {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 34%;
}
.teller__rand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.match__titel {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: clamp(31px, 9vw, 38px);
  line-height: 1.14;
  margin: 0 0 12px;
}
.match__text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-leise);
  margin: 0 auto 26px;
  max-width: 21em;
}
.match__fusz { display: flex; flex-direction: column; gap: 10px; padding-bottom: 28px; }

/* ================================================================
 * Screen 09 — GEMEINSAM KOCHEN?
 * Vorlage: 08_gemeinsam_kochen.png
 * ================================================================ */

.planen__bild {
  position: relative;
  height: 34dvh;
  min-height: 210px;
  flex: 0 0 auto;
}
.planen__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.planen__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      var(--creme) 0px, rgba(255, 248, 241, 0.86) 60px, rgba(255, 248, 241, 0) 150px);
}
.planen__kopfknoepfe {
  position: absolute;
  top: 12px; left: 14px; right: 14px;
  display: flex;
  justify-content: space-between;
  color: #FFFFFF;
}
.planen__titel {
  position: absolute;
  left: var(--rand); right: var(--rand);
  bottom: 8px;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: clamp(27px, 7.8vw, 33px);
  margin: 0;
}
.planen__unterzeile {
  font-size: 14px;
  color: var(--text-leise);
  margin: 4px 0 20px;
}
.termin {
  display: flex;
  gap: 12px;
  background: var(--sand);
  border: 1px solid #EFE4D6;
  border-radius: var(--karte-radius);
  padding: 16px;
  margin-bottom: 22px;
}
.termin__zeichen {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #F6E0CE;
  color: var(--knopf);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.termin__wann { font-size: 13px; color: var(--text-leise); margin: 0 0 2px; }
.termin__was { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; }
.termin__wo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--akzent-text);
  margin: 0;
}
.gaeste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.gaeste__wert { font-size: 12.5px; color: var(--text-leise); margin: 0; }
.gaeste__zahl { font-size: 15px; margin: 2px 0 0; }
.gaeste__regler { display: flex; gap: 10px; }
.gaeste__taste {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid #E4D9CB;
  background: var(--creme);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}
.planen__spaeter {
  display: block;
  text-align: center;
  margin: 14px 0 26px;
  font-size: 14px;
  color: var(--text);
  text-underline-offset: 3px;
}

/* ================================================================
 * Screen 10 — REZEPT-IDEEN
 * Vorlage: 09_rezepte.png
 * ================================================================ */

.suchfeld {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sand);
  border: 1px solid #EDE2D4;
  border-radius: 12px;
  padding: 0 13px;
  height: 44px;
  margin: 0 var(--rand) 14px;
}
.suchfeld svg { color: #8C8478; flex: 0 0 auto; }
.suchfeld input {
  border: none; background: none; outline: none;
  font-family: var(--schrift-text);
  font-size: 15px;
  width: 100%;
}
.suchfeld input::placeholder { color: #9A9187; }

.rezeptliste {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px var(--rand) 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rezept {
  border-radius: var(--karte-radius);
  overflow: hidden;
  background: var(--creme);
  border: 1px solid #F0E6D9;
}
.rezept__bild { width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; display: block; }
.rezept__fusz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 13px;
}
.rezept__wer { flex: 1 1 auto; min-width: 0; }
.rezept__name { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.rezept__daten {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-leise);
  margin: 0;
}
.rezept__herz { background: none; border: none; padding: 4px; cursor: pointer; color: #B5ACA0; }

/* ================================================================
 * Screen 11 — MEIN PROFIL
 * Vorlage: 10_mein_profil.png
 * ================================================================ */

.meinprofil { text-align: center; padding: 0 22px; overflow-y: auto; flex: 1 1 auto; }
.meinprofil__bild {
  position: relative;
  width: 132px;
  margin: 10px auto 14px;
}
.meinprofil__bild img {
  width: 132px; height: 132px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.meinprofil__stift {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--creme);
  background: #FFFFFF;
  color: #241F1A;
  box-shadow: 0 1px 4px rgba(60, 40, 20, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.meinprofil__name { font-size: 23px; font-weight: 600; margin: 0 0 3px; }
.meinprofil__ort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-leise);
  margin: 0 0 16px;
}
.merkmalreihe {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 7px;
  margin-bottom: 9px;
}
.merkmalreihe:last-of-type { margin-bottom: 22px; }
.merkmal {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #E9DECF;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--creme);
}
.merkmal svg { color: var(--knopf); flex: 0 0 auto; }
.merkmal { white-space: nowrap; }
.zitat {
  background: var(--sand);
  border-radius: var(--karte-radius);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
  margin: 0 0 20px;
}
.zahlen { display: flex; justify-content: space-around; padding: 6px 0 24px; }
.zahl__wert { font-size: 24px; font-weight: 600; margin: 0; }
.zahl__wort { font-size: 12px; color: var(--text-leise); margin: 2px 0 0; }

/* ================================================================
 * SYMBOLE AUS RASTERVORLAGEN
 * Die gelieferten Zeichen (Kochhaube, Herd, Loeffel, Gedeck, Koch,
 * Koechin, Paar) liegen als 128er-PNG mit Alphakanal und werden als
 * CSS-Maske gelegt — so nehmen sie die Farbe des Zustands an.
 *
 * ACHTUNG: mask-image laedt NICHT ueber file://. Wer die App direkt aus
 * dem Dateisystem oeffnet, sieht leere Flaechen. Sie braucht einen Server
 * (oder die Zeichen muessen als <img> gelegt werden, dann aber ohne
 * Farbwechsel).
 * ================================================================ */

.zeichen-maske {
  width: 23px;
  height: 23px;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: block;
  flex: 0 0 auto;
}
.zeichen-maske--entdecken  { -webkit-mask-image: url('../media/symbole/entdecken-maske.png');  mask-image: url('../media/symbole/entdecken-maske.png'); }
.zeichen-maske--matches    { -webkit-mask-image: url('../media/symbole/matches-maske.png');    mask-image: url('../media/symbole/matches-maske.png'); }
.zeichen-maske--rezepte    { -webkit-mask-image: url('../media/symbole/rezepte-maske.png');    mask-image: url('../media/symbole/rezepte-maske.png'); }
.zeichen-maske--tafelrunde { -webkit-mask-image: url('../media/symbole/tafelrunde-maske.png'); mask-image: url('../media/symbole/tafelrunde-maske.png'); }
/* Bestand, in der Leiste nicht mehr belegt: kuechen-maske.png (Herd). */

/* Das Profilzeichen folgt der Einstellung am Wurzelelement.
 * Vorgabe ist "koch" — ein fehlendes Feld bedeutet also nicht "kaputt",
 * sondern den Vorgabewert. Deshalb braucht es dafuer keine Migration. */
.zeichen-maske--profil,
[data-profilsymbol="koch"] .zeichen-maske--profil {
  -webkit-mask-image: url('../media/symbole/profil-maske.png');
  mask-image: url('../media/symbole/profil-maske.png');
}
[data-profilsymbol="koechin"] .zeichen-maske--profil {
  -webkit-mask-image: url('../media/symbole/profil-koechin-maske.png');
  mask-image: url('../media/symbole/profil-koechin-maske.png');
}
[data-profilsymbol="paar"] .zeichen-maske--profil {
  -webkit-mask-image: url('../media/symbole/profil-paar-maske.png');
  mask-image: url('../media/symbole/profil-paar-maske.png');
}

/* ================================================================
 * EINSTELLUNGEN
 * Neu am 09.09.2026 auf Ansage: das Profilzeichen ist hier waehlbar
 * und man sieht die Auswahl sofort.
 * ================================================================ */

.einstellungen { padding: 0 var(--rand) 30px; overflow-y: auto; flex: 1 1 auto; }
.eingruppe { margin-bottom: 26px; }
.eingruppe__titel {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 4px;
}
.eingruppe__hinweis {
  font-size: 13px;
  color: var(--text-leise);
  margin: 0 0 14px;
}

.zeichenwahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.zeichenwahl__feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 13px;
  border: 1.5px solid #E4D9CB;
  border-radius: var(--karte-radius);
  background: var(--creme);
  cursor: pointer;
  font-family: var(--schrift-text);
  font-size: 12.5px;
  color: var(--text-leise);
}
.zeichenwahl__feld .zeichen-maske { width: 42px; height: 42px; color: var(--text-leise); }
.zeichenwahl__feld[aria-pressed="true"] {
  border-color: var(--knopf);
  background: #FCEFE4;
  color: var(--text);
  font-weight: 500;
}
.zeichenwahl__feld[aria-pressed="true"] .zeichen-maske { color: var(--knopf); }

.einzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #F0E7DA;
}
.einzeile:last-child { border-bottom: none; }
.einzeile__wort { font-size: 15px; margin: 0; }
.einzeile__wert { font-size: 14px; color: var(--text-leise); margin: 0; }

/* Leerzustand des Decks. Er sagt, WAS zu tun ist — eine leere Fläche mit
 * „keine Ergebnisse" lässt den Nutzer raten, ob die App kaputt ist. */
.leerzustand {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--rand);
  margin: 0;
  color: var(--text-leise);
  font-size: 15px;
  line-height: 1.5;
}
/* PFLICHT, sobald ein Element mit [hidden] eine eigene display-Regel hat:
 * `display: flex` schlaegt die Vorgabe des Browsers fuer [hidden] und das
 * Element bleibt sichtbar. Der Leerzustand stand deshalb unter der Karte. */
.leerzustand[hidden] { display: none; }

/* ================================================================
 * Screen 12 — TAFELRUNDE: das Wischdeck ist am 10.09.2026 durch die
 * LISTE ersetzt worden (Block .tafelliste/.tafelkarte weiter unten).
 * Die alten .runde__*-Regeln sind mit dem Deck gegangen; geblieben
 * ist nur .anfrageknopf, den die Liste weiterbenutzt.
 * ================================================================ */
.anfrageknopf {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: var(--knopf);
  color: #FFFFFF;
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}

/* ================================================================
 * Ergaenzt 09.09.2026 beim Bau des Auslieferungspakets.
 *
 * Alles hier ersetzt ein `style="…"`-Attribut aus dem HTML. Der Grund ist
 * nicht Ordnungsliebe: Die Auslieferung laeuft mit `style-src 'self'`
 * (_headers), und diese Richtlinie blockiert Inline-Stilattribute. Sie
 * haetten nach dem Hochladen einfach nicht mehr gewirkt — ohne
 * Fehlermeldung, nur mit falschem Layout.
 * ================================================================ */

/* chat.html — die Wellenform der Sprachnachricht (Attrappe, NICHT-ECHT.md
 * Nr. 8). Zwanzig Balken mit fest gezeichneten Hoehen; die Werte sind
 * unveraendert die aus dem frueheren Markup uebernommenen. */
.sprachblase__welle span:nth-child(1)  { height: 7px; }
.sprachblase__welle span:nth-child(2)  { height: 13px; }
.sprachblase__welle span:nth-child(3)  { height: 19px; }
.sprachblase__welle span:nth-child(4)  { height: 11px; }
.sprachblase__welle span:nth-child(5)  { height: 22px; }
.sprachblase__welle span:nth-child(6)  { height: 15px; }
.sprachblase__welle span:nth-child(7)  { height: 9px; }
.sprachblase__welle span:nth-child(8)  { height: 18px; }
.sprachblase__welle span:nth-child(9)  { height: 24px; }
.sprachblase__welle span:nth-child(10) { height: 12px; }
.sprachblase__welle span:nth-child(11) { height: 8px; }
.sprachblase__welle span:nth-child(12) { height: 16px; }
.sprachblase__welle span:nth-child(13) { height: 21px; }
.sprachblase__welle span:nth-child(14) { height: 10px; }
.sprachblase__welle span:nth-child(15) { height: 14px; }
.sprachblase__welle span:nth-child(16) { height: 19px; }
.sprachblase__welle span:nth-child(17) { height: 7px; }
.sprachblase__welle span:nth-child(18) { height: 12px; }
.sprachblase__welle span:nth-child(19) { height: 17px; }
.sprachblase__welle span:nth-child(20) { height: 9px; }

/* einstellungen.html — Kopfzeile ohne Trennlinie und mit kleinerem Titel. */
.einstellungskopf { border-bottom: none; padding-bottom: 6px; }
.einstellungskopf .tabkopf__titel { font-size: 24px; }

/* einstellungen.html — die drei Profilzeichen zur Auswahl.
 *
 * .zeichen-maske--profil weiter oben zeigt IMMER das gerade gewaehlte
 * Zeichen (gesteuert ueber [data-profilsymbol] am Wurzelelement). Hier
 * braucht es das Gegenteil: alle drei nebeneinander, jedes fest bei seinem
 * eigenen Motiv, damit man vergleichen und waehlen kann. */
.zeichen-maske--wahl-koch {
  -webkit-mask-image: url('../media/symbole/profil-maske.png');
  mask-image: url('../media/symbole/profil-maske.png');
}
.zeichen-maske--wahl-koechin {
  -webkit-mask-image: url('../media/symbole/profil-koechin-maske.png');
  mask-image: url('../media/symbole/profil-koechin-maske.png');
}
.zeichen-maske--wahl-paar {
  -webkit-mask-image: url('../media/symbole/profil-paar-maske.png');
  mask-image: url('../media/symbole/profil-paar-maske.png');
}

/* gemeinsam-kochen.html — die Kopfknoepfe liegen auf dem Foto und erben
 * ihre Farbe von dort statt aus der Palette. */
.tabkopf__knopf--erbt { color: inherit; }

/* index.html — der noscript-Weg. Er wird nur sichtbar, wenn JavaScript aus
 * ist; dann fuehrt er von Hand weiter, wo sonst der Startfilm uebergibt. */
.ohnejs {
  padding: 34px var(--rand);
  gap: 18px;
}

/* ================================================================
 * BLOCK VOM 09.09.2026 SPÄT — der Auftrag „alle Funktionen gehen".
 *
 * Alles darunter ist neu und gehört zu den Ansagen vom Abend: Wischen,
 * Matches-Liste, Küchen, Erklärung, Farb- und Schriftwahl, echtes
 * Anlegen des Profils. Es steht am Stück und nicht verstreut, damit man
 * es beim nächsten Mal als Block wiederfindet.
 * ================================================================ */

/* --- Für Vorleser, nicht fürs Auge ------------------------------- */
/* Kein `display: none`: das nähme es AUCH dem Vorleser. Diese neun Zeilen
 * sind der einzige Weg, der beides trennt. */
.nurvorleser {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Kopfzeile mit Zahnrad (src/kopf.js) -------------------------- */
.tabkopf__wort { min-width: 0; }
.tabkopf__unter {
  font-size: 13px;
  color: var(--text-leise);
  margin: 1px 0 0;
}
.tabkopf__knoepfe { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* Das Zahnrad dreht sich bei jedem Sektionswechsel. Weil jede Sektion ein
 * eigenes Dokument ist, läuft die Animation genau dann — und sonst nie.
 * `prefers-reduced-motion` dreht sie über basis.css auf 0,01 ms. */
@keyframes zahndrehen {
  from { transform: rotate(-150deg); }
  to   { transform: rotate(0deg); }
}
.tabkopf__zahn { animation: zahndrehen 620ms cubic-bezier(.22,.9,.3,1) both; }

/* --- Wischen ------------------------------------------------------ */
/* `pan-y` und nicht `none`: Ohne die Zeile scrollt Safari auf iOS die Seite
 * mit, während man wischt. Mit `none` wäre dafür das Scrollen der Seite tot. */
.karte {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.karte:active { cursor: grabbing; }
.karte__bild { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.karte--fliegt { transition: transform 260ms ease, opacity 260ms ease; }

.stempel {
  position: absolute;
  top: 22px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 3px solid currentColor;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(2px);
}
.stempel--ja   { left: 16px;  color: #3FA45B; transform: rotate(-11deg); }
.stempel--nein { right: 16px; color: #E2452C; transform: rotate(11deg); }

.wischfusz {
  display: flex;
  justify-content: center;
  padding: 0 var(--rand) 6px;
  min-height: 30px;
  flex: 0 0 auto;
}
.ruecknahme {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px 10px;
  font-family: var(--schrift-text);
  font-size: 13px;
  color: var(--text-leise);
  cursor: pointer;
}
.ruecknahme[hidden] { display: none; }

.filterzeile {
  margin: 0;
  padding: 0 var(--rand) 4px;
  font-size: 12.5px;
  color: var(--text-leise);
}
.filterzeile[hidden] { display: none; }

/* --- Zahl am Matches-Reiter --------------------------------------- */
.leiste__reiter { position: relative; }
.leiste__zahl {
  position: absolute;
  top: 2px;
  left: calc(50% + 5px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--knopf);
  color: var(--text-auf-knopf);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Das Küchen-Zeichen lag seit dem Bau ungenutzt herum; jetzt trägt es
 * seinen Reiter. */
.zeichen-maske--kuechen {
  -webkit-mask-image: url('../media/symbole/kuechen-maske.png');
  mask-image: url('../media/symbole/kuechen-maske.png');
}

/* --- Matches-Liste ------------------------------------------------- */
.hinweiskasten {
  display: flex;
  gap: 12px;
  margin: 0 var(--rand) 14px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--sand);
  border: 1px solid var(--linie);
}
.hinweiskasten__zeichen { flex: 0 0 auto; color: var(--knopf); display: flex; padding-top: 1px; }
.hinweiskasten__titel { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.hinweiskasten__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-leise);
  margin: 0;
}
.hinweiskasten__text a { color: var(--akzent-text); }

.matchliste { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--rand) 12px; }
.matchliste[hidden] { display: none; }

.matchzeile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  margin-bottom: 9px;
  border-radius: 15px;
  background: var(--sand);
  text-decoration: none;
  color: var(--text);
}
.matchzeile__bild { position: relative; flex: 0 0 auto; }
.matchzeile__bild img {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.matchzeile__punkt {
  position: absolute;
  right: 1px; bottom: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--sand);
}
/* GRÜN heißt hier NICHT „online" — das könnte Ospella ohne Server nicht
 * wissen. Es heißt „ihr habt geschrieben". Siehe src/matchliste.js. */
.matchzeile__punkt--warm  { background: #3B8C4F; }
.matchzeile__punkt--offen { background: #E0972B; }

.matchzeile__mitte { flex: 1 1 auto; min-width: 0; }
.matchzeile__name { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.matchzeile__text {
  display: block;
  font-size: 13.5px;
  color: var(--text-leise);
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.matchzeile__text--neu { color: var(--akzent-text); }
.matchzeile__rechts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-leise);
}
.matchzeile__zeit { font-size: 12px; }

.leerkasten {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px var(--rand) 30px;
}
.leerkasten[hidden] { display: none; }
.leerkasten__titel { font-family: var(--schrift-anzeige); font-size: 22px; margin: 0; }
.leerkasten__text { font-size: 14.5px; color: var(--text-leise); margin: 0 0 8px; max-width: 30ch; }
.leerkasten .knopf { width: auto; padding: 0 26px; }

/* --- Chat --------------------------------------------------------- */
.telefon--chat { height: 100dvh; }
.chatkopf__block { flex: 1 1 auto; min-width: 0; }
.chatkopf__wer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.chatleer {
  margin: auto 0;
  text-align: center;
  color: var(--text-leise);
  font-size: 14.5px;
  line-height: 1.5;
  padding: 0 10px;
}
.chatfusznote {
  margin: 0;
  padding: 4px var(--rand) 0;
  font-size: 11.5px;
  color: var(--text-leise);
  text-align: center;
  flex: 0 0 auto;
}
.chatwarnung {
  margin: 6px var(--rand) 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FCE9E4;
  border: 1px solid #E2452C;
  color: #8A2A18;
  font-size: 13px;
  line-height: 1.4;
  flex: 0 0 auto;
}
.chatwarnung[hidden] { display: none; }
.sendeknopf {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--knopf);
  color: var(--text-auf-knopf);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sendeknopf:disabled { opacity: 0.42; cursor: default; }

/* --- Fremdes Profil ----------------------------------------------- */
.fremdprofil { flex: 1 1 auto; overflow-y: auto; }
.fremdprofil__bild { position: relative; aspect-ratio: 1 / 1.18; }
.fremdprofil__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fremdprofil__zurueck {
  position: absolute;
  top: 14px; left: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(28, 22, 18, 0.5);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.fremdprofil__ort {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--text-leise);
  margin: 4px 0 14px;
}
.fremdprofil__ueber {
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.fremdprofil__ueber[hidden] { display: none; }
.fremdprofil__fusz {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 28px;
}

/* --- Formularteile (Profil anlegen, Küche anlegen, Runde eröffnen) - */
.meldung {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FCE9E4;
  border: 1px solid #E2452C;
  color: #8A2A18;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
}
.meldung[hidden] { display: none; }

.feldnote {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-leise);
  margin: -4px 0 14px;
}
.feldnote--mitte { text-align: center; }
.feldnote a { color: var(--akzent-text); }

.fusznote {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-leise);
  margin: 0;
  padding: 4px var(--rand) 10px;
  text-align: center;
}

.feldpaar { display: flex; gap: 10px; }
.feldpaar .feld { flex: 1 1 0; min-width: 0; }

.feld--hoch { align-items: flex-start; }
.feld textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--schrift-text);
  font-size: 15px;
  color: var(--text);
  outline: none;
  resize: vertical;
  line-height: 1.45;
}
.feld textarea::placeholder { color: #8C8478; }

.wahlzeilen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wahlzeile {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--creme);
  font-family: var(--schrift-text);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.wahlzeile--offen {
  background: var(--knopf);
  color: var(--text-auf-knopf);
  border-color: var(--knopf);
  font-weight: 500;
}

.rubrik__titel--allein {
  margin: 18px 0 6px;
  color: var(--akzent-text);
}

/* --- Profil anlegen ------------------------------------------------ */
.profilbau__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: var(--sand);
  color: var(--text-leise);
  font-family: var(--schrift-anzeige);
  font-size: 64px;
}
.profilbau__leer[hidden] { display: none; }
/* Das Dateifeld liegt unsichtbar IM Label — ein Klick aufs Label öffnet es.
 * Ein eigener Knopf, der `input.click()` ruft, wäre eine Zeile Skript mehr
 * für dasselbe Ergebnis. */
.profilbau__kamera { cursor: pointer; }

.bildwahl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.bildwahl img {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.bildwahl img[hidden] { display: none; }
.bildwahl .knopf { cursor: pointer; }

/* --- Mein Profil ---------------------------------------------------- */
.meinprofil[hidden] { display: none; }
.meinprofil__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: var(--sand);
  color: var(--text-leise);
  font-family: var(--schrift-anzeige);
  font-size: 52px;
}
.meinprofil__leer[hidden] { display: none; }
.meinprofil__stift {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.merkmal--leer { color: var(--text-leise); font-style: italic; }
.zitat[hidden] { display: none; }

.profilwege { text-align: left; margin: 4px 0 20px; }
.profilweg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--text);
}
.profilweg:last-child { border-bottom: none; }
.profilweg__wort { font-size: 15.5px; }
.profilweg__pfeil { color: var(--text-leise); font-size: 20px; line-height: 1; }

.chips--ruhig { flex-wrap: wrap; overflow: visible; }
.chip--ruhig {
  background: var(--sand);
  border-color: var(--linie);
  color: var(--text-leise);
  cursor: default;
}

/* --- Einstellungen: Kacheln ------------------------------------------ */
.kachelraster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* nie 1fr allein:
      1fr wächst bis max-content und sprengt die Zeile. */
  gap: 10px;
}
.wahlkachel {
  display: block;
  text-align: left;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid var(--linie);
  background: var(--creme);
  font-family: var(--schrift-text);
  color: var(--text);
  cursor: pointer;
}
.wahlkachel--offen { border-color: var(--knopf); }
.wahlkachel__wort {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 8px;
}
.wahlkachel__satz {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-leise);
  margin-top: 2px;
}
.wahlkachel--schrift { padding: 14px 12px; }

.zeichenwahl__feld--offen {
  border-color: var(--knopf);
  background: var(--sand);
}
.zeichenwahl__feld--offen .zeichen-maske { color: var(--knopf); }

.knopf--warnung { color: #8A2A18; border-color: #C97A68; margin-top: 14px; }
.ruecksetzfrage {
  margin-top: 12px;
  padding: 13px;
  border-radius: 14px;
  background: #FCE9E4;
  border: 1px solid #E2452C;
}
.ruecksetzfrage[hidden] { display: none; }
.ruecksetzfrage__text { font-size: 13.5px; line-height: 1.45; color: #8A2A18; margin: 0 0 12px; }
.ruecksetzfrage__knoepfe { display: flex; flex-direction: column; gap: 8px; }

/* --- Küchen ----------------------------------------------------------- */
.kuechenliste { flex: 1 1 auto; overflow-y: auto; padding: 4px var(--rand) 12px; }
.kuechekarte {
  border-radius: 16px;
  overflow: hidden;
  background: var(--sand);
  margin-bottom: 14px;
}
.kuechekarte__bild { width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; display: block; }
.kuechekarte__ohnebild {
  width: 100%;
  aspect-ratio: 16 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--creme);
  color: var(--text-leise);
  font-family: var(--schrift-anzeige);
  font-size: 40px;
}
.kuechekarte__text { padding: 12px 14px 14px; }
.kuechekarte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.kuechekarte__name { font-size: 17px; font-weight: 600; margin: 0; }
/* Die Markierung ist kein Schmuck: In Ospella 1 waren acht erfundene
 * Küchen einer der beiden Gründe, warum die App nicht hochgeladen werden
 * darf. Hier steht an JEDER Karte, was sie ist. */
.kuechekarte__marke {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--creme);
  border: 1px solid var(--linie);
  color: var(--text-leise);
}
.kuechekarte__marke--echt {
  background: var(--knopf);
  border-color: var(--knopf);
  color: var(--text-auf-knopf);
}
.kuechekarte__zeile {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-leise);
  margin: 0 0 4px;
}
.kuechekarte__satz { font-size: 13.5px; line-height: 1.45; margin: 8px 0 10px; }
.kuechekarte__fusz { display: flex; gap: 14px; align-items: baseline; }
.kuechekarte__preis { font-size: 15px; font-weight: 600; }
.kuechekarte__plaetze { font-size: 12.5px; color: var(--text-leise); }
.kuechekarte__kontakt { font-size: 12px; color: var(--text-leise); margin: 8px 0 0; }

/* --- Erklärung --------------------------------------------------------- */
.erklaerkarte {
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--sand);
  margin-bottom: 10px;
}
.erklaerkarte--warn { border: 1px solid var(--knopf); }
.erklaerkarte__wort {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 5px;
}
.erklaerkarte__wort span {
  font-weight: 400;
  font-size: 13px;
  color: var(--text-leise);
  margin-left: 6px;
}
.erklaerkarte__satz {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-leise);
  margin: 0 0 8px;
}
.erklaerkarte__satz:last-child { margin-bottom: 0; }
.erklaerkarte__satz a { color: var(--akzent-text); }
.erklaerkarte__satz strong { color: var(--text); }

/* --- Rezepte ------------------------------------------------------------ */
.rezept__zutaten {
  font-size: 12px;
  color: var(--text-leise);
  margin: 4px 0 0;
  line-height: 1.4;
}
.rezept__herz--voll { color: var(--knopf); }

/* Tafelrunde: .runde__eigen und .anfrageknopf--fertig sind mit dem
 * Wischdeck am 10.09.2026 gegangen (Liste: .tafelkarte__eigen /
 * .tafelkarte__angefragt). */

/* --- Match: eigenes Gesicht fehlt -------------------------------------- */
/* KEIN fremdes Gesicht als Platzhalter — das wäre die Behauptung, das sei
 * man selbst. Stattdessen der eigene Anfangsbuchstabe. */
.teller__ersatz {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sand);
  color: var(--text-leise);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schrift-anzeige);
  font-size: 34px;
}
.teller__ersatz[hidden] { display: none; }
.teller__gesicht[hidden] { display: none; }

/* --- Interessen: Kachel ohne eigenes Bild ------------------------------- */
.wahl__ersatz { color: var(--text-leise); }
.wahl--gewaehlt .wahl__ersatz { color: var(--knopf); }
.wahl[hidden] { display: none; }
.rubrik__alle {
  background: none;
  border: none;
  font-family: var(--schrift-text);
  cursor: pointer;
  padding: 2px 0;
}

/* --- Innen scrollen statt die ganze Seite ---------------------------- */
/* GEMESSEN am 09.09.2026: Der Einstellungs-Screen war 2626 px hoch, die
 * Rezeptliste 1761 — beide scrollten als GANZE SEITE, und die
 * Navigationsleiste wanderte dabei nach oben aus dem Bild. Der Grund ist
 * keine fehlende `overflow`-Angabe (die stand da), sondern die Vorgabe
 * `min-height: auto` für Flex-Kinder: ein Kasten mit `flex: 1 1 auto`
 * schrumpft NICHT unter seinen Inhalt, solange das nicht ausdrücklich
 * erlaubt ist. Ohne `min-height: 0` ist ein `overflow-y: auto` daneben
 * wirkungslos.
 *
 * Dazu gehört `.telefon--fest`: Mit `min-height: 100dvh` wächst der
 * Rahmen mit dem Inhalt, und dann hat Flexbox nichts zu verteilen — das ist
 * derselbe Fehler wie beim Willkommensbildschirm (Teil 362 und noch einmal
 * beim Neubau). Die Formularseiten bekommen ihn BEWUSST NICHT: Dort soll
 * die Seite scrollen, sonst stünde ein langes Formular in einem Kasten von
 * 745 px und der Rest wäre abgeschnitten. */
.telefon--fest { height: 100dvh; min-height: 0; }

.einstellungen,
.matchliste,
.kuechenliste,
.rezeptliste,
.meinprofil,
.verlauf,
.fremdprofil,
.entdecken__buehne { min-height: 0; }

/* Der Weiter-Knopf des Interessen-Screens bleibt am unteren Rand stehen.
 * Vorher lag er bei 930 px — also 185 px unter der Falz — und wer nur die
 * ersten sechs Kacheln wollte, musste erst nach unten wischen, um
 * weiterzukommen. Das ist dasselbe Muster wie in Teil 361/362, nur
 * milder. */
.interessen__fusz {
  position: sticky;
  bottom: 0;
  background: var(--creme);
  padding-top: 10px;
  padding-bottom: 16px;
  box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, 0.18);
}

/* --- Chip-Reihe: die negative Randkorrektur gilt nicht überall --------- */
/* GEMESSEN am 09.09.2026: Der erste Chip saß bei x = 0, also hart am
 * Bildschirmrand, und sein linker Bogen wurde abgeschnitten. Ursache ist
 * `margin: 0 calc(-1 * var(--rand))` zusammen mit `padding: 0 var(--rand)`:
 * Das hebt sich genau dann auf, wenn der ELTERNKASTEN selbst einen
 * Seitenrand hat. Als direktes Kind von `.telefon` (Padding 0) zieht es die
 * Reihe um 38 px nach links und das Padding schiebt den Inhalt genau wieder
 * an den Nullpunkt. Der Fehler steckte schon im Bestand — er fiel erst auf,
 * als die Küchen-Sektion einen langen ersten Chip bekam. */
.chips { margin: 0; }
.seite > .chips { margin: 0 calc(-1 * var(--rand)); }

/* Die ruhigen Chips stehen in Textspalten und dürfen nie über den Rand
 * hinauswachsen — weder nach links noch nach rechts. */
.chips--ruhig,
.seite > .chips--ruhig { margin: 0; padding: 0 0 2px; }

/* Der Interessen-Screen scrollt INNEN. Nur so hält `position: sticky` am
 * Weiter-Knopf: `.telefon` trägt `overflow: hidden` und ist damit ein
 * Scrollport, der sich nie bewegt — ein sticky-Element darin bleibt einfach
 * stehen, wo es steht. Gemessen: Der Knopf war unsichtbar, obwohl die Regel
 * richtig aussah. */
.interessen { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Beschriftetes Zahlenfeld (Alter von/bis im Einstellungs-Screen). */
.feld__wort {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--text-leise);
}
.feld input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--schrift-text);
  font-size: 15px;
  color: var(--text);
  outline: none;
}

/* ================================================================
 * Initialen statt Fotos — 10.09.2026.
 * Alle KI-Personenbilder sind auf Anweisung geloescht; ueberall, wo ein
 * Profilfoto stand, stehen jetzt die Anfangsbuchstaben auf Sandflaeche.
 * Die Initialen sind aria-hidden — der Name steht daneben im Text.
 * ================================================================ */
.karte__bild--frei {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 92% 64% at 50% 32%,
              #FDF7EE 0%, var(--sand) 70%);
}
.karte__bild--frei span {
  font-family: var(--schrift-anzeige);
  font-size: clamp(54px, 18vw, 82px);
  color: var(--olive);
  opacity: 0.82;
  transform: translateY(-16%);   /* unter den Initialen liegt der Schleier
                                  * mit Name und Merkmalen */
}

.fremdprofil__bild--frei {
  aspect-ratio: 1 / 0.62;        /* ohne Foto braucht der Kopf weniger Hoehe
                                  * als die 1/1.18 der Fotofassung */
  background: radial-gradient(ellipse 92% 80% at 50% 44%,
              #FDF7EE 0%, var(--sand) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fremdprofil__initialen {
  font-family: var(--schrift-anzeige);
  font-size: clamp(44px, 15vw, 64px);
  color: var(--olive);
  opacity: 0.82;
}

.chatkopf__bild--frei {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  color: var(--olive);
  font-family: var(--schrift-anzeige);
  font-size: 14px;
  white-space: nowrap;
}

.matchzeile__ersatz {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schrift-anzeige);
  font-size: 19px;
  white-space: nowrap;
}

/* Paar-Initialen ("T & F") brauchen auf dem Teller kleinere Schrift als
 * ein einzelner Buchstabe. */
.teller__ersatz--paar { font-size: 19px; }

/* ================================================================
 * Tafelrunde als LISTE — 10.09.2026 auf Anweisung.
 * Kein Wischdeck mehr: die Abende stehen untereinander, mit Datum,
 * Gericht, Notiz des Gastgebers, freien Plaetzen, den kleinen
 * Initialen-Profilen der Leute, die dabei sind, und dem Anfragen-Knopf.
 * Unten der feste Knopf "Tafelrunde anrichten".
 * ================================================================ */
.tafelliste {
  flex: 1 1 auto;
  min-height: 0;                 /* ohne das scrollt ein Flex-Kind nicht */
  overflow-y: auto;
  padding: 4px calc(var(--rand) - 14px) 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tafelkarte {
  background: var(--sand);
  border-radius: var(--karte-radius);
  overflow: hidden;
  flex: 0 0 auto;
}
.tafelkarte__bild {
  display: block;
  width: 100%;
  height: 118px;                 /* feste Hoehe: reserviert Platz, sonst
                                  * laedt loading="lazy" nie (0x0-Falle) */
  object-fit: cover;
}
.tafelkarte__inhalt { padding: 11px 14px 13px; }

.tafelkarte__wann {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-leise);
  margin: 0 0 6px;
}
.tafelkarte__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}
.tafelkarte__thema {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
  margin: 0;
}
.tafelkarte__plaetze {
  background: var(--knopf);      /* wie der Hauptknopf; 4,21:1 ist die
                                  * gemeldete Vorlagen-Ausnahme */
  color: #FFFFFF;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tafelkarte__gericht {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 5px;
}
.tafelkarte__gericht span { font-weight: 600; color: var(--olive); }
.tafelkarte__notiz {
  font-size: 13px;
  line-height: 1.45;
  font-style: italic;
  color: var(--text-leise);
  margin: 0 0 10px;
}

.tafelkarte__fusz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.tafelkarte__leute {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tafelkarte__koepfe { display: flex; flex: 0 0 auto; }
.tafelkopfbild {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--creme);
  border: 1px solid var(--linie);
  color: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schrift-anzeige);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}
.tafelkopfbild + .tafelkopfbild { margin-left: -7px; }
.tafelkarte__leutewort {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-leise);
}

.tafelkarte__aktion { flex: 0 0 auto; }
.anfrageknopf--liste {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  box-shadow: none;
}
.tafelkarte__eigen,
.tafelkarte__angefragt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--olive);
  margin: 0;
  white-space: nowrap;
}

.tafelkarte__wahl {
  border-top: 1px solid var(--linie);
  margin-top: 11px;
  padding-top: 10px;
}
.tafelkarte__wahl[hidden] { display: none !important; }
.tafelkarte__wahlfrage {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 8px;
}

.tafelfusz {
  flex: 0 0 auto;
  padding: 8px var(--rand) 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fusznote--tafel { margin: 0; }

/* ================================================================
 * OSPELLA 3.0 — BLOCK VOM 11.09.2026: das neue Design nach dem
 * Style Guide (ospella_ui_style_guide.md) und den Vorlagen-PNGs.
 * Alles ab hier gehoert zu diesem Umbau und steht am Stueck.
 * ================================================================ */

/* --- Der gedeckte Tisch als Grund (nur Palette „vorlage") ----------- */
/* WELCOMESCREEN.png, bereits mit eingebranntem Creme-Schleier; darueber
 * ein zweiter leichter Schleier (Guide: „warm white/cream overlay").
 * GEMELDET: Auf dem Foto ist der Kontrast von Nebentext stellenweise
 * geringer als auf glatter Flaeche — Karten und Felder sind deshalb
 * (nahezu) deckend. Alle anderen Paletten schalten das Bild ab
 * (paletten.css). */
html[data-palette="vorlage"] .telefon {
  background-image:
    linear-gradient(rgba(250, 244, 234, 0.42), rgba(250, 244, 234, 0.42)),
    url('../media/grund/tisch.jpg');
  background-size: cover;
  background-position: center top;
}
/* Der Match-Screen steht wie in der Vorlage (MATCHMASKE.png) auf ruhiger
 * warmer Flaeche, nicht auf dem Tisch. */
.telefon--ruhig { background-image: none !important; }

/* --- Titel in Bedienschrift (Vorlagen: Wonach / Dein Profil / Was
 * macht dich aus tragen KEINE Serife) ------------------------------- */
.titel--sans {
  font-family: var(--schrift-text);
  font-weight: 700;
  letter-spacing: -0.4px;
}
.interessen__titel { font-family: var(--schrift-text); font-weight: 700; }

/* Der Konto-Titel misst in der Vorlage dunkles Gruen (#22362D, 10,71:1). */
.konto__titel { color: var(--titel-gruen); }

/* --- Felder: Pillen wie in der Vorlage ------------------------------ */
.feld {
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.85);
  border-color: #E3D2BC;
  height: 54px;
}
.feld--hoch { border-radius: 22px; height: auto; padding-top: 12px; padding-bottom: 12px; }
.suchfeld, .eingabezeile__feld { background: rgba(255, 253, 248, 0.85); }

/* --- Willkommen: der Vorlagen-Zuschnitt als Held -------------------- */
.willkommen__held {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px 0;
}
.willkommen__hero {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  /* Der Zuschnitt traegt das Tischfoto der Vorlage in sich; die weiche
   * Kante blendet ihn in den (gleichen) Tisch des Grundes. GEMESSEN
   * 11.09.2026: eine engere Ellipse (96 %/58 %) fraß die Raender der
   * Titelzeile an — deshalb weit gefasst, Fade nur an den aeuszersten
   * Kanten. */
  -webkit-mask-image: radial-gradient(ellipse 128% 118% at 50% 48%, #000 76%, transparent 98%);
  mask-image: radial-gradient(ellipse 128% 118% at 50% 48%, #000 76%, transparent 98%);
}
/* Zwei Klassen tief, weil kimarke.css NACH screens.css laedt: die
 * Grundregel .kimarke { top: 10px } gewann sonst, und mit top UND bottom
 * gesetzt streckte sich die Pille ueber 579 px (gemessen 11.09.2026). */
.willkommen__held .willkommen__kimarke { top: auto; bottom: 6px; left: 12px; }
html[data-palette="vorlage"] .willkommen__fusz { background: transparent; }

/* --- „Wonach suchst du?" (Wassuchstdu.png) -------------------------- */
.wonach { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.wonach__titel { margin: 0 0 6px; }
.wonach__unterzeile {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-leise);
  margin: 0 0 16px;
  max-width: 34ch;
}
.wonachraster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wonachkarte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 12px 10px 12px;
  border-radius: 18px;
  border: 1.5px solid rgba(200, 149, 62, 0.4);
  background: #FDEFE5;              /* GEMESSEN: Kartengrund der Vorlage */
  cursor: pointer;
  font-family: var(--schrift-text);
  color: var(--text);
}
.wonachkarte--offen { border-color: var(--knopf); box-shadow: 0 0 0 1.5px var(--knopf) inset; }
.wonachkarte__haken {
  position: absolute;
  top: 9px; right: 9px;
  z-index: 1;               /* sonst malt das Kartenbild darueber */
  width: 19px; height: 19px;
  border-radius: 6px;
  border: 2px solid var(--knopf);
  background: var(--sand);  /* deckt den Checkbox-Rest des Zuschnitts */
}
.wonachkarte--offen .wonachkarte__haken { background: var(--knopf); }
.wonachkarte--offen .wonachkarte__haken::after {
  content: '';
  position: absolute;
  left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border: solid #FFFDF8;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.wonachkarte__bild {
  width: 100%;
  display: block;
  /* Die Zuschnitte tragen den Kartengrund der Vorlage in sich; die weiche
   * Kante verdeckt Schnittraender (u. a. Reste der Vorlagen-Checkbox). */
  -webkit-mask-image: radial-gradient(ellipse 94% 94% at 50% 50%, #000 62%, transparent 98%);
  mask-image: radial-gradient(ellipse 94% 94% at 50% 50%, #000 62%, transparent 98%);
}
.wonachkarte__wort { font-weight: 700; font-size: 15px; margin-top: 4px; }
.wonachkarte__kurz { font-size: 11.5px; color: var(--text-leise); }

.wonach__du {
  font-family: var(--schrift-text);
  font-size: 24px;
  font-weight: 700;
  color: var(--akzent-text);
  text-align: center;
  margin: 22px 0 4px;
}
.wonach__frei {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-leise);
  text-align: center;
  margin: 0 auto 12px;
  max-width: 40ch;
}
.dubist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dubist__feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 4px 10px;
  border-radius: 14px;
  border: 1.5px solid rgba(200, 149, 62, 0.4);
  background: rgba(255, 253, 248, 0.9);
  font-family: var(--schrift-text);
  font-size: 11.5px;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}
.dubist__feld--offen { border-color: var(--knopf); background: #FDEFE5; font-weight: 600; }
.dubist__feld .zeichen-maske { width: 30px; height: 30px; color: var(--text); }
.wonach__fusz {
  position: sticky;
  bottom: 0;
  background: var(--creme);
  padding: 12px 0 16px;
  margin-top: 18px;
  box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, 0.16);
}

/* Die „Du bist"-Zeichen: Haube, Koechin, Koch aus den vorhandenen Masken;
 * Divers ist die Koechin mit Regenbogen-Fuellung (die Maske laesst den
 * Verlauf durch — background schlaegt currentColor). */
.zeichen-maske--dubist-haube   { -webkit-mask-image: url('../media/symbole/entdecken-maske.png');      mask-image: url('../media/symbole/entdecken-maske.png'); }
.zeichen-maske--dubist-koechin { -webkit-mask-image: url('../media/symbole/profil-koechin-maske.png'); mask-image: url('../media/symbole/profil-koechin-maske.png'); }
.zeichen-maske--dubist-koch    { -webkit-mask-image: url('../media/symbole/profil-maske.png');         mask-image: url('../media/symbole/profil-maske.png'); }
.zeichen-maske--dubist-divers,
.zeichen-maske--wahl-divers,
[data-profilsymbol="divers"] .zeichen-maske--profil {
  -webkit-mask-image: url('../media/symbole/profil-koechin-maske.png');
  mask-image: url('../media/symbole/profil-koechin-maske.png');
  background: linear-gradient(180deg,
    #B23A2A 0%, #B06A12 22%, #8A7C16 40%,
    #3E7C46 60%, #2E6FA8 79%, #6C4D9E 100%);
}

/* Zwei Koeche / zwei Koechinnen: EIN Element, ZWEI Maskenschichten. */
.zeichen-maske--wahl-maenner,
[data-profilsymbol="maenner"] .zeichen-maske--profil {
  -webkit-mask-image: url('../media/symbole/profil-maske.png'), url('../media/symbole/profil-maske.png');
  mask-image: url('../media/symbole/profil-maske.png'), url('../media/symbole/profil-maske.png');
  -webkit-mask-size: 66% auto, 66% auto;
  mask-size: 66% auto, 66% auto;
  -webkit-mask-position: 0% 62%, 100% 30%;
  mask-position: 0% 62%, 100% 30%;
}
.zeichen-maske--wahl-frauen,
[data-profilsymbol="frauen"] .zeichen-maske--profil {
  -webkit-mask-image: url('../media/symbole/profil-koechin-maske.png'), url('../media/symbole/profil-koechin-maske.png');
  mask-image: url('../media/symbole/profil-koechin-maske.png'), url('../media/symbole/profil-koechin-maske.png');
  -webkit-mask-size: 66% auto, 66% auto;
  mask-size: 66% auto, 66% auto;
  -webkit-mask-position: 0% 62%, 100% 30%;
  mask-position: 0% 62%, 100% 30%;
}

/* --- Dein Profil (DEINPROFIL1.png) ---------------------------------- */
.profilbau--links { text-align: left; }
.profilbau--links .profilbau__unterzeile { font-size: 15px; margin-bottom: 16px; }
.bildkarte {
  position: relative;
  border: 2px dashed var(--knopf);
  border-radius: 20px;
  background: rgba(253, 239, 229, 0.72);
  padding: 16px 16px 14px;
  text-align: center;
  margin-bottom: 14px;
}
.bildkarte__kreis {
  position: relative;
  width: min(54%, 200px);
  aspect-ratio: 1;
  margin: 0 auto 2px;
}
.bildkarte__kreis img[data-foto] {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.bildkarte__koechin { width: 100%; display: block; }
.bildkarte__wort {
  font-size: 19px;
  font-weight: 600;
  color: var(--akzent-text);
  margin: 0 0 4px;
}
.bildkarte__satz { font-size: 12px; color: var(--text-leise); margin: 0; }
.bildkarte__kamera {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--knopf);
  color: #FFFDF8;
}

/* --- Match (MATCHMASKE.png): Wortmarke, Sperrzeilen, Rollteller ----- */
.match__marke {
  font-family: var(--schrift-anzeige);
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  margin: 10px 0 2px;
}
.match__sperr {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--text-leise);
  margin: 0 0 8px;
}
.match__sperr--fusz { margin: 2px 0 14px; }
.match__buehne--drei { padding: 0; overflow-x: clip; }
.match__haube--drei {
  width: 96px;
  margin: 0 auto -10px;
  display: block;
  position: relative;
  -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 52%, transparent 92%);
  mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 52%, transparent 92%);
}
.teller__rand--voll { position: absolute; inset: 0; width: 100%; height: 100%; }
.teller__gesicht--auf, .teller__ersatz--auf { z-index: 1; }

/* DIE TELLER ROLLEN VON AUSSEN NACH INNEN (Ansage 11.09.2026). Der ganze
 * Teller faehrt, NUR das Tellerbild dreht sich dabei — Gesicht und
 * Initialen blieben sonst kopfueber haengen. Bei „Bewegung reduzieren"
 * stellt basis.css alle Animationen auf 0,01 ms: die Teller stehen dann
 * sofort am Platz (fill-mode both). */
@keyframes tellerfahrt-links  { from { transform: translateX(-120vw); } to { transform: translateX(0); } }
@keyframes tellerfahrt-rechts { from { transform: translateX(120vw); }  to { transform: translateX(0); } }
@keyframes tellerdreh-links   { from { transform: rotate(-540deg); }    to { transform: rotate(0deg); } }
@keyframes tellerdreh-rechts  { from { transform: rotate(540deg); }     to { transform: rotate(0deg); } }
@keyframes gesichtkommt       { from { opacity: 0; }                    to { opacity: 1; } }
.teller--rollt-links  { animation: tellerfahrt-links  1050ms cubic-bezier(.16,.84,.3,1) both; }
.teller--rollt-rechts { animation: tellerfahrt-rechts 1050ms cubic-bezier(.16,.84,.3,1) both; }
.teller--rollt-links  .teller__rand--voll { animation: tellerdreh-links  1050ms cubic-bezier(.16,.84,.3,1) both; }
.teller--rollt-rechts .teller__rand--voll { animation: tellerdreh-rechts 1050ms cubic-bezier(.16,.84,.3,1) both; }
.teller--rollt-links  .teller__gesicht--auf, .teller--rollt-links  .teller__ersatz--auf,
.teller--rollt-rechts .teller__gesicht--auf, .teller--rollt-rechts .teller__ersatz--auf {
  animation: gesichtkommt 380ms ease 900ms both;
}

/* Der orange Schwung unter „am Köcheln." — eine gebogene Farbzone statt
 * einer Bilddatei. */
.match__schwung { position: relative; white-space: nowrap; }
.match__schwung::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%;
  bottom: -9px;
  height: 10px;
  background: radial-gradient(ellipse 52% 240% at 50% -140%,
      transparent 62%, #E86A16 64%, #E86A16 78%, transparent 80%);
}

/* --- Entdecken: gelieferte Zeichen auf den Rundknoepfen ------------- */
.rundknopf__bild { width: 30px; height: 30px; object-fit: contain; display: block; }
.rundknopf__bild--herz { width: 44px; height: 44px; }

/* --- Einstellungen: Farben und Schrift als EIN Menuepunkt zum
 * Scrollen (Ansage 11.09.2026), zehn Kacheln in einer Reihe. ---------- */
.wahlrolle {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}
.wahlrolle .wahlkachel,
.wahlrolle .zeichenwahl__feld {
  flex: 0 0 46%;
  scroll-snap-align: start;
}

/* Sechs Zeichen brauchen bei 390 px zwei Reihen à drei. */
.zeichenwahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Kuechen: FOODLAB mit Website-Zeile und Hintergrundvideo -------- */
video.kuechekarte__bild { display: block; background: #1B1611; }
.kuechekarte__web { margin: 8px 0 0; font-size: 13.5px; }
.kuechekarte__web a {
  color: var(--akzent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Interessen: Ecke ohne Foto (WASMACHTDUCHAUS1.png) -------------- */
.interessen__ecke--frei {
  position: absolute;
  top: 2px; right: 0;
  width: 46%;
  text-align: center;
  pointer-events: none;
}
.interessen__herz { display: block; margin: 0 auto -2px; transform: rotate(9deg); }
.interessen__ecke--frei .interessen__spruch {
  position: static;
  display: inline-block;
  transform: rotate(-7deg);
  font-size: 16px;
}
/* Die Interessen-Kreise: Pfirsichflaeche wie in der Vorlage, damit auch
 * die Strich-SVGs auf einer Flaeche stehen. */
.wahl__kreis { background: #FBE8D8; }

/* Die Wortmarke im noscript-Weg (index.html). */
.ohnejs__marke { width: min(60%, 240px); display: block; }