/* ==========================================================================
   RELOAD PERSONAL TRAINING — Main Stylesheet
   Design System & Component Library
   Version: 1.4.0
   Author: NetriX GmbH (https://www.netrix.ch)
   ========================================================================== */


/* ==========================================================================
   1. FONT FACE DECLARATIONS
   Self-hosted Google Fonts for GDPR compliance.
   ========================================================================== */

/* --- Montserrat (Headings) --- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-v26-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-v26-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-v26-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-v26-latin-700.woff2') format('woff2');
}

/* --- Open Sans (Body) --- */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-v36-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-v36-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-v36-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-v36-latin-700.woff2') format('woff2');
}


/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
    /* Brand Colors */
    --color-primary: #65AF02;
    --color-primary-hover: #559402;
    --color-primary-light: #AAD76E;
    /* Markengrün als TEXTfarbe auf hellem Grund.
       #65AF02 kommt auf Weiss nur auf 2,73:1 — deutlich unter den 4,5:1,
       die für Fliesstext gefordert sind. Im Kopfbereich lag es zudem über
       einer durchscheinenden Fläche vor hellem Himmel und war praktisch
       nicht mehr zu lesen. Dieser Ton erreicht 4,85:1 und bleibt in der
       Familie. Nur für Text verwenden — Flächen und Knöpfe behalten das
       kräftige Markengrün. */
    --color-primary-text: #4A7F02;
    --color-accent: #4B02AF;
    --color-accent-hover: #3a028a;

    /* Neutrals */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-600: #4b5563;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-white: #ffffff;

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Glassmorphism */
    /* Glasflächen liegen über beliebigen Fotos. Bei 0.6 (und in der
       Kopfzeile sogar 0.35) hängt die Lesbarkeit davon ab, was zufällig
       hinter der Fläche liegt — auf dunklem Laub wurde aus dem Grün ein
       Kontrast von 1,3:1. Bei 0.9 ist der Untergrund berechenbar hell,
       die Unschärfe bleibt an den Rändern sichtbar. */
    --glass-bg: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: 12px;

    /* Layout */
    --section-padding: clamp(4rem, 8vw, 8rem);
    --container-max: 1280px;

    /* Border Radii */
    --radius-sm: 0.75rem;
    --radius-md: 1.5rem;
    --radius-lg: 2rem;
    --radius-xl: 2.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Header */
    --header-height: 80px;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-header: 200;
    --z-mobile-nav: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-back-to-top: 150;
}


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

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

ul,
ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

::selection {
    background-color: var(--color-primary-light);
    color: var(--color-gray-900);
}


/* ==========================================================================
   4. LAYOUT COMPONENTS
   ========================================================================== */

/* --- Container --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/*
 * Nur für Screenreader sichtbar.
 * WordPress-Standardklasse — wird u. a. vom Skip-Link im Header und von
 * Link-Overlays genutzt. Ohne diese Regel erscheint der Text sichtbar.
 */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    white-space: nowrap;
    word-wrap: normal;
}

/* beim Tabben sichtbar machen (Skip-Link) */
.screen-reader-text:focus {
    clip-path: none;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0.75rem 1.25rem;
    display: block;
    top: 1rem;
    left: 1rem;
    z-index: 100000;
    background: #ffffff;
    color: var(--color-dark, #111827);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

/* --- Section --- */
.section {
    padding-block: var(--section-padding);
    position: relative;
    overflow: hidden;
}

/* Reduced spacing when merged with previous section (same background) */
.section.section--merged {
    padding-block-start: clamp(1rem, 2vw, 2rem);
}

.section--gray {
    background-color: var(--color-gray-50);
}

.section--dark {
    background-color: var(--color-gray-900);
    color: var(--color-white);
}

.section--dark a:not(.btn) {
    color: var(--color-primary-light);
}

.section--dark a:not(.btn):hover {
    color: var(--color-primary);
}

.section--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section--accent {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* --- Grid --- */
.grid {
    display: grid;
    gap: 2rem;
}

.grid--2 {
    grid-template-columns: 1fr;
}

.grid--3 {
    grid-template-columns: 1fr;
}

.grid--4 {
    grid-template-columns: 1fr;
}

/* --- Flex --- */
.flex {
    display: flex;
    gap: 1rem;
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--column {
    flex-direction: column;
}


/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-900);
    margin-bottom: 0.75em;
}

/* Ensure headings inside dark/colored sections inherit color */
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.section--primary h1, .section--primary h2, .section--primary h3,
.section--primary h4, .section--primary h5, .section--primary h6,
.section--accent h1, .section--accent h2, .section--accent h3,
.section--accent h4, .section--accent h5, .section--accent h6 {
    color: var(--color-white);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    letter-spacing: -0.015em;
}

h3 {
    font-size: clamp(1.375rem, 3vw, 2rem);
}

h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

p {
    margin-bottom: 1.25rem;
}

p:last-child {
    margin-bottom: 0;
}

/* --- Heading Utility Classes --- */
.heading-xl {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.heading-lg {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.heading-md {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.heading-sm {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
}

/* --- Text Sizes --- */
.text-lg {
    font-size: 1.25rem;
    line-height: 1.6;
}

.text-md {
    font-size: 1rem;
    line-height: 1.7;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.6;
}

/* --- Text Colors --- */
.text-primary {
    color: var(--color-primary);
}

.text-accent {
    color: var(--color-accent);
}

.text-white {
    color: var(--color-white);
}

.text-muted {
    color: var(--color-gray-600);
}

/* --- Lead Paragraph --- */
.lead {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.7;
    color: var(--color-gray-600);
    max-width: 48rem;
}

.section--dark .lead,
.section--primary .lead,
.section--accent .lead {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Overline --- */
.overline {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--color-primary);
}

.section--dark .overline,
.section--primary .overline {
    color: var(--color-primary-light);
    border-bottom-color: var(--color-primary-light);
}

.section--accent .overline {
    color: var(--color-white);
    border-bottom-color: var(--color-white);
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-fast),
        box-shadow var(--transition-base);
    -webkit-user-select: none;
    user-select: none;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

/* Tastatur-Fokusmarkierung.
   Vorher: 3px Markengrün mit 3px Abstand — auf einem grünen Knopf sah das aus
   wie ein zweiter, umrandeter Button-Stil (besonders auf dem Parallax-Banner).
   Jetzt: dunkler Ring mit hellem Hof. Der liegt eng am Knopf, ist auf Weiss,
   auf Grün und auf Fotos gleichermassen erkennbar und lässt sich nicht mit
   einer Gestaltungsvariante verwechseln. Ganz entfernen geht nicht — ohne
   sichtbaren Fokus ist die Seite per Tastatur nicht mehr bedienbar
   (WCAG 2.4.7). Sie erscheint ausschliesslich beim Navigieren mit Tab,
   nie beim Klicken mit der Maus. */
.btn:focus-visible {
    outline: 2px solid var(--color-dark, #111827);
    outline-offset: 1px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
}

/* --- Primary Button --- */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
    box-shadow: 0 6px 20px rgba(101, 175, 2, 0.35);
}

/* --- Accent Button --- */
.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.btn--accent:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    box-shadow: 0 6px 20px rgba(75, 2, 175, 0.35);
}

/* --- Secondary Button (Outline) --- */
.btn--secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 6px 20px rgba(101, 175, 2, 0.25);
}

/* --- Ghost Button --- */
.btn--ghost {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn--ghost:hover {
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

/* --- Size Variants --- */
.btn--lg {
    padding: 1.125rem 2.5rem;
    font-size: 1.0625rem;
}

.btn--sm {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
}

/* --- Icon Button --- */
.btn--icon svg,
.btn--icon img {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}


/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.card__content {
    padding: 1.75rem;
}

.card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.card__text {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.card__text:last-child {
    margin-bottom: 0;
}

.card__meta {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --- Glassmorphism Card --- */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

@supports (backdrop-filter: blur(1px)) {
    .glass-card {
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
    }
}

/* Fallback when backdrop-filter is not supported */
@supports not (backdrop-filter: blur(1px)) {
    .glass-card {
        background: rgba(255, 255, 255, 0.88);
    }
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   8. NAVIGATION COMPONENTS
   ========================================================================== */

/* --- Site Header --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: var(--z-header);
    background-color: transparent;
    transition:
        background-color var(--transition-slow),
        box-shadow var(--transition-slow);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-top: 1.25rem;
}

/* Scrolled state: solid background */
.site-header--scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-sm);
}

@supports (backdrop-filter: blur(1px)) {
    .site-header--scrolled {
        background-color: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* --- Logo --- */
.site-header__logo {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
}

.site-header__logo img {
    height: 63px !important;
    width: auto;
    transition: height var(--transition-base);
}

.site-header--scrolled .site-header__logo img {
    height: 46px !important;
}

/* Helle Logo-Fassung auf dunklem Kopfbild.
   Welche Seite sie bekommt, entscheidet die Messung in
   inc/logo-kontrast.php — hier steht nur, wann welche zu sehen ist.
   Sobald die Kopfzeile beim Scrollen weiss wird, gilt wieder die dunkle. */
.site-header__logo--auf-dunkel .site-header__logo-img--dunkel {
    display: none;
}

.site-header--scrolled .site-header__logo--auf-dunkel .site-header__logo-img--dunkel {
    display: block;
}

.site-header--scrolled .site-header__logo--auf-dunkel .site-header__logo-img--hell {
    display: none;
}

/* T180: Unter 1024 px beginnt das Kopfbild der Start- und Unterseiten erst
   unter der Kopfzeile, das Logo steht dort auf hellem Grund. Die Messung
   in inc/logo-kontrast.php gilt nur für die breite Ansicht. Die Kopfbilder
   der Angebotsseiten (`.pr-hero`) liegen weiter unter dem Logo. */
@media (max-width: 1023px) {
    body:has(.page-hero, .hero) .site-header__logo--auf-dunkel .site-header__logo-img--dunkel {
        display: block;
    }

    body:has(.page-hero, .hero) .site-header__logo--auf-dunkel .site-header__logo-img--hell {
        display: none;
    }

    /* Logo 63 px plus 20 px Abstand oben ergab 83 px in einer 80 px hohen
       Kopfzeile: Das Logo stiess unten ans Kopfbild (Dominik, 31.10.2026).
       Kleiner und mittig, damit oben und unten Luft bleibt. */
    .site-header__inner {
        padding-top: 0;
    }

    .site-header__logo img {
        height: 50px !important;
    }

    /* Beim Scrollen war die Kopfzeile die ersten 50 px noch durchsichtig:
       Das Kopfbild rutschte unter das dunkle Logo (Dominik, 31.10.2026).
       Auf diesen Seiten ist sie darum oben weiss. Beim Scrollen wird sie
       zu Milchglas wie am Desktop, und das Logo schrumpft gleitend auf
       40 px, mittig ohne Sprung nach unten (Dominik, 01.11.2026). */
    body:has(.page-hero, .hero) .site-header {
        background-color: #fff;
    }

    body:has(.page-hero, .hero) .site-header.site-header--scrolled {
        background-color: rgba(255, 255, 255, 0.97);
    }

    @supports (backdrop-filter: blur(1px)) {
        body:has(.page-hero, .hero) .site-header.site-header--scrolled {
            background-color: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
        }
    }

    .site-header--scrolled .site-header__logo img {
        height: 40px !important;
    }

    .site-header.site-header--scrolled .site-header__inner {
        padding-top: 0;
    }

    /* Das Menü-Symbol ist sonst weiss und auf dem hellen Grund unsichtbar.
       Geöffnet (`.is-active`) bleibt es weiss auf dem dunklen Menü. */
    body:has(.page-hero, .hero) .menu-toggle:not(.is-active) .menu-toggle__line {
        background-color: var(--color-gray-800);
    }
}

.site-header--scrolled .site-header__nav a {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

.site-header--scrolled .site-header__inner {
    padding-top: 0.5rem;
}

/* --- Desktop Navigation — Pill Container --- */
.site-header__nav {
    display: none;
    align-items: center;
    gap: 0;
    height: auto;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 0.375rem 0.5rem;
    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        border-radius 0.4s ease,
        padding 0.4s ease;
}

.site-header__nav .site-header__menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gray-800);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-base);
    white-space: nowrap;
}

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

/* Active item */
.site-header__nav a.is-active {
    color: var(--color-primary-text);
}

/* Active (current page) nav link */
.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a,
.site-header__nav .current-menu-ancestor > a {
    color: var(--color-primary-text) !important;
    font-weight: 600;
}

/* Hamburger inside the pill */
.site-header__nav .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 0.25rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--transition-base);
}

.site-header__nav .menu-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* On scroll: pill dissolves into the solid header bar */
.site-header--scrolled .site-header__nav {
    background: transparent;
    box-shadow: none;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
}

/* --- Desktop Dropdown (Sub-Menu) — Glas-Panel im Pill-Stil --- */
.site-header__menu > li {
    position: relative;
}

/* Caret am Eltern-Punkt */
.site-header__menu > li.menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.6;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-header__menu > li.menu-item-has-children:hover > a::after,
.site-header__menu > li.menu-item-has-children > a[aria-expanded="true"]::after {
    transform: rotate(225deg) translateY(-2px);
    opacity: 1;
}

.site-header__menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 280px;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: var(--z-dropdown, 100);
}

/* Unsichtbare Brücke, damit die Maus den Spalt überqueren kann */
.site-header__menu .sub-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.site-header__menu > li.menu-item-has-children:hover > .sub-menu,
.site-header__menu > li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.site-header__menu .sub-menu li {
    width: 100%;
}

.site-header__menu .sub-menu a {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-gray-800);
    white-space: normal;
    line-height: 1.35;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-header__menu .sub-menu a:hover,
.site-header__menu .sub-menu a:focus-visible {
    background: rgba(101, 175, 2, 0.1);
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .site-header__menu .sub-menu,
    .site-header__menu > li.menu-item-has-children > a::after {
        transition: none;
    }
}

.site-header--scrolled .site-header__nav a {
    color: var(--color-gray-800);
}

.site-header--scrolled .site-header__nav a:hover {
    color: var(--color-primary);
}

/* --- CTA Button in Nav --- */
.site-header__cta {
    margin-left: 0.75rem;
}

/* --- Dropdown (Submenu) --- */
.dropdown {
    position: relative;
}

.dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dropdown__toggle svg {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform var(--transition-fast);
}

.dropdown.is-open .dropdown__toggle svg {
    transform: rotate(180deg);
}

/* Desktop dropdown panel */
.dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 0.75rem 0;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base);
    z-index: var(--z-dropdown);
}

.dropdown.is-open .dropdown__menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown__menu a {
    display: block;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-gray-800);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown__menu a::after {
    display: none; /* Override the nav underline */
}

.dropdown__menu a:hover {
    background-color: var(--color-gray-50);
    color: var(--color-primary);
}

/* --- Hamburger / Menu Toggle --- */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: calc(var(--z-mobile-nav) + 1);
}

.menu-toggle__lines {
    position: relative;
    width: 24px;
    height: 18px;
}

.menu-toggle__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 2px;
    transition:
        transform var(--transition-base),
        opacity var(--transition-fast),
        top var(--transition-base),
        background-color var(--transition-base);
}

.site-header--scrolled .menu-toggle__line {
    background-color: var(--color-gray-800);
}

.menu-toggle__line:nth-child(1) {
    top: 0;
}

.menu-toggle__line:nth-child(2) {
    top: 8px;
}

.menu-toggle__line:nth-child(3) {
    top: 16px;
}

/* Active state → X */
.menu-toggle.is-active .menu-toggle__line:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .menu-toggle__line:nth-child(3) {
    top: 8px;
    transform: rotate(-45deg);
}

/* Force white lines when mobile nav is open */
.menu-toggle.is-active .menu-toggle__line {
    background-color: var(--color-white);
}

/* --- Mobile Navigation Overlay --- */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: var(--z-mobile-nav);
    pointer-events: none;
    visibility: hidden;
}

.mobile-nav.mobile-nav--open {
    pointer-events: auto;
    visibility: visible;
}

/* Backdrop */
.mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mobile-nav.mobile-nav--open .mobile-nav__backdrop {
    opacity: 1;
}

/* Panel (slides in from right) — Light Glassmorphism */
.mobile-nav__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(82vw, 360px);
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        -8px 0 32px rgba(0, 0, 0, 0.08),
        -2px 0 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem 1.5rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.15, 1);
    overflow-y: auto;
}

.mobile-nav.mobile-nav--open .mobile-nav__panel {
    transform: translateX(0);
}

/* Header with logo + close button */
.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-nav__logo {
    width: 120px;
    height: auto;
    /* No invert — show original colored logo on white bg */
}

/* Close Button */
.mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.03);
    color: var(--color-gray-600);
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
    flex-shrink: 0;
}

.mobile-nav__close:hover {
    background: rgba(75, 2, 175, 0.08);
    color: #4B02AF;
    border-color: rgba(75, 2, 175, 0.2);
    transform: rotate(90deg);
}

.mobile-nav__close:active {
    transform: rotate(90deg) scale(0.92);
}

.mobile-nav__close svg {
    width: 20px;
    height: 20px;
}

/* Navigation links */
.mobile-nav__nav {
    flex: 1;
}

.mobile-nav__menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav__menu > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mobile-nav__menu > li:last-child {
    border-bottom: none;
}

.mobile-nav__menu > li > a {
    display: flex;
    align-items: center;
    padding: 0.75rem 0.75rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray-800);
    text-decoration: none;
    border-radius: 8px;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        opacity 0.4s ease,
        padding-left 0.2s ease;
    opacity: 0;
    transform: translateX(16px);
}

.mobile-nav.mobile-nav--open .mobile-nav__menu > li > a {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation — tighter delays */
.mobile-nav.mobile-nav--open .mobile-nav__menu > li:nth-child(1) > a { transition-delay: 0.06s; }
.mobile-nav.mobile-nav--open .mobile-nav__menu > li:nth-child(2) > a { transition-delay: 0.10s; }
.mobile-nav.mobile-nav--open .mobile-nav__menu > li:nth-child(3) > a { transition-delay: 0.14s; }
.mobile-nav.mobile-nav--open .mobile-nav__menu > li:nth-child(4) > a { transition-delay: 0.18s; }
.mobile-nav.mobile-nav--open .mobile-nav__menu > li:nth-child(5) > a { transition-delay: 0.22s; }
.mobile-nav.mobile-nav--open .mobile-nav__menu > li:nth-child(6) > a { transition-delay: 0.26s; }

/* Hover: subtle green tint */
.mobile-nav__menu > li > a:hover {
    background-color: rgba(101, 175, 2, 0.06);
    color: #65AF02;
    padding-left: 1rem;
}

/* Active / current page: purple accent */
.mobile-nav__menu > li.current-menu-item > a,
.mobile-nav__menu > li.current_page_item > a {
    color: #4B02AF;
    background-color: rgba(75, 2, 175, 0.05);
    border-left: 3px solid #4B02AF;
    padding-left: calc(0.75rem - 3px);
}

/* Mobile dropdown (accordion style) */
.mobile-nav .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: rgba(0, 0, 0, 0.015);
    border-radius: 0 0 8px 8px;
}

.mobile-nav .sub-menu a {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-500);
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-nav .sub-menu a:hover {
    color: #65AF02;
}

/* Dropdown toggle arrow */
.mobile-nav__dropdown-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.mobile-nav__dropdown-toggle:hover {
    color: #65AF02;
}

.mobile-nav__dropdown-toggle[aria-expanded="true"] {
    transform: translateY(-50%) rotate(180deg);
    color: #4B02AF;
}

.mobile-nav__menu > li.menu-item-has-children {
    position: relative;
}

/* CTA Footer */
.mobile-nav__footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s;
}

.mobile-nav.mobile-nav--open .mobile-nav__footer {
    opacity: 1;
    transform: translateY(0);
}

/* Radius nicht überschreiben — es gilt `--radius-sm` wie bei jedem anderen
   Knopf. Die 8px hier fielen kaum auf, waren aber eine dritte Variante. */
.mobile-nav__footer .btn--primary {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.75rem 1.25rem;
}



/* ==========================================================================
   9. FOOTER — Light, clean, 3-column layout
   ========================================================================== */

.site-footer {
    background-color: var(--color-white);
    color: var(--color-gray-600);
    padding-top: 0;
    padding-bottom: 0;
}

.site-footer__accent {
    height: 2px;
    background: linear-gradient(90deg, rgba(108,195,91,0.4), rgba(108,195,91,0.15), transparent);
}

.site-footer__main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-top: 4rem;
    padding-bottom: 3rem;
}

.site-footer a {
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer a:hover {
    color: var(--color-primary);
}

/* --- Column: Brand --- */
.site-footer__logo {
    display: inline-block;
    margin-bottom: 1.75rem;
}

.site-footer__logo-img {
    height: 80px;
    width: auto;
}

.site-footer__logo-text {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.site-footer__description {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--color-gray-500);
    max-width: 400px;
    margin: 0;
}

/* --- Column: Headings --- */
.site-footer__heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

/* --- Link Lists --- */
.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__links a {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
}

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

/* Aktuelle Seite. WordPress setzt die Klassen am <li> selbst — hier fehlte
   bisher nur die Auszeichnung. Gleiche Behandlung wie in der Kopfzeile:
   Textgrün (kontraststark, 4.85:1) und halbfett. Die Fusszeilen-Links sind
   grau, dadurch hebt sich der aktive Eintrag deutlich ab.
   `is-active` deckt die feste Liste ab, falls kein Menü zugewiesen ist. */
.site-footer__links .current-menu-item > a,
.site-footer__links .current_page_item > a,
.site-footer__links .current-menu-ancestor > a,
.site-footer__links a.is-active,
.site-footer__links a[aria-current="page"] {
    color: var(--color-primary-text);
    font-weight: 600;
}

/* --- Column: Contact --- */
.site-footer__contact-name {
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

.site-footer__contact-location {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: 1rem;
}

.site-footer__contact-email {
    display: inline-block;
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-bottom: 1.25rem;
}

.site-footer__contact-email:hover {
    color: var(--color-primary);
}

/* --- Social Icons --- */
.site-footer__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-500);
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.site-footer__social a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: rgba(108,195,91,0.06);
}

.site-footer__social svg {
    width: 18px;
    height: 18px;
}

/* --- Bottom Bar --- */
.site-footer__bottom {
    border-top: 1px solid var(--color-gray-200);
}

.site-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Nur oben/unten: der seitliche Abstand kommt von `.container` (T154). */
    padding-block: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-gray-400);
}

.site-footer__copyright {
    margin: 0;
}

.site-footer__legal {
    display: flex;
    gap: 1.5rem;
}

.site-footer__legal-link {
    color: var(--color-gray-400);
}

.site-footer__legal-link:hover {
    color: var(--color-primary);
}


/* --- Back to Top Button --- */
/* ==========================================================================
   BACK TO TOP + LESEFORTSCHRITT
   Ein Element statt zwei: Der Ring zeigt den Scroll-Fortschritt,
   die Zahl den Prozentwert. Bei Hover erscheint der Pfeil.
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-gray-800);
    border: none;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    z-index: var(--z-back-to-top);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity var(--transition-base),
        visibility var(--transition-base),
        transform var(--transition-base),
        background-color var(--transition-fast),
        color var(--transition-fast);
}

/* beide Klassennamen unterstützen (JS nutzte bisher --visible) */
.back-to-top.is-visible,
.back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top--visible:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-3px);
}

/* ── Ring ───────────────────────────────────────────────────── */
.back-to-top__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.back-to-top__ring-track,
.back-to-top__ring-bar {
    fill: none;
    stroke-width: 2.5;
}

.back-to-top__ring-track {
    stroke: rgba(0, 0, 0, 0.10);
}

.back-to-top__ring-bar {
    stroke: var(--color-primary);
    stroke-linecap: round;
    /* Umfang bei r=23 → 2·π·23 ≈ 144.5 */
    stroke-dasharray: 144.5;
    stroke-dashoffset: 144.5;
    transition: stroke-dashoffset 0.15s linear;
}

.back-to-top:hover .back-to-top__ring-bar {
    stroke: #ffffff;
}

.back-to-top:hover .back-to-top__ring-track {
    stroke: rgba(255, 255, 255, 0.3);
}

/* ── Prozentwert und Pfeil teilen sich die Mitte ────────────── */
.back-to-top__value,
.back-to-top__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top__value {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.back-to-top__percent {
    font-size: 0.62rem;
    opacity: 0.65;
    margin-left: 1px;
}

.back-to-top__icon {
    width: 20px;
    height: 20px;
    opacity: 0;
    transform: translate(-50%, -35%);
}

.back-to-top:hover .back-to-top__value {
    opacity: 0;
    transform: translate(-50%, -65%);
}

.back-to-top:hover .back-to-top__icon {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    .back-to-top__ring-bar,
    .back-to-top__value,
    .back-to-top__icon {
        transition: none;
    }
}


/* ==========================================================================
   10. HERO SECTION (base structure)
   Detailed hero styling is in sections-home.css.
   ========================================================================== */

/* Base hero structure — overridden by sections-home.css for homepage */


/* ==========================================================================
   11. SECTION COMPONENTS
   ========================================================================== */

/* --- BGM Grid --- */
.bgm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* --- BGM Card --- */
.bgm-card {
    position: relative;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth);
    overflow: hidden;
}

.bgm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
    border-radius: 4px 0 0 4px;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.bgm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.bgm-card:hover::before {
    opacity: 1;
}

.bgm-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(101, 175, 2, 0.12);
    color: var(--color-primary);
    margin-bottom: 1.25rem;
    transition: background-color var(--transition-base);
}

/* Beim Überfahren wird der Ton kräftiger, statt auf eine Vollfläche mit
   weissem Zeichen umzuschlagen. */
.bgm-card:hover .bgm-card__icon {
    background-color: rgba(101, 175, 2, 0.2);
    color: var(--color-primary);
}

.bgm-card__icon svg {
    width: 28px;
    height: 28px;
}

.bgm-card__heading {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
}

.bgm-card__description {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.bgm-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.bgm-card__link:hover {
    gap: 0.625rem;
    color: var(--color-primary-hover);
}

.bgm-card__link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.bgm-card__link:hover svg {
    transform: translateX(2px);
}

/* --- Trust Bar --- */
.trust-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
    padding: 2.5rem 0;
}


.trust-bar__logo {
    max-height: 48px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(100%);
    transition:
        opacity var(--transition-base),
        filter var(--transition-base);
}

.trust-bar__logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* --- Partner Cards Grid --- */
.trust__partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.partner-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

a.partner-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.partner-card__logo {
    max-height: 140px;
    max-width: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    filter: grayscale(30%);
    transition: filter var(--transition-base);
}

.partner-card:hover .partner-card__logo {
    filter: grayscale(0%);
}

.partner-card__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    margin: 0 0 0.5rem;
}

.partner-card__desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-light, #6b7280);
    margin: 0;
}

/* --- Feature Card --- */
.fcard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--color-white);
    border-radius: var(--radius-xl, 1.5rem);
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.fcard__image {
    position: relative;
    overflow: hidden;
    min-height: 280px;
}


/* Der grün-violette Balken über der Bildkante (`.fcard__image::after`,
   5px hoch, 60% breit) ist ersatzlos entfernt — kein Element des Baukastens. */
.fcard__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fcard__content {
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* T97: In der Flex-Spalte würde die Überzeile auf volle Breite gestreckt,
   der grüne Strich lief dann über die ganze Karte. Textbreite wie überall. */
.fcard__content > .overline {
    align-self: flex-start;
}

.fcard__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-accent, #4B02AF);
    text-transform: uppercase;
    line-height: 1.15;
}

.fcard__text {
    color: var(--color-gray-600);
    line-height: 1.7;
    font-size: 0.9375rem;
}

.fcard__text p {
    margin-bottom: 1rem;
}
.fcard__text p:last-child {
    margin-bottom: 0;
}

.fcard__checklist {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fcard__check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-700);
}

.fcard__check-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 0.15rem;
}

.fcard__cta {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* Image on right */
.fcard--img-right .fcard__image {
    order: 2;
}
.fcard--img-right .fcard__content {
    order: 1;
}

/* --- Stats Bar --- */
/* Grid statt Flex: Beim Flex-Layout richtete sich die Breite jeder Kachel
   nach ihrem laengsten Text. Lange Beschreibungen sprengten dadurch die
   Spalte, die Kacheln brachen ungleich um und standen versetzt.
   auto-fit + minmax gibt gleich breite Spalten und bricht selbsttaetig
   von 4 auf 2 auf 1 um. */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
    text-align: center;
    padding: 3rem 0;
}

.stats-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Haelt die Textzeilen auch in einer breiten Spalte lesbar schmal.
       Wichtig: width + justify-self statt `margin-inline: auto` — auto-
       Margins heben bei Grid-Items das Strecken auf, die Kacheln waeren
       sonst wieder unterschiedlich breit. */
    width: 100%;
    max-width: 20rem;
    justify-self: center;
    min-width: 0;
}

.stats-bar--left {
    justify-items: start;
    text-align: left;
}

.stats-bar--left .stats-bar__item {
    align-items: flex-start;
    text-align: left;
    justify-self: start;
}

.stats-bar__number {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.section--dark .stats-bar__number,
.section--primary .stats-bar__number {
    color: var(--color-white);
}

.stats-bar__label {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* Beschreibung gehoert zur Basis-Komponente, nicht nur zur Startseite —
   sonst rendert sie auf Unterseiten und in Blogartikeln ungestylt. */
.stats-bar__description {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-gray-600);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.section--dark .stats-bar__description {
    color: rgba(255, 255, 255, 0.7);
}

/* Gestaffelte Spaltenzahl statt reinem auto-fit: Bei vier Kacheln ergibt
   auto-fit auf Tablet-Breite ein 3+1, das optisch abfaellt. 2x2 wirkt
   ruhiger — und bei drei Kacheln bleibt 2+1, was unauffaellig ist. */
@media (max-width: 1099px) {
    .stats-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .stats-bar {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
        padding: 2rem 0;
    }
}

.section--dark .stats-bar__label {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Testimonial Card --- */
.testimonial-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.testimonial-card::before {
    content: '\201C'; /* Left double quotation mark */
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-primary-light);
    opacity: 0.4;
}

.testimonial-card__quote {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.8;
    color: var(--color-gray-800);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-card__name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-gray-900);
}

.testimonial-card__role {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

/* --- Feature Item --- */
.feature-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* Vorlage für alle Symbole auf der Seite: runde Fläche in einem hellen
   Ton der Markenfarbe, das Zeichen selbst als Strich in derselben Farbe.
   Vorher stand hier ein gefülltes grünes Quadrat mit weissem Zeichen —
   dieselbe Stelle, andere Sprache. */
.feature-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background-color: rgba(101, 175, 2, 0.12);
    color: var(--color-primary);
    flex-shrink: 0;
}

.feature-item__icon svg {
    width: 24px;
    height: 24px;
}

.feature-item__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.375rem;
}

.section--dark .feature-item__title {
    color: var(--color-white);
}

.feature-item__description {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}

.section--dark .feature-item__description {
    color: rgba(255, 255, 255, 0.7);
}

/* --- CTA Banner --- */
/*
 * CTA-Banner
 * Die Karte sitzt auf dem inneren .container — NICHT auf der <section>.
 * Sonst läuft der Banner über die volle Fensterbreite und klebt am Footer.
 * `section.…` erhöht die Spezifität, damit die Varianten-Hintergründe aus
 * sections-home.css (.cta-banner--primary/--dark) neutralisiert werden.
 */
section.cta-banner,
section.cta-banner--primary,
section.cta-banner--dark,
section.cta-banner--parallax {
    background: none;
    border-radius: 0;
    padding-inline: 0;
    padding-block: clamp(3rem, 7vw, 6rem); /* Luft nach oben und zum Footer */
    color: inherit;
    overflow: visible;
    position: relative;
}

/* dekorativer Kreis wanderte mit auf die Karte */
.cta-banner::before {
    content: none;
}

.cta-banner > .container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    /* Höhe kommt allein aus dem senkrechten Innenabstand. Gemessen bei
       1440 px: Inhalt 226 px + 2 × 72 px = 370 px. Für die gewünschten
       rund 20 % mehr braucht es je Seite gut 37 px zusätzlich, also
       etwa 6,8 rem — Karte dann ~444 px.
       Waagerecht bleibt es bei 4,5 rem, sonst würde die Textspalte
       schmaler statt die Karte höher. */
    padding-block: clamp(3.25rem, 8vw, 6.8rem);
    padding-inline: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    color: var(--color-white);
    /* Bild + Overlay als Standard für ALLE CTA-Banner */
    background-image:
        linear-gradient(rgba(26, 26, 46, 0.72), rgba(75, 2, 175, 0.50)),
        url('/wp-content/uploads/2026/08/NX_04087.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Scroll-Effekt als Standard für ALLE CTA-Banner — unabhängig davon,
       welcher Stil im Backend gespeichert ist (sonst sehen die Seiten
       unterschiedlich aus, sobald jemand eine Seite im Backend speichert). */
    background-attachment: fixed;
}

/* Kein fixed auf Mobile / bei reduzierter Bewegung (Ruckeln, Accessibility) */
@media (max-width: 768px) {
    .cta-banner > .container { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-banner > .container { background-attachment: scroll; }
}

/* Button im CTA immer durchgehend grün (sections-home.css macht ihn sonst weiß) */
.cta-banner .cta-banner__action .btn--primary,
.cta-banner .cta-banner__content .btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.cta-banner > .container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.cta-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-white);
}

.cta-banner__text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.9;
    max-width: 40rem;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* --- FAQ Accordion --- */
.faq-accordion {
    max-width: 48rem;
    margin-inline: auto;
}

.faq-accordion__item {
    border-bottom: 1px solid var(--color-gray-200);
}

.faq-accordion__item:first-child {
    border-top: 1px solid var(--color-gray-200);
}

.faq-accordion__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem 0;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-gray-900);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.faq-accordion__question:hover {
    color: var(--color-primary);
}

.faq-accordion__question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.faq-accordion__question svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
    color: var(--color-gray-600);
}

.faq-accordion__item.is-open .faq-accordion__question svg {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-accordion__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-slow) ease;
}

.faq-accordion__item.is-open .faq-accordion__answer {
    max-height: 500px; /* Generous max for animation */
}

.faq-accordion__answer-inner {
    padding-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.8;
}


/* ==========================================================================
   12. FORM STYLES
   ========================================================================== */

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 0.5rem;
}

.form-label--required::after {
    content: ' *';
    color: #e11d48;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    appearance: none;
}

.form-control::placeholder {
    color: var(--color-gray-300);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(101, 175, 2, 0.15);
}

.form-control:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(101, 175, 2, 0.2);
}

/* Textarea */
textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* Select */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M6 8.825a.5.5 0 0 1-.354-.146L1.93 4.962a.5.5 0 1 1 .707-.707L6 7.618l3.363-3.363a.5.5 0 1 1 .707.707L6.354 8.679A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
}

/* --- Custom Checkbox --- */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.1em;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-check__label {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.5;
    cursor: pointer;
}

/* Form validation states */
.form-control.is-invalid {
    border-color: #e11d48;
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

.form-error {
    font-size: 0.8125rem;
    color: #e11d48;
    margin-top: 0.375rem;
}

.form-control.is-valid {
    border-color: var(--color-primary);
}


/* ==========================================================================
   13. UTILITY CLASSES
   ========================================================================== */

/* --- Text Alignment --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* --- Margin Bottom Scale (0.5rem increments) --- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-6 { margin-bottom: 4rem; }

/* --- Margin Top Scale --- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mt-6 { margin-top: 4rem; }

/* --- Visibility --- */
.hidden  { display: none !important; }
.visible { display: block !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Responsive Display --- */
.desktop-only { display: none; }
.mobile-only  { display: block; }


/* ==========================================================================
   14. ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* --- Animation Base Classes --- */
.fade-in,
.slide-up,
.slide-left,
.slide-right,
.scale-in {
    opacity: 0;
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.fade-in {
    /* Opacity only — no transform */
}

.slide-up {
    transform: translateY(30px);
}

.slide-left {
    transform: translateX(30px);
}

.slide-right {
    transform: translateX(-30px);
}

.scale-in {
    transform: scale(0.9);
}

/* Trigger class applied via Intersection Observer */
.fade-in.is-visible,
.slide-up.is-visible,
.slide-left.is-visible,
.slide-right.is-visible,
.scale-in.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Stagger delays for child elements */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* --- Keyframe Animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

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

/* --- Reduced Motion --- */
@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;
    }

    .fade-in,
    .slide-up,
    .slide-left,
    .slide-right,
    .scale-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero__scroll-indicator {
        animation: none;
    }
}


/* ==========================================================================
   15. DECORATIVE ELEMENTS
   ========================================================================== */

/* --- Blur Blobs --- */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.blob--green {
    background-color: var(--color-primary);
}

.blob--purple {
    background-color: var(--color-accent);
}

.blob--light {
    background-color: var(--color-primary-light);
}

/* --- Topographic Pattern (BGM sections) --- */
.topo-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image:
        repeating-radial-gradient(
            circle at 20% 50%,
            transparent 0,
            transparent 40px,
            rgba(101, 175, 2, 0.15) 40px,
            rgba(101, 175, 2, 0.15) 41px,
            transparent 41px,
            transparent 80px
        ),
        repeating-radial-gradient(
            circle at 80% 30%,
            transparent 0,
            transparent 60px,
            rgba(75, 2, 175, 0.1) 60px,
            rgba(75, 2, 175, 0.1) 61px,
            transparent 61px,
            transparent 120px
        );
    background-size: 200px 200px;
}

/* --- Gradient Divider Line --- */
.gradient-line {
    height: 3px;
    border: none;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 3px;
    margin-block: 2rem;
}

.gradient-line--center {
    max-width: 120px;
    margin-inline: auto;
}

.gradient-line--short {
    max-width: 60px;
}


/* ==========================================================================
   16. RESPONSIVE DESIGN
   Mobile-first breakpoints.
   ========================================================================== */

/* --- Small (≥ 480px) --- */
@media (min-width: 480px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bgm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* --- Tablet (≥ 768px) --- */
@media (min-width: 768px) {
    .fcard {
        grid-template-columns: 1fr 1fr;
    }
    .fcard__image {
        min-height: 100%;
    }

    .container {
        padding-inline: 2rem;
    }

    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bgm-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }


    .site-footer__main {
        grid-template-columns: 1.6fr 1fr 1.2fr;
    }

    .site-footer__bottom-inner {
        flex-direction: row;
        text-align: left;
    }

    .hero__content .container {
        padding-inline: 2rem;
    }

    .testimonial-card {
        padding: 2.5rem;
    }

    h1 {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .trust-bar__logo {
        height: 40px;
    }
}

/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {
    /* Navigation: show pill on desktop */
    .site-header__nav {
        display: flex;
    }

    /* Hide standalone toggle (it's outside the pill now) */
    .menu-toggle {
        display: none;
    }

    .mobile-nav {
        display: none !important;
    }

    /* Grid variants */
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* BGM grid: 3-column for first row, 2-column centered for second */
    .bgm-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer: 3 columns */
    .site-footer__main {
        grid-template-columns: 1.6fr 1fr 1.2fr;
    }

    /* Desktop display utilities */
    .desktop-only {
        display: block;
    }

    .trust-bar.desktop-only {
        display: flex;
    }

    .mobile-only {
        display: none;
    }

    /* Feature items can be side-by-side */
    .feature-item {
        gap: 1.5rem;
    }

    /* CTA banner sizing */
    .cta-banner {
        padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    }
}

/* --- Large (≥ 1280px) --- */
@media (min-width: 1280px) {
    .container {
        padding-inline: 2.5rem;
    }

    /* Card content spacing */
    .card__content {
        padding: 2rem;
    }

    .bgm-card {
        padding: 2.5rem;
    }

    /* Larger trust logos */
    .trust-bar__logo {
        height: 48px;
    }

    .trust-bar {
        gap: 3rem 4rem;
    }

    /* Testimonial cards */
    .testimonial-card {
        padding: 3rem;
    }
}

/* --- XL (≥ 1440px) --- */
@media (min-width: 1440px) {
    :root {
        --header-height: 90px;
    }

    .site-header__logo img {
        height: 50px;
    }

    .site-header--scrolled .site-header__logo img {
        height: 42px;
    }

    .site-header__nav a {
        padding: 0.5rem 1.25rem;
        font-size: 1rem;
    }
}


/* ==========================================================================
   17. PRINT STYLES
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Hide non-essential elements */
    .site-header,
    .site-footer,
    .menu-toggle,
    .mobile-nav,
    .back-to-top,
    .hero__scroll-indicator,
    .btn,
    .blob,
    .topo-pattern {
        display: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
    }

    /* Avoid page breaks inside key elements */
    .card,
    .bgm-card,
    .testimonial-card,
    .faq-accordion__item {
        break-inside: avoid;
    }

    h1, h2, h3 {
        break-after: avoid;
    }

    img {
        max-width: 100% !important;
        break-inside: avoid;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .section {
        padding: 1.5rem 0;
    }
}

/* ==========================================================================
   ANKER-SPRUNGZIELE
   Der Header ist `position: fixed` (--header-height). Ohne Offset landet
   ein Sprung auf #kontakt/#formate/#angebote unter der Navigation und die
   Ueberschrift ist verdeckt.
   ========================================================================== */
section[id] {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* ==========================================================================
   STAT-INFO — „Mehr erfahren" an einer Kennzahl
   Desktop (echter Zeiger): Popover direkt an der Zahl.
   Touch (kein Hover): zentrierte Modalbox mit Backdrop.
   Erscheint nur, wenn im Backend Titel oder Text gepflegt sind.
   ========================================================================== */
/* `.section` setzt overflow:hidden — das kappt das Popover an der
   Sektionsunterkante. Nur dort aufheben, wo tatsaechlich Infos gepflegt
   sind, und die Sektion ueber die nachfolgende heben. */
.statistiken--has-info {
    overflow: visible;
    z-index: 5;
}

.stats-bar__item--has-info {
    position: relative;
}

/* ── Auslöser: dezentes Fragezeichen über dem Text ─────────────── */
.stat-info__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.15rem 0 0.4rem;
    padding: 0;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 50%;
    background: transparent;
    color: var(--color-gray-500, #6b7280);
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease;
}

.stats-bar__item--has-info:hover .stat-info__trigger,
.stat-info__trigger:hover,
.stat-info__trigger:focus-visible,
.stat-info__trigger[aria-expanded="true"] {
    background: var(--color-primary, #65AF02);
    border-color: var(--color-primary, #65AF02);
    color: #fff;
    transform: scale(1.08);
}

.stat-info__trigger:focus-visible {
    outline: 2px solid var(--color-accent, #4B02AF);
    outline-offset: 2px;
}

/* ── Panel: Grundform (beide Darstellungen teilen sich das) ────── */
.stat-info__panel[hidden] {
    display: none;
}

.stat-info__panel {
    z-index: 90;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.stat-info__panel.is-open {
    opacity: 1;
}

.stat-info__inner {
    position: relative;
    padding: 1.5rem 1.5rem 1.35rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.12));
    text-align: left;
}

.stat-info__zahl {
    display: block;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.stat-info__titel {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0 0 0.6rem;
    color: var(--color-dark, #111827);
}

.stat-info__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-gray-700, #374151);
    text-wrap: pretty;
}

.stat-info__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary, #65AF02);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease, gap 0.18s ease;
}

.stat-info__link:hover,
.stat-info__link:focus-visible {
    border-bottom-color: currentColor;
    gap: 0.6rem;
}

.stat-info__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-gray-700, #374151);
    cursor: pointer;
}

.stat-info__close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ── Desktop: Popover an der Zahl ──────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .stat-info__panel {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
        width: min(21rem, 80vw);
    }

    .stat-info__panel.is-open {
        transform: translateX(-50%) translateY(0);
    }

    /* Zeiger zur Zahl. Sitzt auf dem Panel, nicht auf .inner, damit die
       unsichtbare Brücke darüber die Maus nicht verliert. */
    .stat-info__inner::before {
        content: '';
        position: absolute;
        top: -7px;
        /* --pfeil-versatz wird per JS gesetzt, wenn das Panel am Viewport-
           Rand verschoben werden musste (siehe einpassen() in animations.js).
           Ohne Verschiebung ist der Wert 0 und der Pfeil steht mittig. */
        left: calc(50% + var(--pfeil-versatz, 0px));
        width: 14px;
        height: 14px;
        background: #fff;
        transform: translateX(-50%) rotate(45deg);
        border-radius: 3px 0 0 0;
    }

    /* Unsichtbare Brücke zwischen Zahl und Panel. Grosszuegig bemessen:
       Das Panel ist breiter als die Kachel, die Maus verlaesst die Kachel
       auf dem Weg nach unten also oft seitlich — ohne diesen Puffer
       klappt das Popover weg, bevor man den Link erreicht. */
    .stat-info__panel::before {
        content: '';
        position: absolute;
        top: -2rem;
        left: -2rem;
        right: -2rem;
        height: 2.5rem;
    }
}

/* ── Touch: zentrierte Modalbox ────────────────────────────────── */
@media (hover: none) {
    .stat-info__panel {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -46%);
        width: min(26rem, calc(100vw - 2rem));
        max-height: min(80vh, 34rem);
        overflow-y: auto;
        z-index: 1001;
    }

    .stat-info__panel.is-open {
        transform: translate(-50%, -50%);
    }

    .stat-info__inner {
        padding-top: 3rem;
    }

    .stat-info__close {
        display: inline-flex;
    }
}

.stat-info__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.stat-info__backdrop.is-open {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .stat-info__panel,
    .stat-info__backdrop,
    .stat-info__trigger {
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   Schwerpunkte – leichte Chips (randlos, dezent spielerisch)
   ══════════════════════════════════════════════════════════════ */
.fokus-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 780px;
    margin: 1.75rem auto 0;
}

.fokus-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark, #1f2937);
    background: rgba(101, 175, 2, 0.09);
    border-radius: 100px;
    padding: 0.5rem 1.05rem 0.5rem 0.85rem;
    line-height: 1.2;
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.fokus-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary, #65AF02);
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.25s ease;
}

.fokus-chip:hover {
    background: var(--color-primary, #65AF02);
    color: #ffffff;
    transform: translateY(-2px);
}

.fokus-chip:hover::before {
    background: #ffffff;
    transform: scale(1.35);
}

/* dezente Grün/Lila-Alternierung */
.fokus-chip:nth-child(even) {
    background: rgba(75, 2, 175, 0.08);
}
.fokus-chip:nth-child(even)::before {
    background: var(--color-accent, #4B02AF);
}
.fokus-chip:nth-child(even):hover {
    background: var(--color-accent, #4B02AF);
    color: #ffffff;
}
.fokus-chip:nth-child(even):hover::before {
    background: #ffffff;
}

/* Chips folgen der Ausrichtung der Sektion (ft_ausrichtung). */
.fliesstext__chips--left {
    justify-content: flex-start;
    margin-inline: 0;
}


/* ══════════════════════════════════════════════════════════════
   Ausklapper („Mehr dazu") — natives <details>/<summary>
   Feld `ft_mehr_label` / `ft_mehr_text` am Layout `fliesstext`.
   Kein JavaScript: funktioniert auch ohne, ist tastaturbedienbar
   und der Inhalt steht für Suche und Druck im DOM.
   ══════════════════════════════════════════════════════════════ */
.mehr-dazu {
    max-width: 720px;
    margin: 1.5rem auto 0;
}

.mehr-dazu--left {
    margin-inline: 0;
}

/* Zentrierte Sektion → Button mittig (P138). Ohne das sass er links,
   weil <summary> als Block die volle Breite einnimmt. */
.mehr-dazu:not(.mehr-dazu--left) > .mehr-dazu__toggle {
    display: flex;
    width: fit-content;
    margin-inline: auto;
}

.mehr-dazu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 0.4rem 0;
    transition: color var(--transition-fast);
}

/* Default-Dreieck in allen Engines entfernen. */
.mehr-dazu__toggle::-webkit-details-marker { display: none; }
.mehr-dazu__toggle::marker { content: ""; }

.mehr-dazu__toggle:hover {
    color: var(--color-primary-hover);
}

.mehr-dazu__toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Chevron: dreht sich beim Aufklappen. */
.mehr-dazu__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.mehr-dazu[open] .mehr-dazu__icon {
    transform: rotate(180deg);
}

.mehr-dazu__inhalt {
    padding-top: 0.75rem;
    color: var(--color-gray-600);
}

.mehr-dazu__inhalt > p {
    margin-bottom: 1rem;
}

.mehr-dazu__inhalt > p:last-child {
    margin-bottom: 0;
}

/* Sanftes Einblenden. Bewusst nur opacity/translate — eine
   Höhenanimation auf <details> springt, weil die Endhöhe erst
   nach dem Öffnen feststeht. */
.mehr-dazu[open] .mehr-dazu__inhalt {
    animation: mehr-dazu-auf var(--transition-base) both;
}

@keyframes mehr-dazu-auf {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mehr-dazu__icon { transition: none; }
    .mehr-dazu[open] .mehr-dazu__inhalt { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   Zitat: Overline und Fliesstext unter dem Zitat
   Felder `zitat_overline` / `zitat_langtext`. Die Zitat-Optik
   selbst steht in sections-about.css bzw. sections-home.css —
   hier nur die beiden Ergänzungen, damit sie auch auf der
   Startseite greifen.
   ══════════════════════════════════════════════════════════════ */
/* `.overline` ist von Haus aus `inline-block` — der grüne Unterstrich liegt
   damit genau unter dem Text. Hier stand `display: block`, um die Zeile zu
   zentrieren; dadurch zog sich der Strich über die volle Containerbreite.
   `width: fit-content` mit automatischen Aussenabständen zentriert genauso,
   lässt den Kasten aber auf Textbreite schrumpfen. */
.zitat-section__overline {
    display: block;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Gleiche Grösse wie die Einleitungstexte (`.lead`) — mit der
   Grundschrift von 16 px wirkte der Text unter dem grossen Zitat
   zu klein (Dominik, 31.10.2026). */
.zitat-section__langtext {
    max-width: 680px;
    margin: 1.5rem auto 0;
    text-align: center;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.7;
    color: var(--color-gray-600);
}

.zitat-section__langtext > p {
    margin-bottom: 1rem;
}

.zitat-section__langtext > p:last-child {
    margin-bottom: 0;
}

.section--dark .zitat-section__langtext {
    color: rgba(255, 255, 255, 0.82);
}


/* ══════════════════════════════════════════════════════════════
   Bildtrenner — schmales Bildband zwischen zwei Sektionen
   Layout `bildtrenner`. Full-bleed, kein Container.
   ══════════════════════════════════════════════════════════════ */
.bildtrenner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-gray-200);
}

.bildtrenner__bild {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.bildtrenner--mittel .bildtrenner__bild { height: 340px; }
.bildtrenner--hoch   .bildtrenner__bild { height: 460px; }

@media (max-width: 767px) {
    .bildtrenner__bild            { height: 170px; }
    .bildtrenner--mittel .bildtrenner__bild { height: 220px; }
    .bildtrenner--hoch   .bildtrenner__bild { height: 280px; }
}

/* Parallax über background-attachment. Auf Touch-Geräten schaltet
   iOS das stumm und zeigt einen falschen Ausschnitt — deshalb dort
   die normale <img>-Variante. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .bildtrenner--parallax .bildtrenner__bild {
        visibility: hidden;
    }

    .bildtrenner--parallax {
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bildtrenner--parallax { background-attachment: scroll; }
}

.bildtrenner__unterschrift {
    position: absolute;
    right: clamp(1rem, 4vw, 2.5rem);
    bottom: 0.75rem;
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}


/* ══════════════════════════════════════════════════════════════════════
   FORMULAR-BAUSTEIN
   Auf Lesebreite begrenzt. Über die volle Containerbreite standen die
   Antwortmöglichkeiten weit auseinander und die Fragen liefen als sehr
   lange Zeilen — dieselbe Breite wie im Lesestoff liest sich ruhiger.
   ══════════════════════════════════════════════════════════════════════ */
.formular-section__header,
.formular-section__form {
    max-width: 46rem;
    margin-inline: auto;
}

.formular-section__titel {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-gray-900);
    margin: 0.4rem 0 0.75rem;
}

.formular-section__text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-gray-600);
    margin: 0 0 2rem;
}

/* Sprungziel-Abstand für den fixierten Kopfbereich — greift, wenn der
   Browser selbst zu einem Anker springt. Die Korrektur beim
   Seitenwechsel macht das Skript in formular.php. */
.formular-section {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* ══════════════════════════════════════════════════════════════
   Knöpfe im Formular (WPForms)
   „Weiter“, „Zurück“ und „Auswertung anfordern“ kamen im Plugin-Blau
   (#066aab), in Open Sans und mit 3px Radius — drei Merkmale, die auf
   dieser Seite sonst nirgends vorkommen. WPForms rendert modern und
   stellt seine Werte als CSS-Variablen bereit; die lassen sich am
   Container überschreiben, ohne in das Plugin-Stylesheet zu greifen.
   ══════════════════════════════════════════════════════════════ */

.wpforms-container {
    --wpforms-button-background-color: var(--color-primary);
    --wpforms-button-border-color: var(--color-primary);
    --wpforms-button-text-color: var(--color-white);
    --wpforms-button-border-radius: var(--radius-sm);
    --wpforms-button-size-font-size: 0.9375rem;
    --wpforms-button-size-height: 50px;
    --wpforms-button-size-padding-h: 2rem;
}

.wpforms-container .wpforms-form button.wpforms-page-button,
.wpforms-container .wpforms-form button.wpforms-submit,
.wpforms-container .wpforms-form input[type="submit"] {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* „Zurück“ ist die leisere Handlung — gleiche Form, zurückhaltende Farbe,
   analog zu `.btn--secondary`. */
.wpforms-container .wpforms-form button.wpforms-page-button.wpforms-page-prev {
    background-color: var(--color-white);
    color: var(--color-primary-text);
    border: 2px solid var(--color-primary);
}

.wpforms-container .wpforms-form button.wpforms-page-button.wpforms-page-prev:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* «Zurück» und «Weiter» standen ohne Abstand aneinander (P123).
   WPForms steckt jeden Knopf in eine eigene `.wpforms-page-button-group`
   — der Abstand gehört deshalb zwischen die Hüllen, nicht in sie hinein. */
.wpforms-container .wpforms-form .wpforms-page-button-group + .wpforms-page-button-group {
    margin-left: 1rem;
}



/* ══════════════════════════════════════════════════════════════
   WORTTRENNUNG
   Deutsche Komposita wie „Gesundheitsmanagement" sprengen jede
   Spalte. `hyphens: auto` allein würde aber auch kurze Wörter
   trennen und den Text unruhig machen.

   `hyphenate-limit-chars: 12 5 5` heisst: erst ab zwölf Zeichen
   trennen, mindestens fünf Zeichen vor und fünf nach dem
   Trennstrich (Vorgabe Dominik, 31.10.2026 — vorher 4 danach,
   daraus wurde „erfolgreichs-te“). Damit bleiben normale Wörter
   unangetastet.

   Safari kennt `hyphenate-limit-chars` nicht, nur die beiden
   `-webkit-hyphenate-limit-*`. Ohne sie trennte Safari bis auf
   zwei Buchstaben. Alle Werte erben, darum stehen sie einmal am
   <html> und gelten so auch für Titel mit eigener Trennung
   (Karten, Beiträge).

   Voraussetzung ist `lang="de"` am <html> — gesetzt.
   ══════════════════════════════════════════════════════════════ */

html {
    hyphenate-limit-chars: 12 5 5;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 5;
}

/* Überschriften trennen NUR an den Wortfugen aus inc/worttrennung.php.
   Die Silbentrennung des Browsers macht daraus sonst
   „Gesundheitsma-nagement“ statt „Gesundheits-management“ — in einer
   grossen Überschrift fällt das sofort auf. Fliesstext bleibt auf `auto`;
   dort ist eine Silbentrennung besser als eine Lücke. */
h1, h2, h3, h4,
.pr-hero__titel {
    hyphens: manual;
    -webkit-hyphens: manual;
}

p, li, dd, blockquote,
.lead,
.pr-karte__text,
.pr-vorteil__text {
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sicherheitsnetz für Wörter, die selbst getrennt nicht passen
   (lange URLs, E-Mail-Adressen). */
h1, h2, h3, h4, p, li, dd, blockquote, .lead {
    overflow-wrap: break-word;
}

/* Knöpfe und Navigation nie trennen — dort steht wenig Text und
   ein Trennstrich sieht nach Fehler aus. */
.btn,
.site-header__nav a,
.site-footer__link,
.overline,
.pr-seite__badge {
    hyphens: manual;
    -webkit-hyphens: manual;
}


/* ══════════════════════════════════════════════════════════════
   Use Case Finder — Antwortmöglichkeiten
   Die Liste stand auf `grid-template-columns: repeat(1, auto)`.
   `auto` heisst: jede Zeile nur so breit wie ihr Text. „Sozial“ nahm
   55 px, „Innere Kündigung / Dienst nach Vorschrift“ 324 px — in einer
   736 px breiten Spalte ergab das eine ausgefranste Treppe.

   Jetzt füllt jede Antwort die volle Breite und ist als anklickbare
   Karte gestaltet. Eine Antwort pro Zeile: nichts bricht um, nichts
   bleibt allein stehen, und die Klickfläche ist die ganze Karte statt
   nur des Kästchens.
   ══════════════════════════════════════════════════════════════ */

.rpt-ucf-frage ul {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.625rem !important;
}

/* `!important` ist hier kein Schludrian: WPForms setzt Innenabstand, Rahmen
   und Fläche der Listenpunkte über eine eigene Inline-Formatierung im Kopf
   der Seite, die nach diesem Stylesheet kommt. Ohne Vorrang bleibt von der
   Karte nur der abgerundete Rahmen übrig — genau das war beim ersten
   Anlauf zu sehen. */
.wpforms-container .rpt-ucf-frage ul li {
    position: relative;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0 !important;
    padding: 0.875rem 1.125rem !important;
    border: 1px solid rgba(17, 24, 39, 0.14) !important;
    border-radius: var(--radius-sm);
    background-color: var(--color-white) !important;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.wpforms-container .rpt-ucf-frage ul li:hover {
    border-color: rgba(101, 175, 2, 0.55) !important;
    background-color: rgba(101, 175, 2, 0.04) !important;
}

/* Ausgewählt: WPForms setzt `wpforms-selected` an das <li>.
   Rahmen und Fläche lassen sich hier nicht überschreiben — das Plugin
   gewinnt selbst gegen `!important`. Der Zustand kommt deshalb über
   `box-shadow`: Der innere Schatten legt sich als Fläche über den
   Hintergrund, der zweite zeichnet den Rahmen nach. Box-Shadow rührt
   WPForms nicht an. */
.wpforms-container .rpt-ucf-frage ul li.wpforms-selected {
    box-shadow:
        inset 0 0 0 2px var(--color-primary),
        inset 0 0 0 200px rgba(101, 175, 2, 0.1);
}

/* Die ganze Karte anklickbar machen, nicht nur die Beschriftung. */
.rpt-ucf-frage ul li label {
    flex: 1 1 auto;
    cursor: pointer;
}

.rpt-ucf-frage ul li label::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.rpt-ucf-frage ul li input {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    cursor: pointer;
}

@media (max-width: 640px) {
    .rpt-ucf-frage ul li {
        padding: 0.75rem 0.875rem;
    }
}


/* ══════════════════════════════════════════════════════════════
   Grün auf Glasflächen
   `--color-primary` (#65AF02) erreicht selbst auf fast weissem Grund nur
   2,7:1 — als Textfarbe zu wenig. Auf den Glaskarten und in der
   Kopfzeile gilt deshalb der dunklere Ton (#4A7F02, 4,85:1 auf Weiss).
   Flächen und Knöpfe behalten das kräftige Markengrün.
   ══════════════════════════════════════════════════════════════ */

.glass-card .overline,
.page-hero__card .overline,
.hero__card .overline,
.site-header__nav a.is-active,
.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a,
.site-header__nav .current-menu-ancestor > a {
    color: var(--color-primary-text) !important;
}

.glass-card .overline,
.page-hero__card .overline,
.hero__card .overline {
    border-bottom-color: var(--color-primary-text);
}


/* ══════════════════════════════════════════════════════════════
   Kunden-Logos (P122) — in main.css, damit der Baustein auf jeder
   Seite funktioniert, auch auf der Startseite.
   ══════════════════════════════════════════════════════════════ */
.kundenlogos__header {
    max-width: 640px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.kundenlogos__titel {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-dark, #111827);
    margin: 0.4rem 0 0.6rem;
}

.kundenlogos__text {
    margin: 0 auto;
    color: var(--color-gray-600, #4b5563);
    font-size: 1rem;
    line-height: 1.6;
}

/* Laufendes Band (T148). Abstand als Rand rechts statt `gap`, damit die
   Verschiebung um genau die Hälfte nahtlos aufgeht. */
.kundenlogos__band {
    overflow: hidden;
    padding-block: 0.75rem 1.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.kundenlogos__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: max-content;
    animation: kundenlogos-lauf var(--kl-dauer, 30s) linear infinite;
}

.kundenlogos__band:hover .kundenlogos__liste,
.kundenlogos__band:focus-within .kundenlogos__liste {
    animation-play-state: paused;
}

@keyframes kundenlogos-lauf {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.kundenlogos__item {
    flex: 0 0 auto;
    width: clamp(140px, 16vw, 200px);
    margin-right: clamp(0.75rem, 2vw, 1.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 0.75rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.kundenlogos__link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.kundenlogos__bild {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* «Bewegung reduzieren»: stilles Raster nur mit den Originalen. */
@media (prefers-reduced-motion: reduce) {
    .kundenlogos__band {
        -webkit-mask-image: none;
                mask-image: none;
    }
    .kundenlogos__liste {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .kundenlogos__item {
        margin-right: 0;
    }
    .kundenlogos__item--kopie {
        display: none;
    }
}



/* ══════════════════════════════════════════════════════════════
   Schwerpunkte als Chips im Baustein «Text + Bild» (P138)
   Felder `text_bild_chips_label` / `text_bild_chipzeilen`.
   ══════════════════════════════════════════════════════════════ */
.text-image__schwerpunkte {
    margin-top: 1.75rem;
}

.text-image__chips-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-600, #4b5563);
    margin: 0 0 0.75rem;
    max-width: none;
}

.text-image__chipspalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem 1.5rem;
}

.text-image__chipspalte-titel {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-dark, #1f2937);
    margin: 0 0 0.6rem;
    max-width: none;
}

/* Untereinander statt fliessend: eine Spalte ist eine Liste. Lange
   Schlagworte dürfen im Chip umbrechen. */
.text-image__chips {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    max-width: none;
    margin: 0;
    gap: 0.5rem;
}

.text-image__chips .fokus-chip {
    border-radius: 1rem;
    max-width: 100%;
}

/* Je Spalte eine Farbe: erste grün, zweite violett (wie die Alternierung
   der Schlagwort-Kacheln, nur spaltenweise). */
.text-image__chipspalte:nth-child(odd) .fokus-chip {
    background: rgba(101, 175, 2, 0.09);
}
.text-image__chipspalte:nth-child(odd) .fokus-chip::before {
    background: var(--color-primary, #65AF02);
}
.text-image__chipspalte:nth-child(odd) .fokus-chip:hover {
    background: var(--color-primary, #65AF02);
}
.text-image__chipspalte:nth-child(even) .fokus-chip {
    background: rgba(75, 2, 175, 0.08);
}
.text-image__chipspalte:nth-child(even) .fokus-chip::before {
    background: var(--color-accent, #4B02AF);
}
.text-image__chipspalte:nth-child(even) .fokus-chip:hover {
    background: var(--color-accent, #4B02AF);
}
.text-image__chips .fokus-chip:hover::before {
    background: #ffffff;
}

/* Button unter dem Bild (Feld «Button-Position»). Die Bildspalte reicht
   bis zum Ende der Textspalte, das Foto steht oben, und der Button sitzt
   in der Mitte der freien Fläche darunter. */
.text-image--cta-bild .text-image__media {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* Doppelte Klasse: `.text-image__cta` in sections-about.css lädt später. */
.text-image__cta.text-image__cta--bild {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding-block: 1.5rem;
}

/* Am Desktop gilt die ganze helle Fläche unter dem Foto bis zum Ende der
   Sektion als Raum für den Button: Die Sektion verliert ihren unteren
   Innenabstand, die Textspalte übernimmt ihn, und die Bildspalte reicht
   so bis ganz nach unten. */
@media (min-width: 861px) {
    .text-image--cta-bild.section {
        padding-block-end: 0;
    }
    .text-image--cta-bild .text-image__content {
        padding-bottom: var(--section-padding);
    }
}

/* Feld «Text vertikal» = oben: Text beginnt auf Höhe des Fotos. */
.text-image--oben .text-image__grid {
    align-items: start;
}

.text-image--no-media .text-image__chipspalten {
    text-align: left;
}


/* ══════════════════════════════════════════════════════════════
   Aufklappbare Widgets (P138)
   Sektionen mit «Als aufklappbares Widget: Button-Text». Das Skript
   in reload_pt_aufklapp_ende() setzt aufeinanderfolgende Widgets in
   eine Button-Reihe; immer nur eines ist offen.
   ══════════════════════════════════════════════════════════════ */
.aufklapp__leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.aufklapp__knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 100px;
    padding: 0.8rem 1.4rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.aufklapp__knopf:hover {
    background: rgba(101, 175, 2, 0.09);
}

.aufklapp__knopf[aria-expanded="true"] {
    background: var(--color-primary);
    color: #ffffff;
}

.aufklapp__knopf:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.aufklapp__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.aufklapp__knopf[aria-expanded="true"] .aufklapp__icon {
    transform: rotate(180deg);
}

.aufklapp__panel {
    margin-top: 2.5rem;
    animation: aufklapp-auf var(--transition-base) both;
}

.aufklapp__panel[hidden] {
    display: none;
}

@keyframes aufklapp-auf {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Einblend-Animationen im zugeklappten Inhalt nicht abwarten: Der
   Beobachter hat diese Elemente beim Laden nie gesehen. */
.aufklapp__panel .slide-up,
.aufklapp__panel .fade-in {
    opacity: 1;
    transform: none;
}

/* Untereinander gleich breit, sonst wirkt der längere Text wie der
   wichtigere Button. */
@media (max-width: 600px) {
    .aufklapp__knopf {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aufklapp__icon { transition: none; }
    .aufklapp__panel { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   Schleier hinter der Kopfzeile (P93)
   Nur auf Seiten, deren Kopfbild hinter dem Logo für keine der beiden
   Logo-Fassungen 5:1 erreicht (inc/logo-kontrast.php setzt die Klasse).
   Beim Scrollen wird die Kopfzeile ohnehin weiss — dann entfällt er.
   ══════════════════════════════════════════════════════════════ */
.kopf-schleier .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -2.5rem 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--transition-slow);
}

.kopf-schleier .site-header--scrolled::before {
    opacity: 0;
}


/* ══════════════════════════════════════════════════════════════
   Aufzählungen im Fliesstext (P144)
   Die globale Rücksetzung `ul, ol { list-style: none }` nahm auch
   redaktionellen Listen die Punkte — in Beiträgen standen Aufzählungen
   wie lose Absätze da. Jetzt grüne Punkte wie in «Das Wichtigste in
   Kürze», nummerierte Listen mit Zahlen.
   ══════════════════════════════════════════════════════════════ */
.fliesstext__text ul,
.mehr-dazu__inhalt ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.25rem;
}

.fliesstext__text ul li,
.mehr-dazu__inhalt ul li {
    position: relative;
    padding-left: 1.6rem;
    text-align: left;
}

.fliesstext__text li + li,
.mehr-dazu__inhalt li + li {
    margin-top: 0.6rem;
}

.fliesstext__text ul li::before,
.mehr-dazu__inhalt ul li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #65AF02);
}

.fliesstext__text ol,
.mehr-dazu__inhalt ol {
    list-style: decimal;
    padding-left: 1.4rem;
    margin: 0 0 1.25rem;
}

.fliesstext__text ol li::marker,
.mehr-dazu__inhalt ol li::marker {
    color: var(--color-primary, #65AF02);
    font-weight: 700;
}


/* Kachelraster mit ungerader Anzahl (P144): drei je Reihe, letzte Reihe
   mittig. Zwischen 769 und 1099 px zwei je Reihe, darunter eine. */
/* Doppelte Klasse: sections-about.css lädt später und setzt display:grid. */
.werte-grid__items.werte-grid__items--ungerade {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.werte-grid__items--ungerade > .werte-card {
    flex: 0 1 calc((100% - 3rem) / 3);
}

@media (max-width: 1099px) {
    .werte-grid__items--ungerade > .werte-card {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 768px) {
    .werte-grid__items--ungerade > .werte-card {
        flex-basis: 100%;
    }
}

/* Links im Fliesstext als Links erkennbar (P144). */
.fliesstext__text a {
    color: var(--color-primary, #65AF02);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}


/* ══════════════════════════════════════════════════════════════
   T149 — Über mich vor dem Go-Live
   ══════════════════════════════════════════════════════════════ */

/* «Mehr dazu» im Fliesstext: aufgeklappter Text so gross wie der
   Einleitungstext darüber (der Fliesstext ist immer `.lead`). */
.fliesstext .mehr-dazu__inhalt {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.7;
}

/* Schwerpunkte unter dem Bild (Feld «Schwerpunkte: Position»). */
.text-image--chips-bild .text-image__media .text-image__schwerpunkte {
    margin-top: 1.75rem;
}

/* Chips in «Text + Bild» ohne Punkt davor. */
.text-image__chips .fokus-chip {
    padding: 0.5rem 1rem;
}

.text-image__chips .fokus-chip::before {
    display: none;
}

/* ── T153: Dropdown «Angebot» hängt sauber unter der Menü-Pille ──────
   Bisher war das Untermenü am Menüpunkt zentriert. Es ragte links aus
   der Pille heraus und überlappte deren unteren Rand. Jetzt bezieht es
   sich auf die Pille selbst: linke Kante bündig, 10 px Luft darunter. */
@media (min-width: 1024px) {
    .site-header__nav {
        position: relative;
    }

    .site-header__menu > li.menu-item-has-children {
        position: static;
    }

    .site-header__menu .sub-menu {
        left: 0;
        top: calc(100% + 10px);
        transform: translateY(6px);
    }

    .site-header__menu > li.menu-item-has-children:hover > .sub-menu,
    .site-header__menu > li.menu-item-has-children:focus-within > .sub-menu {
        transform: translateY(0);
    }

    /* Brücke über Pillen-Rand und Spalt, damit die Maus das Menü erreicht */
    .site-header__menu .sub-menu::before {
        top: -24px;
        height: 24px;
    }
}

/* ── T159: «Schwerpunkte: Position = bild» als Karte über die volle Breite
   Text und Bild stehen gleich gewichtet nebeneinander, die Schwerpunkte
   folgen darunter als ruhige Karte über beide Spalten. Die Überschrift
   der Karte nimmt den Stil der Overline auf. Nur CSS, gilt ausschliesslich
   für Sektionen mit dieser Einstellung (heute «Katharina Fründt»). */
.text-image--chips-bild .text-image__media .text-image__schwerpunkte {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
}

.text-image--chips-bild .text-image__chips-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary, #65AF02);
    margin-bottom: 1.25rem;
}

.text-image--chips-bild .text-image__chipspalte-titel {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: none;
    margin-bottom: 0.85rem;
}

.text-image--chips-bild .text-image__chips .fokus-chip {
    font-size: 0.875rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    line-height: 1.3;
}

@media (min-width: 861px) {
    .text-image--chips-bild .text-image__grid {
        grid-template-areas: "text bild" "chips chips";
        row-gap: 3rem;
    }

    .text-image--chips-bild .text-image__grid.text-image--reversed {
        grid-template-areas: "bild text" "chips chips";
    }

    .text-image--chips-bild .text-image__content {
        grid-area: text;
    }

    /* Die Bildspalte löst sich auf, damit Bild und Karte eigene Zeilen
       im Raster bekommen. */
    .text-image--chips-bild .text-image__media {
        display: contents;
    }

    .text-image--chips-bild .text-image__media > .text-image__img {
        grid-area: bild;
    }

    .text-image--chips-bild .text-image__media .text-image__schwerpunkte {
        grid-area: chips;
        margin-top: 0;
        padding: 2rem 2.25rem;
    }

    .text-image--chips-bild .text-image__chipspalten {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .text-image--chips-bild .text-image__chips .fokus-chip {
        white-space: nowrap;
    }
}

/* Schmal brechen lange Chips auf zwei Zeilen um; mit voll runden Enden
   wirken sie dann plump, deshalb dort weichere Ecken (T159). */
@media (max-width: 860px) {
    .text-image--chips-bild .text-image__chips .fokus-chip {
        border-radius: 14px;
    }
}

/* ── T165/T168: Ergebnis-Modal des BGM Use Case Finders ─────────────
   Ersetzt die Danke-Seiten. Natives <dialog>, gefüllt von ucf-modal.js. */
.ucf-modal {
    /* Mitte des Fensters: Die Grund-Rücksetzung der Seite nimmt dem
       <dialog> sein `margin: auto`. */
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: var(--color-gray-800, #1f2937);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.25);
    overflow: auto;
    z-index: var(--z-modal, 500);
}

.ucf-modal::backdrop {
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(3px);
}

.ucf-modal__inner {
    position: relative;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
}

.ucf-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-gray-600, #4b5563);
    cursor: pointer;
}

.ucf-modal__close:hover,
.ucf-modal__close:focus-visible {
    background: rgba(101, 175, 2, 0.1);
    color: var(--color-primary, #65AF02);
}

.ucf-modal__titel {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    line-height: 1.25;
    margin: 0.5rem 0 1rem;
    outline: none;
}

.ucf-modal__text {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 auto 1.5rem;
    max-width: 52ch;
    /* Die E-Mail-Adresse nie trennen, nur zur Not umbrechen */
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: anywhere;
}

.ucf-modal__fertig {
    margin-top: 0.25rem;
}

/* Marker der Bestätigung ist nur für das Skript. */
.rpt-ucf-ergebnis {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .ucf-modal[open] {
        animation: ucf-modal-ein 0.25s ease-out;
    }

    @keyframes ucf-modal-ein {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }
}