/* ==========================================================================
   SAB-Lernen Design v2.1 – „Ruhe“-Schicht (ui-ruhe.css)

   Lädt als LETZTES Stylesheet (home/header.html). Sie überschreibt nur und
   ersetzt nichts: zum Zurückrollen genügt es, den <link> zu entfernen.
   Emojis bleiben überall erhalten.

   1 Kontrast   2 Druckkante nur für Klickbares   3 Gewichte   4 Flächen statt Verläufe
   5 Endlos-Animationen   6 Startseite   7 Kachel   8 Unterrichtsreihe   9 Kapitel   10 Tab
   Studio: Reiter, Tab-Leiste, Prüfen-Umschalter, Veröffentlichen (Review 3)
   ========================================================================== */

:root {
  --ui-brand-ink: #1872bb;              /* Brand-Blau mit 5,0 : 1 zu Weiß */
  --ui-shadow-card: none;
}

/* ---------- 1 Kontrast: weiße Schrift nur auf ausreichend dunklen Flächen ---------- */
.ui-btn         { --ui-btn-bg: var(--ui-brand-ink);  --ui-btn-edge: var(--ui-brand-deep); }
.ui-btn--go     { --ui-btn-bg: var(--ui-mint-deep);  --ui-btn-edge: #0d5e39; }
.ui-btn--danger { --ui-btn-bg: #c03a2e;              --ui-btn-edge: #8f2a21; }
.ui-btn--grape  { --ui-btn-bg: var(--ui-grape-deep); --ui-btn-edge: #3d22a6; }
/* gleiche Spezifität wie .ui-btn oben → hier erneut setzen, sonst gewinnt die Basis */
.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); }

/* Neuer Textknopf für Nebenaktionen (ersetzt den zweiten Kanten-Knopf) */
.ui-btn--text {
  --ui-btn-bg: transparent; --ui-btn-edge: transparent; --ui-btn-text: var(--ui-brand-deep);
  padding-inline: .6rem; box-shadow: none;
  font-family: var(--ui-font-body); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}

.ui-mini-stop.is-done .ui-mini-dot { background: var(--ui-mint-deep); border-color: #0d5e39; box-shadow: 0 3px 0 #0d5e39; }
.is-done .kp-step-dot { background: var(--ui-mint-deep); border-color: #0d5e39; box-shadow: 0 5px 0 #0d5e39; }
.is-current .kp-step-dot { background: var(--ui-brand-ink); }
.ui-tile-flag { background: var(--ui-brand-ink); }
.ui-continue .ui-eyebrow { color: var(--ui-ink-soft); }   /* accent-deep (z. B. Sonne) war auf Pastell zu hell */

/* ---------- 2 Druckkante nur für Klickbares ---------- */
.ui-hero, .kp-hero, .ui-card, .ui-continue, .kp-mat, .ui-stat { box-shadow: none; }
.ui-card--link { box-shadow: 0 6px 0 var(--ui-line); }

/* ---------- 3 Gewichte: 800 nur noch für Titel und Zahlen ---------- */
.ui-h2, .ui-card-title, .ui-reihe-title, .kp-mat-title { font-weight: 700; }
.ui-subject, .ui-segmented button, .ui-segmented a, .ui-badge, .ui-menu-item, .ui-tile-award, .ui-pill, .ui-stat { font-weight: 700; }
.ui-small, .ui-tile-meta, .kp-step-state, .ui-mini-name, .ui-tile-nr { font-weight: 600; }
.ui-eyebrow { letter-spacing: .08em; }

/* ---------- 4 Flächen statt Verläufe (Emojis tragen die Farbe) ---------- */
.ui-appbar { background: var(--ui-brand-ink); }
.ui-blob:not(.ui-profile-avatar):not(.ui-skeleton-blob) {
  background: var(--ui-accent-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}
.kp-hero-art { background: var(--ui-sun-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-sun) 45%, transparent); }
.ui-meter { border: 0; background: var(--ui-line); }
.ui-meter-bar { background: var(--ui-mint); }

/* ---------- 5 Höchstens eine Endlos-Animation pro Ansicht ---------- */
.ui-blob:not(.ui-skeleton-blob), .kp-hero-art, .ui-empty-emo { animation: none; }
.ui-pill--alert::after { box-shadow: 0 0 0 2px var(--ui-brand-ink); animation-iteration-count: 3; }
/* Übrig bleibt: ui-halo am aktuellen Schritt (Mini-Pfad / Lernpfad). */

/* ---------- 6 Startseite: Begrüßung leise, Weiterlernen ist der Held ---------- */
.ui-greet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; padding: 1.1rem 1.4rem; border: 2px solid var(--ui-line); border-radius: var(--ui-r-card); background: var(--ui-card); animation: ui-rise .4s var(--ui-ease-out) both; }
.ui-greet-title { margin: 0; font: 700 clamp(1.5rem, 3.6vw, 1.9rem)/1.15 var(--ui-font-display); text-wrap: balance; color: var(--ui-ink); }
.ui-greet-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.ui-greet-punkte { display: grid; justify-items: center; margin: 0; font-size: .8rem; font-weight: 700; color: var(--ui-ink-soft); }
.ui-greet-punkte strong { font: 800 1.6rem/1 var(--ui-font-display); font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.ui-greet-medals { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .35rem .9rem .35rem .6rem; border-radius: var(--ui-r-pill); background: var(--ui-sun-soft); color: var(--ui-ink); font-weight: 800; font-size: .92rem; text-decoration: none; }
.ui-greet-coins { display: inline-flex; }
.ui-greet-coin { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ui-card); box-shadow: 0 0 0 2px var(--ui-sun-soft); font-size: 1rem; }
.ui-greet-coin + .ui-greet-coin { margin-left: -.5rem; }

.ui-continue { background: var(--ui-accent-soft); border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-line)); gap: 1.1rem; }
.ui-continue .ui-blob--sm { width: 4.4rem; height: 4.4rem; font-size: 2.2rem; background: var(--ui-card); box-shadow: none; }
.ui-continue-title { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.ui-continue-next { margin: 0; font-weight: 600; color: var(--ui-ink); }
.ui-continue-next strong { font-weight: 800; }
.ui-continue-progress .ui-meter { height: .55rem; max-width: 24rem; }

.ui-reihe-row--bar { grid-template-columns: auto minmax(0, 1fr); }
.ui-reihe-row--bar .ui-blob--sm { width: 2.9rem; height: 2.9rem; font-size: 1.5rem; }
.ui-reihe-row-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; }
.ui-reihe-row--bar .ui-reihe-row-title { gap: .45rem; }
.ui-reihe-row--bar .ui-meter { height: .5rem; }

/* ---------- 7 Kapitel-Kachel: zwei Signale statt sechs ---------- */
.ui-tile-here { font: 700 .82rem var(--ui-font-body); color: var(--ui-brand-deep); white-space: nowrap; }
.ui-tile.is-next { border-color: var(--ui-accent); box-shadow: 0 6px 0 var(--ui-accent-deep); }
.ui-tile.is-next .ui-tile-here { color: var(--ui-ink); }
.ui-tile.is-done .ui-tile-progress .ui-meter-bar { background: var(--ui-mint-deep); }

/* ---------- 8 Unterrichtsreihe: Kopf mit Hauptaktion ---------- */
.ui-hero-text { margin: 0; max-width: 60ch; font-weight: 500; color: var(--ui-ink); text-wrap: pretty; }
.ui-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .4rem; }
.ui-hero .ui-meter { max-width: 24rem; height: .55rem; }

/* ---------- 9 Kapitel: kompakter Kopf, Lernpfad als Stepper ---------- */
.kp-hero { gap: 1rem; padding: 1rem 1.25rem; }
.kp-hero-art { width: 4.4rem; height: 4.4rem; font-size: 2.2rem; }
.kp-hero-body > .ui-eyebrow { display: none; }   /* Reihe/Jahrgang stehen schon in den Brotkrumen */
.kp-page:has(.kp-path) .kp-hero-progress { display: none; }   /* der Lernpfad zeigt den Fortschritt schon */
.kp-hero .ui-stat:has([data-kp-timer-display]) { padding-inline: 0; background: none; border-color: transparent; color: var(--ui-ink-soft); }
@media (max-width: 560px) { .kp-hero { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; } .kp-hero-art { width: 3.4rem; height: 3.4rem; font-size: 1.7rem; } }

.kp-path { --kp-dot: 3rem; grid-auto-columns: minmax(8.5rem, 1fr); }
.kp-step { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; row-gap: .35rem; padding: .5rem .25rem; background: none; text-align: center; }
.kp-step-dot { grid-row: auto; width: var(--kp-dot); height: var(--kp-dot); font-size: 1.15rem; line-height: 1; font-family: var(--ui-font-body); }   /* Baloo-Zeilenhöhe schob Emojis aus der Mitte */
.kp-path-item + .kp-path-item::before { top: calc(.5rem + var(--kp-dot) / 2); }
.kp-step-name { font-size: .88rem; font-weight: 700; }
.kp-step-state { display: none; }
.is-current .kp-step-state { display: block; color: var(--ui-brand-deep); font-weight: 800; }
@media (min-width: 744px) { .kp-path { --kp-dot: 3.2rem; } .kp-step-dot { width: var(--kp-dot); height: var(--kp-dot); } }

/* ---------- 10 Tab: Text vorn, Material leise, Abschluss zusammen ---------- */
.kp-content { padding: clamp(1.1rem, 3vw, 1.75rem); }
.kp-content .ui-card-title { font-size: clamp(1.35rem, 3vw, 1.6rem); }
.kp-mat { background: var(--ui-paper); border-color: transparent; }
.kp-mat-link { background: var(--ui-card); }
.kp-finish { display: grid; gap: .75rem; padding: 1rem; border-radius: var(--ui-r-card); border: 2px solid var(--ui-line); background: var(--ui-card); }
.kp-finish .kp-foot { padding-top: .25rem; }


/* ==========================================================================
   Studio (Review 3): Reiter, Tab-Leiste, Prüfen-Umschalter, Veröffentlichen
   ========================================================================== */
.st-reiter { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--ui-line); }
.st-reiter::-webkit-scrollbar { display: none; }
.st-reiter [data-ui-reiter] { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.9rem; margin-bottom: -2px; padding: .4rem .9rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ui-ink-soft); font: 700 1rem var(--ui-font-body); white-space: nowrap; cursor: pointer; }
.st-reiter [data-ui-reiter][aria-selected="true"] { border-bottom-color: var(--ui-brand); color: var(--ui-brand-deep); }
.st-reiter [data-ui-reiter]:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: -3px; border-radius: 10px 10px 0 0; }
.st-reiter-zahl { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: var(--ui-r-pill); background: var(--ui-paper); font: 800 .78rem var(--ui-font-display); }
/* Vorschau nur neben dem Text-Reiter; sonst nimmt die Hauptspalte die ganze Breite. */
@media (min-width: 1024px) {
  .st-editor[data-ui-reiter-aktiv]:not([data-ui-reiter-aktiv="text"]) { grid-template-columns: minmax(0, 1fr); }
}
.st-editor[data-ui-reiter-aktiv]:not([data-ui-reiter-aktiv="text"]) > .st-editor-side { display: none; }

.st-tabbar { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; margin-top: .5rem; padding-bottom: .2rem; }
.st-tabbar-item { flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .25rem .8rem .25rem .35rem; border: 2px solid var(--ui-line); border-radius: var(--ui-r-pill); background: var(--ui-card); color: var(--ui-ink); font: 700 .92rem var(--ui-font-body); text-decoration: none; white-space: nowrap; }
.st-tabbar-item[aria-current="page"] { border-color: var(--ui-brand); background: var(--ui-brand-soft); color: var(--ui-brand-deep); }
.st-tabbar-item .st-sort-pos { min-width: 1.6rem; }
.st-tabbar-neu { padding-left: .8rem; border-style: dashed; color: var(--ui-ink-soft); }

.st-pruefen-wahl { justify-self: start; margin-top: .4rem; }
.st-pruefen-wahl a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem .95rem; border-radius: var(--ui-r-pill); color: var(--ui-ink-soft); font-weight: 700; font-size: .92rem; text-decoration: none; }
.st-pruefen-wahl a[aria-current="page"] { background: var(--ui-card); color: var(--ui-brand-deep); box-shadow: 0 2px 0 var(--ui-line-deep); }
.st-nav-count--spiel { margin-left: .2rem; }

.st-filter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .6rem; }
.st-class-tile.is-warn { border-color: color-mix(in srgb, var(--ui-sun) 70%, var(--ui-line)); background: var(--ui-sun-soft); }

.st-publish[hidden] { display: none; }
.st-checkliste { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-weight: 700; }
.st-checkliste .is-luecke { color: var(--ui-orange-deep); }
.st-checkliste .is-hinweis { color: var(--ui-ink-soft); font-weight: 600; }

@media print {
  [data-ui-reiter-panel="schueler"] { display: grid !important; }
  [data-ui-reiter-panel="fortschritt"], [data-ui-reiter-panel="einstellungen"], .st-reiter { display: none !important; }
}

/* ---------- Hover (wie im Bestand nur mit Maus/Trackpad) ---------- */
@media (hover: hover) {
  .ui-btn.ui-btn--text:hover:not(:disabled):not([aria-disabled="true"]) { transform: none; box-shadow: none; filter: none; --ui-btn-text: var(--ui-ink); }
  .ui-tile.is-next:hover { box-shadow: 0 9px 0 var(--ui-accent-deep); }
  .st-reiter [data-ui-reiter]:hover { color: var(--ui-ink); }
  .st-tabbar-item:hover, .st-pruefen-wahl a:hover { border-color: var(--ui-brand); color: var(--ui-brand-deep); }
}

/* ---------- 9 Startseite: einspaltiger Stapel, Chips, Kacheln, Persönliches unten ---------- */
.ui-tab-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ui-tab-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: var(--ui-r-chip); background: var(--ui-card); color: var(--ui-ink-soft); font: 700 .88rem var(--ui-font-body); }
.ui-tab-chip.is-done { background: var(--ui-mint-soft); color: var(--ui-ink); }
.ui-tab-chip.is-done > span:first-child { color: var(--ui-mint-deep); }
.ui-tab-chip.is-current { color: var(--ui-ink); font-weight: 800; box-shadow: 0 0 0 2px var(--ui-accent); }

.ui-reihe-list--kacheln { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ui-reihe-list--kacheln .ui-reihe-row--bar { grid-template-columns: 1fr; align-content: start; gap: .6rem; }

.ui-aufklapp { padding-block: .25rem; }
.ui-aufklapp-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; min-height: 3.25rem; cursor: pointer; list-style: none; }
.ui-aufklapp-kopf::-webkit-details-marker { display: none; }
.ui-aufklapp-kopf::after { content: "▾"; margin-left: auto; color: var(--ui-ink-soft); transition: transform .2s var(--ui-ease-out); }
.ui-aufklapp[open] > .ui-aufklapp-kopf::after { transform: rotate(180deg); }
.ui-aufklapp > :not(summary) { margin-top: .6rem; }

.ui-card--zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-block: .6rem; }
.ui-card--zeile > .ui-card-head { display: contents; }
.ui-card--zeile .ui-h2 { order: 1; font-size: 1.05rem; }
.ui-card--zeile .ui-interest-list, .ui-card--zeile > .ui-small { order: 2; flex: 1 1 12rem; }
.ui-card--zeile .ui-card-head .ui-btn { order: 3; margin-left: auto; }