/*
Theme Name: GEP Beratung
Theme URI: https://www.dieelternberatung.de
Author: Good Enough Parents
Description: Die Elternberatung von Good Enough Parents × familylab – professionelles Magazin-Theme mit SteadyHQ-Integration.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: gep-beratung
*/

/* =============================================
   GOOGLE FONTS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&family=Lora:ital,wght@0,400;0,600;1,400&family=Barlow:wght@400;500;600&display=swap');

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --creme:      #F5F0E8;
    --dark:       #1a1814;
    --coral:      #E07A5F;
    --gold:       #F2C14E;
    --mid:        #555555;
    --muted:      #888888;
    --light-gray: #ddd9cf;
    --border:     #e0dbd0;
    --white:      #ffffff;
    --font-con:   'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-serif: 'Lora', Georgia, serif;
    --font-sans:  'Barlow', Arial, sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--creme);
    color: var(--dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* =============================================
   NAVIGATION
   ============================================= */
.site-header {
    background: var(--creme);
    border-bottom: 2px solid var(--dark);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-logo {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1;
    flex-shrink: 0;
}

.site-logo small {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--muted);
    margin-top: -2px;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
}

.nav-links a {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.15s;
}

.nav-links a:hover { color: var(--dark); }
.nav-links .current-menu-item a { color: var(--dark); }

.btn-nav-login {
    background: var(--coral);
    color: var(--dark) !important;
    border: none;
    padding: 9px 20px;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-nav-login:hover { background: #c85e42; color: var(--dark) !important; }

.btn-nav-join {
    background: var(--coral);
    color: var(--dark) !important;
    border: none;
    padding: 9px 20px;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-nav-join:hover { background: #c85e42; color: var(--dark) !important; }

/* "Mein Konto" Button (für eingeloggte Steady-Mitglieder) */
.btn-nav-account {
    background: var(--dark);
    color: var(--creme) !important;
    border: 1px solid var(--dark);
    padding: 8px 18px;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-nav-account::before {
    content: '✓';
    font-size: 11px;
    color: var(--gold);
}
.btn-nav-account:hover { background: var(--creme); color: var(--dark) !important; }

/* Steady-Button: Position/Alignment im Header.
   Look ist von Steady selbst gesetzt (Shadow-DOM, von außen nicht stylebar). */
.steady-login-button {
    align-self: center;
    line-height: 1;
}
.steady-login-button.btn-nav-steady {
    margin: 0;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--dark);
}

/* =============================================
   HERO
   ============================================= */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    min-height: 560px;
    display: flex;
    align-items: flex-end;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    opacity: 0.85;
    filter: none !important;
}

.hero-bg-fallback {
    position: absolute;
    inset: 0;
    background: #0f0f0f;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #1a1814 0%, rgba(26,24,20,0.6) 45%, rgba(26,24,20,0.15) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 2.5rem 2rem 3.5rem;
}

.hero-eyebrow {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
}

.hero-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(54px, 8vw, 92px);
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--creme);
    margin-bottom: 0.75rem;
}

.hero-claim em { color: var(--coral); font-style: normal; }
.hero-claim .gold { color: var(--gold); }

.hero-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    color: #e8e3d8;
    max-width: 500px;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-hero-read {
    background: var(--coral);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.15s;
    display: inline-block;
}

.btn-hero-read:hover { background: #cf6a4f; color: var(--white); }

.hero-stats {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    color: #666;
    text-transform: uppercase;
}

/* =============================================
   RUBRIK / CATEGORY BAR
   ============================================= */
.rubrik-bar {
    background: var(--dark);
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid #2a2a2a;
}

.rubrik-bar::-webkit-scrollbar { display: none; }

.rubrik-bar a {
    padding: 13px 22px;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #777;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.15s;
    display: block;
}

.rubrik-bar a:hover { color: var(--creme); }
.rubrik-bar .cat-eltern.current-cat,
.rubrik-bar .cat-eltern:hover { color: var(--coral); border-bottom-color: var(--coral); }
.rubrik-bar .cat-paar.current-cat,
.rubrik-bar .cat-paar:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* =============================================
   SECTION HEADERS
   ============================================= */
.section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 0.6rem;
}

.section-head h2 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.section-head .divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.section-head .spacer { flex: 1; }

.section-head .all-link {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.15s;
    white-space: nowrap;
}

.section-head .all-link:hover { color: var(--coral); }

.sh-tag {
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
}

.sh-tag.eltern { background: var(--coral); color: var(--white); }
.sh-tag.paar   { background: var(--gold);  color: var(--dark);  }
.sh-tag.locked { background: var(--dark);  color: var(--creme); }
.sh-tag.free   { background: var(--gold);  color: var(--dark);  }

/* =============================================
   LEAD STORY
   ============================================= */
.lead-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--dark);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
    min-height: 360px;
}

.lead-story:hover { opacity: 0.95; }

.lead-img {
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #e0dbd0;
}

.lead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    opacity: 0.9;
    transition: opacity 0.3s;
}

.lead-story:hover .lead-img img { opacity: 0.6; }

.lead-img-fallback {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #111 0px, #111 12px, #141414 12px, #141414 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 48px;
    text-transform: uppercase;
    color: #1f1f1f;
    text-align: center;
    padding: 2rem;
    line-height: 1;
}

.lead-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--coral);
}

.lead-body {
    padding: 2rem 2.5rem;
    background: var(--creme);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}

.lead-tags { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; }
.article-tag.neu {
    background: var(--coral);
    color: var(--creme);
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 8px;
}

.neu-label {
    background: var(--coral) !important;
    color: var(--creme) !important;
}

.article-tag {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-tag::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--coral);
    display: inline-block;
    flex-shrink: 0;
}

.article-tag.paar { color: var(--gold); }
.article-tag.paar::before { background: var(--gold); }

.lead-title {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--dark);
    margin-bottom: 1rem;
    transition: color 0.15s;
}

.lead-story:hover .lead-title { color: var(--coral); }

.lead-teaser {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--mid);
    margin-bottom: 1.5rem;
    font-style: italic;
}

/* =============================================
   AUTHOR BYLINE
   ============================================= */
.byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: auto;
}

.byline-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--creme);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
    overflow: hidden;
}

.byline-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.byline-avatar.paar { background: var(--gold); color: var(--dark); }

.byline-info { font-size: 11px; color: var(--muted); }
.byline-info strong { display: block; color: #333; font-size: 12px; font-weight: 600; }

/* =============================================
   FREE ARTICLES STRIP
   ============================================= */
.free-strip {
    background: var(--gold);
    padding: 0.9rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
}

.free-strip:hover {
    background: var(--coral);
}

.free-strip:hover .free-strip-text { color: var(--white); }
.free-strip:hover .free-strip-badge { background: var(--white); color: var(--dark); }
.free-strip:hover .free-strip-arrow { color: var(--white); transform: translateX(4px); }

.free-strip-badge {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--dark);
    color: var(--gold);
    padding: 4px 12px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s;
}

.free-strip-text {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--dark);
    text-align: center;
    transition: color 0.18s;
}

.free-strip-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--dark);
    transition: color 0.18s, transform 0.18s;
    flex-shrink: 0;
}
.free-strip-arrow svg { width: 18px; height: 18px; }

/* Mobile: kompakter Banner — kleinere Schrift, weniger Padding, kein Umbruch */
@media (max-width: 640px) {
    .free-strip {
        padding: 0.7rem 1rem;
        gap: 0.7rem;
        flex-wrap: nowrap;
    }
    .free-strip-badge {
        font-size: 9px;
        padding: 3px 8px;
        letter-spacing: 1.5px;
    }
    .free-strip-text {
        font-size: 11px;
        text-align: left;
        line-height: 1.3;
    }
    .free-strip-arrow svg { width: 16px; height: 16px; }
}

.free-strip-sub {
    display: none;
}

/* =============================================
   FREE ARTICLE CARDS — Karussell (Mobile: Touch-Swipe, Desktop: Pfeile)
   ============================================= */

/* Wrapper für Pfeil-Positionierung */
.free-carousel {
    position: relative;
}

/* Track: horizontal scrollbar, Snap auf Karten */
.free-grid {
    display: flex;
    gap: 1px;
    background: var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Scrollbar verstecken */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.free-grid::-webkit-scrollbar { display: none; }

.free-card {
    display: flex;
    flex-direction: column;
    background: var(--creme);
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    /* Karten-Breite = ein Drittel des Containers */
    flex: 0 0 calc((100% - 2px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

/* Pfeil-Buttons (Desktop) */
.free-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--creme);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    transition: background 0.15s, opacity 0.15s, transform 0.15s;
    padding: 0;
}
.free-arrow svg { width: 20px; height: 20px; }
.free-arrow:hover { background: var(--coral); transform: translateY(-50%) scale(1.05); }
.free-arrow-prev { left: -22px; }
.free-arrow-next { right: -22px; }

/* Pfeil deaktiviert (am Anfang/Ende) */
.free-arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Mobile: Pfeile aus, native Touch-Scroll */
@media (max-width: 800px) {
    .free-arrow { display: none; }
    .free-card {
        /* Auf Mobile: Karte fast ganze Breite, leichter Peek der nächsten Karte */
        flex: 0 0 85%;
    }
    /* Optisches Padding damit erste/letzte Karte nicht klebt */
    .free-grid {
        padding-right: 1rem;
    }
}

@media (max-width: 480px) {
    .free-card {
        flex: 0 0 90%;
    }
}

.free-card:hover { background: #f0ebe2; }
.free-card:hover .free-title { color: var(--coral); }

.free-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.free-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--gold);
    color: var(--dark);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
}

.free-badge::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dark);
}

.free-card-img {
    height: 200px;
    overflow: hidden;
    background: var(--creme);
    position: relative;
    flex-shrink: 0;
    display: block;
}

.free-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    opacity: 0.9;
}

.free-card-img-fallback {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #ede8de, #ede8de 8px, #f5f0e8 8px, #f5f0e8 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    color: #d8d3c8;
    text-align: center;
    line-height: 1;
    padding: 1rem;
}

.free-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--gold);
}

.free-cat {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.3rem;
}

.free-cat.paar { color: #c8a020; }

.free-num {
    font-family: var(--font-con);
    font-size: 10px;
    color: #bbb;
    margin-bottom: 0.25rem;
}

.free-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 19px;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 0.5rem;
    transition: color 0.15s;
}

.free-teaser {
    font-family: var(--font-serif);
    font-size: 12px;
    line-height: 1.55;
    color: #777;
    font-style: italic;
    flex: 1;
}

.free-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.free-author { font-size: 11px; color: #aaa; }

.free-lesezeit {
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--coral);
}

.free-read {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
}

/* =============================================
   STORY GRID (ARCHIVE CARDS)
   ============================================= */
.story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
}

.story-card {
    background: var(--creme);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    overflow: hidden;
}

.story-card:hover { background: #ede8de; }
.story-card:hover .story-title { color: var(--coral); }

.story-img {
    height: 155px;
    overflow: hidden;
    position: relative;
    background: #e0dbd0;
}

.story-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    opacity: 0.9;
    transition: opacity 0.3s;
}

.story-card:hover .story-img img { opacity: 0.7; }

.story-img-fallback {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #ddd8ce, #ddd8ce 8px, #e5e0d5 8px, #e5e0d5 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    color: #ccc7bc;
    text-align: center;
    line-height: 1;
    padding: 1rem;
}

.story-cat-label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 8px;
}

.story-cat-label.eltern { background: var(--coral); color: var(--white); }
.story-cat-label.paar   { background: var(--gold);  color: var(--dark);  }

.story-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }

.story-num {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 0.3rem;
}

.story-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 0.45rem;
    transition: color 0.15s;
}

.story-teaser {
    font-family: var(--font-serif);
    font-size: 12px;
    line-height: 1.5;
    color: #777;
    font-style: italic;
    flex: 1;
}

.story-author {
    margin-top: 0.8rem;
    font-size: 11px;
    color: #aaa;
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
}

/* =============================================
   LIST STORIES
   ============================================= */
.list-stories {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    margin-top: 1px;
}

.list-story {
    background: var(--creme);
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.list-story:hover { background: #ede8de; }
.list-story:hover .list-title { color: var(--coral); }

.list-num {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 34px;
    color: #e0dbd0;
    padding: 1.25rem 1rem 1.25rem 1.5rem;
    line-height: 1;
    min-width: 72px;
    text-align: right;
    flex-shrink: 0;
}

.list-divider {
    width: 1px;
    height: 55px;
    background: var(--border);
    flex-shrink: 0;
}

.list-body { padding: 1.25rem 1.5rem; }

.list-cat {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.2rem;
}

.list-cat.paar { color: #c8a020; }

.list-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.1;
    transition: color 0.15s;
}

.list-teaser {
    font-family: var(--font-serif);
    font-size: 12px;
    line-height: 1.5;
    color: #888;
    font-style: italic;
    margin-top: 0.3rem;
}

/* =============================================
   LOCKED PREVIEW
   ============================================= */
.locked-preview {
    position: relative;
    margin-top: 1px;
}

.locked-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    opacity: 0.6;
    pointer-events: none;
}

.locked-card { background: var(--creme); overflow: hidden; }

.locked-card-img {
    height: 120px;
    background: #e0dbd0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245,240,232,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.locked-body { padding: 1rem 1.25rem; }

.locked-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    line-height: 1.1;
    color: #999;
    margin-bottom: 0.35rem;
}

.locked-teaser {
    font-family: var(--font-serif);
    font-size: 11px;
    line-height: 1.5;
    color: #bbb;
    font-style: italic;
}

.locked-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(to bottom, transparent, var(--creme));
    pointer-events: none;
}

/* =============================================
   MEMBERSHIP / PRICING SECTION
   ============================================= */
.membership-section {
    background: var(--dark);
    padding: 4rem 2rem;
    margin-top: 3rem;
}

.membership-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 4rem;
}

.membership-left { flex: 1; }

.membership-tag {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--coral);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.membership-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 42px;
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.0;
    margin-bottom: 0.75rem;
}

.membership-claim em { color: var(--coral); font-style: normal; }

.membership-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    max-width: 420px;
}

.membership-right { flex-shrink: 0; min-width: 320px; }

/* STEADY EMBED WRAPPER - weißer Hintergrund für SteadyHQ-Code */
.steady-embed-wrapper {
    background: var(--white);
    padding: 2rem;
}

.steady-embed-note {
    font-family: var(--font-con);
    font-size: 10px;
    letter-spacing: 1px;
    color: #aaa;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    border: 1px dashed #ddd;
}

.btn-cta-large {
    background: var(--coral);
    color: var(--white);
    border: none;
    padding: 14px 28px;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.15s;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

.btn-cta-large:hover { background: #cf6a4f; color: var(--white); }

.btn-login-small {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #666;
    padding: 10px 20px;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    transition: border-color 0.15s, color 0.15s;
}

.btn-login-small:hover { border-color: #555; color: var(--creme); }

/* =============================================
   SINGLE ARTICLE
   ============================================= */
.article-header-wrap {
    background: var(--dark);
    padding: 3rem 2rem 2.5rem;
    position: relative;
}

.article-header-has-img {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.article-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #1a1814 0%, rgba(26,24,20,0.75) 50%, rgba(26,24,20,0.35) 100%);
    z-index: 0;
}

.article-header-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.article-free-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold);
    color: var(--dark);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-bottom: 1rem;
}

.article-free-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dark);
}

.article-h1 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(32px, 5vw, 48px);
    text-transform: uppercase;
    line-height: 1.0;
    color: var(--creme);
    margin-bottom: 1rem;
}

.article-question {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    color: #888;
    line-height: 1.55;
    border-left: 3px solid var(--coral);
    padding-left: 1.25rem;
    margin-bottom: 1.75rem;
}

.article-body-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

.article-body p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
}

.article-body h2 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 2rem 0 0.75rem;
    border-left: 3px solid var(--coral);
    padding-left: 0.75rem;
}

.article-body h3 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 1.75rem 0 0.6rem;
}

.article-body h4 {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 1.5rem 0 0.5rem;
    letter-spacing: 0.5px;
}

.article-body blockquote {
    border-left: 3px solid var(--coral);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--mid);
}

/* =============================================
   PAYWALL GATE
   ============================================= */
.paywall-blur-zone { position: relative; }

.paywall-blur-content {
    filter: blur(5px);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}

.paywall-blur-content .gep-highlight,
.paywall-blur-content .gep-zitat {
    filter: none;
    opacity: 1;
    pointer-events: auto;
}

.paywall-blur-content p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.paywall-gate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent 0%, var(--creme) 35%);
}

.gate-box {
    background: var(--creme);
    text-align: center;
    padding: 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
}

.gate-rule {
    width: 40px;
    height: 3px;
    background: var(--coral);
    margin: 0 auto 1.25rem;
}

.gate-h {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.4rem;
}

.gate-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 1.75rem;
}

.gate-btn {
    background: var(--coral);
    color: var(--white);
    border: none;
    padding: 13px 28px;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.15s;
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.gate-btn:hover { background: #cf6a4f; color: var(--white); }

.gate-login {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.15s;
}

.gate-login:hover { color: var(--dark); }

/* =============================================
   ARCHIVE PAGE
   ============================================= */
.archive-header {
    background: var(--dark);
    padding: 3rem 2rem;
}

.archive-header-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.archive-eyebrow {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.75rem;
}

.archive-title {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 56px);
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.0;
}

.archive-count {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: #666;
    margin-top: 0.5rem;
}

/* =============================================
   SEARCH BAR
   ============================================= */
.search-bar {
    background: #111;
    border-bottom: 1px solid #222;
    padding: 1rem 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    max-width: 360px;
    background: var(--dark);
    border: 1px solid #333;
    color: var(--creme);
    padding: 9px 14px;
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
}

.search-input::placeholder { color: #555; }
.search-input:focus { border-color: var(--coral); }

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: var(--dark);
    border-top: 1px solid #2a2a2a;
    padding: 2.5rem 2rem;
    text-align: center;
}

.site-footer p {
    font-family: var(--font-con);
    font-size: 11px;
    letter-spacing: 1px;
    color: #444;
    text-transform: uppercase;
}

.site-footer a {
    color: #555;
    transition: color 0.15s;
}

.site-footer a:hover { color: var(--coral); }

/* =============================================
   UTILITY
   ============================================= */
.wrap { max-width: 1300px; margin: 0 auto; padding: 2.5rem 4rem; }
.gap-top { margin-top: 2.5rem; }
.gap-top-sm { margin-top: 1.5rem; }
.gap-bottom { margin-bottom: 3rem; }

/* Drop Cap deaktiviert */

/* =============================================
   HIGHLIGHT OPTION 1 – Warmes Blockquote
   ============================================= */
.highlight-quote {
    border-left: 4px solid var(--coral);
    padding: 1.25rem 1.5rem;
    background: #faf7f3;
    margin: 2rem 0;
    font-style: italic;
    color: #444;
    font-size: 18px;
    line-height: 1.65;
    font-family: var(--font-serif);
}

/* =============================================
   HIGHLIGHT OPTION 2 – Kondensierte Headline
   (für "Eure Frage" / "Die Antwort")
   ============================================= */
.article-section-title {
    border-top: 2px solid var(--dark);
    border-bottom: 2px solid var(--dark);
    padding: 1rem 0;
    margin: 2.5rem 0 1.75rem;
}

.article-section-title .con-headline {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--dark);
    letter-spacing: 0.5px;
}

.article-section-title .con-headline em {
    color: var(--coral);
    font-style: normal;
}

.lead-lesezeit {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.25rem;
}

.story-lesezeit {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--coral);
    margin-top: 0.35rem;
}

/* =============================================
   AUTOR BYLINE – name verstecken
   ============================================= */
.byline-username { display: none; }

/* =============================================
   BRANDING STRIP – GEP + FamilyLab
   ============================================= */
.branding-strip {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid #2a2a2a;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.branding-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.branding-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
    flex-shrink: 0;
}

.branding-dot.gold { background: var(--gold); }

.branding-label {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #777;
}

.branding-label strong {
    color: var(--creme);
    font-weight: 700;
}

.branding-sep {
    width: 1px;
    height: 20px;
    background: #333;
}

/* =============================================
   ARTIKEL TABS (Lesen / Hören)
   ============================================= */
.artikel-tabs {
    display: flex;
    border-bottom: 2px solid var(--dark);
    background: var(--creme);
    max-width: 680px;
    margin: 0 auto;
    padding: 0 2rem;
}

.artikel-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s;
}

.artikel-tab:hover { color: var(--dark); }

.artikel-tab.active {
    color: var(--dark);
    border-bottom-color: var(--coral);
}

.tab-meta {
    font-weight: 600;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 1px;
}

.artikel-tab.active .tab-meta { color: var(--coral); }

/* =============================================
   PODCAST PLAYER
   ============================================= */
.podcast-player-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

.podcast-title {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 2rem;
    line-height: 1.1;
}

.gep-audio-player {
    width: 100%;
    margin: 1.5rem 0;
    accent-color: var(--coral);
}

/* Blur-Platzhalter für gesperrten Player */
.podcast-player-blur {
    background: #f0ebe2;
    border-radius: 4px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.podcast-blur-bar {
    height: 6px;
    background: #ddd8cf;
    border-radius: 3px;
}

.podcast-blur-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.podcast-blur-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ddd8cf;
    flex-shrink: 0;
}

.podcast-blur-progress {
    flex: 1;
    height: 4px;
    background: #ddd8cf;
    border-radius: 2px;
}

/* =============================================
   DU BIST NICHT ALLEIN
   ============================================= */
.nicht-allein-section {
    background: var(--creme);
    padding: 5rem 2rem;
    border-top: 1px solid var(--border);
}

.nicht-allein-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

.nicht-allein-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(36px, 4vw, 56px);
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.0;
    position: sticky;
    top: 2rem;
}

.nicht-allein-claim em {
    color: var(--coral);
    font-style: normal;
}

.nicht-allein-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nicht-allein-card {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}

.nicht-allein-card:first-child {
    border-top: 1px solid var(--border);
}

.nicht-allein-quote {
    font-family: var(--font-serif);
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
    color: #444;
    margin-bottom: 0.6rem;
}

.nicht-allein-author {
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 900px) {
    .nicht-allein-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .nicht-allein-claim { position: static; }
}

/* =============================================
   HALTUNG SEKTION (Startseite)
   ============================================= */
.haltung-section {
    background: var(--dark);
    padding: 4rem 2rem;
}

.haltung-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.haltung-eyebrow {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.75rem;
}

.haltung-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(28px, 3.5vw, 40px);
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.0;
    margin-bottom: 1rem;
}

.haltung-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.haltung-sub strong {
    color: #999;
    font-weight: 600;
}

.haltung-link {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    transition: color 0.15s;
}

.haltung-link:hover { color: var(--creme); }

.haltung-values {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #2a2a2a;
}

.haltung-values li {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: #888;
    padding: 1rem 0 1rem 1.5rem;
    border-bottom: 1px solid #2a2a2a;
    position: relative;
}

.haltung-values li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.35em;
    width: 8px;
    height: 2px;
    background: var(--coral);
}

@media (max-width: 900px) {
    .haltung-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* =============================================
   MITGLIED WERDEN
   ============================================= */
.join-hero {
    background: var(--dark);
    padding: 5rem 2rem 4rem;
}

.join-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}

.join-eyebrow {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
}

.join-h1 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(42px, 6vw, 72px);
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.0;
    margin-bottom: 1.5rem;
}

.join-lead {
    font-family: var(--font-serif);
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
    color: rgba(245,240,232,0.7);
    margin-bottom: 2rem;
    max-width: 580px;
}

.join-lead strong { color: var(--creme); font-style: normal; }

.join-cta-btn {
    display: inline-block;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--coral);
    color: var(--creme);
    padding: 1rem 2rem;
    transition: background 0.15s;
}

.join-cta-btn:hover { background: #c85e42; }

.join-stats {
    background: var(--dark);
    border-top: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0;
    flex-wrap: wrap;
}

.join-stat {
    text-align: center;
    padding: 0 3rem;
}

.join-stat-num {
    display: block;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 36px;
    color: var(--creme);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.join-stat-label {
    font-family: var(--font-con);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
}

.join-stat-divider {
    width: 1px;
    height: 40px;
    background: #2a2a2a;
}

.join-section-label {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.5rem;
}

.join-features {
    padding: 5rem 2rem;
    background: var(--creme);
}

.join-features-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.join-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.join-feature { display: flex; flex-direction: column; }

.join-feature-icon {
    width: 48px;
    height: 48px;
    color: var(--coral);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.join-feature-icon svg {
    width: 100%;
    height: 100%;
}

.join-feature-title {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.join-feature-text {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.join-values {
    background: var(--dark);
    padding: 5rem 2rem;
}

.join-values-inner {
    max-width: 900px;
    margin: 0 auto;
}

.join-values-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(32px, 5vw, 56px);
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.0;
    margin-bottom: 1.25rem;
}

.join-values-sub {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    line-height: 1.7;
    color: rgba(245,240,232,0.6);
    margin-bottom: 2rem;
}

.join-values-sub strong { color: var(--creme); font-style: normal; }

.join-values-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid #2a2a2a;
}

.join-values-list li {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(245,240,232,0.7);
    padding: 1rem 0 1rem 1.5rem;
    border-bottom: 1px solid #2a2a2a;
    position: relative;
}

.join-values-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.4em;
    width: 8px;
    height: 2px;
    background: var(--coral);
}

.join-testimonials {
    padding: 5rem 2rem;
    background: #EDE8DE;
}

.join-testimonials-inner { max-width: 1200px; margin: 0 auto; }

.join-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.join-testimonial {
    padding: 1.75rem;
    background: var(--creme);
    border-top: 3px solid var(--coral);
}

.join-testimonial-text {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1rem;
}

.join-testimonial-author {
    font-family: var(--font-con);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}

.join-pricing {
    padding: 5rem 2rem;
    background: var(--creme);
}

.join-pricing-inner { max-width: 1200px; margin: 0 auto; }

.join-pricing-title {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 42px);
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.join-pricing-sub {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--muted);
    margin-bottom: 2rem;
}

.join-pricing-soli {
    max-width: 640px;
    margin: 0 auto 3rem;
    padding: 1.75rem 2rem;
    background: var(--creme);
    border-left: 3px solid var(--coral);
    text-align: left;
}

.join-pricing-soli-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.3px;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.join-pricing-soli-text {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.join-pricing-soli-text strong {
    font-weight: 700;
    color: var(--dark);
}

@media (max-width: 640px) {
    .join-pricing-soli {
        padding: 1.5rem 1.25rem;
    }
    .join-pricing-soli-title { font-size: 16px; }
    .join-pricing-soli-text { font-size: 14px; }
}

.join-pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.join-pricing-card {
    background: var(--creme);
    border: 1px solid var(--border);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.join-pricing-card-featured {
    border: 2px solid var(--dark);
}

.join-pricing-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: var(--creme);
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 12px;
    white-space: nowrap;
}

.join-pricing-card-label {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

.join-pricing-price {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 48px;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.join-pricing-price span {
    font-size: 16px;
    font-weight: 600;
    color: var(--muted);
}

.join-pricing-annual {
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    color: var(--muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.join-pricing-features {
    list-style: none;
    padding: 0;
    flex: 1;
    margin-bottom: 1.5rem;
}

.join-pricing-features li {
    font-family: var(--font-serif);
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    padding: 0.5rem 0 0.5rem 1.25rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.join-pricing-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.1em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
}

.join-pricing-btn {
    display: block;
    text-align: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.85rem;
    border: 1.5px solid var(--dark);
    color: var(--dark);
    transition: all 0.15s;
    margin-top: auto;
}

.join-pricing-btn:hover { background: var(--dark); color: var(--creme); }

.join-pricing-btn-featured {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--creme);
}

.join-pricing-btn-featured:hover { background: #c85e42; border-color: #c85e42; }

.join-pricing-cards-single {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
}

.join-pricing-note {
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    color: var(--muted);
    text-align: center;
    margin-top: 1.5rem;
}

.join-faq {
    padding: 5rem 2rem;
    background: #EDE8DE;
}

.join-faq-inner { max-width: 760px; margin: 0 auto; }

.join-faq-list { display: flex; flex-direction: column; }

.join-faq-item {
    border-bottom: 1px solid #d8d3c8;
    padding: 1.25rem 0;
}

.join-faq-q {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.join-faq-a {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.join-final-cta {
    background: var(--dark);
    padding: 6rem 2rem;
    text-align: center;
}

.join-final-cta-inner { max-width: 600px; margin: 0 auto; }

.join-final-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 60px);
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.0;
    margin-bottom: 1rem;
}

.join-final-claim em {
    color: var(--coral);
    font-style: normal;
}

.join-final-sub {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    color: rgba(245,240,232,0.6);
    margin-bottom: 2rem;
}

.join-final-login {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-size: 13px;
    color: rgba(245,240,232,0.4);
}

.join-final-login a {
    color: var(--coral);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .join-features-grid,
    .join-testimonials-grid,
    .join-pricing-cards { grid-template-columns: 1fr; }
    .join-stat { padding: 1rem 1.5rem; }
    .join-stat-divider { display: none; }
}

/* =============================================
   SUCHE
   ============================================= */
.nav-search-toggle {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--dark);
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.nav-search-toggle:hover { opacity: 1; }

.nav-search-bar {
    background: var(--dark);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
}

.nav-search-bar.open {
    max-height: 80px;
    padding: 0.85rem 2rem;
}

.nav-search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 700px;
    margin: 0 auto;
}

.nav-search-form input[type="search"] {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(245,240,232,0.3);
    padding: 0.4rem 0;
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--creme);
    outline: none;
}

.nav-search-form input[type="search"]::placeholder { color: rgba(245,240,232,0.4); }
.nav-search-form input[type="search"]:focus { border-bottom-color: var(--coral); }

.nav-search-submit {
    background: none;
    border: none;
    color: var(--coral);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.nav-search-close {
    background: none;
    border: none;
    color: rgba(245,240,232,0.4);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}

.nav-search-close:hover { color: var(--creme); }

.hero-search-form-wrap { margin-top: 1.5rem; }

.hero-search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 500px;
    border-bottom: 2px solid rgba(245,240,232,0.3);
}

.hero-search-form input[type="search"] {
    flex: 1;
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--creme);
    outline: none;
}

.hero-search-form input[type="search"]::placeholder { color: rgba(245,240,232,0.5); }

.hero-search-form button {
    background: none;
    border: none;
    color: var(--coral);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.search-no-results {
    padding: 2rem 0;
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

.search-no-results strong { color: var(--dark); }

/* =============================================
   KOMMENTARE
   ============================================= */
.gep-comments {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2.5rem;
}

.gep-comment {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}

.gep-comment:first-child { border-top: 1px solid var(--border); }

.gep-comment-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.gep-comment-author {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark);
}

.gep-comment-date {
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    color: var(--muted);
}

.gep-comment-text {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.gep-comment-text p { margin-bottom: 0.5rem; }

.gep-no-comments {
    font-family: var(--font-serif);
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
    margin-bottom: 2rem;
}

.gep-comment-form-wrap { margin-top: 2rem; }

.gep-comment-form-title {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 1rem;
}

.gep-comment-form-wrap textarea {
    width: 100%;
    max-width: 680px;
    min-height: 120px;
    padding: 0.85rem 1rem;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark);
    background: var(--white);
    border: 1px solid var(--border);
    resize: vertical;
    display: block;
    margin-bottom: 1rem;
}

.gep-comment-form-wrap textarea:focus {
    outline: none;
    border-color: var(--coral);
}

.gep-comment-form-wrap #submit {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--dark);
    color: var(--creme);
    border: none;
    padding: 0.7rem 1.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.gep-comment-form-wrap #submit:hover { background: var(--coral); }

.gep-comments-gate {
    padding: 2rem 0;
}

.gep-comments-gate-inner {
    max-width: 480px;
    text-align: center;
    margin: 0 auto;
}

.gep-antwort-meta {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.gep-antwort-titel {
    font-family: var(--font-serif);
    font-size: 13px;
    font-style: italic;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

.gep-antwort-autorin {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
}

.gep-antwort-rolle {
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
}

/* =============================================
   SHORTCODES: HIGHLIGHT & ZITAT
   ============================================= */
.gep-highlight {
    background: #1a1814 !important;
    padding: 1.5rem 1.75rem !important;
    margin: 2rem 0 !important;
    border-left: none !important;
}

.gep-highlight-accent {
    width: 32px;
    height: 2px;
    background: #E07A5F !important;
    margin-bottom: 0.85rem;
    display: block;
}

.gep-highlight-text {
    font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(20px, 2.5vw, 26px) !important;
    text-transform: uppercase !important;
    color: #F5F0E8 !important;
    line-height: 1.1 !important;
    font-style: normal !important;
}

.gep-zitat {
    border-left: 3px solid var(--coral);
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin: 2rem 0;
}

.gep-zitat-text {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    line-height: 1.75;
    color: #444;
}

.hero-cat {
    min-height: 420px;
}

.hero-cat .hero-content {
    padding-bottom: 3rem;
}

/* Mobile: Hero-Kategorie deutlich kompakter,
   und Bild von rechts holen damit Personen sichtbar bleiben */
@media (max-width: 700px) {
    .hero-cat {
        min-height: 320px;
    }
    .hero-cat .hero-content {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-cat {
        min-height: 280px;
    }
}

.ueber-uns-quote {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 38px);
    font-style: italic;
    font-weight: 400;
    color: var(--coral);
    line-height: 1.4;
    margin: 2rem 0 1.5rem;
    text-transform: none;
    letter-spacing: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--coral);
}

.ueber-uns-artikel-leiste {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
}

.ueber-uns-artikel-item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: color 0.15s;
}

.ueber-uns-artikel-item:last-child { border-bottom: none; }
.ueber-uns-artikel-item:hover .ueber-uns-artikel-title { color: var(--coral); }

.ueber-uns-artikel-num {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.ueber-uns-artikel-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.2;
    flex: 1;
    transition: color 0.15s;
}

.ueber-uns-artikel-arrow {
    font-size: 14px;
    color: var(--muted);
    flex-shrink: 0;
    transition: color 0.15s;
}

.ueber-uns-artikel-item:hover .ueber-uns-artikel-arrow { color: var(--coral); }

/* =============================================
   EXPERTINNEN STRIP (Startseite)
   ============================================= */
.expertinnen-strip-section {
    background: var(--dark);
    padding: 2.5rem 0 1.5rem;
    overflow: hidden;
}

.expertinnen-strip-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0 4rem;
    margin-bottom: 1.5rem;
}

.expertinnen-strip-label {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--creme);
}

.expertinnen-strip-sub {
    font-family: var(--font-serif);
    font-size: 13px;
    font-style: italic;
    color: #555;
}

.expertinnen-strip {
    display: flex;
    gap: 1.5rem;
    padding: 0 4rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.expertinnen-strip::-webkit-scrollbar { display: none; }

.expertinnen-card {
    flex-shrink: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.expertinnen-photo {
    width: 120px;
    height: 150px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: #2a2a2a;
    flex-shrink: 0;
}

.expertinnen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    filter: grayscale(20%);
    transition: filter 0.2s;
}

.expertinnen-card:hover .expertinnen-photo img { filter: grayscale(0%); }

.expertinnen-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 28px;
    color: #444;
    background: #222;
}

.expertinnen-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.expertinnen-rolle {
    font-family: var(--font-serif);
    font-size: 11px;
    font-style: italic;
    color: #666;
    line-height: 1.4;
    margin-bottom: 0.2rem;
}

.expertinnen-count {
    font-family: var(--font-con);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--coral);
}

.expertinnen-strip-nav {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 4rem 0;
    justify-content: flex-end;
}

.strip-prev, .strip-next {
    background: none;
    border: 1px solid #2a2a2a;
    color: #555;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.strip-prev:hover, .strip-next:hover {
    border-color: var(--coral);
    color: var(--coral);
}

/* =============================================
   EXPERTINNEN GRID (Über uns)
   ============================================= */
.ueber-uns-expert-headline {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 2.5rem 0 1.5rem;
}

.ueber-uns-expert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--creme);
    margin-bottom: 2.5rem;
}

.ueber-uns-expert-card {
    background: var(--creme);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-bottom: none;
}

.ueber-uns-expert-photo {
    width: 52px;
    height: 64px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e0dbd0;
}

.ueber-uns-expert-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.ueber-uns-expert-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 18px;
    color: #bbb;
    background: #e8e3d8;
}

.ueber-uns-expert-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.ueber-uns-expert-rolle {
    font-family: var(--font-serif);
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    line-height: 1.4;
}

.ueber-uns-expert-count {
    font-family: var(--font-con);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--coral);
    margin-top: 0.15rem;
}

@media (max-width: 900px) {
    .ueber-uns-expert-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   FRAGE STELLEN
   ============================================= */
.frage-stellen-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 5rem;
    align-items: start;
    padding: 3rem 0;
}

.frage-stellen-text p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.25rem;
}

.frage-stellen-text strong { color: var(--dark); }

.frage-stellen-btn {
    display: inline-block;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--coral);
    color: var(--creme);
    padding: 1rem 2rem;
    margin: 1.5rem 0 1rem;
    transition: background 0.15s;
}

.frage-stellen-btn:hover { background: #c85e42; color: var(--creme); }

.frage-stellen-hint {
    font-family: var(--font-serif);
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
    color: var(--muted);
    border-left: 2px solid var(--border);
    padding-left: 1rem;
}

.frage-stellen-hint strong {
    font-style: normal;
    color: var(--dark);
    font-family: var(--font-con);
    letter-spacing: 0.5px;
}

.frage-stellen-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--border);
    padding-left: 2rem;
    position: sticky;
    top: 2rem;
}

.frage-stellen-meta-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}

.frage-stellen-meta-item:first-child { padding-top: 0; }

.frage-stellen-meta-num {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 36px;
    color: var(--coral);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.frage-stellen-meta-label {
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 800px) {
    .frage-stellen-body { grid-template-columns: 1fr; }
    .frage-stellen-meta { border-left: none; border-top: 1px solid var(--border); padding: 2rem 0 0; flex-direction: row; gap: 2rem; }
}

/* =============================================
   JUUL WERTE
   ============================================= */
/* Juul Werte */
.juul-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.juul-value {
    background: #EDE8DE;
    padding: 1.5rem;
    border-top: 3px solid var(--coral);
}

.juul-value-name {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.6rem;
    letter-spacing: 0.5px;
}

.juul-value-text {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

@media (max-width: 700px) {
    .juul-values { grid-template-columns: 1fr; }
}

/* Haltung kompakt */
.haltung-section-compact { padding: 4rem 2rem; }
.haltung-section-compact .haltung-inner-compact {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.haltung-section-compact .haltung-eyebrow { text-align: center; }
.haltung-section-compact .haltung-claim {
    font-size: clamp(32px, 4vw, 52px);
    text-align: center;
    margin-bottom: 1rem;
}
.haltung-section-compact .haltung-sub {
    max-width: 480px;
    text-align: center;
    margin: 0 auto 1.75rem;
}
.haltung-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.haltung-join-btn {
    display: inline-block;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--coral);
    color: var(--creme);
    padding: 0.7rem 1.5rem;
    transition: background 0.15s;
}
.haltung-join-btn:hover { background: #c85e42; color: var(--creme); }

/* Alle Artikel CTA */
.alle-artikel-cta {
    background: var(--creme);
    border-top: 1px solid var(--border);
    padding: 3rem 2rem;
    text-align: center;
}
.alle-artikel-cta-inner { max-width: 600px; margin: 0 auto; }
.alle-artikel-cta-text {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    color: var(--muted);
    margin-bottom: 1.25rem;
}
.alle-artikel-cta-btn {
    display: inline-block;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1.5px solid var(--dark);
    color: var(--dark);
    padding: 0.7rem 1.75rem;
    transition: all 0.15s;
}
.alle-artikel-cta-btn:hover { background: var(--dark); color: var(--creme); }

/* Über uns Join Button */
.ueber-uns-join-btn {
    display: inline-block;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--coral);
    color: var(--creme);
    padding: 0.7rem 1.5rem;
    margin: 1.5rem 0 2.5rem;
    transition: background 0.15s;
}
.ueber-uns-join-btn:hover { background: #c85e42; color: var(--creme); }

/* Nicht-allein auf Über-uns */
.nicht-allein-ueber-uns {
    margin: 2rem -4rem;
}

/* Features Nummern statt Icons */
.join-feature-num {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 32px;
    color: var(--coral);
    opacity: 0.4;
    line-height: 1;
    margin-bottom: 0.75rem;
}

/* =============================================
   EXPERTIN ARCHIV
   ============================================= */
.expertin-hero {
    background: var(--dark);
    padding: 4rem 0;
}

.expertin-hero-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.expertin-photo-wrap {
    flex-shrink: 0;
    width: 160px;
    height: 200px;
    overflow: hidden;
    background: #222;
}

.expertin-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.expertin-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 40px;
    color: #444;
}

.expertin-hero-eyebrow {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.5rem;
}

.expertin-hero-name {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(32px, 4vw, 56px);
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1;
    margin: 0 0 0.5rem;
}

.expertin-hero-rolle {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    color: rgba(245, 240, 232, 0.65);
    margin-bottom: 0.75rem;
}

.expertin-hero-bio {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.85);
    margin: 1.25rem 0 1rem;
    max-width: 540px;
}

.expertin-hero-website,
.expertin-hero-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    text-decoration: none;
    margin: 0 1rem 1rem 0;
    transition: color 0.15s ease;
}

.expertin-hero-website:hover,
.expertin-hero-instagram:hover {
    color: var(--cream);
}

.expertin-hero-website svg,
.expertin-hero-instagram svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.expertin-hero-count {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
}

.expertin-artikel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 3rem 0;
}

@media (max-width: 900px) {
    .expertin-artikel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .expertin-artikel-grid { grid-template-columns: 1fr; }
    .expertin-hero-inner { flex-direction: column; align-items: flex-start; }
}

/* Klickbare Expertinnen-Links */
.expertin-link { color: inherit; text-decoration: none; }
.expertin-link:hover strong,
.expertin-link:hover .ueber-uns-expert-name { color: var(--coral); }
.expertinnen-card { text-decoration: none; }
.ueber-uns-expert-photo-link { display: block; text-decoration: none; }

/* =============================================
   AUTOREN-GRID (Startseite)
   ============================================= */
.authors-section {
    background: #1a1814 !important;
    padding: 4rem 2rem;
}

.author-card {
    background: #111111 !important;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.authors-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.authors-head {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.authors-head h2 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--creme);
}

.authors-head p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: #555;
}

.authors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #2a2a2a;
}

.author-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--dark);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #2a2a2a;
}

.author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-photo-initials {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #1e1e1e;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 18px;
    color: var(--coral);
    flex-shrink: 0;
}

.author-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    color: var(--creme);
    line-height: 1.1;
}

.author-role {
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    color: #666;
    line-height: 1.4;
}

.author-tag {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-top: auto;
}

/* =============================================
   ÜBER UNS SEITE
   ============================================= */
.ueber-uns-hero {
    background: var(--dark);
    padding: 4rem 2rem 3rem;
}

.ueber-uns-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.ueber-uns-eyebrow {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
}

.ueber-uns-h1 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(40px, 6vw, 64px);
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--creme);
    margin-bottom: 1.5rem;
}

.ueber-uns-h1 em { color: var(--coral); font-style: normal; }
.ueber-uns-h1 .gold { color: var(--gold); }

.ueber-uns-lead {
    font-family: var(--font-serif);
    font-size: 19px;
    font-style: italic;
    color: #999;
    line-height: 1.6;
    max-width: 640px;
}

.ueber-uns-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.ueber-uns-body h2 {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--dark);
}

.ueber-uns-body p {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.25rem;
}

.ueber-uns-body strong {
    font-weight: 600;
    color: var(--dark);
}

.partner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    margin: 2rem 0;
}

.partner-card {
    background: var(--creme);
    padding: 2rem;
}

.partner-card-tag {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.5rem;
}

.partner-card-name {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.partner-card p {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    font-style: italic;
    margin: 0;
}

.values-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.values-list li {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    padding-left: 1.5rem;
    position: relative;
}

.values-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 2px;
    background: var(--coral);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--dark);
    margin: 2.5rem 0;
}

.stat-box {
    background: var(--dark);
    padding: 2rem;
    text-align: center;
}

.stat-number {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 48px;
    color: var(--coral);
    line-height: 1;
    display: block;
}

.stat-label {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #666;
    margin-top: 0.25rem;
    display: block;
}

/* =============================================
   RESPONSIVE – UPDATES
   ============================================= */
@media (max-width: 900px) {
    .authors-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .authors-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    .lead-story { grid-template-columns: 1fr; min-height: 0; }
    .lead-img { height: 260px; min-height: 260px; }
    .story-grid { grid-template-columns: repeat(2, 1fr); }
    .free-grid { grid-template-columns: repeat(2, 1fr); }
    .locked-grid { grid-template-columns: repeat(2, 1fr); }
    .membership-inner { flex-direction: column; gap: 2rem; }
    .membership-right { min-width: 0; width: 100%; }
    .free-strip-sub { display: none; }
}

@media (max-width: 640px) {
    .nav-links { display: none; }
    .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--creme); border-bottom: 2px solid var(--dark); padding: 1rem 2rem; z-index: 99; }
    .nav-toggle { display: block; }
    .story-grid { grid-template-columns: 1fr; }
    .free-grid { grid-template-columns: 1fr; }
    .locked-grid { grid-template-columns: 1fr; }
    .hero-claim { font-size: 48px; }

    /* Lead-Story kompakter auf Smartphone */
    .lead-img { height: 200px; min-height: 200px; }
    .lead-body { padding: 1.1rem 1.25rem 1.1rem; }
    .article-tag { font-size: 9.5px; letter-spacing: 2.5px; margin-bottom: 0.5rem; }
    .article-tag::before { width: 14px; }
    .lead-title { font-size: 22px; line-height: 1.05; margin-bottom: 0.6rem; }
    .lead-teaser { font-size: 13.5px; line-height: 1.55; margin-bottom: 0.75rem; }
    .lead-lesezeit { font-size: 12px; margin-bottom: 0.85rem; }
    .byline { padding-top: 0.8rem; gap: 0.6rem; }
    .byline-avatar { width: 30px; height: 30px; font-size: 10px; }
    .byline-info { font-size: 10.5px; }
    .byline-info strong { font-size: 11.5px; }
}

/* ============================================
   PROBEMITGLIEDSCHAFT-TIMELINE
   - .probe-timeline-wrap: äußerer Wrapper mit Background (kann full-width oder contained sein)
   - .probe-timeline: innerer Inhalt mit max-width
   ============================================ */
.probe-timeline-wrap {
    background: var(--dark);
    color: var(--creme);
    padding: 4rem 2rem;
}

.probe-timeline {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3.5rem;
    align-items: center;
}

.probe-timeline-claim {
    font-family: var(--font-con);
    font-size: 2.4rem;
    line-height: 1.05;
    font-weight: 800;
    color: var(--creme);
    letter-spacing: -0.5px;
}

.probe-timeline-claim em {
    font-style: italic;
    color: var(--coral);
    font-weight: 800;
}

.probe-timeline-steps {
    position: relative;
}

.probe-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    position: relative;
}

.probe-step:last-child {
    margin-bottom: 0;
}

/* Vertikale Linie zwischen Schritten */
.probe-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 27px;
    width: 2px;
    height: calc(100% - 40px);
    background: var(--creme);
    opacity: 0.25;
}

.probe-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--creme);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--creme);
    flex-shrink: 0;
}

.probe-step-icon svg {
    width: 24px;
    height: 24px;
}

.probe-step-content {
    padding-top: 0.4rem;
}

.probe-step-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 1rem;
    color: var(--creme);
    margin-bottom: 0.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.probe-step-text {
    color: var(--creme);
    opacity: 0.75;
    line-height: 1.5;
    font-size: 0.95rem;
    font-family: var(--font-serif);
}

@media (max-width: 800px) {
    .probe-timeline-wrap {
        padding: 3rem 1.5rem;
    }
    .probe-timeline {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .probe-timeline-claim {
        font-size: 1.85rem;
    }
    .probe-step {
        grid-template-columns: 48px 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .probe-step-icon {
        width: 48px;
        height: 48px;
    }
    .probe-step-icon svg {
        width: 20px;
        height: 20px;
    }
    .probe-step:not(:last-child)::before {
        top: 48px;
        left: 23px;
    }
}



/* ============================================
   KOSTENLOS-LESEN SEITE — Top-Banner + Mitglied-werden CTA
   ============================================ */

/* Dezenter Top-Banner über den Artikeln */
.kostenlos-top-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 0.85rem 2rem;
    background: var(--dark);
    color: var(--creme);
    text-decoration: none;
    transition: background 0.18s;
    border-bottom: 1px solid rgba(245,240,232,0.08);
}

.kostenlos-top-banner:hover {
    background: var(--coral);
    color: var(--dark);
}

.kostenlos-top-banner-text {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: inherit;
}

.kostenlos-top-banner-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--coral);
    transition: color 0.18s, transform 0.18s;
    flex-shrink: 0;
}

.kostenlos-top-banner:hover .kostenlos-top-banner-arrow {
    color: var(--dark);
    transform: translateX(4px);
}

.kostenlos-top-banner-arrow svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
    .kostenlos-top-banner {
        padding: 0.7rem 1rem;
        gap: 0.6rem;
    }
    .kostenlos-top-banner-text {
        font-size: 11px;
        text-align: left;
        line-height: 1.3;
    }
    .kostenlos-top-banner-arrow svg { width: 14px; height: 14px; }
}

/* Mitglied-werden CTA am Ende der Seite */
.kostenlos-cta {
    background: var(--dark);
    color: var(--creme);
    padding: 5rem 2rem;
    margin-top: 1.5rem;
    text-align: center;
}

.kostenlos-cta-inner {
    max-width: 700px;
    margin: 0 auto;
}

.kostenlos-cta-eyebrow {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.25rem;
}

.kostenlos-cta-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    color: var(--creme);
    margin: 0 0 1.5rem;
    letter-spacing: -0.5px;
}

.kostenlos-cta-claim em {
    font-style: italic;
    color: var(--coral);
    font-weight: 900;
}

.kostenlos-cta-sub {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--creme);
    opacity: 0.85;
    margin-bottom: 2.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.kostenlos-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.kostenlos-cta-btn {
    display: inline-block;
    background: var(--coral);
    color: var(--dark);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.25rem 2.5rem;
    transition: background 0.18s, transform 0.15s;
}

.kostenlos-cta-btn:hover {
    background: #c85e42;
    color: var(--dark);
    transform: translateY(-1px);
}

.kostenlos-cta-login {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--creme);
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.15s;
}

.kostenlos-cta-login:hover { opacity: 1; color: var(--creme); }

@media (max-width: 640px) {
    .kostenlos-cta { padding: 3.5rem 1.5rem; }
    .kostenlos-cta-btn { padding: 1rem 2rem; font-size: 14px; }
}

/* ============================================
   FÜR STEADY-MITGLIEDER: Conversion-Sections verstecken
   Wird über JS-Detection (window.SteadyWidgetOAuth.hasAccess)
   und Cookie gesetzt — siehe gep_steady_member_detection() in functions.php
   ============================================ */

/* Sections, die für Mitglieder versteckt werden */
html.is-steady-member .free-strip,
html.is-steady-member .free-carousel,
html.is-steady-member .membership-section,
html.is-steady-member .kostenlos-top-banner,
html.is-steady-member .kostenlos-cta {
    display: none;
}

/* Header-Buttons: Member/Non-Member-Toggle */
.nav-btn-member { display: none; }
html.is-steady-member .nav-btn-non-member { display: none; }
html.is-steady-member .nav-btn-member { display: inline-flex; }

/* Haltung-Section: Member/Non-Member-Varianten */
.haltung-member { display: none; }
html.is-steady-member .haltung-non-member { display: none; }
html.is-steady-member .haltung-member { display: block; }

/* Lead-Story: Member/Non-Member-Varianten */
.lead-story-member { display: none; }
html.is-steady-member .lead-story-non-member { display: none; }
html.is-steady-member .lead-story-member { display: grid; }

/* Kostenlos-Badge auf der Lead-Story (für Nicht-Mitglieder) */
.lead-free-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--gold);
    color: var(--dark);
    font-family: var(--font-con);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 11px;
    z-index: 2;
}

@media (max-width: 640px) {
    .lead-free-badge {
        font-size: 10px;
        padding: 4px 9px;
        top: 0.75rem;
        left: 0.75rem;
    }
}

/* ============================================
   ÜBER-UNS: Vier-Werte-Grid (minimal, nur Namen)
   ============================================ */
.juul-values-minimal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    margin: 2rem 0 4rem;
}

.juul-value-min {
    background: var(--creme);
    padding: 3rem 1.5rem;
    text-align: center;
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(18px, 2vw, 26px);
    letter-spacing: 0.5px;
    color: var(--dark);
    text-transform: uppercase;
    border-top: 3px solid var(--coral);
    transition: background 0.18s, color 0.18s;
}

.juul-value-min:hover {
    background: var(--dark);
    color: var(--coral);
}

@media (max-width: 800px) {
    .juul-values-minimal {
        grid-template-columns: repeat(2, 1fr);
    }
    .juul-value-min {
        padding: 2.5rem 1rem;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .juul-values-minimal {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   INLINE CTA SHORTCODE [jetzttesten]
   Wird in (kostenlosen) Artikeln eingesetzt.
   Versteckt sich automatisch für Mitglieder.
   Selektoren bewusst spezifisch (.gep-inline-cta .X), damit sie
   .article-body p / h3 / etc. überschreiben.
   ============================================ */
.gep-inline-cta {
    background: var(--dark);
    color: var(--creme);
    padding: 2.5rem 2rem;
    margin: 3rem 0;
    text-align: center;
    border-top: 3px solid var(--coral);
}

.gep-inline-cta .gep-inline-cta-eyebrow {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
}

.gep-inline-cta .gep-inline-cta-claim {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.05;
    color: var(--creme);
    margin-bottom: 1rem;
    letter-spacing: -0.3px;
}

.gep-inline-cta .gep-inline-cta-claim em {
    font-style: italic;
    color: var(--coral);
    font-weight: 900;
}

.gep-inline-cta .gep-inline-cta-sub {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: #e8e3d8;
    max-width: 480px;
    margin: 0 auto 1.75rem;
}

.gep-inline-cta .gep-inline-cta-btn {
    display: inline-block;
    background: var(--coral);
    color: var(--dark);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2rem;
    transition: background 0.15s, transform 0.15s;
}

.gep-inline-cta .gep-inline-cta-btn:hover {
    background: #c85e42;
    color: var(--dark);
    transform: translateY(-1px);
}

/* Kompakte Variante */
.gep-inline-cta-compact {
    background: var(--creme);
    border-top: 2px solid var(--coral);
    border-bottom: 2px solid var(--coral);
    padding: 1.5rem 1.5rem;
    margin: 2.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.gep-inline-cta-compact .gep-inline-cta-compact-text {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 16px;
    color: var(--dark);
    letter-spacing: 0.3px;
}

.gep-inline-cta-compact .gep-inline-cta-compact-btn {
    background: var(--coral);
    color: var(--dark);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    transition: background 0.15s;
    white-space: nowrap;
}

.gep-inline-cta-compact .gep-inline-cta-compact-btn:hover {
    background: #c85e42;
    color: var(--dark);
}

@media (max-width: 640px) {
    .gep-inline-cta { padding: 2rem 1.25rem; margin: 2rem 0; }
    .gep-inline-cta .gep-inline-cta-btn { padding: 0.85rem 1.5rem; font-size: 13px; }
    .gep-inline-cta-compact { flex-direction: column; align-items: stretch; text-align: center; }
    .gep-inline-cta-compact .gep-inline-cta-compact-btn { text-align: center; }
}

/* Für Mitglieder: CTA-Shortcode komplett verstecken */
html.is-steady-member .gep-inline-cta {
    display: none;
}

/* Auf NEWSLETTER-Artikeln: Auto-CTA für anonyme User verstecken.
   Grund: Dort gibt es bereits den Newsletter-Signup-Prompt — zwei CTAs für denselben User
   wären zu viel. Für Newsletter-User (die den Signup-Prompt nicht sehen) bleibt die Box
   sichtbar als sanfter Upsell zur bezahlten Mitgliedschaft. */
.article-body.is-newsletter-article ~ .gep-inline-cta {
    display: none;
}
html.is-steady-newsletter .article-body.is-newsletter-article ~ .gep-inline-cta {
    display: block;
}

/* =============================================
   KITA-LANDING-PAGE
   ============================================= */

.kita-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ---- Hero ---- */
.kita-hero {
    position: relative;
    background: #1a1814;
    color: #F5F0E8;
    padding: 5rem 2rem 4rem;
    text-align: left;
    overflow: hidden;
}
.kita-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.kita-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(30%);
}
.kita-hero-bg-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2520 0%, #1a1814 100%);
}
.kita-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #1a1814 0%, rgba(26,24,20,0.78) 45%, rgba(26,24,20,0.4) 100%);
}

.kita-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
}

.kita-hero-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.5rem;
}

.kita-hero .kita-hero-title,
.kita-hero-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 0.95;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #F5F0E8;
    margin: 0 0 1.5rem;
}
.kita-hero-title em {
    color: var(--coral);
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.kita-hero-title .gold {
    color: var(--gold);
}

.kita-hero-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(20px, 2.5vw, 26px);
    color: rgba(245, 240, 232, 0.85);
    margin: 0 0 2rem;
}

.kita-hero-lead {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.95);
    max-width: 620px;
    margin: 0 0 1.5rem;
}
.kita-hero-lead + .kita-hero-lead {
    margin-top: 0;
}

.kita-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.kita-btn-primary,
.kita-btn-secondary {
    display: inline-block;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.kita-btn-primary {
    background: var(--coral);
    color: var(--cream);
    border: 2px solid var(--coral);
}
.kita-btn-primary:hover {
    background: transparent;
    color: var(--coral);
}

.kita-btn-secondary {
    background: transparent;
    color: var(--cream);
    border: 2px solid rgba(245, 240, 232, 0.4);
}
.kita-btn-secondary:hover {
    border-color: var(--cream);
    background: rgba(245, 240, 232, 0.08);
}

.kita-btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 16px;
}

.kita-hero-nav {
    font-family: var(--font-serif);
    font-size: 17px;
    color: rgba(245, 240, 232, 0.75);
    border-top: 1px solid rgba(245, 240, 232, 0.2);
    padding-top: 2rem;
    line-height: 2;
    margin-top: 1.5rem;
    letter-spacing: 0.2px;
}
.kita-hero-nav a {
    color: var(--cream, #F5F0E8);
    text-decoration: underline;
    text-decoration-color: rgba(224, 122, 95, 0.5);
    text-underline-offset: 4px;
    transition: color 0.15s;
    font-weight: 500;
}
.kita-hero-nav a:hover {
    color: var(--coral);
    text-decoration-color: var(--coral);
}

/* ---- Section-Basis ---- */
.kita-section {
    padding: 3.25rem 2rem;
    background: var(--cream);
    color: var(--dark);
}
.kita-section-light {
    background: var(--cream);
}
.kita-section-dark {
    background: var(--dark);
    color: var(--cream);
}

/* Aufeinanderfolgende Light-Sections enger zusammenziehen */
.kita-section-light + .kita-section-light {
    padding-top: 1rem;
}

.kita-section-label {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.25rem;
}
.kita-label-light {
    color: var(--coral);
}

.kita-section-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0 0 2rem;
    color: #1a1814;
}
.kita-section-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.82em;
    text-transform: none;
    letter-spacing: 0;
    color: var(--coral);
}
.kita-section-dark .kita-section-title,
.kita-section-title.kita-title-light,
.kita-title-light {
    color: #F5F0E8;
}

.kita-prose {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.7;
    max-width: 680px;
}
.kita-prose p { margin: 0 0 1.25rem; }

.kita-inline-link {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    text-decoration: none;
    border-bottom: 2px solid var(--coral);
    padding-bottom: 2px;
}
.kita-inline-link:hover { color: var(--dark); border-color: var(--dark); }

/* ---- Zwei-Spalten ---- */
.kita-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.kita-col-title {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    opacity: 0.55;
    margin: 0 0 0.5rem;
}
.kita-col-tag {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.25rem;
    border-bottom: 3px solid var(--coral);
    padding-bottom: 0.75rem;
    display: inline-block;
}
.kita-col p {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 1rem;
}

/* ---- Haltung ---- */
.kita-haltung {
    background: var(--coral);
    color: var(--cream);
    padding: 6rem 2rem;
}
.kita-haltung .kita-section-label {
    color: var(--cream);
    opacity: 0.75;
}
.kita-haltung-claim {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--cream);
    margin: 0 0 2rem;
    max-width: 800px;
}
.kita-haltung-claim em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.kita-haltung-text {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.7;
    max-width: 680px;
    color: rgba(245, 240, 232, 0.95);
}
.kita-haltung-text p { margin: 0 0 1.25rem; }

/* ---- Features ---- */
.kita-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
}
.kita-feature {
    border-top: 2px solid var(--dark);
    padding-top: 1.5rem;
}
.kita-feature-icon {
    width: 44px;
    height: 44px;
    color: var(--coral);
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kita-feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.kita-feature h4 {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    color: var(--dark);
}
.kita-feature p {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* ---- Pakete ---- */
.kita-pakete-lead {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.85);
    max-width: 680px;
    margin: 0 0 3rem;
}

.kita-pakete-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.kita-paket {
    background: var(--cream);
    color: var(--dark);
    padding: 2rem 1.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
}
.kita-paket-featured {
    background: var(--coral);
    color: var(--cream);
    transform: scale(1.03);
    z-index: 1;
}
.kita-paket-badge {
    position: absolute;
    top: -12px;
    right: 1.5rem;
    background: var(--dark);
    color: var(--cream);
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
}
.kita-paket-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.kita-paket-preis {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid currentColor;
    border-color: rgba(0,0,0,0.15);
}
.kita-paket-featured .kita-paket-preis {
    border-color: rgba(245, 240, 232, 0.3);
}
.kita-paket-preis-zahl {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 42px;
    letter-spacing: -1px;
}
.kita-paket-preis-zeit {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    opacity: 0.7;
}
.kita-paket-content { flex: 1; margin-bottom: 1.5rem; }
.kita-paket-groesse {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.75rem;
}
.kita-paket-featured .kita-paket-groesse {
    color: var(--cream);
    opacity: 0.9;
}
.kita-paket-details {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.9;
}
.kita-paket-details li::before {
    content: "· ";
    margin-right: 0.25rem;
    opacity: 0.5;
}
.kita-paket-btn {
    display: block;
    text-align: center;
    background: var(--dark);
    color: var(--cream);
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}
.kita-paket-btn:hover {
    background: var(--coral);
    color: var(--cream);
}
.kita-paket-featured .kita-paket-btn {
    background: var(--cream);
    color: var(--coral);
}
.kita-paket-featured .kita-paket-btn:hover {
    background: var(--dark);
    color: var(--cream);
}

.kita-pakete-hint {
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    color: rgba(245, 240, 232, 0.7);
    margin: 2rem 0 0;
}
.kita-pakete-hint a {
    color: var(--coral);
    text-decoration: underline;
}

/* ---- FAQ ---- */
.kita-faq { margin-top: 2rem; }
.kita-faq-item {
    border-top: 1px solid rgba(0,0,0,0.12);
    padding: 1.75rem 0;
}
.kita-faq-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); }
.kita-faq-q {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.6rem;
}
.kita-faq-a {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #333;
}
.kita-faq-a a { color: var(--coral); text-decoration: underline; }
.kita-faq-a strong { color: var(--dark); font-weight: 700; }

/* ---- Finaler CTA ---- */
.kita-cta-final {
    background: var(--dark);
    color: var(--cream);
    padding: 5rem 2rem;
    text-align: center;
}
.kita-cta-final .kita-cta-final-title,
.kita-cta-final-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: #F5F0E8;
    margin: 0 0 1rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.kita-cta-final-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85em;
    text-transform: none;
    letter-spacing: 0;
    color: var(--coral);
}
.kita-cta-final-sub {
    font-family: var(--font-serif);
    font-size: 17px;
    color: rgba(245, 240, 232, 0.9);
    margin: 0 0 2rem;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .kita-hero { padding: 3.5rem 1.5rem 3rem; }
    .kita-section { padding: 3.5rem 1.5rem; }
    .kita-haltung { padding: 4rem 1.5rem; }
    .kita-container { padding: 0 1.5rem; }
    .kita-two-col { grid-template-columns: 1fr; gap: 2.5rem; }
    .kita-features { grid-template-columns: 1fr; gap: 2rem; }
    .kita-pakete-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .kita-paket-featured { transform: none; }
    .kita-hero-nav { font-size: 15px; line-height: 1.9; }
    .kita-cta-final { padding: 3.5rem 1.5rem; }
}

/* ---- Kita-Claim (Break-Section) ---- */
.kita-claim {
    background: var(--cream);
    color: var(--dark);
    padding: 6rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.kita-claim-tight {
    padding: 3.5rem 2rem;
    border-top: none;
}
.kita-claim .kita-section-label {
    margin-bottom: 1.25rem;
}
.kita-claim-text {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.kita-claim-text em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--coral);
    display: inline-block;
    margin-top: 0.25rem;
}
@media (max-width: 768px) {
    .kita-claim { padding: 4rem 1.5rem; }
}

/* =============================================
   WOCHENPLAN-SEITE (page-wochenplan.php)
   ============================================= */

.wp-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ---- HERO ---- */
.wp-hero {
    background: var(--dark);
    color: var(--cream);
    padding: 5rem 2rem 4rem;
}
.wp-hero-inner {
    max-width: 1080px;
    margin: 0 auto;
}
.wp-hero-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 2rem;
}
.wp-hero-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(80px, 14vw, 200px);
    line-height: 0.85;
    letter-spacing: -3px;
    text-transform: uppercase;
    color: var(--cream);
    margin: 0 0 1rem;
}
.wp-hero-dot {
    color: var(--coral);
}
.wp-hero-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(20px, 2.5vw, 28px);
    color: rgba(245, 240, 232, 0.85);
    margin: 0 0 3rem;
}
.wp-hero-quote {
    border-left: 3px solid var(--coral);
    padding: 0.75rem 0 0.75rem 1.5rem;
    margin: 0 0 3rem;
    max-width: 640px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(245, 240, 232, 0.9);
}
.wp-hero-quote cite {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.55);
}

/* Personen-Auswahl */
.wp-persons-wrap {
    border-top: 1px solid rgba(245, 240, 232, 0.15);
    padding-top: 2rem;
}
.wp-persons-label {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.7);
    margin-bottom: 1rem;
}
.wp-persons-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.wp-person-btn {
    background: transparent;
    color: var(--cream);
    border: 2px solid rgba(245, 240, 232, 0.3);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 22px;
    width: 56px;
    height: 56px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-person-btn:hover {
    border-color: var(--cream);
    background: rgba(245, 240, 232, 0.08);
}
.wp-person-btn.is-active {
    background: var(--coral);
    color: var(--cream);
    border-color: var(--coral);
}
.wp-persons-hint {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.55);
}

/* ---- Section-Basis ---- */
.wp-section {
    padding: 5rem 2rem;
    background: var(--cream);
    color: var(--dark);
}
.wp-section-label {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
}
.wp-section-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0 0 3rem;
}
.wp-section-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--coral);
}

/* ---- Wochenplan-Grid ---- */
.wp-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.wp-plan-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--dark);
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    position: relative;
}
.wp-plan-card:hover {
    border-color: var(--coral);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(224, 122, 95, 0.15);
}
.wp-plan-day {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: var(--dark);
}
.wp-plan-time {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.75rem;
}
.wp-plan-name {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.35;
    color: var(--dark);
    margin-bottom: 1rem;
    flex: 1;
}
.wp-plan-meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: rgba(26, 24, 20, 0.55);
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ---- Rezepte (details/summary) ---- */
.wp-recipes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.wp-recipe {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    scroll-margin-top: 2rem;
}
.wp-recipe-summary {
    padding: 1.5rem 1.75rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    list-style: none;
}
.wp-recipe-summary::-webkit-details-marker { display: none; }
.wp-recipe-heading { flex: 1; }
.wp-recipe-day {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.3rem;
}
.wp-recipe-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 0.3rem;
    line-height: 1.15;
}
.wp-recipe-meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(26, 24, 20, 0.6);
}
.wp-recipe-toggle {
    font-family: var(--font-con);
    font-size: 32px;
    font-weight: 300;
    color: var(--coral);
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.wp-recipe[open] .wp-recipe-toggle {
    transform: rotate(45deg);
}
.wp-recipe-body {
    padding: 0 1.75rem 2rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 2rem;
}
.wp-recipe-cols {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
}
.wp-recipe-body h4 {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin: 0 0 1rem;
}
.wp-current-persons {
    color: var(--dark);
}
.wp-zutaten {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wp-zutat {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.7;
    padding: 0.35rem 0;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
}
.wp-zutat:last-child { border-bottom: none; }
.wp-menge {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    color: var(--coral);
    margin-right: 0.4rem;
    display: inline-block;
    min-width: 4.5rem;
}
.wp-name { color: var(--dark); }
.wp-name-only {
    color: rgba(26, 24, 20, 0.75);
    font-style: italic;
}
.wp-schritte {
    list-style: none;
    counter-reset: schritt;
    padding: 0;
    margin: 0;
}
.wp-schritte li {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.65;
    padding: 0 0 1.25rem 3rem;
    position: relative;
    counter-increment: schritt;
    color: var(--dark);
}
.wp-schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: -2px;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 22px;
    color: var(--coral);
    width: 2.25rem;
    text-align: right;
}
.wp-tipp {
    margin-top: 1.5rem;
    background: var(--cream);
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--coral);
}
.wp-tipp-label {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.4rem;
}
.wp-tipp p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: var(--dark);
    margin: 0;
}

/* ---- Cheat-Essen ---- */
.wp-section-cheats {
    background: #fff;
}
.wp-cheats-lead {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.6;
    color: var(--dark);
    max-width: 680px;
    margin: 0 0 2.5rem;
}
.wp-cheats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.wp-cheat {
    background: var(--cream);
    padding: 1.75rem;
    border-top: 3px solid var(--coral);
}
.wp-cheat-dauer {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.5rem;
}
.wp-cheat-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}
.wp-cheat-desc {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark);
    margin: 0;
}

/* ---- Einkaufsliste ---- */
.wp-einkauf-lead {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(26, 24, 20, 0.75);
    max-width: 680px;
    margin: 0 0 2rem;
}
.wp-einkauf-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.wp-einkauf-actions-bottom {
    margin-top: 2rem;
    margin-bottom: 0;
}
.wp-btn-secondary,
.wp-btn-tertiary {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.wp-btn-secondary {
    background: var(--dark);
    color: var(--cream);
    border: 2px solid var(--dark);
}
.wp-btn-secondary:hover {
    background: var(--coral);
    border-color: var(--coral);
}
.wp-btn-tertiary {
    background: transparent;
    color: rgba(26, 24, 20, 0.6);
    border: 1px solid rgba(26, 24, 20, 0.2);
}
.wp-btn-tertiary:hover {
    color: var(--coral);
    border-color: var(--coral);
}
.wp-einkauf {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
    margin-top: 1rem;
}
.wp-einkauf-kat-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--coral);
}
.wp-einkauf-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wp-einkauf-item {
    padding: 0.4rem 0;
    border-bottom: 1px dotted rgba(0,0,0,0.08);
}
.wp-einkauf-item:last-child { border-bottom: none; }
.wp-einkauf-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--dark);
}
.wp-check {
    margin-top: 0.4rem;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--coral);
    flex-shrink: 0;
}
.wp-einkauf-item.is-checked .wp-item-text {
    text-decoration: line-through;
    color: rgba(26, 24, 20, 0.4);
}
.wp-einkauf-item .wp-menge {
    color: var(--coral);
    font-family: var(--font-con);
    font-weight: 700;
    min-width: 0;
    margin-right: 0.35rem;
}
.wp-einkauf-item.is-checked .wp-menge {
    color: rgba(26, 24, 20, 0.4);
}
.wp-item-note {
    font-style: italic;
    color: rgba(26, 24, 20, 0.5);
    font-size: 13px;
    margin-left: 0.25rem;
}
.wp-vorraetig {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(224, 122, 95, 0.08);
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--dark);
    border-left: 3px solid var(--coral);
}
.wp-vorraetig strong {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-right: 0.5rem;
}

/* ---- Cross-Promo (Werbung) ---- */
.wp-promo {
    background: var(--coral);
    color: var(--cream);
    padding: 5rem 2rem;
}
.wp-promo-final {
    background: var(--dark);
}
.wp-promo-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.wp-promo-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.7);
    margin-bottom: 1.25rem;
}
.wp-promo-final .wp-promo-eyebrow {
    color: var(--coral);
}
.wp-promo-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: var(--cream);
    margin: 0 0 1.25rem;
}
.wp-promo-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--cream);
    display: block;
    margin-top: 0.25rem;
}
.wp-promo-final .wp-promo-title em {
    color: var(--coral);
}
.wp-promo-text {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.9);
    margin: 0 0 2rem;
}
.wp-promo-btn {
    display: inline-block;
    background: var(--cream);
    color: var(--coral);
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}
.wp-promo-btn:hover {
    background: var(--dark);
    color: var(--cream);
}
.wp-promo-final .wp-promo-btn {
    background: var(--coral);
    color: var(--cream);
}
.wp-promo-final .wp-promo-btn:hover {
    background: var(--cream);
    color: var(--dark);
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
    .wp-plan-grid { grid-template-columns: repeat(2, 1fr); }
    .wp-cheats-grid { grid-template-columns: 1fr; }
    .wp-einkauf { grid-template-columns: 1fr; }
    .wp-recipe-cols { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
    .wp-hero { padding: 3.5rem 1.5rem 3rem; }
    .wp-section { padding: 3.5rem 1.5rem; }
    .wp-promo { padding: 4rem 1.5rem; }
    .wp-container { padding: 0 1.5rem; }
    .wp-plan-grid { grid-template-columns: 1fr; }
    .wp-person-btn { width: 48px; height: 48px; font-size: 18px; }
    .wp-recipe-summary { padding: 1.25rem 1.25rem; }
    .wp-recipe-body { padding: 0 1.25rem 1.5rem; padding-top: 1.5rem; }
    .wp-recipe-name { font-size: 18px; }
}

/* ---- Print ---- */
@media print {
    .wp-hero,
    .wp-section-plan,
    .wp-section-recipes,
    .wp-section-cheats,
    .wp-promo,
    .site-header,
    .site-footer,
    .wp-einkauf-actions {
        display: none !important;
    }
    .wp-section-einkauf { padding: 1rem !important; }
    .wp-section-title { font-size: 24px !important; margin-bottom: 1rem !important; }
    .wp-einkauf { grid-template-columns: repeat(2, 1fr) !important; }
    .wp-einkauf-item { break-inside: avoid; }
    body { background: white !important; color: black !important; }
}

/* =============================================
   RÜCKHOL-SEITE (page-rueckkehr.php)
   ============================================= */

.winback {
    background: var(--cream);
    color: var(--dark);
    padding: 5rem 2rem;
}
.winback-inner {
    max-width: 640px;
    margin: 0 auto;
}

.winback-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.25rem;
}

.winback-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(36px, 5.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0 0 3rem;
    color: var(--dark);
}
.winback-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--coral);
}

.winback-letter {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.7;
    color: var(--dark);
    margin-bottom: 3rem;
}
.winback-letter p {
    margin: 0 0 1.25rem;
}
.winback-letter p:last-child {
    margin-bottom: 0;
}

.winback-offer {
    background: #fff;
    border-left: 4px solid var(--coral);
    padding: 2rem 2.5rem;
    margin: 3rem 0;
}
.winback-offer-label {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
}
.winback-price-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.winback-price-new {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.winback-price-amount {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 56px;
    letter-spacing: -1.5px;
    line-height: 1;
    color: var(--dark);
}
.winback-price-unit {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: rgba(26, 24, 20, 0.6);
}
.winback-price-old {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: rgba(26, 24, 20, 0.45);
}
.winback-price-old-label {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
}
.winback-price-old-amount {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.5px;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 2.5px;
}

.winback-btn {
    display: inline-block;
    background: var(--coral);
    color: var(--cream);
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1rem 1.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid var(--coral);
}
.winback-btn:hover {
    background: transparent;
    color: var(--coral);
}

.winback-btn-placeholder {
    display: inline-block;
    background: rgba(224, 122, 95, 0.1);
    color: var(--coral);
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.5;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--coral);
}

.winback-offer-note {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(26, 24, 20, 0.55);
    margin: 1rem 0 0;
}

.winback-reminder {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.winback-reminder-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin: 0 0 1.25rem;
}
.winback-reminder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.winback-reminder-list li {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.55;
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: var(--dark);
}
.winback-reminder-list li::before {
    content: "·";
    position: absolute;
    left: 0.3rem;
    top: 0.4rem;
    color: var(--coral);
    font-weight: 800;
    font-size: 20px;
}

.winback-signature {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.winback-signature-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    color: var(--dark);
    margin: 0 0 1rem;
}
.winback-signature-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.3px;
    color: var(--coral);
    margin: 0;
}

@media (max-width: 640px) {
    .winback { padding: 3.5rem 1.5rem; }
    .winback-offer { padding: 1.75rem 1.5rem; }
    .winback-price-amount { font-size: 44px; }
    .winback-letter { font-size: 17px; }
}

/* ---- Rückhol-Seite: 3 neueste Artikel ---- */
.winback-latest {
    margin: 3rem -2rem;
    padding: 2rem 2rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.winback-latest-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin: 0 0 1.5rem;
    text-align: left;
}
.winback-latest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.winback-article {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    background: #fff;
    text-decoration: none;
    color: var(--dark);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    overflow: hidden;
}
.winback-article:hover {
    border-color: var(--coral);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 122, 95, 0.12);
}
.winback-article-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.winback-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.winback-article-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: var(--coral);
    padding: 0.5rem;
    text-align: center;
    line-height: 1.1;
}
.winback-article-cat {
    position: absolute;
    bottom: 0.4rem;
    left: 0.4rem;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.2rem 0.4rem;
    background: var(--coral);
    color: var(--cream);
    line-height: 1.2;
}
.winback-article-cat.paar {
    background: var(--dark);
}
.winback-article-body {
    padding: 0.75rem 1rem 0.75rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.winback-article-num {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.25rem;
}
.winback-article-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 0 0 0.4rem;
    line-height: 1.2;
}
.winback-article-meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: rgba(26, 24, 20, 0.55);
    line-height: 1.3;
}
@media (max-width: 480px) {
    .winback-article {
        grid-template-columns: 90px 1fr;
    }
    .winback-article-title { font-size: 15px; }
    .winback-article-meta { font-size: 12px; }
}

/* ---- Kita-Hero: Preis-Tag (dezenter) ---- */
.kita-hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.5rem 0 2rem;
    padding: 0.7rem 1.25rem;
    background: var(--coral);
    color: var(--cream);
}
.kita-hero-price-amount {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -0.5px;
    line-height: 1;
}
.kita-hero-price-unit {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(13px, 1.5vw, 15px);
    color: var(--cream);
    opacity: 0.95;
}
.kita-hero-lead + .kita-hero-lead {
    margin-top: -1rem;
}

/* ---- Kita-Hero: 3 kostenlose Artikel darunter ---- */
.kita-free-strip-wrap {
    background: var(--cream);
    padding: 2.75rem 2rem 1rem;
}
.kita-free-label {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    text-align: center;
    margin-bottom: 2rem;
}
.kita-free-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.kita-free-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    text-decoration: none;
    color: var(--dark);
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}
.kita-free-card:hover {
    border-color: var(--coral);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(224, 122, 95, 0.15);
}
.kita-free-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.kita-free-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kita-free-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--coral);
    padding: 1rem;
    text-align: center;
}
.kita-free-cat {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--coral);
    color: var(--cream);
    padding: 0.3rem 0.6rem;
    line-height: 1.2;
}
.kita-free-cat.paar {
    background: var(--dark);
}
.kita-free-body {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.kita-free-num {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.4rem;
}
.kita-free-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 0 0 0.6rem;
    line-height: 1.2;
}
.kita-free-teaser {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin: 0 0 1rem;
    flex: 1;
}
.kita-free-meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: rgba(26, 24, 20, 0.6);
}

@media (max-width: 900px) {
    .kita-free-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .kita-free-strip-wrap { padding: 3rem 1.5rem; }
}
@media (max-width: 640px) {
    .kita-hero-price {
        padding: 0.65rem 1rem;
        gap: 0.4rem;
    }
    .kita-hero-price-amount { font-size: 22px; }
}

/* ---- Kita-Pakete: Schieberegler + Paket-Card nebeneinander ---- */
.kita-paket-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    max-width: 960px;
    margin: 3rem auto 0;
}

.kita-slider-wrap {
    margin: 0;
    padding: 2rem;
    background: rgba(245, 240, 232, 0.06);
    border: 1px solid rgba(245, 240, 232, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 900px) {
    .kita-paket-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
.kita-slider-label {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.7);
    margin-bottom: 1rem;
}
.kita-slider-value {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(56px, 8vw, 80px);
    line-height: 1;
    color: var(--coral);
    letter-spacing: -2px;
    margin-bottom: 1.75rem;
}
.kita-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(245, 240, 232, 0.18);
    outline: none;
    margin: 0 0 0.75rem;
    cursor: pointer;
}
.kita-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--coral);
    cursor: pointer;
    border: 3px solid var(--cream);
    box-shadow: 0 0 0 1px var(--coral), 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.1s ease;
}
.kita-slider::-webkit-slider-thumb:hover,
.kita-slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
}
.kita-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--coral);
    cursor: pointer;
    border: 3px solid var(--cream);
    box-shadow: 0 0 0 1px var(--coral), 0 4px 12px rgba(0,0,0,0.3);
}
.kita-slider-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(245, 240, 232, 0.4);
}

/* ---- Dynamische Paket-Card ---- */
.kita-section-dark .kita-paket-dynamic,
.kita-paket-dynamic {
    max-width: none;
    margin: 0;
    background: #F5F0E8;
    color: #1a1814;
    padding: 2.5rem 2.25rem;
    text-align: center;
    position: relative;
    animation: kita-fade-in 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@keyframes kita-fade-in {
    from { opacity: 0.4; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.kita-paket-dynamic .kita-paket-dyn-badge {
    display: inline-block;
    background: var(--coral);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    margin-bottom: 1.25rem;
}
.kita-paket-dynamic .kita-paket-dyn-name {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 36px);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #1a1814;
    margin: 0 0 1.25rem;
}
.kita-paket-dynamic .kita-paket-dyn-info {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #1a1814;
    margin: 0 0 1.75rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.kita-paket-dynamic .kita-paket-dyn-preis {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.kita-paket-dynamic .kita-paket-dyn-amount {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(44px, 6vw, 60px);
    letter-spacing: -1.5px;
    line-height: 1;
    color: #1a1814;
}
.kita-paket-dynamic .kita-paket-dyn-period {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: rgba(26, 24, 20, 0.6);
}
.kita-paket-dynamic .kita-paket-dyn-details {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.85;
    color: #1a1814;
}
.kita-paket-dynamic .kita-paket-dyn-details li {
    color: #1a1814;
}
.kita-paket-dynamic .kita-paket-dyn-details li::before {
    content: "·";
    margin-right: 0.4rem;
    color: var(--coral);
    font-weight: 800;
}
.kita-paket-dynamic .kita-paket-dyn-details strong {
    color: #1a1814;
    font-weight: 700;
}
.kita-paket-dyn-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.kita-paket-dyn-btn {
    display: block;
    text-align: center;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid var(--coral);
    cursor: pointer;
}
/* Primär: Jetzt buchen */
.kita-paket-dyn-btn-primary {
    background: var(--coral);
    color: var(--cream);
}
.kita-paket-dyn-btn-primary:hover {
    background: transparent;
    color: var(--coral);
}
/* Sekundär: Kontakt */
.kita-paket-dyn-btn-secondary {
    background: transparent;
    color: var(--coral);
}
.kita-paket-dyn-btn-secondary:hover {
    background: var(--coral);
    color: var(--cream);
}
/* Fallback für Legacy-Buttons ohne Primary/Secondary Class */
.kita-paket-dyn-btn:not(.kita-paket-dyn-btn-primary):not(.kita-paket-dyn-btn-secondary) {
    background: var(--coral);
    color: var(--cream);
}
.kita-paket-dyn-btn:not(.kita-paket-dyn-btn-primary):not(.kita-paket-dyn-btn-secondary):hover {
    background: transparent;
    color: var(--coral);
}

@media (max-width: 640px) {
    .kita-slider-wrap { padding: 1.5rem; }
    .kita-paket-dynamic { padding: 2rem 1.5rem; }
}

/* ---- Finale Navigation statt Final-CTA ---- */
.kita-end-nav {
    background: var(--dark);
    color: var(--cream);
    padding: 4rem 2rem;
}
.kita-end-nav-label {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 2rem;
    text-align: center;
}
.kita-end-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}
.kita-end-nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.75rem 1.5rem;
    background: rgba(245, 240, 232, 0.04);
    border: 1px solid rgba(245, 240, 232, 0.15);
    text-decoration: none;
    color: #F5F0E8;
    transition: all 0.2s ease;
}
.kita-end-nav-item:hover {
    background: rgba(245, 240, 232, 0.08);
    border-color: var(--coral);
    transform: translateY(-2px);
}
.kita-end-nav-arrow {
    font-family: var(--font-con);
    font-size: 20px;
    font-weight: 700;
    color: var(--coral);
    line-height: 1;
}
.kita-end-nav-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: #F5F0E8;
    line-height: 1.15;
}
.kita-end-nav-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.6);
    line-height: 1.4;
}
@media (max-width: 760px) {
    .kita-end-nav-grid { grid-template-columns: 1fr; }
    .kita-end-nav { padding: 3rem 1.5rem; }
}

/* ============================================
   ARTIKEL-ANGEBOT (page-angebot.php, Ads-Landing)
   ============================================ */
.angebot-hero {
    position: relative;
    background: var(--dark);
    color: var(--creme);
    overflow: hidden;
}
.angebot-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.angebot-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,24,20,0.55) 0%, rgba(26,24,20,0.9) 100%);
}
.angebot-hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 5rem 2rem 4rem;
}
.angebot-hero-title {
    font-family: var(--font-con);
    font-weight: 900;
    font-size: clamp(36px, 6vw, 68px);
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--creme);
    margin: 0 0 1.25rem;
}
.angebot-hero-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(245,240,232,0.8);
    max-width: 620px;
    margin: 0 0 2rem;
}
.angebot-byline { display: flex; align-items: center; gap: 1rem; }
.angebot-byline-img {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; filter: grayscale(1);
    border: 2px solid var(--creme);
}
.angebot-byline-label {
    font-family: var(--font-con); font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; color: var(--coral);
}
.angebot-byline-name {
    font-family: var(--font-con); font-weight: 800; font-size: 18px; color: var(--creme);
}
.angebot-byline-role {
    font-family: var(--font-serif); font-size: 13px; color: rgba(245,240,232,0.65);
}

.angebot-auszug { background: var(--creme); padding: 4rem 2rem 4.5rem; }
.angebot-auszug-inner { max-width: 680px; margin: 0 auto; position: relative; }
.angebot-anfrage {
    border-left: 3px solid var(--coral);
    padding: 0.75rem 1.25rem;
    margin-bottom: 2.5rem;
    background: #EDE8DE;
}
.angebot-anfrage summary {
    cursor: pointer;
    font-family: var(--font-con); font-weight: 700; font-size: 12px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--dark);
}
.angebot-anfrage-text {
    font-family: var(--font-serif); font-style: italic;
    font-size: 15px; line-height: 1.7; color: #333; margin-top: 1rem;
}
.angebot-auszug-text {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.8;
    color: var(--dark);
    margin-top: 1rem;
}
.angebot-auszug-text p { margin: 0 0 1.1em; }
.angebot-auszug-fade {
    height: 90px;
    margin-top: -90px;
    position: relative;
    background: linear-gradient(180deg, rgba(245,240,232,0) 0%, var(--creme) 100%);
    margin-bottom: 1.5rem;
}

.angebot-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin: 0 auto;
}
.angebot-stimme-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(19px, 2.4vw, 24px);
    line-height: 1.6;
    color: var(--creme);
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
}

/* Mitglieder sehen nur den direkten Link */
.angebot-member-only { display: none; }
html.is-steady-member .angebot-member-only { display: block; }
html.is-steady-member .angebot-nonmember { display: none !important; }
.angebot-member-only p {
    font-family: var(--font-serif); font-style: italic; color: var(--mid); margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .angebot-hero-content { padding: 3.5rem 1.25rem 3rem; }
    .angebot-auszug { padding: 3rem 1.25rem; }
    .angebot-auszug-text { font-size: 17px; }
    .angebot-cards { grid-template-columns: 1fr; }
}
.angebot-pricing .join-pricing-inner { max-width: 760px; text-align: center; }
.angebot-pricing .join-pricing-card { text-align: left; }
#so-gehts, #pakete { scroll-margin-top: 90px; }
/* =============================================
   SOFT PAYWALL — Newsletter-Freigabe pro Artikel
   ============================================= */

/* Standard: Paywall ist sichtbar (für Nicht-Mitglieder) */
/* Zahlendes Mitglied → Paywall-Trigger weg (gilt für ALLE Artikeltypen) */
html.is-steady-member #steady_paywall {
    display: none !important;
}

/* NEWSLETTER-FREIGEGEBENE ARTIKEL — eigene Soft Paywall ohne Steady-UI.
   Standardmäßig ist der gated Content versteckt (für anonyme User),
   wird für Newsletter + zahlende Mitglieder eingeblendet. */
.gep-newsletter-gated-content {
    display: none;
}
html.is-steady-newsletter .gep-newsletter-gated-content,
html.is-steady-member .gep-newsletter-gated-content {
    display: block;
}

/* Steadys native Paywall-Pop-up unterdrücken, falls Steady es trotzdem auf
   Newsletter-Artikeln aufmacht (wir nutzen hier NICHT #steady_paywall). */
.is-newsletter-article .steady-dialog,
.is-newsletter-article .steady-paywall,
.is-newsletter-article [class*="steady-paywall"],
.is-newsletter-article [id^="steady-"]:not(.gep-newsletter-gated-content):not(.gep-newsletter-cta) {
    display: none !important;
}

/* NEWSLETTER-CTA (nur sichtbar für anonyme User, nicht für Newsletter/Member) */
.gep-newsletter-cta {
    display: block;
    max-width: 720px;
    margin: 2.5rem auto 3rem;
    background: var(--dark);
    color: var(--cream);
    padding: 2.5rem 2.25rem;
    text-align: center;
    border-left: 4px solid var(--coral);
    position: relative;
    z-index: 2;
}
html.is-steady-newsletter .gep-newsletter-cta,
html.is-steady-member .gep-newsletter-cta {
    display: none;
}
.gep-newsletter-cta-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
}
.gep-newsletter-cta-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(26px, 3.5vw, 36px);
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: #F5F0E8;
    margin: 0 0 1rem;
    line-height: 1.1;
}
.gep-newsletter-cta-sub {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.9);
    margin: 0 0 1.75rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.gep-newsletter-cta-btn {
    display: inline-block;
    background: var(--coral);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1rem 2rem;
    text-decoration: none;
    border: 2px solid var(--coral);
    transition: all 0.2s ease;
}
.gep-newsletter-cta-btn:hover {
    background: transparent;
    color: var(--coral);
}

/* Steady Newsletter-Signup Widget-Container */
.gep-newsletter-embed-wrap {
    max-width: 100%;
    width: 100%;
    margin: 1.5rem 0;
    min-height: 60px;
    position: relative;
    isolation: isolate;
}
.gep-newsletter-embed-wrap #steady_newsletter_signup_embed {
    display: block !important;
    width: 100%;
    max-width: 100%;
    position: static !important;
    box-sizing: border-box;
}
/* Steadys Widget absolut positionierte Elemente abfangen */
.gep-newsletter-embed-wrap #steady_newsletter_signup_embed > * {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
}
.gep-newsletter-embed-wrap input,
.gep-newsletter-embed-wrap button {
    font-family: inherit;
    max-width: 100%;
    box-sizing: border-box;
}
.gep-newsletter-cta-login {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.6);
}
.gep-newsletter-cta-login a {
    color: var(--coral);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .gep-newsletter-cta { padding: 2rem 1.5rem; }
}

/* =============================================
   AD-PAYWALL (für Artikel mit Hidden Steady-Packages)
   Eigene Paywall statt Steady-nativ — zeigt Soli/Regulär direkt
   mit ad-spezifischen URLs für Trial-to-Paid-Attribution
   ============================================= */

/* Gated Content hinter Preview versteckt, für Mitglieder sichtbar */
.gep-ad-gated-content {
    display: none;
}
html.is-steady-member .gep-ad-gated-content {
    display: block;
}

/* Steady native Paywall / Modal auf Ad-Artikeln unterdrücken */
.is-ad-article .steady-dialog,
.is-ad-article .steady-paywall,
.is-ad-article [class*="steady-paywall"],
.is-ad-article [id^="steady-"]:not(.gep-ad-gated-content):not(.gep-ad-paywall-cta) {
    display: none !important;
}

/* Preview-Fade am Ende des sichtbaren Textes */
.gep-ad-paywall::after {
    content: "";
    display: block;
    height: 120px;
    margin-top: -120px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--cream, #F5F0E8) 85%);
    pointer-events: none;
    position: relative;
    z-index: 1;
}
html.is-steady-member .gep-ad-paywall::after {
    display: none;
}

/* Haupt-Container der Paywall (nur für Nicht-Mitglieder sichtbar) */
.gep-ad-paywall-cta {
    display: block;
    max-width: 920px;
    margin: 3rem auto 4rem;
    background: var(--dark, #1a1814);
    color: var(--cream, #F5F0E8);
    padding: 3rem 2.5rem 3.5rem;
    text-align: center;
    position: relative;
    z-index: 2;
}
html.is-steady-member .gep-ad-paywall-cta {
    display: none;
}

.gep-ad-paywall-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    margin-bottom: 1rem;
}

.gep-ad-paywall-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 52px);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #F5F0E8;
    margin: 0 0 1.25rem;
    line-height: 1.0;
}
.gep-ad-paywall-title em {
    font-style: normal;
    color: var(--coral, #E07A5F);
}
.gep-ad-paywall-title .gold {
    color: var(--gold, #F2C14E);
}

.gep-ad-paywall-sub {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(245, 240, 232, 0.88);
    margin: 0 auto 2.5rem;
    max-width: 540px;
}

/* Paket-Grid */
.gep-ad-paywall-packages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 720px;
    margin: 0 auto 2rem;
}

.gep-ad-paywall-card {
    display: block;
    background: rgba(245, 240, 232, 0.06);
    border: 1.5px solid rgba(245, 240, 232, 0.18);
    padding: 1.75rem 1.5rem;
    text-decoration: none;
    color: #F5F0E8;
    text-align: left;
    transition: all 0.2s ease;
    position: relative;
}
.gep-ad-paywall-card:hover {
    background: rgba(245, 240, 232, 0.12);
    border-color: rgba(245, 240, 232, 0.4);
    transform: translateY(-2px);
}

.gep-ad-paywall-card-featured {
    background: rgba(224, 122, 95, 0.12);
    border-color: var(--coral, #E07A5F);
}
.gep-ad-paywall-card-featured:hover {
    background: rgba(224, 122, 95, 0.2);
    border-color: var(--coral, #E07A5F);
}

.gep-ad-paywall-badge {
    position: absolute;
    top: -11px;
    left: 1.5rem;
    background: var(--coral, #E07A5F);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
}

.gep-ad-paywall-card-eyebrow {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.65);
    margin-bottom: 0.5rem;
}

.gep-ad-paywall-card-price {
    font-family: var(--font-con);
    font-size: 28px;
    color: #F5F0E8;
    margin-bottom: 0.75rem;
    line-height: 1;
}
.gep-ad-paywall-card-price strong {
    font-weight: 800;
    font-size: 44px;
    letter-spacing: -1px;
}
.gep-ad-paywall-card-price span {
    font-weight: 400;
    font-size: 15px;
    color: rgba(245, 240, 232, 0.65);
    letter-spacing: 0;
}

.gep-ad-paywall-card-note {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.78);
    margin: 0 0 1.25rem;
}

.gep-ad-paywall-card-cta {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    padding-top: 0.75rem;
    border-top: 1px solid rgba(245, 240, 232, 0.15);
}
.gep-ad-paywall-card-featured .gep-ad-paywall-card-cta {
    color: #F5F0E8;
}

.gep-ad-paywall-trust {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.6);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.5;
}

.gep-ad-paywall-login {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.5);
}
.gep-ad-paywall-login a {
    color: var(--coral, #E07A5F);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .gep-ad-paywall-cta { padding: 2rem 1.5rem 2.5rem; margin: 2rem auto 3rem; }
    .gep-ad-paywall-packages { grid-template-columns: 1fr; gap: 1rem; }
    .gep-ad-paywall-card { padding: 1.5rem 1.25rem; }
    .gep-ad-paywall-badge { top: -10px; }
}

/* =============================================
   MODERNES ARTIKEL-HERO (single.php)
   Bild als Hintergrund, alle Elemente drauf
   ============================================= */

.single-hero {
    position: relative;
    background: var(--dark);
    color: var(--cream);
    overflow: hidden;
    min-height: 540px;
    display: flex;
    align-items: flex-end;
}
.single-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.single-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(26, 24, 20, 0.35) 0%,
        rgba(26, 24, 20, 0.6) 45%,
        rgba(26, 24, 20, 0.88) 100%);
}
.single-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 6rem 2rem 3rem;
}

.single-hero-free-label {
    display: inline-block;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    background: var(--gold);
    color: #1a1814;
    margin-bottom: 1.25rem;
}

.single-hero-eyebrow {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.5rem;
}
.single-hero-eyebrow.paar {
    color: var(--gold);
}

.single-hero-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(42px, 6.5vw, 84px);
    line-height: 0.98;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #F5F0E8;
    margin: 0 0 2.5rem;
    max-width: 880px;
}

/* Teaser-Block über dem Artikel-Body */
.single-teaser {
    max-width: 720px;
    margin: 2.5rem auto 2rem;
    padding: 0 2rem;
}
.single-teaser-label {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.75rem;
}
.single-teaser-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.6;
    color: #333;
    margin: 0;
}
@media (max-width: 640px) {
    .single-teaser { padding: 0 1.5rem; margin: 2rem auto 1.5rem; }
}

/* Byline direkt im Hero */
.single-hero-byline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(245, 240, 232, 0.2);
    max-width: 560px;
}
.single-hero-byline-img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
    display: block;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    background: transparent;
    padding: 0;
}
.single-hero-byline-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--coral);
    color: var(--cream);
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.single-hero-byline-info {
    line-height: 1.3;
}
.single-hero-byline-label {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.2rem;
}
.single-hero-byline-name {
    display: block;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.2px;
    color: #F5F0E8;
    text-decoration: none;
    margin-bottom: 0.1rem;
}
.single-hero-byline-name:hover {
    color: var(--coral);
}
.single-hero-byline-role {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.65);
}

@media (max-width: 780px) {
    .single-hero { min-height: 420px; }
    .single-hero-content { padding: 4rem 1.5rem 2.5rem; }
    .single-hero-byline-img { width: 48px; height: 48px; }
    .single-hero-byline-initials { font-size: 16px; }
}

/* Angebot: schmaler Short-Cut für Bestandsmitglieder zwischen Hero und Paketen */
.angebot-member-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    background: rgba(26, 24, 20, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(26, 24, 20, 0.65);
    text-align: center;
    flex-wrap: wrap;
}
.angebot-member-strip a {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral);
    text-decoration: none;
}
.angebot-member-strip a:hover { text-decoration: underline; }
html.is-steady-member .angebot-nonmember { display: none !important; }

/* Angebot: Soli-Paket als empfohlenes Angebot hervorheben */
.angebot-cards .angebot-card-featured {
    position: relative;
    border: 3px solid var(--coral);
    box-shadow: 0 8px 32px rgba(224, 122, 95, 0.18);
    transform: translateY(-4px);
}
.angebot-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--coral);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .angebot-cards .angebot-card-featured {
        transform: none;
        margin-top: 1rem;
    }
}

/* Angebot: Farbige Headline-Typo */
.angebot-pricing-title em {
    color: var(--coral);
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.angebot-pricing-title .gold {
    color: var(--gold);
}

/* Angebot: Marken-Hero mit farbigem Titel + CTA-Sub */
.angebot-hero-title-brand em {
    color: var(--coral);
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.angebot-hero-title-brand .gold {
    color: var(--gold);
}
.angebot-hero-sub-cta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(18px, 2.2vw, 24px);
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.95);
    margin-top: 1.5rem;
    max-width: 760px;
}

/* Angebot-Hero: Marken-Claim unter dem Titel, zurückgenommen */
.angebot-hero-sub-claim {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.55;
    color: rgba(245, 240, 232, 0.78);
    margin-top: 1.5rem;
    margin-bottom: 0;
    max-width: 720px;
}
/* CTA-Zeile darunter: etwas prominenter, direkter */
.angebot-hero-sub-claim + .angebot-hero-sub-cta {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(245, 240, 232, 0.2);
}

/* Angebot: Finaler CTA zurück zu den Paketen */
.angebot-final-cta {
    background: var(--dark);
    padding: 3.5rem 2rem 4.5rem;
    text-align: center;
}
.angebot-final-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}
.angebot-final-cta-btn {
    display: inline-block;
    background: var(--coral);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    padding: 1.25rem 2.5rem;
    text-decoration: none;
    border: 2px solid var(--coral);
    transition: all 0.2s ease;
}
.angebot-final-cta-btn:hover {
    background: transparent;
    color: var(--coral);
}

/* =============================================
   MAGAZIN-LANDING (page-mitglied-werden-magazin.php)
   Ad-Variante mit Hidden Packages + Artikel-Swiper
   ============================================= */

/* HERO */
.magazin-hero {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--dark, #1a1814);
}
.magazin-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.magazin-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.magazin-hero-bg-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--coral, #E07A5F), var(--dark, #1a1814));
}
.magazin-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26,24,20,0.45) 0%, rgba(26,24,20,0.85) 100%);
    z-index: 1;
}
.magazin-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    padding: 4rem 1.5rem;
    text-align: center;
    color: var(--cream, #F5F0E8);
}
.magazin-hero-eyebrow {
    font-family: var(--font-con);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    margin-bottom: 1.25rem;
}
.magazin-hero-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(44px, 7vw, 88px);
    line-height: 0.95;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #F5F0E8;
    margin: 0 0 1.5rem;
}
.magazin-hero-title em {
    font-style: normal;
    color: var(--coral, #E07A5F);
}
.magazin-hero-title .gold {
    color: var(--gold, #F2C14E);
}
.magazin-hero-sub {
    font-family: var(--font-serif);
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.55;
    color: rgba(245, 240, 232, 0.92);
    max-width: 680px;
    margin: 0 auto 2rem;
}
.magazin-hero-sub strong {
    color: var(--gold, #F2C14E);
    font-weight: 700;
}
.magazin-hero-cta-row {
    margin-top: 2rem;
}
.magazin-hero-cta-btn {
    display: inline-block;
    background: var(--coral, #E07A5F);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    padding: 1.15rem 2.25rem;
    text-decoration: none;
    border: 2px solid var(--coral, #E07A5F);
    transition: all 0.2s ease;
}
.magazin-hero-cta-btn:hover {
    background: transparent;
    color: var(--coral, #E07A5F);
}

/* ARTIKEL-SWIPER */
.magazin-articles {
    background: var(--cream, #F5F0E8);
    padding: 4rem 0;
    position: relative;
}
.magazin-articles-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.magazin-articles-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    margin-bottom: 0.75rem;
    text-align: center;
}
.magazin-articles-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 40px);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--dark, #1a1814);
    text-align: center;
    margin: 0 0 1rem;
    line-height: 1.1;
}
.magazin-articles-sub {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: #4a4844;
    text-align: center;
    max-width: 580px;
    margin: 0 auto 2.5rem;
}

/* CSS-only swiper via scroll-snap */
.magazin-articles-track-wrap {
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
    position: relative;
}
.magazin-articles-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0 1.5rem;
    scroll-padding-left: 1.5rem;
}
.magazin-articles-track::-webkit-scrollbar {
    display: none;
}
.magazin-article-card {
    flex: 0 0 310px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.magazin-article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.magazin-article-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.magazin-article-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #e5e0d6;
}
.magazin-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.magazin-article-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 1.5rem;
    color: var(--dark, #1a1814);
    background: linear-gradient(135deg, var(--gold, #F2C14E), var(--coral, #E07A5F));
}
.magazin-article-cat {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--coral, #E07A5F);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
}
.magazin-article-cat.paar {
    background: var(--gold, #F2C14E);
    color: var(--dark, #1a1814);
}
.magazin-article-body {
    padding: 1.25rem 1.25rem 1.5rem;
}
.magazin-article-num {
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    margin-bottom: 0.5rem;
}
.magazin-article-title {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--dark, #1a1814);
    margin: 0 0 0.75rem;
}
.magazin-article-meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: #6b6864;
}
.magazin-articles-hint {
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: #8a8580;
    margin-top: 0.5rem;
}

/* FEATURES */
.magazin-features {
    background: #fff;
    padding: 4.5rem 1.5rem;
}
.magazin-features-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.magazin-section-label {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    margin-bottom: 2rem;
    text-align: center;
}
.magazin-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.magazin-feature {
    text-align: center;
}
.magazin-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: var(--coral, #E07A5F);
}
.magazin-feature-icon svg {
    width: 100%;
    height: 100%;
}
.magazin-feature-title {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--dark, #1a1814);
    margin: 0 0 0.75rem;
}
.magazin-feature-text {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: #4a4844;
    margin: 0;
}

/* PRICING-CARDS mit Hidden-URLs */
.magazin-pricing {
    background: var(--dark, #1a1814);
    color: var(--cream, #F5F0E8);
    padding: 5rem 1.5rem;
}
.magazin-pricing-inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.magazin-pricing-eyebrow {
    font-family: var(--font-con);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    margin-bottom: 1rem;
}
.magazin-pricing-title {
    font-family: var(--font-con);
    font-weight: 800;
    font-size: clamp(32px, 4.5vw, 48px);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #F5F0E8;
    margin: 0 0 1rem;
    line-height: 1.0;
}
.magazin-pricing-sub {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(245, 240, 232, 0.88);
    margin: 0 auto 2.5rem;
    max-width: 580px;
}

.magazin-pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: left;
}

.magazin-pricing-card {
    display: block;
    background: rgba(245, 240, 232, 0.06);
    border: 1.5px solid rgba(245, 240, 232, 0.18);
    padding: 2rem 1.75rem;
    text-decoration: none;
    color: #F5F0E8;
    transition: all 0.2s ease;
    position: relative;
}
.magazin-pricing-card:hover {
    background: rgba(245, 240, 232, 0.1);
    border-color: rgba(245, 240, 232, 0.4);
    transform: translateY(-3px);
}
.magazin-pricing-card-featured {
    background: rgba(224, 122, 95, 0.12);
    border-color: var(--coral, #E07A5F);
}
.magazin-pricing-card-featured:hover {
    background: rgba(224, 122, 95, 0.2);
    border-color: var(--coral, #E07A5F);
}
.magazin-pricing-badge {
    position: absolute;
    top: -11px;
    left: 1.75rem;
    background: var(--coral, #E07A5F);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
}
.magazin-pricing-card-eyebrow {
    font-family: var(--font-con);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.65);
    margin-bottom: 0.5rem;
}
.magazin-pricing-card-price {
    font-family: var(--font-con);
    font-size: 28px;
    color: #F5F0E8;
    margin-bottom: 0.75rem;
    line-height: 1;
}
.magazin-pricing-card-price strong {
    font-weight: 800;
    font-size: 48px;
    letter-spacing: -1px;
}
.magazin-pricing-card-price span {
    font-weight: 400;
    font-size: 15px;
    color: rgba(245, 240, 232, 0.65);
    letter-spacing: 0;
}
.magazin-pricing-card-note {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.78);
    margin: 0 0 1.25rem;
}
.magazin-pricing-card-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.9);
}
.magazin-pricing-card-benefits li {
    padding: 0.3rem 0 0.3rem 1.25rem;
    position: relative;
}
.magazin-pricing-card-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--coral, #E07A5F);
    font-weight: 700;
}
.magazin-pricing-card-cta {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--coral, #E07A5F);
    padding-top: 1rem;
    border-top: 1px solid rgba(245, 240, 232, 0.15);
}
.magazin-pricing-card-featured .magazin-pricing-card-cta {
    color: #F5F0E8;
}
.magazin-pricing-warning {
    background: rgba(242, 193, 78, 0.15);
    border: 1px solid var(--gold, #F2C14E);
    padding: 1rem;
    margin: 1.5rem auto;
    max-width: 580px;
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--gold, #F2C14E);
}
.magazin-pricing-warning a {
    color: var(--gold, #F2C14E);
    text-decoration: underline;
}
.magazin-pricing-login {
    margin-top: 2rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.6);
}
.magazin-pricing-login a {
    color: var(--coral, #E07A5F);
    text-decoration: underline;
}

/* FAQ */
.magazin-faq {
    background: var(--cream, #F5F0E8);
    padding: 4rem 1.5rem;
}
.magazin-faq-inner {
    max-width: 760px;
    margin: 0 auto;
}
.magazin-faq-list {
    margin-top: 1.5rem;
}
.magazin-faq-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.magazin-faq-q {
    font-family: var(--font-con);
    font-weight: 700;
    font-size: 17px;
    color: var(--dark, #1a1814);
    margin-bottom: 0.5rem;
}
.magazin-faq-a {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: #4a4844;
}

/* FINAL CTA */
.magazin-final-cta {
    background: var(--dark, #1a1814);
    padding: 3.5rem 1.5rem 4.5rem;
    text-align: center;
}
.magazin-final-cta-btn {
    display: inline-block;
    background: var(--coral, #E07A5F);
    color: #F5F0E8;
    font-family: var(--font-con);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    padding: 1.25rem 2.5rem;
    text-decoration: none;
    border: 2px solid var(--coral, #E07A5F);
    transition: all 0.2s ease;
}
.magazin-final-cta-btn:hover {
    background: transparent;
    color: var(--coral, #E07A5F);
}

/* RESPONSIVE */
@media (max-width: 720px) {
    .magazin-hero { min-height: 60vh; }
    .magazin-hero-content { padding: 3rem 1.25rem; }
    .magazin-features-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .magazin-pricing-cards { grid-template-columns: 1fr; }
    .magazin-article-card { flex: 0 0 82%; }
    .magazin-articles { padding: 3rem 0; }
    .magazin-pricing { padding: 3.5rem 1.25rem; }
}