/* Bestehendes anpassen oder ersetzen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Neue Flexbox-Struktur */
body {
    display: flex;
    flex-direction: column;
}

/* Main-Bereich wächst mit */
main {
    flex: 1 0 auto;
}

/* Footer bleibt am Ende */
footer {
    flex-shrink: 0;
}

/* Bestehende Styles beibehalten */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-link:focus,
.btn-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


.form-label.fw-semibold {
    font-size: 0.85rem;
    letter-spacing: normal; /* oder max. 0.01em */
    line-height: 1.4;
}

.form-label.placeholder {
    font-size: 0.35rem; /* z.B. etwas kleiner als normal */
    color: #0d6efd; /* optional: helleres Grau */
}
.card-footer button, .card-footer a {
    min-width: 140px;
}
/* Verhindert Umbruch bei Buttons */
.toolbar-btn {
    white-space: nowrap;
}

    /* Optional: Buttons minimal größer wirken lassen */
    .toolbar-btn i {
        vertical-align: middle;
    }



/* ????????????????????????? User-Tabelle ????????????????????????? */
.user-table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .user-table th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
    }

    .user-table td {
        background-color: #ffffff;
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
        vertical-align: middle;
    }

        .user-table td:first-child,
        .user-table th:first-child {
            border-left: 1px solid #dee2e6;
            border-top-left-radius: 0.375rem;
            border-bottom-left-radius: 0.375rem;
        }

        .user-table td:last-child,
        .user-table th:last-child {
            border-right: 1px solid #dee2e6;
            border-top-right-radius: 0.375rem;
            border-bottom-right-radius: 0.375rem;
        }

    .user-table i {
        font-size: 1.1rem;
    }

    .user-table .btn {
        transition: all 0.2s ease;
    }

        .user-table .btn:hover {
            background-color: #e9ecef;
            transform: scale(1.05);
        }

/* ????????????????????????? Tabs (Projektverwaltung) ????????????? */
.nav-pills .nav-link {
    border-radius: .65rem;
    transition: background-color .15s ease, box-shadow .15s ease;
    color: var(--bs-gray-700);
}

    .nav-pills .nav-link:hover {
        background-color: var(--bs-gray-200);
    }

    .nav-pills .nav-link.active {
        background-color: var(--bs-primary);
        color: #fff;
        box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .16);
    }

.nav-pills .badge {
    font-size: .75rem;
    padding: .35em .55em;
}

@media (prefers-color-scheme: dark) {
    .nav-pills .nav-link {
        color: var(--bs-gray-200);
    }

        .nav-pills .nav-link:hover {
            background-color: var(--bs-gray-800);
        }

        .nav-pills .nav-link.active {
            background-color: var(--bs-teal);
        }
}

/* MFA Digit Style */
.mfa-digit {
    width: 46px;
    height: 56px;
    font-size: 2rem;
    border-radius: 1.1rem;
    border: 1.5px solid #adb5bd;
    margin: 0 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    background: #f8fafc;
    caret-color: #0d6efd;
}

    .mfa-digit:focus {
        border-color: #0d6efd;
        outline: none;
        box-shadow: 0 0 0 3px rgba(13,110,253,.11);
        background: #fff;
    }

.mfa-verify-icon {
    font-size: 2.9rem;
    color: #0d6efd;
    margin-bottom: 12px;
    animation: mfa-popIn .5s cubic-bezier(.3,1.75,.7,.99);
}

@keyframes mfa-popIn {
    0% {
        opacity: 0;
        transform: scale(.5) rotate(-10deg);
    }

    80% {
        opacity: 1;
        transform: scale(1.09);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.mfa-tip {
    font-size: .95rem;
    color: #8a939c;
    margin-top: -8px;
    margin-bottom: 20px;
}

.profile-card {
    border-radius: 1.5rem;
    box-shadow: 0 6px 32px 0 rgba(90,120,180,0.12), 0 1.5px 8px 0 rgba(0,0,0,.03);
    border: 0;
    background: linear-gradient(96deg,#fff 85%,#f3f7ff 100%);
    margin-bottom: 2rem;
}

.profile-header {
    border-radius: 1.5rem 1.5rem 0 0;
    background: linear-gradient(91deg,#3b82f6 60%,#06b6d4 100%);
    color: #fff;
    padding: 1.3rem 1.6rem;
}

    .profile-header h5 {
        letter-spacing: 0.04em;
        font-weight: 600;
    }

.profile-avatar {
    background: linear-gradient(121deg,#bae6fd 30%,#6366f1 100%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0957c6;
    margin-right: 1rem;
    box-shadow: 0 0 0 2.5px #fff,0 2px 8px rgba(0,0,0,.03);
}

.profile-info dt {
    color: #6b7280;
    font-weight: 500;
}

.profile-info dd {
    color: #1e293b;
    font-weight: 400;
}

.mfa-block {
    background: #f4f7fb;
    border-radius: 1.1rem;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 14px 0 rgba(40,70,110,0.06);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.13rem;
    font-weight: 500;
}

.mfa-status {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
    margin-left: auto;
}

.mfa-badge {
    padding: 0.36em 1.1em;
    border-radius: 1em;
    font-size: 0.97rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.mfa-btn {
    border-radius: 1.5em;
    font-weight: 500;
    padding: 0.37em 1.35em;
    font-size: 1.03rem;
    transition: background .16s, box-shadow .16s;
    margin-left: .4em;
    box-shadow: 0 2px 7px rgba(80,130,180,0.07);
}

    .mfa-btn:active {
        filter: brightness(.94);
    }

.mfa-btn-success {
    background: linear-gradient(91deg,#22d3ee 30%,#16a34a 100%);
    color: #fff;
    border: none;
}

.mfa-btn-danger {
    background: linear-gradient(95deg,#e57373 50%,#b91c1c 100%);
    color: #fff;
    border: none;
}

.mfa-btn-secondary {
    background: #e5e7eb;
    color: #273047;
    border: none;
}

.modal-content {
    border-radius: 1.2rem;
}

.modal-header {
    border-bottom: 0;
}

.modal-footer {
    border-top: 0;
}

/*Profile Edit*/
.profile-card {
    border-radius: 1.5rem;
    box-shadow: 0 6px 32px 0 rgba(90,120,180,0.12), 0 1.5px 8px 0 rgba(0,0,0,.03);
    border: 0;
    background: linear-gradient(96deg,#fff 85%,#f3f7ff 100%);
    margin-bottom: 2rem;
}

.profile-header {
    border-radius: 1.5rem 1.5rem 0 0;
    background: linear-gradient(91deg,#3b82f6 60%,#06b6d4 100%);
    color: #fff;
    padding: 1.3rem 1.6rem;
}

    .profile-header h4 {
        letter-spacing: 0.04em;
        font-weight: 600;
    }

.profile-input {
    border-radius: 1em;
    border: 1.2px solid #d2d6dc;
    font-size: 1.1rem;
    background: #f8fafc;
    transition: border-color .19s, box-shadow .18s;
}

    .profile-input:focus {
        border-color: #0d6efd;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(13,110,253,.09);
    }

.mfa-btn {
    border-radius: 1.5em;
    font-weight: 500;
    padding: 0.37em 1.35em;
    font-size: 1.07rem;
    transition: background .16s, box-shadow .16s;
    margin-left: .4em;
    box-shadow: 0 2px 7px rgba(80,130,180,0.07);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.mfa-btn-success {
    background: linear-gradient(91deg,#22d3ee 30%,#16a34a 100%);
    color: #fff;
    border: none;
}

.mfa-btn-secondary {
    background: #e5e7eb;
    color: #273047;
    border: none;
}

/*MfaSetup*/
.mfa-setup-card {
    border-radius: 1.4rem;
    background: linear-gradient(95deg,#fff 90%,#f4faff 100%);
}

.mfa-verify-icon {
    font-size: 2.5rem;
    color: #0d6efd;
    margin-bottom: 10px;
    animation: mfa-popIn .5s cubic-bezier(.3,1.75,.7,.99);
    display: inline-block;
}

@keyframes mfa-popIn {
    0% {
        opacity: 0;
        transform: scale(.5) rotate(-10deg);
    }

    80% {
        opacity: 1;
        transform: scale(1.09);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.mfa-tip {
    font-size: .98rem;
    color: #7c8496;
    margin-top: -8px;
    margin-bottom: 18px;
}

.mfa-btn {
    border-radius: 1.5em;
    font-weight: 500;
    padding: 0.37em 1.35em;
    font-size: 1.07rem;
    transition: background .16s, box-shadow .16s;
    box-shadow: 0 2px 7px rgba(80,130,180,0.07);
    display: flex;
    align-items: center;
    gap: 0.5em;
    border: none;
}

.mfa-btn-success {
    background: linear-gradient(91deg,#22d3ee 30%,#16a34a 100%);
    color: #fff;
}

.mfa-code-input {
    font-size: 1.6rem;
    letter-spacing: 0.38em;
    border-radius: 0.9em;
    border: 1.3px solid #b2cbf7;
    background: #f5faff;
    font-weight: 600;
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

    .mfa-code-input:focus {
        background: #fff;
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13,110,253,.11);
    }

.mfa-copy-btn {
    border-radius: 50%;
    padding: .41em .61em;
    font-size: 1.15em;
    background: #f3f7fd;
    border: 1px solid #bdd7fa;
    color: #1170e5;
    transition: background .14s, color .14s, border .16s;
}

    .mfa-copy-btn:hover {
        background: #e0ecfb;
        color: #1e40af;
        border-color: #60a5fa;
    }

.mfa-close-link {
    font-size: 1.2rem;
    color: #bbb;
    background: #fff;
    border-radius: 1.6rem;
    padding: 0.2em 0.62em;
    box-shadow: 0 1px 5px rgba(13,110,253,0.05);
    transition: color .15s, background .16s;
    z-index: 11;
}

    .mfa-close-link:hover {
        color: #e11d48;
        background: #f3f7fd;
        text-decoration: none;
    }

  /*Benutzer Details*/
.profile-card-modern {
    background: linear-gradient(117deg, #2563eb 50%, #1ea9ea 100%);
    color: #fff;
    border-radius: 1.4rem;
    box-shadow: 0 8px 40px 0 rgba(34,78,130,0.10), 0 1.5px 8px 0 rgba(0,0,0,.03);
    overflow: hidden;
    transition: transform .23s;
    position: relative;
}

    .profile-card-modern:hover {
        transform: translateY(-6px) scale(1.012);
    }

.profile-avatar-modern {
    background: linear-gradient(121deg,#fff 40%,#a5d8ff 100%);
    color: #2563eb;
    width: 92px;
    height: 92px;
    font-size: 2.5rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.6rem rgba(36,57,145,0.10);
}

.profile-back-btn {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background: #fff;
    color: #2563eb;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(56,90,146,0.12);
    width: 2.6em;
    height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 5;
    transition: background .16s, color .16s, box-shadow .16s;
    text-decoration: none;
    border: none;
}

    .profile-back-btn:hover {
        background: #eff6ff;
        color: #1ea9ea;
        text-decoration: none;
        box-shadow: 0 3px 14px rgba(40,150,210,0.13);
    }

.info-card-modern {
    border-radius: 1.1rem;
    box-shadow: 0 2px 18px 0 rgba(56,90,146,0.06);
    background: #fff;
}

    .info-card-modern .card-header {
        border-radius: 1.1rem 1.1rem 0 0;
        border-bottom: 2.5px solid #e6eaf5;
        background: #fff;
        font-weight: 600;
        letter-spacing: .03em;
    }

.info-item-modern {
    padding: 1.25rem 1.7rem;
    border-bottom: 1px solid #f2f4fa;
    transition: background-color .19s;
    background: transparent;
}

    .info-item-modern:last-child {
        border-bottom: none;
    }

    .info-item-modern:hover {
        background: #f8fafc;
    }

/* Status-Boxen */
.status-box {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-width: 170px;
    font-size: 1.07rem;
    font-weight: 600;
    padding: .62em 1.45em;
    border-radius: 1.7em;
    box-shadow: 0 2px 8px rgba(120,120,180,0.07);
    margin-top: 1.1em;
    margin-bottom: 0;
}

.bg-success {
    background: linear-gradient(92deg,#34d399 80%,#10b981 100%);
    color: #fff !important;
}

.bg-danger {
    background: linear-gradient(95deg,#f87171 50%,#b91c1c 100%);
    color: #fff !important;
}

.bg-warning {
    background: linear-gradient(91deg,#fde68a 65%,#fbbf24 100%);
    color: #614a1e !important;
}

.bg-secondary {
    background: #e5e7eb;
    color: #404756 !important;
}


.detail-label-modern {
    font-size: 0.93em;
    color: #7684a4;
    font-weight: 600;
    margin-bottom: .17em;
}

.detail-value-modern {
    font-size: 0.95rem; /* etwas kleiner */
    font-weight: 400; /* normal statt halb-fett */
    color: #344054; /* dunkles Grau, nicht tiefes Blau */
    background: #f9fafb; /* dezentes Hellgrau */
    padding: 0.35rem 0.75rem; /* schlanker */
    border-radius: 0.5rem; /* kompaktere Ecken */
    margin-bottom: 0.35rem;
    word-break: break-word;
}


.ausgabe-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
    font-weight: 600;
    border-radius: 1em;
    padding: 0.43em 1.4em;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(110,110,170,0.06);
    margin-top: 0.08em;
}

.bg-success {
    background: linear-gradient(92deg,#34d399 80%,#10b981 100%);
    color: #fff !important;
}

.bg-danger {
    background: linear-gradient(95deg,#f87171 50%,#b91c1c 100%);
    color: #fff !important;
}

/*Projekte*/
.projekt-card-modern {
    border-radius: 1.3rem;
    box-shadow: 0 8px 38px 0 rgba(34,78,130,0.11), 0 2px 10px 0 rgba(0,0,0,.04);
    background: #fff;
    overflow: hidden;
}

.projekt-status-badge-modern {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
    font-weight: 600;
    border-radius: 1.1em;
    padding: 0.47em 1.2em;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(110,110,170,0.06);
    margin-top: 0.08em;
}

.detail-label-modern {
    font-size: 0.93em;
    color: #7684a4;
    font-weight: 600;
    margin-bottom: .17em;
}

.detail-value-modern {
    font-size: 0.95rem; /* etwas kleiner */
    font-weight: 400; /* normal statt halb-fett */
    color: #344054; /* dunkles Grau, nicht tiefes Blau */
    background: #f9fafb; /* dezentes Hellgrau */
    padding: 0.35rem 0.75rem; /* schlanker */
    border-radius: 0.5rem; /* kompaktere Ecken */
    margin-bottom: 0.35rem;
    word-break: break-word;
}


.bg-success {
    background: linear-gradient(92deg,#34d399 80%,#10b981 100%);
    color: #fff !important;
}

.bg-secondary {
    background: linear-gradient(95deg,#aeb7ca 10%,#7684a4 90%);
    color: #fff !important;
}

.user-card-modern {
    border-radius: 1.3rem;
    box-shadow: 0 8px 38px 0 rgba(34,78,130,0.11), 0 2px 10px 0 rgba(0,0,0,.04);
    background: #fff;
    overflow: hidden;
}
.projektliste-card-modern {
    border-radius: 1.3rem;
    box-shadow: 0 8px 38px 0 rgba(34,78,130,0.11), 0 2px 10px 0 rgba(0,0,0,.04);
    background: #fff;
    overflow: hidden;
}

    .projektliste-card-modern .card-header {
        border-radius: 1.3rem 1.3rem 0 0;
        background: linear-gradient(90deg, #2563eb 70%, #1ea9ea 100%);
        color: #fff;
        font-size: 1.5rem;
        font-weight: 700;
        padding: 1.1rem 1.5rem;
        letter-spacing: .04em;
        min-height: 68px;
        display: flex;
        align-items: center;
    }

    .projektliste-card-modern .table th,
    .projektliste-card-modern .table td {
        vertical-align: middle;
        border: none;
    }


.modal-content {
    border-radius: 1.2rem !important;
}

.modal-header {
    border-top-left-radius: 1.2rem !important;
    border-top-right-radius: 1.2rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.modal-footer {
    border-bottom-left-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/*Login*/
/* --- LOGIN --- */

/* Overlay */
#loadingOverlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,.75);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
}

/* Hintergrund (Bild ist schon gesetzt) */
.auth-page {
    position: relative;
    min-height: 100vh;
}

    .auth-page::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: rgba(0,0,0,.38); /* Abdunklung */
    }

/* GLASMORPHIC PANEL */
.auth-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-right: 7vw;
    padding: clamp(22px,2.6vw,36px);
    border-radius: 22px;
    /* Glas */
    background: linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255,255,255,.35);
    /* Tiefe */
    box-shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.15);
}

/* Header */
.auth-header h3 {
    font-weight: 800;
    letter-spacing: .01em;
}

/* Inputs im Glas */
.auth-panel .form-control {
    border-radius: 14px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    min-height: 14px; /* Höhe festlegen */
    font-size: 1.05rem; /* Schrift leicht größer */
    padding: 0.75rem 1rem; /* mehr Innenabstand */
}

    .auth-panel .form-control:focus {
        background: #fff;
        border-color: #258cfb;
        box-shadow: 0 0 0 4px rgba(37,140,251,.18);
    }

/* Button modern */
.auth-panel .btn-primary {
    border: none;
    border-radius: 14px;
    font-weight: 600;
    background: linear-gradient(90deg,#2563eb,#1ea9ea);
    box-shadow: 0 12px 26px rgba(30,169,234,.28);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

    .auth-panel .btn-primary:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    .auth-panel .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 8px 18px rgba(30,169,234,.22);
    }

/* Mobile: mittig */
@media (max-width: 576px) {
    .auth-panel {
        margin-right: 0;
        max-width: 92vw;
    }
}
/* Bessere Lesbarkeit über dem Bild */
.auth-page {
    position: relative;
}

    .auth-page::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: rgba(0,0,0,.35);
    }

/* Glas noch cleaner */
.auth-panel {
    background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
    backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

/* Glas-/Blur-Navbar mit Bild */
.glass-nav {
    position: relative;
    min-height: 68px;
    background: transparent !important; /* bg-primary killen */
    z-index: 10;
}

    .glass-nav::before {
        content: "";
        position: absolute;
        inset: -10px; /* leicht größer gegen Blur-Rand */
        background-image: var(--hero-bg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(12px) saturate(115%);
        transform: scale(1.06); /* Randfix */
        z-index: -2;
    }

    .glass-nav::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
        border-bottom: 1px solid rgba(255,255,255,.35);
        z-index: -1; /* Glas-Overlay */
    }
    /* Lesbarkeit */
    .glass-nav .navbar-brand,
    .glass-nav .nav-link,
    .glass-nav .navbar-toggler {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
    }

    /* Dropdowns auch glasig */
    .glass-nav .dropdown-menu {
        background: rgba(15,23,42,.60);
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        border: 1px solid rgba(255,255,255,.15);
    }

    .glass-nav .dropdown-item {
        color: #eaf2ff;
    }

        .glass-nav .dropdown-item:hover {
            background: rgba(255,255,255,.10);
            color: #fff;
        }
    /* User-Button in der Glas-Navbar immer weiß */
    .glass-nav .user-toggle,
    .glass-nav .user-toggle:visited {
        color: #fff !important;
    }

        /* Icon + Caret weiß */
        .glass-nav .user-toggle .bi {
            color: #fff !important;
        }

        .glass-nav .user-toggle::after {
            border-top-color: #fff !important;
        }
    /* Blur-Overlays dürfen keine Klicks blocken */
    .glass-nav::before,
    .glass-nav::after {
        pointer-events: none;
    }

    /* Sicherheit: Link + Caret weiß */
    .glass-nav .user-toggle,
    .glass-nav .user-toggle:visited {
        color: #fff !important;
    }

        .glass-nav .user-toggle .bi {
            color: #fff !important;
        }

        .glass-nav .user-toggle::after {
            border-top-color: #fff !important;
        }

/* ===== Dashboard Look & Feel ===== */
.dash-hero {
    background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(32,201,151,.10));
    border: 1px solid rgba(108,117,125,.15);
}

    .dash-hero .avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 700;
        background: rgba(255,255,255,.65);
        color: #0d6efd;
    }

.card-soft {
    border: 1px solid rgba(108,117,125,.12);
    background: var(--bs-body-bg);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    cursor: default; /* <- kein Hand-Cursor auf ganzer Karte */
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: rgba(13,110,253,.35);
}

.kpi-value {
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 700;
}

.kpi-label {
    font-size: .9rem;
    color: var(--bs-secondary-color);
}

.kpi-progress {
    height: .4rem;
}

/* Buttons auf Karten behalten Hand-Cursor */
.card-soft .btn {
    cursor: pointer;
}


/* dezente, moderne Akzente */
.sticky-head {
    position: sticky;
    top: 0;
    z-index: 1;
}

tbody tr[data-status] {
    --bar: transparent;
}

tbody tr[data-status="future"] {
    --bar: #ffe08a;
}
/* warmes Gelb */
tbody tr[data-status="expired"] {
    --bar: #f4a7a7;
}
/* softes Rot */
tbody tr[data-status="running"] {
    --bar: #bde0fe;
}
/* ruhiges Blau */
tbody tr[data-status="closed"] {
    --bar: #e2e3e5;
}
/* neutral */
tbody tr[data-status] {
    box-shadow: inset 4px 0 0 var(--bar);
}

.empty-row i {
    opacity: .6;
}

.project-name mark {
    padding: .1rem .25rem;
    border-radius: .25rem;
}

/* Subtle glassy card look */
.fc-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(140%) blur(6px);
    border: 1px solid rgba(0,0,0,.05);
}

.fc-shadow {
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

.fc-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.fc-toolbar {
    gap: .75rem;
}

.fc-ghost-input:focus {
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.2);
}

.fc-empty {
    border: 2px dashed rgba(0,0,0,.08);
    border-radius: 1rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.badge-soft {
    background: rgba(13,110,253,.1);
    color: #0d6efd;
}

.badge-soft-danger {
    background: rgba(220,53,69,.1);
    color: #dc3545;
}

.badge-soft-success {
    background: rgba(25,135,84,.12);
    color: #198754;
}
.card-header-rounded {
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
}
.btn-glass {
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0.9rem;
    padding: 0.7rem 3rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    border: 1px solid currentColor;
    color: inherit;
}

    /* Hover: leicht gefärbt, NICHT vollflächig */
    .btn-glass:hover {
        background-color: rgba(0, 123, 255, 0.1); /* transparente Primärfarbe (z.B. Bootstrap Primary) */
        transform: translateY(-1px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
        text-decoration: none;
        color: inherit;
    }

.modal-blur-backdrop {
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.2) !important;
}
.modal-blur::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(3px);
    background: rgba(255, 255, 255, 0.4);
    z-index: 1050;
}
body.modal-blur-backdrop::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(3px);
    z-index: 1050;
}
.modal-blur-backdrop > *:not(.modal) {
    filter: blur(3px);
    transition: filter 0.3s ease;
}

/* ===========================
   BENUTZERVERWALTUNG – SAUBERES, KONFLIKTFREIES UI
   Nur für diese Seite gedacht. Keine globalen Bootstrap-Overrides.
   Ersetzt die verstreuten Modal-/Table-/Blur-Fragmente.
   =========================== */

/* --- Basis: Flex-Layout für Footer am Ende (falls noch nicht vorhanden) --- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

/* --- Typo-Feinschliff --- */
.form-label.fw-semibold {
    letter-spacing: 1.01em;
}

/* --- Toolbar-Buttons brechen nicht um --- */
.toolbar-btn {
    white-space: nowrap;
}

    .toolbar-btn i {
        vertical-align: middle;
    }

/* =======================================================
   MODALS (Einladen / Delete / Resend) – ruhiger, modern
   ======================================================= */
.modal-content {
    border: 0 !important;
    border-radius: 1.1rem !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
    overflow: hidden;
}

.modal-header {
    border-bottom: 0;
    align-items: center;
}

.modal-footer {
    border-top: 0;
}

/* Buttons & Inputs: klarer Fokus */
.btn:focus,
.form-select:focus,
.form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(25,135,84,.25); /* Bootstrap success */
}

/* --- Einladen-Modal: Liste der Benutzer mit angenehmer Scrollbar --- */
#modalUserList {
    max-height: 260px;
    overflow-y: auto;
}

    #modalUserList .list-group-item {
        border: 0;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

        #modalUserList .list-group-item:last-child {
            border-bottom: 0;
        }

    #modalUserList::-webkit-scrollbar {
        width: 10px;
    }

    #modalUserList::-webkit-scrollbar-track {
        background: #f1f3f5;
        border-radius: 8px;
    }

    #modalUserList::-webkit-scrollbar-thumb {
        background: #c9ced6;
        border-radius: 8px;
    }

        #modalUserList::-webkit-scrollbar-thumb:hover {
            background: #b6bcc6;
        }

/* --- Blur-Effekt beim Senden / Anzeigen (wird vom Script gesetzt) --- */
body.modal-blur::before {
    content: '';
    position: fixed;
    inset: 0;
    backdrop-filter: blur(3px);
    background: rgba(255,255,255,.45);
    z-index: 1050;
}

#mainContent.blurred { /* verwendet vom Resend-Modal */
    filter: blur(2.5px);
    transition: filter .2s ease-in-out;
}

/* =======================================================
   TABELLE – weicher Kartenlook pro Zeile
   (Füge der Tabelle die Klasse "user-table" hinzu)
   ======================================================= */
.table.user-table {
    border-collapse: separate;
    border-spacing: 0 8px; /* Abstand zwischen Zeilenblöcken */
}

    .table.user-table thead th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #dee2e6 !important;
        white-space: nowrap;
    }

    .table.user-table tbody td {
        background-color: #ffffff;
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
        vertical-align: middle;
    }
        /* Runde Ecken links/rechts */
        .table.user-table tbody td:first-child,
        .table.user-table thead th:first-child {
            border-left: 1px solid #dee2e6;
            border-top-left-radius: .5rem;
            border-bottom-left-radius: .5rem;
        }

        .table.user-table tbody td:last-child,
        .table.user-table thead th:last-child {
            border-right: 1px solid #dee2e6;
            border-top-right-radius: .5rem;
            border-bottom-right-radius: .5rem;
        }
    /* Hover subtil */
    .table.user-table tbody tr:hover td {
        background-color: #f8f9fa;
    }
    /* Action-Buttons angenehm */
    .table.user-table .btn {
        transition: transform .15s ease, background-color .15s ease;
    }

        .table.user-table .btn:hover {
            background-color: #eef2f6;
            transform: translateY(-1px);
        }

    /* Badge-Typo leicht kräftiger, ohne Bootstrap global zu überschreiben */
    .table.user-table .badge {
        font-weight: 600;
        letter-spacing: .2px;
        border-radius: .75rem;
        padding: .45rem .6rem;
    }

/* =======================================================
   NAV-TABS Optik etwas ruhiger (optional)
   ======================================================= */
.nav-tabs .nav-link {
    border: 0;
}

    .nav-tabs .nav-link.active {
        border-bottom: 3px solid #198754; /* success */
        font-weight: 600;
    }

/* =======================================================
   TOOLTIP Feinheit
   ======================================================= */
.tooltip .tooltip-inner {
    font-weight: 500;
}

/* =====================
   AUSGABESTELLE – einheitlicher Card-Stil
   ===================== */

.ausgabestelle-card-modern {
    border-radius: 0.3rem;
    box-shadow: 0 8px 38px 0 rgba(34,78,130,0.11), 0 2px 10px 0 rgba(0,0,0,.04);
    background: #fff;
    overflow: hidden;
}

    /* Weißer Header – z. B. für "Create" ohne Balken */
    .ausgabestelle-card-modern .card-header:not(.bg-primary) {
        background: #fff;
        border-bottom: 2.5px solid #e6eaf5;
        padding-top: 2rem;
        padding-bottom: 1.1rem;
        font-weight: 600;
        letter-spacing: .03em;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    /* Blauer Header – z. B. für "Details" oder "Create" mit Balken */
    .ausgabestelle-card-modern .card-header.bg-primary {
        background: var(--bs-primary) !important;
        color: #fff !important;
        border: 0 !important;
        padding: 0 1rem !important;
        min-height: 68px !important;
        display: flex;
        align-items: center;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
    }

/* ============================
   Gewässer – einheitlicher Card-Stil
   ============================ */
.gewaesser-card-modern {
    border-radius: 1.3rem;
    box-shadow: 0 8px 38px 0 rgba(34,78,130,0.11), 0 2px 10px 0 rgba(0,0,0,.04);
    background: #fff;
    overflow: hidden;
}

    /* Header – blau identisch zu Ausgabestelle */
    .gewaesser-card-modern .card-header.bg-primary {
        background: var(--bs-primary) !important;
        color: #fff !important;
        border: 0 !important;
        padding: 0 1rem !important;
        min-height: 68px !important;
        display: flex;
        align-items: center;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
    }

/* Einheitlicher moderner Header für alle Cards */
.card-header-modern {
    background: var(--bs-primary) !important;
    color: #fff !important;
    border: 0 !important;
    min-height: 68px !important;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    padding: 0 1rem !important;
}


/* === LOGIN OPTIMIERUNGEN === */

/* Input-Groups mit Icons */
.auth-panel .input-group-text {
    border-radius: 14px 0 0 14px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
    min-height: 52px;
    padding: 0 1rem;
    font-size: 1.1rem;
}

.auth-panel .input-group .form-control {
    border-radius: 0 14px 14px 0;
    border-left: none;
    background: rgba(255,255,255,.7);
    transition: all .2s ease;
}

    .auth-panel .input-group .form-control:focus {
        border-color: #258cfb;
        box-shadow: 0 0 0 4px rgba(37,140,251,.18);
        background: #fff;
    }

/* Checkbox ("Remember Me") */
.auth-panel .form-check-input {
    border-radius: 0.35em;
    border: 1px solid rgba(255,255,255,.55);
    background-color: rgba(255,255,255,.65);
    transition: all .2s ease;
}

    .auth-panel .form-check-input:checked {
        background-color: #258cfb;
        border-color: #258cfb;
        box-shadow: 0 0 0 3px rgba(37,140,251,.2);
    }

/* Link "Passwort vergessen?" */
.auth-panel a {
    transition: color .2s ease;
}

    .auth-panel a:hover {
        color: #0a58ca;
        text-decoration: underline;
    }

/* Footer Hinweis */
.auth-panel .text-muted {
    font-size: .85rem;
    opacity: .85;
}

/* Overlay sanfter ein-/ausblenden */
#loadingOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

    #loadingOverlay.active {
        opacity: 1;
        visibility: visible;
    }


/* Animation für Panel (optional, falls animate.css nicht eingebunden ist) */
@keyframes slideUpFade {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.auth-panel {
    animation: slideUpFade .6s ease forwards;
}

.switch-tile {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    cursor: pointer;
}

    .switch-tile:hover {
        background: #ffffff;
        border-color: #0d6efd;
        box-shadow: 0 4px 12px rgba(13,110,253,0.15);
        transform: translateY(-2px);
    }

    .switch-tile input[type="checkbox"] {
        cursor: pointer;
    }

    .switch-tile label {
        margin: 0;
        cursor: pointer;
    }

/* 🔹 Avatar Kreis im Header */
.profile-avatar-modern {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: #ffffff;
    color: #0d6efd; /* Bootstrap primary */
}

/* 🔹 Info-Boxen (z. B. Status) */
.status-box {
    padding: 0.6rem 1.2rem;
    border-radius: 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 🔹 Karten mit modernem Look */
.card {
    border-radius: 1rem !important;
}

.card-header {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    font-weight: 600;
}

.card-footer {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* 🔹 Light-Background für Felder wie Adresse oder Bemerkungen */
.info-item-modern .p-2,
.info-item-modern .p-3 {
    background-color: #f8f9fa !important;
    border-radius: 0.5rem;
}

/* 🔹 Badges im Header etwas eleganter */
.badge.fs-4 {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    border-radius: 0.6rem;
}

/* 🔹 Hover Effekt für List Items */
.list-group-item {
    transition: background-color 0.2s ease-in-out;
}

    .list-group-item:hover {
        background-color: #f8f9fa;
    }

/* ============================
   Login Style
   ============================ */

/* Inputs global größer machen */
.login-formcontrol {
    font-size: 1.2rem !important;
    padding: 0.8rem 1rem !important;
    border-radius: 14px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    height: 60px;
    width: 350px;
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
}

    .login-formcontrol:focus {
        outline: none;
        box-shadow: none;
    }

    .form-control::placeholder {
        font-size: 1.2rem !important;
    }

/* Login-Button */
.btn-login {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.9rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    }

    .btn-login:active {
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    }
.login-FrameText {
    font-size: 2.0rem;
    color: gray;
}
.login-footer {
    font-size: 0.8rem;
    color: gray;
}

/* ============================
   Projekt Style
   ============================ */
.project-link {
    text-decoration: none; /* Unterstreichung weg */
    color: inherit; /* gleiche Farbe wie Text */
    font-weight: 500; /* leicht betonen */
}

    .project-link:hover {
        color: #0d6efd; /* Bootstrap-Blau oder was eigenes */
        text-decoration: underline;
    }

.status-icon {
    display: inline-block;
    width: 1.2em; /* fixer Platz für alle Icons */
    text-align: center;
    margin-right: 0.4rem;
}
.search-glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

    .search-glass:focus {
        background: rgba(255, 255, 255, 0.8);
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13,110,253,.2);
    }

#clearSearch {
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}

#projektSearch:not(:placeholder-shown) ~ #clearSearch {
    visibility: visible;
    opacity: 0.7;
}

#clearSearch:hover {
    opacity: 1;
}

.search-glass-container {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .search-glass-container.show {
        opacity: 1;
        transform: translateY(0);
    }
th.sortable::after {
    content: "⇅";
    font-size: 0.8em;
    margin-left: 5px;
    color: #bbb;
}

th.sortable.asc::after {
    content: "↑";
    color: #000;
}

th.sortable.desc::after {
    content: "↓";
    color: #000;
}


/* ============================
   Badges Style
   ============================ */
.badge[role="button"] {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .badge[role="button"]:hover {
        background-color: #f0f0f0; /* etwas dunkler bei hover */
        transform: scale(1.05); /* leichter Zoom-Effekt */
    }

/* ============================
   Gewässer Style
   ============================ */
th.sortable {
    cursor: pointer;
    position: relative;
}

    th.sortable.asc::after {
        content: "▲";
        position: absolute;
        right: 8px;
        font-size: 0.7rem;
    }

    th.sortable:not(.asc)::after {
        content: "▼";
        position: absolute;
        right: 8px;
        font-size: 0.7rem;
    }

/* ============================
   Ausgabestelle Style
   ============================ */
.link-hover-primary {
    transition: color 0.2s ease-in-out;
}

    .link-hover-primary:hover {
        color: #0d6efd; /* Bootstrap Primary Blau */
    }

.ausgabe-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* minimaler Abstand zwischen Icon und Text */
    font-size: 0.85rem; /* Schrift etwas kleiner */
    padding: 0.35em 0.6em; /* kompakter als default */
    border-radius: 0.5rem;
    color: #fff;
}

/* Standard-Formulare – kleiner & leichter */
form .form-control {
    font-size: 0.95rem; /* etwas kleiner */
    font-weight: 400; /* NICHT fett */
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    box-shadow: none; /* kein starker Shadow */
    height: auto; /* Standardhöhe zurück */
}

/* ============================
   Gastkarten Style
   ============================ */
.hero {
    background-image: url("/images/login/fische.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 300px;
    position: relative;
    text-align: center;
    color: white;
}

.transition-fade {
    transition: opacity 0.3s ease;
}

.fade-out {
    opacity: 0.4;
}

.bg-light-subtle {
    background-color: #f8f9fa !important;
}

.text-secondary-emphasis {
    color: #495057 !important;
}

.border-light-subtle {
    border-color: #e9ecef !important;
}

/* ============================================================
   🎟️  TICKETS - BUCHEN STYLES
   Bereich: Views/Tickets/Buchen/Index.cshtml
   Beschreibung:
   Visuelles Layout und Animationen für die Benutzer-Suche und Auswahl.
   ============================================================ */

/* 🌀 Suchergebnisliste - Hovereffekte und Übergänge */
.search-results .list-group-item {
    padding: 0.9rem 1.25rem;
    transition: all 0.2s ease-in-out;
}

    .search-results .list-group-item:hover {
        background-color: #f1f5ff;
        transform: translateX(4px);
    }

/* 🔄 Spinner-Animation – dreht sich konstant */
.search-spinner .spinner-border {
    animation: spin 0.9s linear infinite;
}

/* Fortschrittsanzeige im Buchungsprozess */
.progress {
    background-color: #e9ecef;
    border-radius: 1rem;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.4s ease-in-out;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 👤 Benutzerkarte – optische Aufwertung */
#selectedUserCard {
    border-radius: 1rem;
    animation-duration: 0.6s;
}

/* 💡 Suchhinweis unter dem Eingabefeld */
#searchHint {
    opacity: 0.8;
    font-style: italic;
}

/* ✨ Animation beim Einblenden des Suchergebnisses */
#resultsContainer {
    transition: opacity 0.25s ease-in-out, transform 0.2s ease-in-out;
}

    #resultsContainer.show {
        opacity: 1;
        transform: translateY(0);
    }

    #resultsContainer.d-none {
        opacity: 0;
        transform: translateY(-5px);
    }
/* ============================================================
   🎨 VISUELLE SUCH-ANIMATION (TICKETS/BUCHEN)
   Zweck:
   - Zeigt visuell, dass im Suchfeld gerade eine Anfrage läuft.
   - Wird per JS hinzugefügt/entfernt: .is-searching
   ============================================================ */

/* 💡 Basiseffekt: Rahmen + Leuchten */
#userSearchInput.is-searching {
    border-color: #0d6efd !important; /* Bootstrap Primary */
    box-shadow: 0 0 0.5rem rgba(13, 110, 253, 0.4);
    animation: pulseBorder 1.2s ease-in-out infinite;
}

#userSearchInput:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0.4rem rgba(13, 110, 253, 0.25);
}


/* 🔁 Sanfte Puls-Animation */
@keyframes pulseBorder {
    0% {
        box-shadow: 0 0 0.3rem rgba(13, 110, 253, 0.3);
    }

    50% {
        box-shadow: 0 0 1rem rgba(13, 110, 253, 0.6);
    }

    100% {
        box-shadow: 0 0 0.3rem rgba(13, 110, 253, 0.3);
    }
}

/* ============================================================
   🧍 AUSGEWÄHLTER BENUTZER - INFOCARD
   Bereich: Views/Tickets/Buchen/Index.cshtml
   Beschreibung:
   Modernes, sauberes Design mit Slide-in-Animation.
   ============================================================ */

/* 🪶 Card Container */
.user-card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    animation-duration: 0.6s;
    transition: all 0.3s ease-in-out;
}

/* 🎨 Header: Farbe, Layout, Icon */
.user-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 📦 Body: Struktur, Abstand */
.user-card-body {
    border: 1px solid #e5e7eb;
    border-top: none;
}

/* ✨ Name & Email */
.user-card-header .fw-bold {
    font-size: 1.25rem;
}

.user-card-header small {
    font-size: 0.9rem;
}

/* 🔘 Close-Button leicht transparent */
.user-card-header .btn-close {
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

    .user-card-header .btn-close:hover {
        opacity: 1;
    }

/* 🩵 Info Labels */
.user-card-body small {
    font-size: 0.8rem;
    color: #6c757d;
}

/* 🧭 Transition beim Erscheinen */
.user-card.animate__animated.animate__fadeInRight {
    animation-duration: 0.5s;
}
/* ============================================================
   🎣 FISHCON DESK – Erlaubnisscheine buchen
   ============================================================ */


/* ============================================================
   🔍 BENUTZERSUCHE (Views/Tickets/Buchen)
   Professionelles Suchfeld + animierter Spinner + Ergebnisboxen
   ============================================================ */

/* --- Suchfeld während der Eingabe aktiv --- */
.is-searching {
    background-color: #f9fafb;
    border-color: #0d6efd;
    transition: all 0.2s ease-in-out;
}

/* --- Spinner-Positionierung und Rotation --- */
#searchSpinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   📦 ERGEBNISBOX UNTER DEM SUCHFELD
   (ersetzt das alte Bootstrap-ListGroup-Layout)
   ============================================================ */

.search-results-box {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 350px;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
}

/* --- Einzelne Benutzerkarte im Ergebnisbereich --- */
.user-result-card {
    background: #f8f9fa;
    border: 1px solid #e2e6ea;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease-in-out;
}

    /* --- Hover-Effekt: sanftes „Anheben“ --- */
    .user-result-card:hover {
        background: #e9f2ff;
        cursor: pointer;
        transform: translateY(-2px);
    }

    /* --- Aktive Auswahl: markierte Benutzerkarte --- */
    .user-result-card.active {
        background: #0d6efd;
        color: white;
        border-color: #0d6efd;
        transform: translateY(-2px);
    }

/* --- Animations-Effekt beim Einblenden --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* ============================================================
   💬 ZUSAMMENFASSUNG DES AUSGEWÄHLTEN BENUTZERS
   (Kleine Box über der Suche – optional)
   ============================================================ */

#selectedUserSummary {
    background: linear-gradient(90deg, var(--bs-primary), #0a58ca);
    color: #ffffff;
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
}

    #selectedUserSummary strong {
        font-size: 1.15rem;
    }

/* ============================================================
   🧍‍♂️ BENUTZER-INFOKARTE (rechte Spalte)
   ============================================================ */

.user-card {
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.user-card-header {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

    .user-card-header i {
        font-size: 2rem;
    }

.user-card-body {
    background: #ffffff;
}

    .user-card-body small {
        color: #6c757d;
    }

/* ============================================================
   🎫 FORTSCHRITTSBALKEN (Schritt 1 von 3)
   ============================================================ */

#bookingProgress .progress {
    height: 0.6rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

#bookingProgress .progress-bar {
    transition: width 0.4s ease-in-out;
}

/* ============================================================
   📅 KOMMENDE SCHRITTE (z. B. SelectTicket)
   ============================================================ */

.card-header {
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

/* --- Deaktivierte Felder ausgegraut darstellen --- */
#selectGewässer:disabled,
#dateFrom:disabled,
#dateTo:disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
}
.json-box {
    background: #111;
    color: #00ff9c;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    max-height: 250px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.diff-table td {
    font-size: 13px;
    vertical-align: middle;
}
/* ---------- REOPEN MODAL DESIGN ---------- */

.reopen-modal {
    border-radius: 18px;
    border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

    /* Header */

    .reopen-modal .modal-header {
        border: none;
        padding: 20px 22px 10px;
    }

.icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(25,135,84,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #198754;
    font-size: 18px;
}

.modal-title-text {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: normal;
}

.modal-subtitle {
    font-size: 13px;
    color: #6c757d;
}

/* Project Box */

.project-box {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 14px;
}

.project-label {
    font-size: 12px;
    color: #6c757d;
}

.project-name {
    font-weight: 600;
}

/* Labels + Inputs */

.clean-label {
    font-weight: 600;
    letter-spacing: normal !important;
    margin-bottom: 6px;
}

.clean-textarea {
    border-radius: 12px;
    padding: 10px 12px;
    resize: none;
}

/* Helper Row */

.helper-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6c757d;
    margin-top: 6px;
}

/* Footer */

.reopen-modal .modal-footer {
    border: none;
    padding: 12px 22px 20px;
}

.soft-btn {
    border-radius: 999px;
    padding: 6px 18px;
}

.primary-btn {
    padding: 6px 22px;
}
/* Gewaesser list */
.gewaesser-page .gewaesser-hero {
    background: linear-gradient(135deg, #f4f9ff 0%, #ecf5ff 55%, #e2f0ff 100%);
    border-radius: 1rem;
}

.gewaesser-page .gewaesser-kicker {
    color: #60758b;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gewaesser-table-card {
    border-radius: 1rem;
    overflow: hidden;
}

.gewaesser-count-badge {
    background: #eef4fb;
    color: #385575;
    border: 1px solid #d5e2f0;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .75rem;
}

.gewaesser-table thead th {
    background: #f8fbff;
    color: #2f4a66;
    font-weight: 600;
    white-space: nowrap;
    font-size: .88rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.gewaesser-table tbody tr:hover {
    background: #f5faff;
}

.gewaesser-table tbody td {
    border-color: #edf2f7;
}

.gewaesser-link {
    color: #1f3f66;
    text-decoration: none;
    font-weight: 600;
}

.gewaesser-link:hover {
    color: #0d6efd;
}

.gewaesser-table th.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.gewaesser-table th.sortable::after {
    content: "⇅";
    font-size: .75rem;
    color: #9caabc;
    margin-left: .35rem;
}

.gewaesser-table th.sortable.asc::after {
    content: "↑";
    color: #1d3555;
}

.gewaesser-table th.sortable.desc::after {
    content: "↓";
    color: #1d3555;
}

.gewaesser-status-text {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
}

.gewaesser-status-icon {
    font-size: 0.95rem;
}

.gewaesser-status-icon.is-locked {
    color: #c1121f;
}

.gewaesser-status-icon.is-active {
    color: #1f7a3e;
}

.gewaesser-status-icon.is-ticket {
    color: #0d6efd;
}

/* Gewaesser details */
.gewaesser-detail-page .detail-shell {
    border-radius: 1rem;
    overflow: hidden;
}

.gewaesser-detail-page .detail-hero {
    background: linear-gradient(135deg, #f6faff 0%, #ecf4ff 60%, #e2efff 100%);
    border-bottom: 1px solid #e4ebf3;
}

.gewaesser-detail-page .detail-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    border: 1px solid transparent;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
}

.gewaesser-detail-page .detail-status-chip.is-active {
    background: #e8f7ee;
    border-color: #c7e9d3;
    color: #1f6f45;
}

.gewaesser-detail-page .detail-status-chip.is-locked {
    background: #fceaea;
    border-color: #f4cccc;
    color: #922e2e;
}

.gewaesser-detail-page .detail-status-chip.is-ticket {
    background: #eaf3ff;
    border-color: #d0e2fb;
    color: #285f9e;
}

.gewaesser-detail-page .detail-status-chip.is-muted {
    background: #f3f5f8;
    border-color: #e2e8f0;
    color: #5a6878;
}

.gewaesser-detail-page .detail-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    color: #5f748a;
}

.gewaesser-detail-page .detail-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #4b6078;
    font-weight: 500;
}

.gewaesser-detail-page .detail-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

.gewaesser-detail-page .detail-label {
    font-size: .82rem;
    color: #6c7d91;
    margin-bottom: .3rem;
}

.gewaesser-detail-page .detail-value {
    background: #f8fbff;
    border: 1px solid #e3ebf5;
    border-radius: .65rem;
    padding: .6rem .75rem;
    color: #1f3146;
    min-height: 44px;
}

.gewaesser-detail-page .detail-info-box {
    background: #f8fbff;
    border: 1px solid #e3ebf5;
    border-radius: .65rem;
    min-height: 44px;
    padding: .6rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #1f3146;
    font-weight: 600;
}

.gewaesser-detail-page .detail-note {
    min-height: 120px;
    line-height: 1.55;
}

.gewaesser-detail-page .detail-map-card {
    border-radius: .9rem;
}

.gewaesser-detail-page .detail-map {
    height: 350px;
    border-radius: .8rem;
    border: 1px solid #d9e5f2;
}

.gewaesser-detail-page .detail-image-card {
    border-radius: .8rem;
}

.gewaesser-detail-page .detail-image-preview {
    object-fit: cover;
    height: 190px;
    cursor: zoom-in;
}

/* Gewaesser edit */
.gewaesser-edit-page .edit-shell {
    border-radius: 1rem;
    overflow: hidden;
}

.gewaesser-edit-page .edit-hero {
    background: linear-gradient(135deg, #f6fbff 0%, #edf6ff 58%, #e4f0ff 100%);
    border-bottom: 1px solid #e2eaf4;
}

.gewaesser-edit-page .edit-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    color: #60748b;
}

.gewaesser-edit-page .edit-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #4b6078;
    font-weight: 500;
}

.gewaesser-edit-page .edit-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

.gewaesser-edit-page .form-label {
    font-weight: 600;
    color: #344a61;
}

.gewaesser-edit-page .form-control,
.gewaesser-edit-page .form-select {
    border-color: #d8e2ee;
}

.gewaesser-edit-page .form-control:focus,
.gewaesser-edit-page .form-select:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .16);
}

.gewaesser-edit-page .edit-map {
    height: 350px;
    border-radius: .8rem;
    border: 1px solid #d9e5f2;
}

.gewaesser-edit-page .edit-image-card {
    border-radius: .8rem;
}

.gewaesser-edit-page .edit-image-preview {
    object-fit: cover;
    height: 190px;
    cursor: zoom-in;
}

/* Gewaesser create */
.gewaesser-create-page .create-shell {
    border-radius: 1rem;
    overflow: hidden;
}

.gewaesser-create-page .create-hero {
    background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 58%, #e5f1ff 100%);
    border-bottom: 1px solid #e2eaf4;
}

.gewaesser-create-page .create-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    color: #60748b;
}

.gewaesser-create-page .create-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #4b6078;
    font-weight: 500;
}

.gewaesser-create-page .create-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

.gewaesser-create-page .form-label {
    font-weight: 600;
    color: #344a61;
}

.gewaesser-create-page .form-control,
.gewaesser-create-page .form-select {
    border-color: #d8e2ee;
}

.gewaesser-create-page .form-control:focus,
.gewaesser-create-page .form-select:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .16);
}

.gewaesser-create-page .create-map {
    height: 350px;
    border-radius: .8rem;
    border: 1px solid #d9e5f2;
}

.gewaesser-detail-page .card-footer .btn,
.gewaesser-edit-page .edit-hero .btn,
.gewaesser-create-page .create-hero .btn {
    min-height: 40px;
    font-size: 0.86rem;
    border-radius: 0.65rem;
    padding: 0.35rem 0.85rem;
}

.gewaesser-edit-page .edit-hero .btn,
.gewaesser-create-page .create-hero .btn {
    min-width: 140px;
}

/* Ausgabestelle modern UI */
.ausgabestelle-page .ausgabe-hero {
    background: linear-gradient(135deg, #f4f9ff 0%, #ecf5ff 55%, #e2f0ff 100%);
    border-radius: 1rem;
}

.ausgabestelle-page .ausgabe-kicker {
    color: #60758b;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ausgabe-table-card {
    border-radius: 1rem;
    overflow: hidden;
}

.ausgabe-count-badge {
    background: #eef4fb;
    color: #385575;
    border: 1px solid #d5e2f0;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .75rem;
}

.ausgabe-table thead th {
    background: #f8fbff;
    color: #2f4a66;
    font-weight: 600;
    white-space: nowrap;
    font-size: .88rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ausgabe-table tbody td {
    border-color: #edf2f7;
}

.ausgabe-table tbody tr:hover {
    background: #f5faff;
}

.ausgabe-link {
    color: #1f3f66;
    text-decoration: none;
    font-weight: 600;
}

.ausgabe-link:hover {
    color: #0d6efd;
}

.ausgabe-status-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .3rem .65rem;
    font-size: .82rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.ausgabe-status-chip.is-active {
    background: #e8f7ee;
    border-color: #c7e9d3;
    color: #1f6f45;
}

.ausgabe-status-chip.is-locked {
    background: #fceaea;
    border-color: #f4cccc;
    color: #922e2e;
}

.ausgabe-status-text {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #212529;
    font-weight: 600;
    font-size: .875rem;
}

.ausgabe-status-icon {
    font-size: .95rem;
}

.ausgabe-status-icon.is-active {
    color: #1f7a3e;
}

.ausgabe-status-icon.is-locked {
    color: #c1121f;
}

.ausgabestelle-create-page .ausgabe-create-shell,
.ausgabestelle-edit-page .ausgabe-edit-shell,
.ausgabestelle-detail-page .ausgabe-detail-shell {
    border-radius: 1rem;
    overflow: hidden;
}

.ausgabestelle-create-page .ausgabe-create-hero,
.ausgabestelle-edit-page .ausgabe-edit-hero,
.ausgabestelle-detail-page .ausgabe-detail-hero {
    background: linear-gradient(135deg, #f6faff 0%, #ecf4ff 60%, #e2efff 100%);
    border-bottom: 1px solid #e4ebf3;
}

.ausgabe-create-kicker,
.ausgabe-edit-kicker,
.ausgabe-detail-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    color: #5f748a;
}

.ausgabe-create-tabs .nav-link,
.ausgabe-edit-tabs .nav-link,
.ausgabe-detail-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #4b6078;
    font-weight: 500;
}

.ausgabe-create-tabs .nav-link.active,
.ausgabe-edit-tabs .nav-link.active,
.ausgabe-detail-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

.ausgabestelle-create-page .form-label,
.ausgabestelle-edit-page .form-label {
    font-weight: 600;
    color: #344a61;
}

.ausgabestelle-create-page .form-control,
.ausgabestelle-create-page .form-select,
.ausgabestelle-edit-page .form-control,
.ausgabestelle-edit-page .form-select {
    border-color: #d8e2ee;
}

.ausgabestelle-create-page .form-control:focus,
.ausgabestelle-create-page .form-select:focus,
.ausgabestelle-edit-page .form-control:focus,
.ausgabestelle-edit-page .form-select:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .16);
}

.ausgabestelle-detail-page .detail-label {
    font-size: .82rem;
    color: #6c7d91;
    margin-bottom: .3rem;
}

.ausgabestelle-detail-page .detail-value {
    background: #f8fbff;
    border: 1px solid #e3ebf5;
    border-radius: .65rem;
    padding: .6rem .75rem;
    color: #1f3146;
    min-height: 44px;
}

.ausgabestelle-detail-page .detail-note {
    min-height: 120px;
    line-height: 1.55;
}

/* Benutzerstatus modern UI */
.benutzerstatus-page .benutzerstatus-hero {
    background: linear-gradient(135deg, #f4f9ff 0%, #ecf5ff 55%, #e2f0ff 100%);
    border-radius: 1rem;
}

.benutzerstatus-page .benutzerstatus-kicker {
    color: #60758b;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.benutzerstatus-table-card {
    border-radius: 1rem;
    overflow: hidden;
}

.benutzerstatus-count-badge {
    background: #eef4fb;
    color: #385575;
    border: 1px solid #d5e2f0;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .75rem;
}

.benutzerstatus-table thead th {
    background: #f8fbff;
    color: #2f4a66;
    font-weight: 600;
    white-space: nowrap;
    font-size: .88rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.benutzerstatus-table tbody td {
    border-color: #edf2f7;
}

.benutzerstatus-table tbody tr:hover {
    background: #f5faff;
}

.benutzerstatus-status-text {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #212529;
    font-weight: 600;
    font-size: .875rem;
}

.benutzerstatus-status-icon {
    font-size: .95rem;
}

.benutzerstatus-status-icon.is-active {
    color: #1f7a3e;
}

.benutzerstatus-status-icon.is-locked {
    color: #c1121f;
}

.benutzerstatus-create-page .benutzerstatus-create-shell,
.benutzerstatus-edit-page .benutzerstatus-edit-shell,
.benutzerstatus-detail-page .benutzerstatus-detail-shell {
    border-radius: 1rem;
    overflow: hidden;
}

.benutzerstatus-create-page .benutzerstatus-create-hero,
.benutzerstatus-edit-page .benutzerstatus-edit-hero,
.benutzerstatus-detail-page .benutzerstatus-detail-hero {
    background: linear-gradient(135deg, #f6faff 0%, #ecf4ff 60%, #e2efff 100%);
    border-bottom: 1px solid #e4ebf3;
}

.benutzerstatus-create-kicker,
.benutzerstatus-edit-kicker,
.benutzerstatus-detail-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    color: #5f748a;
}

.benutzerstatus-create-tabs .nav-link,
.benutzerstatus-edit-tabs .nav-link,
.benutzerstatus-detail-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #4b6078;
    font-weight: 500;
}

.benutzerstatus-create-tabs .nav-link.active,
.benutzerstatus-edit-tabs .nav-link.active,
.benutzerstatus-detail-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

.benutzerstatus-create-page .form-label,
.benutzerstatus-edit-page .form-label {
    font-weight: 600;
    color: #344a61;
}

.benutzerstatus-create-page .form-control,
.benutzerstatus-create-page .form-select,
.benutzerstatus-edit-page .form-control,
.benutzerstatus-edit-page .form-select {
    border-color: #d8e2ee;
}

.benutzerstatus-create-page .form-control:focus,
.benutzerstatus-create-page .form-select:focus,
.benutzerstatus-edit-page .form-control:focus,
.benutzerstatus-edit-page .form-select:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .16);
}

.benutzerstatus-detail-page .detail-label {
    font-size: .82rem;
    color: #6c7d91;
    margin-bottom: .3rem;
}

.benutzerstatus-detail-page .detail-value {
    background: #f8fbff;
    border: 1px solid #e3ebf5;
    border-radius: .65rem;
    padding: .6rem .75rem;
    color: #1f3146;
    min-height: 44px;
}

.benutzerstatus-detail-page .detail-note {
    min-height: 120px;
    line-height: 1.55;
}

/* Benutzerverwaltung UI sync (FishCon-Projectdesk) */
.project-save-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1095;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 300px;
    max-width: 420px;
    padding: 0.85rem 1rem;
    border: 1px solid #cde8da;
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(16, 60, 39, 0.18);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.project-save-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.project-save-toast-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f7ee;
    color: #1f8a52;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.project-save-toast-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1f3a2b;
    line-height: 1.2;
}

.project-save-toast-text {
    font-size: 0.82rem;
    color: #4d6a5b;
    margin-top: 0.1rem;
}

@media (max-width: 991px) {
    .project-edit-page .action-btn {
        min-width: 100%;
    }

    .project-save-toast {
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.85rem;
        min-width: auto;
        max-width: none;
    }
}

/* Project create */
.project-create-page .project-create-main-card,
.project-create-page .project-create-content-card {
    box-shadow: 0 12px 32px rgba(17, 53, 93, 0.1) !important;
}

.project-create-page .project-create-hero {
    background: linear-gradient(122deg, #1f5ea8 0%, #2f7ec9 56%, #4f9fdf 100%);
    padding: 1.35rem 1.5rem;
}

.project-create-page .project-create-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
}

.project-create-page .project-create-stat-card {
    border: 1px solid #e2eaf4;
    border-radius: 0.8rem;
    background: #f8fbff;
    padding: 0.9rem 1rem;
    min-height: 92px;
}

.project-create-page .project-create-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7f97;
    font-weight: 600;
}

.project-create-page .project-create-stat-value {
    margin-top: 0.25rem;
    color: #1f3148;
    font-weight: 600;
    font-size: 1rem;
}

.project-create-page .project-create-tabs {
    background: #f8fbff;
    padding: 0.5rem 0.75rem 0;
    gap: 0.25rem;
    border-bottom: 1px solid #dde7f2;
}

.project-create-page .project-create-tabs .nav-link {
    border: 0;
    border-radius: 0.65rem 0.65rem 0 0;
    color: #4a617b;
    font-weight: 600;
    padding: 0.72rem 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-create-page .project-create-tabs .nav-link.active {
    background: #fff;
    color: #1f4f82;
    box-shadow: 0 -1px 0 #dbe7f3 inset;
}

.project-create-page .project-create-tab-shell {
    background: #fff;
}

.project-create-page .project-date-input,
.project-edit-page .project-date-input {
    border-color: #d6e2f0;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
    color: #20354d;
    font-weight: 500;
}

.project-create-page .project-date-input:focus,
.project-edit-page .project-date-input:focus {
    border-color: #6a9dd2;
    box-shadow: 0 0 0 0.2rem rgba(47, 111, 179, 0.16);
}

.project-create-page .project-create-map {
    height: 340px;
}

@media (max-width: 991px) {
    .project-create-page .project-create-tabs .nav-link {
        font-size: 0.84rem;
        padding: 0.6rem 0.55rem;
    }
}

/* Account profile */
.profile-page .profile-kicker,
.profile-edit-page .profile-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a7f96;
    font-weight: 600;
}

.profile-page .profile-hero {
    border-radius: 1rem;
    background: linear-gradient(128deg, #f7fbff 0%, #edf5ff 58%, #e5f0ff 100%);
}

.profile-page .profile-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #1f5ea8 0%, #3d86d1 100%);
    color: #fff;
    font-size: 1.5rem;
}

.profile-page .profile-info-card,
.profile-page .profile-security-card,
.profile-edit-page .profile-edit-card {
    border-radius: 1rem;
}

.profile-page .profile-definition-list dt {
    color: #647a90;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.profile-page .profile-definition-list dd {
    color: #213549;
    margin-bottom: 0.75rem;
}

.profile-edit-page .profile-input {
    border-color: #d9e3ef;
}

.profile-edit-page .profile-input:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.16);
}

.profile-edit-page .profile-edit-section {
    border: 1px solid #e5edf6;
    border-radius: 0.85rem;
    padding: 1rem;
    background: #fcfdff;
}

.profile-edit-page .profile-field-label {
    font-size: 0.9rem;
    letter-spacing: normal;
    color: #2a3f56;
    margin-bottom: 0.35rem;
}

.profile-edit-page .profile-edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}

/* Account MFA setup */
.mfa-setup-page .mfa-setup-shell {
    border-radius: 1rem;
}

.mfa-setup-page .mfa-setup-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a7f96;
    font-weight: 600;
}

.mfa-setup-page .mfa-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.mfa-setup-page .mfa-step-index {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #e8f1fd;
    color: #1f5ea8;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mfa-setup-page .mfa-qr-image {
    max-width: 240px;
    background: #fff;
    padding: 0.9rem;
    border: 1px solid #e2eaf4;
}

.mfa-setup-page .mfa-secret-code {
    display: inline-block;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    background: #f7faff;
    border: 1px solid #dce8f6;
    color: #24405c;
}

.mfa-setup-page .mfa-code-input {
    text-align: center;
    letter-spacing: 0.18em;
    font-size: 1.25rem;
    border-color: #d6e1ee;
}

.mfa-setup-page .mfa-code-input:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.16);
}

/* Account MFA verify */
.mfa-verify-page .mfa-verify-shell {
    border-radius: 1rem;
}

.mfa-verify-page .mfa-verify-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a7f96;
    font-weight: 600;
}

.mfa-verify-page .mfa-verify-section {
    border: 1px solid #e5edf6;
    border-radius: 0.85rem;
    padding: 0.95rem;
    background: #fcfdff;
}

.mfa-verify-page .mfa-verify-label {
    font-size: 0.9rem;
    letter-spacing: normal;
    color: #2a3f56;
}

.mfa-verify-page .mfa-digit-group {
    gap: 0.45rem;
}

.mfa-verify-page .mfa-digit {
    border-color: #d6e1ee;
}

.mfa-verify-page .mfa-digit:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.16);
}

/* Account login MFA */
.login-mfa-page .login-mfa-shell {
    border-radius: 1rem;
}

.login-mfa-page .login-mfa-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a7f96;
    font-weight: 600;
}

.login-mfa-page .login-mfa-label {
    font-size: 0.9rem;
    letter-spacing: normal;
    color: #2a3f56;
}

.login-mfa-page .login-mfa-input {
    border-color: #d6e1ee;
    letter-spacing: 0.14em;
    text-align: center;
}

.login-mfa-page .login-mfa-input:focus {
    border-color: #7aa9df;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.16);
}

/* User management */
.user-admin-page .user-admin-hero {
    border-radius: 1rem;
    background: linear-gradient(135deg, #f6faff 0%, #edf5ff 58%, #e4f0ff 100%);
}

.user-admin-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a7f96;
    font-weight: 600;
}

.user-admin-label {
    font-size: 0.9rem;
    letter-spacing: normal;
    color: #2a3f56;
}

.user-admin-page .user-link {
    color: #20364e;
}

.user-admin-page .user-link:hover {
    color: #0d6efd;
}

.user-admin-page .card {
    border-radius: 1rem;
}

.user-admin-page .table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.76rem;
    color: #5c7088;
}

.user-admin-page .table tbody td {
    border-color: #edf2f7;
}

.user-admin-page .table tbody tr:hover {
    background: #f8fbff;
}

.user-admin-page .invite-user-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e2eaf4;
    border-radius: 0.75rem;
}

.user-admin-page .invite-user-list .list-group-item {
    border-left: 0;
    border-right: 0;
}

.user-admin-page .user-admin-control,
.user-admin-page .user-admin-action-btn {
    min-height: 40px;
    font-size: 0.86rem;
}

.user-admin-page .user-admin-select {
    font-size: 0.86rem;
}

.user-admin-page .user-admin-search-input {
    font-size: 0.8rem;
}

.user-admin-page .user-admin-action-btn {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.user-admin-page .user-admin-btn-text {
    font-size: 0.84rem;
}

.user-admin-page .user-admin-top-action {
    width: 180px;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.user-admin-page .user-admin-filter-row {
    max-width: 980px;
}

.user-admin-page .user-admin-toolbar {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    border: 1px solid #e8eef7;
}

.user-admin-page .user-admin-toolbar .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.97rem;
}

.user-admin-page .invite-modal-content {
    border: 1px solid #d8e5f3;
    border-radius: 1rem !important;
}

.user-admin-page .invite-modal-header {
    background: linear-gradient(165deg, #f7fbff 0%, #ecf4ff 62%, #e3f0ff 100%);
    border-bottom: 1px solid #dce8f5;
    color: #1f354e;
}

.user-admin-page .invite-modal-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7690;
    font-weight: 700;
}

.user-admin-page .invite-modal-title {
    color: #1f344c;
    font-weight: 700;
}

.user-admin-page .invite-modal-body {
    background: #ffffff;
    color: #22364d;
}

.user-admin-page .invite-modal-label {
    color: #2a4058;
}

.user-admin-page .invite-modal-select {
    border-color: #d8e4f1;
    background: #fbfdff;
}

.user-admin-page .invite-modal-status {
    border: 1px solid #e3ecf6;
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
    background: #f9fcff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.user-admin-page .invite-selected-count {
    background: #eef5ff;
    color: #284763;
    border: 1px solid #d5e5f7;
}

.user-admin-page .invite-modal-hint {
    color: #4e6882;
}

.user-admin-page .invite-user-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e2ebf5;
    border-radius: 0.75rem;
    background: #fbfdff;
}

.user-admin-page .invite-user-list .invite-user-item {
    background: transparent;
    color: #243c56;
    border: 0;
    border-bottom: 1px solid #eaf1f8;
}

.user-admin-page .invite-user-list .invite-user-item:last-child {
    border-bottom: 0;
}

.user-admin-page .invite-user-id-badge {
    background: #ffffff;
    color: #4f647b;
    border: 1px solid #d6e1ed;
}

.user-admin-page .invite-modal-footer {
    border-top: 1px solid #edf3f9;
    background: #fbfdff;
}

.user-edit-page .user-edit-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #4b6078;
    font-weight: 600;
}

.user-edit-page .user-edit-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: transparent;
}

.user-edit-page .user-edit-section {
    border: 1px solid #e5edf6;
    border-radius: 0.85rem;
    padding: 1rem;
    background: #fcfdff;
}

.user-edit-page .user-edit-action-row .btn {
    min-width: 170px;
    min-height: 42px;
    border-radius: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.user-edit-page .user-edit-save-btn {
    border: 1px solid #0f6fd1;
    color: #ffffff;
    background: linear-gradient(180deg, #1f86ec 0%, #0f6fd1 100%);
    box-shadow: 0 8px 18px rgba(15, 111, 209, 0.24);
}

.user-edit-page .user-edit-save-btn:hover {
    border-color: #0e67c3;
    color: #ffffff;
    background: linear-gradient(180deg, #237fdc 0%, #0d66bd 100%);
    transform: translateY(-1px);
}

.user-edit-page .user-edit-save-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(15, 111, 209, 0.22);
}

.user-edit-page .user-edit-save-btn:disabled,
.user-edit-page .user-edit-save-btn[disabled] {
    border-color: #8fb9e1;
    background: #9ec4e8;
    color: #f8fbff;
    box-shadow: none;
    transform: none;
}

.user-edit-page .user-edit-cancel-btn {
    border: 1px solid #d4dce6;
    color: #2f4358;
    background: #ffffff;
}

.user-edit-page .user-edit-cancel-btn:hover {
    border-color: #b8c8d8;
    color: #213446;
    background: #f6f9fd;
    transform: translateY(-1px);
}

.user-detail-page .card,
.user-project-page .card,
.user-reset-page .card,
.user-password-page .card {
    border-radius: 1rem;
}

.user-reset-page .reset-password-shell {
    border: 1px solid #e3ecf6;
    background: #ffffff;
}

.user-reset-page .reset-password-hero {
    border: 1px solid #e6eef8;
    border-radius: 0.9rem;
    padding: 1rem 1.05rem;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 55%, #e8f1ff 100%);
}

.user-reset-page .reset-password-userbox {
    border: 1px solid #dfe8f4;
    border-radius: 0.8rem;
    background: #fbfdff;
    padding: 0.8rem 0.9rem;
}

.user-reset-page .reset-password-userbox-label {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #688098;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.user-reset-page .reset-password-userbox-value {
    font-weight: 600;
    color: #1f3853;
}

.user-reset-page .reset-password-input-group .reset-password-input {
    border-color: #d4deea;
}

.user-reset-page .reset-password-copy-btn {
    min-width: 106px;
}

.user-project-page .user-project-export-actions .user-project-export-btn {
    min-width: 120px;
    min-height: 38px;
    font-weight: 600;
    border-radius: 0.65rem;
}

.user-project-page .user-project-export-actions .btn-outline-primary {
    border-color: #b9d1ea;
    color: #214a75;
    background: #f7fbff;
}

.user-project-page .user-project-export-actions .btn-outline-primary:hover {
    border-color: #8fb5da;
    color: #173958;
    background: #e9f4ff;
}

.user-project-page .user-project-export-actions .btn-outline-danger {
    border-color: #f0c2c2;
    color: #8b2b2b;
    background: #fff9f9;
}

.user-project-page .user-project-export-actions .btn-outline-danger:hover {
    border-color: #de9b9b;
    color: #6f2121;
    background: #ffecec;
}

.benutzer-btn-loading {
    pointer-events: none;
    opacity: 0.9;
}

#benutzerLoadingOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 22, 40, 0.56);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

#benutzerLoadingOverlay.active {
    opacity: 1;
    visibility: visible;
}

#benutzerLoadingOverlay .fischarten-loading-box {
    width: min(88vw, 360px);
    border-radius: 1rem;
    background: #f5f9fc;
    box-shadow: 0 20px 48px rgba(8, 29, 53, 0.35);
    text-align: center;
    padding: 1.1rem 1rem 1rem;
}

#benutzerLoadingOverlay .fischarten-loading-icon {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: #dbeaf7;
    color: #0c3f73;
    font-size: 1.1rem;
    animation: benutzerSpin 1.2s linear infinite;
}

#benutzerLoadingOverlay .fischarten-loading-title {
    margin: 0.65rem 0 0;
    color: #334d6b;
    font-size: 1.05rem;
    font-weight: 700;
}

#benutzerLoadingOverlay .fischarten-loading-subtitle {
    margin: 0.3rem 0 0.8rem;
    color: #6f84a0;
    font-size: 0.92rem;
}

#benutzerLoadingOverlay .fischarten-loading-dots {
    display: inline-flex;
    gap: 0.32rem;
    align-items: center;
    justify-content: center;
}

#benutzerLoadingOverlay .fischarten-loading-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5d8fc6;
    animation: benutzerDotPulse 0.9s infinite ease-in-out;
}

#benutzerLoadingOverlay .fischarten-loading-dots span:nth-child(2) {
    animation-delay: 0.12s;
}

#benutzerLoadingOverlay .fischarten-loading-dots span:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes benutzerDotPulse {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@keyframes benutzerSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.api-call-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(1px);
}

.api-call-overlay.active {
    display: flex;
}

.api-call-overlay__box {
    width: min(430px, 92vw);
    background: #ffffff;
    border: 1px solid #d8e2ef;
    border-radius: 1rem;
    padding: 1.25rem 1.2rem;
    text-align: center;
    box-shadow: 0 24px 56px rgba(16, 42, 67, 0.22);
}

.api-call-overlay__icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #e9f3ff;
    color: #0d6efd;
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
}

.api-call-overlay__icon i {
    animation: apiCallSpin 0.8s linear infinite;
}

.api-call-overlay__title {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.api-call-overlay__subtitle {
    color: #5d7288;
}

.api-submit-loading {
    opacity: 0.9;
}

@keyframes apiCallSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}