/* ========================================
   Spirit Coaching - energieinharmonie.eu
   Custom CSS v4.1 - Logo oben + Nav-Block rechts + Physio-Sidebar
   Stand: 2026-02-27
   ======================================== */

/* Lora wird nativ ueber Kadence Theme Mods geladen.
   Kadence setzt --global-body-font-family und --global-heading-font-family.
   Kein @import noetig, keine !important Overrides fuer font-family. */

/* ── 1. GRUNDLEGENDE TYPOGRAFIE ── */
body,
p,
li,
td,
th,
input,
textarea,
select,
.entry-content,
.site-header,
.site-footer {
    color: #3D1A6E;
    line-height: 1.8;
}

p {
    margin-bottom: 1.2em;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-weight: 700;
    color: #2E0066;
    line-height: 1.3;
}

h1 { font-size: 2.2em; margin-bottom: 0.6em; }
h2 { font-size: 1.8em; margin-bottom: 0.5em; }
h3 { font-size: 1.5em; margin-bottom: 0.4em; }
h4 { font-size: 1.3em; margin-bottom: 0.4em; }
h5 { font-size: 1.1em; margin-bottom: 0.3em; }
h6 { font-size: 1em; margin-bottom: 0.3em; }

/* ── 2. HINTERGRUNDBILD ── */
body {
    background-image: url("/wp-content/uploads/bg-energie-harmonie.jpg") !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-color: #F5D5A0 !important;
}

/* ── 3. CONTENT-WRAPPER: TRANSPARENT - Hintergrund voll sichtbar ── */
.site-container .site-inner,
.content-area,
.entry-content-wrap {
    background: transparent !important;
    border-radius: 8px;
    padding: 30px 35px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Kadence-spezifisch: Hauptcontainer begrenzen */
.site-container .site-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* Seitenraender frei halten */
.site {
    max-width: 100%;
    background: transparent !important;
}

/* Kadence-Container/Wrapper/Rows: ALLE transparent
   WICHTIG: .wp-block-cover und seine Kinder sind AUSGENOMMEN!
   Das Cover-Overlay braucht seine Hintergrundfarbe fuer Textkontrast. */
.wp-block-kadence-rowlayout,
.wp-block-kadence-column,
.kt-row-layout-inner,
.kt-row-column-wrap,
.kadence-column,
.wp-block-group,
.wp-block-column,
.wp-block-columns,
.entry-content > .alignfull:not(.wp-block-cover),
.entry-content > .alignwide:not(.wp-block-cover),
.content-bg,
.content-container,
#inner-wrap,
.site-main,
.loop-entry,
.entry-content,
.entry {
    background: transparent !important;
    background-color: transparent !important;
}

/* ── 3a. COVER-BLOCK SCHUTZ ──
   Die obige Regel trifft auch .wp-block-group etc. INNERHALB des Cover-Blocks.
   Wir muessen das Overlay und den Cover selbst explizit schuetzen. */

/* Cover-Block Overlay: komplett transparent (Hintergrundbild soll durchscheinen) */
.wp-block-cover .wp-block-cover__background,
.wp-block-cover .has-background-dim,
.wp-block-cover .has-palette-1-background-color {
    opacity: 0 !important;
}

/* Cover-Block innere Container: transparent damit Overlay durchscheint */
.wp-block-cover .content-bg,
.wp-block-cover .wp-block-group,
.wp-block-cover .wp-block-column,
.wp-block-cover .wp-block-columns,
.wp-block-cover .wp-block-kadence-rowlayout,
.wp-block-cover .wp-block-kadence-column,
.wp-block-cover .kt-row-layout-inner,
.wp-block-cover .kt-row-column-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

/* Cover-Block Text: Dunkelviolett mit starkem weissem Schatten fuer Kontrast */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4 {
    color: #2E0066 !important;
    text-shadow: 0 0 12px rgba(255,255,255,0.95),
                 0 0 25px rgba(255,255,255,0.8),
                 1px 1px 4px rgba(255,255,255,0.9) !important;
}

.wp-block-cover p,
.wp-block-cover li,
.wp-block-cover .wp-block-cover__inner-container p {
    color: #3D1A6E !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.95),
                 0 0 20px rgba(255,255,255,0.8),
                 1px 1px 3px rgba(255,255,255,0.9) !important;
}

/* Cover-Block Buttons: bleiben dunkelviolett mit weisser Schrift */
.wp-block-cover .wp-block-button__link {
    color: #fff !important;
    text-shadow: none !important;
}

/* ── 3b. TEXT-LESBARKEIT auf Hintergrundbild ── */
/* Leichter Schatten fuer dunklen Text auf buntem Hintergrund */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8),
                 0 0 8px rgba(255, 255, 255, 0.5);
}

p, li, td, th,
.entry-content,
.entry-content p,
.entry-content li {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7),
                 0 0 6px rgba(255, 255, 255, 0.4);
}

/* ── 4. HEADER: LOGO-BAR OBEN + NAV-BLOCK RECHTS ──
   Kadence rendert #masthead als ein Element. Wir nutzen es als
   duenne Top-Bar fuer das Logo und positionieren die Navigation
   per CSS als eigenen fixierten Block rechts daneben. */

/* Header-Grundlayout: fixiert oben, volle Breite, duenne Bar */
#masthead,
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 2px solid #D4A574;
    border-left: none !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Header-Row intern: horizontal zentriert fuer Logo-Bar */
.site-header .site-header-row-container-inner,
.site-header .site-main-header-inner-wrap,
.site-header-row-container-inner,
.site-header .site-header-upper-inner-wrap,
.site-header .site-header-inner-wrap {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 56px !important;
}

/* Header-Sections: horizontal nebeneinander */
.site-header .site-header-section,
.site-header .site-header-item {
    width: auto !important;
    justify-content: center !important;
}

/* Logo/Branding in der Top-Bar: kompakt horizontal */
.site-header .site-branding,
.site-header .site-title-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 6px 20px !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    gap: 12px !important;
    white-space: nowrap !important;
}

.site-header .site-branding img,
.site-header .custom-logo,
.header-logo img {
    max-height: 42px !important;
    width: auto;
    height: auto;
}

/* Site-Title in Top-Bar: inline neben Logo */
.site-title,
.site-title a {
    font-size: 1.1em !important;
    white-space: nowrap !important;
    text-align: center;
    line-height: 1.3;
    color: #2E0066;
    text-decoration: none;
}

/* Navigation im Header AUSBLENDEN (wird separat positioniert) */
.site-header .header-navigation,
.site-header .header-navigation nav,
.site-header .primary-menu-container {
    position: fixed !important;
    right: 20px !important;
    top: 74px !important;
    left: auto !important;
    width: 240px !important;
    z-index: 999;
    background: rgba(55, 0, 104, 0.1) !important;
    border: 1px solid #2E0066 !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    font-size: 15px !important;
    box-shadow: 0 4px 15px rgba(46, 0, 102, 0.08);
}

/* Nur der aeusserste .header-navigation soll den Block-Stil haben.
   Innere nav und .primary-menu-container erben Position, brauchen
   aber keine eigene Box. */
.site-header .header-navigation nav,
.site-header .primary-menu-container {
    position: static !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* ── 5. MENUE VERTIKAL (im Nav-Block rechts) ── */

/* Navigation vertikal */
.header-navigation .menu,
.primary-menu-container .menu {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100%;
    justify-content: flex-start !important;
}

/* Menue-Items: vertikal, volle Breite */
.site-header .header-navigation .menu > li {
    width: 100% !important;
}

.site-header .header-navigation .menu > li > a {
    display: block !important;
    padding: 7px 15px 7px 38px !important;
    font-size: 15px !important;
    white-space: normal !important;
    color: #3D1A6E;
    border-bottom: 1px solid rgba(46, 0, 102, 0.1);
    transition: all 0.2s ease;
    text-decoration: none;
}

.site-header .header-navigation .menu > li:last-child > a {
    border-bottom: none;
}

.site-header .header-navigation .menu > li > a:hover {
    background: #a67e8f;
    color: #fff;
}

/* Aktive Seite hervorheben */
.site-header .header-navigation .menu > li.current-menu-item > a,
.site-header .header-navigation .menu > li.current_page_item > a,
.site-header .header-navigation .menu > li.current-menu-ancestor > a {
    background: #2E0066 !important;
    color: #fff !important;
    text-shadow: none !important;
}

/* Submenu: eingerueckt statt Dropdown */
.site-header .header-navigation .menu > li > ul.sub-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-header .header-navigation .sub-menu > li > a {
    padding: 6px 15px 6px 50px !important;
    font-size: 13px !important;
    color: #3D1A6E;
    border-bottom: 1px solid rgba(46, 0, 102, 0.06);
}

.site-header .header-navigation .sub-menu > li > a:hover {
    background: rgba(166, 126, 143, 0.5);
    color: #fff;
}

/* Dropdown-Pfeile ausblenden (brauchen wir nicht vertikal) */
.site-header .header-navigation .menu > li > a .dropdown-nav-toggle,
.site-header .header-navigation .menu > li .dropdown-nav-toggle {
    display: none !important;
}

/* Content-Bereich: Platz fuer Top-Bar (oben) und Nav-Block (rechts) */
body,
.site {
    margin-top: 60px !important;
    margin-right: 280px !important;
}

/* Footer: auch Platz fuer Nav-Block rechts */
.site-footer {
    margin-right: 280px !important;
}

/* Sticky-Verhalten: Header bleibt oben fixiert */
.item-is-fixed,
.header-sticky-shrink,
#masthead.item-is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
}

/* Header und Nav-Block: kein text-shadow */
.site-header *,
.site-header a,
.site-header .site-title,
.site-header .site-title a,
.site-header .header-navigation a,
.site-header p {
    text-shadow: none !important;
}

/* ── 5a. PHYSIO-ANGEBOT BLOCK (direkt unter Nav-Menü) ── */
.eih-physio-nav-block {
    list-style: none !important;
    border-top: none !important;
    margin-top: 10px !important;
    padding: 15px 15px 10px !important;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Letzter Menüpunkt vor Physio-Block: dessen border-bottom wird zur Trennlinie */
.header-navigation .menu > li:nth-last-child(2) > a {
    border-bottom: 1px solid rgba(212, 165, 116, 0.5) !important;
}

.eih-physio-nav-block .eih-physio-text {
    font-weight: 700;
    color: #2E0066;
    font-size: 0.82em;
    line-height: 1.4;
    margin-bottom: 10px;
}

.eih-physio-nav-block .eih-physio-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: #2E0066;
    font-weight: 700;
    font-size: 0.82em;
    transition: color 0.3s ease;
    padding: 0 !important;
    border-bottom: none !important;
    background: none !important;
}

.eih-physio-nav-block .eih-physio-link:hover {
    color: #8B5CF6;
    background: none !important;
}

.eih-physio-nav-block .eih-physio-logo {
    width: 59px;
    height: 46px;
    display: block;
    margin: 0 auto;
}

/* Physio-Block: kein text-shadow */
.eih-physio-nav-block,
.eih-physio-nav-block p,
.eih-physio-nav-block a,
.eih-physio-nav-block span {
    text-shadow: none !important;
}

/* Mobile: Physio-Block ausblenden */
@media (max-width: 1024px) {
    .eih-physio-nav-block {
        display: none;
    }
}

/* ── 6. BUTTONS ── */
.wp-block-button__link,
.kb-button,
.entry-content .wp-block-button__link {
    background-color: #2E0066 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    text-shadow: none;
}

.wp-block-button__link:hover,
.kb-button:hover,
.entry-content .wp-block-button__link:hover {
    background-color: #8B5CF6 !important;
    color: #fff !important;
}

/* ── 7. LINKS ── */
a:not(.wp-block-button__link) {
    color: #2E0066;
    transition: color 0.3s ease;
    text-decoration-color: #D4A574;
}

a:not(.wp-block-button__link):hover {
    color: #8B5CF6;
}

/* ── 8. BLOCKQUOTES ── */
blockquote {
    border-left: 4px solid #D4A574;
    font-style: italic;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0 8px 8px 0;
    color: #3D1A6E;
}

blockquote p {
    margin-bottom: 0.5em;
}

/* ── 9. FOOTER ── */
.site-footer {
    border-top: 2px solid #D4A574;
    background: rgba(255, 255, 255, 0.95) !important;
    font-size: 0.9em;
}

/* Kadence Footer Widgets/Rows ebenfalls opak halten */
.site-footer .site-footer-wrap,
.site-footer .footer-widget-area,
.site-footer .site-footer-row-container-inner,
.footer-inner-wrap,
.eih-footer {
    background: rgba(255, 255, 255, 0.95) !important;
}

.site-footer a {
    color: #2E0066;
}

.site-footer a:hover {
    color: #8B5CF6;
}

/* Footer-Text: kein text-shadow noetig (opaker Hintergrund) */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.eih-footer,
.eih-footer p {
    text-shadow: none;
}

/* ── 10. HERO/COVER-BLOCK ── */
.wp-block-cover {
    border-radius: 8px;
    overflow: hidden;
}

/* ── 11. TABELLEN ── */
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table td,
.wp-block-table th {
    padding: 10px 14px;
    border: 1px solid #D4A574;
}

.wp-block-table th {
    background: rgba(255, 255, 255, 0.15);
    font-weight: 700;
    color: #2E0066;
}

/* ── 12. BILDER ── */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ── 13. LISTEN ── */
.entry-content ul,
.entry-content ol {
    margin-bottom: 1.2em;
    padding-left: 1.5em;
}

.entry-content li {
    margin-bottom: 0.4em;
}

/* ── 14. COOKIE-BANNER FIX (GDPR Shield Plugin) ── */
.gdpr-shield-overlay,
.gdpr-shield-wrapper,
.gdpr-shield-container,
[class*="gdpr-shield"],
[class*="cookie-banner"],
[class*="cookie-consent"],
[id*="cookie-banner"],
[id*="cookie-consent"],
[id*="gdpr"] {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 280px !important;
    width: auto !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    transform: none !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
    border-top: 2px solid #D4A574 !important;
    text-shadow: none;
}

/* Overlay-Hintergrund entfernen (kein Fullscreen-Dimmer) */
.gdpr-shield-overlay::before,
[class*="gdpr"]::before,
[class*="cookie"]::before {
    display: none !important;
}

/* ── 15. RESPONSIVE ── */

/* Tablet: Nav-Block etwas schmaler, naeher am Rand */
@media (max-width: 1200px) and (min-width: 1025px) {
    .site-header .header-navigation {
        width: 210px !important;
        right: 12px !important;
    }
    body,
    .site,
    .site-footer {
        margin-right: 245px !important;
    }
    .gdpr-shield-overlay,
    .gdpr-shield-wrapper,
    .gdpr-shield-container,
    [class*="gdpr-shield"],
    [class*="cookie-banner"],
    [class*="cookie-consent"],
    [id*="cookie-banner"],
    [id*="cookie-consent"],
    [id*="gdpr"] {
        right: 245px !important;
    }
}

/* ── RESPONSIVE: Unter 1024px - Mobile/Tablet Layout ── */
@media (max-width: 1024px) {
    /* Header-Bar oben bleibt, aber schmaler */
    #masthead,
    .site-header {
        max-height: 54px !important;
    }

    /* Navigation verstecken (off-screen rechts) */
    .site-header .header-navigation {
        right: -290px !important;
        width: 280px !important;
        top: 54px !important;
        transition: right 0.3s ease;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
        border-radius: 0 0 0 8px !important;
        height: auto !important;
        max-height: calc(100vh - 54px) !important;
        overflow-y: auto !important;
    }

    /* Wenn mobiles Menu geoeffnet */
    .mobile-toggled .site-header .header-navigation,
    .header-menu-open .site-header .header-navigation {
        right: 0 !important;
    }

    /* Content: kein Margin rechts mehr, nur oben fuer Header-Bar */
    body,
    .site {
        margin-right: 0 !important;
        margin-top: 54px !important;
    }
    .site-footer {
        margin-right: 0 !important;
    }

    /* Hamburger-Button fixiert rechts oben IN der Header-Bar */
    .mobile-toggle-open-container,
    .site-header .mobile-toggle-open-container {
        position: fixed !important;
        right: 15px !important;
        top: 8px !important;
        z-index: 1001 !important;
        background: transparent !important;
        border-radius: 8px;
        padding: 8px !important;
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-toggle-open-container .menu-toggle-icon,
    .mobile-toggle-open-container svg {
        color: #2E0066 !important;
        fill: #2E0066 !important;
    }

    /* Overlay hinter dem Nav-Drawer wenn geoeffnet */
    .mobile-toggled::before,
    .header-menu-open::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 998;
    }

    /* Cookie-Banner: volle Breite auf Mobile */
    .gdpr-shield-overlay,
    .gdpr-shield-wrapper,
    .gdpr-shield-container,
    [class*="gdpr-shield"],
    [class*="cookie-banner"],
    [class*="cookie-consent"],
    [id*="cookie-banner"],
    [id*="cookie-consent"],
    [id*="gdpr"] {
        right: 0 !important;
        width: 100% !important;
    }

    /* Sticky-Verhalten anpassen */
    .item-is-fixed,
    .header-sticky-shrink,
    #masthead.item-is-fixed {
        width: 100% !important;
        max-height: 54px !important;
    }
}

@media (max-width: 768px) {
    .site-container .site-inner,
    .content-area,
    .entry-content-wrap {
        padding: 18px 16px;
        border-radius: 0;
        margin: 0;
    }

    h1 { font-size: 1.7em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.2em; }

    body,
    p,
    li {
        font-size: 16px;
    }

    .site-title,
    .site-title a {
        font-size: 0.95em !important;
    }

    .site-header .site-branding img,
    .site-header .custom-logo,
    .header-logo img {
        max-height: 36px !important;
    }

    blockquote {
        padding: 0.8em 1em;
        margin: 1em 0;
    }
}

@media (max-width: 480px) {
    .site-container .site-inner,
    .content-area,
    .entry-content-wrap {
        padding: 14px 12px;
    }

    h1 { font-size: 1.5em; }
    h2 { font-size: 1.25em; }

    .wp-block-button__link,
    .kb-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    /* Logo-Text auf kleinen Screens ggf. abschneiden */
    .site-title,
    .site-title a {
        font-size: 0.85em !important;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── 16. KADENCE-SPEZIFISCHE KORREKTUREN ── */

/* Header-Row: kein Padding-Overwrite */
.site-header .site-header-row-container-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Kadence Separator Farbe anpassen */
hr,
.wp-block-separator {
    border-color: #D4A574;
    opacity: 0.6;
}

/* Kadence Spacer sichtbar lassen */
.wp-block-kadence-spacer .kt-divider {
    border-color: #D4A574;
}

/* ── 17. NAV-BLOCK SCROLLBAR STYLING ── */
.site-header .header-navigation::-webkit-scrollbar {
    width: 4px;
}

.site-header .header-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.site-header .header-navigation::-webkit-scrollbar-thumb {
    background: rgba(46, 0, 102, 0.3);
    border-radius: 4px;
}

.site-header .header-navigation::-webkit-scrollbar-thumb:hover {
    background: rgba(46, 0, 102, 0.5);
}

/* Firefox Scrollbar */
.site-header .header-navigation {
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 0, 102, 0.3) transparent;
}

/* Print-Styles */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }
    .site-header,
    .site-footer,
    [class*="cookie"],
    [class*="gdpr"] {
        display: none !important;
    }
    .site,
    .site-footer {
        margin-right: 0 !important;
        margin-top: 0 !important;
    }
    .site-container .site-inner,
    .content-area,
    .entry-content-wrap {
        background: transparent;
        max-width: 100%;
    }
    /* Kein text-shadow im Druck */
    * {
        text-shadow: none !important;
    }
}