/* /Components/Account/Pages/Manage/Appearance.razor.rz.scp.css */
.ap-options[b-ihoqvr6nrl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    max-width: 620px;
}

.ap-option[b-ihoqvr6nrl] {
    position: relative;
    cursor: pointer;
    margin: 0;
}

/* Radio visuell verstecken, bleibt per Tastatur bedienbar */
.ap-option[b-ihoqvr6nrl]  input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ap-card[b-ihoqvr6nrl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    border: 2px solid #e4e2dc;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}

.ap-option:hover .ap-card[b-ihoqvr6nrl] { border-color: #d6d1c0; }

.ap-option[b-ihoqvr6nrl]  input:checked + .ap-card {
    border-color: #ffc928;
    box-shadow: 0 0 0 4px rgba(255, 201, 40, .25);
}

.ap-option[b-ihoqvr6nrl]  input:focus-visible + .ap-card {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
}

.ap-preview[b-ihoqvr6nrl] {
    height: 92px;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    background: #f6f5f2;
    border: 1px solid #ebe9e3;
}

.ap-side[b-ihoqvr6nrl] {
    width: 42%;
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ap-logo[b-ihoqvr6nrl] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #ffc928;
    margin-bottom: 3px;
}

.ap-line[b-ihoqvr6nrl] {
    height: 8px;
    border-radius: 4px;
}

.ap-main[b-ihoqvr6nrl] {
    flex: 1;
    padding: 12px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ap-main span[b-ihoqvr6nrl] {
    height: 22px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e4e2dc;
}

.ap-preview.is-light .ap-side[b-ihoqvr6nrl] { background: #fffcf2; border-right: 1px solid #f0e9d2; }
.ap-preview.is-light .ap-line[b-ihoqvr6nrl] { background: #efe7cf; }
.ap-preview.is-light .ap-line.is-on[b-ihoqvr6nrl] { background: #ffd84d; }

.ap-preview.is-dark .ap-side[b-ihoqvr6nrl] { background: #17171a; }
.ap-preview.is-dark .ap-line[b-ihoqvr6nrl] { background: #2c2c31; }
.ap-preview.is-dark .ap-line.is-on[b-ihoqvr6nrl] { background: rgba(255, 201, 40, .55); }

/* System: diagonal halb hell, halb dunkel */
.ap-preview.is-system .ap-side[b-ihoqvr6nrl] { background: linear-gradient(135deg, #fffcf2 0 50%, #17171a 50% 100%); }
.ap-preview.is-system .ap-line[b-ihoqvr6nrl] { background: #8a826f; opacity: .35; }
.ap-preview.is-system .ap-line.is-on[b-ihoqvr6nrl] { background: #ffd84d; opacity: 1; }

.ap-label b[b-ihoqvr6nrl] {
    display: block;
    font-size: 14px;
    color: #1d1d1f;
}

.ap-label small[b-ihoqvr6nrl] {
    display: block;
    font-size: 12px;
    color: #6e6e73;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-w0n3hoerjd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-w0n3hoerjd] {
    flex: 1;
    /* Breite Inhalte (z.B. Tabelle auf /permissions) scrollen in sich, statt die Seite breiter zu machen. */
    min-width: 0;
}

/* Hintergrund kommt aus NavMenu (.nm, Hell/Dunkel je nach Benutzereinstellung). */
.sidebar[b-w0n3hoerjd] {
    background: none;
}

.top-row[b-w0n3hoerjd] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-w0n3hoerjd]  a, .top-row[b-w0n3hoerjd]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-w0n3hoerjd]  a:hover, .top-row[b-w0n3hoerjd]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-w0n3hoerjd]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    /* Handy: Menü-Kopf bleibt oben stehen (3.5rem hoch – wie die Leiste auf dem Desktop, daran richten sich
       Sticky-Elemente der Seiten aus). Die leere Leiste mit „About“ fällt weg. */
    .sidebar[b-w0n3hoerjd] {
        position: sticky;
        top: 0;
        z-index: 35;
    }

    .top-row[b-w0n3hoerjd] {
        display: none;
    }
}

@media (min-width: 641px) {
    .page[b-w0n3hoerjd] {
        flex-direction: row;
    }

    .sidebar[b-w0n3hoerjd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-w0n3hoerjd] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-w0n3hoerjd]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-w0n3hoerjd], article[b-w0n3hoerjd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-w0n3hoerjd] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-w0n3hoerjd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation – Gelb als Akzent, Hell / Dunkel / System (siehe NavTheme + Account/Manage/Appearance). */

.nm[b-tu69xuw1to] {
    /* Hell (Standard) */
    --nm-bg: #fffcf2;
    --nm-border: #f0e9d2;
    --nm-text: #2b2a26;
    --nm-muted: #9a9180;
    --nm-item: #4b4839;
    --nm-icon: #8a826f;
    --nm-hover: #fbf3d9;
    --nm-active-bg: #ffd84d;
    --nm-active-text: #1d1d1f;
    --nm-active-icon: #1d1d1f;
    --nm-active-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    --nm-bar: transparent;
    --nm-cnt-bg: #fbe7a6;
    --nm-cnt-text: #6b5100;
    --nm-card: #ffffff;
    --nm-card-border: #efe7cf;
    --nm-chip: #fbf5e3;
    --nm-logo: #ffc928;
    --nm-logo-ring: transparent;
    --nm-alert: #e5484d;

    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--nm-bg);
    border-right: 1px solid var(--nm-border);
    color: var(--nm-text);
}

.nm.is-dark[b-tu69xuw1to] {
    --nm-bg: #17171a;
    --nm-border: #26262b;
    --nm-text: #ededef;
    --nm-muted: #77777f;
    --nm-item: #b8b8bf;
    --nm-icon: #8b8b93;
    --nm-hover: #222226;
    --nm-active-bg: rgba(255, 201, 40, .13);
    --nm-active-text: #ffd84d;
    --nm-active-icon: #ffc928;
    --nm-active-shadow: none;
    --nm-bar: #ffc928;
    --nm-cnt-bg: #2c2c31;
    --nm-cnt-text: #ffd84d;
    --nm-card: #1f1f23;
    --nm-card-border: #2c2c31;
    --nm-chip: #2c2c31;
    --nm-logo-ring: rgba(255, 201, 40, .12);
}

@media (prefers-color-scheme: dark) {
    .nm.is-system[b-tu69xuw1to] {
        --nm-bg: #17171a;
        --nm-border: #26262b;
        --nm-text: #ededef;
        --nm-muted: #77777f;
        --nm-item: #b8b8bf;
        --nm-icon: #8b8b93;
        --nm-hover: #222226;
        --nm-active-bg: rgba(255, 201, 40, .13);
        --nm-active-text: #ffd84d;
        --nm-active-icon: #ffc928;
        --nm-active-shadow: none;
        --nm-bar: #ffc928;
        --nm-cnt-bg: #2c2c31;
        --nm-cnt-text: #ffd84d;
        --nm-card: #1f1f23;
        --nm-card-border: #2c2c31;
        --nm-chip: #2c2c31;
        --nm-logo-ring: rgba(255, 201, 40, .12);
    }
}

/* ---------- Kopf / Marke ---------- */
.nm-top[b-tu69xuw1to] {
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0 16px;
    flex-shrink: 0;
}

.nm-brand[b-tu69xuw1to] {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--nm-text);
    text-decoration: none;
}

.nm-logo[b-tu69xuw1to] {
    width: 34px;
    height: 34px;
    display: block;
    flex-shrink: 0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.nm-brand-text b[b-tu69xuw1to] {
    display: block;
    font-size: 16px;
    letter-spacing: -.2px;
    line-height: 1.15;
}

.nm-brand-text small[b-tu69xuw1to] {
    display: block;
    font-size: 11.5px;
    color: var(--nm-muted);
}

/* ---------- Mobil-Umschalter ---------- */
.nm-toggler[b-tu69xuw1to] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.4rem;
    position: absolute;
    top: 0.55rem;
    right: 1rem;
    border-radius: 10px;
    border: 1px solid var(--nm-card-border);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238a826f' stroke-linecap='round' stroke-width='2.2' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e") no-repeat center/1.5rem var(--nm-card);
}

.nm-toggler:checked[b-tu69xuw1to] {
    background-color: var(--nm-hover);
}

/* ---------- Menü ---------- */
.nm-scroll[b-tu69xuw1to] {
    display: none;
    flex-direction: column;
    padding: 6px 12px 14px;
}

.nm-toggler:checked ~ .nm-scroll[b-tu69xuw1to] {
    display: flex;
}

.nm-nav[b-tu69xuw1to] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nm-sec[b-tu69xuw1to] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--nm-muted);
    padding: 16px 11px 6px;
}

.nm-nav[b-tu69xuw1to]  .nm-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 40px;
    padding: 0 10px 0 11px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nm-item);
    text-decoration: none;
    transition: background-color .12s;
}

.nm-nav[b-tu69xuw1to]  .nm-item:hover {
    background: var(--nm-hover);
    color: var(--nm-text);
}

.nm-nav[b-tu69xuw1to]  .nm-item.active {
    background: var(--nm-active-bg);
    color: var(--nm-active-text);
    font-weight: 600;
    box-shadow: var(--nm-active-shadow);
}

.nm-nav[b-tu69xuw1to]  .nm-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--nm-bar);
}

.nm svg[b-tu69xuw1to] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nm svg .fill[b-tu69xuw1to] { fill: currentColor; }

.nm-nav[b-tu69xuw1to]  .nm-item > span:not(.nm-cnt):not(.nm-alert) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nm-nav[b-tu69xuw1to]  .nm-item svg { color: var(--nm-icon); }
.nm-nav[b-tu69xuw1to]  .nm-item.active svg { color: var(--nm-active-icon); }

.nm-cnt[b-tu69xuw1to] {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--nm-cnt-bg);
    color: var(--nm-cnt-text);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-alert[b-tu69xuw1to] {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nm-alert);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-alert) 18%, transparent);
}

/* ---------- Benutzer ---------- */
.nm-user[b-tu69xuw1to] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    background: var(--nm-card);
    border: 1px solid var(--nm-card-border);
}

.nm-user form[b-tu69xuw1to] { margin: 0; }

.nm-user-link[b-tu69xuw1to] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    padding: 2px;
    border-radius: 8px;
    color: var(--nm-text);
    text-decoration: none;
}

.nm-user-link:hover b[b-tu69xuw1to] { text-decoration: underline; }

.nm-av[b-tu69xuw1to] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--nm-logo);
    color: #1d1d1f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.nm-user-text[b-tu69xuw1to] { min-width: 0; }

.nm-user-text b[b-tu69xuw1to] {
    display: block;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nm-user-text small[b-tu69xuw1to] {
    display: block;
    font-size: 11.5px;
    color: var(--nm-muted);
}

.nm-out[b-tu69xuw1to] {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: var(--nm-chip);
    color: var(--nm-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.nm-out:hover[b-tu69xuw1to] { color: var(--nm-text); }
.nm-out svg[b-tu69xuw1to] { width: 16px; height: 16px; }

.nm[b-tu69xuw1to]  a:focus-visible,
.nm button:focus-visible[b-tu69xuw1to] {
    outline: 2px solid var(--nm-logo);
    outline-offset: 2px;
}

.nm-backdrop[b-tu69xuw1to] { display: none; }

/* ---------- Handy: Kopfleiste bleibt oben, Menü klappt als Fläche darüber auf ---------- */
@media (max-width: 640.98px) {
    .nm[b-tu69xuw1to] {
        border-right: 0;
        border-bottom: 1px solid var(--nm-border);
    }

    .nm-toggler[b-tu69xuw1to] {
        width: 44px;
        height: 40px;
        top: calc((3.5rem - 40px) / 2);
        right: 12px;
    }

    .nm-scroll[b-tu69xuw1to] {
        position: absolute;
        z-index: 2;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 3.5rem);
        max-height: calc(100dvh - 3.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--nm-bg);
        border-bottom: 1px solid var(--nm-border);
        box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .28);
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .nm-toggler:checked ~ .nm-backdrop[b-tu69xuw1to] {
        display: block;
        position: fixed;
        z-index: 1;
        inset: 3.5rem 0 0 0;
        background: rgba(20, 20, 22, .32);
    }

    /* Größere Tippflächen */
    .nm-nav[b-tu69xuw1to]  .nm-item {
        height: 46px;
        font-size: 15px;
    }

    .nm-nav[b-tu69xuw1to]  .nm-item.active::before { display: none; }
}

/* ---------- Desktop ---------- */
@media (min-width: 641px) {
    .nm-toggler[b-tu69xuw1to] {
        display: none;
    }

    .nm-top[b-tu69xuw1to] {
        height: auto;
        padding: 20px 22px 14px;
    }

    .nm-scroll[b-tu69xuw1to] {
        /* Auf breiten Bildschirmen nie einklappen */
        display: flex;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .nm-user[b-tu69xuw1to] {
        margin-top: auto;
    }

    .nm-nav[b-tu69xuw1to] {
        padding-bottom: 18px;
    }
}
/* /Components/Layout/NoAccess.razor.rz.scp.css */
.na[b-zb8aqeex3g] {
    display: flex;
    justify-content: center;
    padding: 64px 16px;
}

.na-card[b-zb8aqeex3g] {
    max-width: 420px;
    text-align: center;
    background: #fff;
    border: 1px solid #e4e2dc;
    border-radius: 16px;
    padding: 32px 28px;
}

.na-icon[b-zb8aqeex3g] {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px auto;
    border-radius: 14px;
    background: #fff4c2;
    color: #8a6a00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.na-icon svg[b-zb8aqeex3g] {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.na-card h1[b-zb8aqeex3g] {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.na-card p[b-zb8aqeex3g] {
    color: #4a4a4f;
    font-size: 14.5px;
    margin: 0 0 20px 0;
}

.na-btn[b-zb8aqeex3g] {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 10px;
    background: #1d1d1f;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.na-btn:hover[b-zb8aqeex3g] { background: #3a3a3f; color: #fff; }
/* /Components/Layout/ProfileNameGate.razor.rz.scp.css */
.png-backdrop[b-ptn0caalrj] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 22, .45);
    z-index: 1000;
}

.png-dialog[b-ptn0caalrj] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(400px, calc(100vw - 32px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    background: #fff;
    color: #1d1d1f;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.png-dialog h2[b-ptn0caalrj] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.png-dialog p[b-ptn0caalrj] {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #4a4a4f;
}

.png-field[b-ptn0caalrj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #4a4a4f;
}

.png-field input[b-ptn0caalrj] {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d9d6ce;
    border-radius: 9px;
    font: inherit;
    font-size: 15px;
    color: #1d1d1f;
}

.png-field input:focus[b-ptn0caalrj] {
    outline: none;
    border-color: #1b6ec2;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .18);
}

.png-error[b-ptn0caalrj] {
    padding: 8px 12px;
    border-radius: 8px;
    background: #fbe9e8;
    color: #8a1714;
    font-size: 13px;
}

.png-save[b-ptn0caalrj] {
    height: 42px;
    border: 0;
    border-radius: 9px;
    background: #1b6ec2;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.png-save:disabled[b-ptn0caalrj] { opacity: .5; cursor: default; }

.png-hint[b-ptn0caalrj] {
    font-size: 12px;
    color: #6e6e73;
    text-align: center;
}
/* /Components/Pages/Banking.razor.rz.scp.css */
/* Bankkonten – gleiche Optik wie /ionos-zones und /permissions, Gelb-Akzent wie das Menü. */

.bk-page[b-411bpuqab5] {
    --bk-ground: #f6f5f2;
    --bk-surface: #ffffff;
    --bk-border: #e4e2dc;
    --bk-divider: #efeee9;
    --bk-soft: #fbfaf8;
    --bk-text: #1d1d1f;
    --bk-text-2: #4a4a4f;
    --bk-muted: #6e6e73;
    --bk-accent: #1b6ec2;
    --bk-yellow: #ffd84d;
    --bk-yellow-soft: #fff6d1;
    --bk-ok: #1e8e3e;
    --bk-warn: #9a6700;
    --bk-err: #c5221f;
    color: var(--bk-text);
    background: var(--bk-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.bk-header[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bk-header h1[b-411bpuqab5] {
    margin: 0 4px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.bk-meta[b-411bpuqab5] {
    flex-grow: 1;
    color: var(--bk-muted);
    font-size: 14px;
    padding-top: 6px;
}

.bk-meta b[b-411bpuqab5] { color: var(--bk-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.bk-intro[b-411bpuqab5] {
    margin: 0;
    color: var(--bk-muted);
    font-size: 14px;
    max-width: 760px;
}

/* ---------- Buttons ---------- */
.bk-btn[b-411bpuqab5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--bk-border);
    background: var(--bk-surface);
    color: var(--bk-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.bk-btn svg[b-411bpuqab5],
.bk-icon svg[b-411bpuqab5] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bk-btn:hover:not(:disabled)[b-411bpuqab5] { background: var(--bk-soft); }
.bk-btn.is-primary[b-411bpuqab5] { background: var(--bk-text); border-color: var(--bk-text); color: #fff; }
.bk-btn.is-primary:hover:not(:disabled)[b-411bpuqab5] { background: #000; }
.bk-btn.is-primary svg[b-411bpuqab5] { stroke: var(--bk-yellow); }
.bk-btn:disabled[b-411bpuqab5] { opacity: .5; cursor: default; }

/* Abrufen in der Kopfzeile: läuft die geplante Aufgabe, nicht ausgegraut, sondern mit Kreisel */
.bk-sync-btn.is-running:disabled[b-411bpuqab5] { opacity: 1; color: var(--bk-muted); }
.bk-spin[b-411bpuqab5] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--bk-border);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bk-spin-b-411bpuqab5 .8s linear infinite;
}
@keyframes bk-spin-b-411bpuqab5 { to { transform: rotate(360deg); } }

.bk-link[b-411bpuqab5] {
    border: 0;
    background: transparent;
    color: var(--bk-accent);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 6px;
    cursor: pointer;
}

.bk-link:hover:not(:disabled)[b-411bpuqab5] { text-decoration: underline; }
.bk-link.is-muted[b-411bpuqab5] { color: var(--bk-muted); }
.bk-link.is-danger[b-411bpuqab5] { color: var(--bk-err); }
.bk-link:disabled[b-411bpuqab5] { opacity: .5; cursor: default; }

/* Kompakte Zeilen-Aktionen (Umsätze / Abrufen) – gleiche Höhe wie .bk-icon */
.bk-act[b-411bpuqab5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--bk-border);
    border-radius: 8px;
    background: var(--bk-surface);
    color: var(--bk-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}

.bk-act svg[b-411bpuqab5] {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: var(--bk-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a.bk-act:hover[b-411bpuqab5],
.bk-act:hover:not(:disabled)[b-411bpuqab5] { background: var(--bk-yellow-soft); border-color: #f0dc8c; color: var(--bk-text); text-decoration: none; }
.bk-act:hover:not(:disabled) svg[b-411bpuqab5] { stroke: var(--bk-text); }
.bk-act:disabled[b-411bpuqab5] { opacity: .45; cursor: default; }
.bk-act:focus-visible[b-411bpuqab5] { outline: 2px solid var(--bk-accent); outline-offset: 2px; }

.bk-icon[b-411bpuqab5] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bk-muted);
    cursor: pointer;
}

.bk-icon:hover[b-411bpuqab5] { background: var(--bk-divider); color: var(--bk-text); }
.bk-icon.is-danger:hover[b-411bpuqab5] { background: #fdecea; color: var(--bk-err); }

.bk-btn:focus-visible[b-411bpuqab5],
.bk-link:focus-visible[b-411bpuqab5],
.bk-icon:focus-visible[b-411bpuqab5],
.bk-input:focus-visible[b-411bpuqab5] { outline: 2px solid var(--bk-accent); outline-offset: 2px; }

/* ---------- Hinweise ---------- */
.bk-alert[b-411bpuqab5],
.bk-confirm[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

.bk-alert span[b-411bpuqab5],
.bk-confirm span[b-411bpuqab5] { flex-grow: 1; }

.bk-alert.is-error[b-411bpuqab5] { background: #fdecea; color: var(--bk-err); border: 1px solid #f6c7c3; }
.bk-alert.is-ok[b-411bpuqab5] { background: #e8f5ec; color: var(--bk-ok); border: 1px solid #c3e5cd; }
.bk-confirm[b-411bpuqab5] { background: var(--bk-yellow-soft); border: 1px solid #f3e19a; color: var(--bk-text); }

.bk-alert button[b-411bpuqab5] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Karten ---------- */
.bk-card[b-411bpuqab5] {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: 14px;
    overflow: hidden;
}

.bk-card-head[b-411bpuqab5] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bk-divider);
}

.bk-card-head h2[b-411bpuqab5] { margin: 0; font-size: 16px; font-weight: 650; }
.bk-card-head small[b-411bpuqab5] { color: var(--bk-muted); font-size: 13px; }

.bk-empty[b-411bpuqab5] {
    color: var(--bk-muted);
    padding: 28px;
    text-align: center;
    font-size: 14px;
}

/* ---------- Tabelle ---------- */
.bk-scroll[b-411bpuqab5] { overflow-x: auto; }

.bk-table[b-411bpuqab5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.bk-table th[b-411bpuqab5] {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bk-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--bk-divider);
    white-space: nowrap;
}

.bk-table td[b-411bpuqab5] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--bk-divider);
    vertical-align: middle;
}

.bk-table tbody tr:last-child td[b-411bpuqab5] { border-bottom: 0; }
.bk-table tbody tr:hover td[b-411bpuqab5] { background: var(--bk-soft); }
/* ---------- Status-Pillen ---------- */
.bk-pill[b-411bpuqab5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
    white-space: nowrap;
}

.bk-pill.is-ok[b-411bpuqab5] { background: #e8f5ec; color: var(--bk-ok); }
.bk-pill.is-warn[b-411bpuqab5] { background: var(--bk-yellow-soft); color: var(--bk-warn); }
.bk-pill.is-error[b-411bpuqab5] { background: #fdecea; color: var(--bk-err); }
.bk-pill.is-muted[b-411bpuqab5] { background: var(--bk-divider); color: var(--bk-muted); }

/* ---------- Allgemein ---------- */
.bk-grow[b-411bpuqab5] { flex-grow: 1; }
.bk-muted[b-411bpuqab5] { color: var(--bk-muted); }
.bk-mono[b-411bpuqab5] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.bk-ask[b-411bpuqab5] { color: var(--bk-err); font-size: 13px; margin-right: 2px; }
.bk-sr[b-411bpuqab5] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bk-warn-text[b-411bpuqab5] { color: var(--bk-warn); font-weight: 600; }
a.bk-btn[b-411bpuqab5] { text-decoration: none; }
a.bk-btn.is-primary:hover[b-411bpuqab5] { color: #fff; }
.bk-icon:disabled[b-411bpuqab5] { opacity: .5; cursor: default; }
.bk-card-head .bk-pill[b-411bpuqab5] { margin: 0; }

/* ---------- Zugangsdaten ---------- */
.bk-cred-row[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.bk-label[b-411bpuqab5] { color: var(--bk-muted); font-size: 13px; }

.bk-cred-form[b-411bpuqab5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: end;
    padding: 14px 16px;
    background: var(--bk-soft);
}

.bk-cred-form label[b-411bpuqab5] { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.bk-cred-form label span[b-411bpuqab5] { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--bk-muted); }
.bk-cred-actions[b-411bpuqab5] { display: flex; gap: 8px; }
.bk-hint[b-411bpuqab5] { grid-column: 1 / -1; margin: 0; color: var(--bk-muted); font-size: 13px; }

.bk-input[b-411bpuqab5] {
    height: 36px;
    border: 1px solid var(--bk-border);
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    background: var(--bk-surface);
    color: var(--bk-text);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ---------- Bankauswahl ---------- */
.bk-search[b-411bpuqab5] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bk-divider);
    background: var(--bk-soft);
}

.bk-country[b-411bpuqab5] { flex: 0 0 180px; width: 180px; }

.bk-inst-list[b-411bpuqab5] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 440px;
    overflow-y: auto;
}

.bk-inst-list li[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--bk-divider);
}

.bk-inst-list li:hover[b-411bpuqab5] { background: var(--bk-soft); }
.bk-inst-list li.bk-empty[b-411bpuqab5] { display: block; }
.bk-inst-text[b-411bpuqab5] { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.bk-inst-text b[b-411bpuqab5] { font-size: 14px; font-weight: 600; }
.bk-inst-text small[b-411bpuqab5] { color: var(--bk-muted); font-size: 12.5px; }
.bk-inst-list .bk-btn[b-411bpuqab5] { height: 32px; }

.bk-more[b-411bpuqab5] {
    padding: 8px 16px;
    color: var(--bk-muted);
    font-size: 13px;
    border-bottom: 1px solid var(--bk-divider);
}

.bk-sandbox[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bk-yellow-soft);
    font-size: 13.5px;
    flex-wrap: wrap;
}

.bk-sandbox span[b-411bpuqab5] { flex-grow: 1; }

/* ---------- Verbindung ---------- */
.bk-conn-head[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bk-divider);
    flex-wrap: wrap;
}

.bk-conn-title[b-411bpuqab5] { flex-grow: 1; min-width: 180px; }
.bk-conn-title h2[b-411bpuqab5] { margin: 0; font-size: 16px; font-weight: 650; }
.bk-conn-title small[b-411bpuqab5] { color: var(--bk-muted); font-size: 13px; }
.bk-conn-actions[b-411bpuqab5] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.bk-acc-err[b-411bpuqab5] { color: var(--bk-err) !important; }

.bk-conn-confirm[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bk-yellow-soft);
    border-bottom: 1px solid #f3e19a;
    font-size: 13.5px;
    flex-wrap: wrap;
}

.bk-conn-confirm span[b-411bpuqab5] { flex: 1 1 300px; }

.bk-conn-error[b-411bpuqab5] {
    padding: 8px 16px;
    background: #fdecea;
    color: var(--bk-err);
    font-size: 13.5px;
    border-bottom: 1px solid #f6c7c3;
}

.bk-acc-name[b-411bpuqab5] { font-weight: 600; display: block; }
.bk-acc-sub[b-411bpuqab5] { display: block; color: var(--bk-muted); font-size: 12.5px; font-weight: 400; }
.bk-num[b-411bpuqab5] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-table th.bk-num[b-411bpuqab5] { text-align: right; }
.bk-neg[b-411bpuqab5] { color: var(--bk-err); }
.bk-col-actions[b-411bpuqab5] { width: 1%; white-space: nowrap; text-align: right; }
.bk-quota[b-411bpuqab5] {
    display: block;
    color: var(--bk-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
}

.bk-quota.is-warn[b-411bpuqab5] { color: var(--bk-warn); font-weight: 600; }
.bk-quota.is-error[b-411bpuqab5] { color: var(--bk-err); font-weight: 600; }

.bk-acc-iban[b-411bpuqab5] { font-size: 12px; }

/* ---------- Kontoeinstellungen ---------- */
.bk-table tr.bk-acc-settings td[b-411bpuqab5] { background: var(--bk-soft); padding: 12px 16px; }
.bk-table tbody tr.bk-acc-settings:hover td[b-411bpuqab5] { background: var(--bk-soft); }
.bk-settings[b-411bpuqab5] { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bk-check[b-411bpuqab5] { display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer; font-size: 14px; }
.bk-check input[b-411bpuqab5] { width: 16px; height: 16px; margin-top: 2px; accent-color: #1d1d1f; flex: 0 0 16px; }
.bk-check small[b-411bpuqab5] { display: block; color: var(--bk-muted); font-size: 12.5px; }
.bk-settings-warn[b-411bpuqab5] { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--bk-yellow-soft); color: var(--bk-warn); font-size: 13px; }

/* ---------- Offline-Konten ---------- */

.bk-off-form[b-411bpuqab5] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bk-soft);
    border-bottom: 1px solid var(--bk-divider);
}

.bk-off-kind[b-411bpuqab5] {
    grid-column: 1 / -1;
    display: inline-flex;
    justify-self: start;
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
    background: var(--bk-divider);
}

.bk-off-kind button[b-411bpuqab5] {
    border: 0;
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--bk-muted);
    cursor: pointer;
}

.bk-off-kind button.is-sel[b-411bpuqab5] { background: var(--bk-surface); color: var(--bk-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.bk-off-kind button:focus-visible[b-411bpuqab5] { outline: 2px solid var(--bk-accent); outline-offset: 2px; }
.bk-off-kind-hint[b-411bpuqab5] { grid-column: 1 / -1; color: var(--bk-muted); margin-top: -4px; }
.bk-off-auto[b-411bpuqab5] { display: block; margin-top: 2px; }

.bk-off-icons[b-411bpuqab5] { display: flex; gap: 4px; flex-wrap: wrap; }

.bk-off-icon[b-411bpuqab5] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--bk-border);
    background: var(--bk-surface);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}

.bk-off-icon:hover[b-411bpuqab5] { background: var(--bk-divider); }
.bk-off-icon.is-sel[b-411bpuqab5] { border-color: var(--bk-text); box-shadow: 0 0 0 2px var(--bk-yellow); }
.bk-off-icon:focus-visible[b-411bpuqab5] { outline: 2px solid var(--bk-accent); outline-offset: 2px; }

.bk-off-name[b-411bpuqab5] { display: inline-flex; align-items: center; gap: 10px; }

.bk-off-emoji[b-411bpuqab5] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #f3e19a;
    background: var(--bk-yellow-soft);
    display: inline-grid;
    place-items: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.is-archived .bk-off-emoji[b-411bpuqab5] { filter: grayscale(1); opacity: .6; }
.is-archived .bk-acc-name[b-411bpuqab5], .is-archived .bk-num b[b-411bpuqab5] { color: var(--bk-muted); }
a.bk-link[b-411bpuqab5] { text-decoration: none; }
a.bk-link:hover[b-411bpuqab5] { text-decoration: underline; }

/* ---------- Kennzahlen ---------- */
.bk-stats[b-411bpuqab5] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.bk-stat[b-411bpuqab5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: 14px;
}

.bk-stat-label[b-411bpuqab5] { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--bk-muted); }
.bk-stat-value[b-411bpuqab5] { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-stat small[b-411bpuqab5] { color: var(--bk-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-stat.is-total[b-411bpuqab5] { background: var(--bk-yellow-soft); border-color: #f3e19a; }
.bk-stat.is-total .bk-stat-value[b-411bpuqab5] { font-size: 26px; }
.bk-stat.is-total.is-pos[b-411bpuqab5] { background: #eef8f1; border-color: #c3e5cd; }
.bk-stat.is-total.is-pos .bk-stat-value[b-411bpuqab5] { color: var(--bk-ok); }
.bk-stat.is-total.is-neg[b-411bpuqab5] { background: #fdf0ef; border-color: #f6c7c3; }
.bk-stat.is-total.is-neg .bk-stat-value[b-411bpuqab5] { color: var(--bk-err); }
.bk-stat.is-warn[b-411bpuqab5] { border-color: #f3e19a; }
.bk-stat.is-warn .bk-stat-value[b-411bpuqab5] { color: var(--bk-warn); }
.bk-stat.is-error[b-411bpuqab5] { background: #fdecea; border-color: #f6c7c3; }
.bk-stat.is-error .bk-stat-value[b-411bpuqab5] { color: var(--bk-err); }

/* ---------- Verbindung: Freigabe-Balken ---------- */
.bk-conn-meta[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
    color: var(--bk-muted);
    font-size: 13px;
}

.bk-validity[b-411bpuqab5] {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 6px;
    border-radius: 999px;
    background: var(--bk-divider);
    overflow: hidden;
    flex: 0 0 auto;
}

.bk-validity > span[b-411bpuqab5] { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--bk-ok); }
.bk-validity.is-warn > span[b-411bpuqab5] { background: #e3a008; }
.bk-validity.is-error[b-411bpuqab5] { background: #f6c7c3; }
.bk-validity.is-error > span[b-411bpuqab5] { background: var(--bk-err); }
.bk-validity-text[b-411bpuqab5] { font-variant-numeric: tabular-nums; }
.bk-validity-text.is-warn[b-411bpuqab5] { color: var(--bk-warn); font-weight: 600; }
.bk-validity-text.is-error[b-411bpuqab5] { color: var(--bk-err); font-weight: 600; }

/* Symbol-Kachel (Offline-Konten, Zugang) – gleiche Größe wie das Bank-Logo */
.bk-tile[b-411bpuqab5] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--bk-border);
    background: var(--bk-soft);
    display: inline-grid;
    place-items: center;
    color: var(--bk-text-2);
}

.bk-tile svg[b-411bpuqab5] { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Menü ---------- */
.bk-menu-wrap[b-411bpuqab5] { position: relative; display: inline-flex; }
.bk-backdrop[b-411bpuqab5] { position: fixed; inset: 0; z-index: 40; }
.bk-icon.is-open[b-411bpuqab5] { background: var(--bk-divider); color: var(--bk-text); }

.bk-menu[b-411bpuqab5] {
    position: absolute;
    right: 0;
    top: 34px;
    z-index: 41;
    min-width: 240px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 4px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.bk-menu button[b-411bpuqab5] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--bk-text);
    cursor: pointer;
    white-space: nowrap;
}

.bk-menu button svg[b-411bpuqab5] { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--bk-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-menu button:hover:not(:disabled)[b-411bpuqab5] { background: var(--bk-soft); }
.bk-menu button:disabled[b-411bpuqab5] { color: #b0aea6; cursor: default; }
.bk-menu button.is-danger[b-411bpuqab5],
.bk-menu button.is-danger svg[b-411bpuqab5] { color: var(--bk-err); stroke: var(--bk-err); }
.bk-menu button.is-danger:hover:not(:disabled)[b-411bpuqab5] { background: #fdecea; }
.bk-menu button:focus-visible[b-411bpuqab5] { outline: 2px solid var(--bk-accent); outline-offset: -2px; }
.bk-menu-sep[b-411bpuqab5] { height: 1px; background: var(--bk-divider); margin: 4px 6px; }

/* ---------- Rückfragen ---------- */
.bk-btn.is-danger[b-411bpuqab5] { background: var(--bk-err); border-color: var(--bk-err); color: #fff; }
.bk-btn.is-danger:hover:not(:disabled)[b-411bpuqab5] { background: #a51b18; }
.bk-conn-confirm.is-danger[b-411bpuqab5] { background: #fdecea; border-bottom-color: #f6c7c3; }
.bk-conn-confirm.is-inset[b-411bpuqab5] { border: 1px solid #f6c7c3; border-radius: 10px; }
.bk-conn-confirm .bk-btn[b-411bpuqab5] { height: 32px; }
.bk-table tr.bk-confirm-row td[b-411bpuqab5] { padding: 0; }
.bk-table tbody tr.bk-confirm-row:hover td[b-411bpuqab5] { background: transparent; }

/* ---------- Kontozeilen ---------- */
.bk-row-actions[b-411bpuqab5] { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.bk-amount[b-411bpuqab5] { font-size: 15px; }
.bk-amount.bk-pos[b-411bpuqab5], .bk-amount.bk-neg[b-411bpuqab5] { display: inline-block; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.bk-amount.bk-pos[b-411bpuqab5] { background: #e8f5ec; color: var(--bk-ok); }
.bk-amount.bk-neg[b-411bpuqab5] { background: #fdecea; color: var(--bk-err); }
.bk-table td.bk-num[b-411bpuqab5] { width: 1%; padding-left: 24px; }
.bk-table th.bk-num[b-411bpuqab5], .bk-table td.bk-num[b-411bpuqab5] { width: 150px; }
.bk-table th.bk-col-actions[b-411bpuqab5], .bk-table td.bk-col-actions[b-411bpuqab5] { width: 240px; }
a.bk-acc-name[b-411bpuqab5] { color: inherit; text-decoration: none; }
a.bk-acc-name:hover[b-411bpuqab5] { text-decoration: underline; }
.bk-table .bk-acc-sub .bk-pill[b-411bpuqab5] { margin-top: 3px; }

/* ---------- GoCardless-Zugang ---------- */
.bk-cred-toggle[b-411bpuqab5] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--bk-text);
    cursor: pointer;
}

.bk-cred-toggle:hover:not(:disabled)[b-411bpuqab5] { background: var(--bk-soft); }
.bk-cred-toggle:disabled[b-411bpuqab5] { cursor: default; }
.bk-cred-toggle:focus-visible[b-411bpuqab5] { outline: 2px solid var(--bk-accent); outline-offset: -2px; }
.bk-cred-sum[b-411bpuqab5] { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.bk-cred-sum b[b-411bpuqab5] { font-size: 15px; font-weight: 650; }
.bk-cred-sum small[b-411bpuqab5] { color: var(--bk-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-chevron[b-411bpuqab5] { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--bk-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.bk-cred-toggle[aria-expanded="true"] .bk-chevron[b-411bpuqab5] { transform: rotate(180deg); }
.bk-cred-body[b-411bpuqab5] { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px 64px; border-top: 1px solid var(--bk-divider); padding-top: 14px; }
.bk-cred.is-setup .bk-cred-body[b-411bpuqab5] { padding-left: 16px; border-top: 0; }
.bk-cred.is-setup[b-411bpuqab5] { border-color: #f3e19a; box-shadow: 0 0 0 3px var(--bk-yellow-soft); }
.bk-cred-body .bk-cred-form[b-411bpuqab5] { padding: 0; background: transparent; }
.bk-cred-body .bk-cred-actions[b-411bpuqab5] { align-items: center; flex-wrap: wrap; }

@media (max-width: 640.98px) {
    .bk-off-form[b-411bpuqab5] { grid-template-columns: 1fr; }
    .bk-page[b-411bpuqab5] {
        margin: -1.1rem -1.5rem 0 -1.5rem;
        padding: 18px 16px 24px 16px;
    }

    .bk-meta[b-411bpuqab5] { flex-basis: 100%; order: 1; padding-top: 0; }
    .bk-header .bk-btn[b-411bpuqab5] { order: 2; }
    .bk-cred-form[b-411bpuqab5] { grid-template-columns: 1fr; }
    .bk-cred-body[b-411bpuqab5] { padding-left: 16px; }
    .bk-search[b-411bpuqab5] { flex-wrap: wrap; }
    .bk-country[b-411bpuqab5] { flex-basis: 100%; width: 100%; }
    .bk-inst-list li[b-411bpuqab5] { flex-wrap: wrap; }
    .bk-conn-head[b-411bpuqab5] { gap: 10px; }
    .bk-conn-title[b-411bpuqab5] { min-width: 0; flex: 1 1 0; }
    .bk-conn-actions[b-411bpuqab5] { width: 100%; justify-content: flex-end; }
    .bk-table td[b-411bpuqab5], .bk-table th[b-411bpuqab5] { padding: 8px 8px; }
    .bk-long[b-411bpuqab5], .bk-dot[b-411bpuqab5] { display: none; }
    /* Tabellen als Karten-Zeilen: Name oben, darunter Stand links und Aktionen rechts */
    .bk-table thead[b-411bpuqab5] { display: none; }
    .bk-table[b-411bpuqab5], .bk-table tbody[b-411bpuqab5] { display: block; }
    .bk-table tr[b-411bpuqab5] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--bk-divider); }
    .bk-table tbody tr:last-child[b-411bpuqab5] { border-bottom: 0; }
    .bk-table td[b-411bpuqab5] { display: block; border-bottom: 0; padding: 8px 12px; }
    .bk-table td:first-child[b-411bpuqab5] { grid-column: 1 / -1; padding-bottom: 2px; }
    .bk-table td[colspan][b-411bpuqab5] { grid-column: 1 / -1; }
    .bk-table td.bk-num[b-411bpuqab5] { width: auto; text-align: left; padding-left: 12px; padding-top: 2px; }
    .bk-table td.bk-num .bk-acc-sub[b-411bpuqab5] { display: inline; margin-left: 6px; }
    .bk-table td.bk-col-actions[b-411bpuqab5] { width: auto; padding-top: 2px; }
    .bk-table .bk-col-actions .bk-quota[b-411bpuqab5] { text-align: right; }
    .bk-row-actions .bk-hide-sm[b-411bpuqab5] { display: none; }
    .bk-table td:first-child .bk-acc-sub[b-411bpuqab5] { white-space: normal; }
    .bk-stats[b-411bpuqab5] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-stat.is-total[b-411bpuqab5] { grid-column: 1 / -1; }
    .bk-stat-value[b-411bpuqab5] { font-size: 17px; }
    .bk-stat.is-total .bk-stat-value[b-411bpuqab5] { font-size: 22px; }
    .bk-cred-toggle .bk-pill[b-411bpuqab5] { display: none; }
}

/* Handy: Status unter den Banknamen statt daneben (sonst bleibt für den Namen kaum Platz). */
@media (max-width: 640.98px) {
    .bk-conn-head[b-411bpuqab5] { flex-wrap: wrap; }
    .bk-conn-title[b-411bpuqab5] { flex: 1 1 calc(100% - 60px); }
    .bk-conn-head > .bk-pill[b-411bpuqab5] { order: 3; margin-left: 46px; margin-top: -4px; }
    .bk-conn-actions[b-411bpuqab5] { order: 4; }
}

.bk-row-actions + .bk-quota[b-411bpuqab5] { margin-top: 4px; }
/* /Components/Pages/BankingCallback.razor.rz.scp.css */
.bc-page[b-g7m2335c7u] {
    background: #f6f5f2;
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 48px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    color: #1d1d1f;
}

.bc-card[b-g7m2335c7u] {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e4e2dc;
    border-radius: 14px;
    padding: 28px 28px 24px 28px;
    text-align: center;
}

.bc-card h1[b-g7m2335c7u] { font-size: 22px; font-weight: 700; margin: 12px 0 6px 0; letter-spacing: -0.2px; }
.bc-card p[b-g7m2335c7u] { margin: 0 0 6px 0; color: #4a4a4f; font-size: 14.5px; }
.bc-note[b-g7m2335c7u] { color: #6e6e73 !important; font-size: 13.5px !important; overflow-wrap: anywhere; }

.bc-icon[b-g7m2335c7u] {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.bc-icon svg[b-g7m2335c7u] { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bc-icon.is-ok[b-g7m2335c7u] { background: #e8f5ec; color: #1e8e3e; }
.bc-icon.is-warn[b-g7m2335c7u] { background: #fff6d1; color: #9a6700; }
.bc-icon.is-error[b-g7m2335c7u] { background: #fdecea; color: #c5221f; }

.bc-btn[b-g7m2335c7u] {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    margin-top: 16px;
    border-radius: 10px;
    background: #1d1d1f;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.bc-btn:hover[b-g7m2335c7u] { background: #000; color: #fff; }
.bc-actions[b-g7m2335c7u] { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bc-btn.is-light[b-g7m2335c7u] { background: #fff; color: #1d1d1f; border: 1px solid #e4e2dc; }
.bc-btn.is-light:hover[b-g7m2335c7u] { background: #fbfaf8; color: #1d1d1f; }

@media (max-width: 640.98px) {
    .bc-page[b-g7m2335c7u] { margin: -1.1rem -1.5rem 0 -1.5rem; padding: 24px 16px; }
}
/* /Components/Pages/BankLogo.razor.rz.scp.css */
.bl-logo[b-qidemu5ifq] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    border: 1px solid #e4e2dc;
    background: #fff;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

.bl-initials[b-qidemu5ifq] {
    display: inline-grid;
    place-items: center;
    padding: 0;
    background: #fff6d1;
    border-color: #f3e19a;
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 650;
}
/* /Components/Pages/Boards.razor.rz.scp.css */
/* Boards (Kanban) – Farben wie /reminders. Ghost + Einfügelinie beim Ziehen liegen in <body>, ihr Stil steht in app.css. */

.kb-page[b-c7z4kj5oqc] {
    --kb-ground: #f6f5f2;
    --kb-surface: #ffffff;
    --kb-column: #ecebe6;
    --kb-border: #e4e2dc;
    --kb-text: #1d1d1f;
    --kb-text-2: #4a4a4f;
    --kb-muted: #6e6e73;
    --kb-accent: #1b6ec2;
    --kb-danger: #c5221f;
    color: var(--kb-text);
    background: var(--kb-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 22px 32px 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: calc(100vh - 3.5rem);
}

.kb-page.is-board[b-c7z4kj5oqc] {
    height: calc(100vh - 3.5rem);
    height: calc(100dvh - 3.5rem);
    min-height: 0;
    padding-bottom: 0;
}

.kb-page.is-overview[b-c7z4kj5oqc] { padding-bottom: 40px; }

.kb-page svg[b-c7z4kj5oqc] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.kb-page svg .fill[b-c7z4kj5oqc] { fill: currentColor; stroke: none; }

.kb-muted[b-c7z4kj5oqc] { color: var(--kb-muted); font-size: 13px; }
.kb-grow[b-c7z4kj5oqc] { flex-grow: 1; }

/* ---------- Kopf ---------- */
.kb-head[b-c7z4kj5oqc] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kb-h1[b-c7z4kj5oqc] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.is-overview .kb-h1[b-c7z4kj5oqc] { flex-grow: 1; }

.kb-title[b-c7z4kj5oqc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

.kb-sub[b-c7z4kj5oqc] { font-size: 13px; color: var(--kb-muted); }

.kb-icon-btn[b-c7z4kj5oqc] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--kb-border);
    background: var(--kb-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kb-text);
    cursor: pointer;
    text-decoration: none;
}

.kb-icon-btn:hover[b-c7z4kj5oqc] { background: #f0efea; color: var(--kb-text); }

.kb-btn[b-c7z4kj5oqc],
.kb-btn-primary[b-c7z4kj5oqc],
.kb-btn-danger[b-c7z4kj5oqc] {
    height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.kb-btn[b-c7z4kj5oqc] {
    border: 1px solid var(--kb-border);
    background: var(--kb-surface);
    color: var(--kb-text);
}

.kb-btn:hover[b-c7z4kj5oqc] { background: #f0efea; }

.kb-btn-primary[b-c7z4kj5oqc] {
    border: 0;
    background: var(--kb-accent);
    color: #fff;
}

.kb-btn-primary:hover[b-c7z4kj5oqc] { background: #185fa8; color: #fff; }

.kb-btn-danger[b-c7z4kj5oqc] {
    border: 0;
    background: var(--kb-danger);
    color: #fff;
}

.kb-btn-danger:hover[b-c7z4kj5oqc] { background: #a91c19; }

.kb-btn-danger.is-ghost[b-c7z4kj5oqc] {
    background: none;
    color: var(--kb-danger);
    padding: 0 8px;
}

.kb-btn-danger.is-ghost:hover[b-c7z4kj5oqc] { background: #fbe9e8; }

.kb-btn-primary.is-small[b-c7z4kj5oqc] { height: 34px; padding: 0 12px; font-size: 13px; }

.kb-btn:disabled[b-c7z4kj5oqc],
.kb-btn-primary:disabled[b-c7z4kj5oqc],
.kb-btn-danger:disabled[b-c7z4kj5oqc] { opacity: .5; cursor: default; }

.kb-x[b-c7z4kj5oqc] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--kb-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.kb-x:hover[b-c7z4kj5oqc] { background: rgba(0, 0, 0, .06); color: var(--kb-text); }

.kb-text-btn[b-c7z4kj5oqc] {
    border: 0;
    background: none;
    padding: 4px 6px;
    font: inherit;
    font-size: 13px;
    color: var(--kb-accent);
    cursor: pointer;
}

.kb-text-btn.is-danger[b-c7z4kj5oqc] { color: var(--kb-danger); }

.kb-alert[b-c7z4kj5oqc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border-radius: 10px;
    background: #fbe9e8;
    border: 1px solid #f1c4c1;
    color: #8c1d1a;
    font-size: 14px;
}

.kb-alert span[b-c7z4kj5oqc] { flex-grow: 1; }

.kb-alert-x[b-c7z4kj5oqc] {
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

/* ---------- Avatare ---------- */
.kb-av[b-c7z4kj5oqc] {
    --h: 210;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: hsl(var(--h) 45% 28%);
    background: hsl(var(--h) 60% 88%);
    border: 2px solid var(--kb-surface);
    box-sizing: border-box;
}

.kb-av.is-small[b-c7z4kj5oqc] { width: 24px; height: 24px; font-size: 9.5px; border-width: 1.5px; }
.kb-av.is-tiny[b-c7z4kj5oqc] { width: 22px; height: 22px; font-size: 8.5px; border-width: 1.5px; }
.kb-av.is-more[b-c7z4kj5oqc] { background: #e7e5df; color: var(--kb-text-2); }

.kb-avatars[b-c7z4kj5oqc] {
    display: inline-flex;
    padding: 0 4px 0 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.kb-avatars .kb-av + .kb-av[b-c7z4kj5oqc] { margin-left: -8px; }

/* ---------- Menüs ---------- */
.kb-menu-wrap[b-c7z4kj5oqc] { position: relative; }

.kb-menu-backdrop[b-c7z4kj5oqc] {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.kb-menu[b-c7z4kj5oqc] {
    position: absolute;
    top: calc(100% + 4px);
    z-index: 31;
    min-width: 190px;
    padding: 5px;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(20, 20, 22, .14);
    display: flex;
    flex-direction: column;
}

.kb-menu.is-right[b-c7z4kj5oqc] { right: 0; }

.kb-menu button[b-c7z4kj5oqc] {
    border: 0;
    background: none;
    text-align: left;
    padding: 8px 10px;
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
    color: var(--kb-text);
    cursor: pointer;
    white-space: nowrap;
}

.kb-menu button:hover:not(:disabled)[b-c7z4kj5oqc] { background: #f2f1ec; }
.kb-menu button:disabled[b-c7z4kj5oqc] { color: #b5b4b0; cursor: default; }
.kb-menu button.is-danger[b-c7z4kj5oqc] { color: var(--kb-danger); }

/* Farbauswahl im ⋯-Menü */
.kb-colors[b-c7z4kj5oqc] {
    margin-top: 4px;
    padding: 8px 8px 6px 8px;
    border-top: 1px solid #efeee9;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kb-colors-label[b-c7z4kj5oqc] { font-size: 12px; font-weight: 600; color: var(--kb-muted); }

.kb-colors-row[b-c7z4kj5oqc] {
    display: grid;
    grid-template-columns: repeat(5, 28px);
    gap: 7px;
}

.kb-menu button.kb-swatch[b-c7z4kj5oqc] {
    --sw: #ccc;
    --sw-bg: #eee;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw) 50% 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    cursor: pointer;
}

.kb-menu button.kb-swatch:hover[b-c7z4kj5oqc] { background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw) 50% 100%); transform: scale(1.08); }
.kb-menu button.kb-swatch.is-on[b-c7z4kj5oqc] { box-shadow: 0 0 0 2px var(--kb-text); }

/* „Keine Farbe“: weiß mit Schrägstrich */
.kb-menu button.kb-swatch.is-none[b-c7z4kj5oqc],
.kb-menu button.kb-swatch.is-none:hover[b-c7z4kj5oqc] {
    background: linear-gradient(135deg, #fff 0 46%, #d0cec7 46% 54%, #fff 54% 100%);
}

/* ---------- Übersicht ---------- */
.kb-sec[b-c7z4kj5oqc] {
    margin: 6px 0 -6px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--kb-muted);
}

.kb-tiles[b-c7z4kj5oqc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.kb-tile[b-c7z4kj5oqc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 12px 16px;
    min-height: 150px;
    box-sizing: border-box;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    color: var(--kb-text);
    text-decoration: none;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}

.kb-tile:hover[b-c7z4kj5oqc] {
    color: var(--kb-text);
    border-color: #d6d3ca;
    box-shadow: 0 6px 20px rgba(20, 20, 22, .08);
    transform: translateY(-1px);
}

.kb-tile-bars[b-c7z4kj5oqc] {
    --h: 210;
    display: flex;
    gap: 5px;
    align-items: flex-start;
    height: 34px;
    margin-bottom: 4px;
}

.kb-tile-bars span[b-c7z4kj5oqc] {
    width: 26px;
    border-radius: 5px;
    background: hsl(var(--h) 55% 80%);
}

.kb-tile-bars span:nth-child(1)[b-c7z4kj5oqc] { height: 30px; }
.kb-tile-bars span:nth-child(2)[b-c7z4kj5oqc] { height: 20px; background: hsl(var(--h) 55% 86%); }
.kb-tile-bars span:nth-child(3)[b-c7z4kj5oqc] { height: 12px; background: hsl(var(--h) 55% 91%); }

.kb-tile-name[b-c7z4kj5oqc] {
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-tile-meta[b-c7z4kj5oqc] { font-size: 13px; color: var(--kb-text-2); }

.kb-tile-foot[b-c7z4kj5oqc] {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--kb-text-2);
    min-width: 0;
}

.kb-tile-foot > span:not(.kb-av):not(.kb-tile-people):not(.kb-grow)[b-c7z4kj5oqc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-tile-foot .kb-muted[b-c7z4kj5oqc] { font-size: 12px; flex-shrink: 0; }

.kb-tile-people[b-c7z4kj5oqc] { display: inline-flex; flex-shrink: 0; }
.kb-tile-people .kb-av + .kb-av[b-c7z4kj5oqc] { margin-left: -6px; }

/* Board mit Hintergrundfarbe */
.kb-tile.has-color[b-c7z4kj5oqc] { background: var(--tile-bg); border-color: rgba(0, 0, 0, .06); }
.kb-tile.has-color .kb-tile-bars span[b-c7z4kj5oqc] { background: var(--tile-bar); }
.kb-tile.has-color .kb-tile-bars span:nth-child(2)[b-c7z4kj5oqc],
.kb-tile.has-color .kb-tile-bars span:nth-child(3)[b-c7z4kj5oqc] { background: var(--tile-bar-2); }
.kb-tile.has-color .kb-tile-bars span:nth-child(3)[b-c7z4kj5oqc] { opacity: .7; }

.kb-tile-new[b-c7z4kj5oqc] {
    align-items: center;
    justify-content: center;
    border-style: dashed;
    background: transparent;
    color: var(--kb-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.kb-tile-new:hover[b-c7z4kj5oqc] { color: var(--kb-accent); border-color: var(--kb-accent); background: #fff; }

.kb-empty[b-c7z4kj5oqc] {
    margin: 40px auto;
    max-width: 420px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.kb-empty h2[b-c7z4kj5oqc] { margin: 6px 0 0 0; font-size: 20px; font-weight: 700; }
.kb-empty p[b-c7z4kj5oqc] { margin: 0 0 8px 0; color: var(--kb-text-2); font-size: 14px; line-height: 1.5; }

.kb-empty-art[b-c7z4kj5oqc] {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    height: 56px;
}

.kb-empty-art span[b-c7z4kj5oqc] { width: 34px; border-radius: 7px; background: #dcd9d0; }
.kb-empty-art span:nth-child(1)[b-c7z4kj5oqc] { height: 52px; }
.kb-empty-art span:nth-child(2)[b-c7z4kj5oqc] { height: 36px; background: #e5e2da; }
.kb-empty-art span:nth-child(3)[b-c7z4kj5oqc] { height: 22px; background: #edebe5; }

/* ---------- Board ---------- */
.kb-board[b-c7z4kj5oqc] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -32px;
    padding: 2px 32px 18px 32px;
    overscroll-behavior-x: contain;
}

.kb-list[b-c7z4kj5oqc],
.kb-list-new[b-c7z4kj5oqc] {
    flex: 0 0 286px;
    width: 286px;
    max-height: 100%;
    box-sizing: border-box;
}

.kb-page.is-board[b-c7z4kj5oqc] { transition: background-color .2s; }

.kb-list[b-c7z4kj5oqc] {
    transition: background-color .2s;
    display: flex;
    flex-direction: column;
    background: var(--kb-column);
    border-radius: 14px;
    min-height: 0;
}

.kb-list-head[b-c7z4kj5oqc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px 4px 12px;
    min-height: 44px;
    box-sizing: border-box;
    cursor: grab;
    touch-action: pan-x pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.kb-list-title[b-c7z4kj5oqc] {
    flex-grow: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    padding: 4px 0;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.kb-count[b-c7z4kj5oqc] {
    font-size: 12px;
    font-weight: 600;
    color: var(--kb-muted);
    background: rgba(0, 0, 0, .06);
    border-radius: 999px;
    padding: 1px 8px;
}

.kb-list-input[b-c7z4kj5oqc] {
    flex-grow: 1;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--kb-accent);
    border-radius: 7px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .15);
}

.kb-list-more[b-c7z4kj5oqc] {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--kb-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.kb-list-more:hover[b-c7z4kj5oqc] { background: rgba(0, 0, 0, .07); color: var(--kb-text); }

.kb-cards[b-c7z4kj5oqc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 8px 6px 8px;
    overflow-y: auto;
    min-height: 8px;
    overscroll-behavior: contain;
}

.kb-card[b-c7z4kj5oqc] {
    background: var(--kb-surface);
    border-radius: 10px;
    padding: 9px 11px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .03);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    outline: 0;
    transition: box-shadow .12s;
}

.kb-card:hover[b-c7z4kj5oqc] { box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05); }
.kb-card:focus-visible[b-c7z4kj5oqc] { box-shadow: 0 0 0 2px var(--kb-accent); }

/* Titel und Avatare teilen sich eine Zeile, solange es passt; die Notiz steht immer darunter in voller Breite. */
.kb-card[b-c7z4kj5oqc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}

.kb-card-title[b-c7z4kj5oqc] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.kb-card-notes[b-c7z4kj5oqc] {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--kb-muted);
}

.kb-card-notes svg[b-c7z4kj5oqc] { width: 14px; height: 14px; margin-top: 1px; }

.kb-card-notes span[b-c7z4kj5oqc] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.kb-card-notes[b-c7z4kj5oqc] { flex-basis: 100%; }

.kb-card-people[b-c7z4kj5oqc] {
    display: flex;
    margin-left: auto;
}

.kb-card-notes + .kb-card-people[b-c7z4kj5oqc] { margin-top: 6px; }

.kb-card-people .kb-av + .kb-av[b-c7z4kj5oqc] { margin-left: -6px; }
.kb-card-people .kb-av.is-me[b-c7z4kj5oqc] { box-shadow: 0 0 0 1.5px var(--kb-accent); }

.kb-assign[b-c7z4kj5oqc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kb-assign-chip[b-c7z4kj5oqc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px 0 4px;
    border: 1px solid #d9d6ce;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    color: var(--kb-text);
    cursor: pointer;
}

.kb-assign-chip:hover[b-c7z4kj5oqc] { background: #f5f4f0; }

.kb-assign-chip.is-on[b-c7z4kj5oqc] {
    border-color: var(--kb-accent);
    background: #e8f1fb;
    color: #124f8c;
    font-weight: 600;
}

.kb-assign-chip svg[b-c7z4kj5oqc] { width: 15px; height: 15px; margin-left: -2px; }

.kb-card.kb-drag-source[b-c7z4kj5oqc] { opacity: .35; }
.kb-list.kb-drag-source[b-c7z4kj5oqc] { opacity: .45; }

.kb-add-card[b-c7z4kj5oqc],
.kb-add-list[b-c7z4kj5oqc] {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--kb-text-2);
    cursor: pointer;
}

.kb-add-card[b-c7z4kj5oqc] {
    margin: 0 8px 8px 8px;
    padding: 8px 6px;
    border-radius: 9px;
}

.kb-add-card:hover[b-c7z4kj5oqc] { background: rgba(0, 0, 0, .06); color: var(--kb-text); }

.kb-add-list[b-c7z4kj5oqc] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .045);
    font-weight: 600;
}

.kb-add-list:hover[b-c7z4kj5oqc] { background: rgba(0, 0, 0, .08); color: var(--kb-text); }

.kb-list-new .kb-add-form[b-c7z4kj5oqc] {
    background: var(--kb-column);
    border-radius: 14px;
    padding: 8px;
}

.kb-add-form[b-c7z4kj5oqc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kb-add-input[b-c7z4kj5oqc] {
    height: 40px;
    padding: 0 10px;
    border: 1px solid #d9d6ce;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.kb-add-input:focus[b-c7z4kj5oqc] {
    outline: 0;
    border-color: var(--kb-accent);
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .15);
}

.kb-add-acts[b-c7z4kj5oqc] { display: flex; align-items: center; gap: 6px; }

/* ---------- Dialoge ---------- */
.kb-modal-backdrop[b-c7z4kj5oqc] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 22, .35);
    z-index: 1050;
}

.kb-modal[b-c7z4kj5oqc] {
    position: fixed;
    z-index: 1051;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 18px 20px;
    background: var(--kb-surface);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(20, 20, 22, .25);
    color: var(--kb-text);
}

.kb-modal.is-card[b-c7z4kj5oqc] { width: min(600px, calc(100vw - 32px)); }

.kb-modal-head[b-c7z4kj5oqc] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.kb-modal-head h2[b-c7z4kj5oqc] {
    margin: 4px 0 0 0;
    flex-grow: 1;
    font-size: 19px;
    font-weight: 700;
}

.kb-modal-text[b-c7z4kj5oqc] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--kb-text-2);
}

.kb-modal-text.is-warn[b-c7z4kj5oqc] {
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff4e0;
    color: #7a4b00;
    font-size: 13px;
}

.kb-modal-hint[b-c7z4kj5oqc] { margin: 0; font-size: 13px; color: var(--kb-muted); }

.kb-modal-acts[b-c7z4kj5oqc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.kb-field[b-c7z4kj5oqc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--kb-text-2);
}

.kb-field input[b-c7z4kj5oqc],
.kb-field textarea[b-c7z4kj5oqc],
.kb-share-row select[b-c7z4kj5oqc],
.kb-inline-select select[b-c7z4kj5oqc] {
    box-sizing: border-box;
    border: 1px solid #d9d6ce;
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    color: var(--kb-text);
    background: #fff;
}

.kb-field input[b-c7z4kj5oqc] { height: 42px; padding: 0 11px; }

.kb-field textarea[b-c7z4kj5oqc] {
    padding: 10px 12px;
    font-size: 14.5px;
    line-height: 1.5;
    resize: vertical;
    min-height: 120px;
}

.kb-field input:focus[b-c7z4kj5oqc],
.kb-field textarea:focus[b-c7z4kj5oqc],
.kb-share-row select:focus[b-c7z4kj5oqc],
.kb-inline-select select:focus[b-c7z4kj5oqc],
.kb-card-title-input:focus[b-c7z4kj5oqc] {
    outline: 0;
    border-color: var(--kb-accent);
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .15);
}

.kb-check[b-c7z4kj5oqc] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    color: var(--kb-text-2);
    cursor: pointer;
}

.kb-check input[b-c7z4kj5oqc] { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; }

.kb-card-title-input[b-c7z4kj5oqc] {
    flex-grow: 1;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 4px 8px;
    margin-left: -8px;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--kb-text);
    resize: none;
    field-sizing: content;
    min-height: 36px;
    max-height: 160px;
}

.kb-card-title-input:hover[b-c7z4kj5oqc] { border-color: #e2dfd8; }

.kb-card-meta[b-c7z4kj5oqc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: -6px;
}

.kb-inline-select[b-c7z4kj5oqc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--kb-muted);
}

.kb-inline-select select[b-c7z4kj5oqc] { height: 32px; padding: 0 8px; font-size: 13.5px; max-width: 220px; }

.kb-people[b-c7z4kj5oqc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kb-people li[b-c7z4kj5oqc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0efea;
}

.kb-people li:last-child[b-c7z4kj5oqc] { border-bottom: 0; }
.kb-people-name[b-c7z4kj5oqc] { flex-grow: 1; font-size: 14px; }
.kb-people-role[b-c7z4kj5oqc] { font-size: 12.5px; color: var(--kb-muted); }

.kb-share-row[b-c7z4kj5oqc] { display: flex; gap: 8px; }
.kb-share-row select[b-c7z4kj5oqc] { flex-grow: 1; min-width: 0; height: 40px; padding: 0 10px; }

/* ---------- Handy / schmal ---------- */
@media (max-width: 991.98px) {
    .kb-page[b-c7z4kj5oqc] { padding: 16px 16px 0 16px; gap: 14px; }
    .kb-page.is-overview[b-c7z4kj5oqc] { padding-bottom: 32px; }
    .kb-board[b-c7z4kj5oqc] { margin: 0 -16px; padding: 2px 16px 14px 16px; scroll-snap-type: x proximity; scroll-padding: 0 16px; }
    .kb-list[b-c7z4kj5oqc], .kb-list-new[b-c7z4kj5oqc] { scroll-snap-align: start; }
    .kb-h1[b-c7z4kj5oqc] { font-size: 24px; }
}

@media (max-width: 640.98px) {
    /* MainLayout: article hat hier px-4 (1.5rem) statt 2rem links */
    .kb-page[b-c7z4kj5oqc] { margin-left: -1.5rem; }
    .kb-list[b-c7z4kj5oqc], .kb-list-new[b-c7z4kj5oqc] { flex-basis: min(286px, calc(100vw - 56px)); width: min(286px, calc(100vw - 56px)); }
    /* Nur der „Teilen“-Knopf im Kopf schrumpft aufs Icon – Knöpfe in Dialogen behalten ihren Text. */
    .kb-head .kb-btn span[b-c7z4kj5oqc] { display: none; }
    .kb-head .kb-btn[b-c7z4kj5oqc] { width: 40px; padding: 0; }
    .kb-avatars[b-c7z4kj5oqc] { display: none; }
    .kb-tiles[b-c7z4kj5oqc] { grid-template-columns: 1fr; }
    .kb-modal-acts[b-c7z4kj5oqc] { flex-wrap: wrap; }
    /* Abbrechen + Bestätigen gleich breit nebeneinander, gut zu treffen */
    .kb-modal-acts > .kb-btn[b-c7z4kj5oqc],
    .kb-modal-acts > .kb-btn-primary[b-c7z4kj5oqc],
    .kb-modal-acts > .kb-btn-danger:not(.is-ghost)[b-c7z4kj5oqc] { flex: 1 1 0; height: 44px; }
    .kb-modal-acts .kb-grow[b-c7z4kj5oqc] { display: none; }
}

/* Touch-Geräte: Hover-Effekte nicht „kleben“ lassen */
@media (hover: none) {
    .kb-tile:hover[b-c7z4kj5oqc] { transform: none; box-shadow: none; }
}
/* /Components/Pages/Categories.razor.rz.scp.css */
/* Kategorien – gleiche Optik wie /ionos-zones und /permissions, Gelb-Akzent wie das Menü. */

.ct-page[b-kvgctvgoh1] {
    --ct-ground: #f6f5f2;
    --ct-surface: #ffffff;
    --ct-border: #e4e2dc;
    --ct-divider: #efeee9;
    --ct-soft: #fbfaf8;
    --ct-text: #1d1d1f;
    --ct-text-2: #4a4a4f;
    --ct-muted: #6e6e73;
    --ct-accent: #1b6ec2;
    --ct-yellow: #ffd84d;
    --ct-yellow-soft: #fff6d1;
    --ct-ok: #1e8e3e;
    --ct-warn: #9a6700;
    --ct-err: #c5221f;
    color: var(--ct-text);
    background: var(--ct-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.ct-header[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ct-header h1[b-kvgctvgoh1] {
    margin: 0 4px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.ct-meta[b-kvgctvgoh1] {
    flex-grow: 1;
    color: var(--ct-muted);
    font-size: 14px;
    padding-top: 6px;
}

.ct-meta b[b-kvgctvgoh1] { color: var(--ct-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.ct-intro[b-kvgctvgoh1] {
    margin: -8px 0 0 0;
    color: var(--ct-muted);
    font-size: 14px;
    max-width: 760px;
}

/* ---------- Buttons ---------- */
.ct-btn[b-kvgctvgoh1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--ct-border);
    background: var(--ct-surface);
    color: var(--ct-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.ct-btn svg[b-kvgctvgoh1],
.ct-icon svg[b-kvgctvgoh1] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ct-btn:hover:not(:disabled)[b-kvgctvgoh1] { background: var(--ct-soft); }
.ct-btn.is-primary[b-kvgctvgoh1] { background: var(--ct-text); border-color: var(--ct-text); color: #fff; }
.ct-btn.is-primary:hover:not(:disabled)[b-kvgctvgoh1] { background: #000; }
.ct-btn.is-primary svg[b-kvgctvgoh1] { stroke: var(--ct-yellow); }
.ct-btn:disabled[b-kvgctvgoh1] { opacity: .5; cursor: default; }

.ct-btn-group[b-kvgctvgoh1] { display: inline-flex; }
.ct-btn-group .ct-btn:first-child[b-kvgctvgoh1] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ct-btn-group .ct-btn:last-child[b-kvgctvgoh1] { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }

.ct-link[b-kvgctvgoh1] {
    border: 0;
    background: transparent;
    color: var(--ct-accent);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 6px;
    cursor: pointer;
}

.ct-link:hover:not(:disabled)[b-kvgctvgoh1] { text-decoration: underline; }
.ct-link.is-muted[b-kvgctvgoh1] { color: var(--ct-muted); }
.ct-link.is-danger[b-kvgctvgoh1] { color: var(--ct-err); }
.ct-link:disabled[b-kvgctvgoh1] { opacity: .5; cursor: default; }

.ct-icon[b-kvgctvgoh1] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ct-muted);
    cursor: pointer;
}

.ct-icon:hover[b-kvgctvgoh1] { background: var(--ct-divider); color: var(--ct-text); }
.ct-icon.is-danger:hover[b-kvgctvgoh1] { background: #fdecea; color: var(--ct-err); }

.ct-btn:focus-visible[b-kvgctvgoh1],
.ct-link:focus-visible[b-kvgctvgoh1],
.ct-icon:focus-visible[b-kvgctvgoh1],
.ct-input:focus-visible[b-kvgctvgoh1] { outline: 2px solid var(--ct-accent); outline-offset: 2px; }

/* ---------- Hinweise ---------- */
.ct-alert[b-kvgctvgoh1],
.ct-confirm[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

.ct-alert span[b-kvgctvgoh1],
.ct-confirm span[b-kvgctvgoh1] { flex-grow: 1; }

.ct-alert.is-error[b-kvgctvgoh1] { background: #fdecea; color: var(--ct-err); border: 1px solid #f6c7c3; }
.ct-alert.is-ok[b-kvgctvgoh1] { background: #e8f5ec; color: var(--ct-ok); border: 1px solid #c3e5cd; }
.ct-confirm[b-kvgctvgoh1] { background: var(--ct-yellow-soft); border: 1px solid #f3e19a; color: var(--ct-text); }

.ct-alert button[b-kvgctvgoh1] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Karten ---------- */
.ct-card[b-kvgctvgoh1] {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    overflow: hidden;
}

.ct-card-head[b-kvgctvgoh1] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ct-divider);
}

.ct-card-head h2[b-kvgctvgoh1] { margin: 0; font-size: 16px; font-weight: 650; }
.ct-card-head small[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 13px; }

.ct-empty[b-kvgctvgoh1] {
    color: var(--ct-muted);
    padding: 28px;
    text-align: center;
    font-size: 14px;
}


.ct-btn.is-on[b-kvgctvgoh1] { background: var(--ct-yellow-soft); border-color: #f3e19a; }
.ct-btn.is-danger[b-kvgctvgoh1] { background: var(--ct-err); border-color: var(--ct-err); color: #fff; }
.ct-btn.is-danger:hover:not(:disabled)[b-kvgctvgoh1] { background: #a51b18; }
.ct-icon:disabled[b-kvgctvgoh1] { opacity: .5; cursor: default; }

.ct-input[b-kvgctvgoh1] {
    height: 36px;
    border: 1px solid var(--ct-border);
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    background: var(--ct-surface);
    color: var(--ct-text);
    min-width: 0;
    width: 100%;
}

.ct-input:focus-visible[b-kvgctvgoh1] { outline: 2px solid var(--ct-accent); outline-offset: 1px; }
.ct-icon-input[b-kvgctvgoh1] { width: 52px; flex: 0 0 52px; text-align: center; font-size: 17px; padding: 0 4px; }

/* ---------- Layout ---------- */
.ct-cols[b-kvgctvgoh1] { display: flex; gap: 18px; align-items: flex-start; }
.ct-list[b-kvgctvgoh1] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ct-card.is-drop[b-kvgctvgoh1] { outline: 2px dashed var(--ct-accent); outline-offset: 2px; }

.ct-new-group[b-kvgctvgoh1], .ct-rename[b-kvgctvgoh1], .ct-add-form[b-kvgctvgoh1] { display: flex; gap: 8px; align-items: center; }
.ct-new-group[b-kvgctvgoh1] { padding: 12px 14px; background: var(--ct-yellow-soft); border-color: #f3e19a; }
.ct-rename[b-kvgctvgoh1] { flex: 1; }
.ct-rename .ct-input[b-kvgctvgoh1] { height: 32px; }
.ct-add-form[b-kvgctvgoh1] { padding: 8px 14px 10px 44px; border-top: 1px solid var(--ct-divider); }

.ct-start[b-kvgctvgoh1] { padding: 20px 22px; }
.ct-start h2[b-kvgctvgoh1] { margin: 0 0 6px 0; font-size: 17px; }
.ct-start p[b-kvgctvgoh1] { margin: 0 0 10px 0; color: var(--ct-muted); font-size: 14px; }
.ct-start ul[b-kvgctvgoh1] { margin: 0 0 14px 0; padding-left: 0; list-style: none; font-size: 14px; display: flex; flex-direction: column; gap: 4px; color: var(--ct-text-2); }

/* ---------- Bereich ---------- */
.ct-gh[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 8px;
    background: var(--ct-soft);
    border-bottom: 1px solid var(--ct-divider);
    min-height: 52px;
}

.ct-card.is-collapsed .ct-gh[b-kvgctvgoh1] { border-bottom: 0; }
/* Offenes Bereichsmenü: Karte darf überlaufen (sonst schneidet overflow:hidden das Menü ab, v.a. eingeklappt oder bei wenigen Kategorien)
   und liegt über den folgenden Bereichen. Ecken des Kopfs selbst runden, weil die Karte sie dann nicht mehr abschneidet. */
.ct-card.is-menu-open[b-kvgctvgoh1] { overflow: visible; position: relative; z-index: 42; }
.ct-card.is-menu-open > .ct-gh:first-child[b-kvgctvgoh1] { border-radius: 13px 13px 0 0; }
.ct-card.is-menu-open.is-collapsed > .ct-gh:first-child[b-kvgctvgoh1] { border-radius: 13px; }
.ct-gh.is-overspent[b-kvgctvgoh1] { background: #fdecea; box-shadow: inset 3px 0 0 var(--ct-err); }
.ct-gh.is-overspent h2[b-kvgctvgoh1] { color: var(--ct-err); }

.ct-chev[b-kvgctvgoh1] {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ct-muted);
    padding: 0;
}

.ct-chev:hover[b-kvgctvgoh1] { background: var(--ct-divider); }
.ct-chev svg[b-kvgctvgoh1] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ct-gi[b-kvgctvgoh1] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: var(--ct-yellow-soft);
    display: grid;
    place-items: center;
    font-size: 15px;
}

.ct-gi.is-muted[b-kvgctvgoh1] { background: var(--ct-divider); color: var(--ct-muted); font-weight: 700; }

.ct-gh h2[b-kvgctvgoh1] { margin: 0; font-size: 16px; font-weight: 680; cursor: text; }
.ct-gh small[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 13px; }

.ct-sum[b-kvgctvgoh1] { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 14.5px; white-space: nowrap; text-align: right; }
.ct-sum.is-plain[b-kvgctvgoh1] { color: var(--ct-text-2); }
.ct-sum.is-neg[b-kvgctvgoh1] { color: var(--ct-err); }
.ct-gsums[b-kvgctvgoh1] { margin-left: auto; display: grid; grid-template-columns: 118px 112px 118px; gap: 8px; align-items: center; }
.ct-gh[b-kvgctvgoh1] { padding-right: 16px; }

.ct-grip[b-kvgctvgoh1] {
    color: #c7c5bd;
    font-size: 12px;
    letter-spacing: -2px;
    cursor: grab;
    user-select: none;
    width: 14px;
    text-align: center;
}

.ct-gh > .ct-grip[b-kvgctvgoh1] { padding: 6px 0; }

.ct-pill[b-kvgctvgoh1] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
}

.ct-pill.is-income[b-kvgctvgoh1] { background: #e8f5ec; color: var(--ct-ok); }
.ct-pill.is-muted[b-kvgctvgoh1] { background: var(--ct-divider); color: var(--ct-muted); }

.ct-menu-wrap[b-kvgctvgoh1] { position: relative; }
.ct-backdrop[b-kvgctvgoh1] { position: fixed; inset: 0; z-index: 40; }

.ct-menu[b-kvgctvgoh1] {
    position: absolute;
    right: 0;
    top: 34px;
    z-index: 41;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--ct-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.ct-menu button[b-kvgctvgoh1] {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--ct-text);
    cursor: pointer;
}

.ct-menu button:hover:not(:disabled)[b-kvgctvgoh1] { background: var(--ct-soft); }
.ct-menu button:disabled[b-kvgctvgoh1] { color: #b0aea6; cursor: default; }
.ct-menu button.is-danger[b-kvgctvgoh1] { color: var(--ct-err); }

/* ---------- Kategorien ---------- */
.ct-th[b-kvgctvgoh1],
.ct-row[b-kvgctvgoh1] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 118px 112px 118px;
    gap: 8px;
    align-items: center;
    padding: 0 16px 0 14px;
}

.ct-th[b-kvgctvgoh1] {
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8e8e93;
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--ct-divider);
}

.ct-row[b-kvgctvgoh1] {
    min-height: 44px;
    border-bottom: 1px solid #f2f1ec;
    font-size: 14.5px;
    cursor: pointer;
}

.ct-row:hover[b-kvgctvgoh1] { background: var(--ct-soft); }
.ct-row.is-sel[b-kvgctvgoh1] { background: var(--ct-yellow-soft); box-shadow: inset 3px 0 0 var(--ct-yellow); }
.ct-row.is-drop[b-kvgctvgoh1] { box-shadow: inset 0 2px 0 var(--ct-accent); }
.ct-row.is-dragging[b-kvgctvgoh1] { opacity: .45; }
.ct-row.is-hidden .ct-name span:first-of-type[b-kvgctvgoh1] { color: #9a9890; font-style: italic; }

.ct-name[b-kvgctvgoh1] { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ct-name > span:first-of-type[b-kvgctvgoh1] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-dot[b-kvgctvgoh1] { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; display: inline-block; }
.ct-dot.is-big[b-kvgctvgoh1] { width: 12px; height: 12px; flex-basis: 12px; }

.ct-num[b-kvgctvgoh1] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-count[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 13.5px; }
.ct-amt[b-kvgctvgoh1] { color: var(--ct-text); font-weight: 550; text-decoration: none; }
.ct-amt:hover[b-kvgctvgoh1] { text-decoration: underline; color: var(--ct-text); }
.ct-amt.is-pos[b-kvgctvgoh1], .ct-sum.is-pos[b-kvgctvgoh1] { color: var(--ct-ok); }
.ct-amt.is-zero[b-kvgctvgoh1], .ct-sum.is-zero[b-kvgctvgoh1] { color: #b0aea6; font-weight: 400; }

/* ---------- Budget ---------- */
.ct-assign[b-kvgctvgoh1] {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--ct-soft);
    padding: 0 8px;
    text-align: right;
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--ct-text);
}

.ct-assign:hover[b-kvgctvgoh1] { border-color: var(--ct-border); }
.ct-assign:focus[b-kvgctvgoh1] { outline: none; border-color: var(--ct-accent); background: #fff; box-shadow: 0 0 0 3px rgba(27, 110, 194, .15); }
.ct-assign.is-empty[b-kvgctvgoh1]::placeholder { color: #c7c5bd; }
.ct-na[b-kvgctvgoh1] { color: #b0aea6; font-size: 12.5px; }

.ct-avail[b-kvgctvgoh1] {
    display: inline-block;
    min-width: 64px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ct-avail.is-pos[b-kvgctvgoh1] { background: #e3f4e8; color: #17703a; }
.ct-avail.is-done[b-kvgctvgoh1] { background: var(--ct-divider); color: var(--ct-text-2); }
.ct-avail.is-zero[b-kvgctvgoh1] { background: transparent; color: #b0aea6; font-weight: 450; }
.ct-avail.is-neg[b-kvgctvgoh1] { background: #fdecea; color: var(--ct-err); }
.ct-avail-text.is-pos[b-kvgctvgoh1] { color: var(--ct-ok); }
button.ct-avail[b-kvgctvgoh1] { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
button.ct-avail:hover:not(:disabled)[b-kvgctvgoh1], button.ct-avail.is-open[b-kvgctvgoh1] { box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); }
button.ct-avail.is-zero:hover:not(:disabled)[b-kvgctvgoh1], button.ct-avail.is-zero.is-open[b-kvgctvgoh1] { background: var(--ct-divider); }
button.ct-avail:disabled[b-kvgctvgoh1] { cursor: default; }
.ct-avail-menu[b-kvgctvgoh1] { position: fixed; top: 0; right: 0; width: 320px; max-width: calc(100vw - 16px); }
.ct-avail-menu-head[b-kvgctvgoh1] { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px 6px; border-bottom: 1px solid var(--ct-divider); margin-bottom: 4px; font-size: 13px; color: var(--ct-muted); }
.ct-avail-menu-head > b[b-kvgctvgoh1] { color: var(--ct-text); font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-avail-menu-head span[b-kvgctvgoh1] { white-space: nowrap; }
.ct-avail-menu button[b-kvgctvgoh1] { white-space: normal; }
.ct-avail-text.is-neg[b-kvgctvgoh1] { color: var(--ct-err); }

.ct-rta[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--ct-border);
    border-left: 5px solid var(--ct-ok);
    border-radius: 14px;
    padding: 14px 18px;
    /* Bleibt beim Scrollen unter der oberen Leiste (3.5rem) stehen. */
    position: sticky;
    top: calc(3.5rem + 8px);
    z-index: 5;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .25);
}

.ct-rta.is-zero[b-kvgctvgoh1] { border-left-color: #c7c5bd; }
.ct-rta.is-neg[b-kvgctvgoh1] { border-left-color: var(--ct-err); background: #fffafa; }
.ct-rta-main[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1 1 260px; }
.ct-rta-main small[b-kvgctvgoh1] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.ct-rta-main b[b-kvgctvgoh1] { font-size: 26px; font-weight: 750; letter-spacing: -.3px; font-variant-numeric: tabular-nums; color: var(--ct-ok); }
.ct-rta.is-zero .ct-rta-main b[b-kvgctvgoh1] { color: var(--ct-text-2); }
.ct-rta.is-neg .ct-rta-main b[b-kvgctvgoh1] { color: var(--ct-err); }
.ct-rta-text[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 13.5px; }
.ct-rta-parts[b-kvgctvgoh1] { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; flex: 2 1 380px; }
.ct-rta-parts div[b-kvgctvgoh1] { display: flex; flex-direction: column; }
.ct-rta-parts dt[b-kvgctvgoh1] { font-weight: 500; color: var(--ct-muted); }
.ct-rta-parts dd[b-kvgctvgoh1] { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ct-text-2); }
.ct-rta.is-plan[b-kvgctvgoh1] { border-left-color: #d9a400; background: #fffdf5; }
.ct-rta.is-plan .ct-rta-main b[b-kvgctvgoh1] { color: var(--ct-warn); }
.ct-rta-parts dd .ct-link[b-kvgctvgoh1] { padding: 0; font-weight: 600; font-size: inherit; }
.ct-rta-hint[b-kvgctvgoh1] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--ct-border);
    font-size: 13px;
    color: var(--ct-text-2);
}

/* ---------- Startguthaben ---------- */
.ct-sb[b-kvgctvgoh1] {
    background: #fff;
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ct-sb-head[b-kvgctvgoh1] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ct-sb-head h2[b-kvgctvgoh1] { margin: 0 0 2px 0; font-size: 16px; font-weight: 650; }
.ct-sb-head p[b-kvgctvgoh1] { margin: 0; font-size: 13px; color: var(--ct-muted); max-width: 720px; }
.ct-sb-head .ct-link[b-kvgctvgoh1] { font-size: 22px; line-height: 1; padding: 0 4px; }
.ct-sb-empty[b-kvgctvgoh1] { margin: 0; font-size: 13.5px; color: var(--ct-muted); }
.ct-sb-list[b-kvgctvgoh1] { display: flex; flex-direction: column; border-top: 1px solid var(--ct-divider); }
.ct-sb-row[b-kvgctvgoh1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 150px;
    align-items: center;
    gap: 6px 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ct-divider);
}
.ct-sb-name[b-kvgctvgoh1] { display: flex; flex-direction: column; min-width: 0; }
.ct-sb-name b[b-kvgctvgoh1] { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-sb-name small[b-kvgctvgoh1], .ct-sb-suggest small[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 12px; }
.ct-sb-suggest[b-kvgctvgoh1] { text-align: right; }
.ct-sb-input[b-kvgctvgoh1] { width: 100%; text-align: right; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.ct-sb-chip[b-kvgctvgoh1] {
    border: 1px solid #f3e19a;
    background: var(--ct-yellow-soft);
    color: var(--ct-text);
    border-radius: 999px;
    padding: 3px 10px;
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    white-space: nowrap;
}
.ct-sb-chip:hover[b-kvgctvgoh1] { background: #ffefb0; }
.ct-sb-chip:focus-visible[b-kvgctvgoh1] { outline: 2px solid var(--ct-accent); outline-offset: 2px; }
.ct-sb-foot[b-kvgctvgoh1] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ct-sb-total[b-kvgctvgoh1] { margin-right: auto; font-size: 13.5px; color: var(--ct-muted); }
.ct-sb-total b[b-kvgctvgoh1] { color: var(--ct-text); font-variant-numeric: tabular-nums; margin-left: 4px; }
@media (max-width: 640.98px) {
    .ct-sb-row[b-kvgctvgoh1] { grid-template-columns: minmax(0, 1fr) 130px; }
    .ct-sb-suggest[b-kvgctvgoh1] { grid-column: 1; grid-row: 2; text-align: left; }
}

.ct-fill-menu[b-kvgctvgoh1] { min-width: 270px; }
.ct-fill-menu button[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 1px; }
.ct-fill-menu b[b-kvgctvgoh1] { font-weight: 550; }
.ct-fill-menu small[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 12px; }
.ct-fill-menu button.is-danger small[b-kvgctvgoh1] { color: var(--ct-err); opacity: .75; }
.ct-fill-menu button.is-danger:hover:not(:disabled)[b-kvgctvgoh1] { background: #fdecea; }
.ct-fill-menu button.is-danger:disabled small[b-kvgctvgoh1] { color: #b0aea6; opacity: 1; }
.ct-menu-sep[b-kvgctvgoh1] { height: 1px; background: var(--ct-divider); margin: 4px 6px; }
.ct-menu-confirm[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; max-width: 290px; }
.ct-menu-confirm p[b-kvgctvgoh1] { margin: 0; font-size: 13px; color: var(--ct-text-2); }
.ct-menu-confirm div[b-kvgctvgoh1] { display: flex; gap: 6px; }
.ct-fill-menu .ct-menu-confirm .ct-btn[b-kvgctvgoh1] { flex-direction: row; text-align: center; padding: 0 10px; color: var(--ct-text); border: 1px solid var(--ct-border); background: var(--ct-surface); }
.ct-fill-menu .ct-menu-confirm .ct-btn.is-danger[b-kvgctvgoh1] { background: var(--ct-err); border-color: var(--ct-err); }
.ct-fill-menu .ct-menu-confirm .ct-btn.is-danger[b-kvgctvgoh1] { color: #fff; }
.ct-fill-menu .ct-menu-confirm .ct-btn.is-danger:hover:not(:disabled)[b-kvgctvgoh1] { background: #a51b18; }

.ct-quick[b-kvgctvgoh1] { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip.is-reset[b-kvgctvgoh1] { border-style: dashed; }

/* Sparziele */
.ct-goal[b-kvgctvgoh1] { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.ct-goal svg[b-kvgctvgoh1] { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ct-goal.is-ok[b-kvgctvgoh1] { background: #e3f4e8; color: #17703a; }
.ct-goal.is-under[b-kvgctvgoh1] { background: var(--ct-yellow-soft); color: var(--ct-warn); }
.ct-goal.is-muted[b-kvgctvgoh1] { background: var(--ct-divider); color: var(--ct-muted); }
.ct-goal-card[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--ct-border); border-radius: 10px; background: var(--ct-soft); padding: 10px 12px; }
.ct-goal-head[b-kvgctvgoh1] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ct-goal-head b[b-kvgctvgoh1] { font-size: 16px; font-variant-numeric: tabular-nums; }
.ct-goal-head span[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 13px; }
.ct-bar[b-kvgctvgoh1] { height: 8px; border-radius: 999px; background: var(--ct-divider); overflow: hidden; }
.ct-bar i[b-kvgctvgoh1] { display: block; height: 100%; border-radius: 999px; background: var(--ct-yellow); }
.ct-bar i.is-full[b-kvgctvgoh1] { background: var(--ct-ok); }
.ct-goal-act[b-kvgctvgoh1] { display: flex; gap: 8px; align-items: center; }
.ct-goal-act .ct-link[b-kvgctvgoh1] { padding: 2px 0; margin-right: 8px; }
.ct-goal-act.is-card[b-kvgctvgoh1] { flex-wrap: wrap; margin-top: 2px; }
.ct-btn.is-sm[b-kvgctvgoh1] { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 5px; }
.ct-btn.is-sm svg[b-kvgctvgoh1] { width: 14px; height: 14px; }
.ct-btn.is-danger-soft[b-kvgctvgoh1] { color: var(--ct-err); }
.ct-btn.is-danger-soft:hover:not(:disabled)[b-kvgctvgoh1] { background: #fdecea; border-color: #f6c7c3; }
.ct-goal-all[b-kvgctvgoh1] { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--ct-accent); font-size: 13px; font-weight: 600; text-decoration: none; padding-top: 7px; border-top: 1px solid var(--ct-border); width: 100%; }
.ct-goal-all svg[b-kvgctvgoh1] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ct-goal-all:hover[b-kvgctvgoh1] { text-decoration: none; }
.ct-goal-all:hover svg[b-kvgctvgoh1] { transform: translateX(3px); }
.ct-goal-all:focus-visible[b-kvgctvgoh1] { outline: 2px solid var(--ct-accent); outline-offset: 2px; border-radius: 4px; }
.ct-all-tx[b-kvgctvgoh1] { justify-content: center; text-decoration: none; }
.ct-goal-empty[b-kvgctvgoh1] { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border: 1px dashed var(--ct-border); border-radius: 10px; background: var(--ct-soft); padding: 12px; }
.ct-goal-form[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--ct-border); border-radius: 10px; background: var(--ct-soft); padding: 10px 12px; }
.ct-goal-form label[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.ct-goal-form small[b-kvgctvgoh1] { color: var(--ct-muted); font-size: 12px; }
.ct-goal-row[b-kvgctvgoh1] { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.ct-goal-row.is-single[b-kvgctvgoh1] { grid-template-columns: 1fr; }
.ct-goal-kind[b-kvgctvgoh1] { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-goal-kind button[b-kvgctvgoh1] { border: 1px solid var(--ct-border); background: var(--ct-surface); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--ct-text-2); cursor: pointer; }
.ct-goal-kind button:hover[b-kvgctvgoh1] { border-color: var(--ct-accent); }
.ct-goal-kind button.is-on[b-kvgctvgoh1] { background: var(--ct-text); border-color: var(--ct-text); color: var(--ct-surface); font-weight: 550; }
.ct-chip[b-kvgctvgoh1] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border: 1px solid var(--ct-border);
    background: var(--ct-soft);
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ct-muted);
}

.ct-chip b[b-kvgctvgoh1] { font-size: 13.5px; color: var(--ct-text); font-variant-numeric: tabular-nums; }
.ct-chip:hover:not(:disabled)[b-kvgctvgoh1] { border-color: var(--ct-accent); }
.ct-chip.is-on[b-kvgctvgoh1] { border-color: var(--ct-accent); background: #eef4fb; }
.ct-chip:disabled[b-kvgctvgoh1] { opacity: .5; cursor: default; }

.ct-add[b-kvgctvgoh1] {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 9px 16px 10px 44px;
    color: var(--ct-accent);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ct-add:hover[b-kvgctvgoh1] { background: var(--ct-soft); }
.ct-add.is-drop[b-kvgctvgoh1] { box-shadow: inset 0 2px 0 var(--ct-accent); }

.ct-confirm[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fdecea;
    border-bottom: 1px solid #f6c7c3;
    font-size: 13.5px;
    flex-wrap: wrap;
}

.ct-confirm span[b-kvgctvgoh1] { flex: 1 1 260px; }
.ct-confirm.is-stacked[b-kvgctvgoh1] { flex-direction: column; align-items: stretch; border: 1px solid #f6c7c3; border-radius: 10px; }
.ct-confirm.is-stacked div[b-kvgctvgoh1] { display: flex; gap: 8px; }

.ct-unc[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px dashed #d6d4ce;
    border-radius: 14px;
    font-size: 14px;
    color: var(--ct-text-2);
    text-decoration: none;
}

.ct-unc:hover[b-kvgctvgoh1] { background: var(--ct-soft); color: var(--ct-text-2); }
.ct-unc b[b-kvgctvgoh1] { color: var(--ct-text); }
.ct-unc-go[b-kvgctvgoh1] { margin-left: auto; }

/* ---------- Detail ---------- */
.ct-det[b-kvgctvgoh1] {
    width: 320px;
    flex: 0 0 320px;
    background: #fff;
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    /* Unter dem stehenbleibenden „Zu verteilen“ (Höhe setzt wwwroot/js/sticky-rta.js). */
    top: calc(3.5rem + var(--ct-rta-h, 0px) + 20px);
}

.ct-dh[b-kvgctvgoh1] { display: flex; align-items: center; gap: 9px; }
.ct-dh h3[b-kvgctvgoh1] { margin: 0; font-size: 18px; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }

.ct-stats[b-kvgctvgoh1] { display: flex; gap: 8px; }
.ct-stats div[b-kvgctvgoh1] { flex: 1; min-width: 0; background: var(--ct-soft); border: 1px solid var(--ct-divider); border-radius: 10px; padding: 7px 9px; }
.ct-stats small[b-kvgctvgoh1] { display: block; color: #8e8e93; font-size: 11.5px; }
.ct-stats b[b-kvgctvgoh1] { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-stats b.is-pos[b-kvgctvgoh1] { color: var(--ct-ok); }

.ct-form[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 12px; }
.ct-field[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.ct-field > span[b-kvgctvgoh1] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }

.ct-seg[b-kvgctvgoh1] { display: flex; background: #f2f1ec; border-radius: 10px; padding: 3px; }
.ct-seg button[b-kvgctvgoh1] { flex: 1; border: 0; background: transparent; border-radius: 8px; height: 30px; font-size: 14px; color: var(--ct-muted); cursor: pointer; }
.ct-seg button.is-on[b-kvgctvgoh1] { background: #fff; color: var(--ct-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.ct-swatches[b-kvgctvgoh1] { display: flex; gap: 7px; flex-wrap: wrap; }
.ct-swatch[b-kvgctvgoh1] { width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.ct-swatch.is-on[b-kvgctvgoh1] { outline: 2px solid var(--ct-text); outline-offset: 2px; }

.ct-shift[b-kvgctvgoh1] { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ct-text); }
.ct-shift-check[b-kvgctvgoh1] { display: flex; align-items: center; gap: 7px; cursor: pointer; flex: 0 1 auto; min-width: 0; }
.ct-shift-check input[b-kvgctvgoh1] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ct-accent); }
.ct-shift .ct-day[b-kvgctvgoh1] { width: 58px; height: 32px; padding: 0 8px; text-align: right; flex: none; }
.ct-shift .ct-day:disabled[b-kvgctvgoh1] { opacity: .5; }
.ct-shift-dot[b-kvgctvgoh1] { margin-left: -4px; }

.ct-hint[b-kvgctvgoh1] { margin: 0; color: var(--ct-muted); font-size: 13px; }
.ct-hint a[b-kvgctvgoh1] { color: var(--ct-accent); }

.ct-rules[b-kvgctvgoh1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.ct-rules li[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ct-border);
    border-radius: 10px;
    padding: 6px 6px 6px 10px;
    background: var(--ct-soft);
    font-size: 13.5px;
    min-width: 0;
}

.ct-rules em[b-kvgctvgoh1] { font-style: normal; color: var(--ct-muted); white-space: nowrap; }
.ct-rules b[b-kvgctvgoh1] { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.ct-rules small[b-kvgctvgoh1] { margin-left: auto; color: var(--ct-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.ct-rule-x[b-kvgctvgoh1] {
    margin-left: auto;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #9a9890;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.ct-rules small + .ct-rule-x[b-kvgctvgoh1] { margin-left: 0; }
.ct-rule-x:hover:not(:disabled)[b-kvgctvgoh1] { background: #fdecea; color: var(--ct-err); }
.ct-rule-new[b-kvgctvgoh1] { align-self: flex-start; padding: 2px 0; }
.ct-rule-add[b-kvgctvgoh1] { display: flex; flex-direction: column; gap: 6px; }
.ct-rule-add div[b-kvgctvgoh1] { display: flex; gap: 6px; }
.ct-rule-count[b-kvgctvgoh1] { font-size: 11.5px; color: var(--ct-muted); background: var(--ct-divider); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.ct-unc-sugg[b-kvgctvgoh1] { color: var(--ct-warn); font-weight: 600; margin-left: 4px; }
.ct-dact[b-kvgctvgoh1] { display: flex; gap: 8px; align-items: center; }
.ct-dact .ct-link[b-kvgctvgoh1] { margin-left: auto; }

/* ---------- Kontostände ---------- */
.ct-kb[b-kvgctvgoh1] {
    background: #fff;
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    overflow: hidden;
}
.ct-kb-head[b-kvgctvgoh1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    background: var(--ct-soft);
}
.ct-kb-head h2[b-kvgctvgoh1] { margin: 0; font-size: 16px; font-weight: 650; }
.ct-kb-mini[b-kvgctvgoh1] { flex: 1; color: var(--ct-muted); font-size: 13.5px; }
.ct-kb-mini b[b-kvgctvgoh1] { color: var(--ct-text); font-variant-numeric: tabular-nums; margin-left: 4px; }
.ct-kb-chip[b-kvgctvgoh1] { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ct-kb-chip.is-ok[b-kvgctvgoh1] { background: #e8f5ec; color: var(--ct-ok); }
.ct-kb-chip.is-warn[b-kvgctvgoh1] { background: var(--ct-yellow-soft); color: var(--ct-warn); }

/* Kopf: Summe – Verteilung – Abgleich */
.ct-kb-top[b-kvgctvgoh1] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 14px 28px;
    align-items: center;
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid var(--ct-divider);
}
.ct-kb-toggle[b-kvgctvgoh1] { align-self: start; }
.ct-kb-sumbox[b-kvgctvgoh1] { display: flex; flex-direction: column; }
.ct-kb-sumbox small[b-kvgctvgoh1] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: var(--ct-muted); }
.ct-kb-sumbox b[b-kvgctvgoh1] { font-size: 30px; font-weight: 750; letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-kb-mix[b-kvgctvgoh1] { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-kb-stack[b-kvgctvgoh1] { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; background: var(--ct-divider); }
.ct-kb-stack i[b-kvgctvgoh1] { display: block; min-width: 4px; }
.ct-kb-legend[b-kvgctvgoh1] { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--ct-muted); }
.ct-kb-legend span[b-kvgctvgoh1] { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ct-kb-legend i[b-kvgctvgoh1] { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ct-kb-legend b[b-kvgctvgoh1] { color: var(--ct-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-kb-stack .is-bank[b-kvgctvgoh1], .ct-kb-legend i.is-bank[b-kvgctvgoh1] { background: var(--ct-accent); }
.ct-kb-stack .is-offline[b-kvgctvgoh1], .ct-kb-legend i.is-offline[b-kvgctvgoh1] { background: #e0a400; }
.ct-kb-stack .is-card[b-kvgctvgoh1], .ct-kb-legend i.is-card[b-kvgctvgoh1] { background: #c9b6f0; }
.ct-kb-badge[b-kvgctvgoh1] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; }
.ct-kb-badge b[b-kvgctvgoh1] { font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-kb-badge.is-ok[b-kvgctvgoh1] { background: #e8f5ec; color: var(--ct-ok); border: 1px solid #c3e5cd; }
.ct-kb-badge.is-warn[b-kvgctvgoh1] { background: var(--ct-yellow-soft); color: var(--ct-warn); border: 1px solid #f1dd8f; cursor: help; }

/* Konten nach Art in Spalten */
.ct-kb-cols[b-kvgctvgoh1] { display: grid; }
.ct-kb-col[b-kvgctvgoh1] { min-width: 0; padding: 12px 6px 10px; border-right: 1px solid var(--ct-divider); }
.ct-kb-col:last-child[b-kvgctvgoh1] { border-right: 0; }
.ct-kb-col h3[b-kvgctvgoh1] {
    margin: 0 12px 4px; display: flex; justify-content: space-between; gap: 10px;
    font-size: 12px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: var(--ct-muted);
}
.ct-kb-col h3 span[b-kvgctvgoh1] { color: var(--ct-text-2); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.ct-kb-row[b-kvgctvgoh1] { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 9px; }
.ct-kb-row:hover[b-kvgctvgoh1] { background: var(--ct-soft); }
.ct-kb-ic[b-kvgctvgoh1] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}
.ct-kb-ic svg[b-kvgctvgoh1] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-kb-ic.is-bank[b-kvgctvgoh1] { background: #e8f1fb; color: var(--ct-accent); }
.ct-kb-ic.is-offline[b-kvgctvgoh1] { background: var(--ct-yellow-soft); color: var(--ct-warn); }
.ct-kb-ic.is-card[b-kvgctvgoh1] { background: #f3eefc; color: #6b3fc4; }
.ct-kb-emoji[b-kvgctvgoh1] { font-size: 15px; line-height: 1; }
.ct-kb-info[b-kvgctvgoh1] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ct-kb-info b[b-kvgctvgoh1] { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-kb-info small[b-kvgctvgoh1] { font-size: 12px; color: var(--ct-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-kb-dot[b-kvgctvgoh1] { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.ct-kb-dot.is-fresh[b-kvgctvgoh1] { background: #34a853; }
.ct-kb-dot.is-stale[b-kvgctvgoh1] { background: #e0a400; }
.ct-kb-dot.is-none[b-kvgctvgoh1] { background: #c7c7cc; }
.ct-kb-amt[b-kvgctvgoh1] { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ct-kb-amt.is-neg[b-kvgctvgoh1], .ct-kb-sumbox b.is-neg[b-kvgctvgoh1], .ct-kb-mini b.is-neg[b-kvgctvgoh1], .ct-kb-legend b.is-neg[b-kvgctvgoh1], .ct-kb-col h3 span.is-neg[b-kvgctvgoh1] { color: var(--ct-err); }

@media (max-width: 1100px) {
    .ct-cols[b-kvgctvgoh1] { flex-direction: column-reverse; align-items: stretch; }
    .ct-det[b-kvgctvgoh1] { width: 100%; flex-basis: auto; position: static; }
    .ct-kb-top[b-kvgctvgoh1] { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ct-kb-top .ct-kb-badge[b-kvgctvgoh1] { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .ct-kb-toggle[b-kvgctvgoh1] { grid-column: 3; grid-row: 1; }
    .ct-kb-cols[b-kvgctvgoh1] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ct-kb-col:nth-child(2n)[b-kvgctvgoh1] { border-right: 0; }
    .ct-kb-col:nth-child(n+3)[b-kvgctvgoh1] { border-top: 1px solid var(--ct-divider); }
}

@media (max-width: 640.98px) {
    .ct-page[b-kvgctvgoh1] {
        margin: -1.1rem -1.5rem 0 -1.5rem;
        padding: 18px 16px 24px 16px;
    }

    /* Handy: unter der stehenbleibenden Menü-Leiste, kompakter damit genug Platz zum Scrollen bleibt. */
    .ct-rta[b-kvgctvgoh1] { top: calc(3.5rem + 6px); gap: 8px 14px; padding: 10px 14px; }
    .ct-rta-main b[b-kvgctvgoh1] { font-size: 22px; }
    .ct-rta-text[b-kvgctvgoh1], .ct-rta-hint[b-kvgctvgoh1] { display: none; }

    .ct-meta[b-kvgctvgoh1] { flex-basis: 100%; order: 1; padding-top: 0; }
    .ct-header .ct-btn[b-kvgctvgoh1] { order: 2; }
    /* Kategorien: Name (mit Ziel darunter) | Zugewiesen | Verfügbar. Ziehen zum Sortieren gibt es auf dem Handy nicht. */
    .ct-th[b-kvgctvgoh1], .ct-row[b-kvgctvgoh1] { grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 8px; padding-left: 14px; padding-right: 10px; }
    .ct-row[b-kvgctvgoh1] { min-height: 52px; padding-top: 7px; padding-bottom: 7px; }
    .ct-row > .ct-grip[b-kvgctvgoh1], .ct-th > span:first-child[b-kvgctvgoh1] { display: none; }
    .ct-col-act[b-kvgctvgoh1] { display: none; }
    .ct-name[b-kvgctvgoh1] { flex-wrap: wrap; row-gap: 3px; column-gap: 6px; padding-left: 17px; }
    .ct-name > .ct-dot[b-kvgctvgoh1] { margin-left: -17px; margin-right: -2px; }
    .ct-name > span:first-of-type[b-kvgctvgoh1] { flex: 1 1 calc(100% - 10px); min-width: 0; }
    /* „ausgeblendet“ zeigt schon die graue, kursive Schrift; Regelzahl steht im Detail. */
    .ct-name .ct-pill.is-muted[b-kvgctvgoh1], .ct-rule-count[b-kvgctvgoh1] { display: none; }
    .ct-assign[b-kvgctvgoh1] { height: 34px; font-size: 15px; }
    .ct-avail[b-kvgctvgoh1] { min-width: 0; max-width: 100%; padding: 4px 8px; }
    /* Einnahmen: statt „Einnahme“ den Betrag des Monats zeigen. */
    .ct-row:has(.ct-na) .ct-na[b-kvgctvgoh1] { display: none; }
    .ct-row:has(.ct-na) .ct-col-act[b-kvgctvgoh1] { display: block; }

    /* Bereichskopf: Name + Menü oben, Summen darunter rechtsbündig zu den Spalten. */
    .ct-gh[b-kvgctvgoh1] { flex-wrap: wrap; row-gap: 2px; padding-left: 10px; padding-right: 10px; }
    .ct-gh > .ct-grip[b-kvgctvgoh1] { display: none; }
    .ct-gh small[b-kvgctvgoh1] { display: none; }
    .ct-gh h2[b-kvgctvgoh1] { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ct-gsums[b-kvgctvgoh1] { flex: 1 1 100%; grid-template-columns: 88px 88px; justify-content: end; }
    .ct-gsums > :nth-child(2)[b-kvgctvgoh1] { display: none; }
    .ct-card:has(.ct-pill.is-income) .ct-gsums > :nth-child(1)[b-kvgctvgoh1] { display: none; }
    .ct-card:has(.ct-pill.is-income) .ct-gsums > :nth-child(2)[b-kvgctvgoh1] { display: block; }

    /* Details als Vollbild-Blatt */
    .ct-det[b-kvgctvgoh1] {
        position: fixed;
        inset: 0;
        z-index: 1040;
        width: auto;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: ct-sheet-in-b-kvgctvgoh1 .18s ease-out;
    }
    .ct-dh[b-kvgctvgoh1] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        margin: 0 -16px;
        padding: 12px 10px 10px 16px;
        border-bottom: 1px solid var(--ct-divider);
    }
    .ct-dh .ct-icon[b-kvgctvgoh1] { width: 40px; height: 40px; }
    .ct-new-group[b-kvgctvgoh1] { flex-wrap: wrap; }
    .ct-kb-head[b-kvgctvgoh1] { flex-wrap: wrap; }
    .ct-kb-head h2[b-kvgctvgoh1] { flex: 1; }
    .ct-kb-mini[b-kvgctvgoh1] { flex: 0 1 auto; }
    .ct-kb-top[b-kvgctvgoh1] { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 14px 14px 16px; }
    .ct-kb-top .ct-kb-mix[b-kvgctvgoh1] { grid-column: 1 / -1; grid-row: 2; }
    .ct-kb-top .ct-kb-badge[b-kvgctvgoh1] { grid-row: 3; }
    .ct-kb-toggle[b-kvgctvgoh1] { grid-column: 2; }
    .ct-kb-sumbox b[b-kvgctvgoh1] { font-size: 26px; }
    .ct-kb-cols[b-kvgctvgoh1] { grid-template-columns: 1fr !important; }
    .ct-kb-col[b-kvgctvgoh1] { border-right: 0; border-bottom: 1px solid var(--ct-divider); }
    .ct-kb-col:last-child[b-kvgctvgoh1] { border-bottom: 0; }
    .ct-kb-col:nth-child(n+3)[b-kvgctvgoh1] { border-top: 0; }
}

@keyframes ct-sheet-in-b-kvgctvgoh1 {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (max-width: 640.98px) {
    /* Ziehen zum Sortieren gibt es auf dem Handy nicht – Einleitung ausblenden, spart Platz. */
    .ct-intro[b-kvgctvgoh1] { display: none; }
}

.ct-rta-more[b-kvgctvgoh1] { display: none; }

/* Handy: „Zu verteilen“ als kompakter Kasten – Betrag + „Budget füllen“, Aufschlüsselung nur auf Wunsch. */
@media (max-width: 640.98px) {
    .ct-rta[b-kvgctvgoh1] { flex-wrap: wrap; align-items: center; }
    .ct-rta-main[b-kvgctvgoh1] { flex: 1 1 0; min-width: 0; }
    .ct-rta-main b[b-kvgctvgoh1] { white-space: nowrap; line-height: 1.15; }
    .ct-rta-more[b-kvgctvgoh1] { display: block; align-self: flex-start; padding: 2px 0 0; font-size: 13px; }
    .ct-rta-parts:not(.is-open)[b-kvgctvgoh1] { display: none; }
    .ct-rta-parts[b-kvgctvgoh1] { flex: 1 1 100%; gap: 6px 16px; }
}
/* /Components/Pages/DebouncedInput.razor.rz.scp.css */
.di-input[b-1qajvgmzgw] {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    width: 70px;
    font-size: 14px;
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
}

.di-spin[b-1qajvgmzgw] {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--tx-border, #e4e2dc);
    border-top-color: var(--tx-accent, #1b6ec2);
    opacity: 0;
    transition: opacity .15s;
}

.di-spin.is-on[b-1qajvgmzgw] { opacity: 1; animation: di-rotate-b-1qajvgmzgw .7s linear infinite; }

@keyframes di-rotate-b-1qajvgmzgw { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .di-spin.is-on[b-1qajvgmzgw] { animation-duration: 2s; }
}

.di-sr[b-1qajvgmzgw] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* /Components/Pages/Debts.razor.rz.scp.css */
/* Schulden – gleiche Optik wie /goals (Sparziele). */

.sd-page[b-0pore0oz8v] {
    --sd-ground: #f6f5f2;
    --sd-surface: #ffffff;
    --sd-border: #e4e2dc;
    --sd-divider: #efeee9;
    --sd-soft: #fbfaf8;
    --sd-text: #1d1d1f;
    --sd-text-2: #4a4a4f;
    --sd-muted: #6e6e73;
    --sd-accent: #1b6ec2;
    --sd-yellow: #ffd84d;
    --sd-yellow-soft: #fff6d1;
    --sd-ok: #1e8e3e;
    --sd-warn: #9a6700;
    --sd-err: #c5221f;
    color: var(--sd-text);
    background: var(--sd-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.sd-header[b-0pore0oz8v] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-header h1[b-0pore0oz8v] { margin: 0 4px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.3px; }
.sd-meta[b-0pore0oz8v] { flex-grow: 1; color: var(--sd-muted); font-size: 14px; padding-top: 6px; }
.sd-intro[b-0pore0oz8v] { margin: -8px 0 0 0; color: var(--sd-muted); font-size: 14px; max-width: 780px; }

/* ---------- Buttons / Eingaben ---------- */
.sd-search[b-0pore0oz8v] {
    display: flex; align-items: center; gap: 8px; height: 36px; max-width: 360px; margin: 0 0 12px 0;
    border: 1px solid var(--sd-border); border-radius: 10px; padding: 0 10px; background: var(--sd-surface);
}
.sd-search:focus-within[b-0pore0oz8v] { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.sd-search svg[b-0pore0oz8v] { width: 16px; height: 16px; fill: none; stroke: var(--sd-muted); stroke-width: 1.8; stroke-linecap: round; flex: 0 0 16px; }
.sd-search input[b-0pore0oz8v] { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; color: var(--sd-text); font-family: inherit; }

.sd-btn[b-0pore0oz8v] {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--sd-border); background: var(--sd-surface); color: var(--sd-text);
    font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.sd-btn svg[b-0pore0oz8v], .sd-icon svg[b-0pore0oz8v] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-btn:hover:not(:disabled)[b-0pore0oz8v] { background: var(--sd-soft); }
.sd-btn.is-primary[b-0pore0oz8v] { background: var(--sd-text); border-color: var(--sd-text); color: #fff; }
.sd-btn.is-primary:hover:not(:disabled)[b-0pore0oz8v] { background: #000; }
.sd-btn.is-primary svg[b-0pore0oz8v] { stroke: var(--sd-yellow); }
.sd-btn.is-small[b-0pore0oz8v] { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.sd-btn:disabled[b-0pore0oz8v] { opacity: .5; cursor: default; }

.sd-link[b-0pore0oz8v] { border: 0; background: transparent; color: var(--sd-accent); font-size: 14px; font-weight: 500; padding: 4px 6px; cursor: pointer; text-decoration: none; }
.sd-link:hover:not(:disabled)[b-0pore0oz8v] { text-decoration: underline; }
.sd-link.is-danger[b-0pore0oz8v] { color: var(--sd-err); margin-left: auto; }
.sd-link:disabled[b-0pore0oz8v] { opacity: .5; cursor: default; }

.sd-icon[b-0pore0oz8v] { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--sd-muted); cursor: pointer; }
.sd-icon:hover[b-0pore0oz8v] { background: var(--sd-divider); }

.sd-input[b-0pore0oz8v] {
    height: 36px; border: 1px solid var(--sd-border); border-radius: 10px; padding: 0 10px; font-size: 14px;
    background: #fff; color: var(--sd-text); width: 100%; box-sizing: border-box; font-family: inherit;
}
.sd-input:focus-visible[b-0pore0oz8v] { outline: 2px solid var(--sd-accent); outline-offset: 2px; }

.sd-alert[b-0pore0oz8v] { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.sd-alert span[b-0pore0oz8v] { flex-grow: 1; }
.sd-alert.is-error[b-0pore0oz8v] { background: #fdecea; color: var(--sd-err); border: 1px solid #f6c7c3; }
.sd-alert.is-ok[b-0pore0oz8v] { background: #e8f5ec; color: var(--sd-ok); border: 1px solid #c3e5cd; }
.sd-alert button[b-0pore0oz8v] { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }

/* ---------- Kennzahlen ---------- */
.sd-tiles[b-0pore0oz8v] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sd-tiles > div[b-0pore0oz8v] { background: #fff; border: 1px solid var(--sd-border); border-radius: 14px; padding: 12px 16px; }
.sd-tiles small[b-0pore0oz8v] { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.sd-tiles b[b-0pore0oz8v] { display: block; margin-top: 3px; font-size: 22px; font-weight: 720; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.sd-tiles b span[b-0pore0oz8v] { font-size: 13px; font-weight: 500; color: var(--sd-muted); letter-spacing: 0; }
.sd-tiles .is-warn b[b-0pore0oz8v] { color: var(--sd-warn); }
.sd-tiles .is-ok b[b-0pore0oz8v] { color: var(--sd-ok); }
.sd-tiles .is-owe b[b-0pore0oz8v] { color: var(--sd-err); }
.sd-tiles .is-owed b[b-0pore0oz8v] { color: var(--sd-accent); }

/* ---------- Liste ---------- */
.sd-cols[b-0pore0oz8v] { display: flex; gap: 18px; align-items: flex-start; }
.sd-list[b-0pore0oz8v] { flex: 1; min-width: 0; }
.sd-empty[b-0pore0oz8v] { color: var(--sd-muted); padding: 24px 4px; }
.sd-card[b-0pore0oz8v] { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: 14px; }
.sd-start[b-0pore0oz8v] { padding: 22px 24px; }
.sd-start h2[b-0pore0oz8v] { margin: 0 0 6px 0; font-size: 17px; }
.sd-start p[b-0pore0oz8v] { margin: 0 0 14px 0; color: var(--sd-muted); font-size: 14px; max-width: 560px; }

.sd-grid[b-0pore0oz8v] { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.sd-debt[b-0pore0oz8v] { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.sd-debt:hover[b-0pore0oz8v] { border-color: #d6d4ce; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.sd-debt.is-sel[b-0pore0oz8v] { border-color: var(--sd-yellow); box-shadow: 0 0 0 3px var(--sd-yellow-soft); }
.sd-debt.is-done[b-0pore0oz8v] { opacity: .75; }
.sd-debt.is-hidden[b-0pore0oz8v] { opacity: .5; border-style: dashed; }
.sd-hidden-bar[b-0pore0oz8v] { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--sd-muted); }
.sd-hidden-bar .sd-link[b-0pore0oz8v] { font-size: 13px; padding: 2px 4px; }

.sd-debt-head[b-0pore0oz8v] { display: flex; align-items: center; gap: 9px; }
.sd-dot[b-0pore0oz8v] { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; display: inline-block; }
.sd-debt-title[b-0pore0oz8v] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-debt-title b[b-0pore0oz8v] { font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-debt-title small[b-0pore0oz8v] { color: var(--sd-muted); font-size: 12.5px; }
.sd-pill[b-0pore0oz8v] { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sd-pill.is-repeat[b-0pore0oz8v] { background: #eef4fb; color: var(--sd-accent); }
.sd-pill.is-once[b-0pore0oz8v] { background: var(--sd-divider); color: var(--sd-muted); }

.sd-debt-amount[b-0pore0oz8v] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sd-debt-amount b[b-0pore0oz8v] { font-size: 22px; font-weight: 740; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.sd-debt-amount span[b-0pore0oz8v] { color: var(--sd-muted); font-size: 13px; }

.sd-bar[b-0pore0oz8v] { height: 8px; border-radius: 999px; background: var(--sd-divider); overflow: hidden; }
.sd-bar i[b-0pore0oz8v] { display: block; height: 100%; border-radius: 999px; background: var(--sd-yellow); }
.sd-bar i.is-full[b-0pore0oz8v] { background: var(--sd-ok); }
.sd-debt-progress[b-0pore0oz8v] { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--sd-muted); font-variant-numeric: tabular-nums; margin-top: -4px; }

.sd-debt-foot[b-0pore0oz8v] { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--sd-divider); padding-top: 10px; cursor: default; }
.sd-month[b-0pore0oz8v] { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.sd-month small[b-0pore0oz8v] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.sd-month b[b-0pore0oz8v] { font-size: 15px; font-variant-numeric: tabular-nums; }
.sd-month span[b-0pore0oz8v] { font-size: 12.5px; color: var(--sd-muted); flex-basis: 100%; }
.sd-status[b-0pore0oz8v] { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-status.is-ok[b-0pore0oz8v] { background: #e3f4e8; color: #17703a; }
.sd-status.is-warn[b-0pore0oz8v] { background: var(--sd-yellow-soft); color: var(--sd-warn); }
.sd-status.is-muted[b-0pore0oz8v] { background: var(--sd-divider); color: var(--sd-muted); margin-right: auto; }

/* ---------- Formular ---------- */
.sd-det[b-0pore0oz8v] {
    width: 340px; flex: 0 0 340px; background: #fff; border: 1px solid var(--sd-border); border-radius: 14px;
    padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px;
}
.sd-dh[b-0pore0oz8v] { display: flex; align-items: center; gap: 9px; }
.sd-dh h3[b-0pore0oz8v] { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.sd-form[b-0pore0oz8v] { display: flex; flex-direction: column; gap: 14px; }
.sd-field[b-0pore0oz8v] { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sd-field > span[b-0pore0oz8v] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.sd-two[b-0pore0oz8v] { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.sd-money[b-0pore0oz8v] { position: relative; }
.sd-money .sd-input[b-0pore0oz8v] { padding-right: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.sd-money i[b-0pore0oz8v] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--sd-muted); font-size: 14px; pointer-events: none; }
.sd-fixed[b-0pore0oz8v] { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--sd-soft); border: 1px solid var(--sd-divider); }
.sd-fixed small[b-0pore0oz8v] { color: var(--sd-muted); margin-left: auto; font-size: 12.5px; }
.sd-hint[b-0pore0oz8v] { color: var(--sd-muted); font-size: 12.5px; }
.sd-hint a[b-0pore0oz8v] { color: var(--sd-accent); }

.sd-seg[b-0pore0oz8v] { display: flex; background: #f2f1ec; border-radius: 10px; padding: 3px; }
.sd-seg button[b-0pore0oz8v] { flex: 1; border: 0; background: transparent; border-radius: 8px; height: 30px; font-size: 14px; color: var(--sd-muted); cursor: pointer; }
.sd-seg button.is-on[b-0pore0oz8v] { background: #fff; color: var(--sd-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.sd-repeat[b-0pore0oz8v] { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-repeat button[b-0pore0oz8v] { border: 1px solid var(--sd-border); background: var(--sd-soft); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--sd-text-2); cursor: pointer; }
.sd-repeat button:hover[b-0pore0oz8v] { border-color: var(--sd-accent); }
.sd-repeat button.is-on[b-0pore0oz8v] { background: var(--sd-text); border-color: var(--sd-text); color: #fff; font-weight: 550; }

.sd-preview[b-0pore0oz8v] { display: flex; flex-direction: column; gap: 3px; background: var(--sd-yellow-soft); border: 1px solid #f3e19a; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--sd-text-2); }
.sd-preview b[b-0pore0oz8v] { font-size: 18px; color: var(--sd-text); font-variant-numeric: tabular-nums; }
.sd-preview b small[b-0pore0oz8v] { font-size: 13px; font-weight: 500; color: var(--sd-muted); }
.sd-dact[b-0pore0oz8v] { display: flex; gap: 8px; align-items: center; }
.sd-cat-link[b-0pore0oz8v] { align-self: flex-start; padding: 0; font-size: 13px; }

@media (max-width: 1100px) {
    .sd-cols[b-0pore0oz8v] { flex-direction: column-reverse; align-items: stretch; }
    .sd-det[b-0pore0oz8v] { width: 100%; flex-basis: auto; position: static; }
    .sd-tiles[b-0pore0oz8v] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640.98px) {
    .sd-page[b-0pore0oz8v] { margin: -1.1rem -1.5rem 0 -1.5rem; padding: 18px 16px 24px 16px; }
    .sd-meta[b-0pore0oz8v] { flex-basis: 100%; order: 1; padding-top: 0; }
    .sd-header .sd-btn[b-0pore0oz8v] { order: 2; }
    .sd-grid[b-0pore0oz8v] { grid-template-columns: 1fr; }
    .sd-search[b-0pore0oz8v] { max-width: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 640.98px) {
    .sd-grid[b-0pore0oz8v] { grid-template-columns: minmax(0, 1fr); }
    .sd-debt[b-0pore0oz8v] { min-width: 0; }
    .sd-debt-head[b-0pore0oz8v] { flex-wrap: wrap; row-gap: 4px; }
    .sd-debt-head .sd-pill[b-0pore0oz8v] { margin-left: 20px; }
    .sd-debt-title[b-0pore0oz8v] { flex-basis: calc(100% - 20px); }
    /* Details als Vollbild-Blatt über der Seite */
    .sd-det[b-0pore0oz8v] {
        position: fixed;
        inset: 0;
        z-index: 1040;
        width: auto;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: sd-sheet-in-b-0pore0oz8v .18s ease-out;
    }
    .sd-dh[b-0pore0oz8v] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        margin: 0 -16px;
        padding: 12px 10px 10px 16px;
        border-bottom: 1px solid #efeee9;
    }
}

@keyframes sd-sheet-in-b-0pore0oz8v { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Schulden-spezifisch ---------- */
.sd-pill.is-owe[b-0pore0oz8v] { background: #fdecea; color: var(--sd-err); }
.sd-pill.is-owed[b-0pore0oz8v] { background: #eef4fb; color: var(--sd-accent); }
.sd-debt-amount em[b-0pore0oz8v] { font-style: normal; color: var(--sd-err); font-weight: 600; margin-left: 4px; }
.sd-last[b-0pore0oz8v] { font-size: 12.5px; color: var(--sd-muted); margin-left: auto; }
.sd-debt-foot .sd-status.is-ok + .sd-link[b-0pore0oz8v] { margin-left: auto; }
.sd-field > span em[b-0pore0oz8v] { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.sd-hint.is-warn[b-0pore0oz8v] { color: var(--sd-warn); }

.sd-pay[b-0pore0oz8v] { border-top: 1px solid var(--sd-divider); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sd-pay-h[b-0pore0oz8v] { display: flex; align-items: baseline; gap: 8px; }
.sd-pay-h b[b-0pore0oz8v] { font-size: 14px; flex: 1; }
.sd-pay-h small[b-0pore0oz8v] { background: var(--sd-divider); color: var(--sd-muted); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.sd-pay ul[b-0pore0oz8v] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sd-pay li[b-0pore0oz8v] { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--sd-divider); font-size: 13.5px; }
.sd-pay li:last-child[b-0pore0oz8v] { border-bottom: 0; }
.sd-pay li.is-pending[b-0pore0oz8v] { opacity: .65; }
.sd-pay-date[b-0pore0oz8v] { color: var(--sd-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sd-pay-text[b-0pore0oz8v] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-pay-amt[b-0pore0oz8v] { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-pay-amt.is-reduce[b-0pore0oz8v] { color: var(--sd-ok); }
.sd-pay-amt.is-add[b-0pore0oz8v] { color: var(--sd-err); }
.sd-more[b-0pore0oz8v] { align-self: flex-start; padding: 0; font-size: 13px; }
.sd-plan[b-0pore0oz8v] { font-size: 12.5px; color: var(--sd-muted); margin-top: -4px; }
.sd-debt-title small[b-0pore0oz8v] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Kachel je Person (mehrere Schulden) ---------- */
.sd-group[b-0pore0oz8v] { cursor: default; }
.sd-pos[b-0pore0oz8v] { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sd-divider); display: flex; flex-direction: column; }
.sd-pos li[b-0pore0oz8v] { border-bottom: 1px solid var(--sd-divider); }
.sd-pos li:last-child[b-0pore0oz8v] { border-bottom: 0; }
.sd-pos button[b-0pore0oz8v] {
    width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px 4px;
    text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 8px;
}
.sd-pos button:hover[b-0pore0oz8v] { background: var(--sd-soft); }
.sd-pos li.is-sel > button:first-child[b-0pore0oz8v] { background: var(--sd-yellow-soft); }
.sd-pos li.is-done[b-0pore0oz8v] { opacity: .6; }
.sd-pos-text[b-0pore0oz8v] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-pos-text b[b-0pore0oz8v] { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-pos-text small[b-0pore0oz8v], .sd-pos-amt small[b-0pore0oz8v] { font-size: 12px; color: var(--sd-muted); }
.sd-pos-amt[b-0pore0oz8v] { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-pos-amt b[b-0pore0oz8v] { font-size: 14px; }
.sd-pos-amt small.is-ok[b-0pore0oz8v] { color: var(--sd-ok); font-weight: 600; }

/* ---------- Verrechnung je Person (beide Richtungen) ---------- */
.sd-pill.is-even[b-0pore0oz8v] { background: var(--sd-divider); color: var(--sd-muted); }
.sd-net[b-0pore0oz8v] { display: flex; flex-direction: column; gap: 3px; background: var(--sd-soft); border: 1px solid var(--sd-divider); border-radius: 10px; padding: 8px 10px; font-size: 13px; color: var(--sd-text-2); }
.sd-net span[b-0pore0oz8v] { display: flex; align-items: center; gap: 7px; }
.sd-net b[b-0pore0oz8v] { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--sd-text); font-weight: 600; }
.sd-net i[b-0pore0oz8v] { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.sd-net i.is-owed[b-0pore0oz8v] { background: var(--sd-accent); }
.sd-net i.is-owe[b-0pore0oz8v] { background: var(--sd-err); }
.sd-net .is-sum[b-0pore0oz8v] { border-top: 1px solid var(--sd-border); padding-top: 4px; margin-top: 2px; font-weight: 650; color: var(--sd-text); padding-left: 15px; }
.sd-net .is-sum b[b-0pore0oz8v] { font-weight: 750; }
.sd-pos-amt b.is-plus[b-0pore0oz8v] { color: var(--sd-accent); }
.sd-pos-amt b.is-minus[b-0pore0oz8v] { color: var(--sd-err); }

/* ---------- PDF ---------- */
.sd-pdfwrap[b-0pore0oz8v] { position: relative; }
.sd-menu-backdrop[b-0pore0oz8v] { position: fixed; inset: 0; z-index: 30; }
.sd-menu[b-0pore0oz8v] {
    position: absolute; right: 0; top: 42px; z-index: 31; width: 300px; background: #fff; border: 1px solid var(--sd-border);
    border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); padding: 6px; display: flex; flex-direction: column;
}
.sd-menu a[b-0pore0oz8v] { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; color: var(--sd-text); text-decoration: none; }
.sd-menu a:hover[b-0pore0oz8v] { background: var(--sd-soft); }
.sd-menu a b[b-0pore0oz8v] { font-size: 14px; font-weight: 600; }
.sd-menu a small[b-0pore0oz8v] { font-size: 12px; color: var(--sd-muted); }
.sd-menu hr[b-0pore0oz8v] { border: 0; border-top: 1px solid var(--sd-divider); margin: 4px 0; }
.sd-menu-list[b-0pore0oz8v] { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.sd-menu-acc[b-0pore0oz8v] { display: flex; flex-direction: column; gap: 5px; padding: 6px 10px 8px; margin: 0; }
.sd-menu-acc span[b-0pore0oz8v] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.sd-menu-acc .sd-input[b-0pore0oz8v] { height: 32px; font-size: 13px; }
.sd-menu-hint[b-0pore0oz8v] { font-size: 11.5px; color: var(--sd-muted); }
.sd-menu-hint a[b-0pore0oz8v] { color: var(--sd-accent); }
.sd-pdf[b-0pore0oz8v] { width: 28px; height: 28px; flex: 0 0 28px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--sd-border); color: var(--sd-text); background: #fff; }
.sd-pdf:hover[b-0pore0oz8v] { background: var(--sd-soft); }
.sd-pdf svg[b-0pore0oz8v] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640.98px) {
    .sd-pdfwrap[b-0pore0oz8v] { order: 2; }
    .sd-menu[b-0pore0oz8v] { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
}

/* ---------- Als bezahlt markieren ---------- */
.sd-pos li[b-0pore0oz8v] { display: flex; align-items: center; gap: 6px; }
.sd-pos li > button:first-child[b-0pore0oz8v] { flex: 1; min-width: 0; }
.sd-pos .sd-pos-check[b-0pore0oz8v] {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 1.5px solid #c8c6bf; background: #fff;
    display: inline-grid; place-items: center; cursor: pointer; padding: 0; color: transparent;
}
.sd-pos .sd-pos-check svg[b-0pore0oz8v] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sd-pos .sd-pos-check:hover:not(:disabled)[b-0pore0oz8v] { border-color: var(--sd-ok); color: var(--sd-ok); }
.sd-pos .sd-pos-check.is-on[b-0pore0oz8v] { background: var(--sd-ok); border-color: var(--sd-ok); color: #fff; }
.sd-pos .sd-pos-check.is-on:hover:not(:disabled)[b-0pore0oz8v] { background: #fff; color: var(--sd-ok); }
.sd-pos .sd-pos-check.is-auto[b-0pore0oz8v] { cursor: default; opacity: .7; }
.sd-pos .sd-pos-check:disabled[b-0pore0oz8v] { opacity: .5; cursor: default; }
.sd-group-foot[b-0pore0oz8v] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--sd-divider); padding-top: 8px; font-size: 13px; color: var(--sd-text-2); }
.sd-group-foot .sd-link[b-0pore0oz8v] { padding: 0; font-size: 13px; }
.sd-settle[b-0pore0oz8v] { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 0; font-size: 13px; margin-top: -4px; }
.sd-settle svg[b-0pore0oz8v] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sd-pos-amt b.is-struck[b-0pore0oz8v] { text-decoration: line-through; opacity: .7; }
.sd-dact[b-0pore0oz8v] { flex-wrap: wrap; row-gap: 6px; }

/* ---------- Zahlung zuordnen ---------- */
.sd-pay-h .sd-btn[b-0pore0oz8v] { margin-left: auto; }
.sd-pay-h b[b-0pore0oz8v] { flex: 0 1 auto; }
.sd-pay-h small[b-0pore0oz8v] { margin-right: auto; }
.sd-pay-tag[b-0pore0oz8v] { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: #e8f0fb; color: var(--sd-accent); font-size: 11px; font-weight: 650; vertical-align: 1px; }
.sd-pay-part[b-0pore0oz8v] { display: block; color: var(--sd-muted); font-size: 11.5px; }
.sd-pay li[b-0pore0oz8v] { align-items: center; }
.sd-pay-x[b-0pore0oz8v] { width: 22px; height: 22px; flex: 0 0 22px; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--sd-muted); cursor: pointer; padding: 0; }
.sd-pay-x svg[b-0pore0oz8v] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sd-pay-x:hover:not(:disabled)[b-0pore0oz8v] { background: #fde8e7; color: var(--sd-err); }
.sd-pay-x.is-auto[b-0pore0oz8v] { cursor: default; }

.sd-assign[b-0pore0oz8v] { display: flex; flex-direction: column; gap: 8px; background: var(--sd-soft); border: 1px solid var(--sd-border); border-radius: 12px; padding: 10px; }
.sd-assign-h[b-0pore0oz8v] { display: flex; align-items: center; gap: 8px; }
.sd-assign-h .sd-seg[b-0pore0oz8v] { flex: 1; }
.sd-search.sd-search-full[b-0pore0oz8v] { max-width: none; margin: 0; }

.sd-txlist[b-0pore0oz8v] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; border: 1px solid var(--sd-border); border-radius: 10px; background: var(--sd-surface); }
.sd-txlist.is-compact[b-0pore0oz8v] { max-height: 240px; }
.sd-txlist li[b-0pore0oz8v], .sd-pay .sd-txlist li[b-0pore0oz8v] { display: block; padding: 0; gap: 0; font-size: inherit; border-bottom: 1px solid var(--sd-divider); }
.sd-txlist li:last-child[b-0pore0oz8v] { border-bottom: 0; }
.sd-txlist li.is-sel[b-0pore0oz8v] { background: #fffbea; }
.sd-tx[b-0pore0oz8v] { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 8px 10px; text-align: left; cursor: pointer; color: var(--sd-text); font: inherit; }
.sd-tx:hover[b-0pore0oz8v] { background: var(--sd-soft); }
.sd-txlist li.is-sel .sd-tx:hover[b-0pore0oz8v] { background: transparent; }
.sd-tx-date[b-0pore0oz8v] { color: var(--sd-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sd-tx-text[b-0pore0oz8v] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-tx-text b[b-0pore0oz8v] { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tx-text small[b-0pore0oz8v] { font-size: 11.5px; color: var(--sd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tx-text small i[b-0pore0oz8v] { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 4px 0 0; vertical-align: 1px; }
.sd-tx-hit[b-0pore0oz8v] { font-style: normal; font-weight: 650; color: #17703a; background: #e3f4e8; border-radius: 6px; padding: 0 5px; margin-right: 6px; }
.sd-tx-amt[b-0pore0oz8v] { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.sd-tx-amt b[b-0pore0oz8v] { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sd-tx-amt b.is-in[b-0pore0oz8v] { color: var(--sd-ok); }
.sd-tx-amt small[b-0pore0oz8v] { font-size: 11.5px; color: var(--sd-warn); }
.sd-tx-radio[b-0pore0oz8v] { width: 16px; height: 16px; flex: 0 0 16px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #c8c6bf; background: #fff; }
.sd-txlist li.is-sel .sd-tx-radio[b-0pore0oz8v] { border: 5px solid var(--sd-text); }
.sd-tx-pick[b-0pore0oz8v] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 10px 10px 10px; }
.sd-tx-pick .sd-money[b-0pore0oz8v] { width: 120px; }
.sd-tx-pick .sd-hint[b-0pore0oz8v] { flex-basis: 100%; }

.sd-card-acts[b-0pore0oz8v] { display: flex; gap: 14px; flex-wrap: wrap; margin-top: -4px; }
.sd-card-acts .sd-settle[b-0pore0oz8v] { margin-top: 0; }

/* ---------- Ausgleichen-Dialog ---------- */
.sd-modal-backdrop[b-0pore0oz8v] { position: fixed; inset: 0; background: rgba(20, 20, 20, .35); z-index: 1050; }
.sd-modal[b-0pore0oz8v] {
    position: fixed; z-index: 1051; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
    background: var(--sd-surface); color: var(--sd-text); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); padding: 16px 18px; box-sizing: border-box;
}
.sd-modal .sd-dh[b-0pore0oz8v] { flex: 0 0 auto; }
.sd-modal-body[b-0pore0oz8v] { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 8px 2px; }
.sd-modal-foot[b-0pore0oz8v] { flex: 0 0 auto; border-top: 1px solid var(--sd-divider); padding-top: 12px; display: flex; gap: 8px; }
.sd-set-box[b-0pore0oz8v] { border: 1px solid var(--sd-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--sd-soft); }
.sd-set-box > b[b-0pore0oz8v], .sd-set-h b[b-0pore0oz8v] { font-size: 13px; font-weight: 650; }
.sd-set-box p[b-0pore0oz8v] { margin: 0; font-size: 13px; color: var(--sd-text-2); }
.sd-set-h[b-0pore0oz8v] { display: flex; align-items: center; justify-content: space-between; }
.sd-set-h .sd-link[b-0pore0oz8v] { font-size: 13px; padding: 0; }
.sd-set-list[b-0pore0oz8v] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sd-set-list li[b-0pore0oz8v] { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--sd-divider); font-size: 13.5px; }
.sd-set-list li:last-child[b-0pore0oz8v] { border-bottom: 0; }
.sd-set-list li > span[b-0pore0oz8v] { flex: 1; min-width: 0; }
.sd-set-list li > span small[b-0pore0oz8v] { display: block; color: var(--sd-muted); font-size: 11.5px; }
.sd-set-list b[b-0pore0oz8v] { font-variant-numeric: tabular-nums; }
.sd-set-list b.is-plus[b-0pore0oz8v] { color: var(--sd-accent); }
.sd-set-list b.is-minus[b-0pore0oz8v] { color: var(--sd-err); }
.sd-money.is-small[b-0pore0oz8v] { width: 110px; flex: 0 0 110px; }
.sd-money.is-small .sd-input[b-0pore0oz8v] { height: 32px; }
.sd-set-result[b-0pore0oz8v] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-radius: 12px; padding: 12px 14px; background: #f2f1ec; }
.sd-set-result b[b-0pore0oz8v] { font-size: 22px; font-variant-numeric: tabular-nums; }
.sd-set-result span[b-0pore0oz8v] { font-size: 14px; color: var(--sd-text-2); }
.sd-set-result.is-owed[b-0pore0oz8v] { background: #e8f0fb; }
.sd-set-result.is-owed b[b-0pore0oz8v] { color: var(--sd-accent); }
.sd-set-result.is-owe[b-0pore0oz8v] { background: #fde8e7; }
.sd-set-result.is-owe b[b-0pore0oz8v] { color: var(--sd-err); }
.sd-set-result.is-even[b-0pore0oz8v] { background: #e3f4e8; flex-direction: column; gap: 2px; }
.sd-set-result.is-even b[b-0pore0oz8v] { font-size: 16px; color: #17703a; }
.sd-set-sum[b-0pore0oz8v] { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--sd-muted); padding-top: 2px; }
.sd-set-sum.is-err[b-0pore0oz8v] { color: var(--sd-err); font-weight: 600; }
.sd-check[b-0pore0oz8v] { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.sd-check input[b-0pore0oz8v] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--sd-text); }
.sd-check small[b-0pore0oz8v] { display: block; color: var(--sd-muted); font-size: 12px; }
.sd-modal .sd-alert[b-0pore0oz8v] { margin: 0; }

@media (max-width: 640.98px) {
    .sd-modal[b-0pore0oz8v] { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .sd-modal .sd-dh[b-0pore0oz8v] { position: static; margin: 0; padding: 0 0 6px 0; border: 0; }
    .sd-set-list li[b-0pore0oz8v] { flex-wrap: wrap; }
}
/* /Components/Pages/DebtSplitPanel.razor.rz.scp.css */
/* „Für andere ausgelegt“ im Detailfenster /transactions – Farben über die --tx-*-Variablen der Seite (mit Fallback). */
.ds[b-uxr2z5fmxs] { display: flex; flex-direction: column; gap: 6px; color: var(--tx-text, #1d1d1f); }
.ds-label[b-uxr2z5fmxs] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.ds-muted[b-uxr2z5fmxs] { color: var(--tx-muted, #6e6e73); font-size: 12.5px; }

.ds-btn[b-uxr2z5fmxs] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--tx-border, #e4e2dc); background: #fff; color: var(--tx-text, #1d1d1f);
    font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.ds-btn svg[b-uxr2z5fmxs] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-btn:hover:not(:disabled)[b-uxr2z5fmxs] { background: var(--tx-soft, #fbfaf8); }
.ds-btn.is-wide[b-uxr2z5fmxs] { width: 100%; }
.ds-btn.is-primary[b-uxr2z5fmxs] { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }
.ds-btn.is-primary:hover:not(:disabled)[b-uxr2z5fmxs] { background: #000; }
.ds-btn.is-small[b-uxr2z5fmxs] { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.ds-btn:disabled[b-uxr2z5fmxs] { opacity: .5; cursor: default; }
.ds-link[b-uxr2z5fmxs] { border: 0; background: transparent; color: var(--tx-accent, #1b6ec2); font-size: 13px; font-weight: 500; padding: 2px 4px; cursor: pointer; font-family: inherit; }
.ds-link:hover:not(:disabled)[b-uxr2z5fmxs] { text-decoration: underline; }
.ds-link:disabled[b-uxr2z5fmxs] { opacity: .5; cursor: default; }
.ds-icon[b-uxr2z5fmxs] { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--tx-muted, #6e6e73); cursor: pointer; font-size: 18px; }
.ds-icon svg[b-uxr2z5fmxs] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ds-icon:hover[b-uxr2z5fmxs] { background: var(--tx-divider, #efeee9); }
.ds-icon.is-small[b-uxr2z5fmxs] { width: 26px; height: 26px; }
.ds-input[b-uxr2z5fmxs] { height: 36px; border: 1px solid var(--tx-border, #e4e2dc); border-radius: 10px; padding: 0 10px; font-size: 14px; background: #fff; color: inherit; width: 100%; box-sizing: border-box; font-family: inherit; min-width: 0; }

.ds-box[b-uxr2z5fmxs] { border: 1px dashed #d6d4ce; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--tx-soft, #fbfaf8); }
.ds-row[b-uxr2z5fmxs] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ds-name[b-uxr2z5fmxs] { flex: 1; min-width: 0; font-weight: 650; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-name:hover[b-uxr2z5fmxs] { text-decoration: underline; }
.ds-amt[b-uxr2z5fmxs] { font-variant-numeric: tabular-nums; }
.ds-foot[b-uxr2z5fmxs] { justify-content: space-between; }
.ds-av[b-uxr2z5fmxs] { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.ds-av.is-me[b-uxr2z5fmxs] { background: #b0b0b5; font-size: 9.5px; }
.ds-pill[b-uxr2z5fmxs] { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-pill.is-open[b-uxr2z5fmxs] { background: var(--tx-yellow-soft, #fff6d1); color: var(--tx-warn, #9a6700); }
.ds-pill.is-part[b-uxr2z5fmxs] { background: #eef4fb; color: var(--tx-accent, #1b6ec2); }
.ds-pill.is-ok[b-uxr2z5fmxs] { background: #e3f4e8; color: #17703a; }

.ds-suggest[b-uxr2z5fmxs] { display: flex; align-items: center; gap: 8px; background: var(--tx-yellow-soft, #fff6d1); border: 1px solid #f3e19a; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.ds-suggest-text[b-uxr2z5fmxs] { flex: 1; min-width: 0; }
.ds-pick[b-uxr2z5fmxs] { display: flex; gap: 8px; align-items: center; }

/* ---------- Dialog ---------- */
.ds-backdrop[b-uxr2z5fmxs] { position: fixed; inset: 0; background: rgba(29, 29, 31, .35); z-index: 1050; }
.ds-modal[b-uxr2z5fmxs] {
    position: fixed; z-index: 1051; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(600px, calc(100vw - 24px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); padding: 18px 20px 16px; gap: 12px;
    color: var(--tx-text, #1d1d1f); text-align: left;
}
.ds-mh[b-uxr2z5fmxs] { display: flex; align-items: center; }
.ds-mh h2[b-uxr2z5fmxs] { flex: 1; margin: 0; font-size: 19px; font-weight: 700; }
.ds-scroll[b-uxr2z5fmxs] { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin: 0 -4px; padding: 0 4px; }
.ds-tx[b-uxr2z5fmxs] { display: flex; align-items: center; gap: 10px; background: var(--tx-soft, #fbfaf8); border: 1px solid var(--tx-divider, #efeee9); border-radius: 12px; padding: 10px 12px; }
.ds-tx > div[b-uxr2z5fmxs] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-tx small[b-uxr2z5fmxs] { color: var(--tx-muted, #6e6e73); font-size: 12.5px; }
.ds-tx-amt[b-uxr2z5fmxs] { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-dot[b-uxr2z5fmxs] { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; }
.ds-tools[b-uxr2z5fmxs] { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tx-text-2, #4a4a4f); flex-wrap: wrap; }
.ds-tools label[b-uxr2z5fmxs] { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.ds-tools input[b-uxr2z5fmxs] { width: 16px; height: 16px; accent-color: #1d1d1f; margin: 0; }
.ds-sp[b-uxr2z5fmxs] { flex: 1; }

.ds-table[b-uxr2z5fmxs] { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.ds-table th.is-pct[b-uxr2z5fmxs] { width: 92px; }
.ds-table th.is-eur[b-uxr2z5fmxs] { width: 112px; }
.ds-table th.is-x[b-uxr2z5fmxs] { width: 32px; }
.ds-table th[b-uxr2z5fmxs] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; text-align: left; padding: 0 4px 6px; }
.ds-table th.is-num[b-uxr2z5fmxs] { text-align: right; }
.ds-table td[b-uxr2z5fmxs] { padding: 5px 4px; border-top: 1px solid var(--tx-divider, #efeee9); vertical-align: top; }
.ds-table td:last-child[b-uxr2z5fmxs] { width: 30px; padding-top: 9px; }
.ds-cell[b-uxr2z5fmxs] { height: 36px; border: 1px solid var(--tx-border, #e4e2dc); border-radius: 9px; padding: 0 9px; display: flex; align-items: center; gap: 8px; background: #fff; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.ds-cell:focus-within[b-uxr2z5fmxs] { outline: 2px solid var(--tx-accent, #1b6ec2); outline-offset: 1px; }
.ds-cell input[b-uxr2z5fmxs] { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; min-width: 0; width: 100%; flex: 1; padding: 0; }
.ds-num[b-uxr2z5fmxs] { justify-content: flex-end; }
.ds-num input[b-uxr2z5fmxs] { text-align: right; }
.ds-num i[b-uxr2z5fmxs] { font-style: normal; color: var(--tx-muted, #6e6e73); }
.ds-hint[b-uxr2z5fmxs] { display: block; color: var(--tx-muted, #6e6e73); font-size: 12px; margin: 3px 0 0 4px; }
.ds-me td[b-uxr2z5fmxs] { color: var(--tx-muted, #6e6e73); }
.ds-me .ds-cell[b-uxr2z5fmxs] { background: var(--tx-soft, #fbfaf8); border-style: dashed; }
.ds-cell.is-err[b-uxr2z5fmxs] { color: var(--tx-err, #c5221f); border-color: #f6c7c3; }
.ds-add[b-uxr2z5fmxs] { display: flex; gap: 8px; margin: 0; }
.ds-add .ds-input[b-uxr2z5fmxs] { flex: 1; }
.ds-person[b-uxr2z5fmxs] { overflow: hidden; }

.ds-bar[b-uxr2z5fmxs] { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--tx-divider, #efeee9); }
.ds-bar i[b-uxr2z5fmxs] { display: block; height: 100%; }
.ds-bar i.is-me[b-uxr2z5fmxs] { background: #d6d4ce; }
.ds-sum[b-uxr2z5fmxs] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-sum > div[b-uxr2z5fmxs] { background: var(--tx-soft, #fbfaf8); border: 1px solid var(--tx-divider, #efeee9); border-radius: 10px; padding: 9px 12px; }
.ds-sum > div.is-back[b-uxr2z5fmxs] { background: var(--tx-yellow-soft, #fff6d1); border-color: #f3e19a; }
.ds-sum > div.is-err[b-uxr2z5fmxs] { background: #fdecea; border-color: #f6c7c3; color: var(--tx-err, #c5221f); }
.ds-sum small[b-uxr2z5fmxs] { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.ds-sum b[b-uxr2z5fmxs] { font-size: 18px; font-variant-numeric: tabular-nums; }
.ds-note[b-uxr2z5fmxs] { margin: 0; font-size: 13px; color: var(--tx-text-2, #4a4a4f); background: var(--tx-soft, #fbfaf8); border-radius: 10px; padding: 8px 10px; line-height: 1.45; }
.ds-error[b-uxr2z5fmxs] { margin: 0; font-size: 13px; color: var(--tx-err, #c5221f); }
.ds-actions[b-uxr2z5fmxs] { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 640.98px) {
    .ds-modal[b-uxr2z5fmxs] { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; border-radius: 18px 18px 0 0; max-height: 92vh; padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .ds-table th.is-pct[b-uxr2z5fmxs] { width: 74px; }
    .ds-table th.is-eur[b-uxr2z5fmxs] { width: 92px; }
    .ds-table th.is-x[b-uxr2z5fmxs] { width: 28px; }
    .ds-cell[b-uxr2z5fmxs] { padding: 0 7px; gap: 6px; }
    .ds-person .ds-av[b-uxr2z5fmxs] { display: none; }
}

/* „Mit X ausgleichen“ – Link zur Seite Schulden */
a.ds-settle[b-uxr2z5fmxs] { text-decoration: none; color: inherit; background: var(--tx-soft, #fbfaf8); border-color: var(--tx-border, #e4e2dc); margin-bottom: 6px; }
a.ds-settle:hover[b-uxr2z5fmxs] { border-color: var(--tx-accent, #1b6ec2); }
a.ds-settle .ds-btn[b-uxr2z5fmxs] { pointer-events: none; }
/* /Components/Pages/Goals.razor.rz.scp.css */
/* Sparziele – gleiche Optik wie /categories. */

.sg-page[b-6onq7z42st] {
    --sg-ground: #f6f5f2;
    --sg-surface: #ffffff;
    --sg-border: #e4e2dc;
    --sg-divider: #efeee9;
    --sg-soft: #fbfaf8;
    --sg-text: #1d1d1f;
    --sg-text-2: #4a4a4f;
    --sg-muted: #6e6e73;
    --sg-accent: #1b6ec2;
    --sg-yellow: #ffd84d;
    --sg-yellow-soft: #fff6d1;
    --sg-ok: #1e8e3e;
    --sg-warn: #9a6700;
    --sg-err: #c5221f;
    color: var(--sg-text);
    background: var(--sg-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.sg-header[b-6onq7z42st] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sg-header h1[b-6onq7z42st] { margin: 0 4px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.3px; }
.sg-meta[b-6onq7z42st] { flex-grow: 1; color: var(--sg-muted); font-size: 14px; padding-top: 6px; }
.sg-intro[b-6onq7z42st] { margin: -8px 0 0 0; color: var(--sg-muted); font-size: 14px; max-width: 780px; }

/* ---------- Buttons / Eingaben ---------- */
.sg-search[b-6onq7z42st] {
    display: flex; align-items: center; gap: 8px; height: 36px; max-width: 360px; margin: 0 0 12px 0;
    border: 1px solid var(--sg-border); border-radius: 10px; padding: 0 10px; background: var(--sg-surface);
}
.sg-search:focus-within[b-6onq7z42st] { outline: 2px solid var(--sg-accent); outline-offset: 2px; }
.sg-search svg[b-6onq7z42st] { width: 16px; height: 16px; fill: none; stroke: var(--sg-muted); stroke-width: 1.8; stroke-linecap: round; flex: 0 0 16px; }
.sg-search input[b-6onq7z42st] { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; color: var(--sg-text); font-family: inherit; }

.sg-btn[b-6onq7z42st] {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--sg-border); background: var(--sg-surface); color: var(--sg-text);
    font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.sg-btn svg[b-6onq7z42st], .sg-icon svg[b-6onq7z42st] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-btn:hover:not(:disabled)[b-6onq7z42st] { background: var(--sg-soft); }
.sg-btn.is-primary[b-6onq7z42st] { background: var(--sg-text); border-color: var(--sg-text); color: #fff; }
.sg-btn.is-primary:hover:not(:disabled)[b-6onq7z42st] { background: #000; }
.sg-btn.is-primary svg[b-6onq7z42st] { stroke: var(--sg-yellow); }
.sg-btn.is-small[b-6onq7z42st] { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.sg-btn:disabled[b-6onq7z42st] { opacity: .5; cursor: default; }

.sg-link[b-6onq7z42st] { border: 0; background: transparent; color: var(--sg-accent); font-size: 14px; font-weight: 500; padding: 4px 6px; cursor: pointer; text-decoration: none; }
.sg-link:hover:not(:disabled)[b-6onq7z42st] { text-decoration: underline; }
.sg-link.is-danger[b-6onq7z42st] { color: var(--sg-err); margin-left: auto; }
.sg-link:disabled[b-6onq7z42st] { opacity: .5; cursor: default; }

.sg-icon[b-6onq7z42st] { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--sg-muted); cursor: pointer; }
.sg-icon:hover[b-6onq7z42st] { background: var(--sg-divider); }

.sg-input[b-6onq7z42st] {
    height: 36px; border: 1px solid var(--sg-border); border-radius: 10px; padding: 0 10px; font-size: 14px;
    background: #fff; color: var(--sg-text); width: 100%; box-sizing: border-box; font-family: inherit;
}
.sg-input:focus-visible[b-6onq7z42st] { outline: 2px solid var(--sg-accent); outline-offset: 2px; }

.sg-alert[b-6onq7z42st] { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.sg-alert span[b-6onq7z42st] { flex-grow: 1; }
.sg-alert.is-error[b-6onq7z42st] { background: #fdecea; color: var(--sg-err); border: 1px solid #f6c7c3; }
.sg-alert.is-ok[b-6onq7z42st] { background: #e8f5ec; color: var(--sg-ok); border: 1px solid #c3e5cd; }
.sg-alert button[b-6onq7z42st] { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }

/* ---------- Kennzahlen ---------- */
.sg-tiles[b-6onq7z42st] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sg-tiles > div[b-6onq7z42st] { background: #fff; border: 1px solid var(--sg-border); border-radius: 14px; padding: 12px 16px; }
.sg-tiles small[b-6onq7z42st] { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.sg-tiles b[b-6onq7z42st] { display: block; margin-top: 3px; font-size: 22px; font-weight: 720; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.sg-tiles b span[b-6onq7z42st] { font-size: 13px; font-weight: 500; color: var(--sg-muted); letter-spacing: 0; }
.sg-tiles .is-warn b[b-6onq7z42st] { color: var(--sg-warn); }
.sg-tiles .is-ok b[b-6onq7z42st] { color: var(--sg-ok); }

/* ---------- Liste ---------- */
.sg-cols[b-6onq7z42st] { display: flex; gap: 18px; align-items: flex-start; }
.sg-list[b-6onq7z42st] { flex: 1; min-width: 0; }
.sg-empty[b-6onq7z42st] { color: var(--sg-muted); padding: 24px 4px; }
.sg-card[b-6onq7z42st] { background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: 14px; }
.sg-start[b-6onq7z42st] { padding: 22px 24px; }
.sg-start h2[b-6onq7z42st] { margin: 0 0 6px 0; font-size: 17px; }
.sg-start p[b-6onq7z42st] { margin: 0 0 14px 0; color: var(--sg-muted); font-size: 14px; max-width: 560px; }

.sg-grid[b-6onq7z42st] { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.sg-goal[b-6onq7z42st] { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.sg-goal:hover[b-6onq7z42st] { border-color: #d6d4ce; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.sg-goal.is-sel[b-6onq7z42st] { border-color: var(--sg-yellow); box-shadow: 0 0 0 3px var(--sg-yellow-soft); }
.sg-goal.is-expired[b-6onq7z42st] { opacity: .7; }

.sg-goal-head[b-6onq7z42st] { display: flex; align-items: center; gap: 9px; }
.sg-dot[b-6onq7z42st] { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; display: inline-block; }
.sg-goal-title[b-6onq7z42st] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-goal-title b[b-6onq7z42st] { font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-goal-title small[b-6onq7z42st] { color: var(--sg-muted); font-size: 12.5px; }
.sg-pill[b-6onq7z42st] { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sg-pill.is-repeat[b-6onq7z42st] { background: #eef4fb; color: var(--sg-accent); }
.sg-pill.is-once[b-6onq7z42st] { background: var(--sg-divider); color: var(--sg-muted); }

.sg-goal-amount[b-6onq7z42st] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sg-goal-amount b[b-6onq7z42st] { font-size: 22px; font-weight: 740; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.sg-goal-amount span[b-6onq7z42st] { color: var(--sg-muted); font-size: 13px; }

.sg-bar[b-6onq7z42st] { height: 8px; border-radius: 999px; background: var(--sg-divider); overflow: hidden; }
.sg-bar i[b-6onq7z42st] { display: block; height: 100%; border-radius: 999px; background: var(--sg-yellow); }
.sg-bar i.is-full[b-6onq7z42st] { background: var(--sg-ok); }
.sg-goal-progress[b-6onq7z42st] { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--sg-muted); font-variant-numeric: tabular-nums; margin-top: -4px; }

.sg-goal-foot[b-6onq7z42st] { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--sg-divider); padding-top: 10px; cursor: default; }
.sg-month[b-6onq7z42st] { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.sg-month small[b-6onq7z42st] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.sg-month b[b-6onq7z42st] { font-size: 15px; font-variant-numeric: tabular-nums; }
.sg-month span[b-6onq7z42st] { font-size: 12.5px; color: var(--sg-muted); flex-basis: 100%; }
.sg-status[b-6onq7z42st] { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-status.is-ok[b-6onq7z42st] { background: #e3f4e8; color: #17703a; }
.sg-status.is-warn[b-6onq7z42st] { background: var(--sg-yellow-soft); color: var(--sg-warn); }
.sg-status.is-muted[b-6onq7z42st] { background: var(--sg-divider); color: var(--sg-muted); margin-right: auto; }

/* ---------- Formular ---------- */
.sg-det[b-6onq7z42st] {
    width: 340px; flex: 0 0 340px; background: #fff; border: 1px solid var(--sg-border); border-radius: 14px;
    padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px;
}
.sg-dh[b-6onq7z42st] { display: flex; align-items: center; gap: 9px; }
.sg-dh h3[b-6onq7z42st] { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.sg-form[b-6onq7z42st] { display: flex; flex-direction: column; gap: 14px; }
.sg-field[b-6onq7z42st] { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sg-field > span[b-6onq7z42st] { font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.sg-two[b-6onq7z42st] { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.sg-money[b-6onq7z42st] { position: relative; }
.sg-money .sg-input[b-6onq7z42st] { padding-right: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.sg-money i[b-6onq7z42st] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--sg-muted); font-size: 14px; pointer-events: none; }
.sg-fixed[b-6onq7z42st] { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--sg-soft); border: 1px solid var(--sg-divider); }
.sg-fixed small[b-6onq7z42st] { color: var(--sg-muted); margin-left: auto; font-size: 12.5px; }
.sg-hint[b-6onq7z42st] { color: var(--sg-muted); font-size: 12.5px; }
.sg-hint a[b-6onq7z42st] { color: var(--sg-accent); }

.sg-seg[b-6onq7z42st] { display: flex; background: #f2f1ec; border-radius: 10px; padding: 3px; }
.sg-seg button[b-6onq7z42st] { flex: 1; border: 0; background: transparent; border-radius: 8px; height: 30px; font-size: 14px; color: var(--sg-muted); cursor: pointer; }
.sg-seg button.is-on[b-6onq7z42st] { background: #fff; color: var(--sg-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.sg-repeat[b-6onq7z42st] { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-repeat button[b-6onq7z42st] { border: 1px solid var(--sg-border); background: var(--sg-soft); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--sg-text-2); cursor: pointer; }
.sg-repeat button:hover[b-6onq7z42st] { border-color: var(--sg-accent); }
.sg-repeat button.is-on[b-6onq7z42st] { background: var(--sg-text); border-color: var(--sg-text); color: #fff; font-weight: 550; }

.sg-preview[b-6onq7z42st] { display: flex; flex-direction: column; gap: 3px; background: var(--sg-yellow-soft); border: 1px solid #f3e19a; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--sg-text-2); }
.sg-preview b[b-6onq7z42st] { font-size: 18px; color: var(--sg-text); font-variant-numeric: tabular-nums; }
.sg-preview b small[b-6onq7z42st] { font-size: 13px; font-weight: 500; color: var(--sg-muted); }
.sg-dact[b-6onq7z42st] { display: flex; gap: 8px; align-items: center; }
.sg-cat-link[b-6onq7z42st] { align-self: flex-start; padding: 0; font-size: 13px; }

@media (max-width: 1100px) {
    .sg-cols[b-6onq7z42st] { flex-direction: column-reverse; align-items: stretch; }
    .sg-det[b-6onq7z42st] { width: 100%; flex-basis: auto; position: static; }
    .sg-tiles[b-6onq7z42st] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640.98px) {
    .sg-page[b-6onq7z42st] { margin: -1.1rem -1.5rem 0 -1.5rem; padding: 18px 16px 24px 16px; }
    .sg-meta[b-6onq7z42st] { flex-basis: 100%; order: 1; padding-top: 0; }
    .sg-header .sg-btn[b-6onq7z42st] { order: 2; }
    .sg-grid[b-6onq7z42st] { grid-template-columns: 1fr; }
    .sg-search[b-6onq7z42st] { max-width: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 640.98px) {
    .sg-grid[b-6onq7z42st] { grid-template-columns: minmax(0, 1fr); }
    .sg-goal[b-6onq7z42st] { min-width: 0; }
    .sg-goal-head[b-6onq7z42st] { flex-wrap: wrap; row-gap: 4px; }
    .sg-goal-head .sg-pill[b-6onq7z42st] { margin-left: 20px; }
    .sg-goal-title[b-6onq7z42st] { flex-basis: calc(100% - 20px); }
    /* Details als Vollbild-Blatt über der Seite */
    .sg-det[b-6onq7z42st] {
        position: fixed;
        inset: 0;
        z-index: 1040;
        width: auto;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: sg-sheet-in-b-6onq7z42st .18s ease-out;
    }
    .sg-dh[b-6onq7z42st] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        margin: 0 -16px;
        padding: 12px 10px 10px 16px;
        border-bottom: 1px solid #efeee9;
    }
}

@keyframes sg-sheet-in-b-6onq7z42st { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Übersicht – Wetter, heute fällige Erinnerungen, Systemstatus. Gleiche Grundfarben wie /reminders, Gelb wie das Menü. */

.db-page[b-xbv9in5deh],
.db-modal[b-xbv9in5deh] {
    --db-ground: #f6f5f2;
    --db-surface: #ffffff;
    --db-border: #e4e2dc;
    --db-divider: #f2f1ed;
    --db-text: #1d1d1f;
    --db-text-2: #4a4a4f;
    --db-muted: #6e6e73;
    --db-accent: #1b6ec2;
    --db-yellow: #ffd84d;
    --db-ok: #1e8e3e;
    --db-warn: #b26a00;
    --db-err: #c5221f;
}

.db-page[b-xbv9in5deh] {
    color: var(--db-text);
    background: var(--db-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 28px 36px 36px 36px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.db-muted[b-xbv9in5deh] { color: var(--db-muted); }
.db-error[b-xbv9in5deh] { color: var(--db-err); font-size: 13px; margin: 10px 0 0; }

/* ---------- Kopf ---------- */
.db-head[b-xbv9in5deh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.db-head h1[b-xbv9in5deh] { margin: 0; font-size: 28px; letter-spacing: -.5px; font-weight: 700; }
.db-head p[b-xbv9in5deh] { margin: 4px 0 0; color: var(--db-muted); font-size: 14px; }

.db-pill[b-xbv9in5deh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 999px;
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    color: var(--db-text-2);
    cursor: pointer;
}

.db-pill:hover:not(:disabled)[b-xbv9in5deh] { border-color: #c9c6be; }
.db-pill:disabled[b-xbv9in5deh] { cursor: default; }
.db-pill svg[b-xbv9in5deh] { color: var(--db-muted); }
.db-pill svg.is-spinning[b-xbv9in5deh] { animation: db-spin-b-xbv9in5deh 1s linear infinite; }

@keyframes db-spin-b-xbv9in5deh { to { transform: rotate(360deg); } }

/* ---------- Raster ---------- */
.db-grid[b-xbv9in5deh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.db-grid.is-single[b-xbv9in5deh] { grid-template-columns: minmax(0, 1fr); }

.db-card[b-xbv9in5deh] {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 20px 22px;
    min-width: 0;
}

.db-card h2[b-xbv9in5deh],
.db-wx-hourly h2[b-xbv9in5deh],
.db-wx-daily h2[b-xbv9in5deh] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--db-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.db-card h2 a[b-xbv9in5deh] {
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--db-accent);
    font-weight: 600;
    text-decoration: none;
}

.db-card h2 a:hover[b-xbv9in5deh] { text-decoration: underline; }
.db-card-text[b-xbv9in5deh] { margin: 12px 0 0; font-size: 14px; }
.db-card-text a[b-xbv9in5deh] { color: var(--db-accent); }

.db-side[b-xbv9in5deh] { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---------- Wetter ---------- */
.db-wx[b-xbv9in5deh] { padding: 0; overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; }

.db-wx-empty[b-xbv9in5deh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 56px 24px;
}

.db-wx-empty h2[b-xbv9in5deh] { margin: 6px 0 0; font-size: 18px; color: var(--db-text); text-transform: none; letter-spacing: 0; }
.db-wx-empty p[b-xbv9in5deh] { margin: 0 0 8px; color: var(--db-muted); font-size: 14px; max-width: 420px; }

.db-spinner[b-xbv9in5deh] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #e3e8ef;
    border-top-color: var(--db-accent);
    animation: db-spin-b-xbv9in5deh .9s linear infinite;
}

.db-wx-hero[b-xbv9in5deh] {
    color: #fff;
    padding: 22px 26px 20px;
    display: flex;
    gap: 28px;
    align-items: stretch;
    background: linear-gradient(135deg, #3b82d6 0%, #5aa3ea 55%, #8cc3f2 100%);
}

.db-wx-hero.is-grey[b-xbv9in5deh] { background: linear-gradient(135deg, #4f6584 0%, #6c84a3 55%, #93a8c2 100%); }
.db-wx-hero.is-night[b-xbv9in5deh] { background: linear-gradient(135deg, #1c2a4a 0%, #2c3f6b 55%, #47608f 100%); }

.db-wx-left[b-xbv9in5deh] { flex: 0 0 auto; min-width: 0; }

.db-wx-loc[b-xbv9in5deh] {
    font-size: 14px;
    opacity: .95;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.db-wx-edit[b-xbv9in5deh] {
    border: 0;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 4px;
}

.db-wx-edit:hover[b-xbv9in5deh] { background: rgba(255, 255, 255, .3); }

.db-wx-now[b-xbv9in5deh] { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.db-wx-temp[b-xbv9in5deh] { font-size: 84px; font-weight: 300; letter-spacing: -4px; line-height: 1; }
.db-wx-cond[b-xbv9in5deh] { font-size: 20px; font-weight: 600; margin-top: 2px; }
.db-wx-sub[b-xbv9in5deh] { font-size: 14px; opacity: .92; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 0 6px; }
.db-wx-sub span + span[b-xbv9in5deh]::before { content: "·"; margin-right: 6px; }

.db-wx-stats[b-xbv9in5deh] {
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(112px, 128px));
    gap: 10px;
    align-content: center;
}

.db-st[b-xbv9in5deh] {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 0;
}

.db-st span[b-xbv9in5deh] { display: block; font-size: 11.5px; opacity: .88; font-weight: 500; }
.db-st b[b-xbv9in5deh] { display: block; font-size: 17px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-st b small[b-xbv9in5deh] { font-size: 12px; font-weight: 500; opacity: .88; }

.db-wx-body[b-xbv9in5deh] { display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.db-wx-hourly[b-xbv9in5deh] { padding: 18px 22px 20px; border-right: 1px solid #efeee9; min-width: 0; }
.db-wx-daily[b-xbv9in5deh] { padding: 18px 22px 12px; min-width: 0; }

.db-hrs[b-xbv9in5deh] { display: grid; margin-top: 12px; text-align: center; }
.db-hrs > div[b-xbv9in5deh] { font-size: 12px; color: var(--db-muted); }
.db-hrs > div.is-now[b-xbv9in5deh] { color: var(--db-text); font-weight: 700; }
.db-hrs-ic[b-xbv9in5deh] { height: 30px; display: flex; align-items: center; justify-content: center; margin-top: 6px; }

.db-page[b-xbv9in5deh]  .db-chart { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; font-family: inherit; }
.db-page[b-xbv9in5deh]  .db-ic { display: block; flex-shrink: 0; }

.db-legend[b-xbv9in5deh] { display: flex; gap: 16px; font-size: 11.5px; color: var(--db-muted); margin-top: 6px; }
.db-legend span[b-xbv9in5deh] { display: inline-flex; align-items: center; gap: 5px; }
.db-legend i[b-xbv9in5deh] { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.db-tip[b-xbv9in5deh] {
    margin-top: 12px;
    background: #fffcf2;
    border: 1px solid #f0e9d2;
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 13px;
    color: #4b4839;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.db-tip-ic[b-xbv9in5deh] { font-size: 16px; line-height: 1.1; }

.db-days[b-xbv9in5deh] { margin-top: 8px; }

.db-day[b-xbv9in5deh] {
    display: grid;
    grid-template-columns: 44px 28px 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    height: 41px;
    border-bottom: 1px solid var(--db-divider);
    font-size: 14px;
}

.db-day:last-child[b-xbv9in5deh] { border-bottom: 0; }
.db-day .is-today[b-xbv9in5deh] { font-weight: 700; }
.db-day-lo[b-xbv9in5deh] { color: var(--db-muted); text-align: right; }
.db-day-hi[b-xbv9in5deh] { font-weight: 600; }
.db-day-pp[b-xbv9in5deh] { font-size: 11px; color: var(--db-accent); font-weight: 600; margin-top: 3px; height: 12px; line-height: 12px; }
.db-bar[b-xbv9in5deh] { height: 5px; border-radius: 3px; background: #efeee9; position: relative; }
.db-bar i[b-xbv9in5deh] { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #7ab8f0, #f2c14e, #f08a4b); }

/* ---------- Erinnerungen ---------- */
.db-rem[b-xbv9in5deh] { list-style: none; margin: 10px 0 0; padding: 0; }

.db-rem li[b-xbv9in5deh] {
    display: flex;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--db-divider);
    font-size: 14px;
    align-items: flex-start;
}

.db-rem li:last-child[b-xbv9in5deh] { border-bottom: 0; }
.db-rem a[b-xbv9in5deh] { color: var(--db-text); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.db-rem a:hover span[b-xbv9in5deh] { text-decoration: underline; }
.db-rem small[b-xbv9in5deh] { display: block; color: var(--db-muted); font-size: 12px; margin-top: 2px; }
.db-rem small.is-overdue[b-xbv9in5deh] { color: var(--db-err); font-weight: 600; }

.db-ck[b-xbv9in5deh] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    flex-shrink: 0;
    margin-top: 1px;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.db-ck:hover:not(:disabled)[b-xbv9in5deh]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
}

.db-ck:disabled[b-xbv9in5deh] { cursor: default; opacity: .6; }

.db-more[b-xbv9in5deh] { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--db-accent); font-weight: 600; text-decoration: none; }

/* ---------- Schlüssel/Wert-Zeilen ---------- */
.db-kvs[b-xbv9in5deh] { margin-top: 8px; }

.db-kv[b-xbv9in5deh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--db-divider);
}

.db-kv:last-child[b-xbv9in5deh] { border-bottom: 0; }
.db-kv > span:first-child[b-xbv9in5deh] { color: var(--db-muted); }
.db-kv b[b-xbv9in5deh] { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.db-status[b-xbv9in5deh] { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.db-status i[b-xbv9in5deh] { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.db-status.is-ok[b-xbv9in5deh] { color: var(--db-ok); }
.db-status.is-warn[b-xbv9in5deh] { color: var(--db-warn); }
.db-status.is-err[b-xbv9in5deh] { color: var(--db-err); }

.db-alert[b-xbv9in5deh] {
    margin: 6px 0 4px;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: #fff8e6;
    color: #7a4b00;
}

.db-alert.is-warn[b-xbv9in5deh] { background: #fff1dc; color: #8a4b00; }
.db-alert.is-err[b-xbv9in5deh] { background: #fde8e7; color: #a11a17; }
.db-alert span[b-xbv9in5deh] { white-space: nowrap; opacity: .85; }

/* ---------- Buttons ---------- */
.db-btn-primary[b-xbv9in5deh],
.db-btn-secondary[b-xbv9in5deh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.db-btn-primary[b-xbv9in5deh] { border: 0; background: var(--db-yellow); color: #1d1d1f; }
.db-btn-primary:hover[b-xbv9in5deh] { background: #ffcf26; }
.db-btn-secondary[b-xbv9in5deh] { border: 1px solid var(--db-border); background: var(--db-surface); color: var(--db-text); }
.db-btn-secondary:hover:not(:disabled)[b-xbv9in5deh] { border-color: #c9c6be; }
.db-btn-primary:disabled[b-xbv9in5deh],
.db-btn-secondary:disabled[b-xbv9in5deh] { opacity: .5; cursor: default; }

/* ---------- Willkommen (nicht angemeldet) ---------- */
.db-welcome[b-xbv9in5deh] {
    margin: 10vh auto 0;
    max-width: 440px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.db-welcome img[b-xbv9in5deh] { border-radius: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.db-welcome h1[b-xbv9in5deh] { margin: 8px 0 0; font-size: 28px; letter-spacing: -.5px; }
.db-welcome p[b-xbv9in5deh] { margin: 0; color: var(--db-muted); }
.db-welcome-actions[b-xbv9in5deh] { display: flex; gap: 10px; margin-top: 12px; }

/* ---------- Ort-Dialog ---------- */
.db-modal-backdrop[b-xbv9in5deh] {
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 31, .35);
    z-index: 1050;
}

.db-modal[b-xbv9in5deh] {
    position: fixed;
    z-index: 1051;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, calc(100vw - 32px));
    max-height: 76vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #1d1d1f;
}

.db-modal h2[b-xbv9in5deh] { margin: 0; font-size: 18px; }
.db-modal p[b-xbv9in5deh] { margin: 0; font-size: 13px; }

.db-field[b-xbv9in5deh] { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #4a4a4f; flex-grow: 1; }

.db-field input[b-xbv9in5deh] {
    height: 40px;
    border: 1px solid #e4e2dc;
    border-radius: 9px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1f;
}

.db-field input:focus[b-xbv9in5deh] { outline: 2px solid rgba(27, 110, 194, .35); border-color: #1b6ec2; }

.db-search[b-xbv9in5deh] { display: flex; gap: 8px; align-items: flex-end; margin: 0; }

.db-loc-results[b-xbv9in5deh] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e4e2dc;
    border-radius: 10px;
    overflow: hidden;
}

.db-loc-results li + li[b-xbv9in5deh] { border-top: 1px solid #efeee9; }

.db-loc-results button[b-xbv9in5deh] {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-loc-results button:hover:not(:disabled)[b-xbv9in5deh] { background: #fffcf2; }
.db-loc-results b[b-xbv9in5deh] { font-size: 14px; }
.db-loc-results span[b-xbv9in5deh] { font-size: 12px; color: #6e6e73; }

.db-modal-actions[b-xbv9in5deh] { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- Responsiv ---------- */
/* Wetter-Kachel nach eigener Breite statt Fensterbreite umbrechen */
@container (max-width: 720px) {
    .db-wx-hero[b-xbv9in5deh] { flex-direction: column; gap: 18px; }
    .db-wx-stats[b-xbv9in5deh] { margin-left: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 640px) {
    .db-wx-body[b-xbv9in5deh] { grid-template-columns: minmax(0, 1fr); }
    .db-wx-hourly[b-xbv9in5deh] { border-right: 0; border-bottom: 1px solid #efeee9; }
}

@container (max-width: 480px) {
    .db-wx-temp[b-xbv9in5deh] { font-size: 64px; }
    .db-wx-stats[b-xbv9in5deh] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .db-hrs > div:nth-child(even)[b-xbv9in5deh] { visibility: hidden; }
}

@media (max-width: 1199.98px) {
    .db-grid[b-xbv9in5deh] { grid-template-columns: minmax(0, 1fr); }
    .db-side[b-xbv9in5deh] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 991.98px) {
    .db-page[b-xbv9in5deh] { padding: 18px 16px 28px 16px; gap: 16px; }
}

@media (max-width: 640.98px) {
    /* MainLayout: article hat hier px-4 (1.5rem) statt 2rem links */
    .db-page[b-xbv9in5deh] { margin-left: -1.5rem; }
    .db-head h1[b-xbv9in5deh] { font-size: 24px; }
}
/* /Components/Pages/IonosZones.razor.rz.scp.css */
/* IONOS-Zonen – gleiche Optik wie /permissions und /scheduled-tasks, Gelb-Akzent wie das Menü. */

.iz-page[b-7eaqalyq9w] {
    --iz-ground: #f6f5f2;
    --iz-surface: #ffffff;
    --iz-border: #e4e2dc;
    --iz-divider: #efeee9;
    --iz-soft: #fbfaf8;
    --iz-text: #1d1d1f;
    --iz-text-2: #4a4a4f;
    --iz-muted: #6e6e73;
    --iz-accent: #1b6ec2;
    --iz-yellow: #ffd84d;
    --iz-yellow-soft: #fff6d1;
    --iz-ok: #1e8e3e;
    --iz-warn: #9a6700;
    --iz-err: #c5221f;
    color: var(--iz-text);
    background: var(--iz-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.iz-header[b-7eaqalyq9w] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.iz-header h1[b-7eaqalyq9w] {
    margin: 0 4px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.iz-meta[b-7eaqalyq9w] {
    flex-grow: 1;
    color: var(--iz-muted);
    font-size: 14px;
    padding-top: 6px;
}

.iz-meta b[b-7eaqalyq9w] { color: var(--iz-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.iz-intro[b-7eaqalyq9w] {
    margin: -8px 0 0 0;
    color: var(--iz-muted);
    font-size: 14px;
    max-width: 760px;
}

/* ---------- Buttons ---------- */
.iz-btn[b-7eaqalyq9w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--iz-border);
    background: var(--iz-surface);
    color: var(--iz-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.iz-btn svg[b-7eaqalyq9w],
.iz-icon svg[b-7eaqalyq9w] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.iz-btn:hover:not(:disabled)[b-7eaqalyq9w] { background: var(--iz-soft); }
.iz-btn.is-primary[b-7eaqalyq9w] { background: var(--iz-text); border-color: var(--iz-text); color: #fff; }
.iz-btn.is-primary:hover:not(:disabled)[b-7eaqalyq9w] { background: #000; }
.iz-btn.is-primary svg[b-7eaqalyq9w] { stroke: var(--iz-yellow); }
.iz-btn:disabled[b-7eaqalyq9w] { opacity: .5; cursor: default; }

.iz-link[b-7eaqalyq9w] {
    border: 0;
    background: transparent;
    color: var(--iz-accent);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 6px;
    cursor: pointer;
}

.iz-link:hover:not(:disabled)[b-7eaqalyq9w] { text-decoration: underline; }
.iz-link.is-muted[b-7eaqalyq9w] { color: var(--iz-muted); }
.iz-link.is-danger[b-7eaqalyq9w] { color: var(--iz-err); }
.iz-link:disabled[b-7eaqalyq9w] { opacity: .5; cursor: default; }

.iz-icon[b-7eaqalyq9w] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--iz-muted);
    cursor: pointer;
}

.iz-icon:hover[b-7eaqalyq9w] { background: var(--iz-divider); color: var(--iz-text); }
.iz-icon.is-danger:hover[b-7eaqalyq9w] { background: #fdecea; color: var(--iz-err); }

.iz-btn:focus-visible[b-7eaqalyq9w],
.iz-link:focus-visible[b-7eaqalyq9w],
.iz-icon:focus-visible[b-7eaqalyq9w],
.iz-switch:focus-visible[b-7eaqalyq9w],
.iz-input:focus-visible[b-7eaqalyq9w] { outline: 2px solid var(--iz-accent); outline-offset: 2px; }

/* ---------- Hinweise ---------- */
.iz-alert[b-7eaqalyq9w],
.iz-confirm[b-7eaqalyq9w] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

.iz-alert span[b-7eaqalyq9w],
.iz-confirm span[b-7eaqalyq9w] { flex-grow: 1; }

.iz-alert.is-error[b-7eaqalyq9w] { background: #fdecea; color: var(--iz-err); border: 1px solid #f6c7c3; }
.iz-alert.is-ok[b-7eaqalyq9w] { background: #e8f5ec; color: var(--iz-ok); border: 1px solid #c3e5cd; }
.iz-confirm[b-7eaqalyq9w] { background: var(--iz-yellow-soft); border: 1px solid #f3e19a; color: var(--iz-text); }

.iz-alert button[b-7eaqalyq9w] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Karten ---------- */
.iz-card[b-7eaqalyq9w] {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: 14px;
    overflow: hidden;
}

.iz-card-head[b-7eaqalyq9w] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--iz-divider);
}

.iz-card-head h2[b-7eaqalyq9w] { margin: 0; font-size: 16px; font-weight: 650; }
.iz-card-head small[b-7eaqalyq9w] { color: var(--iz-muted); font-size: 13px; }

.iz-empty[b-7eaqalyq9w] {
    color: var(--iz-muted);
    padding: 28px;
    text-align: center;
    font-size: 14px;
}

/* ---------- Neuer Eintrag ---------- */
.iz-add[b-7eaqalyq9w] {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--iz-divider);
    background: var(--iz-soft);
    flex-wrap: wrap;
}

.iz-input[b-7eaqalyq9w] {
    height: 36px;
    border: 1px solid var(--iz-border);
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    background: var(--iz-surface);
    color: var(--iz-text);
    min-width: 0;
    flex: 1 1 180px;
    width: 100%;
}

.iz-add .iz-name[b-7eaqalyq9w] { flex: 2 1 260px; }
.iz-name[b-7eaqalyq9w] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Tabelle ---------- */
.iz-scroll[b-7eaqalyq9w] { overflow-x: auto; }

.iz-table[b-7eaqalyq9w] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.iz-table th[b-7eaqalyq9w] {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--iz-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--iz-divider);
    white-space: nowrap;
}

.iz-table td[b-7eaqalyq9w] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--iz-divider);
    vertical-align: middle;
}

.iz-table tbody tr:last-child td[b-7eaqalyq9w] { border-bottom: 0; }
.iz-table tbody tr:hover td[b-7eaqalyq9w] { background: var(--iz-soft); }
.iz-table tr.is-off .iz-mono[b-7eaqalyq9w],
.iz-table tr.is-off .iz-note[b-7eaqalyq9w] { color: var(--iz-muted); }

.iz-col-toggle[b-7eaqalyq9w] { width: 64px; }
.iz-col-actions[b-7eaqalyq9w] { width: 1%; white-space: nowrap; text-align: right; }

.iz-mono[b-7eaqalyq9w] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.iz-note[b-7eaqalyq9w] { color: var(--iz-text-2); }
.iz-ask[b-7eaqalyq9w] { color: var(--iz-err); font-size: 13px; margin-right: 2px; }
.iz-sr[b-7eaqalyq9w] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Status-Pillen ---------- */
.iz-pill[b-7eaqalyq9w] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
    white-space: nowrap;
}

.iz-pill.is-ok[b-7eaqalyq9w] { background: #e8f5ec; color: var(--iz-ok); }
.iz-pill.is-warn[b-7eaqalyq9w] { background: var(--iz-yellow-soft); color: var(--iz-warn); }
.iz-pill.is-error[b-7eaqalyq9w] { background: #fdecea; color: var(--iz-err); }
.iz-pill.is-muted[b-7eaqalyq9w] { background: var(--iz-divider); color: var(--iz-muted); }

/* ---------- Schalter ---------- */
.iz-switch[b-7eaqalyq9w] {
    width: 40px;
    height: 23px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: #d6d4ce;
    position: relative;
    cursor: pointer;
    transition: background .15s;
    vertical-align: middle;
}

.iz-switch[b-7eaqalyq9w]::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: left .15s;
}

.iz-switch.is-on[b-7eaqalyq9w] { background: var(--iz-text); }
.iz-switch.is-on[b-7eaqalyq9w]::after { left: 19.5px; background: var(--iz-yellow); }
.iz-switch:disabled[b-7eaqalyq9w] { opacity: .5; cursor: default; }

/* ---------- Liste "Weitere bei IONOS" ---------- */
.iz-list[b-7eaqalyq9w] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iz-list li[b-7eaqalyq9w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--iz-divider);
    font-size: 14px;
}

.iz-list li:last-child[b-7eaqalyq9w] { border-bottom: 0; }
.iz-list .iz-mono[b-7eaqalyq9w] { flex-grow: 1; }
.iz-ip[b-7eaqalyq9w] { color: var(--iz-muted); font-variant-numeric: tabular-nums; font-size: 13px; }

@media (max-width: 640.98px) {
    .iz-page[b-7eaqalyq9w] {
        margin: -1.1rem -1.5rem 0 -1.5rem;
        padding: 18px 16px 24px 16px;
    }

    .iz-meta[b-7eaqalyq9w] { flex-basis: 100%; order: 1; padding-top: 0; }
    .iz-header .iz-btn[b-7eaqalyq9w] { order: 2; }
    .iz-add .iz-btn[b-7eaqalyq9w] { width: 100%; justify-content: center; }
    .iz-confirm[b-7eaqalyq9w] { flex-wrap: wrap; }
    .iz-list li[b-7eaqalyq9w] { flex-wrap: wrap; }
    .iz-col-note[b-7eaqalyq9w] { display: none; }
    .iz-table td[b-7eaqalyq9w] { padding: 8px 8px; }
    .iz-table td.iz-mono[b-7eaqalyq9w] { overflow-wrap: normal; white-space: nowrap; }
}

/* Handy: Einträge als Karten-Zeilen, damit Bearbeiten/Löschen ohne seitliches Scrollen erreichbar sind. */
@media (max-width: 640.98px) {
    .iz-scroll[b-7eaqalyq9w] { overflow: visible; }
    .iz-table[b-7eaqalyq9w], .iz-table tbody[b-7eaqalyq9w] { display: block; }
    .iz-table thead[b-7eaqalyq9w] { display: none; }
    .iz-table tbody tr[b-7eaqalyq9w] {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        grid-template-areas: "tog name act" ". note note" ". stat stat";
        align-items: center;
        column-gap: 8px;
        row-gap: 4px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--iz-divider, #efeee9);
    }
    .iz-table tbody tr:last-child[b-7eaqalyq9w] { border-bottom: 0; }
    .iz-table tbody td[b-7eaqalyq9w] { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
    .iz-table tbody td:nth-child(1)[b-7eaqalyq9w] { grid-area: tog; }
    .iz-table tbody td:nth-child(2)[b-7eaqalyq9w] { grid-area: name; overflow-wrap: anywhere; }
    .iz-table tbody td:nth-child(3)[b-7eaqalyq9w] { grid-area: note; display: block; color: var(--iz-muted, #6e6e73); font-size: 13px; }
    .iz-table tbody td:nth-child(3):empty[b-7eaqalyq9w] { display: none; }
    .iz-table tbody td:nth-child(4)[b-7eaqalyq9w] { grid-area: stat; }
    .iz-table tbody td:nth-child(5)[b-7eaqalyq9w] { grid-area: act; width: auto; }
}
/* /Components/Pages/MailSettings.razor.rz.scp.css */
/* E-Mail-Versand (/mail-settings) – Aufbau wie /permissions, Gelb-Akzent. */

.ms-page[b-dslaq4ruq2] {
    --ms-ground: #f6f5f2;
    --ms-surface: #ffffff;
    --ms-border: #e4e2dc;
    --ms-divider: #efeee9;
    --ms-text: #1d1d1f;
    --ms-text-2: #4a4a4f;
    --ms-muted: #6e6e73;
    --ms-yellow: #ffd84d;
    --ms-yellow-soft: #fff6d1;
    --ms-err: #c5221f;
    color: var(--ms-text);
    background: var(--ms-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 40px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ms-header[b-dslaq4ruq2] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ms-header h1[b-dslaq4ruq2] { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.3px; }

.ms-pill[b-dslaq4ruq2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    color: var(--ms-text-2);
}

.ms-dot[b-dslaq4ruq2] { width: 8px; height: 8px; border-radius: 50%; background: var(--ms-muted); }
.ms-pill.is-on .ms-dot[b-dslaq4ruq2] { background: #1e8e3e; }
.ms-pill.is-off .ms-dot[b-dslaq4ruq2] { background: #b06000; }

.ms-lead[b-dslaq4ruq2] { margin: -6px 0 0 0; max-width: 760px; font-size: 14.5px; line-height: 1.55; color: var(--ms-text-2); }

.ms-alert[b-dslaq4ruq2] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid transparent;
}

.ms-alert span[b-dslaq4ruq2] { flex-grow: 1; }
.ms-alert.is-ok[b-dslaq4ruq2] { background: #e9f6ec; color: #145523; border-color: #cbe8d2; }
.ms-alert.is-err[b-dslaq4ruq2] { background: #fdecea; color: #8c1d1a; border-color: #f6c7c3; }

.ms-alert button[b-dslaq4ruq2] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ms-grid[b-dslaq4ruq2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.ms-side[b-dslaq4ruq2] { display: flex; flex-direction: column; gap: 18px; }

.ms-card[b-dslaq4ruq2] {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ms-card.is-tip[b-dslaq4ruq2] { background: #fffcf0; border-color: #f2e4b0; }

.ms-card h2[b-dslaq4ruq2] { margin: 0; font-size: 16px; font-weight: 700; }

.ms-sub[b-dslaq4ruq2] {
    padding-top: 14px;
    border-top: 1px solid var(--ms-divider);
}

.ms-row[b-dslaq4ruq2] { display: flex; gap: 12px; flex-wrap: wrap; }

.ms-field[b-dslaq4ruq2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-text-2);
    margin: 0;
}

.ms-field.is-grow[b-dslaq4ruq2] { flex: 1 1 220px; }
.ms-field.is-port[b-dslaq4ruq2] { flex: 0 0 110px; }

.ms-field input[b-dslaq4ruq2] {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dcd8cc;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    color: var(--ms-text);
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}

.ms-field input:focus[b-dslaq4ruq2] {
    outline: 0;
    border-color: #e0b100;
    box-shadow: 0 0 0 3px rgba(255, 201, 40, .4);
}

.ms-toggle[b-dslaq4ruq2] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
}

.ms-toggle input[b-dslaq4ruq2],
.ms-check input[b-dslaq4ruq2] { width: 18px; height: 18px; margin-top: 2px; accent-color: #e0b100; flex-shrink: 0; }
.ms-toggle b[b-dslaq4ruq2] { display: block; font-size: 14px; }
.ms-toggle small[b-dslaq4ruq2] { display: block; font-size: 12.5px; color: var(--ms-muted); }

.ms-check[b-dslaq4ruq2] { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ms-text-2); margin: -4px 0 0 0; }

.ms-actions[b-dslaq4ruq2] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.ms-grow[b-dslaq4ruq2] { flex: 1; }

.ms-btn[b-dslaq4ruq2] {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #dcd8cc;
    background: #fff;
    color: var(--ms-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.ms-btn:hover[b-dslaq4ruq2] { background: #faf8f2; }
.ms-btn.is-primary[b-dslaq4ruq2] { border-color: transparent; background: var(--ms-yellow); }
.ms-btn.is-primary:hover[b-dslaq4ruq2] { background: #ffc928; }
.ms-btn.is-danger-text[b-dslaq4ruq2] { border-color: transparent; background: none; color: var(--ms-err); padding: 0 8px; font-weight: 600; }
.ms-btn.is-danger-text:hover[b-dslaq4ruq2] { background: #fdecea; }
.ms-btn.is-small[b-dslaq4ruq2] { height: 34px; font-size: 13px; align-self: flex-start; }
.ms-btn:disabled[b-dslaq4ruq2] { opacity: .5; cursor: default; }

.ms-meta[b-dslaq4ruq2] { margin: 0; font-size: 12.5px; color: var(--ms-muted); }

.ms-text[b-dslaq4ruq2] { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ms-text-2); }
.ms-text.is-muted[b-dslaq4ruq2] { color: var(--ms-muted); }
.ms-text a[b-dslaq4ruq2] { color: #8a6d00; font-weight: 600; }

.ms-people[b-dslaq4ruq2] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-people li[b-dslaq4ruq2] { display: flex; gap: 10px; align-items: center; }
.ms-people b[b-dslaq4ruq2] { display: block; font-size: 14px; }
.ms-people small[b-dslaq4ruq2] { display: block; font-size: 12.5px; color: var(--ms-muted); }

.ms-av[b-dslaq4ruq2] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-yellow);
    font-size: 13px;
    font-weight: 800;
}

.ms-dl[b-dslaq4ruq2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: 13.5px;
}

.ms-dl dt[b-dslaq4ruq2] { color: var(--ms-muted); font-weight: 500; }
.ms-dl dd[b-dslaq4ruq2] { margin: 0; font-weight: 600; }

@media (max-width: 1099.98px) {
    .ms-grid[b-dslaq4ruq2] { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .ms-page[b-dslaq4ruq2] { padding: 16px 16px 32px 16px; }
    .ms-card[b-dslaq4ruq2] { padding: 16px; }
}

@media (max-width: 640.98px) {
    .ms-page[b-dslaq4ruq2] { margin-left: -1.5rem; }
    .ms-field.is-port[b-dslaq4ruq2] { flex: 1 1 100%; }
}
/* /Components/Pages/MonthPicker.razor.rz.scp.css */
.mp[b-hcejbf3iqx] { position: relative; display: inline-flex; align-items: center; gap: 6px; }

.mp-box[b-hcejbf3iqx] {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    background: #fff;
    border: 1px solid #e4e2dc;
    border-radius: 10px;
    overflow: hidden;
}

.mp-step[b-hcejbf3iqx] {
    width: 34px;
    border: 0;
    background: transparent;
    color: #4a4a4f;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.mp-box .mp-step:first-child[b-hcejbf3iqx] { border-right: 1px solid #efeee9; }
.mp-box .mp-step:last-child[b-hcejbf3iqx] { border-left: 1px solid #efeee9; }
.mp-step:hover[b-hcejbf3iqx] { background: #fbfaf8; }

.mp svg[b-hcejbf3iqx] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mp-label[b-hcejbf3iqx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 168px;
    padding: 0 12px;
    border: 0;
    background: #fff6d1;
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
}

.mp-label svg[b-hcejbf3iqx] { color: #9a6700; }
.mp-label:hover[b-hcejbf3iqx] { background: #ffefb0; }
.mp-caret[b-hcejbf3iqx] { font-size: 11px; color: #8e8e93; }

.mp-today[b-hcejbf3iqx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e4e2dc;
    border-radius: 10px;
    background: #fff;
    color: #1d1d1f;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.mp-today svg[b-hcejbf3iqx] { width: 15px; height: 15px; color: #9a6700; }
.mp-today:hover[b-hcejbf3iqx] { background: #fff6d1; border-color: #f3e19a; }

.mp-backdrop[b-hcejbf3iqx] { position: fixed; inset: 0; z-index: 40; }

.mp-pop[b-hcejbf3iqx] {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 41;
    width: 280px;
    background: #fff;
    border: 1px solid #e4e2dc;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 10px;
}

.mp-presets[b-hcejbf3iqx] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid #efeee9; }

.mp-preset[b-hcejbf3iqx] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #e4e2dc;
    border-radius: 8px;
    background: #fff;
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.mp-preset:hover[b-hcejbf3iqx] { background: #fff6d1; border-color: #f3e19a; }
.mp-preset.is-on[b-hcejbf3iqx] { background: #1d1d1f; border-color: #1d1d1f; color: #fff; font-weight: 600; }

.mp-year[b-hcejbf3iqx] { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 6px; }
.mp-year b[b-hcejbf3iqx] { font-size: 15px; }
.mp-year .mp-step[b-hcejbf3iqx] { height: 30px; border-radius: 8px; }

.mp-grid[b-hcejbf3iqx] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.mp-month[b-hcejbf3iqx] {
    height: 34px;
    border: 1px solid #efeee9;
    border-radius: 8px;
    background: #fbfaf8;
    font-size: 13.5px;
    cursor: pointer;
    color: #1d1d1f;
}

.mp-month:hover[b-hcejbf3iqx] { background: #fff6d1; }
.mp-month.is-now[b-hcejbf3iqx] { border-color: #f3e19a; font-weight: 600; }
.mp-month.is-on[b-hcejbf3iqx] { background: #1d1d1f; border-color: #1d1d1f; color: #fff; font-weight: 600; }

.mp-hint[b-hcejbf3iqx] { margin-top: 8px; font-size: 12px; color: #8e8e93; }

.mp-foot[b-hcejbf3iqx] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #efeee9; }

.mp-link[b-hcejbf3iqx] { border: 0; background: transparent; color: #1b6ec2; font-size: 13px; cursor: pointer; padding: 4px 2px; }
.mp-link:hover[b-hcejbf3iqx] { text-decoration: underline; }

.mp-apply[b-hcejbf3iqx] {
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #1d1d1f;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mp-apply:disabled[b-hcejbf3iqx] { opacity: .4; cursor: default; }

.mp-step:focus-visible[b-hcejbf3iqx], .mp-label:focus-visible[b-hcejbf3iqx], .mp-month:focus-visible[b-hcejbf3iqx], .mp-today:focus-visible[b-hcejbf3iqx], .mp-link:focus-visible[b-hcejbf3iqx], .mp-apply:focus-visible[b-hcejbf3iqx], .mp-preset:focus-visible[b-hcejbf3iqx] { outline: 2px solid #1b6ec2; outline-offset: 2px; }
/* /Components/Pages/PayeeInput.razor.rz.scp.css */
.pi[b-i7lmpui3fl] { position: relative; width: 100%; }

/* Gleiche Optik wie .tx-input auf /transactions */
.pi-input[b-i7lmpui3fl] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--tx-border, #e4e2dc);
    border-radius: 10px;
    background: var(--tx-surface, #fff);
    color: var(--tx-text, #1d1d1f);
    font-size: 14px;
}

.pi-input[b-i7lmpui3fl]::placeholder { color: var(--tx-muted, #6e6e73); opacity: .8; }
.pi-input:focus[b-i7lmpui3fl] { outline: none; }
.pi-input:focus-visible[b-i7lmpui3fl] { outline: 2px solid var(--tx-accent, #1b6ec2); outline-offset: 1px; }
.pi-input:disabled[b-i7lmpui3fl] { opacity: .6; cursor: not-allowed; }

.pi-list[b-i7lmpui3fl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    background: var(--tx-surface, #fff);
    border: 1px solid var(--tx-border, #e4e2dc);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.pi-item[b-i7lmpui3fl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    color: var(--tx-text, #1d1d1f);
}

.pi-item.is-active[b-i7lmpui3fl] { background: var(--tx-yellow-soft, #fff6d1); }

.pi-name[b-i7lmpui3fl] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-name[b-i7lmpui3fl]  mark { background: transparent; color: inherit; font-weight: 700; padding: 0; }

.pi-meta[b-i7lmpui3fl] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tx-muted, #6e6e73); white-space: nowrap; }
.pi-meta span[b-i7lmpui3fl] { margin: 0 1px; }
.pi-dot[b-i7lmpui3fl] { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* /Components/Pages/Payees.razor.rz.scp.css */
/* Empfänger – gleiche Optik wie /transactions. */

.py-page[b-frtjyr0h9t] {
    --py-ground: #f6f5f2;
    --py-surface: #ffffff;
    --py-border: #e4e2dc;
    --py-divider: #efeee9;
    --py-soft: #fbfaf8;
    --py-text: #1d1d1f;
    --py-text-2: #4a4a4f;
    --py-muted: #6e6e73;
    --py-accent: #1b6ec2;
    --py-yellow: #ffd84d;
    --py-yellow-soft: #fff6d1;
    --py-ok: #1e8e3e;
    --py-warn: #9a6700;
    --py-err: #c5221f;
    color: var(--py-text);
    background: var(--py-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.py-header[b-frtjyr0h9t] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.py-header h1[b-frtjyr0h9t] { margin: 0 4px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.3px; }
.py-meta[b-frtjyr0h9t] { flex-grow: 1; color: var(--py-muted); font-size: 14px; padding-top: 6px; }
.py-meta b[b-frtjyr0h9t] { color: var(--py-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.py-intro[b-frtjyr0h9t] { margin: -8px 0 0 0; color: var(--py-muted); font-size: 14px; max-width: 760px; }

/* ---------- Buttons / Eingaben ---------- */
.py-btn[b-frtjyr0h9t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--py-border);
    background: var(--py-surface);
    color: var(--py-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.py-btn svg[b-frtjyr0h9t] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.py-btn:hover:not(:disabled)[b-frtjyr0h9t] { background: var(--py-soft); }
.py-btn.is-primary[b-frtjyr0h9t] { background: var(--py-text); border-color: var(--py-text); color: #fff; }
.py-btn.is-primary:hover:not(:disabled)[b-frtjyr0h9t] { background: #000; }
.py-btn.is-primary svg[b-frtjyr0h9t] { stroke: var(--py-yellow); }
.py-btn.is-small[b-frtjyr0h9t] { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.py-btn:disabled[b-frtjyr0h9t] { opacity: .5; cursor: default; }

.py-icon[b-frtjyr0h9t] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--py-muted);
    cursor: pointer;
    flex: 0 0 30px;
}

.py-icon:hover[b-frtjyr0h9t] { background: var(--py-divider); color: var(--py-text); }
.py-icon svg[b-frtjyr0h9t] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.py-input[b-frtjyr0h9t] {
    height: 36px;
    border: 1px solid var(--py-border);
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    background: var(--py-surface);
    color: var(--py-text);
    min-width: 0;
    width: 100%;
}

.py-btn:focus-visible[b-frtjyr0h9t],
.py-icon:focus-visible[b-frtjyr0h9t],
.py-input:focus-visible[b-frtjyr0h9t] { outline: 2px solid var(--py-accent); outline-offset: 1px; }

.py-alert[b-frtjyr0h9t] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

.py-alert span[b-frtjyr0h9t] { flex-grow: 1; }
.py-alert.is-error[b-frtjyr0h9t] { background: #fdecea; color: var(--py-err); border: 1px solid #f6c7c3; }
.py-alert.is-ok[b-frtjyr0h9t] { background: #e8f5ec; color: var(--py-ok); border: 1px solid #c3e5cd; }
.py-alert button[b-frtjyr0h9t] { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }

/* ---------- Filter ---------- */
.py-filters[b-frtjyr0h9t] { display: flex; gap: 8px; flex-wrap: wrap; }
.py-filters select[b-frtjyr0h9t] { width: auto; flex: 0 1 240px; }

.py-search[b-frtjyr0h9t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    height: 36px;
    border: 1px solid var(--py-border);
    border-radius: 10px;
    padding: 0 10px;
    background: var(--py-surface);
    margin: 0;
}

.py-search svg[b-frtjyr0h9t] { width: 16px; height: 16px; fill: none; stroke: var(--py-muted); stroke-width: 1.8; stroke-linecap: round; flex: 0 0 16px; }
.py-search input[b-frtjyr0h9t] { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; }

/* ---------- Liste ---------- */
.py-cols[b-frtjyr0h9t] { display: flex; gap: 18px; align-items: flex-start; }
.py-card[b-frtjyr0h9t] { background: var(--py-surface); border: 1px solid var(--py-border); border-radius: 14px; overflow: hidden; }
.py-list[b-frtjyr0h9t] { flex: 1; min-width: 0; }
.py-empty[b-frtjyr0h9t] { color: var(--py-muted); padding: 28px 16px; text-align: center; font-size: 14px; }
.py-more[b-frtjyr0h9t] { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--py-divider); }
.py-foot[b-frtjyr0h9t] { padding: 10px 14px; color: var(--py-muted); font-size: 12.5px; border-top: 1px solid var(--py-divider); }

.py-scroll[b-frtjyr0h9t] { overflow-x: auto; }
.py-table[b-frtjyr0h9t] { width: 100%; border-collapse: collapse; font-size: 14px; }

.py-table th[b-frtjyr0h9t] {
    text-align: left;
    font-size: 11.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8e8e93;
    padding: 9px 12px;
    border-bottom: 1px solid var(--py-divider);
    white-space: nowrap;
}

.py-table td[b-frtjyr0h9t] { padding: 8px 12px; border-bottom: 1px solid #f2f1ec; vertical-align: middle; }
.py-table tbody tr[b-frtjyr0h9t] { cursor: pointer; }
.py-table tbody tr:last-child td[b-frtjyr0h9t] { border-bottom: 0; }
.py-table tbody tr:hover td[b-frtjyr0h9t] { background: var(--py-soft); }
.py-table tbody tr.is-sel td[b-frtjyr0h9t] { background: var(--py-yellow-soft); }
.py-table tbody tr.is-sel td:first-child[b-frtjyr0h9t] { box-shadow: inset 3px 0 0 var(--py-yellow); }
.py-table th.py-num[b-frtjyr0h9t] { text-align: right; }

.py-col-check[b-frtjyr0h9t] { width: 34px; padding-right: 0 !important; }
.py-col-check input[b-frtjyr0h9t] { width: 16px; height: 16px; accent-color: #1d1d1f; cursor: pointer; vertical-align: middle; }
.py-table .py-col-cat[b-frtjyr0h9t] { width: 240px; }
.py-col-date[b-frtjyr0h9t] { width: 80px; }

.py-main[b-frtjyr0h9t] { min-width: 0; max-width: 1px; width: 100%; }
.py-name[b-frtjyr0h9t] { display: flex; align-items: center; gap: 6px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.py-bank[b-frtjyr0h9t] { display: block; color: var(--py-muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.py-cat[b-frtjyr0h9t] { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.py-dot[b-frtjyr0h9t] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.py-none[b-frtjyr0h9t] { color: #b0aea7; margin-right: 6px; }

.py-pill[b-frtjyr0h9t] { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.py-pill.is-warn[b-frtjyr0h9t] { background: var(--py-yellow-soft); color: var(--py-warn); }
.py-pill.is-muted[b-frtjyr0h9t] { background: var(--py-divider); color: var(--py-muted); }

.py-num[b-frtjyr0h9t] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.py-amt[b-frtjyr0h9t] { font-weight: 600; }
.py-amt.is-pos[b-frtjyr0h9t] { color: var(--py-ok); }

/* ---------- Detail ---------- */
.py-det[b-frtjyr0h9t] {
    width: 360px;
    flex: 0 0 360px;
    background: #fff;
    border: 1px solid var(--py-border);
    border-radius: 14px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}

.py-dh[b-frtjyr0h9t] { display: flex; align-items: flex-start; gap: 8px; }
.py-dh > div[b-frtjyr0h9t] { flex: 1; min-width: 0; }
.py-dh small[b-frtjyr0h9t] { display: block; color: var(--py-muted); font-size: 13px; }
.py-big[b-frtjyr0h9t] { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.3px; overflow-wrap: anywhere; }

.py-form[b-frtjyr0h9t] { display: flex; flex-direction: column; gap: 12px; }
.py-field[b-frtjyr0h9t] { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.py-field > label[b-frtjyr0h9t] { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.py-orig[b-frtjyr0h9t] { color: var(--py-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.py-orig b[b-frtjyr0h9t] { font-weight: 550; color: var(--py-text-2); }
.py-check[b-frtjyr0h9t] { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; color: var(--py-text-2); cursor: pointer; }
.py-check input[b-frtjyr0h9t] { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: #1d1d1f; }
.py-hint[b-frtjyr0h9t] { margin: 0; color: var(--py-muted); font-size: 12.5px; }
.py-dact[b-frtjyr0h9t] { display: flex; gap: 8px; flex-wrap: wrap; }

.py-sec[b-frtjyr0h9t] { border-top: 1px solid var(--py-divider); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.py-sec h3[b-frtjyr0h9t] { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }

.py-patterns[b-frtjyr0h9t], .py-recent[b-frtjyr0h9t], .py-merge-list[b-frtjyr0h9t] { list-style: none; margin: 0; padding: 0; }
.py-patterns li[b-frtjyr0h9t] { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f2f1ec; }
.py-patterns li:last-child[b-frtjyr0h9t] { border-bottom: 0; }
.py-pat-main[b-frtjyr0h9t] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.py-pat-main b[b-frtjyr0h9t] { font-weight: 600; font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.py-pat-main small[b-frtjyr0h9t] { color: var(--py-muted); font-size: 12px; }

.py-recent a[b-frtjyr0h9t] {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    color: var(--py-text);
    text-decoration: none;
    font-size: 13px;
}

.py-recent a:hover[b-frtjyr0h9t] { background: var(--py-soft); }
.py-rec-date[b-frtjyr0h9t] { color: var(--py-muted); font-variant-numeric: tabular-nums; }
.py-rec-main[b-frtjyr0h9t] { min-width: 0; }
.py-rec-main b[b-frtjyr0h9t], .py-rec-main small[b-frtjyr0h9t] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.py-rec-main b[b-frtjyr0h9t] { font-weight: 600; }
.py-rec-main small[b-frtjyr0h9t] { color: var(--py-muted); font-size: 12px; }
.py-rec-amt[b-frtjyr0h9t] { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.py-rec-amt.is-pos[b-frtjyr0h9t] { color: var(--py-ok); }

/* ---------- Dialog ---------- */
.py-modal-backdrop[b-frtjyr0h9t] { position: fixed; inset: 0; background: rgba(29, 29, 31, .35); z-index: 1050; }

.py-modal[b-frtjyr0h9t] {
    position: fixed;
    z-index: 1051;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    padding: 18px 20px 16px;
    gap: 12px;
}

.py-modal-head[b-frtjyr0h9t] { display: flex; align-items: center; gap: 8px; }
.py-modal-head h2[b-frtjyr0h9t] { flex: 1; margin: 0; font-size: 19px; font-weight: 700; }
.py-modal-text[b-frtjyr0h9t] { margin: 0; font-size: 14.5px; color: var(--py-text-2); line-height: 1.5; }
.py-modal-actions[b-frtjyr0h9t] { display: flex; gap: 8px; justify-content: flex-end; }

.py-merge-list[b-frtjyr0h9t] { border: 1px solid var(--py-divider); border-radius: 10px; }
.py-merge-list li[b-frtjyr0h9t] { border-bottom: 1px solid #f2f1ec; }
.py-merge-list li:last-child[b-frtjyr0h9t] { border-bottom: 0; }
.py-merge-list label[b-frtjyr0h9t] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0; cursor: pointer; }
.py-merge-list label:hover[b-frtjyr0h9t] { background: var(--py-soft); }
.py-merge-list input[type=radio][b-frtjyr0h9t] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: #1d1d1f; margin: 0; }

@media (max-width: 1100px) {
    .py-cols[b-frtjyr0h9t] { flex-direction: column-reverse; align-items: stretch; }
    .py-det[b-frtjyr0h9t] { width: 100%; flex-basis: auto; position: static; }
}

@media (max-width: 640.98px) {
    .py-page[b-frtjyr0h9t] { margin: -1.1rem -1.5rem 0 -1.5rem; padding: 18px 16px 24px 16px; }
    .py-meta[b-frtjyr0h9t] { flex-basis: 100%; order: 1; padding-top: 0; }
    .py-filters select[b-frtjyr0h9t] { flex: 1 1 100%; }
    .py-table .py-col-cat[b-frtjyr0h9t] { width: auto; }
    .py-col-date[b-frtjyr0h9t] { display: none; }
    .py-table td[b-frtjyr0h9t], .py-table th[b-frtjyr0h9t] { padding: 8px 6px; }
}

/* ---------- Handy: Liste als Karten-Zeilen, Details als Vollbild-Blatt ---------- */
@media (max-width: 640.98px) {
    .py-table[b-frtjyr0h9t], .py-table tbody[b-frtjyr0h9t] { display: block; }
    .py-table thead[b-frtjyr0h9t] { display: none; }
    .py-table tbody tr[b-frtjyr0h9t] {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) auto;
        grid-template-areas: "check main amt" "check cat count";
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
        padding: 11px 14px 11px 10px;
        border-bottom: 1px solid #f2f1ec;
    }
    .py-table tbody tr:last-child[b-frtjyr0h9t] { border-bottom: 0; }
    .py-table td[b-frtjyr0h9t] { display: block; padding: 0 !important; border: 0; background: transparent !important; }
    .py-table tbody tr:hover[b-frtjyr0h9t] { background: var(--py-soft); }
    .py-table tbody tr.is-sel[b-frtjyr0h9t] { background: var(--py-yellow-soft); box-shadow: inset 3px 0 0 var(--py-yellow); }
    .py-table tbody tr.is-sel td:first-child[b-frtjyr0h9t] { box-shadow: none; }
    .py-table .py-col-check[b-frtjyr0h9t] { grid-area: check; width: auto; align-self: start; padding-top: 2px !important; }
    .py-col-check input[b-frtjyr0h9t] { width: 18px; height: 18px; }
    .py-table .py-main[b-frtjyr0h9t] { grid-area: main; max-width: none; width: auto; }
    .py-table .py-col-cat[b-frtjyr0h9t] { grid-area: cat; width: auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
    .py-table .py-amt[b-frtjyr0h9t] { grid-area: amt; font-weight: 600; }
    .py-table td.py-num:nth-child(4)[b-frtjyr0h9t] { grid-area: count; color: var(--py-muted); font-size: 12.5px; }
    .py-table td.py-num:nth-child(4)[b-frtjyr0h9t]::after { content: " Umsätze"; }
    .py-table td.py-col-date[b-frtjyr0h9t] { display: none; }
    /* Details als Vollbild-Blatt über der Seite */
    .py-det[b-frtjyr0h9t] {
        position: fixed;
        inset: 0;
        z-index: 1040;
        width: auto;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: py-sheet-in-b-frtjyr0h9t .18s ease-out;
    }
    .py-dh[b-frtjyr0h9t] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        margin: 0 -16px;
        padding: 12px 10px 10px 16px;
        border-bottom: 1px solid #efeee9;
    }
}

@keyframes py-sheet-in-b-frtjyr0h9t { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* /Components/Pages/Permissions.razor.rz.scp.css */
/* Berechtigungen – Matrix Benutzer × Seiten, optisch an /scheduled-tasks angelehnt, Gelb-Akzent wie das Menü. */

.pm-page[b-86lmhwdp4v] {
    --pm-ground: #f6f5f2;
    --pm-surface: #ffffff;
    --pm-border: #e4e2dc;
    --pm-divider: #efeee9;
    --pm-soft: #fbfaf8;
    --pm-text: #1d1d1f;
    --pm-text-2: #4a4a4f;
    --pm-muted: #6e6e73;
    --pm-accent: #1b6ec2;
    --pm-yellow: #ffd84d;
    --pm-yellow-soft: #fff6d1;
    --pm-ok: #1e8e3e;
    --pm-err: #c5221f;
    color: var(--pm-text);
    background: var(--pm-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.pm-header[b-86lmhwdp4v] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pm-header h1[b-86lmhwdp4v] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.pm-meta[b-86lmhwdp4v] {
    flex-grow: 1;
    color: var(--pm-muted);
    font-size: 14px;
    padding-top: 6px;
}

.pm-search[b-86lmhwdp4v] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    padding: 0 10px;
    height: 36px;
    margin: 0;
}

.pm-search svg[b-86lmhwdp4v] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--pm-muted);
    stroke-width: 2;
    stroke-linecap: round;
}

.pm-search input[b-86lmhwdp4v] {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    width: 180px;
    color: var(--pm-text);
}

.pm-search:focus-within[b-86lmhwdp4v] { border-color: var(--pm-accent); }

.pm-alert[b-86lmhwdp4v] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fdecea;
    color: var(--pm-err);
    border: 1px solid #f6c7c3;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

.pm-alert span[b-86lmhwdp4v] { flex-grow: 1; }

.pm-alert button[b-86lmhwdp4v] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pm-empty[b-86lmhwdp4v] {
    color: var(--pm-muted);
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    font-size: 14px;
}

.pm-empty.is-inline[b-86lmhwdp4v] {
    border: 0;
    border-top: 1px solid var(--pm-divider);
    border-radius: 0;
}

/* ---------- Matrix ---------- */
.pm-card[b-86lmhwdp4v] {
    /* hält auch absolut positionierte Kinder (.pm-sr) im Rahmen */
    position: relative;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    overflow: hidden;
}

.pm-scroll[b-86lmhwdp4v] { overflow-x: auto; }

.pm-table[b-86lmhwdp4v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pm-table th[b-86lmhwdp4v] {
    font-weight: 600;
    color: var(--pm-text-2);
    text-align: center;
    vertical-align: bottom;
    padding: 10px 12px;
    background: var(--pm-soft);
    white-space: nowrap;
}

.pm-table thead tr:last-child th[b-86lmhwdp4v] { border-bottom: 1px solid var(--pm-border); }

.pm-table th.pm-user-col[b-86lmhwdp4v] {
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid var(--pm-border);
}

.pm-table th.pm-admin-col[b-86lmhwdp4v],
.pm-table th.pm-quick-col[b-86lmhwdp4v] { border-bottom: 1px solid var(--pm-border); }

.pm-table th.pm-sec[b-86lmhwdp4v] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--pm-muted);
    padding-bottom: 2px;
    border-left: 1px solid var(--pm-divider);
}

.pm-table th.pm-page-col span[b-86lmhwdp4v] { display: block; }

.pm-table th.pm-page-col small[b-86lmhwdp4v] {
    display: block;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--pm-muted);
}

.pm-table td[b-86lmhwdp4v] {
    padding: 10px 12px;
    border-top: 1px solid var(--pm-divider);
    text-align: center;
    vertical-align: middle;
}

.pm-table tbody tr:first-child td[b-86lmhwdp4v] { border-top: 0; }
.pm-table tbody tr:hover td[b-86lmhwdp4v] { background: #fdfcf9; }

.pm-table td.pm-user-col[b-86lmhwdp4v] {
    text-align: left;
    min-width: 240px;
}

.pm-page-col[b-86lmhwdp4v] { min-width: 108px; }
.pm-admin-col[b-86lmhwdp4v] { width: 72px; }
.pm-quick-col[b-86lmhwdp4v] { width: 120px; }

.pm-user[b-86lmhwdp4v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-av[b-86lmhwdp4v] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pm-yellow-soft);
    color: #6b5100;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

tr.is-admin .pm-av[b-86lmhwdp4v] { background: var(--pm-yellow); color: var(--pm-text); }

.pm-user-text[b-86lmhwdp4v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pm-user-text b[b-86lmhwdp4v] { font-weight: 600; }

.pm-user-text small[b-86lmhwdp4v] {
    color: var(--pm-muted);
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pm-tag[b-86lmhwdp4v] {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
}

.pm-tag.is-me[b-86lmhwdp4v] { background: #e8f0fb; color: var(--pm-accent); }
.pm-tag.is-warn[b-86lmhwdp4v] { background: #fdf0dc; color: #9a5b00; }

/* ---------- Haken ---------- */
.pm-check[b-86lmhwdp4v] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1.5px solid #d1cfc8;
    background: var(--pm-surface);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.pm-check svg[b-86lmhwdp4v] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--pm-text);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .12s, transform .12s;
}

.pm-check:hover[b-86lmhwdp4v] { border-color: #b9b6ac; background: #faf9f6; }

.pm-check.is-on[b-86lmhwdp4v] {
    background: var(--pm-yellow);
    border-color: #f0c419;
}

.pm-check.is-on svg[b-86lmhwdp4v] { opacity: 1; transform: none; }
.pm-check.is-on:hover[b-86lmhwdp4v] { background: #ffcf26; }

.pm-check.is-locked[b-86lmhwdp4v],
.pm-check.is-locked:hover[b-86lmhwdp4v] {
    background: #f1efe9;
    border-color: #e4e2dc;
    cursor: default;
}

.pm-check.is-locked svg[b-86lmhwdp4v] { stroke: #a1a1a6; }

.pm-check:disabled:not(.is-locked)[b-86lmhwdp4v] { opacity: .55; cursor: progress; }

/* ---------- Admin-Schalter ---------- */
.pm-switch[b-86lmhwdp4v] {
    width: 40px;
    height: 23px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: #d6d4ce;
    position: relative;
    cursor: pointer;
    transition: background .15s;
    vertical-align: middle;
}

.pm-switch[b-86lmhwdp4v]::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: left .15s;
}

.pm-switch.is-on[b-86lmhwdp4v] { background: var(--pm-text); }
.pm-switch.is-on[b-86lmhwdp4v]::after { left: 19.5px; background: var(--pm-yellow); }
.pm-switch:disabled[b-86lmhwdp4v] { opacity: .5; cursor: default; }

.pm-check:focus-visible[b-86lmhwdp4v],
.pm-switch:focus-visible[b-86lmhwdp4v],
.pm-quick button:focus-visible[b-86lmhwdp4v] { outline: 2px solid var(--pm-accent); outline-offset: 2px; }

/* ---------- Schnellauswahl ---------- */
.pm-quick[b-86lmhwdp4v] {
    display: inline-flex;
    background: #ebe9e3;
    border-radius: 9px;
    padding: 2px;
}

.pm-quick button[b-86lmhwdp4v] {
    border: 0;
    background: transparent;
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 7px;
    color: var(--pm-text-2);
    cursor: pointer;
}

.pm-quick button:hover:not(:disabled)[b-86lmhwdp4v] { background: var(--pm-surface); color: var(--pm-text); }
.pm-quick button:disabled[b-86lmhwdp4v] { opacity: .5; cursor: progress; }

.pm-sr[b-86lmhwdp4v] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.pm-hint[b-86lmhwdp4v] {
    color: var(--pm-muted);
    font-size: 13px;
    margin: 0;
}

/* ---------- Gespeichert-Hinweis ---------- */
.pm-toast[b-86lmhwdp4v] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: var(--pm-text);
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    animation: pm-toast-b-86lmhwdp4v 2.2s ease forwards;
    pointer-events: none;
}

@keyframes pm-toast-b-86lmhwdp4v {
    0% { opacity: 0; transform: translateY(6px); }
    10% { opacity: 1; transform: none; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 640.98px) {
    .pm-page[b-86lmhwdp4v] {
        margin: -1.1rem -1.5rem 0 -1.5rem;
        padding: 18px 16px 24px 16px;
    }

    .pm-search[b-86lmhwdp4v] { width: 100%; }
    .pm-search input[b-86lmhwdp4v] { width: 100%; }
    /* Benutzerspalte bleibt beim seitlichen Scrollen stehen */
    .pm-table .pm-user-col[b-86lmhwdp4v] {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 190px;
        max-width: 190px;
        background: var(--pm-surface);
        box-shadow: 1px 0 0 var(--pm-divider);
    }

    .pm-table th.pm-user-col[b-86lmhwdp4v] { background: var(--pm-soft); }
    .pm-user-text small[b-86lmhwdp4v] { word-break: break-all; }
}

/* ---------- Handy: statt der breiten Matrix eine Karte je Benutzer ---------- */
@media (max-width: 640.98px) {
    .pm-scroll[b-86lmhwdp4v] { overflow: visible; }
    .pm-table[b-86lmhwdp4v], .pm-table tbody[b-86lmhwdp4v] { display: block; width: 100%; }
    .pm-table thead[b-86lmhwdp4v] { display: none; }
    .pm-table tbody tr[b-86lmhwdp4v] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 14px 14px 12px;
        border-bottom: 1px solid var(--pm-divider);
    }
    .pm-table tbody tr:last-child[b-86lmhwdp4v] { border-bottom: 0; }
    .pm-table tbody td[b-86lmhwdp4v] { display: block; padding: 0; border: 0; }
    .pm-table tbody .pm-user-col[b-86lmhwdp4v] {
        position: static;
        flex: 1 1 60%;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        background: transparent;
    }
    .pm-table tbody .pm-admin-col[b-86lmhwdp4v] { display: flex; align-items: center; gap: 8px; flex: none; width: auto; }
    .pm-table tbody .pm-admin-col[b-86lmhwdp4v]::before { content: "Admin"; font-size: 13px; color: var(--pm-muted); }
    .pm-table tbody .pm-page-col[b-86lmhwdp4v] {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
    }
    .pm-table tbody .pm-page-col:nth-child(3)[b-86lmhwdp4v] { margin-top: 6px; }
    .pm-table tbody .pm-page-col[b-86lmhwdp4v]::after {
        content: attr(data-label);
        font-size: 14px;
        color: var(--pm-text-2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pm-table tbody tr.is-admin .pm-page-col[b-86lmhwdp4v]::after { color: var(--pm-muted); }
    .pm-table tbody .pm-quick-col[b-86lmhwdp4v] { flex: 1 1 100%; }
    .pm-table tbody .pm-quick-col:empty[b-86lmhwdp4v] { display: none; }
    .pm-user-text small[b-86lmhwdp4v] { word-break: normal; overflow-wrap: anywhere; }
}

/* ---------- Freigabe neuer Konten ---------- */
.pm-alert.is-ok[b-86lmhwdp4v] { background: #e9f6ec; color: #145523; border-color: #cbe8d2; }
.pm-alert.is-warn[b-86lmhwdp4v] { background: #fff4e5; color: #7a4500; border-color: #f6d7a7; }

.pm-pending[b-86lmhwdp4v] {
    background: var(--pm-surface);
    border: 1px solid #f0dc8f;
    border-radius: 16px;
    box-shadow: 0 0 0 4px var(--pm-yellow-soft);
    padding: 16px 18px 8px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-pending-head[b-86lmhwdp4v] { display: flex; gap: 12px; align-items: flex-start; }

.pm-pending-icon[b-86lmhwdp4v] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pm-yellow);
    color: var(--pm-text);
}

.pm-pending-icon svg[b-86lmhwdp4v],
.pm-btn-approve svg[b-86lmhwdp4v] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-pending-head h2[b-86lmhwdp4v] { margin: 0; font-size: 17px; font-weight: 700; }
.pm-pending-head p[b-86lmhwdp4v] { margin: 2px 0 0 0; font-size: 13.5px; color: var(--pm-muted); }

.pm-pending-list[b-86lmhwdp4v] { list-style: none; margin: 0; padding: 0; }

.pm-pending-list li[b-86lmhwdp4v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-top: 1px solid var(--pm-divider);
    border-radius: 10px;
    transition: background .3s;
}

.pm-pending-list li .pm-user-text[b-86lmhwdp4v] { flex: 1; }

.pm-pending-list li.is-highlight[b-86lmhwdp4v] {
    background: var(--pm-yellow-soft);
    border-top-color: transparent;
    animation: pm-flash-b-86lmhwdp4v 1.6s ease-out 1;
}

@keyframes pm-flash-b-86lmhwdp4v {
    0% { box-shadow: 0 0 0 0 rgba(255, 201, 40, .7); }
    100% { box-shadow: 0 0 0 10px rgba(255, 201, 40, 0); }
}

.pm-pending-acts[b-86lmhwdp4v] { display: flex; gap: 8px; flex-shrink: 0; }

.pm-btn-approve[b-86lmhwdp4v],
.pm-btn-reject[b-86lmhwdp4v] {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.pm-btn-approve[b-86lmhwdp4v] { border: 0; background: var(--pm-yellow); color: var(--pm-text); }
.pm-btn-approve:hover[b-86lmhwdp4v] { background: #ffc928; }
.pm-btn-approve svg[b-86lmhwdp4v] { width: 17px; height: 17px; }

.pm-btn-reject[b-86lmhwdp4v] { border: 1px solid var(--pm-border); background: var(--pm-surface); color: var(--pm-err); font-weight: 600; }
.pm-btn-reject:hover[b-86lmhwdp4v] { background: #fdecea; }

.pm-btn-approve:disabled[b-86lmhwdp4v],
.pm-btn-reject:disabled[b-86lmhwdp4v] { opacity: .55; cursor: default; }

@media (max-width: 640.98px) {
    .pm-pending-list li[b-86lmhwdp4v] { flex-wrap: wrap; }
    .pm-pending-acts[b-86lmhwdp4v] { width: 100%; justify-content: flex-end; }
}
/* /Components/Pages/Reminders.razor.rz.scp.css */
/* Erinnerungen – an die Erinnerungen-App angelehnt (siehe Design-Entwurf). */

.rem-page[b-q9zzdutqam] {
    --rem-ground: #f6f5f2;
    --rem-surface: #ffffff;
    --rem-border: #e4e2dc;
    --rem-divider: #efeee9;
    --rem-text: #1d1d1f;
    --rem-text-2: #4a4a4f;
    --rem-muted: #6e6e73;
    --rem-accent: #1b6ec2;
    --rem-danger: #c5221f;
    --rem-selected: #e8f1fb;
    --rem-prio: #c45500;
    color: var(--rem-text);
    background: var(--rem-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 0 32px;
    height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------- Kopfzeile ---------- */
.rem-header[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rem-header h1[b-q9zzdutqam] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    flex-grow: 1;
}

.rem-sync-pill[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--rem-surface);
    border: 1px solid var(--rem-border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--rem-text-2);
    white-space: nowrap;
}

.rem-sync-dot[b-q9zzdutqam] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1e8e3e;
}

.rem-sync-dot.is-stale[b-q9zzdutqam] { background: #b06000; }
.rem-sync-dot.is-off[b-q9zzdutqam] { background: var(--rem-muted); }
.rem-sync-dot.is-err[b-q9zzdutqam] { background: #c5221f; }

.rem-icon-btn[b-q9zzdutqam] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--rem-border);
    background: var(--rem-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rem-text);
    cursor: pointer;
}

.rem-icon-btn:hover[b-q9zzdutqam] { background: #f0efea; }
.rem-icon-btn:disabled[b-q9zzdutqam] { opacity: .5; cursor: default; }
.rem-icon-btn.is-spinning svg[b-q9zzdutqam] { animation: rem-spin-b-q9zzdutqam 1s linear infinite; }

@keyframes rem-spin-b-q9zzdutqam { to { transform: rotate(360deg); } }

.rem-alert[b-q9zzdutqam] {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.rem-alert.is-error[b-q9zzdutqam] { background: #fbe9e8; color: #8a1714; border: 1px solid #f1c3c0; }
.rem-alert.is-info[b-q9zzdutqam] { background: #e8f3ea; color: #155d2a; border: 1px solid #bfe0c6; }
.rem-alert.is-warn[b-q9zzdutqam] { background: #fdf3e2; color: #6b3d00; border: 1px solid #f1d7a8; }

.rem-alert button[b-q9zzdutqam] {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Layout ---------- */
.rem-layout[b-q9zzdutqam] {
    flex-grow: 1;
    display: flex;
    gap: 24px;
    min-height: 0;
}

/* ---------- Linke Spalte ---------- */
.rem-nav[b-q9zzdutqam] {
    width: 272px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Viele Listen: Spalte scrollt für sich, statt unten aus der Seite zu laufen. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 24px;
    box-sizing: border-box;
}

.rem-tiles[b-q9zzdutqam] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rem-tile[b-q9zzdutqam] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--rem-border);
    background: var(--rem-surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.rem-tile:hover[b-q9zzdutqam] { border-color: #c9c6be; }
.rem-tile.is-active[b-q9zzdutqam] { border: 2px solid var(--rem-accent); padding: 11px; }

.rem-tile-top[b-q9zzdutqam] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rem-tile-count[b-q9zzdutqam] {
    font-size: 22px;
    font-weight: 700;
}

.rem-tile-label[b-q9zzdutqam] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rem-text-2);
}

.rem-badge-icon[b-q9zzdutqam] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.rem-badge-icon.is-small[b-q9zzdutqam] { width: 26px; height: 26px; }

.rem-section-label[b-q9zzdutqam] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--rem-muted);
    padding: 0 10px 6px 10px;
}

.rem-section-head[b-q9zzdutqam] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-right: 10px;
}

.rem-section-head .rem-section-label[b-q9zzdutqam] { flex-grow: 1; }

.rem-text-btn[b-q9zzdutqam] {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--rem-accent);
    cursor: pointer;
}

.rem-text-btn.is-muted[b-q9zzdutqam] { color: var(--rem-muted); }
.rem-text-btn.is-strong[b-q9zzdutqam] { font-weight: 700; }
.rem-text-btn:disabled[b-q9zzdutqam] { opacity: .5; cursor: default; }

.rem-sort-hint[b-q9zzdutqam] {
    font-size: 12px;
    color: var(--rem-muted);
    padding: 0 10px 6px 10px;
}

.rem-sort-row[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 8px;
    margin-bottom: 4px;
    border-radius: 8px;
    border: 1px solid var(--rem-border);
    background: var(--rem-surface);
    font-size: 15px;
    cursor: grab;
    user-select: none;
}

.rem-sort-row.is-dragging[b-q9zzdutqam] { opacity: .45; }
.rem-sort-row.is-drop-target[b-q9zzdutqam] { border-color: var(--rem-accent); box-shadow: 0 0 0 2px rgba(27, 110, 194, .18); }

.rem-drag-handle[b-q9zzdutqam] { color: var(--rem-muted); display: inline-flex; }

.rem-sort-name[b-q9zzdutqam] {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-sort-move[b-q9zzdutqam] {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: var(--rem-ground);
    color: var(--rem-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rem-sort-move:hover:not(:disabled)[b-q9zzdutqam] { background: #e3e1da; }
.rem-sort-move:disabled[b-q9zzdutqam] { opacity: .35; cursor: default; }

.rem-lists[b-q9zzdutqam] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rem-list-btn[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--rem-text);
    cursor: pointer;
    text-align: left;
}

.rem-list-btn:hover[b-q9zzdutqam] { background: #ecebe6; }
.rem-list-btn.is-active[b-q9zzdutqam] { background: #e3e1da; font-weight: 600; }
.rem-list-btn.is-drop-target[b-q9zzdutqam] { background: var(--rem-selected); box-shadow: inset 0 0 0 2px var(--rem-accent); }

.rem-row[draggable="true"][b-q9zzdutqam] { cursor: grab; }
.rem-row.is-dragging[b-q9zzdutqam] { opacity: .45; }

.rem-list-name[b-q9zzdutqam] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rem-list-name span:first-child[b-q9zzdutqam] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-list-hint[b-q9zzdutqam] {
    font-size: 12px;
    font-weight: 400;
    color: var(--rem-muted);
}

.rem-list-count[b-q9zzdutqam] {
    font-size: 14px;
    color: var(--rem-muted);
}

/* Listen-Auswahl (nur schmale Bildschirme) */
.rem-picker[b-q9zzdutqam] {
    display: none;
    position: relative;
}

.rem-picker-btn[b-q9zzdutqam] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px 0 8px;
    border-radius: 999px;
    border: 1px solid var(--rem-border);
    background: var(--rem-surface);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--rem-text);
    max-width: 100%;
    cursor: pointer;
}

.rem-picker-label[b-q9zzdutqam] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-picker-chevron[b-q9zzdutqam] {
    flex-shrink: 0;
    color: var(--rem-muted);
    transition: transform .15s ease;
}

.rem-picker-chevron.is-open[b-q9zzdutqam] { transform: rotate(180deg); }

.rem-picker-backdrop[b-q9zzdutqam] {
    position: fixed;
    inset: 0;
    z-index: 1044;
}

.rem-picker-menu[b-q9zzdutqam] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1045;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: var(--rem-surface);
    border: 1px solid var(--rem-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 20, 22, .18);
}

.rem-picker-section[b-q9zzdutqam] {
    padding: 10px 10px 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rem-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-top: 1px solid var(--rem-divider);
    margin-top: 4px;
}

.rem-picker-item[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--rem-text);
    text-align: left;
    cursor: pointer;
}

.rem-picker-item.is-active[b-q9zzdutqam] { background: var(--rem-selected); font-weight: 600; }

.rem-picker-name[b-q9zzdutqam] {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-picker-count[b-q9zzdutqam] { font-size: 14px; color: var(--rem-muted); }

/* Variante im Detail-Fenster: so breit wie die anderen Felder */
.rem-picker.is-field .rem-picker-btn[b-q9zzdutqam] {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border-color: #d9d6ce;
    background: #fff;
    font-weight: 400;
}

.rem-picker.is-field .rem-picker-label[b-q9zzdutqam] { flex-grow: 1; text-align: left; }

.rem-picker.is-field .rem-picker-menu[b-q9zzdutqam] { right: 0; min-width: 0; max-height: 45vh; }

/* ---------- Mittlere Spalte ---------- */
.rem-main[b-q9zzdutqam] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--rem-surface);
    border: 1px solid var(--rem-border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.rem-main-head[b-q9zzdutqam] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 20px 24px 12px 24px;
}

.rem-main-head h2[b-q9zzdutqam] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.rem-main-sub[b-q9zzdutqam] {
    font-size: 15px;
    color: var(--rem-muted);
    flex-grow: 1;
}

.rem-search[b-q9zzdutqam] {
    width: 220px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--rem-border);
    border-radius: 8px;
    background: var(--rem-ground);
    font: inherit;
    font-size: 14px;
}

.rem-quickadd[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 24px 8px 24px;
    padding: 10px 14px;
    border: 1px dashed #c9c6be;
    border-radius: 10px;
}

.rem-quickadd:focus-within[b-q9zzdutqam] { border-style: solid; border-color: var(--rem-accent); }

.rem-quickadd input[b-q9zzdutqam] {
    flex-grow: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    background: transparent;
}

.rem-quickadd-hint[b-q9zzdutqam] {
    font-size: 13px;
    color: var(--rem-muted);
    white-space: nowrap;
}

.rem-items[b-q9zzdutqam] {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 24px;
}

.rem-group-title[b-q9zzdutqam] {
    padding: 16px 24px 6px 24px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rem-muted);
}

.rem-group-title.is-danger[b-q9zzdutqam] { color: var(--rem-danger); }

.rem-row[b-q9zzdutqam] {
    display: flex;
    gap: 14px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--rem-divider);
    align-items: flex-start;
}

.rem-row[b-q9zzdutqam] { position: relative; transition: background-color .12s ease; }
.rem-row:hover[b-q9zzdutqam] { background: #fafaf8; }
.rem-row.is-selected[b-q9zzdutqam],
.rem-row.is-selected:hover[b-q9zzdutqam] {
    background: var(--rem-selected);
    border-bottom-color: rgba(27, 110, 194, .14);
}
.rem-row.is-selected[b-q9zzdutqam]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--rem-accent);
}
.rem-row.is-selected .rem-row-meta[b-q9zzdutqam] { color: var(--rem-text-2); }
.rem-row-body:focus-visible[b-q9zzdutqam] { outline: 2px solid var(--rem-accent); outline-offset: 4px; border-radius: 4px; }

.rem-check[b-q9zzdutqam] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rem-accent);
}

.rem-check:disabled[b-q9zzdutqam] { cursor: default; opacity: .6; }
.rem-check svg[b-q9zzdutqam] { color: #fff; }

.rem-row-body[b-q9zzdutqam] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.rem-row-title[b-q9zzdutqam] { font-size: 15px; overflow-wrap: anywhere; }
.rem-row.is-selected .rem-row-title[b-q9zzdutqam] { font-weight: 600; }
.rem-row.is-done .rem-row-title[b-q9zzdutqam] { color: var(--rem-muted); text-decoration: line-through; }
.rem-row-prio[b-q9zzdutqam] { color: var(--rem-prio); font-weight: 700; margin-right: 6px; }
.rem-row-sub[b-q9zzdutqam] { color: var(--rem-muted); margin-right: 4px; }

.rem-row-notes[b-q9zzdutqam] {
    font-size: 13px;
    color: var(--rem-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-line;
}

.rem-row-meta[b-q9zzdutqam] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: var(--rem-muted);
    align-items: center;
}

.rem-row-meta > span[b-q9zzdutqam] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rem-meta-overdue[b-q9zzdutqam] { color: var(--rem-danger); font-weight: 600; }

.rem-dot[b-q9zzdutqam] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.rem-link-btn[b-q9zzdutqam] {
    margin: 14px 24px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--rem-accent);
    cursor: pointer;
}

/* Erledigte anzeigen / ausblenden */
.rem-completed-bar[b-q9zzdutqam] {
    display: flex;
    justify-content: center;
    padding: 16px 24px 20px 24px;
}

.rem-completed-btn[b-q9zzdutqam] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--rem-border);
    border-radius: 999px;
    background: var(--rem-surface);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--rem-text-2);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.rem-completed-btn svg[b-q9zzdutqam] { color: var(--rem-muted); flex-shrink: 0; }

.rem-completed-btn:hover[b-q9zzdutqam] {
    background: var(--rem-selected);
    border-color: rgba(27, 110, 194, .3);
    color: var(--rem-accent);
}

.rem-completed-btn:hover svg[b-q9zzdutqam] { color: var(--rem-accent); }

.rem-completed-btn:focus-visible[b-q9zzdutqam] {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .2);
}

.rem-empty[b-q9zzdutqam] {
    padding: 48px 24px;
    text-align: center;
    color: var(--rem-muted);
    font-size: 15px;
}

/* ---------- Rechte Spalte: Details ---------- */
.rem-detail[b-q9zzdutqam] {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    box-sizing: border-box;
    background: var(--rem-surface);
    border: 1px solid var(--rem-border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    overflow-y: auto;
}

.rem-detail-head[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rem-detail-head h2[b-q9zzdutqam] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    flex-grow: 1;
}

.rem-close[b-q9zzdutqam] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: var(--rem-ground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rem-text-2);
    cursor: pointer;
}

.rem-field[b-q9zzdutqam] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--rem-text-2);
}

.rem-field input[b-q9zzdutqam],
.rem-field select[b-q9zzdutqam],
.rem-field textarea[b-q9zzdutqam] {
    box-sizing: border-box;
    border: 1px solid #d9d6ce;
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    color: var(--rem-text);
    background: #fff;
}

.rem-field input[b-q9zzdutqam],
.rem-field select[b-q9zzdutqam] {
    height: 40px;
    padding: 0 10px;
}

.rem-field textarea[b-q9zzdutqam] {
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 76px;
}

.rem-field input:focus[b-q9zzdutqam],
.rem-field select:focus[b-q9zzdutqam],
.rem-field textarea:focus[b-q9zzdutqam] {
    outline: 0;
    border-color: var(--rem-accent);
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .15);
}

.rem-field-row[b-q9zzdutqam] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rem-toggle[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--rem-text);
}

.rem-toggle input[b-q9zzdutqam] { width: 18px; height: 18px; }

.rem-segment[b-q9zzdutqam] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 3px;
    background: #f0efea;
    border-radius: 9px;
}

.rem-segment button[b-q9zzdutqam] {
    height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--rem-text-2);
    cursor: pointer;
}

.rem-segment button.is-active[b-q9zzdutqam] {
    background: #fff;
    font-weight: 600;
    color: var(--rem-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.rem-detail-meta[b-q9zzdutqam] {
    font-size: 12px;
    color: var(--rem-muted);
    margin-top: auto;
}

.rem-detail-actions[b-q9zzdutqam] {
    display: flex;
    gap: 10px;
    padding-bottom: 20px;
}

.rem-btn-primary[b-q9zzdutqam] {
    flex-grow: 1;
    height: 42px;
    border: 0;
    border-radius: 9px;
    background: var(--rem-accent);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.rem-btn-primary:hover[b-q9zzdutqam] { background: #185fa8; }
.rem-btn-primary:disabled[b-q9zzdutqam] { opacity: .55; cursor: default; }

.rem-btn-delete[b-q9zzdutqam] {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #e6b8b6;
    border-radius: 9px;
    background: #fff;
    color: var(--rem-danger);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.rem-btn-delete.is-confirm[b-q9zzdutqam] { background: var(--rem-danger); color: #fff; border-color: var(--rem-danger); }

.rem-fab[b-q9zzdutqam] {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: var(--rem-accent);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(27, 110, 194, .35);
    z-index: 20;
    cursor: pointer;
}

/* ---------- Responsiv ---------- */
@media (max-width: 640.98px) {
    /* MainLayout: article hat hier px-4 (1.5rem) statt 2rem links */
    .rem-page[b-q9zzdutqam] { margin-left: -1.5rem; }
}

@media (max-width: 1199.98px) {
    .rem-nav[b-q9zzdutqam] { width: 232px; }
    .rem-detail[b-q9zzdutqam] { width: 300px; }
}

@media (max-width: 991.98px) {
    .rem-page[b-q9zzdutqam] {
        height: auto;
        min-height: calc(100vh - 3.5rem);
        padding: 16px 16px 0 16px;
        gap: 14px;
    }

    .rem-items[b-q9zzdutqam] { overflow-y: visible; padding-bottom: 96px; }

    .rem-header h1[b-q9zzdutqam] { font-size: 26px; }
    .rem-sync-pill span:last-child[b-q9zzdutqam] { display: none; }
    .rem-nav[b-q9zzdutqam] { display: none; }
    .rem-picker[b-q9zzdutqam] { display: block; }
    .rem-list-select[b-q9zzdutqam] { display: none; }
    .rem-search[b-q9zzdutqam] { width: 100%; order: 3; }
    .rem-main-head[b-q9zzdutqam] { padding: 16px 16px 10px 16px; }
    .rem-quickadd[b-q9zzdutqam] { margin: 0 16px 6px 16px; }
    .rem-quickadd-hint[b-q9zzdutqam] { display: none; }
    .rem-row[b-q9zzdutqam] { padding: 14px 16px; }
    .rem-check[b-q9zzdutqam] { width: 26px; height: 26px; }
    .rem-group-title[b-q9zzdutqam] { padding: 14px 16px 6px 16px; }
    .rem-fab[b-q9zzdutqam] { display: inline-flex; }

    /* Details als Vollbild-Ansicht */
    .rem-detail[b-q9zzdutqam] {
        position: fixed;
        inset: 0;
        width: auto;
        border-radius: 0;
        border: 0;
        z-index: 30;
        padding: 16px;
    }
}

/* ---------- Einstellungen: CalDAV-Zugang ---------- */
.rem-alert-action[b-q9zzdutqam] {
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    opacity: .9;
}

.rem-modal-backdrop[b-q9zzdutqam] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 22, .35);
    z-index: 40;
}

.rem-modal[b-q9zzdutqam] {
    position: fixed;
    z-index: 41;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 20px 4px 20px;
    background: var(--rem-surface);
    border: 1px solid var(--rem-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.rem-modal-text[b-q9zzdutqam] {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--rem-text-2);
}

.rem-modal-hint[b-q9zzdutqam] {
    margin-top: -8px;
    font-size: 12px;
    color: var(--rem-muted);
}

.rem-modal .rem-alert[b-q9zzdutqam] { margin: 0; }
.rem-modal .rem-detail-actions[b-q9zzdutqam] { padding-bottom: 4px; }

.rem-btn-secondary[b-q9zzdutqam] {
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d9d6ce;
    border-radius: 9px;
    background: var(--rem-surface);
    color: var(--rem-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rem-btn-secondary:disabled[b-q9zzdutqam] { opacity: .5; cursor: default; }

.rem-link-btn.is-danger[b-q9zzdutqam] {
    margin: 0 0 14px 0;
    align-self: flex-start;
    color: var(--rem-danger);
}

.rem-link-btn:disabled[b-q9zzdutqam] { opacity: .5; cursor: default; }

/* ---------- Liste teilen ---------- */
.rem-share-btn[b-q9zzdutqam] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--rem-border);
    border-radius: 15px;
    background: var(--rem-surface);
    color: var(--rem-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    align-self: center;
}

.rem-share-btn:hover:not(:disabled)[b-q9zzdutqam] { border-color: #c9c6be; }
.rem-share-btn:disabled[b-q9zzdutqam] { opacity: .5; cursor: default; }
.rem-share-btn.is-shared[b-q9zzdutqam] { color: var(--rem-accent); border-color: rgba(27, 110, 194, .35); background: var(--rem-selected); }

.rem-share-list[b-q9zzdutqam] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rem-border);
    border-radius: 9px;
}

.rem-share-list li[b-q9zzdutqam] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--rem-text);
}

.rem-share-list li + li[b-q9zzdutqam] { border-top: 1px solid var(--rem-divider); }

.rem-share-avatar[b-q9zzdutqam] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rem-selected);
    color: var(--rem-accent);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rem-share-name[b-q9zzdutqam] { flex-grow: 1; font-size: 14px; }

.rem-text-btn.is-danger[b-q9zzdutqam] { color: var(--rem-danger); }

/* Handy: Detail-Ansicht liegt über der stehenbleibenden Menü-Leiste und scrollt für sich. */
@media (max-width: 991.98px) {
    .rem-detail[b-q9zzdutqam] {
        z-index: 1040;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* /Components/Pages/Rules.razor.rz.scp.css */
/* Regeln – gleiche Optik wie /payees. */

.ru-page[b-tarq7oe2m6] {
    --ru-ground: #f6f5f2;
    --ru-surface: #ffffff;
    --ru-border: #e4e2dc;
    --ru-divider: #efeee9;
    --ru-soft: #fbfaf8;
    --ru-text: #1d1d1f;
    --ru-text-2: #4a4a4f;
    --ru-muted: #6e6e73;
    --ru-accent: #1b6ec2;
    --ru-yellow: #ffd84d;
    --ru-yellow-soft: #fff6d1;
    --ru-ok: #1e8e3e;
    --ru-warn: #9a6700;
    --ru-err: #c5221f;
    color: var(--ru-text);
    background: var(--ru-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.ru-header[b-tarq7oe2m6] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ru-header h1[b-tarq7oe2m6] { margin: 0 4px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.3px; }
.ru-meta[b-tarq7oe2m6] { flex-grow: 1; color: var(--ru-muted); font-size: 14px; padding-top: 6px; }
.ru-meta b[b-tarq7oe2m6] { color: var(--ru-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ru-intro[b-tarq7oe2m6] { margin: -8px 0 0 0; color: var(--ru-muted); font-size: 14px; max-width: 760px; }

/* ---------- Buttons / Eingaben ---------- */
.ru-btn[b-tarq7oe2m6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--ru-border);
    background: var(--ru-surface);
    color: var(--ru-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.ru-btn svg[b-tarq7oe2m6] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ru-btn:hover:not(:disabled)[b-tarq7oe2m6] { background: var(--ru-soft); }
.ru-btn.is-primary[b-tarq7oe2m6] { background: var(--ru-text); border-color: var(--ru-text); color: #fff; }
.ru-btn.is-primary:hover:not(:disabled)[b-tarq7oe2m6] { background: #000; }
.ru-btn.is-primary svg[b-tarq7oe2m6] { stroke: var(--ru-yellow); }
.ru-btn.is-small[b-tarq7oe2m6] { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.ru-btn:disabled[b-tarq7oe2m6] { opacity: .5; cursor: default; }

.ru-icon[b-tarq7oe2m6] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ru-muted);
    cursor: pointer;
    flex: 0 0 30px;
}

.ru-icon:hover[b-tarq7oe2m6] { background: var(--ru-divider); color: var(--ru-text); }
.ru-icon svg[b-tarq7oe2m6] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.ru-input[b-tarq7oe2m6] {
    height: 36px;
    border: 1px solid var(--ru-border);
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    background: var(--ru-surface);
    color: var(--ru-text);
    min-width: 0;
    width: 100%;
}

.ru-btn:focus-visible[b-tarq7oe2m6],
.ru-icon:focus-visible[b-tarq7oe2m6],
.ru-input:focus-visible[b-tarq7oe2m6] { outline: 2px solid var(--ru-accent); outline-offset: 1px; }

.ru-alert[b-tarq7oe2m6] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

.ru-alert span[b-tarq7oe2m6] { flex-grow: 1; }
.ru-alert.is-error[b-tarq7oe2m6] { background: #fdecea; color: var(--ru-err); border: 1px solid #f6c7c3; }
.ru-alert.is-ok[b-tarq7oe2m6] { background: #e8f5ec; color: var(--ru-ok); border: 1px solid #c3e5cd; }
.ru-alert button[b-tarq7oe2m6] { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }

/* ---------- Filter ---------- */
.ru-filters[b-tarq7oe2m6] { display: flex; gap: 8px; flex-wrap: wrap; }
.ru-filters select[b-tarq7oe2m6] { width: auto; flex: 0 1 240px; }

.ru-search[b-tarq7oe2m6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    height: 36px;
    border: 1px solid var(--ru-border);
    border-radius: 10px;
    padding: 0 10px;
    background: var(--ru-surface);
    margin: 0;
}

.ru-search svg[b-tarq7oe2m6] { width: 16px; height: 16px; fill: none; stroke: var(--ru-muted); stroke-width: 1.8; stroke-linecap: round; flex: 0 0 16px; }
.ru-search input[b-tarq7oe2m6] { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; }

/* ---------- Liste ---------- */
.ru-cols[b-tarq7oe2m6] { display: flex; gap: 18px; align-items: flex-start; }
.ru-card[b-tarq7oe2m6] { background: var(--ru-surface); border: 1px solid var(--ru-border); border-radius: 14px; overflow: hidden; }
.ru-list[b-tarq7oe2m6] { flex: 1; min-width: 0; }
.ru-empty[b-tarq7oe2m6] { color: var(--ru-muted); padding: 28px 16px; text-align: center; font-size: 14px; }
.ru-more[b-tarq7oe2m6] { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--ru-divider); }
.ru-foot[b-tarq7oe2m6] { padding: 10px 14px; color: var(--ru-muted); font-size: 12.5px; border-top: 1px solid var(--ru-divider); }

.ru-scroll[b-tarq7oe2m6] { overflow-x: auto; }
.ru-table[b-tarq7oe2m6] { width: 100%; border-collapse: collapse; font-size: 14px; }

.ru-table th[b-tarq7oe2m6] {
    text-align: left;
    font-size: 11.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8e8e93;
    padding: 9px 12px;
    border-bottom: 1px solid var(--ru-divider);
    white-space: nowrap;
}

.ru-table td[b-tarq7oe2m6] { padding: 8px 12px; border-bottom: 1px solid #f2f1ec; vertical-align: middle; }
.ru-table tbody tr[b-tarq7oe2m6] { cursor: pointer; }
.ru-table tbody tr:last-child td[b-tarq7oe2m6] { border-bottom: 0; }
.ru-table tbody tr:hover td[b-tarq7oe2m6] { background: var(--ru-soft); }
.ru-table tbody tr.is-sel td[b-tarq7oe2m6] { background: var(--ru-yellow-soft); }
.ru-table tbody tr.is-sel td:first-child[b-tarq7oe2m6] { box-shadow: inset 3px 0 0 var(--ru-yellow); }
.ru-table th.ru-num[b-tarq7oe2m6] { text-align: right; }

.ru-col-check[b-tarq7oe2m6] { width: 34px; padding-right: 0 !important; }
.ru-col-check input[b-tarq7oe2m6] { width: 16px; height: 16px; accent-color: #1d1d1f; cursor: pointer; vertical-align: middle; }
.ru-table .ru-col-cat[b-tarq7oe2m6] { width: 220px; }
.ru-col-date[b-tarq7oe2m6] { width: 80px; }

.ru-main[b-tarq7oe2m6] { min-width: 0; max-width: 1px; width: 100%; }
.ru-name[b-tarq7oe2m6] { display: flex; align-items: center; gap: 6px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ru-bank[b-tarq7oe2m6] { display: block; color: var(--ru-muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ru-cat[b-tarq7oe2m6] { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.ru-dot[b-tarq7oe2m6] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.ru-none[b-tarq7oe2m6] { color: #b0aea7; margin-right: 6px; }

.ru-pill[b-tarq7oe2m6] { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.ru-pill.is-warn[b-tarq7oe2m6] { background: var(--ru-yellow-soft); color: var(--ru-warn); }
.ru-pill.is-muted[b-tarq7oe2m6] { background: var(--ru-divider); color: var(--ru-muted); }

.ru-num[b-tarq7oe2m6] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ru-amt[b-tarq7oe2m6] { font-weight: 600; }
.ru-amt.is-pos[b-tarq7oe2m6] { color: var(--ru-ok); }

/* ---------- Detail ---------- */
.ru-det[b-tarq7oe2m6] {
    width: 360px;
    flex: 0 0 360px;
    background: #fff;
    border: 1px solid var(--ru-border);
    border-radius: 14px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}

.ru-dh[b-tarq7oe2m6] { display: flex; align-items: flex-start; gap: 8px; }
.ru-dh > div[b-tarq7oe2m6] { flex: 1; min-width: 0; }
.ru-dh small[b-tarq7oe2m6] { display: block; color: var(--ru-muted); font-size: 13px; }
.ru-big[b-tarq7oe2m6] { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.3px; overflow-wrap: anywhere; }

.ru-form[b-tarq7oe2m6] { display: flex; flex-direction: column; gap: 12px; }
.ru-field[b-tarq7oe2m6] { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.ru-field > label[b-tarq7oe2m6] { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.ru-orig[b-tarq7oe2m6] { color: var(--ru-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ru-orig b[b-tarq7oe2m6] { font-weight: 550; color: var(--ru-text-2); }
.ru-check[b-tarq7oe2m6] { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; color: var(--ru-text-2); cursor: pointer; }
.ru-check input[b-tarq7oe2m6] { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: #1d1d1f; }
.ru-hint[b-tarq7oe2m6] { margin: 0; color: var(--ru-muted); font-size: 12.5px; }
.ru-dact[b-tarq7oe2m6] { display: flex; gap: 8px; flex-wrap: wrap; }

.ru-sec[b-tarq7oe2m6] { border-top: 1px solid var(--ru-divider); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ru-sec h3[b-tarq7oe2m6] { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }

.ru-patterns[b-tarq7oe2m6], .ru-recent[b-tarq7oe2m6], .ru-merge-list[b-tarq7oe2m6] { list-style: none; margin: 0; padding: 0; }
.ru-patterns li[b-tarq7oe2m6] { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f2f1ec; }
.ru-patterns li:last-child[b-tarq7oe2m6] { border-bottom: 0; }
.ru-pat-main[b-tarq7oe2m6] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ru-pat-main b[b-tarq7oe2m6] { font-weight: 600; font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ru-pat-main small[b-tarq7oe2m6] { color: var(--ru-muted); font-size: 12px; }

.ru-recent a[b-tarq7oe2m6] {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    color: var(--ru-text);
    text-decoration: none;
    font-size: 13px;
}

.ru-recent a:hover[b-tarq7oe2m6] { background: var(--ru-soft); }
.ru-rec-date[b-tarq7oe2m6] { color: var(--ru-muted); font-variant-numeric: tabular-nums; }
.ru-rec-main[b-tarq7oe2m6] { min-width: 0; }
.ru-rec-main b[b-tarq7oe2m6], .ru-rec-main small[b-tarq7oe2m6] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ru-rec-main b[b-tarq7oe2m6] { font-weight: 600; }
.ru-rec-main small[b-tarq7oe2m6] { color: var(--ru-muted); font-size: 12px; }
.ru-rec-amt[b-tarq7oe2m6] { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ru-rec-amt.is-pos[b-tarq7oe2m6] { color: var(--ru-ok); }

/* ---------- Dialog ---------- */
.ru-modal-backdrop[b-tarq7oe2m6] { position: fixed; inset: 0; background: rgba(29, 29, 31, .35); z-index: 1050; }

.ru-modal[b-tarq7oe2m6] {
    position: fixed;
    z-index: 1051;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    padding: 18px 20px 16px;
    gap: 12px;
}

.ru-modal-head[b-tarq7oe2m6] { display: flex; align-items: center; gap: 8px; }
.ru-modal-head h2[b-tarq7oe2m6] { flex: 1; margin: 0; font-size: 19px; font-weight: 700; }
.ru-modal-text[b-tarq7oe2m6] { margin: 0; font-size: 14.5px; color: var(--ru-text-2); line-height: 1.5; }
.ru-modal-actions[b-tarq7oe2m6] { display: flex; gap: 8px; justify-content: flex-end; }

.ru-merge-list[b-tarq7oe2m6] { border: 1px solid var(--ru-divider); border-radius: 10px; }
.ru-merge-list li[b-tarq7oe2m6] { border-bottom: 1px solid #f2f1ec; }
.ru-merge-list li:last-child[b-tarq7oe2m6] { border-bottom: 0; }
.ru-merge-list label[b-tarq7oe2m6] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0; cursor: pointer; }
.ru-merge-list label:hover[b-tarq7oe2m6] { background: var(--ru-soft); }
.ru-merge-list input[type=radio][b-tarq7oe2m6] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: #1d1d1f; margin: 0; }

/* ---------- Regeln: Ergänzungen ---------- */
.ru-meta a[b-tarq7oe2m6] { color: inherit; text-decoration: none; }
.ru-meta a:hover[b-tarq7oe2m6] { text-decoration: underline; }
.ru-btn.is-danger[b-tarq7oe2m6] { background: var(--ru-err); border-color: var(--ru-err); color: #fff; }
.ru-btn.is-danger:hover:not(:disabled)[b-tarq7oe2m6] { background: #a51b18; }
.ru-btn.is-danger-text[b-tarq7oe2m6] { color: var(--ru-err); }
a.ru-btn[b-tarq7oe2m6] { text-decoration: none; }

.ru-text[b-tarq7oe2m6] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ru-sub[b-tarq7oe2m6] { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.ru-sub:empty[b-tarq7oe2m6] { display: none; }
.ru-kind[b-tarq7oe2m6] { flex: 0 0 auto; display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 650; letter-spacing: .2px; }
.ru-kind.is-learned[b-tarq7oe2m6] { background: var(--ru-divider); color: var(--ru-muted); }
.ru-kind.is-payee[b-tarq7oe2m6] { background: #e7f0fb; color: var(--ru-accent); }
.ru-kind.is-purpose[b-tarq7oe2m6] { background: #efe9fb; color: #6b3fc2; }
.ru-pill.is-alt[b-tarq7oe2m6] { background: #fdecea; color: var(--ru-err); }
.ru-table tbody tr.is-off td[b-tarq7oe2m6] { color: var(--ru-muted); }
.ru-table tbody tr.is-off .ru-dot[b-tarq7oe2m6] { opacity: .45; }
.ru-of[b-tarq7oe2m6] { color: var(--ru-muted); font-weight: 400; }

.ru-fixed[b-tarq7oe2m6] { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ru-divider); border-radius: 10px; background: var(--ru-soft); }
.ru-fixed b[b-tarq7oe2m6] { font-weight: 600; }
.ru-fixed small[b-tarq7oe2m6] { color: var(--ru-muted); font-size: 12px; }
.ru-fixed code[b-tarq7oe2m6] { font-size: 12px; color: var(--ru-text-2); background: transparent; padding: 0; }
.ru-orig a[b-tarq7oe2m6] { color: var(--ru-accent); }

.ru-preview[b-tarq7oe2m6] { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--ru-yellow-soft); font-size: 13px; color: var(--ru-text-2); }
.ru-recent.is-compact a[b-tarq7oe2m6] { padding: 4px 0; }
.ru-recent.is-compact a:hover[b-tarq7oe2m6] { background: transparent; text-decoration: underline; }
.ru-rec-main small .ru-dot[b-tarq7oe2m6] { width: 7px; height: 7px; flex-basis: 7px; vertical-align: middle; margin-right: 3px; }
.ru-rec-main small .ru-none[b-tarq7oe2m6] { margin-right: 0; }
.ru-det[b-tarq7oe2m6] { box-sizing: border-box; }

.ru-facts[b-tarq7oe2m6] { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13.5px; }
.ru-facts dt[b-tarq7oe2m6] { color: var(--ru-muted); font-weight: 400; }
.ru-facts dd[b-tarq7oe2m6] { margin: 0; font-variant-numeric: tabular-nums; }
.ru-facts dd small[b-tarq7oe2m6] { color: var(--ru-muted); font-size: 12px; }

@media (max-width: 1100px) {
    .ru-cols[b-tarq7oe2m6] { flex-direction: column-reverse; align-items: stretch; }
    .ru-det[b-tarq7oe2m6] { width: 100%; flex-basis: auto; position: static; }
}

@media (max-width: 640.98px) {
    .ru-page[b-tarq7oe2m6] { margin: -1.1rem -1.5rem 0 -1.5rem; padding: 18px 16px 24px 16px; }
    .ru-meta[b-tarq7oe2m6] { flex-basis: 100%; order: 1; padding-top: 0; }
    .ru-filters select[b-tarq7oe2m6] { flex: 1 1 100%; }
    .ru-table .ru-col-cat[b-tarq7oe2m6] { width: auto; }
    .ru-col-date[b-tarq7oe2m6] { display: none; }
    .ru-table td[b-tarq7oe2m6], .ru-table th[b-tarq7oe2m6] { padding: 8px 6px; }
}

/* ---------- Handy: Liste als Karten-Zeilen, Filter zweispaltig, Details als Vollbild-Blatt ---------- */
@media (max-width: 640.98px) {
    .ru-filters select[b-tarq7oe2m6] { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .ru-table[b-tarq7oe2m6], .ru-table tbody[b-tarq7oe2m6] { display: block; }
    .ru-table thead[b-tarq7oe2m6] { display: none; }
    .ru-table tbody tr[b-tarq7oe2m6] {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) auto;
        grid-template-areas: "check main hits" "check cat cat";
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
        padding: 11px 14px 11px 10px;
        border-bottom: 1px solid #f2f1ec;
    }
    .ru-table tbody tr:last-child[b-tarq7oe2m6] { border-bottom: 0; }
    .ru-table td[b-tarq7oe2m6] { display: block; padding: 0 !important; border: 0; background: transparent !important; }
    .ru-table tbody tr.is-sel[b-tarq7oe2m6] { background: var(--ru-yellow-soft); box-shadow: inset 3px 0 0 var(--ru-yellow); }
    .ru-table tbody tr.is-sel td:first-child[b-tarq7oe2m6] { box-shadow: none; }
    .ru-table .ru-col-check[b-tarq7oe2m6] { grid-area: check; width: auto; align-self: start; padding-top: 2px !important; }
    .ru-col-check input[b-tarq7oe2m6] { width: 18px; height: 18px; }
    .ru-table .ru-main[b-tarq7oe2m6] { grid-area: main; max-width: none; width: auto; }
    .ru-table .ru-col-cat[b-tarq7oe2m6] { grid-area: cat; width: auto; min-width: 0; }
    .ru-table td.ru-num:not(.ru-col-date)[b-tarq7oe2m6] { grid-area: hits; align-self: start; }
    .ru-table td.ru-col-date[b-tarq7oe2m6] { display: none; }
    /* Details als Vollbild-Blatt über der Seite */
    .ru-det[b-tarq7oe2m6] {
        position: fixed;
        inset: 0;
        z-index: 1040;
        width: auto;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: ru-sheet-in-b-tarq7oe2m6 .18s ease-out;
    }
    .ru-dh[b-tarq7oe2m6] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        margin: 0 -16px;
        padding: 12px 10px 10px 16px;
        border-bottom: 1px solid #efeee9;
    }
}

@keyframes ru-sheet-in-b-tarq7oe2m6 { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* /Components/Pages/ScheduledTasks.razor.rz.scp.css */
/* Geplante Aufgaben – Zeitstrahl + gruppierte Liste, optisch an /reminders angelehnt. */

.st-page[b-w3so4pejgy] {
    --st-ground: #f6f5f2;
    --st-surface: #ffffff;
    --st-border: #e4e2dc;
    --st-divider: #efeee9;
    --st-soft: #fbfaf8;
    --st-text: #1d1d1f;
    --st-text-2: #4a4a4f;
    --st-muted: #6e6e73;
    --st-accent: #1b6ec2;
    --st-ok: #1e8e3e;
    --st-err: #c5221f;
    --st-paused: #b06000;
    --st-idle: #a1a1a6;
    color: var(--st-text);
    background: var(--st-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.st-header[b-w3so4pejgy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.st-header h1[b-w3so4pejgy] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.st-meta[b-w3so4pejgy] {
    flex-grow: 1;
    color: var(--st-muted);
    font-size: 14px;
    padding-top: 6px;
}

.st-seg[b-w3so4pejgy] {
    display: flex;
    background: #ebe9e3;
    border-radius: 10px;
    padding: 3px;
}

.st-seg button[b-w3so4pejgy] {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 8px;
    color: var(--st-text-2);
    cursor: pointer;
}

.st-seg button.is-on[b-w3so4pejgy] {
    background: var(--st-surface);
    color: var(--st-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.st-seg b[b-w3so4pejgy] {
    margin-left: 4px;
    color: var(--st-err);
    font-weight: 600;
}

.st-icon-btn[b-w3so4pejgy] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--st-border);
    background: var(--st-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--st-text);
    cursor: pointer;
}

.st-icon-btn:hover[b-w3so4pejgy] { background: #f0efea; }
.st-icon-btn:disabled[b-w3so4pejgy] { opacity: .5; cursor: default; }
.st-icon-btn.is-spinning svg[b-w3so4pejgy] { animation: st-spin-b-w3so4pejgy 1s linear infinite; }

.st-alert[b-w3so4pejgy] {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    gap: 10px;
    background: #fbe9e8;
    color: #8a1714;
    border: 1px solid #f1c3c0;
}

.st-alert button[b-w3so4pejgy] {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Statuspunkte ---------- */
.st-dot[b-w3so4pejgy] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--st-idle);
    display: block;
}

.st-dot.is-ok[b-w3so4pejgy] { background: var(--st-ok); }
.st-dot.is-err[b-w3so4pejgy] { background: var(--st-err); }
.st-dot.is-paused[b-w3so4pejgy] { background: var(--st-paused); }
.st-dot.is-pending[b-w3so4pejgy] { background: var(--st-accent); opacity: .55; }
.st-dot.is-run[b-w3so4pejgy] {
    background: var(--st-accent);
    box-shadow: 0 0 0 4px rgba(27, 110, 194, .18);
    animation: st-pulse-b-w3so4pejgy 1.4s ease-in-out infinite;
}

/* ---------- Zeitstrahl ---------- */
.st-tl[b-w3so4pejgy] {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 14px;
    padding: 16px 20px 12px;
}

.st-tl-head[b-w3so4pejgy] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--st-muted);
    margin-bottom: 8px;
}

.st-tl-head strong[b-w3so4pejgy] {
    color: var(--st-text);
    font-size: 14px;
}

.st-track[b-w3so4pejgy] {
    position: relative;
    height: 78px;
    margin: 0 12px 0 60px;
}

.st-axis[b-w3so4pejgy] {
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    height: 2px;
    background: var(--st-divider);
}

.st-now[b-w3so4pejgy] {
    position: absolute;
    left: 0;
    top: 12px;
    height: 46px;
    width: 2px;
    background: var(--st-accent);
}

.st-now span[b-w3so4pejgy] {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--st-accent);
}

.st-tick[b-w3so4pejgy] {
    position: absolute;
    top: 60px;
    font-size: 11px;
    color: var(--st-muted);
    transform: translateX(-50%);
}

.st-ev[b-w3so4pejgy] {
    position: absolute;
    top: 26px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}

.st-ev .st-dot[b-w3so4pejgy] {
    width: 18px;
    height: 18px;
    border: 3px solid var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-border);
    box-sizing: border-box;
}

.st-ev .st-dot.is-run[b-w3so4pejgy] { box-shadow: 0 0 0 1px var(--st-border), 0 0 0 5px rgba(27, 110, 194, .18); }

.st-ev em[b-w3so4pejgy] {
    position: absolute;
    bottom: 24px;
    white-space: nowrap;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--st-text-2);
    background: var(--st-ground);
    padding: 1px 7px;
    border-radius: 6px;
}

.st-ev.is-low em[b-w3so4pejgy] {
    bottom: auto;
    top: 23px;
}

.st-ev.is-start em[b-w3so4pejgy] { left: -4px; }
.st-ev.is-end em[b-w3so4pejgy] { right: -4px; }

.st-ev .st-dot.is-cluster[b-w3so4pejgy] {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: -2px;
}

.st-tl-empty[b-w3so4pejgy] {
    position: absolute;
    left: 16px;
    top: 4px;
    font-size: 13px;
    color: var(--st-muted);
}

/* ---------- Gruppen ---------- */
.st-group[b-w3so4pejgy] {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 14px;
    overflow: hidden;
}

.st-g-head[b-w3so4pejgy] {
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--st-muted);
    background: var(--st-soft);
    border-bottom: 1px solid var(--st-divider);
    display: flex;
    justify-content: space-between;
}

.st-g-head span:last-child[b-w3so4pejgy] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.st-row[b-w3so4pejgy] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 160px 160px 44px 36px;
    gap: 16px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--st-divider);
}

.st-row:last-child[b-w3so4pejgy] { border-bottom: 0; }
.st-row.is-off .st-name[b-w3so4pejgy],
.st-row.is-off .st-col[b-w3so4pejgy] { opacity: .5; }

.st-name[b-w3so4pejgy] { min-width: 0; }

.st-name strong[b-w3so4pejgy] {
    font-size: 14.5px;
    display: block;
}

.st-name small[b-w3so4pejgy] {
    font-size: 12.5px;
    color: var(--st-muted);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-name small.is-err[b-w3so4pejgy] { color: var(--st-err); }

.st-col[b-w3so4pejgy] {
    font-size: 13px;
    color: var(--st-muted);
    line-height: 1.3;
}

.st-col b[b-w3so4pejgy] {
    display: block;
    color: var(--st-text);
    font-weight: 600;
    font-size: 13.5px;
}

.st-col b.is-err[b-w3so4pejgy] { color: var(--st-err); }
.st-col b.is-run[b-w3so4pejgy] { color: var(--st-accent); }

/* ---------- Schalter ---------- */
.st-switch[b-w3so4pejgy] {
    width: 40px;
    height: 23px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: #d6d4ce;
    position: relative;
    cursor: pointer;
    transition: background .15s;
}

.st-switch[b-w3so4pejgy]::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: left .15s;
}

.st-switch.is-on[b-w3so4pejgy] { background: var(--st-ok); }
.st-switch.is-on[b-w3so4pejgy]::after { left: 19.5px; }
.st-switch:disabled[b-w3so4pejgy] { opacity: .5; cursor: default; }
.st-switch:focus-visible[b-w3so4pejgy],
.st-play:focus-visible[b-w3so4pejgy],
.st-seg button:focus-visible[b-w3so4pejgy] { outline: 2px solid var(--st-accent); outline-offset: 2px; }

/* ---------- Jetzt ausführen ---------- */
.st-play[b-w3so4pejgy] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--st-border);
    background: var(--st-surface);
    color: var(--st-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.st-play:hover[b-w3so4pejgy] { background: #f0efea; }
.st-play.is-hot[b-w3so4pejgy] { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
.st-play.is-hot:hover[b-w3so4pejgy] { background: #155a9f; }
.st-play:disabled[b-w3so4pejgy] { color: #c7c5bf; background: var(--st-surface); border-color: var(--st-border); cursor: default; }

.st-spinner[b-w3so4pejgy] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: st-spin-b-w3so4pejgy .8s linear infinite;
}

.st-empty[b-w3so4pejgy] {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    color: var(--st-muted);
    font-size: 14px;
}

.st-legend[b-w3so4pejgy] {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: var(--st-muted);
    justify-content: flex-end;
    flex-wrap: wrap;
}

@keyframes st-spin-b-w3so4pejgy { to { transform: rotate(360deg); } }
@keyframes st-pulse-b-w3so4pejgy { 50% { box-shadow: 0 0 0 7px rgba(27, 110, 194, .05); } }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
    .st-row[b-w3so4pejgy] {
        grid-template-columns: 18px minmax(0, 1fr) 44px 36px;
        row-gap: 6px;
    }

    .st-row .st-col[b-w3so4pejgy] { grid-row: 2; }
    .st-row .st-col.is-last[b-w3so4pejgy] { grid-column: 2; }
    .st-row .st-col.is-next[b-w3so4pejgy] { grid-column: 3 / span 2; text-align: right; }
}

@media (max-width: 640.98px) {
    /* MainLayout: article hat hier px-4 (1.5rem) statt 2rem links */
    .st-page[b-w3so4pejgy] {
        margin-left: -1.5rem;
        padding: 16px;
    }

    .st-meta[b-w3so4pejgy] { flex-basis: 100%; order: 3; padding-top: 0; }
    .st-seg[b-w3so4pejgy] { order: 4; }
    .st-track[b-w3so4pejgy] { margin-left: 52px; height: 92px; }
    .st-tick[b-w3so4pejgy] { top: 76px; }
    .st-tl-head[b-w3so4pejgy] { flex-direction: column; gap: 2px; }
}
/* /Components/Pages/SettlementCheckPanel.razor.rz.scp.css */
/* Abgleich Kreditkartenabrechnung – Farben über die --tx-*-Variablen der Seite (mit Fallback). */
.sc[b-qr96ycxipp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--tx-surface, #fff);
    border: 1px solid var(--tx-border, #e4e2dc);
    border-radius: 10px;
    font-size: 14px;
    color: var(--tx-text, #1d1d1f);
}

.sc-head[b-qr96ycxipp] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.sc-pill[b-qr96ycxipp] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
}

.sc-pill.is-ok[b-qr96ycxipp] { background: #e8f5ec; color: var(--tx-ok, #1e8e3e); }
.sc-pill.is-open[b-qr96ycxipp] { background: var(--tx-yellow-soft, #fff6d1); color: var(--tx-warn, #9a6700); }
.sc-pill.is-over[b-qr96ycxipp] { background: #fdecea; color: var(--tx-err, #c5221f); }

.sc-bar[b-qr96ycxipp] { height: 6px; border-radius: 999px; background: var(--tx-divider, #efeee9); overflow: hidden; }
.sc-bar span[b-qr96ycxipp] { display: block; height: 100%; border-radius: inherit; background: var(--tx-yellow, #ffd84d); transition: width .2s ease; }
.sc.is-ok .sc-bar span[b-qr96ycxipp] { background: var(--tx-ok, #1e8e3e); }

.sc-nums[b-qr96ycxipp] { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.sc-nums span:last-child[b-qr96ycxipp] { color: var(--tx-muted, #6e6e73); }
.sc-range[b-qr96ycxipp] { color: var(--tx-muted, #6e6e73); font-size: 12.5px; line-height: 1.4; }

.sc-actions[b-qr96ycxipp] { display: flex; gap: 8px; flex-wrap: wrap; }

.sc-btn[b-qr96ycxipp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--tx-border, #e4e2dc);
    background: var(--tx-surface, #fff);
    color: var(--tx-text, #1d1d1f);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.sc-btn:hover[b-qr96ycxipp] { background: var(--tx-soft, #fbfaf8); }
.sc-btn.is-primary[b-qr96ycxipp] { background: var(--tx-text, #1d1d1f); border-color: var(--tx-text, #1d1d1f); color: #fff; }
.sc-btn.is-primary:hover:not(:disabled)[b-qr96ycxipp] { background: #000; }
.sc-btn.is-primary svg[b-qr96ycxipp] { stroke: var(--tx-yellow, #ffd84d); }
.sc-btn:disabled[b-qr96ycxipp] { opacity: .6; cursor: not-allowed; }
.sc-btn:focus-visible[b-qr96ycxipp] { outline: 2px solid var(--tx-accent, #1b6ec2); outline-offset: 2px; }
.sc-btn svg[b-qr96ycxipp] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sc-auto[b-qr96ycxipp] { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.sc-auto input[b-qr96ycxipp] { margin-top: 2px; accent-color: var(--tx-text, #1d1d1f); }
.sc-auto span[b-qr96ycxipp] { display: flex; flex-direction: column; }
.sc-auto small[b-qr96ycxipp] { color: var(--tx-muted, #6e6e73); font-size: 12px; }
.sc-error[b-qr96ycxipp] { color: var(--tx-err, #c5221f); font-size: 12.5px; }
/* /Components/Pages/Transactions.razor.rz.scp.css */
/* Umsätze – gleiche Optik wie /ionos-zones und /permissions, Gelb-Akzent wie das Menü. */

.tx-page[b-38vlbfo9wy] {
    --tx-ground: #f6f5f2;
    --tx-surface: #ffffff;
    --tx-border: #e4e2dc;
    --tx-divider: #efeee9;
    --tx-soft: #fbfaf8;
    --tx-text: #1d1d1f;
    --tx-text-2: #4a4a4f;
    --tx-muted: #6e6e73;
    --tx-accent: #1b6ec2;
    --tx-yellow: #ffd84d;
    --tx-yellow-soft: #fff6d1;
    --tx-ok: #1e8e3e;
    --tx-warn: #9a6700;
    --tx-err: #c5221f;
    color: var(--tx-text);
    background: var(--tx-ground);
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 24px 32px 32px 32px;
    min-height: calc(100vh - 3.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Kopfzeile ---------- */
.tx-header[b-38vlbfo9wy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tx-header h1[b-38vlbfo9wy] {
    margin: 0 4px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.tx-meta[b-38vlbfo9wy] {
    flex-grow: 1;
    color: var(--tx-muted);
    font-size: 14px;
    padding-top: 6px;
}

.tx-meta b[b-38vlbfo9wy] { color: var(--tx-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.tx-intro[b-38vlbfo9wy] {
    margin: -8px 0 0 0;
    color: var(--tx-muted);
    font-size: 14px;
    max-width: 760px;
}

/* ---------- Buttons ---------- */
.tx-btn[b-38vlbfo9wy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--tx-border);
    background: var(--tx-surface);
    color: var(--tx-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.tx-btn svg[b-38vlbfo9wy],
.tx-icon svg[b-38vlbfo9wy] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tx-btn:hover:not(:disabled)[b-38vlbfo9wy] { background: var(--tx-soft); }
.tx-btn.is-primary[b-38vlbfo9wy] { background: var(--tx-text); border-color: var(--tx-text); color: #fff; }
.tx-btn.is-primary:hover:not(:disabled)[b-38vlbfo9wy] { background: #000; }
.tx-btn.is-primary svg[b-38vlbfo9wy] { stroke: var(--tx-yellow); }
.tx-btn:disabled[b-38vlbfo9wy] { opacity: .5; cursor: default; }

.tx-link[b-38vlbfo9wy] {
    border: 0;
    background: transparent;
    color: var(--tx-accent);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 6px;
    cursor: pointer;
}

.tx-link:hover:not(:disabled)[b-38vlbfo9wy] { text-decoration: underline; }
.tx-link.is-muted[b-38vlbfo9wy] { color: var(--tx-muted); }
.tx-link.is-danger[b-38vlbfo9wy] { color: var(--tx-err); }
.tx-link:disabled[b-38vlbfo9wy] { opacity: .5; cursor: default; }

.tx-icon[b-38vlbfo9wy] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tx-muted);
    cursor: pointer;
}

.tx-icon:hover[b-38vlbfo9wy] { background: var(--tx-divider); color: var(--tx-text); }
.tx-icon.is-danger:hover[b-38vlbfo9wy] { background: #fdecea; color: var(--tx-err); }

.tx-btn:focus-visible[b-38vlbfo9wy],
.tx-link:focus-visible[b-38vlbfo9wy],
.tx-icon:focus-visible[b-38vlbfo9wy],
.tx-input:focus-visible[b-38vlbfo9wy] { outline: 2px solid var(--tx-accent); outline-offset: 2px; }

/* ---------- Hinweise ---------- */
.tx-alert[b-38vlbfo9wy],
.tx-confirm[b-38vlbfo9wy] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

.tx-alert span[b-38vlbfo9wy],
.tx-confirm span[b-38vlbfo9wy] { flex-grow: 1; }

.tx-alert.is-error[b-38vlbfo9wy] { background: #fdecea; color: var(--tx-err); border: 1px solid #f6c7c3; }
.tx-alert.is-ok[b-38vlbfo9wy] { background: #e8f5ec; color: var(--tx-ok); border: 1px solid #c3e5cd; }
.tx-confirm[b-38vlbfo9wy] { background: var(--tx-yellow-soft); border: 1px solid #f3e19a; color: var(--tx-text); }

.tx-alert button[b-38vlbfo9wy] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Karten ---------- */
.tx-card[b-38vlbfo9wy] {
    background: var(--tx-surface);
    border: 1px solid var(--tx-border);
    border-radius: 14px;
    overflow: hidden;
}

.tx-card-head[b-38vlbfo9wy] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tx-divider);
}

.tx-card-head h2[b-38vlbfo9wy] { margin: 0; font-size: 16px; font-weight: 650; }
.tx-card-head small[b-38vlbfo9wy] { color: var(--tx-muted); font-size: 13px; }

.tx-empty[b-38vlbfo9wy] {
    color: var(--tx-muted);
    padding: 28px;
    text-align: center;
    font-size: 14px;
}


.tx-btn.is-on[b-38vlbfo9wy] { background: var(--tx-yellow-soft); border-color: #f3e19a; }
.tx-btn.is-danger[b-38vlbfo9wy] { background: var(--tx-err); border-color: var(--tx-err); color: #fff; }
.tx-btn.is-danger:hover:not(:disabled)[b-38vlbfo9wy] { background: #a51b18; }
.tx-icon:disabled[b-38vlbfo9wy] { opacity: .5; cursor: default; }

.tx-input[b-38vlbfo9wy] {
    height: 36px;
    border: 1px solid var(--tx-border);
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    background: var(--tx-surface);
    color: var(--tx-text);
    min-width: 0;
    width: 100%;
}

.tx-input:focus-visible[b-38vlbfo9wy] { outline: 2px solid var(--tx-accent); outline-offset: 1px; }
.tx-icon-input[b-38vlbfo9wy] { width: 52px; flex: 0 0 52px; text-align: center; font-size: 17px; padding: 0 4px; }


/* ---------- Filter ---------- */
.tx-filters[b-38vlbfo9wy] { display: flex; gap: 8px; flex-wrap: wrap; }
.tx-filters select[b-38vlbfo9wy] { width: auto; flex: 0 1 240px; }

.tx-search[b-38vlbfo9wy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    height: 36px;
    border: 1px solid var(--tx-border);
    border-radius: 10px;
    padding: 0 10px;
    background: var(--tx-surface);
    margin: 0;
}

.tx-search svg[b-38vlbfo9wy] { width: 16px; height: 16px; fill: none; stroke: var(--tx-muted); stroke-width: 1.8; stroke-linecap: round; flex: 0 0 16px; }
.tx-search input[b-38vlbfo9wy] { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; }
.tx-amount-filter[b-38vlbfo9wy] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 190px;
    height: 36px;
    border: 1px solid var(--tx-border);
    border-radius: 10px;
    padding: 0 10px;
    background: var(--tx-surface);
    margin: 0;
}

.tx-amount-filter > span:first-child[b-38vlbfo9wy] { font-size: 13px; color: var(--tx-muted); white-space: nowrap; }
.tx-amount-filter[b-38vlbfo9wy]  .di-input { text-align: right; font-variant-numeric: tabular-nums; }
.tx-amount-filter .tx-eur[b-38vlbfo9wy] { font-size: 13px; color: var(--tx-muted); }
.tx-amount-filter button[b-38vlbfo9wy] { border: 0; background: transparent; color: var(--tx-muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tx-amount-filter:focus-within[b-38vlbfo9wy] { outline: 2px solid var(--tx-accent); outline-offset: 1px; }
.tx-amount-filter.is-invalid[b-38vlbfo9wy] { border-color: #c5221f; }

.tx-filters .tx-reset[b-38vlbfo9wy] { flex: 0 0 auto; color: var(--tx-muted); }
.tx-filters .tx-reset:not(:disabled)[b-38vlbfo9wy] { color: var(--tx-text); }

/* ---------- Layout ---------- */
.tx-cols[b-38vlbfo9wy] { display: flex; gap: 18px; align-items: flex-start; }
.tx-list[b-38vlbfo9wy] { flex: 1; min-width: 0; }
.tx-meta b[b-38vlbfo9wy] { font-weight: 600; color: var(--tx-text-2); }
.tx-meta b.is-pos[b-38vlbfo9wy] { color: var(--tx-ok); }
.tx-empty a[b-38vlbfo9wy] { color: var(--tx-accent); }

/* ---------- Tabelle ---------- */
/* Kein eigener Scroll-Container (auch nicht overflow:hidden an der Karte): <Virtualize> misst dann am Fenster
   und rendert nur die sichtbaren Zeilen. Runde Ecken oben übernehmen Kopfzeile bzw. Hinweis selbst. */
.tx-card.tx-list[b-38vlbfo9wy] { overflow: visible; }
.tx-scroll[b-38vlbfo9wy] { overflow: visible; }
.tx-table thead th:first-child[b-38vlbfo9wy] { border-top-left-radius: 14px; }
.tx-table thead th:last-child[b-38vlbfo9wy] { border-top-right-radius: 14px; }
.tx-list > .tx-bm-note:first-child[b-38vlbfo9wy] { border-radius: 14px 14px 0 0; }
.tx-table[b-38vlbfo9wy] { width: 100%; border-collapse: collapse; font-size: 14px; }

.tx-table th[b-38vlbfo9wy] {
    text-align: left;
    font-size: 11.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8e8e93;
    padding: 9px 12px;
    border-bottom: 1px solid var(--tx-divider);
    white-space: nowrap;
}

.tx-table td[b-38vlbfo9wy] { padding: 8px 12px; border-bottom: 1px solid #f2f1ec; vertical-align: middle; }
.tx-table tbody tr[b-38vlbfo9wy] { cursor: pointer; }
.tx-table tbody tr:last-child td[b-38vlbfo9wy] { border-bottom: 0; }
.tx-table tbody tr:hover td[b-38vlbfo9wy] { background: var(--tx-soft); }
.tx-table tbody tr.is-sel td[b-38vlbfo9wy] { background: var(--tx-yellow-soft); }
.tx-table tbody tr.is-sel td:first-child[b-38vlbfo9wy] { box-shadow: inset 3px 0 0 var(--tx-yellow); }
.tx-table tbody tr.is-pending td[b-38vlbfo9wy] { color: var(--tx-text-2); }

.tx-col-date[b-38vlbfo9wy] { width: 62px; white-space: nowrap; }
.tx-col-date b[b-38vlbfo9wy] { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-col-date small[b-38vlbfo9wy] { color: var(--tx-muted); font-size: 12px; }
.tx-table .tx-col-cat[b-38vlbfo9wy] { width: 220px; min-width: 220px; }
.tx-table th.tx-num[b-38vlbfo9wy] { text-align: right; }
.tx-table .tx-amt[b-38vlbfo9wy] { min-width: 110px; }

.tx-main[b-38vlbfo9wy] { min-width: 0; max-width: 1px; width: 100%; }
.tx-payee[b-38vlbfo9wy] { display: flex; align-items: center; gap: 6px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tx-purpose[b-38vlbfo9wy], .tx-acc[b-38vlbfo9wy] { display: block; color: var(--tx-muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tx-acc[b-38vlbfo9wy] { color: #9a9890; }
.tx-edited[b-38vlbfo9wy] { color: var(--tx-warn); font-size: 13px; font-weight: 700; }

/* Budgetmonat weicht vom Buchungstag ab */
.tx-bm-pill[b-38vlbfo9wy] { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 17px;
    background: #e8f0fb; color: var(--tx-accent); white-space: nowrap; }
.tx-bm-note[b-38vlbfo9wy] { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--tx-divider);
    background: #f3f7fd; color: var(--tx-text-2); font-size: 13px; }
.tx-bm-note svg[b-38vlbfo9wy] { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tx-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-bm-note span[b-38vlbfo9wy] { flex: 1; min-width: 0; }
.tx-bm-note a[b-38vlbfo9wy] { color: var(--tx-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tx-bm-note a:hover[b-38vlbfo9wy] { text-decoration: underline; }

.tx-pill[b-38vlbfo9wy] { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.tx-pill.is-warn[b-38vlbfo9wy] { background: var(--tx-yellow-soft); color: var(--tx-warn); }

.tx-num[b-38vlbfo9wy] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-amt[b-38vlbfo9wy] { font-weight: 600; }
.tx-amt.is-pos[b-38vlbfo9wy] { color: var(--tx-ok); }

.tx-cat-select[b-38vlbfo9wy] {
    width: 100%;
    height: 32px;
    border: 1px solid var(--tx-border);
    border-radius: 8px;
    padding: 0 8px 0 22px;
    font-size: 13.5px;
    background: #fff radial-gradient(circle at 11px 50%, var(--tx-cat, transparent) 4.5px, transparent 5px) no-repeat;
    color: var(--tx-text);
    cursor: pointer;
}

.tx-cat-select.is-empty[b-38vlbfo9wy] { color: var(--tx-accent); border-style: dashed; padding-left: 8px; }

/* ---------- Vorschläge ---------- */
.tx-btn.is-suggest[b-38vlbfo9wy] { background: var(--tx-yellow); border-color: #e9c435; color: var(--tx-text); font-weight: 600; }
.tx-btn.is-suggest:hover:not(:disabled)[b-38vlbfo9wy] { background: #ffcf26; }
.tx-dot[b-38vlbfo9wy] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }

.tx-sugg[b-38vlbfo9wy] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 3px 0 9px;
    border: 1px dashed #e0c255;
    border-radius: 8px;
    background: var(--tx-yellow-soft);
}

.tx-sugg-name[b-38vlbfo9wy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tx-sugg-ok[b-38vlbfo9wy],
.tx-sugg-no[b-38vlbfo9wy] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 0;
    border-radius: 7px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.tx-sugg-ok[b-38vlbfo9wy] { background: var(--tx-ok); color: #fff; }
.tx-sugg-ok:hover:not(:disabled)[b-38vlbfo9wy] { background: #17722f; }
.tx-sugg-no[b-38vlbfo9wy] { background: transparent; color: var(--tx-muted); }
.tx-sugg-no:hover:not(:disabled)[b-38vlbfo9wy] { background: #fdecea; color: var(--tx-err); }
.tx-sugg-ok svg[b-38vlbfo9wy], .tx-sugg-no svg[b-38vlbfo9wy], .tx-modal-note svg[b-38vlbfo9wy] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.tx-sugg-box[b-38vlbfo9wy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--tx-yellow-soft);
    border: 1px dashed #e0c255;
    border-radius: 10px;
    font-size: 14px;
}

.tx-sugg-box > span[b-38vlbfo9wy] { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tx-sugg-box small[b-38vlbfo9wy] { flex-basis: 100%; color: var(--tx-muted); font-size: 12.5px; }

/* ---------- Dialog ähnliche Umsätze ---------- */
.tx-modal-backdrop[b-38vlbfo9wy] { position: fixed; inset: 0; background: rgba(29, 29, 31, .35); z-index: 1050; }

.tx-modal[b-38vlbfo9wy] {
    position: fixed;
    z-index: 1051;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    padding: 18px 20px 16px;
    gap: 10px;
}

.tx-modal-head[b-38vlbfo9wy] { display: flex; align-items: center; gap: 8px; }
.tx-modal-head h2[b-38vlbfo9wy] { flex: 1; margin: 0; font-size: 19px; font-weight: 700; }
.tx-modal-text[b-38vlbfo9wy] { margin: 0; font-size: 14.5px; color: var(--tx-text-2); line-height: 1.5; }
.tx-modal-text .tx-dot[b-38vlbfo9wy] { margin: 0 4px 0 2px; }

.tx-modal-tools[b-38vlbfo9wy] { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--tx-muted); padding: 2px 2px 0; }
.tx-modal-tools label[b-38vlbfo9wy] { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tx-text-2); cursor: pointer; }

.tx-sim-list[b-38vlbfo9wy] { list-style: none; margin: 0; padding: 0; overflow-y: auto; border: 1px solid var(--tx-divider); border-radius: 10px; min-height: 60px; }
.tx-sim-list li[b-38vlbfo9wy] { border-bottom: 1px solid #f2f1ec; }
.tx-sim-list li:last-child[b-38vlbfo9wy] { border-bottom: 0; }

.tx-sim-list label[b-38vlbfo9wy] {
    display: grid;
    grid-template-columns: 18px 64px minmax(0, 1fr) auto 96px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
    font-size: 13.5px;
}

.tx-sim-list label:hover[b-38vlbfo9wy] { background: var(--tx-soft); }
.tx-sim-list input[b-38vlbfo9wy], .tx-modal-tools input[b-38vlbfo9wy] { width: 16px; height: 16px; accent-color: #1d1d1f; }
.tx-sim-date[b-38vlbfo9wy] { color: var(--tx-muted); font-variant-numeric: tabular-nums; }
.tx-sim-main[b-38vlbfo9wy] { min-width: 0; }
.tx-sim-main b[b-38vlbfo9wy], .tx-sim-main small[b-38vlbfo9wy] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tx-sim-main b[b-38vlbfo9wy] { font-weight: 600; }
.tx-sim-main small[b-38vlbfo9wy] { color: var(--tx-muted); font-size: 12px; }
.tx-sim-amt[b-38vlbfo9wy] { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-sim-amt.is-pos[b-38vlbfo9wy] { color: var(--tx-ok); }
.tx-pill.is-muted[b-38vlbfo9wy] { background: var(--tx-divider); color: var(--tx-muted); }

.tx-modal-note[b-38vlbfo9wy] { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--tx-text-2); background: var(--tx-soft); border-radius: 10px; padding: 8px 10px; }
.tx-modal-note svg[b-38vlbfo9wy] { flex: 0 0 15px; margin-top: 2px; color: var(--tx-warn); stroke-width: 1.8; }
.tx-modal-check[b-38vlbfo9wy] { cursor: pointer; align-items: center; }
.tx-modal-check input[b-38vlbfo9wy] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: #1d1d1f; margin: 0; }

.tx-modal-actions[b-38vlbfo9wy] { display: flex; gap: 8px; justify-content: flex-end; }


/* ---------- Offline-Konten / Umbuchungen ---------- */
.tx-transfer[b-38vlbfo9wy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tx-divider);
    color: var(--tx-text-2);
    font-size: 12.5px;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-transfer svg[b-38vlbfo9wy],
.tx-transfer-box svg[b-38vlbfo9wy] { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tx-transfer-box[b-38vlbfo9wy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--tx-soft);
    border: 1px solid var(--tx-border);
    border-radius: 10px;
    font-size: 14px;
}

.tx-transfer-box > span[b-38vlbfo9wy] { flex: 1 1 100%; display: flex; flex-direction: column; min-width: 0; }
.tx-transfer-box small[b-38vlbfo9wy] { color: var(--tx-muted); font-size: 12.5px; }
.tx-transfer-box.is-hint[b-38vlbfo9wy] { background: var(--tx-yellow-soft); border: 1px dashed #e0c255; }
.tx-transfer-box .tx-btn[b-38vlbfo9wy] { height: 32px; padding: 0 12px; }
.tx-transfer-box a.tx-btn[b-38vlbfo9wy] { text-decoration: none; }
.tx-check[b-38vlbfo9wy] { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-text-2); cursor: pointer; }
.tx-check input[b-38vlbfo9wy] { accent-color: var(--tx-text); }
.tx-ask[b-38vlbfo9wy] { flex-basis: 100%; color: var(--tx-err); font-size: 13px; }
.tx-dact .tx-ask[b-38vlbfo9wy] { flex-basis: auto; align-self: center; }

.tx-move[b-38vlbfo9wy] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--tx-muted); }
.tx-move > span[b-38vlbfo9wy] { flex-basis: 100%; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.tx-move select[b-38vlbfo9wy] { flex: 1 1 0; }

.tx-two[b-38vlbfo9wy] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.tx-amount-row[b-38vlbfo9wy] { display: flex; align-items: center; gap: 8px; }
.tx-amount-input[b-38vlbfo9wy] { flex: 1 1 0; text-align: right; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-eur[b-38vlbfo9wy] { color: var(--tx-muted); font-weight: 600; }

.tx-seg[b-38vlbfo9wy] { display: inline-flex; border: 1px solid var(--tx-border); border-radius: 10px; padding: 2px; background: var(--tx-soft); flex: 0 0 auto; }

.tx-seg button[b-38vlbfo9wy] {
    border: 0;
    background: transparent;
    border-radius: 8px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 550;
    color: var(--tx-muted);
    cursor: pointer;
}

.tx-seg button.is-sel[b-38vlbfo9wy] { background: var(--tx-surface); color: var(--tx-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.tx-seg button:disabled[b-38vlbfo9wy] { cursor: default; opacity: .6; }
.tx-seg button:focus-visible[b-38vlbfo9wy] { outline: 2px solid var(--tx-accent); outline-offset: 1px; }

.tx-create[b-38vlbfo9wy] { width: min(560px, calc(100vw - 32px)); overflow-y: auto; }
.tx-create-form[b-38vlbfo9wy] { gap: 12px; }
.tx-create-error[b-38vlbfo9wy] { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fdecea; color: var(--tx-err); font-size: 13.5px; }

/* ---------- Detail ---------- */
.tx-det[b-38vlbfo9wy] {
    width: 340px;
    flex: 0 0 340px;
    background: #fff;
    border: 1px solid var(--tx-border);
    border-radius: 14px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}

.tx-dh[b-38vlbfo9wy] { display: flex; align-items: flex-start; gap: 8px; }
.tx-dh > div[b-38vlbfo9wy] { flex: 1; }
.tx-dh small[b-38vlbfo9wy] { color: var(--tx-muted); font-size: 13px; }
.tx-big[b-38vlbfo9wy] { display: block; font-size: 24px; font-weight: 750; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.tx-big.is-pos[b-38vlbfo9wy] { color: var(--tx-ok); }

.tx-form[b-38vlbfo9wy] { display: flex; flex-direction: column; gap: 12px; }
.tx-field[b-38vlbfo9wy] { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.tx-field > span[b-38vlbfo9wy], .tx-field > label[b-38vlbfo9wy] { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }
.tx-field-head[b-38vlbfo9wy] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tx-field-head label[b-38vlbfo9wy] { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: #8e8e93; }

.tx-google[b-38vlbfo9wy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tx-border);
    border-radius: 8px;
    background: #fff;
    color: var(--tx-text);
    font-size: 12.5px;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}

.tx-google:hover[b-38vlbfo9wy] { background: var(--tx-soft); color: var(--tx-text); }
.tx-google:focus-visible[b-38vlbfo9wy] { outline: 2px solid var(--tx-accent); outline-offset: 2px; }
.tx-google svg[b-38vlbfo9wy] { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-google .tx-ext[b-38vlbfo9wy] { width: 11px; height: 11px; color: var(--tx-muted); }

.tx-textarea[b-38vlbfo9wy] { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.35; }
.tx-orig[b-38vlbfo9wy] { color: var(--tx-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.tx-orig b[b-38vlbfo9wy] { font-weight: 550; color: var(--tx-text-2); }
.tx-hint[b-38vlbfo9wy] { margin: 0; color: var(--tx-muted); font-size: 12.5px; }
.tx-dact[b-38vlbfo9wy] { display: flex; gap: 8px; flex-wrap: wrap; }

.tx-facts[b-38vlbfo9wy] { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; border-top: 1px solid var(--tx-divider); padding-top: 12px; }
.tx-facts dt[b-38vlbfo9wy] { color: var(--tx-muted); font-weight: 500; }
.tx-facts dd[b-38vlbfo9wy] { margin: 0; overflow-wrap: anywhere; }
.tx-facts a[b-38vlbfo9wy] { color: var(--tx-accent); text-decoration: none; }
.tx-facts a:hover[b-38vlbfo9wy] { text-decoration: underline; }
.tx-mono[b-38vlbfo9wy] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

@media (max-width: 1100px) {
    .tx-cols[b-38vlbfo9wy] { flex-direction: column-reverse; align-items: stretch; }
    .tx-det[b-38vlbfo9wy] { width: 100%; flex-basis: auto; position: static; }
}

@media (max-width: 640.98px) {
    .tx-two[b-38vlbfo9wy] { grid-template-columns: 1fr; }
    .tx-amount-row[b-38vlbfo9wy] { flex-wrap: wrap; }
    .tx-page[b-38vlbfo9wy] {
        margin: -1.1rem -1.5rem 0 -1.5rem;
        padding: 18px 16px 24px 16px;
    }

    .tx-meta[b-38vlbfo9wy] { flex-basis: 100%; order: 1; padding-top: 0; }
    .tx-header .tx-btn[b-38vlbfo9wy] { order: 2; }
    .tx-filters select[b-38vlbfo9wy] { flex: 1 1 100%; }
    .tx-amount-filter[b-38vlbfo9wy] { flex: 1 1 100%; }
    .tx-sim-list label[b-38vlbfo9wy] { grid-template-columns: 18px minmax(0, 1fr) 84px; }
    .tx-sim-date[b-38vlbfo9wy], .tx-sim-state[b-38vlbfo9wy] { display: none; }

    /* Liste als Karten-Zeilen: Empfänger + Betrag oben, Betreff darunter, Datum links und Kategorie rechts unten. */
    .tx-table[b-38vlbfo9wy], .tx-table tbody[b-38vlbfo9wy] { display: block; }
    .tx-table thead[b-38vlbfo9wy] { display: none; }
    /* :not([style]) – die Platzhalter-Zeilen von Virtualize behalten ihre gesetzte Höhe. */
    .tx-table tbody tr:not([style])[b-38vlbfo9wy] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "main amt" "date cat";
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
        padding: 11px 14px;
        border-bottom: 1px solid #f2f1ec;
    }
    .tx-table tbody tr[style][b-38vlbfo9wy] { display: block; }
    .tx-table tbody tr:last-child[b-38vlbfo9wy] { border-bottom: 0; }
    .tx-table td[b-38vlbfo9wy] { display: block; padding: 0; border: 0; background: transparent !important; }
    .tx-table tbody tr:hover[b-38vlbfo9wy] { background: var(--tx-soft); }
    .tx-table tbody tr.is-sel[b-38vlbfo9wy] { background: var(--tx-yellow-soft); box-shadow: inset 3px 0 0 var(--tx-yellow); }
    .tx-table tbody tr.is-sel td:first-child[b-38vlbfo9wy] { box-shadow: none; }
    .tx-list > .tx-bm-note:first-child + .tx-scroll .tx-table tbody tr:first-child[b-38vlbfo9wy] { border-top: 0; }

    .tx-table .tx-main[b-38vlbfo9wy] { grid-area: main; max-width: none; width: auto; }
    .tx-table .tx-amt[b-38vlbfo9wy] { grid-area: amt; min-width: 0; align-self: start; text-align: right; font-size: 15px; white-space: nowrap; }
    .tx-table .tx-col-date[b-38vlbfo9wy] {
        grid-area: date;
        width: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--tx-muted);
        font-size: 12.5px;
    }
    .tx-col-date b[b-38vlbfo9wy] { display: inline; font-weight: 500; color: var(--tx-text-2); }
    .tx-col-date small[b-38vlbfo9wy] { font-size: 12.5px; }
    .tx-col-date .tx-bm-pill[b-38vlbfo9wy] { margin-top: 0; }
    .tx-table .tx-col-cat[b-38vlbfo9wy] { grid-area: cat; width: auto; min-width: 0; max-width: 62vw; justify-self: end; }
    .tx-table .tx-col-cat > *[b-38vlbfo9wy] { max-width: 100%; }
    .tx-cat-select[b-38vlbfo9wy] { height: 34px; }
    .tx-payee[b-38vlbfo9wy] { font-size: 15px; }

    .tx-bm-note[b-38vlbfo9wy] { padding: 9px 12px; }

    /* Details als Vollbild-Blatt über der Liste statt oben auf der Seite */
    .tx-det[b-38vlbfo9wy] {
        position: fixed;
        inset: 0;
        z-index: 1040;
        width: auto;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: tx-sheet-in-b-38vlbfo9wy .18s ease-out;
    }
    .tx-dh[b-38vlbfo9wy] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        margin: 0 -16px;
        padding: 12px 10px 10px 16px;
        border-bottom: 1px solid var(--tx-divider);
    }
    .tx-dh .tx-icon[b-38vlbfo9wy] { width: 40px; height: 40px; }
    .tx-dh .tx-icon svg[b-38vlbfo9wy] { width: 20px; height: 20px; }
}

@keyframes tx-sheet-in-b-38vlbfo9wy {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
/* /Components/Pages/YoutubeDownload.razor.rz.scp.css */
/* Handy: Tabellen als untereinander stehende Einträge (Titel oben, Angaben + Knöpfe darunter). */
@media (max-width: 640.98px) {
    .yt-table thead[b-vg9x7781yg] { display: none; }

    .yt-table[b-vg9x7781yg], .yt-table tbody[b-vg9x7781yg] { display: block; }

    .yt-table tr[b-vg9x7781yg] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
        padding: 10px 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

    .yt-table td[b-vg9x7781yg] {
        display: block;
        padding: 0;
        border: 0;
        color: var(--bs-secondary-color, #6c757d);
        font-size: 14px;
    }

    .yt-table td:first-child[b-vg9x7781yg] {
        flex: 1 1 100%;
        color: inherit;
        font-size: 15px;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .yt-table td:last-child[b-vg9x7781yg] {
        margin-left: auto;
        white-space: normal !important;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .yt-table td:last-child:empty[b-vg9x7781yg] { display: none; }
}