/*
Theme Name: Oscar Yapı Child
Theme URI: https://arjanbau.de
Description: Child theme of Oscar Yapı. Applies the "Werkstoff: Concrete & Signal Green" design system — self-hosted fonts (Archivo + Public Sans), graphite/concrete/signal-green palette, sharp architectural corners, no gradients, no thin card borders. DSGVO-compliant (zero third-party requests). Covers both the standard and orphan template vocabularies.
Author: Oscar Yapı
Template: oscaryapi-theme
Version: 2.2.0
Text Domain: oscaryapi
Domain Path: /languages
*/

/* ==========================================================================
   Oscar Yapı Child v2.0 — Werkstoff: Concrete & Signal Green
   --------------------------------------------------------------------------
   DESIGN READ: 35-year German construction firm in Ludwigsburg/Stuttgart.
   Material-honest, industrial, built-to-last. Concrete off-white surfaces,
   graphite ink, signal-green accent. Sharp 2-3px corners. No gradients, no
   startup-orange, no thin gray card borders, no Inter.

   TYPE:        Archivo (display, 600-900) + Public Sans (body, 400-700).
                Both self-hosted — DSGVO compliant.
   LEGAL:       WCAG 2.2 AA / BITV 2.0 contrast targets throughout.

   This file is the authoritative design system: the child dequeues the
   parent's styles entirely, so every component is defined here. It covers
   BOTH template vocabularies:
     - Standard: .hero / .section / .container / .leistungen-grid / etc.
     - Orphan:   .wrap / .hero--image / .hero--top / .gallery / .feat-grid
                 / .hero-meta / .hero-bottom / .section--image / etc.
   ========================================================================== */


/* ==========================================================================
   1. SELF-HOSTED FONTS (DSGVO — no third-party requests)
   ========================================================================== */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url('assets/fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/publicsans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/publicsans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. DESIGN TOKENS — Werkstoff (Concrete & Signal Green)
   --------------------------------------------------------------------------
   PALETTE CHANGE 2026-08-19 — client request: "negru, verde și alb"
   (black, green, and white). The previous "Concrete & Signal Green" design
   system (graphite ink + aged-amber accent) has been retired and replaced
   with a stricter black/green/white palette. The variable *names* are
   kept (--accent, --ink-NNN, etc.) so the rest of the stylesheet and the
   parent tokens don't need to change — only the hex/rgba values.

   Mapping
   -------
     --ink-900    #14171a → #000000  pure black (utility bar, footer,
                                        hero--cta, dark sections)
     --ink-800    #1f2326 → #0a0a0a  brand black (headings, body text,
                                        nav, buttons)
     --ink-700    #2d3338 → #0a0a0a  brand black (used for "strong" text
                                        emphasis and lang-switcher idle
                                        colour — pulls it up to match
                                        the new black)
     --ink-600/500/400/300  unchanged — these are the text-hierarchy
                                        grays (body copy, captions). They
                                        stay cool-graphite because the
                                        brief asked for "black, green,
                                        white" as the *brand* palette, not
                                        as a full monochrome design.
     --accent           #a8762a → #16a34a  brand green
     --accent-bright    #b8841f → #22c55e  lighter green (hero eyebrows,
                                            focus halos)
     --accent-deep      #8a5e1f → #15803d  darker green (hover, pressed)
     --accent-soft      rgba(168,118,42,0.10) → rgba(22,163,74,0.10)
     --accent-line      rgba(168,118,42,0.35) → rgba(22,163,74,0.35)
     --accent-500       #b08a3e → #22c55e  (lang-switcher active fallback)
     --accent-600       #8c6a2a → #15803d  (lang-switcher hover fallback)

   Concrete and Paper surfaces are unchanged (the off-white concrete is
   already a near-white surface, which the brief accepts as "white").
   The semantic success token is a separate, lighter green (#3f7d4e)
   kept distinct from the new --accent (#16a34a); they read as
   "status badge" vs. "brand accent" and do not collide visually.
   ========================================================================== */

:root {
    /* Type families */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-head: var(--font-display);
    --font-base-size: 17px;

    /* Ink scale — top three are the black end (brand "negru"), the lower
       four are the text-hierarchy grays.

       CONTRAST FIX 2026-09-24: --ink-300/400 used to both be #646c73 and
       --ink-700/800 both #0a0a0a, which collapsed the hierarchy AND left
       --ink-300 at 4.38:1 on --concrete-2 (below WCAG AA 4.5:1). Every gray
       below is now a distinct step that clears 4.5:1 on the darkest light
       surface in the system (--concrete-2 #e6e9eb):

           ink-300 #5f666d = 4.77:1    ink-500 #4d545a = 6.30:1
           ink-400 #565d64 = 5.47:1    ink-600 #454c52 = 7.15:1  (body)

       Values are cool graphite, matching the black/green/white brief. */
    --ink-900: #000000;
    --ink-800: #0a0a0a;
    --ink-700: #0a0a0a;
    --ink-600: #454c52;
    --ink-500: #4d545a;
    --ink-400: #565d64;
    --ink-300: #5f666d;

    /* Brand accent — green (was accent)

       THE ACCENT IS TWO GREENS, NOT ONE. The brand green #16a34a is a
       *fill / dark-surface* colour: it is only 2.70:1 on --concrete-2 and
       3.30:1 on white, so it can never carry text or white-on-green text.
       Anything that has to READ on a light surface uses --accent-deep.

       Verified ratios (WCAG 2.2 AA needs 4.5:1 normal / 3:1 large+graphic):

                        on concrete-2   on white   white ON it   on black
         --accent             2.70         3.30        3.30        6.37
         --accent-bright      1.87         2.28        2.28        9.22
         --accent-deep        5.44         6.63        6.63        3.17
         --accent-darker      7.47         9.11        9.11        2.30

       Rule of thumb:
         light surface + green text  -> --accent-deep  (hover --accent-darker)
         light surface + green fill  -> --accent-deep with --paper text
         dark  surface + green text  -> --accent-bright
         hairlines / chips / icons   -> --accent (graphic, 3:1 carve-out) */
    --accent:        #16a34a;
    --accent-bright: #22c55e;
    --accent-deep:   #0f6b31;
    --accent-darker: #14532d;
    --accent-soft:   rgba(22, 163, 74, 0.10);
    --accent-line:   rgba(22, 163, 74, 0.35);
    --accent-500:    #22c55e;
    --accent-600:    #0f6b31;

    /* Concrete surfaces — material off-whites (unchanged, near-white) */
    --concrete:    #eef0f1;
    --concrete-2:  #e6e9eb;
    --paper:       #ffffff;
    --paper-warm:  #f7f5f1;

    /* Hairlines */
    --line:        rgba(0, 0, 0, 0.12);
    --line-strong: rgba(0, 0, 0, 0.22);
    --line-light:  rgba(255, 255, 255, 0.10);
    /* Form-control boundary. Deliberately NOT a hairline: an interactive
       boundary needs 3:1 against its surroundings (WCAG 1.4.11). #767676
       measures 3.88:1 against --concrete (#eef0f1). */
    --line-input:  #767676;
    --rule:        1px solid var(--line);

    /* Semantic — status UI */
    --success:     #3f7d4e;
    --success-soft: rgba(63, 125, 78, 0.10);
    --error:       #b23b3b;
    --error-soft:  rgba(178, 59, 59, 0.07);

    /* Radii — sharp architectural corners */
    --r-sm:   2px;
    --r-md:   3px;
    --r-lg:   4px;
    --r-full: 999px;

    /* Shadows — minimal, structural (now keyed off pure black) */
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 20px -12px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.08), 0 20px 44px -18px rgba(0, 0, 0, 0.30);

    /* Spacing scale (rem) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-20: 5rem;

    /* Motion */
    --t-fast: 120ms ease;
    --t-base: 180ms cubic-bezier(0.2, 0, 0, 1);
    --t-slow: 320ms cubic-bezier(0.2, 0, 0, 1);

    /* Layout */
    --container-max: 1240px;
    --container-pad: 1.5rem;
    --header-height: 74px;

    /* Backward-compat aliases — templates reference these parent vars */
    --oscaryapi-primary: var(--ink-800);
    --oscaryapi-primary-dark: var(--ink-900);
    --oscaryapi-secondary: var(--ink-700);
    --oscaryapi-accent: var(--accent);
    --oscaryapi-accent-hover: var(--accent-deep);
    --oscaryapi-accent-soft: var(--accent-soft);
    --oscaryapi-dark: var(--ink-900);
    --oscaryapi-gray: var(--ink-500);
    --oscaryapi-gray-dark: var(--ink-600);
    --oscaryapi-light: var(--concrete);
    --oscaryapi-lighter: var(--concrete-2);
    --oscaryapi-white: var(--paper);
    --oscaryapi-border: var(--line);
    --oscaryapi-border-strong: var(--line-strong);
    --oscaryapi-success: var(--success);
    --oscaryapi-success-soft: var(--success-soft);
    --oscaryapi-error: var(--error);
    --oscaryapi-error-soft: var(--error-soft);
    --font-serif: var(--font-display);

    /* Motion gate (overridden in prefers-reduced-motion block below).
       Use var(--motion-multiplier) in transition durations so motion-
       sensitive users get a 0ms transition without each rule needing
       its own media query. */
    --motion-multiplier: 1;

    /* Layout perf hints — set in §16 below for off-screen sections. */
    --cv-auto: auto;
}

/* Tell the UA that we support both light and dark color schemes so
   form controls, scrollbars, and the canvas-color match our palette. */
:root {
    color-scheme: light dark;
}

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


/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-base-size);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    line-height: 1.65;
    color: var(--ink-600);
    background-color: var(--concrete);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-weight: 400;
    text-wrap: pretty;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

button { font-family: inherit; cursor: pointer; }

a {
    /* WCAG AA: --accent (#16a34a) is 3.30:1 on white and 2.70:1 on
       --concrete-2 — it FAILS even the 3:1 "large text" bar, so it must
       never be a text colour on a light surface. --accent-deep (#0f6b31)
       is 6.63:1 on white / 5.44:1 on --concrete-2 and PASSES AA.
       --accent is still fine for hairlines, chips and icons (the 3:1
       "graphical object" carve-out) and for green text on dark surfaces. */
    color: var(--accent-deep);
    text-decoration: none;
    transition: color var(--t-base);
    text-underline-offset: 3px;
}
a:hover { color: var(--accent-darker); text-decoration: underline; }

::selection {
    background: var(--ink-800);
    color: var(--accent-bright);
}

/* Accessibility */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus {
    position: absolute;
    top: 1rem; left: 1rem;
    width: auto; height: auto;
    padding: 0.5rem 1rem;
    clip: auto;
    /* --accent-deep, not --accent: white on #16a34a is 3.30:1 (fails AA),
       white on #0f6b31 is 6.63:1 (passes). */
    background: var(--accent-deep);
    color: var(--paper);
    z-index: 10000;
    border-radius: var(--r-sm);
}
.skip-link {
    position: absolute;
    top: -100px; left: 1rem;
    background: var(--accent-deep);
    color: var(--paper);
    padding: 0.5rem 1rem;
    border-radius: var(--r-sm);
    z-index: 100000;
    transition: top var(--t-base);
    text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Concrete texture — subtle material speckle */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0);
    background-size: 22px 22px;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.08;
    color: var(--ink-800);
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
    text-wrap: balance;
}
h1 {
    font-size: clamp(2.25rem, 4.5vw + 1rem, 3.75rem);
    font-weight: 900;
    letter-spacing: -0.03em;
}
h2 {
    font-size: clamp(1.75rem, 2.6vw + 1rem, 2.5rem);
    font-weight: 800;
}
h3 { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; font-weight: 700; }
h5 { font-size: 0.9375rem; font-weight: 700; }
h6 {
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--ink-500);
}

p { margin-bottom: var(--s-4); }
p:last-child { margin-bottom: 0; }
small { font-size: 0.8125rem; color: var(--ink-500); }
strong { font-weight: 700; color: var(--ink-700); }

/* Eyebrow — tracked-out industrial label */
.eyebrow,
.hero-meta {
    font-family: var(--font-display);
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    font-weight: 700;
    /* --accent-deep: eyebrows sit on --concrete/-2 where --accent is 2.70:1. */
    color: var(--accent-deep);
    margin-bottom: var(--s-3);
    padding-bottom: 0;
}
.eyebrow::after,
.hero-meta::after { content: none; }

/* Dark surfaces need the BRIGHT green. --accent-deep (#0f6b31) is the
   light-surface text green and falls to 2.99:1 on --ink-800; --accent-bright
   (#22c55e) is ~8.4:1 there. Same two-tone rule as the focus-ring override
   below. Covers every dark container that can hold an eyebrow. */
.hero .eyebrow,
.hero .hero-meta,
.hero--top .eyebrow,
.hero--image .eyebrow,
.hero--page .eyebrow,
.section--dark .eyebrow,
.section--dark .hero-meta,
.section--image .eyebrow,
.utility-bar .eyebrow,
.site-footer .eyebrow,
.oscaryapi-cta-band .eyebrow,
.hours-line .eyebrow {
    color: var(--accent-bright);
}

/* Lead paragraph */
.lead {
    font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
    color: var(--ink-500);
    line-height: 1.55;
    max-width: 60ch;
}


/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.container,
.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    position: relative;
    z-index: 1;
}
.wrap--narrow { max-width: 760px; }

.section {
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
    z-index: 1;
}
.section--gray,
.section--soft {
    background-color: var(--concrete-2);
}
/* Subtle background image for the trust/credentials section. */
.section--credentials {
    background-color: var(--concrete-2);
    background-image:
        linear-gradient(rgba(238, 240, 241, 0.94), rgba(238, 240, 241, 0.97)),
        image-set(url("assets/images/hero/tools-flatlay-1200.avif") type("image/avif"), url("assets/images/hero/tools-flatlay-1200.webp") type("image/webp"), url("assets/images/hero/tools-flatlay.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
@media (max-width: 720px) {
    .section--credentials { background-attachment: scroll; }
}
.section--dark {
    background-color: var(--ink-800);
    color: rgba(255, 255, 255, 0.82);
    color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--paper); }

.section-title {
    text-align: center;
    margin-bottom: var(--s-3);
    letter-spacing: -0.015em;
}
/* Any h2.section-title that follows a grid gets strong top spacing.
   This fixes "Warum Oscar Yapı?" and similar in-page subsection dividers
   that otherwise sit glued to the cards above. */
.leistungen-grid + h2,
.leistungen-grid + .section-title,
.promises-grid + h2,
.promises-grid + .section-title,
.references-grid + h2,
.references-grid + .section-title,
.partner-grid + h2,
.overview-grid + h2,
.overview-grid + .section-title,
.region-grid + h2,
.benefits-grid + h2,
.benefits-grid + .section-title,
.testimonials-grid + h2,
.testimonials-grid + .section-title,
.why-grid + h2,
.why-grid + .section-title {
    margin-top: var(--s-12);
}

/* Generic in-flow h2 inside .section — keeps titles separated from prior
   blocks that don't carry their own top spacing. */
.section h2:not(.eyebrow):not(.section-title):not(.process-step__title) {
    margin-top: var(--s-8);
}
.section-subtitle {
    text-align: center;
    color: var(--ink-500);
    max-width: 600px;
    margin: 0 auto var(--s-12);
    font-size: 1.0625rem;
}


/* ==========================================================================
   6. BUTTONS — sharp industrial, flat offset press
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.90625rem 1.875rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
    user-select: none;
    white-space: nowrap;
    position: relative;
}

.btn--primary {
    /* A11y: --accent (#16a34a) is 3.30:1 against white text — fails AA.
       --accent-deep (#0f6b31) gives the white label 6.63:1. The default
       --accent remains for accents (icons, hairlines, chips). */
    background-color: var(--accent-deep);
    color: var(--paper);
    border-color: var(--accent-deep);
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--ink-800);
    border-color: var(--ink-800);
    color: var(--accent-bright);
    text-decoration: none;
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--accent);
}
.btn--primary:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.btn--secondary {
    background-color: transparent;
    color: var(--ink-800);
    border-color: var(--ink-800);
}
.btn--secondary:hover {
    background-color: var(--ink-800);
    color: var(--paper);
    text-decoration: none;
}

.btn--ghost {
    background: transparent;
    color: var(--ink-800);
    border-color: var(--line-strong);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
    background-color: var(--ink-800);
    border-color: var(--ink-800);
    color: var(--paper);
    text-decoration: none;
}

/* Ghost on photo / dark bg — white text, translucent border */
.btn--ghost-on-photo {
    background: transparent;
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.55);
    border-color: color-mix(in srgb, var(--paper) 55%, transparent);
}
.btn--ghost-on-photo:hover,
.btn--ghost-on-photo:focus-visible {
    background-color: rgba(255, 255, 255, 0.10);
    background-color: color-mix(in srgb, var(--paper) 10%, transparent);
    border-color: var(--paper);
    color: var(--paper);
    text-decoration: none;
}

/* Link variant */
.btn--link {
    padding: 0;
    background: transparent;
    /* Green text on a light surface -> --accent-deep (6.63:1), not --accent (3.30:1). */
    color: var(--accent-deep);
    border: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}
.btn--link:hover {
    color: var(--accent-darker);
    text-decoration-color: var(--accent-darker);
}

.btn--lg {
    padding: 1.0625rem 2.25rem;
    font-size: 0.875rem;
}
.btn--full { width: 100%; }

.btn .icon { flex-shrink: 0; transition: transform var(--t-base); }
.btn:hover .icon { transform: translateX(3px); }

.btn:disabled,
.btn.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn .btn__spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
}
.btn.is-loading .btn__label,
.btn.is-loading .btn__icon { display: none; }
.btn.is-loading .btn__spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Visible focus ring on EVERY focusable control (WCAG 2.4.7 + 2.4.13).
   Two tones so the ring clears 3:1 against both light and dark surfaces:
     light surfaces  -> --accent-deep    (5.44:1 on --concrete-2, 6.63:1 on white)
     dark  surfaces  -> --accent-bright  (9.22:1 on --ink-900)
   The old rule matched only 7 selector groups, so plain <a> (footer nav),
   .map-card__link, .contact-item__value and form inputs had no ring at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-deep);
    outline-offset: 2px;
}
.section--dark :focus-visible,
.section--image :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.utility-bar :focus-visible,
.hours-line :focus-visible,
.oscaryapi-cta-band :focus-visible,
.scroll-to-top:focus-visible,
.wa-float:focus-visible {
    outline-color: var(--accent-bright);
}


/* ==========================================================================
   7. UTILITY BAR + HEADER
   ========================================================================== */

.utility-bar {
    background-color: var(--ink-900);
    color: rgba(255, 255, 255, 0.7);
    color: color-mix(in srgb, var(--paper) 70%, transparent);
    font-size: 0.8125rem;
    border-bottom: 2px solid var(--accent);
}
.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding-block: 0.4375rem;
    min-height: 36px;
}
.utility-bar ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s-6);
    margin: 0;
    padding: 0;
}
.utility-bar a {
    color: rgba(255, 255, 255, 0.72);
    color: color-mix(in srgb, var(--paper) 72%, transparent);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition: color var(--t-base);
    text-decoration: none;
    min-height: 24px; /* WCAG 2.2 target size (2.5.8) */
}
.utility-bar a:hover { color: var(--accent-bright); text-decoration: none; }
.utility-bar .icon { opacity: 0.9; color: var(--accent-bright); }

.site-header {
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--t-base), border-color var(--t-base);
}
.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
    border-bottom-color: var(--line-strong);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    min-height: var(--header-height);
}

.site-branding { display: flex; align-items: center; gap: var(--s-3); }
.site-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* touch target; the logo text alone is ~22px tall */
    gap: 2px;
    font-family: var(--font-display);
    font-size: 1.3125rem;
    font-weight: 900;
    color: var(--ink-800);
    letter-spacing: -0.03em;
    line-height: 1;
    transition: color var(--t-base);
    text-decoration: none;
    text-transform: uppercase;
    /* The wordmark is only 22px tall — under the WCAG 2.5.8 24px minimum.
       The ::before overlay below stretches the hit area to ~46px with zero
       layout change (::after is already taken by the green square). */
    position: relative;
}
.site-logo::before {
    content: "";
    position: absolute;
    inset: -12px -10px;
}
.site-logo:hover { color: var(--ink-800); text-decoration: none; }
.site-logo::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--accent);
    margin-left: 1px;
    align-self: flex-end;
    margin-bottom: 5px;
}
.site-logo img { max-height: 46px; width: auto; }

.main-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
}
.main-nav__list > li > a {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 0.875rem;
    color: var(--ink-600);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    border-radius: var(--r-sm);
    transition: color var(--t-base);
    text-decoration: none;
    position: relative;
}
.main-nav__list > li > a:hover {
    color: var(--accent-darker);
    background-color: transparent;
    text-decoration: none;
}
.main-nav__list > .current-menu-item > a,
.main-nav__list > .current_page_item > a,
.main-nav a[aria-current="page"] {
    color: var(--ink-800);
    text-decoration: none;
}
.main-nav__list > .current-menu-item > a::after,
.main-nav__list > .current_page_item > a::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 0.25rem;
    height: 2px;
    background: var(--accent);
}
.main-nav__cta {
    background-color: var(--ink-800) !important;
    color: var(--paper) !important;
    padding: 0.5625rem 1.25rem !important;
    margin-left: var(--s-2);
    border-radius: var(--r-sm) !important;
    text-transform: uppercase;
    font-size: 0.8125rem !important;
    letter-spacing: 0.05em !important;
}
.main-nav__cta:hover {
    /* --accent-deep so the white label stays 6.63:1 (white on --accent is 3.30:1). */
    background-color: var(--accent-deep) !important;
    color: var(--paper) !important;
    text-decoration: none;
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: var(--s-2);
    color: var(--ink-800);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background-color var(--t-base);
}
.menu-toggle:hover { background-color: var(--concrete-2); }
.menu-toggle__icon {
    display: block;
    width: 24px;
    height: 18px;
    position: relative;
}
.menu-toggle__icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    background-color: currentColor;
    border-radius: 0;
    /* Was `transition: all` (skill anti-pattern: animates every property).
       These bars only move `top`, `transform` and `opacity`. */
    transition: top var(--t-base), transform var(--t-base), opacity var(--t-base);
}
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: 8px; }
.menu-toggle__icon span:nth-child(3) { top: 16px; }
.menu-toggle.is-active .menu-toggle__icon span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-toggle.is-active .menu-toggle__icon span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle__icon span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
body.nav-open { overflow: hidden; }


/* ==========================================================================
   8. HERO — solid graphite, no gradients
   --------------------------------------------------------------------------
   Three hero variants:
     .hero           — home + leistungen + CTA band (standard, left-aligned)
     .hero--page     — contact page (tighter)
     .hero--top      — blog/partner/impressum/index/single/404 (centered text band)
     .hero--image    — gewerblich/privat/einzugsgebiet/ueber-uns (photo-backed)
   ========================================================================== */

.hero,
.hero--top,
.hero--image {
    position: relative;
    background-color: var(--ink-800);
    color: var(--paper);
    overflow: hidden;
}
.hero,
.hero--top {
    padding: clamp(3.5rem, 9vw, 6rem) 0;
    text-align: left;
}
/* accent corner block — architectural detail */
.hero::before,
.hero--top::before,
.hero--image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 280px;
    height: 5px;
    background: var(--accent);
    pointer-events: none;
    z-index: 2;
}
/* Subtle concrete speckle on dark hero */
.hero::after,
.hero--top::after,
.hero--cta::after,
.motto-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
    background-size: 26px 26px;
}

/* Architectural blueprint grid — large, faint cross-hatch on right side of hero.
   Hints at the firm's planning discipline without becoming a busy texture.
   Uses two SVG data URIs: a vertical + horizontal line grid + a few cross marks. */
.hero .container::after,
.hero--top .wrap::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -12%;
    bottom: -10%;
    width: 60%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background-image:
        /* Cross marks (small + glyphs) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g stroke='%2316a34a' stroke-width='1' fill='none'><path d='M0 40h8 M72 40h8 M40 0v8 M40 72v8'/></g></svg>"),
        /* Major grid lines (every 80px) */
        linear-gradient(to right, rgba(22,163,74,0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(22,163,74,0.06) 1px, transparent 1px),
        /* Minor grid lines (every 20px) */
        linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 80px 80px, 20px 20px, 20px 20px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    mask-image: radial-gradient(circle at right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0) 75%);
    -webkit-mask-image: radial-gradient(circle at right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0) 75%);
}

/* Signature accent rule + year stamp on hero — like an architect's plate */
.hero .container::before,
.hero--top .wrap::before {
    content: "EST. 1991  ·  LUDWIGSBURG";
    position: absolute;
    top: -1.25rem;
    right: 0;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--accent);
    opacity: 0.85;
    pointer-events: none;
    z-index: 3;
    writing-mode: horizontal-tb;
}

/* On phones the stamp lands on top of the hero eyebrow; it is decoration only. */
@media (max-width: 640px) {
    .hero .container::before,
    .hero--top .wrap::before { content: none; }
}

.hero > .container,
.hero--top > .wrap { position: relative; z-index: 1; }
.hero > .container { max-width: 820px; }
.hero > .container > * { margin-inline: 0; }

.hero__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-bright);
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: var(--s-5);
}
.hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--accent);
    vertical-align: middle;
    margin-right: var(--s-3);
}
.hero__eyebrow::after { content: none; }

.hero h1 {
    color: var(--paper);
    margin-bottom: var(--s-5);
}
.hero h1:not([class]) { max-width: 820px; }
.hero__lead {
    font-size: clamp(1.0625rem, 0.7vw + 0.9rem, 1.25rem);
    color: rgba(255, 255, 255, 0.72);
    color: color-mix(in srgb, var(--paper) 72%, transparent);
    max-width: 660px;
    margin-bottom: var(--s-8);
    line-height: 1.6;
}

/* hero-meta (orphan eyebrow: "Referenzen · Gewerblich") */
.hero-meta {
    color: var(--accent-bright);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.hero-meta--center { justify-content: center; }

.hero .lead,
.hero--top .lead,
.hero--image .lead {
    color: rgba(255, 255, 255, 0.78);
    color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* hero--top: centered text band (blog, partner, legal, 404, single, index) */
.hero--top { text-align: center; padding-block: clamp(3rem, 7vw, 5rem); }
.hero--top > .wrap { max-width: 820px; }
.hero--top h1 { color: var(--paper); margin-inline: auto; }
.hero--top .lead { margin-inline: auto; }

/* hero--cta: closing CTA band */
.hero--cta {
    position: relative;
    background-color: var(--ink-900);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.92)),
        image-set(url("assets/images/hero/concrete-texture-1200.avif") type("image/avif"), url("assets/images/hero/concrete-texture-1200.webp") type("image/webp"), url("assets/images/hero/concrete-texture.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
    color: var(--paper);
    padding-block: clamp(3rem, 7vw, 5rem);
    text-align: center;
    overflow: hidden;
}
.hero--cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 280px;
    height: 5px;
    background: var(--accent);
    z-index: 2;
}
.hero--cta > .container { position: relative; z-index: 1; max-width: 800px; }
.hero--cta h2 {
    color: var(--paper);
    margin-bottom: var(--s-8);
    margin-inline: auto;
}

/* hero--page: contact page */
.hero--page {
    position: relative;
    background-color: var(--ink-800);
    color: var(--paper);
    padding: clamp(2.75rem, 5vw, 4rem) 0;
    text-align: left;
    overflow: hidden;
}
.hero--page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 220px;
    height: 5px;
    background: var(--accent);
    z-index: 2;
}
.hero--page > .container { position: relative; z-index: 1; max-width: 820px; }
.hero--page h1 { color: var(--paper); font-size: clamp(1.875rem, 2.5vw + 1rem, 2.75rem); }
.hero--page .hero__lead { margin-bottom: 0; }
.hero--page .hero__eyebrow { color: var(--accent-bright); }

/* hero--image: photo-backed (gewerblich/privat/einzugsgebiet/ueber-uns) */
.hero--image {
    background-color: var(--ink-900);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.84));
    background-size: cover;
    background-position: center;
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    text-align: left;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

/* Per-page hero photography — locally generated images (DSGVO-clean,
   no third-party requests). */
.page-template-page-ueber-uns .hero--image,
body.page-id-8 .hero--image {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
        image-set(url("assets/images/hero/house-exterior-1200.avif") type("image/avif"), url("assets/images/hero/house-exterior-1200.webp") type("image/webp"), url("assets/images/hero/house-exterior.jpg") type("image/jpeg"));
    background-position: center 40%;
}
.page-template-page-gewerblich .hero--image,
body.page-id-11 .hero--image {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
        image-set(url("assets/images/hero/tools-flatlay-1200.avif") type("image/avif"), url("assets/images/hero/tools-flatlay-1200.webp") type("image/webp"), url("assets/images/hero/tools-flatlay.jpg") type("image/jpeg"));
    background-position: center;
}
.page-template-page-privat .hero--image,
body.page-id-12 .hero--image {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
        image-set(url("assets/images/hero/house-exterior-1200.avif") type("image/avif"), url("assets/images/hero/house-exterior-1200.webp") type("image/webp"), url("assets/images/hero/house-exterior.jpg") type("image/jpeg"));
    background-position: center;
}
.page-template-page-einzugsgebiet .hero--image,
body.page-id-14 .hero--image {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
        image-set(url("assets/images/hero/concrete-texture-1200.avif") type("image/avif"), url("assets/images/hero/concrete-texture-1200.webp") type("image/webp"), url("assets/images/hero/concrete-texture.jpg") type("image/jpeg"));
    background-position: center 50%;
}
.page-template-page-partner .hero--image,
body.page-id-13 .hero--image {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
        image-set(url("assets/images/hero/blueprint-hands-1200.avif") type("image/avif"), url("assets/images/hero/blueprint-hands-1200.webp") type("image/webp"), url("assets/images/hero/blueprint-hands.jpg") type("image/jpeg"));
    background-position: center;
}

/* Generic .hero (home + leistungen) — add a subtle background */
.hero {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.96)),
        image-set(url("assets/images/hero/hero-main-1200.avif") type("image/avif"), url("assets/images/hero/hero-main-1200.webp") type("image/webp"), url("assets/images/hero/hero-main.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}
.hero--image > .wrap {
    width: 100%;
    max-width: 760px;
    text-align: left;
}
.hero--image h1 {
    color: var(--paper);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    margin: var(--s-6) 0 var(--s-5);
    max-width: 18ch;
    margin-left: 0;
    margin-right: auto;
}
.hero--image .lead {
    color: rgba(255, 255, 255, 0.82);
    color: color-mix(in srgb, var(--paper) 82%, transparent);
    margin-bottom: var(--s-6);
}
.hero--image .hero-meta,
.hero--image .hero-meta--center {
    justify-content: flex-start;
    padding-left: 0;
    color: var(--accent-bright);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    justify-content: flex-start;
}
.hero--image .btn--ghost {
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.5);
    border-color: color-mix(in srgb, var(--paper) 50%, transparent);
}
.hero--image .btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.12);
    background-color: color-mix(in srgb, var(--paper) 12%, transparent);
    border-color: var(--paper);
    color: var(--paper);
}


/* ==========================================================================
   9. GRIDS — dense, generous gaps
   ========================================================================== */

.leistungen-grid,
.references-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-10);
}
/* Promises: 4 items — fit all in one row on desktop, no orphan */
.promises-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-10);
}
.partner-grid,
.overview-grid,
.benefits-grid,
.region-grid,
.testimonials-grid {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-10);
}
.partner-grid      { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.overview-grid     { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.benefits-grid     { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.region-grid       { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* "Warum Oscar Yapı?" grid — keep card height tight, items don't sprawl */
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-8);
}
.why-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    text-align: left;
    background-color: var(--paper);
    border: 0;
    border-radius: var(--r-sm);
    padding: var(--s-5);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.why-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: width var(--t-slow);
}
.why-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.why-item:hover::before { width: 100%; }
.why-item .icon {
    width: 32px;
    height: 32px;
    color: var(--accent);
    flex-shrink: 0;
    margin: 0;
    background: var(--accent-soft);
    border-radius: var(--r-full);
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.why-item h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-800);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.005em;
}


/* ==========================================================================
   10. CARDS — solid white tiles on concrete, accent hover accent
   ========================================================================== */

.promise-item,
.leistung-item,
.reference-item,
.partner-item,
.overview-item,
.region-item,
.why-item,
.testimonial-card {
    background-color: var(--paper);
    border: 0;
    border-radius: var(--r-sm);
    padding: var(--s-8);
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
    position: relative;
    overflow: hidden;
}
/* accent top-edge accent sweeps in on hover (replaces translateY+shadow) */
.promise-item::before,
.leistung-item::before,
.reference-item::before,
.partner-item::before,
.overview-item::before,
.region-item::before,
.why-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: width var(--t-slow);
    z-index: 2;
}
.promise-item:hover,
.leistung-item:hover,
.reference-item:hover,
.partner-item:hover,
.overview-item:hover,
.region-item:hover,
.why-item:hover,
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.promise-item:hover::before,
.leistung-item:hover::before,
.reference-item:hover::before,
.partner-item:hover::before,
.overview-item:hover::before,
.region-item:hover::before,
.why-item:hover::before {
    width: 100%;
}

/* Override the universal card rule for why-item — it must stay compact/horizontal */
.why-item {
    padding: var(--s-5) !important;
    text-align: left;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
}
.why-item h3 {
    font-family: var(--font-display);
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--ink-800);
    margin: 0;
    line-height: 1.3;
}

/* Trust / credentials block on home — stat-strip layout with accent numbers */
.section--credentials .container > h2 {
    text-align: left;
    max-width: 720px;
    margin-bottom: var(--s-10);
}
.credentials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-6);
    border-top: 1px solid var(--line);
    padding-top: var(--s-8);
}
.credential {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    text-align: left;
}
.credential__num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
    font-weight: 900;
    /* Big numerals still need 3:1 — --accent on --concrete-2 was 2.70:1. */
    color: var(--accent-deep);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.credential__label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-500);
}
.credentials-note {
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
    color: var(--ink-500);
    font-size: 0.9375rem;
    max-width: 680px;
}


/* ==========================================================================
   ÜBERSICHT PAGE — process timeline, competency cards, benefits pills
   ========================================================================== */

/* 4-step process timeline */
.process-section .eyebrow {
    display: inline-block;
    margin-bottom: var(--s-3);
}
.process-steps {
    list-style: none;
    margin: var(--s-10) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}
/* Horizontal accent connector line that runs BETWEEN the numbered circles.
   The icon lives ABOVE this line (centered ~38px from the top) and the
   number circle sits ON the line. The line passes through the number
   circle's vertical center — the paper-halo on .process-step__num cuts
   it cleanly so it looks like the line goes BEHIND the circle, not through. */
.process-steps::before {
    content: "";
    position: absolute;
    top: 104px;          /* number circle center: 56 icon + 16 gap + 32 radius = 104px */
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--accent) 8%,
        var(--accent) 92%,
        transparent 100%
    );
    z-index: 0;
}
.process-step {
    position: relative;
    padding: 0 var(--s-3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Reorder children so the ICON visually sits ABOVE the number circle,
   even though the HTML order is num → icon (so the DOM stays logical
   for screen readers — number is announced first as the step index). */
.process-step__num { order: 2; margin-top: var(--s-4); }
.process-step__icon { order: 1; margin-bottom: 0; }
.process-step__title { order: 3; }
.process-step__text { order: 4; }
.process-step__meta { order: 5; margin-top: var(--s-3); }

/* Stack: icon (small, top, ABOVE the line) → number-circle (on the line) → title → text → meta.
   Display: block so margin works correctly within the grid column. */
.process-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0 auto;
    color: var(--accent);
    background-color: var(--paper);
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    padding: 12px;
    position: relative;
    z-index: 1;
}
.process-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: var(--s-4) auto var(--s-5);   /* gap above (between icon and number) */
    background-color: var(--ink-800);
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: 50%;
    border: 3px solid var(--accent);
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 6px var(--paper);  /* paper halo cuts the line cleanly */
}
.process-step__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-800);
    margin: 0 0 var(--s-2);
    letter-spacing: -0.005em;
}
.process-step__text {
    color: var(--ink-500);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 var(--s-3);
}
.process-step__meta {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--concrete);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-deep);
}

/* Competency cards (4 columns) */
.competency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-10);
}
.competency-item {
    background-color: var(--paper);
    border: 0;
    border-radius: var(--r-sm);
    padding: var(--s-8) var(--s-5);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
    position: relative;
    overflow: hidden;
}
.competency-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: width var(--t-slow);
}
.competency-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.competency-item:hover::before {
    width: 100%;
}
.competency-item__num {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-300);
    margin-bottom: var(--s-3);
}
.competency-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--s-4);
    background-color: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
    padding: 12px;
}
.competency-item h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-800);
    margin: 0 0 var(--s-2);
    letter-spacing: -0.005em;
}
.competency-item p {
    color: var(--ink-500);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
}

/* Credentials strip variant for ubersicht (no top-rule, lighter) */
.credentials-strip {
    background-color: var(--concrete);
}
.credentials-strip .credentials-grid {
    border-top: 1px solid var(--line);
    padding-top: var(--s-8);
    margin-top: var(--s-6);
}
.credentials-strip .credentials-note {
    border-top-color: var(--line);
}

/* Benefits pill row (horizontal compact style, 2-col grid) */
.benefits-section .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.benefits-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-10);
}
.benefit-pill {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-5);
    background-color: var(--paper);
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    color: var(--ink-700);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.benefit-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.benefit-pill > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.benefit-pill__icon {
    color: var(--accent);
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   KONTAKT PAGE — trust strip, featured testimonials, OSM map card
   ========================================================================== */

/* Per-page body-class photo for /kontakt/ — adds a real architectural photo
   background to the dark .hero--page while keeping all other typography
   rules intact. Ludwigsburg residential / commercial street context. */
.page-template-page-kontakt .hero--page,
body.page-id-7 .hero--page {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
        image-set(url("assets/images/gallery/contact-hero-1200.avif") type("image/avif"), url("assets/images/gallery/contact-hero-1200.webp") type("image/webp"), url("assets/images/gallery/contact-hero.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
}

/* Trust strip — 4 accent pills + opening-hours line, sits directly under the hero */
.trust-strip {
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
    padding-block: var(--s-8) var(--s-10);
    position: relative;
    z-index: 1;
}
.trust-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}
.trust-pill {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-5) var(--s-5);
    background-color: var(--concrete);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--accent);
    text-align: left;
}
.trust-pill__num {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--accent-deep);
    letter-spacing: -0.01em;
}
.trust-pill__label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-500);
}
.hours-line {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background-color: var(--ink-800);
    color: rgba(255, 255, 255, 0.88);
    color: color-mix(in srgb, var(--paper) 88%, transparent);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--accent);
    font-family: var(--font-display);
    font-size: 0.875rem;
}
.hours-line__icon { color: var(--accent-bright); flex-shrink: 0; }
.hours-line__label {
    color: var(--accent-bright);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}
.hours-line__value { color: var(--paper); }

/* Featured testimonials strip on Kontakt — promoted from the bottom */
.kontakt-testimonials {
    background-color: var(--concrete-2);
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
    z-index: 1;
}
.kontakt-testimonials .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.kontakt-testimonials h2 { margin-bottom: var(--s-10); }
.kontakt-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
}
.kontakt-testimonial-card {
    background-color: var(--paper);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--accent);
    padding: var(--s-6);
    box-shadow: var(--shadow-sm);
}
.kontakt-testimonial-rating {
    display: flex;
    gap: 2px;
    margin-bottom: var(--s-3);
}
.kontakt-testimonial-star { color: var(--concrete-2); display: inline-flex; }
.kontakt-testimonial-star.is-filled { color: var(--accent); }
.kontakt-testimonial-quote {
    border: 0;
    margin: 0 0 var(--s-4);
    padding: 0;
    font-style: normal;
    color: var(--ink-600);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.kontakt-testimonial-meta {
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
}
.kontakt-testimonial-author {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-800);
    letter-spacing: 0.02em;
}

/* Fallback when no testimonials are published — a hand-typographic
   pull-quote with the signature stamp */
.kontakt-testimonials__fallback {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: var(--s-12) var(--s-6);
    position: relative;
}
.kontakt-testimonials__mark {
    font-family: var(--font-display);
    font-size: 7rem;
    line-height: 0.5;
    color: var(--accent);
    display: block;
    margin-bottom: var(--s-6);
}
.kontakt-testimonials__lead {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.5vw + 0.9rem, 1.625rem);
    font-weight: 600;
    color: var(--ink-800);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s-5);
}
.kontakt-testimonials__signature {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-500);
}

/* OSM map card */
.map-section {
    background-color: var(--concrete);
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
    z-index: 1;
}
.map-card {
    background-color: var(--paper);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
    border-top: 4px solid var(--accent);
}
.map-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.map-card__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-800);
    margin: 0;
    letter-spacing: -0.005em;
}
.map-card__link {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    /* Touch target: was 135x21, below the 44px minimum. Padding lifts the
       hit area to >=44px tall without changing the visual rhythm. */
    min-height: 44px;
    padding-block: var(--s-2);
}
.map-card__link:hover { color: var(--accent-darker); text-decoration: none; }
.map-card__embed {
    position: relative;
    width: 100%;
    background-color: var(--concrete-2);
}
.map-card__embed iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}
.map-card__note {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-6);
    background-color: var(--concrete);
    color: var(--ink-500);
    font-size: 0.75rem;
    margin: 0;
    border-top: 1px solid var(--line);
}
.map-card__note .icon { color: var(--accent); flex-shrink: 0; }

/* Icons — inline accent, no decorative circles */
.promise-item .icon,
.leistung-item .icon,
.why-item .icon {
    display: block;
    color: var(--accent);
    width: 36px;
    height: 36px;
    margin: 0 0 var(--s-4) 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.partner-item h3 { color: var(--ink-800); }

/* why-item (Warum Oscar Yapı grid) */
.why-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    text-align: left;
}
.why-item .icon { width: 32px; height: 32px; margin: 0; }
.why-item h3 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.4vw, 1.1875rem);
    line-height: 1.3;
    color: var(--ink-800);
    margin: 0;
}

/* benefit-item — warm tile, no hover */
.benefit-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    text-align: left;
    background-color: var(--paper-warm);
    border: 0;
    box-shadow: none;
    font-weight: 500;
    color: var(--ink-700);
    border-radius: var(--r-sm);
    padding: var(--s-4) var(--s-5);
}
.benefit-item::before { display: none; }
.benefit-item:hover { transform: none; box-shadow: none; }
.benefit-item .icon { color: var(--accent); flex-shrink: 0; width: 20px; height: 20px; }

/* region-item lists */
.region-item {
    background-color: var(--paper);
}
.region-item h3 { color: var(--ink-800); }
.region-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.region-item li {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    color: var(--ink-500);
}
.region-item li:last-child { border-bottom: 0; }

/* reference-meta tag */
.reference-meta {
    display: inline-block;
    margin-top: var(--s-4);
    padding: 0.25rem 0.75rem;
    background-color: var(--concrete);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-deep);
}

/* Testimonial card — accent left edge */
.testimonial-card {
    border-left: 3px solid var(--accent);
    padding: var(--s-8);
}
.testimonial-card::before { display: none; }
.testimonial-rating { display: flex; gap: 2px; margin-bottom: var(--s-4); }
.testimonial-star { color: var(--concrete-2); display: inline-flex; }
.testimonial-star.is-filled { color: var(--accent); }
.testimonial-quote {
    border: 0;
    margin: 0 0 var(--s-4);
    padding: 0;
    font-style: normal;
    color: var(--ink-600);
    line-height: 1.65;
    font-size: 1rem;
}
.testimonial-meta { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.testimonial-author {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-800);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   11. FEAT-GRID — roman-numeral feature cells (ueber-uns, partner)
   ========================================================================== */

.feat-grid {
    display: grid;
    gap: var(--s-8);
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--s-8);
}
.feat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feat-cell {
    padding-top: var(--s-5);
    border-top: 2px solid var(--ink-800);
}
.feat-cell-num {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-deep);
    display: block;
    margin-bottom: var(--s-2);
    font-style: normal;
}
.feat-cell h3 { font-size: 1.1875rem; margin-bottom: var(--s-2); color: var(--ink-800); }
.feat-cell p { color: var(--ink-500); line-height: 1.6; margin: 0; font-size: 0.9375rem; }


/* ==========================================================================
   12. HERO-BOTTOM stats strip (ueber-uns)
   ========================================================================== */

.hero-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
    margin-top: var(--s-8);
}
.hero-stat { text-align: left; }
.hero-stat-n {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
    font-weight: 900;
    color: var(--accent-deep);
    line-height: 1;
    margin-bottom: var(--s-2);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.hero-stat-l {
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.counter { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   13. GALLERY — masonry photo grid (gewerblich/privat/einzugsgebiet)
   ========================================================================== */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 0.75rem;
    margin-block: var(--s-6);
}
/* Real <img> inside the gallery cell. The cell keeps the grid geometry, the
   ::after scrim and the caption positioning, so the visual result matches the
   old background-image version exactly - but the photograph is now crawlable by
   Google Images and can carry alt text. */
.gallery-item__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.gallery-item {
    position: relative;
    background-color: var(--ink-800);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: var(--r-sm);
    isolation: isolate;
}
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.82) 100%);
    opacity: 0.9;
    transition: opacity var(--t-base);
    z-index: 1;
    pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item--wide { grid-column: span 2; grid-row: span 2; }
.gallery-item--tall { grid-column: span 1; grid-row: span 2; }
.gallery-item-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--s-5);
    color: var(--paper);
    z-index: 2;
}
/* Caption heading over the dark photo scrim. Covers BOTH h3 and h4: the
   templates use <h3> (einzugsgebiet) and <h4> (gewerblich/privat), and the
   global `h1,h2,h3,h4,h5 { color: var(--ink-800) }` rule would otherwise
   paint it #0a0a0a on a near-black scrim — literally invisible (1:1). */
.gallery-item-cap h3,
.gallery-item-cap h4 {
    color: var(--paper);
    font-size: 1.125rem;
    margin-bottom: var(--s-1);
    letter-spacing: -0.01em;
}
.gallery-item-cap p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--accent-bright);
}


/* ==========================================================================
   14. SECTION--IMAGE — split CTA band (gewerblich/privat/einzugsgebiet)
   ========================================================================== */

.section--image {
    background-color: var(--ink-900);
    color: var(--paper);
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
}
.section--image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 280px;
    height: 5px;
    background: var(--accent);
}
.section--image > .wrap { position: relative; z-index: 1; }
.section--image h2 {
    color: var(--paper);
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    margin-bottom: var(--s-3);
}
.section--image .eyebrow { color: var(--accent-bright); }
.section--image .lead,
.section--image p {
    color: rgba(255, 255, 255, 0.82);
    color: color-mix(in srgb, var(--paper) 82%, transparent);
}
/* Fix dead var(--bg)/var(--ink) inline tokens on inner-page CTAs */
.section--image .btn--primary,
.hero--image .btn--primary,
.hero-actions .btn--primary {
    /* --accent-deep, not --accent: the white label must stay 6.63:1. */
    background-color: var(--accent-deep) !important;
    color: var(--paper) !important;
    border-color: var(--accent-deep) !important;
}
.section--image .btn--primary:hover,
.hero--image .btn--primary:hover,
.hero-actions .btn--primary:hover {
    background-color: var(--ink-800) !important;
    border-color: var(--ink-800) !important;
    color: var(--accent-bright) !important;
}
.section--image__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}


/* ==========================================================================
   15. MOTTO STRIP — solid graphite, oversized type
   ========================================================================== */

.motto-strip {
    position: relative;
    background-color: var(--ink-900);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.94)),
        image-set(url("assets/images/hero/blueprint-hands-1200.avif") type("image/avif"), url("assets/images/hero/blueprint-hands-1200.webp") type("image/webp"), url("assets/images/hero/blueprint-hands.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    text-align: center;
    color: var(--paper);
    overflow: hidden;
    border-top: 1px solid var(--line-light);
}
.motto-strip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--accent);
    z-index: 2;
}
.motto-strip > .container,
.motto-strip > .wrap { position: relative; z-index: 1; }
.motto-strip__quote {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.75rem);
    font-weight: 600;
    margin: 0;
    max-width: 900px;
    margin-inline: auto;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.01em;
    padding-left: 0;
    border-left: 0;
}
.motto-strip__quote::before,
.motto-strip__quote::after { content: none; }
.motto-strip__mark {
    color: var(--accent);
    font-weight: 800;
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.08em;
    padding: 0 0.12em;
    font-family: var(--font-display);
}


/* ==========================================================================
   16. CONTACT SECTION + FORM
   ========================================================================== */

.contact-section {
    padding-block: clamp(3rem, 6vw, 5rem);
    background-color: var(--concrete);
    position: relative;
    z-index: 1;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.contact-info {
    background: var(--paper);
    border-radius: var(--r-sm);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    position: sticky;
    top: calc(var(--header-height) + 36px + var(--s-4));
    border-top: 4px solid var(--accent);
}
.contact-info__title { font-size: 1.5rem; margin-bottom: var(--s-2); }
.contact-info__subtitle { color: var(--ink-500); font-size: 0.9375rem; margin-bottom: var(--s-6); }

.contact-list { list-style: none; margin: 0 0 var(--s-8); padding: 0; }
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
}
.contact-item:last-child { border-bottom: 0; }
.contact-item__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--concrete);
    border: 0;
    border-radius: var(--r-sm);
    color: var(--accent);
}
.contact-item__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.contact-item__label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-500);
}
.contact-item__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-800);
    word-break: break-word;
}
a.contact-item__value:hover { color: var(--accent-darker); text-decoration: none; }

.contact-social { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.contact-social__label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-500);
    margin-bottom: var(--s-3);
}

/* Social links */
.social-links { list-style: none; display: flex; align-items: center; gap: var(--s-3); margin: 0; padding: 0; }
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background-color: var(--ink-800);
    color: var(--paper);
    transition: background-color var(--t-base), color var(--t-base);
    text-decoration: none;
}
.social-links a:hover { background-color: var(--accent-deep); color: var(--paper); text-decoration: none; }

/* Form */
.form-card {
    background-color: var(--paper);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.form-card__header {
    padding: var(--s-8) clamp(1.75rem, 3vw, 2.75rem) 0;
    border-bottom: 2px solid var(--concrete-2);
    padding-bottom: var(--s-6);
    margin-bottom: var(--s-2);
    position: relative;
}
.form-card__header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 4px;
    background: var(--accent);
}
.form-card__title { font-size: 1.5rem; margin-bottom: var(--s-2); }
.form-card__subtitle { color: var(--ink-500); font-size: 0.9375rem; margin: 0; }

.contact-form { padding: var(--s-6) clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.75rem); }

.form-row { margin-bottom: var(--s-5); }
.form-row:last-of-type { margin-bottom: var(--s-6); }
.form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.form-field { display: flex; flex-direction: column; position: relative; }
.form-field__label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-600);
    margin-bottom: var(--s-2);
}
.form-field__label .req { color: var(--accent-deep); margin-left: 2px; }
.form-field__label .form-field__optional {
    color: var(--ink-500);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.form-field__input,
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--ink-800);
    background-color: var(--concrete);
    /* Was `1.5px solid transparent` on top of a --concrete background, i.e. the
       input fill WAS the section colour: the control boundary measured 1.00:1 and
       a low-vision user could not see where the clickable field ended (WCAG 1.4.11
       needs 3:1 for a UI component boundary). --line-input is #767676, which
       measures 3.88:1 against --concrete. */
    border: 1.5px solid var(--line-input);
    border-radius: var(--r-sm);
    padding: 0.75rem var(--s-4);
    line-height: 1.4;
    transition: border-color var(--t-base), background-color var(--t-base), box-shadow var(--t-base);
    -webkit-appearance: none;
    appearance: none;
}
.form-field__input:hover:not(:focus),
.form-field input:hover:not(:focus),
.form-field textarea:hover:not(:focus) {
    background-color: var(--concrete-2);
}
.form-field__input:focus,
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    /* `outline: none` at this specificity (0,2,0) used to beat the global
       input:focus-visible ring, and the replacement box-shadow resolved to
       1.11:1 - so form inputs had no perceivable keyboard focus indicator at
       all (WCAG 2.4.11 / 2.4.13). A real outline is kept alongside the glow. */
    background-color: var(--paper);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: 3px solid var(--accent-deep);
    outline-offset: 2px;
}
.form-field__input--textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

/* Both spellings are kept live. The stylesheet only ever defined the BEM
   modifier `.form-field--error`, while the validation script marks a wrapper
   with `is-error` - so even once the script found the right wrapper, no error
   styling was applied. */
.form-field--error .form-field__input,
.form-field--error input,
.form-field--error textarea,
.form-field.is-error .form-field__input,
.form-field.is-error input,
.form-field.is-error textarea,
.form-consent.is-error {
    border-color: var(--error);
    background-color: var(--error-soft);
}
.form-field--error .form-field__input:focus { box-shadow: 0 0 0 3px rgba(178, 59, 59, 0.14); }
.form-field.is-error .form-field__input:focus,
.form-field.is-error input:focus {
    border-color: var(--error);
    outline: 3px solid var(--error);
    outline-offset: 2px;
}
.form-required-hint {
    margin: 0 0 var(--s-4);
    font-size: 0.8125rem;
    color: var(--ink-600);
}
.form-field__error {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--error);
    min-height: 0;
    line-height: 1.4;
}
.form-field__error:empty { display: none; }

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--ink-500);
    line-height: 1.5;
}
.form-consent input[type="checkbox"] {
    margin-top: 1px;
    /* 24x24 clears WCAG 2.5.8 (Target Minimum). Was 18x18. The wrapping
       <label> is 45px tall, so the whole row is an easy target anyway. */
    width: 24px;
    height: 24px;
    /* --accent-deep: the checked fill carries a white tick, and white on
       --accent is 3.30:1 (fails) vs 6.63:1 on --accent-deep. */
    accent-color: var(--accent-deep);
    flex-shrink: 0;
    cursor: pointer;
}
.form-consent .req { color: var(--accent-deep); margin-left: 2px; }
.form-consent a { text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--accent-deep); }

.form-note {
    font-size: 0.8125rem;
    color: var(--ink-500);
    text-align: center;
    margin-top: var(--s-4);
    margin-bottom: 0;
}

.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.btn--primary.is-loading { pointer-events: none; }

.form-success {
    display: none;
    text-align: center;
    padding: var(--s-10) var(--s-6);
    background-color: var(--success-soft);
    border-left: 4px solid var(--success);
    border-radius: var(--r-sm);
    color: var(--ink-700);
    margin-top: var(--s-5);
}
.form-success.is-visible { display: block; animation: fadeInUp 0.4s ease; }
.form-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-sm);
    background-color: var(--success);
    color: var(--paper);
    margin-bottom: var(--s-4);
}
.form-success__title { color: var(--ink-800); margin-bottom: var(--s-2); font-size: 1.25rem; }
.form-success__text {
    color: var(--ink-600);
    margin: 0;
    font-size: 0.9375rem;
    max-width: 420px;
    margin-inline: auto;
}
.contact-form.is-sent .form-row,
.contact-form.is-sent .btn,
.contact-form.is-sent .form-note,
.contact-form.is-sent .form-error-banner { display: none; }

.form-error-banner {
    display: none;
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background-color: var(--error-soft);
    border-left: 4px solid var(--error);
    border-radius: var(--r-sm);
    color: var(--error);
    font-size: 0.875rem;
}
.form-error-banner.is-visible { display: block; }


/* ==========================================================================
   17. BLOG LIST (orphan blog + single)
   ========================================================================== */

.blog-list {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: var(--s-5);
    align-items: center;
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink-600);
    transition: border-color var(--t-base);
}
.blog-list:hover {
    border-bottom-color: var(--accent);
    text-decoration: none;
    color: var(--ink-600);
}
.blog-list:last-child { border-bottom: 0; }
.blog-date {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-deep);
}
.blog-list h2 {
    font-size: clamp(1.125rem, 1.4vw, 1.375rem);
    margin: 0 0 0.25rem;
    color: var(--ink-800);
    line-height: 1.25;
}
.blog-list:hover h2 { color: var(--accent-deep); }
.blog-list p { margin: 0; font-size: 0.9375rem; color: var(--ink-500); }
.blog-list .fa-arrow-right { color: var(--ink-300); transition: transform var(--t-base), color var(--t-base); }
.blog-list:hover .fa-arrow-right { transform: translateX(4px); color: var(--accent-deep); }

/* Standard blog post (parent-style) */
.blog-post { padding: var(--s-8) 0; border-bottom: 1px solid var(--line); }
.blog-post:last-child { border-bottom: 0; }
.blog-post h2 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.blog-post h2 a { color: var(--ink-800); text-decoration: none; }
.blog-post h2 a:hover { color: var(--accent-darker); text-decoration: none; }
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    margin-bottom: var(--s-3);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-500);
}
.post-excerpt { margin-bottom: var(--s-4); color: var(--ink-600); }


/* ==========================================================================
   18. LEGAL PAGES (impressum, datenschutz, single content)
   ========================================================================== */

.legal,
.legal-info {
    padding: var(--s-4) 0;
    max-width: 72ch;
}
/* Legal-page section headings. The templates now emit <h2> for these —
   they are the top-level sections directly under the page <h1>, and were
   <h3> before, which skipped a level and broke the document outline.
   font-size/weight/letter-spacing are pinned to the old <h3> metrics so
   promoting the element changes zero pixels. */
.legal h2,
.legal-info h2,
.legal h3,
.legal-info h3 {
    margin-top: var(--s-8);
    margin-bottom: var(--s-3);
    color: var(--ink-800);
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.legal p,
.legal-info p {
    margin-bottom: var(--s-3);
    line-height: 1.8;
}
.legal a { color: var(--accent-deep); }

@media print {
    .hero, .hero--top, .hero--image, .hero--cta, .motto-strip,
    .site-header, .site-footer, .scroll-to-top, .utility-bar,
    .wa-float { display: none !important; }
    .legal, .legal-info, .section { max-width: 100%; }
    body { color: #000; background: #fff; }
}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--ink-900);
    color: rgba(255, 255, 255, 0.62);
    color: color-mix(in srgb, var(--paper) 62%, transparent);
    padding-block: clamp(2.75rem, 5vw, 4rem) var(--s-6);
    border-top: 3px solid var(--accent);
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line-light);
}

.footer-col--brand { max-width: 320px; }
.site-logo--footer {
    color: var(--paper);
    font-size: 1.5rem;
    margin-bottom: var(--s-3);
}
.site-logo--footer::after { background: var(--accent); }
.site-logo--footer:hover { color: var(--paper); text-decoration: none; }

.footer-tagline {
    color: rgba(255, 255, 255, 0.62);
    color: color-mix(in srgb, var(--paper) 62%, transparent);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: var(--s-3) 0 var(--s-5);
}

.site-footer .social-links a {
    background-color: rgba(255, 255, 255, 0.06);
    background-color: color-mix(in srgb, var(--paper) 6%, transparent);
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
}
.site-footer .social-links a:hover { background-color: var(--accent-deep); color: var(--paper); }

.footer-heading {
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: var(--s-5);
}

.footer-nav,
.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.footer-nav a,
.footer-contact a {
    color: rgba(255, 255, 255, 0.62);
    color: color-mix(in srgb, var(--paper) 62%, transparent);
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition: color var(--t-base);
    text-decoration: none;
}
.footer-nav a:hover,
.footer-contact a:hover { color: var(--accent-bright); text-decoration: none; }
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.62);
    color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.footer-contact .icon { color: var(--accent); margin-top: 3px; flex-shrink: 0; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-top: var(--s-5);
}
.footer-copyright,
.footer-credit {
    margin: 0;
    font-size: 0.8125rem;
    /* 0.58 alpha = 6.4:1 on --ink-900. The old 0.4 was 3.66:1 (fails AA). */
    color: rgba(255, 255, 255, 0.58);
    color: color-mix(in srgb, var(--paper) 58%, transparent);
}


/* ==========================================================================
   20. SCROLL-TO-TOP
   ========================================================================== */

.scroll-to-top {
    position: fixed;
    bottom: clamp(1rem, 3vw, 2rem);
    left: clamp(1rem, 3vw, 2rem);
    width: 46px;
    height: 46px;
    background-color: var(--ink-800);
    color: var(--accent-bright);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* Was `transition: all`. Only these four properties change. */
    transition: opacity var(--t-base), visibility var(--t-base),
                transform var(--t-base), background-color var(--t-base),
                color var(--t-base), border-color var(--t-base);
    z-index: 999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.scroll-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top:hover { background-color: var(--accent-deep); color: var(--paper); border-color: var(--accent-deep); }
.scroll-to-top .icon { transform: rotate(180deg); }


/* ==========================================================================
   21. HOME POSTS (child feature — injected via get_footer)
   ========================================================================== */

.home-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-10);
}
.home-post {
    display: flex;
    flex-direction: column;
    background-color: var(--paper);
    border: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
    position: relative;
}
.home-post::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: width var(--t-slow);
    z-index: 2;
}
.home-post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
    text-decoration: none;
}
.home-post:hover::before { width: 100%; }
.home-post__media {
    aspect-ratio: 16 / 9;
    background-color: var(--concrete-2);
    background-size: cover;
    background-position: center;
}
.home-post__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    flex: 1;
}
.home-post__date {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-deep);
}
.home-post__title {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--ink-800);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.home-post__excerpt {
    color: var(--ink-500);
    font-size: 0.9375rem;
    margin: 0;
    flex: 1;
}
.home-post__more {
    color: var(--accent-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.home-post:hover .home-post__more { color: var(--accent-darker); }
.home-posts__all { text-align: center; margin-top: var(--s-8); }


/* ==========================================================================
   22. FLOATING WHATSAPP BUTTON (child feature)
   ========================================================================== */

.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-full);
    background-color: #25D366;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.wa-float:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55);
    color: #ffffff;
    text-decoration: none;
}
.wa-float svg { display: block; }

@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.wa-float { animation: wa-pulse 2.4s infinite; }
@media (prefers-reduced-motion: reduce) {
    .wa-float { animation: none; }
}


/* ==========================================================================
   23. FONT AWESOME POLYFILL (orphan templates use <i class="fas fa-arrow-">)
   ========================================================================== */

.fa, .fas, .far, .fal, .fab { font-family: inherit; font-style: normal; }
.fa-arrow-right {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.fa-arrow-left {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 12H5m6 6-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 12H5m6 6-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.fa-arrow-right::before, .fa-arrow-right::after,
.fa-arrow-left::before, .fa-arrow-left::after { content: none; }


/* ==========================================================================
   24. ANIMATIONS + REVEAL
   ========================================================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Subtle reveal (parent JS toggles .is-visible on .reveal elements) */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* data-reveal attributes (orphan templates) — reveal subtly */
[data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
[data-reveal].is-visible,
[data-reveal][data-revealed] {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal][data-delay="1"] { --reveal-delay: 1; }
[data-reveal][data-delay="2"] { --reveal-delay: 2; }
[data-reveal][data-delay="3"] { --reveal-delay: 3; }
[data-reveal][data-delay="4"] { --reveal-delay: 4; }
[data-reveal-img] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.65s ease, transform 0.65s ease;
    transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
[data-reveal-img].is-visible,
[data-reveal-img][data-revealed] {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-img][data-delay="1"] { --reveal-delay: 1; }
[data-reveal-img][data-delay="2"] { --reveal-delay: 2; }
[data-reveal-img][data-delay="3"] { --reveal-delay: 3; }
[data-reveal-img][data-delay="4"] { --reveal-delay: 4; }


/* ==========================================================================
   25. UTILITIES + WP CONTENT LISTS
   ========================================================================== */

.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--ink-500); }
.mt-1 { margin-top: var(--s-2); }
.mt-2 { margin-top: var(--s-4); }
.mt-3 { margin-top: var(--s-6); }
.mb-1 { margin-bottom: var(--s-2); }
.mb-2 { margin-bottom: var(--s-4); }
.mb-3 { margin-bottom: var(--s-6); }

/* Checklist (styled checkmark rail) */
.checklist {
    list-style: none;
    padding: 0;
    margin: var(--s-6) 0 0;
    display: grid;
    gap: var(--s-3);
    max-width: 640px;
}
.checklist li {
    position: relative;
    padding-left: var(--s-8);
    color: var(--ink-600);
    font-size: 1rem;
    line-height: 1.5;
}
.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
}
.checklist li::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    width: 7px;
    height: 11px;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Default content lists (ueber-uns, etc.) */
.entry-content ul:not([class]),
.section ul:not([class]):not(.social-links):not(.footer-nav):not(.footer-contact):not(.main-nav__list):not(.utility-bar__contact):not(.utility-bar__social):not(.contact-list) {
    list-style: none;
    padding: 0;
    margin: var(--s-6) 0 0;
    display: grid;
    gap: var(--s-3);
    max-width: 640px;
}
.entry-content ul:not([class]) li,
.section ul:not([class]):not(.social-links):not(.footer-nav):not(.footer-contact):not(.main-nav__list):not(.utility-bar__contact):not(.utility-bar__social):not(.contact-list) li {
    position: relative;
    padding-left: var(--s-6);
    color: var(--ink-600);
    font-size: 1rem;
    line-height: 1.55;
}
.entry-content ul:not([class]) li::before,
.section ul:not([class]):not(.social-links):not(.footer-nav):not(.footer-contact):not(.main-nav__list):not(.utility-bar__contact):not(.utility-bar__social):not(.contact-list) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 2px;
    background: var(--accent);
}

/* WordPress block compat */
.alignwide, .alignfull { max-width: var(--container-max); }
.wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3 { color: var(--ink-800); }


/* ==========================================================================
   26. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-info { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col--brand { grid-column: 1 / -1; max-width: 100%; }
    .leistungen-grid, .references-grid { grid-template-columns: repeat(2, 1fr); }
    .promises-grid { grid-template-columns: repeat(2, 1fr); }
    .feat-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery-item--wide { grid-column: span 2; grid-row: span 1; }
    .gallery-item--tall { grid-column: span 1; grid-row: span 1; }
    .hero-bottom { grid-template-columns: repeat(2, 1fr); }
    .section--image__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 768px) {
    :root {
        --container-pad: 1.25rem;
        --header-height: 64px;
    }
    .utility-bar { display: none; }
    .menu-toggle { display: inline-flex; }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: var(--paper);
        box-shadow: var(--shadow-lg);
        padding: var(--s-3) var(--s-4);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
        z-index: 999;
        border-top: 3px solid var(--accent);
    }
    .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav__list > li { border-bottom: 1px solid var(--line); }
    .main-nav__list > li:last-child { border-bottom: 0; }
    .main-nav__list > li > a {
        width: 100%;
        padding: var(--s-4) 0;
        border-radius: 0;
        justify-content: space-between;
    }
    .main-nav__list > .current-menu-item > a::after,
    .main-nav__list > .current_page_item > a::after { display: none; }
    .main-nav__cta { margin: var(--s-3) 0 0 !important; text-align: center; justify-content: center; }

    .hero, .hero--top { padding-block: clamp(2.75rem, 8vw, 4rem); text-align: left; }
    .hero--image { padding: clamp(2.5rem, 7vw, 3.5rem) 0; min-height: 40vh; }

    .section { padding-block: var(--s-12); }

    .form-row--two { grid-template-columns: 1fr; gap: var(--s-4); }

    .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); }
    .footer-bottom { flex-direction: column; text-align: center; gap: var(--s-2); }

    .credentials-grid { grid-template-columns: repeat(2, 1fr); }
    .competency-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
    .process-steps::before { display: none; }
    .process-step { padding: 0; }
    .process-step__icon { margin-bottom: var(--s-3); }
    .process-step__num { margin-bottom: var(--s-3); }
    /* minmax(0, 1fr), not 1fr: a plain 1fr track never shrinks below its
       longest word, and "Qualitätsmaterialien" pushed the second column
       ~90px past the right edge of a 375px phone (clipped, no scroll). */
    .benefits-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-pills { grid-template-columns: repeat(2, 1fr); }
    .kontakt-testimonials__grid { grid-template-columns: 1fr; }
    .map-card__embed iframe { height: 320px; }
    .leistungen-grid, .promises-grid, .references-grid,
    .partner-grid, .overview-grid, .benefits-grid, .region-grid,
    .testimonials-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .gallery-item, .gallery-item--wide, .gallery-item--tall {
        grid-column: span 1; grid-row: span 1;
    }
    .feat-grid, .feat-grid--3 { grid-template-columns: 1fr; }
    .hero-bottom { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
    .blog-list { grid-template-columns: 1fr; gap: var(--s-2); }
    .blog-date { margin-bottom: var(--s-1); }

    .btn {
        min-height: 44px;
        width: 100%;
        max-width: 340px;
    }
    .hero .btn, .hero--cta .btn, .hero--image .btn, .btn--lg { width: auto; max-width: none; }
    .form-field input, .form-field textarea, .form-field select { min-height: 44px; }

    .post-meta { flex-direction: column; gap: var(--s-2); }
}
/* Header copy of the language switcher: phones only (the utility bar that
   holds the desktop switcher is display:none below 769px). */
.lang-switcher--header { display: none; }
@media (max-width: 768px) {
    /* Three items now share the phone header: keep the logo on one line
       (squeezed, "OSCAR YAPI" wrapped to two lines) and tighten the gaps. */
    .header-inner { gap: var(--s-2); }
    .site-branding { flex-shrink: 0; }
    .site-branding .site-logo { white-space: nowrap; }
    .lang-switcher--header { display: inline-flex; margin-left: auto; }
    .lang-switcher--header .lang-switcher__chip { min-width: 40px; padding: 0 9px; }
}
@media (max-width: 340px) {
    .lang-switcher--header .lang-switcher__chip { min-width: 34px; padding: 0 5px; }
}
/* After the 768px block on purpose: both match on phones, and the later rule wins. */
@media (max-width: 480px) {
    .benefits-pills { grid-template-columns: minmax(0, 1fr); }
    .benefit-pill { padding: var(--s-5); }
}

@media (max-width: 480px) {
    .container, .wrap { padding-inline: var(--s-4); }
    .btn { padding: 0.8125rem 1.375rem; font-size: 0.8125rem; }
    .scroll-to-top { width: 42px; height: 42px; }
    .hero-bottom { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .promise-item, .leistung-item, .reference-item, .partner-item,
    .overview-item, .region-item, .why-item, .testimonial-card { padding: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, [data-reveal], [data-reveal-img] { opacity: 1; transform: none; }
    .wa-float { animation: none; }
}

/* ==========================================================================
   LANGUAGE SWITCHER (DE | TR) — v2.0.1
   Placed in the utility-bar gap when more than one language is registered.
   Pill chips, accent-on-concrete for active, ghost for inactive.
   ========================================================================== */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.10);
}
.lang-switcher__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: var(--font-display, 'Archivo', system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--ink-700, #0a0a0a);
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}
.lang-switcher__chip:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--ink-900, #000000);
}
.lang-switcher__chip:focus-visible {
    background: rgba(0, 0, 0, 0.08);
    color: var(--ink-900, #000000);
    outline: 3px solid var(--accent-deep);
    outline-offset: 2px;
}
.lang-switcher__chip.is-active {
    /* A11y: --accent-500 (#22c55e) on white = 2.84:1, fails even AA-large.
       Use --accent-600 (#0f6b31) which gives 6.63:1 with white text. The
       label is var(--paper), not #fff, so fill+label flip together in dark
       mode: 8.0:1 ink-on-bright (white-on-bright would be 2.28:1). */
    background: var(--accent-600, #0f6b31);
    color: var(--paper);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) inset;
}
.lang-switcher__chip.is-active:hover,
.lang-switcher__chip.is-active:focus-visible {
    background: var(--accent-600, #0f6b31);
    color: var(--paper);
    outline: 3px solid var(--accent-deep);
    outline-offset: 2px;
}

/* Sits inside the utility-bar, right-aligned on wide layouts, stacked below
   the social row on narrow. The utility-bar uses flex/space-between so we
   need a small wrapper rule so the switcher drops to a new row gracefully. */
.utility-bar__inner {
    flex-wrap: wrap;
}
.utility-bar .lang-switcher {
    margin-left: auto;
}
@media (max-width: 720px) {
    .utility-bar .lang-switcher {
        margin-left: 0;
        margin-top: 6px;
        width: max-content;
    }
}

/* ==========================================================================
   END OF CHILD THEME v2.0 — Werkstoff: Concrete & Signal Green
   ========================================================================== */

/* ==========================================================================
   PRINT STYLESHEET
   - Hide nav, footer, CTAs, and form chrome
   - Reveal the URL after each link (so printed pages are useful offline)
   - Use black ink on white paper, force page breaks for h2 sections
   ========================================================================== */
@media print {
    /* Force color reset to save ink and survive B&W printers */
    * {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide non-content chrome */
    .main-nav,
    .utility-bar,
    .footer,
    .wa-float,
    .btn--primary,
    .btn--secondary,
    .btn--ghost,
    .btn--ghost-on-photo,
    .home-posts,
    .form-field__label .req,
    nav,
    form,
    .skip-link,
    .site-header,
    .site-footer,
    .site-banner,
    .banner-strip,
    .lang-switcher,
    .eyebrow,
    .hero-meta,
    aside {
        display: none !important;
    }

    /* Reveal URLs after links (compact, in parens) */
    a[href^="http"]:after,
    a[href^="/"]:after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444 !important;
    }
    /* But don't print URLs for in-page anchors or mailto: */
    a[href^="#"]:after,
    a[href^="mailto:"]:after,
    a[href^="tel:"]:after {
        content: "";
    }

    /* Clean type */
    body {
        font-size: 11pt;
        line-height: 1.45;
    }
    h1 { font-size: 22pt; margin-top: 0; }
    h2 { font-size: 16pt; page-break-after: avoid; }
    h3 { font-size: 13pt; page-break-after: avoid; }
    p, li { page-break-inside: avoid; }
    img { max-width: 100% !important; page-break-inside: avoid; }

    /* Page-break before each h2 to start a new "section" on a fresh page */
    section h2:first-child {
        page-break-before: always;
    }
    /* But not the very first h2 on the page */
    section:first-of-type h2:first-child {
        page-break-before: avoid;
    }

    /* Page margins */
    @page {
        margin: 1.5cm 1.2cm;
    }

    /* Oscar Yapı 404 search form — only show in print if the user explicitly
       hits "print" from the 404 page; it's fine to leave it. The form
       is already hidden by the `form` rule above. */
}

/* ==========================================================================
   404 SEARCH FORM (rendered by Oscar_Yapi_Seo_Enhancements::add_search_to_404)
   ========================================================================== */
.oscaryapi-404-search {
    margin: 2rem auto;
    max-width: 480px;
    padding: 1.25rem 1.5rem;
    background: var(--concrete);
    border: 1px solid var(--concrete-2);
    border-radius: var(--r-sm);
}
.oscaryapi-404-search p {
    margin: 0 0 .75rem 0;
    font-size: 0.95rem;
    color: var(--ink-700);
}
.oscaryapi-404-search__row {
    display: flex;
    gap: .5rem;
}
.oscaryapi-404-search input[type="search"] {
    flex: 1;
    padding: .55rem .75rem;
    border: 1px solid var(--concrete-2);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--paper);
    color: var(--ink-800);
}
.oscaryapi-404-search input[type="search"]:focus {
    outline: 2px solid var(--accent-deep);
    outline-offset: 1px;
    border-color: var(--accent-deep);
}
.oscaryapi-404-search .btn {
    flex-shrink: 0;
}

/* ==========================================================================
   BACK-TO-TOP BUTTON (rendered by Oscar_Yapi_Seo_Enhancements)
   ========================================================================== */
.oscaryapi-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--r-sm, 2px);
    background: var(--accent-deep, #0f6b31);
    color: var(--paper, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden by default, shown via .is-visible when scrolled */
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease, background 150ms ease;
}
/* When JS is enabled, the button shows. When JS is off, the noscript
   fallback anchor shows instead. We use the .js class set on <html>. */
html.js .oscaryapi-back-to-top-fallback { display: none; }
html:not(.js) .oscaryapi-back-to-top-fallback {
    display: inline-block;
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
    padding: .5rem .9rem;
    background: var(--accent-deep, #0f6b31);
    color: var(--paper, #fff);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: var(--r-sm, 2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.oscaryapi-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.oscaryapi-back-to-top:hover {
    background: var(--ink-800, #111827);
}
.oscaryapi-back-to-top:focus-visible {
    outline: 2px solid var(--accent-deep, #0f6b31);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .oscaryapi-back-to-top {
        transition: opacity 100ms linear;
        transform: none;
    }
}
@media print {
    .oscaryapi-back-to-top,
    .oscaryapi-back-to-top-fallback {
        display: none !important;
    }
}

/* ==========================================================================
   RELATED-POSTS (rendered by Oscar_Yapi_Seo_Enhancements)
   ========================================================================== */
.oscaryapi-related {
    margin: 4rem auto 0;
    max-width: var(--container, 1200px);
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--concrete-2, #e6e9eb);
}
.oscaryapi-related__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1.25rem;
    color: var(--ink-800, #111827);
}
.oscaryapi-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.oscaryapi-related__card {
    display: block;
    padding: 1rem;
    background: var(--paper, #fff);
    border: 1px solid var(--concrete-2, #e6e9eb);
    border-radius: var(--r-sm, 2px);
    text-decoration: none;
    color: var(--ink-800, #111827);
    transition: border-color 150ms ease, transform 150ms ease;
}
.oscaryapi-related__card:hover,
.oscaryapi-related__card:focus-visible {
    border-color: var(--accent-deep, #0f6b31);
    transform: translateY(-2px);
    outline: none;
}
.oscaryapi-related__card-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    margin: 0 0 .25rem;
    color: var(--ink-800, #111827);
}
.oscaryapi-related__card-date {
    font-size: 0.8125rem;
    color: var(--ink-500, #5c646b);
}
.oscaryapi-related__card-excerpt {
    font-size: 0.875rem;
    color: var(--ink-700, #2b3036);
    margin: .5rem 0 0;
    line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
    .oscaryapi-related__card:hover,
    .oscaryapi-related__card:focus-visible {
        transform: none;
    }
}

/* ==========================================================================
   POST META (read time + last-updated) on single posts
   ========================================================================== */
.oscaryapi-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin: 1.5rem auto;
    padding: 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--ink-500, #5c646b);
    border-top: 1px solid var(--concrete-2, #e6e9eb);
    border-bottom: 1px solid var(--concrete-2, #e6e9eb);
}
.oscaryapi-post-meta__readtime,
.oscaryapi-post-meta__updated {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.oscaryapi-post-meta__readtime svg {
    flex-shrink: 0;
    color: var(--accent-deep, #0f6b31);
}
.oscaryapi-post-meta__updated time {
    color: var(--ink-700, #2b3036);
    font-weight: 500;
}

/* ==========================================================================
   ADMIN BAR: translation quick link
   ========================================================================== */
#wpadminbar .oscaryapi-translation-link > a {
    background: var(--accent-deep, #0f6b31) !important;
    color: var(--paper, #ffffff) !important;
    font-weight: 600;
}
#wpadminbar .oscaryapi-translation-link > a:hover {
    background: var(--ink-800, #111827) !important;
}

/* ==========================================================================
   TRUST BLOCK (rendered by Oscar_Yapi_Trust_Block)
   Appended to the_content on every page (except home, contact, legal)
   to boost thin content + E-E-A-T signals.
   ========================================================================== */
.oscaryapi-trust {
    margin: 4rem auto 0;
    padding: 3rem 1.5rem;
    background: var(--concrete, #eef0f1);
    border-top: 4px solid var(--accent-deep, #0f6b31);
}
.oscaryapi-trust__heading {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin: 0 0 1rem;
    color: var(--ink-800, #111827);
}
.oscaryapi-trust__lead {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 2.5rem;
    color: var(--ink-700, #2b3036);
    font-size: 1rem;
    line-height: 1.55;
}
.oscaryapi-trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--container, 1200px);
    margin-left: auto;
    margin-right: auto;
}
.oscaryapi-trust__item {
    background: var(--paper, #fff);
    padding: 1.5rem;
    border: 1px solid var(--concrete-2, #e6e9eb);
    border-radius: var(--r-sm, 2px);
    transition: border-color 150ms ease, transform 150ms ease;
}
.oscaryapi-trust__item:hover {
    border-color: var(--accent-deep, #0f6b31);
    transform: translateY(-2px);
}
.oscaryapi-trust__icon {
    color: var(--accent-deep, #0f6b31);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.oscaryapi-trust__icon svg {
    width: 32px;
    height: 32px;
}
.oscaryapi-trust__item-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    color: var(--ink-800, #111827);
}
.oscaryapi-trust__item-body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-700, #2b3036);
}
.oscaryapi-trust__item-body a {
    color: var(--accent-deep, #0f6b31);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.oscaryapi-trust__item-body a:hover {
    color: var(--ink-800, #111827);
}
.oscaryapi-trust__cta {
    margin-top: 2.5rem;
    text-align: center;
    padding: 1.5rem;
    background: var(--paper, #fff);
    border: 1px solid var(--concrete-2, #e6e9eb);
    border-radius: var(--r-sm, 2px);
}
.oscaryapi-trust__cta p {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    color: var(--ink-800, #111827);
    font-weight: 500;
}
.oscaryapi-trust__cta .btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    /* A content-area link colour was winning over .btn--primary, leaving the
       label the same green as the fill (invisible). --accent-deep keeps the
       white label at 6.63:1, as for every other primary button. */
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--paper);
    text-decoration: none;
}
.oscaryapi-trust__cta .btn:hover,
.oscaryapi-trust__cta .btn:focus-visible {
    color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
    .oscaryapi-trust__item:hover {
        transform: none;
    }
}
@media (max-width: 640px) {
    .oscaryapi-trust {
        padding: 2rem 1rem;
    }
    .oscaryapi-trust__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}


/* ==========================================================================
   16. DARK MODE — OS preference: prefers-color-scheme: dark (2026 baseline)
   --------------------------------------------------------------------------
   Reuses the existing token system. Only the hex values are overridden.
   Concrete becomes a deep neutral graphite (not pure black) so the accent
   accent still has room to breathe; ink and line tokens get inverted.
   No component selectors — every existing rule reads from --paper / --ink-N
   / --line / --concrete, so token-level overrides cascade everywhere.

   Per the unresolved decision in the gap audit: brand-faithful dark
   (green accent + warm-graphite surfaces) rather than neutral slate.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Inverted surfaces — graphite rather than pure black, so the
           brand green (--accent-deep / --accent) still has visual room. */
        --paper:       #14171a;
        --paper-warm:  #1a1d20;
        --concrete:    #1a1d20;
        --concrete-2:  #202427;
        --ink-900:     #f4f5f6;  /* now the lightest text token */
        --ink-800:     #ececec;  /* primary text on dark */
        --ink-700:     #d4d6d8;
        --ink-600:     #a4abb3;  /* was body gray, now mid-gray on dark */
        --ink-500:     #8a9098;
        --ink-400:     #6f757c;
        --ink-300:     #54595e;

        /* Hairlines — flip from dark-on-light to light-on-dark */
        --line:        rgba(255, 255, 255, 0.10);
        --line-strong: rgba(255, 255, 255, 0.22);
        --line-light:  rgba(255, 255, 255, 0.06);
        /* Flipped for dark surfaces: #8a929b measures ~5.3:1 against the dark
           --concrete (#1a1d20). */
        --line-input:  #8a929b;

        /* Softs: keep brand greens but bump alpha for dark backgrounds */
        --accent-soft:   rgba(34, 197, 94, 0.14);
        --accent-line:   rgba(34, 197, 94, 0.45);
        --success-soft: rgba(63, 125, 78, 0.18);

        /* The accent pair flips with surface polarity. Every usage in this
           file follows the documented convention "bright green reads on dark
           surfaces, deep green reads on light surfaces" (see the table at
           :root). Dark mode swaps which surfaces are dark and which are
           light, so the pair swaps too - the usages then stay correct with
           zero per-component changes. --accent-darker is the hover shade of
           the deep/light-surface green; here it becomes the hover shade of
           the bright one (#4ade80 on the now-dark surfaces, ~10:1). */
        --accent-bright: #0f6b31;
        --accent-deep:   #22c55e;
        --accent-500:    #0f6b31;
        --accent-600:    #22c55e;
        --accent-darker: #4ade80;

        /* Shadows become "glow" — softer, less depth */
        --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.20);
        --shadow-md: 0 1px 0 rgba(0, 0, 0, 0.30), 0 8px 20px -12px rgba(0, 0, 0, 0.50);
        --shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.40), 0 20px 44px -18px rgba(0, 0, 0, 0.60);
    }

    /* PHOTO-BACKED BANDS DON'T INVERT. The photography (and the hardcoded
       dark gradient scrims painted over it) looks identical in both modes,
       but the token inversion above flips the text dark on top of it - the
       CTA headline went 1.2:1 on its own photo. Re-pin the light-mode value
       of every token these bands read, so their headings, ghost buttons and
       green accents render exactly as in light mode. (This replaces the old
       --scrim-color tweak: no rule ever consumed that custom property.) */
    .hero,
    .hero--page,
    .hero--cta,
    .hero--image,
    .section--image,
    .gallery-item,
    .gallery-item-cap,
    .motto-strip {
        --paper:        #ffffff;
        --paper-warm:   #f7f5f1;
        --ink-900:      #000000;
        --ink-800:      #0a0a0a;
        --ink-700:      #0a0a0a;
        --ink-600:      #454c52;
        --ink-500:      #4d545a;
        --ink-400:      #565d64;
        --ink-300:      #5f666d;
        --accent-bright: #22c55e;
        --accent-deep:   #0f6b31;
        --accent-500:    #22c55e;
        --accent-600:    #0f6b31;
        --accent-darker: #14532d;
    }

    /* Two hairline/icon nits on the now-light ink-based bands: raw --accent
       icons are 2.6:1 on #f4f5f6 and the white-alpha footer hairline is
       invisible. The flipped --accent-bright (#0f6b31 here) restores 5.4:1
       for the contact icons; the hairline becomes a light-mode-style ink. */
    .footer-contact .icon { color: var(--accent-bright); }
    .footer-grid { border-bottom-color: rgba(20, 23, 26, 0.10); }

    /* The faint footer tier (0.58 paper-alpha) lands at 4.29:1 on the
       flipped light band - just below AA 4.5:1. Match the main footer tier
       (0.62) in dark mode only; light mode keeps its 0.58 hierarchy. */
    .footer-copyright,
    .footer-credit { color: color-mix(in srgb, var(--paper) 62%, transparent); }

    /* The credentials band paints a near-opaque LIGHT wash over its photo
       (rgba(238,240,241,.94-.97)) - a hardcoded light surface whose
       ink-token text would flip light with the rest of the page (light on
       light). Invert the wash instead so the band matches its .section--gray
       siblings and the text keeps its flipped light ink. */
    .section--credentials {
        background-image:
            linear-gradient(rgba(26, 29, 32, 0.94), rgba(26, 29, 32, 0.97)),
            image-set(url("assets/images/hero/tools-flatlay-1200.avif") type("image/avif"), url("assets/images/hero/tools-flatlay-1200.webp") type("image/webp"), url("assets/images/hero/tools-flatlay.jpg") type("image/jpeg"));
    }

    /* Invert the Impressum warn span so the warning still reads
       against the dark surface. */
    .oscaryapi-impressum-warn {
        background: #4a2a00;
        color: #ffd9a8;
    }
}


/* ==========================================================================
   17. FORCED COLORS — Windows High Contrast / forced-colors: active
   --------------------------------------------------------------------------
   When the user has Windows High Contrast (or any UA-emitted forced
   palette) on, the browser ignores custom colors and forces a fixed
   palette. This block ensures the site is still usable in that mode:
     - Buttons get a visible system-color border
     - Focus rings are 3px solid Highlight (system)
     - SVG icons inherit currentColor
     - Photo scrims become a near-opaque Highlight overlay so text is
       always readable over the photo
   ========================================================================== */

@media (forced-colors: active) {
    :root {
        /* System color tokens — UA-forced, not customizable */
        --system-highlight: Highlight;
        --system-highlight-text: HighlightText;
    }

    .btn,
    .btn--primary,
    .btn--ghost,
    .btn--ghost-on-photo,
    .btn--link,
    .btn--lg {
        border: 2px solid var(--system-highlight);
    }

    .btn:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid var(--system-highlight) !important;
        outline-offset: 2px !important;
    }

    /* SVG icons must follow currentColor in forced-colors mode */
    svg {
        forced-color-adjust: auto;
    }

    /* Photo heroes: replace the scrim gradient with an opaque
       Highlight overlay so text is always readable. */
    .hero,
    .hero--image {
        background-color: var(--system-highlight);
        color: var(--system-highlight-text);
    }
    .hero h1,
    .hero h2,
    .hero p,
    .hero--image h1,
    .hero--image p {
        color: var(--system-highlight-text);
    }

    /* The Impressum warn span — make it impossible to miss */
    .oscaryapi-impressum-warn {
        border: 2px solid var(--system-highlight);
    }
}


/* ==========================================================================
   18. PERFORMANCE — content-visibility + contain-intrinsic-size
   --------------------------------------------------------------------------
   Mark below-the-fold sections as `content-visibility: auto` so the
   browser can skip rendering them until they're scrolled near the
   viewport. `contain-intrinsic-size` reserves space so the page
   doesn't reflow when those sections come in.

   Conservative values (≥ estimated real height) to avoid jank.
   ========================================================================== */

.section,
.oscaryapi-trust,
.oscaryapi-cta-band {
    content-visibility: var(--cv-auto);
    contain-intrinsic-size: 600px;
}

/* The site footer is deliberately NOT in the list above.
   It holds the legally required Impressum / Datenschutz links. With
   `content-visibility: auto` an off-screen element is not painted, so
   automated scanners cannot resolve its real background and report a false
   "serious" contrast failure for those links. The footer is the last block
   on the page, so skipping its paint saves nothing measurable. */
.site-footer {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

/* The very first section after the hero is always in view on
   typical layouts, so don't skip-render it. */
.hero + .section {
    content-visibility: visible;
    contain-intrinsic-size: none;
}


/* ==========================================================================
   19. IMPRESSUM — config-driven warn span
   --------------------------------------------------------------------------
   The Settings > Oscar Yapı page adds `betriebsnummer` and
   `verantwortlicher` fields. When either is empty, the child
   page-impressum.php template renders a `.oscaryapi-impressum-warn` span
   so the gap is impossible to miss. This block styles that span and
   the "missing field" admin notice. Both work in light + dark mode
   (dark override in §16) and forced-colors (override in §17).
   ========================================================================== */

.oscaryapi-impressum-warn {
    display: inline-block;
    background: #fff4e5;
    color: #7a3e00;
    border: 1px solid #d97706;
    border-radius: var(--r-sm);
    padding: 0.125rem 0.5rem;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1.4;
    /* MOBILE OVERFLOW FIX 2026-09-24: `nowrap` made these placeholder
       spans (e.g. "[FILL IN: Name der verantwortliche Person …]") push
       /impressum/ to a 559px scrollWidth on a 375px viewport. Let them
       wrap; `overflow-wrap: anywhere` also catches unbroken tokens. */
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.oscaryapi-impressum-missing {
    /* Used by the noscript / no-JS path in the same template. */
    font-size: 0.95rem;
}


/* ==========================================================================
   20. ASPECT-RATIO (CLS) — F9
   --------------------------------------------------------------------------
   Most Oscar Yapı sections are background-image (hero, section--image)
   with a background-color fallback, so the layout is stable even before
   the image loads. The few actual <img> surfaces that need defensive
   aspect-ratio reservation are listed here. Add new ones as they're
   introduced.

   The .media utility class is for any future <img> that doesn't already
   have a parent grid row height; applying it gives a known ratio so
   the browser can reserve layout space and the page doesn't reflow
   when the image arrives.
   ========================================================================== */

.gallery-item {
    /* The .gallery grid uses grid-auto-rows: 220px but the --wide /
       --tall modifiers span 2 rows; aspect-ratio keeps the cell
       proportional on browsers that compute grid track size from the
       child's intrinsic ratio. */
    aspect-ratio: 4 / 3;
}
.gallery-item--wide { aspect-ratio: 16 / 9; }
.gallery-item--tall { aspect-ratio: 4 / 5; }

.kontakt-testimonial-card {
    /* Featured testimonial cards on /kontakt/ have a media area at the
       top. Reserve a 4:3 space so the image doesn't reflow the card. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.media {
    /* Utility for any future <img> that doesn't have a parent grid
       row height or fixed dimensions. Reserve 16:9 by default;
       override with .media--square, .media--portrait, etc. */
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--concrete-2);
}
.media--square    { aspect-ratio: 1 / 1; }
.media--portrait  { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--cinema    { aspect-ratio: 21 / 9; }


/* ==========================================================================
   21. MOTION AUDIT (F10) — explicit gating + rationale
   --------------------------------------------------------------------------
   The site has 3 @keyframes animations:
     - spin    : button loading spinner (0.65s linear infinite)
     - wa-pulse: WhatsApp float-button halo (2.4s infinite)
     - fadeInUp: contact form success reveal (0.4s one-shot)

   Tier 1 added a global prefers-reduced-motion override that sets
   animation-duration / transition-duration to 0.001ms on every element
   (style.css §Motion-gate block). That covers all 3. This section
   adds explicit gating for the two indefinite loops (spin + wa-pulse)
   so the intent is clear in code review, and leaves the one-shot
   fadeInUp to the global override (0.4s is short enough that the
   0.001ms reduction is visually identical to "off" but technically
   keeps the keyframes running for any focus-state side effects).
   ========================================================================== */

.spinner,
.btn.is-loading .btn__spinner,
.btn.is-loading::after {
    animation: spin 0.65s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .spinner,
    .btn.is-loading .btn__spinner,
    .btn.is-loading::after {
        animation: none;
    }
}

/* Use --motion-multiplier (defined in :root) as a multiplier for any
   new transition that needs a one-line opt-out for reduced-motion
   without duplicating @media blocks. Example:
       .new-thing { transition: transform calc(var(--t-base) * var(--motion-multiplier)); }
   When the user prefers reduced motion, --motion-multiplier becomes 0
   and the transition fires instantly. */
.new-thing {
    transition: transform calc(var(--t-base) * var(--motion-multiplier));
}


/* ==========================================================================
   22. TEXT-WRAP COVERAGE (F11) — widows + orphans
   --------------------------------------------------------------------------
   German long-form copy is dense and produces ugly widows. The previous
   session had 1 each of `text-wrap: pretty` and `text-wrap: balance` —
   this section extends coverage to every body paragraph and every
   heading so widows are eliminated site-wide with zero JS cost.
   ========================================================================== */

/* Body copy: prevent orphans on the last line (pretty) */
body p,
body li,
body dd,
body blockquote,
body figcaption {
    text-wrap: pretty;
}

/* Headings: balance line breaks so titles don't end with a single
   orphaned word. Cap on h1-h3 only — h4-h6 are short labels where
   balance can produce awkward wraps. */
h1, h2, h3 {
    text-wrap: balance;
}

/* Section titles and eyebrow text — balance, but tighter */
.eyebrow,
.section-title,
h4, h5, h6 {
    text-wrap: balance;
    max-width: 60ch; /* avoid one-line balance on long headings */
}



/* Journal card thumbnail - a real <img> via get_the_post_thumbnail(), so it
   gets WordPress srcset, intrinsic dimensions and native lazy-loading. */
.home-post__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   RESPONSIVE HERO BACKGROUNDS (mobile)
   --------------------------------------------------------------------------
   The decorative hero photographs stay CSS backgrounds - they sit behind
   text and are not project documentation, so they gain nothing from being
   <img> elements - but they are still format- and size-negotiated.
   image-set() hands the browser an AVIF (roughly a quarter of the JPEG),
   and this media query stops a 390 px phone from downloading the 1200 px
   rendition. Measured homepage hero photography: 1,008 KB -> ~100 KB.
   ========================================================================== */
@media (max-width: 900px) {
    .section--credentials {
        background-image:
            linear-gradient(rgba(238, 240, 241, 0.94), rgba(238, 240, 241, 0.97)),
            image-set(url("assets/images/hero/tools-flatlay-768.avif") type("image/avif"), url("assets/images/hero/tools-flatlay-768.webp") type("image/webp"), url("assets/images/hero/tools-flatlay-1200.avif") type("image/avif"));
    }
    .hero--cta {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.92)),
            image-set(url("assets/images/hero/concrete-texture-768.avif") type("image/avif"), url("assets/images/hero/concrete-texture-768.webp") type("image/webp"), url("assets/images/hero/concrete-texture-1200.avif") type("image/avif"));
    }
    body.page-id-8 .hero--image {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
            image-set(url("assets/images/hero/house-exterior-768.avif") type("image/avif"), url("assets/images/hero/house-exterior-768.webp") type("image/webp"), url("assets/images/hero/house-exterior-1200.avif") type("image/avif"));
    }
    body.page-id-11 .hero--image {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
            image-set(url("assets/images/hero/tools-flatlay-768.avif") type("image/avif"), url("assets/images/hero/tools-flatlay-768.webp") type("image/webp"), url("assets/images/hero/tools-flatlay-1200.avif") type("image/avif"));
    }
    body.page-id-12 .hero--image {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
            image-set(url("assets/images/hero/house-exterior-768.avif") type("image/avif"), url("assets/images/hero/house-exterior-768.webp") type("image/webp"), url("assets/images/hero/house-exterior-1200.avif") type("image/avif"));
    }
    body.page-id-14 .hero--image {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
            image-set(url("assets/images/hero/concrete-texture-768.avif") type("image/avif"), url("assets/images/hero/concrete-texture-768.webp") type("image/webp"), url("assets/images/hero/concrete-texture-1200.avif") type("image/avif"));
    }
    body.page-id-13 .hero--image {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
            image-set(url("assets/images/hero/blueprint-hands-768.avif") type("image/avif"), url("assets/images/hero/blueprint-hands-768.webp") type("image/webp"), url("assets/images/hero/blueprint-hands-1200.avif") type("image/avif"));
    }
    .hero {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.96)),
            image-set(url("assets/images/hero/hero-main-768.avif") type("image/avif"), url("assets/images/hero/hero-main-768.webp") type("image/webp"), url("assets/images/hero/hero-main-1200.avif") type("image/avif"));
    }
    body.page-id-7 .hero--page {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.86)),
            image-set(url("assets/images/gallery/contact-hero-768.avif") type("image/avif"), url("assets/images/gallery/contact-hero-768.webp") type("image/webp"), url("assets/images/gallery/contact-hero-1200.avif") type("image/avif"));
    }
    .motto-strip {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.94)),
            image-set(url("assets/images/hero/blueprint-hands-768.avif") type("image/avif"), url("assets/images/hero/blueprint-hands-768.webp") type("image/webp"), url("assets/images/hero/blueprint-hands-1200.avif") type("image/avif"));
    }
}

/* The 900px image swaps above must repeat each desktop overlay layer: a
   background-image override replaces the whole layer list, and without the
   gradient white hero text sat directly on bright photos on phones. The
   credentials band also needs its dark-mode wash repeated here. */
@media (max-width: 900px) and (prefers-color-scheme: dark) {
    .section--credentials {
        background-image:
            linear-gradient(rgba(26, 29, 32, 0.94), rgba(26, 29, 32, 0.97)),
            image-set(url("assets/images/hero/tools-flatlay-768.avif") type("image/avif"), url("assets/images/hero/tools-flatlay-768.webp") type("image/webp"), url("assets/images/hero/tools-flatlay-1200.avif") type("image/avif"));
    }
}

/* Click-to-load map placeholder (DSGVO). The OpenStreetMap iframe is only
   inserted after the visitor activates the button, so the contact page makes
   no third-party request and loads no map until someone asks for it. */
.map-card__embed--consent {
    display: grid;
    place-items: center;
    min-height: 320px;
    background:
        linear-gradient(135deg, rgba(15, 107, 49, .06), rgba(10, 10, 10, .04)),
        var(--paper, #f2eee6);
    border: 1px dashed rgba(15, 107, 49, .35);
    border-radius: var(--r-sm, 4px);
}
.map-card__placeholder {
    display: grid;
    gap: var(--s-4, 1rem);
    justify-items: center;
    max-width: 46ch;
    padding: var(--s-5, 1.5rem);
    text-align: center;
}
.map-card__consent-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-600, #454c52);
}
.map-card__embed--consent.is-loaded {
    display: block;
    border: 0;
    background: none;
}
.map-card__embed--consent.is-loaded iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* The two content-light sections above the promises grid sat in ~80px of
   padding top and bottom around two short paragraphs, which read as
   unfinished rather than confident. Tighten the rhythm for short sections
   only; the rest of the page keeps its generous spacing. */
.section--compact {
    padding-block: clamp(2rem, 3.5vw, 3rem);
}

/* How-we-work grid: three concrete commitments, complementing (not repeating)
   the trust block below. */
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5, 1.5rem);
    margin-top: var(--s-5, 1.5rem);
}
.how-item h3 {
    font-size: 1.0625rem;
    line-height: 1.25;
    margin-bottom: var(--s-2, .5rem);
    color: var(--ink-900, #0a0a0a);
}
.how-item p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ink-600, #454c52);
}
@media (max-width: 900px) {
    .how-grid {
        grid-template-columns: 1fr;
        gap: var(--s-4, 1rem);
    }
}
/* ==========================================================================
   25. DESIGN PASS 2026-09-26 — reading measure, alignment, rhythm, targets
   --------------------------------------------------------------------------
   Appended rather than inlined so the change stays reviewable and reversible.
   Each block cites the measurement that motivated it.

   (a) READING MEASURE
       Body copy rendered 660-745px wide at a 17px body size = 78-90
       characters per line. Past ~75 the eye loses the return sweep to the
       left margin. Capped at 68ch (German compounds included). max-width
       never grows a box, so cards, grids and columns are unaffected.
   (b) ALIGNMENT SYSTEM
       The homepage mixed three behaviours: a left-aligned h2 ("So arbeiten
       wir"), centred .section-title headings ("Unser Versprechen an Sie",
       "Aktuelles aus dem Journal"), and the centred trust block — all over
       left-aligned content. One rule now: headings are left-aligned, matching
       the hero and the how-grid. The ceremonial .hero--top (404) and the
       utility bar stay centred, which is deliberate.
   (c) CARD RHYMM
       Titles wrap to one or two lines, so body copy began at a different Y in
       every column of a row. Reserving two title lines makes the body text
       start on one horizontal line across the grid.
   (d) TOUCH TARGETS
       WCAG 2.5.8 wants 24x24 minimum; 44x44 is the comfortable floor used
       throughout this theme already. Three controls were under it.
   ========================================================================== */

/* --- (a) reading measure ---------------------------------------------- */
main p,
main li {
    /* 68ch measured 707px = ~78 characters here (1ch = 0.62em in Public Sans,
       and a character is narrower than "0"). 54ch = 562px = ~66 characters,
       which is the top of the comfortable range for 17px body copy. */
    max-width: 54ch;
}
/* .lead runs larger, so its measure is set in the same character terms. */
main .lead { max-width: 48ch; }

/* --- (b) one alignment system ------------------------------------------ */
.section-title,
.oscaryapi-trust__heading {
    text-align: left;
}
.oscaryapi-trust__lead {
    text-align: left;
    margin-inline: 0;
}
.home-posts__all {
    text-align: left;
}

/* --- (c) card rhythm --------------------------------------------------- */
.promise-item,
.oscaryapi-trust__item {
    display: flex;
    flex-direction: column;
}
.promise-item h3,
.oscaryapi-trust__item-title {
    /* Two title lines reserved so the body copy aligns across the row. */
    min-height: 2.4em;
    min-height: 2lh;
}
.promise-item p,
.oscaryapi-trust__item-body {
    margin-bottom: 0;
}

/* --- (d) touch targets ------------------------------------------------- */
.menu-toggle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.scroll-to-top {
    min-width: 44px;
    min-height: 44px;
}
/* The 480px breakpoint shrank this to 42x42 — back over the floor. */
@media (max-width: 480px) {
    .scroll-to-top { width: 44px; height: 44px; }
}
.skip-link:focus {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ==========================================================================
   26. INLINE-STYLE TOKENS (2026-09-26) — repeated inline styles, as classes
   --------------------------------------------------------------------------
   Inventory: 77 style="" attributes across oscaryapi-theme/*.php, 37 distinct
   values. The 56 attributes whose value was used 2+ times are now named
   classes; the 21 one-offs (bespoke grids, single-use measure tweaks, and the
   9 admin-bar strings that live inside PHP in functions.php) stay inline.

   Appending rather than inlining keeps this reviewable and revertible: delete
   the block, restore the attributes, nothing else changes.

   Wherever a rule is repeated with a context prefix (.hero--image, .hero--top,
   .section--image) the reason is always the same: the inline attribute it
   replaces used to outrank an existing class rule, which would otherwise take
   the property over the moment the attribute is gone. The comment above each
   pair names the rule being outranked. No other property is restated, and no
   existing rule is modified.

   (a) centred hero wrap      12 sites  — .text-center already exists
   (b) section heading gap     6 sites
   (c) muted list arrow        5 sites
   (d) centred hero lead       4 sites
   (e) dark-surface tint       4 sites  — the off-palette fix
   (f) narrow hero title       6 sites
   (g) photo-hero height       4 sites
   (h) inner-page CTA          3 sites
   (i) centred action row      2 sites
   (j) split heading           2 sites
   (k) split lead              2 sites
   (l) outline button on dark  2 sites  — second off-palette hardcode
   (m) photo-section split     2 sites  — .section--image__grid reused
   ========================================================================== */

/* (a) Centred hero wrap. .text-center was added in §25 UTILITIES with the
   identical declaration, so the 12 attributes are replaced by the existing
   utility rather than by a second one that means the same thing.

   The scoped line only exists to outrank `.hero--image > .wrap { text-align:
   left }`, which the removed attribute was overriding. The solid heroes are
   untouched — verified: their `text-align` is already inherited left, so
   .text-center alone is enough there. */
.hero--image > .wrap.text-center {
    text-align: center;
}

/* (b) Air under a section's eyebrow + heading pair. */
.section-head-gap {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* (c) Trailing arrow in a list row — de-emphasised, never removed. */
.icon-muted {
    color: var(--ink-300);
}

/* (d) Hero lead, centred. --s-10 is 2.5rem.
   The hero-scoped pair outranks `p { margin-bottom: var(--s-4) }` and
   `.hero--image .lead { margin-bottom: var(--s-6) }`, both of which the
   removed `margin:0 auto` attribute was flattening to 0. */
.lead--center {
    margin: 0 auto;
}
.lead--center-spaced {
    margin: 0 auto var(--s-10);
}
.hero--top .lead--center,
.hero--image .lead--center {
    margin: 0 auto;
}
.hero--image .lead--center-spaced {
    margin: 0 auto var(--s-10);
}

/* (e) OFF-PALETTE FIX. rgb(244, 242, 236) is neither --paper (#ffffff) nor
   --paper-warm (#f7f5f1): a drifted hardcode that no future palette change
   could ever reach. Both values are now mixed from --paper, each behind the
   flat rgba() line for engines without color-mix(), as everywhere else here.

     before  rgba(244, 242, 236, .7)  ->  after  rgba(255, 255, 255, .7)
     before  rgba(244, 242, 236, .2)  ->  after  rgba(255, 255, 255, .2)

   .border-bottom is 0 on .hero-meta, so the tint has no visible edge today;
   it is kept so the token is complete wherever a border is added back. */
.u-on-dark-muted {
    color: rgba(255, 255, 255, 0.7);
    color: color-mix(in srgb, var(--paper) 70%, transparent);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: color-mix(in srgb, var(--paper) 20%, transparent);
}
/* Outranks `.hero--image .hero-meta { color: var(--accent-bright) }`, which
   the removed inline color was overriding with the drifted value. */
.hero--image .hero-meta.u-on-dark-muted {
    color: rgba(255, 255, 255, 0.7);
    color: color-mix(in srgb, var(--paper) 70%, transparent);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: color-mix(in srgb, var(--paper) 20%, transparent);
}

/* (f) Hero title capped at 14ch and centred. The two hero types keep the
   spacing they were authored with — the attributes differed (2.5rem/1.5rem
   under a photo hero, 0/2rem under a solid one) and that is preserved. */
.hero-title--narrow {
    max-width: 14ch;
    margin-inline: auto;
}
/* Outranks `.hero--image h1 { margin: var(--s-6) 0 var(--s-5);
   max-width: 18ch; margin-left: 0; margin-right: auto }`. */
.hero--image .hero-title--narrow {
    max-width: 14ch;
    margin: 2.5rem auto 1.5rem;
}
/* Outranks `.hero h1 { margin-bottom: var(--s-5) }`,
   `.hero--top h1 { margin-inline: auto }` and
   `.hero h1:not([class]) { max-width: 820px }`. */
.hero--top .hero-title--narrow {
    max-width: 14ch;
    margin: 0 auto 2rem;
}

/* (g) Photo-hero height. min-width, not a bare rule: the 768px block further
   up lowers .hero--image to 40vh, and a later top-level rule of equal
   specificity would beat it inside that query. */
@media (min-width: 769px) {
    .hero--image--short { min-height: 55vh; }
    .hero--image--tall  { min-height: 60vh; }
}

/* (h) Paper CTA on a photo section — MADE LIVE 2026-09-26.
   These three buttons were authored as `style="background:var(--paper);
   color:var(--ink-800)"`, but the `.section--image .btn--primary { ... !important }`
   rule in §14 outranked the inline attribute, so they have always rendered in
   --accent-deep and the author's white CTA never appeared. A paper button on a
   photograph is the stronger call and gives the brand green something to
   contrast against, so the intent is now honoured. !important is required to
   outrank §14, which is the pattern this file already uses for this exact
   conflict. Revert by deleting this block — the rendered colour then falls
   back to --accent-deep, i.e. the pre-2026-09-26 appearance. */
.btn--paper,
.section--image .btn--paper,
.hero--image .btn--paper {
    background: var(--paper) !important;
    background-color: var(--paper) !important;
    color: var(--ink-800) !important;
    border-color: var(--paper) !important;
}
.btn--paper:hover,
.section--image .btn--paper:hover,
.hero--image .btn--paper:hover {
    background: var(--accent-deep) !important;
    background-color: var(--accent-deep) !important;
    color: var(--paper) !important;
    border-color: var(--accent-deep) !important;
}

/* (i) Action row centred under a centred hero lead. */
.hero-actions--center {
    justify-content: center;
}

/* (j) Oversized heading in a photo-section split. The scoped line outranks
   `.section--image h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem) }`. */
.h2--lg {
    font-size: clamp(2rem, 4vw, 3rem);
}
.section--image .h2--lg {
    font-size: clamp(2rem, 4vw, 3rem);
}

/* (k) Lead above a CTA in a photo-section split. --s-8 is 2rem. */
.lead--roomy {
    margin-bottom: var(--s-8);
}

/* (l) Outline button on a photo hero. Deliberately NOT .btn--ghost-on-photo:
   that variant is a 55% border with a translucent hover fill, this was a 50%
   border keeping the .btn--ghost solid hover. Only the hue is corrected.

     before  rgba(244, 242, 236, .5)  ->  after  rgba(255, 255, 255, .5) */
.u-on-dark-ghost {
    background: transparent;
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.5);
    border-color: color-mix(in srgb, var(--paper) 50%, transparent);
}

/* (m) Two-column split in a photo section. The existing .section--image__grid
   is declaration-identical, so it is reused. It also carries the existing
   single-column mobile fallback, which the two inline grids were bypassing. */
/* ==========================================================================
   27. A11Y FIXES FROM THE 2026-09-26 AXE RE-RUN
   --------------------------------------------------------------------------
   Both of these were latent defects rather than new ones. They only became
   visible once the trust block stopped escaping its own anchors and started
   rendering real links: before the fix those links were literal text, so no
   rule applied to them and the audit had nothing to flag.

   27a  WCAG 1.4.1 (serious, 6 pages) — a link inside running text must be
        distinguishable by more than colour. The trust-block links are
        #0f6b31 on #0a0a0a = 2.98:1 and carried no underline, so they read as
        ordinary words. Underline is the conventional treatment for in-text
        links; the standalone link style elsewhere on this site is
        deliberately underline-free and is left as it is.
   27b  WCAG 1.4.3 (serious, 2 Turkish pages) — the nav CTA. `.main-nav__cta`
        is put on the <a> by the hardcoded fallback in header.php, but
        wp_nav_menu puts a menu-item class on the <li>. Only the <a> case was
        styled, so every menu-rendered CTA — i.e. the whole Turkish nav — was a
        black chip holding 2.27:1 grey text (#454c52 on #0a0a0a).
   ========================================================================== */

/* --- 27a: in-text links carry an underline ----------------------------- */
.oscaryapi-trust__item-title a,
.oscaryapi-trust__item-body a,
.oscaryapi-trust__lead a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.oscaryapi-trust__item-title a:hover,
.oscaryapi-trust__item-body a:hover,
.oscaryapi-trust__lead a:hover {
    text-decoration-thickness: 2px;
}

/* --- 27b: nav CTA when the class lands on the <li> -------------------- */
.main-nav__list > li.main-nav__cta {
    background-color: var(--ink-800);
    border-radius: var(--r-sm);
}
.main-nav__list > li.main-nav__cta > a,
.main-nav__list > li.main-nav__cta > a:visited {
    color: var(--paper);
    text-decoration: none;
}
.main-nav__list > li.main-nav__cta > a:hover {
    color: var(--accent-bright);
}
/* Match the <a>-hosted CTA's horizontal padding on desktop only: below 769px
   the mobile rule `.main-nav__list > li > a` deliberately goes full width. */
@media (min-width: 769px) {
    .main-nav__list > li.main-nav__cta > a {
        padding: 0.5625rem 1.25rem;
        text-transform: uppercase;
        font-size: 0.8125rem;
        letter-spacing: 0.05em;
    }
}

/* ==========================================================================
   28. ANNOUNCEMENT BANNER STRIP (2026-09-28)
   --------------------------------------------------------------------------
   Markup: oscaryapi_render_active_banners() in oscaryapi-theme/functions.php,
   called from that theme's header.php between </header> and <main> so it sits
   above the fold on every page. The function emits NOTHING when no banner is
   inside its date window, so there is no :empty rule needed here.

   WHY THESE RULES LIVE HERE AND NOT IN THE PARENT THEME
     The live site enqueues exactly one theme stylesheet - this file. The
     parent's main.css (and the components.css it @imports) is never loaded, so
     banner rules added there render nothing. Verified 2026-09-28 by reading the
     <link rel=stylesheet> tags off a live page: only oscaryapi-child/style.css
     appears. An earlier attempt put these rules in the parent's components.css
     and produced a completely unstyled strip.

   The strip uses the accent-soft wash + a hairline accent rule so it reads as
   an announcement without competing with the header bar above it.
   ========================================================================== */
.banner-strip {
    background: var(--accent-soft);
    border-bottom: 1px solid var(--accent-line);
}
.banner-strip .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-3) var(--s-6);
    padding-block: var(--s-3);
}
.banner-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.banner-item__text {
    color: var(--ink-800);
    font-size: 0.875rem;
    line-height: 1.4;
}
/* Keep the button on one line and out of the text flow's way. */
.banner-item .btn {
    flex: none;
    white-space: nowrap;
    padding-inline: 1.25rem;
}

/* Below 768 each banner is one compact row (text left, action right) instead
   of a stacked text + full-width button: two stacked banners used to push the
   hero ~200px down on phones. The action keeps a 44px touch height. */
@media (max-width: 768px) {
    .banner-strip .container {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-block: var(--s-2);
    }
    .banner-item {
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }
    /* Phones show only the first banner (lowest "Order" in the editor):
       two rows still pushed the hero ~130px down on every page. */
    .banner-item + .banner-item {
        display: none;
    }
    .banner-item__text {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.8125rem;
    }
    .banner-item .btn {
        flex: none;
        width: auto;
        max-width: none;
        min-height: 44px;
        padding-inline: 0;
        border: 0;
        background: none;
        font-size: 0.75rem;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ==========================================================================
   Service / project / reference singles and the project archive
   (single-service.php, single-project.php, single-reference.php,
   archive-project.php). They reuse .hero--top / .section / .gallery and only
   add what those lack.
   ========================================================================== */
.single-entry__title {
    max-width: 20ch;
    margin-inline: auto;
    text-wrap: balance;
}
.single-entry__media {
    margin: 0 0 var(--s-8);
}
.single-entry__media img {
    width: 100%;
    height: auto;
    display: block;
}
.single-entry__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-8);
    padding-top: var(--s-8);
    border-top: var(--rule);
}
.single-entry__siblings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
}

/* Key facts under the project image. */
.project-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--s-4);
    margin: 0 0 var(--s-8);
    padding: var(--s-4) 0;
    border-block: var(--rule);
}
.project-facts__item dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.project-facts__item dd {
    margin: 0.25rem 0 0;
    font-weight: 600;
    color: var(--ink-800);
}

/* Project cards are links now: keep the caption colours and show focus. */
a.gallery-item--link {
    display: block;
    color: inherit;
    text-decoration: none;
}
a.gallery-item--link:hover,
a.gallery-item--link:focus-visible {
    text-decoration: none;
}
a.gallery-item--link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}
/* Project without a photo: a dark drafting-paper texture on the card's own
   ink background, so the caption stays legible and the card still reads as
   intentional rather than broken. */
.gallery-item__placeholder {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 24px);
}
/* Archive + related rows: equal 4:3 cards. The curated wide/tall spans of
   the per-page galleries do not survive an arbitrary number of items. */
.gallery--uniform {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    grid-auto-rows: auto;
}
.gallery--uniform .gallery-item {
    aspect-ratio: 4 / 3;
}

/* Testimonial single. */
.reference-quote {
    margin: 0;
}
.reference-quote__text {
    margin: 0;
    padding-left: var(--s-8);
    border-left: 4px solid var(--accent);
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--ink-800);
}
.reference-quote__cite {
    margin-top: var(--s-4);
    padding-left: var(--s-8);
    font-weight: 600;
    color: var(--ink-600);
}