/* ============================================================
   saw.css
   Eingebunden via App.razor

   Spezielle Bereiche
   Präfix: rf-  (register-form)  ← wird seitenübergreifend wiederverwendet
   Präfix: sp-  (subscription-plans, nur page-spezifisches)
   Präfix: sc-  (subscription-card)
   Präfix: lm-  (login-modal)
   Präfix: md-  (my-details)
   Präfix: cf-  (customer-form, Dialog-Formulare)
   ============================================================ */


.padding-button-bottom {
    padding-bottom: 50px !important;
}


/* ---------- Card ---------- */
.rf-card {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.dark .rf-card {
    background-color: rgba(31, 41, 55, 0.93);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* ---------- Formular-Wrapper ----------
   Den Abstand zum Bildschirmrand steuert schon der Seitenrahmen (nn-content); hier kaeme er
   sonst ein zweites Mal obendrauf und die Karte wirkte eingezwaengt. */
.rf-form-wrapper {
    max-width: 64rem;
    margin: 0 auto;
    padding: .5rem 0 3rem;
}

@media (min-width: 640px) {
    .rf-form-wrapper {
        padding: .5rem 1rem 4rem;
    }
}

@media (min-width: 1024px) {
    .rf-form-wrapper {
        padding: .75rem 1rem 4rem;
    }
}

/* ---------- Hinweis auf den kurzen Weg zu einem Menschen ---------- */
.rf-contact {
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .75);
    padding: 1rem 1.25rem;
}

.dark .rf-contact {
    border-color: #4b5563;
    background: rgba(31, 41, 55, .6);
}

.rf-contact-title {
    margin: 0 0 .25rem;
    font-size: .9375rem;
    font-weight: 700;
    color: #111827;
}

.dark .rf-contact-title {
    color: #f9fafb;
}

.rf-contact-text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.45;
    color: #6b7280;
}

.dark .rf-contact-text {
    color: #9ca3af;
}

.rf-contact-ways {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin: .75rem 0 .5rem;
}

@media (min-width: 640px) {
    .rf-contact-ways {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rf-contact-way {
    display: flex;
    align-items: center;
    gap: .625rem;
    border: 1px solid #e5e7eb;
    border-radius: .625rem;
    background: #ffffff;
    padding: .5rem .75rem;
    text-decoration: none;
    color: #111827;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .rf-contact-way:hover {
        border-color: var(--main-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        text-decoration: none;
    }

.dark .rf-contact-way {
    border-color: #4b5563;
    background: rgba(55, 65, 81, .6);
    color: #f9fafb;
}

.rf-contact-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--main-color);
}

.rf-contact-way-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
}

.dark .rf-contact-way-label {
    color: #9ca3af;
}

.rf-contact-way-value {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rf-contact-note {
    margin: 0;
    font-size: .8125rem;
    color: #6b7280;
}

.dark .rf-contact-note {
    color: #9ca3af;
}

/* ---------- Card-Header ---------- */
.rf-header-border {
    border-bottom: 1px solid #f3f4f6;
}

.dark .rf-header-border {
    border-bottom: 1px solid #374151;
}

.rf-title {
    color: #111827;
}

.dark .rf-title {
    color: #f9fafb;
}

.rf-subtitle {
    color: #6b7280;
}

.dark .rf-subtitle {
    color: #9ca3af;
}

/* ---------- Logo-Leiste (rf-top-bar wird auch in SubscriptionPlans genutzt) ---------- */
.rf-top-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.5rem 1rem .5rem;
    width: 100%;
}

.rf-logo-link {
    display: flex;
    justify-content: center;
    width: 72%;
    max-width: 26rem;
    text-decoration: none;
    opacity: .95;
    transition: opacity .15s;
}

    .rf-logo-link:hover {
        opacity: 1;
    }

.rf-logo {
    height: 100px;
}

.rf-page-badge {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: .25rem .9rem;
}

.dark .rf-page-badge {
    color: #e2e8f0;
    background: rgba(55,65,81,.85);
    border-color: #4b5563;
}

/* ---------- Labels ---------- */
.rf-label {
    color: #374151;
    font-size: .875rem;
    font-weight: 500;
    display: block;
    margin-bottom: .25rem;
}

.dark .rf-label {
    color: #d1d5db;
}

/* ---------- Inputs ---------- */
.rf-input {
    width: 100%;
    border-radius: .5rem;
    border: 1px solid #d1d5db;
    padding: .625rem .75rem;
    font-size: .875rem;
    color: #111827;
    background-color: #ffffff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

    .rf-input::placeholder {
        color: #9ca3af;
    }

    .rf-input:focus {
        border-color: #06b6d4;
        box-shadow: 0 0 0 3px rgba(6,182,212,.15);
    }

.dark .rf-input {
    background-color: rgba(55, 65, 81, 0.85);
    color: #f3f4f6;
    border-color: #4b5563;
}

    .dark .rf-input::placeholder {
        color: #6b7280;
    }

    .dark .rf-input:focus {
        border-color: var(--main-color);
        box-shadow: 0 0 0 3px rgba(34,211,238,.12);
    }

.rf-input-error {
    border-color: #f87171 !important;
}

    .rf-input-error:focus {
        box-shadow: 0 0 0 3px rgba(248,113,113,.2) !important;
    }

.dark .rf-input-error {
    border-color: #ef4444 !important;
}

/* ---------- Feldfehlermeldung ---------- */
.rf-field-error {
    margin-top: .25rem;
    font-size: .75rem;
    color: #ef4444;
}

.dark .rf-field-error {
    color: #fca5a5;
}

/* ---------- Feldhinweis (kein Fehler) ---------- */
.rf-field-hint {
    margin-top: .25rem;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--main-color);
}

.dark .rf-field-hint {
    color: var(--main-color);
}

/* ---------- AGB-Box ---------- */
.rf-agb-box {
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: 1rem;
}

.dark .rf-agb-box {
    border-color: #4b5563;
}

.rf-agb-text {
    font-size: .875rem;
    color: #374151;
}

.dark .rf-agb-text {
    color: #d1d5db;
}

/* ---------- Globaler Fehler-Banner ---------- */
.rf-error-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-radius: .5rem;
    border: 1px solid #fecaca;
    background-color: #fef2f2;
    padding: .75rem 1rem;
    font-size: .875rem;
    color: #b91c1c;
}

.dark .rf-error-banner {
    border-color: #7f1d1d;
    background-color: rgba(127,29,29,.25);
    color: #fca5a5;
}

/* ---------- Submit-Button ---------- */
.rf-btn-primary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .5rem;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--main-color);
    border: none;
    cursor: pointer;
    transition: background-color .2s;
}

    .rf-btn-primary:hover:not(:disabled) {
        background-color: #155e75;
    }

    .rf-btn-primary:disabled {
        background-color: #cbd5e1;
        color: #94a3b8;
        cursor: not-allowed;
    }

.dark .rf-btn-primary:disabled {
    background-color: #374151;
    color: #6b7280;
}

/* ---------- Sekundär-Button (z. B. Abbrechen) ---------- */
.rf-btn-secondary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .5rem;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #334155;
    background-color: #e2e8f0;
    border: none;
    cursor: pointer;
    transition: background-color .2s;
}

    .rf-btn-secondary:hover {
        background-color: #cbd5e1;
    }

.dark .rf-btn-secondary {
    background-color: #374151;
    color: #e5e7eb;
}

    .dark .rf-btn-secondary:hover {
        background-color: #4b5563;
    }

/* ---------- Button für endgültige Schritte (Kündigen, Entfernen) ---------- */
.rf-btn-danger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .5rem;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--jt-danger, #dc2626);
    border: none;
    cursor: pointer;
    transition: background-color .2s, opacity .2s;
}

    .rf-btn-danger:hover:not(:disabled) {
        background-color: var(--jt-danger-hover, #b91c1c);
    }

    .rf-btn-danger:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

/* ---------- Kündigungsdialog ---------- */
.cd-grid {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: .5rem 1.25rem;
    margin: 0;
    font-size: .875rem;
}

    .cd-grid dt {
        color: var(--jt-fg-muted);
    }

    .cd-grid dd {
        margin: 0;
        color: var(--jt-fg-default);
    }

.cd-notice {
    border-left: 3px solid var(--main-color);    border-radius: .375rem;
    background: var(--jt-bg-subtle);
    padding: .75rem .875rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--jt-fg-muted);
}

.cd-notice--warn {
    border-left-color: var(--jt-warning, #f59e0b);
}

.cd-text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--jt-fg-default);
}

.cd-consent {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--jt-fg-default);
    cursor: pointer;
}

.cd-consent-check {
    margin-top: .1875rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--main-color);
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .cd-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .125rem;
    }

        .cd-grid dd {
            margin-bottom: .5rem;
        }
}

/* ---------- Aktionsleiste im Kundenformular ---------- */
.cf-actions {
    display: flex;
    gap: .75rem;
}

    .cf-actions > button {
        flex: 1 1 0;
        width: auto;
    }

/* ---------- Mobile: Luft unterm Button ---------- */
@media (max-width: 639px) {
    .rf-form-body {
        padding-bottom: 6rem;
    }

    .rf-logo-link {
        width: 78%;
    }
}


/* ============================================================
   Subscription Plans Page
   Präfix: sp-  (nur page-spezifische Elemente ohne rf-Äquivalent)
   ============================================================ */

/* ---------- Seiten-Wrapper ---------- */
.sp-page {
    min-height: 100dvh;
    background: transparent;
    /* Nimmt die seitliche Polsterung des Rahmens (.nn-content, p-4) zurueck, damit die Karten
       auf schmalen Anzeigen den Platz bekommen, den sie brauchen. Oben und unten bleibt sie. */
    margin-left: -1rem;
    margin-right: -1rem;
}

/* ---------- Intro-Overlay (Logo-Animation) ---------- */
.sp-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--main-color), #0284c7);
    animation: sp-overlay-fade 0.6s ease-out 1.6s forwards;
    pointer-events: none;
}

.dark .sp-intro-overlay {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

@keyframes sp-overlay-fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.sp-logo-intro {
    animation: sp-logo-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

    .sp-logo-intro img {
        width: clamp(12rem, 30vw, 22rem);
        height: auto;
    }

@keyframes sp-logo-pop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------- Welcome-Overlay ---------- */
.sp-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
}

.dark .sp-welcome-overlay {
    background: rgba(0,0,0,.65);
}

.sp-welcome-message {
    position: fixed;
    inset: 0;
    z-index: 41;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: sp-pulse 2s ease-in-out infinite;
}

@keyframes sp-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.018);
    }
}

.sp-welcome-card {
    width: 100%;
    max-width: 34rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.97);
    padding: 2rem 2.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    text-align: center;
}

.dark .sp-welcome-card {
    background: rgba(31,41,55,.97);
}

@media (min-width: 640px) {
    .sp-welcome-card {
        padding: 2.5rem 3rem;
    }
}

.sp-welcome-icon {
    margin: 0 auto 1.5rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4ade80, #16a34a);
    box-shadow: 0 8px 24px rgba(22,163,74,.35);
}

.sp-welcome-title {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--main-color), #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .sp-welcome-title {
    background: linear-gradient(135deg, var(--main-color), #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
}

@media (min-width: 640px) {
    .sp-welcome-title {
        font-size: 2.25rem;
    }
}

.sp-welcome-text {
    font-size: 1.125rem;
    color: #374151;
    margin-bottom: 1.5rem;
}

.dark .sp-welcome-text {
    color: #d1d5db;
}

.sp-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
    font-size: .875rem;
    color: #4b5563;
}

.dark .sp-progress-label {
    color: #9ca3af;
}

.sp-progress-track {
    height: .75rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.dark .sp-progress-track {
    background: #374151;
}

.sp-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #06b6d4, #2563eb);
    animation: sp-progress-grow 1.5s ease-out forwards;
}

@keyframes sp-progress-grow {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* ---------- Content-Wrapper ---------- */
.sp-content {
    padding-bottom: 5rem;
    transition: opacity .3s;
}

@media (min-width: 640px) {
    .sp-content {
        padding-bottom: 4rem;
    }
}

.sp-content.sp-dimmed {
    opacity: .3;
    pointer-events: none;
}

/* ---------- Seiten-Header (Login-Button rechts) ---------- */
.sp-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem 1.5rem;
}

/* ---------- Login-Button ---------- */
.sp-btn-login {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .5rem;
    background: rgba(255,255,255,.9);
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
}

    .sp-btn-login:hover {
        background: #ffffff;
        box-shadow: 0 4px 18px rgba(0,0,0,.18);
    }

    .sp-btn-login:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(6,182,212,.3);
    }

.dark .sp-btn-login {
    background: rgba(31,41,55,.92);
    color: #d1d5db;
    border: 1px solid #4b5563;
}

    .dark .sp-btn-login:hover {
        background: rgba(55,65,81,.95);
    }

/* ---------- User-Bar (eingeloggt) ---------- */
.sp-user-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.sp-user-email {
    border-radius: .5rem;
    background: rgba(255,255,255,.9);
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.dark .sp-user-email {
    background: rgba(31,41,55,.92);
    color: #d1d5db;
    border: 1px solid #4b5563;
}

.sp-btn-logout {
    border-radius: .5rem;
    background: rgba(239,68,68,.9);
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background .2s;
}

    .sp-btn-logout:hover {
        background: #dc2626;
    }

    .sp-btn-logout:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(239,68,68,.3);
    }

/* ---------- Karten-Grid ---------- */
.sp-grid-wrapper {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 .75rem;
}

@media (min-width: 640px) {
    .sp-grid-wrapper {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sp-grid-wrapper {
        padding: 0 2rem;
    }
}

.sp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Deutliche Zaesur zwischen Paketen und Einzelfunktionen: zwei Preislisten dicht
   untereinander lesen sich sonst wie eine. */
.sp-grid-wrapper--spaced {
    margin-top: 4rem;
}

@media (min-width: 1024px) {
    .sp-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* ---------- Grid-Einstiegsanimation ---------- */
.sp-grid-animate > * {
    animation: sp-wobble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

    .sp-grid-animate > *:nth-child(1) {
        animation-delay: .10s;
    }

    .sp-grid-animate > *:nth-child(2) {
        animation-delay: .22s;
    }

    .sp-grid-animate > *:nth-child(3) {
        animation-delay: .34s;
    }

@keyframes sp-wobble-in {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ============================================================
   Subscription Card
   Präfix: sc-  (subscription-card)
   ============================================================ */

/* ---------- Karte ---------- */
.sc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: .75rem;
    background-color: #ffffff;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    transition: box-shadow .3s, transform .3s;
}

    .sc-card:hover {
        box-shadow: 0 12px 40px rgba(0,0,0,.18);
        transform: translateY(-4px);
    }

.dark .sc-card {
    background-color: rgba(31, 41, 55, 0.93);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

@media (min-width: 1024px) {
    .sc-card {
        padding: 2rem;
    }
}

/* ---------- Titel ---------- */
.sc-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0;
}

.dark .sc-title {
    color: #f9fafb;
}

@media (min-width: 1024px) {
    .sc-title {
        font-size: 1.5rem;
    }
}

/* ---------- Beschreibung ---------- */
.sc-description {
    font-size: .875rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    flex-grow: 0;
}

.dark .sc-description {
    color: #9ca3af;
}

@media (min-width: 1024px) {
    .sc-description {
        font-size: 1rem;
    }
}

/* ---------- Preis ---------- */
.sc-price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
    margin-bottom: 1.5rem;
}

.sc-price {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--main-color);
}

.dark .sc-price {
    color: var(--main-color);
}

@media (min-width: 1024px) {
    .sc-price {
        font-size: 2.25rem;
    }
}

.sc-price-unit {
    font-size: .875rem;
    color: #6b7280;
}

.dark .sc-price-unit {
    color: #9ca3af;
}

/* ---------- Feature-Liste ---------- */
.sc-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Traegt jetzt Kopfzeile und optional die ausgeklappte Beschreibung untereinander. */
.sc-feature-item {
    display: flex;
    flex-direction: column;
    font-size: .875rem;
}

@media (min-width: 1024px) {
    .sc-feature-item {
        font-size: 1rem;
    }
}

/* Kopfzeile: Haken, Name und (wenn aufklappbar) das Pfeilchen. */
.sc-feature-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.sc-feature-head--plain {
    cursor: default;
}

.sc-feature-chevron {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .75rem;
    line-height: 1;
    color: var(--jt-fg-muted);
    transition: transform .15s ease;
}

.sc-feature-chevron--open {
    transform: rotate(180deg);
    color: var(--main-color);
}

.sc-feature-item--expandable .sc-feature-head:hover .sc-feature-text {
    color: var(--main-color);
}

/* Eingerueckt auf Hoehe des Namens, damit der Bezug klar bleibt. */
.sc-feature-description {
    margin: .375rem 0 .125rem 1.75rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--jt-fg-secondary);
}

.sc-feature-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: #16a34a;
}

.sc-feature-text {
    color: #374151;
}

.dark .sc-feature-text {
    color: #d1d5db;
}


/* ============================================================
   Login Modal
   Präfix: lm-  (login-modal)
   ============================================================ */

/* ---------- Overlay ---------- */
.lm-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    padding: 1rem;
}

/* ---------- Modal-Container ---------- */
.lm-modal {
    position: relative;
    width: 100%;
    max-width: 28rem;
    /* Auf kleinen/kurzen Viewports darf der Dialog nicht über den Rand hinauslaufen –
       sonst ist die untere Build-/Rollen-Info nicht erreichbar. Intern scrollbar. */
    max-height: calc(100vh - 2rem);
    border-radius: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------- Schließen-Button ---------- */
.lm-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .lm-close-btn:hover {
        background: #f3f4f6;
        color: #374151;
    }

.dark .lm-close-btn:hover {
    background: rgba(55,65,81,.8);
    color: #d1d5db;
}

/* ---------- Header ---------- */
.lm-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.75rem 1.5rem 1rem;
    text-align: center;
}

.lm-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.lm-subtitle {
    margin: 0;
    font-size: .875rem;
}

/* ---------- Formular-Bereich ---------- */
.lm-form-body {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

/* ---------- Footer ---------- */
.lm-footer {
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: .875rem;
    color: #6b7280;
    border-top: 1px solid #f3f4f6;
    margin: 0;
}

.dark .lm-footer {
    color: #9ca3af;
    border-top-color: #374151;
}

.lm-footer-link {
    font-weight: 600;
    color: var(--main-color);
    text-decoration: none;
    transition: color .15s;
}

    .lm-footer-link:hover {
        color: var(--main-color);
    }

.dark .lm-footer-link {
    color: var(--main-color);
}

    .dark .lm-footer-link:hover {
        color: #67e8f9;
    }


/* ============================================================
   My Details Page
   Präfix: md-  (my-details)
   ============================================================ */

.md-page {
    padding: 1.5rem 1.5rem 6rem;
}

.md-content {
    max-width: 72rem;
    margin: 0 auto;
}

.md-page-header {
    margin-bottom: 2rem;
}

.md-page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 .5rem;
}

.dark .md-page-title {
    color: #f9fafb;
}

.md-page-subtitle {
    font-size: .875rem;
    color: #6b7280;
    margin: 0;
}

.dark .md-page-subtitle {
    color: #9ca3af;
}

/* ---------- Karten-Grid ---------- */
.md-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .md-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Karte ---------- */
.md-card {
    border-radius: .75rem;
    background-color: #ffffff;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.dark .md-card {
    background-color: rgba(31, 41, 55, 0.97);
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

/* ---------- Karten-Header ---------- */
.md-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid #f3f4f6;
}

.dark .md-card-header {
    border-bottom-color: #374151;
}

.md-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.dark .md-card-title {
    color: #f9fafb;
}

/* ---------- Bearbeiten-Button ---------- */
.md-btn-edit {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--main-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .625rem;
    border-radius: .375rem;
    transition: color .15s, background .15s;
}

    .md-btn-edit:hover {
        color: var(--main-color);
        background: rgba(8,145,178,.08);
    }

.dark .md-btn-edit {
    color: var(--main-color);
}

    .dark .md-btn-edit:hover {
        color: #67e8f9;
        background: rgba(34,211,238,.08);
    }

/* Hinweis im Slave: Stammdaten sind nur im Master bearbeitbar (readonly). */
.md-master-hint {
    font-size: .75rem;
    font-weight: 500;
    color: #6b7280;
    background: rgba(107,114,128,.08);
    border: 1px solid rgba(107,114,128,.2);
    border-radius: .375rem;
    padding: .25rem .625rem;
    white-space: nowrap;
}

.dark .md-master-hint {
    color: #9ca3af;
    background: rgba(156,163,175,.1);
    border-color: rgba(156,163,175,.25);
}

/* ---------- Felder-Liste ---------- */
.md-fields {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.md-field-label {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    margin-bottom: .2rem;
}

.dark .md-field-label {
    color: #6b7280;
}

.md-field-value {
    font-size: .875rem;
    color: #111827;
    margin: 0;
    line-height: 1.5;
}

.dark .md-field-value {
    color: #f3f4f6;
}

/* ---------- Zweispaltiges Feld-Grid ---------- */
.md-field-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* ---------- Leer-Zustand (keine abweichende Rechnungsadresse) ---------- */
.md-empty-box {
    border-radius: .5rem;
    background-color: #f9fafb;
    padding: .875rem 1rem;
}

.dark .md-empty-box {
    background-color: rgba(55, 65, 81, 0.5);
}

.md-empty-text {
    font-size: .875rem;
    color: #6b7280;
    margin: 0;
}

.dark .md-empty-text {
    color: #9ca3af;
}

.md-btn-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--main-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: .375rem;
    transition: color .15s;
}

    .md-btn-link:hover {
        color: var(--main-color);
    }

.dark .md-btn-link {
    color: var(--main-color);
}

    .dark .md-btn-link:hover {
        color: #67e8f9;
    }


/* ============================================================
   Customer Form (Dialog-Formulare)
   Präfix: cf-  (customer-form)
   ============================================================ */

.rz-dialog {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

.dark .rz-dialog {
    background-color: rgba(17, 24, 39, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
    color: #f3f4f6 !important;
}

.dark .rz-dialog-wrapper {
    background-color: transparent !important;
}

/* ---------- Äußerer Wrapper ---------- */
.cf-wrapper {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
}

/* ---------- Card-Header ---------- */
.cf-card-header {
    padding: 1.25rem 1.5rem 1rem;
}

.cf-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.dark .cf-card-title {
    color: #f9fafb;
}

/* ---------- Formular-Körper ---------- */
.cf-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

@media (max-width: 639px) {
    .cf-card-header {
        padding: 1rem 1rem .875rem;
    }

    .cf-form {
        padding: 1rem 1rem 1.25rem;
    }
}

/* ---------- Abschnitts-Trenner ---------- */
.cf-section-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--main-color);
    margin: .5rem 0 .125rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark .cf-section-title {
    color: var(--main-color);
    border-bottom-color: #374151;
}

/* ---------- Zweispaltiges Grid ---------- */
.cf-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .875rem;
}

@media (max-width: 479px) {
    .cf-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Checkbox-Zeile ---------- */
.cf-checkbox-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

.dark .cf-checkbox-row {
    color: #e5e7eb;
}

/* ---------- Hinweis unter Checkbox ---------- */
.cf-hint {
    font-size: .75rem;
    color: #6b7280;
    margin: .25rem 0 0 1.625rem;
}

.dark .cf-hint {
    color: #9ca3af;
}

/* ============================================================
   Navigation / Layout
   Präfix: nav-  (Hamburger, Sidebar)
   Präfix: ml-   (main-layout, Footer etc.)
   ============================================================ */

/* ---------- Hamburger-Button (Mobile) ---------- */
.nav-hamburger {
    border-radius: .5rem;
    background: rgba(255, 255, 255, 0.92);
    padding: .5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    border: 1px solid rgba(0, 0, 0, .06);
    cursor: pointer;
    color: #374151;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-hamburger:hover {
        background: #ffffff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    }

.dark .nav-hamburger {
    background: rgba(17, 24, 39, 0.88);
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

    .dark .nav-hamburger:hover {
        background: rgba(31, 41, 55, 0.95);
    }

/* ---------- Footer ---------- */
.ml-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: .5rem 1rem;
    text-align: center;
    font-size: .65rem;
    color: #6b7280;
    line-height: 1.4;
}

.dark .ml-footer {
    background: rgba(17, 24, 39, 0.9);
    color: #9ca3af;
}

@media (min-width: 640px) {
    .ml-footer {
        font-size: .8125rem;
        padding: .75rem 1.5rem;
    }
}

/* ---------- Top-Right-Bereich (Sprache + JaaS-öffnen) ---------- */
.nav-top-right {
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Die Auswahl klappt hier nach unten auf und darf den Inhalt darunter überdecken. */
.nav-lang .lang-picker {
    margin-right: 0;
}

.nav-lang .lang-trigger {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

/* Auf schmalen Anzeigen wird nur die Flagge gezeigt – der Name spränge sonst in die zweite Zeile. */
@media (max-width: 640px) {
    .nav-lang .lang-trigger-name {
        display: none;
    }
}

.nav-jaas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background-color: var(--main-color);
    padding: .5rem 1.125rem;
    font-size: .875rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transition: background-color .15s, box-shadow .15s;
    white-space: nowrap;
}

    .nav-jaas-btn:hover {
        background-color: #155e75;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
        color: #ffffff;
        text-decoration: none;
    }

.dark .nav-jaas-btn {
    background-color: var(--main-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

/* ---------- Kundenliste: Kopfbereich unter dem fixen "JaaS öffnen"-Button ---------- */
/* Titel sitzt oben Y-bündig mit "JaaS öffnen" (beide top:1rem). */
.customer-page {
    padding: 1rem 1rem 1.5rem 1rem;
}

/* Header-Zeile: Titel links, Aktionen rechts (oben ausgerichtet). */
.customer-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

/* "Neuer Kunde" rechtsbündig und so weit nach unten, dass er direkt UNTER dem
   fixierten "JaaS öffnen"-Button (top:1rem, ~2.25rem hoch) sitzt. */
.customer-page-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 2.75rem;
}


/* ============================================================
   MyDetails – Badge-Header & Status-Ampel
   Präfix: md-  (my-details)
   ============================================================ */

/* ---------- Badge-Zeile oben (wie rf-top-bar, aber ohne Logo) ---------- */
.md-badge-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1rem 1.5rem;
    text-align: center;
}

/* ---------- Status-Panel (Ampel-Banner) ---------- */
/* ---------- Demophase ---------- */
.md-demo {
    margin-top: .25rem;
    padding: .875rem 1.125rem;
    border: 1px solid var(--jt-border-default);
    border-left: 3px solid var(--main-color);
    border-radius: var(--jt-radius-md);
    background: var(--jt-bg-surface-2);
}

.md-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .625rem;
}

.md-demo-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--jt-fg-default);
}

.md-demo-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--jt-radius-pill);
    padding: .15rem .625rem;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.md-demo-badge--active {
    background: var(--jt-status-ok-bg);
    color: var(--jt-status-ok-fg);
}

.md-demo-badge--over {
    background: var(--jt-status-warn-bg);
    color: var(--jt-status-warn-fg);
}

.md-demo-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1.25rem;
    margin: 0;
    font-size: .8125rem;
}

    .md-demo-grid dt {
        color: var(--jt-fg-tertiary);
    }

    .md-demo-grid dd {
        margin: 0;
        font-weight: 600;
        color: var(--jt-fg-default);
    }

.md-demo-track {
    height: .3125rem;
    margin-top: .75rem;
    border-radius: var(--jt-radius-pill);
    background: var(--jt-bg-surface-3);
    overflow: hidden;
}

.md-demo-bar {
    height: 100%;
    border-radius: var(--jt-radius-pill);
    background: var(--main-color);
    transition: width var(--jt-transition);
}

.md-demo-note {
    margin: .75rem 0 0;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--jt-fg-tertiary);
}

.md-field-sub {
    display: block;
    font-size: .75rem;
    color: var(--jt-fg-muted);
}

/* ---------- Instanzangabe in der Navigation ---------- */
.nav-instance {
    margin-bottom: 1rem;
    padding: .625rem .75rem;
    border-radius: var(--jt-radius-sm);
    border: 1px solid var(--jt-border-default);
    border-left: 3px solid var(--jt-fg-muted);
    background: var(--jt-bg-surface-2);
}

.nav-instance--master {
    border-left-color: var(--jt-status-ok-fg);
}

.nav-instance--slave {
    border-left-color: var(--jt-status-info-fg);
}

.nav-instance-head {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.nav-instance-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--jt-fg-muted);
    flex-shrink: 0;
}

.nav-instance--master .nav-instance-dot {
    background: var(--jt-status-ok-fg);
}

.nav-instance--slave .nav-instance-dot {
    background: var(--jt-status-info-fg);
}

.nav-instance-role {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jt-fg-secondary);
}

.nav-instance-scope {
    margin: .375rem 0 0;
    font-size: .6875rem;
    line-height: 1.45;
    color: var(--jt-fg-tertiary);
}

.nav-instance-line {
    margin: .375rem 0 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--jt-fg-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-instance-line--muted {
    margin-top: .125rem;
    font-weight: 400;
    color: var(--jt-fg-tertiary);
}

.nav-instance-link {
    display: inline-block;
    margin-top: .5rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--main-color);
    text-decoration: underline;
}

/* ---------- Statusleiste ----------
   Ruhige Fläche mit farbiger Kante statt halbdurchsichtigem Farbblock:
   Das trägt in hell und dunkel gleich gut und passt zum Jobtura-Frontend. */
.md-status-panel {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    border-radius: var(--jt-radius-md);
    border: 1px solid var(--jt-border-default);
    border-left: 3px solid var(--jt-fg-muted);
    background: var(--jt-surface-card);
    box-shadow: var(--jt-shadow-sm);
    padding: .875rem 1.125rem;
    margin-bottom: 1.5rem;
}

.md-status-panel--green {
    border-left-color: var(--jt-status-ok-fg);
}

.md-status-panel--yellow {
    border-left-color: var(--jt-status-warn-fg);
}

.md-status-panel--red {
    border-left-color: var(--jt-status-danger-fg);
}

.md-status-panel--loading {
    border-left-color: var(--main-color);
}

.md-status-spinner {
    width: .75rem;
    height: .75rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--jt-border-default);
    border-top-color: var(--main-color);
    animation: md-status-spin .7s linear infinite;
}

@keyframes md-status-spin {
    to {
        transform: rotate(360deg);
    }
}

.md-status-main {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.md-status-dot {
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.md-status-dot--green {
    background: var(--jt-status-ok-fg);
}

.md-status-dot--yellow {
    background: var(--jt-status-warn-fg);
}

.md-status-dot--red {
    background: var(--jt-status-danger-fg);
}

.md-status-dot--grey {
    background: var(--jt-fg-muted);
}

.md-status-text {
    font-size: .875rem;
    font-weight: 600;
    color: var(--jt-fg-default);
    margin: 0;
}

/* ---------- Offene Punkte ---------- */
.md-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    padding-left: 1.375rem;
}

.md-check-item {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    color: var(--jt-fg-secondary);
}

.md-check-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.md-status-action {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--main-color);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Volle Breite im Grid (überspannt alle Spalten) ---------- */
.md-card-full {
    grid-column: 1 / -1;
}


/* ---------- SEPA-Info-Box (Mandatsreferenz etc.) ---------- */
.cf-sepa-info {
    border-radius: .5rem;
    background: rgba(6, 182, 212, .07);
    border: 1px solid rgba(6, 182, 212, .2);
    padding: .75rem 1rem;
    font-size: .8125rem;
    color: #374151;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.dark .cf-sepa-info {
    background: rgba(6, 182, 212, .06);
    border-color: rgba(34, 211, 238, .18);
    color: #d1d5db;
}

.cf-sepa-info-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.cf-sepa-info-label {
    font-weight: 500;
    color: #6b7280;
    flex-shrink: 0;
}

.dark .cf-sepa-info-label {
    color: #9ca3af;
}

.cf-sepa-info-value {
    text-align: right;
    color: #111827;
    font-family: monospace;
    font-size: .8rem;
}

.dark .cf-sepa-info-value {
    color: #f3f4f6;
}

/* ---------- Select-Element (erbt rf-input, nur Pfeil-Farbe anpassen) ---------- */
select.rf-input {
    appearance: auto;
    cursor: pointer;
}

.dark select.rf-input option {
    background-color: #374151;
    color: #f3f4f6;
}

/* ── Ergänzung: nav-jaas-btn--disabled ── */
.nav-jaas-btn--disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background-color: #4b5563;
    padding: .5rem 1.125rem;
    font-size: .875rem;
    font-weight: 600;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    white-space: nowrap;
    user-select: none;
}

/* ============================================================
   Shared List Pages  (Subscriptions, Users, Invoices)
   Präfix: sl-  (shared-list)
   ============================================================ */

/* ---------- Hinweisblock (Ampel nicht grün) ---------- */
.sl-gate-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border-radius: var(--jt-radius-md);
    border: 1px solid var(--jt-status-warn-border);
    border-left: 3px solid var(--jt-status-warn-fg);
    background: var(--jt-status-warn-bg);
    padding: 1.125rem 1.375rem;
    margin-bottom: 1.5rem;
}

.sl-gate-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--jt-status-warn-fg);
}

    .sl-gate-icon svg {
        width: 100%;
        height: 100%;
    }

.sl-gate-body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.sl-gate-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--jt-status-warn-fg);
    margin: 0;
}

.sl-gate-text {
    font-size: .875rem;
    color: var(--jt-status-warn-fg);
    margin: 0;
    line-height: 1.6;
}

/* ---------- Tabelle ---------- */
.sl-table-wrapper {
    overflow-x: auto;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.dark .sl-table-wrapper {
    border-color: #4b5563;
}

.sl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

    .sl-table thead {
        background: #f9fafb;
    }

.dark .sl-table thead {
    background: rgba(31, 41, 55, 0.98);
}

.sl-table th {
    padding: .625rem 1rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #e5e7eb;
}

.dark .sl-table th {
    color: #6b7280;
    border-bottom-color: #374151;
}

.sl-th-right {
    text-align: right !important;
}

.sl-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background .1s;
}

    .sl-table tbody tr:last-child {
        border-bottom: none;
    }

    .sl-table tbody tr:hover {
        background: #f9fafb;
    }

.dark .sl-table tbody tr {
    border-bottom-color: #374151;
}

    .dark .sl-table tbody tr:hover {
        background: rgba(55, 65, 81, .85);
    }

.sl-table td {
    padding: .75rem 1rem;
    color: #111827;
    vertical-align: middle;
}

.dark .sl-table td {
    color: #f3f4f6;
}

.sl-td-right {
    text-align: right;
}

/* ---------- Badges ---------- */
.sl-badge {
    display: inline-block;
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 600;
}

.sl-badge--green {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, .3);
}

.dark .sl-badge--green {
    background: rgba(22, 163, 74, .15);
    color: #4ade80;
    border-color: rgba(22, 163, 74, .25);
}

.sl-badge--red {
    background: rgba(220, 38, 38, .1);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, .25);
}

.dark .sl-badge--red {
    background: rgba(220, 38, 38, .12);
    color: #f87171;
    border-color: rgba(220, 38, 38, .2);
}

/* ---------- Sekundär-Button ---------- */
.sl-btn-secondary {
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

    .sl-btn-secondary:hover {
        background: #e5e7eb;
    }

.dark .sl-btn-secondary {
    background: rgba(55, 65, 81, 0.95);
    color: #d1d5db;
    border-color: #4b5563;
}

    .dark .sl-btn-secondary:hover {
        background: rgba(75, 85, 99, 1);
    }

/* ---------- Danger-Button ---------- */
.sl-btn-danger {
    border-radius: .5rem;
    padding: .375rem .875rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #ffffff;
    background: #dc2626;
    border: none;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

    .sl-btn-danger:hover {
        background: #b91c1c;
    }

/* ---------- Link-Buttons ---------- */
.sl-btn-link {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--main-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
}

    .sl-btn-link:hover {
        color: var(--main-color);
    }

.dark .sl-btn-link {
    color: var(--main-color);
}

.sl-btn-link-danger {
    font-size: .8125rem;
    font-weight: 500;
    color: #dc2626;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
}

    .sl-btn-link-danger:hover {
        color: #b91c1c;
    }

/* ---------- Pagination ---------- */
.sl-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .875rem;
    flex-wrap: wrap;
    gap: .75rem;
}

.sl-pagination-info {
    font-size: .8125rem;
    color: var(--jt-fg-tertiary);
}

.sl-pagination-btns {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sl-pagination-btn {
    border-radius: var(--jt-radius-sm);
    padding: .375rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    background: var(--jt-bg-surface-2);
    border: 1px solid var(--jt-border-default);
    color: var(--jt-fg-secondary);
    cursor: pointer;
    transition: background-color var(--jt-transition);
}

    .sl-pagination-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .sl-pagination-btn:not(:disabled):hover {
        background: var(--jt-bg-surface-3);
    }

.sl-pagination-page {
    font-size: .875rem;
    font-weight: 600;
    color: var(--jt-fg-default);
    padding: 0 .25rem;
}

/* ---------- Kopfaktionen der Benutzerliste ---------- */
.tu-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
}

/* ══════════════════════════════════════════════════════════
   Benutzerliste: Zeilendarstellung
   ══════════════════════════════════════════════════════════ */

/* Die Sitzplätze brauchen den Platz, alle übrigen Spalten kommen mit ihrer Mindestbreite aus. */
.tu-table th:nth-child(2),
.tu-table th:nth-child(3),
.tu-table th:nth-child(4),
.tu-table th:last-child,
.tu-table td.tu-col-sr,
.tu-table td:last-child {
    width: 1%;
    white-space: nowrap;
}

.tu-table th:first-child,
.tu-table td:first-child {
    min-width: 13rem;
}

.tu-table td {
    vertical-align: top;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

/* Name und Anmeldename teilen sich eine Spalte – das spart zwei Spalten Breite,
   die den Sitzplätzen und den Aktionen zugutekommen. */
.tu-user {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.tu-user-name {
    font-weight: 600;
    color: var(--jt-fg-default);
}

.tu-user-login {
    font-size: .8125rem;
    color: var(--jt-fg-tertiary);
    overflow-wrap: anywhere;
}

.tu-col-sr {
    font-size: .8125rem;
    color: var(--jt-fg-secondary);
}

.tu-role {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .375rem;
    font-size: .8125rem;
    white-space: nowrap;
}

/* Sitzplätze als Chips: Sie brechen in die Breite statt in die Höhe, dadurch bleibt
   die Zeile auch bei vielen Abonnements flach. Das Entziehen sitzt im Chip selbst. */
.tu-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.tu-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: 100%;
    border-radius: 999px;
    padding: .2rem .3rem .2rem .6rem;
    font-size: .78rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--jt-fg-secondary);
    background: var(--jt-bg-surface-2);
    border: 1px solid var(--jt-border-default);
}

.tu-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Sitzplatz besteht noch, das Abo dahinter ist abgelaufen – er zählt also nicht mehr. */
.tu-chip--expired {
    border-style: dashed;
    opacity: .65;
}

    .tu-chip--expired .tu-chip-name {
        text-decoration: line-through;
    }

.tu-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--jt-fg-muted);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--jt-transition), color var(--jt-transition);
}

    .tu-chip-remove:hover {
        background: rgba(220, 38, 38, .12);
        color: #dc2626;
    }

.dark .tu-chip-remove:hover {
    background: rgba(220, 38, 38, .2);
    color: #f87171;
}

/* Zuweisen ist kein Sitzplatz, sondern eine Aktion – daher gestrichelt und ohne Fläche. */
button.tu-chip--add {
    padding: .2rem .6rem;
    color: var(--main-color);
    background: transparent;
    border-style: dashed;
    cursor: pointer;
    white-space: nowrap;
}

    button.tu-chip--add:hover {
        background: var(--jt-bg-surface-3);
    }

/* Alle drei Aktionen enden bündig am rechten Rand – untereinander, damit die Spalte
   schmal bleibt und die Breite den Sitzplätzen zugutekommt. */
.tu-row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}

/* ---------- Aktionen in einer Tabellenzeile ---------- */
.sl-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

/* ---------- Zurückhaltende Variante des Link-Buttons ---------- */
.md-btn-edit--quiet {
    color: var(--jt-fg-muted);
}

    .md-btn-edit--quiet:hover {
        color: var(--jt-fg-default);
    }

.dark .md-btn-edit--quiet {
    color: var(--jt-fg-muted);
}

/* ---------- Betragsdarstellung ---------- */
.sl-amount {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    color: var(--jt-fg-default);
}

.sl-amount-note {
    display: block;
    font-size: .75rem;
    white-space: nowrap;
    color: var(--jt-fg-muted);
}

.sl-td-muted {
    color: var(--jt-fg-muted);
}

.sl-card-empty {
    color: var(--jt-fg-muted);
}

/* ---------- Aufrufprotokoll ---------- */
.rl-method {
    display: inline-block;
    min-width: 3.25rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--jt-fg-muted);
}

.rl-duration {
    font-variant-numeric: tabular-nums;
    color: var(--jt-fg-default);
}

.rl-duration--warn {
    color: var(--jt-status-warn-fg);
}

.rl-duration--slow {
    font-weight: 700;
    color: var(--jt-status-danger-fg);
}

.rl-error {
    display: block;
    font-size: .75rem;
    color: var(--jt-status-danger-fg);
}

.rl-range {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jt-border-subtle, rgba(148, 163, 184, .35));
}

.rl-range-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
}

.rl-range-group {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.rl-range-legend {
    min-width: 2.25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jt-fg-muted);
}

.rl-range-date {
    width: 160px;
    flex: 0 0 160px;
}

.rl-range-select {
    width: 4.75rem;
    flex: 0 0 4.75rem;
}

.rl-range-colon {
    color: var(--jt-fg-muted);
}

.rl-range-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.rl-range-hint {
    margin: .75rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--jt-fg-muted);
}

@media (max-width: 900px) {
    .rl-range-group {
        flex: 1 1 100%;
    }

    .rl-range-actions {
        margin-left: 0;
    }
}

.rl-notice {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid var(--jt-status-warn-fg, #b45309);
    background: var(--jt-bg-subtle);
}

.rl-notice-title {
    margin: 0 0 .35rem;
    font-weight: 700;
    color: var(--jt-status-warn-fg, #b45309);
}

.rl-notice-body {
    margin: 0 0 .35rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--jt-fg-default);
}

/* ---------- Diagnosefeld der Benutzerliste (nur im DEBUG-Build sichtbar) ---------- */
.tu-debug {
    border: 1px dashed var(--jt-warning, #f59e0b);
    background: var(--jt-bg-subtle);
}

.tu-debug-title {
    color: var(--jt-warning, #b45309);
}

.tu-debug-body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--jt-fg-default);
}

/* ---------- Vollflächige Rückmeldung bei laufenden oder abgeschlossenen Vorgängen ----------
   Blockiert bewusst die Bedienung, damit ein Vorgang nicht doppelt ausgelöst wird. */
.jt-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    animation: jt-overlay-in .18s ease-out;
}

.jt-overlay-card {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem;
    text-align: center;
    padding: 2rem 1.75rem;
    border: 1px solid var(--jt-border-default);
    border-radius: var(--jt-radius-lg, .75rem);
    background: var(--jt-bg-surface);
    box-shadow: var(--jt-shadow-lg, 0 20px 40px rgba(0, 0, 0, .25));
}

.jt-overlay-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--jt-fg-default);
}

.jt-overlay-text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--jt-fg-muted);
}

.jt-overlay-check {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--jt-bg-subtle);
    color: var(--main-color);
}

.jt-overlay-check svg {
    width: 1.75rem;
    height: 1.75rem;
}

.jt-overlay-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
}

@keyframes jt-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .jt-overlay-actions {
        width: 100%;
        flex-direction: column;
    }

    .jt-overlay-actions > * {
        width: 100%;
    }
}

/* ---------- Werkzeugleiste über Listen ----------
   Auf schmalen Anzeigen untereinander mit voller Breite, damit die Ziele gross genug bleiben. */
.sl-toolbar {
    display: flex;
    align-items: flex-end;
    gap: .625rem;
    margin-bottom: 1rem;
}

.sl-toolbar-field {
    flex: 1;
    min-width: 0;
}

.sl-toolbar-label {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jt-fg-tertiary);
    margin-bottom: .25rem;
}

.sl-toolbar-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .sl-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sl-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

        .sl-toolbar-actions > * {
            width: 100%;
        }
}

/* ---------- Sortierbare Spaltenköpfe ---------- */
.sl-th-sort {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

    .sl-th-sort:hover {
        color: var(--main-color);
    }

.sl-th-sort-mark {
    font-size: .625rem;
    opacity: .75;
}

/* ---------- Listenkarte für schmale Anzeigen ---------- */
.sl-card {
    border-radius: var(--jt-radius-md);
    background: var(--jt-surface-card);
    border: 1px solid var(--jt-border-default);
    box-shadow: var(--jt-shadow-sm);
    padding: .875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.sl-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.sl-card-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--jt-fg-default);
    overflow-wrap: anywhere;
}

.sl-card-sub {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    color: var(--jt-fg-tertiary);
    margin-top: .125rem;
}

.sl-card-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0;
    font-size: .8125rem;
}

    .sl-card-grid dt {
        color: var(--jt-fg-tertiary);
    }

    .sl-card-grid dd {
        margin: 0;
        font-weight: 600;
        color: var(--jt-fg-default);
        overflow-wrap: anywhere;
    }

.sl-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: .625rem;
    border-top: 1px solid var(--jt-border-light);
}

    .sl-card-actions > * {
        flex: 1 1 auto;
        min-height: 2.25rem;
    }

/* ══════════════════════════════════════════════════════════
   Hintergrund

   Bewusst ohne Muster. Ein Polygonnetz – ob als Bilddatei oder gezeichnet – bringt Unruhe ins Bild
   und kämpft mit dem Inhalt um Aufmerksamkeit. Geblieben sind zwei weiche Lichtpunkte in der
   Markenfarbe und ein Verlauf, der die Fläche oben etwas herunternimmt: Ohne ihn stehen weiße
   Karten auf fast weißem Grund und der Aufbau der Seite verschwindet.
   ══════════════════════════════════════════════════════════ */
.jt-surface {
    background-color: var(--jt-bg-page, #f0f2f5);
    background-image:
        radial-gradient(1200px 620px at 12% -12%, rgba(100, 196, 221, .28), rgba(100, 196, 221, 0) 62%),
        radial-gradient(1000px 520px at 90% 2%, rgba(100, 196, 221, .15), rgba(100, 196, 221, 0) 60%),
        linear-gradient(180deg, rgba(15, 23, 42, .06), rgba(15, 23, 42, .02) 45%, rgba(15, 23, 42, 0) 75%);
    background-repeat: no-repeat;
    /* Bleibt beim Blättern stehen: Sonst wandern die Lichtpunkte mit und wirken wie ein Verlauf,
       der nach unten ausbleicht. */
    background-attachment: fixed;
}

.dark .jt-surface {
    background-image:
        radial-gradient(1200px 620px at 12% -12%, rgba(100, 196, 221, .16), rgba(100, 196, 221, 0) 62%),
        radial-gradient(1000px 520px at 90% 2%, rgba(100, 196, 221, .09), rgba(100, 196, 221, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
}

/* ---------- Seiten ohne Navigation (Anmeldung, Registrierung, Einrichtung) ----------
   Der Fußbereich sitzt im normalen Fluss und wird nur dann nach unten gedrückt, wenn der
   Inhalt kürzer als die Anzeige ist. Fest verankert sprang er auf Mobilgeräten bei geöffneter
   Bildschirmtastatur mitten ins Bild. */
.nn-shell {    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Berücksichtigt auf Mobilgeräten die tatsächlich sichtbare Höhe. */
    min-height: 100dvh;
}

.nn-content {
    flex: 1 0 auto;
}

.nn-footer {
    flex-shrink: 0;
    width: 100%;
    padding: 1rem;
    text-align: center;
    font-size: .875rem;
    color: var(--jt-fg-muted);
    background: var(--jt-bg-surface);
    border-top: 1px solid var(--jt-border-default);
}

/* ---------- Eingabefelder auf Mobilgeräten ----------
   Unter 16px zoomt Safari auf dem iPhone beim Antippen automatisch hinein und bleibt danach
   verschoben stehen. Deshalb auf schmalen Anzeigen nie kleiner als 16px. */
@media (max-width: 767px) {
    .rf-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ---------- Spinner-Wrapper ---------- */
.sl-spinner-wrapper {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* ────────────────────────────────────────────────────────────
   Ergänzungen (anfügen ans Ende von saw.css)
   ──────────────────────────────────────────────────────────── */

/* ---------- Gate-Link ---------- */
.sl-gate-link {
    color: #fbbf24;
    font-weight: 600;
    text-decoration: underline;
    transition: color .15s;
}

    .sl-gate-link:hover {
        color: #f59e0b;
    }

.dark .sl-gate-link {
    color: #fde68a;
}

    .dark .sl-gate-link:hover {
        color: #fef3c7;
    }

/* ---------- Umschalten Tabelle / Karten ----------
   Vorgabe ist der schmale Umbruchpunkt. Listen mit vielen Spalten setzen zusätzlich
   `sl-list--responsive` und wechseln dann schon deutlich früher auf Karten. */
.sl-table-desktop {
    display: block;
}

.sl-table-mobile {
    display: none;
}

@media (max-width: 639px) {
    .sl-table-desktop {
        display: none;
    }

    .sl-table-mobile {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 1023px) {
    .sl-list--responsive .sl-table-desktop {
        display: none;
    }

    .sl-list--responsive .sl-table-mobile {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        margin-bottom: 1rem;
    }
}

/* ---------- Abonnement-Karte (schmale Anzeigen) ---------- */
.sl-sub-card {
    border-radius: var(--jt-radius-md);
    background: var(--jt-surface-card);
    border: 1px solid var(--jt-border-default);
    box-shadow: var(--jt-shadow-sm);
    padding: .875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sl-sub-card--child {
    margin-left: 1rem;
    border-left: 2px solid var(--jt-border-default);
    background: var(--jt-bg-surface-2);
    box-shadow: none;
}

.sl-sub-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.sl-sub-card-name {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--jt-fg-default);
    overflow-wrap: anywhere;
}

.sl-sub-card-name--child {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--jt-fg-tertiary);
}

.sl-sub-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .875rem;
    font-size: .8125rem;
    color: var(--jt-fg-tertiary);
}

.sl-sub-card-value {
    color: var(--jt-fg-default);
    font-weight: 600;
}

.sl-sub-card-actions {
    display: flex;
    justify-content: stretch;
    padding-top: .625rem;
    border-top: 1px solid var(--jt-border-light);
}

    .sl-sub-card-actions > * {
        width: 100%;
        min-height: 2.25rem;
    }

/* ============================================================
   Buy Product Page
   Präfix: bp-  (buy-product)
   ============================================================ */

.bp-intro-text {
    font-size: .875rem;
    color: #6b7280;
    margin: 0 0 1rem;
}

.dark .bp-intro-text {
    color: #9ca3af;
}

/* ---------- Gesamt-Preis ---------- */
.bp-total {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--main-color);
    margin: 0;
}

.dark .bp-total {
    color: var(--main-color);
}

/* ---------- AGB-Hinweis ---------- */
.bp-legal {
    font-size: .8125rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.dark .bp-legal {
    color: #9ca3af;
}

/* ---------- Checkout-Bereich ---------- */
.bp-checkout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- Abrechnung: Vorschau und Fortschritt ---------- */
.bp-row-idle {
    opacity: .62;
}

.bp-audit {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    align-items: baseline;
    margin-bottom: 1rem;
    padding: .625rem .875rem;
    border-radius: .375rem;
    background: #f3f4f6;
    font-size: .75rem;
    color: #4b5563;
}

.dark .bp-audit {
    background: #374151;
    color: #d1d5db;
}

.bp-audit-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: .75rem;
    color: var(--main-color);
    text-decoration: underline;
    cursor: pointer;
}

.dark .bp-audit-toggle {
    color: var(--main-color);
}

.bp-reopen-link {
    background: none;
    border: none;
    padding: 0;
    font-size: .75rem;
    color: #b45309;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

    .bp-reopen-link:hover:not(:disabled) {
        color: #92400e;
    }

    .bp-reopen-link:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.dark .bp-reopen-link {
    color: #fbbf24;
}

.bp-plan-lines {
    display: block;
    font-size: .7rem;
    color: #6b7280;
    margin-top: .125rem;
}

.dark .bp-plan-lines {
    color: #9ca3af;
}

.bp-progress-box {
    margin-top: .5rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    background: #f9fafb;
}

.dark .bp-progress-box {
    border-color: #374151;
    background: #1f2937;
}

.bp-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .625rem;
}

.bp-progress-label {
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
}

.dark .bp-progress-label {
    color: #f9fafb;
}

.bp-progress-count {
    font-size: .8125rem;
    color: #6b7280;
    white-space: nowrap;
}

.dark .bp-progress-count {
    color: #9ca3af;
}

.bp-progress-track {
    height: .5rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.dark .bp-progress-track {
    background: #374151;
}

.bp-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--main-color);
    transition: width .3s ease;
}

/* ---------- Laufzeit- und Kündigungshinweis ---------- */
.bp-terms {
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--main-color);
    border-radius: .5rem;
    background: #f9fafb;
    padding: 1.125rem 1.375rem;
}

.dark .bp-terms {
    border-color: #374151;
    border-left-color: var(--main-color);
    background: #1f2937;
}

.bp-terms-title {
    margin: 0 0 .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
}

.dark .bp-terms-title {
    color: #f9fafb;
}

.bp-terms-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .375rem 1.5rem;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.6;
}

    .bp-terms-grid dt {
        color: #6b7280;
    }

    .bp-terms-grid dd {
        margin: 0;
        font-weight: 600;
        color: #374151;
    }

.dark .bp-terms-grid dt {
    color: #9ca3af;
}

.dark .bp-terms-grid dd {
    color: #e5e7eb;
}

/* Auf schmalen Anzeigen untereinander statt zweispaltig. */
@media (max-width: 640px) {
    .bp-terms-grid {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

        .bp-terms-grid dd {
            margin-bottom: .5rem;
        }
}

.bp-terms-note {
    margin: .875rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid #e5e7eb;
    font-size: .8125rem;
    line-height: 1.7;
    color: #4b5563;
}

.dark .bp-terms-note {
    border-top-color: #374151;
    color: #d1d5db;
}

.bp-terms-link {
    color: var(--main-color);
    font-weight: 500;
    text-decoration: underline;
}

    .bp-terms-link:hover {
        color: #155e75;
    }

.dark .bp-terms-link {
    color: var(--main-color);
}

/* ---------- Zustimmungen ---------- */
.bp-consent {
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .875rem 1.125rem;
}

.dark .bp-consent {
    border-color: #4b5563;
}

.bp-consent-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
}

.bp-consent-check {
    margin-top: .2rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.bp-consent-text {
    font-size: .875rem;
    line-height: 1.65;
    color: #374151;
}

.dark .bp-consent-text {
    color: #d1d5db;
}

.bp-terms-person {
    display: block;
    margin-top: .375rem;
    font-size: .75rem;
    color: #6b7280;
}

.dark .bp-terms-person {
    color: #9ca3af;
}

/* ---------- Mengen-Input ---------- */
.bp-qty-input {
    width: 4.5rem;
    border-radius: .5rem;
    border: 1px solid #d1d5db;
    padding: .375rem .5rem;
    font-size: .875rem;
    color: #111827;
    background-color: #ffffff;
    outline: none;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

    .bp-qty-input:focus {
        border-color: #06b6d4;
        box-shadow: 0 0 0 3px rgba(6,182,212,.15);
    }

.dark .bp-qty-input {
    background-color: rgba(55, 65, 81, 0.85);
    color: #f3f4f6;
    border-color: #4b5563;
}

    .dark .bp-qty-input:focus {
        border-color: var(--main-color);
        box-shadow: 0 0 0 3px rgba(34,211,238,.12);
    }

/* ---------- Produkt-Karte (Mobile) ---------- */
.bp-product-card {
    border-radius: .625rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: .875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.dark .bp-product-card {
    background: rgba(31, 41, 55, 0.97);
    border-color: #4b5563;
}

.bp-product-card-header {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.bp-product-card-name {
    font-size: .9375rem;
    font-weight: 600;
    color: #111827;
    flex: 1;
}

.dark .bp-product-card-name {
    color: #f3f4f6;
}

.bp-product-card-children {
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.bp-product-card-child {
    font-size: .8125rem;
    color: #6b7280;
}

.dark .bp-product-card-child {
    color: #9ca3af;
}

.bp-product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .5rem;
    border-top: 1px solid #f3f4f6;
}

.dark .bp-product-card-footer {
    border-top-color: #374151;
}

.bp-product-card-price {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--main-color);
}

.dark .bp-product-card-price {
    color: var(--main-color);
}

/* Der Euro-Betrag steht neben dem Preis in der gewaehlten Waehrung. Abgerechnet wird in Euro,
   also muss er lesbar bleiben - aber zurueckhaltend, damit er nicht als zweiter Preis wirkt. */
.bp-price-euro {
    font-weight: 400;
    font-size: .8125rem;
    color: var(--jt-fg-secondary);
    white-space: nowrap;
}

.bp-product-card-qty {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: #6b7280;
}

.dark .bp-product-card-qty {
    color: #9ca3af;
}

/* ============================================================
   Radzen Confirm / Alert Dialog – Überarbeitung
   Anfügen ans Ende von saw.css
   ============================================================ */

/* ---------- Overlay ---------- */
.rz-dialog-mask {
    background: rgba(0, 0, 0, .5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ---------- Dialog-Container ---------- */
.rz-dialog {
    border-radius: .875rem !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
    min-width: 22rem !important;
    max-width: 32rem !important;
    padding: 0 !important;
    background-color: #ffffff !important;
}

.dark .rz-dialog {
    background-color: rgba(17, 24, 39, 0.97) !important;
    border-color: #374151 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6) !important;
}

/* ---------- Titelzeile ---------- */
.rz-dialog .rz-dialog-titlebar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.25rem .875rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: transparent !important;
}

.dark .rz-dialog .rz-dialog-titlebar {
    border-bottom-color: #1f2937 !important;
}

.rz-dialog .rz-dialog-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dark .rz-dialog .rz-dialog-title {
    color: #f9fafb !important;
}

/* ---------- Schließen-Icon ---------- */
.rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
    font-size: 1rem !important;
}

    .rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-close:hover {
        background: #f3f4f6 !important;
        color: #374151 !important;
    }

.dark .rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-close:hover {
    background: rgba(55, 65, 81, .8) !important;
    color: #d1d5db !important;
}

/* ---------- Inhalt ---------- */
.rz-dialog .rz-dialog-content {
    padding: 1.25rem 1.25rem .25rem !important;
    font-size: .9375rem !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    background: transparent !important;
}

.dark .rz-dialog .rz-dialog-content {
    color: #d1d5db !important;
}

/* ---------- Button-Leiste ---------- */
.rz-dialog .rz-dialog-buttons,
.rz-dialog form > div:last-child {
    display: flex !important;
    gap: .625rem !important;
    justify-content: flex-end !important;
    padding: 1rem 1.25rem 1.25rem !important;
    background: transparent !important;
}

/* ---------- Alle Radzen-Buttons im Dialog zurücksetzen ---------- */
.rz-dialog .rz-button {
    border-radius: .5rem !important;
    padding: .5rem 1.25rem !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color .15s, box-shadow .15s !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

    /* ---------- Primär-Button (Ja / OK) ---------- */
    .rz-dialog .rz-button.rz-primary,
    .rz-dialog .rz-button.rz-button-md.rz-primary {
        background-color: var(--main-color) !important;
        color: #ffffff !important;
    }

        .rz-dialog .rz-button.rz-primary:hover {
            background-color: #155e75 !important;
        }

.dark .rz-dialog .rz-button.rz-primary {
    background-color: var(--main-color) !important;
}

    .dark .rz-dialog .rz-button.rz-primary:hover {
        background-color: #155e75 !important;
    }

/* ---------- Sekundär-Button (Nein / Abbrechen) ---------- */
.rz-dialog .rz-button.rz-secondary,
.rz-dialog .rz-button:not(.rz-primary) {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

    .rz-dialog .rz-button.rz-secondary:hover,
    .rz-dialog .rz-button:not(.rz-primary):hover {
        background-color: #e5e7eb !important;
    }

.dark .rz-dialog .rz-button.rz-secondary,
.dark .rz-dialog .rz-button:not(.rz-primary) {
    background-color: rgba(55, 65, 81, 0.95) !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
}

    .dark .rz-dialog .rz-button.rz-secondary:hover,
    .dark .rz-dialog .rz-button:not(.rz-primary):hover {
        background-color: rgba(75, 85, 99, 1) !important;
    }




/* ============================================================
   Radzen Dialog – Mobile Fix
   Anfügen ans Ende von saw.css
   ============================================================ */

/* Verhindert, dass der Dialog den Viewport überläuft */
.rz-dialog {
    max-width: calc(100vw - 2rem) !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Auf kleinen Bildschirmen zentriert positionieren */
@media (max-width: 639px) {
    .rz-dialog {
        max-width: calc(100vw - 1.5rem) !important;
        margin: 0 .75rem !important;
    }

        .rz-dialog .rz-dialog-titlebar {
            padding: .875rem 1rem .75rem !important;
        }

        .rz-dialog .rz-dialog-title {
            font-size: .9375rem !important;
        }

        .rz-dialog .rz-dialog-content {
            padding: 1rem 1rem .25rem !important;
            font-size: .875rem !important;
        }

        .rz-dialog .rz-dialog-buttons,
        .rz-dialog form > div:last-child {
            padding: .875rem 1rem 1rem !important;
            gap: .5rem !important;
        }

        /* Buttons auf Mobile: volle Breite nebeneinander, gleiche Größe */
        .rz-dialog .rz-button {
            flex: 1 !important;
            justify-content: center !important;
        }
}


/* ---------- Super-Admin-Toggle (NavMenu) ---------- */
.nav-role-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px dashed #d1d5db;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-align: left;
}

    .nav-role-toggle:hover {
        background: #f3f4f6;
        color: #374151;
        border-color: #9ca3af;
    }

.dark .nav-role-toggle {
    color: #9ca3af;
    border-color: #374151;
}

    .dark .nav-role-toggle:hover {
        background: rgba(55, 65, 81, .8);
        color: #d1d5db;
    }

/* Aktiver Zustand (Super-Admin ein) */
.nav-role-toggle--active {
    color: #7c3aed;
    background: rgba(124, 58, 237, .08);
    border-color: rgba(124, 58, 237, .4);
    border-style: solid;
}

    .nav-role-toggle--active:hover {
        background: rgba(124, 58, 237, .14);
        color: #6d28d9;
    }

.dark .nav-role-toggle--active {
    color: #a78bfa;
    background: rgba(124, 58, 237, .12);
    border-color: rgba(167, 139, 250, .35);
}

    .dark .nav-role-toggle--active:hover {
        background: rgba(124, 58, 237, .2);
    }


/* (bestehender Inhalt unverändert – Ergänzung am Ende der Datei) */

/* ============================================================
   Prozess-Infobox
   Präfix: pi-  (process-info)
   ============================================================ */

.pi-box {
    border-radius: var(--jt-radius-md);
    border: 1px solid var(--jt-border-default);
    border-left: 3px solid var(--main-color);
    background: var(--jt-bg-surface-2);
    padding: 1.125rem 1.375rem;
    margin-bottom: 1.5rem;
}

.pi-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 .875rem;
    letter-spacing: .02em;
}

.dark .pi-title {
    color: var(--main-color);
}

.pi-title-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--main-color);
}

.dark .pi-title-icon {
    color: var(--main-color);
}

.pi-steps {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pi-step {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.pi-step-num {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--main-color);
    color: #ffffff;
    font-size: .6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .05rem;
}

.dark .pi-step-num {
    background: var(--main-color);
}

.pi-step-body {
    font-size: .875rem;
    color: var(--jt-fg-secondary);
    line-height: 1.6;
}

.pi-step-body strong {
    color: var(--jt-fg-default);
    font-weight: 600;
}

.pi-step-link {
    font-weight: 600;
    color: var(--main-color);
    text-decoration: none;
    transition: color .15s;
}

    .pi-step-link:hover {
        color: var(--main-color);
        text-decoration: underline;
    }

.dark .pi-step-link {
    color: var(--main-color);
}

    .dark .pi-step-link:hover {
        color: #67e8f9;
    }

/* ── Benutzer-Typ-Badges ──────────────────────────────────────────── */
.sl-badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sl-badge--admin {
    background-color: var(--main-color);
    color: #fff;
}

.sl-badge--user {
    background-color: #374151;
    color: #d1d5db;
}

/* ============================================================
   Einrichtungs-/Warteseite nach der Registrierung
   Präfix: su-  (setup)
   ============================================================ */

.su-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #f9fafb;
    padding: 2.5rem 1rem 4rem;
}

.dark .su-page {
    background: #0b1220;
}

.su-inner {
    width: 100%;
    max-width: 60rem;
}

.su-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.su-logo {
    height: 2.5rem;
}

.su-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

/* Eigenständiger Ladekringel: die globale .spinner-Regel aus App.razor ist sticky positioniert
   und würde über dem Inhalt kleben. */
.su-spinner {
    position: static;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 6px solid rgba(8, 145, 178, .18);
    border-top-color: var(--main-color);
    border-right-color: var(--main-color);
    animation: su-spin .9s linear infinite;
}

@keyframes su-spin {
    to {
        transform: rotate(360deg);
    }
}

.su-check,
.su-warn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .su-check svg,
    .su-warn svg {
        width: 2rem;
        height: 2rem;
    }

.su-check {
    background: rgba(22, 163, 74, .12);
    color: #16a34a;
}

.su-warn {
    background: rgba(217, 119, 6, .12);
    color: #d97706;
}

.su-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

.dark .su-title {
    color: #f9fafb;
}

.su-lead {
    margin: 0;
    max-width: 34rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: #4b5563;
}

.dark .su-lead {
    color: #9ca3af;
}

.su-cta {
    width: auto;
    margin-top: .5rem;
}

.su-error {
    width: 100%;
    max-width: 44rem;
    max-height: 14rem;
    overflow: auto;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .75rem;
    line-height: 1.4;
    color: #b91c1c;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin: 0;
}

.su-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .su-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.su-card {
    border-radius: .75rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.dark .su-card {
    border-color: #1f2937;
    background: #111827;
}

.su-card-title {
    margin: 0 0 .875rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: .02em;
}

.dark .su-card-title {
    color: var(--main-color);
}

.su-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.su-list-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .875rem;
    color: #374151;
}

.dark .su-list-item {
    color: #d1d5db;
}

.su-bullet {
    flex-shrink: 0;
    width: .625rem;
    height: .625rem;
    border-radius: 9999px;
    background: #9ca3af;
}

.su-bullet--busy {
    background: var(--main-color);
    animation: su-pulse 1.4s ease-in-out infinite;
}

@keyframes su-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

.su-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.su-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.su-step-num {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: rgba(8, 145, 178, .12);
    color: var(--main-color);
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark .su-step-num {
    background: rgba(34, 211, 238, .12);
    color: var(--main-color);
}

.su-step-body {
    font-size: .875rem;
    line-height: 1.55;
    color: #4b5563;
}

.dark .su-step-body {
    color: #9ca3af;
}

.su-card-text {
    margin: 0 0 .75rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--jt-fg-secondary);
}

    .su-card-text:last-child {
        margin-bottom: 0;
    }

    .su-card-text a {
        color: var(--main-color);
        font-weight: 600;
    }

/* ============================================================
   Wechsel-Dialog "Zu Jobtura wechseln"
   Präfix: jh-  (jaas handover)
   ============================================================ */

.jh-dialog {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: .25rem;
}

.jh-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.dark .jh-title {
    color: #f9fafb;
}

.jh-text {
    margin: 0 0 .375rem;
    font-size: .875rem;
    line-height: 1.5;
    color: #4b5563;
}

.dark .jh-text {
    color: #9ca3af;
}

/* Ziel des Wechsels – klein, aber sichtbar, damit eine falsche Adresse sofort auffällt. */
.jh-target {
    margin: 0 0 .625rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    word-break: break-all;
    color: var(--jt-fg-muted);
}

.jh-warning {
    margin: 0 0 .625rem;
    border-left: 3px solid var(--jt-status-warn-fg);
    border-radius: .375rem;
    background: var(--jt-bg-subtle);
    padding: .5rem .625rem;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--jt-fg-default);
}

.jh-btn {
    width: 100%;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.jh-btn--primary {
    background: var(--main-color);
    color: #fff;
}

    .jh-btn--primary:hover {
        background: var(--main-color);
    }

.jh-btn--ghost {
    background: transparent;
    color: #6b7280;
    border-color: #e5e7eb;
}

    .jh-btn--ghost:hover {
        background: #f3f4f6;
    }

.dark .jh-btn--ghost {
    color: #9ca3af;
    border-color: #374151;
}

    .dark .jh-btn--ghost:hover {
        background: #1f2937;
    }


/* ---------- Rundum-Löschen (Kunde vollständig entfernen) ---------- */
.pg-dialog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 720px;
}

.pg-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.pg-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: var(--jt-danger, #dc2626);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.pg-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

.pg-subtitle {
    margin: .125rem 0 0 0;
    font-size: .8125rem;
    color: #6b7280;
    word-break: break-word;
}

.pg-notice {
    border-radius: .5rem;
    border: 1px solid #fca5a5;
    background-color: #fef2f2;
    padding: .875rem 1rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: #7f1d1d;
}

    .pg-notice strong {
        display: block;
        margin-bottom: .25rem;
    }

.pg-loading {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 0;
    font-size: .875rem;
    color: #6b7280;
}

.pg-success {
    border-radius: .5rem;
    border: 1px solid #86efac;
    background-color: #f0fdf4;
    padding: .875rem 1rem;
    font-size: .8125rem;
    color: #14532d;
}

    .pg-success strong {
        display: block;
        margin-bottom: .25rem;
    }

.pg-error {
    border-radius: .5rem;
    border: 1px solid #fca5a5;
    background-color: #fef2f2;
    padding: .75rem 1rem;
    font-size: .8125rem;
    color: #7f1d1d;
}

.pg-protocol {
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    padding: .875rem 1rem;
    background-color: #f9fafb;
}

.pg-protocol-head {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: .5rem;
}

.pg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

    .pg-table td {
        padding: .25rem 0;
        border-bottom: 1px solid #e5e7eb;
        color: #374151;
    }

    .pg-table tr:last-child td {
        border-bottom: none;
    }

.pg-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #111827;
}

.pg-empty {
    font-size: .8125rem;
    color: #6b7280;
}

.pg-schemas {
    margin-top: .625rem;
    font-size: .8125rem;
    color: #374151;
    word-break: break-all;
}

.pg-schemas-label {
    font-weight: 600;
    margin-right: .25rem;
}

.pg-warnings {
    margin: .625rem 0 0 1.125rem;
    padding: 0;
    font-size: .8125rem;
    color: #92400e;
}

    .pg-warnings li {
        margin-bottom: .25rem;
    }

.pg-details {
    margin-top: .625rem;
    font-size: .8125rem;
}

    .pg-details summary {
        cursor: pointer;
        color: #4b5563;
        font-weight: 600;
    }

    .pg-details ul {
        margin: .5rem 0 0 0;
        padding: 0;
        list-style: none;
        max-height: 220px;
        overflow-y: auto;
    }

    .pg-details li {
        padding: .1875rem 0;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
        word-break: break-word;
    }

.pg-kind {
    display: inline-block;
    min-width: 8.5rem;
    font-weight: 600;
    color: #6b7280;
}

.pg-check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8125rem;
    color: #374151;
    cursor: pointer;
}

    .pg-check input {
        margin-top: .1875rem;
        flex-shrink: 0;
    }

    .pg-check em {
        color: #6b7280;
        font-style: normal;
    }

.pg-confirm {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.pg-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
}

.pg-expected {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: #7f1d1d;
    background-color: #fef2f2;
    border-radius: .375rem;
    padding: .25rem .5rem;
    word-break: break-all;
}

.pg-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

    .pg-actions > button {
        flex: 1 1 10rem;
    }

.dark .pg-title {
    color: #f9fafb;
}

.dark .pg-protocol {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .pg-table td {
    color: #d1d5db;
    border-color: #374151;
}

.dark .pg-num {
    color: #f9fafb;
}

.dark .pg-check,
.dark .pg-label,
.dark .pg-schemas,
.dark .pg-details li {
    color: #d1d5db;
}

/* ---------- Nachgereichte Dunkelvarianten ----------
   Tailwind wird hier nicht gebaut (kein Node auf den Rechnern), deshalb fehlen in
   wwwroot/css/tailwind.css die Hilfsklassen, die erst spaeter in den Seiten dazukamen.
   Gleiche Schreibweise wie Tailwind 3, damit die Reihenfolge im Stylesheet stimmt.
   ---------------------------------------------------------------------------- */
.dark\:bg-black\/30:is(.dark *) { background-color: rgba(0, 0, 0, .3); }
.dark\:bg-gray-900\/40:is(.dark *) { background-color: rgba(17, 24, 39, .4); }
.dark\:bg-amber-900:is(.dark *) { background-color: #78350f; }
.dark\:bg-amber-900\/30:is(.dark *) { background-color: rgba(120, 53, 15, .3); }
.dark\:bg-blue-900:is(.dark *) { background-color: #1e3a8a; }
.dark\:bg-blue-900\/30:is(.dark *) { background-color: rgba(30, 58, 138, .3); }
.dark\:bg-blue-950\/40:is(.dark *) { background-color: rgba(23, 37, 84, .4); }
.dark\:bg-cyan-900:is(.dark *) { background-color: #164e63; }
.dark\:bg-green-900:is(.dark *) { background-color: #14532d; }
.dark\:bg-green-900\/30:is(.dark *) { background-color: rgba(20, 83, 45, .3); }
.dark\:bg-green-950:is(.dark *) { background-color: #052e16; }
.dark\:bg-red-900:is(.dark *) { background-color: #7f1d1d; }
.dark\:bg-red-900\/30:is(.dark *) { background-color: rgba(127, 29, 29, .3); }
.dark\:bg-red-950:is(.dark *) { background-color: #450a0a; }
.dark\:bg-yellow-950:is(.dark *) { background-color: #422006; }

.dark\:border-gray-800:is(.dark *) { border-color: #1f2937; }
.dark\:border-amber-700:is(.dark *) { border-color: #b45309; }
.dark\:border-blue-700:is(.dark *) { border-color: #1d4ed8; }
.dark\:border-blue-800:is(.dark *) { border-color: #1e40af; }
.dark\:border-blue-900:is(.dark *) { border-color: #1e3a8a; }
.dark\:border-green-700:is(.dark *) { border-color: #15803d; }
.dark\:border-green-800:is(.dark *) { border-color: #166534; }
.dark\:border-red-700:is(.dark *) { border-color: #b91c1c; }
.dark\:border-yellow-700:is(.dark *) { border-color: #a16207; }

.dark\:text-amber-200:is(.dark *) { color: #fde68a; }
.dark\:text-blue-200:is(.dark *) { color: #bfdbfe; }

/* Tabellen und Karten der SuperAdmin-Listen: Radzen und Bootstrap setzen hier
   noch eigene helle Flaechen, die von Tailwind nicht erreicht werden. */
.dark table.min-w-full { color: var(--jt-fg-default); }
.dark .rz-datatable,
.dark .rz-datatable-data > tr,
.dark .rz-datatable-thead > tr > th {
    background-color: var(--jt-bg-surface);
    color: var(--jt-fg-default);
    border-color: var(--jt-border-default);
}

/* Rundum-Loeschen: Hinweisflaechen im Dunkeln entsaettigen. */
.dark .pg-notice,
.dark .pg-error {
    background-color: rgba(127, 29, 29, .25);
    border-color: #b91c1c;
    color: #fecaca;
}

.dark .pg-success {
    background-color: rgba(20, 83, 45, .25);
    border-color: #15803d;
    color: #bbf7d0;
}

.dark .pg-expected {
    background-color: rgba(127, 29, 29, .25);
    color: #fecaca;
}

.dark .pg-subtitle,
.dark .pg-empty,
.dark .pg-protocol-head,
.dark .pg-kind {
    color: #9ca3af;
}

.dark .pg-details summary {
    color: #d1d5db;
}

.dark .pg-details li {
    border-color: #374151;
}

.dark .pg-warnings {
    color: #fcd34d;
}

/* ══════════════════════════════════════════════════════════
   Nachtrag: Bootstrap-Kollisionen und fehlende Tailwind-Klassen
   ══════════════════════════════════════════════════════════

   ZWEI URSACHEN, warum die SuperAdmin-Seiten im Dunkelmodus nicht durchgezogen wirkten:

   1. bootstrap.min.css wird als erstes Stylesheet geladen und vergibt seine
      Hilfsklassen mit !important (.bg-white, .rounded, .shadow ...). Damit gewinnt
      Bootstrap gegen jaas-bridge.css, obwohl die Bruecke spaeter kommt. Ergebnis:
      Karten blieben weiss, waehrend der Text ueber die Token hell wurde.

   2. wwwroot/css/tailwind.css ist vorkompiliert. Auf den Rechnern gibt es kein Node,
      also fehlen darin alle Klassen, die erst nach dem letzten Uebersetzungslauf in
      die Seiten kamen (z. B. bg-red-800). Betroffene Knoepfe hatten gar keine Flaeche.

   Sobald Tailwind wieder gebaut werden kann, gehoert der zweite Block hier weg.
   ══════════════════════════════════════════════════════════ */

/* ── 1. Bootstrap zurueckdraengen ─────────────────────────── */

.bg-white {
    background-color: var(--jt-surface-card) !important;
}

.border-white {
    border-color: var(--jt-border-default) !important;
}

/* Graue Knoepfe tragen weissen Text. Die Bruecke gab ihnen eine helle
   Oberflaechenfarbe, wodurch im hellen Erscheinungsbild weiss auf weiss stand. */
.bg-gray-500 {
    background-color: #6b7280;
    color: #fff;
}

.hover\:bg-gray-600:hover {
    background-color: #4b5563;
}

.dark .bg-gray-500 {
    background-color: #4b5563;
}

.dark .hover\:bg-gray-600:hover {
    background-color: #374151;
}

/* ── 2. Fehlende Hilfsklassen ─────────────────────────────── */

.bg-red-800 { background-color: #991b1b; }
.hover\:bg-red-900:hover { background-color: #7f1d1d; }
.border-red-700 { border-color: #b91c1c; }

.bg-indigo-600 { background-color: #4f46e5; }
.hover\:bg-indigo-700:hover { background-color: #4338ca; }

.bg-amber-50 { background-color: var(--jt-status-warn-bg); }
.bg-blue-50 { background-color: var(--jt-status-info-bg); }
.bg-green-50 { background-color: var(--jt-status-ok-bg); }
.bg-white\/60 { background-color: rgba(255, 255, 255, .6); }

.border-amber-300 { border-color: var(--jt-status-warn-border); }
.border-blue-200,
.border-blue-300 { border-color: var(--jt-status-info-border); }
.border-cyan-200 { border-color: var(--main-color); }
.border-gray-100 { border-color: var(--jt-border-light); }
.border-green-200,
.border-green-300 { border-color: var(--jt-status-ok-border); }

.text-amber-800 { color: var(--jt-status-warn-fg); }
.text-green-900 { color: var(--jt-status-ok-fg); }
.hover\:text-cyan-500:hover { color: var(--main-color); }

.text-\[10px\] { font-size: 10px; line-height: 1.2; }
.text-\[11px\] { font-size: 11px; line-height: 1.3; }

.disabled\:bg-gray-100:disabled { background-color: var(--jt-bg-surface-2); }
.disabled\:text-gray-500:disabled { color: var(--jt-fg-tertiary); }
.disabled\:hover\:bg-gray-400:hover:disabled { background-color: var(--jt-bg-surface-3); }

.dark\:border-cyan-800:is(.dark *) { border-color: #155e75; }
.dark\:disabled\:bg-gray-600:is(.dark *):disabled { background-color: #4b5563; }
.dark\:disabled\:bg-gray-900:is(.dark *):disabled { background-color: #111827; }
.dark\:hover\:text-gray-200:is(.dark *):hover { color: #e5e7eb; }


/* ---------- Einrichtung: Fortschritt und Wechsel-Link ---------- */

/* Erledigter Schritt: ruhiger Punkt in Bestaetigungsgruen statt pulsierend. */
.su-bullet--done {
    background: #16a34a;
}

.su-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .625rem;
}

.su-progress-label {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--jt-fg-default);
}

.su-progress-value {
    flex-shrink: 0;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    color: var(--main-color);
    font-weight: 700;
}

.su-progress-track {
    height: .5rem;
    border-radius: 9999px;
    background: var(--jt-bg-surface-3);
    overflow: hidden;
}

.su-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background: var(--main-color);
    /* Breite kommt vom Server; der Uebergang glaettet die Spruenge zwischen zwei Abfragen. */
    transition: width .6s ease;
}

.su-steps-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.su-step-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--jt-fg-muted);
}

.su-step-row--active {
    color: var(--jt-fg-default);
    font-weight: 600;
}

.su-step-row--done {
    color: var(--jt-fg-secondary);
}

.su-step-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

    .su-step-mark svg {
        width: 1.125rem;
        height: 1.125rem;
        color: #16a34a;
    }

.su-step-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background: var(--jt-border-default);
}

.su-step-pulse {
    width: .75rem;
    height: .75rem;
    border-radius: 9999px;
    background: var(--main-color);
    box-shadow: 0 0 0 0 rgba(100, 196, 221, .7);
    animation: su-step-pulse 1.6s ease-out infinite;
}

@keyframes su-step-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(100, 196, 221, .7);
    }

    70% {
        box-shadow: 0 0 0 .5rem rgba(100, 196, 221, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(100, 196, 221, 0);
    }
}

.su-progress-note {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1rem;
    margin: 1.25rem 0 0;
    padding-top: .875rem;
    border-top: 1px solid var(--jt-border-light);
    font-size: .8125rem;
    color: var(--jt-fg-muted);
}

.su-progress-hint {
    color: var(--jt-fg-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .su-step-pulse {
        animation: none;
    }

    .su-progress-bar {
        transition: none;
    }
}

/* Der Wechsel zu Jobtura ist jetzt ein Anker statt eines Knopfes (Popup-Blocker auf dem iPhone),
   muss aber unveraendert wie ein Knopf aussehen. */
a.jh-btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

    a.jh-btn:hover {
        text-decoration: none;
    }

    a.jh-btn--primary,
    a.jh-btn--primary:hover,
    a.jh-btn--primary:visited {
        color: #fff;
    }


/* ══════════════════════════════════════════════════════════
   Startseite: Einstieg, Vorstellung, Paketauswahl
   ══════════════════════════════════════════════════════════ */

/* ---------- Kopfleiste, die beim Blättern mitläuft ----------
   Sitzt im Platzhalter des Layouts, also AUSSERHALB des gepolsterten Inhaltsbereichs. Nur so
   beginnt sie ohne Rand an der Kante. z-index ueber dem Inhalt (der traegt z-10). */
.sp-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Deckung nötig: Der Inhalt läuft darunter durch. */
    background: var(--jt-surface-card);
    border-bottom: 1px solid var(--jt-border-default);
    box-shadow: var(--jt-shadow-sm);
}

.sp-bar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: .625rem 1.5rem;
}

.sp-bar-logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

    .sp-bar-logo img {
        height: 3.25rem;
        width: auto;
    }

.sp-bar-claim {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--jt-fg-default);
}

.sp-bar-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sp-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .15s, background-color .15s;
}

.sp-bar-btn--ghost {
    border: 1px solid var(--main-color);
    background: transparent;
    color: var(--main-color);
}

    .sp-bar-btn--ghost:hover {
        background: var(--jt-bg-surface-hover);
        color: var(--main-color);
        text-decoration: none;
    }

/* Bestandskunden-Weg: soll auffindbar sein, aber nicht mit der Registrierung konkurrieren. */
.sp-bar-btn--quiet {
    border: 1px solid transparent;
    background: transparent;
    color: var(--jt-fg-secondary);
}

    .sp-bar-btn--quiet:hover {
        background: var(--jt-bg-surface-hover);
        color: var(--jt-fg-default);
        text-decoration: none;
    }

.sp-bar-btn--primary {
    border: 1px solid var(--main-color);
    background: var(--main-color);
    color: #fff;
}

    .sp-bar-btn--primary:hover,
    .sp-bar-btn--primary:visited {
        color: #fff;
        text-decoration: none;
    }

    .sp-bar-btn--primary:hover {
        filter: brightness(.94);
    }

/* Auf schmalen Anzeigen tritt das Versprechen unter die Leiste, damit Marke und
   Schaltflächen nebeneinander Platz behalten. */
@media (max-width: 767px) {
    .sp-bar-inner {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .5rem .75rem;
    }

    /* Das Logo verlässt die Leiste und steht dafür größer im Inhalt (.sp-mobile-brand).
       In der Leiste ist der Platz für Sprachauswahl UND drei Schaltflächen sonst zu knapp. */
    .sp-bar-logo {
        display: none;
    }

    .sp-bar-brand {
        display: none;
    }

    .sp-bar-claim {
        order: 3;
        flex: 1 1 100%;
        font-size: .875rem;
        line-height: 1.35;
        white-space: normal;
    }

    /* Genau ZWEI Zeilen: eine mit Auswahl und Schaltflächen, darunter das Versprechen.
       Deshalb kein Umbruch innerhalb der Schaltflächenreihe – die Reihe muss passen. */
    .sp-bar-actions {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: .375rem;
        margin-left: 0;
    }

    /* „JaaS öffnen" tritt zurück: Es ist der Weg für Bestandskunden, und den finden sie
       genauso über „Anmelden". Der Platz wird für die beiden Hauptwege gebraucht. */
    .sp-bar-btn--quiet {
        display: none;
    }

    /* Beide Auswahlfelder tragen dieselbe Grundklasse. Der Zwischenraum gehört hinter das ZWEITE
       (die Währung), sonst rissen sie einander auseinander. */
    .sp-bar-actions .cur-picker {
        margin-right: auto;
    }

    /* Nichts in der Reihe darf schrumpfen oder umbrechen, sonst kippt sie doch in eine zweite Zeile. */
    .sp-bar-actions .lang-picker,
    .sp-bar-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .sp-bar-btn {
        padding: .4375rem .6875rem;
        font-size: .8125rem;
    }
}

/* Auf sehr schmalen Geraeten wird das Versprechen kleiner, damit es in EINER Zeile bleibt.
   Zusammen mit der Schaltflaechenreihe darueber sind das die zugesagten zwei Zeilen. */
@media (max-width: 479px) {
    .sp-bar-claim {
        font-size: .8125rem;
    }

    .sp-hero-dot {
        margin: 0 .25em;
    }

    .sp-bar-btn {
        padding: .375rem .5rem;
        font-size: .75rem;
    }

    .lang-trigger {
        padding: .3rem .4rem;
        gap: .25rem;
    }
}

.sp-hero-accent {
    color: var(--main-color);
}

/* Quadratischer Trenner wie in der Anzeige, statt Mittelpunkt oder Schrägstrich. */
.sp-hero-dot,
.sp-keyword-sep {
    display: inline-block;
    width: .5em;
    height: .5em;
    margin: 0 .35em;
    vertical-align: middle;
    background: var(--main-color);
}

.sp-keyword-sep {
    width: .375rem;
    height: .375rem;
    margin: 0 .5rem;
}

.sp-keywords-more {
    margin: 0;
    line-height: 2;
    color: var(--jt-fg-default);
}

.sp-keyword {
    font-weight: 700;
    white-space: nowrap;
}

/* Auf sehr schmalen Anzeigen duerfen die laengeren Begriffe umbrechen, sonst schiebt sich
   die Karte ueber den Rand. */
@media (max-width: 400px) {
    .sp-keyword {
        white-space: normal;
    }
}

.sp-keywords-more .sp-keyword {
    font-size: .9375rem;
    color: var(--jt-fg-secondary);
}

.sp-keywords-more .sp-keyword--accent {
    color: var(--main-color);
}

/* ---------- Karten in der rechten Spalte ---------- */
.sp-panel {
    border: 1px solid var(--jt-border-default);
    border-radius: .625rem;
    background: var(--jt-surface-card);
    box-shadow: var(--jt-shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.sp-panel-title {
    margin: 0 0 .875rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--main-color);
}

.sp-panel-note {
    margin: .875rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--jt-fg-secondary);
}

.sp-flow {
    list-style: none;
    display: grid;
    /* Zwei Reihen zu zwei Schritten: In der schmalen Spalte bleibt jeder Schritt lesbar. */
    grid-template-columns: repeat(2, 1fr);
    gap: .625rem 1.5rem;
    margin: 0;
    padding: 0;
}

@media (min-width: 1280px) {
    .sp-flow {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sp-flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    border: 1px solid var(--jt-border-default);
    border-radius: .625rem;
    background: var(--jt-bg-surface-2);
    padding: .75rem .5rem;
}

/* Pfeil zwischen den Schritten: gehoert zur Abfolge, nicht zum einzelnen Schritt.
   Am Zeilenanfang waere er sinnlos, deshalb dort ausgeblendet. */
.sp-flow-step + .sp-flow-step::before {
    content: "\203A";
    position: absolute;
    left: -1.05rem;
    top: 50%;
    transform: translateY(-60%);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--jt-fg-muted);
}

.sp-flow-step:nth-child(odd)::before {
    content: none;
}

@media (min-width: 1280px) {
    .sp-flow-step:nth-child(odd)::before {
        content: "\203A";
    }

    .sp-flow-step:first-child::before {
        content: none;
    }
}

.sp-flow-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--main-color);
}

.sp-flow-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--jt-fg-default);
}

/* ---------- Sales & Rent gegenueber JaaS ---------- */
.sp-ways {
    max-width: 80rem;
    margin: 1.5rem auto 0;
    padding: 0 .75rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .sp-ways {
        padding: 0 2rem;
    }
}

.sp-ways-title {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jt-fg-default);
}

.sp-ways-claim {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jt-fg-default);
}

/* Beide Hälften des Versprechens stehen untereinander – der Gegensatz wirkt so staerker. */
.sp-ways-claim-line {
    display: block;
}

.sp-ways-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}

@media (min-width: 768px) {
    .sp-ways-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sp-way {
    border: 1px solid var(--jt-border-default);
    border-left: 3px solid var(--jt-fg-muted);
    border-radius: .625rem;
    background: var(--jt-surface-card);
    box-shadow: var(--jt-shadow-sm);
    padding: 1.125rem 1.25rem;
}

/* Der aktuelle Weg wird abgesetzt, damit die Einordnung ohne Lesen erkennbar ist. */
.sp-way--here {
    border-left-color: var(--main-color);
    box-shadow: var(--jt-shadow-md);
}

.sp-way-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.sp-way-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--jt-fg-default);
}

.sp-way-badge {
    flex-shrink: 0;
    border-radius: 999px;
    padding: .1875rem .625rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--jt-fg-secondary);
    background: var(--jt-bg-surface-3);
}

.sp-way-badge--here {
    color: #fff;
    background: var(--main-color);
}

.sp-way-text {
    margin: 0 0 .625rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--jt-fg-default);
}

.sp-way-sub {
    margin: -.25rem 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--main-color);
}

.sp-way-link {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    margin-top: .875rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--main-color);
}

    .sp-way-link:hover {
        color: var(--main-color);
        text-decoration: underline;
    }

.sp-way-points {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sp-way-points li {
        position: relative;
        padding-left: 1rem;
        font-size: .875rem;
        line-height: 1.7;
        color: var(--jt-fg-secondary);
    }

        .sp-way-points li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .6em;
            width: .375rem;
            height: .375rem;
            background: var(--main-color);
        }

.sp-ways-note {
    margin: 1rem 0 0;
    font-size: .875rem;
    color: var(--jt-fg-secondary);
}

/* ---------- Uebergang von den zwei Wegen zum gewaehlten Weg ---------- */
.sp-bridge {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 80rem;
    margin: 2.5rem auto;
    padding: 0 .75rem;
}

@media (min-width: 1024px) {
    .sp-bridge {
        padding: 0 2rem;
    }
}

.sp-bridge-line {
    flex: 1 1 0;
    height: 1px;
    background: var(--jt-border-default);
}

.sp-bridge-text {
    flex-shrink: 0;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: center;
    color: var(--main-color);
}

/* ---------- Zugang (Anmelden / Registrieren) ---------- */
.sp-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    max-width: 40rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.sp-access-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .625rem;
}

/* Ab Tablettbreite nebeneinander: wirkt praesenter und fuellt den Raum unter dem Logo. */
@media (min-width: 640px) {
    .sp-access-buttons {
        flex-direction: row;
        gap: .75rem;
    }

        .sp-access-buttons > * {
            flex: 1 1 0;
        }
}

.sp-access--bottom {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.sp-access-heading {
    margin: 0 0 .25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--jt-fg-default);
}

.sp-access-primary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: none;
    border-radius: .625rem;
    padding: .875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--main-color);
    cursor: pointer;
    box-shadow: var(--jt-shadow-md);
    transition: filter .15s, box-shadow .15s;
}

    .sp-access-primary:hover {
        filter: brightness(.94);
        box-shadow: var(--jt-shadow-lg);
    }

.sp-access-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.sp-access-secondary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--main-color);
    border-radius: .625rem;
    padding: .8125rem 1.5rem;
    text-align: center;
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--main-color);
    background: transparent;
    transition: background-color .15s;
}

    .sp-access-secondary:hover {
        background: var(--jt-bg-surface-hover);
        text-decoration: none;
        color: var(--main-color);
    }

.sp-access-note {
    margin: .125rem 0 0;
    font-size: .875rem;
    text-align: center;
    color: var(--jt-fg-secondary);
}

.sp-access-note--strong {
    font-weight: 600;
    color: var(--jt-fg-default);
}

/* ---------- Abschluss-Aufforderung am Seitenende ----------
   Registrieren ist das Ziel der Seite. Es traegt deshalb das volle Gewicht; die Anmeldung fuer
   Bestandskunden steht bewusst leise darunter und konkurriert nicht mit ihr. */
.sp-access-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: .75rem;
    padding: 1.125rem 2rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--main-color);
    box-shadow: 0 .5rem 1.5rem -0.5rem var(--main-color), var(--jt-shadow-lg);
    cursor: pointer;
    transition: filter .15s, transform .15s, box-shadow .15s;
}

    .sp-access-cta:hover,
    .sp-access-cta:visited {
        color: #fff;
        text-decoration: none;
    }

    .sp-access-cta:hover {
        filter: brightness(.95);
        transform: translateY(-1px);
        box-shadow: 0 .75rem 2rem -0.5rem var(--main-color), var(--jt-shadow-xl);
    }

.sp-access-cta-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

.sp-access-quiet {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .375rem;
    margin-top: 1.25rem;
    font-size: .875rem;
    color: var(--jt-fg-secondary);
}

.sp-access-link {
    border: none;
    background: transparent;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: underline;
    color: var(--main-color);
    cursor: pointer;
}

/* ---------- Vorstellung ---------- */
.sp-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 80rem;
    margin: 0 auto 3rem;
    padding: 0 .75rem;
}

@media (min-width: 1024px) {
    .sp-intro {
        grid-template-columns: 1.15fr 1fr;
        gap: 3rem;
        align-items: start;
        padding: 0 2rem;
    }
}

.sp-intro-title {
    margin: 0 0 .875rem;
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--jt-fg-default);
}

@media (min-width: 1024px) {
    .sp-intro-title {
        font-size: 2.125rem;
    }
}

.sp-intro-lead {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--jt-fg-default);
}

.sp-intro-points {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

    .sp-intro-points li {
        position: relative;
        padding-left: 1.625rem;
        font-size: .9375rem;
        line-height: 1.65;
        color: var(--jt-fg-default);
    }

        /* Haken als Textzeichen: keine zusaetzliche Grafik noetig. */
        .sp-intro-points li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 700;
            color: var(--main-color);
        }

        .sp-intro-points strong {
            color: var(--jt-fg-default);
        }

.sp-basefee {
    border-left: 3px solid var(--main-color);
    border-radius: .5rem;
    /* Eigene Flaeche statt Oberflaechen-Token: der Kasten liegt auf dem Hintergrundbild
       und braucht genug Deckung, damit die Preisangabe klar lesbar bleibt. */
    background: var(--jt-surface-card);
    box-shadow: var(--jt-shadow-sm);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

.sp-basefee-title {
    margin: 0 0 .375rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--main-color);
}

.sp-basefee-text {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--jt-fg-default);
}

    .sp-basefee-text:last-child {
        margin-bottom: 0;
        color: var(--jt-fg-secondary);
    }

    .sp-basefee-text strong {
        color: var(--jt-fg-default);
    }

.sp-intro-outro {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--jt-fg-secondary);
}

.sp-products {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    max-width: 60rem;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .sp-products {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sp-product {
    border: 1px solid var(--jt-border-default);
    border-left: 3px solid var(--main-color);
    border-radius: .5rem;
    background: var(--jt-surface-card);
    box-shadow: var(--jt-shadow-sm);
    padding: .875rem 1.125rem;
}

.sp-product-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.sp-product-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--jt-fg-default);
}

.sp-product-price {
    flex-shrink: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--main-color);
}

.sp-product-unit {
    font-size: .75rem;
    font-weight: 500;
    color: var(--jt-fg-secondary);
}

.sp-product-text {
    margin: .375rem 0 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--jt-fg-secondary);
}

/* ---------- Abschnittsueberschrift ueber den Karten ---------- */
.sp-section-title {
    margin: 0 0 .375rem;
    font-size: 1.375rem;
    font-weight: 700;
    text-align: center;
    color: var(--jt-fg-default);
}

.sp-section-lead {
    margin: 0 0 1.75rem;
    font-size: .9375rem;
    text-align: center;
    color: var(--jt-fg-secondary);
}

/* ---------- Verweise auf die Landing-Pages ----------
   Zwei Spalten, damit die dreissig Eintraege nicht zu einer endlosen Liste werden. */
.sp-fit-group {
    margin: 0 0 .875rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--jt-fg-secondary);
}

.sp-fit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .625rem;
    max-width: 60rem;
    margin: 0 auto 2.5rem;
}

.sp-fit-grid:last-child {
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .sp-fit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Die Branchen stehen in kleinen Gruppen. Der Abstand dazwischen ist Absicht:
   er soll zeigen, dass hier nicht alles in denselben Topf geworfen wird. */
.sp-fit-cluster {
    max-width: 60rem;
    margin: 0 auto 2.75rem;
}

.sp-fit-cluster:last-child {
    margin-bottom: 0;
}

.sp-fit-cluster .sp-fit-grid {
    margin-bottom: 0;
}

.sp-fit-cluster-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--jt-fg-secondary);
}

    .sp-fit-cluster-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--jt-border-default);
    }

.sp-fit {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--jt-border-default);
    border-radius: .5rem;
    background: var(--jt-surface-card);
    padding: .625rem .875rem;
    text-decoration: none;
    color: var(--jt-fg-default);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .sp-fit--linked:hover {
        border-color: var(--main-color);
        box-shadow: var(--jt-shadow-sm);
        transform: translateY(-1px);
        text-decoration: none;
        color: var(--jt-fg-default);
    }

.sp-fit-arrow {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    color: var(--jt-fg-secondary);
    opacity: .6;
    transition: transform .15s ease, opacity .15s ease, color .15s ease;
}

    .sp-fit--linked:hover .sp-fit-arrow {
        transform: translateX(2px);
        opacity: 1;
        color: var(--main-color);
    }

.sp-fit-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    background: rgba(100, 196, 221, .14);
    color: var(--main-color);
}

    .sp-fit-icon svg {
        width: 1.375rem;
        height: 1.375rem;
    }

.sp-fit-label {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════
   Bandarole: Zustand der Umgebung im Fussbereich
   ══════════════════════════════════════════════════════════ */
.ss-strip {
    max-width: 44rem;
    margin: 0 auto .75rem;
    border: 1px solid var(--jt-status-warn-fg, #d97706);
    border-radius: .5rem;
    background: var(--jt-surface-card);
    text-align: left;
    overflow: hidden;
}

.ss-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: none;
    background: transparent;
    padding: .5rem .75rem;
    font-size: .75rem;
    text-align: left;
    cursor: pointer;
    color: var(--jt-fg-default);
}

.ss-head--static {
    cursor: default;
}

.ss-dot {
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--jt-status-warn-fg, #d97706);
}

.ss-label {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--jt-status-warn-fg, #d97706);
}

.ss-summary {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--jt-fg-secondary);
}

.ss-chevron {
    flex-shrink: 0;
    transition: transform .15s;
    color: var(--jt-fg-muted);
}

.ss-chevron--open {
    transform: rotate(180deg);
}

.ss-list {
    list-style: none;
    margin: 0;
    padding: 0 .75rem .625rem;
}

.ss-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .75rem;
    border-top: 1px solid var(--jt-border-default);
}

.ss-item-name {
    min-width: 11rem;
    font-weight: 600;
    color: var(--jt-fg-default);
}

.ss-item--ok .ss-item-state {
    color: var(--jt-status-ok-fg, #16a34a);
}

.ss-item--bad .ss-item-state {
    color: var(--jt-status-danger-fg, #dc2626);
    font-weight: 600;
}

.ss-item-detail {
    flex: 1 1 100%;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .6875rem;
    line-height: 1.5;
    color: var(--jt-fg-muted);
}

/* ══════════════════════════════════════════════════════════
   Besucherweg (Auswertung, nur SuperAdministrator)
   ══════════════════════════════════════════════════════════ */
.fn-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

@media (min-width: 900px) {
    .fn-steps {
        grid-template-columns: repeat(5, 1fr);
    }
}

.fn-step {
    border: 1px solid var(--jt-border-default);
    border-radius: .5rem;
    background: var(--jt-bg-surface-2);
    padding: .875rem 1rem;
}

.fn-step-count {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--jt-fg-default);
}

.fn-step-label {
    margin: .25rem 0 .625rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--jt-fg-secondary);
}

.fn-step-bar {
    height: .375rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--jt-bg-surface-3);
}

.fn-step-fill {
    height: 100%;
    background: var(--main-color);
}

.fn-step-share {
    margin: .375rem 0 0;
    font-size: .75rem;
    color: var(--jt-fg-muted);
}

.fn-hint {
    font-size: .75rem;
    font-weight: 400;
    color: var(--jt-fg-muted);
}

/* ---------- Reihenfolge der Produkte im Paket ---------- */
.pp-row {
    cursor: grab;
}

.pp-row--dragging {
    opacity: .45;
}

/* Zielmarke beim Ziehen: Linie oben, damit die Einfuegestelle eindeutig ist. */
.pp-row--dropzone > td {
    box-shadow: inset 0 2px 0 0 var(--main-color);
}

.pp-handle {
    display: inline-block;
    margin-right: .5rem;
    color: var(--jt-fg-muted);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}

.pp-position {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    color: var(--jt-fg-secondary);
}

.pp-move {
    border: 1px solid var(--jt-border-default);
    border-radius: .375rem;
    background: transparent;
    padding: .125rem .375rem;
    font-size: .625rem;
    line-height: 1.2;
    color: var(--jt-fg-secondary);
    cursor: pointer;
}

    .pp-move:hover:not(:disabled) {
        border-color: var(--main-color);
        color: var(--main-color);
    }

    .pp-move:disabled {
        opacity: .3;
        cursor: not-allowed;
    }

/* ---------- Grundgebuehr ---------- */

/* Hinweis auf der Kaufseite: soll auffallen, ohne wie ein Fehler zu wirken. */
.bp-basefee {
    border-left: 4px solid var(--jt-warning, #f59e0b);
    border-radius: .5rem;
    background: var(--jt-status-warn-bg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.bp-basefee--running {
    border-left-color: var(--main-color);
    background: var(--jt-bg-surface-2);
}

.bp-basefee-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--jt-fg-default);
}

.bp-basefee-text {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--jt-fg-default);
}

    .bp-basefee-text:last-child {
        margin-bottom: 0;
    }

/* Aufschluesselung ueber der Summe. */
.bp-sum {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .375rem 1.5rem;
    margin: 0 0 .5rem;
    font-size: .9375rem;
    color: var(--jt-fg-secondary);
}

    .bp-sum dt {
        font-weight: 400;
    }

    .bp-sum dd {
        margin: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
        color: var(--jt-fg-default);
    }

.bp-total-note {
    margin: -.25rem 0 .75rem;
    font-size: .8125rem;
    color: var(--jt-fg-secondary);
}

/* Hinweis in der Abo-Uebersicht des Kunden. */
.sl-basefee {
    border-left: 3px solid var(--main-color);
    border-radius: .5rem;
    background: var(--jt-surface-card);
    box-shadow: var(--jt-shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.sl-basefee-title {
    margin: 0 0 .375rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--main-color);
}

.sl-basefee-text {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--jt-fg-default);
}

    .sl-basefee-text:last-child {
        margin-bottom: 0;
        color: var(--jt-fg-secondary);
    }

/* Warnung in der Produktliste, wenn kein Grundgebuehr-Produkt gekennzeichnet ist. */
.pl-warning {
    border: 1px solid var(--jt-status-warn-border, #fcd34d);
    border-left-width: 4px;
    border-radius: .5rem;
    background: var(--jt-status-warn-bg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.pl-warning-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--jt-fg-default);
}

.pl-warning-text {
    margin: 0 0 .5rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--jt-fg-default);
}

    .pl-warning-text:last-child {
        margin-bottom: 0;
    }

/* ---------- Abo-Uebersicht: Kopfleiste und Zeilen ---------- */
.sl-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.sl-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border: none;
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: var(--main-color);
    cursor: pointer;
    transition: filter .15s;
}

    .sl-btn-primary:hover {
        filter: brightness(.94);
    }

.sl-btn-ghost {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--jt-border-default);
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--jt-fg-secondary);
    background: transparent;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .sl-btn-ghost:hover {
        border-color: var(--main-color);
        color: var(--main-color);
        text-decoration: none;
    }

/* Enthaltene Produkte eines Pakets: schmale Zeile ohne eigene Werte. */
.sl-row-child > td {
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-top: none;
}

.sl-child-name {
    font-size: .8125rem;
    color: var(--jt-fg-secondary);
}

.sl-child-hint {
    margin-left: .5rem;
    font-size: .75rem;
    color: var(--jt-fg-muted);
}

/* Statt eines Knopfes, wenn die Grundgebuehr noch nicht kuendbar ist. */
.sl-locked {
    display: inline-block;
    font-size: .8125rem;
    color: var(--jt-fg-muted);
    cursor: help;
}

/* ══════════════════════════════════════════════════════════
   Browser-eigene Bedienelemente (SAW-weit)
   ══════════════════════════════════════════════════════════

   Zahlenfeld-Pfeile, Bildlaufleisten, Datumsauswahl und Kontrollkaestchen zeichnet der
   Browser selbst. Ohne color-scheme nimmt er dafuer immer die helle Variante – deshalb
   sassen im Dunkelmodus weisse Pfeilchen-Kaesten in dunklen Feldern.
   Das ist der eigentliche Schalter; alles Weitere ist Feinschliff.
   ══════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;
}

.dark,
[data-theme="dark"] {
    color-scheme: dark;
}

/* ---------- Bildlaufleisten ---------- */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--jt-border-input, #cbd5e1) transparent;
}

/* Chromium, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, .18);
    /* Rand in Hintergrundfarbe laesst den Daumen schmaler wirken, ohne die Trefferflaeche zu verkleinern. */
    border: 2px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .3);
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .18);
    background-clip: content-box;
}

    .dark ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, .32);
    }

/* ---------- Zahlenfelder ---------- */

/* Die Pfeilchen erscheinen sonst erst beim Ueberfahren – in Tabellenzeilen findet man sie so nicht. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    height: auto;
}

input[type="number"] {
    /* Ohne feste Angabe erbt Firefox die Standardbreite und schneidet die Pfeile ab. */
    -moz-appearance: number-input;
}

/* Radzen-Zahlenfeld: eigene Knoepfe, die nicht ueber color-scheme laufen. */
.dark .rz-spinner-up,
.dark .rz-spinner-down {
    background-color: var(--jt-bg-surface-3);
    color: var(--jt-fg-secondary);
    border-color: var(--jt-border-default);
}

    .dark .rz-spinner-up:hover,
    .dark .rz-spinner-down:hover {
        background-color: var(--jt-bg-surface-hover);
        color: var(--main-color);
    }

.dark .rz-spinner-input {
    background-color: var(--jt-input-bg);
    color: var(--jt-input-text);
    border-color: var(--jt-input-border);
}

/* ---------- Rechtslinks in den Fusszeilen ---------- */
.nn-footer a,
.ml-footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

    .nn-footer a:hover,
    .ml-footer a:hover {
        color: var(--main-color);
        border-bottom-color: currentColor;
    }

/* ══════════════════════════════════════════════════════════
   Dialoghöhe (SAW-weit)
   ══════════════════════════════════════════════════════════

   Radzen gibt dem Dialog max-height: 100%, dadurch klebt ein hohes Formular oben und
   unten am Bildschirmrand. Der Inhaltsbereich scrollt bereits von Haus aus, es fehlt
   also nur der Abstand. dvh statt vh, weil mobile Browser die Adressleiste ein- und
   ausblenden und vh dort auf die grössere Höhe rechnet.
   ══════════════════════════════════════════════════════════ */

.rz-dialog {
    max-height: calc(100vh - 5rem) !important;
    max-height: calc(100dvh - 5rem) !important;
}

/* Auf kleinen Geräten ist der Bildschirm knapp – dort reicht ein schmaler Rand. */
@media (max-width: 639px) {
    .rz-dialog {
        max-height: calc(100vh - 1.5rem) !important;
        max-height: calc(100dvh - 1.5rem) !important;
    }
}

/* Die Kopfzeile bleibt stehen, nur der Inhalt darunter läuft. */
.rz-dialog .rz-dialog-titlebar {
    flex: 0 0 auto !important;
}

.rz-dialog .rz-dialog-content {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}


/* ══════════════════════════════════════════════════════════
   Sprachauswahl der Verkaufsseite
   ══════════════════════════════════════════════════════════ */

/* Bezugspunkt fuer die aufklappende Liste. */
.lang-picker {
    position: relative;
    flex-shrink: 0;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--jt-border-default);
    border-radius: .5rem;
    background: transparent;
    padding: .4rem .55rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--jt-fg-default);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

    .lang-trigger:hover {
        background: var(--jt-bg-surface-hover);
        border-color: var(--main-color);
    }

.lang-trigger-caret {
    width: .875rem;
    height: .875rem;
    flex-shrink: 0;
}

.lang-picker--open .lang-trigger-caret {
    transform: rotate(180deg);
}

/* Faengt den Klick daneben ab. Unsichtbar, aber ueber dem Inhalt und unter der Liste. */
.lang-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.lang-list {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 51;
    margin: 0;
    padding: .3rem;
    list-style: none;
    min-width: 14rem;
    /* Nie höher als das Fenster: Sonst reicht die Liste bei elf Sprachen unten heraus. */
    max-height: min(22rem, calc(100vh - 7rem));
    overflow-y: auto;
    border: 1px solid var(--jt-border-default);
    border-radius: .6rem;
    background: var(--jt-surface-card);
    box-shadow: var(--jt-shadow-lg, 0 10px 30px rgba(0,0,0,.18));
}

.lang-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    padding: .45rem .55rem;
    text-align: left;
    font-size: .875rem;
    color: var(--jt-fg-default);
    cursor: pointer;
}

    .lang-option:hover {
        background: var(--jt-bg-surface-hover);
    }

.lang-option--active {
    background: var(--jt-bg-surface-hover);
    font-weight: 700;
}

.lang-option-native {
    flex: 1 1 auto;
}

/* Der englische Name steht nur als Orientierung dabei und darf nicht mitlesen wollen. */
.lang-option-english {
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--jt-fg-secondary);
}

.lang-option-check {
    width: .875rem;
    height: .875rem;
    flex-shrink: 0;
    color: var(--main-color);
}

/* Waehrungszeichen an der Stelle, an der bei der Sprache die Flagge steht. Feste Breite, damit
   die Kuerzel darunter buendig bleiben - "CHF" ist breiter als "$". */
.cur-trigger-symbol,
.cur-option-symbol {
    display: inline-block;
    min-width: 1.25rem;
    flex-shrink: 0;
    text-align: center;
    font-weight: 700;
    color: var(--main-color);
}

/* Die Flagge ist bewusst klein: Sie ordnet zu, sie schmueckt nicht. */
.lang-flag {
    display: inline-block;
    width: 1.25rem;
    height: .8375rem;
    flex-shrink: 0;
    line-height: 0;
    border-radius: .125rem;
    overflow: hidden;
}

    .lang-flag svg {
        display: block;
        width: 100%;
        height: 100%;
    }

/* Hinweis auf eine noch nicht uebersetzte Sprache. Ruhig gehalten - es ist kein Fehler. */
.sp-lang-hint {
    max-width: 80rem;
    margin: .75rem auto 0;
    padding: .5rem .9rem;
    border-left: 3px solid var(--main-color);
    background: var(--jt-bg-surface-hover);
    font-size: .8125rem;
    color: var(--jt-fg-secondary);
}

/* Auf schmalen Anzeigen tritt der englische Zweitname zurueck - der Platz fehlt. */
@media (max-width: 767px) {
    .lang-trigger-name {
        display: none;
    }

    .lang-option-english {
        display: none;
    }

    /* Die Auswahl steht links in der Leiste. Klappte die Liste nach rechts aus, laege sie
       ausserhalb des Bildes - dann waeren Flaggen und Sprachnamen unsichtbar. */
    .lang-list {
        left: 0;
        right: auto;
        min-width: 12rem;
        max-width: calc(100vw - 1.5rem);
    }
}

/* Die Marke auf schmalen Anzeigen: aus der Leiste heraus und dafuer groesser ueber die Seite
   gesetzt. Auf breiten Anzeigen steht sie in der Leiste, hier waere sie doppelt. */
.sp-mobile-brand {
    display: none;
}

@media (max-width: 767px) {
    /* Flex statt text-align: Das Logo ist ein Bild, und ein Bild mittig zu setzen gelingt so
       unabhaengig davon, was der umgebende Block an Ausrichtung mitbringt. */
    .sp-mobile-brand {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem 1rem .5rem;
    }

        .sp-mobile-brand img {
            display: block;
            height: 4rem;
            width: auto;
            max-width: 70%;
        }
}


/* ══════════════════════════════════════════════════════════
   Besucherweg: Laender mit aufklappbarer Aufschluesselung
   ══════════════════════════════════════════════════════════ */

.fn-country-row {
    cursor: pointer;
}

    .fn-country-row:hover {
        background: var(--jt-bg-surface-hover);
    }

/* Feste Breite, damit die Landesnamen beim Auf- und Zuklappen nicht springen. */
.fn-country-toggle {
    display: inline-block;
    width: 1rem;
    margin-right: .35rem;
    font-weight: 700;
    color: var(--main-color);
}

.fn-country-detail > td {
    background: var(--jt-bg-surface-hover);
    padding: .75rem 1rem 1rem;
}

.fn-country-sub {
    margin: .75rem 0 .35rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--jt-fg-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
}

    .fn-country-sub:first-child {
        margin-top: 0;
    }

/* ══════════════════════════════════════════════════════════
   Verwaltung: Katalog-Uebersetzung und Preise je Waehrung
   ══════════════════════════════════════════════════════════ */

.tr-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-top: .5rem;
}

.tr-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 16rem;
}

.tr-field-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--jt-fg-secondary);
}

.tr-input {
    border: 1px solid var(--jt-border-default);
    border-radius: .5rem;
    background: var(--jt-surface-card);
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--jt-fg-default);
}

.tr-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--jt-fg-default);
}

/* Feste Schrift: In JSON zaehlt die Spalte, und Klammern muessen untereinander stehen. */
.tr-json {
    width: 100%;
    margin-top: .75rem;
    border: 1px solid var(--jt-border-default);
    border-radius: .5rem;
    background: var(--jt-bg-surface-hover);
    padding: .75rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--jt-fg-default);
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

.tr-status {
    margin: .75rem 0 0;
    font-size: .875rem;
    color: var(--jt-fg-default);
}

/* Rechtsbuendig: Betraege vergleicht man an der letzten Stelle, nicht an der ersten. */
.tr-price {
    width: 7rem;
    border: 1px solid var(--jt-border-default);
    border-radius: .375rem;
    background: var(--jt-surface-card);
    padding: .3rem .5rem;
    font-size: .875rem;
    text-align: right;
    color: var(--jt-fg-default);
}

    .tr-price:focus {
        border-color: var(--main-color);
        outline: none;
    }

/* Hinweis, dass in Euro abgerechnet wird. Er steht zwischen Vorspann und Preisliste und braucht
   nach unten Luft: Klebt er an den Karten, liest man ihn als deren Ueberschrift. */
.sp-currency-note {
    max-width: 46rem;
    margin: 1.25rem auto 2rem;
    padding: .6rem .9rem;
    border: 1px solid var(--jt-border-default);
    border-left: 3px solid var(--main-color);
    border-radius: .5rem;
    background: var(--jt-bg-surface-hover);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--jt-fg-secondary);
    text-align: left;
}

/* Kurzer Hinweistext in den Verwaltungskarten. */
.tr-hint {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--jt-fg-secondary);
}

/* Meldung innerhalb einer Karte. Sie gehoert unter die Schaltflaechen, darf aber nicht an ihnen
   kleben - sonst liest sie sich wie deren Beschriftung. */
.tr-notice {
    margin-top: 1.25rem;
}

/* Stichtag in der Kopfzeile der Preispflege. Kleiner als die Spaltenbeschriftung: Er gehoert dazu,
   ist aber nicht die Ueberschrift. */
.tr-date {
    display: block;
    margin-top: .25rem;
    border: 1px solid var(--jt-border-default);
    border-radius: .375rem;
    background: var(--jt-surface-card);
    padding: .2rem .35rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--jt-fg-default);
}

    .tr-date:focus {
        border-color: var(--main-color);
        outline: none;
    }

/* Wegweiser in der Anmeldemaske: Diese Maske fuehrt in die VERWALTUNG. Wer arbeiten will, ist hier
   falsch - und merkt es sonst erst hinterher. Auf schmalen Anzeigen ist der Weg aus der Kopfleiste
   genommen, deshalb steht er hier auffaellig. */
.lm-jaas-hint {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 1rem 1.5rem 0;
    padding: .75rem .875rem;
    border: 1px solid var(--main-color);
    border-radius: .625rem;
    background: color-mix(in srgb, var(--main-color) 10%, transparent);
    text-decoration: none;
    color: var(--jt-fg-default);
    transition: background-color .15s;
}

    .lm-jaas-hint:hover {
        background: color-mix(in srgb, var(--main-color) 18%, transparent);
        text-decoration: none;
    }

.lm-jaas-hint-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
}

    .lm-jaas-hint-icon svg {
        width: 1rem;
        height: 1rem;
    }

.lm-jaas-hint-body {
    flex: 1 1 auto;
    font-size: .8125rem;
    line-height: 1.4;
}

    .lm-jaas-hint-body strong {
        display: block;
        font-size: .875rem;
        color: var(--jt-fg-default);
    }

.lm-jaas-hint-arrow {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--main-color);
}

/* Preispflege: Die Euro-Spalte soll den Betrag samt Zeichen in EINER Zeile tragen. Die Tabelle
   scrollt ohnehin waagerecht, Platz ist also da - ein Umbruch waere nur unschoen.
   Bewusst ueber eine eigene Klasse und nicht ueber nth-child auf .sl-table: Sonst traefe die Regel
   jede Tabelle der Anwendung. */
.tr-price-table .tr-price-head,
.tr-price-table .tr-price-cell {
    min-width: 7rem;
    white-space: nowrap;
}

/* Einzelbearbeitung der Uebersetzungen. */
.tr-source {
    min-width: 16rem;
    max-width: 24rem;
    vertical-align: top;
}

.tr-source-text {
    margin: .25rem 0 0;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--jt-fg-secondary);
}

.tr-edit {
    width: 100%;
    min-width: 12rem;
}

.tr-edit--text {
    resize: vertical;
    line-height: 1.4;
}
/* ---------- Sprachauswahl ausserhalb der Verkaufsseite ---------- */
/* Registrierung, Anmeldung und Bestaetigung koennen der erste Kontakt sein. Ohne eigene Auswahl
   bliebe der Besucher dort in der einmal geratenen Sprache stecken. */

.rf-lang {
    display: flex;
    justify-content: center;
    margin-top: .25rem;
}

.lm-lang {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.su-lang {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

    .rf-lang .lang-picker,
    .lm-lang .lang-picker,
    .su-lang .lang-picker {
        margin-right: 0;
    }

    /* Nach unten aufklappen wuerde am Seitenrand abgeschnitten; hier oeffnet die Liste nach oben. */
    .lm-lang .lang-list,
    .su-lang .lang-list {
        top: auto;
        bottom: calc(100% + .4rem);
    }

/* ══════════════════════════════════════════════════════════
   Kostenlos testen: die Zusage an Interessenten (FreeTrialPromise)
   Steht auf Startseite, Registrierung und Bestätigungsseite in denselben Worten.
   ══════════════════════════════════════════════════════════ */

.ftp {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Ausführlich: Titel und vier Zusagen mit Erläuterung ---------- */
.ftp--full {
    border: 1px solid rgba(100, 196, 221, .55);
    border-radius: 1rem;
    background: rgba(100, 196, 221, .08);
    padding: 1rem 1.25rem;
}

.ftp-title {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--jt-fg-default);
}

.ftp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Vier Zusagen: einspaltig, dann 2 × 2, dann in einer Reihe – nie drei plus eine. */
@media (min-width: 640px) {
    .ftp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ftp-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ftp-point {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.ftp-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--main-color);
    color: #fff;
}

    .ftp-icon .ftp-check {
        width: .875rem;
        height: .875rem;
    }

.ftp-label {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--jt-fg-default);
}

.ftp-text {
    display: block;
    margin-top: .125rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--jt-fg-secondary);
}

/* ---------- Kompakt: nur die vier Stichworte in einer Reihe ---------- */
.ftp--compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--jt-fg-default);
}

.ftp-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
}

    .ftp-chip .ftp-check {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        color: var(--main-color);
    }

/* Auf sehr schmalen Anzeigen darf ein Stichwort umbrechen, statt über den Rand zu laufen. */
@media (max-width: 400px) {
    .ftp-chip {
        white-space: normal;
    }
}

/* ---------- Einbindung auf der Startseite ---------- */

/* Zweite, ruhige Zeile der mitlaufenden Kopfleiste. */
.sp-bar-trust {
    border-top: 1px solid var(--jt-border-default);
    padding: .375rem 1.5rem;
}

/* Die mobile Kopfleiste ist auf zwei Zeilen festgelegt (siehe .sp-bar-actions). Dort steht die
   Zusage stattdessen unter dem Logo im Inhalt. */
.ftp--mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .sp-bar-trust {
        display: none;
    }

    .ftp--mobile-only {
        display: flex;
        padding: .25rem 1rem .5rem;
    }
}

.sp-trial {
    max-width: 80rem;
    margin: 0 auto 2.5rem;
    padding: 0 .75rem;
}

@media (min-width: 1024px) {
    .sp-trial {
        padding: 0 2rem;
    }
}

/* Steht direkt unter der Einleitung der Preislisten. Die Einleitung bringt den Abstand nach
   unten mit – er wandert hier hinter den Hinweis. */
.sp-section-lead + .sp-trial-note {
    margin-top: -1.25rem;
}

.sp-trial-note {
    margin: 0 auto 1.75rem;
    max-width: 46rem;
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    color: var(--jt-fg-default);
}

/* ---------- Einbindung in der Registrierung ---------- */
.rf-trial {
    margin-bottom: 1rem;
}

.rf-trial-compact {
    margin-top: .75rem;
}

.rf-reassure {
    margin: .25rem 0 0;
    border-left: 3px solid var(--main-color);
    padding: .125rem 0 .125rem .75rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--jt-fg-secondary);
}

.rf-agb-hint {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--jt-fg-secondary);
}

/* ---------- Einbindung auf der Bestätigungsseite ---------- */
.su-trial {
    margin-top: 1rem;
}