/* ==========================================================================
   PORTAL-E  ·  Kontur-System für den Mitgliederbereich
   --------------------------------------------------------------------------
   Übertragung der Designrichtung "Kontur" aus der Vorschau auf das Produkt.
   Alles hier ist auf `body.has-sidebar` gescopt und berührt damit nur den
   angemeldeten Bereich; Startseite, Bewerbung und die öffentliche Community
   behalten System E unverändert.

   Gemessener Ausgangszustand (16.09.2026, 18 Portalseiten):
     - 6 verschiedene Seitentitel-Größen, 4 verschiedene Schriftstärken
     - 9 verschiedene Textkanten zwischen 250 px und 580 px
     - 4 verschiedene Zwischentitel-Größen
     - 10 von 18 Seiten ohne erkennbare Hauptaktion

   Die Maße stehen als globale Werte in core.css (--title-*, --portal-*),
   damit jede Seite dieselben benutzt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Der Platzhalter der öffentlichen Kopfzeile
   Die Kopfzeile selbst ist im Portal ausgeblendet, ihr Platzhalter stand aber
   weiter im Fluss: 140 Pixel Leere über jeder einzelnen Seite, bevor der
   Inhalt begann. Das war kein Gestaltungsentscheid, sondern ein Rest.
   -------------------------------------------------------------------------- */
body.has-sidebar .ss-header-spacer {
  display: none;
}

/* --------------------------------------------------------------------------
   1. Eine Spalte für alle Seiten
   Vorher brachte jede Seite ihre eigene Breite mit: 1200, 1180, 960, 860,
   720, 640, 560. Der Textanfang sprang bei jedem Wechsel um bis zu 330 px.
   Jetzt teilen sich alle Wrapper dieselbe Spalte und denselben Innenrand.
   -------------------------------------------------------------------------- */
body.has-sidebar .page-container,
body.has-sidebar .page-container-sm,
body.has-sidebar .page-container-lg,
body.has-sidebar .page-container-full,
body.has-sidebar .crs-page,
body.has-sidebar .ch-hub,
body.has-sidebar .cd-page,
body.has-sidebar .ref-container,
body.has-sidebar .lk-page,
body.has-sidebar .coach-root {
  max-width: var(--portal-column);
  margin-inline: auto;
  padding-inline: var(--portal-gutter);
  padding-block: clamp(28px, 4vw, 56px) var(--space-3xl);
}

/* Seiten, die vom Textmaß leben (Lesen, Schreiben, Formulare), behalten die
   linke Kante und verengen nur ihren Inhalt. Das ist der Unterschied zwischen
   "die Seite springt" und "der Text wird ruhiger". */
body.has-sidebar .page-container-sm > *,
body.has-sidebar .ref-container > * {
  max-width: var(--portal-measure);
}

/* --------------------------------------------------------------------------
   2. Seitenanker: Titel, Begleitzeile, Hauptaktion
   Immer dieselbe Stelle, immer dasselbe Maß.
   -------------------------------------------------------------------------- */
body.has-sidebar #app .page-title,
body.has-sidebar #app .ref-title,
body.has-sidebar #app .cd-title,
body.has-sidebar #app h1 {
  font-family: var(--font-heading);
  font-size: var(--title-page);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.032em;
  color: var(--text-primary);
  margin: 0 0 12px;
}

body.has-sidebar #app .page-subtitle,
body.has-sidebar #app .ref-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  max-width: var(--portal-lead);
}

/* Titel links, Hauptaktion rechts. Die Klasse gab es bereits, sie war nur
   auf zwei Seiten im Einsatz; jetzt trägt sie jede Hauptaktion. */
body.has-sidebar #app .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2xl);
}

body.has-sidebar #app .page-header > *:first-child {
  flex: 1 1 320px;
  min-width: 0;
}

body.has-sidebar #app .page-header > .btn {
  flex: 0 0 auto;
  margin-bottom: 2px;
}

/* Steht die Begleitzeile unter dem Kopf statt darin, rueckt der Kopf enger
   heran - sonst reisst der grosse Abschnittsabstand Titel und Satz auseinander. */
body.has-sidebar #app .page-header:has(+ .page-subtitle) {
  margin-bottom: 12px;
}

body.has-sidebar #app .page-header + .page-subtitle {
  margin-bottom: var(--space-2xl);
}

/* Ohne Aktion bleibt derselbe Abstand nach unten. */
body.has-sidebar .page-title + .page-subtitle {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Drei Überschriften-Stufen
   Abschnitt gliedert, Inhalt benennt Menschen und Beiträge, Zeile
   beschriftet Listeneinträge.
   -------------------------------------------------------------------------- */
body.has-sidebar #app h2 {
  font-family: var(--font-heading);
  font-size: var(--title-section);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}

body.has-sidebar #app h3 {
  font-family: var(--font-body);
  font-size: var(--title-content);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

body.has-sidebar .card-title,
body.has-sidebar .session-item-name,
body.has-sidebar .empty-state-title {
  font-family: var(--font-body);
  font-size: var(--title-row);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--text-primary);
}

body.has-sidebar .session-item-date,
body.has-sidebar .session-item-type,
body.has-sidebar .card-subtitle,
body.has-sidebar .empty-state-text {
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. Flächen und Zeilen
   Kontur setzt auf warme, fein abgestufte Flächen statt Glas: ruhiger,
   und der goldene Partikel-Hintergrund bleibt sichtbar statt verwaschen.
   -------------------------------------------------------------------------- */
body.has-sidebar .card-flat {
  background: linear-gradient(145deg, rgba(40, 35, 27, 0.92), rgba(32, 30, 24, 0.92) 75%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(233, 200, 137, 0.04);
  padding: clamp(20px, 2.4vw, 32px);
}

/* Eine Zeile, die irgendwohin führt: Haarlinie statt Kachel, eine ruhige
   Markierung links, und beim Zeigen wird sie wärmer statt zu springen. */
body.has-sidebar .session-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-soft);
  border-left: 1px solid transparent;
  border-radius: 0;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  transition: background var(--transition-base),
              border-color var(--transition-base);
}

body.has-sidebar .session-item:hover {
  background: var(--row-hover);
  border-left-color: var(--row-marker);
  transform: none;
}

/* Keine Trennlinie am Ende einer Liste, unter der nichts mehr folgt. */
body.has-sidebar .session-item:last-child {
  border-bottom: 0;
}

/* Aufklappbare Bereiche sitzen auf einer eigenen leichten Fläche, damit sie
   nicht wie eine Listenzeile aussehen. */
body.has-sidebar #app details {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--hairline-soft);
  padding: 0 var(--space-md);
  margin-top: var(--space-xl);
}

body.has-sidebar #app details > summary {
  padding: 14px 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
}

body.has-sidebar #app details > summary:hover {
  color: var(--accent-gold-light);
}

body.has-sidebar #app details[open] {
  padding-bottom: var(--space-sm);
}

/* Leere Zustände lesen sich wie ein Satz an dich, nicht wie eine Fehlermeldung
   in der Bildmitte. */
body.has-sidebar .empty-state {
  align-items: flex-start;
  text-align: left;
  padding: var(--space-xl) 0 var(--space-2xl);
}

body.has-sidebar .empty-state-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-md);
  opacity: 0.55;
}

/* Der Rückweg steht als eigene Zeile über dem Titel, nicht daneben. So
   beginnt der Seitentitel überall an derselben Kante. */
body.has-sidebar #app .cd-backrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

body.has-sidebar #app .cd-backrow .cd-back {
  color: var(--text-muted);
  display: inline-flex;
  transition: color var(--transition-fast);
}

body.has-sidebar #app .cd-backrow .cd-back:hover { color: var(--accent-gold-light); }

/* Nachrichten sind eine Vollbildansicht wie ein Messenger. Sie behält ihre
   eigene Form, übernimmt aber die Lesebreite des Systems. */
body.has-sidebar .cm-page-inner {
  max-width: var(--portal-measure);
}

/* --------------------------------------------------------------------------
   4b. Eine Flächensprache für alle Module
   Der eigentliche Grund, warum der Bereich uneinheitlich aussah: jedes Modul
   hat seine eigene Karte erfunden. Gemessen am 17.09.2026 über 18 Seiten:
   39 Flächen tragende Klassen, 39 verschiedene Kombinationen aus Farbe,
   Rand und Radius, 9 verschiedene Eckradien (0, 8, 10, 12, 16, 20, 50%,
   999px und 9999px - zwei Schreibweisen für dieselbe Pille), und drei
   Randfarben nebeneinander: warmes Gold, kühles Off-White und reines Weiß.

   Hier werden sie auf drei Formen zurückgeführt: Karte, Kasten, Pille.
   Alle drei nehmen die Haarlinie aus dem Gold und dieselbe warme Fläche.
   -------------------------------------------------------------------------- */

/* Karte: der große Behälter. Warm und flach statt Glas, damit der goldene
   Partikel-Hintergrund sichtbar bleibt statt zu verwaschen. */
body.has-sidebar #app .card,
body.has-sidebar #app .cd-card,
body.has-sidebar #app .ch-onboarding,
body.has-sidebar #app .crs-card,
body.has-sidebar #app .crs-main,
body.has-sidebar #app .pf-content-card,
body.has-sidebar #app .st-card,
body.has-sidebar #app .lesson-level {
  background: linear-gradient(145deg, rgba(40, 35, 27, 0.92), rgba(32, 30, 24, 0.92) 75%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(233, 200, 137, 0.04);
}

/* Kasten: der kleine Behälter innerhalb einer Karte oder Spalte. Ein Radius
   kleiner, eine Spur leiser - damit Karte und Kasten nicht gleich laut sind. */
body.has-sidebar #app .crs-side-box,
body.has-sidebar #app .crs-lesson,
body.has-sidebar #app .radio-card,
body.has-sidebar #app .callout,
body.has-sidebar #app .ref-link-box,
body.has-sidebar #app .ref-how,
body.has-sidebar #app .fb-col,
body.has-sidebar #app .lesson-bigthree-item {
  border-radius: var(--radius-md);
  border-width: 1px;
  border-style: solid;
}

body.has-sidebar #app .crs-side-box,
body.has-sidebar #app .crs-lesson,
body.has-sidebar #app .ref-link-box,
body.has-sidebar #app .ref-how,
body.has-sidebar #app .fb-col {
  background: var(--hairline-soft);
  border-color: var(--hairline);
}

/* Der grüne Hinweis behält seine Bedeutung, nimmt aber dieselbe Form an. */
body.has-sidebar #app .callout {
  border-color: rgba(76, 175, 80, 0.22);
}

/* Pille: Filter, Marken, Status. Eine Schreibweise statt 20px, 999px, 9999px. */
body.has-sidebar #app .ch-chip,
body.has-sidebar #app .fb-filter,
body.has-sidebar #app .badge,
body.has-sidebar #app .coming-soon-badge,
body.has-sidebar #app .st-card-status {
  border-radius: var(--radius-full);
}

body.has-sidebar #app .ch-chip,
body.has-sidebar #app .fb-filter {
  border: 1px solid var(--hairline);
  background: transparent;
}

body.has-sidebar #app .ch-chip.active,
body.has-sidebar #app .fb-filter--active {
  border-color: var(--gold-35);
  background: var(--gold-10);
  color: var(--accent-gold-light);
}

/* Fortschritt: eine Höhe, eine Form, das Gold aus dem Token. */
body.has-sidebar #app .crs-progress,
body.has-sidebar #app .progress-bar {
  border-radius: var(--radius-full);
  background: var(--hairline-soft);
  overflow: hidden;
}

body.has-sidebar #app .crs-progress-fill,
body.has-sidebar #app .progress-fill {
  border-radius: var(--radius-full);
  background: var(--accent-gold);
}

/* Eingabefelder: eine Kontur. Vorher stand hier neben dem Off-White auch
   ein blaugrauer Rand aus einer fremden Palette (rgb(42,42,58)). */
body.has-sidebar #app .form-input,
body.has-sidebar #app .ref-link-input,
body.has-sidebar #app input[type="text"],
body.has-sidebar #app input[type="email"],
body.has-sidebar #app textarea,
body.has-sidebar #app select {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

body.has-sidebar #app .form-input:focus,
body.has-sidebar #app input:focus,
body.has-sidebar #app textarea:focus,
body.has-sidebar #app select:focus {
  border-color: var(--accent-gold);
  outline: 2px solid var(--gold-25);
  outline-offset: 2px;
}

/* Reines Weiß kommt in dieser Marke nicht vor. Wo es sich als Rand oder
   Fläche eingeschlichen hat, steht jetzt die warme Haarlinie. */
body.has-sidebar #app .ref-share-btn {
  border: 1px solid var(--hairline);
  background: var(--hairline-soft);
  border-radius: var(--radius-md);
}

body.has-sidebar #app .ref-share-btn:hover {
  border-color: var(--gold-35);
  background: var(--row-hover);
}

/* --------------------------------------------------------------------------
   4c. Die letzten Fremdfarben
   Nach der Vereinheitlichung blieben Einzelstücke übrig: ein Rand in vollem
   Off-White, zwei kühle Ränder, eine Fläche in reinem Weiß und drei Stellen
   mit dem alten Markengold #BC8034 statt des Tokens #C9A84C.
   -------------------------------------------------------------------------- */
body.has-sidebar #app .lesson-bigthree-item,
body.has-sidebar #app .coach-archive-toggle-btn,
body.has-sidebar #app .crs-main-foot {
  border-color: var(--hairline);
}

body.has-sidebar #app .st-card-status {
  background: var(--hairline-soft);
  border-color: var(--hairline);
  color: var(--text-secondary);
}

body.has-sidebar #app .st-card-icon {
  background: var(--gold-10);
  border-radius: var(--radius-md);
}

body.has-sidebar #app .lesson-bigthree-num {
  background: var(--accent-gold);
}

/* Die Selbsttests zentrierten ihren Kartenblock in der Spalte: der Titel
   begann bei 363 px, die Karten bei 540 px. Jetzt beginnen beide an
   derselben Kante, die Lesebreite bleibt erhalten. */
body.has-sidebar #app .st-wrap {
  margin-inline: 0;
  max-width: var(--portal-measure);
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   5. Rhythmus
   Ein Raster statt frei gewählter Einzelwerte.
   -------------------------------------------------------------------------- */
body.has-sidebar #app section + section,
body.has-sidebar .portal-section {
  margin-top: var(--space-2xl);
}

body.has-sidebar .card-flat + .card-flat {
  margin-top: var(--space-lg);
}

body.has-sidebar .card-header {
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   6. Nebenwege treten zurück
   -------------------------------------------------------------------------- */
body.has-sidebar .portal-note,
body.has-sidebar .page-hint {
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   7. Bedienelemente
   Eine Kontur, ein Radius, ein sichtbarer Tastaturfokus - auch auf
   aufklappbaren Bereichen, die ihn bisher nicht hatten.
   -------------------------------------------------------------------------- */
body.has-sidebar .btn {
  border-radius: var(--radius-md);
  min-height: 46px;
  font-weight: 500;
}

body.has-sidebar .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 212, 169, 0.3),
              inset 0 -1px 0 rgba(113, 58, 40, 0.2);
}

body.has-sidebar #app summary:focus-visible,
body.has-sidebar #app a:focus-visible,
body.has-sidebar #app button:focus-visible {
  outline: 2px solid var(--accent-gold-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   8. Handy
   Kürzerer Seitenkopf, gleiche Ränder wie am Schreibtisch, Freiraum über
   der unteren Navigation - auch auf Geräten mit Gestenleiste.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  body.has-sidebar .page-container,
  body.has-sidebar .page-container-sm,
  body.has-sidebar .page-container-lg,
  body.has-sidebar .page-container-full,
  body.has-sidebar .crs-page,
  body.has-sidebar .ch-hub,
  body.has-sidebar .cd-page,
  body.has-sidebar .ref-container,
  body.has-sidebar .lk-page,
  body.has-sidebar .coach-root {
    padding-inline: 20px;
    padding-block: var(--space-lg) calc(88px + env(safe-area-inset-bottom, 0px));
  }

  body.has-sidebar #app .page-header {
    align-items: stretch;
    margin-bottom: var(--space-xl);
  }

  /* In Spaltenrichtung wirkt eine flex-basis als Höhe. Ohne diese Zeile
     klafft zwischen Titel und Aktion eine Leerfläche in Basisbreite. */
  body.has-sidebar #app .page-header > *:first-child {
    flex: 0 0 auto;
  }

  body.has-sidebar #app .page-header > .btn {
    width: 100%;
    margin: var(--space-md) 0 0;
  }

  body.has-sidebar .session-item {
    padding-left: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   9. Bewegung nur, wenn sie erwünscht ist
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.has-sidebar .session-item,
  body.has-sidebar .card-flat,
  body.has-sidebar .btn {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   10. Komponenten nach Rolle
   Die Bausteine, aus denen Start und Mein Weg gebaut sind. Benannt nach
   ihrer Aufgabe, nicht nach ihrem Aussehen - damit eine Tokenaenderung
   alle Stellen erreicht und kein Inline-Design mehr nötig ist.
   -------------------------------------------------------------------------- */

/* Einladung: der eine hervorgehobene nächste Schritt einer Seite. */
body.has-sidebar #app .portal-feature {
  background: linear-gradient(145deg, rgba(40, 35, 27, 0.92), rgba(32, 30, 24, 0.92) 75%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(233, 200, 137, 0.04);
  padding: clamp(24px, 3vw, 40px);
  margin: 0 0 var(--space-2xl);
}

body.has-sidebar #app .portal-feature h2 {
  font-size: var(--title-feature);
  line-height: 1.2;
  max-width: 19ch;
  margin: var(--space-sm) 0 var(--space-md);
}

body.has-sidebar #app .portal-feature p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-lg);
  max-width: 46ch;
}

body.has-sidebar #app .portal-feature-meta {
  display: block;
  font-size: var(--text-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* Weg-Zeile: führt woanders hin. Haarlinie, kein Kasten - und der Pfeil
   geht beim Zeigen mit, damit man sieht, dass es weitergeht. */
body.has-sidebar #app .portal-rows {
  display: block;
  margin: 0 0 var(--space-xl);
}

body.has-sidebar #app .portal-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 20px 8px 20px 0;
  border-bottom: 1px solid var(--hairline-soft);
  border-left: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-base), border-color var(--transition-base);
}

body.has-sidebar #app .portal-row:last-child { border-bottom: 0; }

body.has-sidebar #app .portal-row:hover {
  background: var(--row-hover);
  border-left-color: var(--row-marker);
  padding-left: 12px;
}

body.has-sidebar #app .portal-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

body.has-sidebar #app .portal-row strong {
  font-size: var(--title-row);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--text-primary);
}

body.has-sidebar #app .portal-row small {
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-muted);
}

body.has-sidebar #app .portal-row .row-arrow {
  flex: 0 0 auto;
  color: var(--accent-gold-dark);
  transition: transform var(--transition-base), color var(--transition-base);
}

body.has-sidebar #app .portal-row:hover .row-arrow {
  transform: translateX(4px);
  color: var(--accent-gold);
}

/* Nebenweg: erreichbar, aber standardmäßig geschlossen. */
body.has-sidebar #app .portal-more {
  margin-top: var(--space-xl);
}

body.has-sidebar #app .portal-more > summary {
  padding: 14px 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
}

body.has-sidebar #app .portal-more[open] > summary {
  color: var(--accent-gold-light);
}

/* Platzhalter, solange echte Daten noch geladen werden. */
body.has-sidebar #app .portal-skeleton {
  height: 168px;
  border-radius: var(--radius-lg);
  background: var(--hairline-soft);
  animation: portal-puls 1.8s ease-in-out infinite;
}

@keyframes portal-puls { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  body.has-sidebar #app .portal-skeleton { animation: none; }
}

/* Konto-Zugang in der Seitenleiste: leiser als die täglichen Wege. */
body.has-sidebar .sidebar-section--account { margin-top: auto; }

body.has-sidebar .sidebar-nav-item--quiet { opacity: 0.78; }
body.has-sidebar .sidebar-nav-item--quiet:hover,
body.has-sidebar .sidebar-nav-item--quiet.active { opacity: 1; }

/* --------------------------------------------------------------------------
   11. Untere Navigation am Handy
   Dieselben fünf Wege wie links, am unteren Rand erreichbar. Der Hamburger
   bleibt für Konto und Abmelden.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.has-sidebar .bottom-tab-bar {
    display: block;
    top: auto;
    bottom: 0;
    height: auto;
    border-bottom: 0;
    border-top: 1px solid var(--hairline);
    background: rgba(20, 19, 16, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0 var(--space-sm) env(safe-area-inset-bottom, 0px);
    z-index: var(--z-sidebar);
  }

  body.has-sidebar .bottom-tab-bar-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    max-width: 560px;
    margin: 0 auto;
  }

  body.has-sidebar .bottom-tab-bar .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-height: 56px;
    padding: 8px 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.6875rem;
    line-height: 1.1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition-fast);
  }

  body.has-sidebar .bottom-tab-bar .tab-item svg {
    width: 21px;
    height: 21px;
  }

  body.has-sidebar .bottom-tab-bar .tab-item.active {
    color: var(--accent-gold);
  }

  /* Die Seitenleiste bleibt über den Hamburger erreichbar; am Handy tragen
     die täglichen Wege die Navigation, nicht ein Menü. */
  body.has-sidebar .portal-mobile-header { display: flex; }
}

/* Fortschritt in einer Einladung: eine Linie, kein eigener Kasten. */
body.has-sidebar #app .portal-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--hairline-soft);
  overflow: hidden;
  margin: 0 0 var(--space-sm);
  max-width: 320px;
}

body.has-sidebar #app .portal-progress > span {
  display: block;
  height: 100%;
  background: var(--accent-gold);
}

body.has-sidebar #app .portal-progress-text {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin: 0 0 var(--space-lg);
}

/* --------------------------------------------------------------------------
   12. Fokusmodus: Lesen und Schreiben
   Ein ausdrücklicher Seitenzustand (body.portal-focus, gesetzt von
   js/portal-focus.js). Die Seitenleiste bleibt bestehen, tritt aber zurück;
   die linke Textkante bleibt genau dort, wo sie auf jeder anderen Seite
   liegt - nur die Spalte wird enger. Der Rückweg steht in der Seite selbst.
   -------------------------------------------------------------------------- */
body.has-sidebar.portal-focus .sidebar {
  opacity: 0.32;
  transition: opacity var(--transition-slow);
}

body.has-sidebar.portal-focus .sidebar:hover,
body.has-sidebar.portal-focus .sidebar:focus-within {
  opacity: 1;
}

@media (max-width: 900px) {
  /* Am Handy nimmt die Tastatur den halben Bildschirm. Die untere Leiste
     verschwindet hier ganz, der Rückweg in der Seite genügt. */
  body.has-sidebar.portal-focus .bottom-tab-bar { display: none; }
  body.has-sidebar.portal-focus .page-container,
  body.has-sidebar.portal-focus .page-container-sm,
  body.has-sidebar.portal-focus .page-container-full,
  body.has-sidebar.portal-focus .crs-page {
    padding-block-end: var(--space-2xl);
  }
}

/* Lokaler Rückweg über dem Titel */
body.has-sidebar #app .focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
  font-size: 0.875rem;
}

body.has-sidebar #app .focus-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--transition-fast);
}

body.has-sidebar #app .focus-back:hover { color: var(--accent-gold-light); }

body.has-sidebar #app .focus-meta {
  font-size: var(--text-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Die Schreibfläche ist das Dokument, nicht eine Karte darin. */
body.has-sidebar #app .focus-surface {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: rgba(32, 30, 24, 0.55);
  padding: clamp(18px, 2vw, 28px);
  transition: border-color var(--transition-base);
}

body.has-sidebar #app .focus-surface:focus-within {
  border-color: var(--accent-gold);
}

body.has-sidebar #app .focus-surface textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  min-height: 46vh;
  resize: vertical;
}

body.has-sidebar #app .focus-surface textarea:focus {
  outline: none;
}

/* Zeile unter der Fläche: Zähler links, Hauptaktion rechts. */
body.has-sidebar #app .focus-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

body.has-sidebar #app .focus-status {
  font-size: var(--text-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

body.has-sidebar #app .focus-status[data-gespeichert="ja"] {
  color: var(--accent-green);
}

/* Ein Layoutcontainer bleibt ein Layoutcontainer. Die Fläche entsteht nur,
   wo sie ausdrücklich gewollt ist (.focus-surface, .card, .portal-feature). */
body.has-sidebar #app .split-view-panel {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Lektion im Fokus: eine Spalte statt zwei. Die Kapitelauswahl liegt im
   Aufklapper darueber, der Lesetext bekommt die volle Lesebreite. */
body.has-sidebar #app .crs-page--focus {
  display: block;
  max-width: var(--portal-column);
}

body.has-sidebar #app .crs-page--focus .crs-side {
  position: static;
  top: auto;
}

body.has-sidebar #app .crs-side-toggle {
  margin: 0 0 var(--space-lg);
}

/* Die Lesespalte ist der Text selbst, keine Karte mit Rahmen darum. */
body.has-sidebar #app .crs-page--focus .crs-main {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: var(--portal-measure);
}