/* === App Layout === */
/* Screen structure, navigation, responsive */

/* --- Nebula (omnipresent background) --- */
.nebula-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--nebula-opacity, 1);
  transition: opacity 0.5s ease;
}
.nebula-bg canvas { width: 100%; height: 100%; display: block; }

/* --- App Shell --- */
.app-shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 08.10.2026 (Architekt, iPhone-Webapp: „Abstand unten riesig"): Als Startbildschirm-App mit durchsichtiger Statusleiste rechnet iOS
   100dvh OHNE den oberen Sicherheitsbereich, die App beginnt aber ganz oben ⇒ unten fehlte genau diese Höhe (~50–60 px leer unter der
   Fussleiste). Als App deshalb fest von Kante zu Kante statt über eine Höhe. */
html[data-appart=pwa] .app-shell, html[data-appart=tauri][data-ios] .app-shell { position: fixed; inset: 0; height: auto; }

/* --- Screens (one visible at a time) --- */
.screen {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0; /* Kritisch fuer Flex-Scroll */
}
.screen.active {
  display: flex;
}
/* Screen-Content Wrapper muessen auch min-height:0 haben */
.screen > div { min-height: 0; }

/* Screen container */
.screen-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Screen scroll area */
.screen-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* --- Top Bar (minimal) --- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
  z-index: 10;
}
.top-bar-left { display: flex; align-items: center; gap: 8px; }
.top-bar-right { display: flex; align-items: center; gap: 6px; }

/* Topbar Icon-Status Buttons */
.topbar-icon-status {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.topbar-icon-status:hover { color: var(--gold); }
.topbar-icon-status:active { transform: scale(0.9); }
.topbar-icon-status.mode-online { color: var(--green); }
.topbar-icon-status.mode-offline { color: var(--gold); }
.topbar-icon-status.mode-hybrid { color: var(--blue); }
.topbar-icon-status.mode-guest { color: var(--text2); }

/* Theme Icons (dark=Mond, light=Sonne, auto=Halbkreis) */
.theme-icon { display: none; }
/* Default (dark): Mond zeigen */
.theme-icon-moon { display: block; }
/* Light: Sonne zeigen */
[data-theme=light] .theme-icon-moon { display: none; }
[data-theme=light] .theme-icon-sun { display: block; }
/* Auto: wird per JS gesteuert — data-theme-mode Attribut */
[data-theme-mode=auto] .theme-icon-moon,
[data-theme-mode=auto] .theme-icon-sun { display: none; }
[data-theme-mode=auto] .theme-icon-auto { display: block; }

/* --- App Footer (Input + Tabs als eine Einheit) --- */
.app-footer {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Input-Leiste */
.app-footer-input {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 4px;
  padding: 4px 6px 4px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.2s, box-shadow 0.2s, margin 0.2s, padding 0.2s;
  max-height: 44px;
  overflow: hidden;
}
.app-footer-input:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
  max-height: 80px;
  /* 03.10.2026 (MD 62 §20.1): Bisher `margin: 12px 12px 6px` — die Kurzschreibweise ueberschrieb die Zentrierung
     (margin-left/right:auto am Desktop) ⇒ das Feld sprang beim Antippen nach links. Nur oben/unten aendern. */
  margin-top: 12px; margin-bottom: 6px;
  padding: 8px 6px 8px 16px;
}
.app-footer-input :is(input, textarea) {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 16px; /* >= 16px verhindert iOS Auto-Zoom */
  padding: 8px 4px;
  outline: none;
  font-family: inherit;
  min-width: 0;
}
.app-footer-input :is(input, textarea)::placeholder { color: var(--text2); }

.app-footer-send {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.app-footer-send:hover { opacity: 0.85; }
.app-footer-send:active { transform: scale(0.92); }
/* 01.10.2026: Stopp waehrend Helmut spricht · Rueckweg aus den Einstellungen in den Chat */
.app-footer-send.app-footer-stopp { background: var(--red, #e5484d); margin-right: 6px; }
/* Speichern steht im Kopf bzw. schwebend (Handy) — der zweite Knopf im Inhalt waere doppelt */
#settingsBody .entwurf-leiste #entwurfSpeichern { display: none; }

.app-footer-mic {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
}
.app-footer-mic:hover { color: var(--gold); }
.app-footer-mic.recording {
  background: var(--red);
  color: #fff;
  animation: micPulse 1s infinite;
}
@keyframes micPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Tab-Leiste */
.app-footer-tabs {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 2px 8px 0;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 4px;
  min-width: 64px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 11.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tab-item.active { color: var(--gold); }
.tab-item.active svg { fill: var(--gold); }
.tab-item svg { fill: var(--text2); }
.tab-item:active { transform: scale(0.9); }
.tab-item svg { width: 22px; height: 22px; transition: stroke 0.15s; }

/* Hidden file input */
.file-input-hidden { display: none; }

/* --- Desktop Sidebar (>768px only) --- */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .app-shell {
    flex-direction: row;
  }
  .app-shell > .sidebar-desktop {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 8px;
    overflow-y: auto;
  }
  .app-shell > .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }
  .app-footer-tabs { display: none; }
  .app-footer-input {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .sidebar-icon { margin-right: 8px; vertical-align: -2px; opacity: 0.7; }
  .chat-history-item:hover .sidebar-icon { opacity: 1; }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .sidebar-desktop { display: none; }
  .app-shell { flex-direction: column; }
  .app-shell > .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* Flex-Scroll-Chain */
  }
  .top-bar { padding: 6px 12px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
  .screen { padding-bottom: 0; }
  /* Screens brauchen Padding fuer Footer */
  #screenBrain .full-panel-body,
  #screenTeacher > div:last-child,
  #screenWorkspace > div:last-child,
  #screenSettings > div:last-child,
  #brainBody, #teacherBody, #workspaceBody, #settingsBody {
    padding-bottom: 8px;
  }
}

/* --- Fullscreen Panel (for Brain/Teacher/Settings) --- */
.full-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: panelIn 0.25s ease;
}
@keyframes panelIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: none; } }
.full-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.full-panel-header-flat {
  position: relative;
  border: none;
}
.full-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* --- Popup Overlay --- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.popup-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: 90%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: popupIn 0.2s ease;
}
@keyframes popupIn { from { transform: scale(0.95) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  /* 14.10.2026: hier stand ein Vollbild fuer JEDES Fenster (auch Ja/Nein, ohne Safe-Area). Jetzt Blatt von unten —
     zentral im Fenstersystem am Ende von css/screens.css (MD 62 §60). */
}

/* --- Splash --- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  transition: opacity 0.8s ease;
}
.splash.out { opacity: 0; pointer-events: none; }
.splash img {
  width: clamp(180px, 40vw, 280px);
  height: auto;
  filter: drop-shadow(0 0 20px var(--gold-glow));
  animation: splashIn 0.6s 0.1s both;
}
@keyframes splashIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }
/* 01.10.2026: Slogan unter dem Logo — Systemschrift, keine Web-Schrift (jedes Endgeraet, offline).
   Absolut unter dem Logo, damit das Logo exakt mittig bleibt (splash.js baut es dort aus Partikeln). */
.splash-slogan {
  position: absolute; left: 0; right: 0;
  top: calc(50% + clamp(90px, 20vw, 140px) + 18px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; pointer-events: none; padding: 0 16px;
}
.splash-gruss { font-size: clamp(17px, 2.6vw, 22px); font-weight: 600; color: var(--text, #f2f2f5); letter-spacing: .02em; margin-bottom: 4px; }
.splash-gruss:empty { display: none; }
/* 01.10.2026: „Mit Ton" — nur sichtbar, wenn der Browser Ton ohne Beruehrung sperrt (Autoplay-Regel) */
.splash-ton { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(255,255,255,.06); color: var(--text2, #a8a8b3); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; letter-spacing: .04em; cursor: pointer; }
.splash-ton:hover { color: var(--gold); border-color: var(--gold-soft); }
.splash-slogan span { font-size: clamp(15px, 2.2vw, 20px); font-weight: 500; letter-spacing: .06em; color: var(--gold); }
.splash-slogan small { font-size: clamp(11px, 1.4vw, 13px); letter-spacing: .22em; text-transform: uppercase; color: var(--text2, #a8a8b3); opacity: .8; }

/* --- Login --- */
.login-view {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.login-card {
  max-width: 380px;
  width: 100%;
  padding: 40px 32px;
  text-align: center;
}
.login-card .login-logo {
  display: block;
  width: clamp(120px, 35vw, 180px);
  margin: 0 auto 20px;
  filter: drop-shadow(0 0 12px var(--gold-glow));
}
.login-card .login-tagline {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 24px;
}
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .login-card { max-width: 420px; padding: 48px 40px; }
}

/* --- Login inline-style replacements --- */
.login-conn-status { margin-bottom: 8px; min-height: 18px; }
.login-code-input { text-align: center; font-size: 17px; letter-spacing: 1px; }
.login-hint { min-height: 20px; margin-top: 8px; }
.login-about { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 20px; text-align: center; }
.login-btn-full { width: 100%; margin-top: 12px; padding: 12px; }
.login-btn-row { display: flex; gap: 12px; margin-top: 16px; }
.login-help { font-size: 11px; color: var(--text2); margin-top: 16px; text-align: center; line-height: 1.5; }
/* 20.10.2026 Unterzeile wie smarthomeconsulting.ch: dezent, Trennlinie, Links hell bei Hover; Farben aus Tokens (hell/dunkel). */
.legal-zeile { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border, rgba(127,127,127,.25)); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; line-height: 1.5; color: var(--text2); text-align: center; }
.legal-zeile-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.legal-zeile-links span { opacity: .4; }
.legal-zeile a { color: var(--text2); text-decoration: none; text-underline-offset: 3px; transition: color .15s; }
.legal-zeile a:hover, .legal-zeile a:focus-visible { color: var(--text); text-decoration: underline; }
.legal-zeile-seite { margin-top: auto; padding: 10px 12px 12px; font-size: 10.5px; }
/* 24.10.2026 (KM-M10): in der schmalen Seitenleiste bricht die Zeile um — der Trenner „|" stand dann allein vor „Datenschutz".
   Dort trennt der Abstand statt des Strichs (Trenner bleiben im HTML fuer die breite Anmeldeseite). */
.legal-zeile-seite .legal-zeile-links { gap: 2px 12px; }
.legal-zeile-seite .legal-zeile-links > span[aria-hidden] { display: none; }
.login-btn-half { flex: 1; }
.login-caption-mt { margin-top: 12px; }
.login-reg-input { margin-bottom: 8px; }

/* --- Register success --- */
.reg-success-wrap { padding: 12px 0; text-align: center; }
.reg-welcome { font-size: 18px; font-weight: 600; color: var(--gold); }
.reg-code { font-size: 20px; font-weight: 700; letter-spacing: 2px; margin-top: 8px; }
.reg-hint { margin-top: 4px; }
.reg-hxa { font-size: 13px; font-family: monospace; }

/* --- Setup bar --- */
.setup-wrap { margin-top: 20px; }
.setup-bar-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.setup-bar-fill { height: 100%; background: var(--gold); width: 0%; transition: width .5s; }
.setup-step { margin-top: 8px; }

/* --- Sidebar inline-style replacements --- */
/* 01.10.2026: Logo aus logo.svg — Zeichen + Schriftzug nebeneinander */
.sidebar-brand, .topbar-marke { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.sidebar-brand .brand-zeichen { height: 34px; width: auto; }
.sidebar-brand .brand-schrift { height: 17px; width: auto; margin-top: 2px; }
.topbar-marke { display: none; }
.topbar-marke .brand-zeichen { height: 26px; width: auto; }
.topbar-marke .brand-schrift { height: 13px; width: auto; margin-top: 1px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .topbar-marke { display: inline-flex; } }
.sidebar-label { padding: 4px 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.sidebar-sep { height: 1px; background: var(--border); margin: 8px; }

/* --- Small Phones (max-width: 380px) --- */
@media (max-width: 380px) {
  .app-footer-input { margin: 6px 8px 2px; padding: 3px 4px 3px 12px; max-height: 40px; }
  .app-footer-input :is(input, textarea) { font-size: 16px; padding: 6px 4px; }   /* 03.10.2026: Bisher 15px — unter 16px zoomt iOS beim Antippen und die Seite rutscht */
  .app-footer-send, .app-footer-mic { width: 30px; height: 30px; }
  .top-bar { padding: 4px 10px; padding-top: calc(4px + env(safe-area-inset-top, 0px)); }
  .helmut-orb { width: 24px; height: 24px; }
  .helmut-pulse-name { font-size: 13px; }
  .tab-item { min-width: 52px; font-size: 9px; }
  .tab-item svg { width: 20px; height: 20px; }
}

/* --- Tablets (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) and (min-height: 501px), (min-width: 769px) and (max-width: 1024px) and (pointer: fine) {
  .app-shell > .sidebar-desktop { width: 200px; }
  .app-footer-input { max-width: 560px; }
}

/* --- Large Desktops (1400px+) --- */
@media (min-width: 1400px) {
  .app-footer-input { max-width: 800px; }
  .messages-inner { max-width: 840px; }
  .nebula-bg canvas { image-rendering: optimizeQuality; }
}

/* --- Landscape Phones --- */
@media (max-height: 500px) and (orientation: landscape) {
  .top-bar { padding: 4px 12px; }
  .app-footer-input { max-height: 36px; }
  .app-footer-tabs { padding: 0 8px; }
  .tab-item { padding: 4px 0 2px; }
  .tab-item svg { width: 18px; height: 18px; }
  .tab-item span { font-size: 8px; }
}

/* 14.10.2026 (Architekt: „Querformat Handy ist falsch“): die Handy-/Desktop-Grenze gilt jetzt auch für Touch-Geräte mit
   höchstens 500 px Höhe (Handy quer) — vorher bekamen sie bei 844 px Breite die Desktop-Ansicht mit Seitenleiste. Maus-Geräte unverändert. */
/* --- Print --- */
@media print {
  .nebula-bg, .app-footer, .top-bar, .sidebar-desktop { display: none; }
  .screen { overflow: visible; }
  .app-shell { height: auto; overflow: visible; }
}

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .helmut-orb { animation: none; }
  .nebula-bg { opacity: 0.3; }
}

/* --- Accessibility: High Contrast --- */
@media (prefers-contrast: high) {
  :root { --border: rgba(255,255,255,0.2); --glass-border: rgba(255,255,255,0.15); }
  [data-theme=light] { --border: rgba(0,0,0,0.2); --glass-border: rgba(0,0,0,0.15); }
}

/* --- Tauri Window Controls Overlay --- */
@media (display-mode: window-controls-overlay) {
  .top-bar {
    padding-left: env(titlebar-area-x, 16px);
    padding-top: env(titlebar-area-y, 0px);
    height: env(titlebar-area-height, auto);
    -webkit-app-region: drag;
  }
  .top-bar button, .top-bar input { -webkit-app-region: no-drag; }
}

/* ===================================================================
   01.10.2026 — DURCHGEHENDE KOPFLEISTE + EINKLAPPBARE SEITENLEISTE
   Die App ist ein Raster: Kopf ueber die ganze Breite, darunter Seitenleiste + Inhalt.
   (Architekt: „durchgaengige Taskleiste/Header, Zahnrad oben, Menuename oben,
   Seitenleiste zum Minimieren")
   =================================================================== */
.app-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.app-kopf { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); min-height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--border); z-index: 10;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.app-shell > .main-content { grid-row: 2; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.kopf-marke { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex: 0 0 auto; }
.kopf-marke .brand-zeichen { height: 30px; width: auto; }
.kopf-marke .brand-schrift { height: 15px; width: auto; margin-top: 2px; }
.kopf-trenner { width: 1px; height: 22px; background: var(--border); margin: 0 4px; flex: 0 0 auto; }
.kopf-titel { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kopf-zurueck, .kopf-schliessen { height: 32px; width: auto; min-width: 32px; padding: 0 10px; gap: 6px; flex: 0 0 auto; display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; }
.kopf-schliessen { margin-left: 4px; }
.kopf-speichern { height: 32px; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; font-weight: 600;
  flex: 0 0 auto; margin-left: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-dim, var(--text)); }
.kopf-speichern.offen { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }
.kopf-speichern:disabled { opacity: .7; cursor: default; }
.kopf-knopf-text { white-space: nowrap; }
/* Schwebende Rundknoepfe — nur schmal */
.schwebe-aktionen { display: none; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .kopf-knopf-text { display: none; }
  .kopf-zurueck, .kopf-schliessen { display: none !important; }
  .kopf-speichern { display: none; }
  .schwebe-aktionen { position: fixed; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    display: flex; flex-direction: column; gap: 10px; }
  .schwebe-aktionen.hidden { display: none; }
  .schwebe-knopf { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg, 0 4px 14px rgba(0,0,0,.35));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .schwebe-knopf.hidden { display: none; }
  .schwebe-speichern { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }
  .schwebe-zahl { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #c0392b; color: #fff;
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
  .schwebe-zahl:empty { display: none; }
}
.kopf-kontext { width: auto; max-width: 160px; height: 30px; padding: 2px 8px; font-size: 13px; margin-right: 6px; }
/* 02.10.2026 (W3V): Rollen-Abzeichen in der Kopfleiste (aus /api/ich) */
.kopf-abzeichen { font-size: 12px; font-weight: 600; color: var(--gold); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .kopf-abzeichen { display: none; } }
/* 04.10.2026: Abzeichen ist ein Knopf (zum Profil) */
button.kopf-abzeichen { background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
button.kopf-abzeichen:hover, button.kopf-abzeichen:focus-visible { background: var(--gold-soft); outline: none; }
.einricht-willkommen { border: 1px solid var(--gold); }
/* 02.10.2026: Ersteinrichtung (MD 72 Phase 3) + Schluesseldatei einlesen (Phase 2) */
.einricht-box { padding: 24px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.einricht-box .popup-btn { width: 100%; }
.einricht-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.einricht-zeile input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.einricht-zeile input:disabled + span { opacity: .5; }
.htx-ablage { display: block; padding: 18px 12px; margin: 8px 0; border: 1px dashed var(--border); border-radius: var(--r-md, 10px); text-align: center; cursor: pointer; font-size: .9em; word-break: break-all; }
.htx-ablage:focus-visible, .htx-ablage.ueber { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); outline: none; }
/* 02.10.2026: Stammbaum (MD 72 Phase 4) */
.stammbaum { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0; }
.sb-kopf { font-size: .85em; opacity: .8; }
.sb-ebene { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sb-person { border: 1px solid var(--border); border-radius: var(--r-md, 10px); padding: 8px 14px; display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.sb-person small { opacity: .75; }
.sb-ich { border-color: var(--gold); }
.sb-linie { width: 2px; height: 18px; background: var(--border); }
/* 02.10.2026: eigener Bestaetigungsdialog (statt confirm) */
.bestaetigen-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.btn-gefahr { background: #c0392b; color: #fff; border: 1px solid #c0392b; }
.btn-gefahr:hover, .btn-gefahr:focus-visible { background: color-mix(in srgb, var(--red) 80%, #000); }
/* 02.10.2026: Gehirn live */
.gehirn-live { margin-bottom: 18px; padding: 0 20px; }
.gl-raster .stat-row { gap: 10px; }
.gl-raster .stat-label { flex: 0 0 auto; white-space: nowrap; }
.gl-raster .stat-value { text-align: right; }
.gl-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gl-raster .glass-card { margin: 0; }
.gl-balken { margin: var(--luft-klein, 8px) 0 8px; height: 6px; }
/* 02.10.2026 Vier-Rollen-Regel: feste Farbe -> Token (folgt Akzentwahl, hell/dunkel) */
.gl-plus { color: var(--gold); /* Bisher #4fd18b */ font-weight: 600; font-size: .9em; }
.gl-minus { color: var(--red); /* Bisher #e07a5f */ font-weight: 600; font-size: .9em; }
.qr-bild { margin-top: 10px; text-align: center; }
.qr-svg { width: 180px; height: 180px; margin-top: 6px; border-radius: 6px; }
.qr-video { width: 100%; max-height: 50vh; border-radius: var(--r-md, 10px); background: #000; }
.kopf-menue { width: 34px; height: 34px; flex: 0 0 auto; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Der Menuename steht oben — die Titelzeilen in den Bereichen entfallen */
.full-panel-header-flat { display: none; }

@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .app-shell { grid-template-columns: var(--sb-breite, 240px) minmax(0, 1fr); }
  .app-shell > .sidebar-desktop { grid-row: 2; grid-column: 1; width: auto; }
  .app-shell > .main-content { grid-column: 2; }
  /* eingeklappt: nur Symbole */
  .app-shell.sb-zu { --sb-breite: 62px; }
  .app-shell.sb-zu .sidebar-label, .app-shell.sb-zu #chatHistory, .app-shell.sb-zu .sidebar-brand { display: none; }
  .app-shell.sb-zu .chat-history-item { font-size: 0; justify-content: center; padding: 10px 0; }
  .app-shell.sb-zu .chat-history-item svg { width: 18px; height: 18px; margin: 0; }
  .app-shell.sb-zu .seiten-start-text { display: none; }
}
@media (min-width: 769px) and (max-width: 1024px) and (min-height: 501px), (min-width: 769px) and (max-width: 1024px) and (pointer: fine) { .app-shell { --sb-breite: 200px; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .kopf-menue, .kopf-marke .brand-schrift { display: none; }
  .kopf-marke .brand-zeichen { height: 26px; }
  .app-kopf { padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); min-height: 46px; }
}
@media print { .app-kopf { display: none; } }

/* Seitenleiste: Chat-Ideen */
.seiten-start { display: flex; flex-direction: column; gap: 1px; }
.seiten-start .chat-history-item { justify-content: flex-start; gap: 10px; padding: 7px 12px; }
.seiten-start .chat-history-item svg { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; }
/* 01.10.2026: Navigation wie „Starten" — linksbuendig, Symbol vor dem Namen, gleiche Groesse */
.sidebar-desktop > .chat-history-item { justify-content: flex-start; gap: 10px; padding: 8px 12px; }
.sidebar-desktop > .chat-history-item svg { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; }

/* 01.10.2026: Logo-Ausschnitt per CSS statt logo.svg#svgView(...) — Chrome behandelte die zwei
   Fragmente derselben Datei als EIN Bild (currentSrc identisch) und zeigte im Schriftzug das Zeichen.
   Masse aus logo.svg (viewBox 2500), korrektes Logo seit 01.10.2026 abends (gemessen): Zeichen x570 y260 1286x1596 ·
   Schriftzug x285 y1858 1945x362. Bisher (altes Mutter-SVG): Zeichen x380 y175 1790x1810 · Schriftzug x280 y1970 2015x385.
   Groesse je Ort nur ueber --h. */
.brand-zeichen, .brand-schrift { display: inline-block; position: relative; overflow: hidden; flex: 0 0 auto; }
.brand-zeichen > img, .brand-schrift > img { position: absolute; max-width: none; width: auto; }
.brand-zeichen { height: var(--h); width: calc(var(--h) * 1286 / 1596); }
.brand-zeichen > img { height: calc(var(--h) * 2500 / 1596); left: calc(var(--h) * -570 / 1596); top: calc(var(--h) * -260 / 1596); }
.brand-schrift { height: var(--h); width: calc(var(--h) * 1945 / 362); }
.brand-schrift > img { height: calc(var(--h) * 2500 / 362); left: calc(var(--h) * -285 / 362); top: calc(var(--h) * -1858 / 362); }
.sidebar-brand .brand-zeichen { --h: 34px; height: var(--h); width: calc(var(--h) * 1286 / 1596); }
.sidebar-brand .brand-schrift { --h: 17px; height: var(--h); width: calc(var(--h) * 1945 / 362); }
.topbar-marke .brand-zeichen { --h: 26px; height: var(--h); width: calc(var(--h) * 1286 / 1596); }
.topbar-marke .brand-schrift { --h: 13px; height: var(--h); width: calc(var(--h) * 1945 / 362); }
.kopf-marke .brand-zeichen { --h: 30px; height: var(--h); width: calc(var(--h) * 1286 / 1596); }
.kopf-marke .brand-schrift { --h: 15px; height: var(--h); width: calc(var(--h) * 1945 / 362); }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .kopf-marke .brand-zeichen { --h: 26px; } }
.kopf-marke .brand-zeichen { filter: drop-shadow(0 0 6px rgba(239,176,0,.25)); }

/* 01.10.2026: Sprache links oben im Kopf — Symbol + Kuerzel, Auswahlliste der 4 Pflichtsprachen */
.kopf-sprache { position: relative; flex: 0 0 auto; }
.kopf-sprache > .btn-icon { display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 0 9px; height: 34px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.sprach-liste, .hilfe-liste { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 170px; padding: 6px; border-radius: 12px;
  background: var(--bg2, #15161b); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 30px rgba(0,0,0,.4); display: grid; gap: 2px; }
.sprach-liste button { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 8px; background: none; border: 0; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.sprach-liste button b { min-width: 26px; color: var(--gold, #c9a227); font-size: 12px; }
.sprach-liste button:hover, .sprach-liste button.aktiv { background: color-mix(in srgb, var(--akzent) 12%, transparent); }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.sprach-liste button small { margin-left: auto; opacity: .6; font-size: 11px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .kopf-sprache > .btn-icon span { display: none; } .kopf-sprache > .btn-icon { padding: 0 8px; } }

/* ══ 01.10.2026: Menue-Unterseite in der Seitenleiste (Hauptmenue → Einstellungen → Abschnitte) ══ */
.menue-unter { display: none; }
.sidebar-desktop.zeigt-unter > :not(#menueUnter) { display: none !important; }
.sidebar-desktop.zeigt-unter > #menueUnter { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.menue-kopf { display: flex; align-items: center; gap: 6px; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menue-kopf .menue-titel { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* 11.10.2026: `anywhere` brach „Einstellunge|n" mitten im Wort */
.menue-kopf .btn-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.menue-liste { overflow-y: auto; padding-bottom: 12px; }
.menue-liste .menue-gruppe { margin: 12px 12px 4px; }
.menue-liste .menue-eintrag { justify-content: flex-start; gap: 10px; padding: 9px 12px; line-height: 1.3; white-space: normal; }
.menue-liste .menue-eintrag svg { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; }
.menue-liste .menue-eintrag span:not(.ico) { flex: 1; min-width: 0; }
.menue-liste .menue-eintrag.aktiv { background: var(--gold-soft); /* Bisher rgba(201,162,39,.12) */ color: var(--gold, #c9a227); }
.menue-pfeil { font-style: normal; opacity: .5; }
/* Reiter im Inhalt entfallen, wo die Seitenleiste sie zeigt (Desktop offen, Handy-Schublade) */
/* 03.10.2026: Bisher traf das auch innere Reiter (Lehrer: Übersicht/Lokal/Anbieter/OpenRouter/Eigene) — die stehen NICHT in der Seitenleiste ⇒ unerreichbar. */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) { .app-shell:not(.sb-zu) #settingsBody .settings-tab-bar:not(.lehrer-reiter) { display: none; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  #settingsBody .settings-tab-bar:not(.lehrer-reiter) { display: none; }
  .kopf-menue { display: inline-flex; }
  .app-shell.sb-offen > .sidebar-desktop {
    display: flex; flex-direction: column; position: fixed; z-index: 300; top: 0; bottom: 0; left: 0;
    width: min(86vw, 340px); overflow-y: auto; background: var(--surface, #12141a); border-right: 1px solid var(--border);
    padding-top: env(safe-area-inset-top, 0px); box-shadow: 8px 0 30px rgba(0,0,0,.45);
  }
  .menue-hinten { display: none; }
  .app-shell.sb-offen > .menue-hinten { display: block; position: fixed; inset: 0; z-index: 290; background: rgba(0,0,0,.5); }
  /* 24.10.2026 (KM-M15): Schublade und Abdunkelung enden ueber der Fussleiste (Hoehe misst js/app.js seitenleisteUmschalten → --fuss-tabs-h);
     Bisher lagen sie darueber — „Start" & Co. waren bei offener Schublade nicht antippbar. Ohne Fussleiste bleibt 0. */
  .app-shell.sb-offen > .sidebar-desktop, .app-shell.sb-offen > .menue-hinten { bottom: var(--fuss-tabs-h, 0px); }
}
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) { .menue-hinten { display: none; } }
/* eingeklappte Seitenleiste (Symbole): Unterseite nur mit Symbolen */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) { .app-shell.sb-zu .menue-kopf .menue-titel, .app-shell.sb-zu .menue-liste .menue-gruppe, .app-shell.sb-zu .menue-liste span { display: none; } }
/* letzter Abschnitt einer langen Seite darf bis nach oben rutschen (Sprung aus dem Menue) */
#settingsBody #settingsTabContent:has(> .profil-abschnitt) { padding-bottom: 55vh; }
/* Handy-Schublade deckend (--surface ist halbtransparent ⇒ Inhalt schimmerte durch, schwer lesbar) — hell/dunkel */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .app-shell.sb-offen > .sidebar-desktop { background-color: var(--bg); background-image: linear-gradient(var(--surface), var(--surface)); }
  #settingsBody .entwurf-leiste #entwurfSpeichern { width: auto; margin-left: auto; padding: 8px 16px; }
}

/* 02.10.2026 (Architekt: „der Button fuer Passwort ist visuell falsch, sowie andere Links"): Links ohne eigene Klasse erschienen im
   Browser-Blau mit Unterstrich. Jetzt EIN Stil fuer alle Links im App-Stil — :where() haelt die Spezifitaet bei 0, eigene Regeln
   (.site-footer a, .settings-legal-link …) gewinnen weiter. */
:where(a:not([class])) { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-soft, color-mix(in srgb, var(--akzent) 40%, transparent)); transition: color .15s, border-color .15s; }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
:where(a:not([class])):hover { border-bottom-color: var(--gold); }
:where(a:not([class])):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
/* Kleine Knoepfe IN einer Zeile (Zugangscode „Zeigen", „Passwort festlegen") — vorher volle Knopfgroesse, Zeile sprang in der Hoehe */
.stat-row .btn-zeile { vertical-align: middle; }
.stat-row:has(.btn-zeile) { align-items: center; }   /* Beschriftung mittig zum Zeilen-Knopf (vorher oben) */

/* 03.10.2026: FUSSLEISTE (Handy) — 5 gleich breite Punkte; der aktive hebt sich als runde Blase heraus (Vorbild Trisfusa).
   Farben aus Token (Akzent / Metallic), Abstaende so, dass Symbol und Text Luft haben. */
/* 03.10.2026 (Architekt: „als Webapp auf dem iPhone ist der Footer viel hoeher als in der Browseransicht"):
   Bisher: padding: 14px 6px calc(6px + env(safe-area-inset-bottom, 0px)) — der Home-Balken-Abstand stand ZWEIMAL
   (hier und in .app-footer). Im Safari-Browser ist er 0, als Startbildschirm-App 34 px ⇒ 68 px. Jetzt nur in .app-footer. */
.app-footer-tabs { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 2px; padding: 14px 6px 6px; }
.app-footer-tabs .tab-item { min-width: 0; padding: 4px 2px 2px; gap: 4px; justify-content: flex-end; }
.app-footer-tabs .tab-blase { width: 40px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: transform .2s ease, background .2s ease; }
.app-footer-tabs .tab-blase svg { width: 22px; height: 22px; }
.app-footer-tabs .tab-text { font-size: 11px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-footer-tabs .tab-item.active .tab-blase { width: 50px; height: 50px; border-radius: 50%; margin-top: -16px; background: var(--gold); color: var(--bg);
  border: 3px solid var(--bg); box-shadow: 0 4px 14px color-mix(in srgb, var(--akzent) 35%, transparent); transform: translateY(-2px); }
.app-footer-tabs .tab-item.active .tab-text { color: var(--gold); font-weight: 600; }
html[data-glanz=metall] .app-footer-tabs .tab-item.active .tab-blase { background: var(--metall);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px color-mix(in srgb, var(--akzent) 35%, transparent); }
.app-footer-tabs .tab-item::after { display: none; }

/* 03.10.2026 (Architekt: „wenn du im Footer Menue bringst, wuerde ich Menue aus dem Kopf und die Einstellungen rausnehmen und ins Menue
   integrieren — beim Handy wirkt es sauberer"): am Handy stehen Menue (☰) und Einstellungen (⚙) NUR noch unten in der Fussleiste. */
@media (max-width: 600px) {
  #kopfMenue, #kopfZahnrad { display: none; }
}
/* 03.10.2026: Fussleiste nur am Handy — die Raster-Regel oben ueberschrieb sonst das fruehere „display:none" fuer breite Schirme */
@media (min-width: 601px) { .app-footer-tabs { display: none; } }

/* 03.10.2026 (MD 62 §17.2): Startbildschirm-App (PWA) und Tauri-App — wie eine native App */
html[data-appart=pwa], html[data-appart=pwa] body, html[data-appart=tauri], html[data-appart=tauri] body { overscroll-behavior: none; }
html[data-appart=pwa] body, html[data-appart=tauri] body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html[data-appart=pwa] :is(button, .btn, nav, .app-footer-tabs, .app-kopf), html[data-appart=tauri] :is(button, .btn, nav, .app-footer-tabs, .app-kopf) { -webkit-user-select: none; user-select: none; }
/* iOS schreibt die Uhr bei black-translucent immer weiss — im hellen Design ein dunkler Streifen darunter, sonst unlesbar */
html[data-appart=pwa][data-ios][data-theme=light] body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #14141a; z-index: 10000; pointer-events: none; }
.app-inst-text { margin-bottom: 8px; }

/* ═══ 04.10.2026 (Architekt: „Header zu voll — Zurück/Speichern/Schliessen nebeneinander als Icons, neben dem Einstellungszeichen;
   Speichern rot wenn nicht gespeichert, grün wenn gespeichert“). Bisher: Text-Pillen links und rechts vom Titel (Altfassung recycle/vor_fe49_*). ═══ */
.kopf-aktionen { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; }
.kopf-aktionen:not(:has(> button:not(.hidden))) { display: none; }
.kopf-aktionen > .btn-icon { width: 34px; height: 34px; min-width: 34px; padding: 0; margin: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; position: relative; background: transparent; color: var(--text); }
.kopf-aktionen > .btn-icon:hover:not(:disabled) { background: var(--kachel-bg, rgba(255,255,255,.06)); }
.kopf-aktionen > .btn-icon.hidden { display: none !important; }
.kopf-aktionen > .kopf-speichern.offen { color: var(--red, #e5484d); background: color-mix(in srgb, var(--red, #e5484d) 14%, transparent); }
.kopf-aktionen > .kopf-speichern.gesichert { color: #3fb950; opacity: 1; }
.kopf-aktionen .kopf-zahl:empty { display: none; }
.kopf-aktionen .kopf-zahl { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red, #e5484d); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.app-kopf .kopf-titel { margin-left: 2px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  /* am Handy bleibt die Gruppe sichtbar (statt schwebender Knoepfe) — Bisher: .kopf-zurueck/.kopf-schliessen/.kopf-speichern ausgeblendet */
  .kopf-aktionen > .kopf-zurueck:not(.hidden), .kopf-aktionen > .kopf-schliessen:not(.hidden), .kopf-aktionen > .kopf-speichern:not(.hidden) { display: inline-flex !important; }
  .schwebe-aktionen { display: none !important; }
}
/* 04.10.2026 (Architekt: „Hamburger nur in der mobilen Version“): am Desktop ist die Seitenleiste immer da */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) { #kopfMenue { display: none; } }
/* Farbe der Diskette gewinnt gegen die allgemeine Kopf-Knopf-Farbe */
.app-kopf .kopf-aktionen > .btn-icon.kopf-speichern.gesichert { color: #3fb950; }   /* --green ist im Theme Gold — hier bewusst echtes Gruen */
.app-kopf .kopf-aktionen > .btn-icon.kopf-speichern.offen { color: var(--red, #e5484d); }
/* Teile-Auswahl als EIN Dropdown (statt Chip-Reihe) */
.teil-leiste .teil-wahl { width: 100%; max-width: 420px; }
/* ═══ 04.10.2026: Verwaltung als Widget-Tabs (Gruppen) mit Untermenue und ✕ ═══ */
#settingsBody .teil-leiste { position: relative; }
.teil-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.teil-tab { display: inline-flex; align-items: center; gap: 8px; min-height: var(--knopf-h, 40px); padding: 0 14px; border-radius: var(--knopf-radius, 12px);
  border: 1px solid var(--fenster-rand, var(--border)); background: var(--fenster-bg, transparent); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.teil-tab .ico, .teil-tab svg:first-child { color: var(--akzent, var(--gold)); }
.teil-tab.an { border-color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 14%, var(--fenster-bg, transparent)); }
.teil-pop { position: absolute; top: calc(100% + 6px); min-width: 240px; padding: 6px; border-radius: var(--fenster-radius, 14px);
  background: var(--fenster-bg, #15171e); border: 1px solid var(--fenster-rand, var(--border)); box-shadow: 0 12px 32px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.teil-pop.hidden { display: none; }
.teil-pop-kopf { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px 10px; border-bottom: 1px solid var(--fenster-rand, var(--border)); margin-bottom: 4px; }
.teil-pop-kopf b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); font-weight: 600; }
.teil-pop-eintrag { text-align: left; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.teil-pop-eintrag:hover, .teil-pop-eintrag.an { background: var(--kachel-bg, rgba(255,255,255,.06)); }
.teil-pop-eintrag.an { color: var(--akzent, var(--gold)); }
.teil-pop-eintrag { display: flex; align-items: center; gap: 10px; }
.teil-pop-eintrag .ico, .teil-pop-eintrag svg { color: var(--akzent, var(--gold)); flex: 0 0 auto; }
/* Untermenue deckend (die Fensterflaeche ist halbdurchsichtig — Text darunter schien durch) */
.teil-pop { background: var(--bg, #0d0f14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* ══ 08.10.2026 Rechtsseiten (legal/*.html): EIN Block statt 5 eigener <style>-Kopien je Seite (MD 62 §16 E4/E6). Die Kopien nutzten
   die nirgends definierten Variablen --accent/--text-secondary (Farben griffen nie) — jetzt die echten Token. Der Hinweis „maschinell
   uebersetzt" (js/inhalte.js) steht hier, weil die Rechtsseiten screens.css nicht laden. ══ */
.legal-content { max-width: 700px; margin: 0 auto; padding: 40px 24px; line-height: 1.8; font-size: 15px; }
.legal-content h2 { font-size: 22px; margin: 0 0 20px; }
.legal-content h3 { font-size: 16px; margin: 28px 0 10px; color: var(--akzent, var(--gold)); }
.legal-content h4 { font-size: 14px; margin: 16px 0 6px; color: var(--text); font-weight: 600; }
.legal-content p { margin: 8px 0; color: var(--text2); }
.legal-content :is(ul, ol) { margin: 8px 0 8px 20px; }
.legal-content li { margin: 4px 0; color: var(--text2); }
.legal-content strong { color: var(--text); }
.legal-content a, .back-link { color: var(--akzent, var(--gold)); }
.legal-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.legal-content :is(th, td) { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); }
.legal-content th { color: var(--text); font-weight: 600; }
.back-link { display: inline-block; margin-bottom: 20px; text-decoration: none; font-size: 14px; }
.inhalt-hinweis { opacity: .8; font-size: 13px; border-left: 3px solid currentColor; padding-left: 10px; }
/* 08.10.2026 Splash-Animation: Zustaende als Klassen statt fester Inline-Werte in splash.js (MD 62 §16 E6) */
.splash-partikel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.splash img.partikel-modus { animation: none; opacity: 0; transition: opacity .45s ease; }
.splash img.partikel-modus.sichtbar { opacity: 1; }
.splash-slogan.wartet { opacity: 0; transform: translateY(6px); letter-spacing: .32em; }
.splash-slogan.zeigt { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease, letter-spacing 1.1s ease; }

/* 09.10.2026 iOS-26-Startbildschirm-App: Seite endet vor der Unterkante (schwarzer Balken) ⇒ Hoehe aus der echten Bildschirmhoehe
   (js/app-identitaet.js appHoehe setzt --app-hoehe nur, wenn iOS zu kurz misst). Darunter Seitenfarbe statt festem Schwarz. */
/* Nachtrag 09.10.2026 (Architekt: „unten an der Rundung schwarzer Balken — Hauptproblem", iPhone-17-Bild: App endet ~63 pt ueber der
   Kante = Statusleistenhoehe, WebKit-Bug 301108). Auf iOS 26 sind 100dvh/100svh/100%/inset:0 alle um den oberen Sicherheitsbereich zu
   kurz; am Geraet bestaetigt hat sich 100lvh plus top:0 statt bottom:0 (Quelle: github.com/AltanS/collie/pull/355). Die Messung aus
   appHoehe bleibt als Mindestwert. Bisher: nur var(--app-hoehe), und nur wenn gesetzt. */
html[data-appart=pwa][data-ios] { background: var(--bg); min-height: 100lvh; }
html[data-appart=pwa][data-ios] .app-shell { top: 0; bottom: auto; height: max(100lvh, var(--app-hoehe, 0px)); }
/* Tastatur offen (js/app-identitaet.js tastatur): App = sichtbarer Bereich, sonst laege das Eingabefeld hinter der Tastatur */
html[data-appart=pwa][data-ios].tastatur-offen .app-shell { top: var(--vv-oben, 0px); height: var(--vv-hoehe, 100dvh); }