/* Training-Mate — geteilte Basis-Styles für alle Seiten unter public/.
   Nicht mehr pro Seite kopieren: hier ergänzen, jede Seite bindet diese Datei
   per <link rel="stylesheet" href="/app.css"> VOR ihrem eigenen <style>-Block
   ein, damit seitenspezifische Overrides (z. B. eine abweichende .page
   max-width) per Kaskade weiterhin gewinnen. Siehe MEMORY.md, 25.09.2026
   (Abschnitt 4 der Architektur-Analyse). */

:root {
  --clinical: #123C69;
  --wash:     #B8D7EA;
  --mist:     #B6CED5;
  --veil:     #D6EAF5;
  --linen-b:  #EEF2ED;
  --canvas:   #fffefc;
  --hairline: #e5e7eb;
  --charcoal: #222222;
  --red:      #c0392b;
  --green:    #2e7d32;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--canvas);
  color: var(--charcoal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  letter-spacing: -0.02em;
}
main { flex: 1; }

/* ── Page-Rahmen ──────────────────────────────────────────────────────────
   max-width ist bewusst pro Seite unterschiedlich (Formulare schmaler als
   Tabellen-Listen) — kein Kopierfehler. Seiten mit abweichender Breite
   überschreiben NUR die eine Zeile lokal, nicht die ganze Regel. */
.page { max-width: 1100px; margin: 0 auto; padding: 64px 48px 100px; flex: 1; }
.page-title { font-family: 'Fraunces', serif; font-size: clamp(36px, 4vw, 52px); font-weight: 300; color: var(--clinical); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 8px; }
.page-sub { font-size: 16px; font-weight: 400; color: rgba(34,34,34,.45); letter-spacing: -0.02em; }
/* .page-header bleibt bewusst lokal pro Seite: der Name ist gleich, das
   Layout dahinter nicht (Flex-Zeile mit Aktions-Button bei dashboard/
   softskills, reines margin-bottom bei organization/settings/
   report-freischaltung, ein komplett anderes Hero-Padding bei team.html). */

/* ── Card ─────────────────────────────────────────────────────────────────
   Nur die gemeinsamen Basis-Eigenschaften. overflow/padding unterscheiden
   sich absichtlich zwischen Tabellen-Cards (overflow: hidden) und
   Formular-/Content-Cards (padding + margin-bottom) — bleibt lokal. */
.card { background: var(--canvas); border-radius: 20px; border: 1px solid var(--hairline); }
.card-header { padding: 28px 36px 24px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-header h2 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 300; color: var(--clinical); letter-spacing: -0.03em; }
.card-header p { font-size: 14px; font-weight: 400; color: rgba(34,34,34,.45); margin-top: 4px; }

/* ── Badge (Status-Pills: erledigt/läuft/wartet/fehler) ── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 400; white-space: nowrap; flex-shrink: 0; line-height: 1; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-done    { background: #e6f4ea; color: #1a7f37; } .badge-done .badge-dot    { background: #2ea04b; }
.badge-running { background: #fff3cd; color: #856404; } .badge-running .badge-dot { background: #f0a500; animation: pulse 1.2s ease-in-out infinite; }
.badge-pending { background: var(--linen-b); color: rgba(34,34,34,.55); } .badge-pending .badge-dot { background: rgba(34,34,34,.3); }
.badge-error   { background: #fce8e8; color: var(--red); } .badge-error .badge-dot   { background: var(--red); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Spinner ── */
.spinner { width: 28px; height: 28px; border: 2px solid rgba(18,60,105,.12); border-top-color: var(--clinical); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── showToast() aus utils.js schreibt in #toast; ohne dieses
   Element im body bleiben Meldungen auf der jeweiligen Seite stumm.
   Vereinheitlicht auf die Pill-Form (5 von 7 Seiten), inkl. Slide-in aus
   der Dashboard-Fassung und durchgängig var(--red) für den Fehlerzustand. */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--charcoal); color: #fff;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 400;
  opacity: 0; transition: opacity .3s, transform .3s;
  pointer-events: none; white-space: nowrap;
  max-width: calc(100vw - 32px);
  z-index: 100;
}
.toast.error { background: var(--red); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Rechts-Seiten (agb/impressum/datenschutz) ── */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 64px 48px 120px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: rgba(18,60,105,.6); text-decoration: none; margin-bottom: 40px; transition: color .2s; }
.back-link:hover { color: var(--clinical); }
.back-link svg { stroke: currentColor; }
.page-badge { display: inline-block; background: var(--linen-b); color: rgba(18,60,105,.7); font-size: 13px; font-weight: 400; border-radius: 999px; padding: 5px 14px; margin-bottom: 16px; letter-spacing: -0.01em; }
.page-wrap h1 { font-family: 'Fraunces', serif; font-size: clamp(32px, 4.5vw, 52px); font-weight: 300; color: var(--clinical); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline); }
.page-wrap h2 { font-family: 'Fraunces', serif; font-size: clamp(18px, 2vw, 24px); font-weight: 300; color: var(--clinical); letter-spacing: -0.02em; line-height: 1.2; margin: 36px 0 12px; }
.page-wrap p { font-size: 16px; font-weight: 400; color: rgba(34,34,34,.75); line-height: 1.75; letter-spacing: -0.02em; margin-bottom: 16px; }
.page-wrap p:last-child { margin-bottom: 0; }
.page-wrap a { color: var(--clinical); }
.page-wrap ul { font-size: 16px; font-weight: 400; color: rgba(34,34,34,.75); line-height: 1.75; letter-spacing: -0.02em; margin-bottom: 16px; padding-left: 20px; }
.page-wrap ul li { margin-bottom: 6px; }
.page-wrap .meta { margin-top: 48px; font-size: 13px; color: rgba(34,34,34,.35); }

/* ── Footer ── */
.site-footer-simple { border-top: 1px solid var(--hairline); padding: 20px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer-simple-copy { font-size: 12px; color: rgba(34,34,34,.35); }
.site-footer-simple-links { display: flex; gap: 20px; }
.site-footer-simple-links a { font-size: 12px; color: rgba(34,34,34,.4); text-decoration: none; transition: color .2s; }
.site-footer-simple-links a:hover { color: var(--charcoal); }

@media (max-width: 768px) {
  .page { padding: 32px 20px 60px; }
  .card-header { padding: 20px; }
  .site-footer-simple { flex-direction: column; gap: 12px; text-align: center; padding: 20px; }
}