/* Garage – Fahrzeug-Alarm. Dunkle Werkstatt, Signalorange; hell folgt dem Gerät.
   Keine Inline-Styles (CSP style-src 'self'); Maße, die JS setzt, laufen über Custom Properties. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --grund: #14120f;
  --flaeche: oklch(0.225 0.008 65);
  --flaeche-hoch: oklch(0.275 0.01 65);
  --linie: oklch(0.34 0.012 65);
  --text: oklch(0.95 0.008 80);
  --text-leise: oklch(0.76 0.014 72);
  --akzent: oklch(0.74 0.18 50);
  --akzent-tief: oklch(0.66 0.19 46);
  --auf-akzent: oklch(0.19 0.04 50);
  --akzent-schrift: oklch(0.8 0.15 55);
  --akzent-hauch: oklch(0.74 0.18 50 / 0.14);
  --schaden: oklch(0.76 0.15 28);
  --schaden-hauch: oklch(0.7 0.17 28 / 0.16);
  --achtung: oklch(0.85 0.13 88);
  --achtung-hauch: oklch(0.85 0.13 88 / 0.13);
  --plus: oklch(0.8 0.14 152);
  --plus-hauch: oklch(0.8 0.14 152 / 0.13);
  --schatten: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px -8px oklch(0 0 0 / 0.5);
  --schatten-hoch: 0 -2px 6px oklch(0 0 0 / 0.3), 0 -18px 48px -12px oklch(0 0 0 / 0.6);
  --rund: 14px;
  --rund-klein: 9px;
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  --schrift: "Barlow", system-ui, sans-serif;
  --zahl: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  --leiste: 62px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --grund: #ebebe8;
    --flaeche: oklch(0.985 0.002 90);
    --flaeche-hoch: oklch(0.905 0.004 90);
    --linie: oklch(0.84 0.005 90);
    --text: oklch(0.22 0.008 70);
    --text-leise: oklch(0.44 0.01 70);
    --akzent: oklch(0.7 0.19 48);
    --akzent-tief: oklch(0.63 0.2 44);
    --auf-akzent: oklch(0.17 0.04 50);
    --akzent-schrift: oklch(0.5 0.17 42);
    --akzent-hauch: oklch(0.7 0.19 48 / 0.14);
    --schaden: oklch(0.47 0.18 27);
    --schaden-hauch: oklch(0.6 0.2 27 / 0.12);
    --achtung: oklch(0.44 0.1 80);
    --achtung-hauch: oklch(0.8 0.15 88 / 0.22);
    --plus: oklch(0.42 0.12 152);
    --plus-hauch: oklch(0.7 0.15 152 / 0.16);
    --schatten: 0 1px 2px oklch(0.3 0.02 60 / 0.08), 0 8px 24px -10px oklch(0.3 0.02 60 / 0.18);
    --schatten-hoch: 0 -2px 6px oklch(0.3 0.02 60 / 0.06), 0 -18px 48px -12px oklch(0.3 0.02 60 / 0.25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
  scrollbar-color: var(--linie) transparent;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.45 var(--schrift);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--akzent); color: var(--auf-akzent); }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--akzent-schrift); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 1rem; caret-color: var(--akzent); accent-color: var(--akzent); }
button, a, label, summary, [role="tab"], [role="switch"] { touch-action: manipulation; }
button, .chip, [role="tab"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ohne-js { padding: 2rem 1rem; }
svg.zeichen { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.zeichen.voll { fill: currentColor; }

/* ---------- Gerüst ---------- */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.kopf {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--oben) + 0.625rem) 1rem 0.625rem;
  background: color-mix(in oklab, var(--grund) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.kopf.gerollt { border-bottom-color: var(--linie); }
.kopf-zeile { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; }
.kopf h1 { font: 700 1.625rem/1 var(--zahl); letter-spacing: 0.01em; text-transform: uppercase; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
svg.marke { width: 2rem; height: 2rem; flex: none; color: var(--akzent); stroke-width: 1.9; }
.f-akzent { fill: var(--akzent); }
.f-hoch { fill: var(--flaeche-hoch); }
.inhalt { flex: 1; padding: 0.25rem 1rem calc(var(--leiste) + var(--unten) + 1.5rem); width: 100%; max-width: 76rem; margin: 0 auto; }

.leiste {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 0 max(0.5rem, env(safe-area-inset-right, 0px)) var(--unten) max(0.5rem, env(safe-area-inset-left, 0px));
  background: color-mix(in oklab, var(--flaeche) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--linie);
}
.leiste a {
  display: grid; justify-items: center; gap: 0.125rem; height: var(--leiste); align-content: center;
  color: var(--text-leise); text-decoration: none; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
  transition: color 0.15s, transform 0.12s var(--aus);
}
.leiste a:active { transform: scale(0.94); }
.leiste a[aria-current="page"] { color: var(--akzent-schrift); }
.leiste a[aria-current="page"] svg { stroke-width: 2.1; }

/* ---------- Knöpfe, Chips, Felder ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.875rem; padding: 0 1.125rem; border-radius: var(--rund-klein);
  background: var(--flaeche-hoch); color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform 0.12s var(--aus), background 0.15s, opacity 0.15s;
}
.knopf:active { transform: scale(0.97); }
.knopf.haupt { background: var(--akzent); color: var(--auf-akzent); }
.knopf.haupt:active { background: var(--akzent-tief); }
.knopf.umriss { background: none; box-shadow: inset 0 0 0 1px var(--linie); }
.knopf.gefahr { color: var(--schaden); }
.knopf.breit { width: 100%; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.knopf.laedt { pointer-events: none; opacity: 0.7; }
.rund-knopf {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; color: var(--text-leise);
  transition: transform 0.12s var(--aus), background 0.15s, color 0.15s;
}
.rund-knopf:active { transform: scale(0.9); background: var(--flaeche-hoch); }
.rund-knopf.an { color: var(--akzent); }
.rund-knopf.an svg { fill: currentColor; }
.rund-knopf.hupf svg { animation: hupf 0.45s var(--aus); }
@keyframes hupf { 0% { transform: scale(0.6) rotate(-18deg); } 55% { transform: scale(1.25) rotate(6deg); } 100% { transform: none; } }

.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.625rem; padding: 0 0.5625rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1; white-space: nowrap;
  background: var(--flaeche-hoch); color: var(--text-leise);
}
.chip.schaden { background: var(--schaden-hauch); color: var(--schaden); }
.chip.achtung { background: var(--achtung-hauch); color: var(--achtung); }
.chip.plus { background: var(--plus-hauch); color: var(--plus); }
.chip.akzent { background: var(--akzent-hauch); color: var(--akzent-schrift); }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.reiter { display: flex; gap: 0.25rem; padding: 0.1875rem; border-radius: 12px; background: var(--flaeche); overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button {
  flex: 1 1 0; min-height: 2.5rem; padding: 0 0.5rem; border-radius: 9px; color: var(--text-leise); font-weight: 500; white-space: nowrap;
  transition: background 0.18s, color 0.18s, transform 0.12s var(--aus);
}
.reiter button:active { transform: scale(0.96); }
.reiter button[aria-selected="true"], .reiter button[aria-pressed="true"], .reiter button[aria-checked="true"] { background: var(--flaeche-hoch); color: var(--text); box-shadow: 0 1px 2px oklch(0 0 0 / 0.25); }
.reiter.raster { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
.reiter .anzahl { margin-left: 0.375rem; font-size: 0.8125rem; color: var(--text-leise); }
.reiter button[aria-selected="true"] .anzahl.neu { color: var(--akzent-schrift); }

.feld { display: grid; gap: 0.375rem; }
.feld > span, .beschriftung { font-size: 0.875rem; font-weight: 500; color: var(--text-leise); }
.eingabe, select.eingabe, textarea.eingabe {
  width: 100%; min-height: 2.875rem; padding: 0.625rem 0.75rem; border-radius: var(--rund-klein);
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.eingabe { min-height: 5.5rem; resize: vertical; line-height: 1.4; }
.eingabe::placeholder { color: var(--text-leise); opacity: 0.85; }
.eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hauch); }
.eingabe.falsch { border-color: var(--schaden); }
.hilfe { font-size: 0.875rem; color: var(--text-leise); }
.fehlertext { font-size: 0.875rem; color: var(--schaden); }

.schalter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.875rem; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter .bahn { position: relative; flex: none; width: 3.125rem; height: 1.875rem; border-radius: 999px; background: var(--flaeche-hoch); box-shadow: inset 0 0 0 1px var(--linie); transition: background 0.2s; }
.schalter .bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--text-leise); transition: transform 0.25s var(--aus), background 0.2s; }
.schalter input:checked + .bahn { background: var(--akzent); box-shadow: none; }
.schalter input:checked + .bahn::after { transform: translateX(1.25rem); background: var(--auf-akzent); }
.schalter input:focus-visible + .bahn { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Trefferliste ---------- */
.suchwahl { display: flex; gap: 0.5rem; overflow-x: auto; margin: 0 -1rem; padding: 0.25rem 1rem 0.75rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.suchwahl::-webkit-scrollbar { display: none; }
.suchwahl button {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.875rem; border-radius: 999px;
  background: var(--flaeche); color: var(--text-leise); font-weight: 500; box-shadow: inset 0 0 0 1px var(--linie);
  transition: background 0.18s, color 0.18s, transform 0.12s var(--aus);
}
.suchwahl button:active { transform: scale(0.96); }
.suchwahl button[aria-pressed="true"] { background: var(--text); color: var(--grund); box-shadow: none; }
.suchwahl .punkt { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--plus); }
.suchwahl .punkt.aus { background: var(--text-leise); opacity: 0.6; }

.werkzeug { margin-bottom: 0.75rem; }
.sortierung { position: relative; flex: none; margin-left: auto; }
.sortierung select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.sortierung .rund-knopf { width: auto; gap: 0.375rem; padding: 0 0.25rem 0 0.5rem; border-radius: 9px; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; }
.sortierung .rund-knopf svg { width: 1.125rem; height: 1.125rem; }
.sortierung:focus-within .rund-knopf { outline: 2px solid var(--akzent); outline-offset: 2px; }

.lage { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; min-height: 2.75rem; font-size: 0.875rem; color: var(--text-leise); }
.lage > span:nth-child(2) { min-width: 0; }
.lage .lampe { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--plus); flex: none; }
.lage.warn .lampe { background: var(--achtung); }
.lage.pause .lampe { background: var(--text-leise); }
.lage button { margin-left: auto; color: var(--akzent-schrift); font-weight: 500; min-height: 2.75rem; padding: 0 0.25rem; }

.liste { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.5rem), 1fr)); }
.karte {
  position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem;
  border-radius: var(--rund); background: var(--flaeche); text-align: left; width: 100%;
  transition: transform 0.14s var(--aus), background 0.15s, opacity 0.2s;
}
.karte:active { transform: scale(0.985); }
.karte.geht { animation: geht 0.32s var(--aus) forwards; }
@keyframes geht { to { opacity: 0; transform: translateX(-24px) scale(0.97); } }
.karte.alt { background: none; box-shadow: inset 0 0 0 1px var(--linie); }
.karte.alt .bild img { filter: grayscale(0.85) brightness(0.8); }
.karte.alt .preis, .karte.alt h3 { color: var(--text-leise); }
.karte-knopf { position: absolute; inset: 0; border-radius: var(--rund); z-index: 1; }
.bild { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--flaeche-hoch); display: grid; place-items: center; color: var(--text-leise); }
.bild img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.bild img.da { opacity: 1; }
.bild > svg { position: absolute; width: 2.25rem; height: 2.25rem; opacity: 0.5; stroke-width: 1.4; }
.bild img.da + svg { display: none; }
.neu-marke { position: absolute; top: 0.375rem; left: 0.375rem; padding: 0.1875rem 0.4375rem; border-radius: 6px; background: var(--akzent); color: var(--auf-akzent); font: 700 0.8125rem/1 var(--zahl); letter-spacing: 0.06em; }
.karte-text { display: grid; align-content: start; gap: 0.25rem; min-width: 0; }
.karte h3 { padding-right: 2.125rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.preiszeile { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.preis { font: 700 1.5rem/1.05 var(--zahl); letter-spacing: 0.005em; }
.preis small { font: 500 0.8125rem/1 var(--schrift); color: var(--text-leise); margin-left: 0.25rem; }
.gesenkt { font-size: 0.8125rem; font-weight: 600; color: var(--plus); }
.erhoeht { font-size: 0.8125rem; font-weight: 600; color: var(--text-leise); }
.daten { font-size: 0.875rem; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte .chips { margin-top: 0.125rem; max-height: 1.625rem; overflow: hidden; }
.karte .stern { position: absolute; top: 0.125rem; right: 0.125rem; z-index: 2; }
.karte .notiz-marke { position: absolute; right: 0.875rem; bottom: 0.625rem; color: var(--akzent-schrift); }
.karte .notiz-marke svg { width: 1rem; height: 1rem; }

.leer { display: grid; justify-items: center; gap: 0.75rem; text-align: center; padding: 2.5rem 1rem 3rem; color: var(--text-leise); }
.leer svg.bildchen { width: 9.5rem; height: auto; color: var(--linie); }
.leer h2 { font: 700 1.5rem/1.1 var(--zahl); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); text-wrap: balance; }
.leer p { max-width: 34ch; text-wrap: pretty; }

.gerippe .karte { pointer-events: none; }
.gerippe .bild, .gerippe .strich { background: linear-gradient(100deg, var(--flaeche-hoch) 40%, color-mix(in oklab, var(--flaeche-hoch) 70%, var(--text) 8%) 50%, var(--flaeche-hoch) 60%) 0 0 / 300% 100%; animation: schimmer 1.4s linear infinite; }
.gerippe .strich { height: 0.875rem; border-radius: 6px; }
.gerippe .strich.kurz { width: 45%; height: 1.375rem; }
.gerippe .strich.mittel { width: 70%; }
@keyframes schimmer { to { background-position: -150% 0; } }

/* ---------- Blatt (Inserat) ---------- */
dialog.blatt {
  width: 100%; max-width: 34rem; max-height: none; height: auto; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 22px 22px 0 0; background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-hoch);
  overflow: hidden; display: none; flex-direction: column;
}
dialog.blatt[open] { display: flex; max-height: min(92dvh, 100dvh - var(--oben) - 0.5rem); animation: herauf 0.42s var(--aus); }
dialog.blatt.zu { animation: hinab 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
dialog.blatt::backdrop { background: oklch(0.1 0.01 60 / 0.6); animation: blende 0.3s ease-out; }
dialog.blatt.zu::backdrop { animation: blende 0.22s ease-in reverse forwards; }
@keyframes herauf { from { transform: translateY(100%); } }
@keyframes hinab { to { transform: translateY(100%); } }
@keyframes blende { from { opacity: 0; } }
.blatt-rolle { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.blatt-bild { position: relative; aspect-ratio: 16 / 10; background: var(--flaeche-hoch); display: grid; place-items: center; color: var(--text-leise); overflow: hidden; }
.blatt-bild img.hinten { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(22px) brightness(0.55) saturate(1.2); opacity: 0; transition: opacity 0.4s; }
.blatt-bild img.vorn { position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s; }
.blatt-bild img.da { opacity: 1; }
.blatt-bild > svg { position: absolute; width: 3.5rem; height: 3.5rem; opacity: 0.45; stroke-width: 1.2; }
.blatt-bild img.da ~ svg.zeichen { display: none; }
.blatt-zu { position: absolute; top: 0.625rem; right: 0.625rem; z-index: 3; background: oklch(0.15 0.01 60 / 0.6); color: oklch(0.97 0 0); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.blatt-koerper { display: grid; gap: 1rem; padding: 1rem 1rem 1.25rem; }
.blatt h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.blatt .preis { font-size: 2.25rem; }
.einordnung { font-size: 0.9375rem; color: var(--text-leise); }
.einordnung strong { color: var(--text); font-weight: 600; }
.einordnung strong.gut { color: var(--plus); }
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.fakten dt { font-size: 0.8125rem; color: var(--text-leise); }
.fakten dd { font-weight: 500; overflow-wrap: anywhere; }
.auszug { padding: 0.75rem 0.875rem; border-radius: var(--rund-klein); background: var(--flaeche-hoch); font-size: 0.9375rem; color: var(--text-leise); overflow-wrap: anywhere; }
.verlauf li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; font-size: 0.9375rem; border-bottom: 1px solid var(--linie); }
.verlauf li:last-child { border-bottom: 0; }
.verlauf span:first-child { color: var(--text-leise); }
.abschnitt-titel { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 0.375rem; }
.blatt-fuss { display: flex; gap: 0.5rem; padding: 0.75rem 1rem calc(0.75rem + var(--unten)); border-top: 1px solid var(--linie); background: var(--flaeche); }
.blatt-fuss .haupt { flex: 1; }
.blatt-fuss .knopf.an { color: var(--akzent-schrift); }
.blatt-fuss .knopf.an svg { fill: currentColor; }

/* ---------- Suchen und Formular ---------- */
.stapel { display: grid; gap: 0.75rem; }
.tafel { padding: 1rem; border-radius: var(--rund); background: var(--flaeche); display: grid; gap: 0.875rem; }
.tafel h2, .tafel h3 { font: 700 1.25rem/1.1 var(--zahl); letter-spacing: 0.02em; text-transform: uppercase; }
.suchkarte { display: grid; gap: 0.625rem; padding: 1rem; border-radius: var(--rund); background: var(--flaeche); }
.suchkarte-kopf { display: flex; align-items: flex-start; gap: 0.75rem; }
.suchkarte h2 { flex: 1; min-width: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.suchkarte .daten { white-space: normal; }
.suchkarte-fuss { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.suchkarte-fuss .knopf { min-height: 2.75rem; }
.suchkarte-fuss .zahl { margin-right: auto; font-size: 0.9375rem; color: var(--text-leise); }
.suchkarte-fuss .zahl b { font: 700 1.25rem/1 var(--zahl); color: var(--text); margin-right: 0.25rem; }
.messer { display: grid; gap: 0.375rem; }
.messer-kopf { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--text-leise); }
.messer-kopf b { color: var(--text); font-weight: 600; }
.messer-bahn { height: 0.375rem; border-radius: 999px; background: var(--flaeche-hoch); overflow: hidden; }
.messer-bahn i { display: block; height: 100%; width: calc(var(--anteil, 0) * 100%); border-radius: inherit; background: var(--akzent); transition: width 0.4s var(--aus), background 0.2s; }
.messer.voll .messer-bahn i { background: var(--schaden); }

.formular { display: grid; gap: 0.75rem; padding-bottom: 5.5rem; }
.formular fieldset { border: 0; margin: 0; padding: 1rem; min-width: 0; border-radius: var(--rund); background: var(--flaeche); display: flow-root; }
.formular fieldset > * + * { margin-top: 0.875rem; }
.formular fieldset > .beschriftung { display: block; }
.formular legend { float: left; width: 100%; padding: 0; font: 700 1.25rem/1.1 var(--zahl); letter-spacing: 0.02em; text-transform: uppercase; }
.formular legend { margin-bottom: 0.875rem; }
.formular legend + * { clear: both; margin-top: 0; }
.formular .reiter { background: var(--grund); }
.formular .eingabe { background: var(--grund); }
.wert { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.wert output { font: 600 1.375rem/1 var(--zahl); letter-spacing: 0.01em; }
.spanne { position: relative; height: 2.75rem; --von: 0; --bis: 1; }
.spanne::before, .spanne::after { content: ""; position: absolute; top: 50%; height: 0.375rem; margin-top: -0.1875rem; border-radius: 999px; }
.spanne::before { left: 0; right: 0; background: var(--flaeche-hoch); }
.spanne::after { left: calc(var(--von) * (100% - 1.75rem) + 0.875rem); right: calc((1 - var(--bis)) * (100% - 1.75rem) + 0.875rem); background: var(--akzent); }
.spanne.einzel::after { left: calc(var(--von) * (100% - 1.75rem) + 0.875rem); right: 0; }
.spanne input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 1; }
.spanne input::-webkit-slider-runnable-track { background: none; height: 100%; }
.spanne input::-moz-range-track { background: none; height: 100%; }
.spanne input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 1.75rem; height: 1.75rem; margin-top: 0.5rem; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 1px 4px oklch(0 0 0 / 0.45); cursor: grab; transition: transform 0.12s var(--aus); }
.spanne input::-moz-range-thumb { pointer-events: auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 1px 4px oklch(0 0 0 / 0.45); cursor: grab; }
.spanne input:active::-webkit-slider-thumb { transform: scale(1.15); }
.spanne input:focus-visible { outline: none; }
.spanne input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--akzent); outline-offset: 2px; }
.spanne input:focus-visible::-moz-range-thumb { outline: 2px solid var(--akzent); outline-offset: 2px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.markenwahl { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.markenwahl label, .wortliste .wort { position: relative; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.875rem; border-radius: 999px; background: var(--flaeche-hoch); color: var(--text-leise); font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.12s var(--aus); }
.markenwahl label:active { transform: scale(0.95); }
.markenwahl input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.markenwahl label:has(input:checked) { background: var(--akzent); color: var(--auf-akzent); }
.markenwahl label:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.markenwahl label:has(input:disabled) { opacity: 0.4; cursor: default; }
.markenwahl.zu label.selten:not(:has(input:checked)) { display: none; }
.wortliste { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.wortliste .wort { gap: 0.25rem; padding-right: 0.25rem; cursor: default; color: var(--text); }
.wortliste .wort button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--text-leise); }
.wortliste .wort button:active { background: var(--flaeche); }
.wortliste .wort svg { width: 1rem; height: 1rem; }
.zugabe { display: flex; gap: 0.5rem; }
.zugabe .eingabe { flex: 1; min-width: 0; }
.ortwahl { display: grid; gap: 0.375rem; }
.ortwahl label { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: var(--rund-klein); background: var(--flaeche-hoch); cursor: pointer; }
.ortwahl label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--akzent); }
.speicherleiste {
  position: fixed; left: 0; right: 0; bottom: calc(var(--leiste) + var(--unten)); z-index: 25;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem;
  background: color-mix(in oklab, var(--flaeche) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--linie);
  transform: translateY(110%); visibility: hidden; transition: transform 0.35s var(--aus), visibility 0s 0.35s;
}
.speicherleiste.da { transform: none; visibility: visible; transition-delay: 0s; }
.speicherleiste p { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--text-leise); }
.speicherleiste p.fehlertext { color: var(--schaden); }
.zurueck { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; margin-left: -0.5rem; padding: 0 0.5rem; color: var(--text-leise); font-weight: 500; text-decoration: none; }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Mehr / Admin ---------- */
.tabelle { display: grid; gap: 0; }
.tabelle > div { display: grid; gap: 0.125rem; padding: 0.625rem 0; border-bottom: 1px solid var(--linie); }
.tabelle > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tabelle > div:first-child { padding-top: 0; }
.tabelle b { font-weight: 600; }
.tabelle span { font-size: 0.875rem; color: var(--text-leise); overflow-wrap: anywhere; }
.erklaer { display: grid; gap: 0.625rem; color: var(--text-leise); font-size: 0.9375rem; max-width: 68ch; }
.erklaer strong { color: var(--text); font-weight: 600; }

/* ---------- Tor (Anmeldung) ---------- */
.tor { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: calc(var(--oben) + 1.5rem) 1.5rem calc(var(--unten) + 1.5rem); background: var(--grund); }
.tor.auf { animation: tor-weg 0.5s 0.55s ease-in forwards; }
@keyframes tor-weg { to { opacity: 0; visibility: hidden; } }
.tor-innen { display: grid; justify-items: center; gap: 1.25rem; text-align: center; max-width: 24rem; width: 100%; }
.tor-bau { width: min(15rem, 62vw); color: var(--text); overflow: visible; }
.rolltor { transform-box: fill-box; }
.bildchen .rolltor { transform: translateY(-72%); }
.bildchen .licht { opacity: 0; }
.bildchen .f-akzent { fill: currentColor; }
.tor-bau .rolltor { transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1); }
.tor.auf .tor-bau .rolltor { transform: translateY(-88%); }
.tor-bau .licht { opacity: 0; transition: opacity 0.6s 0.25s; }
.tor.auf .tor-bau .licht { opacity: 1; }
.tor h1 { font: 700 2.5rem/1 var(--zahl); letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; }
.tor p { color: var(--text-leise); text-wrap: pretty; }
.tor .knopf { min-width: 12rem; }

/* ---------- Meldungen ---------- */
#meldungen { position: fixed; left: 0; right: 0; bottom: calc(var(--leiste) + var(--unten) + 0.75rem); z-index: 200; display: grid; justify-items: center; gap: 0.5rem; padding: 0 1rem; pointer-events: none; }
.meldung { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; max-width: 30rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--text); color: var(--grund); font-weight: 500; font-size: 0.9375rem; box-shadow: var(--schatten); animation: meldung 0.35s var(--aus); }
.meldung.geht { animation: meldung-weg 0.2s ease-in forwards; }
.meldung button { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; min-height: 2rem; white-space: nowrap; }
.meldung.fehler { background: var(--schaden); color: var(--grund); }
@keyframes meldung { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes meldung-weg { to { opacity: 0; transform: translateY(8px); } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }

/* ---------- Zeiger-Geräte ---------- */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: color-mix(in oklab, var(--flaeche-hoch) 82%, var(--text)); }
  .knopf.haupt:hover { background: var(--akzent-tief); }
  .knopf.umriss:hover { background: var(--flaeche-hoch); }
  .rund-knopf:hover { background: var(--flaeche-hoch); color: var(--text); }
  .rund-knopf.an:hover { color: var(--akzent); }
  .karte:hover { background: color-mix(in oklab, var(--flaeche) 90%, var(--text)); }
  .karte.alt:hover { background: var(--flaeche); }
  .leiste a:hover { color: var(--text); }
  .reiter button:hover, .suchwahl button:hover { color: var(--text); }
  .suchwahl button[aria-pressed="true"]:hover { color: var(--grund); }
  .markenwahl label:hover { color: var(--text); }
  .markenwahl label:has(input:checked):hover { color: var(--auf-akzent); }
}

/* ---------- Breite Schirme ---------- */
@media (min-width: 56rem) {
  #app { padding-left: 5.5rem; }
  .leiste { inset: 0 auto 0 0; width: 5.5rem; grid-auto-flow: row; grid-auto-rows: min-content; align-content: start; gap: 0.25rem; padding: 5.25rem 0.5rem 1rem; border-top: 0; border-right: 1px solid var(--linie); }
  .leiste a { height: 4.25rem; border-radius: 12px; }
  .inhalt { padding-bottom: 3rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .kopf { padding-left: 1.5rem; padding-right: 1.5rem; }
  .kopf-zeile { max-width: 73rem; margin: 0 auto; }
  .suchwahl { margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  dialog.blatt { margin: auto; border-radius: 22px; }
  dialog.blatt[open] { animation: auf 0.3s var(--aus); max-height: min(46rem, 92dvh); }
  dialog.blatt.zu { animation: ab 0.18s ease-in forwards; }
  @keyframes auf { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
  @keyframes ab { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
  .speicherleiste { left: 5.5rem; bottom: 0; padding-left: 1.5rem; padding-right: 1.5rem; }
  #meldungen { bottom: 1.25rem; left: 5.5rem; }
  .formular, .schmal { max-width: 44rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}