/* ==========================================================
   Design-Tokens & Grundstile – warmes Creme & Grau
   ========================================================== */
:root {
  color-scheme: light;

  /* Flächen */
  --bg: #f3eee5;
  --bg-raised: #ebe5d9;
  --card: #fbf9f4;
  --surface: rgba(59, 52, 43, .035);
  --surface-2: rgba(59, 52, 43, .06);
  --surface-3: rgba(59, 52, 43, .1);
  --inset: #f1ece2;
  --border: #e3dbcc;
  --border-strong: #d4cab8;

  /* Text */
  --text: #2d2a26;
  --text-2: #6b655c;
  --text-3: #9b948a;

  /* Gedämpfte Akzente (Namen bleiben für den bestehenden Code gleich) */
  --violet: #7d7468;
  --cyan: #6b8591;
  --pink: #b07a6e;
  --green: #6f8f7a;
  --amber: #b8904a;
  --red: #b9533f;
  --accent: #3b3833;
  --on-accent: #fbf9f4;
  --grad: #3b3833;
  --grad-soft: rgba(59, 56, 51, .07);
  --amber-text: #8a6a33;
  --glass: rgba(251, 249, 244, .92);
  --glow-a: rgba(255, 255, 255, .55);
  --glow-b: rgba(214, 202, 182, .35);

  /* Eintragsarten */
  --t-hw: #6f8f7a;
  --t-test: #b8904a;
  --t-exam: #b06a55;
  --t-other: #737d8c;

  /* Form */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --shadow: 0 1px 2px rgba(60, 50, 40, .05), 0 10px 28px -18px rgba(60, 50, 40, .28);
  --shadow-lg: 0 24px 60px -24px rgba(60, 50, 40, .35);
  --focus: 0 0 0 4px rgba(59, 56, 51, .12);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sidebar-w: 256px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Dunkles Design: warmes Anthrazit statt Creme ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1a17;
  --bg-raised: #211f1b;
  --card: #292622;
  --surface: rgba(255, 245, 230, .035);
  --surface-2: rgba(255, 245, 230, .065);
  --surface-3: rgba(255, 245, 230, .11);
  --inset: #232120;
  --border: #36322c;
  --border-strong: #4a453d;
  --text: #ece6db;
  --text-2: #aba395;
  --text-3: #7e776c;
  --violet: #a39888;
  --cyan: #8ea6b0;
  --pink: #c99487;
  --green: #8fae98;
  --amber: #cfa75f;
  --red: #d4705b;
  --amber-text: #d9b878;
  --accent: #ece6db;
  --on-accent: #1f1d1a;
  --grad: #ece6db;
  --grad-soft: rgba(255, 245, 230, .07);
  --glass: rgba(41, 38, 34, .92);
  --t-hw: #8fae98;
  --t-test: #cfa75f;
  --t-exam: #c98470;
  --t-other: #9aa3b2;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -18px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --focus: 0 0 0 4px rgba(236, 230, 219, .12);
  --glow-a: rgba(255, 245, 230, .03);
  --glow-b: rgba(0, 0, 0, .25);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
  color-scheme: dark;
  --bg: #1c1a17;
  --bg-raised: #211f1b;
  --card: #292622;
  --surface: rgba(255, 245, 230, .035);
  --surface-2: rgba(255, 245, 230, .065);
  --surface-3: rgba(255, 245, 230, .11);
  --inset: #232120;
  --border: #36322c;
  --border-strong: #4a453d;
  --text: #ece6db;
  --text-2: #aba395;
  --text-3: #7e776c;
  --violet: #a39888;
  --cyan: #8ea6b0;
  --pink: #c99487;
  --green: #8fae98;
  --amber: #cfa75f;
  --red: #d4705b;
  --amber-text: #d9b878;
  --accent: #ece6db;
  --on-accent: #1f1d1a;
  --grad: #ece6db;
  --grad-soft: rgba(255, 245, 230, .07);
  --glass: rgba(41, 38, 34, .92);
  --t-hw: #8fae98;
  --t-test: #cfa75f;
  --t-exam: #c98470;
  --t-other: #9aa3b2;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -18px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --focus: 0 0 0 4px rgba(236, 230, 219, .12);
  --glow-a: rgba(255, 245, 230, .03);
  --glow-b: rgba(0, 0, 0, .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  touch-action: manipulation; /* kein Doppeltipp-Zoom auf dem iPad */
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 15.5px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; font-optical-sizing: auto; }
p { margin: 0; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg, canvas { display: block; }
::selection { background: rgba(184, 144, 74, .28); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(59, 52, 43, .18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(59, 52, 43, .16); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

/* Dezente Papier-Struktur im Hintergrund */
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 0% 0%, var(--glow-a), transparent 70%),
    radial-gradient(800px 600px at 100% 100%, var(--glow-b), transparent 70%);
}

/* Icons */
.i { width: 18px; height: 18px; flex: none; }
.i-sm { width: 15px; height: 15px; }
.i-lg { width: 22px; height: 22px; }

/* Hilfsklassen */
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.grad-text { color: var(--text); font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.stack { display: grid; gap: 12px; }

/* Schieberegler (groß genug für Finger und Pencil) */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: none; margin: 0; cursor: pointer; touch-action: none; --p: 50%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--p), var(--surface-3) var(--p)); }
.range::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--p), var(--surface-3) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--card); border: 1px solid var(--border-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 1px solid var(--border-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Ergänzungen der neuen Version ---------- */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --tabbar-h: 80px;
  --panic-space: 72px;
}
[hidden] { display: none !important; }
.grow { flex: 1; min-width: 0; }
.nowrap { flex-wrap: nowrap; }
.small { font-size: 13.5px; }
.num { font-variant-numeric: tabular-nums; }
.i-sm { width: 15px; height: 15px; }
.i { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }