/* ============================================================
   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 ---------- */
.rf-form-wrapper {
    max-width: 64rem;
    margin: 0 auto;
    padding: .5rem 1rem 4rem;
}

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

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

/* ---------- 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;
}

/* ---------- 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 1rem;
}

@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;
}

@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 (JaaS-öffnen) ---------- */
.nav-top-right {
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 40;
}

.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;
}

.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;
    }

/* ---------- 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);
}

.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-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: .5rem;
    overflow: hidden;
    background: #111827;
}

    .su-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.su-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #6b7280;
    font-size: .8125rem;
}

    .su-video-placeholder svg {
        width: 2.75rem;
        height: 2.75rem;
    }

.su-video-hint {
    margin: .75rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: #6b7280;
}

/* ============================================================
   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
   ══════════════════════════════════════════════════════════ */

/* ---------- 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--top {
    /* Deutlicher Abstand zum Logo darueber, damit der Einstieg als eigener Block wirkt. */
    margin-top: 2.25rem;
    margin-bottom: 3.5rem;
}

.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);
}

/* ---------- Vorstellung mit Video ---------- */
.sp-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 80rem;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

@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-video {
    position: relative;
    width: 100%;
    /* Fester Seitenanteil statt fester Hoehe: haelt das Bild in jeder Breite im Verhaeltnis. */
    aspect-ratio: 16 / 9;
    border-radius: var(--jt-radius-md, .75rem);
    overflow: hidden;
    background: var(--jt-bg-surface-2);
    border: 1px solid var(--jt-border-default);
}

    .sp-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.sp-video--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--jt-fg-muted);
    font-size: .875rem;
}

    .sp-video--empty svg {
        width: 3rem;
        height: 3rem;
        opacity: .5;
    }

.sp-video-caption {
    margin: .75rem 0 0;
    font-size: .8125rem;
    text-align: center;
    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);
}

/* ---------- 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;
}