/* ============================================================
   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: #22d3ee;
        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;
}

/* ---------- 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: #0e7490;
    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;
    }

/* ---------- 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, #0e7490, #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, #0891b2, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .sp-welcome-title {
    background: linear-gradient(135deg, #22d3ee, #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: #0891b2;
}

.dark .sc-price {
    color: #22d3ee;
}

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

.sc-feature-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}

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

.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: #0891b2;
    text-decoration: none;
    transition: color .15s;
}

    .lm-footer-link:hover {
        color: #0e7490;
    }

.dark .lm-footer-link {
    color: #22d3ee;
}

    .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;
    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: #0891b2;
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .625rem;
    border-radius: .375rem;
    transition: color .15s, background .15s;
}

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

.dark .md-btn-edit {
    color: #22d3ee;
}

    .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: #0891b2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: .375rem;
    transition: color .15s;
}

    .md-btn-link:hover {
        color: #0e7490;
    }

.dark .md-btn-link {
    color: #22d3ee;
}

    .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: #0e7490;
    margin: .5rem 0 .125rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark .cf-section-title {
    color: #22d3ee;
    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: #0e7490;
    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: #0e7490;
    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) ---------- */
.md-status-panel {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: 100%;
    border-radius: .75rem;
    padding: .875rem 1.125rem;
    margin-bottom: 1.5rem;
}

.md-status-panel--green {
    background: rgba(22, 163, 74, .22);
    border: 1px solid rgba(22, 163, 74, .6);
}

.md-status-panel--yellow {
    background: rgba(217, 119, 6, .28);
    border: 1px solid rgba(217, 119, 6, .7);
}

.md-status-panel--red {
    background: rgba(220, 38, 38, .22);
    border: 1px solid rgba(220, 38, 38, .6);
}

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

.md-status-dot {
    width: .875rem;
    height: .875rem;
    border-radius: 50%;
    flex-shrink: 0;
    animation: md-pulse-dot 2s ease-in-out infinite;
}

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

    50% {
        opacity: .55;
    }
}

.md-status-dot--green {
    background: #16a34a;
    box-shadow: 0 0 8px rgba(22,163,74,.55);
}

.md-status-dot--yellow {
    background: #d97706;
    box-shadow: 0 0 8px rgba(217,119,6,.55);
}

.md-status-dot--red {
    background: #dc2626;
    box-shadow: 0 0 8px rgba(220,38,38,.55);
}

.md-status-dot--grey {
    background: #9ca3af;
    box-shadow: none;
    animation: none;
}

.md-status-text {
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.dark .md-status-text {
    color: #f3f4f6;
}

/* ---------- Checkliste ---------- */
.md-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.5rem;
    padding-left: 1.625rem;
}

.md-check-item {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    color: #4b5563;
}

.dark .md-check-item {
    color: #9ca3af;
}

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

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

/* ---------- Gate-Banner (Ampel nicht grün) ---------- */
.sl-gate-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border-radius: .75rem;
    border: 1px solid rgba(217, 119, 6, .7);
    background: rgba(120, 66, 0, .55);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.dark .sl-gate-banner {
    border-color: rgba(217, 119, 6, .65);
    background: rgba(120, 66, 0, .60);
}

.sl-gate-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: #d97706;
}

    .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: #92400e;
    margin: 0;
}

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

.sl-gate-text {
    font-size: .875rem;
    color: #78350f;
    margin: 0;
    line-height: 1.5;
}

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

/* ---------- 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: #0891b2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
}

    .sl-btn-link:hover {
        color: #0e7490;
    }

.dark .sl-btn-link {
    color: #22d3ee;
}

.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: .5rem;
}

.sl-pagination-info {
    font-size: .8125rem;
    color: #6b7280;
}

.dark .sl-pagination-info {
    color: #9ca3af;
}

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

.sl-pagination-btn {
    border-radius: .375rem;
    padding: .375rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
    cursor: pointer;
    transition: background .15s;
}

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

    .sl-pagination-btn:not(:disabled):hover {
        background: #e5e7eb;
    }

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

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

.sl-pagination-page {
    font-size: .875rem;
    font-weight: 600;
    color: #111827;
    padding: 0 .25rem;
}

.dark .sl-pagination-page {
    color: #f3f4f6;
}

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

/* ---------- Responsive Tabellen-Sichtbarkeit ---------- */
.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;
    }
}

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

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

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

.sl-sub-card-name {
    font-size: .9375rem;
    font-weight: 600;
    color: #111827;
}

.dark .sl-sub-card-name {
    color: #f3f4f6;
}

.sl-sub-card-name--child {
    font-size: .875rem;
    font-weight: 400;
    color: #6b7280;
    padding-left: 1rem;
}

.dark .sl-sub-card-name--child {
    color: #9ca3af;
}

.sl-sub-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .875rem;
    font-size: .8125rem;
    color: #6b7280;
}

.dark .sl-sub-card-row {
    color: #9ca3af;
}

.sl-sub-card-value {
    color: #111827;
    font-weight: 500;
}

.dark .sl-sub-card-value {
    color: #f3f4f6;
}

.sl-sub-card-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: .25rem;
    border-top: 1px solid #f3f4f6;
    margin-top: .125rem;
}

.dark .sl-sub-card-actions {
    border-top-color: #374151;
}

/* ============================================================
   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: #0e7490;
    margin: 0;
}

.dark .bp-total {
    color: #22d3ee;
}

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

/* ---------- 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: #22d3ee;
        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: #0891b2;
}

.dark .bp-product-card-price {
    color: #22d3ee;
}

.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: #0e7490 !important;
        color: #ffffff !important;
    }

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

.dark .rz-dialog .rz-button.rz-primary {
    background-color: #0e7490 !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: .75rem;
    border: 1px solid rgba(8, 145, 178, .3);
    background: rgba(8, 145, 178, .06);
    padding: 1.125rem 1.375rem;
    margin-bottom: 1.5rem;
}

.dark .pi-box {
    border-color: rgba(34, 211, 238, .2);
    background: rgba(34, 211, 238, .05);
}

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

.dark .pi-title {
    color: #22d3ee;
}

.pi-title-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: #0891b2;
}

.dark .pi-title-icon {
    color: #22d3ee;
}

.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: #0e7490;
    color: #ffffff;
    font-size: .6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .05rem;
}

.dark .pi-step-num {
    background: #0891b2;
}

.pi-step-body {
    font-size: .875rem;
    color: #374151;
    line-height: 1.5;
}

.dark .pi-step-body {
    color: #d1d5db;
}

.pi-step-body strong {
    color: #111827;
    font-weight: 600;
}

.dark .pi-step-body strong {
    color: #f3f4f6;
}

.pi-step-link {
    font-weight: 600;
    color: #0891b2;
    text-decoration: none;
    transition: color .15s;
}

    .pi-step-link:hover {
        color: #0e7490;
        text-decoration: underline;
    }

.dark .pi-step-link {
    color: #22d3ee;
}

    .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: #0e7490;
    color: #fff;
}

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