/* Flecken-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Knoepfe, Werbestreifen, Begruessung, Blatt, Toast.

   DER UNTERSCHIED ZU DEN GESCHWISTERN: hier wird gesucht und gelesen, nicht
   gespielt und nicht gefahren. Das Suchfeld ist deshalb das groesste Element,
   und jede Kategorie traegt ihre eigene Kantenfarbe, damit man einen Eintrag
   beim zweiten Besuch am Farbstreifen wiederfindet.

   PFLICHT: jede eigene Farbe paarweise, also auch im eigenen
   @media (prefers-color-scheme: dark). @media erhoeht die Spezifitaet nicht:
   wer nur den Hellwert setzt, hat den Dunkelmodus kaputtgemacht. */

:root {
  /* Eine Farbe je Kategorie, eigene Namen, damit nichts aus der Basis
     ueberschrieben wird. Blau und Orange sind die Markenfarben, der Rest
     folgt der Logik des Inhalts: Natur gruen, Koerper rot, Fett gelb. */
  --fl-getraenke: #0091c8;   /* Getränke: Markenblau */
  --fl-essen:     #ff7d0f;   /* Essen: Markenorange */
  --fl-fett:      #e8a800;   /* Fett und Öl: Gelb */
  --fl-farbe:     #7b5cd6;   /* Farbe und Tinte: Violett */
  --fl-natur:     #17864a;   /* Natur: Gruen */
  --fl-koerper:   #d32f2f;   /* Körper: Rot */
  --fl-sonstiges: #8a93a1;   /* Sonstiges: Grau */

  /* Der Warnkasten im Blatt. Heller Grund mit dunkler Schrift, im Dunkelmodus
     umgekehrt: eine rote Vollflaeche waere nachts der hellste Fleck der Seite. */
  --fl-warn-grund: #fdecea;
  --fl-warn-text:  #8f1d18;
  --fl-warn-kante: #d32f2f;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PAARWEISE mitziehen, sonst leuchten helle Kanten nachts wie Scheinwerfer. */
    --fl-getraenke: #35b4e0;
    --fl-essen:     #ff9836;
    --fl-fett:      #f2c14e;
    --fl-farbe:     #a68df0;
    --fl-natur:     #3ddc84;
    --fl-koerper:   #f16b6b;
    --fl-sonstiges: #6b7480;

    --fl-warn-grund: #3a1715;
    --fl-warn-text:  #ffb4ad;
    --fl-warn-kante: #f16b6b;
  }
}

/* Kopf, Buehne, Werbung: drei Zeilen, wie bei den Geschwistern. */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }

/* Das Hinweiszeichen in der Kopfzeile, wie bei Spiele und Teste dich. */
.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Die Buehne ----------

   Dreigeteilt: Suchfeld und Chips stehen fest, NUR die Trefferliste scrollt.
   Dieselbe Lehre wie beim Blatt in der Basis: was man zum Bedienen braucht,
   darf nicht wegscrollen. */
.buehne {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 2px 0;
}

/* ---------- Das Suchfeld ---------- */

.fl-suche { flex: none; }
.fl-suche input {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.fl-suche input:focus { border-color: var(--blau); }
.fl-suche input::placeholder { color: var(--gedimmt); font-weight: 500; }
/* Das kleine x im Suchfeld darf bleiben, aber im WebKit-Standardlook stoert
   es nicht und braucht keine eigene Regel. */

/* ---------- Die Kategorie-Chips ----------

   Eine Zeile, die seitlich scrollt: sieben Kategorien plus "Alle" passen auf
   kein Handy nebeneinander, und zwei Zeilen wuerden der Liste Platz stehlen. */
.fl-chips {
  flex: none;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fl-chips::-webkit-scrollbar { display: none; }

.fl-chip {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
/* Der gewaehlte Chip fuellt sich mit Markenblau, wie ein aktives Segment. */
.fl-chip[aria-pressed="true"] {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}
/* Jeder Kategorie-Chip traegt unten die Farbe seiner Kategorie: derselbe
   Farbcode wie an den Karten, so lernt man ihn nebenbei. */
.fl-chip.fk-getraenke { border-bottom-color: var(--fl-getraenke); }
.fl-chip.fk-essen     { border-bottom-color: var(--fl-essen); }
.fl-chip.fk-fett      { border-bottom-color: var(--fl-fett); }
.fl-chip.fk-farbe     { border-bottom-color: var(--fl-farbe); }
.fl-chip.fk-natur     { border-bottom-color: var(--fl-natur); }
.fl-chip.fk-koerper   { border-bottom-color: var(--fl-koerper); }
.fl-chip.fk-sonstiges { border-bottom-color: var(--fl-sonstiges); }

/* ---------- Die Trefferliste ---------- */

.fl-liste {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  grid-auto-rows: max-content;
  gap: 7px;
  padding: 1px 1px 6px;
}

.fl-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-left: 4px solid var(--fl-sonstiges);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.fl-karte:active { transform: scale(.98); }
/* Die farbige Kante je Kategorie: so findet man einen Eintrag beim zweiten
   Besuch ohne zu lesen. */
.fl-karte.fk-getraenke { border-left-color: var(--fl-getraenke); }
.fl-karte.fk-essen     { border-left-color: var(--fl-essen); }
.fl-karte.fk-fett      { border-left-color: var(--fl-fett); }
.fl-karte.fk-farbe     { border-left-color: var(--fl-farbe); }
.fl-karte.fk-natur     { border-left-color: var(--fl-natur); }
.fl-karte.fk-koerper   { border-left-color: var(--fl-koerper); }
.fl-karte.fk-sonstiges { border-left-color: var(--fl-sonstiges); }

.fl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-name { font-size: 17px; font-weight: 800; }
.fl-kat  { font-size: 12px; font-weight: 700; color: var(--gedimmt); text-transform: uppercase; letter-spacing: .4px; }
.fl-kurz {
  font-size: 13px;
  color: var(--leise);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fl-pfeil { flex: none; font-size: 22px; font-weight: 700; color: var(--gedimmt); }

.fl-leer {
  margin: 24px 8px;
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
  color: var(--leise);
}

/* ---------- Das Blatt: die Anleitung ---------- */

.fl-abschnitt { display: grid; gap: 4px; }
.fl-titel {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--leise);
}
.fl-schritte {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 7px;
}
.fl-schritte li {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}
.fl-schritte li::marker { font-weight: 800; color: var(--blau); }
.fl-absatz {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}

/* Die rote Warnung: abgesetzter Kasten statt roter Schrift im Fliesstext,
   damit man sie auch beim Ueberfliegen nicht verpasst. Farben kommen aus den
   Tokens oben und haben dort ihr Dunkelmodus-Paar. */
.fl-warnung {
  margin-top: 2px;
  padding: 10px 12px;
  border-left: 4px solid var(--fl-warn-kante);
  border-radius: 10px;
  background: var(--fl-warn-grund);
  color: var(--fl-warn-text);
  font-size: 15px;
  line-height: 1.45;
}

/* Der feste Fuss im Blatt: die generelle Warnung, immer sichtbar, weil der
   Fuss des Blatts nicht mitscrollt (genau dafuer ist er da). */
.fl-fuss {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--leise);
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-height: 640px) {
  .buehne { gap: 5px; }
  .fl-suche input { min-height: 44px; font-size: 16px; }
  .fl-chip { min-height: 34px; padding: 0 11px; font-size: 13px; }
  .fl-karte { min-height: 54px; padding: 7px 10px; }
  .fl-name { font-size: 15px; }
  .fl-kurz { -webkit-line-clamp: 1; }
  .fl-liste { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-karte { transition: none; }
}