/* === Screen-specific styles === */
/* Home, Brain, Teacher, Workspace, Settings */

/* ===== HOME / TOPIC GRID ===== */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 16px 16px;
  max-width: 600px;
  margin: 0 auto;
}
.topic-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.topic-card:active { transform: scale(0.97); }
.topic-card:hover { border-color: var(--gold); }
.topic-icon {
  flex-shrink: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.topic-icon svg { width: 22px; height: 22px; }
.topic-info { flex: 1; min-width: 0; }
.topic-title { font-size: 14px; font-weight: 600; }
.topic-desc { font-size: 11px; color: var(--text2); margin-top: 2px; }

@media (max-width: 480px) {
  .topic-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .topic-grid { grid-template-columns: repeat(3, 1fr); max-width: 700px; }
}

/* ===== BRAIN SCREEN ===== */
/* Bisher: .brain-grid 2 Spalten, max. 600 px — waehrend der Live-Bereich darueber 3–4 Spalten (auto-fit) hatte: mal 4, mal 2.
   02.10.2026 (Architekt: „wenn dann gleichmaessig gefuellt"): EIN Raster fuer Live-Bereich und Areale, gleiche Breite,
   4 Spalten (8 Areale = 2 volle Reihen, 4 Live-Fenster = 1 Reihe) · 2 Spalten · 1 Spalte. */
.brain-grid, .gl-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
#brainBody .gehirn-live, #brainBody .brain-grid, #brainBody .brain-hint { max-width: var(--inhalt-breite); margin-left: auto; margin-right: auto;
  padding-left: var(--inhalt-rand); padding-right: var(--inhalt-rand); box-sizing: border-box; width: 100%; }
@media (max-width: 1100px) { .brain-grid, .gl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .brain-grid, .gl-raster { grid-template-columns: 1fr; } }
.areal-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.areal-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.areal-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.areal-card-name { font-size: 14px; font-weight: 600; }
.areal-card-desc { font-size: 11px; color: var(--text2); margin-bottom: 4px; }
.areal-card-value { font-size: 12px; color: var(--text2); }

/* Live-Anzeige + Gewichtung */
.areal-live-row, .areal-weight-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text2);
  margin-top: 4px;
}
.areal-live-label, .areal-weight-label { color: var(--text2); }
.areal-live-value { font-weight: 600; }
.areal-weight-value { font-weight: 600; color: var(--gold); }

/* Slider */
.areal-slider {
  width: 100%;
  margin-top: 6px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.areal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  box-shadow: 0 0 4px var(--gold-glow);
  cursor: pointer;
}
.areal-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  cursor: pointer;
}

/* Brain hint */
.brain-hint { padding: 0 16px; }
.areal-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.areal-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}


/* ===== TEACHER SCREEN ===== */
.teacher-list {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.teacher-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.teacher-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.teacher-info { flex: 1; min-width: 0; }
.teacher-name { font-size: 15px; font-weight: 600; }
.teacher-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.teacher-status {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  flex-shrink: 0;
}
/* 02.10.2026 Vier-Rollen-Regel — Bisher: background rgba(74,222,128,0.12) (festes Gruen) */
.teacher-status.active { background: var(--gold-soft); color: var(--green); }
.teacher-status.inactive { background: var(--elevated); color: var(--text2); }

/* ===== WORKSPACE SCREEN ===== */
.workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  max-width: 500px;
  margin: 0 auto;
}
.workspace-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 8px;
  text-align: center;
  cursor: pointer;
}
.workspace-item svg { color: var(--gold); }
.workspace-item-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

@media (max-width: 380px) {
  .workspace-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== SETTINGS SCREEN ===== */
.settings-sections {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  padding: 0 4px;
}
.settings-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.settings-link:last-child { border: none; }
.settings-link:active { background: var(--elevated); }
.settings-link-icon { color: var(--text2); flex-shrink: 0; }
.settings-link-text { font-size: 15px; color: var(--text); flex: 1; }
.settings-link-arrow { color: var(--text2); font-size: 16px; }
.settings-link-value { font-size: 13px; color: var(--text2); }

/* ===== PROFILE HEADER (in Settings) ===== */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 8px;
}
.profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.profile-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profile-name { font-size: 17px; font-weight: 600; }
.profile-role { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* Profil Navigation Items */
.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  margin-bottom: 8px;
}
.profile-nav-item:active { transform: scale(0.98); }
.profile-nav-icon {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.profile-nav-icon svg { width: 20px; height: 20px; }
.profile-nav-label { font-size: 15px; color: var(--text); flex: 1; font-weight: 500; }
.profile-nav-arrow { color: var(--text2); font-size: 18px; }

/* Profil Zurueck-Button */
.profile-back-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.profile-back-btn { font-size: 14px; padding: 6px 0; }

/* Profile Status Badges */
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.profile-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text2);
}

/* ===== SETTINGS TABS ===== */
.settings-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.settings-tab-btn {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.settings-tab-btn.active {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: var(--gold);
}
.settings-tab-btn:active { transform: scale(0.95); }
.settings-tab-content { min-height: 200px; }

/* stat-ok / stat-err modifiers */
.stat-ok { color: var(--green); }
.stat-warn { color: var(--akzent, var(--gold)); } .stat-aus { color: var(--text2); }   /* 13.10.2026 Geraete-Faehigkeiten */
.stat-err { color: var(--red); }

/* Legal links in settings */
.legal-link {
  display: block;
  padding: 8px 0;
  color: var(--gold);
  text-decoration: none;
  font-size: 14px;
}
.legal-link:hover { text-decoration: underline; }

/* Settings cards spacing */
.settings-tab-content .glass-card { margin-bottom: 12px; }
.settings-tab-content .glass-card:last-child { margin-bottom: 0; }
.settings-tab-content h2 { margin-bottom: 12px; }

/* Settings action buttons */
.settings-action-btn {
  width: 100%;
  margin-bottom: 6px;
}
.settings-danger-btn {
  width: 100%;
  color: var(--red);
}

/* Settings inline form */
.settings-form { margin-top: 8px; }
.settings-form .input-field { margin-bottom: 8px; }
.settings-form .btn { width: 100%; }

/* Settings info text */
.settings-info {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.7;
  margin-top: 8px;
}

/* === JS-generated component classes === */

/* Card with caption-header (used by C() helper) */
.card-section { margin-bottom: 12px; }
.card-section:last-child { margin-bottom: 0; }
.card-section-title {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Stat row (used by R() helper — replaces inline flex layout) */
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.stat-row:last-child { border-bottom: none; }
.stat-row-label { color: var(--text2); }
.stat-row-value { font-weight: 600; }

/* Home screen header */
.home-header {
  padding: 24px 16px 8px;
  text-align: center;
}

/* Recent chats section on home */
.home-recent { padding: 0 16px 16px; }
.home-recent-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.home-chat-card {
  margin-bottom: 6px;
  padding: 12px;
  cursor: pointer;
}
.home-chat-title {
  font-size: 13px;
  font-weight: 500;
}

/* Brain system card */
.brain-system-wrap {
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* Teacher screen */
.teacher-wrap {
  padding: 16px;
  max-width: 500px;
  margin: 0 auto;
}
.teacher-intro-card {
  margin-bottom: 16px;
  padding: 16px;
}
.teacher-intro-text { color: var(--text2); }
.teacher-intro-highlight { color: var(--gold); }
.teacher-fields {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.teacher-input-sm {
  font-size: 13px;
  padding: 8px 12px;
}
.teacher-input-row {
  display: flex;
  gap: 6px;
}
.teacher-input-xs {
  font-size: 12px;
  padding: 6px 10px;
  flex: 1;
}
.teacher-btn-row {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.teacher-btn-half {
  flex: 1;
  font-size: 12px;
}

/* Workspace detail container */
.ws-detail {
  padding: 16px;
  max-width: 500px;
  margin: 0 auto;
}
.ws-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ws-file-row {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ws-file-name {
  font-weight: 600;
  font-size: 13px;
}
.ws-file-del {
  font-size: 12px;
  color: var(--red);
}
.ws-card-mb { margin-bottom: 8px; }
.ws-card-title { font-weight: 600; }
.ws-card-title-sm {
  font-weight: 600;
  font-size: 14px;
}
.ws-event-card {
  margin-bottom: 8px;
  border-left: 3px solid var(--gold);
}
.ws-perf-card { margin-bottom: 10px; }
.ws-perf-areal-title {
  font-weight: 600;
  margin-bottom: 8px;
}

/* Settings footer */
.settings-logout { margin-top: 20px; }
.settings-logout .btn { width: 100%; color: var(--red); }
.settings-footer {
  text-align: center;
  padding: 16px 0;
}
.settings-footer-link {
  display: inline;
  font-size: 11px;
}

/* Settings hint text */
.settings-hint { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 16px; }

/* Settings content helpers */
.settings-section-title { margin-bottom: 12px; }
.settings-ki-form { margin-top: 8px; }
.settings-ki-form .input-field { margin-bottom: 8px; }
.settings-ki-form .btn { width: 100%; }
.settings-backend-form { margin-top: 8px; }
.settings-backend-form .input-field { margin-bottom: 6px; }
.settings-backend-form .btn { width: 100%; }
.settings-btn-full { width: 100%; margin-bottom: 8px; }
.settings-btn-full-danger { width: 100%; color: var(--red); }
.settings-btn-full-mb6 { width: 100%; margin-bottom: 6px; }
.settings-legal-link {
  display: block;
  padding: 8px 0;
  color: var(--gold);
  text-decoration: none;
}
.settings-legal-link:hover { text-decoration: underline; }
.settings-legal-text {
  line-height: 1.8;
}
.settings-parental { margin-bottom: 8px; }
.settings-cookie-reset { width: 100%; margin-top: 8px; }
.settings-license-input { margin-bottom: 8px; }
.settings-license-result { margin-top: 8px; }

/* Kortex mode info */
.kortex-mode-info { font-size: 12px; color: var(--text2); margin-top: 8px; line-height: 1.5; }
.kortex-peers-list { margin-top: 12px; }

/* Mobile tool icon */
.mobile-tool-icon { color: var(--gold); display: flex; align-items: center; justify-content: center; }
.mobile-tool-icon svg { width: 24px; height: 24px; }

/* Welcome popup */
.popup-content { padding: 32px; text-align: center; }
.popup-title { color: var(--gold); margin-bottom: 16px; }
.popup-subtitle { color: var(--text2); margin-bottom: 12px; }
.popup-code-card { padding: 16px; margin: 12px 0; }
.popup-code-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: monospace;
  margin-top: 4px;
}
.popup-btn { width: 100%; margin-top: 16px; }

/* ===== DOWNLOAD PAGE ===== */
.dl-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.dl-platform-card {
  text-align: center;
  padding: 24px;
}
.dl-platform-icon {
  font-size: 36px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-platform-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.dl-pwa-card {
  border-color: var(--gold);
  padding: 20px;
}
.dl-pwa-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
}
.dl-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.dl-feature-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.dl-highlight {
  box-shadow: 0 0 12px var(--gold-glow);
}

/* W-141 (23.09.2026) — Hinweistext unter den Stimmreglern.
   ⛔ Vorher benutzte er `.bubble-meta` (10 px) — das ist die Klasse fuer
   CHAT-ZEITSTEMPEL, hier fuer einen mehrzeiligen Erklaertext zweckentfremdet.
   `.bubble-meta` global zu vergroessern haette die Chatblasen getroffen; der
   Hinweis bekommt deshalb eine eigene Klasse.
   Kontrast bleibt `--text2` (gemessen 6.07 gegen Soll 4.5) — geaendert wird
   nur die GROESSE und die Zeilenhoehe, damit mehrzeiliger Text lesbar ist. */
.voice-hinweis {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text2);
  margin-top: 10px;
  display: block;
}

/* 01.10.2026: Helix-Kern — Farbwahl in Einstellungen › Erscheinung */
.helix-farbwahl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.helix-farbpunkt { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.helix-farbpunkt.an { border-color: var(--text-primary, #fff); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.helix-farbeigen { width: 34px; height: 30px; border: none; background: none; padding: 0; cursor: pointer; }

/* 01.10.2026: Einstellungs-Entwurf — feste Leiste oben (Abschnittsmenue + EIN Speichern) */
.entwurf-leiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 10px 0; margin-bottom: 8px; background: var(--bg, #0b0c10);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.entwurf-leiste { flex-wrap: nowrap; }
.entwurf-leiste .settings-tab-bar { flex: 1 1 auto; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
/* 01.10.2026: Reiter immer einzeilig („Stimme & Helix" brach um) — bei Platzmangel seitlich scrollen */
.settings-tab-btn { white-space: nowrap; flex: 0 0 auto; }
.entwurf-knoepfe { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.entwurf-knoepfe .btn { padding: 8px 16px; white-space: nowrap; width: auto; }
.entwurf-knoepfe .btn[disabled] { opacity: .45; cursor: default; }
.profil-abschnitt { scroll-margin-top: 72px; padding-bottom: 12px; }
@media (max-width: 640px) { .entwurf-leiste { flex-wrap: wrap; } .entwurf-knoepfe { width: 100%; } .entwurf-knoepfe .btn { flex: 1; } }

/* 01.10.2026: Helix-Formen und Farbe in Bewegung als Kacheln */
.helix-formwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.helix-formkachel { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.helix-formkachel b { font-size: 14px; font-weight: 600; }
.helix-formkachel span { font-size: 12px; color: var(--text2); line-height: 1.35; }
.helix-formkachel.an { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.stimm-muster { display: block; width: 100%; height: 8px; border-radius: 4px; margin-bottom: 4px; }
.stimm-gleich { background: linear-gradient(90deg, #6fa8ff, #b8d4ff); }
.stimm-regenbogen { background: linear-gradient(90deg, #ff3b3b, #ffb13b, #f5ff3b, #3bff6a, #3bc8ff, #7a3bff); }
.stimm-areale { background: linear-gradient(90deg, #d4a843 0 12.5%, #5c8cff 0 25%, #4fd18c 0 37.5%, #ff9440 0 50%, #40c7c7 0 62.5%, #ff73b3 0 75%, #a680ff 0 87.5%, #ff5c5c 0); }
.helix-zweitfarbe { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

/* ===================================================================
   01.10.2026 — EINSTELLUNGEN: EIN FENSTER JE BEREICH STATT VIELER KAESTEN
   Architekt: „ich habe ueberall statt ein Fenster nur Abschnitte — sauber machen".
   Jeder Bereich (Profil-Abschnitt bzw. die ganze Unterseite) ist EIN Fenster; die
   einzelnen Einstellungen sind Zeilen darin, getrennt durch Linien.
   =================================================================== */
#settingsBody .settings-tab-content > .profil-abschnitt,
#settingsBody .settings-tab-content:not(:has(.profil-abschnitt)) {
  background: var(--fenster-bg); border: 1px solid var(--fenster-rand); border-radius: var(--fenster-radius);
  padding: 6px var(--fenster-pad) var(--fenster-pad); margin-bottom: var(--fenster-abstand);
}
#settingsBody .settings-tab-content .settings-section-title { margin: 12px 0 2px; }
#settingsBody .settings-tab-content .settings-section-title + .settings-hint { margin-bottom: 4px; }
#settingsBody .settings-tab-content .glass-card.card-section {
  background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0;
  padding: 14px 0; border-top: 1px solid var(--border); transform: none;
}
#settingsBody .settings-tab-content .glass-card.card-section::before { display: none; }
#settingsBody .settings-tab-content .glass-card.card-section:hover { border-color: var(--border); }
#settingsBody .settings-tab-content .card-section-title { margin-bottom: 8px; }
/* 01.10.2026: „Zurueck · Profil"-Zeile entfaellt — Name und Zurueck stehen in der Kopfleiste */
#settingsBody .profile-back-row { display: none; }

/* 01.10.2026: Einstellungs-Hauptmenue gruppiert (Helmut · Ich · System) + Kurzbeschreibung */
.profile-nav-gruppe { margin: 18px 4px 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold, #c9a227); opacity: .85; }
.profile-nav-gruppe:first-child { margin-top: 4px; }
.profile-nav-label { display: flex; flex-direction: column; gap: 2px; }
.profile-nav-info { font-size: 12px; opacity: .6; font-weight: 400; }
/* Mein Profil + Anweisungen */
.mp-zeile { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; align-items: center; gap: 10px; margin: 6px 0; }
.mp-zeile > span { font-size: 13px; opacity: .8; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .mp-zeile { grid-template-columns: 1fr; gap: 4px; } }
.anw-feld { width: 100%; min-height: 90px; resize: vertical; font: inherit; line-height: 1.45; }
/* Geraet hinzufuegen */
.geraet-schritte { display: grid; gap: 8px; margin: 10px 0 12px; }
.geraet-schritt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.geraet-schritt b { color: var(--gold, #c9a227); font-weight: 600; }
.geraet-code { font-family: ui-monospace, monospace; letter-spacing: .08em; color: var(--gold, #c9a227); }
.ton-zeile { display: grid; grid-template-columns: 1fr minmax(140px, 46%) auto; gap: 8px; align-items: center; }
.ton-zeile .ton-probe { padding: 6px 12px; font-size: 13px; }
/* Einstellungen › Sprache (01.10.2026) — Liste aus der Mini-DB texte/basis.json + von Helmut gelernte Sprachen */
.sprach-zeilen { display: grid; gap: 8px; margin: 12px 0; }
.sprach-zeile { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: inherit; font: inherit; cursor: pointer; }
.sprach-zeile:hover { background: rgba(255,255,255,.07); }
/* 02.10.2026 Vier-Rollen-Regel: feste Farbe -> Token (folgt Akzentwahl, hell/dunkel) */
.sprach-zeile.aktiv { border-color: var(--gold); background: var(--gold-soft); }
.sprach-zeile > b { min-width: 44px; color: var(--gold, #c9a227); font-size: 13px; letter-spacing: .04em; }
.sprach-zeile > span { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 15px; }
.sprach-zeile > span small { font-size: 12px; opacity: .6; }
.sprach-zeile > i { font-style: normal; color: var(--gold, #c9a227); }
.sprach-zeilen { grid-template-columns: 1fr auto; align-items: stretch; }
.sprach-zeilen > .sprach-zeile:only-child, .sprach-zeilen > .sprach-zeile { grid-column: 1; }
.sprach-zeilen > .sprach-weg { grid-column: 2; align-self: center; padding: 8px 12px; font-size: 13px; }
.sprach-aktivieren { display: flex; gap: 8px; margin: 4px 0 12px; }
.sprach-aktivieren select { flex: 1; min-width: 0; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .sprach-aktivieren { flex-direction: column; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .ton-zeile { grid-template-columns: 1fr auto; } .ton-zeile .stat-row-label { grid-column: 1 / -1; } }
#settingsBody .settings-hint a { color: var(--gold, #c9a227); text-decoration: none; border-bottom: 1px solid var(--gold-soft); /* Bisher color-mix(in srgb, var(--akzent) 40%, transparent) */ }

/* 01.10.2026: Schnittstellen — KI-Anbieter (Konto + API-Schluessel) und MCP */
.ki-anbieter-liste { display: grid; gap: 12px; }
.ki-karte { padding: 16px; border-radius: 14px; margin-bottom: 12px; }
.ki-kopf { display: flex; align-items: center; gap: 12px; }
.ki-zeichen { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--gold, #c9a227); flex: 0 0 auto; }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.ki-titel { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ki-titel small { opacity: .6; font-size: 12px; }
.ki-status { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); opacity: .85; white-space: nowrap; }
.ki-status.gut { background: var(--gold-soft); color: var(--gold); opacity: 1; }
.ki-reihe button { background: none; border: 1px solid rgba(255,255,255,.12); color: inherit; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; margin-left: 4px; }
.ki-reihe button:disabled { opacity: .25; cursor: default; }
.ki-zugaenge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .ki-zugaenge { grid-template-columns: 1fr; } }
.ki-zugang { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ki-zugang-titel { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--gold, #c9a227); }
.ki-zugang small { opacity: .65; font-size: 12px; }
.ki-zugang .btn { align-self: flex-start; }
.ki-schluessel { display: flex; gap: 6px; }
.ki-schluessel .input-field { flex: 1; min-width: 0; }
.ki-verwenden { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 13px; }
.ki-verwenden > span { opacity: .7; margin-right: 4px; }
.ki-modus { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: inherit; padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; }
.ki-modus.aktiv { background: var(--gold, #c9a227); color: #111; border-color: transparent; font-weight: 600; }
.ki-modus:disabled { opacity: .3; cursor: default; }
.ki-zaehler { margin-left: auto; opacity: .5; font-size: 12px; }
.ki-meldung { margin-top: 8px; min-height: 1em; }
.mcp-zeile { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; margin-top: 12px; font-size: 13px; }
.mcp-zeile > span { opacity: .7; }
.mcp-zeile code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--gold, #c9a227); word-break: break-all; }
.mcp-rechte { display: grid; gap: 4px; }
.mcp-rechte label { display: flex; gap: 8px; align-items: center; }
.mcp-verbindung { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.mcp-verbindung b { flex: 0 0 auto; }
.mcp-verbindung small { flex: 1; opacity: .6; font-size: 12px; word-break: break-all; }
.mcp-formular { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mcp-formular .btn { grid-column: 1 / -1; }
/* 18.10.2026: Hilfe-Fenster — Suchfeld über die volle Breite (Hinweistext wurde abgeschnitten) */
.mcp-formular.hd-formular { grid-template-columns: 1fr; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .mcp-formular { grid-template-columns: 1fr; } }
.ki-schluessel { flex-wrap: wrap; }
.ki-schluessel .input-field { flex: 1 1 160px; }
.ki-karte .ki-meldung:empty { display: none; }
.ki-anbieter-liste .ki-karte { margin-bottom: 0; }
/* 20.10.2026 (MD 98 C6-11): Externe Zugaenge — Karte je Zugang (ki-karte), Status rot bei fehlgeschlagenem Test (Signal-Token, hell+dunkel) */
.ki-status.fehler { color: color-mix(in srgb, var(--red) 85%, var(--text)); background: color-mix(in srgb, var(--red) 14%, transparent); opacity: 1; }
.ez-karte .ez-anleitung { margin-top: 12px; }
.ez-karte .ez-anleitung > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gold, #c9a227); }
.ez-schritte { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--text); }
.ez-block { display: grid; gap: 6px; margin-top: 12px; }
.ez-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.ez-scopes code, .ez-fuss code { font-family: ui-monospace, monospace; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--text); word-break: break-all; }
.ez-rueckruf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ez-rueckruf code { flex: 1 1 220px; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; color: var(--text); word-break: break-all; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); }
.ez-felder { margin-top: 12px; }
.ez-zeile > label { font-size: 13px; opacity: .8; }
.ez-feld { display: grid; gap: 4px; min-width: 0; }
.ez-feld code { font-family: ui-monospace, monospace; color: var(--gold, #c9a227); }
.ez-fuss { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text2); word-break: break-word; }
.ez-fuss span { font-weight: 600; }

/* 01.10.2026: „+"-Anbieter, Katalog, Wissenstransfer */
.ki-plus { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; margin: 4px 0 12px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--akzent) 45%, transparent); background: color-mix(in srgb, var(--akzent) 5%, transparent); color: inherit; cursor: pointer; font: inherit; font-weight: 600; }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.ki-plus span { font-size: 22px; line-height: 1; color: var(--gold, #c9a227); }
.ki-plus small { font-weight: 400; opacity: .6; font-size: 12px; }
.ki-plus:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.ki-suche { margin: 12px 0 8px; width: 100%; }
.ki-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; }
.ki-katalog-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: inherit; cursor: pointer; font: inherit; font-size: 13px; }
.ki-katalog-eintrag small { opacity: .55; font-size: 11px; }
.ki-katalog-eintrag.aktiv { border-color: var(--gold); background: var(--gold-soft); }
.ki-vorlage { margin: 12px 0 4px; font-size: 13px; }
.ki-vorlage summary { cursor: pointer; opacity: .8; }
.ki-vorlage textarea { margin: 8px 0; font-family: ui-monospace, monospace; font-size: 12px; }
.ki-auth-felder { display: contents; }
.wissen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.wissen-raster .ki-zugang .input-field, .wissen-raster .ki-zugang select { width: 100%; }

/* 01.10.2026: Handy — Texte bekommen Platz (Architekt: „viele Texte nicht lesbar, Fenster zu klein").
   Gemessen 390 px: Fenster in Fenster in Karte ⇒ jede Ebene nahm links/rechts 16–20 px, Text in schmaler Spalte. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  #kopfTitel .kopf-pfad { display: none; }
  #settingsBody .settings-tab-content > .profil-abschnitt,
  #settingsBody .settings-tab-content:not(:has(.profil-abschnitt)) { padding: 4px 14px 8px; border-radius: 12px; }
  #settingsBody .ki-karte { padding: 12px 0; background: transparent; border: none; box-shadow: none; }
  #settingsBody .wissen-raster { grid-template-columns: 1fr; }
  #settingsBody .wissen-raster > .ki-zugang { padding: 12px; }
  #settingsBody .settings-tab-btn { padding: 8px 12px; }
}

/* 01.10.2026: Inhaltsbreite DYNAMISCH statt fest (Architekt: „Content-Groesse Fenster besser anpassen, dynamischer,
   damit auch die Endgeraete besser sind"). Bisher fest: .settings-sections 600px, .brain-system-wrap 600px,
   .teacher-wrap/.teacher-list 500px, .ws-detail 500px — auf grossen Bildschirmen enge Spalte mit viel Rand.
   Jetzt: Handy = volle Breite, waechst mit dem verfuegbaren Platz bis 960px; Abstaende gleiten mit. */
/* 08.10.2026 (Architekt: „du nutzt den Raum nicht aus"): Bisher clamp(600px, 72%, 960px) — gemessen 1920 px: Inhalt 57 % der Flaeche,
   1441 px: 72 %. Jetzt 90 % bis 1280 px (Zeilen bleiben lesbar, Raster bekommen eine Spalte mehr). */
:root { --inhalt-breite: clamp(600px, 90%, 1280px); --inhalt-rand: clamp(10px, 2.2vw, 24px); }
.settings-sections, .brain-system-wrap, .teacher-wrap, .teacher-list, .ws-detail {
  max-width: var(--inhalt-breite); width: 100%; padding-left: var(--inhalt-rand); padding-right: var(--inhalt-rand); box-sizing: border-box;
}
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  :root { --inhalt-breite: 100%; }
}
/* Fliesstext in Fenstern: angenehme Zeilenlaenge, gleitende Schrift */
#settingsBody .settings-hint { font-size: clamp(13px, 0.35vw + 12px, 15px); line-height: 1.5; }
#settingsBody .settings-section-title { font-size: clamp(18px, 0.6vw + 15px, 22px); }
/* 01.10.2026: Vorschau der Begruessung in Mein Profil */
.gruss-vorschau { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--akzent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 25%, transparent); }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.gruss-vorschau b { font-weight: 600; color: var(--gold, #c9a227); }
/* 01.10.2026: Bildwahl (Helmut / eigenes Foto) und Schnellwahl fuer das erste Wort der Begruessung */
.bild-wahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bild-vorschau { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--gold-soft, color-mix(in srgb, var(--akzent) 15%, transparent)); border: 1.5px solid var(--gold, #c9a227); font-size: 24px; font-weight: 600; color: var(--gold, #c9a227); flex: 0 0 auto; }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.bild-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.bild-knopf { padding: 8px 14px; cursor: pointer; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ki-mini { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; vertical-align: -3px; }
.gruss-woerter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gruss-woerter .btn { padding: 6px 12px; font-size: 13px; }
/* 01.10.2026: Statusmarke je Abschnitt aus der Registry (Kern verbunden / fehlt noch) */
.kern-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; vertical-align: middle; border: 1px solid var(--border); opacity: .9; }
.kern-chip.vorhanden { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.kern-chip.teilweise { color: var(--text2); border-color: var(--border); }
.kern-chip.fehlt { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.kern-chip:empty { display: none; }
/* 18.10.2026 (Menschen-Test Nr 28): Gold #d4a843 auf hellem Grund = 1,98:1 (MD 62 §39 verlangt ≥ 3:1) — im hellen Bild abgedunkelt, Akzent bleibt waehlbar */
html[data-theme=light] .kern-chip.vorhanden { color: color-mix(in srgb, var(--gold) 55%, #000); }
button[data-faehigkeit]:disabled { opacity: .5; cursor: not-allowed; }

/* ══ 02.10.2026: Symbole aus media/icons (Datei je Symbol, Registry `medien.icons`) — gezeichnet als Maske, Farbe = currentColor ══ */
.ico { display: inline-block; flex: 0 0 auto; vertical-align: middle; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* gleiche Farbe wie bisher die <svg> an diesen Orten */
.seiten-start .chat-history-item .ico, .sidebar-desktop > .chat-history-item .ico, .menue-liste .menue-eintrag .ico,
.workspace-item .ico, .mobile-tool-icon .ico { color: var(--gold); }
.app-shell.sb-zu .chat-history-item .ico { width: 18px !important; height: 18px !important; margin: 0; }

/* ══ 02.10.2026: Tools-Uebersicht (Architekt: „Groesse falsch, nicht mehr sauber") ══
   Bisher: .workspace-grid 3 Spalten, max-width 500px, Kachel nur Symbol + Wort (12px). Jetzt: volle Inhaltsbreite wie Gehirn/Einstellungen,
   Kacheln mit Titel + Kurzbeschreibung, Zahnrad zu den passenden Einstellungen. */
#workspaceBody { display: flex; flex-direction: column; align-items: center; }
.ws-kopf, #workspaceBody .workspace-grid { max-width: var(--inhalt-breite); width: 100%; box-sizing: border-box;
  padding-left: var(--inhalt-rand); padding-right: var(--inhalt-rand); }
.ws-kopf { padding-top: 16px; }
#workspaceBody .workspace-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 0; padding-top: 4px; padding-bottom: 24px; }
#workspaceBody .workspace-item { position: relative; align-items: flex-start; text-align: left; gap: 6px; padding: var(--fenster-pad);
  transition: border-color .15s, transform .1s; }
#workspaceBody .workspace-item:hover, #workspaceBody .workspace-item:focus-visible { border-color: var(--gold-soft); outline: none; }
#workspaceBody .workspace-item:active { transform: scale(.98); }
.ws-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 4px;
  background: color-mix(in srgb, var(--akzent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent); color: var(--gold); }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
#workspaceBody .workspace-item-label { font-size: 15px; font-weight: 600; }
.workspace-item-info { font-size: 13px; line-height: 1.4; color: var(--text2); }
.ws-einst { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--border); color: var(--text2); cursor: pointer; }
.ws-einst:hover, .ws-einst:focus-visible { color: var(--gold); border-color: var(--gold-soft); }
#workspaceBody .ws-detail { margin: 0 auto; padding-top: 16px; }
.ws-formular { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
@media (max-width: 520px) { #workspaceBody .workspace-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #workspaceBody .workspace-item { padding: 14px 12px; } .workspace-item-info { font-size: 12px; } }

/* ══ 02.10.2026: Kalender — Termine links, Kalender-Verwaltung rechts (Handy: untereinander) ══ */
.kal-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .kal-raster { grid-template-columns: 1fr; } }
.kal-quelle, .kal-termin { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kal-termin { padding: 10px 12px; margin-bottom: 6px; border-bottom: none; }
.kal-quelle:last-of-type { border-bottom: none; }
.kal-quelle-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kal-quelle-text small { color: var(--text2); font-size: 12px; overflow-wrap: anywhere; }
.kal-punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.kal-zwischen { margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.kal-tag { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--gold); }
.kal-weg { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--border); }
.kal-weg b { display: flex; align-items: center; gap: 6px; }
.kal-weg small { color: var(--text2); font-size: 12px; line-height: 1.45; }
.kal-weg .btn { align-self: flex-start; }
/* Seitenleiste/Menue: Symbole wie bisher 16 px (icon() setzt die Groesse als Inline-Stil) */
.seiten-start .chat-history-item .ico, .sidebar-desktop > .chat-history-item .ico, .menue-liste .menue-eintrag .ico { width: 16px !important; height: 16px !important; }

/* ══ 02.10.2026: Einstellungen › Anpassen (Auge je Seite) ══ */
.einst-anpassen-kopf { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 4px 0 8px; }
.einst-anpassen-text { flex: 1; min-width: 0; font-size: 12px; color: var(--text2); text-align: right; }
.info-knopf { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--text2);
  font: italic 700 12px/1 Georgia, serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.info-knopf:hover, .info-knopf:focus-visible { border-color: var(--akzent, var(--gold)); color: var(--akzent, var(--gold)); outline: none; }
/* Hinweis-Blase der schmalen Seitenleiste (js/app.js leistenTipp) */
.leisten-tipp { position: fixed; left: var(--tipp-x, 0); top: var(--tipp-y, 0); transform: translateY(-50%); z-index: 1000; max-width: 260px; padding: 6px 10px;
  border-radius: 8px; background: var(--elevated, #1c1f2a); border: 1px solid var(--border); color: var(--text); font-size: 12px; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transition: opacity .12s; }
.leisten-tipp.an { opacity: 1; }
.einst-zeile { cursor: default; }
.einst-zeile.aus { opacity: .5; }
.einst-zeile .ws-einst { position: static; flex: 0 0 auto; }
.einst-auge.aus { color: var(--text2); }
.einst-fest { color: var(--text2); font-size: 12px; white-space: nowrap; }
.einst-versteckt { text-align: center; }
/* ══ 02.10.2026: Kalender — weitere Wege einklappbar ══ */
.kal-weitere { margin-top: 12px; }
.kal-weitere > summary { cursor: pointer; padding: 6px 0; list-style: none; }
.kal-weitere > summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform .15s; }
.kal-weitere[open] > summary::before { transform: rotate(90deg); }
label.kal-quelle { cursor: pointer; }
/* ══ 02.10.2026: Die KI zeigt eine Stelle (MD 62 §11) ══ */
@keyframes kiZeigt { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--akzent) 45%, transparent); } }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.ki-zeigt { outline: 2px solid var(--gold) !important; outline-offset: 3px; border-radius: 10px; animation: kiZeigt 1.1s ease-in-out 3; }
.kx-lang { overflow-wrap: anywhere; font-size: 12px; }
/* ══ 02.10.2026: Stufen & Ebenen, Familie-Kopf (MD 62 §15) ══ */
.se-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.se-zeile:last-child { border-bottom: none; }
.se-punkt { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.se-nr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-style: normal; font-weight: 600;
  font-size: 13px; border: 1px solid var(--border); color: var(--text2); }
.se-du .se-nr { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.se-du { background: color-mix(in srgb, var(--akzent) 7%, transparent); border-radius: 10px; padding-left: 8px; padding-right: 8px; }  /* 02.10.2026 Bisher fest rgba(201,162,39,…) -> folgt Akzent */
.se-gilt { font-size: 12px; color: var(--text2); text-align: right; max-width: 45%; }
.se-du .se-gilt { color: var(--gold); font-weight: 600; }
.fam-kopf { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fam-kopf small { color: var(--text2); }
.sb-person .btn-zeile { margin-top: 6px; }

/* ══ 02.10.2026: EIN Formularbaustein fuer Familie/Firma/Schule (Architekt: „Abstaende von Eingabefeldern und Text unsauber") ══
   Beschriftung ueber jedem Feld, gleiche Abstaende (12 px zwischen Feldern, 4 px Beschriftung→Feld), Knopf unten ueber die volle Breite. */
.fk-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 4px; }
.fk-karte { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.fk-titel { font-weight: 600; font-size: 15px; color: var(--gold); }
.fk-hinweis { margin-top: -6px; color: var(--text2); font-size: 13px; line-height: 1.45; }
.fk-feld { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.fk-feld > span { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text2); display: flex; align-items: center; gap: 8px; }
.fk-feld .input-field { width: 100%; margin: 0; box-sizing: border-box; }
.fk-knopf { width: 100%; margin-top: auto; }
.fk-meldung:empty { display: none; }
.fk-meldung { line-height: 1.5; }
.fk-zwischen { margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
/* Altersstufe / Art der Gruppe: Auswahlknoepfe statt Zahlenfeld mit Zaehler */
.stufen-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
/* 14.10.2026 (MD 62 §60): EINE Grunddefinition — vorher zusätzlich glass.css (Höhe) und hier Zeile ~1104 (Radius) */
.stufen-chip { min-height: var(--knopf-h); padding: 8px 14px; border-radius: var(--app-radius-klein); border: 1px solid var(--border); background: var(--glass); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.stufen-chip:hover:not(:disabled) { border-color: var(--gold-soft); }
.stufen-chip.an { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 600; }
.stufen-chip:disabled { opacity: .55; cursor: default; }
.stufen-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fam-kopf { gap: 12px; }
.fam-kopf > .fk-knopf { width: auto; align-self: flex-start; padding-left: 22px; padding-right: 22px; }

/* ══ 02.10.2026: Gruppenseite — Bereiche · Orientierungskarte · Mitglieder · Gruppe (MD 62 §15, MD 63 §7.7) ══ */
.gk-bereiche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gk-bereich { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 12px 16px; border-radius: 12px; text-align: left; cursor: pointer;
  background: var(--glass); border: 1px solid var(--border); color: var(--text); font: inherit; }
.gk-bereich small { color: var(--text2); font-size: 12px; }
.gk-bereich.an { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.gk-bereich b::before { content: '● '; color: var(--text2); }
.gk-bereich.an b::before { color: var(--gold); }
.gk-bruecke { color: var(--text2); font-size: 18px; }
.gk-karte { position: relative; overflow-x: auto; overflow-y: hidden; padding: 8px 4px 16px; display: flex; flex-direction: column; gap: 34px; }
.gk-linien { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; color: var(--gold); }
.gk-linien .gk-baum { fill: none; stroke: var(--border); stroke-width: 1.5; }
.gk-linien .gk-quer { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .85; }
.gk-linien .gk-q-vertretung { color: var(--text2); stroke: var(--text2); }
.gk-reihe { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.gk-ebene { position: absolute; left: 0; top: -20px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.gk-seiten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; z-index: 1; margin-top: 8px; }
.gk-seite { position: relative; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.gk-box { display: flex; flex-direction: column; gap: 2px; min-width: 150px; max-width: 220px; padding: 10px 14px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--bg, #0b0d14); border: 1px solid var(--border); color: var(--text); font: inherit; }
.gk-box b { font-size: 14px; } .gk-box small { color: var(--text2); font-size: 12px; }
.gk-box:hover, .gk-box:focus-visible { border-color: var(--gold-soft); outline: none; }
.gk-box.gewaehlt { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.gk-org { border-color: var(--gold); min-width: 200px; }
.gk-projekt { border-left: 3px solid var(--gold); }
.gk-partner { border-left: 3px solid var(--text2); }
.gk-neu { border-style: dashed; color: var(--text2); align-items: center; justify-content: center; }
.gk-panel { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.gk-panel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gk-panel .fk-knopf { width: auto; align-self: flex-start; padding-left: 22px; padding-right: 22px; }
.gk-liste { display: flex; flex-direction: column; }
.gk-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.gk-zeile:last-child { border-bottom: none; }
.gk-zeile-text { display: flex; flex-direction: column; min-width: 0; }
.gk-zeile-text small { color: var(--text2); font-size: 12px; }
.gk-zeile-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gk-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.gk-form { max-width: 520px; }
.gk-knopf-schmal { align-self: flex-start; padding-left: 22px; padding-right: 22px; margin-top: 10px; }
.fk-schalter { flex-direction: row; align-items: center; gap: 10px; }
.fk-schalter > span { font-size: 14px; font-weight: 400; color: var(--text); }
/* Gefahr-Aktion in Glas-Knoepfen: rote Schrift auf Glas (Bisher .btn-gefahr hier — kollidierte mit dem roten Dialogknopf: rot auf rot) */
.gk-gefahr { color: var(--red, #ff6b6b) !important; border-color: color-mix(in srgb, var(--red) 35%, transparent) !important; }
#gkGruppe .fk-feld { margin-top: 12px; }
#gkGruppe .fk-feld:first-child { margin-top: 0; }
/* 19.10.2026 (MD 63 §7.7.6): EINE Struktur, waehlbare Haut — Baum · Haus · Hochhaus · Lagerhalle · Karte. Nur Tokens (hell + dunkel). */
.gk-darstellung { margin: 6px 0 12px; }
.gk-platz { font-weight: 600; }
.gk-schritt { border-left: 3px solid var(--gold); padding-left: 10px; }
.gk-von-oben { flex-direction: column-reverse; padding-top: 28px; }   /* oberste Reihe traegt ihre Beschriftung (top:-20px) — sonst schneidet overflow-y sie ab */
.gk-von-oben .gk-seiten { order: -1; }
.gk-box[data-ich] { box-shadow: 0 0 0 2px var(--gold) inset; }
.gk-geraete { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gk-g { width: 8px; height: 8px; border-radius: 50%; background: var(--text2); }
.gk-z-aktiv { background: var(--gold); }
.gk-z-ruhend { background: var(--gold); box-shadow: 0 0 6px var(--gold-glow); animation: gk-puls 2.4s ease-in-out infinite; }
.gk-z-fehlt { background: transparent; border: 1px solid var(--text2); }
.gk-box[data-zustand="ruhend"] { box-shadow: 0 0 10px var(--gold-glow); }
@keyframes gk-puls { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gk-z-ruhend { animation: none; } }
.gk-box[data-offenheit="geheim"] { border-left: 3px solid var(--red); }
.gk-box[data-offenheit="organisation"] { border-left: 3px solid var(--gold); }
.gk-box[data-offenheit="offen"] { border-left: 3px solid var(--text2); }
.gk-box[data-offenheit="privat"] { border-left: 3px dashed var(--gold); }
.gk-folgt, .gk-wurzel { cursor: default; color: var(--text2); }
.gk-leer { color: var(--text2); font-size: 13px; }
.gk-mehr { border-style: dashed; color: var(--text2); align-items: center; justify-content: center; }
.gk-kennung { user-select: all; word-break: break-all; }
.gk-geraet-karte { display: flex; flex-direction: column; gap: 6px; }
/* Baum: Stamm in der Mitte, Blaetter als Blattform, Wurzeln gepunktet */
.gk-d-baum .gk-s-stamm::before { content: ''; position: absolute; left: 50%; top: -34px; bottom: -34px; width: 16px; transform: translateX(-50%);
  border-radius: 8px; background: color-mix(in srgb, var(--gold) 22%, transparent); z-index: -1; }
.gk-d-baum .gk-s-stamm .gk-box { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--kachel-bg)); }
.gk-d-baum .gk-person { border-radius: 20px 4px 20px 4px; background: color-mix(in srgb, var(--gold) 7%, var(--kachel-bg)); }
.gk-d-baum .gk-s-wurzel .gk-box { border-style: dotted; border-radius: 4px 4px 20px 20px; }
/* Haus: Reihen = Stockwerke, oberste mit Dach, Fundament dunkler */
.gk-d-haus .gk-reihe { padding: 20px 10px 10px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--text2) 4%, transparent); }
.gk-d-haus .gk-reihe:first-of-type { border-radius: 48px 48px 6px 6px; }
.gk-d-haus .gk-s-wurzel { background: color-mix(in srgb, var(--text2) 14%, transparent); }
.gk-d-haus { gap: 6px; }
.gk-d-haus .gk-ebene, .gk-d-hochhaus .gk-ebene, .gk-d-lagerhalle .gk-ebene { top: 4px; left: 8px; }
/* Hochhaus: schmal, Etagen mit Seitenwaenden, Fenster eckig */
.gk-d-hochhaus { gap: 4px; }
.gk-d-hochhaus .gk-reihe { width: 100%; max-width: 760px; margin: 0 auto; padding: 18px 12px 10px; border-left: 3px solid var(--border); border-right: 3px solid var(--border);
  border-bottom: 1px solid var(--border); }
.gk-d-hochhaus .gk-box { border-radius: 3px; }
.gk-d-hochhaus .gk-s-wurzel { border-bottom-width: 4px; }
/* Lagerhalle: Regale mit Boden, Kisten */
.gk-d-lagerhalle { gap: 14px; }
.gk-d-lagerhalle .gk-reihe { justify-content: flex-start; padding: 20px 8px 8px; border-bottom: 4px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.gk-d-lagerhalle .gk-box { border-radius: 2px; }
.gk-d-lagerhalle .gk-person { border-style: dashed; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .gk-seiten { grid-template-columns: 1fr; } .gk-box { min-width: 130px; } .gk-zeile { flex-direction: column; align-items: flex-start; } }

/* 02.10.2026: Bisher hier ein „gemeinsamer Inhaltsstil" nur fuer die Einstellungen — jetzt zentral als „Widget-Fenster" in glass.css
   (Token in base.css). Altfassung: clone/recycle/vor_fenster_20261002_screens.css */

/* ══ 02.10.2026: Klassen statt Inline-Styles (Architekt: „darf nie inline CSS sein") ══ */
/* Areal-Farben (farblicher Bereich, Ausnahme der Vier-Farben-Regel) */
.areal-c-1 { background: var(--areal-1); } .areal-c-2 { background: var(--areal-2); } .areal-c-3 { background: var(--areal-3); } .areal-c-4 { background: var(--areal-4); }
.areal-c-5 { background: var(--areal-5); } .areal-c-6 { background: var(--areal-6); } .areal-c-7 { background: var(--areal-7); } .areal-c-8 { background: var(--areal-8); }
.balken-akzent { background: var(--gold); }
/* Stufen-Punkte (Bisher fester Farbsatz inline) */
.se-punkt.se-l0 { background: var(--text2); } .se-punkt.se-l1 { background: var(--gold-glow); border: 1px solid var(--gold); }
.se-punkt.se-l2 { background: var(--gold); } .se-punkt.se-l3 { background: var(--signal); }
/* Hinweistexte im Fehlerfall (Bisher element.style.color = 'var(--red)') */
.hinweis-fehler { color: var(--signal) !important; }
/* Symbolgroessen (Bisher style="width:Npx;height:Npx") */
.ico { width: 20px; height: 20px; }
.ico-14 { width: 14px; height: 14px; } .ico-16 { width: 16px; height: 16px; } .ico-18 { width: 18px; height: 18px; }
.ico-20 { width: 20px; height: 20px; } .ico-26 { width: 26px; height: 26px; }
/* Akzentwahl: Vorschlaege (Farbpalette der Wahl, nicht der Oberflaeche) */
.akzent-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.akzent-punkt { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.akzent-punkt.an { border-color: var(--text); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.ak-gold { background: #d4a843; } .ak-blau { background: #60a5fa; } .ak-gruen { background: #4ade80; } .ak-rosa { background: #f472b6; }
.ak-lila { background: #a78bfa; } .ak-tuerkis { background: #2dd4bf; } .ak-orange { background: #fb923c; } .ak-silber { background: #a8b0bd; }
.akzent-eigen { width: 34px; height: 34px; border: none; background: none; padding: 0; cursor: pointer; }
/* Anbieter-Zeichen (Bisher Markenfarbe inline) — Akzent */
.zeichen-akzent { background: var(--gold-soft); color: var(--gold); }
/* 02.10.2026: Live-Bereich 2 × 2 (4 Fenster, gleichmaessig, Zahlen ohne Umbruch) · Areale 4 × 2 · schmal 1 Spalte */
.gl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .gl-raster { grid-template-columns: 1fr; } }

/* 02.10.2026: App-Hilfe im Chat (Plan 97 #56) — Klassen statt Inline, Farben aus Token */
.app-hilfe-titel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.app-hilfe p { margin: 6px 0; }
.app-hilfe-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.app-hilfe-liste { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 2px; }
.app-hilfe-thema { all: unset; cursor: pointer; display: block; padding: 6px 8px; border-radius: var(--knopf-radius); color: var(--text); }
.app-hilfe-thema:hover, .app-hilfe-thema:focus-visible { background: var(--gold-soft); }
.app-hilfe-thema b { color: var(--gold); font-weight: 600; }
.app-hilfe-fuss { color: var(--text2); font-size: 13px; }

/* 02.10.2026: Profil = Zeilen ueber dich (MD 62 §16 E2) — Bezeichnung links, Wert rechts, Pfeil; Werte aus Token */
.profil-kurz { padding-top: 4px; padding-bottom: 4px; }
.pz-zeile { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 10px 0; cursor: pointer; color: var(--text); border-top: 1px solid var(--fenster-rand); }
.pz-zeile:first-child { border-top: none; }
.pz-zeile .ico { color: var(--gold); flex-shrink: 0; }
.pz-l { flex: 1; font-size: 15px; }
.pz-w { color: var(--text2); font-size: 14px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.pz-pfeil { color: var(--text2); font-size: 18px; }
.pz-zeile:hover .pz-l, .pz-zeile:focus-visible .pz-l { color: var(--gold); }
.akzent-mini { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); vertical-align: middle; }
/* Menue in der Mitte nur, wenn die Seitenleiste es NICHT schon zeigt (Handy, eingeklappt) — sonst doppelt. Anpassen-Modus immer. */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .app-shell:not(.sb-zu):has(.sidebar-desktop.zeigt-unter) #settingsBody .einst-menue:not(.anpassen) { display: none; }
}

/* 02.10.2026: KI-Profil — EIN Teil je Ansicht + Zeilenmuster (MD 62 §16 E2/E3) */
.profil-einzeln .profil-abschnitt:not(.aktiv) { display: none; }
/* Zeile: Bezeichnung links, kompaktes Bedienelement rechts (Auswahl, kurzes Feld) */
#settingsBody .profil-abschnitt .card-section:has(> select.input-field:last-child),
#settingsBody .profil-abschnitt .card-section:has(> .settings-ki-form:last-child) {
  display: grid; grid-template-columns: 1fr minmax(180px, 300px); align-items: center; gap: 12px;
}
#settingsBody .profil-abschnitt .card-section:has(> select.input-field:last-child) > .card-section-title,
#settingsBody .profil-abschnitt .card-section:has(> .settings-ki-form:last-child) > .card-section-title {
  margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 500;
}
#settingsBody .profil-abschnitt .card-section > select.input-field:last-child,
#settingsBody .profil-abschnitt .card-section > .settings-ki-form:last-child .input-field { margin: 0; min-height: var(--knopf-h); padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 560px) {
  #settingsBody .profil-abschnitt .card-section:has(> select.input-field:last-child),
  #settingsBody .profil-abschnitt .card-section:has(> .settings-ki-form:last-child) { grid-template-columns: 1fr; }
}
/* leere Leiste oben (Reiter stehen auf breiten Schirmen in der Seitenleiste, Speichern oben im Kopf) */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .app-shell:not(.sb-zu):has(.sidebar-desktop.zeigt-unter) #settingsBody .entwurf-leiste:not(:has(#entwurfVerwerfen:not(.hidden))) { display: none; }
}

/* 02.10.2026: Hintergrund-Wahl — Muster je Grundton (Farbmuster der Auswahl = Datenfarben, E5) */
.grund-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.grund-punkt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 6px; justify-items: center; padding: 8px;
  border-radius: var(--knopf-radius); border: 1px solid var(--fenster-rand); }
.grund-punkt.an { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.grund-punkt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.grund-muster { width: 100%; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); }
.grund-name { font-size: 12px; color: var(--text2); }
.grund-nacht .grund-muster { background: linear-gradient(135deg, #08080d 55%, #1c1c2a); }
.grund-graphit .grund-muster { background: linear-gradient(135deg, #16171c 55%, #24262d); }
.grund-marine .grund-muster { background: linear-gradient(135deg, #0a1528 55%, #16223a); }
.grund-wald .grund-muster { background: linear-gradient(135deg, #0a1912 55%, #162a21); }
.grund-aubergine .grund-muster { background: linear-gradient(135deg, #170e1d 55%, #2a1b33); }
.grund-akzent .grund-muster { background: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 7%, #06060a) 55%, color-mix(in srgb, var(--akzent) 22%, #1c1c28)); }
html[data-glanz=metall] .akzent-punkt { background-image: linear-gradient(135deg, rgba(255,255,255,0.45), transparent 45%, rgba(0,0,0,0.3) 70%, rgba(255,255,255,0.25)); }

/* ═══ 03.10.2026: APP-STIL (Architekt: „vollabgerundete Buttons mobile sehen nicht akkurat aus — besser App-Stil iPhone, leicht abgerundet,
   symmetrischer angeordnet"). Zentral, steht in der zuletzt geladenen Datei (gewinnt gegen glass/layout). Kreise NUR noch fuer Bilder
   (Profilbild) und Farbmuster. Bisher: Chips/Kopf-Abzeichen 999px, Kopf-Symbole/Senden/Schwebe 50%, Eingabe 24px, Fussleisten-Kreisblase. ═══ */
:root { --app-radius: 12px; --app-radius-klein: 10px; }
html .kopf-speichern, html .kopf-abzeichen, html .kopf-sprache > .btn-icon { border-radius: var(--app-radius-klein); }
html .kern-chip { border-radius: 6px; }
html .btn-icon, html .schwebe-knopf, html .app-footer-send { border-radius: var(--app-radius); }
html .app-footer-input { border-radius: 16px; }
/* Auswahl- und Teil-Leisten: symmetrisches Raster mit gleich breiten Feldern (Segment-Steuerung) */
#settingsBody :is(.teil-leiste, .stufen-wahl) { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
#settingsBody .teil-leiste { padding: 4px; border-radius: 14px; background: var(--kachel-bg); border: 1px solid var(--fenster-rand); }
#settingsBody .teil-leiste .stufen-chip { border-color: transparent; background: transparent; justify-content: center; text-align: center; min-height: 36px; padding: 6px 8px; }
#settingsBody .teil-leiste .stufen-chip.an { background: var(--gold); color: var(--bg); }
#settingsBody .stufen-wahl .stufen-chip { justify-content: center; text-align: center; }
/* Fussleiste im iPhone-Stil: aktiver Punkt = abgerundetes Feld hinter dem Symbol, nichts ragt heraus */
html .app-footer-tabs { padding-top: 6px; }
html .app-footer-tabs .tab-blase { width: 56px; height: 32px; border-radius: var(--app-radius); }
html .app-footer-tabs .tab-item.active .tab-blase { width: 56px; height: 32px; margin-top: 0; border: none; border-radius: var(--app-radius); transform: none;
  background: color-mix(in srgb, var(--akzent) 20%, transparent); color: var(--gold); box-shadow: none; }
html[data-glanz=metall] .app-footer-tabs .tab-item.active .tab-blase { background: var(--metall-weich); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px color-mix(in srgb, var(--akzent) 35%, transparent); }

/* LOGO im Kopf/Seitenleiste als MASKE ueber der Akzentflaeche — folgt Akzentfarbe, bei Metallic Verlauf + Glanz. Die Bilder bleiben (alt-Text),
   werden aber nur noch fuer Bildschirmleser gefuehrt. Logo-Datei ist seit 03.10. sauber freigestellt (echte Loecher statt Schwarz). */
html .brand-zeichen, html .brand-schrift { background: var(--gold); -webkit-mask-image: url("../logo.svg"); mask-image: url("../logo.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html .brand-zeichen { -webkit-mask-size: auto calc(var(--h) * 2500 / 1596); mask-size: auto calc(var(--h) * 2500 / 1596);
  -webkit-mask-position: calc(var(--h) * -570 / 1596) calc(var(--h) * -260 / 1596); mask-position: calc(var(--h) * -570 / 1596) calc(var(--h) * -260 / 1596); }
html .brand-schrift { -webkit-mask-size: auto calc(var(--h) * 2500 / 362); mask-size: auto calc(var(--h) * 2500 / 362);
  -webkit-mask-position: calc(var(--h) * -285 / 362) calc(var(--h) * -1858 / 362); mask-position: calc(var(--h) * -285 / 362) calc(var(--h) * -1858 / 362); }
html .brand-zeichen > img, html .brand-schrift > img { opacity: 0; }
html[data-glanz=metall] :is(.brand-zeichen, .brand-schrift) { background: var(--metall); }
/* 03.10.2026: Handy wie iOS — Zurueck oben links im Kopf (auf Unterseiten statt Logo), Speichern oben rechts nur bei offenem Entwurf,
   KEINE schwebenden Knoepfe mehr ueber dem Inhalt (verdeckten Text). Schliessen entfaellt am Handy (Fussleiste: Start/Einstellen).
   Bisher (layout.css ≤768): Kopf-Zurueck/-Schliessen versteckt, stattdessen schwebende Rundknoepfe rechts. Tablet/Desktop unveraendert. */
@media (max-width: 600px) {
  html .schwebe-aktionen { display: none !important; }
  html .kopf-zurueck:not(.hidden) { display: inline-flex !important; width: 36px; height: 36px; }
  html .top-bar:has(.kopf-zurueck:not(.hidden)) .kopf-marke { display: none; }
  /* 08.10.2026: Symbol statt Text (seit 04.10.) — der alte Textabstand drueckte die Diskette auf 10 px und schnitt die Zahl ab */
  html .kopf-speichern.offen:not(.hidden) { display: inline-flex; height: 34px; padding: 0; overflow: visible; }
}
/* Farbmuster: EINE gleichmaessige Reihe (8 Farben + eigene Farbe), alle rund — vorher Fliesszeile 7 + 2 und eigenes Feld eckig */
.akzent-wahl { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; justify-items: center; align-items: center; max-width: 420px; }
.akzent-wahl :is(.akzent-punkt, .akzent-eigen) { width: 100%; max-width: 36px; height: auto; aspect-ratio: 1; border-radius: 50%; }
.akzent-eigen { overflow: hidden; border: 2px solid var(--border); }
.akzent-eigen::-webkit-color-swatch-wrapper { padding: 0; }
.akzent-eigen::-webkit-color-swatch { border: none; border-radius: 50%; }
.akzent-eigen::-moz-color-swatch { border: none; border-radius: 50%; }
/* 03.10.2026: Handy — Reiter einer Seite (KI-Profil, Datenschutz …) oben als symmetrisches Raster (3 Spalten), wie die Teil-Leiste.
   Bisher am Handy ausgeblendet (layout.css „Reiter stehen in der Schublade") ⇒ leerer Streifen, Teile nur ueber das Menue erreichbar.
   09.10.2026 (Pruefung CSS #6): bis 768 px statt 600 — layout.css blendet sie bis 768 aus, dazwischen fehlten sie ganz. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  html #settingsBody .entwurf-leiste { background: transparent; padding: 0; margin: 0 0 var(--fenster-abstand); position: static; display: block; }
  html #settingsBody .settings-tab-bar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; margin: 0;
    border-radius: 14px; background: var(--kachel-bg); border: 1px solid var(--fenster-rand); overflow: visible; flex-wrap: wrap; }
  html #settingsBody .settings-tab-bar .settings-tab-btn { min-height: 36px; padding: 6px 4px; border-radius: var(--app-radius-klein); border: none; background: transparent;
    color: var(--text2); font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html #settingsBody .settings-tab-bar .settings-tab-btn.active { background: var(--gold); color: var(--bg); font-weight: 600; }
  html[data-glanz=metall] #settingsBody .settings-tab-bar .settings-tab-btn.active { background: var(--metall); }
}
/* 03.10.2026: Helix-Farben wie die Akzentfarben — EINE gleichmaessige Reihe, eigene Farbe rund (vorher 8 + eckiges Feld in Zeile 2) */
.helix-farbwahl { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; justify-items: center; align-items: center; max-width: 420px; }
.helix-farbwahl :is(.helix-farbpunkt, .helix-farbeigen) { width: 100%; max-width: 36px; height: auto; aspect-ratio: 1; border-radius: 50%; }
.helix-farbeigen { overflow: hidden; border: 2px solid var(--border); }
.helix-farbeigen::-webkit-color-swatch-wrapper { padding: 0; }
.helix-farbeigen::-webkit-color-swatch { border: none; border-radius: 50%; }
.helix-farbeigen::-moz-color-swatch { border: none; border-radius: 50%; }

/* ═══ 03.10.2026: ERSTEINRICHTUNG — Widget mit 5 Schritten (MD 72 Phase 3 „Form"), App-Stil. Gross = Karte, Handy = Vollbild-Blatt. ═══ */
.ew-overlay { align-items: center; justify-content: center; }
.ew-box { width: min(480px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--fenster-bg); border: 1px solid var(--fenster-rand); border-radius: 22px; box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,.5));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; }
html[data-glanz=metall] .ew-box { background-image: linear-gradient(160deg, rgba(255,255,255,.07), transparent 40%); border-color: color-mix(in srgb, var(--akzent) 28%, var(--fenster-rand)); }
.ew-kopf { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.ew-punkte { display: flex; gap: 6px; }
.ew-punkte span { width: 8px; height: 8px; border-radius: 4px; background: var(--fenster-rand); transition: width .25s ease, background .25s ease; }
.ew-punkte span.fertig { background: color-mix(in srgb, var(--akzent) 55%, transparent); }
.ew-punkte span.an { width: 22px; background: var(--gold); }
.ew-link { all: unset; cursor: pointer; color: var(--text2); font-size: 14px; padding: 6px 2px; }
.ew-link:hover, .ew-link:focus-visible { color: var(--gold); }
.ew-inhalt { flex: 1 1 auto; overflow-y: auto; padding: 14px 22px 8px; display: flex; flex-direction: column; gap: 16px; }
.ew-zeichen { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--akzent) 18%, transparent); color: var(--gold); margin-top: 6px; }
html[data-glanz=metall] .ew-zeichen { background: var(--metall); color: var(--bg); }
.ew-titel { font-size: 24px; line-height: 1.2; font-weight: 700; margin: 0; }
.ew-text { margin: -8px 0 0; color: var(--text2); font-size: 15px; line-height: 1.45; }
.ew-feld { display: grid; gap: 8px; }
.ew-feld-zeile { grid-template-columns: auto minmax(0, 220px); align-items: center; justify-content: space-between; }
.ew-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.ew-segment { display: grid !important; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  border-radius: 14px; background: var(--kachel-bg); border: 1px solid var(--fenster-rand); }
.ew-segment .stufen-chip { border: none; background: transparent; justify-content: center; text-align: center; min-height: 36px; padding: 6px 4px; font-size: 14px; }
.ew-segment .stufen-chip.an { background: var(--gold); color: var(--bg); font-weight: 600; }
html[data-glanz=metall] .ew-segment .stufen-chip.an { background: var(--metall); }
.ew-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ew-karten-1 { grid-template-columns: 1fr; }
.ew-karte { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--fenster-rand); background: var(--kachel-bg); color: var(--text); transition: border-color .15s ease, background .15s ease; }
.ew-karte b { font-size: 15px; font-weight: 600; }
.ew-karte small { font-size: 13px; line-height: 1.35; color: var(--text2); }
.ew-karte.an { border-color: var(--gold); background: color-mix(in srgb, var(--akzent) 12%, var(--kachel-bg)); box-shadow: 0 0 0 1px var(--gold); }
.ew-karte:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ew-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-top: 1px solid var(--fenster-rand); padding-top: 8px; }
.ew-zeile b { font-weight: 600; text-align: right; }
.ew-anhoeren { justify-self: start; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.ew-zusammen { display: grid; gap: 0; }
.ew-code { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--kachel-bg); border: 1px dashed var(--fenster-rand); }
.ew-code b { font-family: ui-monospace, monospace; letter-spacing: .08em; color: var(--gold); font-size: 16px; }
.ew-code small { color: var(--text2); font-size: 12px; line-height: 1.35; }
.ew-fuss { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 12px 22px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--fenster-rand); }
.ew-fuss .btn { width: 100%; justify-content: center; min-height: 46px; font-size: 15px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .ew-box { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: none; }
  .ew-titel { font-size: 26px; }
  .ew-karten:not(.ew-karten-1) { grid-template-columns: 1fr 1fr; }
}
.ew-zeile .toggle-sw { border: none; padding: 0; flex: 0 0 auto; }
.ew-karte { align-content: start; }
.ew-inhalt .akzent-wahl { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: none; }   /* 8 Farben = 8 Spalten, symmetrisch */

/* 03.10.2026: Download-Seite — Sprachwahl im Kopf, ausgegraute Knoepfe ohne Link, Abstaende der Anleitung (keine Inline-Stile) */
.dl-sprachen { display: flex; gap: 6px; margin-left: 16px; }
.site-topbar-links { margin-left: auto; }
.dl-sprachen .stufen-chip { min-width: 40px; }
.dl-knopf.dl-aus { opacity: .55; pointer-events: none; cursor: default; }
.dl-pwa-liste p { margin: 0 0 6px; }
.dl-pwa-liste p:last-child { margin-bottom: 0; }
.dl-groesse { margin-top: 8px; }
/* 03.10.2026: Projektordner / Dateien / Chats in den Tools */
.ws-projekt { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.ws-projekt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-zeile-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ws-file-row .ws-zeile-knoepfe { margin-top: 0; }
.ws-alt { margin-top: var(--luft, 10px); }
.btn-link { background: none; border: 0; padding: 0; color: var(--akzent, var(--gold)); font: inherit; cursor: pointer; text-align: left; }
/* 03.10.2026 F16: Mitglied verwalten */
.gk-verwalten { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--luft-klein, 8px); padding-top: var(--luft-klein, 8px); }
.gk-zeile-zusatz { flex-basis: 100%; color: var(--text2); }

.gk-zeile { flex-wrap: wrap; }   /* 03.10.2026 F16: Verwalten-Feld auf eigener Zeile */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { body.subpage .site-topbar-links { display: none; } .dl-sprachen { margin-left: auto; } }   /* 03.10.2026: Handy — Logo fuehrt zur App, Fussleiste traegt die Links */
/* 03.10.2026 FE18: Rollen-Sperre (Kind / Firma / nicht Superadmin) */
.rolle-gesperrt { opacity: .45; pointer-events: none; cursor: not-allowed; }
.rolle-hinweis { display: block; margin-top: 6px; color: var(--text2); font-size: 12px; }
/* 03.10.2026 FE19: Antwort bewerten + Selbstbild */
.bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.bewertung-knopf { background: none; border: 1px solid var(--border); border-radius: var(--app-radius-klein, 10px); padding: 2px 8px; color: var(--text2); font: inherit; font-size: 13px; cursor: pointer; }
.bewertung-knopf:hover { border-color: var(--akzent, var(--gold)); color: var(--text); }
.bewertung-knopf:disabled { opacity: .5; cursor: default; }
.bewertung-meldung { font-size: 12px; color: var(--text2); }
.bewertung-form { flex-basis: 100%; }
/* Antwort-Lernablauf (MD 62 §29): 👍/👎 + „⋯", darunter bei Bedarf „Was stimmt nicht?", Rueckfrage, Angebot bei Wiederholung, Training */
.bewertung-knopf { display: inline-flex; align-items: center; gap: 4px; }
.bewertung-knopf.an { border-color: var(--akzent, var(--gold)); color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 12%, transparent); }
.bewertung-mehr { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.lf-panel { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--app-radius-klein, 10px); }
.lf-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.lf-form :is(input, textarea) { flex: 1 1 220px; min-width: 0; }
:is(.rueckfrage, .lf-angebot, .lf-training) { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 14px; }
.bubble > .lf-wahl { margin-top: 10px; }
.selbstbild-text { margin: 0; line-height: 1.55; color: var(--text); }
#bestaetigenText { white-space: pre-line; }   /* 03.10.2026: Zeilen im Dialog (Zugangsdaten) */
/* 03.10.2026: Hinweis-Leiste (Kern nicht erreichbar · Lizenz · Update) */
.hinweis-leiste { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; gap: 6px; width: min(720px, calc(100vw - 24px)); }
.hinweis-leiste.hidden { display: none; }
.hinweis-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--app-radius, 12px); background: color-mix(in srgb, var(--bg) 94%, transparent);   /* deckend genug: Bisher var(--glass), Inhalt schien durch */ border: 1px solid var(--fenster-rand, var(--border)); color: var(--text); font-size: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hinweis-fehler { border-color: color-mix(in srgb, #e5484d 60%, transparent); }
.hinweis-warn { border-color: color-mix(in srgb, var(--akzent, var(--gold)) 70%, transparent); }
.hinweis-klein { font-size: 12px; color: var(--text2); flex-basis: 100%; }
/* 03.10.2026: Schriftgroesse + Dichte je Konto */
html[data-schrift="gross"] body { zoom: 1.1; }
html[data-schrift="sehrgross"] body { zoom: 1.22; }
html[data-dichte="kompakt"] { --luft: 6px; --luft-klein: 4px; --fenster-abstand: 10px; }
html[data-dichte="kompakt"] .card-section { padding-top: 10px; padding-bottom: 10px; }
html[data-dichte="kompakt"] .toggle-row { padding-top: 6px; padding-bottom: 6px; }
.ds-gezielt { display: flex; flex-direction: column; gap: 6px; margin: var(--luft, 10px) 0; }

/* 03.10.2026 (FE7): Knopfbereich der Entwurfsleiste ohne sichtbaren Knopf ausblenden — Speichern sitzt im Kopf, Verwerfen nur bei Entwurf.
   Bisher am Handy (width:100%) ein leerer Streifen unter den Reitern. */
#settingsBody .entwurf-knoepfe:not(:has(#entwurfVerwerfen:not(.hidden))) { display: none; }
/* 03.10.2026: Wissens-Explorer je Areal */
.areal-marker-knopf { margin-top: 8px; align-self: flex-start; }
.areal-marker-liste { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
/* 03.10.2026 (MD 62 §19): Chatbalken „+" und Lehrer als zweiter Gespraechspartner */
.app-footer-plus { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text2); background: transparent; border: 0; cursor: pointer; transition: color .15s ease, transform .15s ease; }
.app-footer-plus:hover, .app-footer-plus:focus-visible { color: var(--gold); }
.app-footer-plus:active { transform: scale(.92); }
.chat-werkzeuge { position: absolute; left: 8px; bottom: calc(100% + 6px); width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow-y: auto; }   /* Rahmen: Menü-Block */
.cw-eintrag { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.cw-eintrag:hover:not(:disabled), .cw-eintrag:focus-visible { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.cw-eintrag:disabled { opacity: .5; cursor: not-allowed; }
.cw-eintrag .ico { color: var(--gold); flex-shrink: 0; }
.cw-eintrag span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-eintrag b { font-weight: 600; font-size: 14px; }
.cw-eintrag small { color: var(--text2); font-size: 12px; line-height: 1.3; }
/* 23.10.2026 (Architekt): Gruppen im „+"-Blatt (FÜR DIESE FRAGE · HELMUT LERNT DARAUS) und im Art-/Einstellungs-Blatt */
.cw-gruppe { padding: 10px 12px 2px; border-top: 1px solid var(--border); }
.cw-gruppe:first-child { border-top: 0; }
.cw-gruppe small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.chat-werkzeuge .chat-art-wahl, .chat-werkzeuge .chat-fuer-wahl { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; overflow: visible; }   /* im Blatt umbrechen statt seitlich scrollen */
.chat-werkzeuge .chat-art-teilnehmer { display: flex; flex-direction: column; gap: 4px; padding: 4px 10px; font-size: 13px; color: var(--text2); }
.chat-werkzeuge .settings-hint { display: block; padding: 4px 12px 8px; font-size: 12px; }
/* Art-Symbol neben „+": zeigt die Art des offenen Chats (Akzentfarbe); steht sie fest, nur Anzeige mit Blatt-Hinweis */
.chat-art-knopf .ico { color: var(--akzent, var(--gold)); }
/* Handy im Chat: die Chat-Leiste ersetzt die Hauptleiste — das Kopf-⋯ (Projekt & Teilen) steht dort als „Projekt" und entfaellt oben */
body.im-chatleiste #kopfChatMenue { display: none; }
.cw-url { display: flex; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--border); }
.cw-url .input-field { flex: 1; min-width: 0; }
.bubble-row.lehrer { justify-content: flex-start; }
.bubble-row.lehrer .bubble { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.lehrer-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.bubble-row.system { justify-content: center; }
.bubble-row.system .bubble { background: transparent; border: 1px dashed var(--border); color: var(--text2); font-size: 13px; }
/* 03.10.2026 (MD 62 §20.2): Handy — beim Tippen nur Chat + Eingabe, die Fussleiste kommt nach dem Schliessen der Tastatur zurueck */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  body.tippt .app-footer-tabs { display: none; }
  body.tippt .app-footer { padding-bottom: 0; }
}
/* 03.10.2026 (MD 62 §20.5): Desktop — Eingabeleiste hoeher und raeumlich (schwebend: Lichtkante oben, Tiefe durch zwei Schatten) */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .app-footer { background: transparent; border-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 0 18px; }
  .app-footer-input, .app-footer-input:focus-within {
    max-height: none; min-height: 60px; margin-top: 4px; margin-bottom: 4px; padding: 10px 10px 10px 18px; border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, var(--surface)) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 2px 6px rgba(0,0,0,.18), 0 14px 34px rgba(0,0,0,.30);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .app-footer-input:focus-within {
    transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 60%, var(--border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 0 0 3px var(--gold-soft), 0 4px 10px rgba(0,0,0,.20), 0 20px 44px rgba(0,0,0,.34);
  }
  .app-footer-input :is(input, textarea) { font-size: 16px; }
}
/* 03.10.2026 (MD 62 §21.7): Lehrer-Terminal — Fenster ueber der Seite, Ausgabe wie ein Terminal */
.lt-huelle { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.55); }
.lt-fenster { width: min(720px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--gold) 4%, var(--bg)); border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.lt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.lt-kopf > span { display: flex; align-items: center; gap: 8px; }
.lt-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-ausgabe { flex: 1; min-height: 220px; overflow-y: auto; padding: 12px; border-radius: 10px; background: #0b0c10; color: #d7dbe3;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; border: 1px solid #1d2028; }
.lt-zeile a { color: #f2c75c; text-decoration: underline; }
.lt-befehl { color: #8ab4f8; }
.lt-ich { color: #9aa3b2; }
.lt-fehler { color: #ff8a80; }
.lt-ok { color: #7ee2a8; }
.lt-eingabe { display: flex; gap: 6px; }
.lt-eingabe .input-field { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* 03.10.2026 (MD 62 §21.9): Empfohlene Wege zu den Lehrern */
.ki-empfehlung { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); }
.ki-empf-kopf { display: flex; align-items: center; gap: 8px; color: var(--gold); }
.ki-weg { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.ki-weg-nr { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--bg); background: var(--gold); }
.ki-weg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ki-weg-text small { color: var(--text2); line-height: 1.35; }
.ki-weg-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ki-empf-fuss { margin: 0; }
@media (max-width: 560px) { .ki-weg { grid-template-columns: 28px 1fr; } .ki-weg-knoepfe { grid-column: 2; justify-content: flex-start; } }
/* 03.10.2026 (MD 62 §22): Lehrer-Bereich in Reitern */
.lehrer-reiter { margin-top: 4px; }
.lr-karte { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lr-titel { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin: 0; }
.lr-kette { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lr-kette li { display: grid; grid-template-columns: 26px auto 1fr; align-items: center; gap: 10px; }
.lr-kette small, .lr-liste small, .lr-modell small { color: var(--text2); }
.lr-nr { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--gold); color: var(--bg); }
.lr-aufgaben, .lr-budget { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.lr-aufgaben label, .lr-budget label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text2); }
.lr-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lr-liste li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.lr-liste li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-modelle { display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; }
.lr-modell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid var(--border); cursor: pointer; }
.lr-modell span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-modell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 03.10.2026 (Plan 97 F41): Lernstoff geben */
.ls-block { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); }
.ls-zaehler { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.ls-zaehler > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-border); }
.ls-zaehler span { font-size: 12px; color: var(--text2); }
.ls-plus { color: var(--green, #4ade80); margin-left: 6px; }
.ls-minus { color: var(--red, #e5484d); margin-left: 6px; }
/* 03.10.2026 (Plan 97 F40): Passwort vergessen */
.login-link { display: block; margin: 8px auto 4px; padding: 4px 8px; background: none; border: 0; color: var(--gold); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#pwVergessenForm { display: flex; flex-direction: column; gap: 10px; }
#pwVergessenForm.hidden { display: none; }
.pv-titel { margin: 0; font-size: 18px; font-weight: 600; text-align: center; }
/* 03.10.2026 (MD 62 §23): Funktionsschalter, Rechtstexte-Editor */
.funktion-aus { display: none !important; }
.ih-wahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ih-wahl select { flex: 1 1 140px; width: auto; }
.ih-text { width: 100%; min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; resize: vertical; margin: 8px 0; }
.ih-vorschau-box, .ih-versionen-box { margin-top: 12px; }
.ih-vorschau-box summary, .ih-versionen-box summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.legal-vorschau { max-height: 420px; overflow: auto; padding: 12px 16px; border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 10px; line-height: 1.7; font-size: 14px; }
.legal-vorschau h2 { font-size: 20px; margin: 0 0 14px; } .legal-vorschau h3 { font-size: 15px; margin: 20px 0 6px; }
.legal-vorschau a { color: var(--gold); }
.fk-gruppe { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin: 14px 0 4px; }
.fk-wahl { width: auto; min-width: 180px; }
/* 03.10.2026 (MD 62 §23.4): Sprachstand je Rechtstext */
.ih-sprachen { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ih-sprache { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border, rgba(255,255,255,.14)); }
.ih-sprache.aktiv { outline: 1px solid var(--gold); }
.ih-sprache.ih-original, .ih-sprache.ih-geprueft { border-color: rgba(80,200,120,.5); }
.ih-sprache.ih-auto { border-color: rgba(230,170,40,.6); }
.ih-sprache.ih-laeuft { opacity: .8; } .ih-sprache.ih-fehlt { opacity: .6; }
.ih-haken { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; }
/* 03.10.2026 (Plan 97 F45–F53) */
.lr-art { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,.18)); opacity: .8; }
.lr-fehler { margin-top: 8px; font-size: 13px; } .lr-fehler summary { cursor: pointer; }
.input-field.hervor { outline: 2px solid var(--gold); }
.kx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.kx-auge { min-width: 40px; }
/* 03.10.2026 (Plan 97 F54/F55): Kopplungscode */
.kk-code { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 8px 0; }
.kk-gross { font: 600 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.kk-code .qr-svg { width: 180px; height: 180px; border-radius: 8px; }
.kp-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
/* 03.10.2026 (Plan 97 F20, U24): Ruhefenster, Kontroll-Zaehler */
.ka-fenster { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ka-fenster label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ka-fenster input[type=time] { width: auto; min-width: 110px; }
.kz-block { margin: 6px 0; } .kz-block summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.kz-block code { font-size: 12px; }
/* 03.10.2026 (Plan 97 F56): System-Einstellungen generisch */
.se-zeile { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.se-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .se-text small { opacity: .75; }
.se-wert { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.se-zahl { width: 120px; }
/* 04.10.2026: Mein Profil › Anmeldung & Sicherheit — direkte Wege */
.mp-sicher { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mp-sicher-knopf { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
.hervorgehoben { outline: 2px solid var(--gold); outline-offset: 4px; transition: outline-color .4s; border-radius: 12px; }
.pv-konto { display: flex; flex-direction: column; gap: 10px; min-width: min(420px, 86vw); }
/* 04.10.2026: Update-Fenster */
.update-box { overflow: auto; }   /* 14.10.2026: Breite/Hoehe aus dem Fenstersystem (vorher 86vh hob das Handy-Blatt auf) */
/* 04.10.2026 (MD 62 §27): Helmut beibringen — Schritte, Kacheln */
.hb-schritt { display: flex; gap: 12px; margin: 14px 0; }
.hb-nr { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--gold-soft); color: var(--gold); }
.hb-koerper { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hb-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.hb-raster.hb-klein { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hb-kachel { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: var(--app-radius-klein, 12px); border: 1px solid var(--border, rgba(255,255,255,.14)); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.hb-kachel span { display: flex; flex-direction: column; } .hb-kachel small { opacity: .7; font-size: 12px; }
.hb-kachel.an { border-color: var(--gold); background: var(--gold-soft); }
.hb-kachel:disabled { opacity: .45; cursor: not-allowed; }
.hb-unter { margin: 6px 0 0; font-size: 14px; }

/* 04.10.2026: Superadmin-Nutzertabelle (schlicht) */
.vn-rahmen { overflow-x: auto; margin: 8px 0; }
.vn-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.vn-tabelle th, .vn-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,.12)); vertical-align: top; }
.vn-tabelle th { font-weight: 600; opacity: .75; white-space: nowrap; }
.vn-tabelle td small { display: block; opacity: .65; font-size: 12px; }
.vn-tabelle tr.vn-detail td { background: var(--gold-soft, rgba(255,255,255,.04)); }
.vn-marke { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: rgba(255,120,120,.15); }
.vn-marke.gut { background: rgba(120,220,160,.15); }
.vn-aktionen { display: flex; flex-direction: column; gap: 8px; }
.vn-tabelle tr.vn-zeile { cursor: pointer; }
.vn-tabelle tr.vn-zeile:hover td, .vn-tabelle tr.vn-zeile[aria-expanded="true"] td { background: var(--gold-soft, rgba(255,255,255,.05)); }
/* 04.10.2026: Rechtstexte als Text-Editor statt HTML-Feld */
.ih-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.ih-leiste .input-field { flex: 1 1 180px; min-width: 140px; }
.ih-editor { max-height: 60vh; min-height: 260px; outline: none; cursor: text; }
.ih-editor:focus { border-color: var(--gold); }
/* 04.10.2026: Lehrer-Kette — die Statuszeile (small) lag in der 26-px-Nummernspalte ⇒ Wort-für-Wort-Umbruch; Abzeichen nicht strecken */
.lr-kette li > small { grid-column: 2 / -1; }
.lr-kette li > :nth-child(3) { justify-self: start; }
/* 04.10.2026: Hilfe-Seite — freundlich, ruhig, wenige Elemente */
.hilfe-gruss { font-size: 16px; line-height: 1.6; margin: 4px 0 12px; }
.hilfe-schritt { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--fenster-rand, var(--border)); }
.hilfe-sym { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--akzent, var(--gold)) 14%, transparent); color: var(--akzent, var(--gold)); }
.hilfe-text b { display: block; font-size: 15px; } .hilfe-text p { margin: 2px 0 0; font-size: 13px; color: var(--text2); line-height: 1.5; }
.hilfe-seite { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 4px; border: none; border-top: 1px solid var(--fenster-rand, var(--border)); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.hilfe-seite:first-of-type { border-top: none; }
.hilfe-seite .hilfe-seite-text { flex: 1; display: flex; flex-direction: column; } .hilfe-seite small { color: var(--text2); font-size: 12px; }
.hilfe-seite > :first-child { flex: 0 0 auto; }
.hilfe-seite .ico, .hilfe-seite > svg { color: var(--akzent, var(--gold)); }
.hilfe-seite:hover { background: var(--kachel-bg, rgba(255,255,255,.04)); border-radius: 10px; }
.hilfe-antwort { font-size: 14px; line-height: 1.65; margin: 4px 0 10px; }
@media (max-width: 560px) { .hilfe-schritt { grid-template-columns: 40px 1fr; } .hilfe-schritt .btn { grid-column: 2; justify-self: start; } }
/* 04.10.2026: Zustimmung bei der Registrierung, Speicher-Hinweis beim ersten Besuch, Aufbau-Hinweis schliessen */
.reg-zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin: 10px 0 4px; text-align: left; color: var(--text2); }
.reg-zustimmung input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--akzent, var(--gold)); }
.reg-zustimmung a { color: var(--akzent, var(--gold)); }
.speicher-hinweis { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 950;
  width: min(640px, calc(100vw - 24px)); padding: 14px 16px; border-radius: var(--fenster-radius, 14px); background: var(--bg, #0d0f14);
  border: 1px solid var(--fenster-rand, var(--border)); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.speicher-hinweis p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; }
.speicher-hinweis .mcp-knoepfe { margin: 8px 0 0; justify-content: flex-end; }
.hinweis-eintrag .hinweis-zu { margin-left: auto; width: 32px; height: 32px; min-width: 32px; flex: 0 0 auto; padding: 0; font-size: 15px; line-height: 1; }
/* Aufbau-Hinweis: schmal, eine Zeile, deckt den Inhalt kaum */
.hinweis-eintrag[data-hinweis="aufbau"] { padding: 6px 8px 6px 14px; font-size: 13px; flex-wrap: nowrap;
  background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, var(--bg, #0d0f14)); border-color: color-mix(in srgb, var(--akzent, var(--gold)) 40%, transparent); }
.hinweis-eintrag[data-hinweis="aufbau"] .aufbau-text { display: flex; gap: 8px; align-items: center; line-height: 1.35; }
.hinweis-eintrag[data-hinweis="aufbau"] .aufbau-text .ico, .hinweis-eintrag[data-hinweis="aufbau"] .aufbau-text svg { color: var(--akzent, var(--gold)); flex: 0 0 auto; }
.hinweis-leiste:has([data-hinweis="aufbau"]) { width: min(760px, calc(100vw - 24px)); }
/* Aufbau-Hinweis schiebt den Inhalt nach unten (statt ihn zu verdecken) */
.app-shell.mit-aufbau .main-content { padding-top: 58px; }
@media (max-width: 600px) { .app-shell.mit-aufbau .main-content { padding-top: 78px; } }

/* ══ 08.10.2026 — SYMMETRIE · RAUM · KOMPAKTER START · „?"-HILFE (Architekt: „Symmetrie im Content, mittig ohne Seitenmenue
   berechnet, Raum ausnutzen, Dropdown fuer die Bereiche, Vorlagen, Fragezeichen mit Hilfe") ══ */
/* (1) Scrollbalken auf BEIDEN Seiten gleich einrechnen — gemessen: Inhalt links 0/16 px, rechts 6/23 px (Gehirn, Lehrer, Handy) */
.screen-scroll, .messages { scrollbar-gutter: stable both-edges; }
/* (2) Schwebende Elemente am INHALTSBEREICH zentrieren (Variablen aus js/app.js inhaltsMitte), nicht am ganzen Fenster */
.toast { left: calc(var(--inhalt-links, 0px) + var(--inhalt-weite, 100vw) / 2); max-width: calc(var(--inhalt-weite, 100vw) - 24px); }
.hinweis-leiste { left: calc(var(--inhalt-links, 0px) + var(--inhalt-weite, 100vw) / 2); width: min(720px, calc(var(--inhalt-weite, 100vw) - 24px)); }
.speicher-hinweis { left: calc(var(--inhalt-links, 0px) + var(--inhalt-weite, 100vw) / 2); width: min(640px, calc(var(--inhalt-weite, 100vw) - 24px));
  bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px)); }   /* Bisher unten: deckte das Eingabefeld zu (Analyse Punkt 4) */
/* 22.10.2026 (Klickpruefung K6): oben deckte er Knoepfe zu (Projekt anlegen) — der Inhalt bekommt den Platz, solange der Hinweis steht */
body.mit-speicherhinweis #screenContainer { padding-top: var(--speicher-platz, 0px); }
/* (3) Chat: Verlauf, Eingabe und Startkacheln gleich breit, mit dem Raum wachsend (Bisher 720/840 bzw. 680/800 px; Kacheln 700 px) */
:root { --chat-breite: min(var(--inhalt-breite), 1080px); }
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .messages-inner, .app-footer-input, .topic-grid { max-width: var(--chat-breite); }
  .topic-grid { padding-left: 0; padding-right: 0; }   /* Kachelkanten fluchten mit dem Eingabefeld */
}
/* (4) Startkacheln: Spalten nach der Breite des INHALTSBEREICHS (Container-Abfrage — rechnet die Seitenleiste von selbst heraus).
   Bisher fest 700 px / 3 Spalten bzw. 1 Spalte am Handy (12 Kacheln untereinander). Jetzt 2 · 3 · 4 Spalten, Handy kompakt. */
#homeContent { container-type: inline-size; }
.topic-grid { max-width: var(--inhalt-breite); grid-auto-flow: dense; padding-left: var(--inhalt-rand); padding-right: var(--inhalt-rand); box-sizing: border-box; }
.topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 620px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1040px) { .topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 480px) {
  .topic-grid { gap: 8px; }
  .topic-card { padding: 10px 10px; gap: 8px; }
  .topic-icon { width: 28px; }
  .topic-desc { display: none; }
  .topic-title { font-size: 14px; line-height: 1.25; }
}
.topic-pfeil { margin-left: auto; color: var(--text2); font-size: 18px; line-height: 1; transition: transform .15s; }
.topic-card.offen { border-color: var(--akzent, var(--gold)); }
.topic-card.offen .topic-pfeil { transform: rotate(90deg); color: var(--akzent, var(--gold)); }
.topic-card:focus-visible { outline: 2px solid var(--akzent, var(--gold)); outline-offset: 2px; }
/* Vorlagen-Feld: volle Zeile unter der Kachelreihe */
.vorlagen-feld { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--app-radius, 12px);
  border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 40%, transparent); background: color-mix(in srgb, var(--akzent, var(--gold)) 7%, var(--glass)); }
.vorlagen-kopf { display: flex; align-items: baseline; gap: 10px; }
.vorlagen-intro { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text2); }
.vorlagen-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vorlagen-aktionen { margin: 0; }
/* Satz „Was ist anders?" unter der Begruessung */
.start-anders { margin: 8px auto 0; max-width: 560px; font-size: 14px; line-height: 1.5; color: var(--text2); text-align: center; padding: 0 var(--inhalt-rand); }
.start-mehr { background: none; border: 0; padding: 0; font: inherit; color: var(--akzent, var(--gold)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* (5) „Starten" im Seitenmenue klappt auf/zu; in der schmalen Leiste (Chat) bleiben die Symbole sichtbar */
.sidebar-aufklapper { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.sidebar-aufklapper:hover { color: var(--text); }
.aufklapper-pfeil { transition: transform .15s; opacity: .7; }
.sidebar-aufklapper[aria-expanded="true"] .aufklapper-pfeil { transform: rotate(180deg); }
.seiten-start.zu { display: none; }
.seiten-start.zu.schwebt { display: flex; }   /* 08.10.2026: Chat-Ideen auch per Hover (app.js chatIdeenHover) */
.app-shell.sb-zu .seiten-start.zu { display: flex; }
/* (6) „?"-Hilfe im Kopf: dieselbe Kiste wie die Sprachliste (layout.css), breiter, scrollbar */
.hilfe-liste { width: min(400px, calc(100vw - 24px)); max-height: min(72vh, 640px); overflow-y: auto; padding: 12px; gap: 10px; text-align: left; }
.hilfe-liste.hidden { display: none; }
.hm-kopf { font-weight: 700; font-size: 15px; padding: 2px 4px 4px; }
.hm-teil { display: grid; gap: 4px; padding: 8px 4px 10px; border-top: 1px solid var(--border); }
.hm-teil b { font-size: 13px; color: var(--akzent, var(--gold)); }
.hm-teil p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.hm-aufbau { background: color-mix(in srgb, var(--akzent, var(--gold)) 10%, transparent); border-radius: 10px; padding: 8px 10px 10px; }
.hm-link { font-size: 13px; color: var(--akzent, var(--gold)); }
.hm-knoepfe { flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 4px 0 0; }
#kopfHilfe { position: relative; }
#kopfHilfe.hat-neu::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent, var(--gold)); box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .hilfe-liste { position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 180px); }
}

/* ══ 08.10.2026 — KOPF MINIMAL + EINSTELLUNGEN ALS KACHELN (Architekt: „Header noch zu viel, minimalistische Version" ·
   „Einstellungen mit Kacheln im Content, damit sie besser zu finden sind"; MD 62 §28 Kopf, §16) ══ */
.kopf-profil { position: relative; flex: 0 0 auto; }
.kopf-profil-knopf { width: 34px; height: 34px; border-radius: 50%; padding: 0; overflow: hidden; display: grid; place-items: center; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 45%, transparent); background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, transparent);
  color: var(--akzent, var(--gold)); font: inherit; font-weight: 700; font-size: 14px; }
.kopf-profil-knopf img, .pm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kopf-profil-knopf[aria-expanded="true"], .kopf-profil-knopf:focus-visible { outline: 2px solid var(--akzent, var(--gold)); outline-offset: 2px; }
.profil-liste { width: min(320px, calc(100vw - 24px)); gap: 2px; padding: 10px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .hilfe-liste.profil-liste { width: auto; } }   /* Handy: links und rechts 12 px wie das „?"-Dropdown */
.pm-kopf { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pm-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700;
  color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, transparent); }
.pm-wer { display: grid; gap: 4px; min-width: 0; }
.pm-wer b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-liste .kopf-abzeichen:not(.hidden) { display: inline-block; justify-self: start; max-width: 100%; }
.profil-liste .kopf-kontext:not(.hidden) { width: 100%; max-width: none; margin: 4px 0; }
.pm-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border-radius: 8px; border: 0; background: none;
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pm-eintrag:hover { background: color-mix(in srgb, var(--akzent, var(--gold)) 12%, transparent); }
.pm-eintrag > svg, .pm-eintrag .topbar-icon-status { flex: 0 0 auto; width: 18px; height: 18px; color: var(--akzent, var(--gold)); }
.pm-l { flex: 1; min-width: 0; }
.pm-wert { color: var(--text2); font-size: 13px; }
.profil-liste #kopfZahnrad { display: flex; }   /* layout.css blendet das Zahnrad am Handy im Kopf aus — im Menue bleibt es */
.pm-sprache { display: block; }
.pm-sprache .sprach-liste { position: static; box-shadow: none; border: 0; background: none; padding: 0 0 4px 28px; min-width: 0; }
.pm-thema { cursor: default; }
.pm-thema:hover { background: none; }
.pm-wahl { display: inline-flex; gap: 4px; }
.kopf-speichern > svg, .kopf-profil-knopf > span { flex: 0 0 auto; }
.pm-wahl button { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.pm-wahl button.an { background: var(--akzent, var(--gold)); border-color: var(--akzent, var(--gold)); color: var(--bg); font-weight: 600; }
.pm-abmelden { color: var(--signal, #e5484d); border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; }
/* Einstellungen: Suche + Kacheln je Gruppe; Spalten nach der Breite des Inhalts (E8: Gruppen mit 3 bzw. 6 Kacheln fuellen 3 Spalten voll) */
#settingsBody { container-type: inline-size; }
.einst-suche { margin: 4px 0 8px; }
.einst-suche .input-field { width: 100%; }
.einst-gruppe.hidden, .einst-kachel.hidden { display: none; }
.einst-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.einst-raster > .einst-kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* schmal: nie eine halbe Reihe (E8) */
@container (max-width: 559px) { .einst-raster > .einst-kachel { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; min-height: 0; } }
@container (min-width: 560px) {
  .einst-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .einst-raster > .einst-kachel:last-child:nth-child(odd) { grid-column: auto; }
}
/* 11.10.2026 (Architekt: „Einstellungen als richtige Tablet-Kacheln"): ab Tablet-Breite stehen die Kacheln hoch — Symbol oben
   in eigener Plakette, darunter Titel und Kurztext; so viele Spalten, wie mit ≥ 180 px passen. Schmal (Handy) bleibt wie bisher. */
@container (min-width: 700px) {
  .einst-raster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
  .einst-raster > .einst-kachel { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 18px; min-height: 148px; border-radius: 18px; }
  .einst-raster > .einst-kachel .einst-kachel-ico { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, transparent); }
  .einst-raster > .einst-kachel .einst-kachel-text b { font-size: 15px; }
}
.einst-kachel { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; color: var(--text); font: inherit; cursor: pointer; min-height: 72px; }
.einst-kachel:hover, .einst-kachel:focus-visible { border-color: var(--akzent, var(--gold)); outline: none; }
.einst-kachel-ico { flex: 0 0 auto; color: var(--akzent, var(--gold)); display: grid; place-items: center; width: 28px; }
.einst-kachel-text { display: grid; gap: 2px; min-width: 0; }
.einst-kachel-text b { font-size: 14px; font-weight: 600; }
.einst-kachel-text small { font-size: 12px; color: var(--text2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ══ 08.10.2026 iPhone-Fusszeile (Architekt: „Footerzeile haengt nicht am Footer — erst leerer Raum, dann zu viel Platz zu den Icons,
   dann Chat; nimmt extrem viel Platz weg"). Gemessen 390×844: Fusszeile 124 px + Home-Balken 34 px = ~158 px. Jetzt: Home-Balken-
   Abstand nur soweit noetig (Symbole duerfen wie in iOS-Apps bis knapp an den Balken), Leiste und Eingabe ohne Leerraum. ══ */
@media (max-width: 600px) {
  .app-footer { padding-bottom: max(calc(env(safe-area-inset-bottom, 0px) - 16px), 2px); }
  .app-footer-input { margin: 6px 10px 2px; padding: 2px 4px 2px 12px; }
  .app-footer-send, .app-footer-mic, .app-footer-plus { width: 32px; height: 32px; }
  html .app-footer-tabs { padding: 2px 6px 0; }
  html .app-footer-tabs .tab-item { padding: 2px 2px 0; gap: 2px; }
  html .app-footer-tabs .tab-blase, html .app-footer-tabs .tab-item.active .tab-blase { height: 28px; }
  html .app-footer-tabs .tab-text { font-size: 10.5px; }
}

/* ══ 08.10.2026 CHAT: mehrzeilige Eingabe · Antwort-Werkzeuge · Abbrechen · „nach unten" · Fusszeile ein-/ausklappen · Ablegen · Suche ══ */
/* Eingabe waechst mit (Hoehe misst js/app.js eingabeHoehe — gemessener Wert, erlaubt nach INLINE_CSS_VERBOTEN.md); max. ~6 Zeilen */
.app-footer-input, .app-footer-input:focus-within { max-height: none; align-items: flex-end; overflow: visible; }
.app-footer-input textarea { display: block; resize: none; line-height: 1.4; max-height: calc(1.4em * 6 + 16px); overflow-y: hidden; align-self: center; }
.app-footer-input textarea.voll { overflow-y: auto; }
.app-footer-input > button { flex: 0 0 auto; margin-bottom: 2px; }
/* Werkzeuge je Nachricht (Kopieren · Vorlesen · Nochmal · Bearbeiten) — ruhig, erst bei Bedarf deutlich */
.nachricht-aktionen { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.nachricht-aktionen button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; }
.nachricht-aktionen button:hover, .nachricht-aktionen button:focus-visible { color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 10%, transparent); outline: none; }
.bubble-row.user .nachricht-aktionen { justify-content: flex-end; }
@media (hover: hover) { .bubble-row:not(:last-child) .nachricht-aktionen { opacity: 0; transition: opacity .15s; } .bubble-row:hover .nachricht-aktionen { opacity: 1; } }
/* Formatierte Antworten (sicher erzeugt in js/app.js mdSicher) */
.bubble .md-titel { display: block; font-weight: 700; margin: 6px 0 2px; }
.bubble :is(ul, ol) { margin: 4px 0 4px 20px; padding: 0; }
.bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.code-block { position: relative; margin: 8px 0; }
.code-block pre { margin: 0; padding: 12px; padding-top: 30px; border-radius: 10px; overflow-x: auto; background: color-mix(in srgb, var(--bg) 70%, #000); border: 1px solid var(--border); }
.code-block pre code { padding: 0; background: none; white-space: pre; display: block; }
.code-kopieren { position: absolute; top: 4px; right: 4px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font: inherit; font-size: 11.5px; cursor: pointer; }
.code-kopieren:hover { color: var(--akzent, var(--gold)); }
/* „Nach unten" — schwebt ueber dem Verlauf, mittig im Inhaltsbereich */
#screenChat { position: relative; }
.nach-unten { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.3); cursor: pointer; z-index: 5; }
.nach-unten.hidden { display: none; }
/* Datei in den Chat ziehen */
#screenChat.ablegen::after { content: attr(data-ablegen); position: absolute; inset: 10px; border: 2px dashed var(--akzent, var(--gold)); border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--text); font-weight: 600; pointer-events: none; z-index: 6; }
/* Suche im Chat-Verlauf (Seitenleiste) */
/* Seitenleiste nach dem roten Faden (Fragen → Beibringen → Wachsen): „Neuer Chat" als klarer Knopf oben, Suche darunter; gold hinterlegt ist nur der offene Chat */
.leisten-neu { width: calc(100% - 24px); margin: 2px 12px 4px; border: 1px solid var(--border); border-radius: var(--app-radius-klein, 10px); background: none;
  color: var(--text); font: inherit; font-weight: 600; justify-content: flex-start; gap: 10px; cursor: pointer; }
.leisten-neu .ico { color: var(--akzent, var(--gold)); }
.leisten-neu:hover, .leisten-neu:focus-visible { border-color: var(--akzent, var(--gold)); background: none; outline: none; }
.leisten-gruppe { margin-top: 4px; }
.app-shell.sb-zu .leisten-neu { width: auto; margin: 2px 6px 6px; border-color: transparent; justify-content: center; }
.chat-suche-feld { display: flex; align-items: center; gap: 8px; margin: 6px 12px 8px; padding: 0 10px; height: 34px; border: 1px solid var(--border); border-radius: var(--app-radius-klein, 10px);
  color: var(--text2); }
.chat-suche-feld:focus-within { border-color: var(--akzent, var(--gold)); }
.chat-suche { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; outline: none; }
.app-shell.sb-zu .chat-suche-feld { display: none; }

/* Fusszeile im Chat (nur Handy mit Leiste): Griff + Ein-/Ausklappen per Tippen, Scrollen, Wischen */
.fuss-griff { display: none; }
/* 09.10.2026 (Architekt: „Footer laesst sich nicht minimieren"): Griff 12 px → 22 px Tippflaeche. Grenze 600 px = dieselbe wie die Tab-Leiste
   (layout.css min-width:601 ⇒ keine Leiste) — bei 768 gab es zwischen 601 und 768 einen Griff ohne Leiste (Pruefung CSS #5) */
@media (max-width: 600px) {
  body.fuss-klappbar .fuss-griff { display: flex; justify-content: center; align-items: center; width: 100%; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; }
  body.fuss-klappbar .fuss-griff span { width: 48px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 45%, transparent); }
  body.fuss-zu .app-footer-tabs { display: none; }
  body.fuss-zu .app-footer { padding-bottom: max(calc(env(safe-area-inset-bottom, 0px) - 16px), 2px); }
}
/* 08.10.2026 Schnittstellen-Liste (Assistent & Apps): je Eintrag aufklappbar, Name · Kern-Status · Art in einer Zeile */
.sch-liste { display: grid; gap: 8px; }
.sch-eintrag > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
.sch-eintrag > summary small { margin-left: auto; }

/* ══ Startseite: Helmut-Karte (roter Faden Fragen → Beibringen → Wachsen) ══ */
.helmut-karte { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; margin: 4px auto 18px; max-width: 600px; box-sizing: border-box; width: calc(100% - 32px); }
.hk-stand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text); }
.hk-punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--befinden-blau, #6fa8ff); box-shadow: 0 0 10px currentColor; color: var(--befinden-blau, #6fa8ff); }
.hk-punkt[data-art="gut"] { background: #ffd66b; color: #ffd66b; }
.hk-punkt[data-art="nachdenklich"] { background: #c9d3e3; color: #c9d3e3; }
.hk-punkt[data-art="last"] { background: #ff5a4a; color: #ff5a4a; }
.hk-zahlen { font-size: 13px; color: var(--text2); min-height: 1em; }
.hk-zahlen:empty { display: none; }
.hk-kreis { margin: 0; font-size: 14px; color: var(--text2); }
.hk-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hk-schritt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--app-radius, 14px);
  background: color-mix(in srgb, var(--akzent, var(--gold)) 6%, transparent); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hk-schritt .ico { color: var(--akzent, var(--gold)); }
.hk-schritt b { font-size: 15px; }
.hk-schritt small { font-size: 12px; color: var(--text2); }
.hk-schritt:hover, .hk-schritt:focus-visible { border-color: var(--akzent, var(--gold)); outline: none; }
.home-ideen-titel { margin: 4px auto 0; max-width: 600px; width: calc(100% - 32px); }
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) { .helmut-karte, .home-ideen-titel { max-width: var(--chat-breite); width: 100%; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .hk-schritte { grid-template-columns: 1fr; } .hk-schritt { flex-direction: row; align-items: center; gap: 10px; } .hk-schritt small { display: none; } }

/* ══ Projekte + Cowork (MD 62 §31) ══ */
.projekt-seite { display: flex; flex-direction: column; gap: 12px; max-width: var(--chat-breite, 900px); margin: 0 auto; padding: 16px; box-sizing: border-box; }
.projekt-neu, .projekt-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.projekt-neu { padding: 12px; }
.projekt-neu .input-field, .projekt-form .input-field { flex: 1 1 240px; min-width: 0; }
.projekt-form .pj-recht { flex: 0 0 auto; }
.projekt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.projekt-karte { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; color: var(--text); font: inherit; cursor: pointer; border: 1px solid var(--border); }
.projekt-karte .ico, .projekt-titel .ico { color: var(--akzent, var(--gold)); }
.projekt-karte span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.projekt-karte small, .projekt-eintrag small { color: var(--text2); font-size: 12px; }
.projekt-karte:hover, .projekt-karte:focus-visible { border-color: var(--akzent, var(--gold)); outline: none; }
.projekt-kopf { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.projekt-titel { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.projekt-reiter { display: flex; flex-wrap: wrap; gap: 6px; }
.projekt-inhalt { display: flex; flex-direction: column; gap: 10px; }
.projekt-eintraege { display: flex; flex-direction: column; gap: 6px; }
.projekt-eintrag { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--app-radius-klein, 10px); }
/* 22.10.2026 (K6): Freigabe-Schalter je Projektinhalt — Chat-Karte und Schalter in einer Zeile; Schalter oben rechts im Eintrag */
.pj-zeile { display: flex; align-items: center; gap: 8px; }
.pj-zeile > .home-chat-card { flex: 1; min-width: 0; }
.projekt-eintrag > .pj-frei { align-self: flex-end; }
.pj-frei.an { color: var(--gold, #d4a843); border-color: currentColor; }
.projekt-leer { padding: 14px; } .projekt-leer p { margin: 6px 0 0; color: var(--text2); font-size: 13px; }
.menue-zeile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.menue-zeile .ico { color: var(--akzent, var(--gold)); }
.menue-zeile:hover:not(:disabled), .menue-zeile:focus-visible { background: color-mix(in srgb, var(--akzent, var(--gold)) 10%, transparent); outline: none; }
.menue-zeile:disabled { opacity: .45; cursor: default; }
.menue-zeile-titel { padding: 8px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); }

/* KI trainieren (08.10.2026, MD 62 §16): Gruppen wie in den Einstellungen — kleiner Titel, Linie, keine Nummernkreise */
#workspaceBody .hb-gruppe { display: flex; flex-direction: column; gap: 8px; }
#workspaceBody .hb-gruppe + .hb-gruppe { border-top: 1px solid var(--fenster-rand); margin-top: 14px; padding-top: 14px; }
#workspaceBody .hb-gruppe .mp-zeile > span small { display: block; margin: 2px 0 0; }
#workspaceBody .hb-tabelle td:last-child { text-align: right; white-space: nowrap; }
#workspaceBody .hb-tabelle td:nth-child(3) { white-space: nowrap; }

/* ══ 08.10.2026 EINE INHALTSBREITE (Architekt: „zu viele unterschiedliche Breiten im Content, das müsste einheitlich alles sein") ══
   Gemessen 1441 px: Fenster 305–1376, Kacheln/Tools-Detail innen 329–1352 (Innenrand 24 px), „Letzte Chats“ und Gehirn-Karten 246–1435
   (ohne Begrenzung), Chat eigene Breite. Jetzt: JEDER Inhaltsblock = dieselbe Spalte (--inhalt-breite, mittig), kein zusaetzlicher
   Innenrand; Chat, Eingabe und Startkacheln nutzen dieselbe Spalte. Handy: Spalte = Breite minus Rand links/rechts. */
:root { --chat-breite: var(--inhalt-breite); }
/* 09.10.2026 (Pruefung CSS #12): Grenze 768 statt 700 — dazwischen (Handy-Layout ohne Seitenleiste) schrumpfte der Inhalt auf 90 % */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { :root { --inhalt-breite: calc(100% - 2 * var(--inhalt-rand)); } }
.settings-sections, .brain-system-wrap, .teacher-wrap, .teacher-list, .ws-detail, .ws-kopf, #workspaceBody .workspace-grid,
#brainBody .gehirn-live, #brainBody .brain-grid, #brainBody .brain-hint,
#homeContent .topic-grid, #homeContent .home-ideen-titel, #homeContent .home-recent, .projekt-seite {
  max-width: var(--inhalt-breite); width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; box-sizing: border-box;
}
/* Fenster selbst (mit eigenem Innenabstand): nur die Spalte, Innenabstand bleibt */
#brainBody > .glass-card, #brainBody > .card-section, #homeContent .helmut-karte {
  max-width: var(--inhalt-breite); width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
#homeContent .home-recent .home-chat-card { margin-left: 0; margin-right: 0; }
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .messages-inner { padding-left: 0; padding-right: 0; }
}

/* ══ 08.10.2026 EINHEITLICHE ABSTAENDE + EIN AUSWAHLFELD (Architekt: „Dropdowns überall anders" · „Abstände: Text mal zu nah am Rand,
   mal zu weit weg"). Gemessen vorher: Fenster-Innenrand 12/14/16/20 px, Menüs Text 13/16/17/19/23 px vom Rand (im Chat-Menü gemischt
   13 und 23), Auswahlfelder nativ in 38/44/47 px. Jetzt EINE Regel je Ebene, Werte nur hier (Token):
     Fenster   Text 20 px vom Rand (--fenster-pad)
     Menü      Text 20 px vom Rand = Rahmen 8 px + Zeile 12 px (--menue-pad / --menue-zeile-x)
     Kachel    Text 16 px vom Rand (--kachel-pad-x)
     Feld      Höhe --feld-h, Text 14 px vom Rand, Auswahl mit Akzent-Pfeil; Liste im Corporate-Stil (wo der Browser es kann)
   „Gewichts-Anker" (#settingsBody #workspaceBody .x-nie) in :is() hebt die Regel ueber die bisherigen Einzelregeln, ohne !important. */
:root { --menue-pad: 8px; --menue-zeile-x: 12px; --menue-zeile-y: 9px; --kachel-pad-x: 16px; --feld-h: 44px; --feld-x: 14px;
  --menue-bg: var(--bg2, #15161b); }
/* Fenster */
:is(.fenster, .helmut-karte, .lr-karte, .profile-header, .projekt-neu, .projekt-kopf, .projekt-leer, #workspaceBody .ws-detail > .glass-card,
    #settingsBody #workspaceBody .x-nie) { padding-left: var(--fenster-pad); padding-right: var(--fenster-pad); }
/* Kacheln */
:is(.topic-card, .einst-kachel, .projekt-karte, .hb-kachel, .workspace-item, .home-chat-card, .projekt-eintrag,
    #settingsBody #workspaceBody .x-nie) { padding-left: var(--kachel-pad-x); padding-right: var(--kachel-pad-x); }
/* Menüs (Hilfe ?, Profil, Sprache, Chat ⋯, Teile-Auswahl, Chat „+“, Leisten-Schwebe): gleicher Rahmen, gleiche Zeilen, eine Ebene (MD 62 §60) */
:is(.hilfe-liste, .sprach-liste, .teil-pop, .chat-werkzeuge, .leiste-schwebe, #settingsBody #workspaceBody .x-nie) {
  z-index: var(--z-menue); padding: var(--menue-pad); border-radius: var(--fenster-radius); background: var(--menue-bg); border: 1px solid var(--fenster-rand);
  box-shadow: 0 12px 32px rgba(0,0,0,.35); }
:is(.hilfe-liste, .sprach-liste, .teil-pop) > :is(div, section, p, label, .mcp-knoepfe, #settingsBody #workspaceBody .x-nie) {
  padding-left: var(--menue-zeile-x); padding-right: var(--menue-zeile-x); margin-left: 0; margin-right: 0; }
:is(.sprach-liste button, .teil-pop-eintrag, .menue-zeile, .pm-eintrag, #settingsBody #workspaceBody .x-nie) {
  padding: var(--menue-zeile-y) var(--menue-zeile-x); border-radius: 8px; font-size: 14px; min-height: 36px; gap: 10px; }
:is(.hilfe-liste, .sprach-liste, .teil-pop) > :is(.kopf-sprache, #settingsBody #workspaceBody .x-nie) { padding: 0; }   /* 09.10.: gleicher Anker wie oben, sonst stand „Sprache“ 12 px eingerueckt */
.profil-liste .pm-kopf { padding-left: var(--menue-zeile-x); padding-right: var(--menue-zeile-x); }
/* Felder: eine Höhe, ein Innenrand */
:is(input.input-field, select.input-field, #settingsBody #workspaceBody .x-nie) { min-height: var(--feld-h); padding: 0 var(--feld-x); box-sizing: border-box; }
textarea.input-field { padding: 10px var(--feld-x); }
/* Auswahlfeld: eigener Pfeil in Akzentfarbe statt Browser-Pfeil (folgt Akzent, hell/dunkel) */
:is(select.input-field:not([multiple]):not([size]), #settingsBody #workspaceBody .x-nie) {
  -webkit-appearance: none; appearance: none; height: var(--feld-h); padding-right: calc(var(--feld-x) + 26px); cursor: pointer;
  font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
  background-image: linear-gradient(45deg, transparent 50%, var(--akzent, var(--gold)) 50%), linear-gradient(135deg, var(--akzent, var(--gold)) 50%, transparent 50%);
  background-position: calc(100% - var(--feld-x) - 10px) 52%, calc(100% - var(--feld-x) - 5px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; color-scheme: dark; }
html[data-theme=light] select.input-field { color-scheme: light; }
select.input-field:hover { border-color: color-mix(in srgb, var(--akzent, var(--gold)) 45%, var(--border)); }
select.input-field option { background: var(--menue-bg); color: var(--text); }
select.input-field[multiple], select.input-field[size] { padding: 6px; height: auto; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { select.input-field:not([multiple]):not([size]) { font-size: 16px; } }   /* iOS zoomt unter 16 px */
/* Wo der Browser es kann (Chromium „base-select"): auch die aufgeklappte Liste im Menü-Stil statt der System-Liste */
@supports (appearance: base-select) {
  select.input-field:not([multiple]):not([size]), select.input-field:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select.input-field:not([multiple]):not([size])::picker-icon { display: none; }
  select.input-field::picker(select) { padding: var(--menue-pad); border-radius: var(--fenster-radius); background: var(--menue-bg);
    border: 1px solid var(--fenster-rand); box-shadow: 0 12px 32px rgba(0,0,0,.35); color: var(--text); margin-top: 4px; }
  select.input-field option { padding: var(--menue-zeile-y) var(--menue-zeile-x); border-radius: 8px; font-size: 14px; background: transparent; min-height: 36px; }
  select.input-field option:hover, select.input-field option:focus-visible { background: color-mix(in srgb, var(--akzent, var(--gold)) 12%, transparent); outline: none; }
  select.input-field option:checked { color: var(--akzent, var(--gold)); font-weight: 600; }
  select.input-field option::checkmark { display: none; }
}

/* Taschenrechner im Mathe-Vorlagenfeld (08.10.2026) — Tasten = Kachel-Stil, Ergebnis in Akzent */
.rechner { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fenster-rand); max-width: 420px; }
.rechner-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rechner-anzeige { font-size: 22px !important; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rechner-ergebnis { min-height: 22px; text-align: right; font-size: 18px; font-weight: 600; color: var(--akzent, var(--gold)); font-variant-numeric: tabular-nums; padding: 0 var(--feld-x); }
.rechner-ergebnis.fehler { color: var(--text2); font-weight: 400; font-size: 13px; }
.rechner-tasten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rechner-taste { height: 44px; border-radius: var(--knopf-radius); border: 1px solid var(--fenster-rand); background: var(--kachel-bg); color: var(--text); font: inherit; font-size: 17px; cursor: pointer; font-variant-numeric: tabular-nums; }
.rechner-taste:hover { border-color: color-mix(in srgb, var(--akzent, var(--gold)) 45%, var(--fenster-rand)); }
.rechner-taste.op { color: var(--akzent, var(--gold)); }
.rechner-taste.fn { color: var(--text2); }
.rechner-taste.gleich { background: var(--akzent, var(--gold)); color: #111; border-color: transparent; font-weight: 700; }
/* Chat ⋯: Projektliste ist ein Behaelter fuer Zeilen — kein eigener Innenrand (sonst Text 59 statt 47 px) */
/* 09.10.2026: mit demselben Gewichts-Anker wie die Token-Regel (2,2,0) — vorher (1,0,0) ⇒ wirkungslos, Text 32 statt 20 px vom Rand */
.hilfe-liste > :is(#chatMenueProjekte, #settingsBody #workspaceBody .x-nie) { padding-left: 0; padding-right: 0; }
.hilfe-liste > :is(#chatMenueProjekte:not(:has(button)), #settingsBody #workspaceBody .x-nie) { padding-left: var(--menue-zeile-x); padding-right: var(--menue-zeile-x); }
/* Thema-Leiste ueber dem Chat-Eingabefeld (08.10.2026): gleiche Spalte wie die Eingabe, Fenster-Stil, Chips = Vorlagen, Rechner umschaltbar */
.thema-leiste { max-width: var(--chat-breite); width: 100%; margin: 0 auto 8px; box-sizing: border-box; background: var(--menue-bg);
  border: 1px solid var(--fenster-rand); border-radius: var(--fenster-radius); padding: 10px var(--fenster-pad); box-shadow: var(--fenster-schatten);
  max-height: 60vh; overflow-y: auto; }
.thema-leiste.hidden { display: none; }
.thema-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.thema-name { display: inline-flex; align-items: center; gap: 8px; color: var(--akzent, var(--gold)); font-size: 14px; }
.thema-name svg, .thema-name .ico { width: 18px; height: 18px; }
.thema-name b { color: var(--text); font-weight: 600; }
.thema-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.thema-rechner { display: inline-flex; align-items: center; gap: 6px; }
.thema-rechner.an { border-color: var(--akzent, var(--gold)); color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 12%, transparent); }
.thema-zu { width: 30px; height: 30px; flex: 0 0 auto; }
.thema-leiste .rechner { max-width: 360px; margin-top: 10px; padding-top: 10px; }
.thema-leiste .rechner-taste { height: 38px; }
.rechner-uebernehmen { justify-self: stretch; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .thema-leiste { padding: 8px 12px; } .thema-chips { flex-wrap: nowrap; overflow-x: auto; } .thema-leiste .rechner { max-width: none; } }

/* Startseite: Bausteine (08.10.2026) — Teile der Helmut-Karte durch Linie getrennt, Titel wie Gruppen */
.helmut-karte .hk-teil { border-top: 1px solid var(--fenster-rand); padding-top: 12px; margin-top: 2px; }
.hk-grund { margin: -4px 0 0; font-size: 13px; color: var(--text2); }
.hk-heute { display: grid; gap: 6px; }
.hk-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.hk-zeile small { color: var(--akzent, var(--gold)); white-space: nowrap; }
.hk-vorschlag { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.start-weiter { max-width: var(--inhalt-breite); width: 100%; margin: 0 auto 18px; box-sizing: border-box; }
.start-weiter-zeilen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.start-weiter-knopf { display: flex; align-items: center; gap: 12px; padding: 12px var(--kachel-pad-x); border: 1px solid var(--fenster-rand); border-radius: var(--knopf-radius);
  background: var(--kachel-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.start-weiter-knopf .ico { color: var(--akzent, var(--gold)); }
.start-weiter-knopf { justify-content: flex-start; }
.start-weiter-knopf > span:not(.ico) { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; flex: 1; }
.start-weiter-knopf > .ico { flex: 0 0 auto; }
.start-weiter-knopf b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.start-weiter-knopf small { color: var(--text2); font-size: 12px; }
.start-weiter-knopf:hover { border-color: color-mix(in srgb, var(--akzent, var(--gold)) 45%, var(--fenster-rand)); }
.start-anpassen { max-width: var(--inhalt-breite); width: 100%; margin: 6px auto 24px; display: grid; gap: 10px; justify-items: start; }
.start-anpassen-liste { width: 100%; box-sizing: border-box; display: grid; gap: 6px; }

/* Sicht je Ebene (08.10.2026): Knopf rechts im Seitenkopf, Auge im Teil-Titel, ausgeblendete Teile gedimmt */
.profile-back-row { display: flex; align-items: center; gap: 12px; }
.profile-back-row .seite-anpassen { margin-left: auto; }
.sicht-leiste { margin-bottom: var(--fenster-abstand); }
.sicht-ziel { margin-top: 8px; }
section.profil-abschnitt > :is(h2, h3):has(.teil-auge) { display: flex; align-items: center; gap: 10px; }
section.profil-abschnitt :is(h2, h3) .teil-auge { position: static; inset: auto; margin-left: auto; flex: 0 0 auto; }
section.profil-abschnitt.teil-aus > :not(h2):not(h3) { opacity: .35; }
section.profil-abschnitt.teil-aus h2, section.profil-abschnitt.teil-aus h3 { opacity: .6; }

/* Erklär-Blase (08.10.2026): Name + Erklärung, folgt Akzent, ueber allem */
.erklaer-blase { position: fixed; z-index: 9999; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 10px;
  background: var(--menue-bg); border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 35%, var(--fenster-rand)); box-shadow: 0 10px 28px rgba(0,0,0,.4);
  color: var(--text); font-size: 13px; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; display: grid; gap: 3px; }
.erklaer-blase.an { opacity: 1; transform: none; }
.erklaer-blase b { color: var(--akzent, var(--gold)); font-size: 12.5px; font-weight: 600; }
.leisten-tipp b { display: block; }
.leisten-tipp span { display: block; font-size: 12px; opacity: .8; max-width: 260px; white-space: normal; margin-top: 2px; }
/* Gehirn-Erklärung */
.gehirn-erklaerung { max-width: var(--inhalt-breite); width: 100%; margin: 0 auto var(--fenster-abstand); box-sizing: border-box; }
.gehirn-erklaerung .ge-text { margin: 6px 0 12px; line-height: 1.55; }
.ge-liste { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; line-height: 1.5; }
.card-section-title .info-knopf, h2 .info-knopf { margin-left: 6px; vertical-align: middle; }

.pk-knoepfe { white-space: nowrap; text-align: right; } .pk-knoepfe .btn + .btn { margin-left: 6px; } .pk-weg { color: var(--signal, #e5484d); }

/* Erklär-Blase neben dem Knopf: Pfeil zur Knopfseite */
.erklaer-blase::before { content: ""; position: absolute; width: 10px; height: 10px; background: inherit; border: inherit; transform: rotate(45deg); }
.erklaer-blase[data-seite=rechts]::before { left: -6px; top: calc(var(--pfeil-y, 50%) - 5px); border-top: none; border-right: none; }
.erklaer-blase[data-seite=links]::before { right: -6px; top: calc(var(--pfeil-y, 50%) - 5px); border-bottom: none; border-left: none; }
.erklaer-blase[data-seite=unten]::before { top: -6px; left: calc(var(--pfeil-x, 50%) - 5px); border-bottom: none; border-right: none; }
.erklaer-blase[data-seite=oben]::before { bottom: -6px; left: calc(var(--pfeil-x, 50%) - 5px); border-top: none; border-left: none; }
.erklaer-blase { transform: none; }

.pj-quellen { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--fenster-rand); font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.pj-quellen .ico { color: var(--akzent, var(--gold)); }

/* Thema-Leiste am Handy: Chips einzeilig, seitlich wischen statt Drei-Zeilen-Kacheln */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .thema-chips .stufen-chip { white-space: nowrap; flex: 0 0 auto; padding: 8px 12px; } }

/* ══ 08.10.2026 EINE SCHRIFT-SKALA + EINE KNOPF-NORM (Architekt: „Buttons und Text teilweise nicht konform"). Gemessen vorher je Rolle:
   Titel 20/22 px · Gruppentitel 11/12/15/16 px · Hinweise 10,8/11,7/12/13/13,3/15 px · Fliesstext 13/14/16 px · Reiter zwei Stile
   (33 px/13 px und 38 px/14 px) · Knopf-Innenrand 14/18 px · Liste in Systemschrift 13,3 px. Jetzt EIN Wert je Rolle (Token). ══ */
:root { --schrift-titel: 20px; --schrift-gruppe: 11px; --schrift-text: 14px; --schrift-hinweis: 13px; --schrift-klein: 12px; }
/* Titel einer Seite bzw. eines Fensters */
:is(h2.t-title, h2.settings-section-title, .ws-header .t-title, .lr-titel, .projekt-titel b, #settingsBody #workspaceBody .x-nie) {
  font-size: var(--schrift-titel); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
/* Gruppentitel (kleine Grossschrift) */
:is(.card-section-title, .profile-nav-gruppe, .home-recent-title, .menue-zeile-titel, #settingsBody #workspaceBody .x-nie) {
  font-size: var(--schrift-gruppe); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); line-height: 1.4; }
/* Hinweise und Kleingedrucktes */
:is(.settings-hint, p.settings-hint, small.settings-hint, #settingsBody #workspaceBody .x-nie) { font-size: var(--schrift-hinweis); line-height: 1.5; }
:is(.helmut-karte small, .hk-zeile small, .lr-karte small, .einst-kachel-text small, .profile-nav-info, .vn-tabelle td small, .hinweis-fehler, #settingsBody #workspaceBody .x-nie) { font-size: var(--schrift-klein); }
/* Fliesstext in Fenstern */
:is(.hilfe-text p, .hilfe-gruss, .ge-text, .ge-liste li, .lr-karte li, .selbstbild-text, .hk-kreis, .hk-grund, .start-anders, #settingsBody #workspaceBody .x-nie) { font-size: var(--schrift-text); line-height: 1.55; }
:is(.hilfe-text b, #settingsBody #workspaceBody .x-nie) { font-size: var(--schrift-text); font-weight: 600; }
/* Knöpfe: Reiter alle wie .teil-tab, Knopf-Innenrand einheitlich, Listenknöpfe in App-Schrift */
:is(.settings-tab-btn, .teil-tab, #settingsBody #workspaceBody .x-nie) { min-height: var(--knopf-h); font-size: var(--schrift-text); border-radius: var(--knopf-radius); padding: 0 14px; font-weight: 500; }
:is(.bild-knopf, .gruss-woerter .btn, #settingsBody #workspaceBody .x-nie) { padding: var(--knopf-pad); font-size: var(--schrift-text); min-height: var(--knopf-h); }
button.home-chat-card, .start-weiter-knopf, .projekt-karte, .menue-zeile { font-family: inherit; }
button.home-chat-card { font-size: var(--schrift-text); }

/* ══ Rechner neu (08.10.2026): wie im Handy — Kopf mit ✕, grosse Anzeige, 4 Spalten, „0“ doppelt breit, Sonderfunktionen nur bei f(x) ══ */
.thema-leiste .rechner { max-width: 340px; margin-top: 10px; padding-top: 10px; gap: 8px; }
.rechner-kopf { display: flex; align-items: center; gap: 8px; }
.rechner-kopf b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--schrift-text); margin-right: auto; }
.rechner-kopf b .ico { color: var(--akzent, var(--gold)); }
.rechner-mehr { height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--fenster-rand); background: var(--kachel-bg); color: var(--text2); font: italic 600 13px/1 Georgia, serif; cursor: pointer; }
.rechner-mehr.an { color: var(--akzent, var(--gold)); border-color: var(--akzent, var(--gold)); }
.rechner-zu { width: 30px; height: 30px; }
.rechner-bildschirm { background: var(--kachel-bg); border: 1px solid var(--fenster-rand); border-radius: var(--knopf-radius); padding: 8px 12px; display: grid; gap: 2px; }
.rechner-anzeige { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: 600 24px/1.2 inherit; font-family: inherit; text-align: right; font-variant-numeric: tabular-nums; padding: 0; }
.rechner-bildschirm .rechner-ergebnis { padding: 0; min-height: 20px; font-size: 16px; }
.rechner-tasten { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rechner-tasten-mehr { grid-template-columns: repeat(5, 1fr); }
.rechner-taste.null { grid-column: span 2; }
.thema-leiste .rechner-taste { height: 44px; font-size: 18px; }
.rechner-tasten-mehr .rechner-taste { height: 36px; font-size: 15px; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .thema-leiste.mit-rechner .thema-chips, .thema-leiste.mit-rechner .thema-rechner { display: none; }   /* Rechner offen: nur Rechner */
  .thema-leiste .rechner { max-width: none; border-top: 0; padding-top: 0; margin-top: 6px; }
  .thema-leiste .rechner-taste { height: 48px; font-size: 20px; }
}
/* ══ Lesbarkeit (Architekt: „Text auf Knöpfen nicht lesbar"): bedienbare Flächen fast deckend — die Partikel dahinter dürfen den
   Kontrast nicht senken (gemessen: Glas 60 % ⇒ über hellem Gold nur 4,9:1, Kreislauf-Knöpfe 6 % deckend) ══ */
:is(.btn-glass, .stufen-chip, .teil-tab, .settings-tab-btn, .hk-schritt, .start-weiter-knopf, .rechner-taste:not(.gleich), .thema-zu, .btn-icon, #settingsBody #workspaceBody .x-nie):not(.an):not(.active):not(.on):not([aria-pressed=true]):not(.kopf-aktionen > .btn-icon) {
  background-color: color-mix(in srgb, var(--bg) 90%, transparent); }
/* 09.10.2026 (Pruefung CSS #7): Kopf-Knoepfe ausgenommen — der Kopf ist selbst deckend; die Regel nahm ihnen sonst die Hover-Flaeche und der
   Diskette bei ungespeicherten Aenderungen (.offen) die rote Flaeche (layout.css .kopf-aktionen) */
/* 09.10.2026 (Architekt: „nach Anklicken/Auswahl schwarz auf schwarz"): die Regel darueber galt auch fuer GEWAEHLTE Chips/Reiter und
   ueberschrieb deren Gold ⇒ Schrift var(--bg) auf fast var(--bg). Gewaehlte Zustaende sind jetzt ausgenommen (:not(.an/.active/.on)). */
:is(.topic-card, .einst-kachel, .workspace-item, .projekt-karte, .home-chat-card, #settingsBody #workspaceBody .x-nie) { background-color: color-mix(in srgb, var(--bg) 82%, transparent); }
html[data-theme=light] .start-mehr { color: color-mix(in srgb, var(--akzent, var(--gold)) 60%, #000); }

/* Chat-Menü ⋯ im Kopf: am Handy blendete die Regel der Sprachwahl (.kopf-sprache > .btn-icon span) das Symbol aus */
.kopf-sprache.kopf-chatmenue > .btn-icon .ico { display: inline-block; }

/* 08.10.2026 (Architekt: „das Kreuz muss oben neben den Rechner, nicht irgendwo"): Rechner offen am Handy ⇒ nur EINE Kopfzeile
   „Taschenrechner · f(x) · ✕“ (die Mathe-Zeile mit ihrem eigenen ✕ verschwindet); sonst steht das ✕ der Leiste ganz rechts. */
.thema-zeile .thema-zu { margin-left: auto; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .thema-leiste.mit-rechner .thema-zeile { display: none; }
  .thema-leiste.mit-rechner .rechner { margin-top: 0; }
}

/* Startseite schlank (08.10.2026): Überschrift Chat-Ideen wie ein Fenstertitel, 8 Kacheln sichtbar, Rest über „Mehr anzeigen" */
#homeContent h2.home-ideen-titel { font-size: var(--schrift-titel); font-weight: 600; margin: 8px auto 12px; max-width: var(--inhalt-breite); width: 100%; text-transform: none; letter-spacing: 0; color: var(--text); }
#homeContent .topic-grid:not(.alle) > .topic-card:nth-child(n+9) { display: none; }
.home-ideen-mehr { max-width: var(--inhalt-breite); width: 100%; margin: 10px auto 18px; display: flex; justify-content: center; }

/* ══ Chat-Ideen als Karussell (08.10.2026) — Vorlage „carousel-item": transform · filter · opacity mit cubic-bezier(0.4, 0, 0.2, 1) ══ */
.ideen-kopf { max-width: var(--inhalt-breite); width: 100%; margin: 8px auto 6px; display: flex; align-items: center; gap: 12px; }
.ideen-kopf h2.home-ideen-titel { margin: 0 !important; }
.ideen-pfeile { margin-left: auto; display: flex; gap: 8px; }
.ideen-pfeile .btn-icon { width: 38px; height: 38px; font-size: 22px; line-height: 1; }
#homeContent .ideen-karussell { max-width: var(--inhalt-breite); width: 100%; margin: 0 auto 22px; display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 18px calc(50% - 130px); box-sizing: border-box; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
#homeContent .ideen-karussell::-webkit-scrollbar { display: none; }
#homeContent .ideen-karussell .karussell-karte { flex: 0 0 260px; min-height: 150px; scroll-snap-align: center; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 12px;
  padding: 20px var(--kachel-pad-x); --nah: 0.5;
  transform: scale(calc(0.84 + 0.16 * var(--nah))); filter: blur(calc((1 - var(--nah)) * 1.6px)) saturate(calc(0.7 + 0.3 * var(--nah))); opacity: calc(0.45 + 0.55 * var(--nah));
  transition: transform 650ms cubic-bezier(0.4, 0, 0.2, 1), filter 650ms cubic-bezier(0.4, 0, 0.2, 1), opacity 650ms cubic-bezier(0.4, 0, 0.2, 1), border-color .2s, box-shadow .3s; }
#homeContent .ideen-karussell .karussell-karte .topic-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in srgb, var(--akzent, var(--gold)) 14%, transparent); color: var(--akzent, var(--gold)); }
#homeContent .ideen-karussell .karussell-karte .topic-icon svg { width: 22px; height: 22px; }
#homeContent .ideen-karussell .karussell-karte .topic-title { font-size: 17px; font-weight: 600; }
#homeContent .ideen-karussell .karussell-karte .topic-desc { font-size: var(--schrift-hinweis); color: var(--text2); margin-top: 4px; }
#homeContent .ideen-karussell .karussell-karte .topic-pfeil { display: none; }
#homeContent .ideen-karussell .karussell-karte.mitte { border-color: color-mix(in srgb, var(--akzent, var(--gold)) 55%, var(--fenster-rand));
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--akzent, var(--gold)) 25%, transparent), 0 0 28px color-mix(in srgb, var(--akzent, var(--gold)) 18%, transparent); }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { #homeContent .ideen-karussell { padding: 14px calc(50% - 110px); gap: 12px; } #homeContent .ideen-karussell .karussell-karte { flex-basis: 220px; min-height: 130px; } }
@media (prefers-reduced-motion: reduce) { #homeContent .ideen-karussell .karussell-karte { transition: none; } }

/* ══ KERN-BÜHNE (08.10.2026): die Idee schwebt im Partikel-Kern; Karte kommt aus der Tiefe (Mitte) bzw. aus Zugrichtung ══ */
#homeContent .kern-buehne { position: relative; max-width: var(--inhalt-breite); width: 100%; margin: 6px auto 18px; min-height: 360px; display: grid; place-items: center;
  touch-action: pan-y; user-select: none; outline: none; }
.kern-ring { position: absolute; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--akzent, var(--gold)) 14%, transparent) 0%, transparent 62%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent, var(--gold)) 18%, transparent), inset 0 0 60px color-mix(in srgb, var(--akzent, var(--gold)) 10%, transparent);
  animation: kern-atmen 6s ease-in-out infinite; }
@keyframes kern-atmen { 0%, 100% { transform: scale(.96); opacity: .7; } 50% { transform: scale(1.04); opacity: 1; } }
.kern-karte-platz { position: relative; width: 280px; height: 200px; }
.kern-karte { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; cursor: pointer; color: var(--text); font: inherit;
  padding: 18px; border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 45%, var(--fenster-rand));
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 34px color-mix(in srgb, var(--akzent, var(--gold)) 20%, transparent);
  opacity: 0; filter: blur(8px); transition: transform 650ms cubic-bezier(0.4, 0, 0.2, 1), filter 650ms cubic-bezier(0.4, 0, 0.2, 1), opacity 650ms cubic-bezier(0.4, 0, 0.2, 1); }
.kern-karte.von-mitte { transform: scale(.25); } .kern-karte.von-rechts { transform: translateX(120px) scale(.4) rotate(6deg); } .kern-karte.von-links { transform: translateX(-120px) scale(.4) rotate(-6deg); }
.kern-karte.da { transform: none; opacity: 1; filter: none; }
.kern-karte.weg-links { transform: translateX(-160px) scale(.5) rotate(-8deg) !important; opacity: 0 !important; filter: blur(8px) !important; }
.kern-karte.weg-rechts { transform: translateX(160px) scale(.5) rotate(8deg) !important; opacity: 0 !important; filter: blur(8px) !important; }
.kern-karte .topic-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, transparent); color: var(--akzent, var(--gold)); }
.kern-karte .topic-icon svg { width: 26px; height: 26px; }
.kern-karte b { font-size: 20px; font-weight: 600; } .kern-karte small { color: var(--text2); font-size: var(--schrift-hinweis); }
.kern-tipp { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent, var(--gold)); opacity: .8; margin-top: 4px; }
.kern-pfeil { position: absolute; top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fenster-rand); background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text); font-size: 24px; cursor: pointer; z-index: 2; }
.kern-pfeil.links { left: calc(50% - 230px); } .kern-pfeil.rechts { right: calc(50% - 230px); }
.kern-pfeil:hover { border-color: var(--akzent, var(--gold)); color: var(--akzent, var(--gold)); }
.kern-hinweis { position: absolute; bottom: 30px; font-size: 12px; letter-spacing: .12em; color: var(--text2); opacity: .75; }
.kern-punkte { position: absolute; bottom: 10px; display: flex; gap: 6px; } .kern-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--fenster-rand); transition: all .3s; }
.kern-punkte i.an { width: 18px; border-radius: 3px; background: var(--akzent, var(--gold)); }
.kern-buehne.mit-auswahl .kern-karte-platz, .kern-buehne.mit-auswahl .kern-pfeil, .kern-buehne.mit-auswahl .kern-hinweis { opacity: .15; pointer-events: none; transition: opacity .4s; }
.kern-auswahl { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; animation: kern-auf .5s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes kern-auf { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.kern-auswahl-kopf { display: flex; align-items: center; gap: 10px; justify-content: center; } .kern-auswahl-kopf b { font-size: 18px; }
.kern-auswahl .kern-optionen { margin: 0 auto !important; }
.kern-auswahl .karussell-karte.kern-option { flex-basis: 200px !important; min-height: 110px !important; place-items: center; text-align: center; cursor: pointer; color: var(--text); font: inherit; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .kern-pfeil { display: none; } #homeContent .kern-buehne { min-height: 320px; } .kern-karte-platz { width: 250px; height: 190px; } }
@media (prefers-reduced-motion: reduce) { .kern-karte, .kern-ring { transition: none; animation: none; } }
/* 08.10.2026: Kern-Bühne — Kachel entsteht aus Partikeln (Leinwand #kernFunken über der Bühne, ohne Zeiger ⇒ Kachel bleibt klickbar).
   Bisher: Kachel flog seitlich ein/aus (von-/weg-Klassen) — jetzt sammeln sich Funken zum Umriss, dann wird die Kachel fest. */
.kern-funken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.kern-pfeil { z-index: 3; }
.kern-karte.entsteht { transform: scale(.97); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), filter 500ms ease, opacity 500ms ease; }
.kern-karte.entsteht.da { transform: none; }
.kern-karte.da { transition: transform 180ms ease-out, filter 500ms ease, opacity 500ms ease, box-shadow .3s; }
.kern-karte.da:hover { box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 46px color-mix(in srgb, var(--akzent, var(--gold)) 34%, transparent); }
.kern-karte.zerfaellt { opacity: 0 !important; filter: blur(6px) !important; transition: opacity 300ms ease, filter 300ms ease !important; pointer-events: none; }
/* 08.10.2026: Bisher deckte die versteckte Auswahl (display:grid schlägt [hidden]) die Kachel unsichtbar ab ⇒ echte Klicks/Ziehen trafen sie nicht */
.kern-auswahl[hidden] { display: none !important; }
/* Auswahl offen: Kachel ist in Funken zerfallen ⇒ ganz ausblenden (Bisher: .15 durchscheinend hinter den Möglichkeiten) */
.kern-buehne.mit-auswahl .kern-karte-platz, .kern-buehne.mit-auswahl .kern-pfeil, .kern-buehne.mit-auswahl .kern-hinweis { opacity: 0; }
/* Maus-Steuerung: Kacheln entstehen links/rechts (translate je Kachel) ⇒ Pfeile an den Bühnenrand, damit sie nicht darunter liegen */
.kern-pfeil.links { left: 8px; } .kern-pfeil.rechts { right: 8px; }
/* 08.10.2026 (Architekt): Themen als Punkte symmetrisch im Ring um den Kern; die Kachel entsteht am Punkt, zu dem die Maus geht.
   Bisher: eine Kachel in der Mitte (bzw. links/rechts), Pfeile ‹ › und Punktleiste. */
#homeContent .kern-buehne { min-height: 470px; height: 470px; }
.kern-orbit { position: absolute; inset: 0; z-index: 1; }
.kern-punkt { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: color-mix(in srgb, var(--akzent, var(--gold)) 70%, var(--text2)); border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 30%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--akzent, var(--gold)) 22%, transparent), color-mix(in srgb, var(--bg) 60%, transparent) 70%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--akzent, var(--gold)) 22%, transparent); opacity: .55; transition: transform .3s, opacity .3s, box-shadow .3s; }
.kern-punkt svg { width: 15px; height: 15px; }
.kern-punkt:hover, .kern-punkt:focus-visible { opacity: 1; transform: scale(1.18); }
.kern-punkt.an { opacity: 1; transform: scale(1.3); color: var(--akzent, var(--gold)); box-shadow: 0 0 24px color-mix(in srgb, var(--akzent, var(--gold)) 55%, transparent); }
#homeContent .kern-karte-platz { position: absolute; inset: 0; width: auto; height: auto; z-index: 3; pointer-events: none; }
.kern-karte-platz .kern-karte { inset: auto; width: 196px; height: 132px; margin: -66px 0 0 -98px; padding: 12px; gap: 4px; pointer-events: auto; }
.kern-karte-platz .kern-karte .topic-icon { width: 38px; height: 38px; border-radius: 12px; } .kern-karte-platz .kern-karte .topic-icon svg { width: 20px; height: 20px; }
.kern-karte-platz .kern-karte b { font-size: 17px; } .kern-karte-platz .kern-karte small { font-size: 12px; } .kern-karte-platz .kern-karte .kern-tipp { font-size: 10px; margin-top: 2px; }
.kern-funken { z-index: 4; }
.kern-hinweis { bottom: 6px; z-index: 1; }
.kern-auswahl { z-index: 5; }
.kern-buehne.mit-auswahl .kern-orbit { opacity: .12; pointer-events: none; transition: opacity .4s; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { #homeContent .kern-buehne { min-height: 380px; height: 380px; } .kern-punkt { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .kern-karte-platz .kern-karte { width: 168px; height: 118px; margin: -59px 0 0 -84px; } }
/* 08.10.2026 (Architekt): Kachel direkt aus den Helix-Sternen — der Rahmen SIND die Sterne (helix-kern.js uKachel), die Glasfläche bleibt
   leicht und randlos und erscheint erst, wenn sich die Sterne verdichtet haben. Bisher: Rand + Schatten + Icon (wirkte „aus dem Nichts"). */
.kern-buehne .kern-karte-platz .kern-karte { border-color: transparent; background: color-mix(in srgb, var(--bg) 38%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0 0 40px color-mix(in srgb, var(--akzent, var(--gold)) 10%, transparent);
  transition: opacity 600ms ease, filter 600ms ease, transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.kern-buehne .kern-karte-platz .kern-karte.da:hover { box-shadow: 0 0 50px color-mix(in srgb, var(--akzent, var(--gold)) 22%, transparent); }
.kern-buehne .kern-karte-platz .kern-karte b { font-size: 19px; letter-spacing: .01em; text-shadow: 0 0 18px color-mix(in srgb, var(--bg) 80%, transparent); }
.kern-buehne .kern-karte-platz .kern-karte .kern-tipp { opacity: .7; }
.kern-hinweis { opacity: .45; }
/* 08.10.2026 (Architekt: „kein Kindergarten — klare Linien, korrekt"): die fertige Kachel ist schlicht — eine feine 1-px-Linie in der
   Akzentfarbe, ruhiges Glas, klare Schrift, normale Schreibweise. Die Sterne zeichnen genau diese Linie und Schrift vor (kernFormPunkte),
   dann blendet die Kachel darüber und die Sterne verglimmen. Bisher: randlos mit Sternenrahmen, GROSSBUCHSTABEN-Hinweis. */
.kern-buehne .kern-karte-platz .kern-karte { border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 55%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); padding: 14px 18px; gap: 6px; transform: none; filter: none; opacity: 0;
  transition: opacity 520ms ease, border-color .25s, box-shadow .25s; }
.kern-buehne .kern-karte-platz .kern-karte.entsteht, .kern-buehne .kern-karte-platz .kern-karte.entsteht.da { transform: none; }
.kern-buehne .kern-karte-platz .kern-karte.da { opacity: 1; }
.kern-buehne .kern-karte-platz .kern-karte.da:hover { border-color: var(--akzent, var(--gold)); box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--akzent, var(--gold)) 25%, transparent); }
.kern-buehne .kern-karte-platz .kern-karte b { font-size: 17px; font-weight: 600; letter-spacing: 0; text-shadow: none; color: var(--text); }
.kern-buehne .kern-karte-platz .kern-karte small { font-size: 13px; color: var(--text2); }
.kern-buehne .kern-karte-platz .kern-karte .kern-tipp { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--akzent, var(--gold)); opacity: .9; margin-top: 2px; }
.kern-buehne .kern-karte-platz .kern-karte.zerfaellt { opacity: 0 !important; transition: opacity 250ms ease !important; }
/* 09.10.2026 (Architekt): ohne Maus kein Partikel-Effekt — eine ruhige, wischbare Kachelreihe im selben klaren Stil */
#homeContent .kern-buehne.ohne-band { height: auto; min-height: 0; display: block; margin: 4px auto 14px; }
#homeContent .kern-buehne.ohne-band.mit-auswahl { min-height: 300px; }
.kern-reihe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kern-reihe::-webkit-scrollbar { display: none; }
.kern-reihe .kern-karte { position: relative; inset: auto; flex: 0 0 72%; max-width: 280px; min-height: 112px; margin: 0; scroll-snap-align: center; opacity: 1; filter: none; transform: none;
  border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 55%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 14px 16px; gap: 6px; }
.kern-reihe .kern-karte b { font-size: 17px; font-weight: 600; } .kern-reihe .kern-karte small { font-size: 13px; color: var(--text2); }
.kern-reihe .kern-karte .kern-tipp { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--akzent, var(--gold)); }
.kern-buehne.ohne-band.mit-auswahl .kern-reihe { opacity: 0; pointer-events: none; }
/* 09.10.2026: die noch unsichtbare (entstehende) Kachel fängt die Maus nicht — Bisher sprang sie beim Berühren sofort auf „ganz gezogen" */
.kern-buehne .kern-karte-platz .kern-karte:not(.da) { pointer-events: none; }
/* 09.10.2026: versteckte Orte der Kacheln — nur ein leiser, atmender Stern (kein Icon, kein Text); gepackt = etwas heller */
.kern-orte { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.kern-glanz { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--akzent, var(--gold)) 85%, white) 0%, color-mix(in srgb, var(--akzent, var(--gold)) 35%, transparent) 40%, transparent 72%);
  opacity: .35; animation: kern-glanz 3s ease-in-out infinite; }
.kern-glanz.an { opacity: .9; animation: none; transform: scale(1.6); transition: transform .3s, opacity .3s; }
@keyframes kern-glanz { 0%, 100% { opacity: .22; transform: scale(.85); } 50% { opacity: .55; transform: scale(1.15); } }
.kern-wahl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 12px; margin: 4px 0 8px; }
@media (prefers-reduced-motion: reduce) { .kern-glanz { animation: none; } }
/* 09.10.2026: Magnet — Name des Themas, das gerade gezogen wird, leise am Zeiger (kein Rahmen, keine Fläche) */
.kern-zugname { position: absolute; z-index: 4; pointer-events: none; transform: translate(18px, -26px); font-size: 13px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--akzent, var(--gold)) 80%, var(--text)); text-shadow: 0 0 12px color-mix(in srgb, var(--bg) 90%, transparent);
  opacity: 0; transition: opacity .25s; white-space: nowrap; }
.kern-zugname:not(.an) { opacity: 0 !important; }
/* 09.10.2026: einheitliches Dropdown — offene Liste im BrainHelmut-Stil direkt unter dem Feld (statt der System-Liste) */
.aw-liste { position: fixed; z-index: 10000; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 40%, var(--fenster-rand, rgba(255,255,255,.12)));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font-size: var(--schrift-text, 14px); color: var(--text); }
.aw-option { padding: 9px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.aw-option.akt { background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, transparent); }
.aw-option.gewaehlt { color: var(--akzent, var(--gold)); font-weight: 600; }
.aw-option.gewaehlt::after { content: '✓'; float: right; margin-left: 16px; }
.aw-option.aus { opacity: .4; cursor: default; }
.aw-gruppe { padding: 8px 12px 4px; font-size: var(--schrift-gruppe, 11px); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
/* 09.10.2026 (Plan 97 F31): Netzwerkkarte im Superadmin */
.nz-zaehler { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.nz-karte { width: 100%; height: auto; max-height: 380px; margin: 4px 0 10px; }
.nz-kante { stroke: color-mix(in srgb, var(--akzent, var(--gold)) 45%, transparent); stroke-width: 1.4; }
.nz-knoten circle { fill: color-mix(in srgb, var(--bg) 60%, var(--text2)); stroke: var(--fenster-rand, rgba(255,255,255,.2)); stroke-width: 1.5; }
.nz-knoten.online circle { fill: var(--akzent, var(--gold)); stroke: color-mix(in srgb, var(--akzent, var(--gold)) 60%, white); }
.nz-knoten text { fill: var(--text2); font-size: 11px; }
.nz-antrag { padding: 12px 14px; margin: 6px 0; }
.nz-rolle { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .nz-rolle select { flex: 1 1 160px; width: auto; }
/* 09.10.2026 (Plan 97 F34): „Dieses Gerät merken" in der Anmeldung */
.login-merken { display: flex; align-items: center; gap: 8px; margin: 2px 2px 8px; font-size: var(--schrift-hinweis, 13px); color: var(--text2); cursor: pointer; }
.login-merken input { width: 16px; height: 16px; accent-color: var(--akzent, var(--gold)); }

/* 09.10.2026 (Architekt): Gruss im Kopf, Hinweis als Nachricht von Helmut (Chat-Blase) + im Profilmenue */
.helmut-nachricht { display: flex; align-items: flex-start; gap: 10px; max-width: var(--inhalt-breite, 720px); margin: 18px auto 14px; padding: 0; box-sizing: border-box; width: 100%; }
.helmut-nachricht .hn-bild { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--glass-bg, rgba(255,255,255,.06)); border: 1px solid var(--glass-border, rgba(255,255,255,.12)); }
.helmut-nachricht .hn-bild img { width: 22px; height: 22px; object-fit: contain; }
.helmut-nachricht .hn-blase { margin: 0; flex: 1 1 auto; min-width: 0; max-width: none; text-align: left; white-space: normal; line-height: 1.55;
  background: var(--bot-bg); padding: 10px 16px; border-radius: 18px; border-top-left-radius: 4px; border: 1px solid var(--border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.helmut-nachricht .hn-blase p { margin: 4px 0 0; display: block; }
.helmut-nachricht .hn-wer { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text2); }
.helmut-nachricht .hk-punkt { display: inline-block; vertical-align: middle; margin-right: 8px; width: 8px; height: 8px; }
.helmut-nachricht #hkBefinden { font-weight: 600; color: var(--text); }
.helmut-nachricht .hk-grund { margin: 0; display: inline; }
.helmut-nachricht .start-anders { margin: 6px 0 0; padding: 0; max-width: none; text-align: left; }
.pm-nachrichten { padding: 8px 0; border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.1)); margin-bottom: 4px; }
.pm-n-titel { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); padding: 0 var(--menue-zeile-x, 12px) 4px; }
.pm-n { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 8px var(--menue-zeile-x, 12px); background: none; border: 0; border-radius: 10px; color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; cursor: pointer; column-gap: 12px; }
.pm-n:hover, .pm-n:focus-visible { background: var(--glass-hover, rgba(255,255,255,.06)); }
.pm-n .hk-punkt { margin: 6px 4px 0; width: 8px; height: 8px; }   /* in 16-px-Spalte wie das ?-Zeichen */
.pm-n-i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid currentColor; color: var(--text2); }
.kopf-profil-knopf { position: relative; }
#kopfProfil.hat-neu::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent, var(--gold)); box-shadow: 0 0 0 2px var(--bg); }
/* 09.10.2026: Karussell mit der Maus ziehen + Pfeile im Auswahl-Kopf */
.ideen-karussell.zieht { scroll-snap-type: none !important; scroll-behavior: auto !important; cursor: grabbing; user-select: none; }
.ideen-karussell.zieht .karussell-karte { pointer-events: none; }
.kern-auswahl-pfeile { display: inline-flex; gap: 4px; }
@media (hover: none) { .kern-auswahl-pfeile { display: none; } }
/* 09.10.2026 (Fehleranalyse): Sprachliste im Profilmenue ist eine eingerueckte Unterliste ohne eigenen Rahmen — gleicher Anker wie die Token-Regel */
.pm-sprache :is(.sprach-liste, #settingsBody #workspaceBody .x-nie) { padding: 0 0 4px 28px; box-shadow: none; border: 0; background: none; border-radius: 0; }
/* Nachrichten-Behaelter im Profilmenue: Zeilen tragen den Innenrand selbst (sonst doppelt) */
.hilfe-liste > :is(.pm-nachrichten, #settingsBody #workspaceBody .x-nie) { padding-left: 0; padding-right: 0; }
/* 09.10.2026 (Fehleranalyse: Knopf 38 px neben Feld 44 px): steht ein Knopf in derselben Zeile wie ein Feld, bekommt er die Feldhoehe */
:is(div, label, form, p):has(> input.input-field, > select.input-field) > :is(.btn, .btn-zeile, #settingsBody #workspaceBody .x-nie) { min-height: var(--feld-h); }
/* 09.10.2026: eine Textkante im Profilmenue — Abmelden (ohne Symbol) auf die Spalte der uebrigen Zeilen (Symbol 18 px + Abstand 10 px) */
.profil-liste :is(.pm-abmelden, #settingsBody #workspaceBody .x-nie) { padding-left: calc(var(--menue-zeile-x) + 28px); }
/* 09.10.2026 (Architekt: „Widget nach Anklicken/Auswahl schwarz auf schwarz") — gemessen im HELLEN Modus:
   Menüs (Profil, Hilfe, Sprache, Chat ⋯, Themenleiste, Auswahllisten) nahmen den Rückfall #15161b, weil --bg2 hell nicht definiert ist
   ⇒ dunkle Schrift auf fast Schwarz (Kontrast 1,06). Gold-Flächen (aktive Wahl, Gold-Knopf) bekamen helle Schrift (1,9). */
html[data-theme=light] { --menue-bg: #ffffff; }
html[data-theme=light] :is(.btn-gold, .pm-wahl button.an, #settingsBody #workspaceBody .x-nie) { color: #111; }
/* 09.10.2026 (Pruefung CSS #1): weitere Gold-Flaechen trugen hell var(--bg) (#f2f2f7 auf ≈#a58334 = 3,2:1) — gewaehlte Chips, Teil-Leiste,
   aktiver Einstellungs-Reiter, Schrittnummern */
html[data-theme=light] :is(.stufen-chip.an, .settings-tab-btn.active, .se-du .se-nr, .ki-weg-nr, .lr-nr, #settingsBody #workspaceBody .x-nie) { color: #111; }
html[data-theme=light] :is(.info-knopf:hover, .info-knopf:focus-visible) { color: var(--gold); border-color: var(--gold); }
/* Hinweis-Links in Einstellungen/Lehrer: Akzentfarbe statt Browser-Blau (2,0 auf Dunkel) */
.settings-tab-content .settings-hint a:not(.btn) { color: var(--gold, #c9a227); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }   /* wie #settingsBody .settings-hint a */
html[data-theme=light] :is(.settings-legal-link, #settingsBody .settings-hint a, .settings-tab-content .settings-hint a, #settingsBody #workspaceBody .x-nie) { color: color-mix(in srgb, #d4a843 55%, #000); }
html[data-theme=light] :is(.pk-weg:hover, .pk-weg:focus-visible, #settingsBody #workspaceBody .x-nie) { color: #b42318; }
/* 09.10.2026: Ersteinrichtung mit Unterseiten — Titel + Unter-Reiter oben, eine Unterseite offen; Mehrfachwahl umbrechend; Helix-Vorschau durchsichtig */
.ew-titelzone { padding: 12px 22px 0; display: grid; gap: 10px; }
.ew-teile { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--kachel-bg); border: 1px solid var(--fenster-rand); }
.ew-teil { all: unset; box-sizing: border-box; flex: 1 1 0; text-align: center; cursor: pointer; padding: 7px 6px; border-radius: 9px; font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-teil:hover, .ew-teil:focus-visible { color: var(--text); }
.ew-teil.an { background: color-mix(in srgb, var(--akzent) 18%, transparent); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent); }
.ew-segment.ew-mehrfach { display: flex !important; flex-wrap: wrap; }
.ew-segment.ew-mehrfach .stufen-chip { flex: 1 1 auto; padding: 6px 12px; }
.ew-liste { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text); font-size: 14px; line-height: 1.45; }
.ew-hinweis { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text2); }
.ew-seiten { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.ew-seite { padding: 6px 0; }
.ew-farbpunkte { display: flex; flex-wrap: wrap; gap: 8px; }
.ew-n-reihe { display: grid; gap: 8px; }
.ew-n-plattformen { display: flex; flex-wrap: wrap; gap: 8px; }
.ew-meldung { font-size: 13px; color: var(--text2); min-height: 0; }
#ewNebenBox { padding: 22px; gap: 14px; overflow-y: auto; }
#ewNebenBox .ew-fuss { padding: 12px 0 0; }
.ew-overlay.ew-durchsicht { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ew-overlay.ew-durchsicht .ew-box { background: color-mix(in srgb, var(--fenster-bg) 55%, transparent); align-self: flex-end; margin-bottom: 24px; }
html[data-theme=light] :is(.ew-segment .stufen-chip.an, #settingsBody #workspaceBody .x-nie) { color: #111; }
.ew-schnell { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ew-start-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ew-start-karte { padding: 16px 18px; gap: 6px; }
.ew-start-sym { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, transparent); color: var(--akzent, var(--gold)); margin-bottom: 4px; }
/* ═══ 09.10.2026: ERSTEINRICHTUNG ALS GESPRÄCH — Vollbild, Helix (= Helmut) sichtbar, Sprechblase, grosse Antwortkarten ═══ */
#einrichtung.ew-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(8,10,20,0) 0%, rgba(8,10,20,.35) 45%, rgba(8,10,20,.88) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme=light] #einrichtung.ew-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(234,240,248,0) 0%, rgba(234,240,248,.45) 45%, rgba(234,240,248,.92) 100%); }
#einrichtung .ew-box { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid; grid-template-rows: auto minmax(90px, 26vh) auto 1fr auto; justify-items: center; overflow-y: auto; padding: 0 16px; box-sizing: border-box; }
.ewg-oben { width: min(720px, 100%); display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 16px 0 0; }
.ewg-zurueck { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--text2); border: 1px solid var(--fenster-rand); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.ewg-zurueck:hover, .ewg-zurueck:focus-visible { color: var(--text); border-color: var(--akzent, var(--gold)); }
.ewg-link { all: unset; cursor: pointer; color: var(--text2); font-size: 14px; padding: 8px 4px; } .ewg-link:hover, .ewg-link:focus-visible { color: var(--akzent, var(--gold)); }
.ewg-kapitel { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ewg-kapitel span { width: 8px; height: 8px; border-radius: 4px; background: var(--fenster-rand); transition: width .3s ease, background .3s ease; }
.ewg-kapitel span.fertig { background: color-mix(in srgb, var(--akzent, var(--gold)) 55%, transparent); }
.ewg-kapitel span.an { width: 26px; background: var(--akzent, var(--gold)); }
.ewg-kapitel em { font-style: normal; font-size: 13px; color: var(--text2); margin-left: 8px; letter-spacing: .02em; }
.ewg-helmut { width: 100%; }
.ewg-blase { position: relative; width: min(620px, 100%); box-sizing: border-box; padding: 18px 56px 18px 22px; border-radius: 22px; border-top-left-radius: 6px;
  background: color-mix(in srgb, var(--fenster-bg, var(--bg)) 78%, transparent); border: 1px solid color-mix(in srgb, var(--akzent, var(--gold)) 30%, var(--fenster-rand));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(0,0,0,.35); animation: ewg-auf .45s cubic-bezier(.2,.7,.2,1); }
.ewg-blase p { margin: 4px 0 0; font-size: 22px; line-height: 1.4; font-weight: 500; color: var(--text); }
.ewg-wer { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent, var(--gold)); }
.ewg-ton { all: unset; cursor: pointer; position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--text2); border: 1px solid var(--fenster-rand); }
.ewg-ton.an, .ewg-ton:hover { color: var(--akzent, var(--gold)); border-color: var(--akzent, var(--gold)); }
@keyframes ewg-auf { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ewg-antwort { width: min(720px, 100%); display: grid; gap: 14px; align-content: start; padding: 18px 0 8px; }
.ewg-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ewg-karten.ewg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ewg-karten.ewg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ewg-karte { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 18px; min-height: 64px;
  background: color-mix(in srgb, var(--fenster-bg, var(--bg)) 72%, transparent); border: 1px solid var(--fenster-rand); color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.ewg-karte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--akzent, var(--gold)) 50%, var(--fenster-rand)); }
.ewg-karte:focus-visible { outline: 2px solid var(--akzent, var(--gold)); outline-offset: 2px; }
.ewg-karte.an { border-color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 16%, color-mix(in srgb, var(--fenster-bg, var(--bg)) 80%, transparent)); box-shadow: 0 0 0 1px var(--akzent, var(--gold)), 0 8px 24px rgba(0,0,0,.25); }
.ewg-karte b { font-size: 16px; font-weight: 600; } .ewg-karte small { font-size: 13px; line-height: 1.4; color: var(--text2); }
.ewg-sym { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 14%, transparent); }
.ewg-eingabe .input-field { font-size: 20px; min-height: 56px; border-radius: 16px; text-align: center; }
.ewg-schalter { all: unset; cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--fenster-rand); color: var(--text2); font-size: 14px; background: color-mix(in srgb, var(--fenster-bg, var(--bg)) 60%, transparent); }
.ewg-schalter.an { color: var(--text); border-color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 14%, transparent); }
.ewg-schalter.an::before { content: '✓'; color: var(--akzent, var(--gold)); font-weight: 700; }
.ewg-farben { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ewg-farbe { all: unset; cursor: pointer; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--fenster-rand); transition: transform .15s ease, box-shadow .15s ease; }
.ewg-farbe:hover { transform: scale(1.08); } .ewg-farbe.an { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--akzent, var(--gold)); }
.ewg-akzent { display: flex; justify-content: center; gap: 10px; }
.ewg-klein { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text2); text-align: center; }
.ewg-zusammen { display: grid; padding: 6px 18px; border-radius: 18px; background: color-mix(in srgb, var(--fenster-bg, var(--bg)) 72%, transparent); border: 1px solid var(--fenster-rand); }
.ewg-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fenster-rand); } .ewg-zeile:first-child { border-top: 0; }
.ewg-zeile span { color: var(--text2); } .ewg-zeile b { text-align: right; font-weight: 600; }
.ewg-unten { width: min(420px, 100%); padding: 10px 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
.ewg-weiter { width: 100%; min-height: 54px; font-size: 17px; border-radius: 16px; justify-content: center; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  #einrichtung .ew-box { grid-template-rows: auto minmax(60px, 14vh) auto 1fr auto; }
  .ewg-karten, .ewg-karten.ewg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ewg-karten.ewg-2 { grid-template-columns: 1fr; }
  .ewg-blase p { font-size: 19px; } .ewg-kapitel em { display: none; }
}
/* 12.10.2026: Einrichtung — Muster fuer Looks/Glanz/Hintergrund (Farben hier, nie inline) und Zuordnung der Geraete */
.ewg-muster { display: block; width: 38px; height: 38px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ewg-glanz-flach { background: var(--akzent, var(--gold)); }
.ewg-glanz-metall { background: linear-gradient(135deg, color-mix(in srgb, var(--akzent, var(--gold)) 55%, #fff) 0%, var(--akzent, var(--gold)) 45%, color-mix(in srgb, var(--akzent, var(--gold)) 60%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3); }
.ewg-grund { width: 28px; height: 28px; border-radius: 50%; }
.ewg-grund[data-grund-muster=nacht] { background: #07070b; } .ewg-grund[data-grund-muster=graphit] { background: #16171c; }
.ewg-grund[data-grund-muster=marine] { background: #0a1528; } .ewg-grund[data-grund-muster=wald] { background: #0a1912; }
.ewg-grund[data-grund-muster=aubergine] { background: #170e1d; } .ewg-grund[data-grund-muster=akzent] { background: color-mix(in srgb, var(--akzent, var(--gold)) 35%, #06060a); }
.ewg-klein-karten .ewg-karte { min-height: 0; padding: 10px 12px; grid-template-columns: auto 1fr; align-items: center; }
.ewg-klein-karten .ewg-karte b { font-size: 14px; }
.ewg-zuordnung { display: grid; padding: 4px 16px; border-radius: 18px; background: color-mix(in srgb, var(--fenster-bg, var(--bg)) 72%, transparent); border: 1px solid var(--fenster-rand); }
.ewg-zu-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--fenster-rand); }
.ewg-zu-zeile:first-child { border-top: 0; } .ewg-zu-zeile > span { font-weight: 600; color: var(--text); }
.ewg-antwort .ew-segment { justify-content: center; }
#ewBox { scroll-padding-bottom: 110px; }   /* Fokus/Scroll bleibt ueber dem klebenden „Weiter" */
@media (prefers-reduced-motion: reduce) { .ewg-blase { animation: none; } .ewg-karte { transition: none; } }
body.ew-aktiv :is(#appShell, #desktopFooter, .cursor-glow, #hinweisLeiste) { visibility: hidden; opacity: 0; }
:is(#appShell, #desktopFooter) { transition: opacity .35s ease; }
/* Helix-Kern bleibt sichtbar: Blase und Antworten im unteren Teil, Eingabe so breit wie die Blase */
#einrichtung .ew-box { grid-template-rows: auto minmax(140px, 40vh) auto 1fr auto; }
.ewg-eingabe { width: min(620px, 100%); justify-self: center; } .ewg-antwort:has(.ewg-eingabe) { justify-items: center; }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { #einrichtung .ew-box { grid-template-rows: auto minmax(90px, 22vh) auto 1fr auto; } }
/* 12.10.2026 (Architekt: „Speichern und Hinweis am Handy in die Mitte statt oben"): Speicherfeld schwebend in der Bildschirmmitte.
   Bisher (09.10.) unten in der Fussleiste, die Diskette zusaetzlich oben im Kopf. */
.fuss-speichern { position: fixed; left: 50%; top: 56%; transform: translate(-50%, -50%); z-index: 9000;
  width: min(360px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--fenster-bg, var(--bg)) 92%, transparent); border: 1px solid var(--fenster-rand, var(--glass-border));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.fuss-speichern.hidden { display: none; }
.fuss-speichern .btn { min-height: 46px; justify-content: center; font-size: 15px; border-radius: 14px; }
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) { .fuss-speichern { display: none !important; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .entwurf-leiste { display: none !important; }   /* Handy: Verwerfen/Speichern stehen im Feld in der Mitte (#fussSpeichern) */
  .app-kopf .kopf-aktionen > .kopf-speichern { display: none !important; }   /* keine zweite Speicherstelle oben */
}
/* 09.10.2026: Auswahl nach Antippen einer Kern-Kachel = Raster statt Karussell (alles auf einen Blick) */
.kern-auswahl { align-content: center; justify-items: center; padding: 0 12px; }
.kern-auswahl-kopf { width: min(980px, 100%); justify-content: space-between; margin-bottom: 6px; }
.kern-auswahl-titel { display: grid; gap: 2px; } .kern-auswahl-titel b { font-size: 20px; }
.kern-raster { width: min(980px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kern-auswahl .kern-option { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 16px; min-height: 118px;
  background: color-mix(in srgb, var(--fenster-bg, var(--bg)) 78%, transparent); border: 1px solid var(--fenster-rand); color: var(--text);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .15s ease, border-color .15s ease; animation: ewg-auf .35s cubic-bezier(.2,.7,.2,1) both; }
.kern-auswahl .kern-option:nth-child(2) { animation-delay: .04s; } .kern-auswahl .kern-option:nth-child(3) { animation-delay: .08s; }
.kern-auswahl .kern-option:nth-child(4) { animation-delay: .12s; } .kern-auswahl .kern-option:nth-child(5) { animation-delay: .16s; } .kern-auswahl .kern-option:nth-child(6) { animation-delay: .2s; }
.kern-auswahl .kern-option:hover, .kern-auswahl .kern-option:focus-visible { transform: translateY(-2px); border-color: var(--akzent, var(--gold)); outline: none; box-shadow: 0 0 0 1px var(--akzent, var(--gold)); }
.kern-auswahl .kern-option:first-child { border-color: color-mix(in srgb, var(--akzent, var(--gold)) 55%, var(--fenster-rand)); }
.kern-auswahl .kern-option b { font-size: 15px; font-weight: 600; } .kern-auswahl .kern-option small { font-size: 12.5px; line-height: 1.4; color: var(--text2); }
.kern-option-sym { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 14%, transparent); }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .kern-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kern-auswahl .kern-option { min-height: 104px; padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .kern-auswahl .kern-option { animation: none; } }
/* 09.10.2026: Handy — Startkacheln als 2-spaltiges Raster (kein Wisch-Karussell), Auswahl ersetzt das Raster an Ort und Stelle */
.kern-buehne.ohne-band .kern-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; scroll-snap-type: none; padding: 4px 0 8px; }
.kern-buehne.ohne-band .kern-reihe .kern-karte { flex: none; max-width: none; min-height: 96px; padding: 14px; text-align: left; align-content: start; justify-items: start; gap: 4px; }
.kern-buehne.ohne-band .kern-reihe .kern-karte b { font-size: 15.5px; } .kern-buehne.ohne-band .kern-reihe .kern-karte small { font-size: 12.5px; }
.kern-buehne.ohne-band .kern-reihe:not(.alle) .kern-weitere { display: none; }
.kern-buehne.ohne-band .kern-alle { width: 100%; justify-content: center; margin-top: 2px; }
.kern-buehne.ohne-band.mit-auswahl :is(.kern-reihe, .kern-alle) { display: none; }
#homeContent .kern-buehne.ohne-band.mit-auswahl { min-height: 0; }
.kern-buehne.ohne-band .kern-auswahl { position: static; inset: auto; padding: 0; }
.kern-buehne.ohne-band .kern-reihe .kern-karte .kern-tipp { display: none; }
.app-footer-input textarea { min-height: calc(1.4em + 16px); }   /* 09.10.2026: nie weniger als eine volle Zeile */
.mic-ok { color: #4ade80; } .mic-nein { color: var(--text2); }
/* 14.10.2026: Mikrofon-Hilfe — Groesse, Rundung und Hoehe kommen aus dem Fenstersystem (Ende dieser Datei); hier nur Innenabstand
   (vorher style="" im Markup und 4× !important) */
.mh-box { padding: 22px; gap: 14px; }
.mh-links { text-align: left; }
.ew-fuss.mh-fuss { padding: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mh-fuss .btn { flex: 1 1 auto; width: auto; }
.mh-fuss .btn-gold { flex-basis: 100%; }   /* 3 Knoepfe: Hauptknopf volle Breite darunter, statt schiefem Raster 1fr/1.4fr */
/* 09.10.2026 (Architekt: „Abstand zum Footer wird nicht gemessen"): schwebende Elemente stehen ueber der GEMESSENEN Fussleiste
   (--fuss-hoehe, js/app.js chatBewegung) statt ueber festen 100/150 px */
.toast { bottom: calc(var(--fuss-hoehe, 88px) + 12px); }
/* 12.10.2026 (Architekt: „Update-Info irgendwo ganz klein statt volle Breite, mobil unteres Drittel"): Hinweis-Leiste am Handy
   (Update, Kern nicht erreichbar, Lizenz) volle Breite ueber der gemessenen Fussleiste, Knoepfe gross. Bisher oben unter dem Kopf. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .hinweis-leiste { top: auto; bottom: calc(var(--fuss-hoehe, 138px) + 14px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px;
    transform: none; width: auto; max-width: none; gap: 8px; }
  .hinweis-eintrag { padding: 16px; gap: 12px; font-size: 16px; line-height: 1.4; border-radius: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.4); }
  .hinweis-eintrag > .btn { flex: 1 1 140px; min-height: 46px; justify-content: center; font-size: 15px; }
  .hinweis-klein { font-size: 13.5px; }
}
/* 12.10.2026: Handy — Meldungen („Gespeichert" usw.) in der Bildschirmmitte statt unten, knapp ueber dem Speicherfeld */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .toast { top: 36%; bottom: auto; width: max-content; max-width: calc(100vw - 48px); text-align: center; padding: 14px 22px; font-size: 15px; border-radius: 16px; animation: toastInMitte .25s ease, toastOutMitte .3s 2.5s ease forwards; }
}
@keyframes toastInMitte { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes toastOutMitte { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .schwebe-aktionen { bottom: calc(var(--fuss-hoehe, 138px) + 12px); }
  body.fuss-zu .fuss-griff span { background: var(--akzent, var(--gold)); }   /* zugeklappt: Griff deutlich sichtbar */
}
/* ══ 09.10.2026 Pruefung (dritte Sicht, CSS) ══ */
/* #3 Handy: Eingabeleiste sprang beim Antippen (~18 px hoeher, nach rechts) und animierte margin/padding genau waehrend die Tastatur aufging —
   layout.css :focus-within (0,2,0) schlug die Handy-Masse (0,1,0). Jetzt gleiche Masse, animiert nur Rahmen und Schatten. */
@media (max-width: 600px) {
  .app-footer-input, .app-footer-input:focus-within { margin: 6px 10px 2px; padding: 2px 4px 2px 12px; transition: border-color .2s, box-shadow .2s; }
}
/* #16 Heller Modus: Gruen zu blass (#3fb950 ≈ 2,4:1, #4ade80 ≈ 1,7:1) */
html[data-theme=light] .kopf-aktionen > .kopf-speichern.gesichert, html[data-theme=light] .mic-ok { color: #1a7f37; }
/* #8 Namensfeld der Ersteinrichtung: die Feldhoehen-Regel mit Gewichts-Anker (2,1,0) machte es 44 statt 56 px hoch — Ausnahme mit demselben Anker */
:is(.ewg-eingabe .input-field, #settingsBody #workspaceBody .x-nie) { min-height: 56px; }
/* 09.10.2026 (Simulator iPhone 15 Pro, Safari 26.5): in der Zusammenfassung lag „Los geht's“ unter dem sichtbaren Bereich (674 > 659 px) —
   die Knopfzeile klebt jetzt unten im Einrichtungs-Fenster, Inhalt laeuft darunter weich aus */
#einrichtung .ewg-unten { position: sticky; bottom: 0; z-index: 2; padding-top: 18px;
  background: linear-gradient(to top, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent)); }
/* 09.10.2026 (Simulator iPhone quer, 343 px Hoehe): der Speicher-Hinweis deckte fast den ganzen Chat — auf niedrigen Schirmen kompakt:
   Text und Knoepfe in einer Zeile, kleinere Schrift, Knoepfe ohne Umbruch */
@media (max-height: 500px) {
  .speicher-hinweis { top: calc(52px + env(safe-area-inset-top, 0px)); padding: 8px 12px; display: flex; align-items: center; gap: 12px; }
  .speicher-hinweis p { font-size: 12.5px; line-height: 1.35; margin: 0; flex: 1 1 auto; }
  .speicher-hinweis .mcp-knoepfe { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; }
  .speicher-hinweis .mcp-knoepfe .btn { min-height: 32px; padding: 4px 10px; font-size: 13px; }
}
/* 09.10.2026 Helix-Vorlagen (frontend_registry.json vorlagen.helix): Farbverlauf der Vorlage als Streifen, wie .stimm-muster */
.vorlage-muster { display: block; width: 100%; height: 22px; border-radius: 8px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
/* 09.10.2026 (Architekt: „Intro-Splash ohne die Helix — wirkt sauberer"): solange der Splash steht, ist die Helix unsichtbar (nur Logo,
   Begrüssung, Slogan auf ruhigem Grund); beim Ausblenden des Splash erwacht sie weich (1,6 s) — Auftritt statt Tapete */
#nebulaGlobal { transition: opacity 1.6s ease; }
body:has(#splash:not(.out)) #nebulaGlobal { opacity: 0; transition: none; }
/* ══ 09.10.2026 Seitenleiste: einklappbare Gruppen (Projekte · Verlauf · Mehr) wie die Chat-Ideen ══
   Architekt: „Einklappmenü inkl. Hover … unten nicht überfluten, kein Hamburger". Kopfzeile mit echter Hover-Fläche (Bisher nur Schrift heller). */
.sidebar-aufklapper { border-radius: var(--app-radius-klein, 10px); padding: 6px 12px; margin: 2px 6px; width: calc(100% - 12px); transition: background-color .15s, color .15s; }
.sidebar-aufklapper:hover, .sidebar-aufklapper:focus-visible, .sidebar-aufklapper[aria-expanded="true"]:hover { background: var(--kachel-bg, rgba(255,255,255,.06)); color: var(--text); outline: none; }
.sidebar-aufklapper:hover .aufklapper-pfeil { opacity: 1; }
.leisten-gruppe-inhalt.zu:not(.schwebt), #gruppeProjekte.zu:not(.schwebt), #gruppeMehr.zu:not(.schwebt) { display: none; }   /* Gewicht wie die ID-Regel unten */
#gruppeProjekte, #gruppeMehr { display: flex; flex-direction: column; gap: 1px; }
#gruppeProjekte.schwebt, #gruppeMehr.schwebt, .seiten-start.schwebt { animation: leisteAuf .16s ease-out; }
@keyframes leisteAuf { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.sidebar-mehr { justify-content: flex-start; gap: 10px; }
.sidebar-mehr .mehr-text { flex: 1; text-align: left; }
.sidebar-mehr .ico { color: var(--akzent, var(--gold)); }
/* schmale Symbol-Leiste: Projekte als Symbol, „Mehr"-Einträge immer als Symbole, Kopfzeilen aus */
.nur-schmal { display: none; }
.app-shell.sb-zu .nur-schmal { display: flex; }
.app-shell.sb-zu .sidebar-mehr, .app-shell.sb-zu #gruppeProjekte { display: none; }
.app-shell.sb-zu #gruppeMehr { display: flex; }
@media (prefers-reduced-motion: reduce) { #gruppeProjekte.schwebt, #gruppeMehr.schwebt, .seiten-start.schwebt { animation: none; } }
/* 09.10.2026 Schwebefenster der Seitenleisten-Gruppen (js/app.js leisteSchwebe): rechts neben der Leiste, verschiebt nichts */
.leiste-schwebe { position: fixed; left: var(--schwebe-x, 250px); top: var(--schwebe-y, 80px); display: none; flex-direction: column; gap: 1px;
  min-width: 220px; max-width: 300px; max-height: 70vh; overflow-y: auto; }   /* Rahmen: Menü-Block */
.leiste-schwebe.an { display: flex; animation: leisteAuf .14s ease-out; }
.leiste-schwebe .chat-history-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 12px; border-radius: 10px; cursor: pointer; color: var(--text); font-size: 14px; }
.leiste-schwebe .chat-history-item:hover, .leiste-schwebe .chat-history-item:focus-visible { background: var(--kachel-bg, rgba(255,255,255,.06)); outline: none; }
.leiste-schwebe .chat-history-item .ico { width: 16px !important; height: 16px !important; color: var(--akzent, var(--gold)); flex: 0 0 auto; }
.leiste-schwebe .chat-history-del { display: none; }   /* Verlauf im Schwebefenster: nur öffnen, nicht löschen/exportieren */
.sidebar-aufklapper.schwebt-quelle { background: var(--kachel-bg, rgba(255,255,255,.06)); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .leiste-schwebe.an { animation: none; } }
/* 09.10.2026 Helmut-Nachricht auf der Startseite: 5 s sichtbar, dann weich aus — klappt sanft zu (js/app.js helmutKarteFuellen) */
#homeContent .helmut-nachricht { max-height: 320px; overflow: hidden; transition: opacity .6s ease, transform .6s ease, max-height .7s ease .35s, margin .7s ease .35s; }
#homeContent .helmut-nachricht.verblasst { opacity: 0; transform: translateY(-6px); max-height: 0; margin-top: 0; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { #homeContent .helmut-nachricht { transition: none; } }

/* 09.10.2026 (Architekt: „im handy giebt es mehre header buttons sind aber nicht gleichmässig"): gemessen bei 390 px
   ⋯/? 36×34 eckig mit Rand, Zurueck 36×36 rund ohne Rand in einer Pillen-Gruppe, Profil 34×34, Abstaende 6/9/9 px, y 9/10.
   Jetzt: alle Kopfknoepfe 36×36, gleicher Rand + Flaeche, Radius 10 (Profil bleibt rund = Avatar), Abstand einheitlich 6 px. */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  #app .kopf-rechts, .kopf-rechts { display: flex; align-items: center; gap: 6px; }
  .kopf-rechts > .kopf-aktionen#kopfAktionen { border: 0; padding: 0; gap: 6px; border-radius: 0; background: none; }
  .kopf-rechts #kopfChatMenue, .kopf-rechts #kopfHilfe, .kopf-rechts #kopfAktionen > .btn-icon {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; margin: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--elevated); } /* N-HD 21.10.: --bg-elevated gibt es nicht ⇒ Rueckfall #0a1528 machte die Knoepfe hell dunkel; --elevated hat hell+dunkel */
  .kopf-rechts #kopfAktionen > .btn-icon.hidden { display: none !important; }
  .kopf-rechts #kopfProfil { width: 36px; height: 36px; min-width: 36px; }
}

/* 09.10.2026 iOS-Simulator (iPhone 17 Pro, iOS 26.5, Startbildschirm-App): Ersteinrichtung — „Überspringen" und Punkte lagen IN der
   Statusleiste (Uhr/Dynamic Island/Akku), weil .ewg-oben nur 16 px Abstand hatte. Jetzt mindestens Statusleiste + 8 px.
   Und die Box nutzte 100dvh = auf iOS 26 genau die zu kurze Hoehe (WebKit-Bug 301108) ⇒ wie die App-Huelle 100lvh, bei Tastatur
   der sichtbare Bereich (layout.css / js/app-identitaet.js). */
.ewg-oben { padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); }
/* 13.10.2026 (Architekt, iPhone-App: „bei Einrichtung geht Schrift in den Lautsprecher rein“): die Kopfzeile scrollte mit — beim Scrollen
   langer Schritte (Look, Form) lief der Inhalt unter Uhr/Dynamic Island. Kopf bleibt oben stehen und deckt die Statusleiste ab; lange
   Druecken markiert in der Einrichtung keinen Text mehr (Eingabefelder ausgenommen). */
#einrichtung .ewg-oben { position: sticky; top: 0; z-index: 3; padding-bottom: 10px;
  background: linear-gradient(to bottom, var(--bg) 78%, color-mix(in srgb, var(--bg) 0%, transparent)); }
#einrichtung { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#einrichtung input, #einrichtung textarea, #einrichtung [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
html[data-appart=pwa][data-ios] #einrichtung .ew-box { height: max(100lvh, var(--app-hoehe, 0px)); }
html[data-appart=pwa][data-ios].tastatur-offen #einrichtung .ew-box { height: var(--vv-hoehe, 100dvh); margin-top: var(--vv-oben, 0px); }
/* 13.10.2026 FAHRMODUS: Vollbild, ein grosser Sprechknopf, Zustand als Ring — keine Texte zum Lesen ausser einer Zeile */
.fahr-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); background: var(--bg); color: var(--text, inherit);
  -webkit-user-select: none; user-select: none; }
.fahr-kopf { display: flex; align-items: center; gap: 8px; font-weight: 600; opacity: .8; }
.fahr-status { font-size: 1.6rem; font-weight: 600; text-align: center; min-height: 2.2em; display: flex; align-items: center; }
.fahr-mikro { width: min(62vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  color: var(--bg); background: var(--akzent, var(--gold)); box-shadow: 0 10px 40px color-mix(in srgb, var(--akzent, var(--gold)) 45%, transparent);
  transition: transform .15s; touch-action: manipulation; }
.fahr-mikro:active { transform: scale(.96); }
.fahr-mikro .ico { width: 38%; height: 38%; }
.fahr-overlay[data-zustand=listening] .fahr-mikro { animation: fahr-puls 1.1s ease-in-out infinite; }
.fahr-overlay[data-zustand=thinking] .fahr-mikro, .fahr-overlay[data-zustand=speaking] .fahr-mikro { opacity: .75; }
@keyframes fahr-puls { 50% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--akzent, var(--gold)) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .fahr-overlay[data-zustand=listening] .fahr-mikro { animation: none; outline: 6px solid color-mix(in srgb, var(--akzent, var(--gold)) 45%, transparent); } }
.fahr-fuss { display: flex; gap: 12px; width: 100%; max-width: 420px; }
.fahr-fuss .btn { flex: 1; min-height: 56px; font-size: 1.05rem; }
@media (orientation: landscape) and (max-height: 500px) { .fahr-overlay { flex-direction: row; justify-content: space-around; } .fahr-mikro { width: min(60vh, 260px); } .fahr-fuss { flex-direction: column; width: auto; } }
body.fahrmodus { overflow: hidden; }

/* 13.10.2026: Wiederherstellungscode (Konto-Schloss) — gross, gut abschreibbar, bricht auf schmalen Geräten um */
.wh-code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; letter-spacing: .06em;
  padding: 12px 14px; border-radius: 10px; background: var(--bg-elev, rgba(127,127,127,.12)); word-break: break-all; user-select: all; }

/* 13.10.2026: Datenbank-Werkzeug (Superadmin) — breite Tabellen scrollen in sich, nie die Seite */
.db-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.db-rahmen .vn-tabelle td code { font-size: 12px; word-break: break-all; }
.db-feldzeile { display: grid; grid-template-columns: 1fr minmax(110px, 40%) auto; gap: 8px; align-items: center; margin: 6px 0; }
@media (max-width: 420px) { .db-feldzeile { grid-template-columns: 1fr; } }

/* 13.10.2026: Support-Aufschaltung — rot, nicht wegklickbar (MD 97_AUTH „Support-Aufschaltung“) */
.hinweis-eintrag.hinweis-support { background: #7f1d1d; color: #fff; border-color: #ef4444; }
.hinweis-eintrag.hinweis-support b { color: #fff; }

/* 13.10.2026: Absicht + Anhänge im Chat, „Wie Helmut geantwortet hat“ (Funktionsmatrix §7.0) */
.cw-absichten { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 4px; }
.cw-absichten small { width: 100%; opacity: .7; }
.cw-absicht { border: 1px solid var(--border, rgba(255,255,255,.2)); border-radius: 999px; padding: 6px 12px; background: transparent; color: var(--text); font-size: 14px; min-height: 36px; }
.cw-absicht.an { background: var(--akzent, var(--gold)); color: #111; }
.chat-absicht-leiste { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 0; }
.cw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--akzent, var(--gold)) 22%, transparent); font-size: 13px; max-width: 100%; }
.cw-chip button { border: 0; background: transparent; color: inherit; min-width: 28px; min-height: 28px; cursor: pointer; }
.kw-quellen-kurz { margin-top: 8px; font-size: 13px; color: var(--text2); overflow-wrap: anywhere; }
.kw-quellen-kurz a { color: inherit; text-decoration: underline; }
.kern-weg { margin-top: 8px; font-size: 13px; opacity: .9; }
.kern-weg summary { cursor: pointer; }
.kern-weg .kw-zeile { margin-top: 6px; }
.kern-weg ol, .kern-weg ul { margin: 4px 0 0 18px; padding: 0; }
/* 16.10.2026 Plan 100 ZUSAMMENFUEHREN: Wege + weitere Moeglichkeiten unter der Antwort (Farben nur ueber Tokens) */
.mg-block { margin-top: 8px; font-size: 13px; color: var(--text2); }
.mg-hinweis { margin-bottom: 4px; font-style: italic; }
.mg-wege { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mg-weg { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--gold-soft); color: var(--text); }
.moeglichkeiten { margin-top: 6px; }
.moeglichkeiten summary { cursor: pointer; }
.mg-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.mg-item { overflow-wrap: anywhere; line-height: 1.4; }
.mg-art { display: inline-block; min-width: 72px; font-weight: 600; color: var(--text); }
.mg-vermutung .mg-art, .mg-vermutung .mg-text { font-style: italic; }
.mg-meta { opacity: .8; }
.mg-mehr { margin-top: 6px; }
.mg-netz { display: block; margin-top: 4px; opacity: .8; }

/* ══ 14.10.2026 EIN FENSTERSYSTEM (Architekt: „popups … auf diversen Endgeraeten nicht sauber … alle gleich"; MD 62 §60) ══
   Gilt fuer JEDES Fenster: .popup-overlay/.popup-box (Rueckfrage, Update, Code, DB-Satz, QR, Passwort, Willkommen),
   .ew-box-Widgets (Mikrofon-Hilfe, Ebene/Geraet) und das Lehrer-Terminal. Gleiche Ebene, Abdunklung, Breite, Rundung, Hoehe,
   Knopfzeile. Rechner/Tablet: Karte in der Mitte · Handy hoch: Blatt von unten · Handy quer: Blatt, max. 560 px breit.
   Die Ersteinrichtung (#einrichtung) bleibt Vollbild. Verhalten (Esc, Zurueck, Fokus, Tab) zentral in js/app.js „FENSTERWAECHTER". */
:root { --z-menue: 400; --z-leiste: 900; --z-fenster: 1100; --z-toast: 9999; --fenster-abdunkeln: rgba(0,0,0,.5); --fenster-r: 22px; }
html[data-theme=light] { --fenster-abdunkeln: rgba(20,24,36,.35); }
.popup-overlay:not(#einrichtung), .lt-huelle { z-index: var(--z-fenster); background: var(--fenster-abdunkeln); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  align-items: center; justify-content: center; box-sizing: border-box;
  padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
#einrichtung.popup-overlay { z-index: var(--z-fenster); }
.popup-overlay .popup-box, .popup-overlay:not(#einrichtung) .ew-box, .lt-huelle .lt-fenster {
  width: min(460px, 100%); max-width: 100%; height: auto; max-height: 100%; box-sizing: border-box;
  border-radius: var(--fenster-r); border: 1px solid var(--fenster-rand, var(--border)); overscroll-behavior: contain; }
.popup-overlay .popup-box { overflow-y: auto; }
.popup-overlay .popup-box.update-box { width: min(560px, 100%); }
.lt-huelle .lt-fenster { width: min(720px, 100%); }
body.fenster-offen { overflow: hidden; }
/* Knopfzeile: Abbrechen links, Hauptknopf rechts; bleibt beim Scrollen langer Fenster sichtbar */
.bestaetigen-knoepfe { flex-direction: row-reverse; justify-content: flex-start; }
.popup-box.einricht-box > :is(.bestaetigen-knoepfe, .mcp-knoepfe:last-child) { position: sticky; bottom: -24px; z-index: 1; margin: 8px -24px -24px;
  padding: 12px 24px 18px; background: var(--surface); border-top: 1px solid var(--border); }
@keyframes blattHoch { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .popup-overlay:not(#einrichtung), .lt-huelle { align-items: flex-end;
    padding: calc(8px + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .popup-overlay .popup-box, .popup-overlay:not(#einrichtung) .ew-box, .lt-huelle .lt-fenster {
    width: 100%; border-radius: var(--fenster-r) var(--fenster-r) 0 0; border-bottom: 0; animation: blattHoch .22s ease; }
  .popup-overlay .popup-box.einricht-box { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .lt-huelle .lt-fenster { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .popup-box.einricht-box > :is(.bestaetigen-knoepfe, .mcp-knoepfe:last-child) { bottom: calc(-24px - env(safe-area-inset-bottom, 0px));
    margin-bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .popup-box .bestaetigen-knoepfe > .btn { flex: 1 1 0; justify-content: center; min-height: 46px; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .popup-overlay .popup-box, .popup-overlay:not(#einrichtung) .ew-box, .lt-huelle .lt-fenster { width: min(560px, 100%); }
}

/* 18.10.2026 (MD 62 §63): Hilfe-Symbol je Abschnitt + Blase; Seitenhilfe im „?" — Tokens, hell/dunkel */
.abschnitt-hilfe { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; vertical-align: middle; padding: 0; }
.abschnitt-hilfe:hover, .abschnitt-hilfe:focus-visible { color: var(--text); border-color: var(--gold); }
.abschnitt-hilfe-blase { position: absolute; z-index: 9000; padding: 12px; border-radius: var(--r); background: var(--bg2, var(--bg)); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.abschnitt-hilfe-blase small, .hm-seite small { color: var(--text2); }
.hm-sprung { display: flex; flex-wrap: wrap; gap: 6px; }
/* 18.10.2026: Kopf-„?" zeigt das OFFENE (Pfad, Fenster, sichtbare Abschnitte); Allgemeines eingeklappt */
.hm-pfad { font-size: 14px; line-height: 1.4; }
.hilfe-liste { overflow-x: hidden; }
.hilfe-liste .hm-sprung .btn-zeile { white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.hm-abschnitte { display: grid; gap: 6px; }
.hm-abschnitt { display: grid; gap: 4px; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.hm-abschnitt > span, .hm-ab-titel { font-size: 13px; font-weight: 600; color: var(--text); }
.hm-ab-titel { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.hm-ab-titel:hover, .hm-ab-titel:focus-visible { color: var(--akzent, var(--gold)); }
.hm-abschnitt > p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text2); }
.hm-fragen { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; color: var(--akzent, var(--gold)); }
.hm-allgemein { border-top: 1px solid var(--border); padding-top: 6px; }
.hm-allgemein > summary { cursor: pointer; font-size: 13px; color: var(--text2); padding: 4px; }
.hm-routen { display: block; font-size: 11px; white-space: pre-wrap; word-break: break-all; color: var(--text2); }
.tabelle-scroll { overflow-x: auto; max-width: 100%; }
.hilfe-index { display: flex; flex-direction: column; gap: 4px; }
.hm-abschnitt > p.hm-wert { color: var(--text); font-weight: 500; }
/* 18.10.2026: dieselbe Abdunklung wie Nr 28 fuer die goldenen Hilfe-Links/Pfad im hellen Bild (≥ 3:1, MD 62 §39) */
html[data-theme=light] #hilfeListe .hm-fragen, html[data-theme=light] #hilfeListe .hm-pfad, html[data-theme=light] #hilfeListe .hm-ab-titel:hover { color: color-mix(in srgb, var(--akzent, var(--gold)) 55%, #000); }
/* 19.10.2026: Orientierungskarte als lebendes Bild (js/gk-szene.js) — Flaeche + Liste darunter. Nur Tokens. */
.gk-szene { position: relative; width: 100%; margin: 4px 0 10px; border-radius: var(--r-lg, 14px); overflow: hidden;
  background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%), color-mix(in srgb, var(--bg) 92%, var(--text2)); }
.gk-szene-flaeche { display: block; }
.gk-als-liste { margin-top: 6px; }
.gk-als-liste > summary { cursor: pointer; color: var(--text2); font-size: 13px; padding: 6px 0; }
.gk-als-liste[open] > summary { color: var(--text); }
/* 19.10.2026: Landschaft mehrerer Welten — breiter als der Bildschirm ⇒ seitlich schieben; Leiste „Weitere Welt" */
.gk-szene { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.gk-szene-flaeche { touch-action: pan-x; }
.gk-welt-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.gk-imp-tabelle { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.gk-imp-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gk-imp-tabelle th, .gk-imp-tabelle td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.gk-imp-tabelle th { color: var(--text2); font-weight: 600; position: sticky; top: 0; background: var(--bg); }
#gkImpText { margin-top: 8px; font-family: ui-monospace, monospace; font-size: 13px; }
/* 19.10.2026 (Architekt: „die Elemente sind in der Liste nicht gleich gross — ordentlich"): alle Kaestchen gleich breit und gleich hoch */
.gk-box { width: 196px; min-width: 0; max-width: 196px; min-height: 60px; justify-content: center; }
.gk-box b, .gk-box small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .gk-box { width: 100%; max-width: 100%; } }
.gk-ansicht { display: flex; align-items: center; gap: 8px; }
.gk-ansicht span { color: var(--text2); font-size: 13px; }
.gk-ansicht select { width: auto; min-width: 150px; }
.gk-zeile-knoepfe select { width: auto; min-width: 130px; }

/* 19.10.2026 Merk-Vorlage im Chat („Merke dir …"/„Lerne …"): wie, wie lange, Verfasser beim Wortlaut */
.merk-vorlage { max-width: min(560px, 100%); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.merk-vorlage .mv-inhalt { margin: 0; font-style: italic; color: var(--text-secondary, inherit); overflow-wrap: anywhere; }
.merk-vorlage .stufen-wahl { flex-wrap: wrap; }

/* ══ 20.10.2026 CHAT-ARTEN + LERNSTUFE ══
   Chat-Arten (EIN Chat mit Arten): Symbol vor jedem Chat im Verlauf, Art-Leiste (Baustein .thema-leiste + .stufen-chip) ueber dem
   Eingabefeld eines neuen Chats. Lernstufe: drei Balken eingereiht → aufgesagt → gelernt in der Lernauftrags-Tabelle (Einstellungen
   und KI trainieren) — dort mit dem Gewichts-Anker, sonst gewinnen die #settingsBody/#workspaceBody-Regeln. Farben nur aus Tokens. */
.chat-history-item .chat-art-symbol { display: inline-flex; flex: 0 0 auto; margin-right: 8px; color: var(--akzent, var(--gold)); }
.chat-history-item .chat-art-symbol .ico { width: 16px; height: 16px; }
.chat-art-chip { display: inline-flex; align-items: center; gap: 6px; }
.chat-art-chip .ico { color: var(--akzent, var(--gold)); }
.chat-art-chip.an .ico { color: currentColor; }
:is(.lern-stufen, #settingsBody #workspaceBody .x-nie) { display: flex; gap: 4px; margin: 6px 0 2px; max-width: 280px; }
:is(.lern-stufen .lern-stufe, #settingsBody #workspaceBody .x-nie) { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:is(.lern-stufen .lern-stufe i, #settingsBody #workspaceBody .x-nie) { display: block; height: 4px; border-radius: 2px; background: var(--border); }
:is(.lern-stufen .lern-stufe.an i, #settingsBody #workspaceBody .x-nie) { background: var(--akzent, var(--gold)); }
:is(.lern-stufen .lern-stufe em, #settingsBody #workspaceBody .x-nie) { font-style: normal; font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.lern-stufen .lern-stufe.jetzt em, #settingsBody #workspaceBody .x-nie) { color: var(--text); font-weight: 600; }
:is(.lern-stufen.fehler .lern-stufe i, #settingsBody #workspaceBody .x-nie) { background: var(--red); opacity: .55; }

/* ══ 24.10.2026 FE-KLEIN (Gruppe A, Klickpruefung S1) — nur Tokens, hell/dunkel ══ */
/* FE-TOOLTIP-HANDY / KM-M9: geschlossene Blasen sind unsichtbar UND fuer Vorlesehilfen weg (Bisher nur opacity 0 ⇒ blieb im Baum) */
.erklaer-blase:not(.an), .leisten-tipp:not(.an) { visibility: hidden; }
/* KM-M16: Gold im hellen Bild — Blasentitel #d4a843 auf Weiss 2,21:1 (gemessen); „+Zuwachs" im Gehirn; metallische Titel
   (html[data-glanz=metall]: Verlauf ab 45 % Weiss ⇒ „hellgoldene Titel"). Im hellen Bild derselbe Akzent abgedunkelt (wie Nr 28, MD 62 §39). */
html[data-theme=light] .erklaer-blase b, html[data-theme=light] .gl-plus { color: color-mix(in srgb, var(--akzent, var(--gold)) 55%, #000); }
html[data-glanz=metall][data-theme=light] :is(.settings-section-title, .app-hilfe-titel, .profile-name) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 55%, #000) 0%, color-mix(in srgb, var(--akzent) 40%, #000) 50%, color-mix(in srgb, var(--akzent) 55%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* KM-M10: „Mehr"-Eintraege linksbuendig wie Verlauf/Neuer Chat (Bisher space-between ⇒ Text rechts, Symbol links); schmale Leiste bleibt zentriert */
#gruppeMehr > .chat-history-item { justify-content: flex-start; gap: 10px; padding: 8px 12px; }
.app-shell.sb-zu #gruppeMehr > .chat-history-item { justify-content: center; gap: 0; padding: 10px 0; }
/* KM-M11: Hilfe-Fenster — „Für IT-Admin" wie „Allgemeine Hilfe" (Schrift 13 px, Nebenfarbe); beide auf der Inhaltskante (16 px) */
.hm-it > summary, .hm-allgemein > summary { cursor: pointer; font-size: 13px; color: var(--text2); }
.hm-it > summary { padding: 4px 0; }
.hm-allgemein > summary { padding: 4px 16px; }
.hm-it > summary:hover, .hm-allgemein > summary:hover, .hm-it[open] > summary, .hm-allgemein[open] > summary { color: var(--text); }
/* FE-CHATLEISTE-6B: das Art-Symbol neben „+" nur, wo ein Chat entsteht (Start, Chat); am Handy im Chat traegt die Chat-Leiste „Art" ⇒ nicht doppelt */
body:not(.fuss-klappbar) #chatArtKnopf, body.im-chatleiste #chatArtKnopf { display: none; }
/* KM-M15: Fussleisten-Beschriftung, die nicht passt, wird kleiner statt abgeschnitten (js/app.js fussleisteZeichnen setzt .eng) */
html .app-footer-tabs .tab-text.eng { font-size: 9.5px; letter-spacing: -.01em; }
/* KM-M12: Schalterzeilen und Hinweise im zweispaltigen Verbindungs-Formular ueber die ganze Breite (Bisher: zwei Schalter nebeneinander, Hinweis halb) */
.mcp-formular > .toggle-row, .mcp-formular > .settings-hint { grid-column: 1 / -1; }
/* FE-EIGENE-NR (W6, aus dem Klon-Stand 23.10. uebernommen): „Deine Nummer" im Blatt „Art des Chats" */
.chat-werkzeuge .chat-art-eigene { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px 0; font-size: 13px; color: var(--text2); }
.chat-werkzeuge .chat-art-eigene code { font-size: 13px; color: var(--text); word-break: break-all; }
/* W6 KX-1-BINDUNG: Marke „Absender geprueft / nicht geprueft" an Nachrichten einer Person (Kernfeld von_bindung); hell abgedunkelt wie KM-M16 */
.bindung-marke { display: inline-block; border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; line-height: 1.5; color: var(--text2); }
.bindung-marke.gut { color: var(--green); }
html[data-theme=light] .bindung-marke.gut { color: color-mix(in srgb, var(--green) 55%, #000); }
/* W6 Zustellstand am letzten eigenen Satz (Kern: zugestellt · abgelehnt · Konto unbekannt · abgewiesen) — gleiche Marke wie von_bindung */
.zustell-marke { justify-content: flex-end; }
.zustell-marke.offen { color: var(--text2); }
.zustell-marke.gut { color: var(--green); }
html[data-theme=light] .zustell-marke.gut { color: color-mix(in srgb, var(--green) 55%, #000); }
/* W7b Nr 54 (24.10.2026): Verlauf ist `.screen-scroll` (flex: 1, min-height: 0) — sind Chat-Ideen, Projekte und Mehr offen, schrumpfte er
   auf Hoehe 0 und war nicht mehr klickbar. Er behaelt jetzt eine eigene Mindesthoehe und scrollt in sich; die Seitenleiste scrollt darum herum. */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .app-shell > .sidebar-desktop > #chatHistory { flex: 1 0 auto; min-height: min(30vh, 16rem); max-height: 60vh; }
  /* W7b Nr 56: in der eingeklappten Symbolleiste (62 px) ragte die Unterzeile abgeschnitten hinein („martHome") — dort ausblenden;
     Impressum/Datenschutz/AGB bleiben ueber Einstellungen › Rechtliches erreichbar. */
  .app-shell.sb-zu .legal-zeile-seite { display: none; }
}