/* HONOR – Design-Tokens + Basis-Komponenten (FINAL)
   Entscheidung des Projektowners: neues Design · Standard-Theme „Neutral-Kern“ · leicht gerundete Formen (Radius 8–14 px).
   Drei umschaltbare Farbvarianten (Anforderung Nr. 8), Umschaltung per Attribut am <html>:
     (ohne Attribut) / data-theme="neutral"   C „Neutral-Kern“ – KERN-nahes Blau, Grautöne, Rot/Grün nur für Status  (STANDARD)
     data-theme="nordlicht"                   A „Nordlicht“   – Dunkelblau/Petrol, Gold-Akzent, würdevoll-behördlich
     data-theme="ehrenamt"                    B „Ehrenamt“    – Warmes Grün/Teal, Orange-Akzent, freundlich-bürgernah
   Die Token-Namen sind an KERN UX angelehnt (Farbe, Abstand, Radius), damit die Werte später
   1:1 auf die KERN-Tokens (@kern-ux/native) gemappt werden können.
   Zum Anpassen NUR die :root-/Theme-Blöcke ändern – die Klassen darunter bleiben. */

:root,
[data-theme="neutral"] {
  /* ---- Pflicht-Farben · Variante C „Neutral-Kern“ (WCAG AA geprüft, siehe design.md) ---- */
  --color-primary: #004B76;          /* KERN-nahes Dunkelblau – Kopfzeile, Primary-Buttons, Links */
  --color-primary-hover: #00395A;
  --color-on-primary: #FFFFFF;       /* Text auf Primärfarbe */
  --color-secondary: #3C4651;        /* Anthrazit – Sekundärtext, Diagramm-Reihe 2 */
  --color-accent: #1F6FB5;           /* Helleres Blau – Marker, Linien, Auswahl; Text darauf: --color-on-accent */
  --color-bg: #F4F5F6;
  --color-surface: #FFFFFF;
  --color-text: #1A1D21;
  --color-text-muted: #545B63;
  --color-border: #C8CDD2;
  --color-success: #17703A;          /* Grün NUR für Status */
  --color-warning: #8A5A00;
  --color-error: #B3261E;            /* Rot NUR für Status/Fehler */

  /* ---- Ergänzende Farben ---- */
  --color-on-accent: #FFFFFF;
  --color-accent-on-dark: #9CCBF0;   /* Akzent auf der Primärfläche (Kopfzeilen-Linie, Logo-Stern) */
  --color-accent-soft: #E3EEF8;
  --color-primary-soft: #E5EDF3;     /* Hover-/Auswahlfläche */
  --color-surface-alt: #ECEEF0;      /* Tabellenkopf, Sekundärflächen */
  --color-border-strong: #6B737B;    /* Eingabefelder, UI-Komponenten (≥ 3:1) */
  --color-success-soft: #E1F1E7;
  --color-warning-soft: #F9EDD3;
  --color-error-soft: #FAE3E1;
  --color-info-soft: #E3EEF8;
  --focus-color: #00395A;

  /* ---- Schrift (System-Fallback, offline-fähig; Edge/Windows → Segoe UI) ---- */
  --font-heading: "Fira Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Fira Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, "Courier New", monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.25rem;
  --fs-xl: 1.625rem; --fs-2xl: 2.25rem; --fs-kpi: 2.25rem;
  --fw-normal: 400; --fw-medium: 500; --fw-bold: 700;

  /* ---- Abstände / Radien (leicht gerundet, Entscheidung 3A: 8–14 px) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 6px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px;

  /* ---- Schatten (ruhig) / Übergänge / Fokus ---- */
  --shadow-sm: 0 1px 2px rgba(26, 29, 33, .08);
  --shadow: 0 2px 10px rgba(26, 29, 33, .10);
  --shadow-lg: 0 12px 30px rgba(26, 29, 33, .16);
  --transition: 140ms ease;
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--focus-color);

  /* ---- Hintergrund (Farbe + sanfter Verlauf oben, nicht gekachelt) ---- */
  --bg-page: linear-gradient(180deg, #E8ECEF 0%, rgba(244, 245, 246, 0) 360px);
}

/* ---- Variante A „Nordlicht“ ---- */
[data-theme="nordlicht"] {
  --color-primary: #0B3C5D;
  --color-primary-hover: #082B44;
  --color-on-primary: #FFFFFF;
  --color-secondary: #1B6B7A;
  --color-accent: #A87D00;
  --color-bg: #F2F5F8;
  --color-surface: #FFFFFF;
  --color-text: #13222E;
  --color-text-muted: #4A5B6A;
  --color-border: #C2CDD8;
  --color-success: #1B7A47;
  --color-warning: #8A5A00;
  --color-error: #B3261E;
  --color-on-accent: #0A1620;
  --color-accent-on-dark: #E8C45A;
  --color-accent-soft: #FBF1D3;
  --color-primary-soft: #E6EEF4;
  --color-surface-alt: #E9EEF3;
  --color-border-strong: #66788A;
  --color-success-soft: #E2F3E9;
  --color-warning-soft: #FBEFD5;
  --color-error-soft: #FBE4E2;
  --color-info-soft: #E6EEF4;
  --focus-color: #0B3C5D;
  --shadow-sm: 0 1px 2px rgba(11, 60, 93, .08);
  --shadow: 0 2px 10px rgba(11, 60, 93, .10);
  --shadow-lg: 0 12px 30px rgba(11, 60, 93, .16);
  --bg-page: linear-gradient(180deg, #E4ECF3 0%, rgba(242, 245, 248, 0) 380px);
}

/* ---- Variante B „Ehrenamt“ ---- */
[data-theme="ehrenamt"] {
  --color-primary: #0E6B5E;
  --color-primary-hover: #0A5348;
  --color-on-primary: #FFFFFF;
  --color-secondary: #2F5D50;
  --color-accent: #CF5F0A;
  --color-bg: #F5F8F5;
  --color-surface: #FFFFFF;
  --color-text: #1C2B26;
  --color-text-muted: #51635B;
  --color-border: #C5D6CE;
  --color-success: #1F7A3D;
  --color-warning: #8F5400;
  --color-error: #B3261E;
  --color-on-accent: #120900;
  --color-accent-on-dark: #F7A862;
  --color-accent-soft: #FDE9D6;
  --color-primary-soft: #E3F2EF;
  --color-surface-alt: #E8F0EC;
  --color-border-strong: #62786F;
  --color-success-soft: #E0F2E6;
  --color-warning-soft: #FBEBD3;
  --color-error-soft: #FBE4E2;
  --color-info-soft: #E3F2EF;
  --focus-color: #0A5348;
  --shadow-sm: 0 1px 2px rgba(14, 107, 94, .08);
  --shadow: 0 2px 10px rgba(14, 107, 94, .10);
  --shadow-lg: 0 12px 30px rgba(14, 107, 94, .16);
  --bg-page: linear-gradient(180deg, #E3F0EA 0%, rgba(245, 248, 245, 0) 380px);
}

/* ================= Basis ================= */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-text); font-size: var(--fs-base); line-height: 1.55;
  color: var(--color-text); min-height: 100vh;
  background-color: var(--color-bg); background-image: var(--bg-page); background-repeat: no-repeat;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--space-3); color: var(--color-text); }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 9px 18px; border-radius: var(--radius); border: 2px solid transparent;
  font: inherit; font-weight: var(--fw-medium); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.btn-danger { background: var(--color-surface); color: var(--color-error); border-color: var(--color-error); }
.btn-danger:hover:not(:disabled) { background: var(--color-error-soft); color: var(--color-error); }
.btn-sm { min-height: 36px; padding: 5px 12px; font-size: var(--fs-sm); }

/* ================= Karte ================= */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.card-accent { border-top: 4px solid var(--color-accent); }

/* ================= Formularfelder ================= */
.label { display: block; font-weight: var(--fw-medium); margin-bottom: var(--space-1); }
.hint { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.input {
  width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:hover:not(:disabled) { border-color: var(--color-primary); }
.input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.input:disabled { background: var(--color-surface-alt); color: var(--color-text-muted); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-soft); }
.input::placeholder { color: var(--color-text-muted); }
textarea.input { min-height: 96px; resize: vertical; }
.error-text { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-error); margin-top: var(--space-1); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--color-primary); }
.check input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.counter { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: right; margin-top: var(--space-1); }
.counter strong { color: var(--color-text); }
.counter.is-over, .counter.is-over strong { color: var(--color-error); font-weight: var(--fw-bold); }

/* ================= Badge ================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.5; white-space: nowrap;
  background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border);
}
.badge-info    { background: var(--color-info-soft);    color: var(--color-primary);  border-color: var(--color-primary); }
.badge-success { background: var(--color-success-soft); color: var(--color-success);  border-color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning);  border-color: var(--color-warning); }
.badge-error   { background: var(--color-error-soft);   color: var(--color-error);    border-color: var(--color-error); }
.badge-accent  { background: var(--color-accent-soft);  color: var(--color-text);     border-color: var(--color-accent); }

/* ================= Hinweis (Alert) ================= */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); border: 1px solid var(--color-border); border-left-width: 6px;
  background: var(--color-info-soft); color: var(--color-text);
}
.alert-info    { border-color: var(--color-primary); }
.alert-success { background: var(--color-success-soft); border-color: var(--color-success); }
.alert-warning { background: var(--color-warning-soft); border-color: var(--color-warning); }
.alert-error   { background: var(--color-error-soft);   border-color: var(--color-error); }

/* ================= Lade- und Leerzustand ================= */
.skeleton { display: block; height: 1em; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-surface-alt) 0%, var(--color-border) 50%, var(--color-surface-alt) 100%); background-size: 200% 100%; animation: honor-shimmer 1.4s linear infinite; }
@keyframes honor-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--color-border); border-top-color: var(--color-primary); animation: honor-spin .8s linear infinite; vertical-align: -4px; }
@keyframes honor-spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-text-muted); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.empty strong { display: block; color: var(--color-text); font-size: var(--fs-lg); margin-bottom: var(--space-1); }


/* ================= Zusatzkomponenten ================= */
select.input { padding-right: var(--space-8); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--color-primary); }
.check input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.check input:disabled + span { color: var(--color-text-muted); }
.counter { text-align: right; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.counter.is-over { color: var(--color-error); font-weight: var(--fw-medium); }
.empty { text-align: center; padding: var(--space-8) var(--space-4); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-muted); }
.empty strong { display: block; color: var(--color-text); font-size: var(--fs-lg); margin-bottom: var(--space-1); }
.loading { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.loading::before { content: ""; width: 16px; height: 16px; border-radius: var(--radius-pill); border: 3px solid var(--color-border); border-top-color: var(--color-primary); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 2s !important; } }