:root,
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c1017;
    --bg-subtle: #111827;
    --bg-card: #161f2e;
    --bg-elevated: #1e2a3d;
    --bg-input: #0f1623;
    --text: #eef2f8;
    --text-muted: #94a3b8;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-soft: rgba(59, 130, 246, 0.18);
    --primary-text: #93c5fd;
    --accent: #f59e0b;
    --success: #10b981;
    --success-soft: rgba(16, 185, 129, 0.18);
    --success-text: #6ee7b7;
    --warning: #f59e0b;
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --danger-text: #fca5a5;
    --border: #2a3649;
    --border-strong: #3d4f66;
    --header-bg: rgba(12, 16, 23, 0.88);
    --hero-gradient: linear-gradient(155deg, #141c2b 0%, #0c1017 45%, #121a28 100%);
    --body-gradient: radial-gradient(1100px 620px at 8% -8%, rgba(59, 130, 246, 0.2), transparent 52%),
        radial-gradient(900px 520px at 92% 4%, rgba(99, 102, 241, 0.14), transparent 48%),
        radial-gradient(700px 400px at 50% 100%, rgba(16, 185, 129, 0.06), transparent 55%),
        var(--bg);
    --radius: 10px;
    --radius-lg: 14px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --glass-bg: rgba(22, 31, 46, 0.55);
    --glass-bg-strong: rgba(14, 20, 32, 0.78);
    --glass-bg-nested: rgba(12, 16, 23, 0.45);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-strong: rgba(255, 255, 255, 0.16);
    --glass-highlight: rgba(255, 255, 255, 0.07);
    --glass-blur: 18px;
    --glass-blur-strong: 26px;
    --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.32), inset 0 1px 0 var(--glass-highlight);
    --content-max: 1380px;
    --content-wide: 1560px;
    --content-pad: clamp(1rem, 2.5vw, 2rem);
    --font: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Outfit', 'DM Sans', system-ui, sans-serif;
    --card-bg: var(--bg-card);
    /* Lesbarkeit auf hellen Flächen (QR, Pastell-Karten, …) */
    --text-on-light: #0f172a;
    --text-muted-on-light: #475569;
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f6fb;
    --bg-subtle: #e9eef5;
    --bg-card: #ffffff;
    --bg-elevated: #f0f4fa;
    --bg-input: #ffffff;
    --text: #0f172a;
    --text-muted: #5b6b82;
    --primary-soft: rgba(37, 99, 235, 0.1);
    --primary-text: #1d4ed8;
    --success-soft: rgba(16, 185, 129, 0.12);
    --success-text: #047857;
    --danger-soft: rgba(239, 68, 68, 0.1);
    --danger-text: #b91c1c;
    --border: #d5dde8;
    --border-strong: #b8c5d6;
    --header-bg: rgba(255, 255, 255, 0.92);
    --hero-gradient: linear-gradient(155deg, #e8eef8 0%, #f3f6fb 50%, #eef2f9 100%);
    --body-gradient: radial-gradient(1000px 540px at 6% -4%, rgba(59, 130, 246, 0.22), transparent 50%),
        radial-gradient(820px 420px at 98% 0%, rgba(99, 102, 241, 0.16), transparent 46%),
        radial-gradient(600px 360px at 55% 95%, rgba(16, 185, 129, 0.08), transparent 50%),
        var(--bg);
    --shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.68);
    --glass-bg-strong: rgba(255, 255, 255, 0.88);
    --glass-bg-nested: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-border-strong: rgba(15, 23, 42, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.95);
    --glass-blur: 16px;
    --glass-blur-strong: 22px;
    --glass-shadow: 0 10px 40px rgba(15, 23, 42, 0.07), inset 0 1px 0 var(--glass-highlight);
    --card-bg: var(--bg-card);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: var(--body-gradient);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    position: relative;
    isolation: isolate;
}

/* Ambient light blobs (sichtbar durch Glass-Flächen) */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
}
body::before {
    width: min(520px, 70vw);
    height: min(520px, 70vw);
    top: -12%;
    left: -8%;
    background: rgba(59, 130, 246, 0.35);
}
body::after {
    width: min(440px, 60vw);
    height: min(440px, 60vw);
    top: 35%;
    right: -10%;
    background: rgba(99, 102, 241, 0.28);
}
[data-theme="light"] body::before { background: rgba(59, 130, 246, 0.22); opacity: 0.7; }
[data-theme="light"] body::after { background: rgba(129, 140, 248, 0.2); opacity: 0.65; }

.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
}
.container-wide { max-width: var(--content-wide); }
.container-narrow { max-width: min(720px, 100%); }

/* Header – floating glass dock (Abstand für Notch / PWA) */
:root {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Unterkante Header ≈ Safe-Area + Dock + Header-Inhalt */
    --app-header-clearance: calc(var(--app-safe-top) + 5.75rem);
    --app-mobile-tab-clearance: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

.header-dock {
    position: sticky;
    top: max(0.65rem, var(--app-safe-top));
    z-index: 200;
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
    padding: 0.35rem var(--content-pad) 0;
    pointer-events: none;
}

.site-header {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), 0 12px 40px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
}

.site-header--floating {
    border-radius: 18px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.15rem;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
}

.logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: min(220px, 72vw);
    object-fit: contain;
}
.logo-img-center { margin: 0 auto 1rem; }
.auth-brand, .hero-brand { margin-bottom: 1.25rem; }
.auth-brand .logo, .hero-brand .logo { justify-content: flex-start; }
.hero-brand .logo-img { height: 52px; }
.share-card .logo { justify-content: center; margin-bottom: 1rem; }
.logo-devi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
}

.logo-text {
    font-weight: 600;
    font-size: 1rem;
}

@media (max-width: 520px) {
    .logo-text { display: none; }
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem 1rem;
    flex-wrap: wrap;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.theme-toggle:hover {
    border-color: var(--glass-border-strong);
    box-shadow: var(--glass-shadow);
}
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle__sun,
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: inline; }
[data-theme="light"] .theme-toggle__moon { display: inline; }

.main-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.main-nav a:hover { color: var(--text); }

.lang-switch {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem !important;
}

.main-content {
    flex: 1;
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
    padding: clamp(0.75rem, 1.5vw, 1.25rem) var(--content-pad) clamp(2.5rem, 4vw, 4rem);
}
.main-content > .container,
.main-content > section > .container,
.main-content > section.container {
    padding-inline: 0;
    max-width: 100%;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
    background: var(--glass-bg);
    color: var(--text);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-outline {
    background: var(--glass-bg-nested);
    color: var(--text);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-secondary:hover,
.btn-outline:hover {
    border-color: var(--glass-border-strong);
    box-shadow: var(--glass-shadow);
}
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(155deg, transparent 0%, rgba(59, 130, 246, 0.06) 50%, transparent 100%), var(--hero-gradient);
    border-bottom: 1px solid var(--glass-border);
    margin: calc(-1 * clamp(0.75rem, 1.5vw, 1.25rem)) calc(-1 * var(--content-pad)) 0;
    padding-left: var(--content-pad);
    padding-right: var(--content-pad);
    width: calc(100% + 2 * var(--content-pad));
    max-width: none;
}

.hero::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(59, 130, 246, 0.22),
        rgba(99, 102, 241, 0.14),
        rgba(16, 185, 129, 0.1),
        rgba(245, 158, 11, 0.06),
        rgba(59, 130, 246, 0.22)
    );
    animation: hero-glow-spin 28s linear infinite;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.04) 55%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: hero-shine 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes hero-glow-spin {
    to { transform: rotate(360deg); }
}

@keyframes hero-shine {
    0%, 100% { background-position: 200% 0; opacity: 0.35; }
    50% { background-position: -100% 0; opacity: 0.7; }
}

[data-theme="light"] .hero::before { opacity: 0.4; }
[data-theme="light"] .hero::after { background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5) 50%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after { animation: none; }
}

.hero .container {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

@media (max-width: 768px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { order: -1; max-width: 28rem; margin: 0 auto; }
}

.hero-content {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
    box-shadow: var(--glass-shadow);
}

.hero-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    line-height: 0;
}

.hero-visual__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    vertical-align: middle;
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.85rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0.35rem 0 1rem;
    max-width: 14em;
}

.hero-headline__accent {
    color: var(--primary);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
    text-underline-offset: 0.12em;
    text-decoration-thickness: 0.14em;
}

.hero-lead {
    max-width: 38rem;
    line-height: 1.55;
}

.lead { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 1.5rem; }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.badge {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-text);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
[data-theme="light"] .badge { border-color: rgba(37, 99, 235, 0.15); }

.hero-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}

.hero-card h3 { margin-bottom: 1rem; }

.feature-list { list-style: none; }
.feature-list li { padding: 0.4rem 0; color: var(--text-muted); }

/* Features */
.features { padding: 3rem 0; }

.section-title {
    font-family: var(--font-display);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.card:hover {
    border-color: var(--glass-border-strong);
    box-shadow: var(--shadow), var(--glass-shadow);
}

.card-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-muted); font-size: 0.95rem; }

/* Home landing */
.home-section { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.home-section--alt {
    background: var(--glass-bg-nested);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    margin: 0 calc(-1 * var(--content-pad));
    padding-left: var(--content-pad);
    padding-right: var(--content-pad);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}
.home-section-head { text-align: center; max-width: 42rem; margin: 0 auto 2rem; }
.home-section-head .section-title { margin-bottom: 0.5rem; }
.section-lead { color: var(--text-muted); font-size: 1.05rem; margin: 0; }

/* Startseite #entdecken – in style.css (immer geladen; home.css optional) */
#entdecken.home-discover {
    scroll-margin-top: 5.5rem;
}
#entdecken .home-discover__eyebrow {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-text);
    background: var(--primary-soft);
    border: 1px solid var(--glass-border);
}
#entdecken .home-discover__head .section-title { margin-bottom: 0.65rem; }
#entdecken .home-discover__head .section-lead { max-width: 40rem; margin: 0 auto; }
#entdecken .home-discover__shell {
    margin-top: 0.25rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: calc(var(--radius-lg) + 6px);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}
#entdecken .home-discover-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
@media (max-width: 900px) {
    #entdecken .home-discover-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    #entdecken .home-discover-highlights { grid-template-columns: 1fr; }
}
#entdecken .home-discover-highlight {
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: var(--glass-bg-nested);
    border: 1px solid var(--glass-border);
}
#entdecken .home-discover-highlight__icon {
    display: block;
    font-size: 1.35rem;
    margin-bottom: 0.45rem;
}
#entdecken .home-discover-highlight h3 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
}
#entdecken .home-discover-highlight p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}
#entdecken .home-discover__grid.discover-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.125rem;
    margin: 0;
    padding: 0;
}
@media (max-width: 900px) {
    #entdecken .home-discover__grid.discover-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }
}
@media (max-width: 520px) {
    #entdecken .home-discover__grid.discover-hub-grid {
        grid-template-columns: 1fr;
        max-width: 20rem;
        margin-left: auto;
        margin-right: auto;
    }
}
#entdecken a.discover-hub-card--home {
    display: block;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    box-shadow: var(--glass-shadow);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#entdecken a.discover-hub-card--home:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}
#entdecken a.discover-hub-card--home.discover-hub-card--featured {
    border-color: rgba(214, 69, 140, 0.75);
    box-shadow: 0 12px 36px rgba(214, 69, 140, 0.18);
}
#entdecken .discover-hub-card--home .discover-hub-card__media {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--primary-soft);
}
#entdecken .discover-hub-card--home .discover-hub-card__media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}
#entdecken .discover-hub-card--home .discover-hub-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    display: block;
}
#entdecken .discover-hub-card--home .discover-hub-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, transparent 30%, rgba(0,0,0,0.45) 68%, rgba(0,0,0,0.9) 100%);
}
#entdecken .discover-hub-card--home .discover-hub-card__badge,
#entdecken .discover-hub-card--home .discover-hub-card__featured {
    position: absolute;
    top: 0.55rem;
    z-index: 3;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
}
#entdecken .discover-hub-card--home .discover-hub-card__badge {
    right: 0.55rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#entdecken .discover-hub-card--home .discover-hub-card__featured {
    left: 0.55rem;
    color: var(--primary);
    background: #fff;
}
#entdecken .discover-hub-card--home .discover-hub-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0.7rem 0.8rem 0.8rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#entdecken .discover-hub-card--home .discover-hub-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}
#entdecken .discover-hub-card--home .discover-hub-card__icon-wrap {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
#entdecken .discover-hub-card--home .discover-hub-card__titles { min-width: 0; flex: 1; }
#entdecken .discover-hub-card--home .discover-hub-card__titles h3 {
    margin: 0 0 0.18rem;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.22;
    color: #fff;
    font-family: var(--font-display);
}
#entdecken .discover-hub-card--home .discover-hub-card__titles p {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.32;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#entdecken .discover-hub-card--home .discover-hub-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}
#entdecken .discover-hub-card--home .discover-hub-card__meta {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
}
#entdecken .discover-hub-card--home .discover-hub-card__cta {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    background: #fff;
    color: var(--primary);
    padding: 0.36rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
#entdecken .home-discover__note {
    text-align: center;
    font-size: 0.9rem;
    margin: 1.25rem 0 1rem;
}
#entdecken .home-discover__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.home-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.home-hero-stats li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 5.5rem;
}
.home-hero-stats strong { font-size: 1.1rem; color: var(--primary-text); }
.home-hero-stats span { font-size: 0.8rem; color: var(--text-muted); }
.home-trust-line { font-size: 0.85rem; color: var(--text-muted); margin: 1.25rem 0 0; max-width: 36rem; }
.feature-list--dense li { padding: 0.3rem 0; font-size: 0.95rem; }

.home-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .home-steps-list { grid-template-columns: 1fr; }
}
.home-step-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}
.home-step-num {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: 700;
    font-size: 0.95rem;
}
.home-step-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.home-step-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

.cards-grid--home { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
    .cards-grid--home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cards-grid--home { grid-template-columns: 1fr; }
}
.home-feature-card { transition: border-color 0.2s, box-shadow 0.2s; }
.home-feature-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.home-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .home-tiers-grid { grid-template-columns: 1fr; }
}
.home-tier-card { position: relative; padding-top: 2rem; }
.home-tier-card--highlight {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}
.home-tier-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--primary-soft);
    color: var(--primary-text);
}

.home-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}
.home-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.home-tool-pill span { font-size: 1rem; line-height: 1; }
.home-tool-pill:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-text);
}

.home-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .home-audience-grid { grid-template-columns: 1fr; }
}
.home-audience-grid .card h3 { font-size: 1.1rem; }

.home-cta {
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
    margin: 0 calc(-1 * var(--content-pad)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem));
    padding-left: var(--content-pad);
    padding-right: var(--content-pad);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #1d4ed8) 100%);
    color: #fff;
}
.home-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    max-width: var(--content-max);
}
.home-cta-text h2 { color: #fff; margin-bottom: 0.5rem; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.home-cta-text p { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 32rem; }
.home-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-cta .btn-primary { background: #fff; color: var(--primary); border-color: #fff; }
.home-cta .btn-primary:hover { background: rgba(255, 255, 255, 0.92); }
.home-cta .btn-outline { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.home-cta .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.home-social-proof { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.home-social-proof__inner { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; justify-content: center; }
.home-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow);
    min-width: 6rem;
}
.home-stat-pill strong { font-size: 1.15rem; color: var(--primary-text); }
.home-stat-pill span { font-size: 0.75rem; color: var(--text-muted); }
.home-sample-card { margin-bottom: 1rem; }
.home-sample-choices { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.75rem; }
.home-sample-choice { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95rem; }
.home-sample-img { max-width: 100%; border-radius: 8px; margin: 0.5rem 0; }
.home-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 768px) { .home-video-grid { grid-template-columns: 1fr; } }
.home-video-placeholder { aspect-ratio: 16/9; background: var(--bg-card); border: 2px dashed var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); }
.home-video-play { font-size: 2.5rem; opacity: 0.5; }
.home-compare-table td:first-child { font-weight: 500; color: var(--text-muted); }
.dashboard-onboarding { margin-bottom: 1.5rem; padding: 1.25rem; }
.onboarding-steps { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.onboarding-steps li { padding: 0.35rem 0; }
.onboarding-steps li.is-done a { color: var(--text-muted); text-decoration: line-through; }
.dashboard-empty-assessment { margin-bottom: 1.5rem; padding: 1.5rem; border-left: 4px solid var(--primary); }
.dashboard-timeline { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.35rem; }
.post-practice-header { margin-bottom: 1.5rem; }
.post-practice-progress { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 0.75rem 0; }
.post-practice-progress__bar { height: 100%; background: var(--primary); transition: width 0.3s; }
.post-practice-card { margin-bottom: 1rem; padding: 1.25rem; }
.post-practice-footer { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ─── Tägliche Übung (practice.php) ───────────────────────────── */
.practice-page {
    padding: 1.25rem 0 5rem;
}
.practice-page__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.practice-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.25rem;
}
.practice-back:hover { color: var(--primary); }

.practice-hero {
    position: relative;
    border-radius: 24px;
    padding: 1.75rem 1.5rem 1.5rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 18%, var(--bg-card)) 0%, color-mix(in srgb, #6366f1 12%, var(--bg-card)) 100%);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: 0 20px 48px -28px color-mix(in srgb, var(--primary) 45%, transparent);
    overflow: hidden;
}
.practice-hero::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -30px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 70%);
    pointer-events: none;
}
[data-theme="dark"] .practice-hero {
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 22%, #1a1f2e) 0%, color-mix(in srgb, #6366f1 18%, #151922) 100%);
    box-shadow: 0 24px 56px -32px rgba(0, 0, 0, 0.55);
}
.practice-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.practice-hero__icon {
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .practice-hero__icon {
    background: rgba(255, 255, 255, 0.1);
}
.practice-hero__title {
    margin: 0 0 0.45rem;
    font-size: clamp(1.45rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.practice-hero__sub {
    margin: 0 0 1rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 52ch;
}
.practice-hero__chips {
    list-style: none;
    padding: 0;
    margin: 0 0 1.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.practice-hero__chips li {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
[data-theme="dark"] .practice-hero__chips li {
    background: rgba(255, 255, 255, 0.08);
}

.practice-streak-card {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid color-mix(in srgb, #f97316 35%, var(--border));
    box-shadow: 0 6px 16px -8px rgba(249, 115, 22, 0.45);
}
[data-theme="dark"] .practice-streak-card {
    background: rgba(0, 0, 0, 0.25);
}
.practice-streak-card--inline {
    margin: 1.25rem auto 0;
}
.practice-streak-card__flame { font-size: 1.35rem; line-height: 1; }
.practice-streak-card__num {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
}
.practice-streak-card__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Chuỗi học / Lern-Streak Panel */
.learning-streak {
    margin: 0 0 1.5rem;
    padding: 1.15rem 1.2rem 1.2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #f97316 12%, var(--glass-bg-strong)),
        var(--glass-bg-strong)
    );
    border: 1px solid color-mix(in srgb, #f97316 28%, var(--glass-border));
    box-shadow: 0 12px 32px -16px color-mix(in srgb, #f97316 35%, transparent);
}
[data-theme="dark"] .learning-streak {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #f97316 8%, var(--glass-bg-strong)),
        var(--glass-bg-strong)
    );
}
.learning-streak--at-risk {
    border-color: color-mix(in srgb, #ef4444 45%, var(--glass-border));
    box-shadow: 0 12px 28px -14px color-mix(in srgb, #ef4444 30%, transparent);
}
.learning-streak--done-today {
    border-color: color-mix(in srgb, var(--success) 40%, var(--glass-border));
}
.learning-streak__main { margin-bottom: 0.9rem; }
.learning-streak__hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
}
.learning-streak__flame {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(249, 115, 22, 0.45));
    display: inline-block;
}
.learning-streak--done-today .learning-streak__flame {
    animation: streak-flame-idle 2.2s ease-in-out infinite;
}
@keyframes streak-flame-idle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(-4deg); }
}
.learning-streak__count {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.learning-streak__num {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}
.learning-streak__unit {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.learning-streak__tagline {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
}
.learning-streak__tagline--short {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
}
.learning-streak__record {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.learning-streak__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
    margin-bottom: 1rem;
}
.learning-streak__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.learning-streak__dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    border: 2px solid var(--border);
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.learning-streak__day.is-active .learning-streak__dot {
    background: linear-gradient(145deg, #fb923c, #ea580c);
    border-color: #ea580c;
    box-shadow: 0 4px 10px -4px rgba(234, 88, 12, 0.65);
}
.learning-streak__day.is-today .learning-streak__dot {
    transform: scale(1.08);
    outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
    outline-offset: 2px;
}
.learning-streak__day.is-today:not(.is-active) .learning-streak__dot {
    outline-color: color-mix(in srgb, #ef4444 55%, transparent);
    animation: streak-pulse 2s ease-in-out infinite;
}
@keyframes streak-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
.learning-streak__day-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
}
.learning-streak__milestone { margin-bottom: 0.85rem; }
.learning-streak__milestone-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.learning-streak__milestone-left {
    color: var(--primary-text);
    font-weight: 700;
}
.learning-streak__milestone-track {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 70%, transparent);
    overflow: hidden;
}
.learning-streak__milestone-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fb923c, #f97316, var(--primary));
    transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}
.learning-streak__milestone-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: streak-bar-shine 2.8s ease-in-out infinite;
}
@keyframes streak-bar-shine {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(120%); }
}
.learning-streak__milestones {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}
.learning-streak__milestones li.is-reached { color: #ea580c; }
.learning-streak__today {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
}
.learning-streak__today li {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 12%, var(--glass-bg-nested));
    border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border));
    color: var(--text);
}
.learning-streak__actions { margin-top: 0.25rem; }
.learning-streak__cta { font-weight: 700; }
.learning-streak__hint {
    margin: 0.55rem 0 0;
    font-size: 0.76rem;
    line-height: 1.4;
    text-align: center;
    color: var(--text-muted);
}
.learning-streak--compact {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}
.learning-streak--compact .learning-streak__week {
    margin-bottom: 0;
}
.learning-streak--compact .learning-streak__flame { font-size: 1.5rem; }
.learning-streak--compact .learning-streak__num { font-size: 1.5rem; }
.practice-done .learning-streak {
    margin: 1rem auto 1.25rem;
    max-width: 22rem;
    text-align: left;
}
.dashboard-stat__badge {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--success);
}
.dashboard-stat__badge--warn { color: #ea580c; }
.dashboard-stat--celebrate.is-glow .dashboard-stat__value {
    animation: streak-glow 2.4s ease-in-out infinite;
}
@keyframes streak-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 55%, transparent)); }
}

.dashboard-offline-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warning, #f59e0b) 18%, var(--glass-bg-strong));
    border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 40%, var(--glass-border));
    font-size: 0.88rem;
    color: var(--text);
}
.dashboard-offline-banner[hidden] { display: none !important; }

.today-focus {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--glass-bg-strong)), var(--glass-bg-strong));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--glass-border));
    box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--primary) 40%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.today-focus:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--primary) 45%, transparent);
}
.today-focus__ring {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--primary) var(--focus-deg, 0deg), var(--primary-soft) 0);
    position: relative;
}
.today-focus__ring::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
}
.today-focus__ring-icon {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
}
.today-focus__body { flex: 1; min-width: 0; }
.today-focus__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-text);
    text-transform: none;
}
.today-focus__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}
.today-focus__sub {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.today-focus__chev {
    flex-shrink: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}

/* Heute lernen / Học hôm nay */
.daily-plan {
    margin: 0 0 1.75rem;
    padding: 1.25rem 1.3rem 1.2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 14%, var(--glass-bg-strong)), var(--glass-bg-strong));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--glass-border));
    box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--primary) 35%, transparent);
}
.daily-plan__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.daily-plan__title {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}
.daily-plan__subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.daily-plan__streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, #f97316 15%, var(--glass-bg-nested));
    border: 1px solid color-mix(in srgb, #f97316 35%, var(--border));
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.daily-plan__streak-pill--risk {
    border-color: color-mix(in srgb, #ef4444 50%, var(--border));
    animation: streak-pulse 2.5s ease-in-out infinite;
}
.daily-plan__streak-pill--ok {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}
.daily-plan__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    margin-bottom: 1rem;
}
.daily-plan__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.daily-plan__dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    border: 2px solid var(--border);
}
.daily-plan__day.is-active .daily-plan__dot {
    background: linear-gradient(145deg, #fb923c, #ea580c);
    border-color: #ea580c;
}
.daily-plan__day.is-today .daily-plan__dot {
    outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 2px;
}
.daily-plan__day-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
}
.daily-plan__tasks {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.daily-plan__task {
    border-radius: 12px;
    background: var(--glass-bg-nested);
    border: 1px solid var(--glass-border);
    overflow: hidden;
}
.daily-plan__task.is-done {
    opacity: 0.72;
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.daily-plan__task-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    color: inherit;
}
.daily-plan__task-link:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.daily-plan__check {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    background: var(--success);
    color: #fff;
    flex-shrink: 0;
}
.daily-plan__check--open {
    background: transparent;
    border: 2px solid var(--border);
}
.daily-plan__task-icon { font-size: 1.25rem; flex-shrink: 0; }
.daily-plan__task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.daily-plan__task-title {
    font-weight: 700;
    font-size: 0.92rem;
}
.daily-plan__task-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.daily-plan__task-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.daily-plan__progress {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.daily-plan__done-note {
    margin: 0 0 0.65rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--primary-text);
    font-weight: 600;
}
.daily-plan__hint {
    margin: 0.5rem 0 0;
    font-size: 0.76rem;
    text-align: center;
    color: var(--text-muted);
}
.dash-section__sub {
    margin: -0.35rem 0 0.85rem;
    font-size: 0.88rem;
}
.home-hero-tagline {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-text);
}
.home-feature-card--highlight {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--glass-border));
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* 7-Tage-Plan nach Assessment */
.post-assessment-journey {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.35rem;
}
.post-assessment-journey__head {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.post-assessment-journey__badge { font-size: 1.75rem; line-height: 1; }
.post-assessment-journey__lead {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
}
.post-assessment-journey__days {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.post-assessment-journey__day {
    display: flex;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--glass-bg-nested);
}
.post-assessment-journey__day.is-current {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--glass-bg-nested));
}
.post-assessment-journey__day.is-past { opacity: 0.75; }
.post-assessment-journey__day-num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
.post-assessment-journey__day.is-current .post-assessment-journey__day-num {
    background: var(--primary);
    color: #fff;
}
.post-assessment-journey__day-body p {
    margin: 0.2rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.post-assessment-journey__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.practice-progress__track {
    height: 8px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.practice-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #6366f1);
    border-radius: 999px;
    transition: width 0.35s ease;
}
.practice-progress__label {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.practice-tip {
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
}
.practice-tip__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.practice-tip__badge { font-size: 1.1rem; }
.practice-tip__body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.practice-questions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.practice-q {
    padding: 1.35rem 1.25rem 1.5rem;
    animation: question-card-in 0.35s ease-out backwards;
}
.practice-q:nth-child(2) { animation-delay: 0.05s; }
.practice-q:nth-child(3) { animation-delay: 0.1s; }
.practice-q.is-answered {
    border-color: color-mix(in srgb, var(--success) 40%, var(--glass-border));
}
.practice-q__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}
.practice-q__num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.95rem;
    background: var(--primary-soft);
    color: var(--primary-text);
}
[data-theme="dark"] .practice-q__num { color: var(--text); }
.practice-q__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.2rem;
}
.practice-q__skill {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: var(--bg-subtle);
}
.practice-q__guide {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.practice-q__figure {
    margin: 0 0 1rem;
}
.practice-q__figure img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}
.question-figure__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.practice-q__listening {
    margin-bottom: 1rem;
}
.practice-q__prompt {
    margin: 0 0 0.25rem;
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
}
.practice-q__sub {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.practice-q__sub-label {
    font-weight: 600;
    margin-right: 0.25rem;
}
.practice-q__answers {
    margin-top: 1rem;
    padding-top: 0;
    border-top: none;
}

.practice-submit-bar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    margin-top: 0.5rem;
}
.practice-submit-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow), 0 12px 32px -16px rgba(0, 0, 0, 0.35);
}
.practice-submit-bar__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 10rem;
}
.practice-submit-bar__inner .btn-lg {
    min-width: 10rem;
    padding: 0.75rem 1.5rem;
}
.practice-form { padding-bottom: 0.5rem; }

.practice-done {
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    border-radius: 24px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.practice-done__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--success), #059669);
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--success) 55%, transparent);
}
.practice-done__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
}
.practice-done__text {
    margin: 0;
    color: var(--text-muted);
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
}
.practice-done__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.practice-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.practice-empty__icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}
.practice-empty p { color: var(--text-muted); margin-bottom: 1.25rem; }

@media (max-width: 640px) {
    .practice-hero { padding: 1.35rem 1.15rem; }
    .practice-hero__top { flex-direction: column-reverse; align-items: stretch; }
    .practice-streak-card { align-self: flex-end; }
    .practice-q { padding: 1.15rem 1rem 1.25rem; }
    .practice-submit-bar__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .practice-submit-bar__inner .btn-lg { width: 100%; }
}

/* ─── Bewerbungs-Checkliste (checklist.php) ───────────────────── */
.checklist-page {
    padding: 1.25rem 0 4rem;
}
.checklist-page__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.practice-back,
.checklist-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.25rem;
}
.practice-back:hover,
.checklist-back:hover { color: var(--primary); }

.checklist-hero {
    position: relative;
    border-radius: 24px;
    padding: 1.75rem 1.5rem 1.35rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--success) 14%, var(--bg-card)) 0%, color-mix(in srgb, var(--primary) 12%, var(--bg-card)) 100%);
    border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border));
    box-shadow: 0 20px 48px -28px color-mix(in srgb, var(--success) 35%, transparent);
    overflow: hidden;
}
.checklist-hero--complete {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    box-shadow: 0 20px 48px -24px color-mix(in srgb, var(--success) 50%, transparent);
}
.checklist-hero::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
}
[data-theme="dark"] .checklist-hero {
    background: linear-gradient(145deg, color-mix(in srgb, var(--success) 18%, #1a1f2e) 0%, color-mix(in srgb, var(--primary) 16%, #151922) 100%);
}
.checklist-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.checklist-hero__icon {
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .checklist-hero__icon { background: rgba(255, 255, 255, 0.1); }
.checklist-hero__title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.4rem, 3.5vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.checklist-hero__sub {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 52ch;
}
.checklist-hero__stat {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}
.checklist-hero__chips {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.checklist-hero__chips li {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid color-mix(in srgb, var(--success) 22%, transparent);
}
[data-theme="dark"] .checklist-hero__chips li { background: rgba(255, 255, 255, 0.08); }
.checklist-hero__ai { margin-top: 0.85rem; }

.checklist-progress-ring {
    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    flex-shrink: 0;
}
.checklist-progress-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.checklist-progress-ring__bg {
    fill: none;
    stroke: color-mix(in srgb, var(--border) 90%, transparent);
    stroke-width: 4;
}
.checklist-progress-ring__fill {
    fill: none;
    stroke: var(--success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 113;
    transition: stroke-dashoffset 0.45s ease;
}
.checklist-progress-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}

.checklist-progress-bar {
    height: 8px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.checklist-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--primary));
    border-radius: 999px;
    transition: width 0.45s ease;
}

.checklist-complete-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--success) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
}
.checklist-complete-banner__icon { font-size: 1.75rem; line-height: 1; }
.checklist-complete-banner strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}
.checklist-complete-banner p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.checklist-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.checklist-item {
    border-radius: 16px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow);
    transition: border-color 0.2s, transform 0.15s, opacity 0.2s;
    animation: question-card-in 0.35s ease-out backwards;
}
.checklist-item:nth-child(2) { animation-delay: 0.04s; }
.checklist-item:nth-child(3) { animation-delay: 0.08s; }
.checklist-item:nth-child(4) { animation-delay: 0.12s; }
.checklist-item:nth-child(5) { animation-delay: 0.16s; }
.checklist-item:nth-child(6) { animation-delay: 0.2s; }
.checklist-item:nth-child(7) { animation-delay: 0.24s; }
.checklist-item.is-done {
    border-color: color-mix(in srgb, var(--success) 35%, var(--glass-border));
    background: color-mix(in srgb, var(--success) 6%, var(--glass-bg-strong));
}
.checklist-item.is-loading { opacity: 0.65; pointer-events: none; }

.checklist-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    margin: 0;
}
.checklist-row__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.checklist-row__box {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 8px;
    border: 2px solid var(--border-strong);
    background: var(--bg-input);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.checklist-row__input:checked + .checklist-row__box {
    background: var(--success);
    border-color: var(--success);
    transform: scale(1.05);
}
.checklist-row__input:checked + .checklist-row__box::after {
    content: "✓";
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}
.checklist-row__icon {
    flex-shrink: 0;
    font-size: 1.35rem;
    width: 2.25rem;
    text-align: center;
    line-height: 1;
}
.checklist-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.checklist-row__text {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}
.checklist-item.is-done .checklist-row__text {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent);
}
.checklist-row__status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.checklist-item.is-done .checklist-row__status {
    color: var(--success-text);
}
.checklist-row:hover .checklist-row__box {
    border-color: var(--primary);
}
.checklist-row:focus-within .checklist-row__box {
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.checklist-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .checklist-hero { padding: 1.35rem 1.15rem 1.15rem; }
    .checklist-hero__top { flex-direction: row-reverse; }
    .checklist-row { padding: 0.9rem 1rem; gap: 0.7rem; }
}

.berater-quick-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.certificate-shop { padding: 2rem 0 3rem; }
.cert-shop-grid { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .cert-shop-grid { grid-template-columns: 1fr; } }
.cert-preview-frame { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #f1f5f9; height: min(70vh, 620px); }
.cert-preview-frame iframe { width: 100%; height: 100%; border: 0; }
.cert-preview-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.cert-feature-list { margin: 1rem 0; padding-left: 1.2rem; color: var(--text-muted); }
.cert-feature-list li { margin: 0.35rem 0; }
.cert-price { font-size: 1.75rem; font-weight: 700; color: var(--primary-text); margin: 0.5rem 0; }
.cert-price-note { font-size: 0.9rem; }
.cert-demo-note { margin-top: 0.75rem; font-size: 0.85rem; }
.cert-bank-qr-wrap { text-align: center; padding: 0.75rem; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border); margin: 1rem 0; }
.cert-bank-qr-img { max-width: min(100%, 280px); height: auto; display: block; margin: 0 auto; }
.cert-bank-details { margin-bottom: 1rem; }
.cert-bank-dl { margin: 0.75rem 0; font-size: 0.95rem; }
.cert-bank-dl dt { font-weight: 600; color: var(--text-muted); margin-top: 0.5rem; }
.cert-bank-dl dd { margin: 0.15rem 0 0; }
.cert-ref-code { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; color: var(--primary-text); background: var(--primary-soft); padding: 0.25rem 0.5rem; border-radius: 4px; }
.cert-bank-warning { font-size: 0.85rem; color: var(--danger, #b91c1c); margin: 0.75rem 0 0; }
.cert-demo-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }

/* Auth */
.auth-page { padding: 2rem 0 3rem; }
.auth-container { max-width: 440px; margin: 0 auto; }
.auth-card-wide { max-width: 520px; }

/* Register – breites Layout */
.auth-page--register { padding: 1.5rem 0 3.5rem; }
.auth-container--register {
    max-width: min(var(--content-max), 100%);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.auth-card-register {
    max-width: none;
    width: 100%;
    padding: 2rem 2.25rem 2.5rem;
    box-shadow: var(--shadow), 0 0 0 1px rgba(59, 130, 246, 0.08);
}
.register-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.register-header .auth-brand { margin-bottom: 0; flex-shrink: 0; }
.register-header-text h1 {
    margin: 0 0 0.35rem;
    font-size: 1.65rem;
    line-height: 1.25;
}
.auth-intro {
    color: var(--text-muted);
    font-size: 0.98rem;
    margin: 0;
    line-height: 1.55;
    max-width: 52ch;
}
.register-alert { margin-bottom: 1.25rem; }
.register-referral-banner {
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    font-size: 0.92rem;
}
.register-steps {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}
.register-steps__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
}
.register-steps__item--active {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
    color: var(--text);
}
.register-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bg-elevated);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.register-steps__item--active .register-steps__num {
    background: var(--primary);
    color: #fff;
}
.register-steps__label { font-weight: 600; }
.form-register fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.register-panel {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.register-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.register-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.register-panel__badge--muted {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.register-panel__title {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 700;
}
.register-panel__desc {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.register-panel__body { padding: 1.35rem 1.35rem 1.1rem; }
.register-grid {
    display: grid;
    gap: 1rem 1.25rem;
}
.register-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-register .field {
    display: block;
    margin: 0;
}
.form-register .field--full { grid-column: 1 / -1; }
.form-register .field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}
.form-register .field__label em {
    font-style: normal;
    color: var(--accent);
    font-weight: 700;
}
.form-register .field__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.register-placement-note {
    grid-column: 1 / -1;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.register-placement-note__text {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
}
.form-register .field input,
.form-register .field select,
.form-register .field textarea {
    width: 100%;
    padding: 0.7rem 0.95rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-register .field input:focus,
.form-register .field select:focus,
.form-register .field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.form-register .field textarea {
    min-height: 5rem;
    resize: vertical;
}
.form-register .field--checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}
.form-register .field--checkbox input {
    width: auto;
    margin-top: 0.2rem;
    accent-color: var(--primary);
}
.form-register .field--checkbox span {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
}
.form-register .field--checkbox a { color: var(--primary); }
.register-panel--optional {
    border-style: dashed;
    background: transparent;
}
.register-panel--optional[open] { border-style: solid; background: var(--bg); }
.register-panel__summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.35rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text-muted);
    user-select: none;
}
.register-panel__summary::-webkit-details-marker { display: none; }
.register-panel__chevron {
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}
.register-panel--optional[open] .register-panel__chevron {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}
.register-submit {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.register-submit__btn {
    min-width: min(100%, 320px);
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
}
.register-submit__login {
    margin: 1rem 0 0;
    font-size: 0.92rem;
    color: var(--text-muted);
}
.register-submit__login a {
    color: var(--primary);
    font-weight: 600;
}
@media (max-width: 720px) {
    .auth-card-register { padding: 1.5rem 1.15rem 2rem; }
    .register-header { flex-direction: column; gap: 0.75rem; }
    .register-grid--2 { grid-template-columns: 1fr; }
    .register-steps { flex-direction: column; }
}
@media (min-width: 900px) {
    .auth-card-register { padding: 2.25rem 2.75rem 2.75rem; }
}

.auth-card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    box-shadow: var(--glass-shadow);
}

.auth-card:not(.auth-card-register) h1 { margin-bottom: 1.5rem; }
.auth-link { margin-top: 1rem; text-align: center; }
.auth-link a { color: var(--primary); }

/* Passwort ein-/ausblenden (Corporate) */
.form .password-field,
.login-modal__field.password-field {
    display: block;
    margin-bottom: 1rem;
}
.password-field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}
.password-field__label em {
    font-style: normal;
    color: var(--accent);
    font-weight: 700;
}
.password-field__wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.password-field__wrap .password-field__input,
.password-field__wrap input[type="password"],
.password-field__wrap input[type="text"] {
    flex: 1;
    width: 100%;
    padding: 0.7rem 3rem 0.7rem 0.95rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.password-field__wrap .password-field__input:focus,
.password-field__wrap input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.glass-modal--login .password-field__wrap .password-field__input,
.glass-modal--login .password-field__wrap input {
    background: var(--glass-bg-nested);
    border-color: var(--glass-border);
}
.password-field__toggle {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 2.125rem;
    height: 2.125rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: pointer;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.password-field__wrap .password-field__input {
    position: relative;
    z-index: 1;
}
.password-field__toggle:hover,
.password-field__toggle:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-soft);
    outline: none;
}
.password-field__toggle.is-revealed {
    color: var(--primary-text);
    border-color: var(--primary);
    background: var(--primary-soft);
}
.password-field__svg {
    display: block;
    flex-shrink: 0;
}
.password-field__toggle .password-field__svg--hide {
    display: none;
}
.password-field__toggle.is-revealed .password-field__svg--show {
    display: none;
}
.password-field__toggle.is-revealed .password-field__svg--hide {
    display: block;
}
.login-modal__field.password-field {
    margin-bottom: 0.85rem;
}
.login-modal__field.password-field .password-field__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Login: Angemeldet bleiben (Karte + Toggle) */
.auth-remember {
    margin: 0.15rem 0 1rem;
}
.auth-remember--modal {
    margin: 0.25rem 0 1rem;
}
.auth-remember__card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    background: var(--glass-bg-nested);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.auth-remember__card:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--primary) 4%, var(--glass-bg-nested));
}
.auth-remember__card:has(.auth-remember__input:focus-visible) {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-remember__card:has(.auth-remember__input:checked) {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--glass-border));
    background: color-mix(in srgb, var(--primary) 10%, var(--glass-bg-nested));
}
.auth-remember__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.auth-remember__body {
    flex: 1;
    min-width: 0;
    order: 1;
}
.auth-remember__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.auth-remember__hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.4;
}
.auth-remember__card:has(.auth-remember__input:checked) .auth-remember__title {
    color: var(--primary-text);
}
.auth-remember__switch {
    order: 2;
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 28%, var(--border));
    transition: background 0.2s ease;
}
.auth-remember__switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}
[data-theme="dark"] .auth-remember__switch-knob {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.auth-remember__card:has(.auth-remember__input:checked) .auth-remember__switch {
    background: var(--primary);
}
.auth-remember__card:has(.auth-remember__input:checked) .auth-remember__switch-knob {
    transform: translateX(1.25rem);
}

/* Social Login (Google / Apple) */
.auth-social { margin: 0 0 1.25rem; }
.auth-social__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.auth-social__divider::before,
.auth-social__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-social__divider span { flex-shrink: 0; }
.auth-social__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.auth-social__buttons--row {
    flex-direction: row;
    gap: 0.65rem;
}
.auth-social__buttons--row .btn-oauth {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.45rem;
    font-size: 0.82rem;
}
.btn-oauth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-oauth:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.btn-oauth__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-oauth--google { background: #fff; color: #1f2937; border-color: #dadce0; }
[data-theme="dark"] .btn-oauth--google { background: #fff; color: #1f2937; }
.btn-oauth--apple {
    background: #000;
    color: #fff;
    border-color: #000;
}
[data-theme="dark"] .btn-oauth--apple {
    background: #fff;
    color: #000;
    border-color: #fff;
}
.login-modal .auth-social--bottom {
    margin: 1rem 0 0.5rem;
}
.login-modal .auth-social--bottom .auth-social__divider {
    margin: 0 0 0.75rem;
}
.login-modal .auth-social--bottom .auth-social__buttons--row {
    gap: 0.6rem;
}
.login-modal .auth-social:not(.auth-social--bottom) {
    margin: 0 0 0.25rem;
}
.login-modal .auth-social:not(.auth-social--bottom) .auth-social__buttons {
    gap: 0.5rem;
}
.btn-oauth--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.auth-social__divider {
    margin: 0.85rem 0 0;
}

.auth-gate {
    padding: 2rem 0 3rem;
    max-width: 28rem;
    margin: 0 auto;
}
.auth-gate__card {
    padding: 1.75rem 1.5rem;
    text-align: center;
}
.auth-gate__title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
}
.auth-gate__lead {
    margin: 0 0 1rem;
    color: var(--text-muted);
}
.auth-gate__hint {
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    color: var(--text-muted);
}
.auth-gate__footer {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
}

.form label {
    display: block;
    margin-bottom: 1rem;
}

.form label span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.form input,
.form select,
.input-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--glass-bg-nested);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.form input:focus,
.form select:focus,
.input-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.alert {
    padding: 0.85rem 1.15rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    box-shadow: var(--glass-shadow);
}
.alert-error {
    background: color-mix(in srgb, var(--danger-soft) 70%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--danger) 35%, var(--glass-border));
    color: var(--danger-text);
}
.alert-success {
    background: color-mix(in srgb, var(--success-soft) 70%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--success) 35%, var(--glass-border));
    color: var(--success-text);
}
.alert-warning {
    background: color-mix(in srgb, rgba(245, 158, 11, 0.18) 70%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--warning) 35%, var(--glass-border));
    color: var(--accent);
}

/* Dashboard */
.page-header { margin-bottom: 2rem; }
.page-header .meta { color: var(--text-muted); margin-top: 0.5rem; }

.dashboard--v2 {
    padding: 1rem 0 3rem;
}
.dashboard-hero {
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 24px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 16%, var(--bg-card)) 0%, color-mix(in srgb, #6366f1 10%, var(--bg-card)) 100%);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: 0 24px 56px -32px color-mix(in srgb, var(--primary) 40%, transparent);
    position: relative;
    overflow: hidden;
}
.dashboard-hero__grid {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: 1fr minmax(14rem, auto);
    grid-template-areas:
        "main stats"
        "badges badges";
    align-items: start;
}
.dashboard-hero__main { grid-area: main; min-width: 0; }
.dashboard-hero__stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
    gap: 0.55rem;
}
.dashboard-hero__badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.dashboard-hero::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
}
[data-theme="dark"] .dashboard-hero {
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 20%, #1a1f2e) 0%, color-mix(in srgb, #6366f1 14%, #151922) 100%);
}
.dashboard-hero__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.dashboard-hero__title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.dashboard-hero__sub {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 48ch;
}
.dashboard-hero__timeline {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
}
[data-theme="dark"] .dashboard-hero__timeline { background: rgba(255, 255, 255, 0.06); }
.dashboard-stat {
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
[data-theme="dark"] .dashboard-stat { background: rgba(0, 0, 0, 0.22); }
.dashboard-stat--accent {
    border-color: color-mix(in srgb, #f97316 40%, var(--border));
    background: color-mix(in srgb, #f97316 8%, rgba(255, 255, 255, 0.75));
}
.dashboard-stat__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.dashboard-stat__value {
    display: block;
    margin-top: 0.15rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}
.dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.dashboard--v2 .dashboard-stack > .card {
    margin: 0;
    border-radius: 16px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.dash-section-panel {
    padding: 1.15rem 1.15rem 1.25rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-card) 88%, var(--primary-soft));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .dash-section-panel {
    background: color-mix(in srgb, var(--glass-bg-strong) 90%, transparent);
}
.dash-section-panel .action-cards {
    margin-bottom: 0;
}
.dashboard-onboarding .onboarding-steps {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dashboard-onboarding .onboarding-steps li {
    padding: 0;
}
.dashboard-onboarding .onboarding-steps a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.dashboard-onboarding .onboarding-steps a:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.dashboard-onboarding .onboarding-steps li.is-done a {
    color: var(--text-muted);
    text-decoration: line-through;
}
.dashboard-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.dashboard-progress h2 { margin: 0; flex: 1 1 100%; font-size: 1.05rem; }
.dashboard-progress p { margin: 0; flex: 1 1 auto; }
.referral-box {
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
    background: var(--glass-bg-nested);
}
.referral-box h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.referral-box p { margin: 0 0 0.65rem; color: var(--text-muted); font-size: 0.9rem; }

.dashboard-continue-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--primary) 55%, transparent);
    transition: transform 0.15s, box-shadow 0.2s;
}
.dashboard-continue-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--primary) 60%, transparent);
    color: #fff;
}
.dashboard-continue-cta__icon { font-size: 1.5rem; }
.dashboard-continue-cta__text { flex: 1; min-width: 0; }
.dashboard-continue-cta__text strong { display: block; font-size: 1.05rem; }
.dashboard-continue-cta__text small { opacity: 0.88; font-size: 0.85rem; }
.dashboard-continue-cta__arrow { font-size: 1.25rem; opacity: 0.9; }

.dash-section { margin-bottom: 1.75rem; }
.dash-section__title {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.dash-section-discover {
    margin-bottom: 1.75rem;
}
.dash-section-discover .dash-section__sub {
    margin: -0.35rem 0 1rem;
    font-size: 0.92rem;
}
/* Entdecken-Karten: vollständiges Layout in topic-hubs.css (.dash-section-discover) */
@media (min-width: 1100px) {
    .dashboard--v2 .discover-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.dashboard-empty-assessment {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem 1.25rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.25rem;
    border-left: 4px solid var(--primary);
}
.dashboard-empty-assessment__icon { font-size: 2rem; line-height: 1; }
.dashboard-empty-assessment h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.dashboard-empty-assessment p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 300px);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

@media (max-width: 900px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-hero__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "stats"
            "badges";
    }
    .dashboard-hero__stats {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-empty-assessment {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .dashboard-empty-assessment .btn { justify-self: center; }
}

.action-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
@media (min-width: 1100px) {
    .dashboard--v2 .dash-section-panel .action-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.action-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    min-height: 4.25rem;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.25s;
    text-decoration: none;
    color: var(--text);
}

.action-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow), var(--glass-shadow);
}

.action-card-primary {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 14%, var(--glass-bg-strong)), var(--glass-bg-strong));
}

.action-card--featured {
    border-color: color-mix(in srgb, #f97316 40%, var(--glass-border));
    background: linear-gradient(145deg, color-mix(in srgb, #f97316 12%, var(--glass-bg-strong)), var(--glass-bg-strong));
}
.action-card--featured:hover {
    border-color: #f97316;
}

.action-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: 12px;
    background: var(--primary-soft);
    line-height: 1;
}
.action-card--featured .action-card__icon {
    background: color-mix(in srgb, #f97316 18%, transparent);
}
.action-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.15rem;
}
.action-card__label {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}
.action-card__meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}
.action-icon { font-size: 1.5rem; }

.dash-sessions-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.dash-session-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.dash-session-card__main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.dash-session-card__date {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}
.dash-session-card__level {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}
.dash-session-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.dash-sessions-empty {
    padding: 2rem 1rem;
    border-radius: 14px;
    background: var(--bg-subtle);
    border: 1px dashed var(--border);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
}

.data-table th,
.data-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    background: var(--glass-bg-nested);
    font-size: 0.85rem;
    color: var(--text-muted);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.data-table a { color: var(--primary); }

.dashboard-sidebar {
    position: sticky;
    top: 5.5rem;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.25rem 1rem;
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow);
}
.dashboard-sidebar__title {
    margin: 0 0 0.85rem;
    padding: 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.dashboard-sidebar__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.dashboard-sidebar__links a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.dashboard-sidebar__links a span:first-child {
    width: 1.5rem;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.dashboard-sidebar__links a:hover {
    background: var(--primary-soft);
    color: var(--primary-text);
}
[data-theme="dark"] .dashboard-sidebar__links a:hover { color: var(--text); }

.sidebar-links { list-style: none; }
.sidebar-links li { margin-bottom: 0.5rem; }
.sidebar-links a { color: var(--text-muted); text-decoration: none; }
.sidebar-links a:hover { color: var(--primary); }

.badge-ready { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.badge-likely_ready { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.badge-developing { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.badge-not_ready { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

.empty-state { color: var(--text-muted); padding: 2rem; text-align: center; }

/* Assessment */
.progress-bar-wrap {
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 999px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #6366f1);
    border-radius: 999px;
    transition: width 0.3s;
}

.progress-text { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }

.question-card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.15);
    box-shadow: var(--glass-shadow);
}

.level-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.question-prompt {
    margin-bottom: 0.25rem;
}
.question-text {
    font-size: clamp(1.2rem, 3.5vw, 1.45rem);
    line-height: 1.4;
    margin: 0.75rem 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.question-sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 0.25rem;
    padding: 0.65rem 0.85rem;
    background: var(--primary-soft);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.options-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }

.option-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--glass-bg-nested);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.option-label:hover { border-color: var(--primary); }
.option-label input { accent-color: var(--primary); }

/* Interaktive Assessment-Antworten */
.interaction-hint { font-size: 0.88rem; margin: 0 0 0.75rem; }

.answer-zone {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--glass-border-strong, var(--border));
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.answer-hint {
    margin: 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-muted);
    background: var(--glass-bg-nested);
    border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 10px;
}
.answer-panel {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 1.1rem 1.15rem 1.2rem;
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.answer-panel:focus-within {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        0 0 0 3px var(--primary-soft);
}
.answer-panel__title {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.answer-panel--choices .choice-pills {
    margin-bottom: 0;
    gap: 0.55rem;
}
.answer-panel--media {
    padding: 1rem 1.15rem;
}
.answer-panel--ordering {
    padding-bottom: 1rem;
}
.answer-panel--ordering .ordering-widget__hint {
    margin-top: -0.35rem;
}

.answer-field {
    display: block;
    margin: 0;
}
.answer-field__label {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.answer-field__control {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--glass-bg-strong);
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.answer-field:focus-within .answer-field__control {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.answer-field__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--primary);
    background: var(--primary-soft);
    border-right: 1px solid var(--border);
}
.answer-field__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.95rem 1.1rem;
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--text);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.answer-field__input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 85%, transparent);
}
.answer-field__input:focus {
    outline: none;
    box-shadow: none;
}
.answer-field--textarea .answer-field__control {
    flex-direction: column;
    align-items: stretch;
}
.answer-field__input--area {
    min-height: 7.5rem;
    resize: vertical;
    padding: 1rem 1.1rem 0.85rem;
}
.answer-field__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.answer-field__tip {
    font-size: 0.78rem;
    line-height: 1.35;
}
.answer-field__counter {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    padding: 0.15rem 0.5rem;
    background: var(--glass-bg-nested);
    border-radius: 6px;
}
.question-card--answered .answer-panel {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}
.assessment-intro-hint {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
}
.task-guide {
    background: var(--glass-bg-nested, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--glass-border, var(--border));
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.task-guide__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.task-guide__badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
}
.task-guide__badge--muted {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: 600;
}
.task-guide__level {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent, var(--primary));
}
.task-guide__explain {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.question-sub__label {
    font-weight: 600;
    color: var(--primary);
    margin-right: 0.25rem;
}
.question-card--interactive {
    animation: question-card-in 0.35s ease-out;
}
@keyframes question-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.question-image-wrap--interactive img {
    transition: transform 0.25s ease;
}
.question-image-wrap--interactive:hover img {
    transform: scale(1.02);
}

.choice-pills {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}
.choice-pills--tf {
    flex-direction: row;
    flex-wrap: wrap;
}
.choice-pills--tf .choice-pill { flex: 1; min-width: 8rem; }
.choice-pill {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.choice-pill__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.choice-pill__face {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.05rem;
    min-height: 3.25rem;
    background: var(--glass-bg-strong);
    border: 2px solid var(--border);
    border-radius: 14px;
    transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
    user-select: none;
}
.choice-pill:hover .choice-pill__face {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 40%, var(--glass-bg-strong));
    transform: translateY(-1px);
}
.choice-pill.is-selected .choice-pill__face {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.12);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
}
.choice-pill__letter {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary);
}
.choice-pill__letter--icon { font-size: 1.1rem; }
.choice-pill.is-selected .choice-pill__letter {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.choice-pill__text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    font-size: 0.95rem;
}
.choice-pill__mark {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s;
}
.choice-pill.is-selected .choice-pill__mark {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.choice-pill.is-selected .choice-pill__mark::after {
    content: '✓';
}
.choice-pills__count {
    display: inline-block;
    margin-left: 0.5rem;
    font-weight: 600;
    color: var(--primary);
}

.listening-box--interactive { padding: 0; margin: 0; border: none; background: transparent; box-shadow: none; }
.answer-panel--media.listening-box--interactive:focus-within {
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}
.listening-player__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.listening-player__track {
    flex: 1;
    min-width: 5rem;
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.listening-player__progress {
    height: 100%;
    width: 0;
    background: var(--primary);
    border-radius: 999px;
    transition: width 0.15s linear;
}
.listening-player__time {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.listening-player.is-playing .listening-player__play {
    background: var(--accent, var(--primary));
}
.listening-transcript-toggle {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}
.listening-transcript-toggle summary {
    cursor: pointer;
    color: var(--primary);
}

.writing-example-hint {
    margin: 0;
    padding: 0.75rem 1rem;
    display: grid;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--primary-soft) 80%, var(--bg-input));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 12px;
}
.writing-example-hint__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
}
.writing-example-hint__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

/* Legacy-Klassen (Kompatibilität) */
.interactive-field {
    position: relative;
    margin-bottom: 1.5rem;
}
.interactive-field__input {
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.interactive-field__input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.interactive-field__counter {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.rating-scale--interactive {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}
.rating-scale--interactive .rating-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.rating-scale--interactive .rating-btn input { display: none; }
.rating-scale--interactive .rating-btn__num,
.rating-scale--interactive .rating-btn span.rating-btn__num {
    display: block;
    padding: 0.75rem 0.25rem 0.25rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--glass-bg-nested, var(--bg));
    border: 2px solid var(--glass-border, var(--border));
    border-radius: 12px 12px 0 0;
    transition: all 0.2s;
}
.rating-scale--interactive .rating-btn__label {
    display: block;
    padding: 0.35rem 0.25rem 0.5rem;
    text-align: center;
    font-size: 0.65rem;
    line-height: 1.2;
    background: var(--glass-bg-nested, var(--bg));
    border: 2px solid var(--glass-border, var(--border));
    border-top: none;
    border-radius: 0 0 12px 12px;
    color: var(--text-muted);
    transition: all 0.2s;
}
.rating-scale--interactive .rating-btn:hover .rating-btn__num,
.rating-scale--interactive .rating-btn:hover .rating-btn__label {
    border-color: var(--primary);
}
.rating-scale--interactive .rating-btn input:checked ~ .rating-btn__num,
.rating-scale--interactive .rating-btn input:checked ~ .rating-btn__label {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Assessment-Aktionen, Fortschritt, interaktive Typen */
.assessment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--glass-border-strong, var(--border));
}
.assessment-actions .btn-assessment-submit {
    margin-top: 0;
    flex: 1 1 12rem;
    min-width: 10rem;
}
.btn-skip {
    flex: 0 1 auto;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-style: dashed;
}
.btn-skip:hover {
    color: var(--text);
    border-color: var(--primary);
}

.skill-progress-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}
.skill-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 4.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--glass-bg-nested);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.skill-chip--done {
    border-color: color-mix(in srgb, var(--success) 50%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, var(--glass-bg-nested));
}
.skill-chip__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 6.5rem;
    color: var(--text-muted);
}
.skill-chip__bar {
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}
.skill-chip__bar span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.skill-chip--done .skill-chip__bar span {
    background: var(--success);
}

.word-bank-template {
    display: none;
}
.word-bank-slots {
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--glass-bg-strong);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.word-bank-slot {
    display: inline-block;
    min-width: 3.5rem;
    margin: 0 0.15rem;
    padding: 0.15rem 0.45rem;
    border-bottom: 2px dashed var(--primary);
    color: var(--primary);
    font-weight: 700;
    text-align: center;
}
.word-bank-slot:not(.is-filled) {
    color: var(--text-muted);
    font-weight: 500;
}
.word-bank-pool,
.tap-seq-pool,
.categorize-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}
.word-bank-chip,
.tap-seq-chip,
.categorize-chip {
    padding: 0.55rem 0.95rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    background: var(--glass-bg-strong);
    border: 2px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.word-bank-chip:hover:not(:disabled),
.tap-seq-chip:hover:not(:disabled),
.categorize-chip:hover:not(.is-placed) {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.word-bank-chip.is-used,
.tap-seq-chip.is-used {
    opacity: 0.35;
    cursor: default;
    transform: scale(0.96);
}
.categorize-chip.is-selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.categorize-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.categorize-column {
    min-height: 5.5rem;
    padding: 0.65rem 0.75rem;
    background: var(--glass-bg-nested);
    border: 2px dashed var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.categorize-column:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background: var(--primary-soft);
}
.categorize-column__title {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.categorize-column__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.45;
}
.categorize-column__list li {
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--border);
}
.categorize-pool-label {
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
}

.tap-seq-built {
    min-height: 3.25rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--glass-bg-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.tap-seq-token {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-weight: 600;
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 8px;
}
.tap-seq-token__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
}

.assessment-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(4px);
}
.assessment-loading[hidden] {
    display: none !important;
}
.assessment-loading__box {
    text-align: center;
    padding: 1.5rem 2rem;
    background: var(--glass-bg-strong);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}
.assessment-loading__spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: assessment-spin 0.7s linear infinite;
}
@keyframes assessment-spin {
    to { transform: rotate(360deg); }
}

.assessment-intro-card h1 {
    margin-top: 0;
    font-size: 1.45rem;
}
.assessment-intro-card__lead {
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}
.assessment-intro-list {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    line-height: 1.55;
}
.assessment-intro-list li {
    margin-bottom: 0.4rem;
}
.results-compare h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.btn-assessment-submit {
    min-height: 3.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 14px;
}
.btn-assessment-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.btn-assessment-submit.is-ready:not(:disabled) {
    animation: submit-ready 0.4s ease;
}
@keyframes submit-ready {
    0% { transform: scale(0.98); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@media (max-width: 540px) {
    .choice-pills--tf { flex-direction: column; }
    .rating-scale--interactive {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .rating-scale--interactive .rating-btn__label { font-size: 0.58rem; }
    .answer-panel { padding: 0.95rem; border-radius: 14px; }
    .answer-field__input { font-size: 1rem; padding: 0.85rem 0.95rem; }
    .answer-field__input--area { min-height: 6.5rem; }
    .question-card { padding: 1.35rem 1.15rem; }
}

.rating-scale {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.rating-btn {
    flex: 1;
    cursor: pointer;
}

.rating-btn input { display: none; }
.rating-btn span {
    display: block;
    padding: 1rem;
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.rating-btn input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Results */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.result-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
}

.result-big { font-size: 2.5rem; font-weight: 700; margin: 0.5rem 0; }
.result-sub { color: var(--text-muted); }

.verdict-ready { border-color: rgba(16, 185, 129, 0.5); }
.verdict-likely_ready { border-color: rgba(59, 130, 246, 0.5); }
.verdict-developing { border-color: rgba(245, 158, 11, 0.5); }
.verdict-not_ready { border-color: rgba(239, 68, 68, 0.5); }

.ai-summary, .result-summary, .recommendations { margin: 1.5rem 0; padding: 1.5rem; }
.ai-summary h2, .result-summary h2, .recommendations h2 { margin-bottom: 1rem; }

.rec-list { list-style: none; }
.rec-item {
    padding: 1rem;
    border-left: 3px solid var(--border);
    margin-bottom: 0.75rem;
    background: var(--bg);
    border-radius: 0 8px 8px 0;
}

.rec-item.priority-high { border-left-color: var(--danger); }
.rec-item.priority-medium { border-left-color: var(--warning); }
.rec-item span { display: block; color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem; }

.results-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* AI Tools */
.ai-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    min-height: 500px;
}

@media (max-width: 768px) {
    .ai-layout { grid-template-columns: 1fr; }
}

.ai-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ai-tab {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.ai-tab:hover { background: var(--bg-card); color: var(--text); }
.ai-tab.active { background: var(--primary); color: #fff; }

.ai-main {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.ai-output {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.7;
}

.ai-form textarea {
    width: 100%;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    margin-bottom: 1rem;
    resize: vertical;
}

.chat-history { margin-top: 1.5rem; }
.chat-msg {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    max-width: 85%;
}
.chat-msg.user { background: var(--bg-elevated); margin-left: auto; }
.chat-msg.ai, .chat-msg.tutor { background: var(--primary-soft); }

/* Footer */
.site-footer {
    width: 100%;
    margin-top: auto;
    background: var(--glass-bg-strong);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    padding: 1.5rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.site-footer .container { max-width: var(--content-wide); }

.footer-brand { margin-bottom: 0.35rem; }
.footer-note { margin-top: 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
.footer-tags { margin-top: 0.35rem; font-size: 0.8rem; opacity: 0.85; }

/* Admin */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.stat-card:hover {
    border-color: var(--glass-border-strong);
    transform: translateY(-1px);
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Admin console – einheitliches Business-UI */
.admin-console__inner { padding-bottom: 3rem; }

.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.75rem;
    padding: 0.35rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    scroll-margin-top: calc(var(--app-header-clearance, 5.75rem) + 0.5rem);
}

.admin-subnav a {
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-subnav a:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

.admin-subnav a.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.admin-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 2rem;
}

@media (max-width: 900px) {
    .admin-grid { grid-template-columns: 1fr; }
}

.row-inactive { opacity: 0.5; }
.link-btn { background: none; border: none; color: var(--danger); cursor: pointer; }
.inline-form { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.checkbox-label { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; }
.checkbox-label input { margin-top: 0.25rem; }
.listening-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.listening-fallback-note { margin: 0 0 0.5rem; font-size: 0.9rem; }
.listening-transcript { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border-left: 3px solid var(--primary, #2563eb); background: var(--surface, #f8fafc); font-style: italic; }
.audio-player { width: 100%; margin-bottom: 0.5rem; }
.qs-field-hint { font-size: 0.85rem; margin: 0.35rem 0 0.75rem; }
.qs-audio-preview { margin: 0.5rem 0; }
.transcript summary { cursor: pointer; color: var(--primary); }
.legal-page h2 { margin-top: 1.5rem; }
.legal-page .legal-dl {
    display: grid;
    gap: 0.65rem 1.25rem;
    margin: 0 0 1.25rem;
}
.legal-page .legal-dl dt {
    font-weight: 600;
    margin: 0;
    color: var(--text, #0f172a);
}
.legal-page .legal-dl dd {
    margin: 0;
    color: var(--text-muted, #64748b);
    line-height: 1.5;
}
.legal-page .legal-dl dd code {
    font-size: 0.95em;
    background: var(--bg, #f1f5f9);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.legal-page .legal-links-list {
    margin: 0;
    padding-left: 1.25rem;
}
.legal-page .impressum-hint {
    font-size: 0.9rem;
    color: var(--text-muted, #64748b);
}
@media (min-width: 640px) {
    .legal-page .legal-dl {
        grid-template-columns: minmax(11rem, 13rem) 1fr;
    }
}
.footer-links a { color: var(--text-muted); }
.ai-disclaimer, .portal-disclaimer,
.ai-disclaimer-footer, .portal-disclaimer-footer {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.ai-disclaimer-footer, .portal-disclaimer-footer { margin-top: 1rem; text-align: center; }
.question-timer-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.question-timer { text-align: center; font-weight: 600; color: var(--accent); margin: 0; }
.question-timer.timer-paused { opacity: 0.55; }
.home-testimonials-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.home-testimonial { margin: 0; padding: 1.25rem; }
.home-testimonial footer { margin-top: 0.75rem; }
.verify-page .verify-card--polished {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.verify-footer { text-align: center; margin-top: 1.5rem; }
.referral-box code { display: block; padding: 0.5rem; background: var(--bg); margin-top: 0.5rem; word-break: break-all; }
.module-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.module-tabs a {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    color: var(--text-muted);
}
.module-tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.glossary-meta { margin: -0.25rem 0 1rem; font-size: 0.9rem; }
.glossary-search-wrap { margin-bottom: 1rem; }
.glossary-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
}
.glossary-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.glossary-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
}
.glossary-search__input:focus { outline: none; }
.glossary-empty { margin-top: 1rem; text-align: center; }
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.glossary-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow);
}
.glossary-card .vi { color: var(--primary); font-weight: 600; }
.learning-list { list-style: none; }
.learning-list li { padding: 0.75rem; border-bottom: 1px solid var(--border); }
.learning-list li.done { opacity: 0.6; text-decoration: line-through; }
.share-card {
    text-align: center;
    padding: 3rem;
    background: var(--glass-bg-strong);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.2);
    box-shadow: var(--glass-shadow);
}
.share-level { font-size: 3rem; font-weight: 700; color: var(--primary); }
.calendly-box { margin: 1.5rem 0; }
.answer-feedback { margin-bottom: 1rem; }
.skill-radar { margin: 1.5rem 0; }
.skill-radar-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 340px);
    gap: 2rem;
    align-items: center;
}
.skill-radar-chart { max-width: 360px; margin: 0 auto; }
.skill-radar-svg { width: 100%; height: auto; display: block; }
.skill-radar-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.skill-radar-axis { stroke: var(--border); stroke-width: 1; }
.skill-radar-area {
    fill: rgba(99, 102, 241, 0.35);
    stroke: var(--primary);
    stroke-width: 2;
    animation: skill-radar-in 0.8s ease-out;
}
.skill-radar-dot { fill: var(--primary); stroke: #fff; stroke-width: 1.5; }
.skill-radar-label { font-size: 11px; fill: var(--text-muted); font-family: inherit; }
.skill-radar-center { font-size: 22px; font-weight: 700; fill: var(--primary); font-family: inherit; }
.skill-radar-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    padding: 0 0.5rem;
}
.skill-radar-legend { list-style: none; margin: 0; padding: 0; }
.skill-radar-legend li {
    display: grid;
    grid-template-columns: 1fr 1fr 44px;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.65rem;
}
.skill-legend-name { font-size: 0.9rem; font-weight: 500; }
.skill-legend-bar {
    height: 8px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
}
.skill-legend-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #6366f1);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.skill-legend-pct { font-size: 0.85rem; font-weight: 600; text-align: right; color: var(--primary); }
@keyframes skill-radar-in {
    from { opacity: 0; transform: scale(0.85); transform-origin: center; }
    to { opacity: 1; transform: scale(1); }
}
@media (max-width: 768px) {
    .skill-radar-layout { grid-template-columns: 1fr; }
    .skill-radar-chart { max-width: 100%; }
}

/* Fragen-Studio (qs-page) */
.qs-page { padding-bottom: 3rem; }
.qs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.qs-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.qs-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin: 0 0 0.35rem;
}
.qs-hero h1 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.qs-subtitle { margin: 0; color: var(--text-muted); max-width: 42rem; line-height: 1.5; }
.qs-btn-icon { font-size: 1.1em; margin-right: 0.15em; }
.qs-toast { margin-bottom: 1rem; border-radius: var(--radius); }
.qs-quality-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.qs-quality-link:hover { color: var(--primary-text); }
.qs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.qs-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
}
.qs-stat-card--muted { opacity: 0.85; }
.qs-stat-value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.qs-stat-label { font-size: 0.8rem; color: var(--text-muted); }
.qs-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    align-items: end;
}
.qs-search-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
}
.qs-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    grid-column: 1 / -1;
}
.qs-filter { display: flex; flex-direction: column; gap: 0.25rem; min-width: 120px; }
.qs-filter span { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.qs-filter select { font-size: 0.9rem; padding: 0.45rem 0.5rem; }
.qs-toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.qs-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.qs-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.qs-chip:hover { border-color: var(--primary); color: var(--primary); }
.qs-chip--active { background: rgba(59, 130, 246, 0.12); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.qs-chip-count {
    background: var(--bg);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.qs-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 1.25rem;
    align-items: start;
}
.qs-sidebar { padding: 0; overflow: hidden; max-height: calc(100vh - 8rem); display: flex; flex-direction: column; position: sticky; top: 1rem; }
.qs-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border);
}
.qs-sidebar-head h2 { margin: 0; font-size: 1rem; }
.qs-count-badge {
    background: var(--bg);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.qs-list { overflow-y: auto; flex: 1; padding: 0.5rem; }
.qs-list-item {
    display: block;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    margin-bottom: 0.35rem;
    transition: background 0.15s, border-color 0.15s;
}
.qs-list-item:hover { background: var(--bg); border-color: var(--border); }
.qs-list-item.is-selected { background: rgba(59, 130, 246, 0.1); border-color: var(--primary); }
.qs-list-item.is-inactive { opacity: 0.55; }
.qs-list-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; }
.qs-list-title { margin: 0 0 0.25rem; font-size: 0.88rem; font-weight: 500; line-height: 1.35; }
.qs-list-meta { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.qs-level {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.qs-level--a0 { background: #fef3c7; color: #92400e; }
.qs-level--a1 { background: #dcfce7; color: #166534; }
.qs-level--a2 { background: #dbeafe; color: #1e40af; }
.qs-level--b1 { background: #ede9fe; color: #5b21b6; }
.qs-level--b2 { background: #fce7f3; color: #9d174d; }
.assessment-track-badge { margin: 0 0 1rem; font-size: 0.95rem; }
.question-image-wrap { margin: 1rem 0; text-align: center; }
.question-image-wrap img { max-width: 100%; max-height: 280px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated); }
.germany-geography-note { font-size: 0.9rem; margin: 0.25rem 0 0.5rem; }
.qs-type-pill {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
}
.qs-inactive-tag { font-size: 0.65rem; color: #b45309; font-weight: 600; }
.qs-media-dot { margin-left: 0.35rem; opacity: 0.7; }
.qs-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.qs-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-width: 0;
}
.qs-main:has(.qs-preview) { grid-template-columns: 1fr minmax(260px, 320px); }
.qs-editor { padding: 0; overflow: hidden; }
.qs-editor-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, transparent 100%);
}
.qs-editor-head h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.qs-editor-meta { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.qs-editor-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.qs-inline-form { display: inline; margin: 0; }
.qs-btn-danger { border-color: var(--danger, #dc2626) !important; color: var(--danger, #dc2626) !important; }
.qs-btn-danger:hover { background: rgba(220, 38, 38, 0.08) !important; }
.qs-tabs {
    display: flex;
    gap: 0;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.qs-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.qs-tab:hover { color: var(--text); }
.qs-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.qs-form { padding: 1.25rem; }
.qs-tab-panel { display: none; }
.qs-tab-panel.is-active { display: block; animation: qs-fade-in 0.2s ease; }
@keyframes qs-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.qs-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.qs-field span { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.qs-field input,
.qs-field select,
.qs-field textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
}
.qs-textarea-lg { min-height: 100px; resize: vertical; }
.qs-field-grid { display: grid; gap: 0.85rem; margin-bottom: 0.5rem; }
.qs-field-grid--2 { grid-template-columns: 1fr 1fr; }
.qs-field-grid--3 { grid-template-columns: repeat(3, 1fr); }
.qs-field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.qs-field--narrow { max-width: 100px; margin-bottom: 0; }
.qs-hint { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
.qs-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.qs-toggle input { width: auto; accent-color: var(--primary); }
.qs-media-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.qs-media-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
.qs-media-card-head h3 { margin: 0; font-size: 0.95rem; }
.qs-media-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 0.9rem;
}
.qs-media-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.qs-record-status { font-size: 0.82rem; color: var(--text-muted); }
.qs-record-status.is-recording { color: #dc2626; font-weight: 600; }
.qs-audio-player { width: 100%; margin: 0.5rem 0; }
.qs-file-input { font-size: 0.85rem; margin-bottom: 0.5rem; }
.qs-image-preview {
    min-height: 120px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0.75rem 0;
    background: var(--bg-card);
}
.qs-image-preview img { max-width: 100%; max-height: 200px; object-fit: contain; }
.qs-image-placeholder { color: var(--text-muted); font-size: 0.85rem; }
.qs-form-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.qs-preview {
    position: sticky;
    top: 1rem;
    padding: 0;
    overflow: hidden;
}
.qs-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border);
}
.qs-preview-head h2 { margin: 0; font-size: 1rem; }
.qs-preview-close {
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    color: var(--text-muted);
    padding: 0 0.25rem;
}
.qs-preview-close:hover { color: var(--text); }
.qs-preview-badges { padding: 0.75rem 1.15rem 0; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.qs-preview-body { padding: 0.75rem 1.15rem 1rem; }
.qs-preview-q { margin: 0 0 0.65rem; font-size: 0.9rem; line-height: 1.45; }
.qs-preview-q--vi { color: var(--text-muted); }
.qs-preview-img { width: 100%; border-radius: 8px; margin: 0.5rem 0; border: 1px solid var(--border); }
.qs-preview-options { margin: 0.5rem 0; padding-left: 1.2rem; font-size: 0.88rem; }
.qs-preview-answer { margin: 0.75rem 0; font-size: 0.88rem; }
.qs-preview-answer span { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.qs-preview-answer code {
    display: block;
    padding: 0.5rem 0.65rem;
    background: var(--bg);
    border-radius: 6px;
    word-break: break-word;
}
.qs-preview .btn-block { margin: 0 1.15rem 1.15rem; width: calc(100% - 2.3rem); }
.question-figure { margin: 1rem 0; text-align: center; }
.question-figure img { max-width: 100%; max-height: 280px; border-radius: var(--radius); border: 1px solid var(--border); }
.ordering-widget { margin-bottom: 0; }
.ordering-widget__hint {
    font-size: 0.86rem;
    margin: 0 0 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.ordering-sort {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ordering-item {
    display: grid;
    grid-template-columns: 2.25rem 2.5rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.1rem;
    padding: 0.75rem 0.85rem;
    background: var(--glass-bg-strong);
    border: 2px solid var(--border);
    border-radius: 14px;
    user-select: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ordering-item:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.ordering-item.is-dragging {
    opacity: 0.92;
    border-color: var(--primary);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.2);
    z-index: 3;
}
.ordering-item.is-tap-selected {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.1);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.ordering-item__rank {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ordering-item__grip {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}
.ordering-item__grip:active { cursor: grabbing; border-color: var(--primary); color: var(--primary); }
.ordering-item__text {
    font-size: 0.95rem;
    line-height: 1.35;
    min-width: 0;
    cursor: pointer;
}
.ordering-item__actions {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ordering-item__btn {
    width: 2.35rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}
.ordering-item__btn:hover,
.ordering-item__btn:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(37, 99, 235, 0.08);
}
.ordering-preview {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    min-height: 2.5rem;
}
.ordering-preview:empty { display: none; }
@media (max-width: 480px) {
    .ordering-item {
        grid-template-columns: 2rem 2.25rem 1fr auto;
        padding: 0.55rem 0.6rem;
    }
    .ordering-item__text { font-size: 0.88rem; }
    .ordering-item__btn { width: 2.1rem; height: 1.6rem; }
}
@media (max-width: 1100px) {
    .qs-workspace { grid-template-columns: 1fr; }
    .qs-sidebar { max-height: 320px; position: static; }
    .qs-main:has(.qs-preview) { grid-template-columns: 1fr; }
}
.career-profile-summary { color: var(--text-muted); line-height: 1.5; margin-bottom: 1.25rem; }
.career-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.career-profile-block h3 { font-size: 0.95rem; margin: 0 0 0.75rem; }
.career-fit-bars { list-style: none; margin: 0; padding: 0; }
.career-fit-bars li {
    display: grid;
    grid-template-columns: 1fr minmax(80px, 120px) 44px;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.65rem;
    font-size: 0.88rem;
}
.career-fit-bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.career-fit-bar span { display: block; height: 100%; background: linear-gradient(90deg, #059669, #10b981); border-radius: 999px; }
.career-fit-pct { font-weight: 600; text-align: right; color: #059669; }
.career-ausbildung-hint { margin-top: 1rem; padding: 0.75rem; background: var(--bg); border-radius: 8px; font-size: 0.88rem; line-height: 1.45; }
.career-trait-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.career-trait-chips li { padding: 0.35rem 0.75rem; background: rgba(59, 130, 246, 0.12); border-radius: 999px; font-size: 0.85rem; color: var(--primary); }
.germany-score { font-size: 1.75rem; font-weight: 700; color: var(--primary); margin: 0 0 1rem; }
.career-strengths-list { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.career-strengths-list li { margin-bottom: 0.35rem; }
/* Leads CRM */
.stats-grid--compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat-card--link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.stat-card--link:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}
.badge-pipeline { font-size: 0.78rem; font-weight: 600; }
.badge-pipeline--registered { background: rgba(139, 156, 179, 0.2); color: var(--text-muted); }
.badge-pipeline--assessment_open { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
[data-theme="light"] .badge-pipeline--assessment_open { color: #b45309; }
.badge-pipeline--assessed { background: var(--success-soft); color: var(--success-text); }
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-nested);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.data-table--leads td { vertical-align: top; font-size: 0.9rem; }
.lead-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.lead-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.lead-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; }
.lead-dl dt { color: var(--text-muted); margin: 0; }
.lead-dl dd { margin: 0; }
.lead-summary { line-height: 1.55; font-size: 0.92rem; }
.lead-admin-form label { display: block; margin-bottom: 1rem; }
.admin-back { margin-bottom: 1rem; }
.admin-back a { color: var(--primary); text-decoration: none; }
.partner-page .partner-register-link { margin-bottom: 0.5rem; }
.partner-page code { font-size: 0.85rem; word-break: break-all; }
@media (max-width: 900px) {
    .lead-detail-grid { grid-template-columns: 1fr; }
}

.career-profile-extra-page .career-extra-badge {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background: var(--glass-bg, rgba(255,255,255,0.12));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
}
.career-profile-extra-intro { margin-bottom: 1rem; }
.career-profile-extra-form .career-extra-fieldset {
    border: none;
    margin: 1.25rem 0 0;
    padding: 0;
}
.career-profile-extra-form legend {
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.career-profile-extra-form .field-hint {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle, #ddd);
    cursor: pointer;
    font-size: 0.9rem;
}
.checkbox-chip:has(input:checked) {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.08);
}
.strength-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.strength-scale { display: flex; gap: 0.25rem; }
.strength-pill {
    display: inline-flex;
    cursor: pointer;
}
.strength-pill input { position: absolute; opacity: 0; }
.strength-pill span {
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--border-subtle, #ccc);
    font-size: 0.85rem;
}
.strength-pill input:checked + span {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: var(--accent, #2563eb);
}
.career-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.career-source-note { font-size: 0.9rem; margin: -0.25rem 0 1rem; }
.career-profile-extra-results h3 { font-size: 0.95rem; margin: 1rem 0 0.5rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 768px) {
    .career-profile-grid { grid-template-columns: 1fr; }
    .qs-stats { grid-template-columns: 1fr; }
    .qs-toolbar { grid-template-columns: 1fr; }
    .qs-field-grid--2,
    .qs-field-grid--3 { grid-template-columns: 1fr; }
    .qs-tabs { padding: 0 0.5rem; }
}

/* —— Layout: breitere Nutzung, weniger Rand —— */
@media (min-width: 1600px) {
    :root, [data-theme="dark"], [data-theme="light"] {
        --content-max: 1440px;
        --content-wide: 1680px;
    }
}

.portal-disclaimer-footer,
.ai-disclaimer-footer {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

[data-theme="light"] .data-table th {
    background: var(--glass-bg-nested);
}

@media (max-width: 640px) {
    .header-dock { padding-inline: 0.65rem; top: max(0.4rem, env(safe-area-inset-top, 0px)); }
    .site-header--floating { border-radius: 14px; }
    .header-inner { padding: 0.5rem 0.75rem; }
    .main-nav { gap: 0.5rem; }
    .main-nav a:not(.btn) { font-size: 0.85rem; }
    .theme-toggle { width: 2.1rem; height: 2.1rem; }
    .glass-toast-root { right: 0.65rem; left: 0.65rem; max-width: none; align-items: stretch; }
}

/* Admin: Seitenkopf */
.admin-page-header {
    margin-bottom: 1.75rem;
    scroll-margin-top: calc(var(--app-header-clearance, 5.75rem) + 0.5rem);
}
.admin-back-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    margin-bottom: 0.65rem;
}
.admin-back-link:hover { text-decoration: underline; }
.admin-page-header__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.admin-page-header h1 {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.admin-page-header__meta {
    margin: 0.4rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
    max-width: 52rem;
    line-height: 1.5;
}
.admin-page-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.admin-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.admin-list-header h1 { margin: 0; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; }
.admin-list-header .meta { margin-top: 0.35rem; color: var(--text-muted); }

/* Admin: Karten */
.admin-page .card,
.admin-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
    overflow: hidden;
}
.admin-card--section { margin-bottom: 1.25rem; }
.admin-card__head {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-bg-nested);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.admin-card__head h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.admin-card__head p {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.45;
    max-width: 56rem;
}
.admin-card__body { padding: 1.5rem; }
.admin-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
}
.admin-card__foot-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-card__foot-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Admin: Formularfelder */
.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.admin-field > span:first-child {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.admin-field input,
.admin-field select,
.admin-field textarea,
.admin-input-inline {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-input-inline { width: auto; min-width: 12rem; flex: 1; max-width: 280px; }
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus,
.admin-input-inline:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.admin-field--toggle {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.admin-field--toggle span {
    text-transform: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
}
.admin-field--toggle input { width: 1.125rem; height: 1.125rem; accent-color: var(--primary); }

.admin-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}
.admin-field-grid__full,
.admin-field-grid .admin-field-grid__full { grid-column: 1 / -1; }
.admin-field-grid--models { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.admin-subpanel {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.admin-subpanel--flat { margin-top: 0; margin-bottom: 1.5rem; }
.admin-subpanel--flat:last-child { margin-bottom: 0; }
.admin-subpanel__title {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.admin-hint {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.admin-code-inline {
    display: block;
    margin-top: 0.35rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    word-break: break-all;
}

/* Admin: Alerts */
.admin-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow);
}
.admin-alert--success {
    background: color-mix(in srgb, var(--success-soft) 70%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--success) 30%, var(--glass-border));
    color: var(--success-text);
}
.admin-alert--error {
    background: color-mix(in srgb, var(--danger-soft) 70%, var(--glass-bg-strong));
    border-color: color-mix(in srgb, var(--danger) 30%, var(--glass-border));
    color: var(--danger-text);
}
.admin-alert__meta { display: block; font-size: 0.8125rem; opacity: 0.85; margin-top: 0.25rem; }
.admin-alert__body { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.5; }
.admin-page .alert { margin-bottom: 1.25rem; }

/* Admin: Einstellungen Layout */
.admin-settings-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.admin-settings-nav {
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.admin-settings-nav__link {
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.admin-settings-nav__link:hover { background: var(--bg-elevated); color: var(--text); }
.admin-settings-nav__link.is-active {
    background: var(--primary-soft);
    color: var(--primary-text);
}
[data-theme="dark"] .admin-settings-nav__link.is-active { color: var(--text); }
.admin-settings-panels { min-width: 0; }
.admin-settings-form { margin-bottom: 5rem; }

.admin-cert-assets { align-items: start; }
.admin-cert-asset {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-subtle);
}
.admin-cert-asset__title { margin: 0; font-size: 0.95rem; }
.admin-cert-asset__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background-color: #f8fafc;
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
[data-theme="dark"] .admin-cert-asset__preview {
    background-color: #1e293b;
    background-image:
        linear-gradient(45deg, #334155 25%, transparent 25%),
        linear-gradient(-45deg, #334155 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #334155 75%),
        linear-gradient(-45deg, transparent 75%, #334155 75%);
}
.admin-cert-asset__preview img { max-height: 96px; max-width: 100%; object-fit: contain; }
.admin-cert-asset__upload,
.admin-cert-asset__remove { margin: 0; }

.admin-sticky-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}
.admin-sticky-bar__hint { margin: 0; font-size: 0.875rem; max-width: 36rem; }
.admin-card__foot--split {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    justify-content: space-between;
}
.admin-card__foot--split .admin-card__foot-primary { flex-shrink: 0; }
.admin-card__foot-hint {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.8125rem;
}
.admin-settings-save-bar {
    margin: 1.25rem 0 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.admin-settings-save-bar .btn-primary {
    min-width: 12rem;
    font-weight: 600;
}
.admin-hint--prominent {
    padding: 0.65rem 0.85rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}
.admin-settings-panels .admin-card--section > form,
.admin-settings-section-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.admin-settings-panels .admin-card--section { display: flex; flex-direction: column; }
.admin-settings-panels .admin-card__body { flex: 1; }

/* Admin: Listen & Tabellen */
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.admin-filter-bar input[type="search"] {
    flex: 1;
    min-width: 200px;
    padding: 0.6rem 0.875rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9375rem;
}
.admin-filter-bar select {
    padding: 0.6rem 0.875rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9375rem;
}
.admin-page .table-wrap {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.admin-page .data-table { margin: 0; border: none; box-shadow: none; }
.admin-page .data-table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.admin-page .data-table td {
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-page .data-table tbody tr:last-child td { border-bottom: none; }
.admin-page .data-table tbody tr:hover { background: var(--bg-subtle); }

.admin-page .stat-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.admin-form-grid {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.admin-form-grid h2 {
    margin: 1.5rem 0 0.85rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.admin-form-grid h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.admin-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.admin-danger-zone {
    padding: 1.35rem 1.5rem;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
    background: var(--bg-card);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-lg);
}
.admin-danger-zone h2 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--danger-text); }
.field--full { grid-column: 1 / -1; }
.admin-answer-form { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.admin-actions-cell { white-space: nowrap; }
.admin-actions-cell .btn { margin: 0.15rem 0; }
.data-table--compact td { font-size: 0.88rem; vertical-align: top; }
.input-sm { padding: 0.45rem 0.65rem; font-size: 0.875rem; }

@media (max-width: 1024px) {
    .admin-settings-layout { grid-template-columns: 1fr; }
    .admin-settings-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .admin-field-grid--models { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .admin-field-grid { grid-template-columns: 1fr; }
    .admin-card__foot { flex-direction: column; align-items: stretch; }
    .admin-card__foot-actions { width: 100%; }
    .admin-input-inline { max-width: none; }
    .admin-sticky-bar { flex-direction: column; align-items: stretch; }
    .admin-sticky-bar .btn { width: 100%; }
}

/* Bundesländer-Challenge – Karten aus GeoJSON */
.states-quiz-figure {
    margin: 0.75rem 0 1rem;
    padding: 0.5rem;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    text-align: center;
}
.states-quiz-map {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}
.states-quiz-intro-map {
    max-width: 100%;
    margin: 0 auto 1.25rem;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border, #e2e8f0);
    background: #f8fafc;
}
.states-quiz-page .states-quiz-card {
    position: relative;
    z-index: 0;
}
.states-quiz-page .choice-pill {
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.states-quiz-page .choice-pill__face {
    pointer-events: auto;
}
.states-quiz-page .states-quiz-figure {
    pointer-events: none;
}

.home-video-embed { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.home-video-embed iframe { width: 100%; height: 100%; border: 0; }
.kanban-board { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; margin-top: 1rem; }
.kanban-col {
    flex: 0 0 200px;
    min-height: 120px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow);
}
.kanban-col-title { font-size: 0.85rem; margin: 0 0 0.25rem; text-transform: capitalize; }
.kanban-col-count { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 0.5rem; }
.kanban-card { display: block; margin-bottom: 0.5rem; padding: 0.5rem; text-decoration: none; color: inherit; }
.cefr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.admin-settings-cert-standalone { margin-top: 1.5rem; max-width: 100%; }
.admin-settings-cert-standalone .admin-cert-asset__upload { margin-top: 0.5rem; }

/* Glass toasts & modals */
.glass-toast-root {
    position: fixed;
    top: max(5.25rem, calc(env(safe-area-inset-top, 0px) + 4.5rem));
    right: max(1rem, env(safe-area-inset-right, 0px));
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.glass-toast {
    pointer-events: auto;
    padding: 0.85rem 1.15rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.35);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.35);
    box-shadow: var(--glass-shadow), 0 16px 48px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    line-height: 1.45;
    animation: glass-toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.glass-toast--success {
    border-color: color-mix(in srgb, var(--success) 35%, var(--glass-border));
    color: var(--success-text);
}
.glass-toast--error {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--glass-border));
    color: var(--danger-text);
}
.glass-toast--out {
    animation: glass-toast-out 0.3s ease forwards;
}

@keyframes glass-toast-in {
    from { opacity: 0; transform: translateX(1rem) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes glass-toast-out {
    to { opacity: 0; transform: translateX(0.75rem) scale(0.96); }
}

.glass-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(8, 12, 20, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: glass-fade-in 0.25s ease;
}
[data-theme="light"] .glass-modal-backdrop { background: rgba(15, 23, 42, 0.35); }

.glass-modal-backdrop--out { animation: glass-fade-out 0.2s ease forwards; }

.glass-modal {
    width: min(100%, 28rem);
    padding: 1.5rem 1.75rem;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
    box-shadow: var(--glass-shadow), 0 24px 64px rgba(0, 0, 0, 0.35);
    animation: glass-modal-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.glass-modal h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.glass-modal p { color: var(--text-muted); margin: 0 0 1.25rem; font-size: 0.95rem; }
.glass-modal__actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }

/* Login modal */
.login-modal[hidden] { display: none !important; }
.login-modal:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 600;
    pointer-events: auto;
}
.login-modal:not([hidden]) .login-modal__backdrop {
    pointer-events: auto;
}
.login-modal:not([hidden]) .glass-modal--login {
    pointer-events: auto;
}
.glass-modal--login {
    position: relative;
    width: min(100%, 28rem);
    max-height: min(92vh, 680px);
    overflow-y: auto;
    padding: 1.85rem 1.65rem 1.5rem;
}
.login-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.login-modal__close:hover { background: var(--bg-subtle); color: var(--text); }
.login-modal__brand { display: flex; justify-content: center; margin-bottom: 0.65rem; }
.login-modal__brand .brand-logo { margin: 0; }
.login-modal__brand .logo-img {
    height: 56px;
    max-width: min(240px, 85vw);
}
.login-modal__header {
    text-align: center;
    margin-bottom: 1.1rem;
}
.glass-modal--login h2,
.login-modal__header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}
.login-modal__subtitle {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.login-modal__error { margin-bottom: 1rem; font-size: 0.9rem; }
.login-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.login-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.login-modal__field > span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.login-modal__field input[type="text"],
.login-modal__field input[type="email"] {
    width: 100%;
    padding: 0.72rem 0.95rem;
    background: var(--glass-bg-nested);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-modal__field input[type="text"]:focus,
.login-modal__field input[type="email"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.login-modal__field.password-field {
    margin-bottom: 0.75rem;
}
.login-modal__field.password-field .password-field__wrap .password-field__input,
.login-modal__field.password-field .password-field__wrap input {
    border-radius: 10px;
}
.login-modal .auth-remember--modal {
    margin-bottom: 1.1rem;
}
@media (max-width: 380px) {
    .auth-remember__card {
        padding: 0.75rem 0.8rem;
        gap: 0.65rem;
    }
    .auth-remember__title {
        font-size: 0.86rem;
    }
    .auth-remember__hint {
        font-size: 0.72rem;
    }
}
.login-modal__submit {
    margin-top: 0.15rem;
    padding: 0.82rem 1rem;
    font-size: 1rem;
    border-radius: 10px;
}
.login-modal__footer {
    margin: 1.15rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.login-modal__footer a {
    color: var(--primary-text);
    font-weight: 600;
    text-decoration: none;
}
.login-modal__footer a:hover {
    text-decoration: underline;
}

@keyframes glass-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes glass-fade-out {
    to { opacity: 0; }
}
@keyframes glass-modal-in {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .glass-toast,
    .glass-modal,
    .glass-modal-backdrop { animation: none; }
}

/* Fallback ohne backdrop-filter (ältere Browser) */
/* Reports */
.admin-reports .report-filter { margin-bottom: 1.25rem; padding: 1rem 1.25rem; }
.report-filter__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    align-items: end;
}
.report-filter__grid label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; }
.report-filter__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.report-tabs__link {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.88rem;
    color: var(--text-muted);
    text-decoration: none;
}
.report-tabs__link:hover { color: var(--primary); background: var(--bg-subtle); }
.report-tabs__link.is-active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
.report-content { margin-top: 0.5rem; }
.report-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.report-card { padding: 1.25rem; margin-bottom: 1.25rem; }
.report-card h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.report-kpi-grid { margin-bottom: 1.5rem; }
.report-bar-row {
    display: grid;
    grid-template-columns: minmax(100px, 1.2fr) 1fr auto;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}
.report-bar-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-bar-track {
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}
.report-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #38bdf8);
    border-radius: 4px;
    min-width: 2px;
}
.report-bar-value { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.5rem; text-align: right; }
.report-inline-bar span {
    display: block;
    height: 6px;
    background: var(--primary);
    border-radius: 3px;
    max-width: 120px;
}
.report-hint { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.75rem; }
.report-export-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* —— KI-Assistenz: schwebendes Icon (über Tab-Leiste auf Mobile) —— */
.ai-assist-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    z-index: 910;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 1.1rem 0.5rem 0.5rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 60%, #ec4899 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(8px);
}
.ai-assist-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 36px rgba(99, 102, 241, 0.45), 0 6px 14px rgba(0, 0, 0, 0.18); }
.ai-assist-fab:active { transform: translateY(0) scale(0.99); }
.ai-assist-fab[aria-expanded="true"] {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #db2777 100%);
}

.ai-assist-fab__avatar {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.ai-assist-fab__avatar svg,
.ai-assist-fab__avatar img { width: 100%; height: 100%; display: block; }
.ai-assist-fab__avatar--3d { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.ai-assist-fab__avatar--3d img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
}
.ai-assist-fab__avatar::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 60%);
}
.ai-assist-fab__dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: ai-fab-pulse 1.6s infinite;
}
@keyframes ai-fab-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0); }
}
.ai-assist-fab__label {
    display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
}
.ai-assist-fab__label strong { font-size: 0.95rem; }
.ai-assist-fab__label small { font-size: 0.72rem; opacity: 0.85; font-weight: 400; }

body.has-mobile-tab-bar .ai-assist-fab {
    bottom: calc(var(--app-mobile-tab-clearance) + 0.65rem);
}

/* Mobile: runder Avatar-Button */
@media (max-width: 520px) {
    .ai-assist-fab {
        padding: 0.35rem;
        gap: 0;
        min-width: 52px;
        min-height: 52px;
        border-radius: 50%;
        justify-content: center;
    }
    .ai-assist-fab__label {
        display: none;
    }
}

/* —— Panel —— */
.ai-assist-panel {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 905;
    width: min(400px, calc(100vw - 2rem));
    max-height: min(80vh, 620px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.25),
        0 10px 30px rgba(99, 102, 241, 0.15),
        0 0 0 1px rgba(99, 102, 241, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transform-origin: bottom right;
    animation: ai-panel-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ai-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(0.93); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pseudo-Glow um das Panel */
.ai-assist-panel::before {
    content: ''; position: absolute; inset: -1px; border-radius: 21px;
    background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(236,72,153,0.4));
    z-index: -1; opacity: 0.5; filter: blur(14px);
}
/* Wichtig: Das native [hidden]-Attribut muss gegen display:flex gewinnen,
   sonst lässt sich das Panel nicht schließen. */
.ai-assist-panel[hidden] { display: none !important; }

/* Header */
.ai-assist-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.9rem 1rem 0.75rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(236,72,153,0.05));
    border-bottom: 1px solid var(--border);
}
.ai-assist-panel__brand { display: flex; align-items: center; gap: 0.65rem; }
.ai-assist-panel__avatar {
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 44px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.ai-assist-panel__avatar svg,
.ai-assist-panel__avatar img { width: 100%; height: 100%; display: block; }
.ai-assist-panel__avatar { position: relative; background: transparent; }
.ai-assist-panel__avatar--3d { background: transparent; }
.ai-assist-panel__avatar--3d img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
}
.ai-assist-panel__head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.ai-assist-panel__status { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-muted, #6b7280); }
.ai-assist-panel__status .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: ai-fab-pulse 1.8s infinite; }
.ai-assist-panel__close {
    width: 32px; height: 32px; display: grid; place-items: center;
    background: none; border: none; border-radius: 10px; color: var(--text-muted, #6b7280);
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ai-assist-panel__close:hover { background: rgba(99,102,241,0.08); color: var(--primary); }

/* CTA-Karte (führt zum vollen Coach) */
.ai-assist-panel__cta {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 0.85rem 0.95rem 0.4rem; padding: 0.75rem 0.85rem;
    background: linear-gradient(135deg, #6366f1, #a855f7 70%, #ec4899);
    color: #fff;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ai-assist-panel__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.45);
    color: #fff;
}
.ai-assist-panel__cta-icon { font-size: 1.6rem; flex: 0 0 auto; }
.ai-assist-panel__cta-text { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.ai-assist-panel__cta-text strong { font-size: 0.92rem; }
.ai-assist-panel__cta-text small { font-size: 0.75rem; opacity: 0.85; }
.ai-assist-panel__cta-arrow { font-size: 1.1rem; opacity: 0.85; }

.ai-assist-panel__hint {
    font-size: 0.78rem; color: var(--text-muted, #6b7280);
    margin: 0.3rem 1rem 0.5rem;
}

/* Quick-Buttons */
.ai-assist-quick {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0 1rem; margin-bottom: 0.5rem;
}
.ai-assist-quick__btn {
    font-size: 0.78rem;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: inherit;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.ai-assist-quick__btn:hover {
    border-color: var(--primary);
    background: rgba(99,102,241,0.07);
    color: var(--primary);
    transform: translateY(-1px);
}

/* Output-Bubble */
.ai-assist-output {
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.85rem 1rem;
    margin: 0 1rem 0.65rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.04));
    border: 1px solid rgba(99,102,241,0.18);
    animation: ai-panel-in 0.2s ease;
}

/* Form */
.ai-assist-form { padding: 0.5rem 1rem 1rem; border-top: 1px solid var(--border); }
.ai-assist-form__row {
    display: grid; grid-template-columns: 1fr auto; gap: 0.55rem; align-items: end;
}
.ai-assist-form textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: inherit;
    resize: none;
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-assist-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.ai-assist-form__actions { display: flex; flex-direction: column; gap: 0.4rem; }
.ai-assist-form__mic,
.ai-assist-form__send {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}
.ai-assist-form__mic {
    background: var(--bg);
    color: var(--text-muted, #6b7280);
    border: 1px solid var(--border);
}
.ai-assist-form__mic:hover { color: var(--primary); border-color: var(--primary); }
.ai-assist-form__mic.is-recording {
    background: #dc2626; color: #fff; border-color: #dc2626;
    animation: ai-fab-pulse 1s infinite;
}
.ai-assist-form__send {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.ai-assist-form__send:hover { transform: translateY(-1px); }

.ai-assist-panel.is-loading .ai-assist-output { opacity: 0.6; }
.ai-assist-panel.is-loading .ai-assist-output::after {
    content: '⋯'; display: inline-block; margin-left: 0.3rem; animation: ai-dots 1.4s infinite;
}
@keyframes ai-dots {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* Mobile: zwischen Header und Tab-Leiste */
body.has-mobile-tab-bar .ai-assist-panel {
    bottom: calc(var(--app-mobile-tab-clearance) + 4.25rem);
    max-height: min(
        70dvh,
        calc(100dvh - var(--app-mobile-tab-clearance) - 6.5rem - var(--app-safe-top))
    );
}

@media (max-width: 520px) {
    .ai-assist-panel {
        left: max(0.5rem, env(safe-area-inset-left, 0px));
        right: max(0.5rem, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        border-radius: 18px;
    }
}

/* Dark Mode subtile Anpassung */
[data-theme="dark"] .ai-assist-panel {
    background: rgba(17, 24, 39, 0.92);
}
[data-theme="dark"] .ai-assist-form textarea {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .ai-assist-form__mic {
    background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .ai-assist-panel { background: rgba(17, 24, 39, 0.92); }
[data-theme="dark"] .ai-assist-form textarea { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .ai-assist-form__mic { background: rgba(255,255,255,0.04); }
.btn-ai-inline {
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
    margin-top: 0.35rem;
    border-radius: var(--radius);
    border: 1px dashed var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
}
.progress-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 140px; margin: 1rem 0; }
.progress-chart__bar {
    flex: 1;
    min-width: 24px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 60%, transparent));
    border-radius: 4px 4px 0 0;
    position: relative;
}
.progress-chart__bar span {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    white-space: nowrap;
    padding-bottom: 0.25rem;
}
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.analytics-stat { text-align: center; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
.analytics-stat strong { display: block; font-size: 1.75rem; color: var(--primary); }
.dashboard-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.badge-pill { font-size: 0.8rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 15%, transparent); border: 1px solid var(--border); }

/* Aussprache-Bewertung */
.speech-scores-wrap { margin: 1rem 0; }
.speech-scores { padding: 0.75rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.speech-scores__provider { margin: 0 0 0.5rem; }
.speech-score-row { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.88rem; }
.speech-score-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.speech-score-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.4s ease; }
.speech-word-scores { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.speech-word-scores li { font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border); }
.speech-word-scores li.is-weak { border-color: #dc2626; color: #dc2626; }
#speech-record.is-recording { background: #dc2626; color: #fff; border-color: #dc2626; }

/* Tools-Hub */
.tools-hub .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.tools-card { display: block; padding: 1rem; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
.tools-card:hover { transform: translateY(-2px); }
.tools-card__icon { font-size: 1.75rem; display: block; margin-bottom: 0.35rem; }
.tools-card h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.tools-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.tools-cat-title { margin: 1.5rem 0 0.75rem; font-size: 1.1rem; }
.tools-back { margin-bottom: 0.75rem; }
.tools-page-head { margin-bottom: 1.25rem; }
.tools-page-icon { font-size: 2rem; }
.changelog-list { list-style: none; padding: 0; }
.changelog-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.error-diary-list { padding-left: 1.2rem; }

/* Insight-Blöcke (Teilnehmer-Auswertung) */
.insight-card { border-left: 4px solid var(--primary); }
.insight-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.insight-stat { padding: 0.75rem; background: var(--bg-card); border-radius: 10px; text-align: center; }
.insight-stat__label { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.insight-stat strong { font-size: 1.25rem; }
.insight-stat--delta strong.pos { color: #16a34a; }
.insight-stat--delta strong.neg { color: #dc2626; }
.insight-skills, .insight-weak { margin: 1rem 0; }
.insight-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.insight-column ul { padding-left: 1.2rem; }
.insight-risks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.insight-risks .risk { padding: 0.35rem 0.65rem; border-radius: 16px; background: rgba(220,38,38,0.1); font-size: 0.85rem; }
.insight-risks .risk--medium { background: rgba(245,158,11,0.15); }
.insight-risks .risk--low { background: rgba(16,185,129,0.12); }
.insight-next-steps { padding-left: 1.5rem; }
.insight-next-steps li { margin: 0.5rem 0; }
.insight-next-steps .badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: rgba(99,102,241,0.15); margin-right: 0.25rem; }
.insight-opener blockquote { border-left: 3px solid var(--primary); padding: 0.5rem 0.75rem; margin: 0.5rem 0; background: rgba(99,102,241,0.06); }
.insight-summary { padding: 0.75rem; background: rgba(99,102,241,0.05); border-radius: 8px; margin: 0.5rem 0 1rem; }
.insight-verdict { padding: 0.5rem 0.75rem; border-radius: 8px; font-weight: 500; }
.insight-verdict--on_track { background: rgba(16,185,129,0.12); }
.insight-verdict--needs_support { background: rgba(245,158,11,0.15); }
.insight-verdict--at_risk { background: rgba(220,38,38,0.12); }
.insights-page .back-link { display: inline-block; margin-bottom: 1rem; }
.insight-week { padding-left: 1.5rem; }
.insight-week li { margin: 0.4rem 0; }
.insight-week .badge { background: var(--primary); color: #fff; padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.75rem; margin-right: 0.5rem; }
.insight-motivation { border-left: 3px solid #16a34a; padding: 0.5rem 0.75rem; margin: 1rem 0; font-style: italic; background: rgba(16,185,129,0.06); }

/* Simulationen */
.simulations-page .sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.sim-card { overflow: hidden; padding: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.15s; }
.sim-card:hover { transform: translateY(-2px); }
.sim-card__media { position: relative; aspect-ratio: 16 / 10; background: rgba(99,102,241,0.08); overflow: hidden; }
.sim-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sim-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; }
.sim-card__cat { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(0,0,0,0.55); color: #fff; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; }
.sim-card__profbadge { position: absolute; top: 0.5rem; right: 0.5rem; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #fff; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; box-shadow: 0 4px 12px -4px rgba(234,88,12,0.5); display: inline-flex; align-items: center; gap: 0.25rem; }
.sim-card--has-pro { border-color: rgba(234, 88, 12, 0.25); }
.sim-card--has-pro:hover { border-color: rgba(234, 88, 12, 0.5); }
.sim-card__body { padding: 0.85rem; }
.sim-card__body h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.sim-card__levels { margin-top: 0.5rem; display: flex; gap: 0.25rem; flex-wrap: wrap; }
.sim-card__levels .badge { background: rgba(99,102,241,0.15); padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.7rem; }
.recent-sims { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.recent-sim-pill { padding: 0.35rem 0.65rem; border-radius: 20px; background: var(--bg-elevated); font-size: 0.8rem; text-decoration: none; color: var(--text); }

/* ============================================================== */
/* Simulation Play — modernes Bewerbungs-Rollenspiel               */
/* ============================================================== */
.simulation-play.sim-play--pro {
    --sim-accent: #ea580c;      /* warmes Orange für die Vorstellungsgespräch-Linie */
    --sim-accent-soft: rgba(234, 88, 12, 0.10);
    --sim-accent-strong: rgba(234, 88, 12, 0.25);
    --sim-warm-bg: linear-gradient(135deg, #fff7ed 0%, #fef3c7 50%, #fde68a 100%);
    --sim-dark-bg: linear-gradient(135deg, #1f2937 0%, #312e81 50%, #4c1d95 100%);
    padding-top: 1rem;
    padding-bottom: 3rem;
}
.sim-back { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.sim-back:hover { color: var(--primary); }

/* ─── Hero (Picker-Modus) ─────────────────────────────────────── */
.sim-hero {
    position: relative;
    border-radius: 24px;
    padding: 2.25rem 2rem 2rem;
    margin: 1rem 0 2rem;
    background: var(--sim-warm-bg);
    color: var(--text);
    overflow: hidden;
    box-shadow: 0 20px 50px -25px rgba(234, 88, 12, 0.35), inset 0 0 0 1px rgba(255,255,255,0.4);
}
[data-theme="dark"] .sim-hero {
    background: var(--sim-dark-bg);
    color: #f3f4f6;
    box-shadow: 0 20px 50px -25px rgba(76, 29, 149, 0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.sim-hero::before {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.sim-hero__badge { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
.sim-hero__icon { font-size: 2rem; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 14px; background: rgba(255,255,255,0.7); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.2); }
[data-theme="dark"] .sim-hero__icon { background: rgba(255,255,255,0.1); }
.sim-hero__pill { display: inline-block; padding: 0.3rem 0.75rem; background: rgba(234, 88, 12, 0.15); color: var(--sim-accent); border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.sim-hero__title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 0.6rem; font-weight: 700; }
.sim-hero__sub { max-width: 60ch; font-size: 1rem; line-height: 1.55; margin: 0 0 1.1rem; opacity: 0.85; }
.sim-hero__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sim-hero__chips li { background: rgba(255,255,255,0.65); padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.1); }
[data-theme="dark"] .sim-hero__chips li { background: rgba(255,255,255,0.08); }

/* ─── Picker ──────────────────────────────────────────────────── */
.sim-picker { margin-top: 2rem; }
.sim-picker__head h2 { margin: 0 0 0.25rem; font-size: 1.3rem; }
.sim-picker__head { margin-bottom: 1rem; }

.sim-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}
.sim-job {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: 16px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.sim-job:hover {
    transform: translateY(-2px);
    border-color: var(--sim-accent);
    box-shadow: 0 12px 30px -15px rgba(234, 88, 12, 0.4);
}
.sim-job.is-active {
    border-color: var(--sim-accent);
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 12px 30px -10px rgba(234, 88, 12, 0.45);
}
[data-theme="dark"] .sim-job.is-active {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: var(--text-on-light);
}
[data-theme="dark"] .sim-job.is-active .sim-job__industry {
    color: var(--text-muted-on-light);
}
.sim-job__icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.sim-job__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sim-job__title { font-size: 0.95rem; line-height: 1.2; margin-bottom: 0.15rem; }
.sim-job__industry { font-size: 0.78rem; color: var(--text-muted); }
.sim-job__arrow { color: var(--sim-accent); font-weight: 700; font-size: 1.1rem; opacity: 0; transition: opacity 0.18s, transform 0.18s; }
.sim-job:hover .sim-job__arrow, .sim-job.is-active .sim-job__arrow { opacity: 1; transform: translateX(3px); }

/* Roles (Azubi vs. Fachkraft) */
.sim-roles { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px dashed var(--border); }
.sim-roles h2 { margin: 0 0 0.25rem; font-size: 1.3rem; }
.sim-roles__chosen { margin: 0 0 1.25rem; font-size: 0.95rem; }
.sim-roles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.sim-role-card {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 1.4rem 1.25rem;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    border: 1.5px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.sim-role-card:hover { transform: translateY(-3px); box-shadow: 0 18px 45px -20px rgba(0,0,0,0.3); }
.sim-role-card--azubi {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-color: #67e8f9;
    color: #0e7490;
}
.sim-role-card--azubi:hover { border-color: #06b6d4; }
.sim-role-card--pro {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    border-color: #fdba74;
    color: #9a3412;
}
.sim-role-card--pro:hover { border-color: #f97316; }
/* Rollen-Karten: Pastell-Hintergrund bleibt → dunkle Schrift wie im Light Mode */
.sim-role-card__icon { font-size: 2.25rem; }
.sim-role-card h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.sim-role-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; opacity: 0.88; }
.sim-role-card__cta { margin-top: auto; font-weight: 600; font-size: 0.9rem; align-self: flex-end; }

/* ─── Play-Header (nach Auswahl) ──────────────────────────────── */
.sim-play__head--hero {
    padding: 1.4rem 1.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffe4e6 100%);
    box-shadow: 0 14px 40px -20px rgba(234, 88, 12, 0.35);
    margin: 1rem 0 1.5rem;
}
/* Helle Flächen: lokale Text-Variablen überschreiben globales --text (hell) */
html[data-theme="dark"] .surface-light {
    --text: #0f172a;
    --text-muted: #475569;
    color: #0f172a;
}

html[data-theme="dark"] .sim-play__head--hero,
html[data-theme="dark"] .sim-play__head--hero.surface-light {
    background: linear-gradient(135deg, #fff7ed 0%, #ffe4e6 100%);
    color: #0f172a;
}

html[data-theme="dark"] .sim-play__head--hero h1,
html[data-theme="dark"] .sim-play__head--hero .sim-play__title-text h1 {
    color: #0f172a;
}

html[data-theme="dark"] .sim-play__head--hero .text-muted,
html[data-theme="dark"] .sim-play__head--hero p.text-muted {
    color: #475569;
}
.sim-play__crumbs { margin-bottom: 0.6rem; }
.sim-play__crumb { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 0.2rem; }
.sim-play__crumb:hover { color: var(--sim-accent); background: rgba(255,255,255,0.8); }
html[data-theme="dark"] .sim-play__head--hero .sim-play__crumb {
    background: rgba(255, 255, 255, 0.55);
    color: #475569;
}
html[data-theme="dark"] .sim-play__head--hero .sim-play__crumb:hover {
    background: rgba(255, 255, 255, 0.85);
    color: var(--sim-accent);
}
.sim-play__title-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sim-play__avatar {
    font-size: 2.5rem;
    width: 4rem; height: 4rem;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 25px -10px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
[data-theme="dark"] .sim-play__head--hero .sim-play__avatar {
    background: #fff;
}
html[data-theme="dark"] .sim-play__head--hero .sim-tag {
    background: rgba(255, 255, 255, 0.65);
    color: #0f172a;
}
html[data-theme="dark"] .sim-play__head--hero .sim-tag--role {
    background: rgba(234, 88, 12, 0.18);
    color: #c2410c;
}
.sim-play__title-text h1 { margin: 0 0 0.15rem; font-size: 1.5rem; line-height: 1.25; }
.sim-play__title-text .text-muted { margin: 0 0 0.4rem; }
.sim-play__meta { margin: 0.35rem 0 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sim-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.65rem; background: rgba(255,255,255,0.65); border-radius: 999px; font-size: 0.78rem; font-weight: 500; }
.sim-tag--role { background: rgba(234, 88, 12, 0.18); color: #c2410c; }

/* ─── Hauptlayout: Scene + Chat ───────────────────────────────── */
.simulation-play .sim-play__layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.4rem; margin-top: 1rem; }
@media (max-width: 960px) { .simulation-play .sim-play__layout { grid-template-columns: 1fr; } }

.sim-scene-image {
    width: 100%; aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    margin-bottom: 0.85rem;
    box-shadow: 0 15px 40px -20px rgba(0,0,0,0.3);
    position: relative;
}
.sim-scene-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-scene-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; }
.sim-scene-placeholder span { font-size: 5rem; line-height: 1; }
.sim-scene-placeholder small { color: var(--text-muted); font-size: 0.85rem; }

.sim-side--soft {
    border-radius: 18px;
    padding: 1.1rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 8px 22px -16px rgba(0,0,0,0.25);
}
.sim-side__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px dashed var(--border); }
.sim-side__row h3 { margin: 0; }
.sim-side .sim-side__h { margin: 0.9rem 0 0.45rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.sim-side h3 { font-size: 0.9rem; margin: 0; color: var(--text); }
.sim-select { padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 0.9rem; min-width: 90px; }
.sim-hints { padding-left: 1.2rem; margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text); }
.sim-hints li { margin-bottom: 0.25rem; color: inherit; }

/* Sidebar-Tipps: helle Karte im Dark Mode */
html[data-theme="dark"] .simulation-play .card.sim-side--soft.surface-light,
html[data-theme="dark"] .simulation-play .card.sim-side--soft {
    background: #ffffff;
    border-color: #e2e8f0;
    --text: #0f172a;
    --text-muted: #475569;
    color: #0f172a;
}

html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-side h3,
html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-side__h,
html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-hints,
html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-hints li,
html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-side__note,
html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-side__note strong {
    color: inherit;
}

html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-side__h {
    color: #475569;
}

html[data-theme="dark"] .simulation-play .card.sim-side--soft .sim-select {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}
.sim-vocab { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sim-vocab__chip { background: var(--sim-accent-soft); color: var(--sim-accent); padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; }
.sim-side__note { margin-top: 0.95rem; padding: 0.7rem 0.85rem; background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(168,85,247,0.06) 100%); border-radius: 12px; font-size: 0.85rem; line-height: 1.5; border-left: 3px solid #a78bfa; }

/* Chat-Card */
.sim-chat-card {
    padding: 0;
    display: flex; flex-direction: column;
    min-height: 520px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 40px -22px rgba(0,0,0,0.3);
    border: 1px solid var(--border);
}
.sim-chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.1rem;
    background: linear-gradient(90deg, rgba(234,88,12,0.08) 0%, rgba(234,88,12,0.02) 100%);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.sim-chat-status { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-muted); }
.sim-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; transition: background 0.2s; }
.sim-chat-header.is-active .sim-chat-dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); animation: sim-pulse 2s infinite; }
.sim-chat-header.is-speaking .sim-chat-dot { background: #6366f1; animation: sim-pulse 1.4s infinite; }
.sim-voice-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; user-select: none; margin-left: auto; }
.sim-voice-toggle input { accent-color: var(--sim-accent, #ea580c); }
.sim-msg { position: relative; }
.sim-replay { position: absolute; top: 0.4rem; right: 0.5rem; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0.15rem 0.35rem; border-radius: 6px; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
.sim-msg:hover .sim-replay { opacity: 1; }
.sim-replay:hover { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.sim-chat-header.is-thinking .sim-chat-dot { background: #f59e0b; animation: sim-pulse 1s infinite; }
.sim-chat-header.is-done .sim-chat-dot { background: #6366f1; }
@keyframes sim-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
.sim-chat-meta { color: var(--text-muted); font-weight: 500; }

.sim-chat-log {
    flex: 1; overflow-y: auto; max-height: 65vh;
    padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: 0.65rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.01) 100%);
}
.sim-msg { padding: 0.7rem 0.95rem; border-radius: 16px; max-width: 88%; line-height: 1.5; font-size: 0.95rem; animation: sim-msg-in 0.25s ease-out; }
@keyframes sim-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sim-msg--npc { background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(168,85,247,0.06) 100%); align-self: flex-start; border-bottom-left-radius: 4px; }
.sim-msg--learner { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; align-self: flex-end; border-bottom-right-radius: 4px; }
.sim-msg--feedback { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; align-self: center; font-size: 0.85rem; max-width: 92%; }
.sim-msg--hint { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); color: #4c1d95; align-self: center; font-size: 0.85rem; font-style: italic; max-width: 92%; }
.sim-msg--system { background: transparent; color: var(--text-muted); align-self: center; font-size: 0.85rem; text-align: center; max-width: 100%; }
.sim-msg--welcome { display: flex; align-items: flex-start; gap: 0.65rem; text-align: left; padding: 1rem; background: linear-gradient(135deg, rgba(234,88,12,0.05) 0%, rgba(234,88,12,0.02) 100%); border: 1px dashed rgba(234,88,12,0.25); border-radius: 14px; max-width: 100%; }
.sim-msg-icon { font-size: 1.6rem; flex-shrink: 0; }
/* Chat-Bubbles: helle Pastell-Flächen → dunkle Schrift (wie Light Mode) */
[data-theme="dark"] .sim-msg--learner {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}
[data-theme="dark"] .sim-msg--feedback {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}
[data-theme="dark"] .sim-msg--hint {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    color: #4c1d95;
}
[data-theme="dark"] .sim-msg--welcome {
    color: var(--text);
}

.sim-chat-form { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem 1.1rem 1rem; border-top: 1px solid var(--border); background: var(--bg-card); }
.sim-chat-input-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.sim-chat-input-row textarea { flex: 1; min-width: 0; }
.sim-mic:disabled { opacity: 0.45; cursor: not-allowed; }
.sim-chat-form textarea { width: 100%; resize: vertical; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-input); color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; }
.sim-chat-form textarea:focus { outline: none; border-color: var(--sim-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15); }
.sim-chat-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.sim-chat-actions .btn { font-size: 0.92rem; }
.sim-chat-actions .btn-lg { font-size: 1rem; padding: 0.55rem 1.1rem; }

.sim-progress { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); padding-top: 0.25rem; }
.sim-progress-bar { flex: 1; height: 5px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; }
[data-theme="dark"] .sim-progress-bar { background: rgba(255,255,255,0.08); }
.sim-progress-bar #sim-progress-fill { height: 100%; background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); transition: width 0.45s ease; border-radius: 999px; }

.sim-result { padding: 1.4rem; margin-top: 1.5rem; border-radius: 20px; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid rgba(16,185,129,0.3); }
[data-theme="dark"] .sim-result {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #14532d;
}
[data-theme="dark"] .sim-result h2,
[data-theme="dark"] .sim-result p,
[data-theme="dark"] .sim-result li {
    color: inherit;
}
[data-theme="dark"] .sim-scene-image {
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
}
[data-theme="dark"] .sim-scene-image .sim-scene-placeholder small {
    color: var(--text-muted-on-light);
}
.sim-result h2 { margin-top: 0; }
.sim-result-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin: 0.85rem 0; }

/* Assessment-Speech-Recorder */
.answer-panel--speech { display: flex; flex-direction: column; gap: 0.75rem; }
.speech-reference { background: rgba(99,102,241,0.08); border-left: 3px solid var(--primary); padding: 0.75rem 1rem; margin: 0.5rem 0; font-size: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.speech-recorder__controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.speech-record-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.speech-record-btn .speech-rec-icon { color: #dc2626; font-size: 1.1rem; }
.speech-record-btn.is-recording { background: #dc2626; color: #fff; }
.speech-record-btn.is-recording .speech-rec-icon { animation: speech-blink 1s infinite; }
@keyframes speech-blink { 50% { opacity: 0.3; } }
.speech-timer { font-family: monospace; font-size: 1rem; padding: 0.25rem 0.5rem; background: rgba(0,0,0,0.05); border-radius: 4px; }
.speech-preview { width: 100%; margin: 0.5rem 0; }
.speech-result { padding: 1rem; margin-top: 0.75rem; }
.speech-result__scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.4rem; margin-bottom: 0.5rem; }
.speech-result__transcript { font-style: italic; color: var(--text-muted); }
.speech-result__feedback { padding: 0.5rem; background: rgba(99,102,241,0.05); border-radius: 6px; }
.speech-result__notice { font-size: 0.8rem; margin-top: 0.5rem; padding: 0.3rem 0.5rem; border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.08); border-radius: 4px; }

/* ============================================================== */
/* Virtueller KI-Lehrer / Coach                                     */
/* ============================================================== */
.coach-page { padding: 1.5rem 0 3rem; }
.coach-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.coach-layout {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
@media (max-width: 900px) {
    .coach-layout { grid-template-columns: 1fr; }
    .coach-main {
        height: min(68vh, calc(100dvh - 14rem));
        max-height: calc(100dvh - 14rem);
    }
}

.coach-side { display: flex; flex-direction: column; gap: 1rem; }
.coach-side__card { padding: 1rem; }
.coach-side__card h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.coach-field { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.75rem; font-size: 0.85rem; }
.coach-field select, .coach-field input { padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: inherit; }
.coach-toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0.85rem 0; font-size: 0.9rem; }

.coach-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.coach-persona { border: 1px solid var(--border); background: var(--bg); padding: 0.6rem 0.5rem; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem; cursor: pointer; transition: all 0.15s;
    text-align: center; font-size: 0.8rem; color: inherit; }
.coach-persona:hover { border-color: var(--primary); }
.coach-persona.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.25); background: rgba(99,102,241,0.05); }

.coach-modes { display: flex; flex-direction: column; gap: 0.85rem; }
.coach-modes__group { display: flex; flex-direction: column; gap: 0.4rem; }
.coach-modes__cat { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 0.15rem; }
.coach-modes__row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.coach-mode { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: transparent;
    font-size: 0.8rem; cursor: pointer; color: inherit; }
.coach-mode:hover { border-color: var(--primary); }
.coach-mode.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.coach-mode__icon { font-size: 1rem; line-height: 1; }
.coach-mode__text { font-size: 0.85rem; }

.coach-recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.coach-recent a { display: flex; flex-direction: column; padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid transparent; text-decoration: none; color: inherit; font-size: 0.85rem; }
.coach-recent a:hover { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.25); }

.coach-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: min(72vh, calc(100dvh - 11rem));
    max-height: calc(100dvh - 11rem);
    min-height: min(420px, calc(100dvh - 11rem));
    overflow: hidden;
}
.coach-thread-header {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1rem; border-bottom: 1px solid var(--border);
    background: var(--bg-card); flex-shrink: 0;
}
.coach-thread-header .coach-avatar-large {
    --coach-header-avatar: 72px;
    width: var(--coach-header-avatar);
    height: var(--coach-header-avatar);
    flex: 0 0 var(--coach-header-avatar);
    max-width: var(--coach-header-avatar);
    max-height: var(--coach-header-avatar);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}
.coach-thread-header .coach-avatar-large .coach-avatar__ring { inset: -4px; }
.coach-thread-header .coach-avatar-large .coach-avatar__pulse { inset: -5px; }
.coach-thread-header .coach-avatar-large .coach-avatar__waves { display: none; }
.coach-thread-header .coach-avatar-meta { flex: 1; min-width: 0; }
.coach-thread-header .coach-avatar-name { font-size: 1rem; font-weight: 600; }
.coach-thread-header .coach-avatar-status { font-size: 0.82rem; color: var(--text-muted); }
.coach-thread-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(99,102,241,0.04) 0%, rgba(148,163,184,0.06) 100%);
}
.coach-composer {
    flex-shrink: 0; padding: 0.5rem 0.75rem 0.75rem;
    background: var(--bg-card); border-top: 1px solid var(--border);
}

.coach-avatar-stage { display: flex; gap: 1rem; align-items: center; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
.coach-avatar-name { font-weight: 600; }
.coach-avatar-status { font-size: 0.85rem; color: var(--text-muted, #777); display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }
.coach-avatar-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: coach-dot 1.6s infinite; }
@keyframes coach-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.coach-avatar-status[data-kind="thinking"] .dot { background: #f59e0b; }
.coach-avatar-status[data-kind="listening"] .dot { background: #3b82f6; }
.coach-avatar-status[data-kind="speaking"] .dot { background: #ec4899; }
.coach-avatar-status[data-kind="error"] .dot { background: #dc2626; }

/* ----- SVG-Avatar ----- */
.coach-avatar { position: relative; }

/* ────────── Realistische 3D-Avatare (Bild-basiert) ────────── */

/* Persona-Akzentfarben — die eigentlichen Frame-Animationen kommen aus
   den drei pro Persona generierten PNGs (base/blink/talk). */
.coach-avatar--warm {
    --coach-accent: #fb923c; --coach-accent-soft: rgba(251,146,60,0.35);
}
.coach-avatar--strict {
    --coach-accent: #475569; --coach-accent-soft: rgba(71,85,105,0.35);
}
.coach-avatar--funny {
    --coach-accent: #06b6d4; --coach-accent-soft: rgba(6,182,212,0.35);
}
.coach-avatar--patient {
    --coach-accent: #c084fc; --coach-accent-soft: rgba(192,132,252,0.35);
}

/* Persona-Pill in Sidebar */
.coach-persona__avatar {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    overflow: hidden;
    position: relative;
    background: transparent;
}
.coach-persona__avatar--3d {
    background: transparent;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.coach-persona__avatar--3d img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.coach-persona.is-active .coach-persona__avatar--3d {
    border-color: var(--coach-accent, var(--primary));
    transform: scale(1.06);
    box-shadow: 0 6px 18px var(--coach-accent-soft, rgba(99,102,241,0.3));
}

/* Großer 3D-Avatar auf der Coach-Seite */
.coach-avatar-large {
    width: 160px; height: 160px; flex: 0 0 160px;
    border-radius: 50%;
    position: relative;
    background: transparent;
    overflow: visible;
}
.coach-avatar--3d {
    background: transparent;
}
/* Innerer Image-Wrapper als kreisförmige Maske — clipt die Frames,
   nicht aber Ring/Pulse/Waves vom äußeren Container. */
.coach-avatar__img-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 18px 42px -12px rgba(0,0,0,0.35), 0 3px 8px rgba(0,0,0,0.08);
    isolation: isolate;
}

/* ───── Drei gestapelte Frames pro Persona: base / blink / talk ─────
   Base ist immer sichtbar. Blink/Talk fadet via opacity ein, sobald die
   passende Klasse am Avatar-Container gesetzt ist. */
.coach-frame {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    will-change: opacity, transform;
    backface-visibility: hidden;
}
/* Sprite-Sheet (ein Request, 10 Frames horizontal) */
.coach-sprite {
    position: absolute;
    inset: 0;
    z-index: 4;
    background-repeat: no-repeat;
    background-position: 0 0;
    border-radius: 50%;
}
.coach-avatar.has-sprite .coach-frame--legacy { opacity: 0 !important; pointer-events: none; }

.coach-frame--base  { z-index: 1; opacity: 1; }
.coach-frame--blink { z-index: 2; opacity: 0; transition: opacity 0.08s ease-out; }
.coach-frame--talk  { z-index: 3; opacity: 0; transition: opacity 0.04s linear; }

/* Blink: für ~140ms is-blinking aktiv → Blink-Frame voll sichtbar */
.coach-avatar.is-blinking .coach-frame--blink { opacity: 1; transition: opacity 0.06s ease-in; }
/* Talk: während is-speaking schaltet JS is-mouth-open alle 200ms */
.coach-avatar.is-mouth-open .coach-frame--talk { opacity: 1; }

/* Beim Persona-Wechsel sanfter Crossfade aller Frames */
.coach-avatar.is-switching .coach-frame {
    animation: coach-frame-switch 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes coach-frame-switch {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}
/* Während des Switch sollen alle Frames mit-eingeblendet werden */
.coach-avatar.is-switching .coach-frame--blink,
.coach-avatar.is-switching .coach-frame--talk { opacity: 0; }

.coach-avatar__ring {
    position: absolute; inset: -6px;
    z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--coach-accent, #6366f1) 0%, transparent 35%, var(--coach-accent, #6366f1) 100%);
    opacity: 0.55;
    filter: blur(2px);
    animation: coach-ring-spin 9s linear infinite;
    pointer-events: none;
}
@keyframes coach-ring-spin {
    to { transform: rotate(360deg); }
}

/* Sanfter "Atem"-Effekt im Idle */
/* Atem-Bewegung auf dem ganzen Wrap (alle 3 Frames bleiben synchron) */
.coach-avatar--3d .coach-avatar__img-wrap {
    animation: coach-breathe 5.2s ease-in-out infinite;
}
@keyframes coach-breathe {
    0%, 100% { transform: scale(1)      translateY(0); }
    50%      { transform: scale(1.018)  translateY(0.4px); }
}

/* Aktive Zustände — überschreiben den Atem */
.coach-avatar--3d.is-speaking .coach-avatar__img-wrap {
    animation: coach-speak 0.42s infinite alternate ease-in-out;
}
@keyframes coach-speak {
    0%   { transform: scale(1)     translateY(0); }
    50%  { transform: scale(1.018) translateY(-0.5px); }
    100% { transform: scale(1.03)  translateY(-1.2px); }
}
.coach-avatar--3d.is-listening .coach-avatar__img-wrap {
    animation: coach-listen 3.8s ease-in-out infinite;
    filter: brightness(1.06) saturate(1.08);
}
@keyframes coach-listen {
    0%, 100% { transform: scale(1.015) rotate(0deg); }
    50%      { transform: scale(1.03)  rotate(0.6deg); }
}
.coach-avatar--3d.is-thinking .coach-avatar__img-wrap {
    animation: coach-think-wobble 3s ease-in-out infinite;
    filter: brightness(0.96) saturate(0.9);
}
@keyframes coach-think-wobble {
    0%, 100% { transform: rotate(0deg)    translateY(0); }
    25%      { transform: rotate(-1.2deg) translateY(-0.5px); }
    50%      { transform: rotate(0deg)    translateY(0.5px); }
    75%      { transform: rotate(1.2deg)  translateY(-0.5px); }
}

/* Ring-States */
.coach-avatar--3d.is-speaking .coach-avatar__ring  { opacity: 0.85; animation-duration: 3s; }
.coach-avatar--3d.is-listening .coach-avatar__ring { opacity: 0.9;  animation-duration: 2s; }
.coach-avatar--3d.is-thinking .coach-avatar__ring  { opacity: 0.7;  animation-duration: 6s; }

/* (SVG-Overlay entfernt — die Animationen werden jetzt direkt aus den
   drei Frames pro Persona gezeichnet: base / blink / talk PNGs.) */

/* Pulse-Ring während Sprechen / Hören / Denken */
.coach-avatar__pulse { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; z-index: 0; }
.coach-avatar.is-speaking .coach-avatar__pulse  { animation: coach-pulse 1.4s infinite; box-shadow: 0 0 0 0 rgba(236,72,153,0.55); }
.coach-avatar.is-listening .coach-avatar__pulse { animation: coach-pulse 1.4s infinite; box-shadow: 0 0 0 0 rgba(59,130,246,0.55); }
.coach-avatar.is-thinking .coach-avatar__pulse  { animation: coach-pulse 1.8s infinite; box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
@keyframes coach-pulse {
    0%   { box-shadow: 0 0 0 0   currentColor; }
    70%  { box-shadow: 0 0 0 22px transparent; }
    100% { box-shadow: 0 0 0 0   transparent; }
}

/* Sprechwellen visuell – kleine Punkte unter dem Avatar */
.coach-avatar__waves { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.coach-avatar__waves span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.coach-avatar.is-speaking .coach-avatar__waves { opacity: 0.7; color: #ec4899; }
.coach-avatar.is-listening .coach-avatar__waves { opacity: 0.7; color: #3b82f6; }
.coach-avatar.is-thinking .coach-avatar__waves { opacity: 0.6; color: #f59e0b; }
.coach-avatar__waves span:nth-child(1) { animation: coach-wave 1.2s infinite ease-in-out; }
.coach-avatar__waves span:nth-child(2) { animation: coach-wave 1.2s infinite ease-in-out 0.15s; }
.coach-avatar__waves span:nth-child(3) { animation: coach-wave 1.2s infinite ease-in-out 0.3s; }
@keyframes coach-wave {
    0%, 100% { transform: scale(0.7); opacity: 0.4; }
    50%      { transform: scale(1.4); opacity: 1; }
}

/* Chat */
.coach-chat {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.coach-empty { text-align: center; color: var(--text-muted, #777); padding: 2rem 1rem; font-style: italic; max-width: 22rem; margin: auto; }
.coach-bubble {
    max-width: min(88%, 520px); padding: 0.65rem 0.85rem 0.7rem;
    border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    animation: coach-fade-in 0.18s ease; position: relative;
    line-height: 1.45; font-size: 0.95rem;
}
.coach-bubble__meta { font-size: 0.7rem; font-weight: 600; opacity: 0.75; margin-bottom: 0.25rem; letter-spacing: 0.02em; }
@keyframes coach-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.coach-bubble--user { align-self: flex-end; background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%); color: #fff; border-bottom-right-radius: 4px; }
.coach-bubble--user .coach-bubble__meta { color: rgba(255,255,255,0.85); }
.coach-bubble--coach { align-self: flex-start; background: var(--bg-card); color: inherit; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.coach-bubble--error { align-self: center; background: #fee2e2; color: #991b1b; font-size: 0.85rem; }
.coach-bubble__de { font-weight: 500; }
.coach-bubble__vi { font-size: 0.85rem; opacity: 0.8; margin-top: 0.35rem; }
.coach-bubble__correction { font-size: 0.8rem; margin-top: 0.5rem; padding: 0.4rem 0.55rem; background: rgba(245,158,11,0.12); border-left: 3px solid #f59e0b; border-radius: 4px; }
.coach-bubble__tip { font-size: 0.8rem; margin-top: 0.4rem; padding: 0.35rem 0.55rem; background: rgba(34,197,94,0.1); border-left: 3px solid #22c55e; border-radius: 4px; }
.coach-bubble__next { font-size: 0.85rem; margin-top: 0.4rem; opacity: 0.85; font-style: italic; }
.coach-bubble__replay { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,0.6); border: none; cursor: pointer;
    border-radius: 50%; width: 26px; height: 26px; line-height: 1; font-size: 0.85rem; opacity: 0; transition: opacity 0.15s; }
.coach-bubble--coach:hover .coach-bubble__replay { opacity: 1; }

/* Input */
.coach-input { display: grid; grid-template-columns: auto 1fr auto; gap: 0.45rem; align-items: end; padding: 0; border: none; }
.coach-input-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.coach-input textarea {
    width: 100%; max-height: 120px; padding: 0.6rem 0.75rem;
    border-radius: 20px; border: 1px solid var(--border);
    background: var(--bg); color: inherit; resize: none;
    font-family: inherit; font-size: 0.95rem; line-height: 1.4;
}
.coach-input textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.coach-input-hint { font-size: 0.68rem; color: var(--text-muted); padding-left: 0.5rem; }
.coach-mic { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 1.15rem; transition: all 0.15s; flex-shrink: 0; }
.coach-mic:hover { border-color: var(--primary); color: var(--primary); }
.coach-mic.is-recording { background: #dc2626; color: #fff; border-color: #dc2626; animation: coach-mic-rec 1s infinite; }
@keyframes coach-mic-rec { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.55); } 50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
.coach-send { width: 42px; height: 42px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

.coach-stt-hint, .sim-stt-hint {
    font-size: 0.78rem; color: var(--text-muted); background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px;
    padding: 0.45rem 0.65rem; margin: 0 0 0.5rem;
}
.coach-stt-hint[data-kind="server"], .sim-stt-hint[data-kind="server"] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--text-muted);
}
[data-theme="dark"] .coach-stt-hint,
[data-theme="dark"] .sim-stt-hint {
    color: #92400e;
    background: rgba(254, 243, 199, 0.95);
    border-color: #f59e0b;
}
.coach-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.45rem 0 0; }
.coach-quick__btn { background: transparent; border: 1px dashed var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.8rem; cursor: pointer; color: inherit; }
.coach-quick__btn:hover { border-color: var(--primary); color: var(--primary); }

.ai-assist-open-coach { margin-bottom: 0.75rem; }

/* Kein Einfügen im Assessment */
.no-paste-field { caret-color: var(--primary); }
.no-paste-field::selection { background: rgba(220,38,38,0.15); }
.no-paste-toast {
    position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(20px);
    background: #dc2626; color: #fff; padding: 0.65rem 1.1rem; border-radius: 8px;
    font-size: 0.9rem; font-weight: 500; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 9999;
    max-width: min(90vw, 360px); text-align: center;
}
.no-paste-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.answer-field--textarea .answer-field__footer::before {
    content: '🔒'; margin-right: 0.35rem; opacity: 0.6;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header,
    .card,
    .stat-card,
    .hero-content,
    .auth-card,
    .question-card,
    .result-card,
    .action-card,
    .admin-page .card,
    .admin-card,
    .share-card {
        background: var(--bg-card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ─────────────────────────── Subscriptions / Billing ─────────────────────────── */

/* Nav-Pill (Trial-Counter, Pro-Badge, Upgrade-CTA) */
.nav-billing-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.7rem; border-radius: 999px;
    font-weight: 600; font-size: 0.85rem; line-height: 1;
    border: 1px solid transparent; text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.nav-billing-pill:hover { transform: translateY(-1px); }
.nav-billing-pill--trial { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); }
.nav-billing-pill--pro   { background: linear-gradient(135deg, #6366f1, #3b82f6); color: #fff; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35); }
.nav-billing-pill--off   { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(239, 68, 68, 0.35); }

/* Dashboard-Banner */
.billing-banner {
    display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
    padding: 1rem 1.25rem; border-left: 4px solid var(--primary);
}
.billing-banner__icon { font-size: 1.75rem; line-height: 1; }
.billing-banner__body strong { display: block; margin-bottom: 0.15rem; }
.billing-banner__body p { margin: 0; color: var(--text-muted); }
.billing-banner--trial { border-left-color: #f59e0b; background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent); }
.billing-banner--warn  { border-left-color: #f97316; background: linear-gradient(135deg, rgba(249, 115, 22, 0.10), transparent); }
.billing-banner--expired { border-left-color: var(--danger); background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), transparent); }
@media (max-width: 640px) { .billing-banner { grid-template-columns: auto 1fr; } .billing-banner .btn { grid-column: 1 / -1; } }

/* Billing-Status-Card */
.billing-page .billing-status { margin-bottom: 1.5rem; }
.billing-status__line { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.4rem 0; }
.billing-pill {
    display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 999px;
    font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em;
}
.billing-pill--trial { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.billing-pill--pro   { background: linear-gradient(135deg, #6366f1, #3b82f6); color: #fff; }
.billing-pill--off   { background: var(--danger-soft); color: var(--danger-text); }

/* Plan-Karten */
.billing-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; }
.billing-plans--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .billing-plans--three { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .billing-plans { grid-template-columns: 1fr; } }
.billing-marketing { margin: 1rem 0; padding: 1rem 1.25rem; }
.billing-loss-aversion { border-left: 4px solid var(--primary); background: var(--primary-soft, rgba(59,130,246,.08)); }
.billing-loss-aversion p { margin: 0; line-height: 1.55; }
.billing-scarcity { border: 1px solid var(--warning, #f59e0b); background: rgba(245,158,11,.08); }
.billing-scarcity__countdown { margin: 0.5rem 0 0; font-weight: 600; }
.billing-plan__list-price { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
.billing-bonuses { margin: 1.25rem 0; }
.billing-bonuses__list { list-style: none; margin: 0; padding: 0; }
.billing-bonuses__list li {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
    padding: 0.65rem 0; border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.billing-bonuses__value s { margin-right: 0.5rem; color: var(--text-muted); }
.billing-bonuses__value em { font-style: normal; color: var(--success, #10b981); font-weight: 600; }
.billing-bonuses__total { margin: 1rem 0 0; }
.billing-plan { position: relative; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.billing-plan h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.billing-plan__price { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--primary-text); }
.billing-plan__price span { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.billing-plan__sub { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.9rem; }
.billing-plan__sub--highlight { color: var(--success); font-weight: 600; }
.billing-plan__savings { margin: 0.35rem 0 0; color: var(--success); font-weight: 600; font-size: 0.9rem; }
.billing-plan.is-recommended { border: 2px solid var(--primary); box-shadow: 0 8px 30px rgba(59, 130, 246, 0.18); }
.billing-plan__ribbon {
    position: absolute; top: -12px; right: 16px;
    background: linear-gradient(135deg, #6366f1, #3b82f6); color: #fff;
    padding: 0.3rem 0.8rem; border-radius: 999px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
}
.billing-features { list-style: none; padding: 0; margin: 0; }
.billing-features li {
    padding: 0.4rem 0 0.4rem 1.6rem; position: relative; color: var(--text);
    border-bottom: 1px dashed var(--border);
}
.billing-features li:last-child { border-bottom: 0; }
.billing-features li::before {
    content: "✓"; position: absolute; left: 0; top: 0.4rem;
    color: var(--success); font-weight: 700;
}

/* Checkout-Grid + Bestätigungsformular */
.billing-checkout__grid { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; margin: 1rem 0; }
@media (max-width: 720px) { .billing-checkout__grid { grid-template-columns: 1fr; } }
.billing-qr img { border-radius: 12px; background: #fff; padding: 0.5rem; }
.billing-confirm-form { margin-top: 1rem; }
.billing-fineprint { margin-top: 1rem; font-size: 0.85rem; text-align: center; }
.billing-history { margin-top: 2rem; }
.billing-history summary { cursor: pointer; padding: 0.5rem 0; font-weight: 600; }

/* Dashboard – Lehrer wählen */
.dashboard-teacher { margin-bottom: 1.5rem; }
.dashboard-teacher__head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.75rem;
}
.dashboard-teacher__head h2 { margin: 0 0 0.25rem; }
.dashboard-teacher__current { margin: 0 0 1rem; }
.dashboard-teacher__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
}
@media (max-width: 720px) { .dashboard-teacher__grid { grid-template-columns: repeat(2, 1fr); } }
.dashboard-teacher-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 0.85rem 0.5rem; border: 2px solid var(--border); border-radius: 12px;
    background: var(--bg-subtle); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    font: inherit; color: inherit; text-align: center;
}
.dashboard-teacher-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.dashboard-teacher-card.is-active {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
    background: var(--primary-soft);
}
.dashboard-teacher-card__avatar {
    width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
    background: transparent; flex-shrink: 0;
}
.dashboard-teacher-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dashboard-teacher-card__name { font-size: 0.8rem; font-weight: 600; line-height: 1.25; }
.dashboard-teacher__saved { margin: 0.75rem 0 0; color: var(--success-text); }

.dashboard-tts-speed { margin-bottom: 1.5rem; }
.dashboard-tts-speed__head h2 { margin: 0 0 0.25rem; }
.dashboard-tts-speed__control { margin-top: 0.75rem; }
.dashboard-tts-speed__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.dashboard-tts-speed__label #dashboard-tts-speed-value {
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
}
.dashboard-tts-speed__range {
    width: 100%;
    accent-color: var(--primary);
}
.dashboard-tts-speed__saved { margin: 0.75rem 0 0; color: var(--success-text); }

/* Cookie consent (DSGVO) */
.cookie-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10050;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
    pointer-events: none;
}
.cookie-consent[hidden] { display: none !important; }
.cookie-consent__panel {
    pointer-events: auto;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .cookie-consent__panel {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}
.cookie-consent__panel h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.cookie-consent__text { margin: 0 0 0.85rem; font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; }
.cookie-consent__text a { color: var(--primary); }
.cookie-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.cookie-settings[hidden] { display: none !important; }
.cookie-settings:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 10060;
    pointer-events: none;
}
.cookie-settings:not([hidden]) .cookie-settings__backdrop {
    pointer-events: auto;
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cookie-settings__dialog {
    position: relative;
    max-width: 480px;
    width: 100%;
    margin: 0;
    pointer-events: auto;
}
.cookie-settings__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.cookie-settings__close:hover { background: rgba(255, 255, 255, 0.14); }
[data-theme="light"] .cookie-settings__close { background: rgba(15, 23, 42, 0.06); }
.cookie-settings__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.cookie-settings__item { padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
[data-theme="light"] .cookie-settings__item { border-bottom-color: rgba(15, 23, 42, 0.08); }
.cookie-settings__item:last-child { border-bottom: none; }
.cookie-settings__item p { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.cookie-settings__item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.cookie-settings__badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-muted);
}
.cookie-settings__item--disabled { opacity: 0.65; }
.cookie-settings__toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; }
@media (max-width: 520px) {
    .cookie-consent__actions { flex-direction: column; align-items: stretch; }
    .cookie-consent__actions .btn { width: 100%; margin-left: 0 !important; }
}

/* ============================================================== */
/* Lesbarkeit: Utility-Klassen + Formulare (Dark/Light)           */
/* ============================================================== */
.text-muted,
p.text-muted,
span.text-muted,
small.text-muted,
td.text-muted,
th.text-muted,
li.text-muted {
    color: var(--text-muted);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]),
textarea,
select {
    color: var(--text);
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--text-muted) 85%, transparent);
}

select option {
    color: var(--text);
    background: var(--bg-card);
}

/* Hellbleibende Flächen im Dark Mode → dunkle Schrift */
[data-theme="dark"] .on-light,
[data-theme="dark"] .cert-bank-qr-wrap,
[data-theme="dark"] .cert-preview-frame,
[data-theme="dark"] .billing-qr,
[data-theme="dark"] .billing-qr img,
[data-theme="dark"] .listening-transcript,
[data-theme="dark"] .speech-reference,
[data-theme="dark"] .speech-result__notice,
[data-theme="dark"] .coach-bubble--error,
[data-theme="dark"] .states-quiz-figure,
[data-theme="dark"] .states-quiz-intro-map,
[data-theme="dark"] .question-image-wrap {
    color: var(--text-on-light);
}

[data-theme="dark"] .on-light .text-muted,
[data-theme="dark"] .cert-bank-qr-wrap .text-muted,
[data-theme="dark"] .billing-checkout .text-muted,
[data-theme="dark"] .listening-transcript,
[data-theme="dark"] .speech-result__transcript {
    color: var(--text-muted-on-light);
}

[data-theme="dark"] .cert-bank-qr-wrap,
[data-theme="dark"] .billing-qr img {
    background: #fff;
}

[data-theme="dark"] .cert-preview-frame {
    background: #f1f5f9;
}

[data-theme="dark"] .listening-transcript {
    background: #f8fafc;
    border-left-color: var(--primary);
}

[data-theme="dark"] .states-quiz-figure,
[data-theme="dark"] .states-quiz-intro-map {
    background: #f8fafc;
    border-color: #e2e8f0;
}

[data-theme="dark"] .question-image-wrap img {
    background: #f8fafc;
}

[data-theme="dark"] .speech-reference {
    background: rgba(99, 102, 241, 0.08);
    border-left-color: var(--primary);
}

[data-theme="dark"] .speech-result__notice {
    background: rgba(245, 158, 11, 0.12);
    border-left-color: #d97706;
    color: #92400e;
}

[data-theme="dark"] .coach-bubble--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Level-Badges: Pastell bleibt → Basis-Farben (dunkel) gelten unverändert */
[data-theme="dark"] .qs-inactive-tag {
    color: #b45309;
}

[data-theme="dark"] .coach-field select,
[data-theme="dark"] .coach-field input,
[data-theme="dark"] .coach-composer textarea {
    color: var(--text);
    background: var(--bg-input);
}

[data-theme="dark"] .coach-bubble--coach {
    color: var(--text);
}

/* ============================================================== */
/* Mobile & PWA                                                   */
/* ============================================================== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

body.nav-drawer-open {
    overflow: hidden;
    touch-action: none;
}

.main-content {
    padding-bottom: calc(clamp(2.5rem, 4vw, 4rem) + env(safe-area-inset-bottom, 0px));
}

body.has-mobile-tab-bar .main-content {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* Touch-Ziele (min. 44px) */
@media (max-width: 900px) {
    .btn,
    .btn-sm,
    .theme-toggle,
    .password-field__toggle,
    .auth-remember__card,
    .coach-mode,
    .coach-persona,
    .nav-billing-pill {
        min-height: 44px;
    }
    .btn-sm {
        min-height: 40px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .form input,
    .form select,
    .form textarea,
    .password-field__wrap .password-field__input,
    .login-modal__field input,
    .coach-composer textarea,
    .coach-field select,
    .coach-field input {
        font-size: 16px;
    }
    .hero-actions .btn {
        flex: 1 1 auto;
        min-width: min(100%, 12rem);
    }
    .table-wrap,
    .admin-table-wrap,
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Login/Register immer erreichbar (nicht im geschlossenen Mobile-Drawer) */
.header-auth-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.header-auth-actions .btn {
    white-space: nowrap;
}
@media (max-width: 900px) {
    .header-auth-actions {
        order: 2;
        margin-left: auto;
    }
    .nav-toggle {
        order: 3;
    }
    .main-nav {
        order: 4;
        width: 100%;
    }
}

/* Mobile Navigation (Drawer) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-bg);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle__bar {
    display: block;
    width: 1.15rem;
    height: 2px;
    margin: 0 auto;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.nav-drawer-backdrop {
    display: none;
}
/* Mobile: Header nicht sticky → kein Überdecken von Admin-Subnav / Inhalt */
@media (max-width: 900px) {
    .header-dock {
        position: relative;
        top: auto;
    }
    .admin-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin-bottom: 1.25rem;
        padding-bottom: 0.5rem;
    }
    .admin-subnav a {
        flex-shrink: 0;
    }
}

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .header-inner {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .main-nav {
        position: fixed;
        top: var(--app-header-clearance);
        right: max(0.65rem, env(safe-area-inset-right, 0px));
        left: max(0.65rem, env(safe-area-inset-left, 0px));
        z-index: 250;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        max-height: min(70dvh, calc(100dvh - var(--app-header-clearance) - 1.25rem - var(--app-safe-bottom)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.85rem;
        margin: 0;
        border-radius: 14px;
        border: 1px solid var(--glass-border);
        background: var(--glass-bg-strong);
        backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
        -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
        box-shadow: var(--glass-shadow), 0 20px 50px rgba(0, 0, 0, 0.35);
        transform: translateY(-0.5rem);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    }
    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .main-nav a:not(.btn) {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5rem 0.65rem;
        font-size: 1rem;
        border-radius: 8px;
    }
    .main-nav a:not(.btn):hover,
    .main-nav a:not(.btn):focus-visible {
        background: var(--primary-soft);
        color: var(--text);
    }
    .main-nav .btn {
        width: 100%;
        justify-content: center;
        margin-top: 0.35rem;
    }
    .main-nav .theme-toggle,
    .main-nav .lang-switch {
        align-self: flex-start;
    }
    .nav-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(8, 12, 20, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .nav-drawer-backdrop[hidden] { display: none !important; }
    .nav-billing-pill {
        justify-content: center;
        width: 100%;
    }
}

/* Bottom Tab Bar (eingeloggte Lernende) */
.mobile-tab-bar {
    display: none;
}
@media (max-width: 900px) {
    body.has-mobile-tab-bar { padding-bottom: 0; }
    .mobile-tab-bar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: max(0.5rem, env(safe-area-inset-left, 0px));
        right: max(0.5rem, env(safe-area-inset-right, 0px));
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        z-index: 180;
        padding: 0.35rem 0.25rem;
        border-radius: 16px;
        border: 1px solid var(--glass-border);
        background: var(--glass-bg-strong);
        backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.35);
        -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.35);
        box-shadow: var(--glass-shadow), 0 8px 32px rgba(0, 0, 0, 0.28);
    }
    .mobile-tab-bar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 52px;
        padding: 0.25rem 0.15rem;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: var(--text-muted);
        text-decoration: none;
        font: inherit;
        font-size: 0.62rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-tab-bar__item.is-active {
        color: var(--primary-text);
        background: var(--primary-soft);
    }
    .mobile-tab-bar__icon-wrap {
        position: relative;
        display: inline-flex;
    }
    .mobile-tab-bar__icon {
        font-size: 1.15rem;
        line-height: 1;
    }
    .mobile-tab-bar__badge {
        position: absolute;
        top: -4px;
        right: -10px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #ea580c;
        color: #fff;
        font-size: 0.58rem;
        font-weight: 800;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    .mobile-tab-bar__badge--count {
        background: var(--primary);
    }
    .mobile-tab-bar__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* PWA Install-Banner */
.pwa-install-banner {
    position: fixed;
    left: max(0.65rem, env(safe-area-inset-left, 0px));
    right: max(0.65rem, env(safe-area-inset-right, 0px));
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    z-index: 10040;
}
body.has-mobile-tab-bar .pwa-install-banner {
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}
.pwa-install-banner[hidden] { display: none !important; }
.pwa-install-banner__inner {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--glass-shadow);
}
.pwa-install-banner__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
}
.pwa-install-banner__text {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.pwa-install-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* PWA Standalone / iOS */
html.pwa-standalone .header-dock {
    top: env(safe-area-inset-top, 0px);
}
html.pwa-standalone body.has-mobile-tab-bar .mobile-tab-bar {
    bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 900px) {
    .glass-modal--login {
        width: min(100%, calc(100vw - 1.25rem));
        max-height: min(92dvh, calc(100dvh - 2rem));
        margin: auto;
    }
    .login-modal:not([hidden]) .login-modal__backdrop {
        padding: max(0.65rem, env(safe-area-inset-top, 0px)) max(0.65rem, env(safe-area-inset-right, 0px)) max(0.65rem, env(safe-area-inset-bottom, 0px)) max(0.65rem, env(safe-area-inset-left, 0px));
    }
    .coach-page { padding-bottom: 1rem; }
    .coach-main {
        height: min(62dvh, calc(100dvh - 12rem));
        max-height: calc(100dvh - 12rem);
        min-height: 280px;
    }
    body.has-mobile-tab-bar .coach-main {
        height: min(58dvh, calc(100dvh - 15rem));
        max-height: calc(100dvh - 15rem);
    }
    .coach-composer {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
    .coach-composer__mic,
    .coach-composer__send {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }
    .site-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    body.has-mobile-tab-bar .site-footer {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
    .cookie-consent {
        bottom: env(safe-area-inset-bottom, 0px);
    }
    body.has-mobile-tab-bar .cookie-consent {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
    .portal-disclaimer-footer {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.has-mobile-tab-bar .portal-disclaimer-footer {
        margin-bottom: 4.5rem;
    }
}

@media (max-width: 380px) {
    .mobile-tab-bar__label { font-size: 0.58rem; }
    .content-pad-tight { --content-pad: 0.85rem; }
}

/* Placement: Banner, Willkommen nach Einstufung, Ergebnis-Hero */
.placement-banner,
.placement-welcome,
.placement-result-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-left: 4px solid var(--primary, #1a5f4a);
}
.placement-banner__icon,
.placement-welcome__badge { font-size: 1.75rem; line-height: 1; }
.placement-banner__body,
.placement-welcome { flex: 1 1 16rem; }
.placement-banner__body p,
.placement-welcome__lead { margin: 0.35rem 0 0; color: var(--text-muted); }
.placement-welcome__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary, #1a5f4a);
    margin: 0 0 0.25rem;
}
.placement-welcome__title,
.placement-result-hero__title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
}
.placement-welcome__actions,
.placement-result-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    width: 100%;
}
.placement-result-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(26, 95, 74, 0.08) 0%, rgba(26, 95, 74, 0.02) 100%);
}
.placement-result-hero__badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary, #1a5f4a);
    margin: 0;
}
.placement-result-hero__lead,
.placement-result-hero__next { margin: 0; color: var(--text-muted); }
@media (max-width: 640px) {
    .placement-banner .btn,
    .placement-welcome .btn { width: 100%; }
}