/* ==========================================================================
   Mark2 Style v2.0.0
   Block-Style-Variations + Polish-CSS für Mark2-Agent Multi-Tenant
   ALLE Brand-Farben über CSS-Variablen.
   Hex nur erlaubt als var()-Fallback (safety net wenn theme.json nicht set).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) v1 BACKWARD-COMPATIBILITY
   -------------------------------------------------------------------------- */

/* is-style-inverted: dunkle Section (Testimonials, CTAs) */
.wp-block-group.is-style-inverted,
.wp-block-cover.is-style-inverted {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}
.wp-block-group.is-style-inverted h1,
.wp-block-group.is-style-inverted h2,
.wp-block-group.is-style-inverted h3,
.wp-block-cover.is-style-inverted h1,
.wp-block-cover.is-style-inverted h2,
.wp-block-cover.is-style-inverted h3 {
    color: var(--wp--preset--color--base);
}

/* is-style-soft: subtile Tint-Section (Hub-Content-Bridge) */
.wp-block-group.is-style-soft {
    background-color: var(--wp--preset--color--accent-4);
}


/* --------------------------------------------------------------------------
   2) HEADER SYSTEM (4l consolidation — single source of truth)
   --------------------------------------------------------------------------
   Replaces the former plugin §2 (hero-transparency) + §5.3c (C1 mobile) AND
   the header CSS that previously lived in Site-Editor → Styles → Additional
   CSS. Desktop look is byte-for-byte the prior behaviour; only mobile (<=600px)
   gains the one-line hamburger | logo | phone-ICON layout, and the dead
   `@media max-width:768px {.container/.content/.footer}` block is dropped.

   REQUIRED behaviour (preserved exactly, NOT simplified):
     - Hero pages (first main child = alignfull cover): header TRANSPARENT at top
       and scrolls with the hero. :has() detection.
     - On scroll (body.has-scrolled, JS-toggled at scrollY>40): header SHRINKS
       (smaller logo + padding) AND gets a solid --mark2-header-bg background for
       legibility. The transparent->solid fade is smooth (no jump) via the
       background-color transition on .sticky-header; content offset tracks the
       shrinking height via --headerH (set by the "Shrinking header" JS snippet,
       id 11) so .wp-site-blocks padding follows without a jump.
     - Non-hero pages: solid --mark2-header-bg from the start (no hero behind it).

   Multi-tenant: colours via var() tokens (hex only as last-resort fallback);
   logo/padding are design constants; phone via the tel: shortcode DOM.
   NB: served via the mark2-style plugin CSS which WP Fastest Cache COMBINES —
   after any edit, purge WPFC "Delete Cache and Minified CSS/JS" + Cloudflare,
   or the change never reaches the browser. [[wpfc_cache_purge_after_css]]
   -------------------------------------------------------------------------- */

body { --mark2-header-bg: var(--wp--preset--color--accent-4, #111); }

/* Footer: accent-4 background + light text (multi-tenant, matches the header).
   Targets the FSE footer template-part (rendered as <footer class="wp-block-
   group">). Links inherit the light base colour for contrast on accent-4. */
footer.wp-block-group {
    background-color: var(--wp--preset--color--accent-4, #111);
    color: var(--wp--preset--color--base, #fff);
}
footer.wp-block-group a { color: var(--wp--preset--color--base, #fff); }

/* Base: fixed header */
.sticky-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 999999;
    background: var(--mark2-header-bg, var(--wp--preset--color--accent-4, #111));
    transition: background-color 300ms ease, padding 200ms ease, box-shadow 200ms ease;
}
body.admin-bar .sticky-header { top: 32px; }   /* logged-in only; visitors get top:0 */
.wp-site-blocks {
    padding-top: var(--headerH, 110px);   /* content cleared below the fixed header */
    transition: padding-top 200ms ease;
}

/* Inner layout / sizes (desktop) */
.sticky-header .header-inner {
    padding: 18px 16px;
    transition: padding 200ms ease;
}
.sticky-header .header-logo img,
.sticky-header .header-logo svg {
    max-height: 100px;
    height: auto;
    width: auto;
    transition: max-height 200ms ease;
}
.sticky-header .header-nav .wp-block-navigation-item__content {
    padding: 10px 10px;
    transition: padding 200ms ease, font-size 200ms ease;
}
.sticky-header .header-cta .wp-block-button__link {
    padding: 12px 16px;
    transition: padding 200ms ease, font-size 200ms ease;
}

/* Shrunk state (body.has-scrolled, JS-toggled at scrollY>40) */
body.has-scrolled .sticky-header {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
body.has-scrolled .sticky-header .header-inner {
    padding: 14px 16px;   /* scrolled padding (base is 18px) — was 8px */
}
body.has-scrolled .sticky-header .header-logo img,
body.has-scrolled .sticky-header .header-logo svg {
    max-height: 60px;     /* scrolled logo size (base is 100px) — was 34px */
}
body.has-scrolled .sticky-header .header-nav .wp-block-navigation-item__content {
    padding: 6px 8px;
    font-size: 0.95em;
}
body.has-scrolled .sticky-header .header-cta .wp-block-button__link {
    padding: 8px 12px;
    font-size: 0.95em;
}

/* Hero pages: transparent header that scrolls with the hero (single version on
   .sticky-header — that is where the background is painted). */
body:has(main > .entry-content > .wp-block-cover.alignfull:first-child) .sticky-header {
    background: transparent !important;
    box-shadow: none !important;
}
body:has(main > .entry-content > .wp-block-cover.alignfull:first-child) .wp-site-blocks {
    padding-top: 0 !important;
}
body:has(main > .entry-content > .wp-block-cover.alignfull:first-child) main {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
}
/* hero cover keeps top-padding so the headline clears the (transparent) header */
body:has(main > .entry-content > .wp-block-cover.alignfull:first-child)
    main > .entry-content > .wp-block-cover.alignfull:first-child {
    padding-top: 8rem !important;
}
/* scrolled on a hero page: header turns solid again (smooth via the .sticky-header
   background-color transition above — no jump). Specificity (0,5,1) beats the
   transparent rule (0,4,1) once body.has-scrolled is present. */
body.has-scrolled:has(main > .entry-content > .wp-block-cover.alignfull:first-child) .sticky-header {
    background: var(--mark2-header-bg, var(--wp--preset--color--accent-4, #111)) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}

/* Mobile (<=600px): one-line hamburger | logo | phone-ICON.
   Overrides WP core .is-layout-flex{flex-wrap:wrap} (which otherwise stacks the
   three header children into a 3-tier column). Phone number text kept in the DOM
   for screen readers (font-size:0), swapped for a currentColor-masked glyph;
   covers normal + scrolled state so font-size:0 wins both. */
@media (max-width: 600px) {
    .sticky-header .header-inner { flex-wrap: nowrap; gap: 8px; }
    .sticky-header .header-nav,
    .sticky-header .header-cta  { flex: 1 1 0; min-width: 0; }
    .sticky-header .header-nav  { justify-content: flex-start; }
    .sticky-header .header-cta  { justify-content: flex-end; }
    .sticky-header .header-logo { flex: 0 0 auto; }
    .sticky-header .header-logo img { max-height: 40px; }
    body.has-scrolled .sticky-header .header-logo img { max-height: 32px; }

    .sticky-header .header-cta .wp-block-button__link,
    body.has-scrolled .sticky-header .header-cta .wp-block-button__link {
        font-size: 0;
        line-height: 0;
        min-width: 0;
        padding: 0.6rem 0.65rem;
    }
    .sticky-header .header-cta .wp-block-button__link::before {
        content: "";
        display: inline-block;
        width: 1.15rem;
        height: 1.15rem;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}


/* --------------------------------------------------------------------------
   3) v2 BLOCK-STYLE-VARIATIONS
   -------------------------------------------------------------------------- */

/* 3.1) is-style-mark2-rounded-soft — 8px border-radius (Catalog #08 optional) */
.wp-block-image.is-style-mark2-rounded-soft img,
.wp-block-image.is-style-mark2-rounded-soft figure {
    border-radius: 8px;
    overflow: hidden;
}

/* 3.2) is-style-mark2-rounded-medium — 12px border-radius (Catalog #02, #05, #07) */
.wp-block-image.is-style-mark2-rounded-medium img,
.wp-block-image.is-style-mark2-rounded-medium figure {
    border-radius: 12px;
    overflow: hidden;
}

/* 3.3) is-style-checkmark-list — Catalog #07 Z. 282-298
       Token-Auflösung: 'primary' → 'accent-2' (Mark2 Brand-Primary) */
.wp-block-list.is-style-checkmark-list {
    list-style: none;
    padding-left: 0;
}
.wp-block-list.is-style-checkmark-list li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.4em;
}
.wp-block-list.is-style-checkmark-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--accent-2, #2d8a3e);
    font-weight: 500;
}

/* 3.4) is-style-mark2-accordion — Catalog #15 Z. 200-275
       Card-Style mit base-2 BG, 8px radius, 18px 22px padding, SVG-Chevron,
       Token-Auflösung: 'primary' → 'accent-2' für open-state chevron color. */
.wp-block-details.is-style-mark2-accordion {
    background: var(--wp--preset--color--base-2, #f8f7f3);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 12px;
    border: 0 !important;
}

.wp-block-details.is-style-mark2-accordion summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--wp--preset--color--contrast, #1e3a2e);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;            /* Apple-HIG-konformes Tap-Target */
    padding: 0;
    margin: 0;
    user-select: none;
}

/* Hide default triangle markers (Cross-Browser) */
.wp-block-details.is-style-mark2-accordion summary::-webkit-details-marker {
    display: none;
}
.wp-block-details.is-style-mark2-accordion summary::marker {
    display: none;
    content: "";
}

/* Custom chevron via pseudo-element (SVG-Data-URL, currentColor stroke) */
.wp-block-details.is-style-mark2-accordion summary::after {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

/* Rotate chevron + tint accent when open */
.wp-block-details.is-style-mark2-accordion[open] summary::after {
    transform: rotate(180deg);
    color: var(--wp--preset--color--accent-2, #2d8a3e);
}

/* Border + padding for content area when open */
.wp-block-details.is-style-mark2-accordion[open] > *:not(summary) {
    padding-top: 12px;
    margin-top: 10px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);   /* universal-subtle, theme-agnostic */
    color: var(--wp--preset--color--contrast-2, #4a5650);
    line-height: 1.6;
}

/* Mobile responsive — Catalog Z. 263-273 */
@media (max-width: 600px) {
    .wp-block-details.is-style-mark2-accordion {
        padding: 14px 16px;
    }
    .wp-block-details.is-style-mark2-accordion summary {
        font-size: 14px;
    }
    .wp-block-details.is-style-mark2-accordion summary::after {
        width: 16px;
        height: 16px;
    }
}

/* 3.5) is-style-mark2-submit-gradient — Catalog #09 Z. 278-281
       Gradient: accent-2 (Brand-Primary) → accent (Gold-Highlight) */
.wp-block-button.is-style-mark2-submit-gradient .wp-block-button__link {
    background-image: linear-gradient(
        135deg,
        var(--wp--preset--color--accent-2) 0%,
        var(--wp--preset--color--accent) 100%
    );
    background-color: var(--wp--preset--color--accent-2);  /* fallback wenn gradient nicht supported */
    color: var(--wp--preset--color--base);
    border: none;
    transition: opacity 0.2s ease, transform 0.1s ease;
}
.wp-block-button.is-style-mark2-submit-gradient .wp-block-button__link:hover {
    opacity: 0.92;
}
.wp-block-button.is-style-mark2-submit-gradient .wp-block-button__link:active {
    transform: translateY(1px);
}

/* 3.6) is-style-mark2-submit-fullwidth-mobile — Catalog #10 Z. 236-242 */
@media (max-width: 600px) {
    .wp-block-button.is-style-mark2-submit-fullwidth-mobile {
        width: 100%;
    }
    .wp-block-button.is-style-mark2-submit-fullwidth-mobile .wp-block-button__link {
        width: 100%;
        text-align: center;
        display: block;
    }
}


/* --------------------------------------------------------------------------
   4) v2 CUSTOM-CLASSES (Builder-injected, KEINE Block-Style-Variations)
   -------------------------------------------------------------------------- */

/* 4.1) mark2-pair-reverse — Catalog #07
       Sitzt DIREKT auf wp:columns. Selector: .wp-block-columns.mark2-pair-reverse
       Breakpoint: min-width 600px (Mobile bleibt natural-stack image-first). */
@media (min-width: 600px) {
    .wp-block-columns.mark2-pair-reverse {
        flex-direction: row-reverse;
    }
}

/* 4.2) mark2-img-text-reverse — Catalog #05 Z. 256-261
       Sitzt auf OUTER wp:group. Selector: .mark2-img-text-reverse .wp-block-columns
       Breakpoint: min-width 600px (Mobile stack image-on-top). */
@media (min-width: 600px) {
    .mark2-img-text-reverse .wp-block-columns {
        flex-direction: row-reverse;
    }
}

/* 4.3) mark2-accordion-group — Catalog #15 Z. 144-145
       Unstyled marker class on outer wp:group wrapping accordion items.
       Reserved für Builder targeting; KEINE Plugin-Side-Styling damit
       Outer-Group-Spacing/Layout via Block-Editor steuerbar bleibt. */
/* (no CSS — marker class only) */


/* --------------------------------------------------------------------------
   5) Catalog #16 Service-Area-Map (Plugin v2.1)
   --------------------------------------------------------------------------
   Three NEW classes for #16:
   - is-style-mark2-pill: Block-Style-Variation for core/button — circular
     pills used in subcity / nearby-communities listings on dark sections.
   - mark2-nap-card: Custom-class for NAP-Card sub-wp:group with border.
   - mark2-map-wrap: Iframe-container with aspect-ratio + min-height.
   Plus mark2-text-pills fallback for unlinked pill names.

   Multi-Tenant: All values reference WP color tokens, NO hex codes.
   -------------------------------------------------------------------------- */

/* 5.1) is-style-mark2-pill — pill-button for #16
       Color via inherit -> works on both is-style-inverted (white text on
       dark bg) and default (dark text on light bg). */
.wp-block-button.is-style-mark2-pill .wp-block-button__link {
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--accent-3);
    border-radius: 999px;
    padding: 0.5em 1em;
    color: inherit;
    font-size: 0.95em;
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.wp-block-button.is-style-mark2-pill .wp-block-button__link:hover {
    border-color: var(--wp--preset--color--accent);
    background-color: rgba(255, 255, 255, 0.05);
}

@media (max-width: 600px) {
    .wp-block-button.is-style-mark2-pill .wp-block-button__link {
        padding: 0.4em 0.8em;
        font-size: 0.85em;
    }
}

/* 5.1b) #05 Two-Col Img-Text-CTA Inner-Alignment — REMOVED in Plugin v2.1.1.
       The CSS workaround (max-width on prose, margin-auto on image,
       column padding) is obsolete: the #05 builder now emits
       layout:{type:constrained} on its outer wp:group, so WP natively
       limits the inner columns to theme.json contentSize/wideSize.
       The .mark2-img-text-inner-align className is kept on the group as a
       reserved marker for possible future use, but carries no Plugin CSS. */

/* 5.2) mark2-nap-card — NAP-Card border + spacing */
.wp-block-group.mark2-nap-card {
    border: 1px solid var(--wp--preset--color--accent-3);
    border-radius: 6px;
}

/* 5.3) mark2-map-wrap — iframe container symmetric to sibling Content-Column.
       Plugin v2.1 patch: uses 100%-height (flex-context) instead of fixed
       aspect-ratio so map matches the height of Pills + NAP-Card column.
       Hard max-height prevents over-tall maps on very long Content-Columns. */
.mark2-map-wrap {
    width: 100%;
    height: 100%;
    min-height: 380px;
    max-height: 700px;
    overflow: hidden;
    border-radius: 4px;
}

.mark2-map-wrap iframe {
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
    display: block;
}

@media (max-width: 600px) {
    .mark2-map-wrap {
        min-height: 280px;
        max-height: none;  /* mobile: stack, no need to constrain */
    }
}

/* 5.3b) C2 (4l Brief-3a): make the #16 map COLUMN stretch to the sibling
       (pills/NAP) column height so .mark2-map-wrap's height:100% actually
       resolves. Desktop-only; mobile keeps the stacked min-height above.
       Shipped live as Code-Snippets id 1732 first; canonicalised here. */
@media (min-width: 782px) {
    .wp-block-columns:has(> .wp-block-column > .mark2-map-wrap) {
        align-items: stretch;
    }
    .wp-block-column:has(> .mark2-map-wrap) {
        display: flex;
        flex-direction: column;
        align-self: stretch;          /* baseline (no vertical-align override) */
    }
    /* 4l Map-stretch root-fix: the #16 columns use vertical-align:top, so core
       sets `.wp-block-column.is-vertically-aligned-top{align-self:flex-start}`
       (0,2,0) on the map column — align-self on the item beats the parent's
       align-items:stretch above, so the column never stretches and the map stays
       at its natural (~541px) height (the 700/1000 max-height was always
       irrelevant — the map never reached the cap). Re-stretch the map column
       with a selector that MIRRORS the core class AND adds the map :has() context
       → specificity (0,3,0), a DETERMINISTIC win over core, NOT source-order
       dependent (a WPFC bundle re-order cannot flip it). */
    .wp-block-column.is-vertically-aligned-top:has(> .mark2-map-wrap) {
        align-self: stretch;
    }
    .wp-block-column > .mark2-map-wrap {
        flex: 1 1 auto;
        height: 100%;
        aspect-ratio: auto;
        min-height: 340px;
        /* 4l Finding-3: lift the base 5.3 max-height:700px in the paired-column
           context so the map fills the (taller) pills/villages/NAP sibling column
           instead of being capped at 700px. 1000px keeps a guard against absurdly
           tall maps. NB: estimated, not browser-measured (the live maintenance
           page is WP-draft / not publicly reachable to measure the real column
           height) — verify on deploy that 1000px covers the content column; bump
           if the column is taller. */
        max-height: 1000px;
    }
}

/* 5.3c) C1 mobile header icon-layout — MOVED to the consolidated HEADER SYSTEM
       section (§2) in the 4l header consolidation, so all header CSS lives in one
       place. See §2 for the mobile <=600px one-line layout + phone-icon. */

/* 5.4) mark2-text-pills — fallback paragraph for unlinked pill names */
.mark2-text-pills {
    font-size: 0.9em;
    opacity: 0.85;
    margin-top: 0.5em;
}

/* 5.6) Breadcrumb (4l) — structural nav injected below the hero on non-home
       pages (single source with the BreadcrumbList schema). Subtle/inline;
       colours via tokens (multi-tenant). */
.mark2-breadcrumb {
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0.6rem 0;
    color: var(--wp--preset--color--contrast-3, #9a9a9a);
}
.mark2-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.mark2-breadcrumb a:hover {
    text-decoration: underline;
}
.mark2-breadcrumb [aria-current="page"] {
    color: var(--wp--preset--color--contrast, #0f1a14);
    font-weight: 500;
}
.mark2-breadcrumb__sep {
    opacity: 0.5;
    margin: 0 0.15em;
}

/* --------------------------------------------------------------------------
   6) v2.1.2 — Form-Card Text-Color-Reset
   --------------------------------------------------------------------------
   Fix für Gutena-Forms innerhalb is-style-inverted-Sections (#10 Two-Col-Text-Form):
   inverted-Parent setzt color:base (light) auf alle Children, Form-Card hat
   eigenes off-white bg via .has-base-background-color → light-on-light = unsichtbar.
   Reset zwingt Form-Card-Internals auf contrast-Token (theme.json-driven,
   multi-tenant-safe).

   Funktioniert auch standalone (#09 Contact-Form-Full ohne inverted-Wrapper) —
   Form-Card hat dort default-text-color, dieser Reset ist no-op weil
   contrast bereits gewinnt.
   -------------------------------------------------------------------------- */

.wp-block-gutena-forms.has-base-background-color,
.wp-block-gutena-forms.has-base-background-color * {
    color: var(--wp--preset--color--contrast);
}

.wp-block-gutena-forms.has-base-background-color input::placeholder,
.wp-block-gutena-forms.has-base-background-color textarea::placeholder {
    color: var(--wp--preset--color--contrast);
    opacity: 0.5;
}