/* ====================================================================
   SecurPro Partnerportal – app.css
   Designsprache: modern, seriös, vertrauenswürdig
   Farbwelt:  Weiß · Dunkelblau (#15294D) · Akzentblau (#2563EB)
   ==================================================================== */

:root {
    --sp-navy:        #15294D;
    --sp-navy-700:    #1d3563;
    --sp-navy-900:    #0f1d38;
    --sp-accent:      #2563EB;
    --sp-accent-600:  #1d4fd7;
    --sp-bg:          #f5f7fb;
    --sp-surface:     #ffffff;
    --sp-border:      #e3e8f0;
    --sp-text:        #1f2a3d;
    --sp-muted:       #6b7689;
    --sp-success:     #1f9d6b;
    --sp-radius:      14px;
    --sp-radius-sm:   9px;
    --sp-shadow:      0 10px 30px rgba(21, 41, 77, .08);
    --sp-shadow-sm:   0 4px 14px rgba(21, 41, 77, .06);
}

* { box-sizing: border-box; }

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--sp-text);
    background: var(--sp-bg);
}

/* ---------- Marke / Logo ------------------------------------------- */
.sp-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font-weight: 700;
}
.sp-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sp-navy), var(--sp-accent));
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
    font-size: .95rem;
    box-shadow: var(--sp-shadow-sm);
}
.sp-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    color: var(--sp-navy);
    font-size: 1.12rem;
}
.sp-brand-sub {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sp-muted);
}
.sp-admin-topbar .sp-brand-text,
.sp-admin-topbar .sp-brand-sub { color: #fff; }
.sp-admin-topbar .sp-brand-sub { color: rgba(255,255,255,.65); }

.sp-claim {
    font-style: italic;
    color: var(--sp-muted);
    font-size: .95rem;
}

/* ---------- Buttons ------------------------------------------------- */
.btn-navy {
    background: var(--sp-navy);
    border-color: var(--sp-navy);
    color: #fff;
}
.btn-navy:hover, .btn-navy:focus {
    background: var(--sp-navy-700);
    border-color: var(--sp-navy-700);
    color: #fff;
}
.btn-outline-navy {
    border: 1px solid var(--sp-navy);
    color: var(--sp-navy);
    background: transparent;
}
.btn-outline-navy:hover, .btn-outline-navy:focus {
    background: var(--sp-navy);
    color: #fff;
}
.btn-accent {
    background: var(--sp-accent);
    border-color: var(--sp-accent);
    color: #fff;
}
.btn-accent:hover, .btn-accent:focus {
    background: var(--sp-accent-600);
    border-color: var(--sp-accent-600);
    color: #fff;
}

/* ---------- Öffentliches Layout ------------------------------------ */
.sp-body { display: flex; flex-direction: column; min-height: 100vh; }
.sp-main { flex: 1 0 auto; }

.sp-navbar {
    background: #fff;
    border-bottom: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow-sm);
}
.sp-navbar .nav-link {
    color: var(--sp-text);
    font-weight: 500;
}
.sp-navbar .nav-link:hover { color: var(--sp-accent); }

.sp-footer {
    background: var(--sp-navy);
    color: #fff;
    margin-top: auto;
}
.sp-footer a:hover { text-decoration: underline !important; }

/* ---------- Hero / Startseite -------------------------------------- */
.sp-hero {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 22px;
    padding: clamp(1.6rem, 4vw, 3.4rem);
    box-shadow: var(--sp-shadow);
}
.sp-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sp-accent);
    margin-bottom: .8rem;
}
.sp-hero-title {
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.12;
    color: var(--sp-navy);
    letter-spacing: -.01em;
}
.sp-hero-lead {
    font-size: 1.08rem;
    color: var(--sp-muted);
    margin-top: 1rem;
    max-width: 38rem;
}
.sp-feature-card {
    background: linear-gradient(160deg, var(--sp-navy), var(--sp-navy-900));
    color: #fff;
    border-radius: 18px;
    padding: 1.8rem;
    box-shadow: var(--sp-shadow);
}
.sp-feature-card h2 { color: #fff; }
.sp-check-list { list-style: none; padding: 0; margin: 0; }
.sp-check-list li {
    position: relative;
    padding: .42rem 0 .42rem 1.9rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
    font-size: .96rem;
}
.sp-check-list li:last-child { border-bottom: 0; }
.sp-check-list li::before {
    content: "✓";
    position: absolute; left: 0; top: .42rem;
    width: 1.3rem; height: 1.3rem;
    display: grid; place-items: center;
    background: rgba(37,99,235,.25);
    color: #9ec1ff;
    border-radius: 50%;
    font-size: .8rem; font-weight: 700;
}

.sp-step {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 1.5rem;
    height: 100%;
    box-shadow: var(--sp-shadow-sm);
}
.sp-step-no {
    display: inline-grid; place-items: center;
    width: 2.2rem; height: 2.2rem;
    background: var(--sp-accent);
    color: #fff; font-weight: 700;
    border-radius: 50%;
    margin-bottom: .8rem;
}

/* ---------- Karten / generische Flächen ---------------------------- */
.sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-sm);
}
.sp-card-pad { padding: 1.4rem 1.5rem; }
.sp-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sp-navy);
    margin-bottom: 1rem;
}

/* ---------- Authentifizierung -------------------------------------- */
.sp-auth-body {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 80% -10%, #1d3563 0%, var(--sp-navy) 45%, var(--sp-navy-900) 100%);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}
.sp-auth-wrapper { width: 100%; max-width: 460px; }
.sp-auth-card {
    background: #fff;
    border-radius: 18px;
    padding: 2.2rem clamp(1.3rem, 4vw, 2.4rem);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.sp-auth-card .sp-brand-text { color: var(--sp-navy); }

/* ---------- Admin-Layout ------------------------------------------- */
.sp-admin-body { background: var(--sp-bg); min-height: 100vh; }
.sp-admin-topbar {
    background: var(--sp-navy);
    box-shadow: var(--sp-shadow-sm);
    z-index: 1040;
}
.sp-admin-shell { display: flex; min-height: calc(100vh - 56px); }
.sp-sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: var(--sp-navy-900);
    color: #fff;
}
.sp-sidebar-nav { padding: 1rem .65rem; }
.sp-sidebar-nav .nav-link {
    color: rgba(255,255,255,.78);
    border-radius: 9px;
    padding: .6rem .8rem;
    margin-bottom: .15rem;
    display: flex; align-items: center; gap: .65rem;
    font-weight: 500;
}
.sp-sidebar-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sp-sidebar-nav .nav-link.active { background: var(--sp-accent); color: #fff; }
.sp-sidebar-sep {
    margin: 1rem .8rem .35rem;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
}
.sp-ico { width: 1.2rem; text-align: center; display: inline-block; }
.sp-admin-content { flex: 1 1 auto; min-width: 0; }

@media (max-width: 991.98px) {
    .sp-sidebar { width: 250px; flex: none; }
}

/* ---------- KPI-Kacheln -------------------------------------------- */
.sp-kpi {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--sp-shadow-sm);
    height: 100%;
}
.sp-kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--sp-navy); line-height: 1; }
.sp-kpi-label { font-size: .82rem; color: var(--sp-muted); margin-top: .35rem; }
.sp-kpi.is-warn .sp-kpi-value { color: #c2410c; }
.sp-kpi.is-accent .sp-kpi-value { color: var(--sp-accent); }
.sp-kpi.is-success .sp-kpi-value { color: var(--sp-success); }

/* ---------- Fortschritt -------------------------------------------- */
.sp-progress-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--sp-shadow-sm);
}
.sp-progress { height: 12px; border-radius: 99px; background: #e9eef6; }
.sp-progress .progress-bar {
    background: linear-gradient(90deg, var(--sp-accent), #4f8bff);
    border-radius: 99px;
}
.sp-progress-pct { font-weight: 800; color: var(--sp-accent); }
.sp-missing-list { padding-left: 1.1rem; margin: 0; }
.sp-missing-list li { font-size: .9rem; color: var(--sp-muted); }

/* ---------- Dokumenten-Explorer ------------------------------------ */
.sp-doc-kat {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    margin-bottom: .8rem;
    background: #fff;
    overflow: hidden;
}
.sp-doc-kat > summary {
    cursor: pointer;
    list-style: none;
    padding: .85rem 1.1rem;
    font-weight: 600;
    color: var(--sp-navy);
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
}
.sp-doc-kat > summary::-webkit-details-marker { display: none; }
.sp-doc-kat[open] > summary { border-bottom: 1px solid var(--sp-border); }
.sp-doc-kat .sp-doc-body { padding: .9rem 1.1rem; }
.sp-kat-badge {
    font-size: .72rem; font-weight: 600;
    padding: .12rem .55rem; border-radius: 99px;
    background: #eef2fb; color: var(--sp-navy);
}
.sp-pflicht-dot { color: var(--sp-accent); font-weight: 800; }

.sp-doc-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--sp-border);
}
.sp-doc-row:last-child { border-bottom: 0; }
.sp-doc-name { font-size: .92rem; word-break: break-all; }
.sp-doc-meta { font-size: .76rem; color: var(--sp-muted); }

.sp-pruef-badge { font-size: .72rem; padding: .12rem .5rem; border-radius: 6px; font-weight: 600; }
.sp-pruef-offen    { background: #fff5e6; color: #b45309; }
.sp-pruef-geprueft { background: #e6f6ee; color: #1f7a4d; }
.sp-pruef-abgelehnt{ background: #fde8e8; color: #b91c1c; }

/* ---------- Drag & Drop -------------------------------------------- */
.sp-dropzone {
    border: 2px dashed #b9c5dc;
    border-radius: var(--sp-radius);
    background: #fafcff;
    padding: 1.6rem;
    text-align: center;
    color: var(--sp-muted);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sp-dropzone.is-drag { border-color: var(--sp-accent); background: #eef4ff; color: var(--sp-navy); }
.sp-dropzone strong { color: var(--sp-navy); }
.sp-file-list { list-style: none; padding: 0; margin: .8rem 0 0; text-align: left; }
.sp-file-list li {
    font-size: .85rem; padding: .3rem .55rem;
    background: #fff; border: 1px solid var(--sp-border);
    border-radius: 7px; margin-bottom: .3rem;
    display: flex; justify-content: space-between;
}

/* ---------- Status-Pille ------------------------------------------- */
.sp-status {
    display: inline-block;
    font-size: .76rem; font-weight: 600;
    padding: .2rem .65rem; border-radius: 99px;
    background: #eef2fb; color: var(--sp-navy);
    white-space: nowrap;
}
.sp-status[data-status="Interessent"] { background:#eef2fb; color:#334; }
.sp-status[data-status="Kennenlerngespraech vereinbart"] { background:#e7f0ff; color:#1d4fd7; }
.sp-status[data-status="Unterlagen unvollstaendig"] { background:#fff1e0; color:#b45309; }
.sp-status[data-status="Pruefung laeuft"] { background:#fef9c3; color:#854d0e; }
.sp-status[data-status="Zur Zusammenarbeit freigegeben"] { background:#e6f6ee; color:#1f7a4d; }
.sp-status[data-status="Aktiver Partner"] { background:#dcfce7; color:#15803d; }
.sp-status[data-status="Mentor"] { background:#ede9fe; color:#6d28d9; }
.sp-status[data-status="Unternehmerpartner"] { background:#dbeafe; color:#1e40af; }
.sp-status[data-status="Zusammenarbeit beendet"] { background:#f1f1f3; color:#6b7280; }

/* ---------- Kontakt-Schnellzugriff (Anrufen/WhatsApp/E-Mail) -------- */
.sp-contact-actions { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.sp-contact-actions a {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .8rem; font-weight: 600;
    padding: .25rem .6rem; border-radius: 8px;
    text-decoration: none; border: 1px solid var(--sp-border);
    color: var(--sp-navy); background: #fff;
}
.sp-contact-actions a:hover { background: #f1f5ff; border-color: var(--sp-accent); }
.sp-wa { color: #1f9d4d !important; }

/* ---------- Timeline / Historie ------------------------------------ */
.sp-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.sp-timeline::before {
    content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px;
    width: 2px; background: var(--sp-border);
}
.sp-timeline li { position: relative; padding: 0 0 1rem 1.7rem; }
.sp-timeline li::before {
    content: ""; position: absolute; left: 0; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid var(--sp-accent);
}
.sp-note {
    background: #fff; border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-accent);
    border-radius: 8px; padding: .7rem .9rem; margin-bottom: .6rem;
}
.sp-note .sp-note-meta { font-size: .76rem; color: var(--sp-muted); }

/* ---------- Tabellen ----------------------------------------------- */
.sp-table { background:#fff; border-radius: var(--sp-radius); overflow:hidden; box-shadow: var(--sp-shadow-sm); }
.sp-table thead th {
    background: #f3f6fc; color: var(--sp-navy);
    font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
    border-bottom: 1px solid var(--sp-border);
}
.sp-table td { vertical-align: middle; }

/* ---------- Diverses ----------------------------------------------- */
.sp-data-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); }
.sp-data-value { font-weight: 600; color: var(--sp-text); }
.text-navy { color: var(--sp-navy) !important; }
a { color: var(--sp-accent); }
.form-control:focus, .form-select:focus {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
}

/* =====================================================================
   Zwei-Faktor-Authentifizierung (v1.1)
   ===================================================================== */
.sp-otp-input {
    letter-spacing: .45em;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.sp-qr {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    line-height: 0;
}
.sp-qr svg { width: 100%; height: auto; }
.sp-secret {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .12em;
    color: var(--sp-navy);
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: .55rem .75rem;
    word-break: break-all;
}
.sp-step-list { padding-left: 1.1rem; margin: 0; }
.sp-step-list li { margin-bottom: .45rem; color: var(--sp-text); }
.sp-recovery-toggle > summary {
    cursor: pointer;
    color: var(--sp-muted);
    font-size: .9rem;
}
.sp-recovery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem .9rem;
}
@media (min-width: 576px) {
    .sp-recovery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sp-recovery-code {
    display: block;
    text-align: center;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .08em;
    color: var(--sp-navy);
    background: var(--sp-bg);
    border: 1px dashed var(--sp-border);
    border-radius: 8px;
    padding: .5rem .25rem;
}
.sp-brand-logo { height: 34px; width: auto; display: block; }
.sp-auth-logo  { height: 54px; }
.sp-brand-portal {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sp-muted);
    padding-left: .6rem;
    margin-left: .55rem;
    border-left: 1px solid var(--sp-border);
}
.sp-brand-chip {
    background: #fff;
    border-radius: 9px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
}
.sp-brand-chip .sp-brand-logo { height: 26px; }
.sp-brand-portal-light {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    margin-left: .6rem;
}