/* zimplifi parent theme — layout CSS for the builder's markup (zf-* classes). Loaded on the
   front end and in the editor by functions.php; trade child themes only add to it. */
/* Colors come from theme.json palette as --wp--preset--color--*, so per-subsite
   global-styles overrides (and the spinner) flow through automatically. */
:root { --zf-line: rgba(0,0,0,.10); }

body { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); }

/* ---- header ---- */
/* Pin the menu header just BELOW the sticky "Vorschau-Entwurf" CTA bar (its height var),
   so the two stacked sticky headers don't collide. On live/preview the var is 0 (no bar). */
.zf-header { position: sticky; top: var(--zf-proposal-h); z-index: 20; background: #fffffff2; backdrop-filter: blur(8px); }
/* Logged in / preview: WordPress's admin bar is fixed on top (32px, 46px ≤ 782px), so the sticky bars sit
   below it. ≤ 600px the admin bar scrolls away with the page (position: absolute), so no offset there. */
body.admin-bar .zf-proposal { top: var(--wp-admin--admin-bar--height, 32px); }
body.admin-bar .zf-header { top: calc(var(--zf-proposal-h) + var(--wp-admin--admin-bar--height, 32px)); }
@media screen and (max-width: 600px) { body.admin-bar .zf-proposal { top: 0; } body.admin-bar .zf-header { top: var(--zf-proposal-h); } }
/* The mobile nav overlay is position:fixed and lives INSIDE .zf-header. A
   backdrop-filter creates a containing block for fixed descendants, so the
   overlay was trapped inside the ~72px header box and overflow:auto clipped it
   to just the first menu item. While the overlay is open WordPress adds
   .has-modal-open to <html>; drop the blur then so the overlay anchors to the
   viewport and every menu item shows. (Blur returns the moment it closes.) */
html.has-modal-open .zf-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
.zf-header .wp-block-group { align-items: center; min-height: 72px; }
.zf-header .wp-block-navigation { margin-left: auto; font-weight: 500; }
/* Explicit horizontal gap between menu items. The inline navigation block renders
   with NO flex gap in the editor canvas (items run together) — set it here so it's
   identical in the editor and on the live site. */
.zf-header .wp-block-navigation .wp-block-navigation__container { gap: 1.6rem; column-gap: 1.6rem; }
.zf-header .wp-block-site-logo img { max-height: 46px; width: auto; }
/* Near-square Site Logo (body.zf-logo-hoch, set by zimplifi-config): give it room, header grows with it. */
body.zf-logo-hoch .zf-header .wp-block-site-logo img { max-height: 64px; }
body.zf-logo-hoch .zf-header .wp-block-group { min-height: 84px; }
/* Wide Site Logo (body.zf-logo-breit: wordmark/lockup ≥ 3.5:1): size by height, not by the block's 190px width. */
body.zf-logo-breit .zf-header .wp-block-site-logo img { width: auto !important; height: 52px; max-height: 52px; max-width: none; }
@media (max-width: 600px) { body.zf-logo-breit .zf-header .wp-block-site-logo img { height: 38px; max-height: 38px; max-width: 64vw; object-fit: contain; object-position: left center; } }
/* Dark header (option "Kopfzeile: dunkel" → body.zf-header-dunkel): palette's primary-dark, light text.
   The opened mobile menu keeps its light overlay, so its links go back to ink. */
body.zf-header-dunkel .zf-header { background: color-mix(in srgb, var(--wp--preset--color--primary-dark) 97%, transparent); color: #fff; }
body.zf-header-dunkel .zf-header .wp-block-navigation a,
body.zf-header-dunkel .zf-header .wp-block-site-title a { color: #fff; }
body.zf-header-dunkel .zf-header .wp-block-navigation__responsive-container-open { color: #fff; }
body.zf-header-dunkel .zf-header .wp-block-navigation__responsive-container.is-menu-open,
body.zf-header-dunkel .zf-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--ink); }
/* Narrow screens: the root padding is 0 there, so logo and menu button touched the screen edges. */
@media (max-width: 781px) { .zf-header > .wp-block-group { padding-inline: 1rem; } }

/* ---- hero ---- */
.zf-hero { color: #fff; background-image: linear-gradient(160deg, var(--zf-hero-ov1, rgba(28,58,32,.84)), var(--zf-hero-ov2, rgba(28,58,32,.58))), var(--zf-hero-img, none); background-size: cover; background-position: center; padding: 5rem 1.5rem !important; }
/* Postcard/print shot (.zf-shot = nospin mode): lighten the hero overlay so the
   printed hero doesn't render muddy/dark (print is darker than backlit screen). */
.zf-shot .zf-hero { background-image: linear-gradient(160deg, var(--zf-hero-ov1p, rgba(28,58,32,.52)), var(--zf-hero-ov2p, rgba(28,58,32,.3))), var(--zf-hero-img, none); }
/* …but on paper the mid-tones (esp. the wood browns) flatten/wash out in CMYK, so
   pre-compensate the SHOT only: richer saturation + a touch more contrast. White
   hero text stays white under these filters, so legibility is unaffected. Tune the
   three values if it's still too pale / now too heavy. */
.zf-shot .zf-hero { filter: saturate(1.22) contrast(1.12) brightness(0.97); }
/* Hero copy sits in a flow-layout .zf-hero-text wrapper (see build.php) so it
   left-aligns together; the wider max-widths just ease the wrapping. */
.zf-hero-text { max-width: 1120px; }
.zf-hero .zf-hero-title { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 22ch; color: #fff; margin: 0; line-height: 1.07; }
.zf-hero .zf-hero-sub { font-size: 1.2rem; max-width: 48ch; color: #eef3ec; margin: 1.1rem 0 1.8rem; }
.zf-hero .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--zf-on-accent, #fff); border-radius: .7rem; padding: .8rem 1.4rem; font-weight: 600; }
.zf-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 2.6rem; }

/* hero variant: split (text left, photo right) — solid wash so the panel photo carries the imagery */
.zf-hero--split { background-image: linear-gradient(160deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark)); }
.zf-hero--split .zf-hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
.zf-hero--split .zf-hero-panel { align-self: start; aspect-ratio: 4/3; border-radius: 1.1rem; background: var(--zf-hero-panel, none) center/cover; box-shadow: 0 12px 40px #0005; }
@media (max-width: 900px) { .zf-hero--split .zf-hero-inner { grid-template-columns: 1fr; } .zf-hero--split .zf-hero-panel { display: none; } }

/* hero variant: kompakt (slim band) */
.zf-hero--kompakt { padding: 2.6rem 1.5rem !important; }
.zf-hero--kompakt .zf-hero-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.zf-hero--kompakt .zf-hero-sub { margin: .55rem 0 1.1rem; }

/* ---- hero motion + parallax (additive; lock-safe) ----
   build.php emits the layered .zf-hero-stage + a data-motion preset ONLY on UNSENT
   demos (sent demos keep the fused-bg still hero above, never rebuilt → exactly as
   mailed). Presets: standbild (still) · subtil · lebendig · kino (+ atmospheric fog).
   Ken Burns zoom/pan is CSS (GPU); scroll-driven layered parallax is JS (assets/spinner.js)
   translating .zf-hero-bg / .zf-hero-fog at different rates for depth. Layers freeze to a still
   frame for prefers-reduced-motion and in the postcard shot (.zf-shot). The image
   layer carries generous bleed (inset) so the zoom/pan/parallax never reveals an edge. */
.zf-hero[data-motion] { position: relative; overflow: hidden; background-image: none; }
.zf-hero[data-motion] > .zf-hero-text,
.zf-hero[data-motion] > .zf-hero-inner { position: relative; z-index: 3; }
/* The higher-specificity selector (attr + 2 classes) is deliberate: it must beat WP's
   constrained-layout rule, which otherwise clamps this direct child of the section to
   content-size + centres it (max-width + margin:auto) → overlay cut on the sides. */
.zf-hero[data-motion] > .zf-hero-stage { position: absolute; inset: 0; z-index: 0; max-width: none; margin: 0; }
.zf-hero-bg { position: absolute; inset: -16%; will-change: transform; }
.zf-hero-bg-img { position: absolute; inset: 0; background-image: var(--zf-hero-img, none); background-size: cover; background-position: center; transform-origin: center; will-change: transform; }
.zf-hero-veil { position: absolute; inset: 0; background-image: linear-gradient(160deg, var(--zf-hero-ov1, rgba(28,58,32,.84)), var(--zf-hero-ov2, rgba(28,58,32,.58))); }
.zf-hero-fog { position: absolute; inset: -20%; opacity: 0; pointer-events: none; will-change: transform;
	background: radial-gradient(130% 95% at 24% 12%, rgba(255,241,214,.20), transparent 55%), radial-gradient(120% 95% at 92% 104%, rgba(0,0,0,.30), transparent 60%); }

/* Ken Burns presets (animate the image layer); kino also reveals the fog. */
.zf-hero[data-motion="subtil"]   .zf-hero-bg-img { animation: zf-kb-subtil 24s ease-in-out infinite alternate; }
.zf-hero[data-motion="lebendig"] .zf-hero-bg-img { animation: zf-kb-lebendig 16s linear infinite alternate; }
.zf-hero[data-motion="kino"]     .zf-hero-bg-img { animation: zf-kb-kino 13s linear infinite alternate; }
.zf-hero[data-motion="kino"]     .zf-hero-fog { opacity: 1; }
@keyframes zf-kb-subtil   { from { transform: scale(1.04) translate(2%, 1.2%); }  to { transform: scale(1.10) translate(-2.5%, -1.8%); } }
@keyframes zf-kb-lebendig { from { transform: scale(1.06) translate(3%, 2%); }    to { transform: scale(1.18) translate(-4%, -3%); } }
@keyframes zf-kb-kino     { from { transform: scale(1.08) translate(4%, 2.5%); }  to { transform: scale(1.22) translate(-5%, -3.5%); } }

/* postcard shot: freeze the frame + lighter print overlay (matches .zf-shot .zf-hero) */
.zf-shot .zf-hero-bg-img { animation: none !important; transform: scale(1.06); }
.zf-shot .zf-hero-veil { background-image: linear-gradient(160deg, var(--zf-hero-ov1p, rgba(28,58,32,.52)), var(--zf-hero-ov2p, rgba(28,58,32,.3))); }
@media (prefers-reduced-motion: reduce) {
	.zf-hero-bg-img { animation: none !important; transform: scale(1.06); }
	.zf-hero-bg, .zf-hero-fog { transition: none; }
}

/* ---- full-page scroll-snap ("fullpage" feel) ----
   Toggled by html.zf-snap (spinner.js adds it for ?snap=1 preview, or the saved
   zimplifi_motion-style flag later). Each section fills the viewport and snaps into
   place; a section taller than the viewport scrolls internally, then the next snaps in.
   Sticky header stays. Disabled for reduced-motion (snapping can cause motion sickness). */
/* mandatory snap = firm "lands exactly on each section" feel. `safe center` vertically
   centres sections that fit and top-aligns any taller than the viewport, so their content
   stays reachable (you scroll through, then the next section snaps in). */
/* scroll-padding = the sticky "Vorschau-Entwurf" banner's height, so each snapped section
   lands flush BELOW the pinned banner instead of behind it (see .zf-proposal, sticky). */
html.zf-snap { scroll-snap-type: y mandatory; scroll-padding-top: var(--zf-proposal-h); }
html.zf-snap .zf-hero,
html.zf-snap .zf-section,
html.zf-snap .zf-footer { scroll-snap-align: start; scroll-snap-stop: always; }
/* section + the pinned banner together fill exactly one viewport (subtract banner height),
   so mandatory snap doesn't overflow past the section. */
html.zf-snap .zf-hero,
html.zf-snap .zf-section { min-height: calc(100svh - var(--zf-proposal-h)); display: flex; flex-direction: column; justify-content: safe center; box-sizing: border-box; }
/* kompakt hero stays a slim band even in snap mode (~half-height), not a full panel. */
html.zf-snap .zf-hero--kompakt { min-height: calc(46svh - var(--zf-proposal-h)); }
/* WP admin bar (logged-in / "WP session"): its fixed 32/46px bar otherwise overlaps the
   top of each snapped section — pad the snap (banner height + admin bar) so tops land below. */
html.zf-snap:has(body.admin-bar) { scroll-padding-top: calc(var(--zf-proposal-h) + 32px); }
@media screen and (max-width: 782px) { html.zf-snap:has(body.admin-bar) { scroll-padding-top: calc(var(--zf-proposal-h) + 46px); } }
@media (prefers-reduced-motion: reduce) { html.zf-snap { scroll-snap-type: none; } }
.zf-stat > * { margin-block-start: 0 !important; }   /* tight label/sublabel — kill block-gap inside each stat */
.zf-stat-t { font-family: var(--wp--preset--font-family--heading); font-size: 1.9rem; margin: 0; color: #fff; line-height: 1.1; }
.zf-stat-s { color: #cfe0cd; font-size: .92rem; margin: 0; }

/* ---- sections ---- */
.zf-section { padding: 4.5rem 1.5rem !important; }
.zf-eyebrow { color: var(--zf-accent-text, var(--wp--preset--color--accent)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .4rem; }
.zf-section h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 .6rem; }
.zf-lead { color: var(--wp--preset--color--sub); max-width: 54ch; }

/* ---- service cards ---- */
.zf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
/* grid items: the grid gap handles spacing; WP's flow block-gap otherwise gives card 1
   margin-block-start:0 and cards 2/3 24px, pushing them down so row 1 looks misaligned.
   !important to beat WP's later-printed .wp-container-* > *+* layout rule (equal specificity). */
.zf-cards > * { margin-block-start: 0 !important; }
.zf-card { background: var(--wp--preset--color--surface); border: 1px solid var(--zf-line); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 2px #0000000a, 0 10px 30px #0000000a; }
.zf-card h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.zf-card p { color: var(--wp--preset--color--sub); font-size: .96rem; margin: 0; }

/* ---- references gallery ---- */
.zf-refs { background: var(--wp--preset--color--muted); }
/* Editable image grid (wp:group of core image blocks) — 4 across, like the old look;
   customers swap images + edit captions in place. */
.zf-refs-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; }
.zf-refs-gallery .wp-block-image { margin: 0; }
.zf-refs-gallery .wp-block-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: .9rem; display: block; }
.zf-refs-gallery figcaption.wp-element-caption { margin: .5rem 0 0; font-weight: 600; font-size: .92rem; text-align: left; }
/* ---- legacy CSS-background gallery (pre-rebuild sites) ---- */
.zf-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; }
.zf-tile { aspect-ratio: 4/3; border-radius: .9rem; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 1rem; font-weight: 600; font-size: .95rem; text-shadow: 0 1px 4px #0008; position: relative; background-color: var(--wp--preset--color--primary); background-size: cover; background-position: center; }
.zf-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000a, #0000 58%); }
.zf-tile > * { position: relative; z-index: 1; }
/* honest, unobtrusive "example photo" tag — invites the owner to swap in their own */
.zf-tile-ex { position: absolute; top: .55rem; right: .55rem; background: #0000007a; color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .03em; padding: .12rem .45rem; border-radius: .4rem; text-shadow: none; backdrop-filter: blur(2px); }

/* ---- about ---- */
.zf-about { gap: 3rem; align-items: center; }   /* wp:columns handles the side-by-side layout */
.zf-ueber .zf-photo { margin: 0; }
.zf-ueber .zf-photo img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 1.1rem; box-shadow: 0 12px 40px #0002; display: block; }

/* ---- contact ---- */
.zf-contact { color: #fff; background: linear-gradient(160deg, var(--wp--preset--color--primary-dark), #16241a); }
.zf-contact h2 { color: #fff; }
.zf-contact .zf-eyebrow { color: #e6b486; }
.zf-contact .zf-det strong { color: #cfe0cd; }
.zf-mailhook { display: inline-flex; align-items: center; gap: .55rem; background: #ffffff14; border: 1px solid #ffffff33; border-radius: 999px; padding: .35rem .95rem .35rem .4rem; margin-top: 1.1rem; font-size: .92rem; color: #eef3ec; }
.zf-mailhook::before { content: "Neu"; background: var(--wp--preset--color--accent); color: var(--zf-on-accent, #fff); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; }

/* ---- footer ---- */
.zf-footer { background: #16241a; color: #aebcab; padding: 3rem 1.5rem 2rem !important; font-size: .9rem; }
.zf-footer h4 { color: #fff; margin: 0 0 .6rem; }
.zf-footer a { color: #aebcab; }

/* buy-now / proposal banner (gated demo) — PINNED to the viewport top so the demo context
   ("Vorschau-Entwurf") + the "übernehmen" CTA stay visible through every scroll-snap section.
   --zf-proposal-h must track the rendered height (feeds scroll-padding + section min-height). */
:root { --zf-proposal-h: 48px; }
.zf-proposal { position: sticky; top: 0; z-index: 100; background: var(--wp--preset--color--ink); color: #fff; font-size: .9rem; padding-top: .6rem; padding-bottom: .6rem; }
.zf-proposal-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 1120px; margin-inline: auto; padding-inline: 1.5rem; }
.zf-proposal-inner strong { color: #e6b486; }
.zf-proposal-cta { margin-left: auto; background: #ea580c; color: #fff; padding: .45rem .95rem; border-radius: .5rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
/* Narrow screens: keep the pinned bar a single line (the wrap would double its height and
   eat the viewport). Drop the descriptive subtext, tighten the CTA; shrink --zf-proposal-h. */
@media screen and (max-width: 600px) {
	:root { --zf-proposal-h: 44px; }
	.zf-proposal { font-size: .82rem; }
	.zf-proposal-inner { flex-wrap: nowrap; gap: .6rem; padding-inline: 1rem; }
	.zf-proposal-sub { display: none; }
	.zf-proposal-cta { padding: .4rem .7rem; }
}

/* header button + small bits */
.zf-sitetitle a { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--ink); text-decoration: none; }
.zf-header .zf-btn-primary { margin-left: .5rem; }
.zf-btn-primary .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--zf-on-accent, #fff); border-radius: .6rem; padding: .6rem 1.1rem; font-weight: 600; white-space: nowrap; }
.zf-det { margin: 1.4rem 0; line-height: 2; }
.zf-det strong { color: #cfe0cd; }
.zf-made { color: #7e8e7c; font-size: .82rem; margin-top: 1.4rem; }

/* remove the 24px root block-gap that leaves a white line before the footer */
.wp-site-blocks > * { margin-block-start: 0; }
/* WP's constrained-layout block-gap puts margin-block-START on each section → a white strip
   between sections. Scope the zero to the SECTION level only (direct children of post-content)
   so it does NOT collapse spacing INSIDE sections (e.g. .zf-cards' margin-top, the claim
   steps). !important beats WP's later-printed layout CSS (equal specificity → source order). */
.wp-block-post-content > * { margin-block-start: 0 !important; }
/* All-in-body: sections now live inside <main class="zf-main">. Kill the block-gap
   between them too, so full-bleed coloured sections sit flush (no page-bg stripes). */
.zf-main > * { margin-block-start: 0 !important; }
/* Flow-layout block-gap: restore the 24px gap on flow children (WP otherwise zeroes the
   first child, raising the first card in some sections). !important beats WP's later-printed
   layout CSS at equal specificity (:where() = 0 specificity → source order). */
:root :where(.is-layout-flow) > * {
	margin-block-start: 24px !important;
	margin-block-end: 0;
}

/* "übernehmen" 3-step checklist band (demo chrome — removed at go-live) */
.zf-claim { background: var(--wp--preset--color--muted); text-align: center; padding: 3.5rem 1.5rem !important; border: 2px dashed #ea580c; border-radius: 1rem; margin: .5em; }
.zf-claim-h { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: .4rem 0 .8rem; }
.zf-claim-sub { max-width: 52ch; margin: 0 auto 2.4rem; color: var(--wp--preset--color--sub); font-size: 1.05rem; line-height: 1.5; }
.zf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 940px; margin: 1.2rem auto 3rem; text-align: left; }
.zf-step { display: flex; gap: 1rem; align-items: flex-start; background: var(--wp--preset--color--surface); border: 1px solid var(--zf-line); border-radius: 1rem; padding: 2rem 1.6rem; box-shadow: 0 1px 2px #0000000a, 0 10px 30px #0000000a; }
.zf-step-n { flex: 0 0 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--wp--preset--color--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); }
.zf-step b { display: block; margin-bottom: .5rem; font-size: 1.08rem; }
.zf-step p { color: var(--wp--preset--color--sub); font-size: .92rem; line-height: 1.55; margin: 0; }
.zf-claim-cta { display: inline-block; background: #ea580c; color: #fff; font-weight: 700; padding: .9rem 1.6rem; border-radius: .7rem; text-decoration: none; }
.zf-claim-kuendbar { margin: .8rem 0 0; font-size: .85rem; color: var(--wp--preset--color--sub); }
.zf-trust { max-width: 62ch; margin: 2.2rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--zf-line); color: var(--wp--preset--color--sub); font-size: .95rem; line-height: 1.65; }
.zf-trust strong { color: var(--wp--preset--color--ink); }

/* ---- Übernehmen-Drawer (TEST, gated to eyeball slugs) ---- */
#zf-drawer-toggle { position: fixed; width: 0; height: 0; opacity: 0; pointer-events: none; }
.zf-drawer-wrap { position: fixed; left: 0; top: var(--zf-proposal-h); z-index: 95; display: flex; align-items: flex-start; transition: transform .32s cubic-bezier(.4,0,.2,1); }
#zf-drawer-toggle:not(:checked) ~ .zf-drawer-wrap { transform: translateX(-340px); }
.zf-drawer { width: 340px; max-width: 86vw; max-height: calc(100svh - var(--zf-proposal-h)); overflow-y: auto; box-sizing: border-box; background: #0f1c14; color: #eef3ec; padding: 1.4rem 1.3rem 1.6rem; box-shadow: 0 14px 48px rgba(0,0,0,.42); border-radius: 0 0 14px 0; }
.zf-drawer-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.zf-drawer-logo { font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -.01em; }
.zf-drawer-x { cursor: pointer; color: #9fb3a6; font-size: 1rem; line-height: 1; padding: .2rem .45rem; border-radius: .4rem; }
.zf-drawer-x:hover { background: #ffffff14; color: #fff; }
.zf-drawer-kicker { font-size: .8rem; color: #e6b486; font-weight: 600; margin: 0 0 .4rem; }
.zf-drawer-h { font-size: 1.3rem; line-height: 1.25; margin: 0 0 .6rem; color: #fff; font-family: var(--wp--preset--font-family--heading, Georgia, serif); }
.zf-drawer-sub { font-size: .95rem; line-height: 1.5; color: #cfe0cd; margin: 0 0 1.1rem; }
.zf-drawer-cta { display: block; text-align: center; background: #ea580c; color: #fff; font-weight: 700; padding: .85rem 1rem; border-radius: .6rem; text-decoration: none; }
.zf-drawer-cta:hover { background: #c2410c; }
.zf-drawer-price { text-align: center; font-size: .82rem; color: #9fb3a6; margin: .6rem 0 1.1rem; }
.zf-drawer-trust { font-size: .82rem; line-height: 1.55; color: #aebcab; margin: 0; padding-top: 1rem; border-top: 1px solid #ffffff1f; }
.zf-drawer-trust strong { color: #e8efe6; }
.zf-drawer-tab { align-self: center; writing-mode: vertical-rl; background: #ea580c; color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; padding: 1.1rem .55rem; border-radius: 0 .6rem .6rem 0; box-shadow: 2px 2px 14px rgba(0,0,0,.28); white-space: nowrap; }
.zf-drawer-tab .zf-tab-closed { display: none; }
#zf-drawer-toggle:not(:checked) ~ .zf-drawer-wrap .zf-tab-open { display: none; }
#zf-drawer-toggle:not(:checked) ~ .zf-drawer-wrap .zf-tab-closed { display: inline; }
@media (max-width: 600px) {
  .zf-drawer { width: 86vw; }
  #zf-drawer-toggle:not(:checked) ~ .zf-drawer-wrap { transform: translateX(-86vw); }
}
@media (max-width: 760px) { .zf-steps { grid-template-columns: 1fr; } }

/* photo-slot hints (answers "what are those boxes for?") */
.zf-ph { display: inline-flex; align-items: center; gap: .4rem; background: #00000033; border: 1px solid #ffffff66; color: #fff; padding: .4rem .7rem; border-radius: .5rem; font-size: .85rem; font-weight: 600; }
.zf-tile { flex-direction: column; align-items: flex-start; justify-content: space-between; }
.zf-tile-cap { font-weight: 600; font-size: .92rem; }
.zf-hero-panel { display: flex; align-items: center; justify-content: center; }

/* responsive */
@media (max-width: 900px) {
  .zf-cards { grid-template-columns: repeat(2, 1fr); }
  .zf-gallery, .zf-refs-gallery { grid-template-columns: repeat(2, 1fr); }
  .zf-about { grid-template-columns: 1fr; }
  .zf-header .zf-btn-primary { display: none; }   /* redundant on mobile; avoids header crunch */
}
@media (max-width: 560px) { .zf-cards { grid-template-columns: 1fr; } }

/* ---- legal pages (Impressum / Datenschutz): readable column, calmer type ---- */
.zf-legal { max-width: 860px; margin-inline: auto; padding-top: 2.5rem !important; padding-bottom: 3rem !important; }
.zf-legal > * { margin-block-start: 0 !important; }
.zf-legal h1 { font-size: clamp(1.7rem, 3vw, 2.1rem) !important; margin: 0 0 1.2rem !important; line-height: 1.15; }
.zf-legal h2 { font-size: 1.2rem !important; margin: 1.9rem 0 .35rem !important; line-height: 1.3; }
.zf-legal p { margin: 0 0 .75rem !important; line-height: 1.65; }
.zf-legal em { color: #9a6a33; font-style: italic; }

/* ---- Projects (posts in category "Projekte"): front-page cards, project page, overview ---- */
.zf-ref--project a { display: block; color: inherit; text-decoration: none; }
.zf-ref--project img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.zf-refs-more { text-align: center; margin-top: 1.5rem; }
.zf-refs-more a { color: var(--zf-accent-text, var(--wp--preset--color--accent)); font-weight: 600; text-decoration: none; }
.zf-project .zf-eyebrow a { color: inherit; text-decoration: none; }
.zf-project-title, .zf-projects .wp-block-query-title { margin-top: .2rem; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; }
.zf-project .wp-block-post-content > * + * { margin-block-start: 1.4rem !important; }   /* WP layout rules zero it otherwise */
.zf-project .wp-block-post-content p { max-width: 46rem; font-size: 1.08rem; line-height: 1.65; }
.zf-project-date { color: var(--wp--preset--color--sub); font-size: .9rem; margin-bottom: 1.5rem; }
.zf-project .wp-block-gallery img { border-radius: .6rem; }
.zf-project-nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent); font-weight: 600; }
.zf-project-nav a { color: var(--wp--preset--color--primary); text-decoration: none; }
.zf-projects-query .wp-block-post-template { gap: 1.6rem; margin-top: 2rem; }
.zf-project-thumb img { border-radius: .8rem; }
.zf-project-card-title { font-size: 1.15rem; margin: .7rem 0 .2rem; }
.zf-project-card-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
@media (max-width: 781px) { .zf-projects-query .wp-block-post-template { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .zf-projects-query .wp-block-post-template { grid-template-columns: 1fr !important; } }