/* ============================================================
   Tastivo Next – helles Theme
   ============================================================

   Diese Datei AENDERT NICHTS. Sie liegt hinter styles-v3.css und
   ueberschreibt nur, was hell werden muss. Das hat drei Gruende:

   1. Die Beta bleibt unberuehrt. Sie laedt diese Datei nicht, und
      styles-v3.css ist Zeichen fuer Zeichen dieselbe wie zuvor.
   2. Ein Rueckweg ist eine geloeschte Zeile in v3.html.
   3. Was hier steht, ist die vollstaendige Liste dessen, was sich
      unterscheidet - man muss sie nicht aus 3500 Zeilen heraussuchen.

   ---------- Die Aufteilung ----------

   Das bestehende Blatt ist gut gebaut: 525 Stellen holen ihre Farbe aus
   einer Variablen. Fuer die genuegt ein neues :root.

   251 Farben stehen hart darin. Die allermeisten davon sind #17130c -
   und das ist KEIN Versehen, sondern die Schrift auf goldenem Grund. Sie
   bleibt richtig, denn Gold bleibt Gold. Was wirklich zu aendern ist,
   sind rund fuenfzehn Flaechen; sie stehen weiter unten, jede mit ihrem
   Namen.

   ---------- Was dunkel BLEIBT, und warum ----------

   Story-Betrachter, Videos, das Hero-Bild einer Lokalseite und die
   Knoepfe auf der Karte. Ueberall dort liegt heller Text auf einem Foto,
   und ein Foto ist keine Flaeche, deren Helligkeit man kennt. Weisse
   Schrift braucht dort ihren dunklen Grund - hell zu machen, was ueber
   Bildern liegt, hiesse es unlesbar zu machen. */

:root {
  /* ---------- Der Grund ----------
     Nicht reines Weiss: ein Hauch Waerme, damit die weissen Karten
     darauf als Flaechen lesbar bleiben und nicht mit dem Grund
     verschmelzen. */
  --bg: #f7f6f4;
  --card: #ffffff;
  --card-2: #f2f1ee;          /* eine Stufe tiefer, z.B. Eingabefelder */

  /* ---------- Die Schrift ----------
     Fast schwarz statt schwarz. Reines Schwarz auf Weiss flimmert auf
     einem Bildschirm; ein sehr dunkles Grau liest sich ruhiger. */
  --ink: #17140f;
  --ink-soft: #4a453d;
  --muted: #8a847a;

  /* ---------- Das Gold ----------
     Dunkler als vorher. Das alte Gold war fuer schwarzen Grund gemacht
     und verschwindet auf Weiss fast; dieses hier traegt als Schrift und
     als Rand. Es ist jetzt Akzent und nicht mehr Grundton. */
  --gold: #a87c2e;
  --gold-lt: #8f6820;         /* fuer Text: noch etwas dunkler, sonst blass */
  --gold-dk: #6f4f16;
  --gold-line: rgba(168, 124, 46, .30);
  --gold-wash: rgba(168, 124, 46, .09);

  /* Die Trennlinie war helles Weiss auf Schwarz - jetzt umgekehrt, und
     sehr zurueckhaltend. Sie soll ordnen, nicht zeichnen. */
  --line: rgba(23, 20, 15, .10);
}

/* ---------- Der Grund unter allem ----------
   html und body tragen ihn ausdruecklich: sonst scheint beim Ueberziehen
   am Rand das alte Schwarz durch. */
html, body, #app { background: var(--bg); }

/* ---------- Der Kopf ----------
   Er trug ein dunkles Speisenbild mit zwei schwarzen Schichten darueber.
   Auf hellem Grund waere das ein schwarzer Balken - also kein Bild, ein
   heller Grund und eine feine Linie darunter. Ruhiger, und der Blick
   faellt auf den Inhalt statt auf den Rahmen. */
.header {
  background-color: #ffffff;
  background-image: none;
  border-bottom: 1px solid var(--line);
}
.header .logo { color: var(--ink); }
.header .subtitle span { color: var(--muted); }
.header-action { background: rgba(23, 20, 15, .04); }
.header-action.ghost { background: rgba(23, 20, 15, .03); }

/* ---------- Die Fussleiste ----------
   Sie war fast schwarz mit einer hellen Linie. Jetzt weiss mit einer
   dunklen - dieselbe Rolle, andere Richtung. */
.tabbar {
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
}

/* ---------- Flaechen, die ihre Farbe hart nannten ----------
   Jede einzeln, damit man sieht, was betroffen ist. Es sind
   Platzhalterflaechen: dort steht ein Bild, und solange keines da ist,
   sieht man den Grund. */
.avatar,
.story-avatar,
.w-foto, .w-foto.leer,
.w-haufen-bilder, .w-haufen-leer,
.w-blatt-bild { background: #e8e5e0; }

/* Der Grund unter einer Karte, bevor sie gezeichnet hat, und die Flaeche
   im Bildausschnitt-Editor. Hellgrau statt fast schwarz - sonst blitzt
   beim Oeffnen ein dunkles Rechteck auf. */
.karte-buehne, .gmap, .crop-buehne { background: #eceae6; }

/* ---------- Fuellungen, die auf Weiss verschwinden ----------
   "Weiss mit fuenf Prozent" ist auf schwarzem Grund eine sichtbare
   Flaeche und auf weissem gar nichts. Also dieselbe Idee, umgekehrt:
   Dunkel mit wenigen Prozent. */
.akt-ikon, .akt-pille,
.ks-lupe-knopf,
.ks-filterknopf,
.chat-tag, .msg-post,
.archiv-zahl,
.c-nenn-kopf,
.schalter-knopf { background: rgba(23, 20, 15, .05); }
.msg-zitat { background: rgba(23, 20, 15, .04); }
.such-x { background: rgba(23, 20, 15, .08); }
.ks-griff { background: rgba(23, 20, 15, .18); }
.add-story .story-frame,
.trail-spot.add { border-color: rgba(23, 20, 15, .20); }
.ptr-ring { border-color: rgba(23, 20, 15, .16); }
.stop-stand.visited { border-color: rgba(23, 20, 15, .26); }
.stop-stand.skipped { background: rgba(23, 20, 15, .05); }

/* ---------- Knoepfe: eine Stufe leiser ----------
   Der Hauptknopf bleibt golden mit dunkler Schrift - das ist Tastivos
   Handschrift und der einzige Ort, an dem Gold noch Flaeche sein darf.
   Der zweite Knopf war eine dunkle Flaeche mit goldenem Rand; auf Weiss
   genuegt der Rand. */
.btn.secondary {
  background: #ffffff;
  border-color: var(--line);
  color: var(--ink);
}
.btn.secondary:active { background: var(--card-2); }
.btn.danger { background: #ffffff; border-color: rgba(176, 60, 44, .35); color: #b03c2c; }

/* Eingaben: weisse Flaeche, feine Linie, dunkle Schrift. */
input, textarea, select { background: #ffffff; border-color: var(--line); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* ---------- Blaetter und Karten ----------
   Sie liegen jetzt hell auf hell und brauchen deshalb einen Schatten
   statt eines Randes, um sich abzuheben. Ein Rand auf Weiss zeichnet;
   ein Schatten hebt. */
.sheet, .karte-sheet {
  background: #ffffff;
  box-shadow: 0 -8px 30px rgba(23, 20, 15, .13);
}
.food-card, .list-row, .zahl-kachel, .fw-kachel, .anfrage-karte {
  background: #ffffff;
}
.fw-kachel, .zahl-kachel { border-color: var(--line); }

/* Der Filterknopf und die Reiter: gesetzt bleibt golden mit dunkler
   Schrift, ungesetzt wird eine feine Linie auf Weiss. */
.filter-chip, .ks-filter { background: #ffffff; border-color: var(--line); color: var(--ink-soft); }
.filter-chip.on, .ks-filter.on { background: var(--gold); border-color: var(--gold); color: #ffffff; }
.chip-zahl { background: var(--gold); color: #ffffff; }

/* ---------- Was ausdruecklich dunkel bleibt ----------

   Hier steht nichts. Das ist der Punkt: Story-Betrachter (.snap-viewer),
   Videos (.food-video), das Hero-Bild (.biz-hero) und die Knoepfe auf der
   Karte (.karte-knopf, .map-controls, .karte-laedt) behalten ihren
   dunklen Grund, weil ueber ihnen heller Text auf Fotos liegt.

   Sie hier zu ueberschreiben waere kein Versehen, sondern der Fehler:
   weisse Schrift auf hellem Glas ueber einem hellen Foto ist nicht
   lesbar, und ein Foto hat keine Helligkeit, auf die man sich verlassen
   koennte. */