/* Tafelgrün: gemeinsame Farben, Schriften und Bausteine von Mathebaustein.
   Dunkel ist der Standard, <html data-mode="light"> schaltet auf hell. */
@font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('fonts/Lexend-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('fonts/Lexend-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('fonts/Lexend-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* Dunkel: Tafel bei Nacht */
  --bg: #121d1a; --board: #17261f; --surface: #1c2e28; --raised: #233a33; --line: #2f4840;
  --ink: #eef1ea; --muted: #a6b6ad; --faint: #7d8f86;
  --chalk: #f2d16b; --chalk-ink: #1a1606; --moss: #8fbea4; --ok: #8fd19e; --warn: #f0a07a; --amber: #f2d16b;
  --dust: rgba(238, 241, 234, .035);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Lexend', -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
:root[data-mode="light"] {
  --bg: #f7f8f4; --board: #1f3d36; --surface: #ffffff; --raised: #eef2ec; --line: #d3ddd6;
  --ink: #1c2b27; --muted: #4a5a56; --faint: #6b7c78;
  --chalk: #1f3d36; --chalk-ink: #f7f8f4; --moss: #3f7a5e; --ok: #2e7d4f; --warn: #b4532f; --amber: #c8901a;
  --dust: rgba(31, 61, 54, .035);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
img { max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.gut { padding-inline: 16px; }
.max { max-width: 1120px; margin: 0 auto; }

/* Marke */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand svg { width: 38px; height: 38px; flex-shrink: 0; }
.wm { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.015em; line-height: 1; }
.wm em { font-style: italic; font-weight: 600; color: var(--chalk); }
:root[data-mode="light"] .wm em { color: var(--moss); }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 11px 18px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; font-family: var(--body); text-align: center; }
.btn.main { background: var(--chalk); color: var(--chalk-ink); }
.btn.ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn.small { padding: 7px 14px; font-size: 14px; border-radius: 10px; }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Schalter Dunkel/Hell */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; background: var(--surface); }
.seg button { border: 0; background: none; color: var(--muted); padding: 5px 12px; border-radius: 99px; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }

/* Etiketten */
.tag { font-family: var(--body); letter-spacing: 0; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; white-space: nowrap; }
.tag.pro, .tag.soon { background: var(--chalk); color: var(--chalk-ink); border-color: var(--chalk); font-weight: 600; }

/* Brüche */
.fr { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; vertical-align: middle; }
.fr > span:first-child { border-bottom: 2px solid currentColor; padding: 0 4px 2px; }
.fr > span:last-child { padding-top: 2px; }

/* Kopfzeile der Unterseiten (Nachhilfe, Anmelden, Konto, Admin) */
.topnav { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topnav .max { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; padding-block: 12px; flex-wrap: wrap; }
.links { display: flex; gap: 18px; align-items: center; font-size: 14.5px; color: var(--muted); flex-wrap: wrap; }
.links a { color: inherit; text-decoration: none; } .links a:hover, .links a[aria-current] { color: var(--ink); }

/* Karten und Formulare */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field small { color: var(--faint); font-size: 13px; }
.in { font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; width: 100%; min-width: 0; }
.in:focus { outline: none; border-color: var(--moss); }
select.in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.err { color: var(--warn); font-size: 14.5px; margin: 0; min-height: 1em; }
.okmsg { color: var(--ok); font-size: 14.5px; margin: 0; }
.demo-note { font-size: 13px; color: var(--faint); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; }
h1.page { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.06; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1.page em { font-style: italic; font-weight: 600; color: var(--chalk); }
:root[data-mode="light"] h1.page em { color: var(--moss); }

/* Handy: Die Kopfzeile ist dort mehrzeilig. Sie klebt dann nicht oben, damit Sprungmarken (z. B. „Freie Termine“) nicht unter ihr landen. */
@media (max-width: 640px) { .topnav, header.nav { position: static; } .topnav .links { gap: 4px 14px; } .topnav .links a { min-height: 40px; display: inline-flex; align-items: center; } }