/*!
Theme Name: Blüh Auf Child
Theme URI: https://bluehauf-bremen.de
Description: Child Theme von Kadence für die Vereinswebsite des Kleingartenvereins Blüh Auf e.V. (Bremen-Gröpelingen). Polaroid-Optik, dunkelgrüne Sidebar, Handschrift-Webfonts.
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: 640px;
}

/* 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: 11rem 2rem 3rem;
    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: auto;
    margin-right: auto;
}

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

/* ===========================================================
   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 (alle Seiten)
   =========================================================== */
.bluehauf-footer {
    background-color: var(--bluehauf-bg-darker);
    color: var(--bluehauf-text-light);
    padding: 3rem 2rem;
    font-size: 1rem;
    line-height: 1.65;
}
.bluehauf-footer-inner {
    max-width: 1200px;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
}
.bluehauf-footer p {
    margin: 0 0 0.6rem 0;
    color: var(--bluehauf-text-light);
}
.bluehauf-footer-title {
    font-weight: 700;
    font-size: 1rem;
}
.bluehauf-footer-label {
    font-weight: 600;
}
.bluehauf-footer a,
body.home .bluehauf-footer a,
body.page .bluehauf-footer a {
    color: var(--bluehauf-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bluehauf-footer a:hover {
    color: var(--bluehauf-link-hover);
    text-decoration: underline;
}
.bluehauf-footer-icon {
    display: inline-block;
    width: 1.4em;
    color: var(--bluehauf-tape);
}
.bluehauf-footer-legal {
    margin-top: 1rem;
}
.bluehauf-footer-legal a {
    margin-right: 1.5rem;
}
.bluehauf-footer-col--right {
    text-align: right;
}
.bluehauf-footer-copyright {
    font-size: 0.85rem;
    color: var(--bluehauf-text-muted);
}

/* Vereinsname-Link als Überschrift (hell, ohne Unterstrich) */
.bluehauf-footer-title a,
body.home .bluehauf-footer-title a,
body.page .bluehauf-footer-title a {
    color: var(--bluehauf-text-light);
    text-decoration: none;
}
.bluehauf-footer-title a:hover,
body.home .bluehauf-footer-title a:hover,
body.page .bluehauf-footer-title a:hover {
    color: var(--bluehauf-link);
    text-decoration: underline;
}

/* Rechtliche Links etwas prominenter */
.bluehauf-footer-legal a {
    font-weight: 600;
}

@media (max-width: 768px) {
    .bluehauf-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .bluehauf-footer-col--right {
        text-align: left;
    }
}

/* ===========================================================
   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;
}