/* Outdoor Kitchen — schlichtes, outdoor-taugliches Design.
   Mobile-first, hoher Kontrast, grosse Touch-Ziele. Hell + dunkel. */

:root {
  color-scheme: light;
  --bg: #f3f1ea;
  --surface: #ffffff;
  --surface-2: #eceadf;
  --ink: #1b241f;
  --ink-soft: #566056;
  --line: #d9d6c8;
  --green: #2f5d45;
  --green-ink: #ffffff;
  --topbar: #2f5d45;
  --accent: #6f9a1f;         /* Hero-Lime (aus hero.png ~#82a834), auf Hell etwas dunkler für Kontrast */
  --accent-strong: #557d16;
  --accent-ink: #16220b;     /* dunkle Schrift auf Lime-Flächen */
  --amber: #c9781f;
  --amber-soft: #f5e6cf;
  --danger: #b23b2e;
  --cat-1: #2a78d6;
  --cat-2: #eb6834;
  --cat-3: #1baf7a;
  --cat-4: #eda100;
  --cat-5: #e87ba4;
  --cat-6: #008300;
  --cat-7: #4a3aa7;
  --cat-8: #e34948;
  /* Slots 9/10 (Hygiene, Wasser), 30.07.2026: gegen die Palette validiert, nicht geschaetzt.
     Worst Case benachbarter Segmente bleibt CVD ΔE 9.1 / normal 19.6 — identisch zum Bestand,
     das Nadeloehr ist weiterhin Bernstein↔Gruen. Reihenfolge im Balken deshalb
     ... Erste Hilfe, Hygiene, Wasser, Rucksack ...: Tuerkis neben Rosa waere fuer
     Rot-Blindheit nicht unterscheidbar (ΔE 0.7), neben Violett ist es sicher. */
  --cat-9: #9b4dca;
  --cat-10: #17a2b8;
  --radius: 16px;
  --tabbar-h: 64px;
  --shadow: 0 2px 10px rgba(20, 37, 29, .08);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Premium-Dark — Default der App; „auto" folgt dem System (kein data-theme) */
:root[data-theme="dark"],
:root:not([data-theme]) {
  color-scheme: dark;
  --bg: #0e1310;
  --surface: #161d18;
  --surface-2: #202a23;
  --ink: #eef2ee;
  --ink-soft: #9daaa0;
  --line: #29352e;
  --green: #3d7a5b;
  --topbar: #0c120f;
  --accent: #9ccf4a;         /* Hero-Lime, auf Dunkel voll leuchtend (wie im Hero-Bild) */
  --accent-strong: #b6e068;
  --accent-ink: #16220b;
  --amber: #e8a13a;
  --amber-soft: #33291a;
  --danger: #f0776b;         /* auf Dunkel aufgehellt — #b23b2e war zu kontaktarm */
  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #c98500;
  --cat-5: #d55181;
  --cat-6: #008300;
  --cat-7: #9085e9;
  --cat-8: #e66767;
  /* eigene Stufen gegen die dunkle Flaeche geprueft, keine Spiegelung der Hell-Werte:
     dort liegt das Helligkeitsband bei L 0.48–0.67, die hellen Toene fallen durch.
     Abstand zum aufgehellten Violett von "Sonstiges" (#9085e9): normal ΔE 15.9. */
  --cat-9: #7d4bb0;
  --cat-10: #22a0ad;
  --shadow: 0 2px 16px rgba(0, 0, 0, .5);
}
/* „auto" ohne System-Dark -> Hell zurücksetzen */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f3f1ea; --surface: #ffffff; --surface-2: #eceadf; --ink: #1b241f;
    --ink-soft: #566056; --line: #d9d6c8; --topbar: #2f5d45; --accent: #6f9a1f;
    --accent-strong: #557d16; --amber: #c9781f; --amber-soft: #f5e6cf; --danger: #b23b2e;
    --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100;
    --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #4a3aa7; --cat-8: #e34948;
    --cat-9: #9b4dca; --cat-10: #17a2b8;
    --shadow: 0 2px 10px rgba(20, 37, 29, .08);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
}

h1, h2, h3 { line-height: 1.2; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---- Topbar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--topbar);
  color: var(--green-ink);
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: var(--shadow);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.brand {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-link { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 1px; color: inherit; text-decoration: none; }
.brand-mark { width: 40px; height: auto; display: inline-block; flex: 0 0 auto; }
.brand .wordmark { font-weight: 800; letter-spacing: -.01em; }
.brand .gift { color: #9ccf4a; }
.brand-claim {
  font-size: .78rem; font-weight: 500; line-height: 1.15;
  color: rgba(255, 255, 255, .58); white-space: nowrap;
  padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .2);
}
/* schmales Handy: Claim rutscht unter die Wortmarke, Trenner weg */
@media (max-width: 430px) {
  .brand-claim { padding-left: 0; border-left: 0; flex-basis: 100%; }
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.install-btn {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .9rem;
  font-weight: 600;
}
.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 1.1rem;
  text-decoration: none;
  /* Die Klasse sitzt auf einem <a> UND auf einem <button> (Rueckmeldung) —
     ohne diese Zeilen erbt der Knopf Systemfarbe und Systemschrift. */
  color: inherit;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}

/* ---- View ---- */
.view {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 24px;
}

/* ---- Suche + Filter ---- */
.searchbar { position: relative; margin-bottom: 12px; }
.searchbar input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
/* Scroll-Schatten: zeigt an, dass rechts (oder links) noch Chips stehen. Die
   Kategorie-Reihe war rechts wortlos abgeschnitten ("Kleidu…") — man sah nicht,
   dass man wischen kann. Die "local"-Ebenen decken den Schatten am Rand ab,
   sobald nichts mehr zu scrollen ist; ohne Ueberlauf ist nichts zu sehen. */
.chips {
  background:
    linear-gradient(to right, var(--bg) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 40%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 22%, transparent), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 22%, transparent), transparent) right center / 14px 100% no-repeat scroll;
}
/* Einstieg in die beiden Kataloge (Rezepte | Ausruestung) */
.osearch {
  font-size: .7rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); cursor: help; white-space: nowrap;
}
.catalog-nav { margin-bottom: 4px; }
.catalog-nav .chip[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ---- Rezept-Karten ---- */
.card-list { display: grid; gap: 12px; }
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.card:active { transform: scale(.995); }
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card h3 { margin: 0 0 4px; font-size: 1.12rem; }
.card .summary { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: .82rem;
  color: var(--ink-soft);
}
.card-meta .m { display: inline-flex; align-items: center; gap: 4px; }

.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge.veg { background: var(--amber-soft); color: var(--amber); }
.badge.own { background: var(--green); color: #fff; }
.badge.cat { background: var(--surface-2); color: var(--ink-soft); }

/* ---- Rezept-Detail ---- */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 10px;
  padding: 10px 0;
  min-height: 44px;
}
.detail h2 { margin: 0 0 4px; font-size: 1.5rem; }
.detail .lead { color: var(--ink-soft); margin: 0 0 16px; }

.dry-box {
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.dry-box h3 {
  margin: 0 0 10px;
  font-size: .95rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.dry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dry-grid .kv { display: flex; flex-direction: column; }
.dry-grid .k { font-size: .78rem; color: var(--ink-soft); }
.dry-grid .v { font-size: 1.15rem; font-weight: 700; }

.doerr-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  color: var(--ink);
  text-decoration: none;
}
.doerr-cta:hover { background: var(--accent); color: var(--accent-ink); }
.doerr-cta .dc-body { font-size: .92rem; }
.doerr-cta .dc-body b { color: var(--accent); }
.doerr-cta:hover .dc-body b { color: var(--accent-ink); }
.doerr-cta .dc-arrow { font-size: 1.3rem; color: var(--accent); flex: none; }
.doerr-cta:hover .dc-arrow { color: var(--accent-ink); }

section.block { margin-bottom: 22px; }
section.block > h3 {
  font-size: 1.05rem;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}

/* Portionsrechner */
.portion {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.portion .lbl { font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.stepper button {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
}
.stepper .count { min-width: 2ch; text-align: center; font-weight: 700; font-size: 1.15rem; }

/* Zutaten */
.ing-section h4 {
  margin: 14px 0 6px;
  font-size: .9rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .4px;
}
ul.ings { list-style: none; margin: 0; padding: 0; }
ul.ings li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
ul.ings li:last-child { border-bottom: none; }
ul.ings .amt { flex: 0 0 auto; min-width: 5.5ch; font-weight: 700; font-variant-numeric: tabular-nums; }
ul.ings .nm { flex: 1; }
ul.ings .prep { color: var(--ink-soft); font-size: .88rem; }
ul.ings .opt { color: var(--amber); font-size: .8rem; font-weight: 600; }

/* Schritte / Phasen */
.phase { margin-bottom: 16px; }
.phase-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 8px;
}
.phase-pill {
  font-size: .72rem;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
}
.phase-pill.zuhause { background: #4a6fb0; }
.phase-pill.doerren { background: var(--amber); }
.phase-pill.trail { background: var(--green); }
ol.steps { margin: 0; padding-left: 0; list-style: none; counter-reset: s; }
ol.steps li {
  position: relative;
  padding: 4px 0 12px 40px;
  counter-increment: s;
}
ol.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}
ol.steps .dur { color: var(--ink-soft); font-size: .82rem; margin-top: 2px; }

.note {
  background: var(--surface);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ---- Buttons / Formulare ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.amber { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 12px; font-size: .9rem; min-height: 44px; }
.btn:disabled { opacity: .5; }

.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .95rem; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}
.form-row textarea { min-height: 84px; resize: vertical; }
/* minmax(0,1fr) statt 1fr: sonst erzwingt die intrinsische Mindestbreite eines
 * Kindes (z. B. input[type=date] mit Kalender-Icon) breitere Spalten als der
 * Bildschirm hat, und die ganze Seite scrollt seitlich. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }

.dyn-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.dyn-row input, .dyn-row select {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}
.dyn-row .rm {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--danger);
  font-size: 1.2rem;
}
/* Spaltenkoepfe im Strombedarf: gleiche flex-Werte wie die Eingabezeilen, damit
 * sie ueber den Feldern stehen. Ohne sie war "4500 / 0.5 / 1" nicht zu lesen. */
.dyn-row.strom-kopf { margin-bottom: 2px; }
.strom-kopf span {
  min-width: 0; padding: 0 4px;
  font-size: .72rem; color: var(--ink-soft); line-height: 1.2;
  overflow-wrap: anywhere;
}
.strom-kopf .rm-platz { flex: 0 0 44px; padding: 0; }

/* ---- Katalog-Zeile ---- */
.cat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.cat-row .info { flex: 1; min-width: 0; }
.cat-row h3 { margin: 0 0 2px; font-size: 1.02rem; }
.cat-row .sub { margin: 0; color: var(--ink-soft); font-size: .85rem; }

/* ---- Diverses ---- */
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  margin: 4px 0 12px;
}
.section-title h2 { margin: 0; font-size: 1.3rem; }
/* Ab drei Aktionen (Ausruestung: Import, Verkaufen, Finden) passt die Zeile auf
 * schmalen Screens nicht mehr neben die Ueberschrift — dann Ueberschrift oben,
 * Aktionen darunter in einer eigenen Reihe, statt sie ueber den Titel zu schieben. */
@media (max-width: 480px) {
  .section-title > h2 { flex: 1 0 100%; }
  .section-title > div { display: flex; gap: 8px; flex-wrap: wrap; }
}
.count-pill { color: var(--ink-soft); font-size: .9rem; }

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 48px 20px;
}
.empty .big { font-size: 2.4rem; margin-bottom: 8px; }
.empty .big .ic { width: 46px; height: 46px; color: var(--ink-soft); stroke-width: 1.6; }
.empty p { margin: 6px 0 16px; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.stat .n { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.stat .l { font-size: .78rem; color: var(--ink-soft); }

/* ---- Rucksack-Gauge (Zielgewicht-Fuellstand) ---- */
.gauge-box {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.gauge-wrap { position: relative; width: 84px; flex: 0 0 auto; }
.bp-svg { width: 100%; height: auto; display: block; }
/* non-scaling-stroke: Strichstaerke in Screen-px, unabhaengig von der Gauge-Groesse
   (App 84px, Prototyp 220px, gleicher viewBox 640x1280). */
.bp-outline { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bp-fill { fill: var(--fill-color, var(--accent)); transition: y .6s cubic-bezier(.22,1,.36,1), height .6s cubic-bezier(.22,1,.36,1), fill .4s ease; }
.bp-svg.no-anim .bp-fill { transition: none; }
.gauge-readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.gauge-pct { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.25); color: var(--ink); }
.gauge-info { flex: 1; min-width: 0; }
.gauge-info .n { font-size: 1.1rem; font-weight: 800; }
.gauge-info .l { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }

.trip-cat-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); margin-top: 10px; }
.trip-cat-bar-seg { height: 100%; flex: 0 0 auto; width: 0; transition: width .6s cubic-bezier(.22,1,.36,1); }
.trip-cat-bar-seg:not(:last-child) { border-right: 2px solid var(--surface); }
.trip-cat-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.trip-cat-legend-item { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--ink-soft); }
.trip-cat-legend-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* ---- Sync-Bar (Katalog) ---- */
.sync-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.sync-info { flex: 1; font-size: .9rem; line-height: 1.35; }
.sync-sub { color: var(--ink-soft); font-size: .82rem; }

/* ---- Onboarding (Erststart, Assistent, Beispieldaten) ---- */
.start-wrap { max-width: 480px; margin: 12px auto 0; display: flex; flex-direction: column; gap: 12px; }
.start-wrap h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.start-wrap > .summary { margin: 0 0 6px; }
.start-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; min-height: 72px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.start-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.start-card.primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.start-ico { flex: 0 0 auto; color: var(--accent); display: inline-flex; }
.start-ico svg { width: 26px; height: 26px; }
.start-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.start-body strong { font-size: 1.02rem; }
.start-body span { color: var(--ink-soft); font-size: .88rem; }
.assist-steps strong { color: var(--accent); }
.assist-gear { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.assist-gear .gear-check { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.assist-gear .assist-w { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.assist-prov { list-style: none; margin: 0 0 10px; padding: 0; }
.assist-prov li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.assist-prov .btn { margin-left: auto; }
.onb-banner { margin-bottom: 12px; border-color: var(--accent); }
.cat-highlight { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
@keyframes onb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  50% { box-shadow: 0 0 0 10px transparent; }
}
.pulse { animation: onb-pulse 1.2s ease-out 3; border-color: var(--accent) !important; }
/* Gerade gespeicherter Gegenstand: einmal sichtbar machen, wo er gelandet ist */
@keyframes row-flash {
  0%, 60% { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
  100% { border-color: var(--line); background: var(--surface); }
}
.gear-row.flash { animation: row-flash 2.4s ease-out 1; }
/* Feld mit Einheit dahinter ("1 Stück"): sagt, was die Zahl bedeutet, ohne
 * eine eigene Zeile fuer eine Beschriftung */
.unit-field { position: relative; display: flex; min-width: 0; }
.unit-field input { width: 100%; padding-right: 52px !important; }
.unit-field .unit {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: .8rem; color: var(--ink-soft); pointer-events: none;
}

/* ---- Sprungnavigation im Trip (sticky unter der Topbar) ---- */
.trip-jump {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  z-index: 15;
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 8px 2px;
  margin: 4px -2px 10px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  scrollbar-width: none;
}
.trip-jump::-webkit-scrollbar { display: none; }
.trip-jump a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.trip-jump a:active { color: var(--ink); border-color: var(--accent); }
/* Sprungziele: unter Topbar + Pill-Leiste einlanden, nicht darunter verschwinden */
#gpxBox, #tripItems, #provBox, #journalCard, #galleryCard, #tripShareRow,
.gear-cat[id] {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 122px);
}

/* ---- Ausruestung: Suche + Sprungleiste kleben gemeinsam oben ----
 * Zwei getrennte sticky-Elemente lagen uebereinander; als ein Block bleibt die
 * Suche beim Scrollen durch 50 Gegenstaende erreichbar. */
.gear-sticky {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  z-index: 15;
  margin: 8px -2px 0; padding: 8px 2px 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gear-sticky .trip-jump { position: static; margin: 0 -2px; padding: 8px 2px; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.gear-searchrow { display: flex; gap: 8px; align-items: stretch; }
.gear-searchrow .btn { flex: 0 0 auto; white-space: nowrap; }
.gear-sticky + #gearNone + #gearList .gear-cat[id],
#gearList .gear-cat[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 190px); }
.gear-flat .gear-row { margin-bottom: 8px; }
/* "+ Gegenstand" in der Suchzeile: gleiche Hoehe wie das Suchfeld */
.gear-searchrow #gAddOpen { flex: 0 0 auto; white-space: nowrap; min-height: 46px; padding: 0 16px; }
.trip-jump a.jump-sort { color: var(--ink); border-color: var(--accent); gap: 6px; }
/* ⋯-Menue im Kopf */
.section-title:has(> .more-menu), .section-title.sect-row { flex-wrap: nowrap; align-items: center; }
.section-title:has(> .more-menu) > h2, .section-title.sect-row > h2 { flex: 1 1 auto; min-width: 0; }
.section-title.sect-row > .btn { flex: 0 0 auto; white-space: nowrap; }
.section-title .more-menu { position: relative; margin-left: auto; }
.more-menu > summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; justify-content: center; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 35;
  min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.more-list > a, .more-list > button {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px; border-radius: 8px;
  background: none; border: none; color: var(--ink); font: inherit; font-weight: 600;
  text-align: left; cursor: pointer; text-decoration: none;
}
.more-list > a:hover, .more-list > button:hover { background: var(--surface-2, rgba(127,127,127,.08)); }
/* Blatt ueber der Tab-Leiste (30), aber unter dem Toast (50): bei der
 * Serienerfassung muss die Meldung "gespeichert in ..." sichtbar bleiben. */
.fb-overlay.gear-sheet-ov { z-index: 40; }
.fb-overlay[hidden] { display: none; }
.gear-sheet-ov .fb-sheet { padding-bottom: calc(18px + var(--safe-b)); }
.gear-sheet-ov .gear-form.gear-add { border: none; background: none; padding: 0; margin: 0; }
.gear-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gear-sheet-head h3 { margin: 0; font-size: 1.1rem; }
.gear-sheet-head .btn { min-width: 44px; min-height: 44px; font-size: 1.4rem; }

/* ---- Reisebericht + Foto-Galerie ---- */
.journal-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.journal-entry { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.journal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journal-date { font-weight: 700; font-size: .88rem; color: var(--accent); }
.journal-acts { display: flex; gap: 4px; }
.journal-acts .btn { min-height: 34px; padding: 5px 8px; }
.journal-text { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; overflow-wrap: break-word; }
.journal-form { display: flex; flex-direction: column; gap: 8px; }
.journal-form input[type="date"], .journal-form textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font-size: 1rem; font-family: inherit;
}
.journal-form input[type="date"] { align-self: flex-start; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.gallery-thumb { position: relative; margin: 0; }
.gallery-thumb img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; display: block;
}
.gallery-del {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border: none; border-radius: 50%;
  background: rgba(10, 14, 11, .72); color: #fff; font-size: 1rem; line-height: 1;
  cursor: pointer;
}
/* ---- Rueckmeldung ---- */
.fb-overlay {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 12, 10, .72);
  padding: 0;
}
@media (min-width: 700px) { .fb-overlay { align-items: center; padding: 20px; } }
.fb-sheet {
  background: var(--bg); color: var(--ink);
  width: min(560px, 100%); max-height: 92dvh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--line);
}
@media (min-width: 700px) { .fb-sheet { border-radius: 16px; padding-bottom: 18px; } }
.fb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.fb-cat { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.fb-cat:has(input:checked) { border-color: var(--accent); background: var(--surface-2, rgba(127,127,127,.08)); }
/* font: inherit — sonst rendert der Browser die Textfelder in Monospace, und der
   Dialog sieht aus wie aus einer anderen App. */
.fb-sheet textarea, .fb-sheet input[type="email"] { width: 100%; font: inherit; }
.fb-sheet textarea { min-height: 120px; resize: vertical; }
.fb-ctx { margin: 8px 0 0; padding: 8px 10px; background: var(--surface-2, rgba(127,127,127,.08));
  border-radius: 8px; font-size: .8rem; white-space: pre-wrap; overflow-x: auto; }
.fb-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.fb-actions .btn { min-height: 44px; }

.photo-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; cursor: zoom-out;
  background: rgba(8, 12, 10, .93);
}
.photo-overlay[hidden] { display: none; }
.photo-overlay img { max-width: 94vw; max-height: 94vh; border-radius: 12px; }

/* ---- OSM-Karte (Zwei-Stufen-Zustimmung) ---- */
.osm-slot { margin: 10px 0; }
.map-consent {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
}
.osm-map {
  height: min(56vh, 420px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  /* Leaflet-Tiles sind hell — im Dark-Theme nicht invertieren, Karte bleibt Karte */
  color-scheme: light;
}

/* Antippbare Kennzahlen mit Kurz-Erklaerung (Toast) */
.stat[data-hint] { cursor: pointer; }
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px;
  border-radius: 50%; border: 1px solid var(--ink-soft);
  color: var(--ink-soft); font-size: .62rem; font-style: italic; font-weight: 700;
  vertical-align: 1px;
}
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.dot.on { background: var(--accent); }
.dot.off { background: #b9603a; }

/* ---- Ausrüstung ---- */
.gear-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 12px 4px;
  margin-bottom: 12px;
}
.gear-form .dyn-row { margin-bottom: 8px; }
.gear-form input, .gear-form select {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  min-width: 0;
}
/* Schmale Screens (UX-Audit P2.8): Formular entzerren — Name voll,
 * Gewicht+Menge nebeneinander, Kategorie eigene Zeile, Hinzufuegen volle Breite.
 * display:contents loest die dyn-rows auf, das Grid ordnet per ID neu. */
/* NUR das Ausruestungs-Formular (.gear-add). Die Trip-Formulare benutzen
 * .gear-form ebenfalls, aber als reine Karte — stand das Grid auch fuer sie,
 * landeten Name und Datumspaar NEBENeinander und die Seite wurde 490 px breit
 * (horizontales Scrollen auf jedem Handy, s. Handbuch-Screenshot trip-neu). */
@media (max-width: 480px) {
  .gear-form.gear-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .gear-form.gear-add .dyn-row { display: contents; }
  .gear-form.gear-add #gName   { grid-area: 1 / 1 / 2 / 3; }
  .gear-form.gear-add #gWeight { grid-area: 2 / 1 / 3 / 2; }
  .gear-form.gear-add .unit-field { grid-area: 2 / 2 / 3 / 3; }
  .gear-form.gear-add #gCatSel,
  .gear-form.gear-add #gCat    { grid-area: 3 / 1 / 4 / 3; }
  .gear-form.gear-add #gNote   { grid-area: 4 / 1 / 5 / 3; }
  .gear-form.gear-add #gCapacity { grid-area: 5 / 1 / 6 / 3; }
  /* Alles Weitere (Checkbox, Hinweis, Abbrechen, Speichern) folgt in DOM-
   * Reihenfolge. Speichern stand bis 13.10.2026 fest in Zeile 4 direkt unter
   * der Kategorie und wurde fuer deren Knopf gehalten. */
  .gear-form.gear-add > label, .gear-form.gear-add > p,
  .gear-form.gear-add #gCancel, .gear-form.gear-add #gSave { grid-column: 1 / 3; }
  .gear-form.gear-add #gSave   { min-height: 46px; }
}

.prov-add {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.prov-add summary { font-weight: 600; cursor: pointer; }
.prov-add select, .prov-add input {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  min-width: 0;
}

/* Gear-Picker im Trip: Suchfeld + Sortier-Umschalter in einer Zeile. Der
   Umschalter darf nicht schrumpfen, sonst bricht die Beschriftung. */
.pick-tools { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.pick-tools .btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
.pick-group { margin-bottom: 14px; }
.pick-cat-head { margin-top: 4px; }
.prov-add .pick-row[hidden], .prov-add .pick-group[hidden] { display: none; }

.gear-cat { margin-bottom: 16px; }
.gear-cat-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-soft);
  padding: 0 4px 6px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 8px;
}
.gear-cat-sum { font-variant-numeric: tabular-nums; }
/* Kategorie umbenennen/zusammenlegen — unaufdringlich im Gruppenkopf, aber mit
   voller Tap-Flaeche (44 px) wie die Aktionen an der Zeile. */
.cat-rename-btn {
  width: 44px; height: 44px; margin: -14px -10px -14px 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-soft);
  border-radius: 8px; cursor: pointer; opacity: .6;
}
.cat-rename-btn:hover, .cat-rename-btn:focus-visible { opacity: 1; color: var(--ink); }
.cat-rename-btn svg { width: 15px; height: 15px; }
.cat-bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 0 4px 10px; }
.cat-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }

/* ---- Einstellungen (Sprache/Theme) ---- */
.settings-card { display: grid; gap: 12px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-row select {
  flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 1rem;
}

.gear-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.gear-row.unpacked { opacity: .55; }
/* Trefferflaeche 44px (WCAG 2.5.8) ohne das Kaestchen aufzublasen: das Label
   traegt die Flaeche. accent-color, weil die Systemfarbe Blau war - das
   einzige blaue Element in einer durchgehend gruenen App, ausgerechnet an der
   Stelle, die man am haeufigsten antippt (UX-Audit 01.08.). */
.gear-check {
  flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  justify-content: center;
  margin: -4px 0;
}
.gear-check input { width: 24px; height: 24px; accent-color: var(--accent); }
/* min-width haelt dem Namen Platz frei; passen die Aktionen daneben nicht mehr,
   rutschen sie in die zweite Zeile, statt den Namen ueber drei Zeilen zu
   brechen ("Gaskartusche 230 g", "Wanderschuhe - 820 g - am Koerper"). */
.gear-main { flex: 1 1 auto; min-width: 45%; }
.gear-name { font-weight: 600; }
.gear-sub { color: var(--ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.gear-actions { display: flex; align-items: center; gap: 2px; margin: -2px 0 -2px auto; }
/* Loeschen sass direkt neben "+": ein Danebentippen kostete die Zeile. */
.gear-actions button[data-act="del"] { margin-left: 10px; }
.gear-actions button {
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
  border-radius: 8px;
}
.gear-actions .qn { min-width: 1.6ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Drei verschiedene Bedeutungen teilten sich bis 18.08.2026 den Namen
 * .worn-on (geteilt / Traeger bin ich / getragen) und zwei den Namen
 * .worn-badge. Gleiches Aussehen, aber getrennt benannt: sonst aendert ein
 * Eingriff an einer Bedeutung stillschweigend die beiden anderen mit. */
.gear-actions button.is-worn,
.gear-actions button.is-shared,
.gear-actions button.carrier-me { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.badge-worn, .badge-shared { color: var(--accent); font-weight: 600; }
.gear-actions button.carrier-chip { font-size: .68rem; font-weight: 800; letter-spacing: .02em; }

/* ---- Ausruestungszeile zum Aufklappen (.gr, nur im Inventar) ----
 * Zu: Name, Notiz, Gewicht rechts -- eine Zeile wie in einer Tabelle.
 * Auf: beschriftete Aktionen darunter. Die Packliste im Trip nutzt .gear-row
 * ohne .gr und bleibt davon unberuehrt. */
.gear-row.gr { padding: 0; display: block; }
/* Im zweispaltigen Raster (Desktop) streckte die aufgeklappte Zeile ihre
 * Nachbarin auf dieselbe Hoehe -- leere Karte daneben. */
.gear-cat .gear-row.gr { align-self: start; }
.gr-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 8px 12px;
  background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: 12px;
}
.gr-head .gear-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gr-head .gear-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-w { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-chev { flex: 0 0 auto; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; transition: transform .15s; }
.gear-row.gr.open .gr-chev { transform: rotate(90deg); }
.gear-row.gr.open .gr-head .gear-sub { white-space: normal; }
.gear-row.gr .gr-actions { display: none; }
.gear-row.gr.open .gr-actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 4px 10px 10px;
  border-top: 1px solid var(--line);
}
.gear-row.gr.open { border-color: var(--accent); }
.gr-actions > button {
  width: auto; min-height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface-2, transparent);
  font-size: .88rem; font-weight: 600;
}
.gr-actions > button .ic { width: 16px; height: 16px; }
.gr-actions button[data-act="del"] { margin-left: auto; color: var(--danger); }
.gr-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.gr-qty button { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) { .gr-chev { transition: none; } }

/* "Was ist dein ...?" im Katalog: alle Arten sichtbar, nicht seitlich versteckt */
.art-frage { border-color: var(--accent); }
.art-frage .chips { flex-wrap: wrap; overflow: visible; }

/* ---- Trip: Strom-Karte ---- */
.strom-karte { display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.strom-karte.ok { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.strom-karte.warn { border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); }
.strom-karte-kopf { display: flex; align-items: center; gap: 6px; }
.strom-karte .btn { margin-top: 4px; }

/* ---- Neuer Trip: Wer geht mit? ---- */
.wer-geht { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0 0 12px; }
.wer-geht legend { padding: 0 6px; font-weight: 600; font-size: .9rem; }
.wer-geht .check { margin: 4px 0; }

/* ---- Trip: Planen (zuhause lassen) und Packmodus ---- */
.gear-actions button.is-home { color: var(--amber, #d9a441); background: color-mix(in srgb, var(--amber, #d9a441) 16%, transparent); }
.badge-home { color: var(--amber, #d9a441); font-weight: 600; }
/* Mit den beschrifteten Knoepfen wurde die Zeile breiter und drueckte die
 * anderen auf 42 px (ux-regress: Tap-Ziele) -- nicht schrumpfen, lieber umbrechen. */
#tripItems .gear-actions { flex-wrap: wrap; justify-content: flex-end; }
#tripItems .gear-actions > button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
/* Haus und T-Shirt mit Wort: das T-Shirt allein las niemand als "am Koerper" */
.gear-actions button.lbl { width: auto; padding: 0 8px; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; font-size: .62rem; font-weight: 600; line-height: 1.1; }
.gear-actions button.lbl .ic { width: 18px; height: 18px; }
.pack-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -2px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pack-mode {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto;
  background: var(--bg); color: var(--ink);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(var(--safe-b) + 16px);
}
.pack-mode > * { max-width: 720px; margin-left: auto; margin-right: auto; }
body.pack-open { overflow: hidden; }
.pack-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: calc(-12px - env(safe-area-inset-top, 0px)); background: var(--bg); padding: 8px 0; z-index: 1; }
.pack-head h2 { margin: 0; }
.pack-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 2px auto 10px; }
.pack-bar span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.pack-intro { margin: 0 auto 8px; }
.pack-zone { margin: 18px auto 0; }
.pack-zone h3 { margin: 0 0 2px; font-size: 1rem; }
.pack-zone > .summary { margin: 0 0 8px; font-size: .84rem; }
.pack-item {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer;
}
.pack-item input { width: 22px; height: 22px; accent-color: var(--accent); flex: 0 0 auto; }
.pack-item .pack-name { flex: 1 1 auto; font-weight: 600; }
.pack-item .pack-w { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#packMode .pack-item:has(input:checked) { opacity: .55; }
#packMode .pack-item:has(input:checked) .pack-name { text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .pack-bar span { transition: none; } }

/* Zwei Wege, zusammen packen zu koennen — die Wahl haengt an genau einer Frage:
 * benutzt der Tourpartner die App selbst? Bis 18.08.2026 standen beide Wege
 * unbeschriftet untereinander, und der zweite hatte nicht einmal einen Rahmen:
 * .pool-box war ein Klassenname ganz ohne Regel. Wer das las, musste die Regel
 * selbst erraten (Meldung Joerg beim Testen). */
.weg-frage { font-size: .86rem; }

/* Drei gleich laute Rahmen ineinander (Karte > Weg > Pool-Kasten) trennten die
 * beiden Wege optisch kaum (Meldung Joerg). Jetzt hat der Weg eine eigene
 * Flaeche mit farbiger Kante, der Pool-Kasten darin verliert seinen Rahmen und
 * wird nur noch eingerueckt — eine Ebene weniger Rahmen, eine mehr Kontrast. */
.weg {
  border: 1px solid var(--line, rgba(128,128,128,.28));
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 4px;
  background: color-mix(in srgb, var(--surface-2, transparent) 55%, transparent);
}
/* Der zweite Weg trennt sich zusaetzlich ueber die Kantenfarbe. Amber ist in
 * dieser App schon die Farbe fuer "jemand anderes" (carrier-other) — dieselbe
 * Bedeutung, hier auf Abschnittsebene. */
.weg + .weg { border-left-color: var(--amber, #d9a441); }
.weg-kopf {
  margin: 0 0 6px; font-weight: 700; font-size: .98rem;
  display: flex; align-items: center; gap: 8px;
}
.weg-kopf .ic { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent); }
.weg + .weg .weg-kopf .ic { color: var(--amber, #d9a441); }
/* Trennzeichen zwischen den Wegen: sie sind ein Entweder-oder, keine Liste. */
.weg-oder {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 6px; color: var(--ink-soft); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.weg-oder::before, .weg-oder::after {
  content: ""; flex: 1; height: 1px; background: var(--line, rgba(128,128,128,.28));
}
.pool-box {
  border: none; border-radius: 10px;
  padding: 10px 12px; margin: 0 0 10px;
  background: color-mix(in srgb, var(--ink, #888) 7%, transparent);
}
/* Unbesetzt: Personen-Zeichen blass und gestrichelt umrandet — ein leerer Platz,
 * kein Zustand. Sobald jemand zugeteilt ist, steht dort sein Kuerzel. */
.gear-actions button.carrier-frei { opacity: .45; border: 1px dashed var(--line, rgba(128,128,128,.45)); }
.gear-actions button.carrier-frei .ic { width: 17px; height: 17px; }
/* Gewicht im Filter-Knopf: leiser als die Beschriftung, damit der Knopf zuerst
 * sagt WEN er meint und erst danach wie schwer. */
.tf-w { opacity: .7; font-weight: 500; font-variant-numeric: tabular-nums; }
.gpx-card { margin: 0 0 14px; padding: 14px 16px; }
.gpx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gpx-name { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.gpx-stats { margin-bottom: 8px; }
.gpx-profile { display: block; width: 100%; height: 120px; }
.gpx-map { display: block; width: 100%; max-height: 220px; margin: 0 0 6px; }
.gpx-axis { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .78rem; margin-top: 2px; }
.gpx-name { cursor: pointer; }
.gpx-name .gpx-name-edit { width: 13px; height: 13px; opacity: .45; flex: 0 0 auto; }
.gpx-stages { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.gpx-stage {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border: 1px solid var(--line, rgba(128,128,128,.25));
  border-radius: 10px; background: transparent; color: inherit; font: inherit;
  font-size: .85rem; cursor: pointer;
}
.gpx-stage:hover { border-color: var(--accent); }
.gpx-stage.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gpx-stage-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
}
.gpx-stage-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gpx-stage-stats { flex: 0 0 auto; color: var(--ink-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
.gpx-section { margin-top: 10px; }
.gpx-sec-l { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--ink-soft); }
.gpx-sec-l input[type=range] { width: 100%; accent-color: var(--accent); }
.gpx-section select { font-size: .85rem; min-width: 0; }
.gear-actions button.carrier-other { color: var(--amber, #d9a441); background: color-mix(in srgb, #d9a441 14%, transparent); }
.trip-unassigned { color: #d9a441; font-weight: 600; }

/* ---- Ausrüstungs-Katalog ---- */
.art-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.art-head { display: flex; gap: 12px; align-items: flex-start; }
.art-head .info { flex: 1; min-width: 0; }
.art-head h3 { margin: 0 0 2px; font-size: 1.02rem; }
.art-head .sub { margin: 0; color: var(--ink-soft); font-size: .85rem; }
.art-card .badge { background: var(--amber-soft); color: var(--amber); }

.offers { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.offers summary { font-size: .88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.offer-list { margin-top: 8px; display: grid; gap: 6px; }
.offer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
}
.offer .oshop { flex: 1; min-width: 0; }
.offer .oprice { font-weight: 700; font-variant-numeric: tabular-nums; }
.offer .oos { color: var(--danger); font-size: .8rem; }
.offer .btn { flex: 0 0 auto; }

/* ---- Trip-Foto-Header ---- */
.trip-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 4px 0 14px;
  min-height: 150px;
  background: linear-gradient(135deg, var(--green), #0c120f);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}
.trip-hero.has-photo { min-height: 200px; }
.trip-hero-grad {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.72) 100%);
}
.trip-hero-txt h2 { margin: 0; color: #fff; font-size: 1.6rem; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.trip-hero-txt p { margin: 3px 0 0; color: #e7ece1; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.trip-hero-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.trip-hero-cam, .trip-hero-rm, .trip-hero-share {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.trip-hero-rm { font-size: 1.4rem; line-height: 1; }
.trip-hero .ic { width: 20px; height: 20px; }

/* Trip-Karten in der Liste (mit Foto/Verlauf-Header) */
.trip-card { padding: 0; overflow: hidden; }
.trip-card-hero {
  position: relative;
  min-height: 118px;
  background: linear-gradient(135deg, var(--green), #0c120f);
  background-size: cover;
  background-position: center;
}
.trip-card-grad {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.15) 45%, rgba(0,0,0,.68));
}
.trip-card-grad h3 { margin: 0; color: #fff; font-size: 1.15rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.trip-card-grad p { margin: 2px 0 0; color: #e7ece1; font-size: .85rem; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.trip-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; font-size: .85rem; color: var(--ink-soft); }
.trip-card-meta .m { display: inline-flex; align-items: center; gap: 4px; }
.trip-card-meta .ic { width: 15px; height: 15px; vertical-align: -0.15em; }
/* Beschriftung der Kennzahl: ohne sie merkte man sich beim Ueberfliegen eine
   Zahl, ohne zu wissen, ob "Am Koerper" mitzaehlt. */
.trip-card-meta .m-lbl { opacity: .7; }

/* ---- Tabbar ---- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
}
.tab-ico { width: 24px; height: 24px; line-height: 1; }
.tab[aria-current="page"] { color: var(--accent-strong); }
.tab[aria-current="page"] .tab-ico { transform: translateY(-1px); }

/* ---- SVG-Outline-Icons ---- */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }
.gear-actions .ic { width: 19px; height: 19px; vertical-align: middle; }
.card-meta .ic, .cat-row .ic { width: 15px; height: 15px; vertical-align: -0.15em; }
.dry-box h3 .ic, section.block > h3 .ic { width: 18px; height: 18px; vertical-align: -0.2em; }

/* ---- Toast ---- */
/* left:50% allein deckelt die Breite: ein fixiertes Element ohne feste Breite
   darf nur den Platz RECHTS von left nutzen — auf einem 390er Display also
   195 px, egal welches max-width daneben steht. Laengere Meldungen wurden
   dadurch zu einem hohen Klumpen (Meldung 05.08.). Mit left+right spannt der
   Platz ueber die ganze Breite, `fit-content` haelt die Blase trotzdem so
   schmal wie ihr Text, `margin-inline:auto` zentriert sie. */
.toast {
  position: fixed;
  left: 12px;
  right: 12px;
  width: fit-content;
  margin-inline: auto;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  background: var(--ink);
  color: var(--bg);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: 90vw;
}
/* Mehrzeilige Erklaertexte: die Pille schneidet mit ihren runden Enden die Ecken
   der ersten und letzten Zeile ab und wirkt bei kurzen Zeilen wie ein Kreis
   (Meldung 05.08.). Ab hier ein Kasten mit ruhigem Fliesstext. */
.toast.long {
  border-radius: 16px;
  padding: 14px 16px;
  max-width: 34rem;
  text-align: left;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

/* "Rueckgaengig" im Toast: muss antippbar sein, ohne den Toast zu sprengen. */
.toast-act {
  margin-left: 6px;
  padding: 6px 10px;
  min-height: 32px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Freigabe: Status-Karte mit Aktions-Chips (statt schwer lesbarer Textzeile) */
/* Buddy-Liste: wer geht mit, wer traegt wie viel. Bewusst ein eigener Kasten
   und nicht nur eine Zeile im Kennzahlen-Streifen — "wer ist dabei" war vorher
   nirgends zu sehen, und der oeffentliche Link wurde dafuer gehalten. */
.buddy-box {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.buddy-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem; margin-bottom: 10px;
}
.buddy-head .ic { width: 18px; height: 18px; color: var(--accent); }
.buddy {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.buddy:first-of-type { border-top: none; }
.buddy-ini {
  flex: 0 0 auto;
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
  border-radius: 10px;
  font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  background: color-mix(in srgb, var(--ink-soft) 16%, transparent);
  color: var(--ink-soft);
}
.buddy-in .buddy-ini { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.buddy-out .buddy-ini { opacity: .5; }
.buddy-state { flex: 1 1 auto; min-width: 0; font-size: .88rem; color: var(--ink-soft); }
.buddy-out .buddy-state { text-decoration: line-through; }
.buddy-w { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.buddy-box .btn { margin-top: 10px; }
.buddy-hint { margin: 8px 0 0; font-size: .84rem; }

/* Verteilungs-Vorschlag: die Balken zeigen die AUSLASTUNG, nicht das Gewicht —
   darum geht es ja, wenn zwei Leute verschiedene Zielgewichte haben. */
.balance-box {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.balance-person { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.balance-bar-wrap { flex: 1 1 auto; min-width: 0; }
.balance-bar {
  height: 10px; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--ink-soft) 20%, transparent);
}
.balance-bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.balance-bar.over span { background: var(--danger, #e2574c); }
.balance-num { font-size: .82rem; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; }
.balance-head { margin: 8px 0 4px; font-size: .84rem; }
.balance-moves { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.balance-moves li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; border-top: 1px solid var(--line);
}
.balance-moves li:first-child { border-top: none; }
.bm-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-w { flex: 0 0 auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bm-to { flex: 0 0 auto; font-weight: 700; }
.balance-warn { margin: 8px 0 0; font-size: .82rem; color: var(--amber, #d9a441); }
.gear-actions button.lock-on { color: var(--amber, #d9a441); background: color-mix(in srgb, #d9a441 14%, transparent); }

/* Zwei Wege, die beide "teilen" hiessen: der oeffentliche Link bekommt eine
   eigene Ueberschrift, damit er nicht mehr fuer Zusammenarbeit gehalten wird. */
.share-group-head {
  margin: 22px 0 2px;
  font-weight: 700; font-size: .95rem;
}
.share-group-hint { margin: 0 0 10px; font-size: .84rem; }

.share-status {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.share-status.revoked { opacity: .8; }
.share-status-line {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  font-size: .95rem; line-height: 1.45; color: var(--ink);
}
.share-status-line .ic { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.share-status.revoked .share-status-line .ic { color: var(--ink-soft); }
.share-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.share-acts .btn { min-height: 38px; }
.share-acts .sh-revoke { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); margin-left: auto; }
.share-status .share-auto span { display: inline-flex; align-items: center; gap: 6px; }
.share-status .share-auto .ic { width: 16px; height: 16px; color: var(--ink-soft); }

.share-auto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: .88rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.share-auto input { width: 20px; height: 20px; flex: 0 0 auto; }

.share-stale {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: .85rem;
  line-height: 1.45;
}
.share-stale .ic { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.share-stale a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---- Verkaufsseiten (#/verkauf) ---- */
.sale-card { display: block; text-decoration: none; color: inherit; margin-bottom: 10px; }
.sale-card-title { font-weight: 700; margin-bottom: 2px; }
.sale-picklist { display: grid; gap: 2px; margin: 8px 0 0; }
.sale-pick { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.sale-pick.is-off { opacity: .5; }
.sale-item-card { margin-bottom: 10px; }
.sale-item-card.is-sold { opacity: .6; }
.sale-item-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sale-thumb { width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); margin-bottom: 8px; }
.sale-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

@media (min-width: 720px) {
  .dry-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Fokus ---- *
 * Der Browser-Standard (1px auto) war auf dem dunklen Grund praktisch
 * unsichtbar — Tastaturbedienung hiess raten, wo man gerade steht. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Oeffentliche Seiten (share.php, sale.php) ---- *
 * Eigene Regeln, weil diese Seiten serverseitig gerendert werden und weder die
 * Topbar noch die Tabbar der App haben. Wer von aussen auf einen geteilten Link
 * klickt, sah bisher keinen Absender und kein Angebot. */
.pub-head {
  display: flex; align-items: center;
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.pub-brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink);
}
.pub-mark { width: 38px; height: auto; color: var(--accent); flex: 0 0 auto; }
.pub-gift { color: var(--accent); }

.share-cta {
  margin: 30px 0 10px; padding: 20px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-align: center;
}
.share-cta p { margin: 0 0 10px; color: var(--ink-soft); }
.share-cta-lead { font-weight: 700; color: var(--ink) !important; }
.share-cta .btn { margin-top: 4px; }
.share-cta-fine { margin: 12px 0 0 !important; font-size: .82rem; }
.share-cta-fine a { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* ---- Breite Bildschirme ---- *
 * Auf 1440 px sah man drei Ausruestungsgegenstaende: eine 720-px-Spalte in der
 * Mitte, links und rechts Leere (UX-Audit 01.08.). Die Listen bestehen aus
 * Karten, die sich zweispalten lassen. Formulare, Fliesstext und die
 * Kennzahlen bleiben unangetastet — lange Textzeilen liest niemand gern. */
@media (min-width: 1024px) {
  .view { max-width: 1040px; }
  .card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gear-cat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  /* Ueberschrift, Fortschrittsbalken und das Umbenennen-Formular laufen ueber
     beide Spalten — nur die Gegenstandszeilen teilen sich auf. */
  .gear-cat > .gear-cat-head,
  .gear-cat > .cat-bar,
  .gear-cat > .gear-form { grid-column: 1 / -1; }
}

/* Strombedarf-Rechner: Ergebniszeilen. Gruen heisst "reicht", Bernstein
   heisst "reicht nicht" — Rot ist hier falsch, denn eine zu kleine Powerbank
   ist keine Stoerung, sondern eine Packentscheidung. */
.ok-line { color: var(--accent-strong); font-weight: 600; }
.warn-line { color: var(--amber); font-weight: 600; }