/* Rezept-Finder POWERPOTATO CLUB. Läuft im Shadow DOM, also gilt hier nichts von der Beehiiv-Seite.
   Farben: Burgund #50000B, Creme #FBF4E4, Rot #DC0C22, Rosa #FEBFEE, Weiß für Karten.
   Mobil zuerst: alles wird bei 390 px entworfen.
   Neuer Anstrich am 17.09.2026 (Celinas Abnahme der Vorschau): Karten ohne Rand mit weichem Schatten,
   eingelegtes Foto, Zeichen an den Kennzahlen, Suche als Pille mit Lupe, zwei unterscheidbare
   Chip-Reihen mit Pfeilen am Handy, Zeile mit den aktiven Filtern, „Überrasch mich". */

:host {
  --burgund: #50000B;
  --creme: #FBF4E4;
  --rot: #DC0C22;
  --rosa: #FEBFEE;
  /* Helles Rosa für die Schlagwort-Chips: dasselbe Rosa, mit Weiß aufgehellt. Burgund darauf liegt bei rund 12:1. */
  --rosa-hell: color-mix(in srgb, var(--rosa) 45%, #fff);
  --weiss: #fff;
  /* Schrift auf rosa Flächen bleibt in beiden Modi Burgund, Creme auf Rosa wäre kaum lesbar */
  --auf-rosa: #50000B;
  --rand: rgba(80, 0, 11, 0.28);
  --rand-leicht: rgba(80, 0, 11, 0.16);
  --schatten: 0 1px 2px rgba(80, 0, 11, 0.06), 0 4px 14px rgba(80, 0, 11, 0.08);
  --schatten-hoch: 0 2px 4px rgba(80, 0, 11, 0.08), 0 12px 28px rgba(80, 0, 11, 0.16);
  --ecke: 8px;
  --kopf: "Poppins Finder", Poppins, system-ui, sans-serif;
  display: block;
  /* Der Finder ist so hoch wie seine Kacheln. Eine Hoehe von aussen wuerde ihn in Beehiivs
     Rahmen aufblasen (siehe app.js), deshalb gilt hier die eigene Hoehe. */
  height: auto !important;
  min-height: 0 !important;
  color: var(--burgund);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Dunkelmodus nach Apple HIG (Celina, 01.10.2026, Grundton tiefes Burgund): der Finder folgt der
   Einstellung des Geräts, kein eigener Schalter. Die Namen bleiben, die Werte drehen sich: der Grund
   (--creme) wird fast schwarzes Burgund, Karten und Felder (--weiss) eine Stufe heller, wie bei
   Apple die gehobenen Flächen, die Schrift (--burgund) Creme. Rot schafft auf dem dunklen Grund nur
   3,8:1, deshalb sind Links und Zeichen (--rot) hier Rosa (12:1). Gewählte Chips, Filterzeile und
   „nach oben" drehen sich dadurch von selbst um: Creme mit dunkler Schrift. tests/e2e/dunkel.spec.mjs
   misst jeden Kontrast. */
@media (prefers-color-scheme: dark) {
  :host {
    --burgund: #FBF4E4;
    --creme: #1E0507;
    --rot: #FEBFEE;
    --weiss: #2E0C11;
    /* Schlagwort-Chips: gedecktes dunkles Rosa, Creme darauf 12,8:1 */
    --rosa-hell: #4D1A2E;
    --rand: rgba(251, 244, 228, 0.32);
    --rand-leicht: rgba(251, 244, 228, 0.18);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35);
    --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.5);
  }
  /* :host davor, sonst gewinnt die spätere background-Kurzform unten */
  :host .reihenfolge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23FBF4E4' stroke-width='2'/%3E%3C/svg%3E");
  }
}

/* Apple HIG, Paket B (30.09.2026): am iPhone und iPad folgt die Schrift der Einstellung „Größerer
   Text". Safari liefert die Stufe über font: -apple-system-body (Standard 17 px), alles im Finder
   ist in em davon abgeleitet, und 16em / 17 holt die Standardstufe auf die gewohnten 16 px zurück.
   Nur auf Touch-Geräten: der Mac liefert für -apple-system-body 13 px. Andere Browser kennen die
   Angabe nicht und bleiben bei 16 px. Die Tippflächen (44 px) bleiben fest und wachsen mit dem Text. */
@supports (font: -apple-system-body) {
  @media (pointer: coarse) {
    :host { font: -apple-system-body; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
    .finder { font-size: calc(16em / 17); }
  }
}

*, *::before, *::after { box-sizing: border-box; }

.finder { color: var(--burgund); }

button, input, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; }

:is(a, button, input, select):focus-visible {
  outline: 2px solid var(--burgund);
  outline-offset: 2px;
}

.versteckt { display: none !important; }

/* Überschrift */
.ueberschrift {
  font: 600 1.375em/1.25 var(--kopf); /* 22 px, Apple-Stufe Title 2, am Tablet 28 (Title 1) */
  margin: 0 0 4px;
}

/* Suche: weiße Pille mit Lupe, bleibt beim Scrollen oben kleben, auf Creme */
.suche {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--creme);
  padding: 4px 0 3px; /* mit Chip-Rand 7 und Innenabstand 2 ergibt das 12 px bis zur ersten Chip-Reihe */
}

.suche-feld {
  position: relative;
}

.suche-lupe {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  pointer-events: none;
  color: var(--burgund);
}

.suche input {
  width: 100%;
  min-height: 46px;
  font-size: max(16px, 1em); /* unter 16 px zoomt iOS beim Tippen */
  padding: 8px 48px 8px 42px;
  border: 1px solid var(--rand-leicht);
  border-radius: 23px;
  background: var(--weiss);
  color: var(--burgund);
  box-shadow: var(--schatten);
  transition: box-shadow 150ms;
  -webkit-appearance: none;
  appearance: none;
}

.suche input:focus {
  border-color: var(--burgund);
  outline: none;
  box-shadow: var(--schatten), 0 0 0 3px rgba(254, 191, 238, 0.7);
}

/* Beim Scrollen hebt sich die Pille (Klasse kommt von bewegung.mjs, Celina 30.09.2026) */
.suche.schwebt input { box-shadow: var(--schatten-hoch); }
.suche.schwebt input:focus { box-shadow: var(--schatten-hoch), 0 0 0 3px rgba(254, 191, 238, 0.7); }

.suche input::placeholder { color: var(--burgund); opacity: 0.6; }
.suche input::-webkit-search-cancel-button,
.suche input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.suche-leeren {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--burgund);
  font-size: min(1.375em, 28px); /* 22 px, bei großem Text gedeckelt, der Knopf bleibt 44 px */
  line-height: 1;
  border-radius: 22px;
}

/* Chip-Reihen: am Handy waagerecht scrollbar, ohne dass die Seite scrollt.
   Abstände nach Apple HIG (30.09.2026): rund 12 px Luft um Knöpfe mit Rand, auch zwischen den
   Reihen (Rand oben 7 plus Innenabstand 3 und 2 ergibt 12 zwischen den Chips). */
.chips-huelle { position: relative; }

.chips {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 3px;
  margin: 7px -2px 0;
}

.chips::-webkit-scrollbar { display: none; }
.chips.offen { flex-wrap: wrap; overflow: visible; }

.chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid var(--burgund);
  border-radius: 22px;
  background: var(--weiss);
  color: var(--burgund);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms, border-color 150ms, opacity 150ms;
}

/* Zweite Reihe (Schlagworte) ohne Rand auf hellem Rosa, damit man die zwei Reihen auseinanderhält */
.chips-entdecken .chip { border-color: transparent; background: var(--rosa-hell); }

.chip[aria-pressed="true"],
.chips-entdecken .chip[aria-pressed="true"] {
  background: var(--burgund);
  border-color: var(--burgund);
  color: var(--weiss);
}

/* Liefert in der aktuellen Auswahl nichts mehr: ausgegraut und ohne Wirkung (finder.mjs) */
.chip.leer { opacity: 0.4; cursor: default; }

.chip.mehr {
  border: 1px dashed var(--rand);
  background: transparent;
  font-weight: 400;
}

/* „Überrasch mich" am Anfang der ersten Reihe, in Rosa, damit es als Aktion und nicht als Filter wirkt */
.zufall {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 15px 8px 12px;
  border-radius: 22px;
  background: var(--rosa);
  color: var(--auf-rosa);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.zufall svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* Pfeile an den Chip-Reihen: nur am Handy, nur solange in der Richtung noch etwas kommt */
.chips-pfeil {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 44px; /* Tippfläche 44 px, sichtbarer Kreis 36 px */
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--burgund);
  display: grid;
  place-items: center;
}

.chips-pfeil[hidden] { display: none; }
.chips-pfeil::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: var(--schatten-hoch);
}
.chips-pfeil svg { position: relative; width: 18px; height: 18px; }
.chips-pfeil.rechts { right: -6px; }
.chips-pfeil.links { left: -6px; transform: scaleX(-1); }

/* Zeile mit den aktiven Filtern, jeder mit × zum Lösen, am Ende „Alle Rezepte zeigen" */
.aktiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
}

.aktiv-chips { display: contents; }

.aktiv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px 6px 14px;
  border: 0;
  border-radius: 22px;
  background: var(--burgund);
  color: var(--weiss);
  font-weight: 600;
}

.aktiv-x { font-size: 1.25em; line-height: 1; }

/* Zähler, Ausweg und Reihenfolge */
.leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  /* 12 px zur Chip-Reihe darüber (mit deren Innenabstand 3) und zur ersten Kachel darunter */
  margin: 9px 0 12px;
  min-height: 44px;
}

.zaehler { font: 600 1em/1.5 var(--kopf); margin: 0; }

.alle {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--rot);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reihenfolge {
  margin-left: auto;
  max-width: 100%; /* bei sehr großem Text lieber abgeschnitten als über den Rand */
  min-height: 44px;
  padding: 6px 34px 6px 14px;
  border: 1px solid var(--rand-leicht);
  border-radius: 22px;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2350000B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--burgund);
  font-size: max(16px, 1em);
  font-weight: 600;
  box-shadow: var(--schatten);
  -webkit-appearance: none;
  appearance: none;
}

/* Kachelraster: zwei Spalten ab 360 px, drei ab 768 px, vier ab 1200 px. Die Spaltenzahl steht
   fest, solange die Schrift normal ist (die Hälfte, ein Drittel, ein Viertel der Breite abzüglich der
   Lücke). Wird der Text so groß, dass 9,5em breiter sind als eine Spalte, passen weniger nebeneinander,
   am Handy dann eine, und nie breiter als das Raster selbst (Apple HIG, Paket B, 30.09.2026). */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9.5em, calc(50% - 7px))), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) { .raster { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9.5em, calc(33.334% - 14px))), 1fr)); gap: 20px; } }
@media (min-width: 1200px) { .raster { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9.5em, calc(25% - 16px))), 1fr)); } }

/* Jede Kachel füllt ihre Rasterzelle, damit zwei Kacheln nebeneinander gleich hoch sind */
.raster > li { display: grid; }

/* Kachel: weiße Karte ohne Rand, eingelegtes Foto, weicher Schatten, hebt sich beim Berühren */
.kachel {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--weiss);
  border: 0;
  border-radius: var(--ecke);
  box-shadow: var(--schatten);
  padding: 5px 5px 6px;
  overflow: hidden;
  content-visibility: auto;
  /* Schätzhöhe für Kacheln außerhalb des Bildschirms, und zwar für den Inhalt ohne die 11 px
     Innenabstand (Kachel 345 px = 334 + 11, gemessen bei 390 px am 30.09.2026 mit drei Titelzeilen
     und vier Kennzahlzeilen). Liegt die Schätzung daneben, landet die gemerkte Scrollposition
     daneben, und Chromium baut die erste Reihe anfangs mit dieser Höhe. */
  contain-intrinsic-size: auto 334px;
  transition: transform 150ms, box-shadow 150ms;
}

@media (hover: hover) {
  .kachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
}

.kachel:active { transform: scale(0.98); box-shadow: var(--schatten); }

/* Beim Wiederherstellen der Scrollposition einmal alle Kacheln messen (siehe finder.mjs) */
.raster.messen .kachel { content-visibility: visible; }

.bild {
  position: relative;
  aspect-ratio: 1;
  background: var(--creme);
  border-radius: 6px;
  overflow: hidden;
}

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

.neu {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--rosa);
  color: var(--auf-rosa);
  font: 600 0.9375em/1.5 var(--kopf); /* 15 px, Apple-Stufe Subhead */
  box-shadow: 0 1px 3px rgba(80, 0, 11, 0.2);
}

.text { padding: 6px 3px 0; }

.titel {
  margin: 0 0 4px;
  font: 600 1em/1.3 var(--kopf);
  min-height: calc(2 * 1.3em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Drei Zeilen, damit „One Pot Pasta mit Hack & cremiger Tomatensoße" ganz dasteht. Celina am
     14.09.2026: lieber ganze Titel als 11 px Vorgeschmack auf die zweite Kachelreihe. */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  /* Keine automatische Silbentrennung: „Bananenbrot Ka-rottenkuchen-…" liest sich nicht,
     am Bindestrich bricht der Titel auch so (Audit 14.09.2026, Punkt 5). */
  hyphens: manual;
}

/* Kennzahlen: drei Zeilen mit Zeichen (Uhr, Flamme, Hantel) auf einem Creme-Block, damit sie sich
   vom Titel abheben (Celina, 17.09.2026). Werte fett in Burgund, Zeichen in Rot, 15 px (Apple-Stufe
   Subhead, seit dem 30.09.2026, vorher 14).
   „fertig nach" und „plus Wartezeit" bleiben normal, so springt die Arbeitszeit zuerst ins Auge. */
.zahlen {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--creme);
  font-size: 0.9375em; /* 15 px */
  line-height: 1.4;
  font-weight: 600;
  color: var(--burgund);
}

.zahlen > span { display: flex; align-items: flex-start; gap: 6px; }
.zahlen svg { flex: 0 0 auto; width: 0.933em; height: 0.933em; margin-top: 0.2em; color: var(--rot); }
.zahlen .wert { overflow-wrap: anywhere; }
.fertig, .warte { font-weight: 400; }

/* Platzhalter, solange die Daten noch nicht da sind */
.platzhalter .bild { background: var(--creme); }
.platzhalter .titel { background: var(--creme); border-radius: 4px; height: calc(2 * 1.3em); }
.platzhalter .zahlen { background: var(--creme); border-radius: 4px; height: 1.4em; }

/* „nach oben", rechts unten, erst ab dem zweiten Bildschirm (finder.mjs blendet ein).
   Vom Home-Bildschirm aus weicht er dem Balken für die Home-Geste aus (Apple HIG, 30.09.2026). */
.nach-oben {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 22px;
  background: var(--burgund);
  color: var(--weiss);
  font-weight: 600;
  box-shadow: var(--schatten-hoch);
}

.nach-oben::before { content: "↑"; font-size: 1.125em; line-height: 1; }

/* Karten für „nichts gefunden" und Fehler: weiß mit rosa Kopfband und burgundem Rand, wie Celinas
   Beiträge in Beehiiv, damit der Übergang in den Beitrag nicht wie ein Bruch wirkt (Celina, 17.09.2026) */
.karte {
  background: var(--weiss);
  border: 1px solid var(--burgund);
  border-radius: var(--ecke);
  box-shadow: var(--schatten);
  padding: 0;
  margin: 4px 0 16px;
  overflow: hidden;
}

.karte-kopf {
  font: 600 1.125em/1.3 var(--kopf);
  margin: 0;
  padding: 10px 16px;
  background: var(--rosa);
  color: var(--auf-rosa);
}

.karte-inhalt { padding: 12px 16px 10px; }
.karte-inhalt p { margin: 0 0 10px; }
.karte .alle { padding: 0; margin-right: 16px; }
.karte a { color: var(--rot); font-weight: 600; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; }

/* Tablet und Rechner: Chips brechen um statt zu scrollen, deshalb keine Pfeile */
@media (min-width: 768px) {
  .chips { flex-wrap: wrap; overflow: visible; }
  .chips-pfeil { display: none; }
  .ueberschrift { font-size: 1.75em; } /* 28 px, Apple-Stufe Title 1 */
}

/* Rechner: Überschrift und Suchfeld in einer Zeile, das Feld höchstens 640 px breit, sonst wirkt die
   Seite wie ein gestrecktes Handy (Celina, 17.09.2026). Alles andere spannt über beide Spalten. */
@media (min-width: 1024px) {
  .finder { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .finder > * { grid-column: 1 / -1; }
  .ueberschrift { grid-column: 1; margin: 0; white-space: nowrap; }
  /* Beim Scrollen klebt nur die weiße Pille, kein Creme-Kasten über den Kacheln */
  .suche { grid-column: 2; justify-self: start; width: 100%; max-width: 640px; padding: 6px 0; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}