/* KLX-Erhebung – mobile-first Stylesheet */

:root {
  /* Farbwelt der Green Gesamtschule (green-gesamtschule.de):
     Tuerkisgruen als Leitfarbe, Mintgruen als Akzent, Weiss als Grundflaeche. */
  --teal: #00878d;
  --teal-dark: #006c71;
  --mint: #98cdaa;
  --mint-dark: #7fbd96;
  --mint-100: #e9f4ee;
  --mint-ink: #0a4f52;
  --bg: #f2f5f7;
  --card: #ffffff;
  --border: #e3e8ee;
  --text: #28303a;
  --muted: #6b7684;
  --radius: 6px;
  --shadow: 0 2px 6px rgba(16, 24, 40, .11), 0 1px 3px rgba(16, 24, 40, .07);
  --v1: #d32f2f;
  --v2: #f08c2a;
  --v3: #cdb21e;
  --v4: #2e9b4a;
  /* dunklere Varianten fuer Text auf weissem Grund (Kontrast) */
  --v1-ink: #c22a2a;
  --v2-ink: #b05a0a;
  --v3-ink: #7a690f;
  --v4-ink: #227a3a;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

body.modal-open { overflow: hidden; }

h1 { font-size: 1.45rem; margin: 2px 0; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 0; }
h4 { font-size: .9rem; margin: 12px 0 4px; color: var(--muted); }

a { color: var(--teal); }

.muted { color: var(--muted); }
.small { font-size: .84rem; }
.tiny  { font-size: .72rem; }

code {
  background: #eef1f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .85em;
}

/* --- Kopfleiste --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--mint);
  padding: 10px 16px;
  box-shadow: 0 2px 8px rgba(0, 60, 63, .24);
}

.brand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--mint-ink);
  text-decoration: none;
  letter-spacing: .02em;
}
.brand span { color: rgba(10, 79, 82, .55); font-weight: 500; margin-left: 3px; }

/* --- Benutzermenue (Dropdown rechts in der Leiste) --- */

/* Such-Icon in der Topbar: schiebt sich (und das Benutzermenue) nach rechts. */
.search-trigger {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--mint-ink);
  padding: 7px;
  border-radius: 6px;
}
.search-trigger:hover { background: rgba(255, 255, 255, .45); }
.usermenu { position: relative; }
.usermenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--mint-ink);
  font-weight: 700;
  font-size: .9rem;
  max-width: 60vw;
}
.usermenu-trigger:hover { background: rgba(255, 255, 255, .45); }
.usermenu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-caret { flex-shrink: 0; transition: transform .15s; }
.usermenu.open .usermenu-caret { transform: rotate(90deg); }

.usermenu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .2);
  padding: 6px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* Ein- und Ausfaden: sichtbar erst per .open, sonst weggeblendet. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease-out, transform .16s ease-out, visibility .16s;
  pointer-events: none;
}
.usermenu.open .usermenu-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.usermenu-panel form { margin: 0; }
.usermenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 5px;
  text-decoration: none;
}
.usermenu-item:hover { background: var(--mint-100); color: var(--teal-dark); }
.menu-icon { flex-shrink: 0; display: inline-flex; color: var(--muted); }
.usermenu-item:hover .menu-icon { color: inherit; }

/* --- Globale Suche (Overlay/Spotlight) --- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, .5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 14px 14px;
  animation: fadeIn .15s ease-out;
}
.search-overlay[hidden] { display: none; }
.search-box {
  width: 100%;
  max-width: 620px;
  max-height: calc(100dvh - 72px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .32);
  overflow: hidden;
  animation: searchIn .2s ease-out;
}
@keyframes searchIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* Ausblenden: Overlay und Box fahren wieder heraus (siehe closeSearch in app.js). */
.search-overlay.closing { animation: fadeOut .2s ease-in forwards; }
.search-overlay.closing .search-box { animation: searchOut .2s ease-in forwards; }
@keyframes searchOut { to { opacity: 0; transform: translateY(-10px); } }
.search-box-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.search-box-icon { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.search-box .search-input { flex: 1; border: none; padding: 8px 2px; font-size: 1.05rem; background: none; }
.search-box .search-input:focus { outline: none; }
.search-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 6px;
}
.search-close:hover { background: var(--mint-100); color: var(--teal-dark); }
.search-results-wrap { overflow-y: auto; padding: 8px 12px 12px; }
.search-results-wrap:empty { display: none; }

.container { max-width: 1080px; margin: 0 auto; padding: 16px 14px 70px; }

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 5px;
  padding: 10px 16px;
  min-height: 42px;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.btn:active { transform: scale(.98); }
/* Wird ein ausgegrauter Button aktiv (z. B. "Passwort setzen", "Zugangsdaten
   drucken"), pulst er kurz, um zu signalisieren, dass er als naechstes dran ist.
   Ausgeloest per JS (btn-enabled-flash), siehe app.js. */
@keyframes btnEnableFlash {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0, 135, 141, .5); }
  30%  { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(0, 135, 141, .3); }
  100% { transform: scale(1);    box-shadow: 0 0 0 12px rgba(0, 135, 141, 0); }
}
.btn.btn-enabled-flash { animation: btnEnableFlash .85s ease-out; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.btn:disabled:hover { background: var(--card); }
.btn-primary:disabled, .btn-primary:disabled:hover { background: var(--teal); }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 2px 5px rgba(0, 96, 100, .3); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.btn-secondary:hover { background: var(--bg); }
.btn-ghost { background: transparent; color: var(--teal); }
.btn-ghost:hover { background: var(--mint-100); }
/* Rote Variante fuer destruktive Aktionen (Loeschen). Kombinierbar mit
   .btn-ghost (rot ohne Rahmen) oder .btn-secondary (roter Rahmen). */
.btn-danger { color: #b3261e; border-color: #f3b4ae; }
.btn-danger:hover { background: #fdecea; border-color: #e0897f; color: #8f1d17; }
.btn-sm { min-height: 32px; padding: 5px 11px; font-size: .8rem; border-radius: 4px; }
.btn-block { width: 100%; }
.btn .icon { flex-shrink: 0; }
.btn-sm .icon { width: 13px; height: 13px; }

/* --- Karten --- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.class-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
  margin-bottom: 0;
}
.class-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .16); }
.class-name { font-size: 1.7rem; font-weight: 800; color: var(--teal); }
.year-card .class-name { font-size: 1.35rem; }
.class-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  align-items: flex-start;
  align-self: stretch;
}
.meta-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 600;
}
.meta-line .icon { flex-shrink: 0; }
/* Schuelerzahl des Jahrgangs unter „N. Jahrgang" (zentrierter Kopf). */
.year-student-count { margin: 6px 0 0; }

.empty-state { text-align: center; color: var(--muted); padding: 30px 16px; }

/* --- Seitenkopf --- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
}
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Kopf-Buttons einzeilig halten (sonst macht der lange PDF-Text "Auswertung
   Klasse 5A" die Klassenansicht-Buttons hoeher als die einzeiligen der
   Schueleransicht). Reicht der Platz nicht, bricht die ganze Aktionsleiste um. */
.page-actions .btn { white-space: nowrap; }
/* Klassenkopf: "Klasse 5A" und der Schuelerzaehler stehen in einer Zeile. */
.class-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Handlungsaufforderungen ("Bitte ... auswaehlen.") stehen zentriert. */
.page-head-center { justify-content: center; text-align: center; }
.page-head-center > div { width: 100%; }

/* Zurueck-Button: bleibt beim Scrollen unter der Topbar sichtbar.
   top liegt bewusst knapp UNTER der Ruheposition (Topbar ~55px +
   Container-Padding 16px + margin-top -8px ~= 64px), sodass der Button schon
   ab Scrollposition 0 durchgehend fixiert ist und beim Scrollen gar nicht
   erst wandert (kein Springen). */
.btn-back {
  position: sticky;
  top: 66px;
  z-index: 25;
  width: max-content;
  min-height: 38px;
  padding: 8px 14px;
  font-size: .9rem;
  /* Etwas nach links versetzt, damit der schwebende Zurueck-Button nicht buendig
     mit dem uebrigen Inhalt sitzt. */
  margin: -8px 0 12px -6px;
  /* Der schwebende Zurueck-Button hebt sich etwas staerker ab als der Rest. */
  box-shadow: 0 5px 14px rgba(0, 96, 100, .38);
}

/* --- Badges --- */

.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.badge-level { color: #fff; }
.badge-lg { font-size: 1.05rem; padding: 7px 18px; }
.badge-val { font-size: .74rem; padding: 2px 9px; }
.badge-ok { background: var(--teal); }
.badge-muted { background: #9aa5b1; }
.v1-bg { background: var(--v1); }
.v2-bg { background: var(--v2); }
.v3-bg { background: var(--v3); }
.v4-bg { background: var(--v4); }

/* --- Schuelerliste --- */

.student-list { display: flex; flex-direction: column; gap: 10px; }
/* Karten bauen sich in allen Ansichten gestaffelt von oben nach unten auf;
   --i = Position in der Liste (7 ms Versatz je Karte). fill-mode backwards
   haelt nur den Startzustand waehrend des Delays, danach gelten wieder die
   normalen Styles (Hover bleibt funktionsfaehig). */
.card-grid > .card,
.student-list .student-row,
.tab-panel .comp-card,
main > .card {
  animation: cardIn .3s ease-out backwards;
  animation-delay: min(calc(var(--i, 0) * 7ms), 600ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
}
/* Nach dem ersten Aufbau keine Einblend-Animation fuer nachgeladene
   Kompetenzbloecke - Bewerten tauscht den ganzen Block via HTMX aus. */
html.cards-settled .tab-panel .comp-card { animation: none; }

/* Blind-Bewertung: Hinweis statt Range, solange die Kategorie nicht
   vollstaendig selbst bewertet wurde (ADR-18). */
.blind-note { font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .card-grid > .card,
  .student-list .student-row,
  .tab-panel .comp-card,
  main > .card,
  .fade-in,
  .tab-panel.active,
  .flash,
  .modal-overlay,
  .modal,
  .modal-overlay.closing,
  .modal-overlay.closing .modal,
  .search-overlay,
  .search-box,
  .search-overlay.closing,
  .search-overlay.closing .search-box,
  .btn.btn-enabled-flash,
  .rate-btn.just-rated { animation: none; }
  .usermenu-panel { transition: none; }
  .usermenu-submenu, .usermenu-submenu:not([hidden]) { transition: none; }
  .stand-comp-body, .stand-comp summary::before { transition: none; }
}
/* Zurueck-/Vorwaerts-Navigation: Seite sofort zeigen, keine Aufbau-Animationen
   (Klasse wird im Layout-Head vor dem Rendern gesetzt). */
html.no-anim .card-grid > .card,
html.no-anim .student-list .student-row,
html.no-anim .tab-panel .comp-card,
html.no-anim main > .card,
html.no-anim .fade-in,
html.no-anim .tab-panel.active {
  animation: none;
}
.student-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 12px 14px;
  margin-bottom: 0;
  transition: transform .12s, box-shadow .12s;
}
.student-row:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(16, 24, 40, .14); }
.student-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.student-name { font-weight: 700; font-size: 1rem; }
.student-side { display: flex; align-items: center; gap: 12px; }

/* Fortschritts-Gauge (Bewertungsstand) im Spinner-Look */
.gauge { width: 44px; height: 44px; flex-shrink: 0; }
.gauge-bg { fill: none; stroke: var(--border); stroke-width: 3.6; }
.gauge-fill {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3.6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}
.gauge-text {
  font-size: 9px;
  font-weight: 700;
  fill: var(--muted);
  text-anchor: middle;
}

/* --- Stufenkarte / Pyramide --- */

.level-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.level-info { flex: 1; min-width: 220px; }
.level-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.level-value { margin: 8px 0; }

/* Klassenleitung je Nutzer (Benutzerverwaltung) */
.user-leitung { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.leitung-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.leitung-chips li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mint, #98cdaa);
  color: #17323f;
  border-radius: 999px;
  padding: 2px 6px 2px 10px;
  font-size: .82rem;
  font-weight: 600;
}
.chip-remove {
  background: rgba(23, 50, 63, .15);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 1;
  cursor: pointer;
  color: #17323f;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chip-remove:hover { background: rgba(178, 59, 59, .85); color: #fff; }
.leitung-add-select { font: inherit; font-size: .85rem; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--text); max-width: 160px; }

/* Stufe festlegen (nur Klassenleitung/Admin) */
.stage-set { margin: 6px 0 10px; }
.stage-set-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.stage-select {
  font: inherit;
  font-size: 1rem;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  max-width: 320px;
  width: 100%;
}
.stage-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.stage-hint { margin: 6px 0 0; }
/* Empfehlung „naechste Stufe": Dropdown und Hinweis nebeneinander. */
.stage-set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Achtung-/Empfehlungssymbol (Bernstein, klar von Teal und Heatmap getrennt). */
.stage-up-flag { display: inline-flex; align-items: center; color: #d97706; flex-shrink: 0; }
.stage-up-hint { gap: 6px; font-weight: 700; font-size: .9rem; }

.level-pyramid { width: min(52vw, 230px); }
.pyramid { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 5px rgba(16, 24, 40, .2)); }

.pyr { fill: var(--border); stroke: var(--card); stroke-width: 1.5; transition: fill .2s; }
.pyr.on { fill: var(--mint); }
.pyr.cur { fill: var(--teal); }
.pyr-line {
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.pyr-label {
  font-size: 9.5px;
  font-weight: 700;
  text-anchor: middle;
  fill: #fff;
  stroke: rgba(40, 52, 64, .45);
  stroke-width: .5;
  paint-order: stroke;
}
/* Beschriftung noch nicht erreichter Stufen: dunkel auf hellem Band */
.pyr-label.off {
  fill: #4d5866;
  stroke: rgba(255, 255, 255, .85);
}
.pyr-label-sm { font-size: 8px; }

.pyramid-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform .15s;
}
.pyramid-btn:hover { transform: scale(1.03); }

/* --- Grosses Stufenmodell (Modal) --- */

.stufenmodell-body { text-align: center; }
.stand-head-line { margin: 2px 0 10px; font-weight: 600; }
.stufenmodell { width: 100%; max-width: 640px; height: auto; margin: 0 auto; display: block; }
.sm-band { stroke: #fff; stroke-width: 2; }
.sm-s1 { fill: #a4cfa0; }
.sm-s2 { fill: #8ac2a8; }
.sm-s3 { fill: #5fafa8; }
.sm-s4 { fill: #3d9aa5; }
.sm-line { stroke: #0a4f52; stroke-width: 3.5; stroke-linecap: round; }
.sm-title {
  font-size: 21px;
  font-weight: 800;
  fill: #123c40;
  text-anchor: middle;
}
.sm-desc {
  font-size: 16.5px;
  fill: #16454a;
  text-anchor: middle;
}

/* --- Tabs --- */

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.tab-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 2px 6px rgba(0, 96, 100, .3); }
/* Erhebungsbereich-Auswahl auf der Schuelerseite (ersetzt die Tab-Buttons) */
.module-nav { margin: 16px 0 14px; }
.module-nav-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 5px;
}
.module-select {
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.module-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .18s ease-out; }

.module-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.module-meta { display: flex; gap: 10px; align-items: center; }

/* --- Kompetenzkarten und Items --- */

.comp-card { padding: 14px 16px; }
.comp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
/* min-height haelt den Kopf gleich hoch, egal ob der Blind-Hinweis (etwas
   hoeher) oder die freigegebene Skala gezeigt wird - sonst ruckt beim Freigeben
   die ganze Item-Liste (v. a. sichtbar am obersten Item). */
.comp-scale { flex: 1; min-width: 190px; max-width: 340px; min-height: 3rem; display: flex; flex-direction: column; justify-content: center; }

.item-list { display: flex; flex-direction: column; }
.item-row { padding: 12px 0 10px; border-top: 1px solid var(--border); }
.item-row:first-child { border-top: none; }
/* min-height reserviert die Hoehe der Aggregat-Spalte (Badge + "N Bewertungen"),
   damit die Zeile beim Bewerten nicht waechst, wenn das Aggregat erscheint
   (Blind-Bewertung) - sonst wuerde der Abstand zu den Buttons springen. */
.item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 42px; margin-bottom: 9px; }
.item-text { font-size: .94rem; line-height: 1.4; font-weight: 600; }
/* min-width reserviert die Breite der Aggregat-Spalte, damit die Frage-Spalte
   konstant breit bleibt und der Fragetext beim Erscheinen des Aggregats nicht
   umbricht (sonst wuerde sich der Abstand zu den Buttons aendern). */
.item-agg { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; min-width: 5.5rem; flex-shrink: 0; }

.rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rate-buttons { display: flex; gap: 8px; flex: 1; max-width: 330px; }
.rate-btn {
  flex: 1;
  min-height: 46px;
  min-width: 46px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  background: var(--card);
  cursor: pointer;
  transition: background .12s, color .12s, transform .1s;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
}
.rate-btn:active { transform: scale(.94); }
.rate-btn.htmx-request { opacity: .5; }
.rate-btn.v1 { border: 2px solid var(--v1); color: var(--v1-ink); }
.rate-btn.v2 { border: 2px solid var(--v2); color: var(--v2-ink); }
.rate-btn.v3 { border: 2px solid var(--v3); color: var(--v3-ink); }
.rate-btn.v4 { border: 2px solid var(--v4); color: var(--v4-ink); }
.rate-btn.v1.selected { background: var(--v1); color: #fff; }
.rate-btn.v2.selected { background: var(--v2); color: #2c3239; }
.rate-btn.v3.selected { background: var(--v3); color: #2c3239; }
.rate-btn.v4.selected { background: var(--v4); color: #fff; }

/* Feedback beim Speichern: die gewaehlte Zahl "poppt" kurz (mit leichtem
   Ueberschwingen). */
@keyframes ratePop {
  0% { transform: scale(1); }
  35% { transform: scale(1.24); }
  100% { transform: scale(1); }
}
.rate-btn.just-rated { animation: ratePop .34s cubic-bezier(.34, 1.56, .64, 1); }

.single-ratings-btn {
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-ratings-btn:hover { color: var(--teal-dark); }

/* Einzelbewertungen-Modal */
.ratings-student { margin: 0 0 2px; font-size: 1rem; }
.ratings-question { margin: 10px 0; font-weight: 600; line-height: 1.4; }
.ratings-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .9rem; }
.ratings-table th {
  text-align: left;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.ratings-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ratings-table tr:last-child td { border-bottom: none; }

/* --- Skalenkomponente --- */

.scale { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.scale-main { display: flex; align-items: center; gap: 10px; }
.scale-track {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 14px;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .12);
  /* blasse Heatmap 1-4 als Grundskala */
  background: linear-gradient(90deg, #f0baba, #fad9b8 33%, #eee5b4 66%, #b9dec3);
}
.scale-empty .scale-track { background: var(--border); }
.scale-range {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(30, 40, 50, .28);
  z-index: 1;
}
.scale-range-inner {
  height: 100%;
  /* volle Heatmap, per Breite/Versatz auf die Trackskala ausgerichtet */
  background: linear-gradient(90deg, var(--v1), var(--v2) 33%, var(--v3) 66%, var(--v4));
}
.scale-median {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: #232830;
  transform: translateX(-50%);
  z-index: 3;
}
.scale-mean {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #232830;
  transform: translate(-50%, -50%);
  z-index: 3;
}
/* Diagonaler Strich (unten-links nach oben-rechts) macht den Kreis zum
   Durchschnittszeichen (⌀) fuer den Mittelwert. */
.scale-mean::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  border-radius: 1px;
  background: #232830;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.scale-caption { display: block; }
/* Anzahl Schueler in der Skalen-Beschriftung: Symbol + Zahl statt des Wortes
   "Schueler" (geschlechtsneutral). Symbol etwas kleiner passend zur tiny-Zeile. */
.scale-count { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; }
.scale-count .icon { width: 13px; height: 13px; }

/* --- Erhebungsstand --- */

.stand-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stand-module { margin: 16px 0 6px; }
.stand-module-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin-bottom: 6px;
}

.stand-comp summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
}
.stand-comp summary::-webkit-details-marker { display: none; }
/* Aufklapp-Pfeil links vor dem Namen, damit der Wert-Badge rechts buendig mit
   dem Modulwert und den Item-Werten sitzt (nicht vom Pfeil nach links gedrueckt). */
.stand-comp summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .8rem;
  transition: transform .15s;
}
.stand-comp[open] summary::before { transform: rotate(90deg); }
.stand-comp-name { flex: 0 0 30%; min-width: 120px; font-weight: 700; font-size: .88rem; }
.stand-comp-scale { flex: 1; }

.stand-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 0 12px 10px;
  margin-left: 4px;
  border-left: 2px solid var(--border);
}
/* Kategorien animiert auf-/zuklappen. Die native <details>-Hoehe laesst sich
   browseruebergreifend (v. a. iOS Safari kann weder ::details-content noch
   interpolate-size animieren) nicht zuverlaessig animieren, darum steuert JS
   (app.js) die Hoehe des .stand-comp-body-Wrappers. Ohne JS bzw. bei reduzierter
   Bewegung klappt es unanimiert - kein Bruch. */
.stand-comp-body { overflow: hidden; }
.stand-comp.animating .stand-comp-body { transition: height .26s ease; }
/* Pfeil beim Zuklappen sofort zurueckdrehen (open bleibt bis Animationsende). */
.stand-comp.closing summary::before { transform: rotate(0deg); }
.stand-item-text { font-size: .83rem; margin-bottom: 4px; }

/* --- Modal --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn .15s ease-out;
}
.modal {
  background: var(--card);
  width: 100%;
  max-width: 780px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -6px 30px rgba(15, 23, 42, .25);
  animation: slideUp .22s ease-out;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 4px;
  flex-shrink: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 10px;
}
/* Die drei Tabs passen ins Modal - sichtbarer Overflow, damit die Button-
   Schatten nicht geklippt werden; nicht schrumpfen (nur der Body scrollt). */
.modal-tabs { padding: 4px 16px 8px; overflow: visible; flex-shrink: 0; }
.modal-body { padding: 4px 16px 14px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.modal-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Variante: immer zentriert (z. B. Stufenmodell), auch auf dem Handy */
.modal-overlay-center { align-items: center; padding: 16px; }
.modal-overlay-center .modal {
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, .32);
}

/* Stufenaufstiegs-Modal */
.modal-small { max-width: 460px; }
.levelup-body { text-align: center; padding: 20px 22px; }
.levelup-body .badge { margin-bottom: 12px; }
.levelup-body p { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.modal-foot-center { justify-content: center; }
.modal-foot-end { justify-content: flex-end; }

.ueber-body { padding: 6px 22px 18px; }
.ueber-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ueber-logo strong { font-size: 1.1rem; }
.ueber-body p { margin: 6px 0; }

/* --- Formulare --- */

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  font-size: .83rem;
  color: var(--muted);
  margin-bottom: 12px;
}
input[type="text"], input[type="password"], input[type="number"], select {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
input[type="file"] { font-size: .9rem; }
/* Kuerzel bestehen aus Grossbuchstaben: schon bei der Eingabe gross zeigen
   (JS setzt zusaetzlich den tatsaechlichen Wert auf Grossbuchstaben). */
.kuerzel-input { text-transform: uppercase; }
/* Passwortfeld mit "Erzeugen"-Button nebeneinander. */
.pw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pw-row .pw-input { flex: 1; min-width: 0; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.form-grid label { margin-bottom: 0; }
.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form { display: flex; gap: 6px; margin-top: 8px; }
.inline-form input { width: auto; min-width: 150px; }

details.inline-details, details.block-details { margin-top: 6px; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
.block-details summary { cursor: pointer; }
.inline-details summary { display: inline-flex; }

/* --- Passwort-Detailzeile (aufklappend) in der Benutzerverwaltung --- */
/* Die Zeile klappt animiert nach unten auf (0fr -> 1fr Grid-Trick). Solange
   sie geschlossen ist, verschwindet der Rahmen, damit keine leere Zeile bleibt. */
/* "Passwort"-Umschalter mit Chevron rechts: geschlossen zeigt es nach rechts,
   beim Oeffnen dreht es nach unten (in Richtung des aufgeklappten Inhalts). */
.pw-toggle::after {
  content: "";
  width: .5em;
  height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-.1em) rotate(-45deg);
  transition: transform .2s;
}
.pw-toggle[aria-expanded="true"]::after { transform: translateY(-.15em) rotate(45deg); }
/* .table-Praefix noetig, damit diese Regeln die gleich spezifische, aber spaeter
   notierte Regel `.table td { padding: 9px 10px }` schlagen - sonst behaelt die
   zugeklappte Detailzeile ihr Zellpadding und bleibt ~19px hoch, wodurch der
   Zeilentrenner versetzt wirkt. */
.table .pw-detail-row > td { padding: 0; border-bottom: 0; }
.pw-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.table .pw-detail-row.open > td { border-bottom: 1px solid var(--border); }
.pw-detail-row.open .pw-panel { grid-template-rows: 1fr; }
.pw-panel-inner { overflow: hidden; min-height: 0; }
.pw-form { padding: 12px 10px 14px; max-width: 460px; }
.pw-field-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pw-field-row .pw-input { flex: 1 1 160px; min-width: 0; }
.pw-form .hint { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
/* Anforderungs-Hinweis rot, solange das Passwort die Regel nicht erfuellt
   (JS toggelt pw-hint-invalid, siehe app.js). Kompound-Selektor, damit er den
   muted-Grundton in beiden Kontexten (Panel + Anlegen-Formular) schlaegt. */
.pw-hint.pw-hint-invalid { color: #b3261e; }
.pw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Statusmeldung der Passwort-/Anlege-Aktionen (leer -> keine Hoehe). */
.pw-status-wrap:empty { margin: 0; }
.pw-status-wrap { margin-top: 8px; }
.pw-status { font-size: .85rem; font-weight: 600; }
.pw-status-ok { color: var(--teal-dark); }
.pw-status-err { color: #b3261e; }
/* Passwort-Zeile im Anlegen-Formular ueber die volle Breite (eigene Zeile unter
   Kuerzel/Vorname/... ): Feld, Generieren, Kopieren und Hinweis nebeneinander. */
.pw-field-full { grid-column: 1 / -1; }
.pw-field-full .pw-row { align-items: center; }
.pw-field-full .pw-input { flex: 0 1 260px; }
.pw-field-full .pw-hint { margin: 0; }
/* Anlegen + „Zugangsdaten drucken" nebeneinander, Statuszeile darunter (volle Breite). */
.create-actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.create-status { grid-column: 1 / -1; }

/* --- Tabellen --- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.table-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-inactive { opacity: .55; }

/* --- Schueler-Livesuche (Verwaltung) --- */

.search-results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.search-empty { margin-top: 12px; }
.search-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
  transition: background .12s, border-color .12s;
}
.search-row:hover { background: var(--mint-100); border-color: var(--mint); }
.search-main { display: flex; flex-direction: column; gap: 2px; }
.search-name { font-weight: 700; }
.search-action { color: var(--teal); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* Gemeinsame Optik fuer Suchfelder (globale Suche + Verwaltung). */
.search-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.search-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

.check-label {
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.check-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
  flex-shrink: 0;
}

.import-result { margin-top: 12px; font-size: .9rem; }
.error-list { max-height: 220px; overflow: auto; font-size: .84rem; color: var(--muted); }
.item-master-list { font-size: .9rem; line-height: 1.55; margin: 4px 0 10px; }

/* --- Item-Verwaltung --- */

.module-name-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.module-name-edit input {
  flex: 1;
  min-width: 160px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card);
}
.module-name-edit input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }

.item-comp-head { margin: 16px 0 8px; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.item-edit-list { display: flex; flex-direction: column; gap: 8px; }
.item-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.item-edit .item-sort { width: 68px; flex-shrink: 0; }
.item-edit .item-text { flex: 1; min-width: 180px; }
.item-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.item-active input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); }
.item-edit-inactive .item-text { color: var(--muted); background: #f6f7f9; }
.item-text-field { grid-column: 1 / -1; }
.item-text-field input { width: 100%; }

/* --- Flash --- */

.flash {
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: .9rem;
  text-align: center;
  animation: fadeIn .2s ease-out;
}
.flash-ok { background: var(--mint-100); color: var(--teal-dark); border: 1px solid #bfe0cd; }
.flash-err { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c0; }

/* --- Login --- */

.login-wrap { min-height: 78dvh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; padding: 30px 26px; text-align: center; }
.login-logo h1 { margin: 10px 0 2px; font-size: 1.35rem; }
.login-card .form { text-align: left; margin-top: 20px; }

/* --- Animationen --- */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(28px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes slideDown { to { transform: translateY(32px); opacity: .3; } }
.fade-in { animation: fadeIn .2s ease-out; }
/* Neu freigegebene Kategorie beim Bewerten: Skala (inkl. Median/Mittelwert) und
   Item-Aggregate sanft einfaden statt hart erscheinen (Ausloesung in app.js). */
.reveal-fade { animation: fadeIn .45s ease-out; }

/* Modal-Ausblendung: Overlay blendet aus, Modal slidet nach unten raus */
.modal-overlay.closing { animation: fadeOut .22s ease-in forwards; }
.modal-overlay.closing .modal { animation: slideDown .25s ease-in forwards; }

/* --- Responsiv --- */

@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-actions .btn { flex: 1; }
  .comp-head { flex-direction: column; align-items: stretch; }
  .comp-scale { max-width: none; }
  .stand-comp summary { flex-wrap: wrap; }
  .stand-comp-name { flex: 1 1 auto; min-width: 0; }
  .stand-comp-scale { flex-basis: 100%; }
  .level-card { flex-direction: column; align-items: stretch; }
  .level-pyramid { width: min(70vw, 260px); margin: 0 auto; }
  /* Item-Editierzeile: Text auf eigene volle Zeile, Rest darunter. */
  .item-edit .item-text { flex-basis: 100%; min-width: 0; order: -1; }
}

@media (min-width: 700px) {
  .modal-overlay { align-items: center; padding: 24px; }
  .modal { border-radius: 8px; max-height: 86dvh; box-shadow: 0 16px 48px rgba(15, 23, 42, .32); }
  h1 { font-size: 1.7rem; }
}

/* --- Dark Mode ---
   Aktiv, sobald <html> die Klasse .dark-theme traegt. Die setzt app.js (bzw.
   ein Inline-Head-Skript gegen Flackern) anhand der Theme-Einstellung
   (Auto/Hell/Dunkel) und der OS-Vorgabe. Steht am Dateiende, damit die
   Selektor-Overrides (Topbar, Fehlerfarben ...) die Basisregeln schlagen.
   Variablen auf html.dark-theme wirken global (html ist :root). */
html.dark-theme {
  --bg: #10151b;
  --card: #1a212a;
  --border: #2c3742;
  --text: #e6eaef;
  --muted: #9aa5b1;
  --shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --teal: #1fa6ac;
  --teal-dark: #4fc4ca; /* Hover heller als die Grundfarbe */
  --mint: #4f9e78;      /* gruener Akzent (Pyramide/Chips) */
  --mint-dark: #438a68;
  --mint-100: #24313a;  /* subtiler dunkler Hover */
  --mint-ink: #d3ece0;
  --v1-ink: #f08a8a;
  --v2-ink: #eaa25a;
  --v3-ink: #cdb84e;
  --v4-ink: #64c07e;
}
/* Topbar dunkel-tuerkis statt hellem Mint. */
html.dark-theme .topbar { background: #12333a; }
html.dark-theme .brand span { color: rgba(211, 236, 224, .5); }
html.dark-theme code { background: #222b34; }
html.dark-theme .badge-muted { background: #3a4653; }
html.dark-theme .item-edit-inactive .item-text { background: #222b34; }
/* Nicht erreichte Pyramiden-Beschriftung: hell auf dunklem Band. */
html.dark-theme .pyr-label.off { fill: #aeb8c4; stroke: rgba(16, 22, 28, .7); }
/* Achtung-/Empfehlungssymbol etwas heller. */
html.dark-theme .stage-up-flag { color: #f0a83c; }
/* Rot fuer destruktive Aktionen und Fehlermeldungen aufhellen. */
html.dark-theme .btn-danger { color: #f08a82; border-color: #6e3a37; }
html.dark-theme .btn-danger:hover { background: #3a201f; border-color: #8a4a45; color: #f5a9a2; }
html.dark-theme .pw-status-err { color: #f0938c; }
html.dark-theme .flash-ok { border-color: #2f4a3e; }
html.dark-theme .flash-err { background: #351d1c; color: #f0938c; border-color: #5c302d; }

/* Theme-Untermenue im Benutzermenue. */
.usermenu-sub-caret { margin-left: auto; flex-shrink: 0; color: var(--muted); transition: transform .15s; }
.usermenu-sub-toggle[aria-expanded="true"] .usermenu-sub-caret { transform: rotate(90deg); }
/* Untermenue sanft auf-/zuklappen (max-height + Opacity). Es bleibt stets im
   Fluss (display:flex ueberschreibt die display:none-Vorgabe des [hidden]-
   Attributs), sodass der Uebergang laeuft; visibility haelt es im zugeklappten
   Zustand fuer Screenreader/Tastatur ausgeblendet. Der Zustand wird weiter ueber
   das [hidden]-Attribut gesteuert (app.js). max-height deckt die drei Optionen. */
.usermenu-submenu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .2s ease, opacity .16s ease, visibility 0s linear .2s;
}
.usermenu-submenu:not([hidden]) {
  max-height: 12rem;
  opacity: 1;
  visibility: visible;
  transition: max-height .2s ease, opacity .16s ease;
}
.usermenu-submenu .usermenu-item { padding-left: 20px; font-size: .9rem; }
.theme-option::after { content: "✓"; margin-left: auto; color: var(--teal); opacity: 0; }
.theme-option.active::after { opacity: 1; }

/* Weicher 700ms-Uebergang beim Wechsel Hell<->Dunkel: die View Transitions API
   (seit 2026 breit verfuegbar) blendet die alte gegen die neue Ansicht - GPU-
   beschleunigt. Ausgeloest in app.js ueber document.startViewTransition. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 700ms;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}