/* Ospella — profil.css: alles, was mit dem Profil-Modell dazugekommen ist.

   Eigene Datei, damit die vier bestehenden Stilblaetter unberuehrt bleiben und
   sich der Zuwachs an einer Stelle wieder herausnehmen liesse.

   Regeln aus §6, die auch hier gelten:
   - Keine Schatten. Trennung entsteht durch Ton und 1-px-Kanten.
   - Radien nach Bedeutung, nie einheitlich.
   - Kein Hexwert ausserhalb von tokens.css.
   - Farbe traegt nie allein die Bedeutung. */

/* --- Profilbild ------------------------------------------------------- */

.profilbild {
  display: block;
  overflow: hidden;
  background: var(--flaeche-ruhig);
  border: 1px solid var(--linie-karte);
}

.profilbild.gross {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-bildflaeche);
  margin-bottom: 12px;
}

.profilbild.klein {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-rund);
}

.profilbild img {
  width: 100%;
  height: 100%;
  /* Portraets haben den Kopf oben — zentriert beschnitten faellt er weg. */
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.profilbild .initiale {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--schrift-display);
  font-size: var(--gr-buchstabe);
  line-height: var(--zh-buchstabe);
  color: var(--gruen-text);
}

.profilbild.klein .initiale { font-size: var(--gr-listentitel); }

/* --- Zeile mit Bild, Name, Ort ---------------------------------------- */

.profilzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 0;
  text-align: left;
  background: none;
}

.profilzeile .rumpf { display: flex; flex-direction: column; min-width: 0; }
.profilzeile .name { font-size: var(--gr-flies); color: var(--text); }
.profilzeile .meta { font-size: var(--gr-neben); color: var(--text-leise); }

/* --- Pillenreihe ------------------------------------------------------- */

.pillenreihe { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.pillenreihe.waehlbar { gap: 8px; }

/* Der eine betonte Weg auf der Karte. Umriss, keine Flaeche — Orange bleibt
   nach §6.1 Akzent und wird nie Flaeche. */
.pille.stark {
  min-height: 44px;
  padding: 10px 14px;
  font-size: var(--gr-bedien);
  color: var(--gruen-text);
  border: 1.5px solid var(--pot-soft);
}

/* --- Angaben im fremden Profil ---------------------------------------- */

.angabe + .angabe { margin-top: 14px; }
.angabe-titel {
  font-size: var(--gr-bedien);
  color: var(--text-leise);
  font-weight: 400;
  margin: 0;
}
.gerichtzeile-einfach {
  font-size: var(--gr-flies);
  line-height: var(--zh-flies);
  color: var(--text);
  margin: 0;
  padding: 7px 0;
}

/* --- Galerie ----------------------------------------------------------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.galeriebild {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-zelle);
  overflow: hidden;
  background: var(--flaeche-ruhig);
  border: 1px solid var(--linie-karte);
}

.galeriebild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vor dem Match verdeckt. Der Massstab verhindert die durchscheinenden
   Kanten, die eine Unschaerfe sonst am Rand erzeugt.

   Das ist eine Darstellungsregel, keine Zugriffssperre — die Datei liegt
   ausgeliefert daneben. Ohne Server ist das die ehrliche Obergrenze; deshalb
   steht neben dem Gitter immer ein Satz, der die Sperre benennt, statt sich
   auf die Optik zu verlassen. */
.galerie.verdeckt img {
  filter: blur(14px) saturate(0.85);
  transform: scale(1.14);
}

/* Foto wieder herausnehmen — nur im eigenen Profil. */
.bildweg {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: var(--r-rund);
  border: 1px solid var(--linie-karte);
  background: var(--flaeche-karte);
  color: var(--warn-text);
  font-size: var(--gr-bedien);
  line-height: 1;
  display: grid;
  place-items: center;
}

/* --- Matchtafel -------------------------------------------------------- */

.matchbild {
  width: 132px;
  height: 132px;
  margin: 0 auto 14px;
  border-radius: var(--r-rund);
  overflow: hidden;
  background: var(--flaeche-ruhig);
  border: 1px solid var(--linie-karte);
}
.matchbild img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.matchbild .initiale {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--schrift-display); font-size: var(--gr-buchstabe);
  color: var(--gruen-text);
}

/* --- Onboarding -------------------------------------------------------- */

/* Ohne Navigationsleiste braucht der Fuss der Buehne den Platz nicht. */
body.ohne-navigation .buehne {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.onboarding .screenkopf { margin-bottom: 6px; }

/* Textzeile, kein Balken — .fortschritt ist schon der Balken im Einkauf.
   Der Wert benennt die erbrachte Handlung, nie einen erfundenen Startwert. */
.onboarding-fortschritt {
  font-size: var(--gr-neben);
  line-height: var(--zh-neben);
  color: var(--gruen-text);
  margin: 0 0 14px;
}

.onboarding-fuss { margin-top: 18px; }

/* Das Namensfeld sieht aus wie die Ueberschrift, die es wird (§11.1). */
.feld.gross > input[type="text"] {
  font-family: var(--schrift-display);
  font-size: var(--gr-portion);
  line-height: var(--zh-portion);
  padding: 14px 13px;
}

/* --- Wachsende Textfeldliste ------------------------------------------ */

.listenzeile { margin-bottom: 8px; }
.listenzeile input {
  width: 100%;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie-feld);
  border-radius: var(--r-bedien);
  padding: 13px;
  font-size: var(--gr-flies);
  color: var(--text);
  min-height: 44px;
}
.listenzeile input::placeholder { color: var(--text-leise); }

/* --- Ein <label>, das wie ein Knopf aussieht --------------------------- */

/* Fuer <input type="file">: Der Dateiwaehler laesst sich nicht gestalten,
   das zugehoerige Label schon. Das Feld selbst steht als .nur-vorleser
   daneben und bleibt damit fuer Tastatur und Vorleser erreichbar. */
.nebenaktion.alsknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nebenaktion.stumm {
  border-color: var(--linie-trenner);
  color: var(--text-leise);
}

/* --- Profilkarte im Deck ---------------------------------------------- */

/* Die Karte traegt jetzt ein Bild statt einer getoenten Flaeche. Die
   Wischkarte behaelt ihren Radius aus §6.4.

   Die Hoehe gilt NUR im Menschen-Deck: `.stapel` steht in screens.css auf
   420 px, und die Anfragekarte (§14) braucht das weiterhin so. Deshalb die
   eigene Klasse an der Screenwurzel statt einer Aenderung an der Grundregel. */
/* In rem, nicht in px: Bei 200 % Schriftgroesse waechst die Karte mit, statt
   den Text ueber ihren Rand laufen zu lassen (Gate G16). */
.menschendeck .stapel { height: min(38rem, 78vh); }

/* Sicherheitsventil: Reicht die Hoehe trotzdem nicht — sehr grosse Schrift auf
   einem sehr flachen Fenster —, scrollt die Karte in sich, statt abzuschneiden.
   `touch-action: pan-y` auf der Wischkarte laesst genau das zu, ohne dem
   Wischen in die Quere zu kommen. */
.menschendeck .wischkarte { overflow-y: auto; }

.wischkarte .pillenreihe { margin: 6px 0 8px; }

/* Im Deck fuehrt das Bild: Es nimmt, was der Text uebrig laesst. Ein festes
   Seitenverhaeltnis geht hier nicht — die Karte hat eine feste Hoehe, und ein
   Flex-Kind mit aspect-ratio wird dann zusammengedrueckt statt gross. */
.menschendeck .wischkarte .profilbild.gross {
  flex: 1 1 auto;
  min-height: 150px;
  aspect-ratio: auto;
  margin-bottom: 10px;
}

/* Der Rest der Karte darf nicht schrumpfen, sonst frisst er die Bildhoehe. */
.menschendeck .wischkarte h2,
.menschendeck .wischkarte .ort,
.menschendeck .wischkarte .pillenreihe,
.menschendeck .wischkarte .text,
.menschendeck .wischkarte .fuss { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .profilbild img, .galeriebild img { transition: none; }
}

/* --- Zuwachs 01.09.2026: Haushaltsform, Filter, Profil ohne Foto --------- */

/* Ein Profil ohne Bilddatei (die beiden Küchen im Deck) trägt seine Initiale
   auf einer Gerichtstönung. Die Regel steht hier und nicht in komponenten.css,
   weil `.profilbild` weiter oben in DIESER Datei bereits einen Hintergrund
   setzt — eine gleich spezifische Regel in der früher geladenen Datei würde
   verlieren. Zwei Klassen im Selektor heben sie über beide. */
.profilbild.ton-kraut { background: var(--ton-kraut-flaeche); }
.profilbild.ton-teig { background: var(--ton-teig-flaeche); }
.profilbild.ton-paprika { background: var(--ton-paprika-flaeche); }
.profilbild.ton-rauch { background: var(--ton-rauch-flaeche); }
.profilbild.ton-kraut .initiale { color: var(--ton-kraut-buchstabe); }
.profilbild.ton-teig .initiale { color: var(--ton-teig-buchstabe); }
.profilbild.ton-paprika .initiale { color: var(--ton-paprika-buchstabe); }
.profilbild.ton-rauch .initiale { color: var(--ton-rauch-buchstabe); }

/* --- Haushaltsform: vier Kacheln --- */

.haushaltswahl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.haushaltskachel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 12px 13px;
  min-height: 44px;
  border: 1px solid var(--linie-feld);
  border-radius: var(--r-bedien);
  background: var(--flaeche-karte);
}

.haushaltskachel .name {
  font-size: var(--gr-flies);
  line-height: 1.25;
  color: var(--text);
}

.haushaltskachel .lang {
  font-size: var(--gr-marker);
  line-height: var(--zh-marker);
  color: var(--text-leise);
}

.haushaltskachel[aria-pressed="true"],
.haushaltskachel[aria-checked="true"] {
  border: 1.5px solid var(--gruen-linie);
  background: var(--flaeche-ruhig);
}

.haushaltskachel[aria-pressed="true"] .name,
.haushaltskachel[aria-checked="true"] .name { color: var(--gruen-text); }

/* Im Onboarding steht die Wahl allein auf dem Bildschirm und darf größer sein. */
.haushaltskachel.gross { padding: 15px 15px; gap: 5px; }
.haushaltskachel.gross .name {
  font-family: var(--schrift-display);
  font-weight: 400;
  font-size: var(--gr-listentitel);
  line-height: var(--zh-listentitel);
}

/* --- Filterhinweis über dem Deck --- */

.filterzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 13px;
  border: 1px dashed var(--holz-linie);
  border-radius: var(--r-bedien);
}

.filterzeile p { flex: 1; min-width: 0; margin: 0; }
.filterzeile .nebenaktion { flex: none; padding: 8px 12px; min-height: 40px; }

.filterzahl {
  font-size: var(--gr-bedien);
  line-height: var(--zh-bedien);
  color: var(--gruen-text);
  margin-top: 8px;
}

.filterzahl.leer {
  color: var(--text);
  border-left: 2px solid var(--holz-linie);
  padding-left: 11px;
}

@media (max-width: 359px) {
  .haushaltswahl { grid-template-columns: 1fr; }
}