/* ==========================================================================
   Grundlagen: Reset, Typografie, Formularelemente
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
}

/* Auf Mobilgeraeten blendet der Browser bei jeder Beruehrung ein graues
   Rechteck ueber das Element. Es erscheint traege, verdeckt die eigene
   Rueckmeldung und laesst jede Anwendung billig wirken. Wir schalten es ab
   und geben stattdessen selbst Rueckmeldung (siehe .btn:active unten).

   touch-action: manipulation schaltet zusaetzlich das Warten auf einen
   moeglichen Doppeltipp ab - ohne das reagiert JEDER Tipp erst nach rund
   300 ms. Das ist der Unterschied zwischen "hakt" und "sitzt". */
a, button, label, summary,
input, select, textarea,
[role="button"], [role="tab"], [role="menuitem"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-body);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--c-ink);
  font-weight: 600;
  line-height: var(--lh-eng);
  letter-spacing: -0.011em;
}

h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-link);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding-left: 1.25em; }

small { font-size: var(--fs-sm); }

code, kbd, pre { font-family: var(--f-mono); font-size: 0.92em; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--sp-5) 0;
}

img, svg { max-width: 100%; }
svg { display: block; }

/* ---- Sichtbarer, aber unaufdringlicher Fokus ---- */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Hilfsklassen ---- */
.nur-lesbar {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gedaempft { color: var(--c-muted); }
.klein     { font-size: var(--fs-sm); }
.zahl      { font-variant-numeric: tabular-nums; }
.rechts    { text-align: right; }
.mitte     { text-align: center; }
.umbruchlos { white-space: nowrap; }
.gekuerzt  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.positiv   { color: var(--c-ok-ink); }
.negativ   { color: var(--c-err-ink); }
.versteckt { display: none !important; }

/* Spalten und Angaben, die nur auf breiten Bildschirmen Platz haben.
   Statt die Tabelle quer scrollen zu lassen - wo die wichtigste Spalte
   ausgerechnet ganz rechts landet - fallen am Handy die entbehrlichen
   Angaben weg. Was bleibt, passt ohne Wischen auf den Schirm. */
@media (max-width: 700px) {
  .nur-breit { display: none !important; }
}
@media (min-width: 701px) {
  .nur-schmal { display: none !important; }
}

.stapel   { display: flex; flex-direction: column; gap: var(--sp-3); }
.reihe    { display: flex; align-items: center; gap: var(--sp-3); }
.reihe-eng{ display: flex; align-items: center; gap: var(--sp-2); }
.schub    { margin-left: auto; }

/* ==========================================================================
   Formularelemente
   ========================================================================== */

label { display: block; }

.feld { display: flex; flex-direction: column; gap: 6px; }

.feld > .bezeichnung,
.bezeichnung {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-body);
}

.bezeichnung .pflicht { color: var(--c-err-ink); margin-left: 2px; }

.feld-hinweis { font-size: var(--fs-sm); color: var(--c-muted); }
.feld-fehler  { font-size: var(--fs-sm); color: var(--c-err-ink); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r);
  transition: border-color var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
  appearance: none;
}

textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--c-muted);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(20, 18, 15, .08);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--c-surface-2);
  color: var(--c-muted);
  cursor: not-allowed;
}

input::placeholder, textarea::placeholder { color: var(--c-faint); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--c-err-ink);
}
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(156, 47, 56, .12); }

select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8279' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ---- Kontrollkaestchen und Schalter ---- */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  margin: 0;
  accent-color: var(--c-accent);
  cursor: pointer;
  flex: none;
}

.wahl {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-base);
  cursor: pointer;
  user-select: none;
}
.wahl input { margin: 0; }

/* ---- Eingabefeld mit Knopf am rechten Rand (z. B. „Passwort anzeigen") ---- */
.feld-mit-knopf { position: relative; display: flex; }
.feld-mit-knopf > input { padding-right: 44px; }

.feld-knopf {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  /* 34 px Kantenlaenge: gross genug zum Treffen, ohne das Feld zu sprengen. */
  width: 34px; height: 34px;
  padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: none;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--dauer) var(--ease), background var(--dauer) var(--ease);
}
.feld-knopf:hover { color: var(--c-ink); background: var(--c-surface-2); }
.feld-knopf:active { background: var(--c-surface-3); transition-duration: 0s; }
.feld-knopf[aria-pressed="true"] { color: var(--c-ink); }

/* ---- Suchfeld mit Lupe ---- */
.suche { position: relative; }
.suche input {
  padding-left: 34px;
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
}
.suche .suche-symbol {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
}