/* === Cards & Panels === */
.article-card {
    border: 0.0625rem solid #ddd; /* statt 1px */
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.625rem;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

    .article-card:hover {
        box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
    }

    .article-card .header {
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }

    .article-card .price {
        font-weight: bold;
        color: #0c5aa6;
    }

    .article-card .description {
        font-size: 0.9rem;
        margin-bottom: 0.375rem;
    }

    .article-card .details {
        font-size: 0.8rem;
        color: #666;
        display: flex;
        justify-content: space-between;
    }

/* === Add Button === */
.add-button {
    margin-top: 0.625rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
    background-color: #0c5aa6;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .add-button:hover {
        background-color: #084d8c;
    }

/* === Dropdowns === */
.bv-dropdown,
.bv-dropdown option,
.form-select.bv-dropdown,
.form-select.bv-dropdown option {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
}

.bv-dropdown {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: 0.0625rem solid #ced4da; /* statt 1px */
    background-color: #fff;
    box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.05); /* statt 0 1px 2px */
}

    .bv-dropdown[multiple] option {
        padding: 0.375rem 0.5rem;
    }

        .bv-dropdown[multiple] option:hover {
            background-color: #f1f3f5;
        }

        .bv-dropdown[multiple] option:nth-child(even) {
            background-color: #fafafa;
        }

    .bv-dropdown[multiple] {
        min-height: 7.5rem;
    }

/* === Profession Badges === */
.profession-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
    text-transform: capitalize;
    display: inline-block;
}

    .navbar .profession-badge.profession-handwerk,
    .profession-badge.profession-handwerk {
        background-color: #198754 !important;
        color: #fff !important;
    }


    /* === Profession Badges === */
    .navbar .profession-badge.profession-energieberatung,
    .profession-badge.profession-energieberatung {
        background-color: #0d6efd !important;
        color: #fff !important;
    }

    .navbar .profession-badge.profession-landwirtschaft,
    .profession-badge.profession-landwirtschaft {
        background-color: #20c997 !important;
        color: #fff !important;
    }

    .navbar .profession-badge.profession-pflanzenbewässerung,
    .profession-badge.profession-pflanzenbewässerung {
        background-color: #0dcaf0 !important;
        color: #212529 !important;
    }

    .navbar .profession-badge.profession-vermietung,
    .profession-badge.profession-vermietung {
        background-color: #6f42c1 !important;
        color: #fff !important;
    }

/* === Hero Background === */
.hero-background {
    background: url('/images/background.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: center;
    color: #fff;
}

    .hero-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.4);
    }

    .hero-background > .container {
        position: relative;
    }

    .hero-background h1:focus {
        outline: none;
        box-shadow: none;
    }

/* === AI Prompt Card Hover Effekt === */
.ai-prompt-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .ai-prompt-card:hover {
        transform: translateY(-0.3125rem); /* statt -5px */
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    }

/* === Fokusrahmen entfernen bei Mausnutzung === */
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* === Footer Branding Look === */
.footer-brand {
    background-color: #1B2A4E;
    color: #fff;
}

    .footer-brand .footer-link {
        color: #fff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

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

    .footer-brand .footer-icon {
        color: #fff;
        font-size: 1.2rem;
        margin-right: 0.5rem;
        transition: color 0.2s ease, transform 0.2s ease;
    }

        .footer-brand .footer-icon:hover {
            color: #0d6efd;
            transform: translateY(-0.125rem); /* statt -2px */
        }

    .footer-brand hr {
        border-color: rgba(255, 255, 255, 0.2);
    }

/* === Sidebar UX Styling === */
.sidebar-nav .list-group-item {
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: none;
    border-left: 0.25rem solid transparent;
    padding-left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


    .sidebar-nav .list-group-item i {
        font-size: 1.1rem;
        transition: transform 0.2s ease;
    }

    .sidebar-nav .list-group-item:hover i {
        transform: scale(1.1);
    }

    .sidebar-nav .list-group-item:hover {
        background-color: #f8f9fa;
        transform: translateX(0.125rem);
    }

    .sidebar-nav .list-group-item.active {
        background-color: #1B2A4E;
        border-left: 0.25rem solid var(--brand-color); /* statt 4px */
        color: #fff;
        font-weight: 500;
    }

        .sidebar-nav .list-group-item.active i {
            color: #fff;
        }

    .sidebar-nav .list-group-item.text-muted {
        border-top: 0.0625rem solid rgba(0,0,0,0.05); /* statt 1px */
        margin-top: 1rem;
        padding-top: 0.75rem;
        font-size: 0.85rem;
        color: #6c757d;
    }

    /* Logout Button Hover */
    .sidebar-nav .list-group-item.text-danger:hover {
        background-color: #f8d7da;
    }

/* === Sidebar Animation === */
.sidebar-animated {
    animation: fadeInSidebar 0.4s ease-in-out;
}

@keyframes fadeInSidebar {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }

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

/* === Highlighting für Suchtreffer === */
mark {
    background-color: #ffeeba;
    color: #212529;
    padding: 0 0.125rem;
    border-radius: 0.125rem;
    font-weight: 600;
}

/* === HousingFilter Styling === */
.housing-filter input[type="text"] {
    border: 0.0625rem solid #ced4da; /* statt 1px */
    border-radius: 0.25rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .housing-filter input[type="text"]:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        outline: none;
    }

.housing-filter .btn-outline-secondary {
    border-radius: 0 0.25rem 0.25rem 0;
    transition: background-color 0.2s ease;
}

    .housing-filter .btn-outline-secondary:hover {
        background-color: #e2e6ea;
    }

/* === Mobile Optimierung === */
@media (max-width: 36em) {
    .table td, .table th {
        padding: 0.5rem;
    }

    .btn-group .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }

    .breadcrumb {
        font-size: 0.85rem;
    }
}



/* === Tabellen-Highlight Integration === */
.table.table-hover tr.row-highlight {
    transition: background-color 0.3s ease;
}

.badge.badge-pulse {
    display: inline-block;
}

/* === Sidebar Light Redesign === */
.sidebar-panel {
    background-color: #fff;
    border-right: none;
    box-shadow: 0.125rem 0 0.5rem rgba(0,0,0,0.05);
}

/* Alle Items */
.sidebar-nav .list-group-item {
    padding: 0.75rem 1rem;
    border: none;
    border-left: 0.25rem solid transparent;
    background-color: transparent;
    color: #333;
    font-weight: 400;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

    /* Icons */
    .sidebar-nav .list-group-item i {
        font-size: 1.2rem; /* Konflikt mit Teil 3 → hier vereinheitlicht */
        transition: transform 0.25s ease, color 0.25s ease;
        color: #666;
    }

    /* Hover-Effekt */
    .sidebar-nav .list-group-item:hover {
        background-color: #f0f7ff;
        border-left-color: var(--brand-color);
    }

        .sidebar-nav .list-group-item:hover i {
            transform: scale(1.15);
            color: var(--brand-color);
        }

    /* Aktiver Zustand */
    .sidebar-nav .list-group-item.active {
        background-color: #f0f7ff;
        border-left-color: var(--brand-color);
        color: #222;
        font-weight: 500;
    }

        .sidebar-nav .list-group-item.active i {
            color: var(--brand-color);
        }

    /* Unterpunkte (SidebarSubItem) */
    .sidebar-nav .list-group-item.ms-3 {
        padding-left: 2rem;
        font-size: 0.95rem;
    }

/* Sidebar-Badges */
.sidebar-nav .badge {
    background-color: rgba(27, 135, 224, 0.15);
    color: #0d3c61;
    font-weight: 600;
}

/* Trennung Sidebar/Content */
.layout-main {
    box-shadow: inset -0.0625rem 0 0 rgba(0,0,0,0.05);
}

/* Badge-Animation */
.sidebar-nav .list-group-item:hover .badge-sidebar {
    transform: scale(1.08);
    background-color: rgba(27, 135, 224, 0.25);
}

.badge-sidebar {
    background-color: rgba(27, 135, 224, 0.15);
    color: #0d3c61;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
    transition: transform 0.25s ease, background-color 0.25s ease;
}


/* Badge-Pulse-Animation */
@keyframes badgePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

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

.badge-pulse {
    animation: badgePulse 0.6s ease-out;
}

/* === Toast Container === */
.blazored-toast-container {
    position: fixed !important;
    z-index: 2000 !important; /* über Sidebar/Topbar */
    top: 4.375rem !important; /* statt 70px */
    right: 1.25rem !important; /* statt 20px */
    width: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Mobile Anpassung */
@media (max-width: 36em) { /* statt 576px */
    .blazored-toast-container {
        top: 3.75rem !important; /* statt 60px */
        right: 0.625rem !important; /* statt 10px */
        left: 0.625rem !important; /* statt 10px */
    }
}

/* === Toast Grundlayout (Flex + Reset) === */
.blazored-toast {
    display: flex;
    align-items: center; /* vertikal mittig */
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.2);
    font-size: 0.95rem;
    line-height: 1.4;
    min-width: 17.5rem;
    max-width: 26.25rem;
    white-space: normal;
    word-break: break-word;
    animation: slideInRight 0.4s ease-out;
}

/* Slide-In Animation */
@keyframes slideInRight {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

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

/* === Linkes Icon: Größe über Font-Size normieren === */
.blazored-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Einheitliche Bezugsgröße (beide Seiten): */
    font-size: 1.25rem; /* ≈ 20px */
    width: 1em; /* exakt 1em Box */
    height: 1em;
}

    /* Erzwinge SVG auf exakt 1em (egal ob width="22" oder ähnlich) */
    .blazored-toast-icon svg {
        width: 1em !important;
        height: 1em !important;
        /* optional: visuelle Konsistenz bei Strichbreite */
        stroke-width: 2 !important;
    }

/* === Text mittig und ohne Standard-Margins === */
.blazored-toast-message {
    flex: 1;
    display: flex;
    align-items: center;
    line-height: 1.4;
    margin: 0; /* Standard p-Margin entfernen: verhindert Höhenversatz */
}

/* === Close-Button rechts: gleiche Normierung wie Icon === */
.blazored-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    /* exakt gleiche Bezugsgröße wie links: */
    font-size: 1.25rem; /* ≈ 20px */
    width: 1em;
    height: 1em;
    background: none;
    border: none;
    color: #fff; /* Weiß auf dunklem Hintergrund */
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

    .blazored-toast-close:hover {
        opacity: 1;
    }

    /* Erzwinge auch hier SVG exakt auf 1em */
    .blazored-toast-close svg {
        width: 1em !important;
        height: 1em !important;
        stroke-width: 2 !important; /* matcht das linke Icon für visuelle Balance */
    }

/* Warnung: Close-Button kontrastreich auf hellem Hintergrund */
.blazored-toast-warning .blazored-toast-close {
    color: #000;
}

/* === Farbvarianten mit leichtem Verlauf === */
.blazored-toast-success {
    background: linear-gradient(135deg, #198754, #28a745);
    color: #fff;
}

.blazored-toast-info {
    background: linear-gradient(135deg, #0dcaf0, #17a2b8);
    color: #fff;
}

.blazored-toast-warning {
    background: linear-gradient(135deg, #ffc107, #ffcd39);
    color: #212529;
}

.blazored-toast-error {
    background: linear-gradient(135deg, #dc3545, #e55353);
    color: #fff;
}

    /* === Progressbar farblich passend === */
    .blazored-toast-success .blazored-toast-progressbar span,
    .blazored-toast-info .blazored-toast-progressbar span,
    .blazored-toast-error .blazored-toast-progressbar span {
        background-color: rgba(255,255,255,0.7);
    }

.blazored-toast-warning .blazored-toast-progressbar span {
    background-color: rgba(0,0,0,0.4);
}




/* === Card-Container === */
.rentalcontract-card {
    border-radius: 0.6rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .rentalcontract-card:hover {
        transform: translateY(-0.125rem);
        box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.08);
    }

    /* Header */
    .rentalcontract-card .card-header {
        background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
        border-bottom: 0.0625rem solid #e9ecef;
    }

    /* Badge */
    .rentalcontract-card .badge {
        font-size: 0.75rem;
        padding: 0.4em 0.6em;
        border-radius: 0.4rem;
    }

    /* Body */
    .rentalcontract-card .card-body {
        padding: 2rem 1.5rem;
    }

    /* Button */
    .rentalcontract-card .btn {
        transition: all 0.2s ease;
    }

        .rentalcontract-card .btn:enabled:hover {
            transform: translateY(-0.0625rem);
            box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.12);
        }

        /* Disabled Button Style */
        .rentalcontract-card .btn:disabled {
            background-color: #adb5bd;
            border-color: #adb5bd;
            cursor: not-allowed;
        }

/* Tooltip-Style */
.tooltip-inner {
    background-color: #343a40;
    font-size: 0.8rem;
}

/* Container */
.rentalcontract-create {
    max-width: 56.25rem;
    margin: 0 auto;
}

    /* Card */
    .rentalcontract-create .card {
        border-radius: 0.6rem;
        border: none;
        box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .rentalcontract-create .card:hover {
            transform: translateY(-0.125rem);
            box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.08);
        }

    /* Card Header */
    .rentalcontract-create .card-header {
        background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
        border-bottom: 0.0625rem solid #e9ecef;
        font-weight: 600;
    }

/* Sidebar Badges */
.badge-sidebar.d-flex,
.badge-sidebar > .d-flex {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Kleine Badges im Text */
.badge-sidebar .badge {
    font-size: 0.75rem;
    font-weight: 600;
}


/* === Hero Banner (Startseite) === */
section.hero-banner {
    position: relative;
    width: 100%;
    min-height: 90vh;
    overflow: hidden;
    background-color: #111;
}

    /* Hintergrundbild */
    section.hero-banner .hero-bg-img {
        position: absolute;
        inset: 0;
        background: url("/images/background.png") center center / cover no-repeat;
        z-index: 0;
    }

        /* Optionales Aufhell-Overlay über dem Bild */
        section.hero-banner .hero-bg-img::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.12);
        }

    /* Gradient-Fade am unteren Rand */
    section.hero-banner::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 7.5rem;
        background: linear-gradient(to bottom, rgba(17,17,17,0) 0%, #f8f9fa 100%);
        z-index: 1;
    }

    /* Gradient-Fade am oberen Rand */
    section.hero-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5rem;
        background: linear-gradient(to top, rgba(17,17,17,0) 0%, #111 100%);
        z-index: 1;
    }

    /* Overlay-Inhalt */
    section.hero-banner .hero-overlay {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 2rem 4rem;
        color: #fff;
    }

    /* Claim */
    section.hero-banner .center-content {
        position: absolute;
        top: 20%;
        left: 8%;
        max-width: 43.75rem;
        text-align: left;
        z-index: 3;
    }

        section.hero-banner .center-content .claim {
            font-size: 2rem;
            font-weight: 600;
            color: #fff;
            margin: 0;
            line-height: 1.6;
            background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(16,152,173,0.25) 100%);
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 0 0.75rem rgba(0,0,0,0.4);
        }

    /* === Buttons im Hero Banner === */
    section.hero-banner .auth-buttons {
        position: absolute;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 1rem;
        z-index: 5;
    }

        section.hero-banner .auth-buttons .btn {
            min-width: 12.5rem;
            font-size: 1.2rem;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.2s ease-in-out;
        }

    /* Login */
    section.hero-banner .btn-login {
        background-color: #1098ad;
        color: #fff;
        border: none;
        box-shadow: 0 0 0.75rem rgba(16,152,173,0.6);
    }

        section.hero-banner .btn-login:hover {
            background-color: #0c8599;
            box-shadow: 0 0 1.125rem rgba(16,152,173,0.9);
        }

    /* Registrieren */
    section.hero-banner .btn-register {
        background-color: #f59f00;
        color: #fff;
        border: none;
        box-shadow: 0 0 0.75rem rgba(245,159,0,0.6);
    }

        section.hero-banner .btn-register:hover {
            background-color: #e67700;
            box-shadow: 0 0 1.125rem rgba(245,159,0,0.9);
        }

/* === Responsive Anpassungen === */
@media (max-width: 62em) {
    section.hero-banner .center-content .claim {
        font-size: 1.6rem;
        line-height: 1.5;
        padding: 0.75rem 1rem;
    }

    section.hero-banner .auth-buttons .btn {
        min-width: 11.25rem;
        font-size: 1.1rem;
        padding: 0.9rem 1.25rem;
    }
}

@media (max-width: 36em) {
    section.hero-banner .center-content .claim {
        font-size: 1.3rem;
        line-height: 1.4;
        padding: 0.5rem 0.75rem;
    }

    section.hero-banner .auth-buttons {
        flex-direction: column;
        gap: 0.75rem;
        width: 80%;
    }

        section.hero-banner .auth-buttons .btn {
            width: 100%;
            font-size: 1.1rem;
            padding: 0.9rem 1.2rem;
        }
}