/* ==========================================================================
   SAB-Lernen Design v2 – Komponenten (ui-components.css)

   Alle Klassen tragen das Präfix "ui-" und greifen nur dort, wo Templates sie
   ausdrücklich verwenden. Den Grundstil (Reset) setzt ui-base.css.
   Hover-Effekte stehen gesammelt am Ende unter @media (hover: hover),
   damit auf dem iPad nach dem Antippen nichts "kleben" bleibt.
   ========================================================================== */

/* ---------- App-Leiste ---------- */
.ui-appbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem clamp(.75rem, 3vw, 1.5rem);
  background: linear-gradient(120deg, #1f7fcb 0%, #2d8ed9 55%, #0a69b2 100%);
  color: #fff;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 14px 28px -20px rgba(6, 61, 105, .75);
}
.ui-brand { display: inline-flex; align-items: center; gap: .5rem; font: 800 1.15rem var(--ui-font-display); color: #fff; text-decoration: none; white-space: nowrap; }
.ui-brand-logo { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 12px; background: var(--ui-sun); box-shadow: 0 3px 0 var(--ui-sun-deep); font-size: 1.2rem; }
/* position: relative hält .ui-sr-only (z. B. Einsendungen-Zähler) im Scrollbereich der Leiste. */
.ui-subjects { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-block: .2rem; }
.ui-subjects::-webkit-scrollbar { display: none; }
.ui-subject { flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .35rem .85rem; border-radius: var(--ui-r-pill); color: #fff; text-decoration: none; font-weight: 800; font-size: .95rem; transition: background .2s; }
.ui-subject[aria-current="page"] { background: #fff; color: var(--ui-brand-deep); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.ui-bar-right { display: flex; align-items: center; gap: .45rem; flex: none; }
.ui-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: .3rem .8rem; border-radius: var(--ui-r-pill); background: rgba(255, 255, 255, .18); border: 0; color: #fff; font: 800 1rem var(--ui-font-display); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.ui-pill.is-bump { animation: ui-bump .45s var(--ui-spring); }
.ui-pill--alert { position: relative; }
.ui-pill-slot { display: contents; }
.ui-pill--alert::after { content: ""; position: absolute; top: 3px; right: 5px; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ui-coral); box-shadow: 0 0 0 2px #2d8ed9; animation: ui-ping 1.6s ease-out infinite; }
.ui-avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: var(--ui-grape); box-shadow: 0 3px 0 var(--ui-grape-deep); font: 800 1.05rem var(--ui-font-display); color: #fff; cursor: pointer; }
/* Touch-Ziele ≥ 44 px: Logo, Pillen und Avatar bleiben optisch klein, die Tippfläche wächst unsichtbar mit. */
.ui-appbar :is(.ui-brand, .ui-pill, .ui-avatar) { position: relative; }
.ui-appbar :is(.ui-brand, .ui-pill, .ui-avatar)::before { content: ""; position: absolute; inset: -5px; }
@media (max-width: 743px) {
  .ui-appbar { flex-wrap: wrap; }
  .ui-subjects { order: 3; flex-basis: 100%; }
  .ui-hide-narrow { display: none; }
}

/* ---------- Seitenrahmen & Typo ---------- */
/* App-Rahmen aus home.html / direct_url_wrapper.html: Navbar und Inhalt (#hx-content) im <main class="ui-shell"> */
.ui-shell { padding: 0 clamp(1rem, 3vw, 2.75rem) 1.5rem; }
#hx-content { padding-inline: 1rem; }
/* htmx-Lade-Anzeige (eigene Stile, da includeIndicatorStyles aus ist) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.ui-page { max-width: var(--ui-page-max); margin: 0 auto; padding-inline: 16px; padding-block: 1.25rem 5rem; display: grid; gap: var(--ui-gap-lg); color: var(--ui-ink); }
.ui-stack { display: grid; gap: var(--ui-gap-lg); }
.ui-stack--sm { display: grid; gap: .6rem; }
.ui-crumbs { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .92rem; font-weight: 700; color: var(--ui-ink-soft); }
.ui-crumbs a { color: var(--ui-ink-soft); text-decoration: none; padding: .15rem .5rem; border-radius: var(--ui-r-pill); }
.ui-crumbs-sep { opacity: .5; }
.ui-eyebrow { font: 800 .78rem var(--ui-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-brand-deep); }
.ui-h1 { margin: 0; font: 800 clamp(1.7rem, 4.5vw, 2.3rem)/1.1 var(--ui-font-display); text-wrap: balance; color: var(--ui-ink); }
.ui-h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font: 800 1.4rem/1.2 var(--ui-font-display); color: var(--ui-ink); }
.ui-h3 { margin: 0; font: 800 1.2rem/1.25 var(--ui-font-display); color: var(--ui-ink); }
.ui-emo { font-size: 1.15em; }
.ui-small { font-size: .9rem; font-weight: 700; color: var(--ui-ink-soft); }
.ui-num { font-family: var(--ui-font-display); font-variant-numeric: tabular-nums; }
.ui-fade { animation: ui-pop-in .4s var(--ui-spring) both; }
@media (min-width: 744px) {
  .ui-page { padding-block: 1.5rem 6rem; font-size: 1.1rem; }
}

/* ---------- Hero & Blob ---------- */
.ui-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  background: var(--ui-card);
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  box-shadow: var(--ui-shadow-card);
  animation: ui-pop-in .5s var(--ui-spring) both;
}
.ui-hero-body { min-width: 0; display: grid; gap: .45rem; }
.ui-blob {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-accent) 62%, #fff), var(--ui-accent));
  box-shadow: 0 6px 0 var(--ui-accent-deep);
  font-size: 3.2rem;
  animation: ui-float 4s ease-in-out infinite;
}
.ui-blob--sm { width: 3.6rem; height: 3.6rem; font-size: 1.8rem; box-shadow: 0 4px 0 var(--ui-accent-deep); animation: none; }
@media (max-width: 560px) {
  .ui-hero { grid-template-columns: 1fr; justify-items: start; }
  .ui-blob { width: 4.8rem; height: 4.8rem; font-size: 2.4rem; }
}
@media (min-width: 744px) {
  .ui-hero { padding: 1.5rem 1.75rem; }
  .ui-blob:not(.ui-blob--sm) { width: 7.5rem; height: 7.5rem; font-size: 3.7rem; }
}

/* ---------- Kennzahlen & Fortschritt ---------- */
.ui-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.ui-stat { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: var(--ui-r-pill); background: var(--ui-paper); border: 1.5px solid var(--ui-line); font: 700 .95rem var(--ui-font-display); font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.ui-stat.is-done { background: var(--ui-mint-soft); border-color: var(--ui-mint); color: var(--ui-mint-deep); }
/* display: block, weil Templates ui-meter auch als <span> setzen; inline greifen Höhe und Breite nicht. */
.ui-meter { display: block; height: .8rem; border-radius: var(--ui-r-pill); background: var(--ui-paper); border: 2px solid var(--ui-line); overflow: hidden; }
.ui-meter-bar { display: block; height: 100%; width: 0; border-radius: var(--ui-r-pill); background: linear-gradient(90deg, var(--ui-mint), color-mix(in srgb, var(--ui-mint) 60%, var(--ui-sun))); transition: width .9s var(--ui-spring); }
.ui-ring { display: grid; justify-items: center; gap: .15rem; --ui-ring-color: var(--ui-mint); }
.ui-ring-box { position: relative; display: grid; place-items: center; }
.ui-ring svg { width: 4.2rem; height: 4.2rem; transform: rotate(-90deg); }
.ui-ring-track { fill: none; stroke: var(--ui-line); stroke-width: 9; }
.ui-ring-value { fill: none; stroke: var(--ui-ring-color); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset 1.1s var(--ui-ease-out); }
.ui-ring-num { position: absolute; font: 800 .95rem var(--ui-font-display); font-variant-numeric: tabular-nums; }
.ui-ring-label { font-size: .78rem; font-weight: 800; color: var(--ui-ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.ui-ring--brand { --ui-ring-color: var(--ui-brand); }
.ui-ring--orange { --ui-ring-color: var(--ui-orange); }

/* ---------- Karten & Flächen ---------- */
.ui-card { display: grid; gap: .9rem; align-content: start; background: var(--ui-card); color: var(--ui-ink); border: 2px solid var(--ui-line); border-radius: var(--ui-r-card); padding: clamp(1rem, 3vw, 1.4rem); box-shadow: 0 6px 0 var(--ui-line); }
.ui-card > p { margin: 0; }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ui-card-title { display: flex; align-items: center; gap: .5rem; margin: 0; font: 800 1.45rem/1.2 var(--ui-font-display); }
.ui-card--link { text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .15s; }
.ui-card--link:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ui-line); }
.ui-well { padding: 1rem; border-radius: var(--ui-r-panel); background: var(--ui-paper); border: 2px solid var(--ui-line); }

.ui-callout { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--ui-r-panel); border: 2px solid var(--ui-line); background: var(--ui-paper); color: var(--ui-ink); }
.ui-callout-emo { font-size: 2rem; line-height: 1; }
.ui-callout-body { min-width: 0; display: grid; gap: .5rem; }
.ui-callout-body > * { margin: 0; }
.ui-callout-title { font: 800 1.08rem var(--ui-font-display); }
.ui-callout--merke { background: var(--ui-sun-soft); border-color: color-mix(in srgb, var(--ui-sun) 70%, transparent); }
.ui-callout--info { background: var(--ui-brand-soft); border-color: color-mix(in srgb, var(--ui-brand) 30%, transparent); }
.ui-callout--ok { background: var(--ui-mint-soft); border-color: color-mix(in srgb, var(--ui-mint) 45%, transparent); }
.ui-callout--warn { background: var(--ui-coral-soft); border-color: color-mix(in srgb, var(--ui-coral) 45%, transparent); }
.ui-callout--lock { background: var(--ui-grape-soft); border-color: color-mix(in srgb, var(--ui-grape) 35%, transparent); }

.ui-empty { display: grid; justify-items: center; gap: .6rem; padding: 1.25rem .5rem; text-align: center; }
.ui-empty-emo { font-size: 3rem; line-height: 1; animation: ui-float 4s ease-in-out infinite; }
.ui-empty > p { margin: 0; max-width: 40ch; font-weight: 700; }

/* ---------- Abzeichen, Medaillen, Auszeichnung ---------- */
.ui-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .6rem; border-radius: var(--ui-r-pill); font: 800 .8rem var(--ui-font-body); white-space: nowrap; background: var(--ui-paper); color: var(--ui-ink-soft); border: 1.5px solid var(--ui-line); }
/* Abzeichen als Link (z. B. Textprofil im Bericht): unsichtbar vergrößerte Tippfläche */
a.ui-badge { position: relative; }
a.ui-badge::before { content: ""; position: absolute; inset: -10px -4px; }
.ui-badge--done { background: var(--ui-mint-soft); color: var(--ui-mint-deep); border-color: color-mix(in srgb, var(--ui-mint) 40%, transparent); }
.ui-badge--started { background: var(--ui-sun-soft); color: #8a6200; border-color: color-mix(in srgb, var(--ui-sun) 60%, transparent); }
.ui-badge--new { background: var(--ui-grape-soft); color: var(--ui-grape-deep); border-color: color-mix(in srgb, var(--ui-grape) 35%, transparent); }
.ui-badge--info { background: var(--ui-brand-soft); color: var(--ui-brand-deep); border-color: color-mix(in srgb, var(--ui-brand) 30%, transparent); }
.ui-badge--draft { background: var(--ui-coral-soft); color: var(--ui-coral-deep); border-color: color-mix(in srgb, var(--ui-coral) 35%, transparent); }

.ui-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .75rem; }
.ui-medal { display: grid; justify-items: center; align-content: start; gap: .3rem; text-align: center; animation: ui-rise .45s var(--ui-spring) both; }
.ui-medal-coin { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--ui-sun-soft) 19%); border: 3px solid var(--ui-sun); box-shadow: 0 4px 0 var(--ui-sun-deep); font-size: 1.7rem; }
.ui-medal-name { font: 700 .82rem/1.2 var(--ui-font-body); }
.ui-medal.is-locked .ui-medal-coin { filter: grayscale(1); opacity: .45; border-color: var(--ui-line-deep); box-shadow: 0 4px 0 var(--ui-line-deep); }
.ui-medal.is-locked .ui-medal-name { color: var(--ui-ink-soft); }
.ui-medal.is-new .ui-medal-coin { animation: ui-glow-sun 1.6s ease-in-out 3; }

.ui-award { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-radius: var(--ui-r-panel); background: linear-gradient(110deg, var(--ui-sun-soft), #fff 60%); border: 2px solid var(--ui-sun); box-shadow: 0 5px 0 var(--ui-sun-deep); color: var(--ui-ink); animation: ui-drop-in .6s var(--ui-spring); }
.ui-award-emoji { font-size: 2.6rem; line-height: 1; animation: ui-spin-pop 1.4s var(--ui-spring); }
.ui-award-text { flex: 1 1 14rem; min-width: 0; }
.ui-award-title { display: block; font: 800 1.2rem var(--ui-font-display); }

/* ---------- Knöpfe ---------- */
.ui-btn {
  --ui-btn-bg: var(--ui-brand);
  --ui-btn-edge: var(--ui-brand-deep);
  --ui-btn-text: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3rem;
  padding: .55rem 1.3rem;
  border: 0;
  border-radius: var(--ui-r-pill);
  background: var(--ui-btn-bg);
  color: var(--ui-btn-text);
  box-shadow: 0 var(--ui-edge) 0 var(--ui-btn-edge);
  font: 800 1.06rem/1.2 var(--ui-font-display);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .15s;
}
.ui-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ui-btn-edge); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { --ui-btn-bg: var(--ui-line); --ui-btn-edge: var(--ui-line-deep); --ui-btn-text: var(--ui-ink-soft); cursor: not-allowed; }
.ui-btn--go { --ui-btn-bg: var(--ui-mint); --ui-btn-edge: var(--ui-mint-deep); }
.ui-btn--next { --ui-btn-bg: var(--ui-sun); --ui-btn-edge: var(--ui-sun-deep); --ui-btn-text: var(--ui-ink); }
.ui-btn--soft { --ui-btn-bg: var(--ui-card); --ui-btn-edge: var(--ui-line-deep); --ui-btn-text: var(--ui-ink); border: 2px solid var(--ui-line-deep); }
.ui-btn--grape { --ui-btn-bg: var(--ui-grape); --ui-btn-edge: var(--ui-grape-deep); }
.ui-btn--danger { --ui-btn-bg: var(--ui-coral); --ui-btn-edge: var(--ui-coral-deep); }
.ui-btn--small { min-height: 2.75rem; padding: .3rem .95rem; font-size: .95rem; box-shadow: 0 3px 0 var(--ui-btn-edge); }
.ui-btn--large { min-height: 3.6rem; padding: .7rem 1.7rem; font-size: 1.2rem; }
.ui-btn .htmx-indicator, .ui-btn .ui-spinner { display: none; }
.ui-btn.htmx-request .htmx-indicator, .ui-btn.htmx-request .ui-spinner, .ui-btn.is-loading .ui-spinner { display: inline-block; }
.ui-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ui-actions--end { justify-content: flex-end; }
.ui-actions--center { justify-content: center; }

/* ---------- Auswahl ---------- */
.ui-segmented { display: inline-flex; gap: .15rem; padding: .2rem; border-radius: var(--ui-r-pill); background: var(--ui-paper); border: 2px solid var(--ui-line); }
/* Links im Segmentfeld (Filter, die die Seite neu laden) markieren die Auswahl mit aria-current. */
.ui-segmented button, .ui-segmented a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; min-height: 2.75rem; padding: .3rem .95rem; border: 0; border-radius: var(--ui-r-pill); background: none; font-weight: 800; font-size: .92rem; cursor: pointer; color: var(--ui-ink-soft); transition: background .2s, color .2s; }
.ui-segmented button[aria-pressed="true"], .ui-segmented a[aria-current="page"] { background: var(--ui-card); color: var(--ui-brand-deep); box-shadow: 0 2px 0 var(--ui-line-deep); }
.ui-segmented--icons button { display: grid; place-items: center; min-width: 3rem; min-height: 2.75rem; padding: .2rem .6rem; font-size: 1.45rem; line-height: 1; }
.ui-segmented--icons button[aria-pressed="true"] { box-shadow: 0 3px 0 var(--ui-line-deep), inset 0 0 0 2px var(--ui-brand); }

.ui-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.9rem; padding: .4rem .9rem; border: 2px solid var(--ui-line); border-radius: var(--ui-r-chip); background: var(--ui-card); box-shadow: 0 4px 0 var(--ui-line-deep); font-weight: 800; color: var(--ui-ink); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .15s, background .15s; }
.ui-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ui-line-deep); }
.ui-chip[aria-pressed="true"] { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.ui-chip-rank { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 9px; background: var(--ui-sun-soft); color: #8a6200; font: 800 .95rem var(--ui-font-display); }

.ui-switch { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .3rem .8rem .3rem .4rem; border: 2px solid var(--ui-line); border-radius: var(--ui-r-pill); background: var(--ui-card); color: var(--ui-ink); font-weight: 800; cursor: pointer; }
.ui-switch-knob { position: relative; width: 2.3rem; height: 1.35rem; border-radius: var(--ui-r-pill); background: var(--ui-line-deep); transition: background .2s; }
.ui-switch-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: #fff; transition: transform .25s var(--ui-spring); }
.ui-switch[aria-pressed="true"] .ui-switch-knob { background: var(--ui-mint); }
.ui-switch[aria-pressed="true"] .ui-switch-knob::after { transform: translateX(.95rem); }

/* ---------- Formulare ---------- */
.ui-field { display: grid; gap: .35rem; }
.ui-label { font: 800 .95rem var(--ui-font-body); color: var(--ui-ink); }
.ui-help { font-size: .85rem; font-weight: 600; color: var(--ui-ink-soft); }
.ui-field-error { font-size: .88rem; font-weight: 700; color: var(--ui-coral-deep); }
.ui-input, .ui-textarea, .ui-select {
  width: 100%;
  min-height: 3rem;
  padding: .5rem .85rem;
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-chip);
  background: var(--ui-card);
  color: var(--ui-ink);
  font: 700 max(16px, 1rem)/1.4 var(--ui-font-body); /* ≥16px: iOS zoomt beim Fokus nicht */
  transition: border-color .15s, box-shadow .15s;
}
.ui-textarea { min-height: 7rem; resize: vertical; }
.ui-input:focus, .ui-textarea:focus, .ui-select:focus { outline: none; border-color: var(--ui-brand); box-shadow: 0 0 0 4px var(--ui-brand-soft); }
.ui-field.has-error .ui-input, .ui-field.has-error .ui-textarea, .ui-field.has-error .ui-select { border-color: var(--ui-coral); }
.ui-check { width: 1.4rem; height: 1.4rem; accent-color: var(--ui-brand); }
/* Django setzt die Widget-Klasse bei Mehrfach-Kästchen auch an den umgebenden <div>. */
div.ui-check { width: auto; height: auto; display: grid; gap: .3rem; }
.ui-drop { display: grid; justify-items: center; gap: .5rem; padding: 1.5rem 1rem; border: 2.5px dashed var(--ui-line-deep); border-radius: var(--ui-r-panel); background: var(--ui-paper); text-align: center; font-weight: 700; cursor: pointer; }
.ui-drop.is-over { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.ui-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }

/* ---------- Tabellen ---------- */
/* position: relative hält absolut positionierte Kinder (z. B. .ui-sr-only) im Scrollbereich der Tabelle. */
.ui-table-wrap { position: relative; overflow-x: auto; border: 2px solid var(--ui-line); border-radius: var(--ui-r-panel); background: var(--ui-card); }
.ui-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.ui-table th { padding: .7rem .9rem; background: var(--ui-paper); font: 800 .82rem var(--ui-font-body); letter-spacing: .05em; text-transform: uppercase; text-align: left; color: var(--ui-ink-soft); white-space: nowrap; }
.ui-table td { padding: .7rem .9rem; height: 3rem; border-top: 1.5px solid var(--ui-line); vertical-align: middle; }

/* ---------- Menü, Dialog, Aufklapper ---------- */
.ui-menu { position: absolute; z-index: 50; min-width: 14rem; padding: .4rem; border-radius: var(--ui-r-panel); background: var(--ui-card); border: 2px solid var(--ui-line); box-shadow: 0 20px 40px -20px rgba(10, 40, 80, .45); animation: ui-pop-in .25s var(--ui-spring); }
.ui-menu-item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 3rem; padding: .4rem .8rem; border: 0; border-radius: 12px; background: none; color: var(--ui-ink); font-weight: 800; text-align: left; text-decoration: none; cursor: pointer; }
.ui-dialog { width: min(32rem, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--ui-r-card); background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 30px 60px -20px rgba(10, 40, 80, .5); }
.ui-dialog[open] { animation: ui-pop-in .35s var(--ui-spring); }
.ui-dialog::backdrop { background: rgba(22, 58, 95, .35); backdrop-filter: blur(3px); }
.ui-dialog-body { display: grid; gap: .9rem; padding: 1.25rem; }
.ui-dialog-body > p { margin: 0; }
.ui-dialog-title { margin: 0; font: 800 1.35rem var(--ui-font-display); }
.ui-disclosure { border: 2px solid var(--ui-line); border-radius: var(--ui-r-panel); background: var(--ui-card); }
.ui-disclosure > summary { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .6rem 1rem; font-weight: 800; cursor: pointer; list-style: none; }
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::after { content: "▾"; margin-left: auto; transition: transform .25s var(--ui-spring); }
.ui-disclosure[open] > summary::after { transform: rotate(180deg); }

/* ---------- Lade-Zustände ---------- */
.ui-spinner { display: inline-block; width: 1.1em; height: 1.1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; vertical-align: middle; }
/* Ladeschutz (sab-ui.js): Kacheln und Links bekommen einen großen Spinner mittig über dem Inhalt */
[data-ui-ladend] { pointer-events: none; }
[data-ui-ladend]:not(.ui-btn) { position: relative; }
[data-ui-ladend]:not(.ui-btn) > [data-ui-ladeschutz] { position: absolute; inset: 0; margin: auto; width: 2.4rem; height: 2.4rem; border-width: 5px; border-color: var(--ui-brand); border-right-color: transparent; background: var(--ui-card); box-shadow: 0 0 0 6px var(--ui-card), var(--ui-shadow-card); }
/* Ladeschutz mit data-ui-ladetext: lange Aktionen (z. B. Kapitel löschen) verdecken die Seite mit einem Hinweis */
.ui-lade-overlay { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ui-ink) 35%, transparent); }
.ui-lade-overlay[hidden] { display: none; }
.ui-lade-karte { display: grid; justify-items: center; gap: .8rem; max-width: 22rem; padding: 1.4rem 1.6rem; border-radius: var(--ui-r-card); background: var(--ui-card); box-shadow: var(--ui-shadow-card); font: 800 1.1rem var(--ui-font-display); text-align: center; color: var(--ui-ink); }
.ui-lade-karte .ui-spinner { width: 2.6rem; height: 2.6rem; border-width: 5px; color: var(--ui-brand); }
.ui-skeleton { display: grid; gap: .6rem; }
.ui-skeleton-bar { height: 1rem; border-radius: var(--ui-r-pill); background: var(--ui-line); animation: ui-skeleton 1.4s ease-in-out infinite; }
.ui-skeleton-bar--title { height: 1.6rem; width: 60%; }

/* ---------- Lehrkraft-Leiste ---------- */
.ui-admin-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .75rem; border: 2px dashed color-mix(in srgb, var(--ui-grape) 45%, transparent); border-radius: 14px; background: var(--ui-grape-soft); font-size: .9rem; color: var(--ui-ink); }
.ui-admin-bar-label { font-weight: 800; color: var(--ui-grape-deep); margin-right: .25rem; }

/* ---------- Effekte (von sab-fx.js erzeugt) ---------- */
.ui-toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: calc(100% - 32px); padding: .7rem 1.1rem; border-radius: 16px; background: var(--ui-ink); color: #fff; font: 700 1rem var(--ui-font-body); transform: translateX(-50%); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); animation: ui-toast-in .35s var(--ui-spring); }
.ui-fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.ui-spark { position: fixed; z-index: 61; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; }
.ui-flystar { position: fixed; z-index: 62; font-size: 1.8rem; line-height: 1; pointer-events: none; }
.ui-plus { position: fixed; z-index: 62; pointer-events: none; font: 800 1.1rem var(--ui-font-display); color: var(--ui-sun-deep); text-shadow: 0 2px 0 #fff; }
.is-bump { animation: ui-bump .45s var(--ui-spring); }
.is-wiggle { animation: ui-shake .45s ease; }
.is-tada { animation: ui-tada 1s ease; }

/* ---------- Hover nur mit Maus/Trackpad ---------- */
@media (hover: hover) {
  .ui-subject:hover { background: rgba(255, 255, 255, .16); }
  .ui-subject[aria-current="page"]:hover { background: #fff; }
  .ui-crumbs a:hover { background: var(--ui-card); color: var(--ui-brand-deep); }
  .ui-btn:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-2px); box-shadow: 0 calc(var(--ui-edge) + 2px) 0 var(--ui-btn-edge); filter: brightness(1.05); }
  .ui-btn--small:hover:not(:disabled) { box-shadow: 0 5px 0 var(--ui-btn-edge); }
  .ui-card--link:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ui-line-deep); border-color: var(--ui-accent); }
  .ui-chip:hover { transform: translateY(-2px); border-color: var(--ui-brand); }
  .ui-menu-item:hover { background: var(--ui-paper); }
}

/* Fachwort (Tab._parse_fachwoerter) und sein Popup (sab-ui.js) */
.ui-fachwort {
  display: inline;
  margin: 0;
  padding: 0 .1em;
  border: 0;
  border-bottom: 2px dotted var(--ui-brand);
  border-radius: 4px;
  background: transparent;
  color: var(--ui-brand-deep);
  font: inherit;
  font-weight: 800;
  cursor: help;
  touch-action: manipulation;
}
.ui-fachwort[aria-expanded="true"] { background: var(--ui-brand-soft); }
.ui-fachwort-popup {
  position: absolute;
  z-index: 1000;
  max-width: min(20rem, calc(100vw - 16px));
  padding: .7rem .9rem;
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-chip);
  background: var(--ui-card);
  box-shadow: 0 5px 0 var(--ui-line-deep), 0 18px 30px -18px rgba(10, 60, 110, .45);
  color: var(--ui-ink);
  font: 600 1rem/1.4 var(--ui-font-body);
  animation: ui-pop-in .25s var(--ui-spring);
}

/* ---------- Fließtext aus dem Editor (Tab-Inhalt der Lehrkraft) ---------- */
.ui-prose { max-width: 68ch; display: grid; gap: .9rem; font-size: 1.08rem; line-height: 1.6; color: var(--ui-ink); overflow-wrap: break-word; }
.ui-prose > * { margin: 0; }
.ui-prose :is(h1, h2, h3, h4) { margin: .4rem 0 0; font-family: var(--ui-font-display); font-weight: 800; line-height: 1.2; color: var(--ui-ink); }
.ui-prose h1 { font-size: 1.5rem; }
.ui-prose h2 { font-size: 1.35rem; }
.ui-prose h3 { font-size: 1.2rem; }
.ui-prose h4 { font-size: 1.08rem; }
.ui-prose p { margin: 0; }
.ui-prose :is(ul, ol) { display: grid; gap: .3rem; margin: 0; padding-left: 1.3rem; }
.ui-prose ul { list-style: disc; }
.ui-prose ol { list-style: decimal; }
.ui-prose li::marker { color: var(--ui-brand); font-weight: 800; }
.ui-prose a:not(.ui-btn) { color: var(--ui-brand-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ui-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.ui-prose :is(iframe, video) { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; }
.ui-prose mark { background: var(--ui-sun-soft); color: inherit; padding: 0 .2rem; border-radius: 4px; }
.ui-prose blockquote { margin: 0; padding: .9rem 1rem; border-radius: var(--ui-r-panel); background: var(--ui-sun-soft); border: 2px solid color-mix(in srgb, var(--ui-sun) 70%, transparent); }
.ui-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ui-prose :is(th, td) { padding: .45rem .7rem; border: 2px solid var(--ui-line); text-align: left; vertical-align: top; }
.ui-prose th { background: var(--ui-paper); font-weight: 800; }
.ui-prose hr { border: 0; border-top: 2px dashed var(--ui-line-deep); }
.ui-prose pre { overflow-x: auto; padding: .8rem; border-radius: 12px; background: var(--ui-paper); }

/* ==========================================================================
   Anmelde-Seiten (Schüler-Code-Login, Lehrkräfte-Login, Abmelden)
   ========================================================================== */
.ui-auth {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  padding-inline: 16px;
  padding-block: calc(2rem + env(safe-area-inset-top, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 12% 10%, rgba(31, 127, 203, .12), transparent 34%),
    radial-gradient(circle at 88% 85%, rgba(124, 92, 255, .10), transparent 32%),
    radial-gradient(circle at 85% 12%, rgba(255, 197, 49, .14), transparent 26%),
    var(--ui-paper);
  color: var(--ui-ink);
  font-size: 1.06rem;
  overflow-x: hidden;
}
@media (min-width: 744px) { .ui-auth { font-size: 1.1rem; } }

.ui-auth-card {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  padding: clamp(1.5rem, 5vw, 2.4rem);
  text-align: center;
  background: var(--ui-card);
  border: 2px solid var(--ui-line);
  border-radius: 28px;
  box-shadow: var(--ui-shadow-card);
  animation: ui-pop-in .5s var(--ui-spring) both;
}
.ui-auth-card .ui-blob { width: 6rem; height: 6rem; font-size: 3rem; }
.ui-auth-head { display: grid; gap: .3rem; }
.ui-auth-title { margin: 0; font: 800 clamp(1.7rem, 5vw, 2.1rem)/1.15 var(--ui-font-display); text-wrap: balance; }
.ui-auth-sub { margin: 0; color: var(--ui-ink-soft); font-weight: 700; }
.ui-auth-form { width: 100%; display: grid; gap: 1rem; text-align: left; }
.ui-auth-form .ui-btn { width: 100%; }
.ui-auth-foot { display: grid; gap: .6rem; justify-items: center; width: 100%; padding-top: .4rem; border-top: 2px dashed var(--ui-line); }
.ui-auth-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem .9rem; border-radius: var(--ui-r-pill); color: var(--ui-brand-deep); font-weight: 800; text-decoration: none; }
.ui-auth .ui-callout { width: 100%; text-align: left; }
.ui-auth .ui-callout.is-wiggle { animation: ui-shake .45s ease; }

/* Großes Code-Feld (Login-Code bis 8 Ziffern, variable Länge) */
.ui-code-input {
  width: 100%;
  min-height: 4.2rem;
  padding: .5rem 1rem;
  border: 3px solid var(--ui-line);
  border-radius: 20px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font: 800 clamp(1.8rem, 7vw, 2.3rem)/1 var(--ui-font-display);
  letter-spacing: .3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 3px 0 rgba(10, 60, 110, .06);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ui-code-input::placeholder { color: var(--ui-line-deep); letter-spacing: .3em; }
.ui-code-input:focus { outline: none; border-color: var(--ui-brand); background: var(--ui-card); box-shadow: 0 0 0 5px var(--ui-brand-soft); }
.ui-code-input.is-wrong { border-color: var(--ui-coral); animation: ui-shake .45s ease; }

/* Passwortfeld mit Anzeigen-Knopf */
.ui-input-wrap { position: relative; }
.ui-input-wrap .ui-input { padding-right: 3.4rem; }
.ui-input-reveal { position: absolute; top: 50%; right: .3rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 12px; background: none; font-size: 1.25rem; cursor: pointer; transform: translateY(-50%); }
.ui-input-reveal[aria-pressed="true"] { background: var(--ui-brand-soft); }

/* Schwebende Deko-Emojis im Hintergrund (nur Zierde, aria-hidden) */
.ui-auth-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ui-auth-deco span { position: absolute; font-size: clamp(2rem, 6vw, 3.4rem); opacity: .55; animation: ui-float 6s ease-in-out infinite; }
.ui-auth-deco span:nth-child(1) { top: 9%;  left: 7%;  animation-delay: 0s; }
.ui-auth-deco span:nth-child(2) { top: 16%; right: 9%; animation-delay: -1.5s; }
.ui-auth-deco span:nth-child(3) { bottom: 14%; left: 10%; animation-delay: -3s; }
.ui-auth-deco span:nth-child(4) { bottom: 9%; right: 8%; animation-delay: -4.5s; }
.ui-auth-deco span:nth-child(5) { top: 48%; left: 3%; animation-delay: -2s; }
.ui-auth-deco span:nth-child(6) { top: 55%; right: 3%; animation-delay: -5s; }
@media (max-width: 743px) { .ui-auth-deco span:nth-child(n+5) { display: none; } }

@media (hover: hover) {
  .ui-auth-link:hover { background: var(--ui-brand-soft); }
}

/* ==========================================================================
   Phase 1: Rahmen (Navbar-Details, Avatar-Menü, Auszeichnung, Lade-Balken)
   ========================================================================== */
/* Navbar sitzt innerhalb von <main> (bisheriges Seitenlayout) */
.ui-appbar a, .ui-appbar button { font-family: var(--ui-font-body); }
.ui-appbar .ui-brand { font-family: var(--ui-font-display); }
.ui-points.is-bump, .ui-points[data-ui-bump] { animation: ui-bump .45s var(--ui-spring); }

/* Avatar-Menü */
.ui-avatar-wrap { position: relative; }
.ui-avatar-menu { top: calc(100% + .6rem); right: 0; width: min(17rem, calc(100vw - 32px)); color: var(--ui-ink); }
.ui-menu-head { display: grid; gap: .1rem; padding: .5rem .8rem .6rem; }
.ui-menu-name { font: 800 1.1rem var(--ui-font-display); }
.ui-menu-sep { height: 0; margin: .3rem .4rem; border: 0; border-top: 2px dashed var(--ui-line); }
.ui-menu-item--danger { color: var(--ui-coral-deep); }
.ui-menu-item .ui-switch-knob { margin-left: auto; position: relative; flex: none; width: 2.3rem; height: 1.35rem; border-radius: var(--ui-r-pill); background: var(--ui-line-deep); transition: background .2s; }
.ui-menu-item .ui-switch-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: #fff; transition: transform .25s var(--ui-spring); }
.ui-menu-item[aria-pressed="true"] .ui-switch-knob { background: var(--ui-mint); }
.ui-menu-item[aria-pressed="true"] .ui-switch-knob::after { transform: translateX(.95rem); }
.ui-menu form { margin: 0; }

/* Auszeichnungs-Banner unter der Navbar */
.ui-award-slot { max-width: var(--ui-page-max); margin: .9rem auto 0; padding-inline: 16px; }
.ui-award-slot:empty { display: none; }
.ui-award-text { display: grid; gap: .1rem; }

/* Lade-Balken oben für htmx-Navigation in #hx-content */
.ui-loadbar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 80;
  height: 4px;
  background: linear-gradient(90deg, var(--ui-sun), var(--ui-mint), var(--ui-brand));
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.ui-loading .ui-loadbar { opacity: 1; animation: ui-loadbar 1.6s var(--ui-ease-out) forwards; }
@keyframes ui-loadbar { 0% { transform: scaleX(0); } 60% { transform: scaleX(.7); } 100% { transform: scaleX(.92); } }

/* Sanfter Übergang nach dem Laden eines neuen Inhalts */
#hx-content.ui-fade { animation: ui-rise .35s var(--ui-ease-out); }
/* Punkte + Avatar immer rechtsbündig (auch wenn die Fach-Leiste auf dem Handy umbricht) */
.ui-bar-right { margin-left: auto; }
/* iPad hochkant: Platz für die Fächer, Marke nur als Logo */
@media (max-width: 1023px) {
  .ui-appbar .ui-brand .ui-hide-narrow { display: none; }
}
/* Wischbare Fach-Leiste: sanfter Auslauf rechts als Hinweis auf weitere Fächer */
.ui-subjects { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent); padding-right: 1.2rem; }