/*
Theme Name:  MKK Democratize Consumption
Theme URI:   https://www.konsummuseum.de
Description: Child theme for Twenty Twenty — Museum der Konsumkultur, "Democratize Consumption" exhibition 2026. Implements the full MKK design system with Inter, Playfair Display, and Source Serif 4.
Author:      Museum der Konsumkultur
Version:     1.7.3
Template:    twentytwenty
Text Domain: mkk-child
*/

/* =============================================================================
   1. CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ============================================================================= */

:root {

    /* --- Color System: Honey — Partizipation, Mitmachen, CTA --- */
    --honey-600: #A87720;
    --honey-500: #C8912A;
    --honey-300: #E0B35E;
    --honey-100: #F2D9A0;
    --honey-wash: #FDF5E6;

    /* --- Color System: Coral — Reflexion (laut, extrovertiert) --- */
    --coral-600: #CF5840;
    --coral-500: #E06B52;
    --coral-300: #EE9C8A;
    --coral-100: #F7C9BF;
    --coral-wash: #FDF0EC;

    /* --- Color System: Berry/Red — Reflexion (ruhig, analytisch) --- */
    --red-600: #8C2F3A;
    --red-500: #A33B47;
    --red-300: #C47079;
    --red-100: #E2AEB4;
    --red-wash: #F7EAEC;

    /* --- Color System: Mint — Digital, aktivierend (Newsletter, Online) --- */
    --mint-600: #2A917A;
    --mint-500: #3AAA90;
    --mint-300: #74C9B5;
    --mint-100: #B4E2D7;
    --mint-wash: #EAF7F3;

    /* --- Color System: Slate — Information, Geschichte (beruhigend, erdend) --- */
    --slate-600: #4A6178;
    --slate-500: #5E7A94;
    --slate-400: #7094AD;
    --slate-300: #8DA5B8;
    --slate-100: #BDCDD8;
    --slate-wash: #EDF2F5;

    /* --- Neutrals --- */
    --white:        #FFFFFF;
    --beige:        #F5EDE3;
    --beige-dark:   #EBE1D3;
    --text-primary: #2D2621;  /* Headlines, hero, labels */
    --text-body:    #2F2924;  /* Fließtext (Serif) */
    --text-light:   #756C63;  /* Captions, footer, WDC-badge — WCAG AA 4.5:1 */
    --border:       #E5DDD2;

    /* --- Typography Stacks --- */
    --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif-display:'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-serif-body:   'Source Serif 4', Georgia, 'Times New Roman', serif;

    /* --- Spacing --- */
    --space-s: 8px;
    --space-m: 20px;
    --space-l: 28px;

    /* --- Layout --- */
    --content-width: 720px;
}

/* Large desktop: widen content column */
@media (min-width: 1200px) {
    :root {
        --content-width: 780px;
    }
}


/* =============================================================================
   2. BASE RESETS & TYPOGRAPHY — override Twenty Twenty defaults
   ============================================================================= */

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Content width — NOT constrained here. Each section uses .content-width
   internally. Full-width sections (.cta-block, .newsletter etc.) break out
   to 100vw via the rule in section 16. */

/* --- Headings (Inter, weight 800 by default) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* h1 = 48px, h5 = 16px — matches hero and CTA use (TT base: 1rem = 10px) */
h1 { font-size: 4.8rem; }   /* 48px */
h2 { font-size: 2.4rem; }   /* 24px — Abschnitts-Überschrift */
h3 { font-size: 1.8rem; }   /* 18px — Kachel-Titel / "Konsumbeichte"-Stil */
h4 { font-size: 1.6rem; }   /* 16px */
h5 { font-size: 1.6rem; }   /* 16px — CTA / Info-Zeile, Inter 800 */
h6 {
    font-size: 1.15rem;      /* 11.5px — Section-Label-Stil */
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    h1 { font-size: 3.2rem; }
    h2 { font-size: 1.8rem; }
}

@media (min-width: 1200px) {
    h1 { font-size: 4.8rem; }   /* keep 48px — no upscale on wide screens */
}

/* Remove Twenty Twenty's large heading margins inside our custom sections */
.hero .hero-text,
.tile__name {
    margin-top: 0;
    margin-bottom: 0;
}
/* Remove Twenty Twenty's entry-content heading margins */
.entry-content .hero-text,
.entry-content .tile__name {
    margin: 0;
}

/* Base: paragraphs use Source Serif 4 — Fließtext, Blogposts, Dokumentation */
p,
.entry-content p,
.entry-content li {
    font-family: var(--font-serif-body);
    font-size: 16px;
    color: var(--text-body);
    line-height: 1.65;
}

/* Headings always Inter — H1–H6 in every context */
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: var(--font-sans);
}

/* Force Inter on UI components (non-reading text that happens to use <p> or other tags) */
.hero-sub,
.section-break__label,
.cta-info,
.cta-info p,
.cta-info strong,
.cta-date,
.badge,
.wdc-badge,
.btn,
.btn--primary,
.btn--newsletter,
.tile__name,
.footer__line,
.footer__links,
.footer__links a {
    font-family: var(--font-sans) !important;
}

/* --- Links --- */
a {
    color: var(--honey-600);
    text-decoration: none;
}

a:hover {
    color: var(--honey-500);
    text-decoration: underline;
}

/* Hover-Unterstreichung für Links im Seiteninhalt explizit sichern */
.entry-content a:hover,
.wpforms-field-checkbox .wpforms-field-label-inline a:hover {
    text-decoration: underline;
}

/* Links mit farbig hervorgehobenem Text (has-inline-color mark):
   Unterstreichen am <mark> statt am <a>, damit die Strichfarbe der Textfarbe entspricht
   und nicht Honey (die Standard-Link-Hover-Farbe) erscheint. */
a:hover:has(.has-inline-color) {
    text-decoration: none;
}
a:hover .has-inline-color {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--coral-500);
    outline-offset: 3px;
}

/* Override Twenty Twenty's magenta nav color with brand dark */
body:not(.overlay-header) .primary-menu > li > a,
body:not(.overlay-header) .primary-menu > li > .icon,
.primary-menu > li > a,
.header-inner .toggle {
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Hide the search toggle button — replaced by WDC badge in header */
.search-toggle,
.modal-menu .search-toggle {
    display: none !important;
}

/* Style the WDC badge nav item when added via custom menu */
.primary-menu .wdc-nav-badge a,
.primary-menu li.wdc-badge-item a {
    font-size: 9px !important;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light) !important;
    border: 1px solid var(--text-light);
    padding: 3px 8px;
    line-height: 1;
}

/* Hide Twenty Twenty widget areas in footer (Suchen, Archiv, etc.) */
.footer-widgets-outer-wrapper,
.footer-top .widget-area,
.footer-top-inner,
#site-footer .footer-top {
    display: none !important;
}

/* Footer credits: Inter font, correct colors */
.footer-credits,
.footer-bottom-credits,
#site-footer .powered-by-wordpress,
#site-footer .privacy-policy,
.to-the-top {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    color: var(--text-light) !important;
}

/* Footer bottom layout */
.footer-bottom {
    border-top: 1.5px solid var(--text-primary);
    padding: 20px 0;
}

.footer-bottom-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Twenty Twenty header/nav overrides --- */
.header-inner {
    max-width: var(--content-width);
    padding-left: 20px;
    padding-right: 20px;
}

.site-title,
.site-title a {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    text-decoration: none;
}

/* --- Footer --- */
.footer-top,
.footer-bottom {
    border-top: 1.5px solid var(--text-primary);
}

.footer-credits,
.footer-nav,
.footer-menu a {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text-light);
}

.footer-menu a:hover {
    color: var(--text-primary);
    text-decoration: none;
}


/* =============================================================================
   3. COMPONENT: .badge
   Sharp corners, white text on color, all-caps Inter 800
   ============================================================================= */

.badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 0;           /* Design rule 5: 0px radius everywhere */
    color: #ffffff;
    line-height: 1.2;
}

/* Color variants — set background inline or via modifier */
.badge--honey  { background-color: var(--honey-500); }
.badge--coral  { background-color: var(--coral-500); }
.badge--red    { background-color: var(--red-500); }
.badge--mint   { background-color: var(--mint-500); }
.badge--slate  { background-color: var(--slate-600); }

/* WDC meta badge (outlined, no fill) */
.wdc-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
    border: 1px solid var(--text-light);
    padding: 3px 8px;
    border-radius: 0;
}


/* =============================================================================
   4. COMPONENT: .section-break  ←  UNIFIED DEFINITION
   Full-width horizontal rule with inline label.
   Design rule 9: 1.5px solid #2D2621, full-width (edge-to-edge)
   Design rule 3: Section labels on white backgrounds only

   ACHTUNG: Diese Werte gelten für BEIDE Kontexte:
     • Landing Page   → .section-break + .section-break__label
     • WPForms-Felder → .wpforms-field-divider  (Section 18)
   Wenn du hier etwas änderst, wird es automatisch auch im Formular wirksam,
   weil Section 18 dieselben CSS-Custom-Properties referenziert.
   ============================================================================= */

/* Shared tokens — von Section 18 referenziert */
:root {
    --section-break-border:       1.5px solid var(--text-primary);
    --section-break-label-size:   11px;
    --section-break-label-weight: 800;
    --section-break-spacing:      0.06em;
}

.section-break {
    border-bottom: var(--section-break-border);
    margin-bottom: 24px;
    width: 100%;
}

.section-break__label {
    display: block;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px 10px;
    font-family: var(--font-sans);
    font-size: var(--section-break-label-size);
    font-weight: var(--section-break-label-weight);
    letter-spacing: var(--section-break-spacing);
    text-transform: uppercase;
    color: var(--text-primary);
}


/* =============================================================================
   5. COMPONENT: .tile  (Stations-Kacheln)
   Border: 2px solid #2D2621 — colored header, white body
   Design rule 5: border-radius 0px
   Design rule 9: tile border 2px solid #2D2621
   ============================================================================= */

.tile {
    border: 2px solid var(--text-primary);
    border-radius: 0;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 24px;
    background-color: var(--white);
}

.tile__head {
    padding: 16px 18px;
    /* background-color set inline or via modifier */
}

.tile__name {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.tile__body {
    padding: 16px 18px;
    background-color: var(--white);
    font-family: var(--font-serif-body);
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.65;
}

.tile__desc {
    font-family: var(--font-serif-body);
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.65;
    margin: 0;
}

/* Head color variants */
.tile__head--honey  { background-color: var(--honey-500); }
.tile__head--coral  { background-color: var(--coral-500); }
.tile__head--red    { background-color: var(--red-500); }
.tile__head--mint   { background-color: var(--mint-500); }
.tile__head--slate  { background-color: var(--slate-600); }
.tile__head--slate-mid { background-color: var(--slate-400); }

/* Masonry 2-column layout container */
.tiles-masonry {
    column-count: 2;
    column-gap: 24px;
}

@media (max-width: 768px) {
    .tiles-masonry {
        column-count: 1;
    }
}

/* Small mobile tile padding */
@media (max-width: 380px) {
    .tile__head,
    .tile__body {
        padding: 12px 14px;
    }

    .tile__name {
        font-size: 16px;
    }
}


/* =============================================================================
   6. COMPONENT: .cta-block
   Honey-100 background, centered, 3-tier spacing
   Design rule 2: color blocks = centered
   ============================================================================= */

.cta-block {
    background-color: var(--honey-100);
    padding: 40px 0 48px;
    text-align: center;
    width: 100%;
}

.cta-block .content-width,
.cta-block > .wp-block-group__inner-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Tier 1: Badge + date row */
.cta-header {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-m);
    flex-wrap: wrap;
    justify-content: center;
}

.cta-date {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

/* Tier 2: info lines */
.cta-info {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

.cta-info p {
    margin-bottom: var(--space-s);
}

.cta-info p:last-child {
    margin-bottom: 0;
}

.cta-info strong {
    font-weight: 800;
}

/* Tier 3: button area */
.cta-button-area {
    margin-top: var(--space-m);
}

/* Closer — italic serif below button */
.cta-closer {
    margin-top: var(--space-l);
    font-family: var(--font-serif-body);
    font-size: 14px;
    font-style: italic;
    color: var(--text-body);
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 768px) {
    .cta-block {
        padding: 24px 0 32px;
    }

    .cta-info {
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    .cta-block {
        padding: 48px 0 56px;
    }
}

/* Stack badge+date vertically on very small screens */
@media (max-width: 380px) {
    .cta-header {
        flex-direction: column;
        gap: 6px;
    }
}


/* =============================================================================
   7. COMPONENT: .newsletter
   Mint-wash background, centered
   ============================================================================= */

.newsletter {
    background-color: var(--mint-wash);
    padding: 40px 0 48px;
    text-align: center;
    width: 100%;
}

.newsletter .content-width,
.newsletter > .wp-block-group__inner-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.newsletter__text {
    font-family: var(--font-serif-body);
    font-size: 17px;
    color: var(--text-body);
    margin-bottom: 18px;
    line-height: 1.55;
}

/* Highlight word in newsletter text */
.newsletter__text em {
    font-style: normal;
    color: var(--mint-600);
    font-weight: 600;
}

@media (max-width: 768px) {
    .newsletter {
        padding: 24px 0 32px;
    }

    .newsletter__text {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    .newsletter {
        padding: 48px 0 56px;
    }
}


/* =============================================================================
   8. COMPONENTS: Buttons
   Design rule 5: border-radius 0px everywhere — no exceptions
   ============================================================================= */

/* Base button */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wc-block-components-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: 0;               /* Hard rule: 0px, no rounding */
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    border: none;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;           /* reset Twenty Twenty's uppercase on buttons */
    -webkit-appearance: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* Primary — Honey, used in CTA block */
.btn--primary,
.wp-block-button.is-style-primary .wp-block-button__link {
    background-color: var(--honey-500);
    color: #ffffff;
}

.btn--primary:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
    background-color: var(--honey-600);
    color: #ffffff;
    text-decoration: none;
}

/* Newsletter — Mint */
.btn--newsletter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--mint-500);
    color: #ffffff;
    padding: 13px 28px;
    border: none;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color 0.15s ease;
}

.btn--newsletter:hover {
    background-color: var(--mint-600);
    color: #ffffff;
    text-decoration: none;
}

/* Mobile: full-width primary button */
@media (max-width: 768px) {
    .btn,
    .btn--primary {
        width: 100%;
        max-width: 400px;
        padding: 14px 20px;
    }
}

/* Twenty Twenty native button reset — width, text-transform, border-radius */
.wp-block-button__link,
.wp-element-button {
    border-radius: 0 !important;
    width: auto !important;
    max-width: 100%;
    text-transform: none !important;
}

/* Override Twenty Twenty's button font-size (1.5rem = 15px in TT vs our 14px) */
button:not(.toggle):not(.close-nav-toggle):not(.search-toggle),
.btn,
.wp-block-button__link {
    font-size: 14px !important;
}


/* =============================================================================
   9. COMPONENT: Inline links & hints
   Design rule 6: links = context font, -600 color, weight 800, arrow, no underline
   Design rule 7: hints = context font, -600 color, weight 600, no arrow, no underline
   ============================================================================= */

/* Inline link — navigates somewhere, has arrow (→) prefix in content */
.inline-link {
    font-weight: 800;
    text-decoration: none;
}

.inline-link:hover {
    text-decoration: underline;
}

.inline-link--honey       { color: var(--honey-600); }
.inline-link--honey:hover { color: var(--honey-500); }
.inline-link--coral       { color: var(--coral-600); }
.inline-link--coral:hover { color: var(--coral-500); }
.inline-link--red         { color: var(--red-600); }
.inline-link--red:hover   { color: var(--red-500); }
.inline-link--mint        { color: var(--mint-600); }
.inline-link--mint:hover  { color: var(--mint-500); }
.inline-link--slate       { color: var(--slate-600); }
.inline-link--slate:hover { color: var(--slate-500); }

/* Inline hint — static label, not a link */
.inline-hint {
    font-weight: 600;
    text-decoration: none;
    cursor: default;
}

.inline-hint--honey { color: var(--honey-600); }
.inline-hint--coral { color: var(--coral-600); }
.inline-hint--red   { color: var(--red-600); }
.inline-hint--mint  { color: var(--mint-600); }
.inline-hint--slate { color: var(--slate-600); }


/* =============================================================================
   10. HERO SECTION
   ============================================================================= */

.hero {
    padding: 40px 0 48px;
}

/* Inter/Playfair alternating rhythm */
.hero-text {
    font-size: 4.48rem;
    line-height: 1.18;
    color: var(--text-primary);
}

.hero-text .sans {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.hero-text .serif {
    font-family: var(--font-serif-display);
    font-weight: 400;
}

/* Subheading below hero */
.hero-sub {
    margin-top: 32px;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    .hero {
        padding: 24px 0 30px;
    }

    .hero-text {
        font-size: 3.2rem;
        line-height: 1.22;
    }

    .hero-sub {
        margin-top: 28px;
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .hero-text {
        font-size: 2.72rem;
    }

    .hero-sub {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    .hero-text {
        font-size: 5.12rem;
    }

    .hero-sub {
        font-size: 18px;
    }
}


/* =============================================================================
   11. STATIONS SECTION
   ============================================================================= */

.stations {
    padding: 48px 0 56px;
}

@media (max-width: 768px) {
    .stations {
        padding: 28px 0 36px;
    }
}

@media (min-width: 1200px) {
    .stations {
        padding: 56px 0 64px;
    }
}


/* =============================================================================
   12. CONTENT WIDTH UTILITY
   ============================================================================= */

.content-width {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* =============================================================================
   13. SITE HEADER
   ============================================================================= */

.site-header {
    padding: 18px 20px;
}

.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0;
}

.site-name,
.site-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

@media (max-width: 380px) {
    .site-header {
        padding: 14px 16px;
    }

    .site-name,
    .site-title {
        font-size: 12px;
        gap: 3px;
    }
}


/* =============================================================================
   14. SITE FOOTER
   ============================================================================= */

.site-footer {
    border-top: 1.5px solid var(--text-primary);
    padding: 20px 0;
}

.footer-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer__line {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text-light);
}

.footer__links {
    font-size: 12px;
}

.footer__links a {
    font-family: var(--font-sans);
    color: var(--text-light);
    text-decoration: none;
    margin-left: 16px;
}

.footer__links a:hover {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .footer__links a {
        margin-left: 0;
        margin-right: 16px;
    }
}


/* =============================================================================
   15. ACCESSIBILITY
   ============================================================================= */

/* =============================================================================
   16. LANDING PAGE — full-width sections & Twenty Twenty overrides
   ============================================================================= */

/* Twenty Twenty sets overflow:hidden on #site-content — must remove it
   so that our full-width sections can extend to the viewport edge */
.template-full-width #site-content {
    overflow: visible !important;
}

/* Twenty Twenty constrains all entry-content children to ~58rem on
   the full-width template (unless they have .alignfull / .alignwide).
   We override this for our custom landing-page sections. */
body.template-full-width .entry-content > .hero,
body.template-full-width .entry-content > .page-hero,
body.template-full-width .entry-content > .cta-block,
body.template-full-width .entry-content > .stations,
body.template-full-width .entry-content > .newsletter {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box;
}

/* Remove Twenty Twenty's default padding on entry-content for full-width template */
.template-full-width .entry-content,
.template-full-width .post-inner {
    max-width: none;
    padding-top: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* Hide the WordPress page title & footer meta on the landing page */
.template-full-width .entry-header,
.template-full-width .entry-footer {
    display: none;
}

/* Remove vertical gap between sections */
.template-full-width .entry-content > * + * {
    margin-top: 0;
}



/* =============================================================================
   17. BLOCK EDITOR FORMAT MAPPING — WordPress Gutenberg Styles
   =============================================================================

   WP Format         → MKK Style         → Use case
   ─────────────────────────────────────────────────────────────────────────────
   H1                → Hero-Überschrift  → 4.48rem Inter 800
   H2                → Abschnitt         → 24px Inter 800
   H3                → Kachel-Titel      → 18px Inter 800 ("Konsumbeichte"-Stil)
   H4                → Unter-Überschrift → 16px Inter 800
   H4 "Subhead"      → Subhero           → use P "Subhead" style instead (18px Inter 800)
   H5                → Klein-Titel       → 14px Inter 800
   H6                → Section-Label     → 11.5px Inter 800 UPPERCASE (wie "Was dich erwartet")
   P (standard)      → Fließtext         → 16px Inter 400
   P "Subhead"       → Subhero           → 18px Inter 800 (wie hero-sub)
   P "Caption"       → Bildunterschrift  → 12px Source Serif 4 light
   P "Info"          → CTA-Infotext      → 15px Inter 400 (Wo/Wann/Eröffnung-Stil)
   ──────────────────────────────────────────────────────────────────────────── */

/* Paragraph block style: Subhead (= hero-sub / Subhero style) */
.wp-block-paragraph.is-style-subhead {
    font-family: var(--font-sans) !important;
    font-size: 18px !important;
    font-weight: 800;
    line-height: 1.5;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-style: normal;
}

/* Paragraph block style: Caption */
.wp-block-paragraph.is-style-caption {
    font-family: var(--font-serif-body) !important;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.55;
}

/* Paragraph block style: Info Text (= CTA info style, Inter regular) */
.wp-block-paragraph.is-style-info {
    font-family: var(--font-sans) !important;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Heading overrides: ensure H3 looks like Konsumbeichte tile names */
.entry-content h3:not(.tile__name) {
    font-family: var(--font-sans);
    font-size: 1.8rem; /* 18px */
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-primary);
}

/* H6 as section label */
.entry-content h6 {
    font-family: var(--font-sans);
    font-size: 1.15rem; /* ~11.5px */
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1.4;
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =============================================================================
   18. FORMULAR-SEITE — /deine-einkaufsgeschichte/ + WPForms Styling
   Ziel: identisch mit formular-final.html
   ============================================================================= */

/* --- Seiten-Layout: Titel verstecken, overflow + TT-max-width aufheben --- */
.page-id-99 .entry-header,
.page-id-99 .page-header {
    display: none !important;
}

/* TT clippt overflow und begrenzt Inhalte auf 58rem — beides aufheben */
.page-id-99 #site-content {
    overflow: visible !important;
}

.page-id-99 .entry-content,
.page-id-99 .entry-content > * {
    max-width: none !important;
}

/* --- Page Hero (Honey-100, volle Breite, Text zentriert) --- */
.page-hero {
    background-color: var(--honey-100);
    padding: 36px 0 40px;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}

.page-hero .form-content {
    max-width: 580px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-hero h1 {
    font-family: var(--font-sans);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.page-hero .lead {
    font-family: var(--font-serif-body);
    font-size: 16px;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0;
}

.page-hero .lead-cta {
    margin-top: 14px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .page-hero { padding: 24px 0 28px; }
    .page-hero h1 { font-size: 26px; }
}

/* --- WPForms Container: max-width 580px zentriert, overflow visible für Divider-Linie --- */
.page-id-99 .wpforms-container,
.page-id-99 .wpforms-container-full {
    max-width: 580px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    overflow: visible !important;
}

/* Kein Rahmen/Hintergrund am Form-Container */
.wpforms-container .wpforms-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* --- Feld-Abstände --- */
.wpforms-field {
    margin-bottom: 24px !important;
    padding: 0 !important;
}

/* --- Labels --- */
.wpforms-field-label {
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}

.wpforms-required-label {
    color: var(--coral-500) !important;
    margin-left: 2px !important;
}

/* Sublabel "(optional)" */
.wpforms-field-sublabel,
.wpforms-field-label .wpforms-optional-label {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-light) !important;
    margin-left: 4px !important;
}

/* Field descriptions (above input) */
.wpforms-field-description {
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
}

/* --- Eingabefelder (Text, E-Mail, Tel, Zahl) --- */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field input[type="url"],
.wpforms-field select {
    width: 100% !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--text-primary) !important;
    background: var(--white) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    -webkit-appearance: none !important;
}

.wpforms-field input[type="text"]::placeholder,
.wpforms-field input[type="email"]::placeholder,
.wpforms-field input[type="tel"]::placeholder,
.wpforms-field input[type="number"]::placeholder {
    font-family: var(--font-serif-body) !important;
    font-style: italic !important;
    color: var(--text-light) !important;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
    border-color: var(--honey-500) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(200, 145, 42, 0.12) !important;
}

/* --- Textareas --- */
.wpforms-field textarea {
    width: 100% !important;
    font-family: var(--font-serif-body) !important;
    font-size: 15px !important;
    color: var(--text-body) !important;
    background: var(--white) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    line-height: 1.65 !important;
    resize: vertical !important;
    min-height: 160px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.wpforms-field textarea::placeholder {
    font-family: var(--font-serif-body) !important;
    font-style: italic !important;
    color: var(--text-light) !important;
}

/* Kurzes Textarea (Wie kaufst du heute ein?) */
#wpforms-84-field_12-container textarea {
    min-height: 110px !important;
}

/* Zeichenzähler ("0 von maximal 5000 Zeichen.") — Inter, dezentes Grau */
.wpforms-field .wpforms-limit-title,
.wpforms-field .wpforms-limit-count,
.wpforms-field .wpforms-field-limit-text,
.wpforms-field-limit-text,
.wpforms-field .wpforms-field-limit-text * {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--text-light) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* --- WPForms Divider → UNIFIED Section-Break-Stil (referenziert Section-4-Tokens) ---
   Gleiche Optik wie .section-break auf der Landing Page.
   Änderungen an --section-break-* in :root wirken überall gleichzeitig.
   ─────────────────────────────────────────────────────────────────────────────
   Technik: ::before = Label-Text; ::after = volle Linie (100vw, position:absolute).
   WPForms rendert eigene Labels auch wenn label_disable:1 gesetzt ist (wpforms-label-hide).
   Diese werden versteckt; stattdessen injizieren wir den korrekten Text via ::before.
   ─────────────────────────────────────────────────────────────────────────────── */

.wpforms-field-divider {
    position: relative !important;
    border: none !important;
    padding: 0 0 1px 0 !important;   /* 1px Platz für ::after-Linie am bottom */
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
}

/* WPForms Divider: hr verstecken */
.wpforms-field-divider hr {
    display: none !important;
}

/* WPForms Divider Label — zeigen + Section-Break-Stil (referenziert Section-4-Tokens)
   WPForms versteckt via .wpforms-label-hide; wir überschreiben das hier.
   Der Feld-Titel im WPForms-Editor wird direkt als Section-Label ausgegeben.
   → Um den Text zu ändern: WPForms → Formular bearbeiten → Divider-Feld → Titel ändern */
.wpforms-field-divider .wpforms-field-label,
.wpforms-field-divider label,
.wpforms-field-divider .wpforms-label-hide {
    display: block !important;
    font-family: var(--font-sans) !important;
    font-size: var(--section-break-label-size) !important;
    font-weight: var(--section-break-label-weight) !important;
    letter-spacing: var(--section-break-spacing) !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

/* Volle Linie (100vw) via ::after — bricht aus dem 580px-Container aus */
.wpforms-field-divider::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1.5px;
    background-color: var(--text-primary);
}

/* Divider-Beschreibung (field 16: "Wenn deine Geschichte ausgestellt wird...") */
.wpforms-field-divider .wpforms-field-description {
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    line-height: 1.6 !important;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
}

/* --- HTML-Felder: Zitat-Beispiele (blockquote → form-example) --- */
.wpforms-field-html blockquote {
    background: var(--honey-wash) !important;
    padding: 14px 16px !important;
    margin: 0 0 6px 0 !important;
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    line-height: 1.6 !important;
    font-style: normal !important;
    border-left: 3px solid var(--honey-300) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}

.wpforms-field-html blockquote:last-of-type {
    margin-bottom: 10px !important;
}

/* --- HTML-Felder: Spezifische Felder per Container-ID --- */

/* Foto-Disclaimer (field 18: "Mit dem Upload bestätigst du...") */
#wpforms-84-field_18-container {
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    line-height: 1.55 !important;
    margin-top: 6px !important;
}

/* Spende-Hinweis (field 19: "Du hast gedruckte Fotos...") */
#wpforms-84-field_19-container {
    background: var(--honey-wash) !important;
    padding: 14px 16px !important;
    margin-top: 8px !important;
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    line-height: 1.6 !important;
}

/* Kontakt-Hinweis (field 29: "Nur für Rückfragen") */
#wpforms-84-field_29-container {
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    line-height: 1.55 !important;
    margin-top: -8px !important;
    margin-bottom: 16px !important;
}

/* --- File Upload (modern dropzone) --- */
.wpforms-field-file-upload .wpforms-uploader,
.wpforms-uploader-container,
.wpforms-field-file-upload .dz-default {
    border: 1.5px dashed var(--honey-300) !important;
    border-radius: 0 !important;
    background: var(--honey-wash) !important;
    padding: 28px !important;
    text-align: center !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
    cursor: pointer !important;
}

.wpforms-field-file-upload .wpforms-uploader:hover,
.wpforms-uploader-container:hover {
    border-color: var(--honey-500) !important;
    background: var(--honey-100) !important;
}

.wpforms-uploader-icon svg,
.wpforms-field-file-upload .wpforms-uploader svg {
    color: var(--honey-500) !important;
    stroke: var(--honey-500) !important;
}

.wpforms-field-file-upload .wpforms-uploader-text {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text-body) !important;
}

.wpforms-field-file-upload .wpforms-uploader-hint {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    color: var(--text-light) !important;
    margin-top: 4px !important;
}

/* --- Checkboxen --- */
.wpforms-field-checkbox ul,
.wpforms-field-checkbox ol {
    padding: 0 !important;
    list-style: none !important;
}

.wpforms-field-checkbox ul li,
.wpforms-field-checkbox ol li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    list-style: none !important;
}

.wpforms-field-checkbox ul li:last-child,
.wpforms-field-checkbox ol li:last-child {
    margin-bottom: 0 !important;
}

.wpforms-field-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    accent-color: var(--honey-500) !important;
    cursor: pointer !important;
    border-radius: 0 !important;
}

.wpforms-field-checkbox .wpforms-field-label-inline {
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    line-height: 1.55 !important;
    cursor: pointer !important;
}

/* --- Absende-Button --- */
.wpforms-submit-container {
    margin-top: 36px !important;
}

.wpforms-submit,
.wpforms-form .wpforms-submit,
button.wpforms-submit {
    display: block !important;
    width: 100% !important;
    padding: 14px 40px !important;
    background: var(--honey-500) !important;
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    transition: background-color 0.15s ease !important;
    -webkit-appearance: none !important;
}

.wpforms-submit:hover,
.wpforms-form .wpforms-submit:hover {
    background: var(--honey-600) !important;
}

/* --- Fehler-Meldungen --- */
.wpforms-error,
.wpforms-field .wpforms-error {
    color: var(--coral-500) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    margin-top: 4px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* --- Layout-Felder (2-spaltig: Vorname+Ort | Alter; E-Mail | Telefon) --- */
.wpforms-field-layout .wpforms-layout-column {
    gap: 16px !important;
}

.wpforms-field-layout .wpforms-layout-column + .wpforms-layout-column {
    padding-left: 16px !important;
}

/* --- Responsiv --- */
@media (max-width: 768px) {
    .wpforms-field-layout .wpforms-layout-column {
        width: 100% !important;
        padding-left: 0 !important;
    }
}

/* --- Abstand unter dem Formular vor Footer --- */
.page-id-99 .entry-content {
    padding-bottom: 56px !important;
}

/* --- WPForms Bestätigungs-/Erfolgsmeldung nach Absenden --- */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
    background: var(--mint-wash) !important;
    border: none !important;
    border-left: 3px solid var(--mint-500) !important;
    padding: 20px 24px !important;
    font-family: var(--font-serif-body) !important;
    font-size: 16px !important;
    color: var(--text-body) !important;
    line-height: 1.65 !important;
    border-radius: 0 !important;
    margin-top: 24px !important;
}

.wpforms-confirmation-container p,
.wpforms-confirmation-container-full p {
    font-family: var(--font-serif-body) !important;
    color: var(--text-body) !important;
}

/* --- Telefon-Feld: intl-tel-input Flag-Picker zurücksetzen --- */
.wpforms-field-phone .iti__flag-container {
    border-right: 1.5px solid var(--border) !important;
}

.wpforms-field-phone input[type="tel"] {
    padding-left: 52px !important;
}

/* --- Submit-Button: deaktivierter Zustand beim Senden --- */
.wpforms-submit[disabled],
.wpforms-submit.wpforms-btn-submit-disabled {
    background: var(--honey-300) !important;
    cursor: wait !important;
    opacity: 0.8 !important;
}

/* --- WPForms: Basis-Font-Reset — verhindert Serif-Vererbung aus Base-Regeln --- */
.wpforms-form,
.wpforms-field-label,
.wpforms-field-sublabel,
.wpforms-required-label,
.wpforms-error,
.wpforms-field-limit-text,
.wpforms-submit-container {
    font-family: var(--font-sans) !important;
}

:focus-visible {
    outline: 2px solid var(--coral-500);
    outline-offset: 3px;
}


/* =============================================================================
   20. COMPONENT: SITE HEADER (v3)
   Fixed top bar — 60 px — site name left, WDC logo + hamburger right.
   Nav overlay drops down (auto-height). Backdrop closes it.
   ============================================================================= */

:root {
    --header-height: 60px;
}

/* --- Reset Twenty Twenty body/page top spacing (causes white stripe above header) --- */
body,
#page.site,
.site {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* --- Offset body content below fixed header --- */
#site-content,
.site-content {
    padding-top: var(--header-height);
}

/* --- WordPress admin bar: shift header down --- */
.admin-bar #site-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar #site-header {
        top: 46px;
    }
}

/* --- Hide residual Twenty Twenty header elements (safety net) --- */
#site-header .header-inner,
#site-header .site-branding,
#site-header .primary-menu-wrapper,
#site-header .toggle-wrapper,
.modal-menu,
.menu-modal,
.menu-modal-inner {
    display: none !important;
}

/* --- Site Header Shell ---
     Use #site-header (ID) so we beat TT's own #site-header { position: relative }
     which has higher specificity than a class selector.                          --- */
#site-header.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    height: var(--header-height);
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

#site-header.site-header.is-scrolled {
    box-shadow: 0 1px 0 var(--border), 0 2px 10px rgba(45, 38, 33, 0.07);
}

.site-header__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* --- Site Name (left) --- */
.site-name {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    flex-shrink: 1;
    min-width: 0;
}

.site-name:hover {
    text-decoration: none !important;
}

.site-name__text {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bag icon — after text, inherits color via currentColor */
.site-name__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-primary);
    transform: rotate(10deg) translateY(-1px);
    transform-origin: center bottom;
}

@media (max-width: 380px) {
    .site-name__text {
        white-space: normal;
        font-size: 13px;
        line-height: 1.2;
    }
    .site-name__icon {
        align-self: flex-start;
        margin-top: 2px;
    }
}

/* --- Right side (WDC logo + hamburger) --- */
.site-header__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* WDC Partner Logo — hidden on mobile */
.wdc-logo-wrap {
    display: flex;
    align-items: center;
}

.wdc-logo-wrap a {
    display: block;
    text-decoration: none !important;
}

.wdc-logo {
    display: block;
    height: 24px;
    width: auto;
    color: var(--text-primary);
}

@media (max-width: 559px) {
    .wdc-logo-wrap {
        display: none;
    }
}

/* --- Hamburger --- */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 0;
    flex-shrink: 0;
}

.menu-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    transition: transform 0.22s ease, opacity 0.18s ease;
    transform-origin: center;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Nav Overlay — auto-height, Seite bleibt sichtbar darunter --- */
.nav-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    /* no bottom: 0 — height follows content */
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    background: var(--white);
    z-index: 999;
    box-shadow: 0 4px 24px rgba(45, 38, 33, 0.13);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.nav-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* Backdrop — leicht getönt, zeigt Seite dahinter, schließt bei Klick --- */
.nav-backdrop {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(45, 38, 33, 0.18);
}

.nav-backdrop.is-visible {
    display: block;
}

.nav-overlay__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px 32px;
}

/* Admin bar offsets for overlay */
.admin-bar .nav-overlay,
.admin-bar .nav-backdrop {
    top: calc( var(--header-height) + 32px );
}
@media (max-width: 782px) {
    .admin-bar .nav-overlay,
    .admin-bar .nav-backdrop {
        top: calc( var(--header-height) + 46px );
    }
}

/* --- Nav List (wp_nav_menu output) ---
     Prefix .nav-overlay for high specificity over TT's global ul styles.  --- */
.nav-overlay .nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-overlay .nav-list > li.menu-item {
    border-bottom: 1px solid var(--border);
    margin: 0 !important;
    padding: 0 !important;
}

.nav-overlay .nav-list > li.menu-item:first-child {
    border-top: 1px solid var(--border);
}

/* Top-level links */
.nav-overlay .nav-list > li.menu-item > a {
    display: block;
    padding: 20px 0 !important;
    font-family: var(--font-sans) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color 0.15s ease;
}

.nav-overlay .nav-list > li.menu-item > a:hover {
    color: var(--honey-600) !important;
    text-decoration: none !important;
}

/* Active page: neutral underline, no color change */
.nav-overlay .nav-list > li.current-menu-item > a,
.nav-overlay .nav-list > li.current-menu-ancestor > a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--text-primary) !important;
}

/* --- Sub-menu --- */
.nav-overlay .nav-list .sub-menu {
    list-style: none !important;
    margin: -8px 0 10px 0 !important;
    padding: 0 !important;
}

.nav-overlay .nav-list .sub-menu > li.menu-item {
    border: none !important;
}

.nav-overlay .nav-list .sub-menu > li.menu-item > a {
    display: block;
    padding: 4px 0 4px 20px !important;
    font-family: var(--font-sans) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: var(--text-light) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.nav-overlay .nav-list .sub-menu > li.menu-item > a:hover {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}


/* =============================================================================
   21. COMPONENT: HERO-BLOCK (is-style-hero on core/group)
   Vollbreite-Einstiegsblock. Farbe wählt die Redakteurin aus der Palette.
   Margin-top negativ: hebt den padding-top vom #site-content auf, sodass
   der Hero direkt unter dem Header beginnt (kein weißer Spalt).

   BREITE: alignfull im Editor setzen → volle Viewport-Breite.
   Padding richtet Text am gleichen linken Rand wie der Header aus.
   ============================================================================= */

/* --- Entry-Header (Page-Title) unterdrücken wenn Hero-Block vorhanden --- */
.has-hero-intro .entry-header,
.has-hero-intro .page-header {
    display: none !important;
}

/* Entfernt TwentyTwenty's post-inner padding-top, damit kein weißer Streifen
   zwischen Header und Hero-Block entsteht. Das Hero liefert seinen eigenen
   Innenabstand über padding-top.                                              */
.has-hero-intro .post-inner {
    padding-top: 0 !important;
}

/* --- Hero-Block Shell ---
     Volle Viewport-Breite wird IMMER erzwungen — unabhängig davon, ob
     alignfull im Editor gesetzt wurde. So kann die Redakteurin den Block
     nicht versehentlich als schmales Element platzieren.
     margin-left: calc(50% - 50vw) zieht den Block zum linken Viewport-Rand,
     egal wie breit der umgebende Container ist.
     margin-top negativ: hebt den padding-top vom post-inner auf, sodass
     der Hero direkt unter dem Header beginnt (kein weißer Spalt).        */
.wp-block-group.is-style-hero {
    /* Volle Breite — selbst wenn alignfull im Editor fehlt */
    width:        100vw !important;
    max-width:    100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: 0 !important;
    /* Standard: kein negativer Abstand (für Hero-Blöcke weiter unten auf der Seite) */
    margin-top:     0 !important;
    padding-top:    48px !important;
    padding-bottom: 52px !important;
    padding-left:   20px;
    padding-right:  20px;
    box-sizing: border-box;
    text-align: left !important;
}

/* Nur der erste Hero-Block (direkt unter dem Header) bekommt den negativen Abstand,
   damit er nahtlos unter dem sticky Header beginnt.
   Alle weiteren is-style-hero-Blöcke weiter unten auf der Seite bleiben im normalen Flow. */
.has-hero-intro .entry-content > .wp-block-group.is-style-hero:first-child {
    margin-top:  calc( -1 * var(--header-height) ) !important;
    padding-top: calc( var(--header-height) + 48px ) !important;
}

/* Direkte Kinder auf Inhaltsbreite beschränken und zentrieren,
   genau wie das Formular darunter.                               */
.wp-block-group.is-style-hero > *:not(.alignfull):not(.alignwide) {
    max-width: var(--wp--style--global--content-size, 720px);
    margin-left:  auto;
    margin-right: auto;
}

/* --- H1 / H2 im Hero — Inter 800, 32px ---
     px statt rem: TwentyTwenty setzt 62.5 % root (1 rem = 10 px),
     daher würden rem-Werte aus der Preview-HTML (1 rem = 16 px) falsch skalieren. */
.wp-block-group.is-style-hero h1,
.wp-block-group.is-style-hero h2 {
    font-family: var(--font-sans) !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.025em;
    line-height: 1.18;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

@media (max-width: 768px) {
    .wp-block-group.is-style-hero h1,
    .wp-block-group.is-style-hero h2 {
        font-size: 32px !important;
    }
}

/* --- Fließtext im Hero — Source Serif 4, 16px --- */
.entry-content .wp-block-group.is-style-hero p,
.wp-block-group.is-style-hero p {
    font-family: var(--font-serif-body) !important;
    font-size: 16px !important;
    color: var(--text-body) !important;
    line-height: 1.7 !important;
    text-align: left !important;
    margin-bottom: 12px !important;
}

/* --- H5 als CTA-Zeile — Inter 800, 16px --- */
.wp-block-group.is-style-hero h5,
.wp-block-group.is-style-hero h5.wp-block-heading {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.01em;
    line-height: 1.4 !important;
    text-align: left !important;
    text-transform: none !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   KONSUM-BEICHTE — Coral-Formular-Overrides
   Gilt für: DE (wpforms-form-225) + EN (wpforms-form-245)
   Überschreibt die globalen Honey-Farben gezielt nur für diese beiden Formulare.
   ========================================================================== */

/* Submit-Button */
#wpforms-225 .wpforms-submit,
#wpforms-225 button.wpforms-submit,
#wpforms-245 .wpforms-submit,
#wpforms-245 button.wpforms-submit {
    background: var(--coral-500) !important;
}

#wpforms-225 .wpforms-submit:hover,
#wpforms-245 .wpforms-submit:hover {
    background: var(--coral-600) !important;
}

/* Focus-Zustände bei Eingabefeldern */
#wpforms-225 .wpforms-field input:focus,
#wpforms-225 .wpforms-field textarea:focus,
#wpforms-225 .wpforms-field select:focus,
#wpforms-245 .wpforms-field input:focus,
#wpforms-245 .wpforms-field textarea:focus,
#wpforms-245 .wpforms-field select:focus {
    border-color: var(--coral-600) !important;
    box-shadow: 0 0 0 3px rgba(207, 88, 64, 0.12) !important;
}

/* Foto-Upload-Bereich */
#wpforms-225 .wpforms-field-file-upload .wpforms-uploader,
#wpforms-225 .wpforms-uploader-container,
#wpforms-225 .wpforms-field-file-upload .dz-default,
#wpforms-245 .wpforms-field-file-upload .wpforms-uploader,
#wpforms-245 .wpforms-uploader-container,
#wpforms-245 .wpforms-field-file-upload .dz-default {
    border-color: var(--coral-300) !important;
    background: var(--coral-wash) !important;
}

#wpforms-225 .wpforms-field-file-upload .wpforms-uploader:hover,
#wpforms-225 .wpforms-uploader-container:hover,
#wpforms-245 .wpforms-field-file-upload .wpforms-uploader:hover,
#wpforms-245 .wpforms-uploader-container:hover {
    border-color: var(--coral-500) !important;
    background: var(--coral-100) !important;
}

/* Upload-Icon */
#wpforms-225 .wpforms-uploader-icon svg,
#wpforms-225 .wpforms-field-file-upload .wpforms-uploader svg,
#wpforms-245 .wpforms-uploader-icon svg,
#wpforms-245 .wpforms-field-file-upload .wpforms-uploader svg {
    color: var(--coral-500) !important;
    stroke: var(--coral-500) !important;
}

/* Checkbox accent-color */
#wpforms-225 .wpforms-field-checkbox input[type="checkbox"],
#wpforms-245 .wpforms-field-checkbox input[type="checkbox"] {
    accent-color: var(--coral-500) !important;
}

/* Links innerhalb des Formulars (z.B. Datenschutz-Link) */
#wpforms-225 a,
#wpforms-245 a {
    color: var(--coral-600) !important;
}
#wpforms-225 a:hover,
#wpforms-245 a:hover {
    color: var(--coral-500) !important;
}

/* =============================================================================
   KONSUM-BEICHTE: Name / Nickname
   ============================================================================= */

.beichte-name {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-light, #857B72);
}


/* =============================================================================
   SECTION 18 — BEICHTE FEED: Inline-Stil, Filter-Bar, Cards, Button
   =============================================================================

   LEARNING — Twenty Twenty rem-Bug:
   TwentyTwenty setzt `html { font-size: 62.5% }` → 1rem = 10px (nicht 16px).
   `0.85rem` ergibt 8.5px, `0.88rem` ergibt 8.8px — extrem klein.
   Alle Schriftgrößen in dieser Section deshalb in px, nicht rem.
   Bestehende Sektionen (h2: 2.4rem = 24px) waren bereits korrekt kalibriert.
   ============================================================================= */


/* ---- 18.1  Globale .serif-Klasse (mkk/serif Gutenberg-Format) ---------------
   format-serif.js wraps selected text in <span class="serif">.
   Gilt jetzt global — nicht nur unter .hero-text. */
.serif {
    font-family: var(--font-serif-display) !important;
    font-weight: 400 !important;
    font-style: normal;
}


/* ---- 18.2  Beichte-Filter-Bar (DE / EN Toggle) ------------------------------
   Active   = weißer Hintergrund + dunkle Umrandung (Sprache wird gezeigt)
   Inactive = Beige-Hintergrund + helle Umrandung (Sprache ausgeblendet)
   !important nötig: TT setzt .entry-content button { background:#cd2653 } mit
   Spezifität (0,1,1), höher als unsere (0,1,0)-Klasse. */
.beichte-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 28px;
    padding: 0;
    list-style: none;
}

/* Hintergrund immer gleich (weiß). Nur Rahmen + Textfarbe signalisieren Zustand.
   Aktiv: text-primary + dunkler Rahmen.
   Inaktiv: #E5DDD2 (Sand) für Text und Rahmen — gleiche Farbe. */
.beichte-filter-btn {
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-transform: none !important;
    padding: 5px 11px !important;
    border: 1.5px solid #E5DDD2 !important;          /* Inaktiv: sandfarben */
    background: var(--white) !important;
    color: #E5DDD2 !important;                        /* Inaktiv: sandfarben */
    cursor: pointer !important;
    transition: border-color 0.12s ease, color 0.12s ease;
    border-radius: 0 !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
}

.beichte-filter-btn.is-active {
    border-color: var(--text-primary) !important;   /* Aktiv: dunkler Rahmen */
    color: var(--text-primary) !important;           /* Aktiv: dunkler Text */
    background: var(--white) !important;
}

.beichte-filter-btn:hover {
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    background: var(--white) !important;
}


/* ---- 18.3  Masonry-Grid: JS-Masonry (beichte-filter.js) übernimmt Positionierung.
   CSS nur: display:block + position:relative als Basis für position:absolute auf Items.
   column-count entfernt — würde mit JS-Absolute-Positionierung kollidieren. */
.kb-posts-id-297_c56f2e-eb .kb-post-list {
    display: block !important;
    position: relative;
}

.kb-posts-id-297_c56f2e-eb .kb-post-list-item {
    display: block !important;
    box-sizing: border-box;
    overflow: hidden; /* BFC: enthält Kind-Margins, kein Collapse nach außen */
}


/* ---- 18.4  Beichte-Card: Wrapper --------------------------------------------
   Kadence "unboxed" rendert: <article class="loop-entry type-beichte …"> */
.loop-entry.type-beichte {
    border: 2px solid var(--text-primary) !important;
    background: var(--white) !important;
    overflow: hidden !important;
    break-inside: avoid;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;           /* JS-Masonry steuert Abstände via gap */
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* ---- 18.5  Card-Header: Coral-Leiste + Titel --------------------------------*/
.loop-entry.type-beichte .entry-header {
    background: var(--coral-500) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    border: none !important;
}

/* Kadence inline <style>:
   .kb-posts-id-297_c56f2e-eb .entry.loop-entry .entry-header .entry-title { font-size: 2rem; }
   Überschrieben mit !important + explizitem px-Wert (kein rem — TT rem-Bug!). */
.loop-entry.type-beichte .entry-title,
.loop-entry.type-beichte h2.entry-title,
.loop-entry.type-beichte h3.entry-title,
.loop-entry.type-beichte h4.entry-title,
.kb-posts-id-297_c56f2e-eb .entry.loop-entry .entry-header .entry-title {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;             /* px statt rem — TT rem-Bug */
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--white) !important;
    align-self: center;
}

.loop-entry.type-beichte .entry-title a,
.loop-entry.type-beichte .entry-title a:visited {
    color: var(--white) !important;
    text-decoration: none !important;
}

.loop-entry.type-beichte .entry-title a:hover {
    color: var(--white) !important;
    text-decoration: underline !important;
}


/* ---- 18.6  Sprach-Badge (::after auf dem article, PHP post_class liefert Klasse) */
.loop-entry.type-beichte .entry-header::after {
    content: '';
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 6px;
    background: rgba(255, 255, 255, 0.22);
    color: var(--white);
    flex-shrink: 0;
    line-height: 1.4;
    align-self: flex-start;
    margin-top: 2px;
}

.loop-entry.type-beichte.beichte-lang-deutsch .entry-header::after { content: 'DE'; }
.loop-entry.type-beichte.beichte-lang-english .entry-header::after { content: 'EN'; }


/* ---- 18.7  Beitragsbild: variable natürliche Höhe, kein weißer Streifen -----
   Kein object-fit:cover (würde zuschneiden), kein margin/padding am Wrapper. */
.loop-entry.type-beichte a.post-thumbnail,
.loop-entry.type-beichte .post-thumbnail {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    border: none !important;
}

.loop-entry.type-beichte a.post-thumbnail img,
.loop-entry.type-beichte .post-thumbnail img {
    width: 100% !important;
    height: auto !important;            /* natürliche Höhe — kein Zuschnitt */
    display: block !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Kein padding-top am entry-content-wrap — verhindert weißen Streifen nach
   dem Coral-Header wenn das Bild innerhalb des wrap liegt */
.loop-entry.type-beichte .entry-content-wrap {
    padding: 0 !important;
    margin: 0 !important;
}


/* ---- 18.8  Card-Body: Excerpt-Text ------------------------------------------
   WICHTIG: px statt rem wegen TT rem-Bug (1rem = 10px in TT) */
.loop-entry.type-beichte .entry-summary {
    padding: 14px 16px 16px !important;
    margin: 0 !important;
}

.loop-entry.type-beichte .entry-summary > p {
    font-family: var(--font-serif-body) !important;
    font-size: 14px !important;         /* px statt rem — TT rem-Bug */
    color: var(--text-body) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* Inline-Highlight: Gutenberg <mark> + legacy .highlight-Klasse */
.loop-entry.type-beichte .entry-summary mark,
.loop-entry.type-beichte .entry-summary .highlight,
.loop-entry.type-beichte .entry-summary span.highlight {
    background: #F7C9BF !important;
    color: var(--coral-600) !important;
    font-weight: 600 !important;
    padding: 1px 3px !important;
    border-radius: 0;
}


/* ---- 18.9  Weiterlesen-Link -------------------------------------------------
   Kadence fügt <p class="more-link-wrap"><a class="more-link" …> ein,
   automatisch wenn Auto-Excerpt > 100 Wörter abgeschnitten wird.
   Wichtig: Excerpt-Feld im Post leer lassen → Kadence generiert autom. */
.loop-entry.type-beichte .more-link-wrap {
    padding: 10px 16px 14px !important; /* 16px links = bündig mit Summary-Text */
    margin: 0 !important;
    border-top: 1px solid var(--border) !important;
}

.loop-entry.type-beichte .more-link,
.loop-entry.type-beichte a.more-link {
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--coral-600) !important;
    text-decoration: none !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.loop-entry.type-beichte .more-link:hover,
.loop-entry.type-beichte a.more-link:hover {
    color: var(--coral-500) !important;
    text-decoration: underline !important;
}

/* Screenreader-Text visuell verstecken */
.loop-entry.type-beichte .more-link .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}


/* ---- 18.10 Button-Stil: is-style-coral --------------------------------------
   Default: Coral-500. Im Editor via Farbwähler änderbar (inline style überschreibt).
   Text: immer Weiß + Inter 800 (Base-Button-Regel). Hover: filter:brightness(). */
.wp-block-button.is-style-coral .wp-block-button__link {
    background-color: var(--coral-500);
    color: #ffffff !important;
    transition: filter 0.15s ease;
}

.wp-block-button.is-style-coral .wp-block-button__link:hover {
    filter: brightness(0.88);
    color: #ffffff !important;
    text-decoration: none;
}

/* Alle Gutenberg-Buttons: weißer Text (Hintergrund via Editor-Farbwähler) */
.wp-block-button__link,
.wp-element-button {
    color: #ffffff !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    color: #ffffff !important;
    text-decoration: none;
}


/* ---- 18.11 Einzelseite (single-beichte): Beitragsbild + Farben + Navigation --
   TT rendert: .featured-media > .featured-media-inner.section-inner > .post-thumbnail
   Die alte Regel griff nur am äußeren Wrapper — daher war das Bild zu groß und links.
   Jetzt: outer wrapper → flex+center; inner → Content-Breite; figure → max 480px. */

.single-beichte .featured-media {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
}

.single-beichte .featured-media-inner {
    display: flex !important;
    justify-content: center !important;
    max-width: var(--content-width) !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.single-beichte .post-thumbnail {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 !important;
}

.single-beichte .post-thumbnail img,
.single-beichte .featured-media img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Post-Navigation (Vorheriger / Nächster Beitrag): Coral statt globales Honey.
   TT rendert prev/next als a[rel="prev"] / a[rel="next"] innerhalb section-inner —
   zusätzlich alle bekannten TT-Wrapper-Klassen für maximale Abdeckung. */
.single-beichte .nav-links a,
.single-beichte .post-navigation a,
.single-beichte .posts-navigation a,
.single-beichte .navigation a,
.single-beichte .nav-previous a,
.single-beichte .nav-next a,
.single-beichte a[rel="prev"],
.single-beichte a[rel="next"] {
    color: var(--coral-600) !important;
}

.single-beichte .nav-links a:hover,
.single-beichte .post-navigation a:hover,
.single-beichte .posts-navigation a:hover,
.single-beichte .navigation a:hover,
.single-beichte .nav-previous a:hover,
.single-beichte .nav-next a:hover,
.single-beichte a[rel="prev"]:hover,
.single-beichte a[rel="next"]:hover {
    color: var(--coral-500) !important;
    text-decoration-color: var(--coral-500) !important;
}

/* Alle Content-Links im Beichte-Bereich: Coral (gilt für single + Archiv-Seite).
   Ausnahme: site-header, footer, Buttons — bleiben unverändert. */
.single-beichte .entry-content a,
.single-beichte .entry-footer a,
.post-type-archive-beichte .entry-content a {
    color: var(--coral-600);
}

.single-beichte .entry-content a:hover,
.single-beichte .entry-footer a:hover,
.post-type-archive-beichte .entry-content a:hover {
    color: var(--coral-500);
    text-decoration-color: var(--coral-500);
}

/* :has()-Variante für inline-farbige Links auch im Beichte-Bereich korrekt */
.single-beichte .entry-content a:hover:has(.has-inline-color) {
    text-decoration: none;
}
.single-beichte .entry-content a:hover .has-inline-color {
    text-decoration: underline;
}

/* ---- 18.12 Sidebar ausblenden -----------------------------------------------
   TT zeigt Widgets-Sidebar auf single-beichte-Seiten (leere Standard-Widgets).
   Ausblenden + Hauptinhalt auf volle Breite strecken. */
.single-beichte #secondary,
.single-beichte .sidebar,
.single-beichte .widget-area {
    display: none !important;
}

.single-beichte #primary,
.single-beichte .site-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* ---- 18.13 Kategorien + Taxonomie-Labels ausblenden -------------------------
   CPT beichte nutzt keine Standard-Kategorien — Footer-Labels weglassen. */
.single-beichte .cat-links,
.single-beichte .tags-links,
.single-beichte .entry-footer .cat-links,
.single-beichte .entry-footer .tags-links,
.single-beichte .entry-categories,
.single-beichte .entry-footer {
    display: none !important;
}

/* ---- 18.14 Weißraum zwischen Post-Meta (Datum/Autor) und Text reduzieren ----
   Ohne Vorschaubild entsteht ein großer Leerraum. TT setzt post-inner padding-top
   üblicherweise auf mehrere rem; hier auf einen kompakten Wert begrenzen. */
.single-beichte .post-inner {
    padding-top: 24px !important;
}

.single-beichte .entry-header {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

/* ---- 18.15 „← Alle Konsumbeichten"-Link ------------------------------------
   Via PHP-Hook (functions.php konsumbeichte_prepend_back_link) am Anfang
   des Post-Contents eingefügt. Klein, Inter 800, Coral, Uppercase. */
.beichte-back-link {
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}

.beichte-back-link a {
    color: var(--coral-600) !important;
    text-decoration: none !important;
}

.beichte-back-link a:hover {
    color: var(--coral-500) !important;
    text-decoration: underline !important;
}