/* * BIOS MAIN STYLESHEET
 * Struktur: Fonts > Base > Layout > Components > Cards > Helpers > Media Queries
 */

/* ==========================================================================
   1. FONTS (IBM Plex Serif)
   ========================================================================== */
@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Bold.woff2') format('woff2');
    font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */
body {
    font-family: 'IBM Plex Serif', serif;
    font-weight: 400;
    color: #2d1b16;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'IBM Plex Serif', serif;
    font-weight: 600;
    line-height: 1.2;
}

h1 { text-transform: uppercase; margin-bottom: 1.5rem; }

a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

/* ==========================================================================
   3. LAYOUT WRAPPERS
   ========================================================================== */
.boxed-content, .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.content_section {
    position: relative;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
}

.hero-slider-full {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* Hero & Single View Slider Fix */
.hero-slider-full .slider_wrapper figure.slide img {
    width: 100%;
    height: 80vh; /* Oder die von dir gewünschte Höhe */
    object-fit: cover !important;
    display: block;
}

/* Fallback für das allgemeine Figure-Tag in den Slidern */
.slider_wrapper figure {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Der Explorer-Container (Zwei Spalten Layout) */
.bios-poi-explorer {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100vw;
}

.bios-event-calendar-main {
    max-width: 1200px;
    margin: 0 auto;
}

.bios-sidebar {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #f9f9f9;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}

#poi-map-container {
    flex: 1;
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    min-height: 400px;
    z-index: 10;
}

#bios-map {
    height: 100% !important;
    width: 100%;
    min-height: 600px;
}

/* ==========================================================================
   4. COMPONENTS (Buttons, Forms, Tags)
   ========================================================================== */
.bios-input, .bios-select {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #fff;
    width: 100%;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.bios-input:focus, .bios-select:focus {
    outline: none;
    border-color: #78a22f;
}

.bios-button-secondary {
    background: #fff;
    border: 1px solid #78a22f;
    color: #78a22f;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.bios-button-secondary:hover {
    background: #78a22f;
    color: #fff;
}

.poi-category-tag, .event-category-tag {
    font-size: 0.85rem;
    background-color: #cade7e; /* rgba(202, 222, 126) */
    color: #2d1b16;
    padding: 0.2rem 0.8rem;
    border-radius: 5rem;
    display: inline-block;
}

/* ==========================================================================
   5. CARDS (POI, Event & Accommodation)
   ========================================================================== */
.poi-result-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.poi-horizontal-card, .event-horizontal-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    transition: box-shadow 0.3s;
}

.poi-horizontal-card:hover, .event-horizontal-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.poi-card-img, .event-card-img {
    flex: 0 0 150px;
    max-width: 150px;
    display: flex;
}

.poi-card-img figure, .event-card-img figure {
    margin: 0;
    padding: 0;
}

.responsive-poi-img, .responsive-event-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.poi-card-content, .event-card-content {
    flex: 1;
    padding: 15px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-filter-bar {
    background-color: #cadece;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Leichter Schatten für mehr Tiefe */
}

/* ==========================================================================
   POI FILTER PANEL REDESIGN
   ========================================================================== */
.poi-filter-panel {
    background-color: #cadece;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.poi-filter-top-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Standort Button & Radius */
.geo-controls {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    width: 100%;
}

#location-status {
    font-size: 0.75rem;
    color: #4a5c39;
    margin: 5px 0 0 0;
    min-height: 1.2em;
}

/* Checkbox Grid für saubere Ausrichtung */
.cat-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 5px;
}

/* Die Kategorien als klickbare "Pillen" */
.cat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #2d1b16;
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    margin: 0 !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cat-pill:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.cat-pill input[type="checkbox"] {
    margin: 0;
    accent-color: #78a22f;
    transform: scale(1.1);
}

.filter-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
}

.filter-label {
    font-family: 'IBM Plex Serif', serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #2d1b16;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end; /* Richtet die Felder unten an der Linie aus */
}

.filter-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1; /* WICHTIG: Verteilt den Platz auf dem Desktop gleichmäßig auf alle 3 Felder */
    min-width: 200px;
}

.filter-control-group label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #4a5c39; /* Etwas dunkleres Grün für bessere Lesbarkeit */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-highlights-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px;
}

.highlight-box {
    border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: transform 0.2s;
}
.highlight-box:hover { transform: translateY(-5px); }

.poi-meta-info, .event-meta-info { display: flex; gap: 20px; color: #666; font-size: 0.9rem; margin-top: 12px; }

.related-grid {
    display: grid !important;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr); /* Erzwingt 3 Spalten am Desktop */
    width: 100%;
    margin-top: 30px;
}

.related-grid .event-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* ==========================================================================
   6. UTILITIES (Backgrounds, Dividers, Pagination)
   ========================================================================== */
.light_green_bg { background-color: rgba(202, 222, 126, .63); }
.green_bg { background-color: #cadece; }
.pattern_bg { position: relative; background-color: #f5f5f5; z-index: 0; }
.pattern_bg:after {
    content: ''; position: absolute; inset: 0; opacity: .6;
    background: url('../img/pattern-bg.jpg') repeat; z-index: -1; pointer-events: none;
}

.pagination-wrapper {
    display: flex; gap: 10px; justify-content: center; padding: 20px 0;
}

.view-toggle-btn {
    display: none !important;
}

/* ==========================================================================
   7. MEDIA QUERIES
   ========================================================================== */

/* TABLET & SMALL DESKTOP */
@media (max-width: 1024px) {
    .poi-result-list { grid-template-columns: 1fr; }
    .poi-card-img { flex: 0 0 120px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .event-highlights-grid { grid-template-columns: repeat(2, 1fr); }
}

/* MOBILE */
@media (max-width: 768px) {
    .bios-poi-explorer { display: block; }
    .bios-sidebar { width: 99% !important; border-right: none; padding: 1px; }
    .poi-filter-top-row { flex-direction: column; }
    .geo-controls { grid-template-columns: 1fr;  }
    .cat-checks { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .filter-controls { flex-direction: column; align-items: stretch; gap: 15px; }
    .filter-control-group {  width: 100%; min-width: 100%; }
    .poi-horizontal-card, .event-horizontal-card { flex-direction: column; }
    .poi-card-img, .event-card-img { flex: 0 0 auto; width: 100%!important; max-width: 100%!important; height: 220px; display: block;}
    .poi-card-img a, .event-card-img a { display: block; width: 100%; height: 100%; }
    .responsive-poi-img, .responsive-event-img { width: 100% !important; height: 100% !important; object-fit: cover !important;object-position: center !important;display: block;border-radius: 8px 8px 0 0;}
    #poi-map-container { position: relative; top: 0; height: 60vh !important; display: none; }
    .related-grid { grid-template-columns: 1fr; }

    .view-toggle-btn {
        display: block !important; position: fixed; bottom: 20px; left: 50%;
        transform: translateX(-50%); z-index: 2000; background: #78a22f;
        color: white; border: none; padding: 12px 24px; border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3); font-weight: bold;
    }
}