/* Gemeinsame Design-Werte fuer die oeffentlichen Seiten (Startseite, Login). Dunkel ist der Standard. */
:root { color-scheme: dark; --grid: rgba(255,255,255,.035); --pill: rgba(17,22,31,.75); --orb-a: rgba(76,201,240,.22); --orb-b: rgba(179,136,255,.20); --btn-text: #06202a; --shadow: 0 20px 60px rgba(0,0,0,.35); --tint: rgba(76,201,240,.16); }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb; --card: #ffffff; --border: #d2dbe8; --text: #0f1722; --muted: #52637a;
  --accent: #0369a1; --accent2: #6d28d9; --ok: #15803d; --bad: #b91c1c; --field: #ffffff; --track: #e3e9f2;
  --grid: rgba(15,23,34,.06); --pill: rgba(255,255,255,.85); --orb-a: rgba(3,105,161,.15); --orb-b: rgba(109,40,217,.12);
  --btn-text: #ffffff; --shadow: 0 20px 50px rgba(15,23,34,.10); --tint: rgba(3,105,161,.12);
}

/* Leiste oben rechts: Sprache und Design */
.topbar { position: relative; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 16px 20px 0; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--pill); backdrop-filter: blur(6px); }
.seg button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: var(--text); background: var(--tint); }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--muted); background: var(--pill); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; backdrop-filter: blur(6px); }
.iconbtn:hover { color: var(--text); }
.iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .sun { display: none; }
:root[data-theme="light"] .iconbtn .moon { display: none; }
:root[data-theme="light"] .iconbtn .sun { display: block; }
.seg button:focus-visible, .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }