/* === Glassmorphism Components === */
/* Apple Vision-inspired glass panels, cards, pills */

/* --- Glass Panel (base for all floating panels) --- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.glass-sm {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
}

/* --- Glass Card --- */
.glass-card {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  transition: border-color 0.2s, transform 0.15s;
}
.glass-card:hover { border-color: var(--gold-soft); }
.glass-card:active { transform: scale(0.98); }

/* --- Status Pill --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}
.status-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-pill .dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-pill .dot.offline { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.status-pill .dot.thinking { background: var(--gold); animation: dotPulse 1.2s infinite; }
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- LLM Teacher Badge --- */
.llm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.llm-helmut { background: var(--gold-soft); color: var(--gold); }
.llm-claude { background: rgba(168,85,247,0.12); color: var(--purple); }
.llm-gpt { background: rgba(34,197,94,0.12); color: var(--green); }
.llm-gemini { background: rgba(59,130,246,0.12); color: var(--blue); }
.llm-deepseek { background: rgba(6,182,212,0.12); color: #06b6d4; }
.llm-local { background: var(--elevated); color: var(--text2); }

/* --- Button Styles --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--knopf-h);
  padding: var(--knopf-pad);
  border: none;
  border-radius: var(--knopf-radius);
  line-height: 1.2;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.btn:active { transform: scale(0.96); }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { opacity: 0.9; }
.btn-glass {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover { border-color: var(--gold-soft); }
.btn-ghost { background: none; color: var(--text2); }
.btn-ghost:hover { color: var(--gold); }
.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.btn-icon:hover { border-color: var(--gold); color: var(--gold); }
.btn-icon:active { transform: scale(0.92); }

/* --- Input Field --- */
.input-field {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 16px; /* >= 16px verhindert iOS Auto-Zoom */
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.input-field:focus { border-color: var(--gold); }
.input-field::placeholder { color: var(--text2); }

/* --- Toggle --- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border: none; }
.toggle-label { font-size: 14px; color: var(--text); }
.toggle-sw {
  width: 44px; height: 24px; border: 0; padding: 0; font: inherit; -webkit-appearance: none; appearance: none;   /* 14.10.2026: <button> (MD 62 §60) */
  background: var(--dim);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-sw.on { background: var(--green); }
.toggle-sw::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-sw.on::after { left: 22px; }

/* --- Toast --- */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  pointer-events: none;
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  animation: toastIn 0.3s ease, toastOut 0.3s 2.5s ease forwards;
}
@keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(8px); } to { opacity:1; transform: translateX(-50%); } }
@keyframes toastOut { to { opacity:0; transform: translateX(-50%) translateY(8px); } }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   02.10.2026 — WIDGET-FENSTER: EIN Baustein fuer ALLE Fenster der App (Architekt: „es gibt doch eigentlich ein Haupt-CSS, gerade
   wegen hell und dunkel — ich will nicht, dass jedes Fenster anders ausschaut, sondern einheitlich modern, mit sauberem
   Widget-Fenster-Gefuehl"). Werte nur aus den Token in base.css (--fenster-*, --knopf-*), darum hell und dunkel gleich gebaut.
   Regeln: (1) Jedes Fenster: gleiche Flaeche, gleicher Rand, gleiche Rundung, gleicher Innenabstand, leichter Schatten.
           (2) Innen keine zweite Flaeche — Unterteile nur durch eine Linie getrennt.
           (3) Knoepfe: eine Hoehe/Groesse (Grundform .btn oben); Gold = Haupt-Aktion, Glas = alles andere, Rot nur als Schrift.
           (4) Kacheln IN einem Fenster (Kaestchen, Bereiche) = Seitenhintergrund mit Rand.
   Fenster sind: .fenster · Einstellungs-Abschnitte (.profil-abschnitt) · Gehirn-Karten · Tools-Kacheln und -Detail.
   Bisher: dieselben Regeln eng in screens.css nur fuer die Einstellungen (Altfassung clone/recycle/vor_fenster_20261002_screens.css).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.fenster,
#settingsBody .settings-tab-content .profil-abschnitt,
#settingsBody .settings-tab-content:not(:has(.profil-abschnitt)),
#brainBody .glass-card,
#workspaceBody .workspace-item,
#workspaceBody .ws-detail .glass-card {
  background: var(--fenster-bg); border: 1px solid var(--fenster-rand); border-radius: var(--fenster-radius);
  box-shadow: var(--fenster-schatten); padding: var(--fenster-pad); margin: 0 0 var(--fenster-abstand); transform: none;
}
#settingsBody .settings-tab-content:has(.profil-abschnitt) { background: transparent; border: none; box-shadow: none; padding-left: 0; padding-right: 0; }
#settingsBody .settings-tab-content .profil-abschnitt { padding-top: 6px; }
#workspaceBody .workspace-item { margin: 0; }
#brainBody .gl-raster .glass-card, #brainBody .brain-grid .glass-card { margin: 0; }
/* Fenster im Fenster gibt es nicht: innere Abschnitte/Karten/Formulare nur durch eine Linie */
.fenster .fenster, .fenster .glass-card,
#settingsBody .settings-tab-content .profil-abschnitt .profil-abschnitt,
#settingsBody .settings-tab-content .glass-card.card-section,
#settingsBody .settings-tab-content .fk-karte, #settingsBody .settings-tab-content .gk-panel,
#settingsBody .settings-tab-content .ki-zugang, #settingsBody .settings-tab-content .kal-weg,
#settingsBody .settings-tab-content .fam-kopf, #workspaceBody .ws-detail .glass-card .glass-card {
  background: transparent; border: none; border-top: 1px solid var(--fenster-rand); border-radius: 0; box-shadow: none;
  padding: 14px 0 0; margin: 12px 0 0; transform: none;
}
/* Knoepfe in Fenstern: nie volle Breite auf grossem Bildschirm, links buendig */
.fenster .btn, #settingsBody .settings-tab-content .btn, #workspaceBody .ws-detail .btn, #brainBody .btn { width: auto; margin: 0; }
.mcp-formular .btn, .ki-zugang .btn, .kal-weg .btn, .fk-knopf, .gk-knopf-schmal { justify-self: start; align-self: flex-start; }
.btn.btn-zeile { min-height: var(--knopf-h); padding: var(--knopf-pad); font-size: 14px; }
.gk-gefahr, .btn-glass.gk-gefahr { color: var(--red) !important; border-color: color-mix(in srgb, var(--red) 40%, transparent) !important; }
.gk-leiste, .mcp-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
/* Kacheln in Fenstern */
.gk-box, .gk-bereich { background: var(--kachel-bg); border-radius: var(--knopf-radius); }
/* Felder einheitlich breit */
.fk-feld .input-field { max-width: var(--feld-max); }
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .fenster, #settingsBody .settings-tab-content .profil-abschnitt, #brainBody .glass-card, #workspaceBody .ws-detail .glass-card { padding: 14px; }
  .fk-knopf, .gk-knopf-schmal { width: 100%; }
}

/* 02.10.2026: METALLIC — Verlauf + Lichtkante + Glanz (html[data-glanz=metall]). Nur Flaechen, die den Akzent tragen. */
html[data-glanz=metall] :is(.btn-gold, .app-footer-send, .stufen-chip.an, .kopf-speichern.offen, .se-du .se-nr) {
  background: var(--metall); background-size: 160% 160%; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 12px color-mix(in srgb, var(--akzent) 30%, transparent);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25); position: relative; overflow: hidden;
}
html[data-glanz=metall] :is(.btn-gold, .app-footer-send, .stufen-chip.an, .kopf-speichern.offen)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 66%);
  transform: translateX(-130%); transition: transform 0.9s ease;
}
html[data-glanz=metall] :is(.btn-gold, .app-footer-send, .stufen-chip.an, .kopf-speichern.offen):hover::after { transform: translateX(130%); }
html[data-glanz=metall] :is(.balken-akzent, .setup-bar-fill) { background: var(--metall); }
html[data-glanz=metall] :is(.menue-liste .menue-eintrag.aktiv, .profile-nav-item:hover, .pz-zeile:hover) {
  background: var(--metall-weich); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
html[data-glanz=metall] .profile-avatar { border-color: transparent; background: var(--metall) border-box;
  box-shadow: inset 0 0 0 2px var(--bg), 0 2px 14px color-mix(in srgb, var(--akzent) 30%, transparent); }
html[data-glanz=metall] :is(.settings-section-title, .app-hilfe-titel, .profile-name) {
  background: var(--metall); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  html[data-glanz=metall] :is(.btn-gold, .app-footer-send, .stufen-chip.an, .kopf-speichern.offen)::after { transition: none; }
}

/* ═══ 02.10.2026: EINHEITLICHER AUFBAU ALLER EINSTELLUNGSSEITEN (MD 62 §16) ═══
   Seite (Titel + ein Satz) → Teile (je ein Fenster, EIN Teil je Ansicht) → Gruppen (kleiner Titel, Linie) → Zeilen. */
#settingsBody[data-teile] section.profil-abschnitt.teil:not(.aktiv) { display: none; }
.teil-leiste { margin: 0 0 var(--fenster-abstand); }
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine) {
  .app-shell:not(.sb-zu):has(.sidebar-desktop.zeigt-teile) #settingsBody .teil-leiste:not(.immer) { display: none; }
}
/* EIN Titel-Stil je Ebene: Seiten-/Teiltitel (h2) und Gruppentitel (kleine Grossschrift) — ueberall gleich */
#settingsBody h2.settings-section-title { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; letter-spacing: 0; }
#settingsBody .card-section-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin: 0 0 8px; }
/* ZEILE fuer jede Gruppe aus Titel + EINER Auswahl / einem kurzen Feld (+ optional Hinweis darunter) — alle Seiten */
#settingsBody .card-section:has(> select.input-field):not(:has(> :not(.card-section-title, select.input-field, .settings-hint, .settings-ki-form))),
#settingsBody .card-section:has(> .settings-ki-form):not(:has(> :not(.card-section-title, .settings-ki-form, .settings-hint))) {
  display: grid; grid-template-columns: 1fr minmax(180px, 300px); align-items: center; column-gap: 12px;
}
#settingsBody .card-section:has(> select.input-field):not(:has(> :not(.card-section-title, select.input-field, .settings-hint, .settings-ki-form))) > .card-section-title,
#settingsBody .card-section:has(> .settings-ki-form):not(:has(> :not(.card-section-title, .settings-ki-form, .settings-hint))) > .card-section-title {
  margin: 0; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text);
}
#settingsBody .card-section > .settings-hint { grid-column: 1 / -1; }
#settingsBody .card-section > select.input-field, #settingsBody .card-section > .settings-ki-form .input-field { margin: 0; min-height: var(--knopf-h); padding-top: 6px; padding-bottom: 6px; }
#settingsBody select.input-field { min-height: var(--knopf-h); }
@media (max-width: 560px) {
  #settingsBody .card-section:has(> select.input-field), #settingsBody .card-section:has(> .settings-ki-form) { grid-template-columns: 1fr; }
}

/* ═══ 03.10.2026: LUFT — Mindestabstaende zwischen Text, Balken und Knoepfen (Architekt: „Abstaende zu Balken und Buttons nochmal —
   teilweise zu wenig Luft"). Gemessen auf dem Handy: 65 Stellen < 8 px, sieben Muster. Zentral hier, nicht je Seite. ═══ */
:root { --luft: 10px; --luft-klein: 8px; }
/* 1 Teil-Leiste nicht am Seitentext */
#settingsBody .teil-leiste { margin-top: var(--luft); }
/* 2 Balken nicht am Wert darueber (Gehirn, Status) */
:is(.gl-balken, .areal-bar, .balken, progress) { margin-top: var(--luft-klein); }
/* 3 Schieberegler: Luft zur naechsten Bezeichnung */
#settingsBody input[type=range], .areal-slider { margin-top: 4px; margin-bottom: var(--luft); }
/* 4 Knoepfe untereinander */
#settingsBody :is(.card-section, .fenster, .profil-abschnitt, .settings-tab-content) > :is(.btn, .btn-zeile) + :is(.btn, .btn-zeile) { margin-top: var(--luft-klein); }
/* 5 Text/Feld/Zeile → Knopf oder Knopfleiste */
#settingsBody :is(p, .settings-hint, .stat-row, label, .fk-feld, .input-field, textarea, .settings-ki-form) + :is(.btn, .btn-zeile, .stufen-wahl, .gk-leiste, .mcp-knoepfe) { margin-top: var(--luft); }
/* 6 Knopf → Text */
#settingsBody :is(.btn, .btn-zeile, .stufen-wahl, .gk-leiste) + :is(p, .settings-hint, .stat-row) { margin-top: var(--luft); }
/* 7 Zeilen mit Knopf etwas hoeher */
#settingsBody .stat-row:has(.btn, .btn-zeile) { padding-top: 6px; padding-bottom: 6px; }

/* LUFT Nachtrag: Gruss-Woerter (Mein Profil) → Hinweis darunter (gemessen 0 px) */
#settingsBody .gruss-woerter + :is(p, .settings-hint) { margin-top: var(--luft); }

/* ═══ 03.10.2026: METALLIC AUCH IM HINTERGRUND (Architekt: „optimiere Metallic auch im Background mit rein").
   Nur bei html[data-glanz=metall]: Flaeche mit Glanzverlauf in der Akzentfarbe, Fenster mit Lichtkante + metallischem Rand.
   Alles aus Token (--akzent, --bg, --fenster-*) ⇒ gilt fuer jede Akzentfarbe, jeden Hintergrund, hell und dunkel. ═══ */
html[data-glanz=metall] body {
  background:
    radial-gradient(110% 60% at 15% -10%, color-mix(in srgb, var(--akzent) 16%, transparent) 0%, transparent 60%),
    radial-gradient(90% 50% at 100% 110%, color-mix(in srgb, var(--akzent) 10%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg) 90%, #ffffff) 0%, var(--bg) 38%, color-mix(in srgb, var(--bg) 88%, var(--akzent)) 100%) fixed,
    var(--bg);
  background-attachment: fixed;
}
html[data-glanz=metall] :is(.fenster, #settingsBody .settings-tab-content .profil-abschnitt, #settingsBody .settings-tab-content:not(:has(.profil-abschnitt)),
  #brainBody .glass-card, #workspaceBody .workspace-item, #workspaceBody .ws-detail .glass-card, .profil-kurz, .profile-header) {
  background-image: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, transparent 35%, transparent 70%, color-mix(in srgb, var(--akzent) 6%, transparent) 100%);
  border-color: color-mix(in srgb, var(--akzent) 28%, var(--fenster-rand));
  box-shadow: var(--fenster-schatten), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25);
}
html[data-glanz=metall][data-theme=light] :is(.fenster, #settingsBody .settings-tab-content .profil-abschnitt, #brainBody .glass-card, .profil-kurz, .profile-header) {
  background-image: linear-gradient(160deg, rgba(255,255,255,0.7) 0%, transparent 40%, color-mix(in srgb, var(--akzent) 8%, transparent) 100%);
}
html[data-glanz=metall] :is(.top-bar, .app-footer) { background-image: linear-gradient(180deg, rgba(255,255,255,0.05), transparent); border-color: color-mix(in srgb, var(--akzent) 22%, var(--border)); }
html[data-glanz=metall] .sidebar-desktop { background-image: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 6%, transparent), transparent 40%); }

/* ═══ 04.10.2026: EINHEITLICHKEIT NACHGEZOGEN (Architekt: „die anderen Seiten sind designtechnisch falsch — Einheitlichkeit“).
   Neue Bausteine der Verwaltung/Lernseiten auf dasselbe System wie „Mein Profil“: Gruppe = kleiner Titel + Linie, kein Fenster im Fenster,
   Kacheln = Kachelflaeche. Nur hier zentral, nicht je Seite. ═══ */
/* aufklappbare Gruppen (kz-block) = Gruppe mit Linie, Titel wie card-section-title */
#settingsBody section.profil-abschnitt .kz-block, #workspaceBody .ws-detail .kz-block {
  border-top: 1px solid var(--fenster-rand); padding: 12px 0 0; margin: 12px 0 0;
}
#settingsBody section.profil-abschnitt .kz-block > summary, #workspaceBody .ws-detail .kz-block > summary {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text2);
  list-style: none; display: flex; align-items: center; gap: 8px; padding: 4px 0 8px;
}
#settingsBody .kz-block > summary::-webkit-details-marker, #workspaceBody .kz-block > summary::-webkit-details-marker { display: none; }
#settingsBody .kz-block > summary::after, #workspaceBody .kz-block > summary::after { content: "›"; margin-left: auto; font-size: 16px; transition: transform .15s; }
#settingsBody .kz-block[open] > summary::after, #workspaceBody .kz-block[open] > summary::after { transform: rotate(90deg); }
#settingsBody .kz-block > summary label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--text); }
/* Zwischentitel in Fenstern = Gruppentitel */
#settingsBody section.profil-abschnitt :is(h3.fk-gruppe, h4.hb-unter), #workspaceBody :is(h3.fk-gruppe, h4.hb-unter) {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); opacity: 1;
  border-top: 1px solid var(--fenster-rand); padding-top: 14px; margin: 14px 0 8px;
}
/* Karten in Fenstern (Familien, Geraete, Nutzer-Anlegen) = keine zweite Flaeche */
/* 04.10.2026 berichtigt: nur in den Teilen der Verwaltung (section.profil-abschnitt) — Bisher galt es fuer ALLE Einstellungsseiten und
   liess die Karten der Schnittstellen-Seite ohne Rand ineinanderlaufen (Architekt: „Schnittstellen-Seite eine Katastrophe“). */
#settingsBody section.profil-abschnitt .glass-card.ki-karte {
  background: transparent; border: none; border-top: 1px solid var(--fenster-rand); border-radius: 0; box-shadow: none;
  padding: 14px 0 0; margin: 12px 0 0;
}
/* Tabellen und Editor im Fenster: Kachelflaeche statt eigenem Rahmen */
#settingsBody .vn-rahmen, #settingsBody .legal-vorschau { background: var(--kachel-bg); border: 1px solid var(--fenster-rand); border-radius: var(--knopf-radius); }
/* Auswahl-Kacheln (Helmut beibringen) = Kacheln wie Tools */
.hb-kachel { background: var(--kachel-bg); border-color: var(--fenster-rand); border-radius: var(--knopf-radius); min-height: var(--knopf-h); }
.hb-kachel.an { border-color: var(--akzent, var(--gold)); background: color-mix(in srgb, var(--akzent, var(--gold)) 14%, var(--kachel-bg)); }
.hb-nr { background: color-mix(in srgb, var(--akzent, var(--gold)) 18%, transparent); color: var(--akzent, var(--gold)); }
/* Zeilen-Knoepfe sind normale Knoepfe */
#settingsBody .btn.btn-ghost.btn-zeile { border: 1px solid var(--fenster-rand); }