/* Gemeinsames Design "Variante E, Azur Klar": Tokens, Basis und Komponenten fuer Anmeldeseiten und Anwendungshuelle.
   Schriften liegen lokal unter /fonts (kein Aufruf externer Dienste). Hell oder dunkel folgt dem System
   (color-scheme, light-dark()) oder der Wahl des Benutzers: Klasse .dark bzw. .light auf <html> (public/js/theme.js).
   Gewichte sind auf 400 bis 800 begrenzt, es entstehen nie Light-Schnitte.
   Keine Inline-Stile im Markup (CSP default-src 'self'). */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2'); }

:root {
  /* Eine Gruppe Tokens: light-dark() waehlt je nach color-scheme. Standard folgt dem System,
     .light und .dark auf <html> erzwingen einen Modus (theme.js). */
  color-scheme: light dark;
  --bg: light-dark(#F0F5FC, #0B1220);
  --surface: light-dark(#FFFFFF, #121B2D);
  --surface-2: light-dark(#E6EDF8, #1B2742);
  --row-hover: light-dark(#F2F6FC, #182339);
  --ink: light-dark(#0F1C33, #E8EEF9);
  --muted: light-dark(#4A5A75, #A3B1CC);
  --faint: light-dark(#71809B, #6F82A6);
  --line: light-dark(#DCE4F0, #1F2B44);
  --line-strong: light-dark(#BCC9DE, #2C3B5A);
  --line-hover: light-dark(#A8BCE0, #3A5080);
  --line-ui: light-dark(#71809B, #6F82A6);
  --accent: light-dark(#1D63D6, #5E9BFF);
  --accent-hover: light-dark(#174EA8, #86B3FF);
  --accent-ink: light-dark(#174EA8, #8DB8FF);
  --accent-soft: light-dark(#E3EDFC, #14264A);
  --on-accent: light-dark(#FFFFFF, #0A1020);
  --focus-ring: light-dark(rgba(29, 99, 214, .28), rgba(94, 155, 255, .38));
  --teal: light-dark(#0B7F8A, #3CC4CC);
  --teal-ink: light-dark(#086770, #5ED6DD);
  --teal-soft: light-dark(#DDF2F3, #0E3438);
  --dim: light-dark(#8F5200, #F2B544);
  --dim-soft: light-dark(#FFF1D6, #3A2A0C);
  --warn: light-dark(#8F5200, #F2B544);
  --warn-soft: light-dark(#FFF1D6, #3A2A0C);
  --warn-line: light-dark(#C77D00, #F2B544);
  --ok: light-dark(#0F7A55, #5FD4A0);
  --ok-soft: light-dark(#E1F6EC, #0F3328);
  --bad: light-dark(#C0242C, #FF8A8F);
  --bad-soft: light-dark(#FDE9E9, #3F161C);
  --on-bad: light-dark(#FFFFFF, #1A0A0C);
  --info: light-dark(#4A5A75, #A3B1CC);
  --info-soft: light-dark(#E6EDF8, #1B2742);
  --cat-kraft: light-dark(#1D63D6, #5E9BFF);
  --cat-cardio: light-dark(#D4620A, #FF9A4D);
  --cat-hantel: light-dark(#A63FBD, #D58CF0);
  --cv-bg: light-dark(#E9F0FA, #0E1626);
  --cv-floor: light-dark(#FFFFFF, #121B2D);
  --cv-grid: light-dark(#E4EBF5, #1B2840);
  --cv-grid-strong: light-dark(#CDD8EA, #26365A);
  --cv-wall: light-dark(#0F1C33, #8EA2C7);
  --cv-sel: light-dark(#FFFFFF, #FFFFFF);
  --toast-ic: light-dark(#5FD4A0, #0F7A55);
  --shadow-sm-c: light-dark(rgba(15, 28, 51, .05), rgba(0, 0, 0, .35));
  --shadow-sm: 0 1px 2px var(--shadow-sm-c);
  --shadow-md-c: light-dark(rgba(15, 40, 100, .3), rgba(0, 0, 0, .65));
  --shadow-md: 0 14px 30px -16px var(--shadow-md-c);
  --shadow-lg-c: light-dark(rgba(10, 30, 90, .42), rgba(0, 0, 0, .8));
  --shadow-lg: 0 30px 64px -28px var(--shadow-lg-c);
  --glow-c: light-dark(rgba(29, 99, 214, .55), rgba(94, 155, 255, .5));
  --glow: 0 6px 16px -6px var(--glow-c);
  --glow-hover-c: light-dark(rgba(29, 99, 214, .6), rgba(94, 155, 255, .6));
  --glow-hover: 0 10px 22px -8px var(--glow-hover-c);
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root.light { color-scheme: light; }
:root.dark { color-scheme: dark; }

* { box-sizing: border-box; }
/* Das Attribut hidden gilt immer, auch fuer Elemente, deren Klasse display setzt (.btn, .field, .notice, ...) */
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', 'Inter Variable', system-ui, sans-serif; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
p { margin: 0; }
/* Resets ohne Spezifitaet: Klassenregeln (z. B. .btn-primary) gewinnen fuer <a> und <button> gleich */
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic-lg { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.strong { font-weight: 600; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.link { color: var(--accent-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; font-weight: 600; }
.link:hover { text-decoration-color: currentColor; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.field-error { font-size: var(--fs-sm); color: var(--bad); font-weight: 500; }
.input { height: 38px; width: 100%; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-ui); background: var(--surface); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.input:hover { border-color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.input[readonly] { background: var(--surface-2); color: var(--muted); cursor: default; }
.input:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2); }
.input[aria-invalid="true"], .input-bad { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.input-sm { height: 32px; font-size: var(--fs-sm); }
.input-wrap { position: relative; display: flex; align-items: center; flex: 1 1 auto; }
.input-wrap > .ic-sm { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.input-wrap .input { padding-left: 38px; }
.select { height: 38px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line-ui); background: var(--surface); cursor: pointer; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.select:hover { border-color: var(--muted); }
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.select:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2); }
.select-sm { height: 32px; font-size: var(--fs-sm); }
.kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 5px; font-size: var(--fs-xs); color: var(--muted); background: var(--surface-2); font-weight: 600; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.btn:hover { background: var(--row-hover); border-color: var(--line-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--surface); border-color: var(--line-strong); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--glow-hover); transform: translateY(-1px); }
.btn-primary:disabled:hover, .btn-primary[disabled]:hover { background: var(--accent); border-color: var(--accent); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-ghost.btn-danger:hover { border-color: transparent; }
.btn-sm { height: 32px; padding: 0 10px; font-size: var(--fs-sm); }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-block { width: 100%; }
.btn[aria-pressed="true"], .btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost[aria-pressed="true"] { border-color: transparent; }

/* Meldungen, Badges, Karten */
/* Eine Komponente fuer Fehlermeldungen: .alert (Anmeldeseiten) und .notice-bad (Huelle) sehen gleich aus */
.alert, .notice-bad { padding: 10px 12px; border-radius: var(--r-sm); background: var(--bad-soft); border: 1px solid var(--bad); color: var(--bad); font-size: var(--fs-sm); font-weight: 500; }
.alert { display: block; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge-sm { height: 20px; padding: 0 8px; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-model { background: var(--teal-soft); color: var(--teal-ink); }
.badge-dim { background: var(--dim-soft); color: var(--dim); }
.badge-line { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2, .card-head h3 { font-size: var(--fs-md); }
.card-hover { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-hover); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); flex: 0 0 auto; }
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-base); }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 56px 24px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.empty-ic { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }

/* Animationen */
.fade-up { animation: fadeUp .55s var(--ease) both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .1s; } .d3 { animation-delay: .15s; } .d4 { animation-delay: .2s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Touch: groessere Ziele auf Geraeten mit grobem Zeiger */
@media (pointer: coarse) { .btn, .input, .select { min-height: 44px; } .btn-icon { min-width: 44px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ladezustand von Absenden-Knoepfen (public/js/forms.js): Spinner im Knopf (auch bei Knoepfen ohne .btn, zum Beispiel
   Abmelden im Menue), Formular gesperrt, Klick nur einmal. Der Knopf bleibt fokussierbar (aria-disabled). */
[aria-busy="true"] { cursor: progress; }
/* Gesperrt: keine Hover-/Active-Effekte (kein Anheben, keine Hintergrundaenderung) */
[aria-busy="true"]:hover, [aria-busy="true"]:active { transform: none; box-shadow: none; }
.btn[aria-busy="true"]:hover { background: var(--surface); border-color: var(--line-strong); }
.btn-primary[aria-busy="true"]:hover { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.btn-ghost[aria-busy="true"]:hover { background: transparent; border-color: transparent; }
.sb-link[aria-busy="true"]:hover { background: transparent; }
[aria-busy="true"] > .ic, [aria-busy="true"] > .ic-sm { display: none; }
[aria-busy="true"]::before { content: ''; display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: btnSpin .7s linear infinite; }
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Kein Drehen: statt des Rings " ..." hinter dem Text, nur wenn der Text nicht schon mit "..." endet (data-loading-text) */
  [aria-busy="true"]::before { content: none; }
  [aria-busy="true"]:not([data-original-html])::after { content: ' \2026'; }
}

/* Bestaetigung per Texteingabe: der Knopf bleibt gesperrt (aria-disabled), bis das Wort passt (public/js/forms.js) */
.btn[aria-disabled="true"]:not([aria-busy="true"]) { opacity: .55; cursor: not-allowed; }
.btn-danger[aria-disabled="true"]:not([aria-busy="true"]):hover { background: var(--surface); border-color: var(--line-strong); }
.typed-confirm { max-width: 360px; margin-top: 4px; }