/*
Theme Name: QiGong Child
Template: generatepress
Description: Child-Theme für die QiGong-Website von Peter. Basiert auf GeneratePress.
Version: 1.2.0
Text Domain: qigong-child
*/

/* ===================================================
   INHALTSVERZEICHNIS
   01. Google Fonts
   02. Design-Tokens
   03. Basis
   04. GeneratePress Overrides
   05. Header & Navigation
   06. Seitentitel
   07. Hero / Startseite
   08. Buttons / CTAs
   09. Karten / Kacheln
   10. Zweispalten-Layout
   11. Ratgeber / Artikelliste
   12. Seiten- und Inhaltsbreiten
   13. Hinweisboxen / Intro-Elemente
   14. Footer
   15. Responsive
   =================================================== */

/* ===================================================
   01. GOOGLE FONTS
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ===================================================
   02. DESIGN-TOKENS
   Zentrale Farb-, Schrift- und Layoutvariablen
   =================================================== */
:root {
    --color-primary:       #4F7A2A;
    --color-primary-dark:  #3E6222;
    --color-primary-light: #C8E196;
    --color-secondary:     #A6D454;
    --color-text:          #2F2F2F;
    --color-text-light:    #575756;
    --color-bg:            #FFFFFF;
    --color-bg-soft:       #F9F9F7;

    --font-heading: 'Roboto', system-ui, sans-serif;
    --font-body:    'Roboto', system-ui, sans-serif;

    --radius:         8px;
    --radius-btn:     25px;
    --radius-card:    22px;
    --max-width:      1200px;
    --max-width-page: 1100px;
    --max-width-post: 860px;

    --shadow-card:    0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-hover:   0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-header:  0 2px 10px rgba(0, 0, 0, 0.06);
}

/* ===================================================
   03. BASIS
   Globale Typografie, Links, Bilder
   =================================================== */
body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-text);
    background-color: var(--color-bg) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text);
}

h1,
h2,
h1.wp-block-heading,
h2.wp-block-heading,
.entry-title {
    color: var(--color-primary) !important;
}

h3,
h4,
h3.wp-block-heading,
h4.wp-block-heading {
    color: var(--color-text) !important;
}

h3,
h4 {
    color: var(--color-text);
}

h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.375rem, 3vw, 2.125rem);
}

h3 {
    font-size: clamp(1.125rem, 2vw, 1.625rem);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    border: 1px solid #d0d0d0;
    border-radius: var(--radius); /* einheitlich 8px im ganzen Design */
}

/* Kein Rahmen für Logo, Icons und dekorative UI-Elemente */
.site-logo img,
.wp-block-site-logo img,
.nav-bar img,
.service-card img,
.team-card img,
.wp-block-image.no-border img,
img.no-border {
    border: none;
    border-radius: 0;
}

/* ===================================================
   04. GENERATEPRESS OVERRIDES
   Standard-Hintergründe, Sidebar, Post-Navigation
   =================================================== */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
    background-color: #ffffff;
    box-shadow: none;
}

/* Sidebar komplett ausblenden */
.widget-area.sidebar,
.is-right-sidebar,
.is-left-sidebar {
    display: none !important;
}

/* Inhaltsbereich volle Breite */
.content-area {
    width: 100% !important;
    margin: 0 !important;
}

/* Post-Navigation ausblenden */
.post-navigation,
.nav-links,
.navigation.post-navigation {
    display: none !important;
}

/* ===================================================
   05. HEADER & NAVIGATION
   Finaler Zustand:
   - Logo links
   - Navigation rechts
   - kein separater sichtbarer Sitetitel
   =================================================== */
.site-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: var(--shadow-header) !important;
    position: sticky;
    top: 0;
    z-index: 999;
}

.nav-float-right .inside-header,
.inside-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 14px 20px !important;
    gap: 0 !important;
}

/* Logo links */
.inside-header .site-logo {
    order: 1;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    padding: 0;
}

.inside-header .site-logo img.is-logo-image {
    height: 72px !important;
    width: auto !important;
    max-width: 270px !important;
    display: block;
}

/* Branding/Sitetitel ausblenden, da Text bereits im Logo enthalten ist */
.inside-header .main-title,
.inside-header .site-branding,
.site-description {
    display: none !important;
}

/* Navigation rechts */
.inside-header .main-navigation {
    order: 3;
    margin-left: auto !important;
    float: none !important;
    display: flex !important;
    align-items: center;
}

.inside-header .main-navigation .inside-navigation {
    padding: 0 !important;
}

/* Menülinks */
.main-navigation a {
    color: var(--color-text) !important;
    font-family: var(--font-body);
    font-weight: 400;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--color-primary) !important;
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 2px;
}

/* Mobiles Menü-Symbol */
.gen-nav-toggle-buttons .menu-toggle,
.gen-nav-toggle-buttons .menu-toggle:hover {
    color: var(--color-text);
    background: transparent;
}

/* Mobile Navigation — Dropdown unter dem Header, nicht inline im Flex-Row */
@media (max-width: 768px) {
    /* Positionierungsanker: site-header (bereits in GP gesetzt, hier zur Sicherheit) */
    .site-header {
        position: relative;
    }
    /* .inside-navigation hat position:relative in GP — entfernen damit
       das absolute Dropdown sich am site-header (volle Breite) orientiert */
    .inside-header .main-navigation .inside-navigation {
        position: static !important;
    }
    /* Verhindert horizontalen Overflow durch geöffnetes Menü */
    body, .site-header {
        overflow-x: clip;
    }
    /* Geöffnetes Menü: absolut unter dem Header, volle Breite */
    #site-navigation.toggled .main-nav {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        flex-basis: auto !important;
        z-index: 999;
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        padding: 8px 20px 16px;
    }
    /* Menüpunkte vertikal stapeln */
    #site-navigation.toggled .main-nav > ul > li {
        display: block !important;
        float: none !important;
        clear: both !important;
        border-bottom: 1px solid #f0f0f0;
        width: auto !important;
    }
    #site-navigation.toggled .main-nav > ul > li:last-child {
        border-bottom: none;
    }
    #site-navigation.toggled .main-nav > ul > li > a {
        display: block !important;
        padding: 12px 0 !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
        border-bottom: none !important;
        color: var(--color-text) !important;
    }
    #site-navigation.toggled .main-nav > ul > li > a:hover {
        color: var(--color-primary) !important;
    }
}

/* ===================================================
   06. SEITENTITEL
   Gutenberg übernimmt den eigentlichen Seitenaufbau
   =================================================== */

/* Startseite / Frontpage ohne Titel */
.home .entry-title,
.front-page .entry-title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Seitentitel bei normalen Seiten ausblenden */
.page .entry-title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Beitragstitel sichtbar lassen */
.single .entry-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin-top: 1.8rem;
    margin-bottom: 1.8rem;
}

/* Einheitlicher Absatz-Abstand in Beiträgen */
.single .entry-content p,
.single .entry-content .wp-block-paragraph {
    margin-top: 0 !important;
    margin-bottom: 1.4em !important;
    margin-block-start: 0 !important;
    margin-block-end: 1.4em !important;
}

/* Block-Gap zwischen allen Content-Blöcken normalisieren */
.single .entry-content > * + * {
    margin-top: 0 !important;
}

/* ===================================================
   07. HERO / STARTSEITE
   Grüner Einstiegsbereich für die Homepage
   =================================================== */
.hero-section {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 80px 20px;
    text-align: center;
}

.hero-section h1,
.hero-section h2 {
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.hero-section h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin-bottom: 0.5rem;
}

.hero-section .tagline {
    font-size: 1.15rem;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 0.75rem;
}

.hero-section .intro-text {
    font-size: 1rem;
    opacity: 0.85;
    max-width: 720px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

/* ===================================================
   08. BUTTONS / CTAs
   Standard-Buttons + Gutenberg-Buttons
   =================================================== */
.btn,
.wp-block-button__link,
.wp-element-button,
.button {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
    min-height: 44px;
    text-decoration: none !important;
}

.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover {
    background-color: var(--color-primary-dark) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Sonderregel für Buttons im Hero */
.hero-section .wp-block-button__link,
.hero-section .btn {
    background-color: #ffffff !important;
    color: var(--color-primary) !important;
}

.hero-section .wp-block-button__link:hover,
.hero-section .btn:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark) !important;
}

/* ===================================================
   09. KARTEN / KACHELN
   Für Angebote, Teaser und Übersichtsseiten
   =================================================== */
.cards-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* Gutenberg fügt __inner-container ein — Grid dort anwenden */
.cards-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.service-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.service-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

/* Inner Container flush machen — kein Block-Gap über dem Bild */
.service-card .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.service-card figure.wp-block-image,
.service-card .wp-block-group__inner-container > figure:first-child {
    margin: 0 !important;
    padding: 0 !important;
    margin-block-start: 0 !important;
    line-height: 0;
    flex-shrink: 0;
}

.service-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    display: block;
}

.service-card-body {
    padding: 14px 18px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card-body h2,
.service-card-body h3 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

.service-card-body p {
    color: var(--color-text-light);
    flex: 1;
    margin-bottom: 1.25rem;
    font-size: 14px;
}

/* ===================================================
   10. ZWEISPALTEN-LAYOUT
   Für Bild-Text-Abschnitte
   =================================================== */
.two-col-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 60px 20px;
}

.two-col-section img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

/* ===================================================
   11. RATGEBER / ARTIKELLISTE
   Für Übersichtsseiten und Excerpts
   =================================================== */
.article-list {
    max-width: var(--max-width-post);
    margin: 0 auto;
    padding: 20px 0;
}

.article-list .entry-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.post-excerpt {
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.6;
}

/* ===================================================
   12. SEITEN- UND INHALTSBREITEN
   - Standardbereich
   - Seiten: 1100 px
   - Beiträge: 860 px
   =================================================== */
.site-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 60px 20px;
}

.entry-content {
    max-width: 760px;
}

/* Seiten */
.page .site-content,
.page .entry-content {
    max-width: var(--max-width-page);
    margin-left: auto;
    margin-right: auto;
}

/* Beiträge */
.single .site-content,
.single .entry-content {
    max-width: var(--max-width-post);
    margin-left: auto;
    margin-right: auto;
}

/* Seiten: Gutenberg-Blöcke steuern Abstände selbst */
.page .inside-article {
    padding: 0 !important;
}

.page .site-content {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
}

.page .entry-content {
    padding-top: 0 !important;
}

/* ===================================================
   13. HINWEISBOXEN / INTRO-ELEMENTE
   Einleitungen, Mitgliederhinweise, Info-Boxen
   =================================================== */
.entry-content h2 {
    margin-top: 3rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--color-primary-light);
}

.page-intro {
    background: var(--color-bg-soft);
    border-left: 4px solid var(--color-primary);
    padding: 20px 24px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 2rem;
    font-size: 15px;
    color: var(--color-text-light);
}

.members-only-notice {
    background-color: #f0f5ee;
    border-left: 4px solid var(--color-primary);
    padding: 18px 22px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.5rem 0;
}

/* ===================================================
   14. FOOTER
   Dreispaltig: Navigation · Rechtliches · Service
   Dunkelgrün, weiße Typografie
   =================================================== */
.site-footer {
    background-color: var(--color-primary) !important;
    color: rgba(255, 255, 255, 0.75);
    padding: 0 !important;
    font-size: 14px;
}

/* GeneratePress-Innenbereich zurücksetzen */
.site-footer .inside-footer {
    padding: 0 !important;
    max-width: 100% !important;
}

/* Zentrierender Wrapper */
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 24px 20px;
}

/* Logo + Spalten nebeneinander */
.footer-main {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

/* Markenbereich links */
.footer-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 4px;
}

.footer-logo-link {
    display: inline-block;
    line-height: 0;
}

.footer-logo-img {
    height: auto;
    width: 160px;
    max-width: 100%;
    display: block;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Links */
.site-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.18s;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Dreispaltiges Menügitter */
.footer-columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 0;
    padding-top: 16px;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 48px;
}

/* Spaltenüberschriften */
.footer-col h3 {
    color: #ffffff !important;
    font-size: 11px;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0 !important;
    margin-bottom: 16px;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Linklisten */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
    line-height: 1.4;
}

.footer-col ul li a {
    font-size: 14px;
}

/* Abschlussleiste */
.footer-bottom {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
}

/* ===================================================
   15. RESPONSIVE
   Tablet, Mobile, sehr kleine Geräte
   =================================================== */

/* Tablet: 768–1199 px */
@media (max-width: 1199px) {
    h1 {
        font-size: clamp(2.125rem, 4vw, 2.375rem);
    }

    h2 {
        font-size: clamp(1.625rem, 3vw, 1.875rem);
    }

    .cards-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile: unter 767 px */
@media (max-width: 767px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: clamp(1.75rem, 6vw, 2rem);
    }

    h2 {
        font-size: clamp(1.375rem, 5vw, 1.625rem);
    }

    h3 {
        font-size: clamp(1.125rem, 4vw, 1.25rem);
    }

    .hero-section {
        padding: 50px 16px;
    }

    .cards-grid {
        padding: 40px 16px;
    }
    .cards-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .two-col-section {
        grid-template-columns: 1fr;
        padding: 40px 16px;
        gap: 32px;
    }

    .site-content {
        padding: 40px 16px;
    }

    .footer-main {
        flex-direction: column;
        gap: 20px;
    }

    .footer-brand {
        padding-top: 0;
    }

    .footer-columns {
        border-left: none;
        padding-left: 0;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        width: 100%;
    }

    .btn,
    .wp-block-button__link,
    .button {
        min-height: 48px;
        width: 100%;
        text-align: center;
    }
}

/* Sehr klein: unter 480 px */
@media (max-width: 480px) {
    .footer-columns {
        grid-template-columns: 1fr;
    }
}
/* Erste Überschrift in Bild-Text-Spalte: Strich bündig mit Bildkante */
.wp-block-columns .wp-block-column > .wp-block-heading:first-child {
    margin-top: 0;
}

/* ===================================================
   16. SUCHICON NAVIGATION
   Lupe + Dropdown-Suchfeld im Header
   =================================================== */
.inside-navigation {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.nav-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 20px;
    flex-shrink: 0;
}

.nav-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    padding: 6px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.2s;
}

.nav-search-btn:hover {
    color: var(--color-primary);
}

.nav-search-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 12px;
    width: 300px;
    z-index: 1000;
}

.nav-search-dropdown form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.nav-search-dropdown input[type="search"] {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    font-size: 15px;
    font-family: var(--font-body);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s;
    min-height: unset;
    width: auto;
}

.nav-search-dropdown input[type="search"]:focus {
    border-color: var(--color-primary);
}

.nav-search-dropdown button[type="submit"] {
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius);
    padding: 9px 12px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    min-height: unset;
    width: auto;
}

.nav-search-dropdown button[type="submit"]:hover {
    background: var(--color-primary-dark);
}

@media (max-width: 767px) {
    .nav-search-wrap {
        margin-left: 10px;
    }
    .nav-search-dropdown {
        width: 260px;
        right: -10px;
    }
}

/* ===================================================
   17. POSTS-GRID (Kategorieseiten)
   3-spaltig Desktop, 2 Tablet, 1 Mobil
   =================================================== */
.posts-grid .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Card: li direkt als Karte */
.posts-grid li.wp-block-post {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Alle direkten Kinder der li füllen volle Breite */
.posts-grid li.wp-block-post > * {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.posts-grid li.wp-block-post:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

/* Featured Image: mit Innenabstand, damit Bild rundum abgerundet schwebt */
.posts-grid .wp-block-post-featured-image {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px;
    box-sizing: border-box !important;
    line-height: 0;
}

.posts-grid .wp-block-post-featured-image a {
    display: block !important;
    width: 100% !important;
    line-height: 0;
}

.posts-grid .wp-block-post-featured-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: var(--radius); /* alle Ecken — konsistent mit globalem img-Standard */
    border: 1px solid #d0d0d0;
}

/* Inner group: volle Breite erzwingen */
.posts-grid li.wp-block-post > .wp-block-group {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Titel */
.posts-grid .wp-block-post-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    font-size: 1.05rem !important;
    line-height: 1.35;
}

.posts-grid .wp-block-post-title a {
    color: var(--color-primary) !important;
    text-decoration: none;
}

.posts-grid .wp-block-post-title a:hover {
    color: var(--color-primary-dark) !important;
}

/* Excerpt */
.posts-grid .wp-block-post-excerpt {
    font-size: 14px;
    color: var(--color-text-light);
    margin-top: 8px;
}

.posts-grid .wp-block-post-excerpt__more-link {
    color: var(--color-primary);
    font-size: 14px;
    text-decoration: none;
}

@media (max-width: 1199px) {
    .posts-grid .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .posts-grid .wp-block-post-template {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}


/* Weiterlesen-Button in Posts-Grid */
.posts-grid .wp-block-post-excerpt__more-link {
    display: inline-block !important;
    margin-top: 12px;
    padding: 10px 22px;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.posts-grid .wp-block-post-excerpt__more-link:hover {
    background-color: var(--color-primary-dark) !important;
    color: #ffffff !important;
}


/* Figure-Margin entfernen (Browser-Default) */
.posts-grid .wp-block-post-featured-image,
.posts-grid .wp-block-post-featured-image a {
    margin-bottom: 0 !important;
}

/* Abstand Bild → Inhalt auf 0 (kein Spalt) */
.posts-grid li.wp-block-post > .wp-block-group {
    padding-top: 0 !important;
}

/* Alle Abstände zwischen Bild und Titel vollständig eliminieren */
.posts-grid li.wp-block-post > .wp-block-group,
.posts-grid li.wp-block-post > .wp-block-group .wp-block-group__inner-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

.posts-grid .wp-block-post-title {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
}




/* ===================================================
   BEITRAGS-BILDER: abgerundete Ecken
   =================================================== */

/* Beitragsbild im Einzelbeitrag — rundum abgerundet */
.single .wp-block-post-featured-image img,
.single .post-thumbnail img,
.wp-post-image {
    border-radius: var(--radius);
    border: 1px solid #d0d0d0;
}

/* Bilder im Beitragsinhalt — rundum abgerundet */
.entry-content img,
.single .entry-content img {
    border-radius: var(--radius);
}
/* ===================================================
   18. TESTIMONIALS
   Erfahrungsberichte — 3-spaltig, wiederverwendbar
   Gleiche Klassen auf jeder Seite, andere Inhalte
   =================================================== */
.testimonials-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

.testimonial-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.testimonial-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.testimonial-card .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 28px !important;
    gap: 0 !important;
    height: 100%;
    box-sizing: border-box;
}

/* Kreisförmiges Foto */
.testimonial-card .testimonial-photo {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    line-height: 0;
}

.testimonial-card .testimonial-photo img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid var(--color-primary-light) !important;
    display: block;
    margin: 0 auto;
}

/* Zitat-Text */
p.testimonial-quote {
    font-style: italic;
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.7;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    flex: 1;
}

/* Name */
p.testimonial-name {
    font-weight: 500;
    color: var(--color-primary);
    font-size: 0.95rem;
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1199px) {
    .testimonials-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .testimonials-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Testimonial-Variante: rechteckiges Foto (nur Startseite) */
.testimonials-grid--rect .testimonial-card {
    overflow: hidden;
}

.testimonials-grid--rect .testimonial-card .wp-block-group__inner-container {
    padding: 0 !important;
    align-items: stretch;
    text-align: center;
}

.testimonials-grid--rect .testimonial-card .testimonial-photo {
    margin-bottom: 0 !important;
    width: 100%;
}

.testimonials-grid--rect .testimonial-card .testimonial-photo img {
    width: 100% !important;
    height: 220px !important;
    border-radius: 12px 12px 0 0 !important;
    object-fit: cover;
    object-position: center top;
    border: none !important;
}

.testimonials-grid--rect p.testimonial-quote {
    padding: 24px 24px 0;
}

.testimonials-grid--rect p.testimonial-name {
    padding: 0 24px 24px;
}

/* ===================================================
   FAQ-AKKORDEON
   details/summary – kein JavaScript nötig
   =================================================== */
.faq-accordion {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-accordion details {
    background: var(--color-bg);
    border: 1px solid #e0e8d4;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
    list-style: none;
}

.faq-accordion details[open] {
    border-color: var(--color-primary-light);
}

.faq-accordion details:not([open]):hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    border-color: var(--color-primary-light);
}

.faq-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::marker { display: none; }

.faq-accordion details[open] summary {
    color: var(--color-primary);
}

/* Chevron-Icon */
.faq-accordion summary::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--color-text-light);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.25s ease;
}

.faq-accordion details[open] summary::after {
    transform: rotate(180deg);
    background-color: var(--color-primary);
}

.faq-accordion .faq-answer {
    padding: 0 22px 18px;
    font-size: 0.975rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

.faq-accordion .faq-answer p {
    margin: 0;
}

@media (max-width: 600px) {
    .faq-accordion summary {
        padding: 15px 16px;
        font-size: 0.95rem;
    }
    .faq-accordion .faq-answer {
        padding: 0 16px 15px;
    }
}

.faq-followup {
    margin-top: 1.5rem;
    font-size: 0.975rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

.faq-followup a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq-followup a:hover {
    color: var(--color-primary-dark);
}

/* ============================================================
   Newsletter-Box
   ============================================================ */

.newsletter-box-wrap {
    margin: 3rem 0;
}

.newsletter-box-title {
    /* Gleiche Größe wie .entry-content h2 – kein font-size override nötig */
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2.5rem;
    line-height: 1.3;
}

.newsletter-box {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: var(--radius-card);
    padding: 2rem 2rem 1.5rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.newsletter-box:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.newsletter-box-text {
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

.newsletter-box-fields {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.newsletter-box-fields input[type="text"],
.newsletter-box-fields input[type="email"] {
    flex: 1 1 45%;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1.5px solid #d0d0d0;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #fafafa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.newsletter-box-fields input[type="text"]:focus,
.newsletter-box-fields input[type="email"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 122, 42, 0.12);
    background: #ffffff;
}

.newsletter-box-btn {
    display: block;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    margin-bottom: 1rem;
}

.newsletter-box-btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 122, 42, 0.3);
}

.newsletter-box-note {
    font-size: 0.82rem;
    color: #999;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .newsletter-box {
        padding: 1.5rem 1.25rem 1.25rem;
    }
    .newsletter-box-fields {
        flex-direction: column;
    }
    .newsletter-box-fields input {
        flex: 1 1 100%;
    }
}

/* ============================================================
   Newsletter-Box: Brevo-Formular-Styling
   ============================================================ */

.newsletter-box .sib-form-area,
.newsletter-box #sib_embed_signup {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.newsletter-box .sib-FIRSTNAME-area {
    margin: 0 0 0.6rem 0;
}

.newsletter-box .sib-email-area {
    margin: 0;
}

.newsletter-box .sib-FIRSTNAME-area input,
.newsletter-box .sib-email-area input[type="email"] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #d0d0d0;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #fafafa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.newsletter-box .sib-FIRSTNAME-area input:focus,
.newsletter-box .sib-email-area input[type="email"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 122, 42, 0.12);
    background: #ffffff;
}

.newsletter-box .sib-default-btn {
    display: block;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    margin-top: 0.5rem;
}

.newsletter-box .sib-default-btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 122, 42, 0.3);
}

.newsletter-box form p {
    margin: 0 0 0.75rem 0;
}

.newsletter-box .sib-success-message,
.newsletter-box .sib-error-message {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
}

.newsletter-box .sib-success-message {
    background: #f0f8e8;
    color: var(--color-primary-dark);
    border: 1px solid var(--color-primary-light);
}

.newsletter-box .sib-error-message {
    background: #fef0f0;
    color: #c0392b;
    border: 1px solid #f5c6c6;
}

/* ============================================================
   Krankenkassen-Tabelle
   ============================================================ */

.kk-table-wrap {
    overflow: hidden;
    margin: 1.5rem 0;
    border: 1px solid #e0e0d8;
}

.kk-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--color-text);
}

.kk-table thead th {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.kk-table tbody tr {
    border-bottom: 1px solid #e8e8e2;
}

.kk-table tbody tr:last-child {
    border-bottom: none;
}

.kk-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-soft);
}

.kk-table tbody td {
    padding: 12px 16px;
    vertical-align: top;
}

.kk-table tbody td:first-child {
    font-weight: 600;
}

@media (max-width: 600px) {
    .kk-table thead { display: none; }
    .kk-table tbody tr {
        display: block;
        padding: 12px 0;
        border-bottom: 2px solid #e0e0d8;
    }
    .kk-table tbody td {
        display: block;
        padding: 4px 16px;
    }
    .kk-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-primary);
        display: block;
        font-size: 0.8rem;
        margin-bottom: 2px;
    }
}

/* ===================================================
   MID-CONTENT CTA
   =================================================== */
.mid-content-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
    background: #f5f8f2;
    border-left: 4px solid #4F7A2A;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 28px 0;
}

.mid-content-cta p {
    margin: 0 !important;
    padding: 0 !important;
}

.mid-content-cta-text {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
}

.mid-content-cta-btn {
    display: inline-block;
    flex-shrink: 0;
    background: #4F7A2A;
    color: #fff !important;
    text-decoration: none !important;
    padding: 9px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.mid-content-cta-btn:hover {
    background: #3d5f20;
}

@media (max-width: 520px) {
    .mid-content-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .mid-content-cta-btn {
        align-self: flex-start;
    }
}

#newsletter-beitrag {
    scroll-margin-top: 120px;
}

/* ===================================================
   KONTAKT-SEITE
   =================================================== */
.kontakt-alternativ p {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--color-text);
}
.kontakt-alternativ a {
    color: var(--color-primary);
}

/* CF7 Formular-Styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 4px;
}
.wpcf7 textarea {
    min-height: 140px;
    resize: vertical;
}
.wpcf7 label {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 12px;
}
.wpcf7 input[type="submit"] {
    background: #4F7A2A;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    margin-top: 8px;
}
.wpcf7 input[type="submit"]:hover {
    background: #3d5f20;
}

/* ===================================================
   AUFZÄHLUNGEN — grüne Häkchen statt Bullet-Punkte
   Gilt für alle wp-block-list auf der gesamten Website.
   =================================================== */
.wp-block-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.wp-block-list li {
    display: block;
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}
.wp-block-list li::before {
    content: '✔';
    color: #575756;
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.95em;
    line-height: inherit;
}

/* ===================================================
   20. TRUST-BAR (Landingpages)
   Drei-Spalten-Leiste unterhalb des Heroes
   =================================================== */
.kk-trust-bar {
    display: flex;
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid #e8e8e8;
    padding-top: 28px;
    padding-bottom: 8px;
}
.kk-trust-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    border-right: 1px solid #e8e8e8;
}
.kk-trust-item:last-child {
    border-right: none;
}
.kk-trust-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
    line-height: 1;
}
.kk-trust-item strong {
    display: block;
    color: #2F2F2F;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.kk-trust-item span:last-child {
    color: #777;
    font-size: 0.83rem;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .kk-trust-bar {
        flex-direction: column;
        gap: 20px;
    }
    .kk-trust-item {
        border-right: none;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 20px;
    }
    .kk-trust-item:last-child {
        border-bottom: none;
    }
}

/* === Icon-Listen (SVG statt Häkchen) === */
.kk-icon-list {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kk-icon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #575756;
    font-size: 1rem;
    line-height: 1.5;
}
.kk-icon-item svg {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

/* H3-Spaltenüberschriften in Vergleichs-Listen grün einfärben */
.wp-block-columns .wp-block-column > h3.wp-block-heading {
    color: var(--color-primary) !important;
}

/* === Workshop-Termin-Karten === */
.wdc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}
.wdc-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wdc-title {
    color: var(--color-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    margin: 0 0 20px 0 !important;
    line-height: 1.3;
    border: none !important;
    padding: 0 !important;
}
.wdc-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}
.wdc-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.wdc-row svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.wdc-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #575756;
    font-size: 0.9rem;
    line-height: 1.5;
}
.wdc-price-block {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #eee;
    margin-bottom: 16px;
}
.wdc-price {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}
.wdc-price-note {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 4px;
}
.wdc-btn {
    display: block;
    background: #4F7A2A;
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px 22px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s;
}
.wdc-btn:hover {
    background: #3d6020;
    color: #fff !important;
}
@media (max-width: 900px) {
    .wdc-grid {
        grid-template-columns: 1fr;
    }
}

/* Datumszeilen in Workshop-Karten nicht umbrechen */
.wdc-row-text {
    font-size: 0.85rem;
}
.wdc-row svg {
    width: 36px;
    height: 36px;
}

/* Icons in Workshop-Karten vertikal zentrieren */
.wdc-row {
    align-items: center;
}

/* === Video-Grid (Willkommensseite) === */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 24px;
}
.video-card {
    display: flex;
    flex-direction: column;
    background: #f9f7f4;
    border-radius: 12px;
    overflow: hidden;
}
.video-thumb-link {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none !important;
}
.video-thumb-link img {
    width: 100%;
    height: auto;
    display: block;
    border: none !important;
    transition: opacity 0.2s;
}
.video-thumb-link:hover img {
    opacity: 0.85;
}
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: #4F7A2A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    pointer-events: none;
}
.video-play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px;
}
.video-thumb-link:hover .video-play-btn {
    background: #3d6020;
    transform: translate(-50%, -50%) scale(1.08);
}
.video-body {
    padding: 20px 20px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.video-duration {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #575756;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.video-card h3 {
    color: #4F7A2A !important;
    font-size: 1rem !important;
    font-weight: 700;
    margin: 0 0 10px 0 !important;
    line-height: 1.3;
}
.video-card p {
    color: #575756;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* === Meditations-Grid (Willkommensseite) === */
.meditation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 24px;
}
.meditation-card {
    display: flex;
    flex-direction: column;
    background: #f9f7f4;
    border-radius: 12px;
    overflow: hidden;
}
.meditation-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border: none !important;
}
.meditation-body {
    padding: 20px 20px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.meditation-duration {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #575756;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.meditation-card h3 {
    color: #4F7A2A !important;
    font-size: 1rem !important;
    font-weight: 700;
    margin: 0 0 10px 0 !important;
    line-height: 1.3;
}
.meditation-card p {
    color: #575756;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex: 1;
}
.meditation-player audio {
    width: 100%;
    border-radius: 6px;
}
@media (max-width: 768px) {
    .meditation-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   Section 25 — Borlabs Cookie Banner: Website-Design
   Primär: #4F7A2A (Waldgrün) · Akzent: #A6D454
   Pill-Buttons (25px Radius) · Roboto-Schrift · konsistent mit GP-Theme
   ============================================================================= */

#BorlabsCookieBox {
    /* Farb-Variablen */
    --dialog-background-color:              #ffffff;
    --dialog-text-color:                    #2F2F2F;

    /* "Alle akzeptieren" — grüner Primär-Button */
    --dialog-button-accept-all-color:       #4F7A2A;
    --dialog-button-accept-all-color-hover: #3d5f20;
    --dialog-button-accept-all-text-color:  #ffffff;
    --dialog-button-accept-all-text-color-hover: #ffffff;

    /* "Nur Essenzielle" — outlined grün */
    --dialog-button-accept-only-essential-color:       transparent;
    --dialog-button-accept-only-essential-color-hover: #f0f5ea;
    --dialog-button-accept-only-essential-text-color:  #4F7A2A;
    --dialog-button-accept-only-essential-text-color-hover: #3d5f20;

    /* "Einstellungen" — dezenter Link-Style */
    --dialog-button-preferences-color:       transparent;
    --dialog-button-preferences-color-hover: #f0f5ea;
    --dialog-button-preferences-text-color:  #4F7A2A;
    --dialog-button-preferences-text-color-hover: #3d5f20;

    /* "Auswahl speichern" (Detail-Dialog) */
    --dialog-button-save-consent-color:       #4F7A2A;
    --dialog-button-save-consent-color-hover: #3d5f20;
    --dialog-button-save-consent-text-color:  #ffffff;
    --dialog-button-save-consent-text-color-hover: #ffffff;

    /* Links */
    --dialog-link-primary-color:       #4F7A2A;
    --dialog-link-primary-color-hover: #3d5f20;
    --dialog-link-secondary-color:       #575756;
    --dialog-link-secondary-color-hover: #2F2F2F;

    /* Ecken-Radius (Box) */
    --dialog-border-radius-top-left:     12px;
    --dialog-border-radius-top-right:    12px;
    --dialog-border-radius-bottom-left:  12px;
    --dialog-border-radius-bottom-right: 12px;

    /* Schrift */
    font-family: 'Roboto', sans-serif !important;
}

/* Pill-Buttons — konsistent mit Website-Buttons (border-radius: 25px) */
#BorlabsCookieBox .brlbs-btn-accept-all,
#BorlabsCookieBox .brlbs-btn-accept-only-essential,
#BorlabsCookieBox .brlbs-btn-save,
#BorlabsCookieBox .brlbs-cmpnt-btn-preferences {
    border-radius: 25px !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 10px 24px !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* "Nur Essenzielle" und "Einstellungen": Outline-Stil */
#BorlabsCookieBox .brlbs-btn-accept-only-essential,
#BorlabsCookieBox .brlbs-cmpnt-btn-preferences {
    border: 2px solid #4F7A2A !important;
}
#BorlabsCookieBox .brlbs-btn-accept-only-essential:hover,
#BorlabsCookieBox .brlbs-cmpnt-btn-preferences:hover {
    border-color: #3d5f20 !important;
}

/* Logo im Banner: sinnvolle Maximalbreite */
#BorlabsCookieBox img {
    max-height: 45px !important;
    width: auto !important;
}

/* Überschriften grün */
#BorlabsCookieBox .brlbs-cmpnt-dialog-entrance-headline,
#BorlabsCookieBox .brlbs-cmpnt-h2,
#BorlabsCookieBox .brlbs-cmpnt-h3,
#BorlabsCookieBox .brlbs-cmpnt-h4 {
    color: #4F7A2A !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
}

/* Toggle/Slider aktiv-Farbe grün */
#BorlabsCookieBox .brlbs-cmpnt-slider {
    background-color: #d0d0d0;
}
#BorlabsCookieBox input:checked + .brlbs-cmpnt-slider {
    background-color: #4F7A2A !important;
}

/* Content-Blocker (Vimeo-Platzhalter) im Website-Stil */
/* Responsive-Video-Wrapper öffnen wenn Content-Blocker drin ist.
   Nach dem Entsperren greift der 16:9-Wrapper (height:0/padding-bottom) wieder automatisch. */
div:has(> .brlbs-cmpnt-content-blocker) {
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}
div:has(> .brlbs-cmpnt-content-blocker) .brlbs-cmpnt-content-blocker {
    height: auto !important;
    position: static !important;
}

/* CSS-Variablen am Container setzen — Borlabs nutzt var(--content-blocker-*) intern */
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker {
    --content-blocker-button-color: #4F7A2A;
    --content-blocker-button-color-hover: #3d5f20;
    --content-blocker-button-text-color: #ffffff;
    --content-blocker-button-text-color-hover: #ffffff;
    --content-blocker-button-border-radius-top-left: 25px;
    --content-blocker-button-border-radius-top-right: 25px;
    --content-blocker-button-border-radius-bottom-left: 25px;
    --content-blocker-button-border-radius-bottom-right: 25px;
    --content-blocker-link-color: #4F7A2A;
    --content-blocker-link-color-hover: #3d5f20;
    --content-blocker-font-family: 'Roboto', sans-serif;
}
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-preset-a {
    background: #f9f7f4;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-description {
    color: #575756;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn {
    background-color: #4F7A2A !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    width: auto !important;
    display: inline-block !important;
}
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn:hover {
    background-color: #3d5f20 !important;
}
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-provider-toggle {
    display: block;
    margin-top: 12px;
    font-size: 0.8rem;
    color: #4F7A2A;
    text-decoration: underline;
}

/* Borlabs Branding-Link ausblenden (Lizenz aktiv) */
#BorlabsCookieBox .brlbs-cmpnt-support-branding-link {
    display: none !important;
}

/* Borlabs Cookie Widget (Re-Open-Button) in Website-Grün */
.brlbs-cmpnt-widget svg circle,
.brlbs-cmpnt-widget svg path,
.brlbs-cmpnt-widget svg rect,
#BorlabsCookieBox .brlbs-cmpnt-widget svg circle,
#BorlabsCookieBox .brlbs-cmpnt-widget svg path {
    fill: #4F7A2A !important;
}
.brlbs-cmpnt-widget svg,
#BorlabsCookieBox .brlbs-cmpnt-widget svg {
    filter: drop-shadow(0 2px 6px rgba(79, 122, 42, 0.35)) !important;
}

/* Borlabs Cookie Widget ausgeblendet — Footer-Link als Ersatz */
.brlbs-cmpnt-widget,
#BorlabsCookieBox .brlbs-cmpnt-widget {
    display: none !important;
}

/* Borlabs Details-Dialog: Tab aktiv + Sekundär-Buttons */
#BorlabsCookieBox .brlbs-cmpnt-tab-active,
#BorlabsCookieBox [class*="tab"][class*="active"] {
    background-color: #4F7A2A !important;
    border-color: #4F7A2A !important;
    color: #ffffff !important;
}

/* "Alle auswählen" / "Alle abwählen" Buttons */
#BorlabsCookieBox .brlbs-cmpnt-btn-sm,
#BorlabsCookieBox button.brlbs-cmpnt-btn-sm {
    background-color: #4F7A2A !important;
    color: #ffffff !important;
    border-color: #4F7A2A !important;
    border-radius: 20px !important;
}
#BorlabsCookieBox .brlbs-cmpnt-btn-sm:hover {
    background-color: #3d5f20 !important;
    border-color: #3d5f20 !important;
}