/* Datenbrücke — eigene Formensprache (Arbeitsstand Woche 1; Marke wählt der GF). Ruhig, dicht, lesbar auf dem Handy.
   Palette: Tiefblau als Grund (Brücke), Kupfer als Akzent (Verbindung), warmes Grau für Flächen. */
:root{
  --tinte:#14213d; --tinte2:#3a4a6b; --grau:#6b7280; --linie:#dfe3ea; --flaeche:#f5f6f8; --weiss:#ffffff;
  --kupfer:#c2703d; --kupfer-hell:#f7e9df; --ok:#1e7f5c; --ok-hell:#e2f4ec; --warn:#b8690f; --warn-hell:#fdf0dc; --rot:#b3261e; --rot-hell:#fbe4e2;
  --radius:12px; --radius-s:8px; --schatten:0 8px 30px rgba(20,33,61,.10);
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;background:var(--flaeche);color:var(--tinte);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
h2{font-size:1.15rem;font-weight:800}
.kopf{background:var(--tinte);color:var(--weiss);padding:14px clamp(16px,4vw,40px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kopf .marke{font-weight:900;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.kopf .marke span{display:inline-block;width:26px;height:26px;border-radius:7px;background:var(--kupfer)}
.kopf select,.kopf button{font:inherit}
.kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;background:rgba(255,255,255,.12);color:var(--weiss)}
.seite{padding:clamp(16px,4vw,40px);max-width:1180px;margin:0 auto;display:grid;gap:18px}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:18px;box-shadow:var(--schatten);min-width:0}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.zwischen{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hinweis{color:var(--grau);font-size:13px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:var(--radius-s);border:1px solid var(--tinte);background:var(--tinte);color:var(--weiss);font-weight:700;cursor:pointer;font:inherit}
.knopf.leise{background:var(--weiss);color:var(--tinte)}
.knopf.kupfer{background:var(--kupfer);border-color:var(--kupfer)}
.knopf:disabled{opacity:.5;cursor:default}
.feld{display:grid;gap:4px;font-size:13px;font-weight:700;color:var(--tinte2)}
.feld input,.feld select,.feld textarea{font:inherit;min-height:44px;padding:9px 12px;border:1px solid var(--linie);border-radius:var(--radius-s);background:var(--weiss);color:var(--tinte);width:100%}
.feld input:focus-visible,.feld select:focus-visible,.knopf:focus-visible{outline:3px solid var(--kupfer);outline-offset:2px}
.liste{display:grid;gap:8px}
.zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--linie);border-radius:var(--radius-s);background:var(--flaeche)}
.zeile b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeile small{color:var(--grau)}
.pille{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800}
.pille.ok{background:var(--ok-hell);color:var(--ok)} .pille.warn{background:var(--warn-hell);color:var(--warn)} .pille.rot{background:var(--rot-hell);color:var(--rot)} .pille.grau{background:var(--linie);color:var(--tinte2)}
.zahl{font-size:2rem;font-weight:900;line-height:1}
.leer{color:var(--grau);border:2px dashed var(--linie);border-radius:var(--radius-s);padding:16px;text-align:center}
.anmeldung{max-width:420px;margin:8vh auto 0}
.meldung{min-height:1.2em;font-size:13px;color:var(--rot)}
@media (width<=720px){.kopf{padding:12px 16px}.seite{padding:16px}.karte{padding:14px}}