/* ==========================================================
   Theme Tokens — Light (Default) + Dark (data-theme="dark")
   ========================================================== */
:root {
    /* Hintergründe */
    --bg-page:      #ced7f740;
    --bg-card:      #ffffff;
    --bg-soft:      #f8f9fa;
    --bg-muted:     #ecf0f1;
    --bg-input:     #ffffff;

    /* Text */
    --text-primary:   #222222;
    --text-secondary: #555555;
    --text-muted:     #888888;
    --text-faint:     #b0b8c1;
    --text-on-dark:   #ffffff;

    /* Borders */
    --border:        #d0d4da;
    --border-soft:   #e8e8ee;
    --border-strong: #c0c4ca;

    /* Topbar */
    --topbar-bg:    #2c3e50;
    --topbar-text:  #ffffff;
    --topbar-sub:   #b0c4d4;
    --topbar-sep:   #4a5e74;

    /* Brand-Akzente */
    --brand:        #7c5fdc;
    --brand-deep:   #5a3eb8;
    --brand-soft:   rgba(124, 95, 220, 0.08);
    --brand-ring:   rgba(124, 95, 220, 0.18);
    --brand-pink:   #e91e63;
    --brand-pink-deep: #c2185b;

    /* Personen-Farben */
    --person-m:    #3498db;
    --person-k:    #e91e63;

    /* Status */
    --success-bg:  #d4edda;
    --success-fg:  #155724;
    --warn-bg:     #fff4e5;
    --warn-fg:     #5a3a1a;
    --warn-edge:   #e67e22;
    --error-bg:    #fdecea;
    --error-fg:    #c0392b;

    /* Schatten */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.18);

    /* Sortierbarer Header Hover */
    --hover-bg:    #ecf0f1;

    /* Buttons */
    --btn-primary-bg:     #2c3e50;
    --btn-primary-bg-hov: #1f2c3a;
    --btn-primary-fg:     #ffffff;
    --btn-danger-bg:      #c0392b;
    --btn-danger-bg-hov:  #a52a1c;
}

[data-theme="dark"] {
    --bg-page:      #14101e;
    --bg-card:      #1f1932;
    --bg-soft:      #261e3d;
    --bg-muted:     #2d2547;
    --bg-input:     #1a1428;

    --text-primary:   #f4f0fa;
    --text-secondary: #c4b8de;
    --text-muted:     #8d80b0;
    --text-faint:     #5a4f78;
    --text-on-dark:   #ffffff;

    --border:        #3a2e5a;
    --border-soft:   #2d2547;
    --border-strong: #4d3f78;

    --topbar-bg:    #0f0a1c;
    --topbar-text:  #f4f0fa;
    --topbar-sub:   #8d80b0;
    --topbar-sep:   #3a2e5a;

    --brand:        #9d7dff;
    --brand-deep:   #7c5fdc;
    --brand-soft:   rgba(157, 125, 255, 0.12);
    --brand-ring:   rgba(157, 125, 255, 0.28);
    --brand-pink:   #ff4d8d;
    --brand-pink-deep: #e91e63;

    --person-m:    #4ab3ff;
    --person-k:    #ff4d8d;

    --success-bg:  #1c3a24;
    --success-fg:  #6fd28d;
    --warn-bg:     #3a2814;
    --warn-fg:     #f0b88a;
    --warn-edge:   #e67e22;
    --error-bg:    #3a1a1a;
    --error-fg:    #ff8a7a;

    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.6);

    --hover-bg:    #2d2547;

    /* Buttons */
    --btn-primary-bg:     #7c5fdc;
    --btn-primary-bg-hov: #9d7dff;
    --btn-primary-fg:     #ffffff;
    --btn-danger-bg:      #e74c3c;
    --btn-danger-bg-hov:  #ff6655;
}

/* Sanfter Theme-Übergang */
html, body, .card, .topbar, button, input, select, textarea {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.4;
}

.topbar {
    background: var(--topbar-bg);
    color: var(--bg-card);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar h1 { margin: 0; font-size: 1.15rem; }
.topbar-logo {
    margin: 0;
    line-height: 0;
    display: flex;
    align-items: center;
}
.topbar-logo svg.bonline-logo {
    height: 26px;
    width: auto;
}
.topbar nav a {
    color: var(--bg-card);
    margin-left: 1rem;
    text-decoration: none;
    font-size: 0.95rem;
}
.topbar nav a:hover { text-decoration: underline; }
.topbar nav .user-info {
    color: var(--topbar-sub);
    margin-left: 1rem;
    font-size: 0.88rem;
    padding-right: 0.6rem;
    border-right: 1px solid var(--topbar-sep);
}

.container {
    max-width: 1200px;
    margin: 1rem auto;
    padding: 0 0.75rem;
}
.container.narrow { max-width: 420px; }

.card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

h1, h2 { margin-top: 0; }
h2 { font-size: 1.05rem; }

input[type=text], input[type=password], input[type=date], input[type=file] {
    width: 100%;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    background: var(--bg-card);
}

textarea {
    width: 100%;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg-card);
    resize: vertical;
    min-height: 2.4rem;
}

label.block { display: block; margin-top: 0.75rem; }

button {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: none;
    padding: 0.65rem 1.2rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.5rem;
}
button:hover { background: var(--btn-primary-bg-hov); }
button.danger { background: var(--btn-danger-bg); margin-left: 0.5rem; }
button.danger:hover { background: var(--btn-danger-bg-hov); }

.error { color: var(--error-fg); margin-top: 0.5rem; }
.saved { background: var(--success-bg); color: var(--success-fg); }
.hint { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; }

.totals { font-size: 0.95rem; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
th, td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: middle;
}
th { background: var(--bg-soft); font-weight: 600; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.check { text-align: center; color: var(--success-fg); font-weight: bold; }
td.radio-cell, th { /* nothing extra */ }
.items-edit th:nth-child(n+3):nth-child(-n+6),
.items-edit td.radio-cell { text-align: center; }
td.empty { text-align: center; color: var(--text-muted); padding: 2rem; }

/* Übersichts-Tabelle: Belegs-Zusammenfassung und Einzelpositionen */
table.overview tr.summary { background: var(--bg-soft); }
table.overview tr.summary:hover { background: var(--hover-bg); }
table.overview tr.item { background: var(--bg-card); }
table.overview tr.item td.indent { padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.92rem; }
table.overview tr.item td.num { font-size: 0.92rem; }
tr.hidden { display: none; }

td.num.small { font-size: 0.85rem; color: var(--text-secondary); }

button.toggle {
    background: transparent;
    color: var(--topbar-bg);
    border: none;
    padding: 0.1rem 0.35rem;
    margin: 0 0.35rem 0 0;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 3px;
}
button.toggle:hover { background: var(--border-strong); }

.note-icon {
    cursor: help;
    margin-left: 0.3rem;
    font-size: 0.9rem;
}

.payer-badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-left: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--bg-card);
    vertical-align: middle;
    line-height: 1.4;
    border: 1.5px solid transparent;
}
.payer-m   { background: var(--person-m); }
.payer-k   { background: var(--brand-pink); }
/* Bar-Varianten: Outline statt gefüllt, damit Karten- vs. Bar-Zahlung schnell sichtbar ist */
.payer-m.bar { background: var(--bg-card); color: var(--person-m); border-color: var(--person-m); }
.payer-k.bar { background: var(--bg-card); color: var(--brand-pink); border-color: var(--brand-pink); }
.payer-unknown { background: var(--text-faint); }

/* Massenauswahl */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
}
.bulk-bar .sel-info {
    font-weight: 600;
    color: var(--topbar-bg);
}
.bulk-bar #sel-count { font-variant-numeric: tabular-nums; }
.bulk-action {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    margin: 0;
}
.bulk-action select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    font-size: 0.92rem;
}
.bulk-bar button {
    margin: 0;
    padding: 0.45rem 1rem;
    font-size: 0.92rem;
}
.bulk-bar button:disabled {
    background: var(--text-faint);
    cursor: not-allowed;
}
th.check-col, td.check-col { width: 1.8rem; text-align: center; padding: 0.4rem 0.3rem; }

th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.4rem;
}
th.sortable:hover { background: var(--bg-muted); }
th.sortable::after {
    /* Font Awesome 6 Free: fa-sort */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f0dc';
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: 0.78rem;
}
/* fa-sort-up */
th.sortable.sort-asc::after  { content: '\f0de'; color: var(--topbar-bg); }
/* fa-sort-down */
th.sortable.sort-desc::after { content: '\f0dd'; color: var(--topbar-bg); }

td.row-num {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.mismatch-warn {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.05rem 0.4rem;
    background: var(--warn-bg);
    color: var(--error-fg);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--warn-edge);
    white-space: nowrap;
    cursor: help;
}
.mismatch-warn i { margin-right: 0.2rem; }

.mismatch-banner {
    background: var(--warn-bg);
    color: var(--warn-fg);
    border-left: 4px solid var(--warn-edge);
}
.mismatch-banner strong { color: var(--error-fg); }
.mismatch-banner i { margin-right: 0.3rem; }

/* Aktionskarten-Grid auf der Übersichtsseite */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.action-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1.1rem 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.action-card h2 {
    margin: 0;
    font-size: 1.02rem;
    color: var(--topbar-bg);
}
.action-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    flex-grow: 1;
    line-height: 1.45;
}
.action-icon {
    font-size: 1.5rem;
    color: var(--topbar-bg);
    width: 2.4rem;
    height: 2.4rem;
    background: var(--bg-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.action-form input[type=file] {
    font-size: 0.85rem;
    padding: 0.4rem;
}
.action-form button { margin-top: 0; padding: 0.55rem 1rem; font-size: 0.92rem; }
.action-link {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.55rem 1rem;
    background: var(--topbar-bg);
    color: var(--bg-card);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.92rem;
    font-weight: 500;
}
.action-link:hover { opacity: 0.9; }

.page-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--topbar-bg);
}

.debt-headline {
    font-size: 1.05rem;
    margin: 0 0 0.75rem 0;
    color: var(--topbar-bg);
}
table.debt-table { margin-top: 0.5rem; }
table.debt-table td.pos { color: var(--success-fg); font-weight: 600; }
table.debt-table td.neg { color: var(--error-fg); font-weight: 600; }

.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row label { flex: 1; min-width: 180px; display: block; }

.items-edit input.price { width: 90px; text-align: right; }
.items-edit input[type=text]:not(.price) { min-width: 140px; }
.items-edit select.cat { padding: 0.4rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; }

.actions { margin-top: 1rem; }
.receipt-photo { max-width: 100%; height: auto; border-radius: 4px; margin-top: 0.5rem; }
.receipt-pdf { width: 100%; height: 600px; border: 1px solid var(--border-soft); border-radius: 4px; margin-top: 0.5rem; }
.table-wrap { overflow-x: auto; }

@media (max-width: 600px) {
    .topbar h1 { font-size: 1rem; }
    table { font-size: 0.85rem; }
    th, td { padding: 0.35rem 0.3rem; }
}

/* === Dashboard === */
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.filters strong { margin-right: 0.5rem; }
.chip {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--bg-muted);
    color: var(--topbar-bg);
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.88rem;
}
.chip:hover  { background: var(--border-strong); }
.chip.active { background: var(--topbar-bg); color: var(--bg-card); }
.month-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.88rem;
    background: var(--bg-card);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}
.kpi { padding: 0.5rem 0.25rem; }
.kpi-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.kpi-value { font-size: 1.6rem; font-weight: 600; color: var(--topbar-bg); }

.stacked-bar {
    display: flex;
    width: 100%;
    height: 2rem;
    border-radius: 4px;
    overflow: hidden;
    margin: 0.5rem 0 0.6rem 0;
}
.stacked-segment {
    color: var(--bg-card);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    line-height: 2rem;
    overflow: hidden;
    white-space: nowrap;
}
.stacked-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.stacked-legend .dot,
.person-totals .dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.25rem;
    vertical-align: middle;
}
.person-totals {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.8;
}
.person-totals strong {
    color: var(--topbar-bg);
}

.bar-row {
    display: grid;
    grid-template-columns: 160px 1fr 90px;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
}
.bar-label  { text-align: right; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track  { background: var(--bg-muted); height: 1.5rem; border-radius: 4px; overflow: hidden; }
.bar-fill   { height: 100%; border-radius: 4px; transition: width 0.3s; }
.bar-value  { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bar-pct    { font-size: 0.78rem; color: var(--text-muted); }

@media (max-width: 600px) {
    .bar-row { grid-template-columns: 110px 1fr 75px; gap: 0.4rem; font-size: 0.85rem; }
    .bar-label { font-size: 0.82rem; }
}


/* === Auth-Seiten: Vollflächiger Background === */
body.auth-page {
    background: #2a1a52;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}
/* Sonne + Strahlen + Glow oben links → unten rechts */
body.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        /* Sonnenstrahl-Diagonale */
        linear-gradient(135deg,
            rgba(255, 200, 130, 0.18) 0%,
            rgba(255, 150, 180, 0.10) 18%,
            rgba(157, 125, 255, 0.05) 35%,
            transparent 55%),
        /* Glow um Sonne */
        radial-gradient(circle at 8% 12%, rgba(255, 220, 150, 0.30), transparent 22%),
        /* Pink Akzent unten rechts */
        radial-gradient(circle at 90% 85%, rgba(255, 77, 141, 0.18), transparent 35%),
        /* Lila Tiefe Mitte unten */
        radial-gradient(circle at 50% 100%, rgba(124, 95, 220, 0.20), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
/* Sonnenscheibe + Strahlen-SVG oben links */
body.auth-page::after {
    content: '';
    position: fixed;
    top: -80px;
    left: -80px;
    width: 360px;
    height: 360px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><defs><radialGradient id='sun' cx='0.5' cy='0.5' r='0.5'><stop offset='0%25' stop-color='%23ffd9a8' stop-opacity='1'/><stop offset='40%25' stop-color='%23ffb38a' stop-opacity='0.7'/><stop offset='100%25' stop-color='%23ff7aa8' stop-opacity='0'/></radialGradient></defs><g opacity='0.65'><circle cx='180' cy='180' r='90' fill='url(%23sun)'/><circle cx='180' cy='180' r='44' fill='%23fff2dc' opacity='0.85'/></g><g stroke='%23ffd9a8' stroke-width='2' opacity='0.35' stroke-linecap='round'><line x1='180' y1='40' x2='180' y2='80'/><line x1='180' y1='280' x2='180' y2='320'/><line x1='40' y1='180' x2='80' y2='180'/><line x1='280' y1='180' x2='320' y2='180'/><line x1='80' y1='80' x2='110' y2='110'/><line x1='250' y1='250' x2='280' y2='280'/><line x1='80' y1='280' x2='110' y2='250'/><line x1='250' y1='110' x2='280' y2='80'/></g></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    filter: blur(0.5px);
}
.auth-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    width: 100%;
}
.auth-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    box-sizing: border-box;
}
.auth-pane-form {
    background: transparent;
    align-items: center;
}
/* Form als Glaskarte: hebt sich vom Background ab */
.auth-form {
    width: 100%;
    max-width: 440px;
    padding: 2.25rem 2.25rem 2rem 2.25rem;
    background: rgba(20, 12, 38, 0.62);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 5;
}
/* Texte im Glas-Form-Container für Dark-Background */
.auth-pane-form .auth-form h1 { color: #fff; }
.auth-pane-form .auth-form .auth-subtitle { color: rgba(255, 255, 255, 0.7); }
.auth-pane-form .auth-form label.block { color: rgba(255, 255, 255, 0.85); }
.auth-pane-form .auth-form label.block input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.auth-pane-form .auth-form label.block input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--brand);
}
.auth-pane-form .auth-form label.block input::placeholder { color: rgba(255, 255, 255, 0.4); }
.auth-pane-form .auth-foot { color: rgba(255, 255, 255, 0.6); }
.auth-pane-form .auth-foot a { color: var(--brand-pink); }
.auth-pane-form .auth-slogan {
    background: linear-gradient(135deg, rgba(157, 125, 255, 0.18), rgba(255, 77, 141, 0.08));
    color: rgba(255, 255, 255, 0.85);
}
.auth-pane-form .auth-slogan strong { color: #fff; }
.auth-logo {
    margin-bottom: 1.5rem;
    line-height: 0;
}
.auth-logo svg.bonline-logo {
    height: 80px;
    width: auto;
}
/* Pulsierender Akzent-Punkt im Logo — dezent */
.bonline-logo .logo-pulse-ring {
    transform-origin: 60px 33px;
    transform-box: fill-box;
    animation: logo-pulse-soft 3s ease-out infinite;
}
.bonline-logo .logo-dot {
    transform-origin: 60px 33px;
    transform-box: fill-box;
    animation: logo-dot-soft 3s ease-in-out infinite;
}
@keyframes logo-pulse-soft {
    0%   { transform: scale(0.7); opacity: 0.35; }
    70%  { transform: scale(1.4); opacity: 0;    }
    100% { transform: scale(1.4); opacity: 0;    }
}
@keyframes logo-dot-soft {
    0%, 100% { opacity: 0.95; }
    50%      { opacity: 1; }
}
.auth-slogan {
    background: linear-gradient(135deg, var(--brand-soft), var(--brand-soft));
    border-left: 3px solid var(--brand);
    padding: 0.85rem 1rem;
    border-radius: 4px;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.auth-slogan strong {
    display: block;
    color: var(--brand-deep);
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}
.auth-form h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    line-height: 1.2;
}
.auth-subtitle {
    color: var(--text-muted);
    margin: 0 0 1.8rem 0;
    font-size: 0.95rem;
}
.auth-form label.block {
    display: block;
    margin-top: 0;
    margin-bottom: 0.95rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.auth-form label.block input {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.auth-form label.block input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.auth-form .primary-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-pink) 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(124, 95, 220, 0.35);
}
.auth-form .primary-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(233, 30, 99, 0.4);
}
.auth-form .error {
    color: var(--error-fg);
    background: var(--error-bg);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin: 1rem 0 0 0;
    font-size: 0.9rem;
}
.auth-banner {
    background: var(--warn-bg);
    color: var(--warn-fg);
    border-left: 3px solid var(--warn-edge);
    padding: 0.75rem 0.9rem;
    border-radius: 4px;
    font-size: 0.88rem;
    margin: 0 0 1.5rem 0;
    line-height: 1.45;
}
.auth-foot {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.auth-foot a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}
.auth-foot a:hover { text-decoration: underline; }

/* === Hero-Pane (rechte Seite mit Animation) === */
.auth-illu {
    background: transparent;
    color: #fff;
    align-items: center;
    position: relative;
    padding: 1rem;
}
.auth-illu::before { display: none; }
.auth-illu::after  { display: none; }

/* Einkaufsmeile als großer Background-Streifen über die ganze Body-Breite */
body.auth-page > .skyline-bg {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.45;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 800' preserveAspectRatio='xMidYMax slice'><g opacity='0.35' fill='%231a0d3a'><polygon points='0,800 0,520 80,520 80,440 200,440 200,500 320,500 320,460 440,460 440,540 600,540 600,500 760,500 760,560 900,560 900,520 1050,520 1050,580 1250,580 1250,520 1400,520 1400,470 1560,470 1560,540 1720,540 1720,500 1880,500 1880,560 2050,560 2050,520 2200,520 2200,580 2400,580 2400,800'/></g><g opacity='0.55'><rect x='100' y='480' width='160' height='240' fill='%231f1142'/><rect x='115' y='500' width='30' height='30' fill='%237c5fdc' opacity='0.7'/><rect x='160' y='500' width='30' height='30' fill='%237c5fdc' opacity='0.7'/><rect x='205' y='500' width='30' height='30' fill='%237c5fdc' opacity='0.7'/><rect x='115' y='550' width='30' height='30' fill='%237c5fdc' opacity='0.5'/><rect x='160' y='550' width='30' height='30' fill='%237c5fdc' opacity='0.5'/><rect x='205' y='550' width='30' height='30' fill='%237c5fdc' opacity='0.5'/><rect x='130' y='620' width='100' height='100' fill='%23ff4d8d' opacity='0.6'/><rect x='150' y='640' width='60' height='30' fill='%231a0d3a'/><text x='180' y='660' text-anchor='middle' fill='%23fff' font-size='14' font-family='sans-serif' font-weight='700'>SHOP</text><rect x='320' y='420' width='200' height='300' fill='%23261850'/><rect x='340' y='450' width='40' height='50' fill='%239d7dff' opacity='0.6'/><rect x='400' y='450' width='40' height='50' fill='%239d7dff' opacity='0.6'/><rect x='460' y='450' width='40' height='50' fill='%239d7dff' opacity='0.6'/><rect x='340' y='520' width='40' height='50' fill='%239d7dff' opacity='0.5'/><rect x='400' y='520' width='40' height='50' fill='%239d7dff' opacity='0.5'/><rect x='460' y='520' width='40' height='50' fill='%239d7dff' opacity='0.5'/><rect x='350' y='600' width='140' height='120' fill='%23ff4d8d' opacity='0.5'/><circle cx='420' cy='635' r='14' fill='%23fff' opacity='0.7'/><text x='420' y='641' text-anchor='middle' fill='%231a0d3a' font-size='16' font-family='serif' font-style='italic' font-weight='700'>€</text><rect x='580' y='460' width='180' height='260' fill='%231f1142'/><rect x='600' y='490' width='140' height='8' fill='%23ff4d8d' opacity='0.7'/><text x='670' y='486' text-anchor='middle' fill='%23ff4d8d' font-size='14' font-family='sans-serif' font-weight='700'>BAKERY</text><rect x='600' y='520' width='40' height='80' fill='%237c5fdc' opacity='0.5'/><rect x='655' y='520' width='40' height='80' fill='%237c5fdc' opacity='0.5'/><rect x='710' y='520' width='40' height='80' fill='%237c5fdc' opacity='0.5'/><rect x='615' y='620' width='110' height='100' fill='%237c5fdc' opacity='0.6'/><rect x='820' y='430' width='220' height='290' fill='%23261850'/><rect x='840' y='460' width='180' height='30' fill='%239d7dff' opacity='0.6'/><text x='930' y='482' text-anchor='middle' fill='%23fff' font-size='13' font-family='sans-serif' font-weight='700'>MARKT</text><rect x='840' y='510' width='50' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='900' y='510' width='50' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='960' y='510' width='50' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='840' y='590' width='180' height='130' fill='%23ff4d8d' opacity='0.5'/><circle cx='930' cy='640' r='16' fill='%23fff' opacity='0.7'/><text x='930' y='648' text-anchor='middle' fill='%231a0d3a' font-size='18' font-family='serif' font-style='italic' font-weight='700'>€</text><rect x='1080' y='480' width='100' height='240' fill='%231f1142'/><rect x='1095' y='500' width='25' height='40' fill='%237c5fdc' opacity='0.6'/><rect x='1135' y='500' width='25' height='40' fill='%237c5fdc' opacity='0.6'/><rect x='1095' y='560' width='25' height='40' fill='%237c5fdc' opacity='0.5'/><rect x='1135' y='560' width='25' height='40' fill='%237c5fdc' opacity='0.5'/><rect x='1280' y='450' width='160' height='270' fill='%23261850'/><rect x='1300' y='480' width='120' height='12' fill='%239d7dff' opacity='0.7'/><text x='1360' y='490' text-anchor='middle' fill='%23fff' font-size='12' font-family='sans-serif' font-weight='700'>CAFE</text><rect x='1300' y='510' width='40' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='1350' y='510' width='40' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='1400' y='510' width='40' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='1310' y='600' width='120' height='120' fill='%23ff4d8d' opacity='0.5'/><circle cx='1360' cy='640' r='12' fill='%23fff' opacity='0.7'/><text x='1360' y='646' text-anchor='middle' fill='%231a0d3a' font-size='14' font-family='serif' font-style='italic' font-weight='700'>€</text><rect x='1480' y='430' width='200' height='290' fill='%231f1142'/><rect x='1500' y='460' width='160' height='10' fill='%23ff4d8d' opacity='0.6'/><rect x='1500' y='490' width='40' height='50' fill='%239d7dff' opacity='0.6'/><rect x='1560' y='490' width='40' height='50' fill='%239d7dff' opacity='0.6'/><rect x='1620' y='490' width='40' height='50' fill='%239d7dff' opacity='0.6'/><rect x='1500' y='560' width='40' height='50' fill='%239d7dff' opacity='0.5'/><rect x='1560' y='560' width='40' height='50' fill='%239d7dff' opacity='0.5'/><rect x='1620' y='560' width='40' height='50' fill='%239d7dff' opacity='0.5'/><rect x='1510' y='630' width='160' height='90' fill='%237c5fdc' opacity='0.5'/><rect x='1720' y='480' width='120' height='240' fill='%23261850'/><rect x='1735' y='500' width='30' height='40' fill='%237c5fdc' opacity='0.6'/><rect x='1775' y='500' width='30' height='40' fill='%237c5fdc' opacity='0.6'/><rect x='1815' y='500' width='30' height='40' fill='%237c5fdc' opacity='0.6'/><rect x='1735' y='560' width='30' height='40' fill='%237c5fdc' opacity='0.5'/><rect x='1775' y='560' width='30' height='40' fill='%237c5fdc' opacity='0.5'/><rect x='1815' y='560' width='30' height='40' fill='%237c5fdc' opacity='0.5'/><rect x='1880' y='450' width='180' height='270' fill='%231f1142'/><rect x='1900' y='480' width='140' height='14' fill='%23ff4d8d' opacity='0.7'/><text x='1970' y='491' text-anchor='middle' fill='%23fff' font-size='12' font-family='sans-serif' font-weight='700'>BUCH</text><rect x='1900' y='510' width='40' height='60' fill='%239d7dff' opacity='0.5'/><rect x='1955' y='510' width='40' height='60' fill='%239d7dff' opacity='0.5'/><rect x='2010' y='510' width='40' height='60' fill='%239d7dff' opacity='0.5'/><rect x='1910' y='600' width='130' height='120' fill='%237c5fdc' opacity='0.6'/><rect x='2100' y='430' width='220' height='290' fill='%23261850'/><rect x='2120' y='460' width='180' height='30' fill='%239d7dff' opacity='0.6'/><text x='2210' y='482' text-anchor='middle' fill='%23fff' font-size='13' font-family='sans-serif' font-weight='700'>BIO MARKT</text><rect x='2120' y='510' width='50' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='2180' y='510' width='50' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='2240' y='510' width='50' height='60' fill='%237c5fdc' opacity='0.5'/><rect x='2120' y='590' width='180' height='130' fill='%23ff4d8d' opacity='0.5'/><circle cx='2210' cy='640' r='14' fill='%23fff' opacity='0.7'/><text x='2210' y='646' text-anchor='middle' fill='%231a0d3a' font-size='16' font-family='serif' font-style='italic' font-weight='700'>€</text></g><g opacity='0.40'><rect x='40' y='560' width='40' height='160' fill='%231a0d3a'/><rect x='760' y='540' width='50' height='180' fill='%231a0d3a'/><rect x='1240' y='560' width='40' height='160' fill='%231a0d3a'/><rect x='2060' y='540' width='40' height='180' fill='%231a0d3a'/></g><g opacity='0.30'><line x1='280' y1='430' x2='285' y2='480' stroke='%239d7dff' stroke-width='2'/><circle cx='282' cy='425' r='8' fill='%23ff4d8d' opacity='0.7'/><line x1='800' y1='420' x2='805' y2='460' stroke='%239d7dff' stroke-width='2'/><circle cx='802' cy='415' r='8' fill='%23ffd9ec' opacity='0.7'/><line x1='1450' y1='420' x2='1455' y2='460' stroke='%239d7dff' stroke-width='2'/><circle cx='1452' cy='415' r='8' fill='%23ff4d8d' opacity='0.7'/><line x1='2080' y1='420' x2='2085' y2='460' stroke='%239d7dff' stroke-width='2'/><circle cx='2082' cy='415' r='8' fill='%23ffd9ec' opacity='0.7'/></g><g opacity='0.25' fill='%23ffd9ec'><circle cx='280' cy='720' r='4'/><circle cx='800' cy='720' r='4'/><circle cx='1450' cy='720' r='4'/><circle cx='2080' cy='720' r='4'/></g><g opacity='0.30'><rect x='1140' y='640' width='160' height='80' fill='%23ff4d8d' rx='8'/><rect x='1155' y='660' width='30' height='40' fill='%231a0d3a' rx='2'/><rect x='1195' y='660' width='30' height='40' fill='%231a0d3a' rx='2'/><rect x='1235' y='660' width='30' height='40' fill='%231a0d3a' rx='2'/><circle cx='1165' cy='720' r='14' fill='%231a0d3a'/><circle cx='1165' cy='720' r='6' fill='%23ff4d8d'/><circle cx='1270' cy='720' r='14' fill='%231a0d3a'/><circle cx='1270' cy='720' r='6' fill='%23ff4d8d'/></g><g opacity='0.20'><rect x='0' y='745' width='2400' height='4' fill='%23ffd9ec'/><g fill='%23ffd9ec'><rect x='30'  y='770' width='40' height='3'/><rect x='130' y='770' width='40' height='3'/><rect x='230' y='770' width='40' height='3'/><rect x='330' y='770' width='40' height='3'/><rect x='430' y='770' width='40' height='3'/><rect x='530' y='770' width='40' height='3'/><rect x='630' y='770' width='40' height='3'/><rect x='730' y='770' width='40' height='3'/><rect x='830' y='770' width='40' height='3'/><rect x='930' y='770' width='40' height='3'/><rect x='1030' y='770' width='40' height='3'/><rect x='1130' y='770' width='40' height='3'/><rect x='1230' y='770' width='40' height='3'/><rect x='1330' y='770' width='40' height='3'/><rect x='1430' y='770' width='40' height='3'/><rect x='1530' y='770' width='40' height='3'/><rect x='1630' y='770' width='40' height='3'/><rect x='1730' y='770' width='40' height='3'/><rect x='1830' y='770' width='40' height='3'/><rect x='1930' y='770' width='40' height='3'/><rect x='2030' y='770' width='40' height='3'/><rect x='2130' y='770' width='40' height='3'/><rect x='2230' y='770' width='40' height='3'/><rect x='2330' y='770' width='40' height='3'/></g></g></svg>");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    /* SVG darf nach links über den Container hinaus zeichnen */
    overflow: visible;
}
.hero-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 95vh;
    overflow: visible;
}
.hero-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;  /* WICHTIG: erlaubt Belegen, außerhalb des viewBox sichtbar zu sein */
}
.auth-illu { overflow: visible; }
.auth-pane { overflow: visible; }
.scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    pointer-events: none;
}
.scene.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.scene svg { width: 100%; height: 100%; display: block; }

.hero-dots {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.hero-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.hero-dots .dot.active { background: var(--bg-card); transform: scale(1.2); }
.hero-dots .dot:hover  { background: rgba(255,255,255,0.7); }

/* === Szenen-Animationen === */

/* Szene 1: Beleg fliegt rein, Sucher pulst, Auslöser klickt, Blitz */
.scene-1.active .receipt-fly {
    animation: receipt-drop 1.5s ease-out 0.2s both;
}
.scene-1.active .viewfinder {
    animation: viewfinder-pulse 2s ease-in-out infinite;
}
.scene-1.active .shutter {
    animation: shutter-press 0.4s ease-out 1.7s both;
    transform-origin: center;
    transform-box: fill-box;
}
.scene-1.active .flash {
    opacity: 0;
    animation: flash-once 0.4s ease-out 1.9s both;
}
@keyframes receipt-drop {
    0%   { transform: translate(0, -200px) rotate(-12deg); opacity: 0; }
    60%  { transform: translate(0, 8px)   rotate(2deg);   opacity: 1; }
    100% { transform: translate(0, 0)     rotate(0);      opacity: 1; }
}
@keyframes viewfinder-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}
@keyframes shutter-press {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.85); }
}
@keyframes flash-once {
    0%   { opacity: 0; }
    20%  { opacity: 0.8; }
    100% { opacity: 0; }
}

/* Szene 2: Share-Sheet Tap-Pulse + Datenpartikel */
.scene-2.active .share-target {
    animation: share-highlight 1.4s ease-in-out infinite;
}
.scene-2.active .tap-pulse {
    transform-origin: 80px 58px;
    transform-box: fill-box;
    animation: tap-pulse 1.4s ease-out infinite;
}
.scene-2.active .data-particles .p {
    opacity: 0;
    transform: translate(280px, 320px);
}
.scene-2.active .data-particles .p1 { animation: particle-fly 1.8s ease-out 0.4s infinite; }
.scene-2.active .data-particles .p2 { animation: particle-fly 1.8s ease-out 0.7s infinite; }
.scene-2.active .data-particles .p3 { animation: particle-fly 1.8s ease-out 1.0s infinite; }
@keyframes share-highlight {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.18); }
}
@keyframes tap-pulse {
    0%   { transform: scale(0.4); opacity: 0.9; }
    80%  { transform: scale(1.8); opacity: 0;   }
    100% { transform: scale(1.8); opacity: 0;   }
}
@keyframes particle-fly {
    0%   { transform: translate(280px, 320px) scale(1);   opacity: 1; }
    100% { transform: translate(330px, 200px) scale(0.3); opacity: 0; }
}

/* Szene 3: Tabellen-Reihen erscheinen nacheinander */
.scene-3.active .row {
    opacity: 0;
    animation: row-in 0.4s ease-out forwards;
}
.scene-3.active .r1 { animation-delay: 0.2s; }
.scene-3.active .r2 { animation-delay: 0.5s; }
.scene-3.active .r3 { animation-delay: 0.8s; }
.scene-3.active .r4 { animation-delay: 1.1s; }
.scene-3.active .r5 { animation-delay: 1.4s; }
.scene-3.active .r6 { animation-delay: 1.7s; }
@keyframes row-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Szene 4: Balken wachsen */
.scene-4.active .bar-martin   { animation: bar-grow-95  0.8s ease-out 0.2s forwards; }
.scene-4.active .bar-kathleen { animation: bar-grow-75  0.8s ease-out 0.5s forwards; transform: translateX(95px); }
.scene-4.active .num-martin   { animation: number-pop 0.4s ease-out 0.9s both; }
.scene-4.active .num-kathleen { animation: number-pop 0.4s ease-out 1.0s both; }
.scene-4.active .cat-bar.c1   { animation: bar-grow-155 0.6s ease-out 0.3s forwards; }
.scene-4.active .cat-bar.c2   { animation: bar-grow-75  0.6s ease-out 0.5s forwards; }
.scene-4.active .cat-bar.c3   { animation: bar-grow-50  0.6s ease-out 0.7s forwards; }
.scene-4.active .cat-bar.c4   { animation: bar-grow-22  0.6s ease-out 0.9s forwards; }
@keyframes bar-grow-22  { from { width: 0; } to { width: 22px;  } }
@keyframes bar-grow-50  { from { width: 0; } to { width: 50px;  } }
@keyframes bar-grow-75  { from { width: 0; } to { width: 75px;  } }
@keyframes bar-grow-95  { from { width: 0; } to { width: 95px;  } }
@keyframes bar-grow-155 { from { width: 0; } to { width: 155px; } }
@keyframes number-pop {
    0%   { opacity: 0; }
    60%  { opacity: 1; }
    100% { opacity: 1; }
}

@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-illu  { display: none; }
    .auth-pane-form { padding: 2rem 1.5rem; }
    .auth-form  { max-width: 100%; }
    .auth-form h1 { font-size: 1.5rem; }
}

/* === Theme-Toggle Button === */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--topbar-text);
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0 0.5rem 0 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}
.theme-toggle .theme-toggle-sun,
.theme-toggle .theme-toggle-moon {
    display: none;
    line-height: 0;
}
[data-theme="light"] .theme-toggle .theme-toggle-moon,
:root:not([data-theme="dark"]) .theme-toggle .theme-toggle-moon {
    display: inline-flex;
}
[data-theme="dark"] .theme-toggle .theme-toggle-sun {
    display: inline-flex;
}

/* Auth-Variante: dezenter, ohne Border */
.auth-page .theme-toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(20, 12, 38, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
}
.auth-page .theme-toggle:hover {
    background: rgba(20, 12, 38, 0.7);
    border-color: var(--brand);
    color: #fff;
}

/* Dashboard-spezifisch im Dark-Mode: Track-Hintergrund */
[data-theme="dark"] .stacked-bar { background: var(--bg-muted); }
[data-theme="dark"] .bar-track   { background: var(--bg-muted); }
[data-theme="dark"] table th     { background: var(--bg-soft); }
[data-theme="dark"] table.overview tr.summary { background: var(--bg-soft); }
[data-theme="dark"] table.overview tr.summary:hover { background: var(--hover-bg); }
[data-theme="dark"] table.overview tr.item { background: var(--bg-card); }

/* Mismatch-Warnung im Dark-Mode lesbar halten */
[data-theme="dark"] .mismatch-warn {
    background: rgba(230, 126, 34, 0.15);
    color: #ffb380;
    border-color: rgba(230, 126, 34, 0.4);
}
[data-theme="dark"] .mismatch-banner {
    background: rgba(230, 126, 34, 0.12);
    color: #ffb380;
}

/* Auth-Slogan im Dark-Mode */
[data-theme="dark"] .auth-slogan {
    background: linear-gradient(135deg, rgba(157, 125, 255, 0.15), rgba(157, 125, 255, 0.04));
}
[data-theme="dark"] .auth-slogan strong { color: var(--brand); }

/* Action-Card-Hintergrund im Dark-Mode */
[data-theme="dark"] .action-card { background: var(--bg-card); }
[data-theme="dark"] .action-card p { color: var(--text-secondary); }
[data-theme="dark"] .action-icon { background: var(--bg-muted); color: var(--brand); }

/* Action-Link auf Dark anpassen */
[data-theme="dark"] .action-link { background: var(--brand); }
[data-theme="dark"] .action-link:hover { background: var(--brand-deep); }

/* === Hero-Animation: narrative Sequenz === */
.hero-svg .phone {
    animation: phone-bob 4s ease-in-out infinite;
}
@keyframes phone-bob {
    0%, 100% { transform: translate(200px, 30px); }
    50%      { transform: translate(200px, 22px); }
}

/* Belege starten weit links (visuell hinter dem Form-Container) */
.hero-svg .receipt-incoming {
    transform: translate(-520px, 220px) scale(1.7) rotate(-10deg);
    transform-origin: center;
    transform-box: fill-box;
    opacity: 0;
}

/* Flugbahn: von links sichtbar werdend, zum Phone, dort gefadet */
@keyframes receipt-fly-narrative {
    0%   { transform: translate(-520px, 220px) scale(1.7) rotate(-10deg); opacity: 0; }
    25%  { transform: translate(-280px, 215px) scale(1.7) rotate(-6deg); opacity: 0; }
    40%  { transform: translate(-150px, 210px) scale(1.7) rotate(-3deg); opacity: 1; }
    70%  { transform: translate(140px, 200px)  scale(1.7) rotate(4deg);  opacity: 1; }
    87%  { transform: translate(240px, 220px)  scale(1.0) rotate(0deg);  opacity: 0.4; }
    100% { transform: translate(310px, 230px)  scale(0.5) rotate(0deg);  opacity: 0; }
}

/* Scanline durch das Phone */
@keyframes scanline-sweep {
    0%   { transform: translate(0, 0);    opacity: 0.85; }
    50%  { opacity: 1; }
    100% { transform: translate(0, 580px); opacity: 0; }
}

.hero-svg .scan-flash    { transition: opacity 0.15s ease; }
.hero-svg .scan-glow     { transition: opacity 0.3s ease; filter: drop-shadow(0 0 8px #7c5fdc); }
.hero-svg .list-row      { opacity: 0; }
.hero-svg .donut-arc     { transition: stroke-dasharray 0.4s ease; }
.hero-svg .bar-m,
.hero-svg .bar-k,
.hero-svg .cat-bar       { transition: width 0.6s ease, x 0.6s ease; }
.hero-svg .recon-card,
.hero-svg .recon-label,
.hero-svg .recon-amount  { opacity: 0; }

/* === Pricing-Seite === */
body.pricing-page,
body.checkout-page,
body.paywall-page,
body.register-page {
    min-height: 100vh;
    overflow-y: auto;
}

.pricing-wrap {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}
.pricing-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.pricing-header .auth-logo { display: inline-block; margin-bottom: 1.5rem; }
.pricing-header h1 {
    color: #fff;
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
}
.pricing-header .auth-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.plan-card {
    position: relative;
    background: rgba(20, 12, 38, 0.72);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(157, 125, 255, 0.4);
    box-shadow: 0 12px 36px rgba(124, 95, 220, 0.3);
}
.plan-card.plan-trial {
    border-color: rgba(255, 77, 141, 0.5);
    background: rgba(40, 20, 50, 0.85);
}
.plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7c5fdc, #ff4d8d);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.plan-label {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.plan-tagline {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.plan-price {
    margin-bottom: 1.25rem;
}
.plan-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}
.plan-price-period {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.15rem;
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}
.plan-features li {
    padding: 0.4rem 0 0.4rem 1.4rem;
    position: relative;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}
.plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #9d7dff;
    font-weight: 700;
}
.plan-cta {
    display: block;
    text-align: center;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, #7c5fdc, #ff4d8d);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: filter 0.15s, transform 0.15s;
}
.plan-cta:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.pricing-foot {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}
.pricing-foot a {
    color: #ff4d8d;
    text-decoration: none;
    font-weight: 600;
}

/* === Register-Seite (mit Plan-Picker, ohne Hero) === */
.register-wrap {
    position: relative;
    z-index: 2;
    max-width: 580px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}
.register-header {
    text-align: center;
    margin-bottom: 2rem;
}
.register-header .auth-logo { display: inline-block; margin-bottom: 1.5rem; }
.register-header h1 {
    color: #fff;
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
}
.register-header .auth-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}
.register-form {
    /* nutzt .auth-form-Styles vom auth-Glas-Design */
}

/* Plan-Picker als kompakte Radio-Karten */
.plan-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin: 0 0 0.6rem 0;
}
.plan-pick {
    position: relative;
    padding: 0.85rem 0.95rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, background 0.15s;
}
.plan-pick:hover {
    border-color: rgba(157, 125, 255, 0.4);
}
.plan-pick.active {
    border-color: #ff4d8d;
    background: linear-gradient(135deg, rgba(124, 95, 220, 0.18), rgba(255, 77, 141, 0.10));
}
.plan-pick input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.plan-pick-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.15rem;
}
.plan-pick-price {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}
.plan-pick-price small {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 0.2rem;
}
.pick-hint {
    background: rgba(124, 95, 220, 0.15);
    border-left: 3px solid #9d7dff;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1.25rem 0;
}
.pick-hint strong { color: #fff; }

/* === Checkout-Seite === */
.checkout-wrap {
    position: relative;
    z-index: 2;
    max-width: 580px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}
.checkout-header {
    text-align: center;
    margin-bottom: 2rem;
}
.checkout-header .auth-logo { display: inline-block; margin-bottom: 1.5rem; }
.checkout-header h1 {
    color: #fff;
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
}
.checkout-header .auth-subtitle {
    color: rgba(255, 255, 255, 0.7);
}
.checkout-card {
    background: rgba(20, 12, 38, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.75rem;
}
.checkout-summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
}
.summary-label { color: rgba(255, 255, 255, 0.6); }
.summary-value { font-weight: 600; color: #fff; }
.summary-total .summary-label { font-size: 1rem; color: #fff; }
.summary-total .summary-value {
    font-size: 1.4rem;
    color: #ff4d8d;
}
.paypal-area {
    text-align: center;
}
.paypal-hint {
    background: rgba(230, 126, 34, 0.15);
    color: #ffb380;
    border-left: 3px solid #e67e22;
    padding: 0.75rem 0.9rem;
    border-radius: 4px;
    font-size: 0.85rem;
    text-align: left;
    margin-bottom: 1.5rem;
}
.paypal-hint strong { color: #fff; }
.mock-paypal-form { margin: 0; }
.paypal-mock-btn {
    width: 100%;
    margin: 0;
    padding: 0.85rem;
    background: #ffc439;
    color: #003087;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: filter 0.15s;
}
.paypal-mock-btn:hover { filter: brightness(0.95); }
.paypal-mock-logo {
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.checkout-foot {
    text-align: center;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
}
.checkout-foot a {
    color: #ff4d8d;
    text-decoration: none;
}

/* === Paywall === */
.paywall-wrap {
    position: relative;
    z-index: 2;
    max-width: 540px;
    margin: 4rem auto 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}
.paywall-icon {
    font-size: 3rem;
    margin: 0.5rem 0 1rem 0;
    opacity: 0.7;
}
.paywall-header h1 {
    color: #fff;
    font-size: 1.8rem;
    margin: 0 0 0.75rem 0;
}
.paywall-header .auth-subtitle {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
}
.paywall-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 2rem;
}
.paywall-actions .primary-btn {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, #7c5fdc, #ff4d8d);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: filter 0.15s, transform 0.15s;
}
.paywall-actions .primary-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.paywall-actions .ghost-btn,
.paywall-actions .ghost-btn-soft {
    padding: 0.7rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s;
}
.paywall-actions .ghost-btn:hover { background: rgba(255, 255, 255, 0.06); }
.paywall-actions .ghost-btn-soft {
    border-color: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* === Trial-Banner === */
.trial-banner {
    background: linear-gradient(135deg, rgba(124, 95, 220, 0.18), rgba(255, 77, 141, 0.10));
    border: 1px solid rgba(124, 95, 220, 0.3);
    border-radius: 8px;
    padding: 0.7rem 0.95rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}
.trial-banner.urgent {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.15), rgba(255, 77, 141, 0.10));
    border-color: rgba(230, 126, 34, 0.5);
}
.trial-banner-msg { color: var(--text-primary); flex: 1; min-width: 220px; }
.trial-banner-cta {
    background: linear-gradient(135deg, #7c5fdc, #ff4d8d);
    color: #fff;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: filter 0.15s;
}
.trial-banner-cta:hover { filter: brightness(1.1); }

/* Mobile-Anpassungen */
@media (max-width: 760px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .plan-picker { grid-template-columns: 1fr; }
    .pricing-header h1 { font-size: 1.5rem; }
}

/* === Register v2: Two-Column-Layout === */
body.register-page-v2 {
    min-height: 100vh;
    overflow-y: auto;
}
.register-v2-wrap {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem 1.5rem;
}
.register-v2-header {
    text-align: center;
    margin-bottom: 2rem;
}
.register-v2-header .auth-logo { display: inline-block; margin-bottom: 1.25rem; }
.register-v2-header h1 {
    color: #fff;
    font-size: 1.9rem;
    margin: 0 0 0.4rem 0;
}
.register-v2-header .auth-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.register-v2-grid {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 2rem;
    align-items: start;
}
.col-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

/* Plan-Spalte links — visuell als Card wie data-column */
.plan-column {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.plan-row {
    display: block;
    padding: 0.95rem 1rem;
    background: rgba(20, 12, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.plan-row:hover {
    border-color: rgba(157, 125, 255, 0.4);
    transform: translateX(2px);
}
.plan-row.active {
    border-color: #ff4d8d;
    background: linear-gradient(135deg, rgba(124, 95, 220, 0.20), rgba(255, 77, 141, 0.12));
    box-shadow: 0 0 0 1px rgba(255, 77, 141, 0.4) inset;
}
.plan-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}
.plan-row-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.plan-row-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.plan-row-price small {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 0.25rem;
}
.plan-row-meta {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}
.plan-row-addon {
    font-size: 0.75rem;
    color: rgba(255, 77, 141, 0.85);
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Extra-Personen-Stepper */
.extra-stepper {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 77, 141, 0.10);
    border: 1px solid rgba(255, 77, 141, 0.25);
    border-radius: 10px;
}
.extra-stepper-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.55rem;
}
.extra-stepper-label small {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.3rem;
}
.extra-stepper-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.stepper-btn:hover {
    background: rgba(255, 77, 141, 0.25);
    transform: scale(1.08);
}
.stepper-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.stepper-value {
    flex: 1;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Zusammenfassungs-Karte */
.plan-summary {
    margin-top: 0.75rem;
    background: rgba(20, 12, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.plan-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}
.plan-summary-row strong { color: #fff; }
.plan-summary-row.total {
    margin-top: 0.4rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
}
.plan-summary-row.total strong { color: #ff4d8d; font-size: 1.15rem; }

/* Daten-Spalte rechts */
.data-column {
    background: rgba(20, 12, 38, 0.62);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0.85rem 1.85rem 1.85rem 1.85rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.data-column > label.block:first-of-type { margin-top: 0; }
.data-column > .auth-banner { margin-top: 0; }
.data-column .col-title { color: rgba(255, 255, 255, 0.55); margin-top: 0; }
.data-column label.block {
    display: block;
    margin-top: 0;
    margin-bottom: 0.85rem;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.data-column label.block input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.62rem 0.75rem;
    font-size: 0.94rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.data-column label.block input:focus {
    outline: none;
    border-color: #ff4d8d;
    box-shadow: 0 0 0 3px rgba(255, 77, 141, 0.2);
}
.data-column label.block input::placeholder { color: rgba(255, 255, 255, 0.4); }

/* PayPal-Box */
.payment-box {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.payment-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.65rem;
    font-weight: 600;
}
.payment-paypal-mock {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: #ffc439;
    border-radius: 6px;
    color: #003087;
}
.paypal-logo-text {
    font-style: italic;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
}
.paypal-mock-info {
    font-size: 0.78rem;
    color: #003087;
    opacity: 0.85;
    font-weight: 500;
}
.payment-hint {
    margin-top: 0.85rem;
    margin-bottom: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}
.payment-hint strong { color: #fff; }

.primary-btn-big {
    width: 100%;
    margin-top: 1.25rem !important;
    padding: 0.9rem 1rem !important;
    font-size: 1rem !important;
    background: linear-gradient(135deg, #7c5fdc, #ff4d8d) !important;
    box-shadow: 0 6px 20px rgba(124, 95, 220, 0.4);
}
.primary-btn-big:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(255, 77, 141, 0.4) !important;
}

@media (max-width: 880px) {
    .register-v2-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .data-column { padding: 1.4rem 1.4rem; }
}

/* ==========================================================
   Sidebar-Navigation
   ========================================================== */
:root {
    --sidebar-width-collapsed: 76px;
    --sidebar-width-expanded:  260px;
    --sidebar-width: var(--sidebar-width-collapsed);
}
body.has-sidebar.sidebar-expanded {
    --sidebar-width: var(--sidebar-width-expanded);
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: linear-gradient(180deg,
        #4e2dce 0%,
        #860fe6 30%,
        #810b8f 60%,
        #e946dd 85%,
        #e946dd 100%);
    color: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
    overflow: visible;
}

/* Brand-Bereich oben */
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0;
    margin: 0 0.75rem 0.5rem 0.75rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.sidebar-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    line-height: 0;
}
.sidebar-brand-full {
    display: none;
    line-height: 0;
}
.sidebar-brand-full svg.bonline-logo {
    height: 32px;
    width: auto;
}
body.sidebar-expanded .sidebar-brand-icon  { display: none; }
body.sidebar-expanded .sidebar-brand-full  { display: flex; }
body.sidebar-expanded .sidebar-brand       { justify-content: flex-start; padding-left: 0.5rem; }

/* Toggle-Button */
.sidebar-toggle {
    position: absolute;
    top: 1rem;
    right: -14px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.95);
    color: #7c5fdc;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 110;
    margin: 0;
    padding: 0;
    transition: transform 0.25s ease, background 0.15s;
}
.sidebar-toggle:hover {
    background: #fff;
    transform: scale(1.1);
}
body.sidebar-expanded .sidebar-toggle i { transform: rotate(180deg); }
.sidebar-toggle i { transition: transform 0.25s ease; }

/* Navigation Links */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}
.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.sidebar-link.active {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.sidebar-link-icon {
    flex-shrink: 0;
    width: 26px;
    text-align: center;
    font-size: 1.15rem;
}
.sidebar-link-label {
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.sidebar-expanded .sidebar-link-label { opacity: 1; }

/* Tooltip im collapsed-Zustand */
.sidebar-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a0d3a;
    color: #fff;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 200;
}
body.sidebar-expanded .sidebar-link[data-tooltip]:hover::after { display: none; }

/* User-Bereich unten */
.sidebar-user {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.85rem 0.6rem 1rem 0.6rem;
}
.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem;
    border-radius: 10px;
    transition: background 0.15s;
    position: relative;
}
.sidebar-user-card:hover { background: rgba(255, 255, 255, 0.12); }

.sidebar-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-avatar-initials {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}
.sidebar-user-info {
    flex: 1;
    min-width: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.sidebar-expanded .sidebar-user-info { opacity: 1; }
.sidebar-user-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-mail {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-logout {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.15s;
    position: relative;
}
body.sidebar-expanded .sidebar-logout { opacity: 1; }
.sidebar-logout:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Tooltip auf Logout im collapsed-Zustand */
.sidebar-user-card[data-tooltip-logout="1"] {
    cursor: pointer;
}
body:not(.sidebar-expanded) .sidebar-user-card .sidebar-logout {
    /* Im collapsed-Zustand: Avatar selbst dient als Logout-Klick? Nein - lassen wir nur Avatar sichtbar.
       Logout passiert über Toggle + Klick. Cleaner: Sidebar erweitern, dann logout. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;  /* unsichtbar im collapsed Zustand */
    pointer-events: none;
}

/* Body-Layout: Hauptcontent rückt rechts */
body.has-sidebar {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.25s ease;
}
body.has-sidebar .container,
body.has-sidebar main.container {
    max-width: 1400px;
    padding: 1rem 1.5rem;
    margin-left: 0;
}

/* Topbar versteckt sich (Sidebar ersetzt sie) */
body.has-sidebar > header.topbar { display: none; }

/* Mobile: Sidebar bleibt collapsed, Content geht rechts daneben */
@media (max-width: 768px) {
    :root { --sidebar-width: var(--sidebar-width-collapsed); }
    body.has-sidebar.sidebar-expanded { --sidebar-width: var(--sidebar-width-collapsed); }
    body.has-sidebar.sidebar-expanded .sidebar-link-label,
    body.has-sidebar.sidebar-expanded .sidebar-user-info,
    body.has-sidebar.sidebar-expanded .sidebar-logout,
    body.has-sidebar.sidebar-expanded .sidebar-brand-full { display: none !important; opacity: 0 !important; }
    body.has-sidebar.sidebar-expanded .sidebar-brand-icon { display: flex !important; }
    .sidebar-toggle { display: none; }  /* auf Mobile kein Toggle */
    body.has-sidebar { margin-left: var(--sidebar-width-collapsed); }
}

/* ==========================================================
   SaaS-Refresh: Inter, modernere Tabellen, Buttons, Spacing
   ========================================================== */
body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.has-sidebar h1,
body.has-sidebar h2,
body.has-sidebar h3 {
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
body.has-sidebar h1 { font-size: 1.6rem; font-weight: 700; }
body.has-sidebar h2 { font-size: 1.15rem; font-weight: 700; }
body.has-sidebar .page-title { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0 1.5rem 0; }

/* Cards moderner */
body.has-sidebar .card {
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--border-soft);
    border: none;
    background: var(--bg-card);
}
[data-theme="dark"] body.has-sidebar .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border);
}

/* Tabellen */
body.has-sidebar table { font-size: 0.9rem; }
body.has-sidebar th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: transparent !important;
    padding: 0.65rem 0.5rem 0.5rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
body.has-sidebar td {
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--border-soft);
}
body.has-sidebar tr.summary { background: transparent !important; }
body.has-sidebar tr.summary:hover { background: var(--brand-soft) !important; }
body.has-sidebar tr.item { background: var(--bg-soft) !important; }

/* Edit-Icon: Stift in Purple statt grauem Symbol */
body.has-sidebar td a[href*="edit.php"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--brand);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-size: 0;
}
body.has-sidebar td a[href*="edit.php"]:hover {
    background: var(--brand-soft);
    color: var(--brand-deep);
}
body.has-sidebar td a[href*="edit.php"]::before {
    content: "\f303"; /* fa-pen */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.92rem;
}

/* Buttons */
body.has-sidebar button,
body.has-sidebar .action-link,
body.has-sidebar a.action-link {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.6rem 1.1rem;
    font-size: 0.92rem;
    transition: all 0.15s ease;
}
body.has-sidebar button:not(.danger):not(.toggle):not(.theme-toggle):not(.stepper-btn):not(.paypal-mock-btn):not(.paypal-mock-btn) {
    background: var(--brand);
    color: #fff;
}
body.has-sidebar button:not(.danger):not(.toggle):not(.theme-toggle):hover {
    background: var(--brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 95, 220, 0.3);
}
body.has-sidebar button.toggle { padding: 0.1rem 0.35rem; }
body.has-sidebar button.toggle:hover { background: var(--brand-soft); transform: none; box-shadow: none; }

/* Inputs frischer */
body.has-sidebar input[type="text"],
body.has-sidebar input[type="password"],
body.has-sidebar input[type="email"],
body.has-sidebar input[type="date"],
body.has-sidebar input[type="number"],
body.has-sidebar select,
body.has-sidebar textarea {
    font-family: 'Geist', sans-serif;
    font-size: 0.92rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.has-sidebar input[type="text"]:focus,
body.has-sidebar input[type="password"]:focus,
body.has-sidebar input[type="email"]:focus,
body.has-sidebar input[type="date"]:focus,
body.has-sidebar select:focus,
body.has-sidebar textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Bulk-Bar moderner mit Icons */
body.has-sidebar .bulk-bar {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--border-soft);
    margin-bottom: 1rem;
    gap: 0.5rem;
}
body.has-sidebar .bulk-bar .sel-info {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
}
body.has-sidebar .bulk-bar #sel-count {
    background: var(--brand-soft);
    color: var(--brand-deep);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
}
body.has-sidebar .bulk-action {
    gap: 0.5rem;
}
body.has-sidebar .bulk-action select {
    border-radius: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237c5fdc' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 1.8rem;
    appearance: none;
    -webkit-appearance: none;
}

/* Action-Icons rechts neben Aktion-Dropdown */
body.has-sidebar .bulk-actions-icons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    margin-right: 0.5rem;
}
body.has-sidebar .bulk-icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--brand);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.95rem;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
body.has-sidebar .bulk-icon-btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
    transform: translateY(-1px);
}
body.has-sidebar .bulk-icon-btn.danger {
    color: var(--error-fg);
}
body.has-sidebar .bulk-icon-btn.danger:hover {
    background: var(--error-bg);
    border-color: var(--error-fg);
}
body.has-sidebar .bulk-icon-btn[data-quick="assign-martin"] { color: var(--person-m); }
body.has-sidebar .bulk-icon-btn[data-quick="assign-martin"]:hover {
    background: rgba(52, 152, 219, 0.12);
    border-color: var(--person-m);
}
body.has-sidebar .bulk-icon-btn[data-quick="assign-kathleen"] { color: var(--person-k); }
body.has-sidebar .bulk-icon-btn[data-quick="assign-kathleen"]:hover {
    background: rgba(233, 30, 99, 0.12);
    border-color: var(--person-k);
}

/* "Anwenden" Button im Bulk: primary purple */
body.has-sidebar #bulk-submit {
    background: var(--brand);
    color: #fff;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
}
body.has-sidebar #bulk-submit:hover:not(:disabled) {
    background: var(--brand-deep);
}
body.has-sidebar #bulk-submit:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Badges (Payer-Badges) eleganter */
body.has-sidebar .payer-badge {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    line-height: 1.4;
}

/* Sortable Header in Lila */
body.has-sidebar th.sortable.sort-asc::after,
body.has-sidebar th.sortable.sort-desc::after { color: var(--brand); }

/* Filter-Chips moderner */
body.has-sidebar .chip {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
}
body.has-sidebar .chip.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124, 95, 220, 0.3);
}

/* === Beleg erfassen: Drop-Zone === */
.upload-page-wrap {
    max-width: 980px;
    margin: 0 auto;
}
.dropzone {
    background: var(--bg-card);
    border: 2px dashed var(--brand);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dropzone:hover,
.dropzone.dragover {
    border-color: var(--brand-deep);
    background: var(--brand-soft);
    transform: scale(1.005);
}
.dropzone-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.dropzone-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.dropzone-subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
}
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dropzone-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: var(--brand);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    pointer-events: none;
}
.dropzone:hover .dropzone-cta { background: var(--brand-deep); }
.dropzone-formats {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--text-faint);
}
.upload-recent {
    margin-top: 2rem;
}
.upload-recent h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 0.85rem 0;
    font-weight: 600;
}
.recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.recent-item {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    box-shadow: 0 0 0 1px var(--border-soft);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.recent-item:hover {
    box-shadow: 0 0 0 1px var(--brand), 0 4px 12px rgba(124, 95, 220, 0.12);
    transform: translateY(-1px);
}
.recent-item-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--brand-soft); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; flex-shrink: 0;
}
.recent-item-info { flex: 1; min-width: 0; }
.recent-item-name {
    font-weight: 600; font-size: 0.92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-item-meta { font-size: 0.78rem; color: var(--text-muted); }
.recent-item-amount {
    font-weight: 700; font-size: 0.95rem; color: var(--text-primary);
    flex-shrink: 0;
}

/* Action-Grid weg vom Index, weil Sidebar das übernimmt */
body.has-sidebar .action-grid { display: none; }

/* Trial-Banner moderner */
body.has-sidebar .trial-banner {
    border-radius: 12px;
    border-width: 0;
    box-shadow: 0 0 0 1px rgba(124, 95, 220, 0.25);
    padding: 0.85rem 1.1rem;
}