/* wwwroot/css/anmelden.css – Anmeldemaske (eigenständige Seite ohne Layout) */

:root {
    --p37-ink: #0b1220;
    --p37-ink-raised: #111b2e;
    --p37-akzent: #2dd4bf;
    --p37-akzent-dunkel: #0f766e;
    --text-hell: rgba(255, 255, 255, 0.92);
    --text-gedimmt: rgba(255, 255, 255, 0.6);
}

html, body {
    height: 100%;
}

body.anmelde-seite {
    margin: 0;
    min-height: 100vh;
    background: var(--p37-ink);
    color: var(--text-hell);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    overflow-x: hidden;
}

/* ---------- Hintergrund ---------- */
.hintergrund {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, #13294b 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, #0e3b3a 0%, transparent 50%),
        var(--p37-ink);
}

.licht {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}

.licht-1 {
    width: 38rem;
    height: 38rem;
    top: -12rem;
    left: -8rem;
    background: #1d4ed8;
    opacity: 0.35;
}

.licht-2 {
    width: 30rem;
    height: 30rem;
    bottom: -10rem;
    right: 10%;
    background: var(--p37-akzent);
    opacity: 0.28;
}

.licht-3 {
    width: 22rem;
    height: 22rem;
    top: 40%;
    left: 40%;
    background: #f59e0b;
    opacity: 0.12;
}

@media (prefers-reduced-motion: no-preference) {
    .licht-1 { animation: schweben 22s ease-in-out infinite alternate; }
    .licht-2 { animation: schweben 26s ease-in-out infinite alternate-reverse; }
    .licht-3 { animation: schweben 30s ease-in-out infinite alternate; }
}

@keyframes schweben {
    to { transform: translate(6rem, 4rem) scale(1.1); }
}

.raster {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 35% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 35% 50%, #000 30%, transparent 75%);
}

.wasserzeichen {
    position: absolute;
    left: -2vw;
    bottom: -8vw;
    font-size: clamp(18rem, 42vw, 46rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(45, 212, 191, 0.12);
    user-select: none;
}

/* ---------- Aufbau ---------- */
.anmelde-layout {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 3rem;
    padding: 2rem 1rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .anmelde-layout {
        grid-template-columns: 1.1fr 1fr;
        padding: 3rem 2rem;
    }
}

/* ---------- Markenbereich ---------- */
.marke {
    display: none;
    max-width: 30rem;
}

@media (min-width: 992px) {
    .marke {
        display: block;
    }
}

.marke-logo {
    height: 44px;
    margin-bottom: 2.5rem;
}

.marke h1 {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

    .marke h1 span {
        background: linear-gradient(90deg, var(--p37-akzent), #60a5fa);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.marke-text {
    color: var(--text-gedimmt);
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.marke-punkte {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}

    .marke-punkte li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--text-hell);
    }

    .marke-punkte i {
        display: inline-grid;
        place-items: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 0.6rem;
        background: rgba(45, 212, 191, 0.12);
        color: var(--p37-akzent);
    }

/* ---------- Anmeldekarte ---------- */
.anmelde-karte {
    width: min(25rem, 100%);
    padding: 2.25rem 2rem 1.5rem;
    background: rgba(17, 27, 46, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

    .anmelde-karte h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .anmelde-karte .untertitel {
        color: var(--text-gedimmt);
        margin-bottom: 1.5rem;
    }

.feld-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gedimmt);
    margin-bottom: 0.3rem;
}

.feld {
    position: relative;
    margin-bottom: 1rem;
}

    .feld > i {
        position: absolute;
        left: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-gedimmt);
        pointer-events: none;
    }

    .feld .form-control {
        height: 2.85rem;
        padding-left: 2.6rem;
        padding-right: 2.6rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.65rem;
        color: #fff;
    }

        .feld .form-control::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .feld .form-control:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--p37-akzent);
            box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
        }

.feld-aktion {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text-gedimmt);
}

    .feld-aktion:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }

.link-knopf {
    border: 0;
    padding: 0;
    background: none;
    color: var(--p37-akzent);
}

    .link-knopf:hover {
        text-decoration: underline;
    }

.btn-anmelden {
    height: 2.85rem;
    border: 0;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, var(--p37-akzent), #14b8a6 50%, var(--p37-akzent-dunkel));
    color: #04201d;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(45, 212, 191, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .btn-anmelden:hover,
    .btn-anmelden:focus-visible {
        color: #04201d;
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(45, 212, 191, 0.35);
    }

.demo-hinweis {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.45);
    color: #fcd34d;
    font-size: 0.82rem;
}

.trenner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--text-gedimmt);
    font-size: 0.8rem;
}

    .trenner::before,
    .trenner::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.12);
    }

.btn-extern {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-hell);
    font-weight: 500;
}

    .btn-extern:hover {
        background: rgba(255, 255, 255, 0.09);
        color: #fff;
    }

    .btn-extern .bald {
        margin-left: 0.15rem;
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-gedimmt);
    }

.hinweis {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 0.6rem;
    font-size: 0.85rem;
}

    .hinweis ul {
        margin: 0;
        padding-left: 1rem;
    }

.hinweis-fehler {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.hinweis-erfolg {
    background: rgba(45, 212, 191, 0.1);
    border: 1px solid rgba(45, 212, 191, 0.35);
    color: #99f6e4;
}

.hinweis-info {
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #bfdbfe;
    margin-bottom: 0;
}

.fusszeile {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

    .fusszeile a {
        color: inherit;
    }

.form-check-input {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

    .form-check-input:checked {
        background-color: var(--p37-akzent-dunkel);
        border-color: var(--p37-akzent-dunkel);
    }

/* ---------- Umschalter Büro / Fahrer-App ---------- */
.bereich-wahl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .bereich-wahl button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.5rem 0.35rem;
        border: 0;
        border-radius: 0.55rem;
        background: transparent;
        color: var(--text-gedimmt);
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .bereich-wahl button:hover {
            color: #fff;
        }

        .bereich-wahl button.aktiv {
            background: rgba(45, 212, 191, 0.18);
            color: #fff;
            box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.45);
        }

/* Fahrer-Modus: Akzent in Bernstein, externe Anmeldung ausblenden */
.anmelde-karte.fahrer-modus .bereich-wahl button.aktiv {
    background: rgba(245, 158, 11, 0.18);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.5);
}

.anmelde-karte.fahrer-modus .btn-anmelden {
    background: linear-gradient(135deg, #fbbf24, #f59e0b 50%, #d97706);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25);
    color: #241500;
}

.anmelde-karte.fahrer-modus .trenner,
.anmelde-karte.fahrer-modus .btn-extern,
.anmelde-karte.fahrer-modus #baldHinweis {
    display: none !important;
}

/* Sprachwahl auf der Anmeldeseite */
.sprach-wahl {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    margin: -0.5rem 0 0.75rem;
}

    .sprach-wahl a {
        padding: 0.15rem 0.5rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.8rem;
        text-decoration: none;
    }

        .sprach-wahl a.aktiv,
        .sprach-wahl a:hover {
            color: #fff;
            border-color: #2dd4bf;
            background: rgba(45, 212, 191, 0.15);
        }

/* ================= Pakete & Preise (öffentliche Infoseite im Stil der Anmeldung) ================= */
.marke-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(45, 212, 191, 0.35);
    border-radius: 999px;
    color: var(--text-hell);
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(45, 212, 191, 0.08);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .marke-link:hover { background: rgba(45, 212, 191, 0.18); border-color: var(--p37-akzent); color: #fff; }
    .marke-link i { color: var(--p37-akzent); }

.pakete-seite {
    position: relative;
    z-index: 1;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.pakete-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

    .pakete-kopf .sprach-wahl { margin: 0; }

.pakete-anmelden {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--text-hell);
    padding: 0.3rem 0.9rem;
}

    .pakete-anmelden:hover { color: #fff; border-color: var(--p37-akzent); background: rgba(45, 212, 191, 0.12); }

.pakete-intro {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 2.5rem;
}

    .pakete-intro h1 {
        font-size: clamp(1.9rem, 4.5vw, 2.8rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin-bottom: 1rem;
    }

        .pakete-intro h1 span {
            background: linear-gradient(90deg, var(--p37-akzent), #60a5fa);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

    .pakete-intro p { color: var(--text-gedimmt); font-size: 1.05rem; }

.abrechnung-wahl {
    display: inline-flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .abrechnung-wahl button {
        border: 0;
        border-radius: 999px;
        padding: 0.4rem 1rem;
        background: transparent;
        color: var(--text-gedimmt);
        font-weight: 600;
    }

        .abrechnung-wahl button.aktiv {
            background: rgba(45, 212, 191, 0.18);
            color: #fff;
            box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.45);
        }

    .abrechnung-wahl .ersparnis {
        margin-left: 0.35rem;
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        background: rgba(245, 158, 11, 0.18);
        color: #fbbf24;
        font-size: 0.72rem;
    }

/* Paketkarten */
.pakete-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (min-width: 900px) {
    .pakete-raster { grid-template-columns: repeat(3, 1fr); }
}

.paket-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.5rem;
    background: rgba(17, 27, 46, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

    .paket-karte.empfohlen {
        border-color: rgba(45, 212, 191, 0.55);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(45, 212, 191, 0.25), 0 0 60px rgba(45, 212, 191, 0.12);
    }

@media (min-width: 900px) {
    .paket-karte.empfohlen { transform: translateY(-0.6rem); }
}

.paket-band {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--p37-akzent), #14b8a6 50%, var(--p37-akzent-dunkel));
    color: #04201d;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.paket-icon {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    background: rgba(45, 212, 191, 0.12);
    color: var(--p37-akzent);
    font-size: 1.25rem;
    margin-bottom: 0.9rem;
}

.paket-karte h2 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.paket-untertitel { color: var(--text-gedimmt); font-size: 0.9rem; min-height: 2.6em; margin: 0.25rem 0 1rem; }

.paket-preis { display: flex; align-items: baseline; gap: 0.25rem; }
    .paket-preis .betrag { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
    .paket-preis .waehrung { font-size: 1.3rem; font-weight: 600; }
    .paket-preis .zeitraum { color: var(--text-gedimmt); }
.paket-preis-hinweis { color: #fbbf24; font-size: 0.8rem; margin-top: -0.2rem; }

.paket-mengen {
    list-style: none;
    padding: 0.9rem 0;
    margin: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 0.45rem;
    font-size: 0.92rem;
}

    .paket-mengen i { color: var(--p37-akzent); margin-right: 0.45rem; }

.paket-module { flex: 1; margin-bottom: 1.25rem; }
.paket-module-titel { font-size: 0.8rem; font-weight: 600; color: var(--text-gedimmt); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.paket-module ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 0.92rem; }
.paket-module i { color: var(--p37-akzent); margin-right: 0.4rem; }

.paket-knopf {
    width: 100%;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-hell);
    font-weight: 600;
    padding: 0.6rem;
}

    .paket-knopf:hover { color: #fff; border-color: var(--p37-akzent); background: rgba(45, 212, 191, 0.1); }

    .paket-knopf.primaer {
        border: 0;
        background: linear-gradient(135deg, var(--p37-akzent), #14b8a6 50%, var(--p37-akzent-dunkel));
        color: #04201d;
        box-shadow: 0 10px 25px rgba(45, 212, 191, 0.25);
    }

        .paket-knopf.primaer:hover { color: #04201d; transform: translateY(-1px); }

/* Blöcke unterhalb */
.pakete-block {
    margin-top: 3.5rem;
}

    .pakete-block h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.4rem; }
    .pakete-block h2 i { color: var(--p37-akzent); }
.pakete-block-text { color: var(--text-gedimmt); margin-bottom: 1.25rem; }

.zusatz-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.zusatz-karte {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: rgba(17, 27, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
}

    .zusatz-karte > i { font-size: 1.4rem; color: var(--p37-akzent); }
.zusatz-name { font-weight: 600; }
.zusatz-preis { font-weight: 700; font-size: 1.1rem; margin: 0.15rem 0; }
    .zusatz-preis span { font-weight: 400; font-size: 0.82rem; color: var(--text-gedimmt); }
.zusatz-text { font-size: 0.85rem; color: var(--text-gedimmt); }

/* Vergleichstabelle */
.vergleich-huelle {
    overflow-x: auto;
    background: rgba(17, 27, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
}

.vergleich {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .vergleich th, .vergleich td { padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .vergleich thead th { text-align: center; font-size: 1rem; vertical-align: bottom; padding-top: 1rem; }
        .vergleich thead th span { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-gedimmt); }
    .vergleich tbody th { font-weight: 400; color: var(--text-hell); }
        .vergleich tbody th i { color: var(--text-gedimmt); }
        .vergleich tbody th small { display: block; margin-left: 1.6rem; color: #fbbf24; font-size: 0.75rem; }
    .vergleich td { text-align: center; width: 18%; }
    .vergleich .empfohlen { background: rgba(45, 212, 191, 0.06); }
    .vergleich tr.gruppe th {
        padding-top: 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--p37-akzent);
        background: transparent;
    }
    .vergleich .ja { color: var(--p37-akzent); font-size: 1.05rem; }
    .vergleich .nein { color: rgba(255, 255, 255, 0.3); font-size: 1.1rem; }

/* Fragen */
.faq { display: grid; gap: 0.6rem; }

    .faq details {
        background: rgba(17, 27, 46, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.8rem;
        padding: 0.8rem 1.1rem;
    }

    .faq summary { cursor: pointer; font-weight: 600; }
        .faq summary::marker { color: var(--p37-akzent); }
    .faq p { margin: 0.6rem 0 0; color: var(--text-gedimmt); }

.pakete-fuss {
    margin-top: 3rem;
    text-align: center;
    color: var(--text-gedimmt);
    font-size: 0.82rem;
}

    .pakete-fuss a { color: var(--text-gedimmt); }
        .pakete-fuss a:hover { color: var(--p37-akzent); }

/* ---------- Portal (Registrierung, Firmen-Anmeldung) ---------- */
.portal-mitte { display: flex; justify-content: center; }
.portal-karte { width: min(40rem, 100%); }
    .portal-karte a:not(.btn) { color: var(--p37-akzent); }
.portal-kopf-link { color: var(--text-gedimmt); text-decoration: none; font-size: 0.9rem; }
    .portal-kopf-link:hover { color: var(--p37-akzent); }
.portal-intro { margin-top: 3rem; }
.portal-cta { width: auto; padding-inline: 1.5rem; }
.portal-vorteile { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.portal-vorteile .zusatz-karte { display: block; }
.portal-vorteil-icon { font-size: 1.5rem; color: var(--p37-akzent); display: block; margin-bottom: 0.4rem; }
.portal-abschnitt { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p37-akzent); margin: 1.25rem 0 0.6rem; }
.portal-raster { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.portal-plz-ort { display: grid; grid-template-columns: 6rem 1fr; gap: 0 0.75rem; }
@media (min-width: 576px) { .portal-raster { grid-template-columns: 1fr 1fr; } }
.feld .form-control.ohne-icon { padding-left: 0.9rem; padding-right: 0.9rem; }
.feld-mit-zusatz .form-control { padding-right: 8.5rem; }
.feld-zusatz { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-gedimmt); font-size: 0.85rem; pointer-events: none; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.optional { font-weight: 400; color: rgba(255, 255, 255, 0.4); }
.portal-pruefung { margin: -0.6rem 0 0.8rem; min-height: 1.2em; }
    .portal-pruefung.ok { color: var(--p37-akzent); }
    .portal-pruefung.fehler { color: #fca5a5; }
.portal-pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; margin-bottom: 0.5rem; }
.portal-paket { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.75rem; cursor: pointer; background: rgba(255, 255, 255, 0.03); }
    .portal-paket input { position: absolute; opacity: 0; pointer-events: none; }
    .portal-paket:has(input:checked) { border-color: var(--p37-akzent); background: rgba(45, 212, 191, 0.1); box-shadow: 0 0 0 0.15rem rgba(45, 212, 191, 0.2); }
    .portal-paket:has(input:focus-visible) { outline: 2px solid var(--p37-akzent); outline-offset: 2px; }
.portal-paket-name { font-weight: 700; }
    .portal-paket-name i { color: var(--p37-akzent); }
.portal-paket-preis { font-size: 0.85rem; }
.portal-paket-text { font-size: 0.75rem; color: var(--text-gedimmt); }
.portal-gross-icon { font-size: 3rem; color: var(--p37-akzent); margin-bottom: 0.5rem; }
    .portal-gross-icon.fehler { color: #fca5a5; }
    .portal-gross-icon .spinner-border { width: 3rem; height: 3rem; }
.portal-schritte { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
    .portal-schritte li { display: flex; gap: 0.6rem; align-items: center; color: var(--text-gedimmt); }
    .portal-schritte li.fertig, .portal-schritte li.fertig i { color: var(--p37-akzent); }
    .portal-schritte li.laeuft { color: var(--text-hell); }
        .portal-schritte li.laeuft i { animation: pulsieren 1.2s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: 0.35; } }

/* ---------- Betreiber ---------- */
.betreiber-tabelle { background: rgba(17, 27, 46, 0.72); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 1rem; padding: 0.5rem; }
    .betreiber-tabelle .table { --bs-table-bg: transparent; }
    .betreiber-tabelle a { color: var(--p37-akzent); }

/* ---------- Startseite: Lizenzmodell, Module, Dienstleistungen, Über mich, Anfrage ---------- */
.portal-intro-klein { margin-top: 0.9rem; font-size: 0.9rem; color: var(--text-gedimmt); }
    .portal-intro-klein a { color: var(--p37-akzent); }
.portal-sprungmarken { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
    .portal-sprungmarken a {
        padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.88rem; text-decoration: none;
        color: var(--text-hell); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .portal-sprungmarken a:hover { border-color: var(--p37-akzent); color: #fff; }
.pakete-block { scroll-margin-top: 1.5rem; }

.lizenz-formel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lizenz-teil {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border-radius: 0.8rem; font-weight: 600;
    background: rgba(17, 27, 46, 0.75); border: 1px solid rgba(45, 212, 191, 0.35);
}
    .lizenz-teil i { color: var(--p37-akzent); }
    .lizenz-teil.modul { border-style: dashed; }
.lizenz-plus { font-size: 1.3rem; font-weight: 700; color: var(--p37-akzent); }
.lizenz-geraete {
    display: inline-flex; gap: 0.5rem; align-items: center; margin-top: 0.9rem; padding: 0.45rem 0.9rem; border-radius: 999px;
    background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35); color: #fde68a; font-size: 0.9rem;
}

.grundpaket-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.6rem 1.25rem; }
    .grundpaket-liste li { display: flex; gap: 0.6rem; align-items: flex-start; }
    .grundpaket-liste i { color: var(--p37-akzent); font-size: 1.1rem; }
    .grundpaket-liste small { display: block; color: #fbbf24; font-size: 0.78rem; }

.modul-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.modul-karte {
    display: flex; flex-direction: column; padding: 1.1rem 1.2rem; border-radius: 1rem;
    background: rgba(17, 27, 46, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
}
    .modul-karte:hover { border-color: rgba(45, 212, 191, 0.4); }
    .modul-karte p { color: var(--text-gedimmt); font-size: 0.9rem; margin: 0.5rem 0; }
    .modul-karte ul, .angebot-karte ul { list-style: none; padding: 0; margin: 0 0 0.75rem; font-size: 0.88rem; }
    .modul-karte li, .angebot-karte li { display: flex; gap: 0.4rem; margin-bottom: 0.25rem; }
    .modul-karte li i, .angebot-karte li i { color: var(--p37-akzent); }
.modul-kopf { display: flex; gap: 0.75rem; align-items: center; }
    .modul-kopf > i { font-size: 1.5rem; color: var(--p37-akzent); }
    .modul-kopf h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.modul-hinweis { font-size: 0.72rem; color: #fbbf24; }
.modul-preis { margin-top: auto; font-weight: 700; color: var(--text-hell); font-size: 0.95rem; }
    .modul-preis span { font-weight: 400; color: var(--text-gedimmt); }

.angebot-karte {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; padding: 1.25rem 1.4rem; border-radius: 1rem;
    background: rgba(17, 27, 46, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
}
    .angebot-karte h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; }
    .angebot-karte p { color: var(--text-gedimmt); margin-bottom: 0.6rem; }
.angebot-icon { font-size: 2rem; color: var(--p37-akzent); }
.angebot-aktion { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; min-width: 12rem; }
    .angebot-aktion .modul-preis { margin-top: 0; text-align: center; }

.ueber-mich {
    display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem; border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(17, 27, 46, 0.7) 45%); border: 1px solid rgba(255, 255, 255, 0.08);
}
.ueber-mich-bild {
    flex: 0 0 8rem; height: 8rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--p37-akzent), var(--p37-akzent-dunkel)); color: #04201d; font-size: 2.4rem; font-weight: 800;
    box-shadow: 0 10px 30px rgba(45, 212, 191, 0.2);
}
    .ueber-mich-bild img { width: 100%; height: 100%; object-fit: cover; }
.ueber-mich-text { flex: 1 1 22rem; }
    .ueber-mich-text p { color: var(--text-hell); line-height: 1.6; }
.ueber-mich-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.ueber-mich-werte { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; }
    .ueber-mich-werte li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--text-gedimmt); }
    .ueber-mich-werte i { color: var(--p37-akzent); font-size: 1.15rem; }
    .ueber-mich-werte strong { color: var(--text-hell); margin-right: 0.25rem; }

.anfrage-form {
    max-width: 46rem; padding: 1.4rem; border-radius: 1.25rem;
    background: rgba(17, 27, 46, 0.72); border: 1px solid rgba(255, 255, 255, 0.09);
}
.anfrage-arten { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
    .anfrage-arten .portal-paket-name { font-weight: 600; font-size: 0.9rem; }
.anfrage-text { padding: 0.75rem 0.9rem; min-height: 7rem; }
.anfrage-datenschutz { margin: 0.75rem 0 0; color: var(--text-gedimmt); }
    .anfrage-datenschutz a { color: var(--p37-akzent); }
.baustein-einheit { display: block; font-weight: 400; font-size: 0.78rem; color: var(--p37-akzent); margin-bottom: 0.2rem; }
.portal-link { color: var(--p37-akzent); }
.betreiber-module { position: relative; }
    .betreiber-module summary { list-style: none; }
    .betreiber-module summary::-webkit-details-marker { display: none; }
.betreiber-module-liste {
    position: absolute; z-index: 5; top: 100%; left: 0; margin-top: 0.25rem; padding: 0.6rem 0.8rem; min-width: 16rem;
    background: #111b2e; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* ---------- Auswahl: Paket + Module ---------- */
.nur-gewaehlt { display: none; }
.gewaehlt .nur-gewaehlt, .modul-wahl:has(input:checked) .nur-gewaehlt { display: inline; }
.gewaehlt .nur-offen, .modul-wahl:has(input:checked) .nur-offen { display: none; }
.paket-karte.gewaehlt { border-color: var(--p37-akzent); box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.25), 0 20px 50px rgba(0, 0, 0, 0.35); }
.modul-karte { position: relative; }
.modul-karte.gewaehlt { border-color: var(--p37-akzent); background: rgba(45, 212, 191, 0.07); }
.modul-wahl {
    position: absolute; top: 0.8rem; right: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
    padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-gedimmt); background: rgba(255, 255, 255, 0.04);
}
    .modul-wahl input { position: absolute; opacity: 0; pointer-events: none; }
    .modul-wahl:has(input:checked) { border-color: var(--p37-akzent); color: #04201d; background: var(--p37-akzent); }
    .modul-wahl:has(input:focus-visible) { outline: 2px solid var(--p37-akzent); outline-offset: 2px; }
.modul-karte .modul-kopf { padding-right: 6.5rem; }

.auswahl-leiste {
    position: sticky; bottom: 0.75rem; z-index: 20; margin-top: 2rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
    padding: 0.8rem 1.1rem; border-radius: 1rem;
    background: rgba(11, 18, 32, 0.92); border: 1px solid rgba(45, 212, 191, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}
.auswahl-text { min-width: 0; }
.auswahl-titel { color: var(--text-gedimmt); margin-right: 0.35rem; }
.auswahl-module { display: block; font-size: 0.85rem; color: var(--text-gedimmt); }
.auswahl-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .auswahl-knoepfe .paket-knopf { width: auto; padding-inline: 1.1rem; }
.anfrage-auswahl { padding: 0.5rem 0.75rem; border-radius: 0.6rem; background: rgba(45, 212, 191, 0.08); border: 1px dashed rgba(45, 212, 191, 0.4); }

/* Registrierung: Module anhaken */
.portal-module { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.45rem; margin-bottom: 0.6rem; }
.portal-modul {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 0.65rem; cursor: pointer; font-size: 0.88rem;
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03);
}
    .portal-modul input { accent-color: var(--p37-akzent); }
    .portal-modul i { color: var(--p37-akzent); }
    .portal-modul small { display: block; color: #fbbf24; font-size: 0.7rem; }
    .portal-modul:has(input:checked) { border-color: var(--p37-akzent); background: rgba(45, 212, 191, 0.1); }