/* ==========================================================================
   Farbstimmungen
   Umschaltbar unter Daten > Einstellungen. Das Attribut data-schema setzt
   app.js auf <html>; ohne Attribut gilt Rotbraun. Hell und dunkel richten
   sich nach der Einstellung des Betriebssystems.

   Die Schemata haengen bewusst nicht an :root, sondern an [data-schema].
   Dadurch laesst sich eine Palette auch auf einen einzelnen Bereich legen -
   davon lebt die Vergleichsseite farben.html, die alle nebeneinander zeigt.
   ========================================================================== */

/* Programmstand der Gestaltung - muss zu APP_STAND in app.js passen.
   Weicht er ab, meldet die App unter Daten > Bestand eine veraltete app.css. */
html { --css-stand: '2026-09-26.1'; }

/* --- Rotbraun: Rost, Holz, Herbstlaub (Voreinstellung) --- */
:root,
[data-schema="rotbraun"] {
  --bg: #f7f1ea;
  --karte: #fffdfa;
  --rand: #dcc9b6;
  --text: #2e211a;
  --dezent: #75604f;
  --akzent: #8f4527;
  --akzent-hell: #f6e7dc;
  --akzent-text: #ffffff;
  --warnung: #b3271b;
  --schatten: 0 1px 2px rgba(74,45,25,.10), 0 2px 8px rgba(74,45,25,.06);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-schema="rotbraun"] {
    --bg: #17120f;
    --karte: #211a15;
    --rand: #473729;
    --text: #ece2d8;
    --dezent: #ab9486;
    --akzent: #d0835e;
    --akzent-hell: #2c211a;
    --akzent-text: #17120f;
    --warnung: #e5806c;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Waldgrün: die erste Fassung --- */
[data-schema="gruen"] {
  --bg: #f3f4ef;
  --karte: #ffffff;
  --rand: #dcded4;
  --text: #22261f;
  --dezent: #656b5f;
  --akzent: #4a6b3d;
  --akzent-hell: #eaf0e4;
  --akzent-text: #ffffff;
  --warnung: #a33a2a;
  --schatten: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}

@media (prefers-color-scheme: dark) {
  [data-schema="gruen"] {
    --bg: #161814;
    --karte: #1e211c;
    --rand: #333730;
    --text: #e6e8e1;
    --dezent: #9aa094;
    --akzent: #7ba363;
    --akzent-hell: #262b22;
    --akzent-text: #12140f;
    --warnung: #d4705c;
    --schatten: 0 1px 2px rgba(0,0,0,.3);
  }
}

/* --- Schiefer: gedecktes Blaugrau, sachlich und kuehl --- */
[data-schema="schiefer"] {
  --bg: #eef1f4;
  --karte: #ffffff;
  --rand: #ccd5de;
  --text: #1c2530;
  --dezent: #5c6b7a;
  --akzent: #2f5d7c;
  --akzent-hell: #e2ecf3;
  --akzent-text: #ffffff;
  --warnung: #a8342a;
  --schatten: 0 1px 2px rgba(28,45,64,.10), 0 2px 8px rgba(28,45,64,.06);
}

@media (prefers-color-scheme: dark) {
  [data-schema="schiefer"] {
    --bg: #11161a;
    --karte: #1a2127;
    --rand: #303b45;
    --text: #dee6ed;
    --dezent: #91a0ad;
    --akzent: #74abd0;
    --akzent-hell: #1e2932;
    --akzent-text: #11161a;
    --warnung: #e0796a;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Sandstein: warme Ockertoene, Anmutung von Papier --- */
[data-schema="sandstein"] {
  --bg: #f7f1e3;
  --karte: #fffdf5;
  --rand: #e2d5ba;
  --text: #33291a;
  --dezent: #786a4d;
  --akzent: #7d5412;
  --akzent-hell: #f3e8cf;
  --akzent-text: #ffffff;
  --warnung: #a8392a;
  --schatten: 0 1px 2px rgba(70,55,25,.10), 0 2px 8px rgba(70,55,25,.06);
}

@media (prefers-color-scheme: dark) {
  [data-schema="sandstein"] {
    --bg: #16130d;
    --karte: #201c14;
    --rand: #3f3728;
    --text: #ece5d5;
    --dezent: #a99a7d;
    --akzent: #d9a44e;
    --akzent-hell: #2a2418;
    --akzent-text: #16130d;
    --warnung: #e08a6c;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Moos: Graugruen, zurueckhaltend und nordisch --- */
[data-schema="moos"] {
  --bg: #eef1ee;
  --karte: #fdfefd;
  --rand: #d1dad2;
  --text: #1f2723;
  --dezent: #5f6d65;
  --akzent: #366854;
  --akzent-hell: #e3ede8;
  --akzent-text: #ffffff;
  --warnung: #a5392b;
  --schatten: 0 1px 2px rgba(25,50,40,.10), 0 2px 8px rgba(25,50,40,.06);
}

@media (prefers-color-scheme: dark) {
  [data-schema="moos"] {
    --bg: #121614;
    --karte: #1a201d;
    --rand: #2f3934;
    --text: #e0e7e3;
    --dezent: #92a199;
    --akzent: #74b498;
    --akzent-hell: #1e2723;
    --akzent-text: #121614;
    --warnung: #de7b68;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Kiesel: neutral gehalten, damit die Vogelbilder die Farbe liefern --- */
[data-schema="kiesel"] {
  --bg: #f2f2f1;
  --karte: #ffffff;
  --rand: #d7d7d5;
  --text: #232426;
  --dezent: #64666a;
  --akzent: #3f4650;
  --akzent-hell: #e8e9eb;
  --akzent-text: #ffffff;
  --warnung: #a3352b;
  --schatten: 0 1px 2px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05);
}

@media (prefers-color-scheme: dark) {
  [data-schema="kiesel"] {
    --bg: #141516;
    --karte: #1d1e20;
    --rand: #323437;
    --text: #e4e5e7;
    --dezent: #96989c;
    --akzent: #adb7c3;
    --akzent-hell: #232528;
    --akzent-text: #141516;
    --warnung: #dd7a68;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Kaffee: tiefes Braun ohne Rotstich, cremiger Grund, klassisch --- */
[data-schema="kaffee"] {
  --bg: #f4efe8;
  --karte: #fffcf7;
  --rand: #ddd0c0;
  --text: #2b221a;
  --dezent: #706153;
  --akzent: #5d4030;
  --akzent-hell: #eee3d7;
  --akzent-text: #ffffff;
  --warnung: #a8352a;
  --schatten: 0 1px 2px rgba(60,42,25,.10), 0 2px 8px rgba(60,42,25,.06);
}

@media (prefers-color-scheme: dark) {
  [data-schema="kaffee"] {
    --bg: #15110d;
    --karte: #1f1913;
    --rand: #443729;
    --text: #eae0d4;
    --dezent: #a89482;
    --akzent: #c69a76;
    --akzent-hell: #291f17;
    --akzent-text: #15110d;
    --warnung: #e0836c;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Eiche: mittleres Graubraun, holzig und ruhig --- */
[data-schema="eiche"] {
  --bg: #f1eee9;
  --karte: #fdfcfa;
  --rand: #d7cfc3;
  --text: #282420;
  --dezent: #6b6459;
  --akzent: #6b5638;
  --akzent-hell: #eae4da;
  --akzent-text: #ffffff;
  --warnung: #a3372b;
  --schatten: 0 1px 2px rgba(50,44,32,.10), 0 2px 8px rgba(50,44,32,.06);
}

@media (prefers-color-scheme: dark) {
  [data-schema="eiche"] {
    --bg: #161412;
    --karte: #201d19;
    --rand: #3e3830;
    --text: #e7e3dd;
    --dezent: #a09a8f;
    --akzent: #c2a77f;
    --akzent-hell: #262220;
    --akzent-text: #161412;
    --warnung: #dd7f6b;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Karamell: helles, mildes Braun, freundlich und weich --- */
[data-schema="karamell"] {
  --bg: #faf4ec;
  --karte: #fffefb;
  --rand: #e6d8c5;
  --text: #3a2c1e;
  --dezent: #806c55;
  --akzent: #8a5726;
  --akzent-hell: #f7ead9;
  --akzent-text: #ffffff;
  --warnung: #ab372a;
  --schatten: 0 1px 2px rgba(80,60,35,.10), 0 2px 8px rgba(80,60,35,.06);
}

@media (prefers-color-scheme: dark) {
  [data-schema="karamell"] {
    --bg: #191410;
    --karte: #241d16;
    --rand: #48392b;
    --text: #eee4d7;
    --dezent: #b09b85;
    --akzent: #dda86f;
    --akzent-hell: #2e241a;
    --akzent-text: #191410;
    --warnung: #e5866c;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* --- Kastanie: tiefes, sattes Rotbraun, kräftiger als Rotbraun --- */
[data-schema="kastanie"] {
  --bg: #f6ece8;
  --karte: #fffbf9;
  --rand: #e0c9c1;
  --text: #2f1e1a;
  --dezent: #7a5b52;
  --akzent: #7b2d20;
  --akzent-hell: #f5e2dc;
  --akzent-text: #ffffff;
  --warnung: #c0392b;
  --schatten: 0 1px 2px rgba(70,30,20,.10), 0 2px 8px rgba(70,30,20,.06);
}

@media (prefers-color-scheme: dark) {
  [data-schema="kastanie"] {
    --bg: #171110;
    --karte: #211816;
    --rand: #46312c;
    --text: #ece0dc;
    --dezent: #ab908a;
    --akzent: #cf7f6b;
    --akzent-hell: #2b1e1a;
    --akzent-text: #171110;
    --warnung: #e88a78;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

/* Verborgenes bleibt verborgen, auch wenn eine Regel display setzt. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Kopf & Reiter ---------- */

.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  padding: .5rem .75rem;
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
.kopf-titel { display: flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.logo { font-size: 1.2rem; }
.kopf-kontext { color: var(--dezent); font-size: .82rem; margin-left: auto; text-align: right; }
.kopf .btn-installieren { align-self: center; background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.btn-installieren[hidden] { display: none; }

.reiter {
  position: sticky; top: 43px; z-index: 29;
  display: flex; gap: 0;
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
}
.reiter-btn {
  flex: 1 0 auto;
  padding: .6rem .8rem;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--dezent);
  font: inherit; font-size: .9rem; cursor: pointer;
  white-space: nowrap;
}
.reiter-btn.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }

main { max-width: 780px; margin: 0 auto; padding: .75rem; }
.ansicht { display: none; }
.ansicht.aktiv { display: block; }

/* ---------- Karten ---------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: .8rem;
  margin-bottom: .75rem;
}
.karte-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.karte-kopf h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.kopf-werkzeuge { display: flex; align-items: center; gap: .3rem; }
.dezent { color: var(--dezent); font-weight: 400; }
.hilfe { margin: 0 0 .6rem; color: var(--dezent); font-size: .85rem; }
.hilfe a { color: var(--akzent); }

/* ---------- Formularfelder ---------- */

.kontext-zeile { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .5rem; flex-wrap: wrap; }
.kontext-zeile:last-child { margin-bottom: 0; }
.feld { flex: 1 1 8rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.feld.voll { flex-basis: 100%; margin-bottom: .5rem; }
.feld-label { font-size: .72rem; color: var(--dezent); text-transform: uppercase; letter-spacing: .03em; }

input, select, textarea {
  font: inherit;
  /* Mindestens 16px: Darunter zoomen Handy-Browser beim Antippen automatisch
     in die Seite hinein, und die Darstellung springt. */
  font-size: max(16px, 1rem);
  padding: .45rem .5rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  min-width: 0; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
input[type="file"] { padding: .35rem; background: none; }

button { font: inherit; cursor: pointer; }

.btn-primaer {
  padding: .5rem .9rem; border: 0; border-radius: 7px;
  background: var(--akzent); color: var(--akzent-text); font-weight: 600;
}
.btn-klein {
  padding: .35rem .6rem; border: 1px solid var(--rand); border-radius: 7px;
  background: var(--bg); color: var(--text); font-size: .85rem;
}
.btn-klein.aktiv { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.btn-warnung {
  padding: .45rem .8rem; border: 1px solid var(--warnung); border-radius: 7px;
  background: none; color: var(--warnung);
}
.btn-jetzt {
  padding: .45rem .8rem; border: 1px solid var(--akzent); border-radius: 7px;
  background: var(--akzent-hell); color: var(--akzent); font-weight: 600; flex: 0 0 auto;
}
.btn-abbrechen {
  padding: .3rem .6rem; border: 1px solid var(--rand); border-radius: 7px;
  background: none; color: var(--dezent); font-size: .85rem;
}
.form-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.schalter { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .6rem; font-size: .9rem; }
.schalter input { width: auto; flex: 0 0 auto; margin-top: .15rem; }

/* ---------- Wetter ---------- */

.neu-zeile {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .5rem;
}
.neu-zeile input { flex: 1 1 10rem; }

.wetter-zeile {
  margin-top: .55rem; padding-top: .55rem;
  border-top: 1px dashed var(--rand);
  font-size: .85rem; color: var(--dezent);
  display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
}
.wetter-wert { color: var(--text); }
.wetter-wert strong { font-weight: 600; }

/* ---------- Artensuche ---------- */

.such-block { position: relative; }
.art-suche { font-size: 1.05rem; padding: .6rem .7rem; }
.such-loeschen {
  position: absolute; right: .4rem; top: .4rem;
  width: 1.9rem; height: 1.9rem; line-height: 1;
  border: 0; border-radius: 50%; background: var(--rand); color: var(--text); font-size: 1.1rem;
}
.treffer {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 20;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  max-height: 19rem; overflow-y: auto;
}
.treffer-zeile {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .5rem .65rem; border-bottom: 1px solid var(--rand); cursor: pointer;
}
.treffer-zeile:last-child { border-bottom: 0; }
.treffer-zeile.markiert { background: var(--akzent-hell); }
.treffer-de { font-weight: 600; }
.treffer-de mark { background: transparent; color: var(--akzent); font-weight: 700; }
.treffer-sci { color: var(--dezent); font-size: .8rem; font-style: italic; }
.treffer-meta { margin-left: auto; font-size: .72rem; color: var(--dezent); white-space: nowrap; }
.treffer-leer { padding: .7rem; color: var(--dezent); font-size: .88rem; }

/* ---------- Favoriten ---------- */

.favoriten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .4rem; margin-top: .6rem;
}
.fav-kachel {
  position: relative; overflow: hidden;
  padding: .55rem .5rem; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--bg); color: var(--text); text-align: left; line-height: 1.25;
}
.fav-kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.fav-name { font-weight: 600; font-size: .88rem; display: block; }
.fav-zusatz { font-size: .72rem; color: var(--dezent); }

/* Kachel mit Artenbild: Text steht unten auf einem Verlauf, damit er auf
   hellen wie dunklen Fotos lesbar bleibt. */
.fav-kachel.mit-bild {
  min-height: 6.2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: .45rem .55rem;
  border-color: rgba(0, 0, 0, .25);
  background-size: cover; background-position: center;
}
/* Der Verlauf deckt bis rund 45 % Höhe fast vollständig ab. Das ist nötig,
   weil weißes Gefieder (Schwan, Reiher, Storch) sonst mit dem weißen Text
   verschmilzt; darüber läuft er rasch aus, damit das Bild sichtbar bleibt. */
.fav-kachel.mit-bild::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.93) 0%, rgba(0,0,0,.90) 42%, rgba(0,0,0,.62) 58%,
    rgba(0,0,0,.22) 80%, rgba(0,0,0,0) 100%);
}
.fav-kachel.mit-bild .fav-name,
.fav-kachel.mit-bild .fav-zusatz {
  position: relative; text-shadow: 0 1px 3px rgba(0,0,0,.95);
}
.fav-kachel.mit-bild .fav-name { color: #fff; }
.fav-kachel.mit-bild .fav-zusatz { color: rgba(255,255,255,.88); }
.fav-kachel.mit-bild:hover { border-color: var(--akzent); background-color: transparent; }

/* Sammelnachweis der Kachelbilder - die Namensnennung darf nicht allein im
   Kurzhinweis stehen, den es auf dem Handy nicht gibt. */
.kachel-nachweise {
  margin-top: .4rem;
  font-size: .7rem;
  line-height: 1.35;
  color: var(--dezent);
}
.kachel-nachweise:empty { display: none; }
.kachel-nachweise a { color: var(--dezent); text-decoration: none; }
.kachel-nachweise a:hover { text-decoration: underline; }
.fav-kachel.mit-bild:hover::before {
  background: linear-gradient(to top,
    rgba(0,0,0,.9) 0%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.45) 58%,
    rgba(0,0,0,.1) 80%, rgba(0,0,0,0) 100%);
}

/* ---------- Anzahl-Eingabe ---------- */

.anzahl-karte { border-color: var(--akzent); }
.anzahl-kopf { display: flex; align-items: flex-start; gap: .65rem; }
.anzahl-text { flex: 1 1 auto; min-width: 0; }
.anzahl-art { font-size: 1.1rem; font-weight: 700; }
.anzahl-art-zeile { display: flex; align-items: center; gap: .4rem; }
.anzahl-sci { font-size: .8rem; color: var(--dezent); font-style: italic; }

.art-bild {
  flex: 0 0 auto; width: 5.5rem; height: 5.5rem;
  border-radius: 8px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--rand);
}
.art-bild a { display: block; width: 100%; height: 100%; }
.art-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-platzhalter {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--dezent); font-size: 1.1rem;
}
.bild-quelle {
  margin-top: .3rem; font-size: .7rem; color: var(--dezent); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bild-quelle a { color: var(--dezent); text-decoration: none; }
.bild-quelle a:hover { text-decoration: underline; }
.anzahl-hinweis { font-size: .82rem; color: var(--dezent); margin: .4rem 0 .1rem; min-height: 1.1em; }
.zahlenblock {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
  gap: .4rem; margin: .5rem 0;
}
.zahl-btn {
  padding: .7rem .2rem; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 1.05rem; font-weight: 600;
}
.zahl-btn:hover { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.anzahl-frei { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.anzahl-frei input[type="number"] { flex: 0 0 6rem; }
.anzahl-frei input[type="text"] { flex: 1 1 8rem; }

/* ---------- Listen & Tabellen ---------- */

.fenster-liste { display: flex; flex-direction: column; gap: .3rem; }
.fenster-eintrag {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem; border: 1px solid var(--rand); border-radius: 7px; background: var(--bg);
}
.fenster-anzahl {
  flex: 0 0 auto; min-width: 2.4rem; text-align: center;
  font-weight: 700; font-size: 1.05rem; color: var(--akzent);
}
.fenster-art { flex: 1 1 auto; min-width: 0; }
.fenster-art small { display: block; color: var(--dezent); font-size: .75rem; }
.fenster-plus {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--rand); background: var(--karte); color: var(--akzent); font-size: 1.1rem; line-height: 1;
}
.fenster-weg {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--rand); background: var(--karte); color: var(--dezent); font-size: 1rem; line-height: 1;
}
.fenster-weg:hover { color: var(--warnung); border-color: var(--warnung); }

.leer { color: var(--dezent); font-size: .88rem; padding: .5rem 0; }

.tabelle-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
th, td { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid var(--rand); white-space: nowrap; }
th { font-weight: 600; color: var(--dezent); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.null { color: var(--rand); }
tr:last-child td { border-bottom: 0; }
.art-sci { color: var(--dezent); font-style: italic; font-size: .78rem; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; margin-bottom: .7rem; }
.kennzahl { background: var(--bg); border: 1px solid var(--rand); border-radius: 8px; padding: .5rem .6rem; }
.kennzahl-wert { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.kennzahl-label { font-size: .72rem; color: var(--dezent); }

.balken-zeile { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; font-size: .82rem; }
.balken-label { flex: 0 0 4.5rem; color: var(--dezent); font-variant-numeric: tabular-nums; }
.balken-spur { flex: 1 1 auto; height: .7rem; background: var(--bg); border-radius: 4px; overflow: hidden; border: 1px solid var(--rand); }
/* display muss gesetzt sein: ein inline-Element ignoriert width und height,
   der Balken bliebe sonst unsichtbar. */
.balken-fuellung { display: block; height: 100%; background: var(--akzent); }
.balken-wert { flex: 0 0 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }

.schnellwahl { display: flex; gap: .35rem; flex-wrap: wrap; margin: .5rem 0 .7rem; }

/* ---------- Orte ---------- */

.ort-zeile {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .55rem; border: 1px solid var(--rand); border-radius: 7px;
  background: var(--bg); margin-bottom: .35rem;
}
.ort-info { flex: 1 1 auto; min-width: 0; }
.ort-name { font-weight: 600; }
.ort-koord { font-size: .75rem; color: var(--dezent); font-variant-numeric: tabular-nums; }
.ort-werkzeuge { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.ort-suche { display: flex; gap: .35rem; flex: 1 1 12rem; }
.ort-treffer { margin-top: .4rem; display: flex; flex-direction: column; gap: .25rem; }
.ort-treffer button {
  text-align: left; padding: .4rem .55rem; border: 1px solid var(--rand);
  border-radius: 7px; background: var(--bg); color: var(--text); font-size: .85rem;
}

/* ---------- Protokoll ---------- */

.prot-zeile {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .35rem .1rem; border-bottom: 1px solid var(--rand); font-size: .85rem;
}
.prot-zeit { flex: 0 0 3.2rem; color: var(--dezent); font-variant-numeric: tabular-nums; }
.prot-art { flex: 1 1 auto; min-width: 0; }
.prot-anzahl { flex: 0 0 2.5rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.prot-weg { flex: 0 0 auto; border: 0; background: none; color: var(--dezent); font-size: .95rem; padding: 0 .2rem; }
.prot-weg:hover { color: var(--warnung); }
.prot-notiz { color: var(--dezent); font-size: .78rem; }
.prot-nichtmax { opacity: .55; }

/* ---------- Fussleiste ---------- */

.fuss {
  max-width: 780px;
  margin: 0 auto;
  padding: .2rem .75rem 1rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
  color: var(--dezent);
  font-size: .82rem;
}
.fuss a { color: var(--dezent); }
.fuss a:hover { color: var(--akzent); }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: .55rem .9rem; border-radius: 8px; font-size: .88rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 100; max-width: 90vw; text-align: center;
}

@media (max-width: 480px) {
  .kopf-kontext { flex-basis: 100%; text-align: left; margin-left: 0; }
  .reiter { top: 61px; }
  .reiter-btn { font-size: .82rem; padding: .55rem .5rem; }
}