/*
   Lernboje - Design-System
   ------------------------
   Alle Farben stehen ausschliesslich hier als CSS Custom Properties. Im Markup
   werden niemals Hex-Werte verwendet, sondern immer die Variablen.

   Hinweis zur Palette: Farbwerte und Schriften waren im Projektdokument als offener
   Punkt markiert. Die hier gesetzten Werte sind ein maritimer Vorschlag und an genau
   dieser Stelle austauschbar. Alle Textfarben erfuellen auf ihrem jeweiligen
   Untergrund ein Kontrastverhaeltnis von mindestens 4,5 zu 1 (WCAG 2.2 AA).
*/

:root {
    /* Markenfarben */
    --color-primary:        #0b3b5c;   /* Tiefblau - Kopfbereich, Hauptaktionen */
    --color-primary-hell:   #14567f;
    --color-primary-dunkel: #072639;
    --color-secondary:      #1b7fa8;   /* Wasserblau - Verlinkungen, Akzentflaechen */
    --color-secondary-hell: #3ba3ce;
    --color-accent:         #e4572e;   /* Bojenrot - nur als Flaeche, nie als Text */
    --color-accent-text:    #a83c18;   /* Bojenrot als Textfarbe, kontraststark */
    --color-accent-hell:    #f2795a;

    /* Flaechen */
    --color-bg:             #f4f7f9;
    --color-surface:        #ffffff;
    --color-surface-2:      #e8eef2;
    --color-surface-3:      #dbe5ec;
    --color-rand:           #cbd7de;
    --color-rand-hell:      #e3eaef;

    /* Statusfarben der dreistufigen Bewertung */
    --color-success:        #1f6b4a;   /* Aspekt erfuellt */
    --color-success-bg:     #e6f2ec;
    --color-warning:        #8a5300;   /* teilweise erkannt, muendliche Nachpruefung */
    --color-warning-bg:     #fcf1e0;
    --color-error:          #a3241d;   /* nicht erfuellt */
    --color-error-bg:       #fbeae9;
    --color-neutral:        #56707f;   /* offener Aspekt, noch nicht bewertet */
    --color-neutral-bg:     #eef2f5;

    /* Text */
    --color-text-primary:   #10222e;
    --color-text-secondary: #46606f;
    --color-text-invers:    #ffffff;
    --color-text-gedaempft: #7c93a1;

    /* Zusammengesetzte Flaechen. Sie leiten sich ausschliesslich aus den Farben
       oberhalb ab - es kommt kein neuer Farbwert hinzu. */
    --verlauf-tiefe: linear-gradient(160deg, var(--color-primary-dunkel) 0%,
                                             var(--color-primary) 45%,
                                             var(--color-secondary) 100%);
    --verlauf-welle: linear-gradient(180deg, var(--color-surface-2) 0%,
                                             var(--color-bg) 100%);
    /* Farbverlaeufe fuer Lernbereich und Lernsitzung. Weisse Schrift steht immer auf
       dem dunklen Ende; beide Enden stammen aus der Palette. */
    --verlauf-see:   linear-gradient(135deg, var(--color-primary-hell) 0%,
                                             var(--color-secondary) 100%);
    --verlauf-nacht: linear-gradient(135deg, var(--color-primary-dunkel) 0%,
                                             var(--color-primary-hell) 100%);
    --verlauf-gruen: linear-gradient(135deg, var(--color-success) 0%,
                                             var(--color-primary-hell) 100%);
    --verlauf-boje:  linear-gradient(135deg, var(--color-accent-text) 0%,
                                             var(--color-accent) 100%);
    --verlauf-sand:  linear-gradient(135deg, var(--color-warning) 0%,
                                             var(--color-accent-text) 100%);
    --schleier-hell: rgba(255, 255, 255, 0.12);
    --schleier-dunkel: rgba(16, 34, 46, 0.06);

    /* Typografie */
    --font-headline: "Source Serif 4", "Georgia", serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Consolas", monospace;

    --schrift-xs: 0.8125rem;
    --schrift-s: 0.9375rem;
    --schrift-m: 1rem;
    --schrift-l: 1.125rem;
    --schrift-xl: 1.375rem;
    --schrift-xxl: 1.75rem;
    --schrift-titel: 2.5rem;
    --schrift-hero: 3.25rem;

    /* Abstaende */
    --abstand-xs: 0.25rem;
    --abstand-s: 0.5rem;
    --abstand-m: 1rem;
    --abstand-l: 1.5rem;
    --abstand-xl: 2.5rem;
    --abstand-xxl: 4rem;

    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 20px;
    --radius-rund: 999px;

    --schatten-s: 0 1px 2px rgba(16, 34, 46, 0.06),
                  0 1px 3px rgba(16, 34, 46, 0.08);
    --schatten-m: 0 4px 12px rgba(16, 34, 46, 0.08),
                  0 2px 4px rgba(16, 34, 46, 0.06);
    --schatten-l: 0 12px 32px rgba(16, 34, 46, 0.12),
                  0 4px 8px rgba(16, 34, 46, 0.06);

    --uebergang: 160ms cubic-bezier(0.2, 0, 0.2, 1);

    /* Mindestgroesse eines Beruehrungsziels */
    --touch-ziel: 44px;

    --inhalt-breite: 72rem;
    --lesetext-breite: 42rem;
    --kopf-hoehe: 4rem;
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--kopf-hoehe) + var(--abstand-m));
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: var(--schrift-m);
    line-height: 1.65;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-headline);
    line-height: 1.2;
    color: var(--color-primary-dunkel);
    margin: 0 0 var(--abstand-m) 0;
    text-wrap: balance;
    letter-spacing: -0.01em;

    /* Zusammensetzungen wie "Sportbootfuehrerschein" sprengen auf schmalen Geraeten
       sonst den Bildschirm. */
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 { font-size: var(--schrift-titel); }
h2 { font-size: var(--schrift-xxl); margin-top: var(--abstand-xl); }
h3 { font-size: var(--schrift-xl); margin-top: var(--abstand-l); }
h4 { font-size: var(--schrift-l); }

p {
    margin: 0 0 var(--abstand-m) 0;
    max-width: var(--lesetext-breite);
}

a {
    color: var(--color-secondary);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    transition: color var(--uebergang);
}

a:hover {
    color: var(--color-primary);
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

img {
    max-width: 100%;
    height: auto;
}

kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--color-surface-2);
    border: 1px solid var(--color-rand);
    border-bottom-width: 2px;
    border-radius: var(--radius-s);
    padding: 1px 5px;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface-2);
    padding: 2px 6px;
    border-radius: var(--radius-s);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.seite {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

.seite__inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: var(--abstand-xl) var(--abstand-m) var(--abstand-xxl);
}

/*
   Ein Abschnitt, der aus dem zentrierten Inhaltsbereich ausbricht und die volle
   Fensterbreite einnimmt. So bleibt das Layout fuer alle Seiten gleich, und nur die
   Abschnitte, die es brauchen, reichen bis an den Rand.
*/
.vollbreite {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

/* Der erste Abschnitt einer Seite schliesst buendig an den Kopfbereich an. */
.seite__inhalt > .vollbreite:first-child {
    margin-top: calc(-1 * var(--abstand-xl));
}

.bahn {
    width: 100%;
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: 0 var(--abstand-m);
}

.sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-surface);
    color: var(--color-text-primary);
    padding: var(--abstand-s) var(--abstand-m);
    z-index: 100;
    border-radius: 0 0 var(--radius-m) 0;
}

.sprungmarke:focus {
    left: 0;
    top: 0;
}

/* --------------------------------------------------------------------------
   Kopfbereich und Navigation
   -------------------------------------------------------------------------- */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-primary-dunkel);
    color: var(--color-text-invers);
    box-shadow: var(--schatten-m);
}

.kopf__innen {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: 0 var(--abstand-m);
    min-height: var(--kopf-hoehe);
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
}

.kopf__marke {
    font-family: var(--font-headline);
    font-size: var(--schrift-xl);
    font-weight: 700;
    color: var(--color-text-invers);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    min-height: var(--touch-ziel);
    white-space: nowrap;
}

.kopf__marke:hover {
    color: var(--color-text-invers);
}

.kopf__boje {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

.kopf__navigation {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    margin-left: auto;
}

.kopf__link {
    color: var(--color-text-invers);
    text-decoration: none;
    padding: var(--abstand-s) var(--abstand-m);
    border-radius: var(--radius-s);
    min-height: var(--touch-ziel);
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    font-size: var(--schrift-s);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--uebergang);
}

.kopf__link:hover {
    background: var(--schleier-hell);
    color: var(--color-text-invers);
}

.kopf__link--aktiv {
    background: var(--schleier-hell);
    color: var(--color-text-invers);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.kopf__link--betont {
    background: var(--color-accent);
    color: var(--color-text-invers);
    font-weight: 600;
}

.kopf__link--betont:hover {
    background: var(--color-accent-hell);
}

/* Aufklappbares Untermenue. Es kommt ohne JavaScript aus. */
.klapp {
    position: relative;
}

.klapp > summary {
    list-style: none;
    cursor: pointer;
}

.klapp > summary::-webkit-details-marker {
    display: none;
}

.klapp__pfeil {
    font-size: 0.7em;
    opacity: 0.8;
}

.klapp__inhalt {
    position: absolute;
    top: calc(100% + var(--abstand-xs));
    left: 0;
    min-width: 17rem;
    background: var(--color-surface);
    border: 1px solid var(--color-rand);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-l);
    padding: var(--abstand-s);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 60;
}

.klapp__eintrag {
    display: block;
    padding: var(--abstand-s) var(--abstand-m);
    border-radius: var(--radius-s);
    color: var(--color-text-primary);
    text-decoration: none;
    min-height: var(--touch-ziel);
}

.klapp__eintrag:hover {
    background: var(--color-surface-2);
    color: var(--color-primary);
}

.klapp__eintrag strong {
    display: block;
    font-weight: 600;
}

.klapp__eintrag span {
    display: block;
    font-size: var(--schrift-xs);
    color: var(--color-text-secondary);
}

/* Eingebettete Erklaerungsseite einer Frage. */
.erklaerung {
    margin: var(--abstand-m) 0;
}

.erklaerung > summary {
    list-style: none;
}

.erklaerung > summary::-webkit-details-marker {
    display: none;
}

.erklaerung__auf,
.erklaerung[open] .erklaerung__zu {
    display: none;
}

.erklaerung[open] .erklaerung__auf {
    display: inline;
}

/* Die Hoehe setzt lernboje.js auf die volle Laenge des Inhalts; 80vh gilt nur, bis
   gemessen ist oder falls das Skript fehlt. */
.erklaerung__rahmen {
    display: block;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    margin-top: var(--abstand-s);
    border: 1px solid var(--color-rand);
    border-radius: var(--radius-m);
    background: var(--color-surface);
}

/* Menue fuer schmale Bildschirme, ebenfalls ohne JavaScript. */
.kopf__schalter {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--schleier-hell);
    color: var(--color-text-invers);
    border-radius: var(--radius-s);
    min-width: var(--touch-ziel);
    min-height: var(--touch-ziel);
    cursor: pointer;
    font-size: var(--schrift-l);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    background: var(--verlauf-tiefe);
    color: var(--color-text-invers);
    padding: var(--abstand-xxl) 0;
    position: relative;
    overflow: hidden;
}

/* Weicher Auslauf zum folgenden Abschnitt. Ein gezacktes Ornament wirkte an dieser
   Stelle unruhig; ein ruhiger Verlauf traegt den Uebergang besser. */
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 5rem;
    background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
    opacity: 0.25;
    pointer-events: none;
}

.hero__innen {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: 0 var(--abstand-m);
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--abstand-xl);
    align-items: center;
}

.hero h1 {
    font-size: var(--schrift-hero);
    color: var(--color-text-invers);
    margin-bottom: var(--abstand-m);
}

.hero__vorspann {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    background: var(--schleier-hell);
    border-radius: var(--radius-rund);
    padding: var(--abstand-xs) var(--abstand-m);
    font-size: var(--schrift-s);
    margin-bottom: var(--abstand-m);
}

.hero p {
    font-size: var(--schrift-l);
    color: var(--color-text-invers);
    opacity: 0.92;
    max-width: 34rem;
}

.hero__aktionen {
    display: flex;
    gap: var(--abstand-m);
    flex-wrap: wrap;
    margin-top: var(--abstand-l);
}

/* Kennzahlenblock neben dem Hero-Text. */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-m);
}

.kennzahl {
    background: var(--schleier-hell);
    border: 1px solid var(--schleier-hell);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
}

.kennzahl__wert {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--schrift-xxl);
    font-weight: 700;
    line-height: 1.1;
}

.kennzahl__text {
    display: block;
    font-size: var(--schrift-xs);
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Abschnitte und Karten
   -------------------------------------------------------------------------- */

.abschnitt {
    padding: var(--abstand-xxl) 0;
}

.abschnitt--getoent {
    background: var(--verlauf-welle);
}

.abschnitt__kopf {
    max-width: var(--lesetext-breite);
    margin-bottom: var(--abstand-xl);
}

.abschnitt__kopf h2 {
    margin-top: 0;
}

.abschnitt__augenbraue {
    display: block;
    font-size: var(--schrift-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--abstand-xs);
}

.karte {
    background: var(--color-surface);
    border: 1px solid var(--color-rand-hell);
    border-radius: var(--radius-m);
    padding: var(--abstand-l);
    box-shadow: var(--schatten-s);
    margin-bottom: var(--abstand-m);
}

.karte__titel {
    margin-top: 0;
}

.kartengitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--abstand-l);
}

/* auto-fit statt auto-fill: Bei nur zwei Rubriken bleibt sonst eine leere Spalte
   stehen und das Raster wirkt unfertig. */
.kartengitter--breit {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    max-width: 62rem;
}

/* Anklickbare Karte mit deutlicher Rueckmeldung beim Ueberfahren. */
.klickkarte {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-rand-hell);
    border-radius: var(--radius-m);
    padding: var(--abstand-l);
    box-shadow: var(--schatten-s);
    text-decoration: none;
    color: inherit;
    transition: transform var(--uebergang), box-shadow var(--uebergang),
                border-color var(--uebergang);
    height: 100%;
}

.klickkarte:hover {
    transform: translateY(-3px);
    box-shadow: var(--schatten-l);
    border-color: var(--color-secondary);
    color: inherit;
}

.symbol {
    display: block;
    flex-shrink: 0;
}

.klickkarte__symbol {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-m);
    background: var(--color-surface-2);
    color: var(--color-primary);
    margin-bottom: var(--abstand-m);
    flex-shrink: 0;
}

.klickkarte__symbol--akzent {
    background: var(--color-warning-bg);
    color: var(--color-accent-text);
}

.klickkarte__symbol--erfolg {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.klickkarte h3 {
    margin: 0 0 var(--abstand-s);
    font-size: var(--schrift-l);
    color: var(--color-primary-dunkel);
}

.klickkarte p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--schrift-s);
}

.klickkarte__fuss {
    margin-top: auto;
    padding-top: var(--abstand-m);
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    font-size: var(--schrift-s);
    font-weight: 600;
    color: var(--color-secondary);
}

.klickkarte:hover .klickkarte__fuss {
    color: var(--color-primary);
}

/* Karte einer Rubrik mit farbigem Kopf. */
.rubrikkarte {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-rand-hell);
    box-shadow: var(--schatten-s);
    text-decoration: none;
    color: inherit;
    transition: transform var(--uebergang), box-shadow var(--uebergang);
    height: 100%;
}

.rubrikkarte:hover {
    transform: translateY(-3px);
    box-shadow: var(--schatten-l);
    color: inherit;
}

.rubrikkarte__kopf {
    background: var(--verlauf-tiefe);
    color: var(--color-text-invers);
    padding: var(--abstand-l);
}

.rubrikkarte__kopf h3 {
    color: var(--color-text-invers);
    margin: 0;
    font-size: var(--schrift-l);
}

.rubrikkarte__koerper {
    padding: var(--abstand-l);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-m);
    flex: 1;
}

.rubrikkarte__koerper p {
    margin: 0;
    font-size: var(--schrift-s);
    color: var(--color-text-secondary);
}

.rubrikkarte__eckdaten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   Bausteine
   -------------------------------------------------------------------------- */

.schaltflaeche {
    font-family: var(--font-body);
    font-size: var(--schrift-m);
    font-weight: 600;
    min-height: var(--touch-ziel);
    padding: var(--abstand-s) var(--abstand-l);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-s);
    text-decoration: none;
    transition: background var(--uebergang), transform var(--uebergang),
                box-shadow var(--uebergang);
}

.schaltflaeche:active {
    transform: translateY(1px);
}

.schaltflaeche--haupt {
    background: var(--color-primary);
    color: var(--color-text-invers);
    box-shadow: var(--schatten-s);
}

.schaltflaeche--haupt:hover {
    background: var(--color-primary-hell);
    color: var(--color-text-invers);
    box-shadow: var(--schatten-m);
}

.schaltflaeche--akzent {
    background: var(--color-accent);
    color: var(--color-text-invers);
    box-shadow: var(--schatten-s);
}

.schaltflaeche--akzent:hover {
    background: var(--color-accent-hell);
    color: var(--color-text-invers);
    box-shadow: var(--schatten-m);
}

.schaltflaeche--zweit {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-rand);
}

.schaltflaeche--zweit:hover {
    background: var(--color-surface-2);
    border-color: var(--color-secondary);
}

/* Zweitrangige Aktion auf dunklem Grund, etwa im Hero. */
.schaltflaeche--umriss {
    background: transparent;
    color: var(--color-text-invers);
    border-color: var(--color-text-invers);
}

.schaltflaeche--umriss:hover {
    background: var(--schleier-hell);
    color: var(--color-text-invers);
}

.schaltflaeche:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.hinweis {
    border-left: 4px solid var(--color-secondary);
    background: var(--color-neutral-bg);
    padding: var(--abstand-m);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    margin-bottom: var(--abstand-m);
}

.hinweis--warnung {
    border-left-color: var(--color-warning);
    background: var(--color-warning-bg);
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    font-size: var(--schrift-xs);
    font-weight: 600;
    padding: 3px var(--abstand-s);
    border-radius: var(--radius-rund);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
}

.marke--akzent {
    background: var(--color-warning-bg);
    color: var(--color-accent-text);
}

.marke--erfolg {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.marke--hell {
    background: var(--schleier-hell);
    color: var(--color-text-invers);
}

.brotkrumen {
    font-size: var(--schrift-s);
    color: var(--color-text-secondary);
    margin-bottom: var(--abstand-m);
}

.brotkrumen a {
    color: var(--color-text-secondary);
}

.brotkrumen a:hover {
    color: var(--color-secondary);
}

/* Liste mit Haken statt Aufzaehlungspunkten. */
.hakenliste {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--abstand-m);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
}

.hakenliste li {
    display: flex;
    gap: var(--abstand-s);
    align-items: flex-start;
}

.hakenliste li::before {
    content: "✓";
    color: var(--color-success);
    font-weight: 700;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Lern-Oberflaeche
   -------------------------------------------------------------------------- */

.fragenkarte {
    background: var(--color-surface);
    border: 1px solid var(--color-rand-hell);
    border-radius: var(--radius-m);
    padding: var(--abstand-xl);
    box-shadow: var(--schatten-m);
}

.fragenkarte__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--abstand-m);
    flex-wrap: wrap;
    margin-bottom: var(--abstand-m);
    padding-bottom: var(--abstand-m);
    border-bottom: 1px solid var(--color-rand-hell);
}

.fragenkarte__nummer {
    font-family: var(--font-mono);
    font-size: var(--schrift-s);
    color: var(--color-text-secondary);
}

.fragenkarte__text {
    font-size: var(--schrift-l);
    max-width: var(--lesetext-breite);
    font-weight: 500;
}

.fragenkarte__antwortfeld {
    width: 100%;
    min-height: 8rem;
    font-family: var(--font-body);
    font-size: var(--schrift-m);
    line-height: 1.6;
    padding: var(--abstand-m);
    border: 2px solid var(--color-rand);
    border-radius: var(--radius-s);
    resize: vertical;
    transition: border-color var(--uebergang);
}

.fragenkarte__antwortfeld:focus {
    border-color: var(--color-secondary);
}

.antwortliste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
}

.antwortoption {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-m);
    min-height: var(--touch-ziel);
    padding: var(--abstand-m);
    border: 2px solid var(--color-rand);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: var(--schrift-m);
    font-family: var(--font-body);
    transition: border-color var(--uebergang), background var(--uebergang);
}

.antwortoption:hover:not(:disabled) {
    border-color: var(--color-secondary);
    background: var(--color-neutral-bg);
}

.antwortoption--gewaehlt {
    border-color: var(--color-primary);
    background: var(--color-surface-2);
}

.antwortoption--richtig {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.antwortoption--falsch {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.antwortoption__kuerzel {
    font-family: var(--font-mono);
    font-weight: 700;
    min-width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-2);
    border-radius: var(--radius-s);
    flex-shrink: 0;
}

.vergleich {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--abstand-m);
    margin: var(--abstand-l) 0;
}

.vergleich__spalte {
    background: var(--color-neutral-bg);
    border: 1px solid var(--color-rand-hell);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
}

.vergleich__ueberschrift {
    font-size: var(--schrift-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--abstand-s);
}

/* Aspekt-Checkliste. Der Zustand wird nie allein ueber Farbe vermittelt:
   Es gibt immer zusaetzlich ein Zeichen und einen Text. */
.aspektliste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
}

.aspekt {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-m);
    padding: var(--abstand-m);
    border-radius: var(--radius-s);
    border-left: 4px solid var(--color-neutral);
    background: var(--color-neutral-bg);
}

.aspekt--erfuellt {
    border-left-color: var(--color-success);
    background: var(--color-success-bg);
}

.aspekt--offen {
    border-left-color: var(--color-neutral);
    background: var(--color-neutral-bg);
}

.aspekt--gesperrt {
    border-left-color: var(--color-error);
    background: var(--color-error-bg);
}

.aspekt__zeichen {
    font-weight: 700;
    min-width: 1.25rem;
    text-align: center;
    font-size: var(--schrift-l);
}

.aspekt--erfuellt .aspekt__zeichen { color: var(--color-success); }
.aspekt--offen .aspekt__zeichen { color: var(--color-neutral); }
.aspekt--gesperrt .aspekt__zeichen { color: var(--color-error); }

.aspekt__bezeichnung {
    font-weight: 600;
}

.aspekt__erklaerung {
    display: block;
    font-size: var(--schrift-s);
    color: var(--color-text-secondary);
}

.sicherheit {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    padding: var(--abstand-s) var(--abstand-m);
    border-radius: var(--radius-s);
    font-weight: 600;
}

.sicherheit--sicher { background: var(--color-success-bg); color: var(--color-success); }
.sicherheit--teilweise { background: var(--color-warning-bg); color: var(--color-warning); }
.sicherheit--unsicher { background: var(--color-neutral-bg); color: var(--color-neutral); }

.fortschritt {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-l);
}

.fortschritt__balken {
    flex: 1;
    height: 10px;
    background: var(--color-surface-3);
    border-radius: var(--radius-rund);
    overflow: hidden;
}

.fortschritt__fuellung {
    height: 100%;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-hell));
    border-radius: var(--radius-rund);
    transition: width var(--uebergang);
}

.fortschritt__text {
    font-size: var(--schrift-s);
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.timer {
    font-family: var(--font-mono);
    font-size: var(--schrift-l);
    font-weight: 700;
    padding: var(--abstand-s) var(--abstand-m);
    border-radius: var(--radius-s);
    background: var(--color-surface-2);
    font-variant-numeric: tabular-nums;
}

.timer--knapp {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.ergebnis {
    padding: var(--abstand-xl);
    border-radius: var(--radius-m);
    border: 2px solid;
    margin-bottom: var(--abstand-l);
}

.ergebnis--bestanden {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.ergebnis--nachpruefung {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
}

.ergebnis--nichtbestanden {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

/* Kartenaufgaben */
.schritt {
    background: var(--color-surface);
    border: 1px solid var(--color-rand-hell);
    border-radius: var(--radius-m);
    padding: var(--abstand-xl);
    box-shadow: var(--schatten-m);
}

.schritt__nummer {
    font-family: var(--font-mono);
    color: var(--color-text-secondary);
    font-size: var(--schrift-s);
}

.schritt__eingabe {
    font-family: var(--font-mono);
    font-size: var(--schrift-l);
    min-height: var(--touch-ziel);
    padding: var(--abstand-s) var(--abstand-m);
    border: 2px solid var(--color-rand);
    border-radius: var(--radius-s);
    width: 100%;
    max-width: 16rem;
}

.schritt__einheit {
    margin-left: var(--abstand-s);
    color: var(--color-text-secondary);
}

.schritt__hinweis {
    border-left: 4px solid var(--color-warning);
    background: var(--color-warning-bg);
    padding: var(--abstand-m);
    margin-top: var(--abstand-m);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.schritt__rechenweg {
    border-left: 4px solid var(--color-secondary);
    background: var(--color-neutral-bg);
    padding: var(--abstand-m);
    margin-top: var(--abstand-m);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

/* Werkzeuge */
.rechner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--abstand-m);
    align-items: end;
}

.feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
    margin-bottom: var(--abstand-m);
}

.feld__beschriftung {
    font-size: var(--schrift-s);
    font-weight: 600;
}

.feld__eingabe {
    font-family: var(--font-body);
    font-size: var(--schrift-m);
    min-height: var(--touch-ziel);
    padding: var(--abstand-s) var(--abstand-m);
    border: 2px solid var(--color-rand);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    transition: border-color var(--uebergang);
}

.feld__eingabe:focus {
    border-color: var(--color-secondary);
}

.feld__hilfe {
    font-size: var(--schrift-xs);
    color: var(--color-text-secondary);
}

.ergebnisliste {
    list-style: none;
    margin: var(--abstand-m) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
}

.ergebnisliste li {
    display: flex;
    justify-content: space-between;
    gap: var(--abstand-m);
    padding: var(--abstand-s) var(--abstand-m);
    background: var(--color-neutral-bg);
    border-radius: var(--radius-s);
    align-items: center;
}

.ergebnisliste li:nth-child(odd) {
    background: var(--color-surface-2);
}

.ergebnisliste__wert {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* Tabellen scrollen auf schmalen Geraeten statt die Seite zu sprengen. */
.tabellenrahmen {
    overflow-x: auto;
    border: 1px solid var(--color-rand-hell);
    border-radius: var(--radius-m);
    background: var(--color-surface);
    margin-bottom: var(--abstand-m);
}

table {
    border-collapse: collapse;
    width: 100%;
}

thead th {
    background: var(--color-surface-2);
    font-size: var(--schrift-s);
}

th, td {
    text-align: left;
    padding: var(--abstand-s) var(--abstand-m);
    border-bottom: 1px solid var(--color-rand-hell);
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: none;
}

/* Fussbereich */
.fuss {
    background: var(--color-primary-dunkel);
    color: var(--color-text-invers);
    padding: var(--abstand-xl) var(--abstand-m);
    font-size: var(--schrift-s);
    margin-top: auto;
}

.fuss__innen {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--abstand-xl);
}

.fuss h3 {
    color: var(--color-text-invers);
    font-size: var(--schrift-m);
    margin: 0 0 var(--abstand-s);
}

.fuss p {
    opacity: 0.85;
    margin: 0;
}

.fuss ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
}

.fuss a {
    color: var(--color-text-invers);
    opacity: 0.85;
    text-decoration: none;
}

.fuss a:hover {
    opacity: 1;
    color: var(--color-text-invers);
    text-decoration: underline;
}

.fuss__unten {
    max-width: var(--inhalt-breite);
    margin: var(--abstand-xl) auto 0;
    padding-top: var(--abstand-m);
    border-top: 1px solid var(--schleier-hell);
    opacity: 0.7;
    font-size: var(--schrift-xs);
}

/* Nur fuer Screenreader */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Lernbereich und Lernsitzung - lebendige Gestaltung
   --------------------------------------------------------------------------
   Ziel: Lust aufs Lernen machen. Farbige Flaechen und sanfte Bewegung, aber nur aus
   der vorhandenen Palette (Verlaeufe oben in :root). Text auf farbigen Flaechen ist
   immer weiss auf den dunklen Enden der Verlaeufe (Kontrast >= 4,5:1). Alle
   Animationen entfallen ueber die Regel zu prefers-reduced-motion.
   ========================================================================== */

/* --- Kopfbereich des Lernbereichs --------------------------------------- */

.lernkopf {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--abstand-l);
    align-items: center;
    background: var(--verlauf-tiefe);
    color: var(--color-text-invers);
    border-radius: var(--radius-l);
    padding: var(--abstand-xl) var(--abstand-xl) calc(var(--abstand-xl) + 3rem);
    margin-bottom: var(--abstand-l);
    box-shadow: var(--schatten-l);
}

.lernkopf h1 {
    color: var(--color-text-invers);
    font-size: var(--schrift-titel);
    margin: 0 0 var(--abstand-s);
}

.lernkopf__vorspann {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    background: var(--schleier-hell);
    border-radius: var(--radius-rund);
    padding: var(--abstand-xs) var(--abstand-m);
    font-size: var(--schrift-s);
    margin: 0 0 var(--abstand-m);
}

.lernkopf__text {
    font-size: var(--schrift-l);
    max-width: 36rem;
    margin: 0;
    opacity: 0.95;
}

.lernkopf__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-m);
    margin-top: var(--abstand-l);
}

.lernkopf__zahlen {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
    padding: 0;
    margin: var(--abstand-l) 0 0;
}

.lernkopf__zahlen li {
    background: var(--schleier-hell);
    border-radius: var(--radius-rund);
    padding: var(--abstand-xs) var(--abstand-m);
    font-size: var(--schrift-s);
}

.lernkopf__zahlen strong {
    font-size: var(--schrift-l);
    margin-right: var(--abstand-xs);
}

.lernkopf__bild {
    position: relative;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: var(--schleier-hell);
    display: grid;
    place-items: center;
}

.lernkopf__boje {
    color: var(--color-text-invers);
    animation: schaukeln 4s ease-in-out infinite;
    transform-origin: 50% 85%;
}

.lernkopf__wellen {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 3.5rem;
    pointer-events: none;
}

.lernkopf__welle {
    fill: var(--color-text-invers);
}

.lernkopf__welle--hinten {
    opacity: 0.12;
    animation: wellengang 14s linear infinite;
}

.lernkopf__welle--vorne {
    opacity: 0.2;
    animation: wellengang 9s linear infinite reverse;
}

@keyframes schaukeln {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(6deg) translateY(-6px); }
}

@keyframes wellengang {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
}

/* --- Lerntipp ----------------------------------------------------------- */

.lerntipp {
    display: flex;
    gap: var(--abstand-m);
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-rand-hell);
    border-left: 5px solid var(--color-accent);
    border-radius: var(--radius-m);
    padding: var(--abstand-m) var(--abstand-l);
    box-shadow: var(--schatten-s);
    margin-bottom: var(--abstand-l);
}

.lerntipp p {
    margin: 0;
}

.lerntipp__symbol {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--verlauf-boje);
    color: var(--color-text-invers);
}

/* --- Abschnittstitel mit Symbol ----------------------------------------- */

.abschnitt-titel {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    margin-top: var(--abstand-xl);
}

.abschnitt-titel .symbol {
    color: var(--color-secondary);
}

.pille {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    background: var(--color-surface-2);
    color: var(--color-primary);
    border-radius: var(--radius-rund);
    padding: 2px var(--abstand-m);
    font-size: var(--schrift-xs);
    font-weight: 700;
}

/* --- Farbvarianten fuer Baender und Symbole ----------------------------- */

.themenkarte--see .themenkarte__band,
.moduskachel__symbol--see { background: var(--verlauf-see); }

.themenkarte--nacht .themenkarte__band,
.moduskachel__symbol--nacht { background: var(--verlauf-nacht); }

.themenkarte--gruen .themenkarte__band,
.moduskachel__symbol--gruen { background: var(--verlauf-gruen); }

.themenkarte--boje .themenkarte__band,
.moduskachel__symbol--boje { background: var(--verlauf-boje); }

.themenkarte--sand .themenkarte__band,
.moduskachel__symbol--sand { background: var(--verlauf-sand); }

/* --- Sachgebietskarte --------------------------------------------------- */

.themenkarte {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-l);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--schatten-m);
    border: 1px solid var(--color-rand-hell);
    transition: transform var(--uebergang), box-shadow var(--uebergang);
    height: 100%;
}

.themenkarte:hover,
.themenkarte:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--schatten-l);
    color: inherit;
}

.themenkarte__band {
    position: relative;
    height: 6.5rem;
    display: grid;
    place-items: center;
    color: var(--color-text-invers);
    overflow: hidden;
}

/* Angedeutete Welle am unteren Rand des Bandes. */
.themenkarte__band::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -1.6rem;
    height: 3rem;
    background: var(--color-surface);
    border-radius: 50% 50% 0 0;
}

.themenkarte__band .symbol {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
    transition: transform var(--uebergang);
}

.themenkarte:hover .themenkarte__band .symbol {
    transform: scale(1.12) rotate(-6deg);
}

.themenkarte__inhalt {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
    padding: var(--abstand-m) var(--abstand-l) var(--abstand-l);
    flex: 1;
}

.themenkarte__titel {
    font-family: var(--font-headline);
    font-size: var(--schrift-xl);
    font-weight: 700;
    color: var(--color-primary-dunkel);
}

.themenkarte__text {
    color: var(--color-text-secondary);
    font-size: var(--schrift-s);
}

.themenkarte__fuss {
    margin-top: auto;
    padding-top: var(--abstand-m);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-s);
    flex-wrap: wrap;
}

.themenkarte__los {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    font-weight: 700;
    color: var(--color-secondary);
}

.themenkarte__los .symbol {
    transition: transform var(--uebergang);
}

.themenkarte:hover .themenkarte__los .symbol {
    transform: translateX(4px);
}

/* --- Kacheln der weiteren Lernmodi -------------------------------------- */

.kachelgitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--abstand-m);
}

.moduskachel {
    display: flex;
    gap: var(--abstand-m);
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-rand-hell);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--schatten-s);
    transition: transform var(--uebergang), box-shadow var(--uebergang),
                border-color var(--uebergang);
}

.moduskachel:hover,
.moduskachel:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--schatten-m);
    border-color: var(--color-secondary);
    color: inherit;
}

.moduskachel__symbol {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-m);
    display: grid;
    place-items: center;
    color: var(--color-text-invers);
    transition: transform var(--uebergang);
}

.moduskachel:hover .moduskachel__symbol {
    transform: rotate(-8deg) scale(1.08);
}

.moduskachel__titel {
    display: block;
    font-weight: 700;
    color: var(--color-primary-dunkel);
}

.moduskachel__text {
    display: block;
    font-size: var(--schrift-s);
    color: var(--color-text-secondary);
}

/* --- Pruefungskarten ---------------------------------------------------- */

.pruefkarte {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
    background: var(--verlauf-nacht);
    color: var(--color-text-invers);
    border-radius: var(--radius-l);
    padding: var(--abstand-l);
    text-decoration: none;
    box-shadow: var(--schatten-m);
    transition: transform var(--uebergang), box-shadow var(--uebergang);
    height: 100%;
}

.pruefkarte:hover,
.pruefkarte:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--schatten-l);
    color: var(--color-text-invers);
}

/* Grosses, angeschnittenes Uhrsymbol als Hintergrundmotiv. */
.pruefkarte::after {
    content: "";
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    border: 1.5rem solid var(--schleier-hell);
}

.pruefkarte__symbol {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-accent);
}

.pruefkarte__titel {
    font-family: var(--font-headline);
    font-size: var(--schrift-xl);
    font-weight: 700;
}

.pruefkarte__text {
    font-size: var(--schrift-s);
    opacity: 0.92;
}

.pruefkarte__los {
    margin-top: auto;
    padding-top: var(--abstand-s);
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    font-weight: 700;
}

/* --- Einblenden beim Laden, gestaffelt ueber --i ------------------------ */

.einblenden {
    animation: auftauchen 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes auftauchen {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* --- Lernsitzung -------------------------------------------------------- */

.sitzungskopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    flex-wrap: wrap;
    color: var(--color-text-invers);
    border-radius: var(--radius-l);
    padding: var(--abstand-l);
    margin-bottom: var(--abstand-l);
    box-shadow: var(--schatten-m);
}

.sitzungskopf--see { background: var(--verlauf-see); }
.sitzungskopf--nacht { background: var(--verlauf-nacht); }
.sitzungskopf--gruen { background: var(--verlauf-gruen); }
.sitzungskopf--boje { background: var(--verlauf-boje); }
.sitzungskopf--sand { background: var(--verlauf-sand); }

.sitzungskopf h1 {
    color: var(--color-text-invers);
    margin: 0;
    font-size: var(--schrift-xxl);
}

.sitzungskopf__symbol {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--schleier-hell);
    flex-shrink: 0;
}

.sitzungskopf__chips {
    display: flex;
    gap: var(--abstand-s);
    flex-wrap: wrap;
    margin-left: auto;
}

.sitzungskopf__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    background: var(--schleier-hell);
    border-radius: var(--radius-rund);
    padding: var(--abstand-xs) var(--abstand-m);
    font-size: var(--schrift-s);
    font-weight: 600;
}

.sitzungskopf__chip--serie {
    background: var(--color-accent);
    animation: aufploppen 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

@keyframes aufploppen {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Fortschrittsbalken mit mitfahrender Boje. */
.fortschritt__balken {
    position: relative;
    height: 14px;
    overflow: visible;
}

.fortschritt__fuellung {
    position: relative;
    transition: width 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fortschritt__marke {
    position: absolute;
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin-left: -1rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-invers);
    display: grid;
    place-items: center;
    box-shadow: var(--schatten-m);
    transition: left 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Frage: deutliche Nummer, groessere Schrift, sanftes Einblenden je Frage. */
.fragenkarte {
    border-radius: var(--radius-l);
    border-top: 5px solid var(--color-secondary);
    animation: auftauchen 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.fragenkarte__nummer {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-text-invers);
    background: var(--verlauf-see);
    border-radius: var(--radius-rund);
    padding: var(--abstand-xs) var(--abstand-m);
}

.fragenkarte__text {
    font-family: var(--font-headline);
    font-size: var(--schrift-xl);
    line-height: 1.4;
    color: var(--color-primary-dunkel);
}

/* --- Fragennavigation -------------------------------------------------- */

.fragennavi {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-l);
}

.fragennavi__liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
    margin: 0;
    padding: 0;
}

.fragennavi__punkt {
    position: relative;
    min-width: var(--touch-ziel);
    height: var(--touch-ziel);
    border-radius: 50%;
    border: 2px solid var(--color-rand);
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--schrift-s);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--uebergang), box-shadow var(--uebergang),
                border-color var(--uebergang);
}

.fragennavi__punkt:hover {
    transform: translateY(-2px);
    box-shadow: var(--schatten-m);
    border-color: var(--color-secondary);
}

/* Zustand zusaetzlich als Zeichen in der Ecke - nie allein ueber die Farbe. */
.fragennavi__punkt::after {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: 0.7rem;
    line-height: 1.1rem;
    color: var(--color-text-invers);
}

.fragennavi__punkt--voll {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

.fragennavi__punkt--voll::after {
    content: "\2713";
    background: var(--color-success);
}

.fragennavi__punkt--teil {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.fragennavi__punkt--teil::after {
    content: "~";
    background: var(--color-warning);
}

.fragennavi__punkt--null {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}

.fragennavi__punkt--null::after {
    content: "\2717";
    background: var(--color-error);
}

.fragennavi__punkt--aktuell {
    background: var(--verlauf-see);
    border-color: transparent;
    color: var(--color-text-invers);
    box-shadow: var(--schatten-m);
    transform: scale(1.12);
}

.fragennavi__schritte {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
}

.fragennavi__auswertung {
    margin-left: auto;
}

@media (max-width: 48rem) {
    .fragennavi__schritte .schaltflaeche {
        flex: 1 1 auto;
    }

    .fragennavi__auswertung {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* Aktionen unter der Frage: Markieren links, weiter rechts. */
.fragenfuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--abstand-s);
    margin-top: var(--abstand-m);
}

.fragenfuss .schaltflaeche--haupt {
    margin-left: auto;
}

/* --- Abschluss eines Durchgangs ----------------------------------------- */

.abschluss {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--radius-l);
    padding: var(--abstand-xl) var(--abstand-l);
    box-shadow: var(--schatten-l);
    animation: auftauchen 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.abschluss h2 {
    margin: var(--abstand-m) 0 var(--abstand-s);
    font-size: var(--schrift-xxl);
}

.abschluss p {
    margin-left: auto;
    margin-right: auto;
    max-width: 32rem;
}

.abschluss__aktionen {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--abstand-m);
    margin-top: var(--abstand-l);
}

/* Ergebnisring: --wert in Prozent steuert den gefuellten Anteil. */
.ergebnisring {
    --wert: 0;
    width: 9rem;
    height: 9rem;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, var(--color-surface) 78%, transparent 79%),
        conic-gradient(var(--color-secondary) calc(var(--wert) * 1%), var(--color-surface-3) 0);
    animation: aufploppen 600ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.ergebnisring strong {
    font-family: var(--font-headline);
    font-size: var(--schrift-xxl);
    color: var(--color-primary-dunkel);
}

/* Konfetti aus Palettenfarben. Positionen und Verzoegerungen kommen aus nth-child. */
.konfetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.konfetti span {
    position: absolute;
    top: -1rem;
    width: 0.5rem;
    height: 0.9rem;
    border-radius: 2px;
    background: var(--color-accent);
    animation: rieseln 2.6s ease-in forwards;
    opacity: 0;
}

.konfetti span:nth-child(3n) { background: var(--color-secondary); }
.konfetti span:nth-child(3n + 1) { background: var(--color-success); }
.konfetti span:nth-child(4n) { background: var(--color-secondary-hell); width: 0.4rem; }

.konfetti span:nth-child(1) { left: 5%; animation-delay: 0ms; }
.konfetti span:nth-child(2) { left: 12%; animation-delay: 300ms; }
.konfetti span:nth-child(3) { left: 19%; animation-delay: 120ms; }
.konfetti span:nth-child(4) { left: 26%; animation-delay: 450ms; }
.konfetti span:nth-child(5) { left: 33%; animation-delay: 60ms; }
.konfetti span:nth-child(6) { left: 40%; animation-delay: 380ms; }
.konfetti span:nth-child(7) { left: 47%; animation-delay: 200ms; }
.konfetti span:nth-child(8) { left: 54%; animation-delay: 520ms; }
.konfetti span:nth-child(9) { left: 61%; animation-delay: 90ms; }
.konfetti span:nth-child(10) { left: 68%; animation-delay: 340ms; }
.konfetti span:nth-child(11) { left: 75%; animation-delay: 160ms; }
.konfetti span:nth-child(12) { left: 82%; animation-delay: 480ms; }
.konfetti span:nth-child(13) { left: 89%; animation-delay: 30ms; }
.konfetti span:nth-child(14) { left: 95%; animation-delay: 260ms; }

@keyframes rieseln {
    0% { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(26rem) rotate(540deg); }
}

/* --- Telefon ------------------------------------------------------------ */

@media (max-width: 48rem) {
    .lernkopf {
        grid-template-columns: 1fr;
        padding: var(--abstand-l) var(--abstand-l) calc(var(--abstand-l) + 2.5rem);
        border-radius: var(--radius-m);
    }

    .lernkopf h1 {
        font-size: var(--schrift-xxl);
    }

    /* Auf schmalen Bildschirmen braucht der Text den Platz; die Wellen bleiben. */
    .lernkopf__bild {
        display: none;
    }

    .lernkopf__aktionen .schaltflaeche {
        flex: 1 1 100%;
    }

    .sitzungskopf__chips {
        margin-left: 0;
        width: 100%;
    }

    .fragenkarte__text {
        font-size: var(--schrift-l);
    }
}

@media (max-width: 60rem) {
    .hero__innen {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 48rem) {
    :root {
        --schrift-hero: 2.25rem;
        --schrift-titel: 1.875rem;
        --schrift-xxl: 1.5rem;
        --abstand-xxl: 2.5rem;
    }

    /* Die Navigation klappt unter dem Kopf auf. */
    .kopf__schalter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .kopf__navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--color-primary-dunkel);
        padding: var(--abstand-s);
        gap: 2px;
        box-shadow: var(--schatten-l);
    }

    .kopf__schalter[aria-expanded="true"] + .kopf__navigation,
    .kopf:has(.kopf__umschalter:checked) .kopf__navigation {
        display: flex;
    }

    .kopf__innen {
        position: relative;
        flex-wrap: wrap;
    }

    .klapp__inhalt {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--schleier-hell);
        margin-top: var(--abstand-xs);
    }

    .klapp__eintrag {
        color: var(--color-text-invers);
    }

    .klapp__eintrag span {
        color: var(--color-text-invers);
        opacity: 0.75;
    }

    .klapp__eintrag:hover {
        background: var(--schleier-hell);
        color: var(--color-text-invers);
    }

    .kennzahlen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Die Aktionen im Hero nehmen die volle Breite ein, statt rechts herauszulaufen. */
    .hero__aktionen {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__aktionen .schaltflaeche {
        width: 100%;
    }

    .hero__vorspann {
        font-size: var(--schrift-xs);
    }
}

/* Sehr schmale Geraete: Kennzahlen untereinander statt zweispaltig gequetscht. */
@media (max-width: 30rem) {
    .kennzahlen {
        grid-template-columns: 1fr;
    }

    .kennzahl__text {
        font-size: var(--schrift-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .kopf,
    .fuss,
    .schaltflaeche {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------
   Registrierungsbereich und Vollzugangs-Hinweis: ersetzen geschützte Inhalte
   --------------------------------------------------------------------------------- */
.registrierungsbereich {
    border-left: 4px solid var(--color-accent);
}

.registrierungsbereich .karte__titel {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
}

.registrierungsbereich__vorteile {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--abstand-m);
}

.registrierungsbereich__vorteile li {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    margin-bottom: var(--abstand-s);
}

.registrierungsbereich__vorteile svg {
    color: var(--color-success);
    flex-shrink: 0;
}

.registrierungsbereich__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
}

/* ---------------------------------------------------------------------------------
   Übungsformen im Lernbereich: Anzahlwahl und Zuordnung
   --------------------------------------------------------------------------------- */
.sicherheit--falsch { background: var(--color-error-bg); color: var(--color-error); }

.anzahlwahl__schnell {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
}

.anzahlwahl__schnell .schaltflaeche {
    min-width: 44px;
    min-height: 44px;
}

.anzahlwahl__wert--aktiv {
    background: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
}

.anzahlwahl__eingabe {
    max-width: 8rem;
}

.zuordnung {
    display: grid;
    gap: var(--abstand-l);
}

@media (min-width: 900px) {
    .zuordnung {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.zuordnung__fragen,
.zuordnung__antworten {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zuordnung__fragen {
    counter-reset: zuordnung;
}

.zuordnung__frage {
    counter-increment: zuordnung;
}

.zuordnung__text::before {
    content: counter(zuordnung) ". ";
    font-weight: 700;
}

.zuordnung__frage--richtig { border-left: 4px solid var(--color-success); }
.zuordnung__frage--falsch { border-left: 4px solid var(--color-error); }

.zuordnung__wahl {
    margin-bottom: var(--abstand-s);
}

.zuordnung__wahl .feld__eingabe {
    max-width: 10rem;
    min-height: 44px;
}

.zuordnung__antwort {
    display: flex;
    gap: var(--abstand-m);
    align-items: flex-start;
}

.zuordnung__kennung {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-rund);
    background: var(--color-primary);
    color: var(--color-surface);
    font-weight: 700;
}

.zuordnung__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-m);
    margin-top: var(--abstand-l);
}

/* Katalogeditor: Navigation und Aktionen nebeneinander, am Telefon umbrechend */
.redaktion__navigation,
.redaktion__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-m);
}

.redaktion__angelegt {
    display: flex;
    margin-bottom: var(--abstand-m);
}

/* Lernbereich: Lerntipp unter den Lernwegen nicht direkt an die Kacheln kleben */
.kachelgitter + .lerntipp {
    margin-top: var(--abstand-l);
}