/* ==========================================================================
 * View-spezifische Styles
 * ========================================================================== */

/* ---------- Login -------------------------------------------------------- */
.login-view {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "panel";
    background: var(--bg-primary);
}
.login-panel {
    grid-area: panel;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--space-16) + var(--safe-area-top)) var(--space-4) var(--space-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hero links -- nur ab Desktop / iPad quer sichtbar */
.login-hero {
    display: none;
    grid-area: hero;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-secondary);
    background-image: url('/assets/img/login-hero.jpg');
    background-size: cover;
    background-position: center;
}
.login-hero-overlay {
    position: absolute;
    inset: 0;
    /* Theme-abhaengiger Layer: im Dark-Mode tief/blau, im Light-Mode hell/warm */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 55%, transparent) 0%,
            color-mix(in srgb, var(--accent-2) 45%, transparent) 50%,
            color-mix(in srgb, var(--bg-primary) 80%, transparent) 100%);
    mix-blend-mode: multiply;
}
:root[data-theme="light"] .login-hero-overlay {
    /* Im Light-Mode: helleres, weicheres Overlay ohne multiply, damit Gesichter lesbar bleiben */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 35%, transparent) 0%,
            color-mix(in srgb, var(--accent-2) 25%, transparent) 50%,
            color-mix(in srgb, #ffffff 50%, transparent) 100%);
    mix-blend-mode: normal;
}
.login-hero-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-10) var(--space-10) var(--space-12);
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}
.login-hero-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    transition: transform .15s, opacity .15s;
}
.login-hero-wordmark:hover { opacity: .9; transform: translateX(-2px); }
.login-hero-rocket {
    color: #fff;
    font-size: 30px;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

/* "Zurueck zur Startseite" unter dem Login-Panel */
.login-back {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
}
.login-back .btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.login-logo-link {
    display: block;
    text-align: center;
}
.login-hero-title {
    font-family: var(--font-headline);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
    color: #fff;
    max-width: 440px;
}
.login-hero-sub {
    font-size: 17px;
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    max-width: 440px;
}

/* Split-Layout ab Tablet-quer / Desktop */
@media (min-width: 900px) {
    .login-view {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas: "hero panel";
    }
    .login-hero { display: block; }
    .login-panel {
        max-width: 460px;
        padding: var(--space-8) var(--space-8);
        justify-content: center;
    }
    /* Auf Desktop: Logo, Titel + Subtitle aus dem Panel raus
       (leben jetzt im Hero auf der linken Seite) */
    .login-panel .login-logo,
    .login-panel > h1,
    .login-panel > .subtitle {
        display: none;
    }
    .login-panel .card {
        padding: var(--space-6) var(--space-6);
    }
    .login-panel .login-tabs {
        margin-bottom: var(--space-3);
    }
    .login-panel .login-divider {
        margin: var(--space-3) 0;
    }
    .login-panel .form-group {
        margin-bottom: var(--space-3);
    }
    .login-panel .mt-lg {
        margin-top: var(--space-4) !important;
    }
}

/* Datenschutz-/Eltern-Einwilligung im Registrieren-Formular */
.login-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    cursor: pointer;
}
.login-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.login-consent a { color: var(--text-secondary); text-decoration: underline; }

/* "Passwort vergessen"-Link unter dem Login-Button */
.login-forgot {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}
.btn-link {
    background: none;
    border: none;
    padding: 6px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color .15s;
}
.btn-link:hover { color: var(--accent); }
.btn-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.login-logo {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-5);
    border-radius: var(--radius-xl);
    filter: drop-shadow(0 12px 32px color-mix(in srgb, var(--accent) 40%, transparent));
}
.login-view h1 {
    text-align: center;
    font-size: 36px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
}
.login-view .subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
    font-size: 15px;
}

/* Login-Tabs */
.login-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
}
.login-tab {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-headline);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.login-tab:hover  { color: var(--text-secondary); }
.login-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Divider „oder" */
.login-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-form { margin: 0; }

/* Dev-Code-Hinweis */
#dev-code-hint {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
#dev-code-hint code {
    font-family: var(--font-mono);
    font-size: 18px;
    background: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 4px;
}


/* ---------- Dashboard ---------------------------------------------------- */
.dashboard-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.dashboard-hero h1 { margin: 0; }
.dashboard-greeting {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-1);
}
.dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* View-Toggle (Liste / Kanban) */
.view-toggle {
    display: inline-flex;
    padding: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    gap: 2px;
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-family: var(--font-headline);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.view-toggle-btn:hover { color: var(--text-primary); }
.view-toggle-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-hairline-top);
}
.view-toggle-btn .icon { font-size: 18px; }

/* Top-Bereich: Cards ODER Kanban (über dem Pipeline-Block).
   data-top-view="cards"  → Stats-Cards sichtbar, Kanban hidden
   data-top-view="kanban" → Stats-Cards hidden, Kanban sichtbar */
.dashboard-top                        { margin-bottom: var(--space-6); }
.dashboard-top-kanban                  { display: none; }
.dashboard-page[data-top-view="kanban"] .dashboard-top-cards  { display: none; }
.dashboard-page[data-top-view="kanban"] .dashboard-top-kanban { display: block; }

/* Motivations-Card — klein, farbig, aber zurückhaltend lesbar */
.motivation-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    color: var(--color-on-accent);
    overflow: hidden;
    box-shadow: var(--shadow-glow);
    margin-bottom: var(--space-3);
}
.motivation-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.2), transparent 60%);
    pointer-events: none;
}
.motivation-ic {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    border-radius: var(--radius-pill);
    z-index: 1;
}
.motivation-ic .icon { font-size: 18px; color: var(--color-on-accent); }
.motivation-body { flex: 1; min-width: 0; z-index: 1; }
.motivation-text {
    font-family: var(--font-headline);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-on-accent);
}
.motivation-src {
    font-size: 11px;
    color: var(--color-on-accent);
    opacity: .8;
    margin-top: 4px;
}
.motivation-refresh {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(255,255,255,.12);
    color: var(--color-on-accent);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background .15s, transform .2s;
}
.motivation-refresh:hover { background: rgba(255,255,255,.25); }
.motivation-refresh:active { transform: rotate(180deg); }
.motivation-refresh .icon { font-size: 16px; }

/* ---------- Onboarding-Card (Dashboard) ------------------------------- */
.onboarding {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent)   12%, var(--bg-card)),
        color-mix(in srgb, var(--accent-2) 10%, var(--bg-card)));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-glow);
}
.onboarding-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.onboarding-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.onboarding-progress {
    min-width: 180px;
}
.onboarding-progress-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 6px;
}
.onboarding-progress-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.onboarding-progress-bar > div {
    height: 100%;
    background: var(--accent-gradient);
    transition: width .3s ease;
}

.onboarding-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all .15s;
}
.onboarding-step.next {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
}
.onboarding-step.done {
    opacity: 0.7;
}
.onboarding-step-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--text-muted);
}
.onboarding-step.next .onboarding-step-icon {
    background: var(--accent-gradient);
    color: var(--color-on-accent);
}
.onboarding-step.done .onboarding-step-icon {
    background: color-mix(in srgb, var(--status-zusage) 20%, transparent);
    color: var(--status-zusage);
}
.onboarding-step-icon .num { font-size: 15px; }
.onboarding-step-icon .icon { font-size: 22px; }

.onboarding-step-body { flex: 1; min-width: 0; }
.onboarding-step-title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 14px;
}
.onboarding-step-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

@media (max-width: 600px) {
    .onboarding-step { flex-wrap: wrap; }
    .onboarding-step .btn { width: 100%; }
}

/* Desktop-Grid: Pipeline + Liste links, Widgets rechts */
@media (min-width: 900px) {
    .dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }
    .dashboard-main { min-width: 0; }
    .dashboard-side { min-width: 0; position: sticky; top: var(--space-6); }
}


/* ---------- Bewerbung Detail -------------------------------------------- */
.detail-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.detail-hero h1 { margin: 0; }
.detail-meta-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}
.detail-firma-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    font-size: 14px;
}
@media (min-width: 900px) {
    .detail-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }
    .detail-main { min-width: 0; }
    .detail-side { min-width: 0; position: sticky; top: var(--space-6); }
}


/* ---------- Landing-Page ----------------------------------------------- */
.landing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4) var(--space-16);
    min-height: 100dvh;
    position: relative;
}
@media (min-width: 900px) {
    .landing { padding: 0 var(--space-10) var(--space-16); }
}

/* Transparenter Header -- liegt auf dem Hero-Bild */
.landing-nav {
    position: absolute;
    top: calc(var(--safe-area-top, 0px) + var(--space-3));
    left: var(--space-4);
    right: var(--space-4);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    margin-bottom: 0;
    background: transparent;
}
@media (min-width: 900px) {
    .landing-nav {
        left: var(--space-10);
        right: var(--space-10);
    }
}
.landing-nav .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 18px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.landing-nav .brand-rocket {
    color: #fff;
    font-size: 26px;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35));
}
.landing-nav .brand-text { color: #fff; }

.landing-hero {
    /* Top-Padding deckt die absolute Navleiste; Bottom frei */
    padding: calc(var(--safe-area-top, 0px) + 120px) var(--space-6) var(--space-16);
    text-align: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Full-Bleed: aus dem .landing-Container ausbrechen */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (min-width: 900px) {
    .landing-hero {
        padding: 160px var(--space-10) 112px;
        min-height: 680px;
    }
}

/* Hero-Foto als Hintergrund */
.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/login-hero.jpg');
    background-size: cover;
    background-position: center;
    z-index: -2;
}

/* Theme-abhaengiger Overlay fuer Lesbarkeit */
.landing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 60%, transparent) 0%,
            color-mix(in srgb, var(--accent-2) 50%, transparent) 45%,
            color-mix(in srgb, var(--bg-primary) 85%, transparent) 100%);
    mix-blend-mode: multiply;
}
:root[data-theme="light"] .landing-hero::after {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 40%, transparent) 0%,
            color-mix(in srgb, var(--accent-2) 28%, transparent) 45%,
            color-mix(in srgb, #ffffff 60%, transparent) 100%);
    mix-blend-mode: normal;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero-chip .icon { color: #fff; }

.landing-hero h1 {
    font-size: clamp(40px, 8vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-6);
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.landing-hero h1 .accent-text {
    background: none;
    -webkit-text-fill-color: #ddd6fe;
    color: #ddd6fe;
}
.accent-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    font-size: clamp(16px, 2.2vw, 20px);
    color: rgba(255, 255, 255, 0.95);
    max-width: 620px;
    margin: 0 auto var(--space-8);
    line-height: 1.5;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.hero-ctas {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-lg {
    padding: 16px 28px;
    font-size: 16px;
    min-height: 56px;
    border-radius: var(--radius-xl);
}

/* Sections */
.landing-features, .landing-benefits, .landing-cta {
    padding: var(--space-16) 0;
}
.landing-features h2,
.landing-benefits h2,
.landing-cta h2 {
    text-align: center;
    font-size: clamp(26px, 4vw, 40px);
    margin-bottom: var(--space-8);
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 720px) {
    .features-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature-card {
    padding: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    transition: background .2s, border-color .2s, transform .2s;
}
.feature-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}
.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}
.feature-icon .icon { font-size: 28px; }
.feature-card h3 { font-size: 20px; margin-bottom: var(--space-3); }
.feature-card p { color: var(--text-secondary); margin: 0; font-size: 15px; line-height: 1.5; }
.feature-card code {
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 720px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
.benefit {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.benefit > .icon {
    font-size: 28px;
    color: var(--accent);
    flex-shrink: 0;
}
.benefit strong {
    display: block;
    font-family: var(--font-headline);
    margin-bottom: 4px;
}
.benefit p { margin: 0; }

.landing-cta {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    margin: var(--space-8) 0;
}
.landing-cta h2 { margin-bottom: var(--space-2); }
.landing-cta p  { margin-bottom: var(--space-6); font-size: 16px; }

/* Header-CTAs (Für Unternehmen + Einloggen) nebeneinander */
.landing-nav-ctas {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
@media (max-width: 560px) {
    /* Auf schmalen Screens nur der Login-CTA — Unternehmens-Sektion
       bleibt über Scrollen erreichbar. */
    .landing-nav-ctas .btn-ghost { display: none; }
}

/* ---------- Gemeinsame Section-Rahmung (Landing) ---------- */
.section-eyebrow {
    text-align: center;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 var(--space-3);
}
.section-title {
    text-align: center;
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.15;
    margin: 0 auto var(--space-3);
    max-width: 20ch;
}
.section-sub {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    max-width: 52ch;
    margin: 0 auto var(--space-8);
}

/* ---------- Blick in die App (Produkt-Mock) ---------- */
.landing-showcase {
    padding: var(--space-16) 0 var(--space-12);
}
.landing-showcase .peek-window {
    max-width: 880px;
    margin: 0 auto;
}
.peek-window {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.peek-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px var(--space-4);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.peek-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.peek-title { margin-left: var(--space-3); font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.peek-body { padding: var(--space-5); }
.peek-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.peek-stat {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.peek-stat .pn { display: block; font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.peek-stat .pl { font-size: 12px; color: var(--text-muted); }
.peek-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.peek-col { background: var(--bg-input); border-radius: var(--radius-md); padding: var(--space-3); }
.peek-col-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--space-3);
}
.peek-col-head em { margin-left: auto; font-style: normal; opacity: .7; }
.peek-col-head .cd { width: 8px; height: 8px; border-radius: 50%; }
.cd-a { background: #9aa0ff; } .cd-b { background: var(--accent); } .cd-c { background: #34d2b2; }
.peek-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.peek-card:last-child { margin-bottom: 0; }
.peek-card b { display: block; font-size: 13px; color: var(--text-primary); }
.peek-card span { font-size: 11.5px; color: var(--text-muted); }
.peek-card.is-win { border-color: color-mix(in srgb, #34d2b2 45%, transparent); }
.peek-card.is-dim { opacity: .55; }
@media (max-width: 620px) {
    .peek-board { grid-template-columns: 1fr; }
    .peek-board .peek-col:nth-child(3) { display: none; }
    .peek-stats { gap: var(--space-2); }
    .peek-stat { padding: var(--space-2) var(--space-3); }
}

/* ---------- Vertrauens-Band ---------- */
.landing-trust {
    padding: var(--space-12) var(--space-6);
    margin: var(--space-8) 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
}
.landing-trust .section-title { margin-bottom: var(--space-8); }
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    max-width: 900px;
    margin: 0 auto;
}
.trust-item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.trust-item .icon { color: var(--accent); font-size: 24px; margin-top: 1px; }
.trust-item b { display: block; font-size: 14.5px; color: var(--text-primary); margin-bottom: 2px; }
.trust-item b a { color: var(--accent); text-decoration: none; }
.trust-item span { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.trust-parents {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: var(--space-8) auto 0; font-size: 13.5px; color: var(--text-secondary);
    text-align: center;
}
.trust-parents .icon { color: var(--accent-soft); }
.trust-parents a { color: var(--accent); text-decoration: underline; }

/* ---------- Unternehmens-Anfrage (Sektion #unternehmen) ----------
   Full-Bleed-Dunkelband mit Foto-Hintergrund; hebt sich klar vom Rest
   der hellen Landing ab. Overlay ist bewusst dunkel (theme-unabhängig). */
.landing-biz {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Full-Bleed: aus dem .landing-Container ausbrechen */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: var(--space-16);
    padding: var(--space-16) var(--space-6);
    /* Dunkle Grundfarbe des Bandes (theme-unabhängig) */
    background: #0e0e16;
}
/* Bild in der rechten Hälfte */
.landing-biz::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('/assets/img/firmen-hero.jpg');
    background-size: cover;
    background-position: right center;
}
/* Verlauf: links volle Hintergrundfarbe, nach rechts transparent → Bild */
.landing-biz::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg,
            #0e0e16 0%,
            #0e0e16 38%,
            rgba(14, 14, 22, 0.72) 54%,
            rgba(14, 14, 22, 0.30) 70%,
            rgba(14, 14, 22, 0.10) 100%);
}
.biz-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.biz-content {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.biz-eyebrow {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: #b7b2ff; margin: 0 0 var(--space-3);
}
.biz-text h2 {
    color: #fff;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.12;
    margin: 0 0 var(--space-3);
    max-width: 16ch;
}
.biz-lead { color: rgba(255,255,255,.82); font-size: 16px; max-width: 42ch; margin: 0 0 var(--space-6); }
.biz-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.biz-benefits li {
    display: flex; align-items: center; gap: var(--space-3);
    color: #fff; font-size: 15px; font-weight: 500;
}
.biz-cta { align-self: flex-start; margin-top: var(--space-2); }
.biz-benefits .icon {
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radius-md);
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; flex: none;
}
.biz-form {
    display: flex; flex-direction: column; gap: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.biz-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.form-field span em { color: var(--text-muted); font-style: normal; }
.form-field input,
.form-field textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    width: 100%;
}
.form-field input:focus,
.form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form-field textarea { resize: vertical; min-height: 66px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.biz-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.biz-status { font-size: 13px; color: var(--text-muted); }
.biz-status.is-error { color: #e5624f; }
.biz-done { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 15px; }
.biz-done .icon { color: #34d2b2; }
@media (max-width: 720px) {
    .biz-row { grid-template-columns: 1fr; }
    .biz-content { max-width: 100%; }
    /* Auf schmalen Screens das ganze Band abdunkeln, damit Text über dem
       Motiv lesbar bleibt (Bild scheint nur noch dezent durch). */
    .landing-biz::after {
        background: linear-gradient(90deg,
            rgba(14, 14, 22, 0.93) 0%,
            rgba(14, 14, 22, 0.88) 55%,
            rgba(14, 14, 22, 0.62) 100%);
    }
}

.landing-footer {
    border-top: 1px solid var(--border);
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 13px;
}
.landing-footer-links {
    display: flex;
    gap: var(--space-4);
}
.landing-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .15s;
}
.landing-footer-links a:hover { color: var(--accent); }


/* ---------- Geplante Mails -- Ãbersichtsseite ------------------------ */
.status-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
}
.status-tab {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.status-tab:hover { color: var(--text-primary); background: var(--bg-secondary); }
.status-tab.active {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.plan-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.plan-row {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.plan-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.plan-title {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}
.plan-title:hover { color: var(--accent); }
.plan-subject {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-error {
    color: var(--status-error, #e03b4c);
    background: color-mix(in srgb, var(--status-error, #e03b4c) 10%, transparent);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
}
.plan-actions {
    display: flex;
    gap: 6px;
    margin-top: var(--space-2);
}

/* Mail-Hinweis in der Aktion-Card */
.aktion-mail-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent);
    padding: 3px 8px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: var(--radius-sm);
}
.aktion-mail-hint .icon { font-size: 14px; }

/* Mail-Toggle + Section im Aktion-Modal */
.aktion-mail-toggle {
    margin: var(--space-4) 0 var(--space-2);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: 14px;
}
.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.checkbox-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}
.checkbox-row .icon { color: var(--accent); }
.aktion-mail-section {
    padding: var(--space-3) 0 0;
}

/* ---------- Vorlagen-Editor ------------------------------------------ */
.vorlagen-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
}
.vorlagen-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.vorlagen-tab:hover { color: var(--text-primary); background: var(--bg-secondary); }
.vorlagen-tab.active {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.vorlagen-placeholders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vorlagen-placeholders .btn {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 10px;
}
.badge-accent {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

/* ---------- Geplante Mails im Bewerbung-Detail ------------------------ */
.geplante-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}
.geplante-row:last-child { border-bottom: 0; }
.geplante-title {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---------- Smart Suggestions (Dashboard) ----------------------------- */
.suggestions-card {
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 6%, transparent) 0%,
        transparent 80%),
      var(--bg-card);
}
.suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
    margin-bottom: var(--space-2);
}
.suggestion-item:last-child { margin-bottom: 0; }
.suggestion-item:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}
.suggestion-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.suggestion-icon .icon { font-size: 22px; }
.suggestion-body { flex: 1; min-width: 0; }
.suggestion-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.suggestion-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suggestion-reason {
    color: var(--text-secondary);
    margin-top: 2px;
}
.suggestion-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ---------- Unterlagen / Anlagen -------------------------------------- */
.anlagen-kat {
    margin-bottom: var(--space-6);
}
.anlagen-kat:last-child { margin-bottom: 0; }
.anlagen-kat-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-headline);
    font-size: 16px;
    margin: 0 0 var(--space-3);
}
.anlagen-kat-title .icon { color: var(--accent); }

.anlagen-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.anlage-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    transition: border-color .15s, background-color .15s;
}
.anlage-row:hover { border-color: var(--accent); }
.anlage-thumb {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    flex-shrink: 0;
}
.anlage-thumb .icon { font-size: 22px; }
.anlage-meta { flex: 1; min-width: 0; }
.anlage-title {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anlage-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.btn-ghost.danger:hover { color: var(--status-error, #e03b4c); }

/* Inline-Liste in Bewerbung-Detail */
.anlagen-inline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.anlagen-inline-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: 13px;
}
.anlagen-inline-list li .icon { color: var(--accent); flex-shrink: 0; }
.anlage-inline-title {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anlage-inline-title:hover { color: var(--accent); }

/* Picker-Modal */
.anlagen-picker {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 420px;
    overflow-y: auto;
}
.anlagen-picker-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.anlagen-picker-row:hover { border-color: var(--accent); }
.anlagen-picker-row.attached {
    opacity: .65;
    cursor: default;
    background: var(--bg-secondary);
}
.anlagen-picker-row input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}
.anlagen-picker-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* ---------- Kalender: Desktop 2-Spalten ------------------------------- */
.kal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.kal-main, .kal-side { min-width: 0; }

@media (min-width: 900px) {
    .kal-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }
    .kal-side { position: sticky; top: var(--space-6); }
}

/* ---------- Firmen-Liste: Karten-Grid auf Desktop --------------------- */
.firmen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}
@media (min-width: 900px) {
    .firmen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
    .firmen-grid .list-item { margin-bottom: 0; }
}
@media (min-width: 1200px) {
    .firmen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- Profil: 2-Spalten auf Desktop ----------------------------- */
.profil-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}
@media (min-width: 900px) {
    .profil-layout {
        grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
        gap: var(--space-8);
    }
    .profil-side {
        position: sticky;
        top: var(--space-6);
    }
}
.profil-main { min-width: 0; }
.profil-side { min-width: 0; }


/* ---------- Back-Link --------------------------------------------------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-headline);
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}
.back-link:hover { color: var(--text-secondary); text-decoration: none; }

/* Admin: Logo-Upload-Widget (Unternehmen) */
.un-logo-row { display: flex; align-items: center; gap: var(--space-4); }
.un-logo-preview {
    width: 72px; height: 72px; flex: none;
    border-radius: var(--radius-md); border: 1px solid var(--border);
    background: #fff; object-fit: contain; padding: 6px;
}
.un-logo-empty {
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 11px; line-height: 1.2;
    color: var(--text-muted); background: var(--bg-input); padding: 0;
}
.un-logo-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Bewerbung anlegen: Ausbildungsberuf-Schnellauswahl (aus dem Firmenprofil) */
.beruf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.beruf-chip {
    font: inherit; font-size: 13px; cursor: pointer;
    background: var(--bg-input); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
    transition: background .12s, color .12s, border-color .12s;
}
.beruf-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.beruf-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Admin: Abschluss-Checkboxen im Beruf-Steckbrief */
.beruf-abs-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.beruf-abs { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

/* Admin: Firmen-Cover (Facebook-artig) — Titelbild-Banner + Logo, inline editierbar */
.un-cover {
    position: relative; margin: var(--space-4) 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--bg-card);
}
.un-cover-banner {
    position: relative; height: 150px;
    background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #7c3aed));
}
.un-cover-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.un-cover-edit {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 13px; cursor: pointer;
    background: rgba(255,255,255,.92); color: #1a1a1a;
    border: 1px solid rgba(0,0,0,.1); border-radius: 999px; padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.un-cover-edit:hover { background: #fff; }
.un-cover-badge {
    position: absolute; top: 12px; left: 12px;
    font-size: 11px; font-weight: 600; color: #fff;
    background: rgba(0,0,0,.45); border-radius: 999px; padding: 4px 10px;
}
.un-cover-logo-wrap { display: flex; align-items: flex-end; gap: 16px; padding: 0 20px 16px; }
.un-cover-logo {
    position: relative; width: 92px; height: 92px; margin-top: -46px; flex: none;
    border-radius: var(--radius-lg); border: 3px solid var(--bg-card);
    background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.un-cover-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: calc(var(--radius-lg) - 3px); background: #fff; padding: 5px; }
.un-cover-logo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; line-height: 1.2; color: var(--text-muted); }
.un-cover-logo-edit {
    position: absolute; bottom: -4px; right: -4px; width: 30px; height: 30px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: var(--accent); color: #fff; border: 2px solid var(--bg-card);
}
.un-cover-logo-edit:hover { filter: brightness(1.08); }
.un-cover-meta { flex: 1; min-width: 0; padding-bottom: 4px; display: flex; flex-direction: column; gap: 6px; }
.un-cover-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.un-cover-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Admin: Schnellfilter-Chips in der Unternehmensliste */
.u-quickfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.u-chip {
    font: inherit; font-size: 13px; cursor: pointer;
    background: var(--bg-card); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
    transition: background .12s, color .12s, border-color .12s;
}
.u-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.u-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Admin: Titelbild-Upload-Widget (schmaler CI-Banner) */
.un-titel-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.un-titel-preview {
    width: 240px; height: 68px; flex: none;
    border-radius: var(--radius-md); border: 1px solid var(--border);
    background: var(--bg-input); object-fit: cover;
}
.un-titel-empty {
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 12px; color: var(--text-muted);
}

/* ==========================================================================
 * DASHBOARD nach CD-Template "app-dashboard" (Überblick)
 * ========================================================================== */
.dash-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.dash-pagehead h1 { margin: 0 0 var(--space-1); }
.dash-context { margin: 0; font-size: 15px; max-width: 60ch; }

.dash-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.tag-overdue {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--termin-nachfrage) 15%, transparent);
    color: var(--termin-nachfrage);
    font-size: 12px;
    font-weight: 700;
}

/* Pipeline-Statusleiste: eine Kachel je Phase */
.dash-pipe {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .dash-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dash-pipe { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dash-pipe-step {
    display: grid;
    gap: 6px;
    justify-items: start;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}
.dash-pipe-step:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.dash-pipe-step b {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-pipe-sub {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Zweispaltiges Layout: Inhalt links, Widgets rechts */
.dash-two-col {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}
@media (min-width: 1000px) { .dash-two-col { grid-template-columns: 1fr 360px; } }
.dash-col-main, .dash-col-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }

/* Task-Zeilen (Nächste Schritte / Nächste Termine) */
.dash-task {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.dash-task:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-task:first-child { padding-top: 0; }
.dash-task-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dash-task-body b { font-size: 15px; font-weight: 600; }
.dash-task-body span { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-task-icon {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-on-accent);
}
.dash-task-cta {
    flex: none;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
}
.dash-task:hover .dash-task-cta { border-color: var(--accent); color: var(--accent); }
.dash-date-chip {
    display: grid;
    place-items: center;
    width: 48px;
    flex: none;
    padding: var(--space-2) 0;
    border-radius: var(--radius-md);
    background: var(--accent-100, var(--bg-card-hover));
    color: var(--accent-dim);
    text-align: center;
    line-height: 1.1;
}
.dash-date-chip b { font-family: var(--font-headline); font-weight: 700; font-size: 18px; }
.dash-date-chip span { font-size: 11px; font-weight: 600; text-transform: uppercase; }

/* Profil-Lücken-Karte (surface-brand) */
.dash-profile-card {
    background: var(--surface-brand, var(--bg-card-hover));
    border-color: var(--accent-300, var(--border-hover));
}
.dash-progress {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--accent-200, var(--bg-bright));
    overflow: hidden;
}
.dash-progress > span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
}
.btn-block { width: 100%; }

/* ==========================================================================
 * BEWERBUNG-DETAIL nach CD-Template "app-bewerbung-detail"
 * ========================================================================== */
.crumbs-app {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}
.crumbs-app a { color: var(--text-muted); text-decoration: none; }
.crumbs-app a:hover { color: var(--accent); text-decoration: underline; }
.crumbs-app span[aria-hidden] { color: var(--outline-muted); }

.det-head { gap: var(--space-4); margin-bottom: var(--space-4); }
.det-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.det-mark {
    width: 56px; height: 56px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--accent-200, var(--bg-card-hover));
    color: var(--accent-dim);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 20px;
}
.det-title { flex: 1; min-width: 220px; }
.det-title h1 { margin: 0 0 4px; font-size: 24px; }
@media (min-width: 768px) { .det-title h1 { font-size: 30px; } }
.det-title p { margin: 0; font-size: 15px; }
.row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.prio-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-bright);
    color: var(--text-secondary);
}
.prio-badge::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--outline); }
.prio-badge.prio-hoch { color: var(--status-absage); }
.prio-badge.prio-hoch::before { background: var(--status-absage); }
.prio-badge.prio-niedrig { color: var(--text-muted); }
.det-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.btn-danger-quiet { color: var(--status-absage); }
.btn-danger-quiet:hover { background: color-mix(in srgb, var(--status-absage) 10%, transparent); }

/* Dokument-Zeilen (CD "doc-row") — als Button nutzbar */
.doc-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.doc-row:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.doc-row-icon {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--accent-200, var(--bg-card-hover));
    color: var(--accent-dim);
}
.doc-row-grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.doc-row-grow b { font-size: 15px; font-weight: 600; }
.doc-row-grow span { font-size: 13px; color: var(--text-muted); }
.doc-row .btn { flex: none; }

/* ==========================================================================
 * PROFIL nach CD-Template "app-profil" (Karten-Gruppen + Save-Bar)
 * ========================================================================== */
.pagehead-app { margin-bottom: var(--space-4); }
.pagehead-app h1 { margin: 0 0 var(--space-1); }
.pagehead-app p { margin: 0; max-width: 60ch; }

.profil-groups { display: grid; gap: var(--space-4); max-width: 860px; }
.profil-group { gap: var(--space-4); }
.profil-group > h3 { margin: 0; }
.profil-group .form-group { margin: 0; }

.form-two { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .form-two { grid-template-columns: 1fr 1fr; } }
.form-three { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .form-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.photo-row { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.photo-row .foto-preview {
    width: 96px; height: 128px; flex: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--accent-100, var(--bg-card-hover));
    display: grid; place-items: center;
}
.photo-row .foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-row .foto-placeholder {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 28px;
    color: var(--accent-dim);
}
.photo-row-actions { flex: 1; min-width: 220px; display: grid; gap: var(--space-2); align-content: start; }
.unterschrift-box {
    min-width: 180px;
    min-height: 72px;
    flex: none;
    display: grid;
    place-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-strong);
    background: var(--bg-card);
}
.unterschrift-box img { max-height: 60px; max-width: 220px; }

.konto-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.savebar {
    position: sticky;
    bottom: calc(var(--tab-height) + var(--safe-area-bottom) + var(--space-2));
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-glow-xl);
}
@media (min-width: 900px) { .savebar { bottom: var(--space-4); } }

/* Login: Vertrauens-Elemente + Bewerben-Kontexthinweis (CD "app-login") */
.login-trust {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.login-trust span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--text-muted);
}
.login-trust .icon { color: var(--accent); font-size: 16px; }
.login-context {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-brand, var(--bg-card-hover));
    color: var(--accent-800, var(--accent-dim));
    font-size: 14px;
    margin-bottom: var(--space-3);
}
.login-context .icon { flex: none; margin-top: 2px; }

/* Bewerbung-neu: "oder"-Trenner (CD "orline") */
.orline { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--outline); }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Marken-Badge in der Landing-Nav (weiße Variante auf Hero-Foto) */
.brand-badge { display: block; width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }