/*!
Theme Name: Gartenzaun
Theme URI: https://bluehauf-bremen.de
Description: Digitaler Gartenzaun – WordPress-Theme für den KGV "Blüh' auf" e.V.
Author: Norbert Hengsteler
Template: kadence
Version: 0.1.0
Text Domain: bluehauf-child
*/

/* ===========================================================
   Blüh Auf – Globale Design-Variablen
   =========================================================== */
:root {
    /* Farben */
    --bluehauf-bg:            #223C3C;   /* Petrol-Grün, Hintergrund */
    --bluehauf-bg-darker:     #1a2e2e;   /* dezent dunkler für Tiefen */
    --bluehauf-tape:          #E2D7B8;   /* Klebeband-Beige, Akzent */
    --bluehauf-paper:         #ffffff;   /* Polaroid-Papier (Etappe 3) */
    --bluehauf-cream:         #f8f8f6;   /* Warmer Off-White für hellen Bereich der Startseite */
    --bluehauf-text-light:    #f0ede5;   /* heller, leicht warmer Text */
    --bluehauf-text-muted:    #b8b0a0;   /* gedämpfter Text */
    --bluehauf-text-dark:     #1a1a1a;   /* Text auf hellem Grund */
    --bluehauf-link:          #E2D7B8;   /* Links in Tape-Farbe */
    --bluehauf-link-hover:    #ffffff;   /* Hover: pures Weiß */

    /* Schriften */
    --bluehauf-font-body:     'Inter', -apple-system, BlinkMacSystemFont,
                              'Segoe UI', sans-serif;
    --bluehauf-font-script:   'Sacramento', 'Brush Script MT', cursive;
}

/* ===========================================================
   Kadence Color Palette überschreiben
   Kadence nutzt intern --global-palette1..9 für viele Komponenten.
   Indem wir diese Variablen auf unsere Bluehauf-Werte umbiegen,
   ziehen Site-Titel, Menüs, Buttons, Karten automatisch nach.
   =========================================================== */
:root,
body {
    --global-palette1:  #E2D7B8;   /* Primary (Akzent, Buttons, Links)  */
    --global-palette2:  #c9bd9a;   /* Primary dunkler (Hover)            */
    --global-palette3:  #f0ede5;   /* Headings hell                      */
    --global-palette4:  #f0ede5;   /* Body-Text hell                     */
    --global-palette5:  #d6cfc0;   /* Muted Text                         */
    --global-palette6:  #b8b0a0;   /* Stärker gemuted                    */
    --global-palette7:  #1a2e2e;   /* Card/Surface dunkler               */
    --global-palette8:  #223C3C;   /* Background                         */
    --global-palette9:  #223C3C;   /* Body Background                    */
}

/* ===========================================================
   Body + Grund-Typografie
   =========================================================== */
body,
body.wp-singular,
body.home {
    background-color: var(--bluehauf-bg);
    color: var(--bluehauf-text-light);
    font-family: var(--bluehauf-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Standard-Textfarbe auch in Inhaltsbereichen erzwingen */
.entry-content,
.entry-content p,
.site-main {
    color: var(--bluehauf-text-light);
}

/* ===========================================================
   Überschriften
   =========================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--bluehauf-text-light);
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Utility-Klasse für Handschrift-Akzente
   (Verwendung später in Block Patterns: <h2 class="bluehauf-script">)
*/
.bluehauf-script,
h1.bluehauf-script,
h2.bluehauf-script,
h3.bluehauf-script {
    font-family: var(--bluehauf-font-script);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    color: var(--bluehauf-text-light);
    letter-spacing: 0;
}

/* ===========================================================
   Links
   =========================================================== */
a {
    color: var(--bluehauf-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--bluehauf-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===========================================================
   Header + Footer: gleicher Hintergrund wie Body
   damit die Seite optisch ein durchgehender Block ist
   (Kadence-Selektoren überschreiben)
   =========================================================== */
.site-header,
.site-header-inner-wrap,
.site-header-wrap,
.site-header-row-container,
.site-header-row-container-inner,
.site-main-header-wrap,
.site-top-header-wrap,
.site-bottom-header-wrap {
    background-color: var(--bluehauf-bg) !important;
    color: var(--bluehauf-text-light);
    box-shadow: none;
}

.site-footer,
.site-footer-wrap,
.site-footer-row-container,
.site-footer-row-container-inner,
.site-top-footer-wrap,
.site-bottom-footer-wrap {
    background-color: var(--bluehauf-bg) !important;
    color: var(--bluehauf-text-light);
}

/* Site-Titel (oben links) */
.site-title,
.site-title a,
.site-branding-title-link {
    color: var(--bluehauf-text-light);
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
}

/* Header-Navigation */
.site-header .menu-item a,
.site-header .header-navigation a {
    color: var(--bluehauf-text-light);
}

.site-header .menu-item a:hover,
.site-header .header-navigation a:hover {
    color: var(--bluehauf-link-hover);
}

/* ===========================================================
   Beitrags-Karten (NUR in Archiv-/Blog-Ansichten)
   Eingrenzung auf body.blog, body.archive, body.search,
   damit statische Seiten unberührt bleiben.
   =========================================================== */
body.blog .entry.loop-entry,
body.archive .entry.loop-entry,
body.search .entry.loop-entry,
body.blog article.entry,
body.archive article.entry {
    background-color: var(--bluehauf-bg-darker);
    color: var(--bluehauf-text-light);
    border: 1px solid rgba(226, 215, 184, 0.15);
}

body.blog .entry-title,
body.archive .entry-title,
body.search .entry-title,
body.blog .entry-title a,
body.archive .entry-title a {
    color: var(--bluehauf-text-light);
}

body.blog .entry-meta,
body.archive .entry-meta,
body.blog .entry-meta a,
body.archive .entry-meta a {
    color: var(--bluehauf-text-muted);
}

/* ===========================================================
   Hardener: Site-Titel + Header-Branding
   Höhere Spezifität, weil Kadence inline-styles und eigene
   Selektoren mit hoher Spezifität ausliefert.
   =========================================================== */
body .site-title,
body .site-title a,
body .site-branding .site-title,
body .site-branding .site-title a,
body .site-branding-title-link,
body .site-header .site-title a,
body header.site-header .site-title a {
    color: var(--bluehauf-text-light) !important;
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
}

body .site-description {
    color: var(--bluehauf-text-muted) !important;
}

/* ===========================================================
   Hardener: Links global, auch in Content-Bereichen
   =========================================================== */
body a,
body .entry-content a,
body .site-content a,
body p a,
body .wp-block-paragraph a {
    color: var(--bluehauf-link);
}

body a:hover,
body .entry-content a:hover,
body .site-content a:hover,
body p a:hover {
    color: var(--bluehauf-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* WordPress-spezifische "Jetzt starten"-Prompts (no-content fallback) */
body .no-results a,
body .nothing-found a {
    color: var(--bluehauf-link);
}

/* Footer-Link "Kadence WP" und ähnliche */
body .site-footer a,
body .footer-copyright a,
body .site-footer-wrap a {
    color: var(--bluehauf-link);
}

body .site-footer a:hover {
    color: var(--bluehauf-link-hover);
}

/* ===========================================================
   Page-Title-Bar auf Startseite ausblenden
   Auf Unterseiten bleibt die Title-Bar erhalten (gewünscht,
   siehe Designvorlage: "ÜBER UNS", "MITGLIEDSCHAFT" als
   große Überschrift oben).
   =========================================================== */
body.home .entry-hero,
body.home .entry-hero-container-inner,
body.home .page-title-wrap,
body.home .title-section,
body.home .entry-header.page-title,
body.home header.entry-header.page-title {
    display: none !important;
}

/* Falls Kadence zusätzlich einen Top-Margin am Content setzt,
   den auch auf der Startseite zurücksetzen */
body.home .content-area,
body.home .site-main,
body.home #primary {
    padding-top: 0;
}

/* ===========================================================
   Etappe 2b: Startseiten-Layout
   2-Spalten-Grid, Content links, Sidebar rechts.
   =========================================================== */

.bluehauf-frontpage-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.bluehauf-frontpage-main {
    min-width: 0;
}

.bluehauf-frontpage-placeholder {
    padding: 4rem 2rem;
    border: 1px dashed rgba(226, 215, 184, 0.3);
    border-radius: 6px;
    text-align: center;
    color: var(--bluehauf-text-muted);
}

/* ===========================================================
   Sidebar Startseite
   =========================================================== */

.bluehauf-frontpage-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: sticky;
    top: 2rem;
    align-self: start;
}

.bluehauf-sidebar-nav .bluehauf-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bluehauf-sidebar-nav .bluehauf-sidebar-menu li {
    border-bottom: 1px solid rgba(226, 215, 184, 0.25);
}

.bluehauf-sidebar-nav .bluehauf-sidebar-menu li:last-child {
    border-bottom: none;
}

.bluehauf-sidebar-nav .bluehauf-sidebar-menu a {
    display: block;
    padding: 1.5rem 0;
    color: var(--bluehauf-text-light);
    text-decoration: none;
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    transition: color 0.2s ease;
}

.bluehauf-sidebar-nav .bluehauf-sidebar-menu a:hover,
.bluehauf-sidebar-nav .bluehauf-sidebar-menu a:focus {
    color: var(--bluehauf-link);
    text-decoration: none;
}

/* Aktiver Menüpunkt (auf der Startseite eher selten relevant, aber sauber) */
.bluehauf-sidebar-nav .bluehauf-sidebar-menu .current-menu-item a,
.bluehauf-sidebar-nav .bluehauf-sidebar-menu .current_page_item a {
    color: var(--bluehauf-link);
}

/* Sidebar-Karte für Veranstaltungen (Platzhalter, kommt später echt) */
.bluehauf-sidebar-card {
    padding: 1.5rem 1.25rem;
    border: 1px solid rgba(226, 215, 184, 0.2);
    border-radius: 4px;
    text-align: center;
}

.bluehauf-sidebar-card-title {
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--bluehauf-text-light);
    margin: 0 0 0.75rem 0;
}

.bluehauf-sidebar-card-placeholder {
    color: var(--bluehauf-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ===========================================================
   Header-Anpassungen NUR auf Startseite
   - Header-Menü ausblenden (Navigation kommt in die Sidebar)
   - Site-Titel zentrieren
   =========================================================== */

body.home .site-header .header-navigation,
body.home .site-header .menu,
body.home .site-header .header-menu-container,
body.home .site-header nav[aria-label="Primary Navigation"],
body.home .site-header .header-main-menu-container {
    display: none !important;
}

body.home .site-header .site-branding,
body.home .site-header .site-header-main-section-left,
body.home .site-header .site-header-row {
    justify-content: center;
    text-align: center;
    width: 100%;
}

body.home .site-title,
body.home .site-title a {
    text-align: center;
    width: 100%;
}

/* ===========================================================
   Mobile / Tablet: Sidebar wandert unter den Content
   =========================================================== */

@media (max-width: 900px) {
    .bluehauf-frontpage-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem 1rem 3rem;
    }

    .bluehauf-frontpage-sidebar {
        position: static;
        top: auto;
        order: 2;
    }

    /* Auf Mobile MUSS die Navigation sichtbar sein, da kein Header-Menü da ist.
       Daher hier explizit nochmal zeigen (auch wenn Standard). */
    body.home .site-header .header-navigation {
        display: block !important;
    }
}

/* ===========================================================
   Etappe 3: Polaroid-Komponente
   =========================================================== */

.polaroid {
    display: inline-block;
    background-color: var(--bluehauf-paper);
    padding: 1rem 1rem 3rem 1rem;   /* unten mehr Platz für Caption */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 12px 28px rgba(0, 0, 0, 0.35);
    position: relative;
    max-width: 480px;
    margin: 2.5rem auto;
    transform: rotate(-2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1px;
}

.polaroid:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 16px 36px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Klebeband oben mittig – halbtransparentes Washi-Tape */
.polaroid::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 130px;
    height: 38px;
    /* Halbtransparenz: Untergrund scheint durch (echter Tape-Look) */
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 0px,
            rgba(255, 255, 255, 0.10) 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px
        ),
        linear-gradient(
            180deg,
            rgba(226, 215, 184, 0.50) 0%,
            rgba(226, 215, 184, 0.70) 50%,
            rgba(226, 215, 184, 0.50) 100%
        );
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.12),
        inset 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Bild innen */
.polaroid img,
.polaroid .wp-block-image,
.polaroid .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
}

/* Bildunterschrift in Handschrift */
.polaroid .polaroid-caption,
.polaroid figcaption {
    margin: 0.75rem 0 0 0;
    padding: 0;
    text-align: center;
    color: var(--bluehauf-text-dark);
    font-family: var(--bluehauf-font-script);
    font-size: 2.1rem;
    line-height: 1.1;
    font-weight: 400;
}

/* Tilt-Varianten */
.polaroid.polaroid--right {
    transform: rotate(2.5deg);
}
.polaroid.polaroid--right::before {
    transform: translateX(-50%) rotate(4deg);
}

.polaroid.polaroid--straight {
    transform: rotate(0deg);
}
.polaroid.polaroid--straight::before {
    transform: translateX(-50%) rotate(0deg);
}

/* Container, der mehrere Polaroids enthält, soll Hover-Z-Index
   nicht clippen */
.bluehauf-frontpage-main,
.bluehauf-frontpage-sidebar {
    overflow: visible;
}

/* Mobile: Rotation reduzieren, damit kein horizontaler Scrollbalken entsteht */
@media (max-width: 600px) {
    .polaroid {
        transform: rotate(-1deg);
        max-width: 100%;
    }
    .polaroid.polaroid--right {
        transform: rotate(1deg);
    }
}

/* ===========================================================
   Etappe 2c: Helles Layout NUR auf der Startseite
   Body, Header und der Hauptcontent kommen in Creme.
   Sidebar bleibt als dunkelgrüne Kontrast-Box.
   Footer bleibt dunkelgrün (visueller Abschluss).
   =========================================================== */

/* Body + Standardtext-Farbe auf Startseite */
body.home {
    background-color: var(--bluehauf-cream) !important;
    color: var(--bluehauf-text-dark);
}

body.home .entry-content,
body.home .entry-content p,
body.home .site-main,
body.home .bluehauf-frontpage-main {
    color: var(--bluehauf-text-dark);
}

/* Überschriften auf Startseite in Dunkelgrün */
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6,
body.home .bluehauf-script {
    color: var(--bluehauf-bg);
}

/* Links auf Startseite in Dunkelgrün, hover etwas dezenter */
body.home a {
    color: var(--bluehauf-bg);
}

body.home a:hover,
body.home a:focus {
    color: var(--bluehauf-bg-darker);
    text-decoration: underline;
}

/* Header auf Startseite in Creme statt Dunkelgrün */
body.home .site-header,
body.home .site-header-inner-wrap,
body.home .site-header-wrap,
body.home .site-header-row-container,
body.home .site-header-row-container-inner,
body.home .site-main-header-wrap,
body.home .site-top-header-wrap,
body.home .site-bottom-header-wrap {
    background-color: var(--bluehauf-cream) !important;
    color: var(--bluehauf-text-dark);
    box-shadow: none;
}

/* Falls Site-Titel (Text) doch noch sichtbar wäre: Farbe dunkel */
body.home .site-title,
body.home .site-title a {
    color: var(--bluehauf-text-dark) !important;
}

/* Footer EXPLIZIT dunkelgrün halten (auch auf Startseite) */
body.home .site-footer,
body.home .site-footer-wrap,
body.home .site-footer-row-container,
body.home .site-footer-row-container-inner {
    background-color: var(--bluehauf-bg) !important;
    color: var(--bluehauf-text-light);
}

body.home .site-footer a {
    color: var(--bluehauf-link);
}

/* ===========================================================
   Sidebar der Startseite: dunkelgrüne Kontrast-Box
   =========================================================== */
body.home .bluehauf-frontpage-sidebar {
    background-color: var(--bluehauf-bg);
    padding: 1.75rem 1.25rem;
    border-radius: 4px;
}

/* Navigation in Sidebar bleibt hell */
body.home .bluehauf-frontpage-sidebar .bluehauf-sidebar-menu a {
    color: var(--bluehauf-text-light);
}

body.home .bluehauf-frontpage-sidebar .bluehauf-sidebar-menu a:hover {
    color: var(--bluehauf-link);
}

body.home .bluehauf-frontpage-sidebar .bluehauf-sidebar-menu li {
    border-bottom-color: rgba(226, 215, 184, 0.25);
}

/* Sidebar-Karte (Nächste Veranstaltungen) bleibt mit hellem Text */
body.home .bluehauf-sidebar-card,
body.home .bluehauf-sidebar-card-title,
body.home .bluehauf-sidebar-card-placeholder {
    color: var(--bluehauf-text-light);
}

/* Platzhalter-Box auf Startseite: dezenter Rahmen in Dunkelgrün */
body.home .bluehauf-frontpage-placeholder {
    border: 1px dashed rgba(34, 60, 60, 0.3);
    color: rgba(34, 60, 60, 0.55);
}

/* ===========================================================
   Logo: Größen + Position
   =========================================================== */

/* Logo-Default (greift, falls keine seitenspezifische Regel matched) */
.custom-logo,
.site-logo img,
.site-branding img,
.site-logo a img {
    max-height: 80px;
    width: auto;
    height: auto;
}

/* Auf der Startseite: Logo größer und im Header zentriert */
body.home .custom-logo,
body.home .site-logo img,
body.home .site-branding img {
    max-height: 140px;
}

body.home .site-branding,
body.home .site-header-main,
body.home .site-header-row {
    justify-content: center !important;
    text-align: center;
    width: 100%;
}

/* Auf Unterseiten: Logo klein, ganz links */
body:not(.home) .custom-logo,
body:not(.home) .site-logo img,
body:not(.home) .site-branding img {
    max-height: 78px;
}

body:not(.home) .site-branding,
body:not(.home) .site-header-main-section-left {
    justify-content: flex-start !important;
}

/* ===========================================================
   Etappe 2d: Startseite – Vollhöhen-Layout (PDF-treu)
   Überschreibt das frühere Box-Layout aus Etappe 2b/2c.
   - Kadence-Header komplett aus (Logo kommt aus front-page.php)
   - Links helles "Blatt", rechts dunkelgrüner Vollhöhen-Streifen
   =========================================================== */

/* Kadence-Header auf Startseite komplett ausblenden */
body.home .site-header {
    display: none !important;
}

/* Wrap: zwei Spalten, volle Breite, volle Höhe, kein Gap */
body.home .bluehauf-frontpage-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) 1fr;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: auto;
    align-items: stretch;
}

/* Linke Spalte: helles Blatt, Inhalt zentriert */
body.home .bluehauf-frontpage-main {
    background-color: var(--bluehauf-cream);
    padding: 3rem 2rem 4rem;
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* Inneres Blatt (DIN-A4-Gefühl): begrenzte Breite, zentriert */
body.home .bluehauf-frontpage-sheet {
    width: 100%;
    max-width: 95%;
}

/* Logo zentriert oben im Blatt */
body.home .bluehauf-frontpage-logo {
    text-align: center;
    margin: 0 0 2rem 0;
}

body.home .bluehauf-frontpage-logo img,
body.home .bluehauf-frontpage-logo .custom-logo {
    max-height: 220px;
    width: auto;
    height: auto;
    display: inline-block;
}

/* Rechte Spalte: dunkelgrüner Vollhöhen-Streifen bis zum rechten Rand */
body.home .bluehauf-frontpage-sidebar {
    background-color: var(--bluehauf-bg);
    padding: 3rem 2rem;
    border-radius: 0;
    box-shadow: none;
    position: static;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    top: auto;
}

/* Mobile: stapeln, Vollhöhe aufheben */
@media (max-width: 900px) {
    body.home .bluehauf-frontpage-wrap {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    body.home .bluehauf-frontpage-main {
        padding: 2rem 1.25rem 3rem;
    }
    body.home .bluehauf-frontpage-sidebar {
        order: 2;
    }
}

/* ===========================================================
   Polaroid auf der Startseite zentrieren (mittig unter Logo)
   Globale .polaroid bleibt inline-block (für spätere Galerien),
   nur auf der Startseite als zentrierter Block.
   =========================================================== */
body.home .bluehauf-frontpage-sheet .polaroid {
    display: block;
    margin-left: 0;
    margin-right: auto;
}

/* ===========================================================
   Startseite: Inhalt im hellen Blatt zentrieren (Logo, Polaroid, Text)
   =========================================================== */
body.home .bluehauf-frontpage-sheet {
    text-align: left;
}

/* ===========================================================
   Button auf Startseite (z.B. "Mehr über uns")
   =========================================================== */
body.home .wp-block-button__link,
body.page:not(.home) .bluehauf-subpage-content .wp-block-button__link {
    background-color: var(--bluehauf-bg);
    color: var(--bluehauf-text-light);
    border-radius: 4px;
    padding: 0.8rem 1.9rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.home .wp-block-button__link:hover,
body.page:not(.home) .bluehauf-subpage-content .wp-block-button__link:hover {
    background-color: var(--bluehauf-bg-darker);
    color: var(--bluehauf-text-light);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ===========================================================
   Unterseiten-Layout (page.php) – wie die Startseite
   Links: heller Content (dunkle Schrift), Titel linksbündig
   Rechts: dunkelgrüne Sidebar mit Logo + Navigation
   =========================================================== */

/* Kadence-Header + Hero auf Unterseiten ausblenden */
body.page:not(.home) .site-header,
body.page:not(.home) .entry-hero,
body.page:not(.home) .entry-hero-container-inner,
body.page:not(.home) .page-title-wrap,
body.page:not(.home) .title-section {
    display: none !important;
}

/* Wrap: zwei Spalten wie Startseite (Content links, grün rechts) */
body.page:not(.home) .bluehauf-subpage-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) 1fr;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: auto;
    align-items: stretch;
}

/* Linker heller Content-Bereich */
body.page:not(.home) .bluehauf-subpage-main {
    background-color: var(--bluehauf-cream);
    color: var(--bluehauf-text-dark);
    padding: 3.5rem 3rem 4rem;
    min-width: 0;
}

/* Seitentitel linksbündig, dunkelgrün */
body.page:not(.home) .bluehauf-subpage-title {
    color: var(--bluehauf-bg);
    text-align: left;
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 2rem 0;
}

/* Content: dunkle Schrift auf hell, linksbündig */
body.page:not(.home) .bluehauf-subpage-content,
body.page:not(.home) .bluehauf-subpage-content p,
body.page:not(.home) .bluehauf-subpage-content li {
    color: var(--bluehauf-text-dark);
    text-align: left;
}
body.page:not(.home) .bluehauf-subpage-content a {
    color: var(--bluehauf-bg);
}
body.page:not(.home) .bluehauf-subpage-content h1,
body.page:not(.home) .bluehauf-subpage-content h2,
body.page:not(.home) .bluehauf-subpage-content h3,
body.page:not(.home) .bluehauf-subpage-content h4 {
    color: var(--bluehauf-bg);
}

/* Rechte grüne Sidebar (gleicher Stil wie Startseite) */
body.page:not(.home) .bluehauf-subpage-sidebar {
    background-color: var(--bluehauf-bg);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Logo oben in der Sidebar (verlinkt zur Startseite) */
body.page:not(.home) .bluehauf-subpage-logo {
    text-align: center;
}
body.page:not(.home) .bluehauf-subpage-logo img,
body.page:not(.home) .bluehauf-subpage-logo .custom-logo {
    max-height: 110px;
    width: auto;
    height: auto;
}

/* Navigation in der Sidebar – gleicher Stil wie Startseite */
body.page:not(.home) .bluehauf-subpage-sidebar .bluehauf-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
body.page:not(.home) .bluehauf-subpage-sidebar .bluehauf-sidebar-menu li {
    border-bottom: 1px solid rgba(226, 215, 184, 0.25);
}
body.page:not(.home) .bluehauf-subpage-sidebar .bluehauf-sidebar-menu li:last-child {
    border-bottom: none;
}
body.page:not(.home) .bluehauf-subpage-sidebar .bluehauf-sidebar-menu a {
    display: block;
    padding: 1.2rem 0;
    color: var(--bluehauf-text-light);
    text-decoration: none;
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    transition: color 0.2s ease;
}
body.page:not(.home) .bluehauf-subpage-sidebar .bluehauf-sidebar-menu a:hover,
body.page:not(.home) .bluehauf-subpage-sidebar .bluehauf-sidebar-menu .current-menu-item a,
body.page:not(.home) .bluehauf-subpage-sidebar .bluehauf-sidebar-menu .current_page_item a {
    color: var(--bluehauf-link);
}

/* Mobile: stapeln, Sidebar unter den Content */
@media (max-width: 900px) {
    body.page:not(.home) .bluehauf-subpage-wrap {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    body.page:not(.home) .bluehauf-subpage-main {
        padding: 2rem 1.25rem 3rem;
        order: 1;
    }
    body.page:not(.home) .bluehauf-subpage-sidebar {
        order: 2;
    }
}

/* ===========================================================
   Footer: 3-Spalten-Layout
   =========================================================== */
.bluehauf-footer {
    background-color: var(--bluehauf-bg);
    color: var(--bluehauf-text-light);
    padding: 0;
}

.bluehauf-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 65%;
    margin: 0;
    padding: 3rem 0 2rem 3rem;
}

/* Überschriften in Normalschrift (Inter, Versalien) */
.bluehauf-footer-heading {
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 1.25rem;
}

/* Listen */
.bluehauf-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bluehauf-footer-list li {
    padding: 0.35rem 0;
    font-size: 0.92rem;
    color: rgba(240, 237, 229, 0.8);
    line-height: 1.5;
}

.bluehauf-footer-list a {
    color: rgba(240, 237, 229, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bluehauf-footer-list a:hover {
    color: #fff;
}

/* Rechtliches + Nützliches: Pfeil vor Links */
.bluehauf-footer-col:nth-child(2) .bluehauf-footer-list li::before,
.bluehauf-footer-col:nth-child(3) .bluehauf-footer-list li::before {
    content: "›  ";
    color: var(--bluehauf-tape);
    font-weight: 700;
}

/* Kontakt-Icons */
.bluehauf-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.bluehauf-footer-icon {
    font-size: 1rem;
    color: var(--bluehauf-tape);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Copyright-Zeile */
.bluehauf-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    max-width: 65%;
    padding: 1rem 0 1rem 3rem;
}

.bluehauf-footer-bottom p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(240, 237, 229, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .bluehauf-footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ===========================================================
   Buttons auf Unterseiten: gleicher Stil wie Startseite
   (mit !important, falls Kadence-Inline-Styles überschreiben)
   =========================================================== */
body.page:not(.home) .bluehauf-subpage-content .wp-block-button__link,
body.page:not(.home) .bluehauf-subpage-main .wp-block-button__link {
    background-color: var(--bluehauf-bg) !important;
    color: var(--bluehauf-text-light) !important;
    border-radius: 4px !important;
    padding: 0.8rem 1.9rem !important;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.page:not(.home) .bluehauf-subpage-content .wp-block-button__link:hover,
body.page:not(.home) .bluehauf-subpage-main .wp-block-button__link:hover {
    background-color: var(--bluehauf-bg-darker) !important;
    color: var(--bluehauf-text-light) !important;
    transform: translateY(-1px);
    text-decoration: none;
}

/* ===========================================================
   Vorstand-Portraits (Kreise mit Platzhalter)
   =========================================================== */
.vorstand-portrait img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    margin: 0 auto 0.75rem;
}

.vorstand-grid .wp-block-column {
    text-align: center;
    padding: 1rem 0.5rem;
}

.vorstand-grid .wp-block-column p {
    color: var(--bluehauf-text-dark);
}

/* Separator auf Unterseiten sichtbar */
body.page:not(.home) .bluehauf-subpage-content hr.wp-block-separator {
    border-color: rgba(34, 60, 60, 0.2);
    margin: 2rem 0;
}

/* ===========================================================
   Polaroids auf Unterseiten (zentriert, passt sich Spaltenbreite an)
   =========================================================== */
body.page:not(.home) .bluehauf-subpage-content .polaroid {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

body.page:not(.home) .bluehauf-subpage-content .polaroid img {
    max-width: 100%;
    height: auto;
}

/* ===========================================================
   Fotoalbum – Galerie im dezenten Polaroid-Stil
   Weißer Rahmen, Schatten, Handschrift-Captions.
   Kein Rotation (wirkt in Grids unruhig).
   =========================================================== */
body.page:not(.home) .bluehauf-subpage-content .fotoalbum-gallery .wp-block-image {
    background: var(--bluehauf-paper);
    padding: 10px 10px 55px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 1px;
    position: relative;
}

body.page:not(.home) .bluehauf-subpage-content .fotoalbum-gallery .wp-block-image:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

body.page:not(.home) .bluehauf-subpage-content .fotoalbum-gallery .wp-block-image img {
    border-radius: 0;
}

body.page:not(.home) .bluehauf-subpage-content .fotoalbum-gallery figcaption,
body.page:not(.home) .bluehauf-subpage-content .fotoalbum-gallery .wp-element-caption {
    font-family: var(--bluehauf-font-script) !important;
    color: var(--bluehauf-text-dark) !important;
    font-size: 1.25rem;
    text-align: center;
    padding: 6px 8px 0;
    margin: 0;
    background: transparent !important;
}

/* Abstand zwischen den Kategorien */
body.page:not(.home) .bluehauf-subpage-content .fotoalbum-kategorie {
    margin-bottom: 3rem;
}

/* ===========================================================
   Fotoalbum – Kadence Advanced Gallery Karussell
   Polaroid-Rahmen + Handschrift-Captions im Slider
   =========================================================== */
body.page:not(.home) .bluehauf-subpage-content .kb-gallery-carousel .kb-gallery-item,
body.page:not(.home) .bluehauf-subpage-content .kt-blocks-carousel .kb-gallery-item {
    background: var(--bluehauf-paper);
    padding: 6px 6px 28px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    border-radius: 1px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page:not(.home) .bluehauf-subpage-content .kb-gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

body.page:not(.home) .bluehauf-subpage-content .kb-gallery-item .kb-gallery-item-overlay,
body.page:not(.home) .bluehauf-subpage-content .kb-gallery-item figcaption {
    font-family: var(--bluehauf-font-script);
    color: var(--bluehauf-text-dark);
    font-size: 1.15rem;
    text-align: center;
}

/* Karussell-Pfeile im Vereins-Stil */
body.page:not(.home) .bluehauf-subpage-content .kb-gallery-carousel .slick-arrow,
body.page:not(.home) .bluehauf-subpage-content .kt-blocks-carousel .slick-arrow {
    background-color: var(--bluehauf-bg);
    color: var(--bluehauf-text-light);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

body.page:not(.home) .bluehauf-subpage-content .slick-arrow:hover {
    opacity: 1;
    background-color: var(--bluehauf-bg-darker);
}

/* ===========================================================
   Fotoalbum: "Mehr anzeigen"-Button + Hidden-Klasse
   =========================================================== */
.fotoalbum-hidden {
    display: none !important;
}

.fotoalbum-toggle-btn {
    display: block;
    margin: 1.5rem auto;
    padding: 0.75rem 1.8rem;
    background-color: var(--bluehauf-bg);
    color: var(--bluehauf-text-light);
    border: none;
    border-radius: 4px;
    font-family: var(--bluehauf-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.fotoalbum-toggle-btn:hover {
    background-color: var(--bluehauf-bg-darker);
    transform: translateY(-1px);
}

/* ===========================================================
   Startseite: Logo neben Polaroid, vertikal zentriert
   =========================================================== */
body.home .bluehauf-frontpage-sheet .startseite-logo img {
    max-height: 260px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: 0;
}

/* Altes Logo-CSS (frontpage-logo) greift nicht mehr, da aus Template entfernt */

/* ===========================================================
   Startseite: Spaltenabstand + Polaroid größer
   =========================================================== */
body.home .bluehauf-frontpage-sheet .wp-block-columns {
    gap: 4rem;
    align-items: center;
}

/* Polaroid größer als Standard, aber nicht die ganze Spalte */
body.home .bluehauf-frontpage-sheet .polaroid {
    max-width: 450px;
}

/* ===========================================================
   Startseite: Vereinsname + Slogan unter dem Logo
   =========================================================== */
body.home .startseite-vereinsname {
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    font-size: 1.4rem;
    margin-top: 1rem;
    color: var(--bluehauf-bg);
}

body.home .startseite-slogan {
    font-size: 0.9rem;
    color: rgba(34, 60, 60, 0.6);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Buttons: Abstand zum Text darüber */
body.home .bluehauf-frontpage-sheet .wp-block-buttons {
    margin-top: 2.5rem;
}

/* ===========================================================
   Sidebar: Kontaktdaten mit runden Icons
   =========================================================== */
.bluehauf-sidebar-contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.bluehauf-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bluehauf-text-light);
    text-decoration: none;
    font-size: 1.05rem;
    transition: color 0.2s ease;
}

.bluehauf-contact-link:hover {
    color: var(--bluehauf-link);
}

/* Runde Icons */
.bluehauf-contact-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background-color: rgba(226, 215, 184, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--bluehauf-tape);
    font-style: normal;
}

/* Kontakttext in Sidebar gut sichtbar */
.bluehauf-contact-link .bluehauf-contact-text,
.bluehauf-contact-link span:not(.bluehauf-contact-icon) {
    color: var(--bluehauf-text-light);
    font-size: 1.05rem;
}

/* ===========================================================
   Digitaler Schaukasten
   =========================================================== */

/* Aushang-Karten: Pinnwand-Notizen mit Klebeband */
body.page .schaukasten-aushange {
    list-style: none !important;
    padding: 0 !important;
}

body.page .schaukasten-aushange li {
    background: transparent;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    position: relative;
    border-radius: 2px;
    margin-top: 1rem;
}

/* Klebeband oben auf jeder Karte */
body.page .schaukasten-aushange li::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 80px;
    height: 22px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 0px,
            rgba(255, 255, 255, 0.10) 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px
        ),
        linear-gradient(
            180deg,
            rgba(226, 215, 184, 0.50) 0%,
            rgba(226, 215, 184, 0.70) 50%,
            rgba(226, 215, 184, 0.50) 100%
        );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Leichte Rotation abwechselnd */
body.page .schaukasten-aushange li:nth-child(3n+1) {
    transform: rotate(-0.7deg);
}
body.page .schaukasten-aushange li:nth-child(3n+2) {
    transform: rotate(0.5deg);
}
body.page .schaukasten-aushange li:nth-child(3n+3) {
    transform: rotate(-0.3deg);
}

body.page .schaukasten-aushange li:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Titel auf den Karten */
body.page .schaukasten-aushange li a {
    color: var(--bluehauf-bg) !important;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
}

/* Datum */
body.page .schaukasten-aushange li time {
    color: rgba(34, 60, 60, 0.45);
    font-size: 0.82rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Auszug */
body.page .schaukasten-aushange .wp-block-latest-posts__post-excerpt {
    color: var(--bluehauf-text-dark);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Termine-Box */
body.page .schaukasten-termine {
    background: rgba(34, 60, 60, 0.06);
    padding: 1.5rem;
    border-left: 4px solid var(--bluehauf-bg);
    border-radius: 2px;
    margin-bottom: 2rem;
}
body.page .schaukasten-termine p {
    color: var(--bluehauf-text-dark);
    line-height: 2;
}

/* Downloads */
body.page .schaukasten-downloads {
    padding: 1rem 0;
}
body.page .schaukasten-downloads p {
    color: var(--bluehauf-text-dark);
    line-height: 2.2;
    font-size: 1rem;
}
body.page .schaukasten-downloads a {
    color: var(--bluehauf-bg) !important;
    font-weight: 600;
}
body.page .schaukasten-downloads a:hover {
    text-decoration: underline;
}

/* Gartentipp-Box */
body.page .schaukasten-tipp {
    background: rgba(34, 60, 60, 0.06);
    padding: 1.5rem;
    border-left: 4px solid var(--bluehauf-tape);
    border-radius: 2px;
}
body.page .schaukasten-tipp p {
    color: var(--bluehauf-text-dark);
}

/* Abstand zwischen Sektionen */
body.page .bluehauf-subpage-content h2 {
    margin-top: 2.5rem;
}

/* ===========================================================
   Schaukasten: Holzrahmen + Kork-Hintergrund
   =========================================================== */

/* Der Rahmen */
body.page .schaukasten-rahmen {
    background-color: #e8e8e8;
    background-image: none;
    border: 10px solid #1a2e2e;
    box-shadow:
        inset 0 0 0 2px #345555,
        inset 0 0 20px rgba(0, 0, 0, 0.3),
        0 6px 30px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    padding: 2.5rem 2rem;
    position: relative;
    margin-top: 1.5rem;
}

/* Glas-Reflektion (dezent) */
body.page .schaukasten-rahmen::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0) 65%,
        rgba(255, 255, 255, 0.04) 100%
    );
    pointer-events: none;
    border-radius: 2px;
    z-index: 1;
}

/* Inhalte über der Glas-Reflektion */
body.page .schaukasten-rahmen > * {
    position: relative;
    z-index: 2;
}

/* Überschriften im Schaukasten: hell auf Kork */
body.page .schaukasten-rahmen h2 {
    color: var(--bluehauf-bg) !important;
    text-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0.5rem;
}

/* Termine-Box auf Petrol-Grün: etwas anpassen */
body.page .schaukasten-rahmen .schaukasten-termine {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 3px;
}

/* ===========================================================
   Schaukasten: Beitragsbilder in Aushang-Karten
   =========================================================== */

/* Bild oben in der Karte */
body.page .schaukasten-aushange li img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0.75rem;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Karten mit Bild: etwas mehr Padding oben (Klebeband + Bild) */
body.page .schaukasten-aushange li .wp-block-latest-posts__featured-image {
    margin: 0;
}

body.page .schaukasten-aushange li .wp-block-latest-posts__featured-image img {
    border-radius: 1px;
    display: block;
}

/* ===========================================================
   Einzelbeiträge (single.php)
   =========================================================== */

/* Beitragsbild */
body.single .bluehauf-post-thumbnail {
    margin-bottom: 2rem;
}
body.single .bluehauf-post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Meta-Zeile (Datum + Kategorie) */
body.single .bluehauf-post-meta {
    color: rgba(34, 60, 60, 0.5);
    font-size: 0.9rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(34, 60, 60, 0.1);
}

/* Post-Content */
body.single .bluehauf-post-content {
    color: var(--bluehauf-text-dark);
    line-height: 1.7;
    font-size: 1rem;
}
body.single .bluehauf-post-content p {
    margin-bottom: 1.25rem;
}

/* Beitragsnavigation (vorheriger/nächster) */
body.single .bluehauf-post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(34, 60, 60, 0.1);
}
body.single .bluehauf-post-navigation a {
    color: var(--bluehauf-bg);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: color 0.2s ease;
}
body.single .bluehauf-post-navigation a:hover {
    color: var(--bluehauf-bg-darker);
}

/* Kadence-Header auch auf Beitragsseiten ausblenden */
body.single .site-header,
body.single #masthead,
body.single .entry-hero-layout-default {
    display: none !important;
}

/* Kadence "Ähnliche Beiträge" ausblenden (wir nutzen eigene Navigation) */
body.single .entry-related,
body.single .alignfull {
    display: none !important;
}

/* ===========================================================
   Single Posts: Kadence-Defaults ausblenden
   =========================================================== */
body.single .site-header,
body.single #masthead,
body.single .entry-hero-container-inner,
body.single .post-hero-section,
body.single .kadence-entry-hero,
body.single .entry-header,
body.single .entry-related,
body.single .site-footer:not(.bluehauf-footer),
body.single .comments-area {
    display: none !important;
}

/* Hinweis: Cream-Hintergrund + Padding der linken Spalte kommen bereits von
   body.page:not(.home) .bluehauf-subpage-main (single.php nutzt diese Klasse),
   daher hier KEINE zusätzliche Regel auf .bluehauf-subpage-content (sonst
   doppeltes Padding). */

/* Schaukasten: nur Bild, kein Text auf den Karten */
body.page .schaukasten-aushange .wp-block-latest-posts__post-title {
    display: none !important;
}
body.page .schaukasten-aushange time {
    display: none !important;
}
body.page .schaukasten-aushange .wp-block-latest-posts__post-excerpt {
    display: none !important;
}

/* ===========================================================
   Single Post: Zurück-Button
   =========================================================== */
body.single .bluehauf-post-back {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(34, 60, 60, 0.1);
}

body.single .bluehauf-back-btn {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    background-color: var(--bluehauf-bg);
    color: var(--bluehauf-text-light) !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.single .bluehauf-back-btn:hover {
    background-color: var(--bluehauf-bg-darker);
    transform: translateY(-1px);
}

/* ===========================================================
   Startseite: Logo + Branding in der Sidebar
   =========================================================== */
.bluehauf-sidebar-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bluehauf-sidebar-logo {
    flex-shrink: 0;
    margin-bottom: 0;
}

.bluehauf-sidebar-logo img {
    max-height: 65px;
    width: auto;
    display: block;
}

.bluehauf-sidebar-vereinsname {
    font-family: var(--bluehauf-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bluehauf-text-light);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.bluehauf-sidebar-slogan {
    font-size: 0.85rem;
    color: rgba(240, 237, 229, 0.5);
    margin: 0;
    line-height: 1.4;
}

/* Startseite: Polaroid nicht mehr in Spalte, sondern links im Sheet */
body.home .bluehauf-frontpage-sheet .polaroid {
    margin-left: 0;
    margin-right: auto;
    max-width: 450px;
}

/* Alte Startseiten-Logo-/Branding-Regeln im Content deaktivieren
   (Logo/Branding leben jetzt in der Sidebar) */
body.home .bluehauf-frontpage-sheet .startseite-logo img {
    display: none;
}
body.home .startseite-vereinsname {
    display: none;
}
body.home .startseite-slogan {
    display: none;
}

/* ===========================================================
   Startseite: Termine-Aushang neben dem Polaroid
   =========================================================== */
.termine-aushang {
    background: var(--bluehauf-paper);
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    position: relative;
    border-radius: 2px;
    transform: rotate(0.8deg);
    max-width: 100%;
    margin: 1rem 0 0;
}

/* Klebeband oben */
.termine-aushang::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 80px;
    height: 22px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 0px,
            rgba(255, 255, 255, 0.10) 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px
        ),
        linear-gradient(
            180deg,
            rgba(226, 215, 184, 0.50) 0%,
            rgba(226, 215, 184, 0.70) 50%,
            rgba(226, 215, 184, 0.50) 100%
        );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.termine-aushang-titel {
    color: var(--bluehauf-bg) !important;
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bluehauf-bg);
}

.termine-aushang-liste {
    color: var(--bluehauf-text-dark);
    font-size: 1.05rem;
    line-height: 2.2;
}

.termine-aushang-link {
    margin-top: 0.75rem !important;
    font-size: 0.88rem;
}
.termine-aushang-link a {
    color: var(--bluehauf-bg);
    text-decoration: none;
    font-weight: 600;
}
.termine-aushang-link a:hover {
    text-decoration: underline;
}

/* Schaukasten: Aushang-Bilder komplett anzeigen */
body.page .schaukasten-aushange li img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

body.page .schaukasten-aushange li .wp-block-latest-posts__featured-image {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.page .schaukasten-aushange li .wp-block-latest-posts__featured-image a {
    height: auto !important;
    display: block;
}

/* Aushang-Karten ohne Bild ausblenden */
body.page .schaukasten-aushange li:not(:has(img)) {
    display: none;
}

body.page .schaukasten-aushange li {
    overflow: visible;
}

/* Schaukasten-Rahmen: Inhalt nicht überlaufen lassen */
body.page .schaukasten-rahmen {
    overflow: visible;
}

/* ===========================================================
   Schaukasten: WP-Grid-Bildstile komplett überschreiben
   =========================================================== */

/* Grid-Items nicht auf gleiche Höhe strecken */
body.page .schaukasten-aushange.wp-block-latest-posts.is-grid {
    align-items: start !important;
}

/* Bild-Container: keine Höhenbeschränkung */
body.page .schaukasten-aushange .wp-block-latest-posts__featured-image {
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.page .schaukasten-aushange .wp-block-latest-posts__featured-image a {
    display: block !important;
    height: auto !important;
}

/* Bild: keine Beschneidung, volle Darstellung */
body.page .schaukasten-aushange .wp-block-latest-posts__featured-image img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: top center !important;
    aspect-ratio: auto !important;
}

/* ===========================================================
   Termine-Seite: Monatskarten + farbige Dots
   =========================================================== */

/* Legende */
body.page .termine-legende {
    background: rgba(34, 60, 60, 0.06);
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}
body.page .termine-legende p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--bluehauf-text-dark);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Farbige Dots */
.termin-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: middle;
}
.termin-sprechstunde { background-color: #4a9a6e; }
.termin-arbeit { background-color: #4a7fb5; }
.termin-fest { background-color: #d4a843; }
.termin-wichtig { background-color: #c0392b; }

/* Monatskarte */
body.page .termin-monat {
    background: var(--bluehauf-paper);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* Monats-Header */
body.page .termin-monat-titel {
    background-color: var(--bluehauf-bg) !important;
    color: var(--bluehauf-text-light) !important;
    padding: 0.75rem 1.25rem !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Termin-Liste innerhalb der Karte */
body.page .termin-liste {
    padding: 0.5rem 1.25rem;
}

body.page .termin-liste p {
    color: var(--bluehauf-text-dark);
    font-size: 0.95rem;
    padding: 0.6rem 0;
    margin: 0 !important;
    border-bottom: 1px solid rgba(34, 60, 60, 0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.page .termin-liste p:last-child {
    border-bottom: none;
}

/* Hinweis unten */
body.page .termine-hinweis {
    font-size: 0.88rem;
    color: rgba(34, 60, 60, 0.5);
    margin-top: 2rem;
    font-style: italic;
}
body.page .termine-hinweis a {
    color: var(--bluehauf-bg);
}

/* Termine-Aushang im Schaukasten: gleiche Größe wie auf der Startseite */
body.page .schaukasten-rahmen .termine-aushang {
    max-width: 340px;
    margin-top: 2.5rem;
    margin-left: auto;
}

/* ===========================================================
   Downloads-Seite
   =========================================================== */
body.page .downloads-kategorie {
    background: var(--bluehauf-paper);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

body.page .downloads-kategorie h3 {
    color: var(--bluehauf-bg) !important;
    font-size: 1.1rem !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bluehauf-bg);
}

body.page .download-liste p {
    padding: 0.6rem 0;
    margin: 0 !important;
    border-bottom: 1px solid rgba(34, 60, 60, 0.06);
    font-size: 0.95rem;
    color: var(--bluehauf-text-dark);
}

body.page .download-liste p:last-child {
    border-bottom: none;
}

body.page .download-liste a {
    color: var(--bluehauf-bg);
    font-weight: 600;
    text-decoration: none;
}

body.page .download-liste a:hover {
    text-decoration: underline;
}

body.page .downloads-hinweis {
    font-size: 0.88rem;
    color: rgba(34, 60, 60, 0.5);
    margin-top: 2rem;
    font-style: italic;
}

/* ===========================================================
   Footer: Kadence-Farb-Overrides erzwingen
   =========================================================== */
footer.bluehauf-footer,
footer.bluehauf-footer *,
.bluehauf-footer,
.bluehauf-footer * {
    color: rgba(240, 237, 229, 0.8) !important;
}

footer.bluehauf-footer h4,
.bluehauf-footer h4,
.bluehauf-footer .bluehauf-footer-heading {
    color: #fff !important;
    font-family: var(--bluehauf-font-body) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

footer.bluehauf-footer a,
.bluehauf-footer a {
    color: rgba(240, 237, 229, 0.8) !important;
    text-decoration: none !important;
}

footer.bluehauf-footer a:hover,
.bluehauf-footer a:hover {
    color: #fff !important;
}

.bluehauf-footer .bluehauf-footer-icon {
    color: var(--bluehauf-tape) !important;
}

.bluehauf-footer-bottom p {
    color: rgba(240, 237, 229, 0.4) !important;
}

/* Footer Credit */
.bluehauf-footer-credit {
    font-size: 0.78rem !important;
    color: rgba(240, 237, 229, 0.3) !important;
    margin-top: 0.25rem;
}

.bluehauf-heart {
    color: #e74c3c !important;
    font-size: 0.95rem;
    display: inline-block;
    text-shadow: 0 0 2px rgba(231, 76, 60, 0.4);
}

/* ===========================================================
   Kontakt & Anfahrt
   =========================================================== */
body.page .kontakt-card {
    background: var(--bluehauf-paper);
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    margin-bottom: 1.5rem;
    position: relative;
    margin-top: 1.25rem;
}

body.page .kontakt-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 80px;
    height: 22px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 0px,
            rgba(255, 255, 255, 0.10) 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px
        ),
        linear-gradient(
            180deg,
            rgba(226, 215, 184, 0.50) 0%,
            rgba(226, 215, 184, 0.70) 50%,
            rgba(226, 215, 184, 0.50) 100%
        );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

body.page .kontakt-card p {
    color: var(--bluehauf-text-dark);
    line-height: 1.7;
}

body.page .kontakt-card a {
    color: var(--bluehauf-bg);
    font-weight: 600;
    text-decoration: none;
}

body.page .kontakt-card a:hover {
    text-decoration: underline;
}

/* Karte */
body.page .kontakt-karte {
    margin-bottom: 2rem;
}

body.page .kontakt-karte iframe {
    display: block;
    width: 100%;
    border-radius: 4px;
}

body.page .kontakt-karte-link {
    margin-top: 0.5rem;
    font-size: 0.88rem;
}

body.page .kontakt-karte-link a {
    color: var(--bluehauf-bg);
    text-decoration: none;
    font-weight: 600;
}

/* ===========================================================
   Cookie-/Datenschutz-Banner
   =========================================================== */
.bluehauf-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: var(--bluehauf-bg);
    border-top: 3px solid var(--bluehauf-tape);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    padding: 1.5rem 2rem;
}

.bluehauf-consent-inner {
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.bluehauf-consent-text {
    color: rgba(240, 237, 229, 0.85) !important;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
    min-width: 280px;
}

.bluehauf-consent-text a {
    color: var(--bluehauf-tape) !important;
    text-decoration: underline;
}

.bluehauf-consent-buttons {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.bluehauf-consent-btn {
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 4px;
    font-family: var(--bluehauf-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bluehauf-consent-btn:hover {
    transform: translateY(-1px);
}

.bluehauf-consent-accept {
    background-color: var(--bluehauf-tape);
    color: var(--bluehauf-bg);
}

.bluehauf-consent-accept:hover {
    background-color: #d4c9a3;
}

.bluehauf-consent-decline {
    background-color: transparent;
    color: rgba(240, 237, 229, 0.7);
    border: 1px solid rgba(240, 237, 229, 0.3);
}

.bluehauf-consent-decline:hover {
    border-color: rgba(240, 237, 229, 0.6);
    color: #fff;
}

/* Google Maps Platzhalter */
.maps-placeholder {
    width: 100%;
    height: 400px;
    background-color: rgba(34, 60, 60, 0.06);
    border: 1px solid rgba(34, 60, 60, 0.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.maps-placeholder-content {
    padding: 2rem;
}

.maps-placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.maps-placeholder-text {
    color: var(--bluehauf-text-dark);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.maps-placeholder-info {
    color: rgba(34, 60, 60, 0.5);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.maps-placeholder-btn {
    padding: 0.6rem 1.4rem;
    background-color: var(--bluehauf-bg);
    color: var(--bluehauf-text-light);
    border: none;
    border-radius: 4px;
    font-family: var(--bluehauf-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.maps-placeholder-btn:hover {
    background-color: var(--bluehauf-bg-darker);
}

@media (max-width: 768px) {
    .bluehauf-consent-inner {
        flex-direction: column;
        text-align: center;
    }
    .bluehauf-consent-buttons {
        justify-content: center;
    }
}

/* ===========================================================
   Wichtige-Mitteilung-Banner (Startseite)
   =========================================================== */
.bluehauf-alert {
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.bluehauf-alert-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bluehauf-alert-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.bluehauf-alert-heading {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.25rem !important;
}

.bluehauf-alert-text {
    font-size: 0.95rem;
    margin: 0 !important;
    line-height: 1.6;
}

/* Information (blau) */
.bluehauf-alert-info {
    background-color: #e8f0fe;
    border-left: 5px solid #4a7fb5;
}
.bluehauf-alert-info .bluehauf-alert-heading {
    color: #2c5a8a;
}
.bluehauf-alert-info .bluehauf-alert-text {
    color: #2c5a8a;
}

/* Hinweis (gelb) */
.bluehauf-alert-warning {
    background-color: #fef8e8;
    border-left: 5px solid #d4a843;
}
.bluehauf-alert-warning .bluehauf-alert-heading {
    color: #8a6d1b;
}
.bluehauf-alert-warning .bluehauf-alert-text {
    color: #6b5516;
}

/* Dringend (rot) */
.bluehauf-alert-urgent {
    background-color: #fde8e8;
    border-left: 5px solid #c0392b;
}
.bluehauf-alert-urgent .bluehauf-alert-heading {
    color: #922b21;
}
.bluehauf-alert-urgent .bluehauf-alert-text {
    color: #7b241c;
}