/* ============================================================
   VF PremiumStores – Vertragserfassung
   Design im OneHome-Look (hell, weiße Glass-Cards, Bricolage Grotesque,
   Vodafone-Rot als Akzent) — passend zu onehome.vf-premium.de
   ============================================================ */
@import url('/portal/assets/fonts.css');

:root {
    --red:        #e60000;
    --red-dark:   #c2000f;
    --ink:        #1d1d1f;
    --ink-soft:   #6e6e73;
    --ink-faint:  #8e8e93;
    --line:       rgba(0,0,0,.1);
    --bg:         #f5f5f7;
    --card:       #ffffff;
    --card2:      #ececef;
    --ok:         #248a3d;  --ok-bg:   rgba(36,138,61,.1);
    --warn:       #b97200;  --warn-bg: rgba(185,114,0,.1);
    --bad:        #e60000;  --bad-bg:  rgba(230,0,0,.08);
    --r-card:     18px;
    --r-ui:       12px;
    --shadow:     0 10px 26px rgba(0,0,0,.12);
    --shadow-hov: 0 14px 34px rgba(0,0,0,.16);

    /* Aliase, damit bestehende Klassennamen weiter funktionieren */
    --vf-red:      var(--red);
    --vf-red-dark: var(--red-dark);
    --vf-red-soft: var(--bad-bg);
    --ink-muted:   var(--ink-soft);
    --err:         var(--bad);
    --err-soft:    var(--bad-bg);
    --ok-soft:     var(--ok-bg);
    --radius:      var(--r-card);
    --radius-sm:   var(--r-ui);
    --shadow-sm:   var(--shadow);

    --font:   "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    --font-d: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* Farbmodus-Variablen (Standard). Werden per body[data-theme] überschrieben. */
    --page-bg:        linear-gradient(135deg, #e60000 0%, #c1000f 52%, #a3000d 100%);
    --on-bg:          #ffffff;
    --on-bg-soft:     #ffffff;   /* voll deckend für AA-Kontrast auf Rot; Hierarchie über Größe */
    --side-bg:        #ffffff;
    --side-text:      #5f5f66;
    --side-strong:    #1d1d1f;
    --side-hover:     #f3f3f6;
    --side-active-bg: #fde9e9;
    --side-line:      #e9e9ee;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    /* Hintergrund je Farbmodus (Standard = roter Verlauf). */
    background: var(--page-bg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--ink);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }

/* -------------------- Topbar (= OneHome .nav) -------------------- */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid var(--line);
}
.topbar-inner {
    max-width: 1080px; margin: 0 auto;
    padding: 12px clamp(16px, 4vw, 36px);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-badge {
    background: var(--red); color: #fff;
    font-family: var(--font-d); font-weight: 800; font-size: 15px;
    padding: 5px 10px; border-radius: 7px; letter-spacing: -.3px;
    display: inline-flex; align-items: center; justify-content: center;
}
.brand-badge-lg { font-size: 22px; padding: 10px 15px; border-radius: 12px; }
.brand-name { font-family: var(--font-d); font-weight: 700; font-size: 16px; letter-spacing: -.3px; color: var(--ink); }

.topnav { display: flex; gap: 4px; margin-left: auto; }
.navlink {
    padding: 8px 13px; border-radius: var(--r-ui);
    font-weight: 600; font-size: 13px; color: var(--ink-soft);
    transition: .14s;
}
.navlink:hover { background: var(--card); color: var(--ink); }
.navlink.is-active { background: rgba(230,0,0,.1); color: var(--red); }

.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }

/* -------------------- Page / Footer -------------------- */
.page { max-width: 1080px; margin: 0 auto; padding: 24px clamp(16px,4vw,32px) 64px; }
.footer { color: var(--on-bg-soft); font-size: 12px; padding: 18px clamp(16px,4vw,36px) 44px; border-top: .5px solid rgba(128,128,128,.25); margin-top: 16px; text-align: center; }
/* Datei-Upload (gestyltes Feld statt nacktem Datei-Input) */
.fileup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fileup-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fileup-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--card2); border: .5px solid var(--line); border-radius: 11px; padding: 9px 16px; white-space: nowrap; }
.fileup-btn:hover { background: var(--line); }
.fileup-input:focus-visible + .fileup-btn { outline: 2px solid var(--red); outline-offset: 2px; }
.fileup-name { font-size: 13px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }

/* -------------------- Hero -------------------- */
.hero { padding: clamp(20px,4vw,40px) 0 18px; }
.hero-title { font-family: var(--font-d); font-size: clamp(28px,5vw,40px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.05; margin: 0 0 6px; color: var(--on-bg); }
.hero-sub { color: var(--on-bg-soft); margin: 0; font-size: clamp(14px,1.6vw,17px); }

/* -------------------- Stat cards -------------------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card {
    background: var(--card); border: .5px solid var(--line);
    border-radius: var(--r-card); padding: 18px 20px;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 8px;
}
.stat-card-primary::before {
    content: ""; display: block; width: 26px; height: 4px;
    border-radius: 99px; background: var(--red); margin-bottom: 2px;
}
.stat-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.stat-value { font-family: var(--font-d); font-size: clamp(26px,4vw,34px); font-weight: 800; letter-spacing: -.8px; line-height: 1.05; color: var(--ink); }
.stat-card-primary .stat-value { color: var(--red); }

/* -------------------- Cards -------------------- */
.card {
    background: var(--card); border: .5px solid var(--line);
    border-radius: var(--r-card); padding: 22px;
    box-shadow: var(--shadow); margin-bottom: 16px;
}
.card-head { margin-bottom: 16px; }
.card-title { font-family: var(--font-d); font-size: clamp(18px,2.4vw,22px); font-weight: 800; letter-spacing: -.5px; margin: 0; color: var(--ink); }
.card-sub { color: var(--ink-soft); margin: 5px 0 0; font-size: 13.5px; }

/* -------------------- Buttons -------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: .5px solid transparent; cursor: pointer;
    font-family: var(--font); font-weight: 600; font-size: 14px;
    padding: 10px 16px; border-radius: var(--r-ui);
    transition: .14s; -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 6px 18px rgba(230,0,0,.22); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-primary:disabled { background: #e3a6a6; border-color: #e3a6a6; box-shadow: none; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--card2); }
.btn-danger { background: #fff; color: var(--bad); border-color: rgba(230,0,0,.3); }
.btn-danger:hover { background: var(--bad-bg); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; box-shadow: none; }
.btn-lg { padding: 13px 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* Buttons direkt auf dem roten Hintergrund (z. B. Dashboard-CTA): invertiert,
   damit kein Rot-auf-Rot entsteht. Buttons in weißen Karten bleiben rot. */
.page > .btn-primary { background: #fff; color: var(--red); border-color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.page > .btn-primary:hover { background: #f3f3f5; border-color: #f3f3f5; }
.page > .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.page > .btn-ghost:hover { background: rgba(255,255,255,.24); }

/* -------------------- Fields / Forms -------------------- */
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-weight: 600; font-size: 12px; color: var(--ink-soft); margin-bottom: 7px; }
.field-hint { font-weight: 500; color: var(--ink-faint); font-size: 12px; }
.field-error { display: block; color: var(--bad); font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.input, select.input, textarea.input {
    width: 100%; font-family: var(--font); font-size: 15px;
    padding: 11px 13px; border: .5px solid var(--line);
    border-radius: var(--r-ui); background: var(--card2); color: var(--ink);
    transition: .14s; appearance: none; -webkit-appearance: none;
}
textarea.input { resize: vertical; min-height: 110px; line-height: 1.5; }
.input:focus, select.input:focus, textarea.input:focus {
    outline: none; border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(230,0,0,.15);
}
.input.is-error { border-color: var(--bad); }
select.input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.input-file {
    width: 100%; font-family: var(--font); font-size: 14px;
    padding: 11px 12px; border: 1px dashed var(--line);
    border-radius: var(--r-ui); background: var(--card2);
}
.input-file.is-error { border-color: var(--bad); }

.form-actions { margin-top: 8px; }
.form-actions-split { display: flex; justify-content: space-between; gap: 12px; }

/* -------------------- Options (Checkboxen) -------------------- */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; border: .5px solid var(--line);
    border-radius: var(--r-ui); background: var(--card2);
    cursor: pointer; transition: .14s;
}
.option:hover { border-color: rgba(230,0,0,.4); }
.option input { width: 19px; height: 19px; accent-color: var(--red); }
.option-text { font-weight: 600; font-size: 14px; }
.options-empty { color: var(--ink-soft); font-size: 14px; margin: 4px 0; }

/* -------------------- Steps -------------------- */
.steps { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.step { color: var(--on-bg-soft); text-transform: uppercase; opacity: .8; }
.step.is-active { color: var(--on-bg); opacity: 1; }
.step-sep { flex: 0 0 26px; height: 2px; background: rgba(255,255,255,.3); border-radius: 2px; }

/* -------------------- Zusammenfassung -------------------- */
.summary-card { border-left: 3px solid var(--red); }
.summary-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.summary-tarif { font-family: var(--font-d); font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.summary-opt { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--card2); color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.summary-prov {
    margin-top: 16px; padding-top: 16px; border-top: .5px solid var(--line);
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.summary-prov-label { color: var(--ink-soft); font-weight: 600; font-size: 13px; }
.summary-prov-value { font-family: var(--font-d); font-size: 24px; font-weight: 800; color: var(--red); letter-spacing: -.6px; }

/* -------------------- Chips (Kategorien) -------------------- */
.chip { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 11px; border-radius: 20px; text-transform: uppercase; }
.chip-credit        { background: #e7efff; color: #0a5bd0; }
.chip-breitband     { background: var(--bad-bg); color: var(--red); }
.chip-vvl           { background: #ecebff; color: #5b5bd6; }
.chip-tv            { background: #fff1dd; color: #c87a12; }
.chip-winbackupsell { background: #e3f7f0; color: #0f9b6c; }
.chip-weitervorgnge { background: #efe9ff; color: #6b3fd1; }

/* -------------------- Vertragsliste -------------------- */
.vertrag-liste, .user-liste { list-style: none; margin: 0; padding: 0; }
.vertrag-item { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: .5px solid var(--line); }
.vertrag-item:first-child { border-top: none; }
.vertrag-main { flex: 1; min-width: 0; }
.vertrag-zeile1 { display: flex; align-items: center; gap: 10px; }
.vertrag-tarif { font-family: var(--font-d); font-weight: 700; font-size: 14.5px; letter-spacing: -.1px; }
.vertrag-zeile2 { color: var(--ink); font-size: 13.5px; margin-top: 4px; }
.vertrag-opt { color: var(--ink-soft); }
.vertrag-zeile3 { color: var(--ink-faint); font-size: 12px; margin-top: 3px; }
.vertrag-prov { font-family: var(--font-d); font-weight: 800; font-size: 17px; white-space: nowrap; letter-spacing: -.3px; }

/* -------------------- Benutzerliste -------------------- */
.user-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: .5px solid var(--line); }
.user-item:first-child { border-top: none; }
.user-main { flex: 1; min-width: 0; }
.user-zeile1 { display: flex; align-items: center; gap: 10px; }
.user-zeile2 { color: var(--ink-soft); font-size: 13px; margin-top: 3px; }
.badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.badge-admin { background: var(--bad-bg); color: var(--red); }
.badge-mit   { background: var(--card2); color: var(--ink-soft); }
.user-self { color: var(--ink-soft); font-size: 13px; font-weight: 600; }

/* -------------------- Alerts / Empty -------------------- */
/* Alerts liegen teils direkt auf dem roten Hintergrund → solide weiße Karte mit farbigem Akzent. */
.alert { padding: 12px 15px; border-radius: var(--r-ui); font-size: 13.5px; font-weight: 600; margin-bottom: 18px; background: var(--card); box-shadow: var(--shadow); border-left: 3px solid var(--ink-faint); }
.alert-success { color: var(--ok); border-left-color: var(--ok); }
.alert-error   { color: var(--bad); border-left-color: var(--bad); }
.empty { text-align: center; padding: 26px 12px; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* -------------------- Login (OneHome-Rotverlauf) -------------------- */
.login-body { background: var(--page-bg); min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden; }
/* Wrapper: Card horizontal UND vertikal mittig */
.login-wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6vh 18px; }
.login-card { width: 100%; max-width: 420px; background: var(--card); border-radius: 20px; padding: 30px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }

/* Bewegter Aurora-Hintergrund (driftende dunkelrote Glow-Schwaden) hinter dem Card */
.login-aurora { position: fixed; inset: -14%; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(9px); }
.login-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: multiply; will-change: transform, opacity; }
.login-aurora .la1 { width: 64%; height: 80%; left: -8%; top: -14%; opacity: .78;
    background: radial-gradient(circle at 40% 40%, rgba(110,0,12,.98), rgba(94,0,12,.5) 52%, transparent 72%);
    animation: la-drift1 18s ease-in-out infinite alternate; }
.login-aurora .la2 { width: 72%; height: 92%; right: -14%; top: 4%; opacity: .74;
    background: radial-gradient(circle at 55% 45%, rgba(94,0,12,.96), rgba(60,0,8,.45) 56%, transparent 74%);
    animation: la-drift2 24s ease-in-out infinite alternate; }
.login-aurora .la3 { width: 56%; height: 72%; left: 22%; bottom: -22%; opacity: .7;
    background: radial-gradient(circle at 50% 50%, rgba(110,0,12,.92), rgba(60,0,8,.4) 54%, transparent 72%);
    animation: la-drift3 20s ease-in-out infinite alternate; }
.login-aurora .la4 { width: 50%; height: 60%; right: 6%; bottom: -10%; mix-blend-mode: screen; opacity: .3;
    background: radial-gradient(circle at 50% 50%, rgba(255,59,48,.7), rgba(255,59,48,.18) 48%, transparent 70%);
    animation: la-drift4 16s ease-in-out infinite alternate; }
@keyframes la-drift1 { 0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:.62}
    50%{transform:translate(9%,7%) scale(1.16) rotate(2deg);opacity:.82}
    100%{transform:translate(14%,-5%) scale(1.06) rotate(-1deg);opacity:.7} }
@keyframes la-drift2 { 0%{transform:translate(0,0) scale(1.06) rotate(0deg);opacity:.6}
    50%{transform:translate(-11%,8%) scale(1) rotate(-2deg);opacity:.78}
    100%{transform:translate(-7%,-7%) scale(1.18) rotate(1deg);opacity:.68} }
@keyframes la-drift3 { 0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:.58}
    50%{transform:translate(-9%,-7%) scale(1.14) rotate(2deg);opacity:.76}
    100%{transform:translate(12%,6%) scale(1.04) rotate(-2deg);opacity:.66} }
@keyframes la-drift4 { 0%{transform:translate(0,0) scale(1);opacity:.22}
    50%{transform:translate(-10%,-8%) scale(1.2);opacity:.42}
    100%{transform:translate(8%,6%) scale(1.05);opacity:.26} }
@media (prefers-reduced-motion: reduce) {
    .login-aurora .la1, .login-aurora .la2, .login-aurora .la3, .login-aurora .la4 { animation: none !important; }
}
.login-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.login-brand-title { font-family: var(--font-d); font-weight: 800; font-size: 18px; letter-spacing: -.3px; }
.login-brand-sub { color: var(--ink-soft); font-size: 14px; }
.login-title { font-family: var(--font-d); font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.6px; }
.login-text { color: var(--ink-soft); margin: 0 0 22px; font-size: 15px; }
.login-foot { text-align: center; color: rgba(255,255,255,.85); font-size: 13px; margin-top: 22px; }

/* -------------------- Responsive -------------------- */
@media (max-width: 640px) {
    .stat-row { grid-template-columns: 1fr; }
    .field-grid { grid-template-columns: 1fr; }
    .topnav { width: 100%; margin-left: 0; order: 3; overflow-x: auto; }
    .topbar-user { margin-left: auto; }
    .btn-block-mobile { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Provisionsabgleich (CSV-Vorschau) ---------- */
.csv-scroll { overflow-x: auto; border: .5px solid var(--line); border-radius: var(--r-ui); }
.csv-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.csv-table th, .csv-table td { text-align: left; padding: 9px 12px; white-space: nowrap; border-bottom: .5px solid var(--line); border-right: .5px solid var(--line); }
.csv-table th { background: var(--card2); font-weight: 700; color: var(--ink); position: sticky; top: 0; }
.csv-table tbody tr:last-child td { border-bottom: none; }
.csv-table th:last-child, .csv-table td:last-child { border-right: none; }
.csv-table tbody tr:nth-child(even) td { background: #fafafb; }
.csv-hint { color: var(--ink-soft); font-size: 13px; margin: 10px 0 0; }
code { background: var(--card2); padding: 2px 7px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.abgleich-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px; background: var(--bad-bg); border-radius: var(--r-ui); }
.abgleich-box .btn { white-space: nowrap; }
@media (max-width: 640px) { .abgleich-box { flex-direction: column; align-items: stretch; } .abgleich-box .btn { width: 100%; } }

/* ---------- Cash Coins / inaktive Einträge ---------- */
.cc-unit { font-size: .62em; font-weight: 700; color: var(--ink-faint); letter-spacing: .3px; }
.user-item.is-inaktiv { opacity: .55; }
.user-item form { margin: 0; }

/* ---------- Abgleich-Ergebnis (zwei Differenz-Spalten) ---------- */
.abgleich-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.abgleich-spalte { border: .5px solid var(--line); border-radius: var(--r-ui); padding: 16px; }
.abgleich-spalte-kopf { margin-bottom: 10px; }
@media (max-width: 640px) { .abgleich-grid { grid-template-columns: 1fr; } }

.cc-breakdown { margin: -8px 0 18px; color: var(--on-bg-soft); font-size: 13px; }
.cc-breakdown strong { color: var(--on-bg); }

/* ---------- Incentive-Aktionen ---------- */
.inc-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.inc-actions form { margin: 0; }

/* ---------- Ziel-Incentive: Bedingungs-Zeilen ---------- */
.ziel-row { display: grid; grid-template-columns: 150px 1fr 90px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ziel-row .input { margin: 0; }
@media (max-width: 640px) { .ziel-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Options-Verfügbarkeit (Admin) ---------- */
.verf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.verf-va { border: .5px solid var(--line); border-radius: var(--r-ui); padding: 10px 12px; background: var(--card2); }
.verf-va-name { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.verf-opt { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.verf-opt input { width: 16px; height: 16px; accent-color: var(--red); }

/* ---------- Optionen gruppiert (Erfassung) ---------- */
.opt-gruppe { margin-bottom: 12px; }
.opt-gruppe-title { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 6px; }

/* ---------- Ziel-Incentive-Fortschritt (Dashboard) ---------- */
.ziel-item { padding: 14px 0; border-top: .5px solid var(--line); }
.ziel-item:first-child { border-top: none; }
.ziel-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ziel-name { font-family: var(--font-d); font-weight: 700; font-size: 14.5px; }
.ziel-wert { font-family: var(--font-d); font-weight: 800; margin-left: auto; }
.ziel-wert.erreicht { color: var(--ok); }
.ziel-wert.offen { color: var(--ink-faint); }
.ziel-fortschritt { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.ziel-fortschritt .tag-ok { background: var(--ok-bg); color: var(--ok); }
.ziel-fortschritt .tag-miss { background: var(--card2); color: var(--ink-soft); }
.ziel-zeitraum { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* ---------- Inline-Bearbeiten (Admin) ---------- */
.edit-details { margin-top: 10px; }
.edit-details > summary { cursor: pointer; color: var(--red); font-weight: 600; font-size: 13px; list-style: none; }
.edit-details > summary::-webkit-details-marker { display: none; }
.edit-box { margin-top: 10px; padding: 12px; border: .5px solid var(--line); border-radius: var(--r-ui); background: var(--card2); }

/* ===================== Farbmodi ===================== */
/* HELL: viel Weiß — heller Hintergrund, dunkle Schrift, rote Akzente. */
body[data-theme="hell"]{
    --page-bg: #eef0f4;
    --on-bg: #1d1d1f;
    --on-bg-soft: #5f5f66;
}
body[data-theme="hell"] .news-title,
body[data-theme="hell"] .k-cat,
body[data-theme="hell"] .if-cat,
body[data-theme="hell"] .iv-summary,
body[data-theme="hell"] .sc-back,
body[data-theme="hell"] .dash-hero,
body[data-theme="hell"] .dash-hero .sub { color: #1d1d1f !important; }
body[data-theme="hell"] .dash-foot,
body[data-theme="hell"] .empty-soft { color: #5f5f66 !important; }
body[data-theme="hell"] .ziel-band { background: #fff !important; color: #1d1d1f !important; border: .5px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
body[data-theme="hell"] .zb-wert { color: #5f5f66 !important; opacity: 1 !important; }
body[data-theme="hell"] .zitat { color: #1d1d1f !important; }
body[data-theme="hell"] .zitat .za { color: #5f5f66 !important; opacity: 1 !important; }
body[data-theme="hell"] .zb-tag { background: #ececef !important; color: #5f5f66 !important; }

/* DUNKEL: Rot & Weiß auf schwarzem Hintergrund (weiße Karten bleiben weiß). */
body[data-theme="dunkel"]{
    --page-bg: #0d0d11;
    --on-bg: #ffffff;
    --on-bg-soft: rgba(255,255,255,.82);
    --side-bg: #16161c;
    --side-text: #b9b9c4;
    --side-strong: #ffffff;
    --side-hover: #23242d;
    --side-active-bg: #3a1414;
    --side-line: #272730;
}
body[data-theme="dunkel"] .vfhdr-nav a.active,
body[data-theme="dunkel"] .vfhdr-dd.active > summary { background: #e60000; color: #fff; }

/* ============================================================
   Aurora-Chrome: Inhalt rechts neben die feste Sidebar (248px)
   und unter die feste Topbar (64px) rücken. Mobile: Offsets weg.
   (Ergänzung Schritt-1-Re-Theming – darf den roten Content-Look nicht stören)
   ============================================================ */
body {
    padding-left: 248px;
    padding-top: 64px;
}
/* Login-Seite hat KEINE Sidebar/Topbar -> Chrome-Offset neutralisieren, Card bleibt mittig */
body.login-body { padding: 0 !important; }
/* Inhaltsspalte bleibt zentriert, aber im verbleibenden Bereich neben der Sidebar. */
.page { max-width: 1080px; margin-left: auto; margin-right: auto; }

@media (max-width: 980px) {
    body { padding-left: 0; padding-top: 64px; }
}

/* ============================================================
   AURORA-ANGLEICH (additiv) — gemeinsame Komponenten konsistent
   zum neuen „Aurora"-Design. Überschreibt nur Optik (Farben,
   Radius, Schatten, Fokus) bestehender Klassen; KEINE Struktur,
   KEINE Klassen-Namen, KEINE Theme-Variablen geändert.
   Tokens-Quelle: vf-onehome-dashboard/src/index.css + styles.css
   ============================================================ */
:root{
  /* exakte Aurora-Rotwerte ergänzen/angleichen */
  --red-dark: #c1000f;
  --red3:     #a3000d;
  --aurora-dark1: #8a0010;
  --aurora-dark2: #5e000c;
  /* warme, weiche Aurora-Kartenschatten */
  --aurora-shadow:     0 18px 40px -22px rgba(40,0,4,.50);
  --aurora-shadow-hov: 0 22px 50px -22px rgba(40,0,4,.58);
  --aurora-line: #e7e7ec;
}

/* ---- Karten: weicher, warmer Aurora-Schatten + 16px Radius ---- */
.card,
.stat-card{
  border-radius: 16px;
  box-shadow: var(--aurora-shadow);
  border-color: var(--aurora-line);
}
.card:hover,
.stat-card:hover{ box-shadow: var(--aurora-shadow-hov); }

/* ---- Buttons: Aurora-Rot, sauberer Radius, dezenter roter Schatten ---- */
.btn{ border-radius: 11px; }
.btn-primary{
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 8px 18px -7px rgba(230,0,0,.55);
}
.btn-primary:hover{ background: var(--red-dark); border-color: var(--red-dark); }
.btn-ghost{ border-color: var(--aurora-line); }

/* ---- Inputs/Selects/Textarea: 10px Radius, 1px Linie, roter Fokusring (.12) ---- */
.input, select.input, textarea.input{
  border-radius: 10px;
  border: 1px solid var(--aurora-line);
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230,0,0,.12);
}

/* ---- Fokus-Sichtbarkeit (a11y) für Optionen/Datei-Upload ---- */
.option:focus-within{ border-color: var(--red); box-shadow: 0 0 0 3px rgba(230,0,0,.12); }

/* ---- Tags / Chips / Badges: ruhiger, konsistenter Radius ---- */
.tag{ border-radius: 999px; }

/* ---- Überschriften: klare, kräftige Hierarchie (nur Akzent) ---- */
.hero-title{ letter-spacing: -1.2px; }
.card-title{ color: var(--ink); }

/* ---- Tabellen-Container (generisch, ergänzend zu .csv-table):
   saubere Kopfzeile, dezente Trenner/Hover, tabellarische Zahlen ---- */
.csv-scroll{ border-radius: 12px; box-shadow: var(--aurora-shadow); border-color: var(--aurora-line); }
.csv-table{ font-variant-numeric: tabular-nums; }
.csv-table tbody tr:hover td{ background: #fbf4f4; }

/* Generische Tabellen, die in weißen Karten liegen, dezent angleichen
   (greift nur, wenn keine speziellere Regel existiert). */
.card table:not(.csv-table){ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.card table:not(.csv-table) th{ text-align:left; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--aurora-line); padding:9px 10px; }
.card table:not(.csv-table) td{ border-bottom:1px solid var(--aurora-line); padding:9px 10px; }
.card table:not(.csv-table) tbody tr:last-child td{ border-bottom:0; }
.card table:not(.csv-table) tbody tr:hover td{ background:#fbf4f4; }

/* ---- Empty-State: dezent, mittig (Optik unverändert lassen, nur Kontrast) ---- */
.empty{ color: var(--ink-soft); }

/* ============================================================
   KONSISTENZ-ANGLEICH (additiv, Schritt-2) — gleicher Look auf
   Startseite (/index.php) und allen Portalseiten:
   - EINE Schriftart (Inter, wie Chrome/Startseite)
   - EIN Hintergrund (gleicher 135deg-Rotverlauf wie Startseite)
   Inhalte bleiben in weissen Karten lesbar; nur Optik, keine Struktur.
   ============================================================ */
/* Schriftart explizit an Chrome/Startseite angleichen (Inter zuerst). */
body, .page, .footer { font-family: var(--font); }
/* Body-Hintergrund konsistent fixieren (gleicher Verlauf wie Startseite). */
body { background-attachment: fixed; background-repeat: no-repeat; }

/* ===== Aurora-Hintergrund auf ALLEN Portalseiten (wie Dashboard) ===== */
.au-bg{position:fixed;top:64px;left:248px;right:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;
    background:linear-gradient(135deg,#e60000 0%,#c1000f 52%,#a3000d 100%)}
@media(max-width:980px){.au-bg{left:0}}
.aurora{position:absolute;inset:-14%;filter:blur(9px)}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform,opacity}
.aurora .a1{width:64%;height:80%;left:-8%;top:-14%;opacity:.78;
    background:radial-gradient(circle at 40% 40%, rgba(110,0,12,.98), rgba(94,0,12,.5) 52%, transparent 72%)}
.aurora .a2{width:72%;height:92%;right:-14%;top:4%;opacity:.74;
    background:radial-gradient(circle at 55% 45%, rgba(94,0,12,.96), rgba(60,0,8,.45) 56%, transparent 74%)}
.aurora .a3{width:56%;height:72%;left:22%;bottom:-22%;opacity:.7;
    background:radial-gradient(circle at 50% 50%, rgba(110,0,12,.92), rgba(60,0,8,.4) 54%, transparent 72%)}
.aurora .a4{width:50%;height:60%;right:6%;bottom:-10%;mix-blend-mode:screen;opacity:.32;
    background:radial-gradient(circle at 50% 50%, rgba(255,59,48,.7), rgba(255,59,48,.18) 48%, transparent 70%)}
.aurora .shim{width:140%;height:42%;left:-20%;top:22%;mix-blend-mode:screen;opacity:.22;
    background:linear-gradient(100deg,transparent 28%,rgba(255,120,120,.6) 50%,transparent 72%)}
.aurora .a1{animation:au-d1 18s ease-in-out infinite alternate}
.aurora .a2{animation:au-d2 24s ease-in-out infinite alternate}
.aurora .a3{animation:au-d3 20s ease-in-out infinite alternate}
.aurora .a4{animation:au-d4 16s ease-in-out infinite alternate}
.aurora .shim{animation:au-shim 22s ease-in-out infinite alternate}
@keyframes au-d1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.16)}100%{transform:translate(14%,-5%) scale(1.06)}}
@keyframes au-d2{0%{transform:translate(0,0) scale(1.06)}50%{transform:translate(-11%,8%) scale(1)}100%{transform:translate(-7%,-7%) scale(1.18)}}
@keyframes au-d3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-9%,-7%) scale(1.14)}100%{transform:translate(12%,6%) scale(1.04)}}
@keyframes au-d4{0%{transform:translate(0,0) scale(1);opacity:.22}50%{transform:translate(-10%,-8%) scale(1.2);opacity:.42}100%{transform:translate(8%,6%) scale(1.05);opacity:.26}}
@keyframes au-shim{0%{transform:translateX(-13%) skewX(-8deg);opacity:.14}50%{opacity:.28}100%{transform:translateX(14%) skewX(-8deg);opacity:.16}}
@media(prefers-reduced-motion:reduce){.aurora span{animation:none !important}}
/* Inhalt der Portalseiten über den Hintergrund heben */
body > main.page{position:relative;z-index:1}

/* ===== CI-Angleich Unterseiten an Dashboard (2026-06-20) =====
   Karten „schweben" mit rot-getöntem, randlosem Schatten wie auf dem Dashboard;
   Hero-Titel auf die dezentere Dashboard-Skala; gleiche Radien. */
:root{
  --shadow:     0 18px 40px -22px rgba(40,0,4,.5);
  --shadow-hov: 0 22px 50px -20px rgba(40,0,4,.55);
}
.card{ border:0; border-radius:16px; box-shadow:var(--shadow); }
.stat-card{ border:0; box-shadow:var(--shadow); }
.hero-title{ font-size:clamp(26px,4vw,34px); letter-spacing:-.6px; }
.card-title{ font-size:clamp(17px,2.2vw,20px); letter-spacing:-.4px; }

/* Überschriften Unterseiten auf Begrüßungsgröße (2026-06-20) */
.hero-title{ font-size:clamp(22px,4vw,27px); letter-spacing:-.4px; }