/* pwb-builder — premium editorial base. One typeface (Satoshi), OKLCH, fluid type, asymmetric layouts, CSS aurora, scroll reveals. Self-hosted, no framework, Hostpoint-pure. */ @font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-variable.woff2") format("woff2-variations"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-variable-italic.woff2") format("woff2-variations"); font-weight: 300 900; font-style: italic; font-display: swap; } /* Fraunces — editorial serif kept self-hosted as an OPTIONAL per-site look, but no longer the default: a wonky serif on every heading read as "typical AI". Default display = Satoshi (below). Unreferenced @font-face does not download, so this costs nothing until a site opts back in. */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-display.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* === BEGIN design-system pairing faces (generated: php _vendor/gen_faces.php) === Self-hosted woff2 (latin), DSG-clean. Unreferenced faces do not download — only the pairing a site selects (layout.php sets --font-display/--font) is ever fetched. */ @font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/assets/fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Karla"; src: url("/assets/fonts/karla-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Karla"; src: url("/assets/fonts/karla-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Karla"; src: url("/assets/fonts/karla-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("/assets/fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("/assets/fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("/assets/fonts/lora-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("/assets/fonts/lora-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("/assets/fonts/lora-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("/assets/fonts/noto-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("/assets/fonts/noto-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("/assets/fonts/noto-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Display SC"; src: url("/assets/fonts/playfair-display-sc-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Display SC"; src: url("/assets/fonts/playfair-display-sc-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Raleway"; src: url("/assets/fonts/raleway-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Raleway"; src: url("/assets/fonts/raleway-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Raleway"; src: url("/assets/fonts/raleway-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Varela Round"; src: url("/assets/fonts/varela-round-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* === END design-system pairing faces === */ :root { /* Fluid type scale (utopia-style, 360 -> 1440) */ --t-sm: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem); --t-base: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); --t-lg: clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem); --t-xl: clamp(1.45rem, 1.25rem + 1vw, 2rem); --t-2xl: clamp(1.9rem, 1.55rem + 1.7vw, 2.85rem); --t-3xl: clamp(2.5rem, 1.9rem + 3vw, 4.4rem); --t-display: clamp(2.35rem, 1.5rem + 4.4vw, 5.6rem); /* Rhythm — height-aware so legacy section padding does not balloon on wide-but-short laptops (was 8vw) */ --section: clamp(3rem, 6vh, 5.5rem); --maxw: 1240px; --gutter: clamp(1.4rem, 5vw, 2.5rem); --radius: 16px; /* Palette — default: slate-blue. Warm off-white paper, near-black warm ink, one accent. */ --paper: oklch(98.4% 0.006 95); --ink: oklch(24% 0.012 260); --muted: oklch(48% 0.014 260); --line: oklch(89% 0.01 250); --surface: oklch(96.5% 0.008 95); --accent: oklch(50% 0.11 245); --accent-deep: oklch(40% 0.1 250); --accent-soft: oklch(70% 0.13 250); --accent-ink: oklch(98% 0.01 250); --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Display = the same premium grotesk (Satoshi), NOT a curvy serif. A wonky editorial serif on every heading read as "AI template"; clean heavy Satoshi at display size + tight tracking is premium and tonally neutral across industries. Self-hosted, no extra font download. */ --font-display: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [data-palette="warm-clay"] { --paper: oklch(97.2% 0.019 64); --ink: oklch(23% 0.026 40); --muted: oklch(47% 0.03 42); --line: oklch(88% 0.022 55); --surface: oklch(94.8% 0.026 60); --accent: oklch(56% 0.13 38); --accent-deep: oklch(45% 0.12 35); --accent-soft: oklch(77% 0.11 48); --accent-ink: oklch(99% 0.01 60); } [data-palette="blush"] { --paper: oklch(97.4% 0.017 26); --ink: oklch(24% 0.03 355); --muted: oklch(50% 0.03 352); --line: oklch(89% 0.022 18); --surface: oklch(95% 0.024 20); --accent: oklch(60% 0.12 16); --accent-deep: oklch(49% 0.12 10); --accent-soft: oklch(81% 0.09 22); --accent-ink: oklch(99% 0.01 20); } [data-palette="sand"] { --paper: oklch(96.8% 0.022 85); --ink: oklch(25% 0.024 70); --muted: oklch(49% 0.028 70); --line: oklch(88% 0.024 80); --surface: oklch(94% 0.03 82); --accent: oklch(54% 0.1 70); --accent-deep: oklch(43% 0.1 65); --accent-soft: oklch(78% 0.09 80); --accent-ink: oklch(99% 0.01 80); } [data-palette="forest"] { --paper: oklch(98.4% 0.01 130); --ink: oklch(22% 0.022 160); --muted: oklch(46% 0.022 160); --line: oklch(89% 0.015 150); --surface: oklch(96.5% 0.012 130); --accent: oklch(50% 0.09 165); --accent-deep: oklch(39% 0.08 168); --accent-soft: oklch(72% 0.11 160); --accent-ink: oklch(99% 0.01 150); } [data-palette="noir"] { --paper: oklch(17% 0.008 265); --ink: oklch(95% 0.004 260); --muted: oklch(66% 0.01 260); --line: oklch(32% 0.01 265); --surface: oklch(22% 0.01 265); --accent: oklch(80% 0.11 80); --accent-deep: oklch(86% 0.09 85); --accent-soft: oklch(72% 0.12 75); --accent-ink: oklch(18% 0.02 80); } * { box-sizing: border-box; min-width: 0; } /* overflow-x: clip (not hidden) — hidden makes html/body a scroll container, which silently breaks the sticky header (it scrolled away instead of sticking). clip still hides the hero/mesh bleed but keeps position:sticky working. Verified: header sticks at top:0, no horizontal scrollbar. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-base); line-height: 1.6; font-weight: 420; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-deep); text-underline-offset: 3px; } ::selection { background: var(--accent-soft); color: var(--accent-ink); } /* P5 — GLOBALER FOKUS-STIL. Bis 2026-08-03 gab es in 1849 Zeilen CSS genau zwei Fokus-Regeln (Kontaktformular-Feld, Dropdown) und kein einziges :focus-visible. Jeder Link, jeder Knopf, jede Karte, jeder Nav-Eintrag bekam den Browser-Standardring — auf einer dunkeltuerkisen Cover-Flaeche praktisch unsichtbar. WCAG 2.2 AA (2.4.11/2.4.13) ist damit nicht erfuellbar. Markenfarbe als Ring, auf dunklen/Akzent-Flaechen invertiert, damit er dort ueberhaupt erscheint. :focus-visible statt :focus — Mausklicks bekommen keinen Ring. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } :is(.sx-tone-dark, .sx-tone-accent, .site-header[data-style="over"], .site-footer) :focus-visible { outline-color: #fff; } .block-inner { width: min(100% - calc(var(--gutter) * 2), var(--maxw)); margin-inline: auto; } .block-inner.narrow { width: min(100% - calc(var(--gutter) * 2), 760px); } .block { padding-block: var(--section); position: relative; } /* Section rhythm: stacked blocks share one gap (prev block's bottom padding), not two. Symmetric padding-block would otherwise sum to ~18rem between sections. The hero keeps its own padding (it's :first-child, so the + selector never touches it). */ .block + .block { padding-block-start: 0; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 30; width: 100%; background: color-mix(in oklch, var(--paper) 80%, transparent); backdrop-filter: saturate(1.15) blur(14px); -webkit-backdrop-filter: saturate(1.15) blur(14px); border-bottom: 1px solid color-mix(in oklch, var(--line) 65%, transparent); } .header-inner { display: flex; align-items: center; gap: 1rem 1.8rem; flex-wrap: wrap; width: min(100% - calc(var(--gutter) * 2), var(--maxw)); margin: 0 auto; padding-block: .9rem; } .brand { font-weight: 720; font-size: 1.28rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; } .brand-logo { height: clamp(52px, 6vw, 82px); width: auto; max-width: 260px; object-fit: contain; display: block; } /* P5/C2 — Plakette. Nur wenn ein Logo mit deckend hellem Grund ausdruecklich in einen dunklen Header gestellt wird (partials/header.php setzt data-logo dann selbst). Ohne diese Regel steht dort ein weisses Rechteck ohne erkennbaren Grund; mit ihr ist es eine bewusst gesetzte Platte — dieselbe Loesung, die die Handfassung fuer ihren dunklen Fuss verwendet. */ /* P5 — Telefonnummer im Kopf (partials/header.php, nur bei goal=calls). Auf schmalen Fenstern bleibt das Hoerersymbol und der Text verschwindet: die Nummer ist dort ohnehin antippbar, und der Platz gehoert der Marke. min-height 44px = Touch-Zielgroesse. */ .header-tel { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; text-decoration: none; font-weight: 640; font-size: var(--t-sm); white-space: nowrap; color: inherit; min-height: 44px; padding-inline: .2rem; } .header-tel-icon { width: 1.15em; height: 1.15em; flex: none; color: var(--accent); } .site-header[data-style="over"] .header-tel-icon { color: currentColor; } .header-tel:hover .header-tel-text { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 60rem) { .header-tel-text { display: none; } } .site-header[data-logo="plakette"] .brand-logo { background: #fff; padding: .3rem .55rem; border-radius: 8px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.55); } .nav-burger { display: none; } /* CSS-only mobile menu toggle; shown < 40rem (rules below) */ .site-nav { display: flex; gap: 1.7rem; margin-left: auto; flex-wrap: wrap; align-items: center; } .site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 500; transition: color .18s ease; } .site-nav a[aria-current="page"], .site-nav a:hover { color: var(--ink); } /* nav micro-interaction: a hairline underline that grows from the left on hover / for the current page. Anchored to the link's vertical centre (not the 44px box bottom) so it stays tight under the text. */ .site-nav a::after { content: ""; position: absolute; left: .1em; right: .1em; top: 50%; margin-top: .6em; height: 1.5px; background: currentColor; border-radius: 2px; opacity: .5; pointer-events: none; transform: scaleX(0); transform-origin: left; transition: transform .24s cubic-bezier(.2,.8,.2,1); } .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); } /* QW4: optional global header CTA (primary button shown in the header on every page). */ .site-header .header-cta { flex: 0 0 auto; margin-left: 1rem; padding: .55rem 1.1rem; min-height: 44px; display: inline-flex; align-items: center; } @media (max-width: 40rem) { .site-header .header-cta { order: 7; margin-left: auto; } } .locale-switcher { display: flex; gap: .15rem; font-size: 0.72rem; font-weight: 600; } .locale-switcher a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--muted); text-decoration: none; padding: .15rem .5rem; border-radius: 8px; letter-spacing: .03em; } .locale-switcher a.is-current { color: var(--accent-deep); } @media (max-width: 40rem) { /* Row 1 = brand + burger only. The nav is collapsed by default, so the pill can never grow tall enough to overlap the page content below it (the mobile critical). Opening the burger drops the nav as a full-width panel with proper >= 44px tap targets. CSS-only, no JS. */ .header-inner { row-gap: .4rem; } .brand { flex: 1 1 auto; } .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; flex: 0 0 auto; color: var(--ink); cursor: pointer; border-radius: 12px; background: color-mix(in oklch, currentColor 8%, transparent); } .nav-burger span, .nav-burger span::before, .nav-burger span::after { content: ""; display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-burger span { position: relative; } .nav-burger span::before { position: absolute; left: 0; top: -7px; } .nav-burger span::after { position: absolute; left: 0; top: 7px; } .nav-toggle:checked ~ .nav-burger span { background: transparent; } .nav-toggle:checked ~ .nav-burger span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); } .site-nav { display: none; flex-basis: 100%; margin-left: 0; flex-direction: column; gap: .2rem; align-items: stretch; order: 9; } .nav-toggle:checked ~ .site-nav { display: flex; } .site-nav a { padding: .7rem .2rem; font-size: var(--t-base); } /* >= 44px tap targets */ .site-nav a::after { display: none; } /* underline micro is a desktop-row affordance only */ /* dropdown/mega im Mobile-Stack (2026-08-02): das Hover-Untermenue existiert auf Touch nicht, und der "Mehr"-Elternlink navigiert beim Tap sofort zur ersten Unterseite — die gruppierten Seiten waren ueber das Menue faktisch unerreichbar. Im offenen Menue stehen die Kinder darum IMMER sichtbar eingerueckt unter ihrem Elternpunkt (kein Hover, kein zweiter Tap noetig). */ .site-nav .nav-group { display: block; } .site-nav .nav-group .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 .3rem 1rem; min-width: 0; } .site-nav .nav-group .nav-sub a { color: inherit; opacity: .8; } .locale-switcher { order: 8; margin-left: auto; } /* Aufgeklappte Pille (2026-08-02): border-radius 999px machte aus dem hohen offenen Menue einen Kreis-Blob, der die obersten/untersten Links anschnitt (Beweisbild lt-rsm-…-390-offen vor dem Fix). Offen traegt die Kapsel eine moderate Rundung, geschlossen bleibt sie eine Pille. */ .site-header[data-style="pill"] .header-inner:has(.nav-toggle:checked), .site-header[data-style="over"] .header-inner:has(.nav-toggle:checked), .site-header[data-nav="sticky-over"] .header-inner:has(.nav-toggle:checked) { border-radius: 26px; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; border-radius: 999px; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease; } /* P5 — Magnetik und Hover-Lift teilen sich nicht mehr dieselbe Eigenschaft. reveal.js schrieb bis 2026-08-03 `style.transform` direkt auf den Knopf und ueberschrieb damit `.btn-primary:hover{transform:translateY(-2px)}` — der gestaltete Hover-Lift erschien auf Zeigegeraeten NIE. Zusaetzlich startete jeder pointermove die 200-ms-transform-Transition neu, der Knopf hing dem Zeiger schwabbelnd hinterher. Jetzt traegt `translate` die Magnetik (eigene, kurze Kurve) und `transform` den Lift — beide komponieren, keiner ueberschreibt den anderen. */ .btn-primary { background: var(--accent-deep); color: var(--accent-ink); padding: .9rem 1.6rem; min-height: 44px; translate: var(--mag-x, 0) var(--mag-y, 0); transition: translate .09s linear; } .btn-primary::after { content: "→"; transition: transform .2s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px var(--accent); } .btn-primary:hover::after { transform: translateX(3px); } /* ---------- Hero (asymmetric + aurora) ---------- */ .block-hero { min-height: calc(100vh - 4.8rem); min-height: calc(100svh - 4.8rem); /* fills the screen below the header, any display */ display: grid; align-content: center; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 6vw, 4.5rem); overflow: clip; } .hero-textonly .hero-grid { grid-template-columns: 1fr; max-width: 780px; } body.shot .block-hero { min-height: 540px; } /* screenshot mode: normalize hero height for full-page capture */ .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 60rem) { .hero-grid { grid-template-columns: 62fr 38fr; } } .eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 0.74rem; font-weight: 640; color: var(--accent-deep); margin: 0 0 1.4rem; } .hero-title { font-weight: 760; font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.035em; margin: 0 0 1.4rem; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; } .hero-sub { font-size: var(--t-lg); color: var(--muted); margin: 0 0 2.2rem; max-width: 34ch; line-height: 1.5; } .hero-media img { border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; } /* B1 — per-site hero LAYOUTS (split = default 62/38). Chosen at render time by industry + seed so two industries get structurally different heroes, not just different colours. */ .hero-stage .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 1060px; margin-inline: auto; gap: clamp(1.8rem, 4vw, 3rem); } .hero-stage .eyebrow { margin-bottom: 1rem; } .hero-stage .hero-sub { max-width: 54ch; margin-inline: auto; } .hero-stage .hero-media { width: 100%; } .hero-stage .hero-media img, .hero-stage .hero-art { aspect-ratio: 16 / 9; width: 100%; } .hero-editorial .hero-title { font-size: clamp(2.7rem, 6.2vw, 4.7rem); letter-spacing: -0.045em; } .hero-editorial .hero-media img, .hero-editorial .hero-art { aspect-ratio: 3 / 4; } @media (min-width: 60rem) { .hero-editorial .hero-grid { grid-template-columns: 46fr 54fr; column-gap: clamp(2rem, 5vw, 4.5rem); } .hero-editorial .hero-media { order: -1; } /* media to the LEFT, copy on the right */ .hero-editorial .hero-copy { border-left: 3px solid var(--accent); padding-left: clamp(1.1rem, 2.2vw, 2.2rem); } } /* Aurora background — CSS only, behind hero, drifting blobs. */ .block-hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: -1; pointer-events: none; opacity: .5; filter: blur(60px); background: radial-gradient(40% 50% at 22% 30%, var(--accent-soft), transparent 70%), radial-gradient(38% 48% at 78% 22%, var(--accent), transparent 72%), radial-gradient(45% 55% at 60% 70%, var(--accent-deep), transparent 75%); } .block-hero::before { display: none; } body[data-bg^="aurora"] .block-hero::before { display: block; } /* pointer-events:none ist Pflicht, nicht Kosmetik: das Canvas liegt per inset:0 ueber der ganzen Sektion und fing sonst jeden Klick auf darunterliegende Formularfelder ab (gemessen: auf 13 kontakt-Seiten kam getippter Text nicht an). Die Cursor-Effekte haengen ihren pointermove- Listener auf die SEKTION, nicht auf das Canvas (backgrounds.js) — sie verlieren dadurch nichts. Abgesichert in tests/css_contract_test.php. */ .bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; } /* any hero with a canvas background: keep content above it */ .block-hero > .block-inner { position: relative; z-index: 1; } /* Per-section background (editor "Hintergrund pro Sektion", data-sec-bg): lift content above the bg-canvas / colour fill so a per-section effect or colour never covers the text. */ .block[data-sec-bg] { isolation: isolate; } .block[data-sec-bg] > :not(.bg-canvas) { position: relative; z-index: 1; } /* ------------------------------------------------------------------------------------------ BEWEGUNGSSTUFE DER SITE — der CSS-Hook, dessen Fehlen weiter unten (Z. ~1613) bisher nur dokumentiert war: «the site-wide motion wish (theme.motionLevel, S1) has no CSS hook». Er wird gebraucht, weil nicht jede Bewegung im Canvas steckt (Reveals, Ornament-Float, Laufschriften) — die JS-Stufe erreicht die nicht. ZUR SPEZIFITAET: der Attributselektor `body[data-motion="lebendig"]` wiegt (0,2,0). Eine Media Query erhoeht die Spezifitaet NICHT. Die reduced-motion-Regel muss deshalb DIESELBE Selektorform tragen und danach stehen, sonst gewinnt «lebendig» gegen den Systemwunsch des Nutzers — und der Systemwunsch gewinnt immer. WordPress 6.6 hat sich an genau dieser Fehlerklasse verhoben. */ body { --pwb-motion: 1; } body[data-motion="aus"] { --pwb-motion: 0; } body[data-motion="dezent"] { --pwb-motion: 1; } body[data-motion="lebendig"] { --pwb-motion: 1; } @media (prefers-reduced-motion: reduce) { body[data-motion] { --pwb-motion: 0; } } /* ------------------------------------------------------------------------------------------ «BEWEGUNG ANHALTEN» — WCAG 2.2.2 «Pause, Stop, Hide», Stufe A (07.08.) Zwei verschiedene Sachen, absichtlich nebeneinander: (1) `html.pwb-js` — OHNE JavaScript gibt es keine Bedienung, also darf ohne JavaScript auch nichts von selbst laufen. Betroffen sind genau die drei Animationen, die der SERVER fertig ausliefert: Laufschrift, Galerie-Band, Ken Burns auf dem ersten Bild. Canvas, Video und Bilderfolge starten ohnehin erst durch JS. `assets/bewegung.js` setzt die Klasse; bis dahin (wenige Millisekunden bei `defer`) steht es still — ein spaeterer Beginn, kein Sprung. (2) `html[data-bewegung="aus"]` — der Besucher hat angehalten. `bewegung.js` pausiert CSS-Animationen bereits generisch ueber die Web-Animations-API; diese Regeln sind die zweite Schicht fuer den Fall, dass eine Animation ERST NACH dem Anhalten anfaengt und zwischen `animationstart` und dem Pausieren ein Bild lang liefe. Eine pauschale Regel (`* { animation-play-state: paused }`) waere hier falsch: sie friert auch die Einblend-Animationen ein, und Inhalt mit `backwards`-Fuellung bliebe fuer immer unsichtbar. Deshalb nur die, die endlos laufen oder laenger als fuenf Sekunden dauern. ZUR SPEZIFITAET: `html[data-bewegung="aus"] X` wiegt eine Klasse mehr als `X` und gewinnt unabhaengig von der Reihenfolge — auch gegen `.block-hero::before`, das weiter unten steht. */ html:not(.pwb-js) .marquee-track, html:not(.pwb-js) .gm-track, html:not(.pwb-js) .sx-slide.is-on img, html:not(.pwb-js) .sx-slide:nth-child(even).is-on img, html:not(.pwb-js) .block-hero::before, html:not(.pwb-js) .fx-gradient, html:not(.pwb-js) .fx-shiny { animation: none; } html[data-bewegung="aus"] .marquee-track, html[data-bewegung="aus"] .gm-track, html[data-bewegung="aus"] .fx-gradient, html[data-bewegung="aus"] .fx-shiny, html[data-bewegung="aus"] .sx-slide.is-on img, html[data-bewegung="aus"] .sx-slide:nth-child(even).is-on img { animation-play-state: paused; } html[data-bewegung="aus"] .block-hero::before { animation-play-state: paused; } /* Angehalten mitten im Lauf heisst: die zweite Haelfte des Bandes steht hinter dem Beschnitt. Lesbar bleibt sie nur, wenn man dorthin scrollen kann. */ html[data-bewegung="aus"] .marquee, html[data-bewegung="aus"] .gallery-marquee { overflow-x: auto; } /* «ZUM INHALT SPRINGEN» — WCAG 2.4.1 «Bypass Blocks», Stufe A. Erst beim Fokus sichtbar, und das ist hier NICHT das verbotene Verstecken: die Bedienung richtet sich ausschliesslich an Tastatur und Screenreader, und genau dort ist sie das erste, was man erreicht. Fuer die Maus gaebe es nichts zu ueberspringen — sie klickt direkt hin. WCAG-Technik G1 sieht diese Form ausdruecklich vor. `transform` statt `display:none`: ein weggeblendetes Element ist NICHT fokussierbar, der Sprung waere damit unerreichbar. Das ist der haeufigste Fehler bei dieser Bedienung. Keine Ueberblendung: der Sprung soll sofort da sein, nicht heranfahren. */ .pwb-sprung { position: fixed; z-index: 100; top: 0; left: 0; transform: translateY(-130%); display: inline-block; padding: .72rem 1.15rem; background: var(--paper, #fff); color: var(--ink, #1b1f27); border: 1px solid var(--line, rgba(0, 0, 0, .16)); border-radius: 0 0 12px 0; font-family: inherit; font-size: .85rem; font-weight: 620; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .55); } .pwb-sprung:focus { transform: none; outline: 2px solid currentColor; outline-offset: -5px; } /* Das Sprungziel traegt tabindex="-1", damit der Fokus wirklich umzieht. Es ist damit NICHT in der Tabulator-Reihenfolge, also verlangt WCAG 2.4.7 hier keinen sichtbaren Ring — ein Rahmen um die halbe Seite waere nur Irritation. */ #main:focus { outline: none; } @media print { .pwb-sprung { display: none; } } /* Die Bedienung selbst. Unten LINKS, weil unten rechts das Feld der Owner-Widgets ist (Chatbot, Consent) — `$site['globalEmbed']` setzt dort seit jeher ab. Sie ist gedeckt gefuellt, nicht durchscheinend: ueber einem dunklen Vollbild-Hero waere eine milchige Pille genau dort unlesbar, wo sie am dringendsten gebraucht wird. --paper/--ink tragen die Kontrastgarantie aus partials/layout.php (>= 7:1) in jeder Palette mit. Die sichtbare Beschriftung IST der zugaengliche Name (WCAG 2.5.3), das Zeichen daneben ist `aria-hidden`. 40px hoch — ueber der 24px-Mindestgroesse aus WCAG 2.5.8. */ .pwb-bewegung { position: fixed; z-index: 80; left: max(.9rem, env(safe-area-inset-left, 0px)); bottom: max(.9rem, env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .42rem; min-height: 40px; padding: .5rem .78rem; border: 1px solid var(--line, rgba(0, 0, 0, .16)); border-radius: 999px; background: var(--paper, #fff); color: var(--ink, #1b1f27); font-family: inherit; font-size: .78rem; font-weight: 620; line-height: 1; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .55); } .pwb-bewegung:hover { border-color: color-mix(in oklch, var(--ink, #1b1f27) 34%, var(--line, #ccc)); } /* currentColor, nicht --accent: der Akzent ist markenabhaengig und auf hellen Paletten zu schwach fuer einen Fokusring. --ink traegt dieselbe Kontrastgarantie wie die Schrift. */ .pwb-bewegung:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .pwb-bewegung svg { flex: 0 0 auto; display: block; } @media print { .pwb-bewegung { display: none; } } /* "mesh" — own ambient background: soft light fields that breathe slowly and drift gently toward the cursor. Pure CSS gradients, positions driven by JS vars. */ body[data-bg="mesh"] .block-hero { background: radial-gradient(34rem 34rem at calc(28% + var(--mx, 0px)) calc(34% + var(--my, 0px)), color-mix(in oklch, var(--accent-soft) 40%, transparent), transparent 60%), radial-gradient(30rem 30rem at calc(76% + var(--mx2, 0px)) calc(26% + var(--my2, 0px)), color-mix(in oklch, var(--accent) 32%, transparent), transparent 60%), radial-gradient(42rem 42rem at calc(55% + var(--mx, 0px)) calc(84% + var(--my, 0px)), color-mix(in oklch, var(--accent-deep) 28%, transparent), transparent 64%), var(--paper); } body[data-bg="mesh"] .block-hero > .block-inner { position: relative; z-index: 1; } /* "field" — own interactive Canvas dot grid (see field.js). */ body[data-bg="field"] .block-hero { background: radial-gradient(70% 90% at 50% 28%, var(--surface), var(--paper)); } body[data-bg="field"] .block-hero > .block-inner { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .block-hero::before { animation: aurora 24s ease-in-out infinite alternate; } } @keyframes aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(-2deg); } 50% { transform: translate3d(4%, 3%, 0) scale(1.15) rotate(3deg); } 100% { transform: translate3d(-2%, 5%, 0) scale(1.08) rotate(-1deg); } } /* ---------- Headings (sections) ---------- */ /* Display headings use --font-display (Satoshi by default — clean premium grotesk, not a curvy serif). font-optical-sizing:auto is harmless when the face has no opsz axis. */ .hero-title, .statement-quote, .block-text :is(h1, h2), .block-cta :is(h1, h2), .block-contact :is(h1, h2), .features-heading, .block-imagetext :is(h1, h2), .block-embed :is(h1, h2) { font-family: var(--font-display); font-optical-sizing: auto; } .block-text :is(h1, h2), .block-cta :is(h1, h2), .block-contact :is(h1, h2), .features-heading { font-weight: 700; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 1.2rem; } /* ---------- Text block ---------- */ .block-text.is-center { text-align: center; } .block-text p { font-size: var(--t-lg); color: color-mix(in oklch, var(--ink) 88%, var(--muted)); max-width: 62ch; margin: 0 0 1.2em; } .block-text.is-center p { margin-inline: auto; } /* editorial drop-cap on the opening paragraph of a left-aligned text block (display face, brand accent). It's large display text, so the >=3:1 large-text bar applies even where accent-deep is a light hue. */ .block-text:not(.is-center) > .block-inner > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: 700; font-size: 3.5em; line-height: .74; margin: .04em .14em 0 0; color: var(--accent-deep); } /* ---------- Features — editorial numbered list, no boxes ---------- */ .features-heading { margin-bottom: clamp(1.5rem, 4vw, 3rem); max-width: 20ch; } .features-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .feature-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.4rem); align-items: start; padding: clamp(1.4rem, 3vw, 2.2rem) 0; border-top: 1px solid var(--line); } .feature-card:last-child { border-bottom: 1px solid var(--line); } .feature-icon { display: inline-flex; width: 1.9rem; height: 1.9rem; color: var(--accent-deep); margin-top: .15rem; } .feature-icon svg { width: 100%; height: 100%; } .feature-card h3 { margin: 0 0 .35rem; font-size: var(--t-xl); font-weight: 640; letter-spacing: -0.015em; } .feature-card p { margin: 0; color: var(--muted); font-size: var(--t-base); max-width: 48ch; } @media (min-width: 48rem) { .feature-card { grid-template-columns: 3rem 1fr; align-items: baseline; } } /* ---------- CTA ---------- */ .block-cta { } .block-cta .block-inner { background: var(--ink); color: var(--paper); border-radius: calc(var(--radius) * 1.4); padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; } .block-cta h2 { color: var(--paper); } .cta-text { color: color-mix(in oklch, var(--paper) 80%, transparent); margin: .4rem auto 1.8rem; max-width: 46ch; font-size: var(--t-lg); } /* CTA sits on the dark ink panel: an inverse paper/ink button always inverts WITH the panel (incl. noir, where the panel is light) -> guaranteed >=15:1 text contrast + maximum pop. */ .block-cta .btn-primary { background: var(--paper); color: var(--ink); } /* ---------- Contact ---------- */ .block-contact p { color: var(--muted); font-size: var(--t-lg); } .contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .4rem; font-size: var(--t-lg); } .contact-list a { display: inline-flex; align-items: flex-end; min-height: 44px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; } .contact-list a:hover { border-color: var(--accent); } /* Öffnungszeiten: eine Zeile pro Tag/Gruppe — ohne diese Regel klebten die Spans inline zusammen («…19:00Sa 08:00…», Go-Live-Audit 09.08.2026). */ .contact-hours span { display: block; } .contact-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); margin-top: clamp(1.5rem, 3vw, 2.4rem); } @media (min-width: 48rem) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } .contact-grid .contact-list { margin-top: 0; } } .contact-form { display: grid; gap: .85rem; } .contact-form label { display: grid; gap: .35rem; font-size: var(--t-sm); color: var(--muted); font-weight: 500; } .contact-form input, .contact-form textarea { padding: .72rem .9rem; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in oklch, var(--paper) 60%, var(--surface)); color: var(--ink); font: inherit; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); } .contact-form textarea { resize: vertical; min-height: 7rem; } .contact-form .btn-primary { justify-self: start; margin-top: .2rem; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .form-ok { background: color-mix(in oklch, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line)); color: var(--accent-deep); padding: .75rem 1rem; border-radius: 11px; } /* ---------- Footer ---------- */ .site-footer { width: min(100% - calc(var(--gutter) * 2), var(--maxw)); margin: 2rem auto 2.5rem; color: var(--muted); font-size: var(--t-sm); border-top: 1px solid var(--line); padding-top: 1.5rem; } /* social brand-icon links (footer + contact) */ .social-links { list-style: none; margin: 0; padding: 0; display: flex; gap: .55rem; flex-wrap: wrap; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--ink); border: 1px solid var(--line); background: color-mix(in oklab, var(--card, #fff) 70%, transparent); transition: color .18s ease, border-color .18s ease, transform .18s ease, background .18s ease; } .social-links a:hover { color: var(--accent-ink, #fff); background: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .social-links svg { display: block; } .footer-social { margin: 0 0 1rem; } .contact-social { margin: 1.1rem 0 0; } @media (prefers-reduced-motion: reduce) { .social-links a { transition: color .18s ease, background .18s ease; } .social-links a:hover { transform: none; } } .footer-legal { margin: .4rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; } .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; } .footer-legal a:hover { color: var(--ink); text-decoration: underline; } /* ---------- Legal document (Impressum / Datenschutz) ---------- */ .block-legaldoc .block-inner { max-width: 70ch; } .legaldoc h1 { font-size: var(--t-2xl); letter-spacing: -0.02em; margin: 0 0 1.2rem; } .legaldoc h2 { font-size: var(--t-lg); margin: 2rem 0 .5rem; } .legaldoc p { color: color-mix(in oklch, var(--ink) 86%, var(--muted)); line-height: 1.6; margin: 0 0 1rem; } .legaldoc .ld-strong { font-weight: 640; color: var(--ink); } .legaldoc a { color: var(--accent-deep, var(--ink)); } .legaldoc .ld-stand { font-size: var(--t-sm); color: var(--muted); margin-top: 1.6rem; } .legaldoc-todo { background: #fff8ec; border: 1px solid #f0d9a8; color: #6b5417; border-radius: 10px; padding: .7rem 1rem; font-size: .9rem; margin-bottom: 1.2rem; } /* ---------- Hero art (custom SVG when no photo) ---------- */ .hero-media { position: relative; } .hero-art { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius); display: block; box-shadow: 0 40px 80px -50px color-mix(in oklch, var(--ink) 60%, transparent); } @media (max-width: 60rem) { .hero-art { aspect-ratio: 16 / 11; } } /* ---------- Film grain — subtle editorial texture ---------- */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: .04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Image treatment ---------- */ /* Full colour by default (beauty/gastro/most SMEs sell the colour of their work). */ .media-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); transition: filter .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); } /* Editorial grayscale (architecture/tech/legal) only when the theme opts in. */ [data-images="editorial"] .media-img { filter: grayscale(1) contrast(1.04); } [data-images="editorial"] .media-img:hover { filter: grayscale(0) contrast(1); } [data-palette="noir"] body::after, body[data-palette="noir"]::after { mix-blend-mode: screen; opacity: .06; } /* ---------- Image + Text ---------- */ .it-grid { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 60rem) { /* editorial asymmetry: the tall image takes the narrower column, text the wider one. Flip-safe — the columns swap with the flip so the media stays the narrower side on either hand. */ .it-grid { grid-template-columns: 5fr 7fr; } .block-imagetext.flip .it-grid { grid-template-columns: 7fr 5fr; } .block-imagetext.flip .it-media { order: 2; } /* no image → single column, never an empty media panel */ .block-imagetext.no-media .it-grid { grid-template-columns: 1fr; } } .it-media { overflow: clip; border-radius: var(--radius); } .it-media img { aspect-ratio: 4 / 5; } .it-media:hover .media-img { transform: scale(1.03); } .block-imagetext h2 { font-weight: 680; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; } .it-body p { color: var(--muted); font-size: var(--t-lg); max-width: 46ch; } /* Stacked variant (editor "Gestapelt — Titel über Bild"): title above a full-width image, text below. */ .block-imagetext.is-stack > .block-inner { max-width: 920px; } .block-imagetext.is-stack .it-media { margin-top: 1.1rem; } .block-imagetext.is-stack .it-media img { aspect-ratio: auto; width: 100%; height: auto; } .block-imagetext.is-stack .it-body { margin-top: 1.1rem; } .block-imagetext.is-stack .it-body p { max-width: 70ch; } /* ---------- Single image ---------- */ .single-image { margin: 0; } .single-image img { width: 100%; border-radius: var(--radius); display: block; } .single-image figcaption { margin-top: .6rem; font-size: var(--t-sm); color: var(--muted); } /* ---------- Gallery ---------- */ .gallery-grid { display: grid; gap: clamp(.8rem, 2vw, 1.4rem); grid-template-columns: 1fr; } @media (min-width: 48rem) { .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-grid .g-wide { grid-column: 1 / -1; } } .g-item { margin: 0; overflow: clip; border-radius: var(--radius); cursor: zoom-in; } .g-item img { aspect-ratio: 3 / 4; } .g-item.g-wide img { aspect-ratio: 16 / 9; } .g-item:hover .media-img { transform: scale(1.03); } .g-item figcaption { margin-top: .6rem; font-size: var(--t-sm); color: var(--muted); } .g-item[hidden] { display: none; } /* Masonry funnel — CSS columns (grid masonry not yet baseline 2026) */ .gallery-grid.is-masonry { display: block; column-count: 2; column-gap: clamp(.8rem, 2vw, 1.4rem); } @media (min-width: 48rem) { .gallery-grid.is-masonry { column-count: 3; } } @media (min-width: 75rem) { .gallery-grid.is-masonry { column-count: 4; } } .is-masonry .g-item { break-inside: avoid; margin-bottom: clamp(.8rem, 2vw, 1.4rem); } .is-masonry .g-item img { aspect-ratio: auto; height: auto; } /* Carousel — scroll-snap track + buttons */ .gallery-carousel { position: relative; } .gc-track { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: .4rem; } .gc-track::-webkit-scrollbar { display: none; } .gc-track .g-item { flex: 0 0 clamp(220px, 42%, 360px); scroll-snap-align: start; } .gc-track .g-item img { aspect-ratio: 4 / 5; } .gc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in oklch, var(--paper, #fff) 88%, transparent); backdrop-filter: blur(4px); cursor: pointer; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; color: var(--ink); } .gc-prev { left: -6px; } .gc-next { right: -6px; } .gc-nav:disabled { opacity: .35; cursor: default; } @media (max-width: 40rem) { .gc-track .g-item { flex-basis: 78%; } } /* Marquee — continuous CSS loop (track items are duplicated for seamlessness) */ .gallery-marquee { overflow: hidden; } .gm-track { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); width: max-content; animation: gmScroll 42s linear infinite; } .gallery-marquee:hover .gm-track { animation-play-state: paused; } .gm-track .g-item { flex: 0 0 auto; width: clamp(200px, 26vw, 300px); margin: 0; } .gm-track .g-item img { aspect-ratio: 4 / 5; } @keyframes gmScroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .gm-track { animation: none; } .gallery-marquee { overflow-x: auto; } .gm-track .is-clone { display: none; } } /* List — image + caption rows */ .gallery-list { display: grid; gap: clamp(1rem, 3vw, 1.8rem); } .gallery-list .g-item { display: grid; gap: .8rem; } @media (min-width: 40rem) { .gallery-list .g-item { grid-template-columns: clamp(220px, 32%, 340px) 1fr; align-items: center; column-gap: 1.6rem; } } .gallery-list .g-item figcaption { margin: 0; font-size: var(--t-base); color: color-mix(in oklch, var(--ink) 84%, var(--muted)); } /* Filter chips */ .gal-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1rem, 3vw, 1.8rem); } .gal-chip { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent); background: transparent; color: var(--muted); border-radius: 999px; padding: .42rem 1rem; font-size: var(--t-sm); font-weight: 500; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease; } .gal-chip:hover { color: var(--ink); } .gal-chip.is-active { background: var(--accent, var(--ink)); border-color: var(--accent, var(--ink)); color: var(--accent-ink, #fff); } /* Lightbox */ .pwb-lb { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; /* warm, soft scrim (not a harsh black box) so the photo just lifts off the page. Anchored to a fixed warm-dark — NOT --ink — so the lightbox always dims the page, including on the noir palette where --ink is near-white. */ background: color-mix(in oklch, oklch(22% 0.02 40) 62%, transparent); backdrop-filter: blur(10px) saturate(1.1); padding: clamp(1rem, 4vw, 3rem); } .pwb-lb.is-open { display: flex; animation: lbIn .22s ease; } .pwb-lb.no-anim { animation: none; } .pwb-lb.no-anim .lb-stage img { animation: none; } @keyframes lbIn { from { opacity: 0; } } .lb-stage { margin: 0; max-width: min(100%, 1100px); display: grid; gap: .8rem; justify-items: center; } .lb-stage img { max-width: 100%; max-height: 82svh; width: auto; height: auto; border-radius: calc(var(--radius) * 1.2); display: block; box-shadow: 0 40px 120px -40px color-mix(in oklch, oklch(12% 0.02 40) 72%, transparent); animation: lbZoom .32s cubic-bezier(.2,.8,.2,1); } @keyframes lbZoom { from { opacity: 0; transform: scale(.93); } } .lb-stage figcaption { color: #e9ecf3; font-size: var(--t-sm); text-align: center; } .lb-x, .lb-nav { position: absolute; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; transition: background-color .15s ease; } .lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.24); } .lb-x { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); } .lb-prev { left: clamp(.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); } .lb-next { right: clamp(.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); } @media (max-width: 36rem) { .lb-nav { bottom: 1rem; top: auto; transform: none; } .lb-prev { left: 1rem; } .lb-next { right: 1rem; } } @media (prefers-reduced-motion: reduce) { .pwb-lb { animation: none; } } /* ---------- Statement (editorial pull-quote) ---------- */ .block-statement .block-inner { max-width: 980px; } .statement-quote { position: relative; font-weight: 620; font-size: var(--t-3xl); line-height: 1.13; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } /* editorial pull-quote: an oversized accent quote glyph as a watermark behind the text (z-index 0, the quote text sits above it). Replaces the small inline quote marks that statement.php no longer emits. */ .statement-quote::before { content: "\201C"; position: absolute; left: -.04em; top: -.46em; z-index: 0; font-family: var(--font-display); font-weight: 700; font-size: 4.6em; line-height: 1; /* mixed toward paper so it stays visible on the dark ink beat even when the brand accent is dark (e.g. a navy accent vanished on the near-black panel); keeps the brand hue. */ color: color-mix(in oklch, var(--accent) 58%, var(--paper)); opacity: .32; pointer-events: none; } .statement-quote > span { position: relative; z-index: 1; } .statement-by { margin: 1.5rem 0 0; color: var(--muted); font-size: var(--t-base); } .statement-author { color: var(--ink); font-weight: 600; } /* ---------- Stats ---------- */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(1.8rem, 4vw, 2.8rem); } @media (max-width: 40rem) { .stats-row { grid-template-columns: 1fr; gap: 1.4rem; } } .stat-value { font-size: var(--t-3xl); font-weight: 720; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .stat-label { margin: .5rem 0 0; color: var(--muted); font-size: var(--t-base); } .btn-primary { will-change: transform; } /* ---------- Scroll reveal (progressive enhancement) ---------- */ .reveal-on .block { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .reveal-on .block.in-view { opacity: 1; transform: none; } /* Hero is above the fold — never hide it (LCP + no flash). */ .reveal-on main > .block:first-child { opacity: 1; transform: none; transition: none; } /* ---------- Scroll choreography ---------- Two progressive enhancements, both off under reduced-motion (this whole block is no-preference gated; reveal.js also omits .reveal-on under reduce / no-JS, so children below stay fully visible without it — never a stuck opacity:0). */ @media (prefers-reduced-motion: no-preference) { /* (a) Per-child stagger: grid children rise in sequence once their block enters view. Keyed off the same .reveal-on/.in-view that reveal.js already drives. Driven by a keyframe ANIMATION (not transition) so we never clobber a card's own `transition`. fill-mode:backwards holds the hidden `from` during the stagger delay, releasing afterwards (opacity:1 comes from the cascade, not from fill). .bento-grid is deliberately EXCLUDED: its cards own a transform-based cursor-tilt (card-fx / fx.js) and a transform keyframe here would fight that interaction — bento keeps its block-level reveal + tilt instead. features-grid/steps-list have no such transform interaction, so the rise is safe there. */ /* P5/E2 — .sx-cards und .sx-stats sind seit 2026-08-03 mit dabei. Bis dahin galt der Stagger NUR fuer die Legacy-Container .features-grid/.steps-list; das neue sx-System hatte also WENIGER Choreografie als das, was es ersetzt hat: eine ganze Bildschirmseite mit acht Karten fadete als EIN Klotz ein. .sx-card traegt zwar eine eigene transform-Transition (Hover-Lift), aber keine dauerhafte JS-Interaktion wie .bento-card (card-fx/fx.js) — die Animation laeuft einmal ab und gibt den Transform danach wieder frei, der Hover funktioniert unveraendert. Genau deshalb bleibt .bento-grid weiter aussen vor. */ .reveal-on :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > * { opacity: 0; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > * { opacity: 1; animation: staggerRise .6s cubic-bezier(.2,.8,.2,1) backwards; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > :nth-child(2) { animation-delay: .05s; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > :nth-child(3) { animation-delay: .1s; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > :nth-child(4) { animation-delay: .15s; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > :nth-child(5) { animation-delay: .2s; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > :nth-child(6) { animation-delay: .25s; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > :nth-child(7) { animation-delay: .3s; } .reveal-on .in-view :is(.features-grid, .steps-list, .sx-cards, .sx-stats) > :nth-child(n+8) { animation-delay: .35s; } /* (b) Hero-media parallax — native scroll-driven, gated by @supports (Chrome/Edge; others simply keep the static position). translateY drift stays inside the hero's centred whitespace, so overflow:clip never shows a gap. animation-timeline longhands avoid the `animation`-shorthand reset-to-auto gotcha. */ @supports (animation-timeline: scroll()) { .block-hero .hero-media { animation-name: heroParallax; animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; animation-timeline: scroll(root block); animation-range: 0 100vh; } } } @keyframes staggerRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes heroParallax { from { transform: translateY(0); } to { transform: translateY(34px); } } /* ---------- Text effects ---------- */ .fx-gradient { background: linear-gradient(100deg, var(--accent-deep), var(--accent), var(--accent-soft), var(--accent)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxgrad 8s linear infinite; } @keyframes fxgrad { to { background-position: 250% 0; } } .fx-shiny { background: linear-gradient(100deg, var(--ink) 42%, var(--accent-soft) 50%, var(--ink) 58%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxshiny 5s linear infinite; } @keyframes fxshiny { to { background-position: -250% 0; } } /* Der Systemwunsch «weniger Bewegung» erreichte diese beiden bis 07.08. NICHT: `fx.js` steigt bei reduced-motion aus, aber die Klasse steht im Markup (blocks/hero.php, props.fx) und die Animation steckt im CSS. Betrifft im Bestand 3 Sites — primeweb-gmbh (shiny), studio-grauwerk und trattoria-sole (gradient). Aufgefallen bei der Frage, ob die Anhalten-Bedienung bei reduced-motion ueberhaupt noch etwas anzuhalten haette. Sie hatte. `animation: none` friert die Position ein, der Verlauf bleibt sichtbar — der Text verschwindet also nicht (background-clip: text malt weiter). */ @media (prefers-reduced-motion: reduce) { .fx-gradient, .fx-shiny { animation: none; } } .fx-word { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } .fx-reveal.in .fx-word { opacity: 1; transform: none; } /* ---------- Bento ---------- */ .block-bento .features-heading { max-width: 22ch; } .bento-grid { display: grid; gap: clamp(.8rem,2vw,1.2rem); grid-template-columns: 1fr; margin-top: clamp(1.5rem,3vw,2.5rem); } @media (min-width: 48rem) { .bento-grid { grid-template-columns: repeat(3, 1fr); } .bento-card.is-big { grid-column: span 2; grid-row: span 2; } } .bento-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(158deg, var(--surface), color-mix(in oklch, var(--paper) 60%, var(--surface))); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.15); padding: clamp(1.4rem,2.6vw,2.1rem); box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; } .bento-card:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--accent) 38%, var(--line)); box-shadow: 0 24px 44px -26px color-mix(in oklch, var(--accent) 55%, #000); } .feature-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in oklch, var(--accent) 13%, transparent); color: var(--accent-deep); margin-bottom: 1rem; } .feature-icon svg { width: 22px; height: 22px; } .bento-card h3 { margin: 0 0 .35rem; font-size: var(--t-lg); font-weight: 660; letter-spacing: -.012em; } .bento-card p { margin: 0; color: var(--muted); line-height: 1.55; } .bento-card.is-big h3 { font-size: var(--t-2xl); margin-top: .1rem; } .bento-card.is-big p { font-size: var(--t-lg); max-width: 34ch; } /* fill the large tile so it never reads as empty */ .bento-card.is-big::after { content: ""; position: absolute; right: -18%; bottom: -32%; width: 65%; height: 78%; background: radial-gradient(circle at 70% 70%, color-mix(in oklch, var(--accent) 24%, transparent), transparent 68%); pointer-events: none; } .card-fx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 0; background: radial-gradient(15rem 15rem at var(--mx,50%) var(--my,50%), color-mix(in oklch, var(--accent) 22%, transparent), transparent 60%); } .card-fx:hover::before { opacity: 1; } .bento-card > * { position: relative; z-index: 1; } .bento-card.is-link { text-decoration: none; color: inherit; } .bento-more { display: inline-block; margin-top: auto; padding-top: 1rem; color: var(--accent-deep); font-weight: 640; font-size: .92rem; } .bento-card.is-link:hover .bento-more { text-decoration: underline; } /* ---------- Marquee ---------- */ .block-marquee { padding-block: clamp(2rem,4vw,3rem); } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: inline-flex; gap: clamp(2rem,5vw,4rem); white-space: nowrap; animation: marquee 30s linear infinite; will-change: transform; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee-item { font-weight: 640; font-size: clamp(1.1rem,2.5vw,1.6rem); color: var(--muted); letter-spacing: -.01em; } /* Dieselbe Luecke wie oben bei .fx-*: die Laufschrift lief auch bei reduced-motion weiter. `overflow-x: auto` gehoert dazu, sonst waere die zweite Haelfte des Bandes hinter dem Beschnitt unerreichbar — genau die Loesung, die `.gallery-marquee` weiter oben schon hat. */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee { overflow-x: auto; } } /* ---------- Steps ---------- */ .steps-list { list-style: none; padding: 0; margin: clamp(1.5rem,3vw,2.5rem) 0 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem,3vw,2.4rem); align-items: baseline; padding: clamp(1.3rem,3vw,2rem) 0; border-top: 1px solid var(--line); } .step:last-child { border-bottom: 1px solid var(--line); } .step-no { font-size: var(--t-xl); font-weight: 720; color: var(--accent-2, var(--accent-deep)); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .step h3 { margin: 0 0 .3rem; font-size: var(--t-lg); font-weight: 640; } .step p { margin: 0; color: var(--muted); max-width: 52ch; } /* ---------- Accordion ---------- */ .block-accordion .block-inner { max-width: 760px; } .acc-list { display: grid; gap: .6rem; margin-top: clamp(1rem, 3vw, 1.8rem); } .acc-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; background: color-mix(in oklch, var(--paper, #fff) 88%, transparent); } .acc-q { cursor: pointer; padding: 1rem 1.2rem; font-weight: 620; font-size: var(--t-base); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .acc-q::-webkit-details-marker { display: none; } .acc-q::after { content: "+"; font-weight: 400; font-size: 1.4em; line-height: 1; color: var(--accent-deep, var(--muted)); transition: transform .2s ease; } .acc-item[open] .acc-q::after { content: "\2013"; } .acc-a { padding: 0 1.2rem 1.2rem; color: color-mix(in oklch, var(--ink) 82%, var(--muted)); line-height: 1.6; } @media (prefers-reduced-motion: no-preference) { .acc-item[open] .acc-a { animation: accIn .25s ease; } } @keyframes accIn { from { opacity: 0; transform: translateY(-4px); } } /* ---------- Embed ---------- */ .block-embed h2 { font-weight: 680; font-size: var(--t-2xl); letter-spacing: -.02em; line-height: 1.1; margin: 0; } .embed-wrap { margin-top: clamp(1.2rem,3vw,2rem); } /* aspect-ratio reserves space (kills CLS) + a min-height floor keeps booking/app widgets usable at our narrow container width; maps are width-proportional and get a clean 16:9 via .is-map below. */ .embed-wrap iframe { width: 100%; aspect-ratio: 16 / 10; min-height: 520px; border: 0; border-radius: var(--radius); display: block; } .embed-wrap img, .embed-wrap video { max-width: 100%; border-radius: var(--radius); } .embed-frame { margin-top: clamp(1.2rem,3vw,2rem); border-radius: var(--radius); overflow: clip; background: color-mix(in oklch, var(--ink) 5%, transparent); } .embed-frame iframe { width: 100%; aspect-ratio: 16 / 10; min-height: 560px; border: 0; display: block; } .block-embed.is-map .embed-frame iframe { aspect-ratio: 16 / 9; min-height: 0; height: auto; } .embed-err { margin-top: 1rem; color: var(--danger, #b3261e); font-size: var(--t-sm); } /* Premium location card — shown for Google Maps when the value isn't an embeddable URL (address or share-link), since Google refuses to frame those. Always renders, never blank. */ .embed-map { margin-top: clamp(1.2rem,3vw,2rem); display: grid; justify-items: center; gap: .7rem; text-align: center; padding: clamp(1.6rem,4vw,2.6rem); border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in oklch, var(--ink) 4%, transparent); } .embed-map-pin { font-size: 2rem; line-height: 1; } .embed-map-label { margin: 0; font-weight: 600; color: var(--ink); } /* C5 — DSG consent gate: click-to-load card for third-party iframes/scripts (Calendly, Shore, Maps embed, …). The real embed sits inert in a