/* =========================================================================
   Bewerbungstrainer – Gestaltungssystem
   Keine externen Schriften, keine externen Ressourcen.
   ========================================================================= */

:root {
    /* Farben */
    --farbe-hintergrund: #f6f7f9;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-gedimmt: #f0f2f5;
    --farbe-rand: #e2e6ec;
    --farbe-rand-stark: #cbd2dc;

    --farbe-text: #1b2430;
    --farbe-text-gedimmt: #5a6675;
    --farbe-text-leise: #808b99;

    --farbe-primaer: #1d4ed8;
    --farbe-primaer-dunkel: #1739a8;
    --farbe-primaer-hell: #eaf0ff;

    --farbe-erfolg: #12805c;
    --farbe-erfolg-hell: #e3f5ee;
    --farbe-warnung: #a35a00;
    --farbe-warnung-hell: #fdf1e0;
    --farbe-fehler: #b3261e;
    --farbe-fehler-hell: #fdecea;
    --farbe-info: #1d4ed8;
    --farbe-info-hell: #eaf0ff;

    /* Abstände */
    --abstand-xs: 0.25rem;
    --abstand-s: 0.5rem;
    --abstand-m: 1rem;
    --abstand-l: 1.5rem;
    --abstand-xl: 2.25rem;
    --abstand-xxl: 3.5rem;

    /* Radien und Schatten */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --schatten-s: 0 1px 2px rgba(27, 36, 48, 0.06);
    --schatten-m: 0 2px 10px rgba(27, 36, 48, 0.07);
    --schatten-l: 0 12px 32px rgba(27, 36, 48, 0.10);

    /* Typografie */
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

    --breite-inhalt: 1180px;
    --hoehe-kopf: 64px;
}

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

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.6;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 var(--abstand-s);
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.011em;
    color: var(--farbe-text);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--abstand-m); }

a {
    color: var(--farbe-primaer);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover { color: var(--farbe-primaer-dunkel); }

ul, ol { margin: 0 0 var(--abstand-m); padding-left: 1.35rem; }
li { margin-bottom: 0.35rem; }

hr {
    border: 0;
    border-top: 1px solid var(--farbe-rand);
    margin: var(--abstand-l) 0;
}

code {
    font-family: var(--schrift-mono);
    font-size: 0.9em;
    background: var(--farbe-flaeche-gedimmt);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

pre {
    font-family: var(--schrift-mono);
    font-size: 0.85rem;
    background: #1b2430;
    color: #e6eaf0;
    padding: var(--abstand-m);
    border-radius: var(--radius-m);
    overflow-x: auto;
}

blockquote {
    margin: var(--abstand-m) 0;
    padding: var(--abstand-m) var(--abstand-l);
    background: var(--farbe-primaer-hell);
    border-left: 3px solid var(--farbe-primaer);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    font-size: 1.03rem;
}

blockquote p:last-child { margin-bottom: 0; }

/* Fokus – deutlich sichtbar, für Tastaturbedienung */
:focus-visible {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Sprunglink für Screenreader und Tastatur */
.sprunglink {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--farbe-primaer);
    color: #fff;
    padding: var(--abstand-s) var(--abstand-m);
    z-index: 100;
    border-radius: 0 0 var(--radius-s) 0;
}

.sprunglink:focus {
    left: 0;
}

.nur-screenreader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

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

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

.inhalt--schmal { max-width: 820px; }
.inhalt--mittel { max-width: 980px; }

/* ---------- Kopfzeile und Navigation ---------- */

.kopf {
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-rand);
    position: sticky;
    top: 0;
    z-index: 30;
}

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

.marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 650;
    font-size: 1.02rem;
    color: var(--farbe-text);
    text-decoration: none;
    white-space: nowrap;
}

.marke__zeichen {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--farbe-primaer);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hauptnav {
    display: flex;
    gap: 0.15rem;
    margin-left: auto;
    align-items: center;
}

.hauptnav__link {
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-s);
    color: var(--farbe-text-gedimmt);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.hauptnav__link:hover {
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text);
}

.hauptnav__link.is-active {
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    font-weight: 600;
}

.kopf__aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    margin-left: var(--abstand-m);
    padding-left: var(--abstand-m);
    border-left: 1px solid var(--farbe-rand);
}

.benutzer {
    font-size: 0.86rem;
    color: var(--farbe-text-gedimmt);
    text-align: right;
    line-height: 1.3;
    white-space: nowrap;
}

.benutzer strong {
    display: block;
    color: var(--farbe-text);
    font-weight: 600;
}

/* Mobile Navigation unten */
.mobilnav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--farbe-flaeche);
    border-top: 1px solid var(--farbe-rand);
    z-index: 40;
    padding: 0.3rem 0 max(0.3rem, env(safe-area-inset-bottom));
}

.mobilnav__liste {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobilnav__liste li { margin: 0; }

.mobilnav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.4rem 0.2rem;
    font-size: 0.68rem;
    color: var(--farbe-text-gedimmt);
    text-decoration: none;
    font-weight: 500;
}

.mobilnav__link.is-active { color: var(--farbe-primaer); font-weight: 600; }

.mobilnav__symbol { font-size: 1.15rem; line-height: 1; }

/* ---------- Karten ---------- */

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
    padding: var(--abstand-l);
    box-shadow: var(--schatten-s);
}

.karte + .karte { margin-top: var(--abstand-l); }

.karte--flach { box-shadow: none; }
.karte--gedimmt { background: var(--farbe-flaeche-gedimmt); border-color: transparent; }
.karte--eng { padding: var(--abstand-m); }
.karte--weit { padding: var(--abstand-xl); }

.karte--hervorgehoben {
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 3px var(--farbe-primaer-hell);
}

.karte__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-m);
}

.karte__titel { margin: 0; font-size: 1.1rem; }

.karte__untertitel {
    margin: 0.15rem 0 0;
    color: var(--farbe-text-gedimmt);
    font-size: 0.9rem;
}

/* Klickbare Karte */
a.karte {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

a.karte:hover {
    border-color: var(--farbe-rand-stark);
    box-shadow: var(--schatten-m);
}

/* ---------- Raster ---------- */

.raster { display: grid; gap: var(--abstand-l); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster--seitlich { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.raster--eng { gap: var(--abstand-m); }

/* ---------- Seitenkopf ---------- */

.seitenkopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--abstand-l);
    margin-bottom: var(--abstand-xl);
    flex-wrap: wrap;
}

.seitenkopf__text { max-width: 62ch; }
.seitenkopf h1 { margin-bottom: 0.35rem; }

.seitenkopf__beschreibung {
    margin: 0;
    color: var(--farbe-text-gedimmt);
    font-size: 1.02rem;
}

.rubrik {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    margin-bottom: 0.35rem;
}

/* ---------- Schaltflächen ---------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 550;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    background: var(--farbe-primaer);
    color: #fff;
    transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}

.knopf:hover { background: var(--farbe-primaer-dunkel); color: #fff; }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.knopf--zweitrangig {
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    border-color: var(--farbe-rand-stark);
}

.knopf--zweitrangig:hover {
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text);
    border-color: var(--farbe-text-leise);
}

.knopf--leise {
    background: transparent;
    color: var(--farbe-text-gedimmt);
    padding-inline: 0.7rem;
}

.knopf--leise:hover { background: var(--farbe-flaeche-gedimmt); color: var(--farbe-text); }

.knopf--gefahr { background: var(--farbe-fehler); }
.knopf--gefahr:hover { background: #8f1e17; }

.knopf--gross { padding: 0.82rem 1.6rem; font-size: 1.02rem; }
.knopf--klein { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.knopf--voll { width: 100%; }

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

.knopfgruppe--rechts { justify-content: flex-end; }

/* ---------- Formulare ---------- */

.feld { margin-bottom: var(--abstand-m); }

.feld__beschriftung {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--farbe-text);
}

.feld__hinweis {
    display: block;
    font-size: 0.84rem;
    color: var(--farbe-text-gedimmt);
    margin-top: 0.3rem;
}

.feld__fehler {
    display: block;
    font-size: 0.86rem;
    color: var(--farbe-fehler);
    margin-top: 0.3rem;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 0.58rem 0.75rem;
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--farbe-text);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand-stark);
    border-radius: var(--radius-s);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:hover, select:hover, textarea:hover { border-color: var(--farbe-text-leise); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 3px var(--farbe-primaer-hell);
}

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--farbe-fehler);
}

textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
textarea.gross { min-height: 220px; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6675'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 16px;
    padding-right: 2rem;
}

fieldset {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
    margin: 0 0 var(--abstand-m);
}

legend {
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0 0.4rem;
}

/* Auswahloptionen als Karten */
.optionsliste { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.optionsliste li { margin: 0; }

.option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--farbe-rand-stark);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.option:hover { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }

.option input { width: auto; margin: 0.25rem 0 0; flex-shrink: 0; accent-color: var(--farbe-primaer); }

.option__text { flex: 1; font-size: 0.97rem; }

.option--richtig {
    border-color: var(--farbe-erfolg);
    background: var(--farbe-erfolg-hell);
}

.option--falsch {
    border-color: var(--farbe-fehler);
    background: var(--farbe-fehler-hell);
}

.option--markiert { border-width: 2px; }

.option__marke {
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.option--richtig .option__marke { color: var(--farbe-erfolg); }
.option--falsch .option__marke { color: var(--farbe-fehler); }

.option__erklaerung {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.86rem;
    color: var(--farbe-text-gedimmt);
}

/* Auswahl als Segmentschalter */
.segmente { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.segment {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--farbe-rand-stark);
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    background: var(--farbe-flaeche);
    transition: all 0.12s ease;
}

.segment input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.segment:hover { border-color: var(--farbe-primaer); }

.segment:has(input:checked) {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: #fff;
    font-weight: 550;
}

.segment:has(input:focus-visible) {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
}

/* Kontrollkästchen als Zeile */
.kontrollzeile {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.94rem;
}

.kontrollzeile input {
    width: auto;
    margin-top: 0.28rem;
    accent-color: var(--farbe-primaer);
}

/* ---------- Meldungen ---------- */

.meldung {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-m);
    border: 1px solid;
    margin-bottom: var(--abstand-m);
    font-size: 0.94rem;
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.meldung p:last-child { margin-bottom: 0; }
.meldung__symbol { flex-shrink: 0; font-weight: 700; }

.meldung--erfolg { background: var(--farbe-erfolg-hell); border-color: #a9dcc9; color: #0b5c42; }
.meldung--fehler  { background: var(--farbe-fehler-hell);  border-color: #f0bfbc; color: #8f1e17; }
.meldung--warnung { background: var(--farbe-warnung-hell); border-color: #f0d3a8; color: #7d4500; }
.meldung--info    { background: var(--farbe-info-hell);    border-color: #c3d3f8; color: #16358f; }

/* ---------- Etiketten ---------- */

.etikett {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    white-space: nowrap;
}

.etikett--primaer { background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); }
.etikett--erfolg  { background: var(--farbe-erfolg-hell);  color: var(--farbe-erfolg); }
.etikett--warnung { background: var(--farbe-warnung-hell); color: var(--farbe-warnung); }
.etikett--fehler  { background: var(--farbe-fehler-hell);  color: var(--farbe-fehler); }

/* ---------- Fortschritt ---------- */

.fortschritt {
    height: 8px;
    background: var(--farbe-flaeche-gedimmt);
    border-radius: 999px;
    overflow: hidden;
}

.fortschritt--schlank { height: 5px; }
.fortschritt--dick { height: 12px; }

.fortschritt__balken {
    height: 100%;
    background: var(--farbe-primaer);
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fortschritt__balken--erfolg  { background: var(--farbe-erfolg); }
.fortschritt__balken--warnung { background: var(--farbe-warnung); }
.fortschritt__balken--fehler  { background: var(--farbe-fehler); }

/* Kompetenzzeile */
.kompetenz { display: grid; gap: 0.35rem; margin-bottom: var(--abstand-m); }

.kompetenz__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--abstand-s);
    font-size: 0.92rem;
}

.kompetenz__name { font-weight: 550; }
.kompetenz__wert { font-variant-numeric: tabular-nums; font-weight: 650; }

/* Ringdiagramm für den Gesamtfortschritt */
.ring { display: flex; align-items: center; gap: var(--abstand-l); }

.ring__grafik {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    transform: rotate(-90deg);
}

.ring__spur { fill: none; stroke: var(--farbe-flaeche-gedimmt); stroke-width: 11; }

.ring__wert {
    fill: none;
    stroke: var(--farbe-primaer);
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ring__zahl {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ring__beschriftung { color: var(--farbe-text-gedimmt); font-size: 0.92rem; }

/* ---------- Kennzahlen ---------- */

.kennzahl { text-align: left; }

.kennzahl__wert {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kennzahl__beschriftung {
    font-size: 0.86rem;
    color: var(--farbe-text-gedimmt);
    margin-top: 0.2rem;
}

.kennzahl__trend { font-size: 0.82rem; font-weight: 600; margin-top: 0.2rem; }
.kennzahl__trend--auf { color: var(--farbe-erfolg); }
.kennzahl__trend--ab  { color: var(--farbe-fehler); }

/* ---------- Tabellen ---------- */

.tabellenrahmen {
    /* Verankert absolut positionierte Nachfahren – ohne das entkommen
       Elemente wie .nur-screenreader dem Scrollbereich und dehnen auf
       schmalen Displays das gesamte Dokument in die Breite. */
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche);
}

table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }

th, td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--farbe-rand);
    vertical-align: top;
}

th {
    font-weight: 650;
    font-size: 0.84rem;
    color: var(--farbe-text-gedimmt);
    background: var(--farbe-flaeche-gedimmt);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(29, 78, 216, 0.025); }

/* Tabellen innerhalb von Lerninhalten */
/* Tabellen in Lerninhalten kommen aus dem Redaktionstext und lassen sich
   deshalb nicht in einen Rahmen wickeln. Damit sie auf schmalen Displays
   nicht gequetscht oder abgeschnitten werden, wird die Tabelle selbst zum
   waagerecht scrollbaren Container. Passt der Inhalt, ist die Regel wirkungslos. */
.lerninhalt table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: var(--abstand-m);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
}

.lerninhalt table td,
.lerninhalt table th {
    min-width: 7rem;
}

/* ---------- Lerninhalte ---------- */

.lerninhalt { font-size: 1.02rem; line-height: 1.68; }
.lerninhalt > *:last-child { margin-bottom: 0; }
.lerninhalt h4 { margin-top: var(--abstand-l); font-size: 1.02rem; }
.lerninhalt h4:first-child { margin-top: 0; }
.lerninhalt ul, .lerninhalt ol { margin-bottom: var(--abstand-m); }
.lerninhalt li { margin-bottom: 0.45rem; }

.abschnittsart {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: var(--abstand-m);
}

.abschnittsart--content     { background: var(--farbe-flaeche-gedimmt); color: var(--farbe-text-gedimmt); }
.abschnittsart--example     { background: var(--farbe-info-hell);       color: var(--farbe-info); }
.abschnittsart--key_message { background: var(--farbe-warnung-hell);    color: var(--farbe-warnung); }
.abschnittsart--practice    { background: var(--farbe-erfolg-hell);     color: var(--farbe-erfolg); }
.abschnittsart--summary     { background: var(--farbe-primaer-hell);    color: var(--farbe-primaer-dunkel); }

/* ---------- Karteikarten ---------- */

.karteikarte {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: var(--abstand-xl);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-m);
}

.karteikarte__vorderseite { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.015em; }

.karteikarte__rueckseite {
    margin-top: var(--abstand-l);
    padding-top: var(--abstand-l);
    border-top: 1px solid var(--farbe-rand);
    text-align: left;
}

.karteikarte__definition { font-size: 1.08rem; font-weight: 550; margin-bottom: var(--abstand-m); }
.karteikarte__erklaerung { color: var(--farbe-text-gedimmt); font-size: 0.96rem; }

.karteikarte__beispiel {
    margin-top: var(--abstand-m);
    padding: 0.75rem 1rem;
    background: var(--farbe-flaeche-gedimmt);
    border-radius: var(--radius-m);
    font-size: 0.93rem;
}

.ist-versteckt { display: none !important; }

/* Sanfte Einblendung */
.einblenden { animation: einblenden 0.28s ease both; }

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

/* ---------- Interview ---------- */

.interview-kopf {
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-rand);
    padding: var(--abstand-m) var(--abstand-l);
}

.interview-kopf__innen {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    flex-wrap: wrap;
}

.interview-kopf__titel { font-size: 0.98rem; font-weight: 650; margin: 0; }
.interview-kopf__meta { font-size: 0.84rem; color: var(--farbe-text-gedimmt); }

.interview-buehne { max-width: 880px; margin: 0 auto; padding: var(--abstand-xl) var(--abstand-l) var(--abstand-xxl); }

.interviewer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: var(--abstand-l);
}

.interviewer__zeichen {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.interviewer__name { font-weight: 600; font-size: 0.96rem; line-height: 1.3; }
.interviewer__rolle { font-size: 0.85rem; color: var(--farbe-text-gedimmt); }

.interviewfrage {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: var(--abstand-m);
}

.interviewfrage__kontext {
    font-size: 0.95rem;
    color: var(--farbe-text-gedimmt);
    margin-bottom: var(--abstand-l);
    padding-left: var(--abstand-m);
    border-left: 2px solid var(--farbe-rand);
}

.antwortfeld { min-height: 220px; font-size: 1rem; }

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

.zeitmesser {
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
    color: var(--farbe-text-leise);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.zeitmesser--warnung { color: var(--farbe-warnung); font-weight: 600; }
.zeitmesser--kritisch { color: var(--farbe-fehler); font-weight: 600; }

/* Verlaufsanzeige des Gesprächs */
.verlauf {
    display: flex;
    gap: 3px;
    margin-top: var(--abstand-s);
}

.verlauf__schritt {
    height: 4px;
    flex: 1;
    background: var(--farbe-rand);
    border-radius: 2px;
}

.verlauf__schritt--erledigt { background: var(--farbe-primaer); }
.verlauf__schritt--aktuell { background: var(--farbe-primaer); opacity: 0.5; }

/* ---------- Bewertungen ---------- */

.bewertung { display: grid; gap: 0.7rem; }

.bewertung__zeile {
    display: grid;
    grid-template-columns: minmax(120px, 1.3fr) minmax(0, 2fr) 46px;
    align-items: center;
    gap: var(--abstand-m);
    font-size: 0.92rem;
}

.bewertung__punkte {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.feedbackliste { list-style: none; padding: 0; margin: 0; }

.feedbackliste li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
}

.feedbackliste li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.feedbackliste--gut li::before { content: "+"; color: var(--farbe-erfolg); }
.feedbackliste--verbessern li::before { content: "→"; color: var(--farbe-warnung); }
.feedbackliste--pruefung li::before { content: "•"; color: var(--farbe-text-leise); }

/* ---------- Diagramme ---------- */

.diagramm { width: 100%; overflow-x: auto; }
.diagramm svg { display: block; max-width: 100%; height: auto; }

.diagramm__linie { fill: none; stroke: var(--farbe-primaer); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.diagramm__flaeche { fill: var(--farbe-primaer); opacity: 0.08; }
.diagramm__punkt { fill: var(--farbe-flaeche); stroke: var(--farbe-primaer); stroke-width: 2.5; }
.diagramm__gitter { stroke: var(--farbe-rand); stroke-width: 1; }
.diagramm__text { fill: var(--farbe-text-leise); font-size: 11px; font-family: var(--schrift); }
.diagramm__balken { fill: var(--farbe-primaer); }

/* ---------- Listen mit Trennlinien ---------- */

.liste { list-style: none; margin: 0; padding: 0; }

.liste__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    margin: 0;
}

.liste__eintrag:last-child { border-bottom: 0; }
.liste__inhalt { min-width: 0; flex: 1; }
.liste__titel { font-weight: 550; margin-bottom: 0.1rem; }
.liste__meta { font-size: 0.86rem; color: var(--farbe-text-gedimmt); }

/* ---------- Leerer Zustand ---------- */

.leer {
    text-align: center;
    padding: var(--abstand-xl) var(--abstand-l);
    color: var(--farbe-text-gedimmt);
}

.leer__titel { font-weight: 600; color: var(--farbe-text); margin-bottom: 0.3rem; }

/* ---------- Hilfsklassen ---------- */

.gedimmt { color: var(--farbe-text-gedimmt); }
.leise { color: var(--farbe-text-leise); font-size: 0.88rem; }
.klein { font-size: 0.88rem; }
.gross { font-size: 1.1rem; }
.fett { font-weight: 650; }
.mittig { text-align: center; }
.rechts { text-align: right; }
.zahlen { font-variant-numeric: tabular-nums; }

.abstand-0 { margin: 0 !important; }
.abstand-oben-s { margin-top: var(--abstand-s); }
.abstand-oben-m { margin-top: var(--abstand-m); }
.abstand-oben-l { margin-top: var(--abstand-l); }
.abstand-oben-xl { margin-top: var(--abstand-xl); }
.abstand-unten-s { margin-bottom: var(--abstand-s); }
.abstand-unten-m { margin-bottom: var(--abstand-m); }
.abstand-unten-l { margin-bottom: var(--abstand-l); }
.abstand-unten-xl { margin-bottom: var(--abstand-xl); }

.reihe { display: flex; gap: var(--abstand-m); align-items: center; flex-wrap: wrap; }
.reihe--zwischen { justify-content: space-between; }
.reihe--oben { align-items: flex-start; }
.spalte { display: flex; flex-direction: column; gap: var(--abstand-s); }

.trennung {
    border-top: 1px solid var(--farbe-rand);
    margin-top: var(--abstand-l);
    padding-top: var(--abstand-l);
}

/* ---------- Anmeldung und Installer ---------- */

.zentrierte-seite {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-l);
    background: linear-gradient(160deg, #eef1f6 0%, #f6f7f9 55%);
}

.anmeldekarte {
    width: 100%;
    max-width: 420px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
    padding: var(--abstand-xl);
    box-shadow: var(--schatten-l);
}

.anmeldekarte__marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--abstand-l);
    font-weight: 650;
}

.installer { max-width: 780px; margin: 0 auto; padding: var(--abstand-xl) var(--abstand-l) var(--abstand-xxl); }

.schrittleiste {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 var(--abstand-xl);
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.schritt {
    flex: 1;
    min-width: 92px;
    padding-top: 0.55rem;
    border-top: 3px solid var(--farbe-rand);
    font-size: 0.8rem;
    color: var(--farbe-text-leise);
}

.schritt--aktiv { border-top-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); font-weight: 650; }
.schritt--erledigt { border-top-color: var(--farbe-erfolg); color: var(--farbe-erfolg); }

.pruefliste { list-style: none; margin: 0; padding: 0; }

.pruefliste li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    font-size: 0.93rem;
    margin: 0;
}

.pruefliste li:last-child { border-bottom: 0; }

.pruefmarke { font-weight: 700; flex-shrink: 0; width: 1.4rem; }
.pruefmarke--ok { color: var(--farbe-erfolg); }
.pruefmarke--fehler { color: var(--farbe-fehler); }
.pruefmarke--hinweis { color: var(--farbe-warnung); }

.prueftext { flex: 1; min-width: 0; }
.pruefwert { color: var(--farbe-text-gedimmt); font-size: 0.86rem; }

/* ---------- Fußzeile ---------- */

.fuss {
    border-top: 1px solid var(--farbe-rand);
    padding: var(--abstand-l);
    text-align: center;
    font-size: 0.84rem;
    color: var(--farbe-text-leise);
    background: var(--farbe-flaeche);
}

.fuss a { color: var(--farbe-text-gedimmt); }

/* ---------- Admin ---------- */

.adminnav {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: var(--abstand-xl);
    padding-bottom: var(--abstand-m);
    border-bottom: 1px solid var(--farbe-rand);
}

.adminnav__link {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-s);
    font-size: 0.9rem;
    color: var(--farbe-text-gedimmt);
    text-decoration: none;
}

.adminnav__link:hover { background: var(--farbe-flaeche-gedimmt); color: var(--farbe-text); }
.adminnav__link.is-active { background: var(--farbe-text); color: #fff; font-weight: 550; }

.filterleiste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--abstand-s);
    align-items: end;
    margin-bottom: var(--abstand-l);
}

.filterleiste .feld { margin-bottom: 0; }

.blaetterung {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
    margin-top: var(--abstand-l);
    flex-wrap: wrap;
}

.blaetterung__link {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--farbe-rand-stark);
    border-radius: var(--radius-s);
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--farbe-text-gedimmt);
    background: var(--farbe-flaeche);
}

.blaetterung__link:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.blaetterung__link.is-active { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: #fff; font-weight: 600; }

/* ---------- Aufklappbereiche ---------- */

details {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    padding: 0.75rem 1rem;
    margin-bottom: var(--abstand-m);
    background: var(--farbe-flaeche);
}

details[open] { padding-bottom: var(--abstand-m); }

summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    list-style-position: outside;
}

summary:hover { color: var(--farbe-primaer); }

details > *:not(summary) { margin-top: var(--abstand-m); }

/* ---------- Responsiv ---------- */

@media (max-width: 1024px) {
    .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster--seitlich { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .hauptnav { display: none; }
    .mobilnav { display: block; }

    body { padding-bottom: 62px; }

    .kopf__aktionen { margin-left: auto; border-left: 0; padding-left: 0; }
    .benutzer { display: none; }

    .inhalt { padding: var(--abstand-l) var(--abstand-m) var(--abstand-xl); }

    h1 { font-size: 1.5rem; }
    .interviewfrage { font-size: 1.25rem; }
    .karteikarte__vorderseite { font-size: 1.35rem; }
}

@media (max-width: 640px) {
    .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }

    .karte { padding: var(--abstand-m); border-radius: var(--radius-m); }
    .karte--weit { padding: var(--abstand-l); }

    .seitenkopf { flex-direction: column; align-items: stretch; gap: var(--abstand-m); }
    .seitenkopf .knopfgruppe { justify-content: stretch; }
    .seitenkopf .knopf { flex: 1; }

    .ring { flex-direction: column; align-items: flex-start; gap: var(--abstand-m); }
    .ring__grafik { width: 104px; height: 104px; }

    .bewertung__zeile { grid-template-columns: minmax(100px, 1fr) minmax(0, 1.4fr) 40px; gap: 0.6rem; font-size: 0.86rem; }

    .kennzahl__wert { font-size: 1.5rem; }

    .interview-buehne { padding: var(--abstand-l) var(--abstand-m) var(--abstand-xl); }

    .schrittleiste { gap: 0.2rem; }
    .schritt { min-width: 0; font-size: 0.66rem; }
}

/* ---------- Bewegungsreduktion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Druck ---------- */

@media print {
    .kopf, .mobilnav, .fuss, .knopfgruppe, .knopf { display: none !important; }
    body { background: #fff; }
    .karte { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    .inhalt { max-width: none; padding: 0; }
}