/* ==========================================================================
   GEMEINDEINFOS.DE - STYLESHEET
   ========================================================================== */

/* ==========================================================================
   1. GRUNDLAGEN
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 60px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background-color: #1F1F1F;
    color: #E0E0E0;
    margin: 0;
    padding: 0;
    padding-top: 60px;
    min-height: 100vh;
    line-height: 1.6;
}

/* Cookiebot darf keinen Layout-Shift verursachen */
#CybotCookiebotDialog,
#CookiebotWidget {
    position: fixed !important;
    z-index: 10000 !important;
}

/* ==========================================================================
   2. NAVIGATION (aus navi.php)
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #2B2B2B;
	border-top: 1px solid #64B5F6;
    border-bottom: 1px solid #64B5F6;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 40px;
}

.site-header .logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

.site-nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-item {
    position: relative;
    color: #E0E0E0;
    text-decoration: none;
    padding: 20px 15px;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.nav-item:hover {
    color: #64B5F6;
}

.nav-item > span {
    display: block;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 10px);
    left: 0;
    background-color: #3C3C3C;
    border: 1px solid #4A4A4A;
    border-radius: 6px;
    min-width: 250px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    padding-top: 10px;
    z-index: 1001;
}

/* Desktop: Dropdown bei Hover */
@media (min-width: 969px) {
    .nav-item:hover .nav-dropdown {
        display: block;
    }
}

.nav-dropdown a {
    display: block;
    padding: 10px 15px;
    color: #E0E0E0;
    text-decoration: none;
    border-bottom: 1px solid #4A4A4A;
    transition: background-color 0.2s;
    white-space: normal;
    word-wrap: break-word;
}

.nav-dropdown a:last-child {
    border-bottom: none;
}

.nav-dropdown a:hover {
    background-color: #4A4A4A;
    color: #64B5F6;
}

/* Scrollbar Styling für Dropdown */
.nav-dropdown::-webkit-scrollbar {
    width: 8px;
}

.nav-dropdown::-webkit-scrollbar-track {
    background: #2A2A2A;
    border-radius: 4px;
}

.nav-dropdown::-webkit-scrollbar-thumb {
    background: #4A4A4A;
    border-radius: 4px;
}

.nav-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #E0E0E0;
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
    padding: 10px;
}

/* ==========================================================================
   3. CONTAINER & LAYOUT
   ========================================================================== */

.container {
    display: flex;
    max-width: 1400px;
    width: 100%;
    margin: 20px auto;
    border-radius: 12px;
    background-color: #2B2B2B;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* ==========================================================================
   4. FILTER-SIDEBAR (index.php)
   ========================================================================== */

.filter-sidebar {
    width: 350px;
    padding: 25px;
    background-color: #3C3C3C;
    border-right: 1px solid #4A4A4A;
    flex-shrink: 0;
    overflow-y: auto;
}

.filter-sidebar h1 {
    color: #64B5F6;
    font-size: 1.8em;
    margin-bottom: 20px;
    margin-top: 0;
}

.filter-group {
    margin-bottom: 20px;
    padding: 10px 0;
}

.filter-group p {
    color: #64B5F6;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0;
}

label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #B0B0B0;
}

input[type="text"], 
input[type="number"], 
select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #555;
    border-radius: 6px;
    background-color: #4A4A4A;
    color: #E0E0E0;
    font-size: 14px;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: #64B5F6;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

input[type="submit"], 
.button-group button, 
#toggle-advanced-btn {
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    font-size: 14px;
}

input[type="submit"] {
    background-color: #64B5F6;
    color: #1F1F1F;
    flex: 1;
}

input[type="submit"]:hover {
    background-color: #42A5F5;
}

.button-group button {
    background-color: #6C757D;
    color: white;
    flex: 1;
}

.button-group button:hover {
    background-color: #5A6268;
}

#toggle-advanced-btn {
    width: 100%;
    background-color: #5A5A5A;
    color: white;
    margin-bottom: 15px;
    margin-top: 10px;
}

#toggle-advanced-btn:hover {
    background-color: #4A4A4A;
}

.export-link {
    display: block;
    text-align: center;
    padding: 10px 15px;
    background-color: #28A745;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s;
    font-weight: bold;
    margin-bottom: 8px;
}

.export-link:hover {
    background-color: #1E7E34;
}

.info-link {
    background-color: #17A2B8;
}

.info-link:hover {
    background-color: #138496;
}

hr {
    border: 0;
    border-top: 1px solid #555;
    margin: 20px 0;
}

/* Autocomplete Container */
.autocomplete-container {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #4A4A4A;
    border: 1px solid #555;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-results.active {
    display: block;
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #555;
    font-size: 0.9em;
}

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

.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: #5A5A5A;
}

.autocomplete-item small {
    color: #B0B0B0;
    display: block;
    font-size: 0.85em;
}

/* ==========================================================================
   5. SUCHERGEBNISSE / HAUPTBEREICH
   ========================================================================== */

.results-main {
    flex-grow: 1;
    padding: 25px;
    overflow-x: auto;
}

.results-main h2 {
    color: #E0E0E0;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #4A4A4A;
    padding-bottom: 10px;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sort-controls select {
    width: auto;
    min-width: 200px;
    margin-bottom: 0;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.results-table th, 
.results-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #4A4A4A;
}

.results-table th {
    background-color: #3C3C3C;
    color: #64B5F6;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    position: sticky;
    top: 0;
    z-index: 10;
}

.results-table tbody tr:not(.details-row):hover {
    background-color: #333333;
}

.results-table tbody tr.details-row {
    background-color: #252525;
    display: none;
}

.results-table tbody tr.details-row.active {
    display: table-row;
	border-left: 3px solid #64B5F6;
}

/* Detail-Toggle Button */
.detail-toggle-btn {
    background: none;
    border: none;
    color: #64B5F6;
    cursor: pointer;
    font-size: 1em;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    transform: rotate(-90deg); /* Standardmäßig nach rechts */
}

.detail-toggle-btn.expanded {
    transform: rotate(180deg);
	color: #28A745;
}

/* Detailansicht Inhalt */
.details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 15px;
    font-size: 0.9em;
}

.detail-item {
    margin-bottom: 10px;
}

.detail-item strong {
    color: #64B5F6;
    display: block;
    margin-bottom: 3px;
    font-size: 0.95em;
}

/* ==========================================================================
   6. PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.page-link {
    padding: 8px 12px;
    background-color: #3C3C3C;
    color: #90CAF9;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s;
    font-size: 0.9em;
}

.page-link:hover {
    background-color: #4A4A4A;
    color: #64B5F6;
}

.page-info {
    padding: 8px 12px;
    color: #B0B0B0;
    font-size: 0.9em;
}

/* ==========================================================================
   7. EINZELSEITEN-WRAPPER (gemeinde.php, reisegebiet.php)
   ========================================================================== */

.page-wrapper {
    max-width: 1400px;
    margin: 20px auto; /* Oben/Unten 20px, links/rechts auto zentriert */
    background-color: #2B2B2B;
    border-radius: 12px;
    padding: 25px;
}

.page-wrapper h1 {
    color: #64B5F6;
    font-size: 2em;
    margin-bottom: 10px;
}

.page-wrapper p {
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Karten-Container */
.map-container {
    margin-top: 20px;
}

.map-container strong {
    color: #64B5F6;
    display: block;
    margin-bottom: 8px;
}

.map-container #map {
    height: 400px;
    width: 100%;
    border-radius: 6px;
}

/* Bilder auf Einzelseiten */
.region-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: auto;
}

.image-license {
    font-size: 0.85em;
    color: #B0B0B0;
    margin-bottom: 20px;
    text-align: center;
}

/* ==========================================================================
   8. FAQ-AKKORDEON (reisegebiet.php)
   ========================================================================== */

.faq-item {
    background: #2A2A2A;
    border: 1px solid #4A4A4A;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.faq-question {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: bold;
    color: #64B5F6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover {
    background: #333333;
}

.faq-arrow {
    transition: transform 0.3s;
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 20px 15px 20px;
}

/* ==========================================================================
   9. INFO-SEITEN (impressum.php, datenschutz.php, export_info.php)
   ========================================================================== */

.info-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background-color: #2B2B2B;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.info-container h1 {
    color: #64B5F6;
    border-bottom: 2px solid #4A4A4A;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.info-container h2 {
    color: #64B5F6;
    margin-top: 30px;
    margin-bottom: 15px;
}

.info-container h3 {
    color: #90CAF9;
    margin-top: 20px;
    margin-bottom: 10px;
}

.info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
}

.info-table th, 
.info-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #4A4A4A;
}

.info-table th {
    background-color: #3C3C3C;
    color: #64B5F6;
    font-weight: 600;
    position: sticky;
    top: 60px;
}

.info-table tr:last-child td {
    border-bottom: none;
}

.info-table td:first-child {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #90CAF9;
    width: 150px;
}

.back-link {
    color: #90CAF9;
    text-decoration: none;
    font-weight: bold;
}

.back-link:hover {
    color: #64B5F6;
    text-decoration: underline;
}

/* ==========================================================================
   10. LINKS (Global)
   ========================================================================== */

a:link {
    color: white;
}

a:visited {
    color: white;
}

a:hover {
    color: white;
}

a:active {
    color: white;
}

/* Spezielle Link-Styles */
a.link-blue {
    color: #90CAF9;
    text-decoration: none;
}

a.link-blue:hover {
    color: #64B5F6;
    text-decoration: underline;
}

/* ==========================================================================
   11. RESPONSIVE DESIGN - MOBILE
   ========================================================================== */

@media (max-width: 968px) {
    /* Navigation Mobile */
    .site-header {
        gap: 20px;
    }
    
    .site-nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #2B2B2B;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 20px;
        overflow-y: auto;
    }
    
    .site-nav.active {
        display: flex;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .nav-item {
        padding: 15px;
        border-bottom: 1px solid #4A4A4A;
    }
    
    .nav-item > span {
        display: block;
        font-weight: bold;
    }
    
    .nav-dropdown {
        position: static;
        display: none;
        max-height: none;
        max-width: none;
        border: none;
        margin-top: 10px;
        padding-left: 20px;
        padding-top: 0;
        box-shadow: none;
        background-color: transparent;
    }
    
    .nav-item.mobile-active .nav-dropdown {
        display: block;
    }

    /* Container & Layout */
    .container {
        flex-direction: column;
        margin: 10px;
        border-radius: 8px;
    }

    .filter-sidebar {
        width: 100%;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #4A4A4A;
    }

    .results-main {
        padding: 15px;
    }

    /* Tabelle Mobile */
    .results-table {
        border: 0;
        display: block;
        width: 100%;
    }

    .results-table thead {
        display: none;
    }

    .results-table tbody {
        display: block;
        width: 100%;
    }

    .results-table tr {
        display: block;
        width: 100%;
    }

    .results-table td {
        display: block;
        width: 100%;
    }

    .results-table tbody > tr:not(.details-row) {
        margin-bottom: 15px;
        border: 1px solid #4A4A4A;
        border-radius: 8px;
        background-color: #3C3C3C;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .results-table tbody > tr:not(.details-row) > td {
        text-align: right;
        padding: 8px 10px;
        position: relative;
        border-bottom: 1px solid #4A4A4A;
        padding-left: 50%;
        width: 100%;
        box-sizing: border-box;
    }

    .results-table tbody > tr:not(.details-row) > td:last-child {
        border-bottom: none;
    }

    .results-table tbody > tr:not(.details-row) > td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: #64B5F6;
        text-align: left;
    }

    .results-table tbody > tr:not(.details-row) > td:first-child {
        border-bottom: none;
        padding: 0;
        padding-left: 0;
        text-align: center;
    }

    .results-table tbody > tr:not(.details-row) > td:first-child:before {
        content: none;
    }
	
    /* Gemeindename rechtsbündig */
    .results-table tbody > tr:not(.details-row) > td:nth-child(2) {
        text-align: right;
		hyphens: auto;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        font-size: 0.85em; /* Kleinere Schrift für Mobile */
        line-height: 1.3; /* Engerer Zeilenabstand */
    }
    
    /* Noch kleinere Schrift für sehr lange Namen */
    .results-table tbody > tr:not(.details-row) > td:nth-child(2):has(text) {
        font-size: clamp(0.75em, 2vw, 0.9em); /* Dynamische Größe */
    }

    .results-table tbody > tr.details-row {
        display: none;
        width: 100%;
        margin-bottom: 15px;
        border: none;
        padding: 0;
        background-color: transparent;
    }

    .results-table tbody > tr.details-row.active {
        display: block;
        width: 100%;
    }

    .results-table tbody > tr.details-row > td {
        display: block;
        width: 100%;
        padding: 10px;
        border: 1px solid #4A4A4A;
        border-radius: 8px;
        background-color: #252525;
        text-align: left;
        box-sizing: border-box;
        padding-left: 10px;
    }

    .results-table tbody > tr.details-row > td:before {
        content: none;
        display: none;
    }

    .details-content {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .detail-item {
        width: 100%;
        box-sizing: border-box;
    }

    .sort-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .sort-controls select {
        width: 100%;
    }

    /* Page Wrapper Mobile */
    .page-wrapper {
        margin: 10px;
        padding: 15px;
        border-radius: 8px;
    }

    .page-wrapper h1 {
        font-size: 1.5em;
    }

    .map-container #map {
        height: 300px !important;
    }

    /* Info Container Mobile */
    .info-container {
        margin: 20px 10px;
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .filter-sidebar {
        padding: 15px;
    }

    .results-main {
        padding: 10px;
    }

    .pagination {
        gap: 5px;
    }

    .page-link,
    .page-info {
        padding: 6px 8px;
        font-size: 0.85em;
    }

    .page-wrapper {
        padding: 10px;
    }

    .info-container {
        padding: 15px;
    }
}

/* ==========================================================================
   12. PRINT STYLES
   ========================================================================== */

@media print {
    .site-header,
    .nav-dropdown,
    .mobile-menu-btn,
    .filter-sidebar,
    .export-link,
    .pagination {
        display: none !important;
    }

    body {
        padding-top: 0;
        background-color: white;
        color: black;
    }

    .container,
    .page-wrapper,
    .info-container {
        box-shadow: none;
        border-radius: 0;
        max-width: 100%;
    }
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.site-footer {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 20px 0;
    border-top: 1px solid #64B5F6;
    text-align: center;
}

.footer-content {
    color: #B0B0B0;
    font-size: 0.9em;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   14. GENERIERTE BILDER IN GEMEINDE.PHP
   ========================================================================== */