/* ==========================================================================
   1. GLOBALE EINSTELLUNGEN & FARBEN
   ========================================================================== */
:root {
    --bg-color: #f7ecec;          /* Sanfteres, edleres Altrosa für den Hintergrund */
    --main-bg: #ffffff;
    --text-main: #2c3e50;         /* Dunkles Anthrazit statt hartem Schwarz */
    --text-muted: #64748b;        /* Für Nebensächliches wie den Namen oben */
    --border-color: #e2e8f0;      /* Sehr feine, moderne Trennlinien */
    --accent-green: #c7f0d0;      /* Dein Signature-Grün von oben */

    
    /* System-Schriftstapel: Extrem sauber, lädt sofort und sieht edel aus */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color); /* Fallback, falls das Bild lädt */
    background-image: url("./img/background.png");
    
    background-size: cover;             /* Das Bild füllt den ganzen Bildschirm aus */
    background-position: center;        /* Zentriert das Bild */
    background-attachment: fixed;       /* Das Bild scrollt elegant nicht mit */
    color: var(--text-main);
    margin: 0;
    padding: 40px 20px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   2. LAYOUT-STRUKTUR (MAIN & FOOTER)
   ========================================================================== */
main {
    max-width: 850px;             /* Etwas mehr Platz für die interaktiven Elemente */
    margin: 0 auto 40px auto;
    background: var(--main-bg);
    padding: 40px;                /* Mehr "Atmatmungsraum" an den Seiten */
    border-radius: 12px;          /* Ganz feine Abrundung, wirkt nahbarer */
    border: 2px solid var(--text-main); /* Flaches, cooles Design-Element statt Schatten */
    position: relative;
    box-sizing: border-box;
}

/* Der grüne Farbakzent oben wird hier als sauberer Header-Balken gelöst */
main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background-color: var(--accent-green);
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid var(--text-main);
}

footer {
    max-width: 850px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ==========================================================================
   3. TYPOGRAFIE
   ========================================================================== */
h1, h2, h3 {
    font-weight: 800;             /* Schön kräftig, sehr modern */
    line-height: 1.2;
    margin-top: 0;
    color: var(--text-main);
}

h1 {
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 20px;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 25px;          /* Schafft eine klare optische Trennung zum vorherigen Block */
    margin-bottom: 15px;       /* Reduziert den Abstand zum direkt nachfolgenden Bild/Iframe */
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 8px;
    display: inline-block;
}

p {
    font-size: 1.05rem;
    margin-bottom: 24px;
    color: #334155;
}

p1 {
    font-size: 0.8rem;
    color: #3f4651;
    font-style: italic;
    display: block;            /* Macht aus dem Text ein Block-Element, damit Margins greifen */
    margin-top: 8px;          /* Schöner, dezenter Abstand direkt unter das Bild */
    margin-bottom: 0px;        /* Verhindert, dass der Credit-Text die nächste h3 wegschiebt */
}

#last {
    padding-left: 153px;

}

.name {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 30px;
}

/* ==========================================================================
   4. MEDIEN, IFRAMES & JUXTAPOSE
   ========================================================================== */
/* ==========================================================================
   4. MEDIEN, IFRAMES & JUXTAPOSE
   ========================================================================== */
/* ==========================================================================
   4. MEDIEN, IFRAMES & JUXTAPOSE
   ========================================================================== */
iframe, .juxtapose {
    border: 2px solid var(--text-main) !important;
    border-radius: 8px;
    margin: 30px auto;
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 0px;
}

/* Standard-Verhältnis für Querformat-Bilder */
.juxtapose {
    width: 100%;
    aspect-ratio: 4 / 3;     /* Perfekt für Querformate */
    overflow: hidden;
}

/* Spezielles Verhältnis für dein Hochformat-Bild */
.juxtapose.juxtapose-portrait {
    max-width: 60%;          /* Macht den Slider schmaler, damit er im Hochformat nicht den ganzen Bildschirm sprengt */
    aspect-ratio: 3 / 4;     /* Dreht das Verhältnis um (3 Breite zu 4 Höhe) */
}

/* Link unter der Karte */
main p a {
    color: var(--text-main);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--accent-green);
    transition: background 0.2s ease;
}

main p a:hover {
    background-color: var(--accent-green);
}

.logo {
    height: 45px;
    filter: grayscale(100%);      /* Macht das Logo clean und dezent */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo:hover {
    filter: none;
    opacity: 1;
}

/* ==========================================================================
   5. INTERAKTIVE PLANUNGS-LEGENDE (OHNE SCHATTEN)
   ========================================================================== */
/* .svgmap {
    position: relative;
    border: 2px solid var(--text-main);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
} */

/* ==========================================================================
   5. INTERAKTIVE PLANUNGS-LEGENDE
   ========================================================================== */
.svgmap {
    position: relative;
    border: 2px solid var(--text-main);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0px; /* Reduziert den Abstand nach unten drastisch, sodass die Credits direkt dranspringen */
}

/* Sorgt dafür, dass die Überschrift oder das Element NACH den Kartendetails wieder Luft bekommt */
/* .svgmap + p1 + h3, 
.svgmap + p1 + p {
    margin-top: 45px;
} */

.map-legend {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--text-main); /* Hard-Edge-Design anstelle von Schatten */
    border-radius: 6px;
    padding: 16px;
    width: 260px;
    font-family: inherit;
}

.legend-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-main);
    margin-bottom: 12px;
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

.legend-item.sub-item {
    margin-left: 20px;
    font-size: 12px;
    border-left: 2px solid var(--border-color);
    padding-left: 10px;
}

/* Der Button-Container (Ohne Hover-Farbeffekt) */
.toggle-btn {
    background: #ffffff;
    border: 2px solid var(--text-main);
    border-radius: 4px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s ease; /* Nur der Rahmen blendet weich über */
}

/* Das Auge im Button */
.eye-icon {
    width: 14px;         /* Breite des Auges im Button */
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast; /* Hilft dem Browser, das kleine PNG knackig scharf zu zeichnen */
    image-rendering: crisp-edges;
}

/* Inaktiver Zustand des Buttons */
.toggle-btn.inactive {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

/* Farbindikatoren in der Legende */
.legend-symbol {
    display: inline-block;
    width: 16px;
    font-size: 14px;
    text-align: center;
    margin-right: 8px;
}

.symbol-bank { color: #e65325; }
.symbol-dach-bank { color: #e65325; font-size: 12px; font-weight: bold; }
.symbol-gastro { color: #669bbc; }
.symbol-dach-komm { color: #669bbc; font-size: 12px; font-weight: bold; }
.symbol-aneignung { color: #b4aad4; }
.symbol-potenzial { color: #d70005; }


/* Container für das Symbol */
.legend-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;          /* Breite des Symbol-Bereichs */
    height: 20px;         /* Höhe des Symbol-Bereichs */
    margin-right: 10px;   /* Abstand zum Text rechts */
    flex-shrink: 0;       /* Verhindert, dass das Icon gequetscht wird */
}

/* Das eigentliche PNG-Bild */
.legend-icon {
    width: auto;
    max-width: 100%;      /* Das Bild passt sich dem Container an */
    max-height: 100%;
    object-fit: contain;  /* Behält das Seitenverhältnis bei */
    display: block;
}

/* Layout für die Titelzeile inkl. Master-Button */
.legend-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* Der Titel selbst (Rand unten entfernt, da er jetzt im Container ist) */
.legend-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-main);
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Styling für den Master-Button (Sehr dezent und unaufdringlich) */
.master-toggle-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.master-toggle-btn:hover {
    background-color: var(--border-color);
    color: var(--text-main);
}

/* Deaktivierter Zustand für Unterkategorie-Buttons */
.toggle-btn[disabled] {
    opacity: 0.4;             /* Button wird ausgeblasen */
    cursor: not-allowed;      /* Zeigt ein "Gesperrt"-Symbol bei der Maus */
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* Verhindert Hover-Effekte auf gesperrten Buttons */
.toggle-btn[disabled]:hover {
    background-color: #f1f5f9;
}

/* --- Diagramm isolieren --- */

#diagramm-container {
    width: 750px;
}

#diagramm-container svg {
    width: 100%;
    height: auto;
    display: block;
}