:root {
    --bg-start: #f6fbff;
    --bg-mid: #ecf4ff;
    --bg-end: #fff8db;
    --surface: rgba(255, 255, 255, 0.86);
    --surface-strong: #ffffff;
    --surface-border: rgba(33, 99, 190, 0.18);
    --text-main: #1c355f;
    --text-dim: #5f7396;
    --blue: #1f6fd9;
    --blue-soft: #c7defb;
    --yellow: #f4c835;
    --yellow-soft: #fff3c4;
    --danger: #b3293e;
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Segoe UI", "Noto Sans", Tahoma, sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(960px 520px at 8% 2%, rgba(69, 148, 255, 0.14), transparent 58%),
        radial-gradient(920px 540px at 95% 14%, rgba(244, 200, 53, 0.22), transparent 60%),
        linear-gradient(145deg, var(--bg-start) 0%, var(--bg-mid) 52%, var(--bg-end) 100%);
    background-attachment: fixed;
}

a,
.btn-link {
    color: var(--blue);
}

.glass-page {
    width: min(1320px, 94vw);
    margin: 22px auto 28px auto;
}

.glass-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(17, 56, 114, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-card {
    padding: 18px 18px 16px 18px;
}

.plan-card {
    padding: 14px 14px 12px 14px;
    border: 1px solid rgba(44, 110, 199, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
}

.login-card {
    max-width: 520px;
    margin: 56px auto 0 auto;
    padding: 24px;
}

.login-form {
    margin-top: 12px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.page-header h1,
.login-card h1 {
    margin: 0 0 2px 0;
    font-size: 1.72rem;
    letter-spacing: 0.01em;
}

.page-header p,
.login-card p {
    color: var(--text-dim);
}

.btn-primary {
    color: #ffffff;
    font-weight: 700;
    border-color: #165cbc;
    background: linear-gradient(130deg, #2e84ef 0%, #1f6fd9 56%, #175ab1 100%);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: #124f9f;
    background: linear-gradient(130deg, #3b8ff7 0%, #216fda 56%, #14529d 100%);
}

.btn-success {
    color: #2e2a12;
    font-weight: 700;
    border-color: #e6bc2f;
    background: linear-gradient(125deg, #ffe899 0%, #f8d34f 54%, #efc126 100%);
}

.btn-outline-primary {
    color: var(--blue);
    border-color: rgba(31, 111, 217, 0.5);
    background: rgba(255, 255, 255, 0.74);
}

.btn-outline-primary:hover {
    color: #0d4a9a;
    background: #edf4ff;
    border-color: rgba(31, 111, 217, 0.72);
}

.btn-outline-light {
    color: #7b651d;
    border-color: rgba(244, 200, 53, 0.7);
    background: rgba(255, 243, 196, 0.6);
}

.btn-outline-light:hover {
    color: #634e08;
    border-color: rgba(244, 200, 53, 0.92);
    background: rgba(255, 243, 196, 0.94);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.18rem rgba(77, 145, 235, 0.34);
}

.form-control,
.form-select {
    background: #ffffff;
    border-color: rgba(32, 93, 180, 0.25);
}

.form-inline-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}

.form-inline-grid.fixed-plan {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.section-title {
    background: linear-gradient(120deg, rgba(237, 245, 255, 0.9), rgba(255, 246, 208, 0.85));
    border: 1px solid rgba(33, 99, 190, 0.24);
    border-radius: 12px;
    padding: 8px 10px;
    font-weight: 700;
    margin-bottom: 10px;
}

.table-wrap {
    overflow-x: auto;
}

.table {
    margin: 0;
    color: var(--text-main);
}

.table th {
    background: rgba(33, 99, 190, 0.12);
    color: #214474;
}

.table td {
    background: rgba(255, 255, 255, 0.86);
}

.line-col {
    min-width: 92px;
    white-space: nowrap;
    font-weight: 700;
}

.icon-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.bio-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(39, 174, 96, 0.18);
    border: 1px solid rgba(34, 139, 74, 0.58);
    color: #1f5c33;
    font-size: 12px;
    font-weight: 700;
}

.text-line {
    font-size: 12px;
    line-height: 1.36;
    margin-bottom: 3px;
}

.text-segment {
    white-space: pre-wrap;
}

.segment-klammer {
    font-size: 0.84em;
    color: #7b8799;
}

.selection-head h2 {
    margin: 0;
    font-size: 1.22rem;
    letter-spacing: 0.01em;
}

.selection-head p {
    color: var(--text-dim);
}

.selection-head-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-head-tools .form-select {
    width: 86px;
}

.selection-grid {
    --kacheln-pro-zeile: 3;
    display: grid;
    grid-template-columns: repeat(var(--kacheln-pro-zeile), minmax(0, 1fr));
    gap: 12px;
}

.day-card {
    border: 1px solid rgba(33, 99, 190, 0.26);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    padding: 12px 12px 10px 12px;
}

.day-card.day-invalid {
    border-color: rgba(179, 41, 62, 0.75);
    background: rgba(253, 232, 237, 0.8);
}

.day-card h3 {
    margin: 0;
    font-size: 1.02rem;
}

.day-card small {
    color: #4c6487;
}

.day-options {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.option-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(199, 218, 243, 0.75);
    border-radius: 9px;
    padding: 7px 8px;
    background: rgba(255, 255, 255, 0.94);
}

.option-item.selected {
    border-color: rgba(236, 184, 15, 0.78);
    background: rgba(255, 244, 201, 0.72);
}

.option-item input[type="checkbox"] {
    margin: 0;
}

.option-line {
    font-weight: 700;
    min-width: 28px;
}

.option-text {
    display: block;
    font-size: 0.9rem;
    color: #334f79;
    white-space: normal;
    word-break: break-word;
}

.option-text .segment-klammer {
    color: #6f7f97;
}

.option-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.option-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.option-meta .bio-pill {
    padding: 1px 8px;
    font-size: 11px;
}

.option-icon {
    line-height: 1;
}

.selection-actions {
    display: flex;
    justify-content: flex-end;
}

.accordion-vdm {
    display: grid;
    gap: 10px;
}

.accordion-item-vdm {
    border: 1px solid rgba(33, 99, 190, 0.22);
    border-radius: 14px;
    overflow: clip;
    background: rgba(255, 255, 255, 0.62);
}

.accordion-toggle-vdm {
    width: 100%;
    border: none;
    background: linear-gradient(125deg, rgba(239, 247, 255, 0.95), rgba(255, 248, 223, 0.92));
    color: #184073;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    text-align: left;
}

.accordion-toggle-vdm.open {
    box-shadow: inset 0 -1px 0 rgba(29, 94, 184, 0.18);
}

.accordion-icon {
    font-size: 1.15rem;
    width: 22px;
    text-align: center;
}

.accordion-body-vdm {
    padding: 14px;
}

.alert {
    border: 1px solid rgba(41, 94, 166, 0.16);
}

.alert-info {
    color: #214779;
    background: rgba(204, 226, 253, 0.72);
}

.alert-danger {
    color: #7f1b2e;
    background: rgba(252, 216, 224, 0.84);
}

.alert-success {
    color: #385116;
    background: rgba(235, 246, 214, 0.9);
}

.text-muted {
    color: #6f7f99 !important;
}

@media (max-width: 1200px) {
    .form-inline-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .form-inline-grid.fixed-plan {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .glass-page {
        width: min(1320px, 96vw);
        margin-top: 14px;
    }

    .page-card,
    .plan-card {
        padding: 12px;
        border-radius: 14px;
    }

    .form-inline-grid {
        grid-template-columns: 1fr;
    }

    .selection-grid {
        grid-template-columns: 1fr;
    }

    .selection-head-tools {
        flex-wrap: wrap;
    }

    .page-header {
        flex-direction: column;
    }
}