/*
  Heuser Jour-Fixe Manager (Web) - gemeinsame Design-Grundlagen für Anmeldeseite, Startseite und Anwendung.
  Heuser-Design: Anthrazit, Türkis und Papierweiß wie auf der Heuser-Landingpage und im Briefpapier.
  Grundlage ist der MayRiesen Jour-Fixe Manager (Web) 0.1.3; Fachlogik und Aufbau sind unverändert.
*/
:root {
  color-scheme: light;

  --ink: #222833;
  --brand-red: #B3261E;
  --akzent: #58D1CE; --akzent-text: #182F32; --akzent-hover: #83E2DF; --akzent-dunkel: #247C7B;
  --seite: #F6F5F1;
  --flaeche: #FFFFFF;
  --linie: #E2E0DA;
  --karten-rand: #E2E0DA;
  --text: #2D3440;
  --text-ueberschrift: #222833;
  --text-zweit: #6B717C;
  --text-gedaempft: #7C828C;
  --eyebrow: #247C7B;
  --link: #247C7B;

  --seitenleiste: #222833;
  --seitenleiste-text: #D3D5DA;
  --seitenleiste-hover: #2B3340;
  --seitenleiste-aktiv: #2B3340;
  --seitenleiste-gedaempft: #9BA1AB;

  --ok-fg: #357256;      --ok-bg: #E5F1E9;
  --warn-fg: #976817;    --warn-bg: #F9EDCA;
  --neutral-fg: #5F6570; --neutral-bg: #EFEDE8;
  --kritisch-fg: #B3261E; --kritisch-bg: #FBECEB;
  --inaktiv-fg: #6B717C; --inaktiv-bg: #EFEDE8;
  --neu-fg: #5E4910;     --neu-bg: #FFF4CA;
  --nachtrag-fg: #247C7B; --nachtrag-bg: #E3F5F4;
  --info-bg: #EFEDE8;

  --radius-karte: 4px;
  --radius-knopf: 3px;
  --radius-feld: 3px;
  --schatten-karte: 0 2px 14px rgba(34, 40, 51, 0.08);
  --schrift: Arial, Helvetica, sans-serif;
  --fokus: 0 0 0 3px rgba(88, 209, 206, 0.45);
}

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

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  background: var(--seite);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--link); }

button, input, select, textarea { font: inherit; color: inherit; }

[hidden] { display: none !important; }

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

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--eyebrow); text-transform: uppercase;
}

.gedaempft { color: var(--text-zweit); }

/* ---- Karten ---- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--karten-rand);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
}

/* ---- Knöpfe ---- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius-knopf);
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--akzent); color: var(--akzent-text); font-weight: 700;
}
.knopf:hover { background: var(--akzent-hover); }
.knopf:focus-visible { outline: none; box-shadow: var(--fokus); }
.knopf:disabled { opacity: 0.5; cursor: default; }

.knopf-zweit { background: #fff; color: #2D3440; border-color: #D6D3CC; padding: 0 14px; }
.knopf-zweit:hover { background: #F6F5F1; }

.knopf-gefahr { background: #fff; color: var(--kritisch-fg); border-color: #E3C3C3; padding: 0 14px; }
.knopf-gefahr:hover { background: var(--kritisch-bg); }

.knopf-breit { width: 100%; }

.knopf-link {
  background: transparent; border: 0; padding: 3px 4px; height: auto; border-radius: 3px;
  color: var(--link); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.knopf-link:hover { background: transparent; text-decoration: underline; }
.knopf-link:focus-visible { outline: none; box-shadow: var(--fokus); }
.knopf-link.gefahr { color: #B3261E; }

/* ---- Formularfelder ---- */
.feld-beschriftung { display: block; font-size: 12px; font-weight: 600; color: #4A505B; margin: 0 0 5px; }

.eingabe, .auswahl, .mehrzeilig {
  width: 100%;
  border: 1px solid #D6D3CC; border-radius: var(--radius-feld);
  background: #fff; color: #2D3440; font-size: 13px;
}
.eingabe, .auswahl { height: 34px; padding: 0 9px; }
.auswahl { padding-right: 4px; }
.mehrzeilig { padding: 7px 9px; resize: vertical; min-height: 70px; line-height: 1.45; }
.eingabe:focus, .auswahl:focus, .mehrzeilig:focus { outline: none; border-color: var(--akzent-dunkel); box-shadow: var(--fokus); }
.eingabe::placeholder, .mehrzeilig::placeholder { color: #9A9EA6; }
.eingabe[aria-invalid="true"] { border-color: var(--kritisch-fg); }

.haken { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.haken input { width: 15px; height: 15px; margin: 0; accent-color: var(--akzent-dunkel); }

/* ---- Pillen / Badges ---- */
.pille {
  display: inline-block; padding: 3px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.pille-klein { padding: 1px 6px; border-radius: 8px; font-size: 9px; }