/* public/css/style.css */

/* === CSS Variablen === */
:root {
    --primary-color: #C55A00; /* Hauptfarbe Orange - für alle Elemente außer Navbar */
    --primary-hover: #A04800; /* Dunkleres Orange für Hover */
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 197, 90, 0; /* RGB für Orange */
    --light-orange: #FFF0E0;  /* Helles Orange für Hintergründe */
    --dark-accent: #212529;   /* Dunkler Akzent (Bootstrap 'dark') */
    --category-badge-bg: #6c757d; /* Bootstrap 'secondary' color */
    --sender-bubble-background: #FFF3E0;
    --sender-bubble-border: #FFE0B2;
    --sender-bubble-text: #5D4037;
    --sender-bubble-background-hover: #FFF8E1;
}

/* === Suchfelder responsive Anpassungen === */
@media (max-width: 575px) {
    /* Mobile Ansicht: Einfache horizontale Anordnung der ersten drei Felder */
    .search-box-navbar .row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Land, PLZ/Ort und Umkreis in einer Reihe */
    .search-box-navbar .col-auto:nth-child(1),
    .search-box-navbar .col-auto:nth-child(2),
    .search-box-navbar .col-auto:nth-child(3) {
        flex: 0 0 auto;
        margin-bottom: 0.5rem;
    }
    
    /* Land und Umkreis kompakter */
    .search-box-navbar .col-auto:nth-child(1) select,
    .search-box-navbar .col-auto:nth-child(3) select {
        width: 75px !important;
    }
    
    /* PLZ/Ort Feld anpassen */
    .search-box-navbar .col-auto:nth-child(2) input {
        width: 160px !important;
    }
    
    /* Alle anderen Felder volle Breite */
    .search-box-navbar .col-12,
    .search-box-navbar .col-md {
        flex: 0 0 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Suchbutton zentriert */
    .search-box-navbar .col-md-auto {
        flex: 0 0 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    /* Suchbutton volle Breite und zentriert */
    .search-box-navbar .col-md-auto .btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    /* Tablet-Ansicht: Mittlere Breiten */
    .search-box-navbar .col-auto select[name="country"],
    .search-box-navbar .col-auto select[name="radius"] {
        width: 85px !important;
        min-width: 85px;
    }
    
    .search-box-navbar .col-auto input[name="location"] {
        width: 200px !important;
        min-width: 200px;
    }
    
    /* Suchbutton auch auf Tablets zentrieren */
    .search-box-navbar .col-md-auto {
        flex: 0 0 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    .search-box-navbar .col-md-auto .btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    /* Erste Zeile proportional anpassen */
    .search-box-navbar .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .search-box-navbar .col-auto:nth-child(1),
    .search-box-navbar .col-auto:nth-child(2),
    .search-box-navbar .col-auto:nth-child(3) {
        flex: 0 0 auto;
        margin-bottom: 0.5rem;
    }
    
    /* Container für alle Zeilen */
    .search-box-navbar .row {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Kategorie und Button schmaler als erste Zeile */
    .search-box-navbar .col-12,
    .search-box-navbar .col-md {
        flex: 0 0 auto;
        margin-bottom: 0.5rem;
        width: 95%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .search-box-navbar .col-md-auto {
        flex: 0 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
        width: 95%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    /* Kleine Tablets: Horizontale Anordnung beibehalten aber kompakter */
    .search-box-navbar .col-auto select[name="country"],
    .search-box-navbar .col-auto select[name="radius"] {
        width: 90px !important;
        min-width: 90px;
    }
    
    .search-box-navbar .col-auto input[name="location"] {
        width: 220px !important;
        min-width: 220px;
    }
}


/* === Auffälliges Styling für Umkreissuche === */
.radius-search-highlight {
    background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(197, 90, 0, 0.15);
    transition: all 0.3s ease;
}

.radius-search-highlight:hover {
    box-shadow: 0 6px 20px rgba(197, 90, 0, 0.25);
    transform: translateY(-2px);
}

.radius-search-highlight:has(.form-check-input:checked) {
    background: linear-gradient(135deg, #fff0e6 0%, #ffe6d6 100%);
    border-color: var(--primary-hover) !important;
    box-shadow: 0 6px 20px rgba(197, 90, 0, 0.3);
}

/* Verbesserte Schalter-Styling */
.form-check-input[type="checkbox"][role="switch"] {
    transform: scale(1.2);
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f8f9fa; /* Heller Hintergrund */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.btn-primary,
.btn-primary-custom {
    --bs-primary: var(--primary-color);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary-custom:hover,
.btn-primary-custom:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(197, 90, 0, 0.5);
}

main#main-content {
    flex-grow: 1;
}

footer {
   flex-shrink: 0;
}

/* ===== GLOBALE LINKFARBEN (CORPORATE DESIGN) ===== */
a {
    color: var(--primary-color); /* Standard-Linkfarbe: Primäres Orange */
    text-decoration: none; /* Keine Unterstreichung standardmäßig */
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out; /* Weicher Übergang */
}

a:hover,
a:focus {
    color: var(--primary-hover); /* Dunkleres Orange beim Hover/Fokus */
}

/* Stelle sicher, dass Button-Links nicht unbeabsichtigt beeinflusst werden
   (Diese Regel ist optional, aber kann helfen, Konflikte zu vermeiden) */
.btn, .btn:hover, .btn:focus {
    text-decoration: none; /* Buttons sollen keine Unterstreichung bekommen */
}

/* === Utility Klassen === */
.bg-primary-custom { background-color: var(--primary-color); }
.text-primary-custom { color: var(--primary-color); }

.btn-outline-primary,
.btn-outline-primary-custom {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary-custom:hover,
.btn-outline-primary-custom:focus {
     background-color: var(--primary-color);
     color: white;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 0.25rem rgba(197, 90, 0, 0.5);
}

/* Fokus-Stile für bessere Sichtbarkeit und Konsistenz */
.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
    border-color: var(--primary-hover);
    box-shadow: 0 0 0 0.2rem rgba(197, 90, 0, 0.25);
    outline: 0; /* Entfernt den Standard-Outline, da wir box-shadow verwenden */
}

/* === Komponenten-Stile === */

/* --- Karten --- */
.card {
    border: 1px solid #dee2e6;
    background-color: #fff;
    border-radius: 0.375rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative; /* Wichtig für Badges */
}
.row > [class^='col'] > .card {
     height: 100%;
}
#profile-content .row > [class^='col'] > .card,
.admin-body form .row > [class*='col-'] > .card {
    height: auto;
}

.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.card-content {
    margin-bottom: 1rem;
    min-height: 60px;
    flex-grow: 1;
    max-height: 120px; /* Begrenzt auf ca. 5 Zeilen (24px pro Zeile) */
    overflow: hidden;
}
.card-title.h5 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.card-text {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.5;
}

/* Spezielle Behandlung für Event-Karten */
.event-card .card-text {
    min-height: 3em; /* Mindesthöhe für 2 Zeilen */
}
.card-footer-info {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem; /* Abstand zwischen Standort und Preis */
}
.card img.card-img-top {
    height: 180px;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}
.event-card, .listing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.premium-card {
    border: 2px solid gold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-link-wrapper {
    display: block; height: 100%; text-decoration: none; color: inherit;
    border-radius: 0.375rem; transition: box-shadow 0.3s ease;
}
.card-link-wrapper:hover, .card-link-wrapper:focus { text-decoration: none; outline: none; }
.card-link-wrapper:hover .event-card,
.card-link-wrapper:hover .listing-card {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.card-link-wrapper:focus-visible .card {
     box-shadow: 0 0 0 0.25rem rgba(197, 90, 0, 0.5);
     outline: none;
}
.premium-swiper .card-link-wrapper:hover .premium-card {
    transform: scale(1.03);
    z-index: 15;
    box-shadow: none;
}

/* --- Bild Platzhalter --- */
.card-img-placeholder {
    height: 180px;
    width: 100%;
    background-color: #e9ecef;
    color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}
.card-img-placeholder .placeholder-icon { font-size: 3rem; line-height: 1; }
.main-listing-placeholder {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    background-color: #f8f9fa;
    color: #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    padding: 0;
}
.main-listing-placeholder .placeholder-icon-detail { font-size: 5rem; line-height: 1; }
.profile-page-avatar-placeholder {
    width: 150px; height: 150px; background-color: #e9ecef; color: #adb5bd;
    align-items: center; justify-content: center; border-radius: 50%;
    vertical-align: middle; margin-bottom: 1rem;
}
.profile-page-avatar-placeholder .bi-person-fill { font-size: 4.5rem; line-height: 1; }
.provider-avatar-placeholder {
    width: 50px; height: 50px; background-color: #e9ecef; color: #adb5bd; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%; vertical-align: middle;
}
.provider-avatar-placeholder .bi-person-fill { font-size: 1.8rem; line-height: 1; }
.provider-avatar-img {
    width: 50px; height: 50px; display: inline-block; vertical-align: middle;
    border-radius: 50%; object-fit: cover;
}

/* CSS-Platzhalter Klassen für Konfiguration */
.css-avatar-placeholder {
    width: 50px; height: 50px; background-color: #e9ecef; color: #adb5bd; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%; vertical-align: middle;
}
.css-avatar-placeholder .bi-person-fill { font-size: 1.8rem; line-height: 1; }

.css-listing-placeholder {
    height: 180px;
    width: 100%;
    background-color: #e9ecef;
    color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}
.css-listing-placeholder .placeholder-icon { font-size: 3rem; line-height: 1; }


/* --- Badges & Tags --- */
.premium-badge {
    position: absolute; top: 10px; right: 10px; background-color: gold;
    color: #000000; font-weight: bold; padding: 4px 8px;
    border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1;
    font-size: 0.75rem;
}
.category-badge {
    position: absolute; top: 10px; left: 10px;
    background-color: var(--category-badge-bg, #6c757d);
    color: white; font-weight: normal; padding: 4px 8px;
    border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 2; font-size: 0.75rem; max-width: calc(100% - 90px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.price-tag {
    font-weight: bold; color: var(--primary-color); background-color: #ffffff;
    padding: 3px 8px; border-radius: 5px; border: 1px solid var(--primary-color);
    font-size: 0.9rem; white-space: nowrap; line-height: normal; display: inline-block;
    min-height: 1.76em; display: inline-flex; align-items: center;
}
.price-tag-placeholder {
    border-color: transparent !important; 
    background-color: transparent !important;
    color: transparent !important; 
    cursor: default; 
    user-select: none;
    display: none !important; /* Komplett ausblenden */
}
.price-container { 
    min-height: 1.76em; 
    display: flex; 
    align-items: center;
    flex-shrink: 0; /* Verhindert, dass der Preis schrumpft */
}

/* Neue Styles für bessere Standort-Darstellung */
.location-container {
    flex-grow: 1;
    min-width: 0; /* Wichtig für text-truncate */
    overflow: hidden;
    max-width: calc(100% - 120px); /* Platz für den Preis reservieren */
}

.location-container small {
    display: block;
    white-space: nowrap; /* Kein Zeilenumbruch - alles in einer Zeile */
    overflow: hidden; /* Versteckt überlaufenden Text */
    text-overflow: ellipsis; /* Kürzt mit "..." bei Bedarf */
    max-width: 100%;
    font-size: 0.75rem; /* Kleinere Schrift für kompaktere Darstellung */
    line-height: 1.2;
}

/* Sicherstellen, dass der Preis immer sichtbar bleibt */
.price-container {
    position: relative;
    z-index: 2;
}

.price-tag {
    position: relative;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Leichter Schatten für bessere Sichtbarkeit */
}

/* Responsive Anpassungen für mobile Geräte */
@media (max-width: 575px) {
    .card-footer-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        min-height: auto;
        padding-top: 0.5rem;
    }
    
    .location-container {
        order: 1;
        width: 100%;
        margin-bottom: 0.25rem;
        max-width: 100%; /* Auf mobilen Geräten volle Breite nutzen */
    }
    
    .price-container {
        order: 2;
        align-self: flex-end;
    }
    
    .location-container small {
        font-size: 0.7rem; /* Noch kleinere Schrift auf mobilen Geräten */
        white-space: nowrap; /* Kein Zeilenumbruch auch auf mobilen Geräten */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .price-tag {
        font-size: 0.8rem; /* Kompakterer Preis auf mobilen Geräten */
        padding: 2px 6px;
    }
}

@media (max-width: 767px) {
    .card-footer-info {
        gap: 0.4rem;
    }
    
    .location-container small {
        font-size: 0.72rem;
        white-space: nowrap; /* Kein Zeilenumbruch auch auf Tablets */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .price-tag {
        font-size: 0.85rem;
        padding: 2px 7px;
    }
}

.event-date {
    font-size: 0.85rem; color: #6c757d; margin-bottom: 0.5rem;
    min-height: 1.4em;
}
.event-date i { margin-right: 0.3rem; }


/* --- Suchbox, Hero, Kategorie --- */
.search-box { background-color: var(--light-orange); border-radius: 10px; padding: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.hero-with-accent { background-color: var(--dark-accent); color: white; }
.category-link { background-color: #fff; transition: all 0.2s ease-in-out; box-shadow: 0 1px 3px rgba(0,0,0,0.05); color: #212529; border: 1px solid #dee2e6; text-align: left; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-radius: 0.375rem; text-decoration: none; }
.category-link:hover { background-color: #ffffff; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: var(--primary-color); }
.category-link:hover .category-icon { color: var(--primary-hover); }
.category-link:hover span:not(.badge) { color: var(--primary-color); }
.category-link .category-icon { color: var(--primary-color); font-size: 1.1rem; transition: color 0.2s ease-in-out; width: 1.5em; text-align: center; margin-right: 0.5rem; }
.category-link .badge { font-size: 0.75rem; padding: 0.3em 0.6em; background-color: #e9ecef; color: #495057; border-radius: 50rem; transition: all 0.2s ease-in-out; }
.category-link:hover .badge { background-color: var(--primary-color); color: white; }

/* --- Premium Swiper --- */
.swiper-container-outer { position: relative; padding: 0 25px; margin: 0 -15px; }
.premium-swiper { padding: 10px 10px; position: static; margin-bottom: 1rem; overflow: hidden; }
.premium-swiper .swiper-slide { height: auto; display: flex; align-items: stretch; padding: 5px; box-sizing: border-box; }
.premium-swiper .swiper-slide > .card-link-wrapper { width: 100%; height: 100%; }
.swiper-container-outer .swiper-button-prev,
.swiper-container-outer .swiper-button-next {
    color: var(--primary-color); background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%; width: 40px; height: 40px; top: 50%; transform: translateY(-50%);
    transition: all 0.2s ease; margin-top: 0; position: absolute; z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.swiper-container-outer .swiper-button-prev::after,
.swiper-container-outer .swiper-button-next::after { font-size: 1rem; }
.swiper-container-outer .swiper-button-prev:hover,
.swiper-container-outer .swiper-button-next:hover { color: white; background-color: var(--primary-hover); }
.swiper-container-outer .swiper-button-prev { left: -35px; }
.swiper-container-outer .swiper-button-next { right: -35px; }
.premium-swiper .swiper-pagination { display: none; }
@media (max-width: 575px) {
    .swiper-container-outer { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
    .premium-swiper { overflow: hidden; }
    .swiper-container-outer .swiper-button-prev,
    .swiper-container-outer .swiper-button-next {
        width: 35px; height: 35px; background-color: rgba(0, 0, 0, 0.4); color: white;
        --swiper-navigation-size: 16px; left: 8px; right: auto; transform: translateY(-50%);
    }
    .swiper-container-outer .swiper-button-next { left: auto; right: 8px; transform: translateY(-50%); }
}

/* --- Footer --- */
footer { background-color: #343a40; color: white; }
footer a { color: #ced4da; text-decoration: none; transition: color 0.2s; }
footer a:hover, footer a:focus { color: white; text-decoration: underline; }
.footer-brand-part1 { color: #ffffff; }
.footer-brand-part2 { color: gold; font-weight: 600; }
/* *** NEU: Style für Premium Link im Footer *** */
footer .premium-cta-link-footer {
    color: gold !important;
    font-weight: bold;
    transition: color 0.2s ease;
}
footer .premium-cta-link-footer:hover,
footer .premium-cta-link-footer:focus {
    color: white !important;
    text-decoration: underline !important;
}

/* --- Barrierefreiheit & Performance --- */
.skip-link { position: absolute; top: -50px; left: 0; background: var(--primary-color); color: white; padding: 8px 15px; z-index: 1100; transition: top 0.3s ease; border-bottom-right-radius: 5px; text-decoration: none; }
.skip-link:focus { top: 0; }
img.lazyload { opacity: 0; transition: opacity 0.5s ease-in-out; }
img.lazyloaded { opacity: 1; }
img.lazyload-error { opacity: 1; border: 2px solid red; background-color: #fdd; }

/* --- Navigation --- */
.navbar.sticky-top { box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1030; }
.navbar-brand {
    padding-top: 0.2rem;
    padding-bottom: 0.4rem;
    padding-right: 0.6rem;
    white-space: nowrap; flex-shrink: 0; text-decoration: none;
}
.brand-icon {
    font-size: 2rem;
    color: #ffffff;
}
.brand-text {
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1;
}
.brand-text-part1 { color: #ffffff; }
.brand-text-part2 { color: gold; }
.navbar-nav .nav-link {
    font-size: 1.2rem;
    padding: 0.7rem 0.9rem;
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
    margin: 0 0.2rem;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: #ffffff; background-color: rgba(255, 255, 255, 0.1); }
.navbar-dark .navbar-nav .nav-link.active { font-weight: bold; }
.navbar .d-flex .btn {
    font-size: 1rem;
}
.navbar .ms-lg-auto .nav-link,
.navbar .ms-lg-auto button,
.navbar .ms-lg-auto .btn { /* Bezieht sich auf Elemente im rechten Container */
    font-size: 1.1rem;
}
#countryDropdownDesktop, #countryModalTrigger {
    font-size: 1.1rem;
}

/* Farbe für Sprach- und Währungs-Dropdowns im Header */
.navbar-dark .nav-item .nav-link.dropdown-toggle {
    color: rgba(255, 255, 255, 0.55);
}

.navbar-dark .nav-item .nav-link.dropdown-toggle:hover,
.navbar-dark .nav-item .nav-link.dropdown-toggle:focus {
    color: rgba(255, 255, 255, 0.75);
}

/* --- Länderauswahl UI --- */
#countryDropdownDesktop .flag-icon, #countryModalTrigger .flag-icon { font-size: 0.9em; vertical-align: middle; }
.dropdown-menu .flag-icon, .country-modal-item .flag-icon { font-size: 1em; vertical-align: middle; margin-right: 0.75rem; }
.dropdown-menu-dark .dropdown-item { cursor: pointer; }
.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.15); }
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active { background-color: var(--primary-color); color: #fff; cursor: default; }
#countryDropdownDesktop { color: rgba(255, 255, 255, 0.75); transition: color 0.2s ease-in-out; padding-top: 0.7rem; padding-bottom: 0.7rem; }
#countryDropdownDesktop:hover, #countryDropdownDesktop:focus { color: #ffffff; }
#countryDropdownMenuDesktop { max-height: 300px; overflow-y: auto; }
#countryModalTrigger { color: rgba(255, 255, 255, 0.75); padding: 0.5rem 1rem; margin: 0.2rem 0; justify-content: start; text-align: left; background: none; border: none; width: 100%; border-radius: 4px; transition: all 0.2s ease-in-out; display: flex; align-items: center; }
#countryModalTrigger:hover, #countryModalTrigger:focus { color: #ffffff; background-color: rgba(255, 255, 255, 0.1); text-decoration: none; }
.country-modal-item { display: flex; align-items: center; width: 100%; padding: 0.75rem 1rem; border: none; background: none; color: #212529; text-align: left; border-bottom: 1px solid #eee; cursor: pointer; }
.country-modal-item:last-child { border-bottom: none; }
.country-modal-item:hover, .country-modal-item:focus { background-color: #f8f9fa; color: #000; text-decoration: none; outline: none; }
.country-modal-item.is-selected { font-weight: bold; background-color: #e9ecef; cursor: default; }
#countrySelectModal .modal-body { padding: 0; max-height: 70vh; overflow-y: auto; }

/* --- Responsive Navigation --- */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav { align-items: center; }
    .navbar-expand-lg .navbar-collapse .ms-lg-auto { align-items: center; } /* Ziel rechten Container */
    #countryModalTrigger { display: none !important; }
    .gap-lg-2 {
        gap: 1.2rem !important;
    }
}
@media (max-width: 991.98px) {
    .navbar-brand { margin-right: 0.5rem !important; }
    .brand-icon { font-size: 1.6rem; margin-right: 0.25rem !important; }
    .brand-text { font-size: 1.4rem; }
    .navbar-collapse { margin-top: 10px; max-height: 75vh; overflow-y: auto; }
    .navbar-nav .nav-link { padding: 0.6rem 1rem; margin: 0.2rem 0; font-size: 1.1rem; }
    #countryDropdownContainer { display: none !important; }
    #countryModalTrigger { display: flex !important; font-size: 1.1rem; }
    .navbar-collapse .ms-lg-auto { margin-top: 1rem; align-items: stretch !important; }
    .navbar-collapse .ms-lg-auto > div { /* Direkte Kind-Divs im rechten Container */
        margin-bottom: 0.5rem;
        width: 100%;
    }
     .navbar-collapse .ms-lg-auto > div:last-child {
        margin-bottom: 0; /* Kein Abstand beim letzten Element */
    }
    .navbar-collapse .ms-lg-auto .btn { /* Alle Buttons im rechten Container */
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
        font-size: 1.05rem;
    }
     .navbar-collapse .ms-lg-auto .d-flex .btn:last-child { /* Letzter Button in Login/Register Gruppe */
         margin-bottom: 0;
    }
    .navbar-collapse .ms-lg-auto .dropdown .nav-link { /* User Dropdown Link */
        padding: 0.6rem 1rem; /* Gleiches Padding wie andere Links */
    }
}


/* === Admin Bereich Stile === */
.admin-body { display: flex; flex-direction: column; min-height: 100vh; padding-top: 56px; background-color: #f8f9fa; }
.admin-body .alert-container { padding: 0; margin: 0; position: relative; z-index: 1021; }
.admin-body .admin-content { padding: 1.5rem; flex: 1; margin-top: 0; }
.admin-body .alert-container .alert { margin-top: 0; margin-bottom: 1rem; border-radius: 0; border: none; border-left: 5px solid; }
.admin-body .alert-container .alert-success { border-left-color: #198754; }
.admin-body .alert-container .alert-danger { border-left-color: #dc3545; }
.admin-body .alert-container .alert-warning { border-left-color: #ffc107; }
.admin-body .alert-container .alert-info { border-left-color: #A04800; }
body.admin-body footer.footer-admin { background-color: #e9ecef; padding-top: 1rem; padding-bottom: 1rem; margin-top: auto; border-top: 1px solid #dee2e6; color: #6c757d; flex-shrink: 0; }
body.admin-body footer.footer-admin a { color: var(--primary-color); }
body.admin-body footer.footer-admin a:hover { color: var(--primary-hover); }
.admin-body .card { margin-bottom: 1.5rem; }
.admin-body .card-header { font-weight: 500; background-color: #e9ecef; border-bottom: 1px solid #dee2e6; }
.admin-body .btn-primary-custom { color: #fff !important; background-color: var(--primary-color); border-color: var(--primary-color); }
.admin-body .btn-primary-custom:hover, .admin-body .btn-primary-custom:focus { color: #fff !important; background-color: var(--primary-hover); border-color: var(--primary-hover); }
.admin-body .text-primary-custom { color: var(--primary-color) !important; }
.admin-body .table-actions .btn { margin-left: 0.25rem; }
.admin-body .table-sm th, .admin-body .table-sm td { padding: 0.4rem; }
.admin-body .caption-top { caption-side: top; text-align: left; color: #6c757d; font-size: 0.875em; padding-bottom: 0.5rem; }
.admin-body .badge { font-size: 0.8em; padding: 0.3em 0.5em; }
/* Admin Nav Icon Padding */
.navbar-nav .nav-link .bi { vertical-align: middle; }
.navbar-nav .nav-link.icon-only { padding-left: 0.75rem; padding-right: 0.75rem; }
/* Admin Tabellen Spaltenbreite */
.admin-body .table th.admin-table-name-col,
.admin-body .table td.admin-table-name-col {
    /* width: 50%; */ /* Entfernt in V8 */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

/* --- Breadcrumb Link Farben --- */
.breadcrumb-item a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease-in-out; }
.breadcrumb-item a:hover, .breadcrumb-item a:focus { color: var(--primary-hover); text-decoration: underline; }
.breadcrumb-item.active { color: #6c757d; }

/* --- Detailseite --- */
.main-listing-image { border: 1px solid #dee2e6; padding: 0; background-color: #fff; }
.image-gallery .img-thumbnail { transition: border-color 0.2s ease-in-out; }
.provider-avatar-link { display: inline-block; flex-shrink: 0; }
.provider-card .card-body .d-flex.align-items-center > div:last-of-type { flex-grow: 1; }

/* --- Sticky Header Scroll Korrektur --- */
#category-section, #premium-section, #events-section, #kleinanzeigen-section, #cta-section { scroll-margin-top: 70px; }
html { scroll-behavior: smooth; }

/* === Bilderupload CSS === */
.upload-container { margin: 20px 0; padding: 20px; font-family: inherit; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem; }
.drop-area { border: 2px dashed #adb5bd; border-radius: 8px; padding: 30px; text-align: center; margin-bottom: 20px; transition: all 0.3s ease; background-color: #fff; }
.drop-area.highlight { border-color: var(--primary-color, #C55A00); background-color: var(--light-orange, #fff8f0); }
.preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; min-height: 100px; padding: 10px; background-color: #fff; border: 1px solid #dee2e6; border-radius: 4px; }
.preview-item { position: relative; width: 100px; height: 100px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; cursor: move; transition: transform 0.2s ease; background-color: #e9ecef; }
.preview-item.dragging { opacity: 0.5; transform: scale(0.95); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-item .remove-btn { position: absolute; top: 4px; right: 4px; background: rgba(220, 53, 69, 0.8); color: white; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 20px; text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: background-color 0.2s ease; }
.preview-item .remove-btn:hover { background: rgba(200, 33, 49, 1); }
.preview-item .position { position: absolute; bottom: 4px; left: 4px; background: rgba(0, 0, 0, 0.6); color: white; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: bold; }
.status { margin-top: 15px; padding: 10px 15px; border-radius: 4px; display: none; font-size: 0.9em; border: 1px solid transparent; }
.status.success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; display: block; }
.status.error { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; display: block; }
.status.info { color: #055160; background-color: #cff4fc; border-color: #b6effb; display: block; }
.file-input-label { display: inline-block; background-color: #e9ecef; padding: 8px 15px; border-radius: 4px; border: 1px solid #ced4da; cursor: pointer; margin-top: 10px; transition: background-color 0.2s ease; }
.file-input-label:hover { background-color: #dee2e6; }
.counter { font-size: 0.875em; color: #6c757d; margin-top: 10px; text-align: right; }

/* === Zeilenumbruch für lange Texte === */
.listing-description, .list-group-item h5, main#main-content h1.h2,
.location-date-section > div:first-child, .admin-body .table td {
    overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;
    -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
.location-date-section > div:first-child { white-space: normal; display: flex; align-items: baseline; }
.location-date-section > div:first-child i { flex-shrink: 0; }
/* .admin-body .table td { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } */ /* Moved into .admin-table-name-col */

/* === Deaktivierter "Verlängern"-Button === */
.list-group-item .btn-outline-success.disabled,
.list-group-item .btn-outline-success:disabled,
.action-buttons .btn-outline-success.disabled,
.action-buttons .btn-outline-success:disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; pointer-events: none;
}
.list-group-item .btn-outline-success.disabled[data-bs-toggle="tooltip"],
.action-buttons .btn-outline-success.disabled[data-bs-toggle="tooltip"] {
    pointer-events: auto !important;
}

/* --- Paginierungs-Styling --- */
.pagination .page-item .page-link {
    color: var(--primary-color); /* Hauptfarbe für normale Links */
    border-color: #dee2e6;
}
.pagination .page-item .page-link:hover {
    color: var(--primary-hover);
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white; /* Textfarbe für aktives Element */
    z-index: 3;
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(197, 90, 0, 0.25); /* Fokusschatten in Hauptfarbe */
}

/* --- Sticky Top Offset --- */
.sticky-lg-top {
    top: 0px; /* Beispiel: Abstand von 80px zum oberen Rand für sticky Sidebar */
}

/* ===== ANPASSUNG FÜR .alert-info AN CORPORATE DESIGN ===== */
.alert-info {
    color: var(--primary-hover) !important; /* Dunkleres Orange für Text (#A04800) */
    background-color: #ffefbb;
    border-color: var(--primary-color) !important; /* Primäres Orange für Rand (#C55A00) */
}

.alert-info .alert-link {
    color: var(--primary-hover); /* Dunkleres Orange auch für Links im Alert */
    font-weight: bold;
    text-decoration: underline;
}

/* Optional: Farben für Icons im Alert anpassen */
.alert-info .bi {
    color: var(--primary-hover); /* Oder var(--primary-color) */
}

/* Optional: Farben für den Schließen-Button anpassen */
.alert-info .btn-close {
    filter: invert(40%) sepia(80%) saturate(2000%) hue-rotate(15deg) brightness(90%) contrast(100%); /* Versucht, den Button orange zu färben */
}
.alert-info .btn-close:hover {
    filter: invert(30%) sepia(90%) saturate(2500%) hue-rotate(10deg) brightness(85%) contrast(110%); /* Dunkleres Orange beim Hover */
}
.alert-info .btn-close:focus {
     box-shadow: 0 0 0 0.25rem rgba(197, 90, 0, 0.25); /* Orangener Fokus-Schatten */
}
/* ===== ENDE ANPASSUNG .alert-info ===== */

/* === Nachrichten-Bubbles (Angepasst an dein altes Design) === */

/* Basis-Stil für den äußeren Container jeder Bubble (enthält Avatar und .message-content) */
.message-bubble {
    display: flex;
    align-items: center;     /* Geändert für vertikale Zentrierung */
    margin-bottom: 10px;
    max-width: 75%;
    word-wrap: break-word;
}

.message-bubble.sender {
    margin-left: auto;           /* Bubble rechts ausrichten */
    flex-direction: row-reverse; /* Avatar rechts vom Inhalt */
}

.message-bubble.receiver {
    margin-right: auto;          /* Bubble links ausrichten */
    /* flex-direction: row; ist Standard und kann weggelassen werden */
}

/* Das .message-content Div ist die sichtbare "Blase" mit dem Text und Meta-Infos */
.message-content {
    padding: 10px 15px;                            /* Wie dein altes .message-bubble padding */
    border-radius: 15px;                           /* Wie dein altes .message-bubble border-radius */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);         /* Wie dein altes .message-bubble box-shadow */
    flex-grow: 1;                                  /* Nimmt den verfügbaren Platz neben dem Avatar ein */
    /* WICHTIG: Keine allgemeine background-color hier setzen! */
}

/* Sender-Nachrichten (Deine Nachrichten) - Farben und Textausrichtung */
.message-bubble.sender .message-content {
    background-color: var(--sender-bubble-background); /* Deine CD-Farbe #FFF3E0 */
    border: 1px solid var(--sender-bubble-border);       /* Deine CD-Farbe #FFE0B2 */
    color: var(--sender-bubble-text);                    /* Deine CD-Farbe #5D4037 */
    text-align: right;                                   /* Wie dein altes .message-bubble.sender text-align */
}

/* Empfänger-Nachrichten (Nachrichten des Chatpartners) - Farben und Textausrichtung */
.message-bubble.receiver .message-content {
    background-color: #f1f3f5;                           /* Deine alte Empfänger-Hintergrundfarbe */
    border: 1px solid #dee2e6;                           /* Dein alter Empfänger-Rand */
    color: var(--bs-body-color, #212529);                /* Standard Textfarbe (wie alt) */
    text-align: left;                                    /* Wie dein altes .message-bubble.receiver text-align */
}

/* Absätze innerhalb der Nachrichtenblase (der eigentliche Nachrichtentext) */
.message-content p {
    margin-bottom: 0; /* Verhindert zusätzlichen Abstand (wie dein altes CSS) */
    /* Textfarbe wird von .message-bubble.sender/receiver .message-content geerbt */
}

/* Meta-Informationen (Name, Zeitstempel) */
.message-meta {
    font-size: 0.75rem;      /* Wie dein altes CSS */
    color: #6c757d;           /* Wie dein altes CSS (Bootstrap Text-muted) */
    margin-top: 5px;         /* Wie dein altes CSS */
    /* text-align wird durch die darüberliegenden .sender/.receiver .message-content Regeln gesteuert */
}
/* Explizite Textausrichtung für Meta-Infos, falls nötig (sollte aber durch Vererbung funktionieren) */
.message-bubble.sender .message-meta {
    text-align: right;
}
.message-bubble.receiver .message-meta {
    text-align: left;
}


/* Avatar-Styling (angepasst an dein altes Design und aktuelle Klassennamen im PHP) */
/* Der Container, der das <img> oder das Icon <i class="avatar-icon-message"> hält */
.avatar-container-message {
    width: 30px;
    height: 30px;
    border-radius: 50%;      /* Stellt die runde Form sicher */
    background-color: #e9ecef; /* Hintergrundfarbe wie bei my_profile.php */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;        /* Stellt sicher, dass das Icon bei Übergröße abgeschnitten wird und die Rundung beibehält */
}

.message-bubble.sender .avatar-container-message {
    margin-left: 10px;       /* Wie dein altes .message-bubble.sender .avatar-container */
}

.message-bubble.receiver .avatar-container-message {
    margin-right: 10px;      /* Wie dein altes .message-bubble.receiver .avatar-container */
}

.avatar-container-message img { /* Das Profilbild selbst */
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Stellt sicher, dass das Bild den Container füllt */
}

.avatar-container-message .avatar-icon-message { /* Das Fallback-Icon (z.B. Bootstrap Icon) */
    font-size: 1.1rem;       /* Angepasste Größe für den 30px Container, z.B. 1.1rem (oder 1.0rem) */
    color: #adb5bd;          /* Icon-Farbe wie bei my_profile.php */
    line-height: 1;          /* Verhindert zusätzlichen vertikalen Platz durch Zeilenhöhe */
}

/* === Ende Nachrichten-Bubbles === */

/* === Konversationsliste Links === */

/* Allgemeine Stile für ein Listenelement in der Konversationsliste */
.conversation-item-selector {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Ungelesene Nachrichten (Bootstrap .list-group-item-warning) */
/* Hier kannst du bei Bedarf die Standardfarben von .list-group-item-warning überschreiben */
/* Beispiel:
.conversation-item-selector.list-group-item-warning,
#conversationListContainer .list-group-item.list-group-item-warning { // Spezifischer für den Container
    background-color: var(--conversation-unread-bg, #fff3cd); // Deine CD-Farbe oder Bootstrap-Standard
    border-color: var(--conversation-unread-border, #ffeeba); // Passender Rand
    color: var(--conversation-unread-text, #664d03); // Passende Textfarbe
}
*/

/* Markierung für die AKTIV ausgewählte Konversation in der linken Liste */
/* Diese Regel soll die Bootstrap-Standards überschreiben. */
#conversationListContainer .list-group-item-action.conversation-item-selector.active {
    /* Höhere Spezifität durch Hinzunahme von .list-group-item-action */
    background-color: #f8f9fa; /* Neutraler Hintergrund */
    color: var(--bs-body-color, #212529); /* Standard Textfarbe */
    border-left: 4px solid var(--primary-color) !important; /* Dein CD-Orange, !important als letzte Instanz */
    border-top: 1px solid #dee2e6;    /* Standard Rand oben */
    border-right: 1px solid #dee2e6;   /* Standard Rand rechts */
    border-bottom: 1px solid #dee2e6; /* Standard Rand unten */
    box-shadow: none; /* Entfernt eventuelle Bootstrap-Schatten für .active */
    z-index: 2; /* Muss höher sein als nicht-aktive Elemente, falls Überlappungsprobleme */
}

/* Wichtig: Die "ungelesen" Markierung (.list-group-item-warning) soll nicht durch .active komplett überschrieben werden,
   wenn eine ungelesene Nachricht aktiv ist. Sie soll BEIDES sein.
   Daher setzen wir den Hintergrund für .active neutral und der Rand ist der Hauptindikator.
   Wenn eine ungelesene aktive Nachricht ihren gelben Hintergrund behalten soll + den orangen Rand: */
#conversationListContainer .list-group-item-action.conversation-item-selector.list-group-item-warning.active {
    background-color: var(--conversation-unread-bg, #fff3cd); /* Behalte den "ungelesen" Hintergrund */
    /* border-left ist schon von der vorherigen Regel gesetzt */
    /* Textfarbe anpassen, falls nötig für Kontrast auf dem "ungelesen" Hintergrund */
    /* color: var(--conversation-unread-text-active, var(--conversation-unread-text)); */
}


/* Hover-Effekte (angepasst) */
.conversation-item-selector:not(.active):not(.list-group-item-warning):hover {
    background-color: #f0f0f0;
}

.conversation-item-selector.list-group-item-warning:not(.active):hover {
    filter: brightness(92%);
}

/* Die Markierung für die AKTIV ausgewählte Konversation bleibt wie zuvor definiert: */
#conversationListContainer .list-group-item.active {
    background-color: #f8f9fa;
    color: var(--bs-body-color);
    border-left: 4px solid var(--primary-color);
    border-right: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    z-index: 1;
}

/* Der Container für die Nachrichten, geladen in #conversationContent */
#messageContainerOpenConv {
  flex-grow: 1; /* Nimmt den meisten Platz in #conversationContent ein */
  overflow-y: auto; /* Ermöglicht Scrollen für Nachrichten */
  padding: 1rem;    /* Innenabstand für die Nachrichten */
  background-color: #ffffff; /* Hintergrund für den Nachrichtenbereich, falls gewünscht */
}

/* Das Formular zum Senden von Nachrichten, geladen in #conversationContent */
#sendMessageFormOpenConv {
  flex-shrink: 0; /* Verhindert, dass das Formular schrumpft */
  padding: 0.75rem 1rem;
  background-color: #f8f9fa; /* Heller Hintergrund zur Abgrenzung */
  border-top: 1px solid #dee2e6; /* Eine Linie über dem Formular */
  display: flex; /* Richtet Textarea und Button nebeneinander aus */
  align-items: flex-start; /* Nützlich, wenn die Textarea wachsen kann (vertikale Ausrichtung oben) */
  gap: 0.5rem; /* Abstand zwischen Textarea und Button */
}

/* Die Textarea für die Nachrichteneingabe */
#message_text_open_conv {
  flex-grow: 1; /* Nimmt den verfügbaren Platz im Formular ein */
  border-radius: 0.25rem; /* Abgerundete Ecken */
  border: 1px solid #ced4da; /* Standard-Bootstrap-Rand */
  padding: 0.375rem 0.75rem; /* Innenabstand */
  min-height: 40px;  /* Mindesthöhe, ca. eine Zeile */
  max-height: 120px; /* Maximale Höhe, bevor die Textarea selbst scrollt (ca. 5-6 Zeilen) */
  resize: none;      /* Deaktiviert manuelles Ändern der Größe durch den Benutzer */
  overflow-y: auto;  /* Scrollbalken innerhalb der Textarea, wenn der Text max-height übersteigt */
  line-height: 1.5;  /* Zeilenhöhe für bessere Lesbarkeit */
  font-family: inherit; /* Schriftart vom Body übernehmen */
  font-size: inherit;   /* Schriftgröße vom Body übernehmen */
}

/* Der Sende-Button im Formular */
#sendMessageFormOpenConv button[type="submit"] {
  flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
  /* Du solltest hier ggf. Bootstrap-Klassen wie 'btn btn-primary-custom' im
     HTML von get_conversation_content.php hinzufügen oder hier Basis-Button-Stile definieren. */
}

/* Stellt sicher, dass der Placeholder (falls keine Konversation offen ist)
   den Platz in #conversationContent korrekt ausfüllt. */
#conversationPlaceholder {
    /* display: flex; ist bereits eine Klasse, ggf. sicherstellen */
    flex-grow: 1; /* Nimmt den gesamten Platz ein, wenn keine #conversationContent da ist */
    /* align-items-center und justify-content-center sind bereits Klassen */
}

.conversation-item-main-content {
    flex-grow: 1; /* Erlaubt dem linken Teil zu wachsen */
    min-width: 0;  /* ABSOLUT WICHTIG, damit text-truncate in Flex-Kindern richtig funktioniert und der Block schrumpfen kann! */
    margin-right: 8px; /* Oder dein gewünschter Abstand zum rechten Block */
    overflow: hidden; /* Verhindert, dass übergroßer Inhalt den Block sprengt, bevor text-truncate auf den Kindern wirken kann */
}

/* Stellt sicher, dass lange Wörter innerhalb der Texte umgebrochen werden können,
   damit sie nicht die text-truncate Logik oder das Schrumpfen des Containers behindern. */
.conversation-item-main-content .conversation-partner-name,
.conversation-item-main-content .conversation-listing-title,
.conversation-item-main-content .conversation-last-message-preview {
    word-break: break-word; /* Bevorzugt, bricht nur wenn nötig und an sinnvollen Stellen */
    overflow-wrap: break-word; /* Alternative/Ergänzung */
}

/* Schriftgröße der Hauptkategorie-Titel im Admin-Accordion anpassen (Angleichung an Event-Kategorien) */
#categoryAccordion .accordion-header .sortable-main-handle strong {
    font-size: 1.05rem; /* Exakte Angleichung an die Body-Schriftgröße, die von den Events geerbt wird */
    font-weight: bold; /* Stellt die fette Schrift wieder her, wie bei den Event-Kategorien */
}

/* Icon-Größe in den Hauptkategorie-Titeln anpassen */
#categoryAccordion .accordion-header .sortable-main-handle i {
    font-size: 1.2rem; /* Icons proportional leicht größer als der Text für eine gute Balance */
}

/* Kleinanzeigen-Kategorie-Namen und Griff-Icon im Accordion-Header vertikal zentrieren */
#categoryAccordion .accordion-header .sortable-main-handle {
    display: flex; /* Macht diesen Div zu einem Flex-Container */
    align-items: center; /* Richtet die direkten Kinder (das Icon und den <strong>-Text) vertikal mittig aus */
    /* Das 'p-3' für den Innenabstand kommt bereits von der Bootstrap-Klasse im HTML und sorgt für die Höhe. */
}

/* Overlay-Spinner bis zum vollständigen Laden */
#page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 9999;
}

/* Weißer Hintergrund für den Overlay-Text für besseren Kontrast */
#page-overlay-text {
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

/* Show/hide password toggle icon */
.password-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: #6c757d; /* Angepasst an ein dunkleres Grau für bessere Sichtbarkeit */
    cursor: pointer;
    user-select: none;
    padding: 0.25rem;
    z-index: 5; /* Stellt sicher, dass das Icon über dem Input-Feld liegt */
}

.password-toggle:hover,
.password-toggle.active {
    color: #6c757d; /* dunkler bei Hover oder aktivem Zustand */
}

/* Verschiebe Auge nur bei fehlerhaften Eingabefeldern */
.position-relative .form-control.is-invalid + .password-toggle {
    right: 2.2rem; /* Weiter nach links verschieben, um Platz für das Bootstrap-Fehlericon zu machen */
}

/* Verschiebe Auge bei gültigen Eingabefeldern, um Platz für das Validierungsicon zu machen */
.position-relative .form-control.is-valid + .password-toggle {
    right: 2.2rem; /* Weiter nach links verschieben, um Platz für das Bootstrap-Validierungsicon zu machen */
}

/* === Admin-Header: Einheitlicher Hover- und Abstands-Stil === */
.admin-body .navbar-nav .nav-link#currencyDropdownAdminDesktop,
.admin-body .navbar-nav .nav-link#adminUserDropdown {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.admin-body .navbar-nav .nav-link#currencyDropdownAdminDesktop:hover,
.admin-body .navbar-nav .nav-link#currencyDropdownAdminDesktop:focus,
.admin-body .navbar-nav .nav-link#adminUserDropdown:hover,
.admin-body .navbar-nav .nav-link#adminUserDropdown:focus {
    color: #ffffff;
    background-color: transparent; /* Verhindert Bootstrap-Hover-Hintergrund */
}

/* === Override für Dropdown-Pfeil-Abstand === */
.dropdown-toggle::after {
    margin-left: .5em !important;
}

/* Override für Hauptbild-Preisanzeige */
.image-gallery .price-section .price-tag {
    font-size: 1.2rem;
}

/* Override für Preis oberhalb der Location-Section */
.detail-price .price-tag {
    font-size: 1.1rem;
}

/* Nachricht-Badge im Header */
#message-notification-badge {
    font-size: 0.65rem;
    line-height: 1;
    padding: 0.25em 0.4em;
    transform: translate(25%, -25%) !important;
    transform-origin: top right;
}

/* Fix für Adyen Drop-in Kreditkarten-Icons (dritter Versuch) */
.adyen-checkout__card__brands {
    overflow: visible !important;
    height: 27px !important;
}

.adyen-checkout__card__brands__brand-wrapper {
    height: 27px !important;
}

/* Globale Stile für die Anwendung, bereits nach oben verschoben */

/* Verhindert das Flackern des Cursors in einigen Browsern */
.form-control:hover,
textarea:hover {
    cursor: text;
}

/* Deaktiviert störende Übergangseffekte für Formular-Steuerelemente, um Rendering-Fehler zu vermeiden */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"] {
    transition: none !important;
}

/* Autovervollständigung: lebendigere Liste */
.autocomplete-list {
    background-color: var(--light-orange);
    border-radius: 0.5rem;
}
.autocomplete-list .list-group-item {
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 1px solid #ced4da;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    flex-shrink: 0; /* Verhindert, dass Einträge gekürzt werden */
}
.autocomplete-list .list-group-item:last-child {
    border-bottom: none;
}
.autocomplete-list .list-group-item:hover,
.autocomplete-list .list-group-item.active {
    background-color: var(--primary-hover);
    color: #fff;
}
.autocomplete-list .list-group-item:hover .highlight,
.autocomplete-list .list-group-item.active .highlight {
    color: #fff;
}
.autocomplete-list .highlight {
    font-weight: bold;
    color: var(--primary-hover);
}
.autocomplete-list .icon {
    margin-right: 0.5rem;
    color: var(--primary-color);
}
.autocomplete-list .list-group-item:hover .icon,
.autocomplete-list .list-group-item.active .icon {
    color: #fff;
}

/* Autocomplete-Liste absolut positionieren, damit sie das Layout nicht verschiebt */
.position-relative .autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    /* Liste passt sich an Inhalt an, keine horizontale Scrollbar */
    min-width: 100% !important;
    width: max-content !important;
    overflow-x: visible !important;
    overflow-y: auto;
    z-index: 1000;
    max-height: 250px;
    background-color: var(--light-orange);
    border: 1px solid #ccc;
    border-top: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 0.5rem !important;
    overflow: hidden !important; /* verhindert, dass Einträge über die Ecken hinausragen */
}
.autocomplete-list .list-group-item {
    border-radius: 0 !important; /* Items selbst nicht abrunden */
}
.autocomplete-list .list-group-item:first-child {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}
.autocomplete-list .list-group-item:last-child {
    border-bottom-left-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

/* Valid-Icon Positionierung im Location-Feld */
.position-relative .form-control.is-valid + #locationValidIcon {
    right: 1rem; /* Positioniert den grünen Haken im Input ganz rechts */
}

/* Override für die 'Filter & Kategorien' Karte: Höhe auf auto setzen */
.row > [class^='col'] > .card.sticky-lg-top {
    height: auto;
    overflow: visible !important;
}

/* Fix für PLZ/Ort-Feld in input-group - alle Ecken abrunden */
.input-group .form-control#location {
    border-radius: 0.375rem !important;
}

/* Sicherstellen, dass auch die Validierungsklassen korrekt gerundet sind */
.input-group .form-control#location.is-valid,
.input-group .form-control#location.is-invalid {
    border-radius: 0.375rem !important;
}

/* Überschreiben der Bootstrap text-info Klasse mit der benutzerdefinierten Farbe */
.text-info {
    color: #A04800 !important;
}

/* Überschreiben der Bootstrap btn-outline-info Klasse mit der benutzerdefinierten Farbe */
.btn-outline-info {
    color: #A04800 !important;
    border-color: #A04800 !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: #fff !important;
    background-color: #A04800 !important;
    border-color: #A04800 !important;
}

.btn-outline-info:disabled,
.btn-outline-info.disabled {
    color: #A04800 !important;
    background-color: transparent !important;
    border-color: #A04800 !important;
    opacity: 0.65 !important;
}

/* Validation message Styling - sicherstellen, dass es nicht abgeschnitten wird */
#validation-message {
    position: relative;
    z-index: 1;
    overflow: visible;
    word-wrap: break-word;
    word-break: break-word;
}

#validation-message .alert {
    margin: 0;
    border-radius: 0.375rem;
    overflow: hidden;
}

#validation-message .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Sicherstellen, dass das Icon und der Text korrekt angezeigt werden */
#validation-message .bi-info-circle {
    flex-shrink: 0;
}

#validation-message #validation-text-content {
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* Zusätzliche Regeln für die Card-Integration */
.card-body #validation-message {
    margin-bottom: 0;
    overflow: visible;
}

.card-body #validation-message .alert {
    border: 1px solid #f5c6cb;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Sicherstellen, dass das Element nicht über die Card hinausragt */
.card {
    overflow: visible;
}

.card-body {
    overflow: visible;
}

/* Validierungsrahmen für PLZ/Ort-Feld in der Startseiten-Suche */
.search-box-navbar .form-control-sm.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}
.search-box-navbar .form-control-sm.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}