/* ==========================================================================
   HOMEPAGE SECTIONS — Section-specific Styles
   Extends the base components defined in main.css.
   Design: Clean, elegant, premium — minimal decoration, lots of white space.
   Version: 2.0.0
   Author: NetriX GmbH (https://www.netrix.ch)
   ========================================================================== */


/* ==========================================================================
   1. HERO SECTION
   Full-viewport hero with left-aligned glass card and floating Kompass bar.
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: visible;
    margin-bottom: 0; /* No gap — BGM section padding-top handles kompass overhang */
}

/* --- Background Image --- */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden; /* Contain the background image */
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Parallaxe (animations.js) schiebt das Bild bis 50 px nach unten. Das Bild ist
   dafür oben 50 px länger; der Rahmen (overflow: hidden) schneidet ab, die
   Unterkante des Heros bleibt fest. */
.hero__bg img {
    display: block;
    height: calc(100% + 50px) !important;
    margin-top: -50px;
}

/* --- Subtle Gradient Overlay (bottom only — NOT heavy dark) --- */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        transparent 50%
    );
    pointer-events: none;
}

/* --- Content Area --- */
.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 100vh;
    min-height: 100svh;
    /*
     * Platz für die fixierte Kopfzeile.
     *
     * Der Inhalt wird senkrecht zentriert. Auf niedrigen Fenstern rutschte
     * die Glaskarte dadurch nach oben unter die Kopfzeile und schnitt ins
     * Logo. Gemessen am 28.08.2026: bei 1440×700 ragte sie 38 px hinein,
     * bei 1440×620 sogar 78 px. Mit dem Innenabstand kann sie nicht mehr
     * höher als bis unter die Kopfzeile.
     */
    padding-top: calc(var(--header-height) + 1.5rem);
    padding-bottom: 6rem; /* Room for the kompass bar */
}

/* --- Glassmorphism Card (LEFT aligned) --- */
.hero__card {
    max-width: 520px;
    margin-right: auto; /* Push to the LEFT */
    padding: 2.5rem 3rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
}

/* Disable default glass-card hover transform on hero card */
.hero__card.glass-card:hover {
    transform: none;
}

/* --- Title: ACCENT PURPLE, uppercase, bold --- */
.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    text-shadow: none;
}

/* --- Subtitle: dark gray --- */
.hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-gray-600);
    margin-bottom: 0;
}

/* --- CTA Button --- */
.hero__cta {
    margin-top: 2rem;
}

/* Kein Pillen-Radius mehr. Der Knopf im Hero sah dadurch anders aus als
   jeder andere auf der Seite; jetzt gilt überall `--radius-sm` aus `.btn`. */
.hero__cta .btn--primary {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.875rem 2rem;
    font-size: 0.875rem;
    font-weight: 700;
}


/* ==========================================================================
   1b. HERO — BGM KOMPASS FLOATING BAR
   Overlaps hero bottom and next section.
   ========================================================================== */

.hero__kompass {
    position: relative;
    z-index: 10;
    width: 64%;
    max-width: 770px;
    margin-top: auto; /* push to bottom of hero flex column */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    transform: translateY(50%); /* hang half below the hero edge */
    pointer-events: none;
    box-sizing: border-box;
}

/* Extra top-spacing on the first section after hero when Kompass is visible */
.hero--has-kompass + .section,
.hero--has-kompass + .site-main > .section:first-child {
    padding-block-start: calc(var(--section-padding) + 4rem);
}

.hero__kompass-inner {
    pointer-events: auto;
}

.hero__kompass-card.glass-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: none !important;
    padding: 1.5rem 2.5rem !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
}

/* Disable default glass-card hover transform on kompass */
.hero__kompass-card.glass-card:hover {
    transform: none;
}

/* --- Kompass Image --- */
.hero__kompass-image {
    width: 120px !important;
    height: 90px !important;
    border-radius: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-50);
}

.hero__kompass-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Kompass Text --- */
.hero__kompass-content {
    flex: 1;
    min-width: 0;
}

.hero__kompass-overline {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-600);
    margin-bottom: 0.25rem;
}

.hero__kompass-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: 0.02em;
}

/* --- Kompass Actions --- */
.hero__kompass-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.hero__kompass-actions .btn--primary {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.625rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.hero__kompass-link {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

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


/* ==========================================================================
   2. BGM TEASER SPACER
   Accounts for the hero kompass bar overlap.
   ========================================================================== */

.bgm-teaser-spacer {
    padding-top: 4rem;
}


/* ==========================================================================
   3. THE WHY SECTION
   Clean stats, pull-quote with green left accent.
   ========================================================================== */

.the-why.section {
    padding-top: 12rem !important; /* Extra space for kompass box overhang */
}

.the-why__header {
    max-width: 48rem;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.the-why__title {
    margin-bottom: 1.5rem;
}

.the-why__text {
    margin-bottom: 2.5rem;
}

/* --- Pull-Quote --- */
.the-why__quote {
    max-width: 40rem;
    margin-inline: auto;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
    padding: 2rem 2.5rem;
    background-color: var(--color-white);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.the-why__blockquote p {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-gray-800);
    margin-bottom: 0;
}

.the-why__attribution {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-600);
}

/* .stats-bar__description wird seit 12.08.2026 in main.css gestylt —
   dort, wo die Komponente selbst definiert ist. Sonst rendert sie auf
   Unterseiten und in Blogartikeln ungestylt, weil diese Datei dort nicht
   geladen wird. */


/* ==========================================================================
   4. BGM SOLUTIONS — INTERACTIVE TAB DESIGN
   Horizontal tab bar with expandable detail card.
   ========================================================================== */

.bgm-solutions {
    padding-top: 8rem; /* Extra space for kompass overlap */
    padding-bottom: 5rem;
}

/* --- Section Title --- */
.bgm-solutions__title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 3rem;
}

/* --- Tab Bar --- */
.bgm-solutions__tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* --- Individual Tab --- */
.bgm-solutions__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 1rem;
    padding: 1.75rem 1.25rem 1.5rem;
    text-align: center;
    cursor: pointer;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
    flex: 1;
    min-width: 140px;
    max-width: 220px;
}

.bgm-solutions__tab:hover {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
}

.bgm-solutions__tab[aria-selected="true"] {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.14),
        0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
    background: var(--color-white);
    position: relative;
}

/* Triangle pointer connecting active tab to detail panel */
.bgm-solutions__tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid var(--color-white);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
    z-index: 2;
}

/* --- Hervorgehobenes Produkt (P114) ---
   Grüner Rahmen und ein Schildchen auf der Oberkante. Bleibt sichtbar,
   auch wenn ein anderes Produkt geöffnet ist. */
.bgm-solutions__tabs:has(.bgm-solutions__tab--featured) {
    padding-top: 0.9rem;
}

.bgm-solutions__tab--featured {
    position: relative;
    border: 2px solid var(--color-primary);
    background: linear-gradient(180deg, rgba(107, 155, 55, 0.07) 0%, var(--color-white) 55%);
}

.bgm-solutions__tab--featured:hover,
.bgm-solutions__tab--featured[aria-selected="true"] {
    border-color: var(--color-primary);
}

.bgm-solutions__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(107, 155, 55, 0.35);
    pointer-events: none;
}

/* --- Tab Icon --- */
.bgm-solutions__tab-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-primary);
    background: rgba(107, 155, 55, 0.08);
    border-radius: 50%;
    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.bgm-solutions__tab:hover .bgm-solutions__tab-icon {
    color: var(--color-primary);
    background: rgba(107, 155, 55, 0.14);
    transform: scale(1.08);
}

.bgm-solutions__tab[aria-selected="true"] .bgm-solutions__tab-icon {
    color: var(--color-accent);
    background: rgba(75, 2, 175, 0.12);
}

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

.bgm-solutions__tab-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* --- Tab Name --- */
.bgm-solutions__tab-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-800);
    margin-bottom: 0.125rem;
}

.bgm-solutions__tab[aria-selected="true"] .bgm-solutions__tab-name {
    font-weight: 700;
    color: var(--color-gray-900);
}

/* --- Tab Subtitle --- */
.bgm-solutions__tab-sub {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-top: 0.125rem;
}

/* --- Detail Panel --- */
.bgm-solutions__detail {
    margin-top: 1.25rem;
}

.bgm-solutions__detail--active {
    animation: bgmFadeIn 0.35s ease;
}

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

/* --- Detail Card --- */
.bgm-solutions__detail-card {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    background: var(--color-white);
    border-radius: 0.75rem;
    padding: 2.5rem 3rem;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--color-primary);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Detail Content --- */
.bgm-solutions__detail-content {
    flex: 1;
    min-width: 0;
}

.bgm-solutions__detail-overline {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin-bottom: 0.625rem;
}

.bgm-solutions__detail-title {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    color: var(--color-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.875rem;
}

.bgm-solutions__detail-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-gray-600);
    margin-bottom: 0;
    max-width: 52rem;
}

/* --- Detail Action --- */
.bgm-solutions__detail-action {
    flex-shrink: 0;
    align-self: flex-end;
}

.bgm-solutions__detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, gap 0.2s ease;
}

.bgm-solutions__detail-link:hover {
    color: var(--color-primary-hover);
    gap: 0.5rem;
}


/* ==========================================================================
   5. TRUST SECTION
   ========================================================================== */

.trust__person {
    margin-bottom: 3rem;
}

.trust__person-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    text-align: center;
}

/* --- Portrait --- */
.trust__portrait-wrapper {
    display: flex;
    justify-content: center;
}

.trust__portrait {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-primary-light);
    box-shadow: 0 8px 30px rgba(101, 175, 2, 0.12);
}

/* Das Portrait ist mit dem Link unter dem Text verlinkt */
.trust__portrait-link {
    display: block;
    border-radius: 50%;
}

.trust__portrait-link .trust__portrait {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust__portrait-link:hover .trust__portrait {
    transform: scale(1.03);
    box-shadow: 0 12px 36px rgba(101, 175, 2, 0.22);
}

.trust__portrait--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-white);
    border: 4px solid var(--color-primary-light);
}

.trust__initials {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
}

/* --- Person Info --- */
.trust__name {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.375rem;
}

.trust__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.trust__bio {
    margin-bottom: 1.5rem;
}

/* --- Certifications --- */
.trust__certs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.trust__cert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
}

.trust__cert-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.trust__cert-label {
    font-weight: 600;
    color: var(--color-gray-800);
}

/* --- About Link --- */
.trust__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap 0.2s ease, color 0.2s ease;
}

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

/* --- Partner Logos --- */
.trust__partners {
    padding-top: 1rem;
}

/* Überschrift sitzt jetzt ÜBER der Linie — die Linie liest sich damit als
   Unterstreichung des Titels statt als Trenner zu einem zweiten Abschnitt. */
.trust__partners-heading {
    margin-bottom: 0.75rem;
    color: var(--color-gray-600);
}

.trust__partners-heading + .gradient-line {
    margin-top: 0.75rem;
}

/* --- Mobile Marquee --- */
.trust__marquee {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.trust__marquee-track {
    display: flex;
    gap: 3rem;
    align-items: center;
    animation: marquee-scroll 30s linear infinite;
    width: max-content;
}

.trust__marquee-logo {
    height: 32px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(100%);
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause marquee on hover for accessibility */
.trust__marquee:hover .trust__marquee-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .trust__marquee-track {
        animation: none;
    }
}


/* ==========================================================================
   6. PERSONAL TRAINING TEASER
   ========================================================================== */

.pt-teaser {
    position: relative;
    overflow: hidden;
}

.pt-teaser__bg {
    display: none;
}

.pt-teaser__bg-img {
    display: none;
}

.pt-teaser__overlay {
    display: none;
}

.pt-teaser__header {
    margin-bottom: 2.5rem;
    max-width: 40rem;
}

.pt-teaser__title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
}

.pt-teaser__text {
    margin-bottom: 0;
}

/* Feature list layout */
.pt-teaser__features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.pt-teaser__cta {
    margin-top: 1rem;
}


/* ==========================================================================
   7. CONTACT CTA SECTION
   ========================================================================== */

.contact-cta {
    position: relative;
    overflow: hidden;
}

.contact-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        #4a9e00 40%,
        var(--color-primary-hover) 70%,
        #3d8500 100%
    );
}

.contact-cta__inner {
    max-width: 40rem;
    margin-inline: auto;
}

.contact-cta__title {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-white);
    margin-bottom: 1rem;
}

.contact-cta__text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 36rem;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.contact-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* White button variant for green background */
.btn--white {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}

.btn--white:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-primary-hover);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Weisser Ring auf weissem Knopf war unsichtbar — gleiche Behandlung wie
   überall: dunkler Ring, heller Hof. */
.btn--white:focus-visible {
    outline-color: var(--color-dark, #111827);
}


/* ==========================================================================
   8. RESPONSIVE — MOBILE-FIRST BREAKPOINTS
   ========================================================================== */

/* --- Small screens (≤ 767px) --- */
@media (max-width: 767px) {

    /* Hero: card goes full-width with reduced padding */
    .hero__card {
        max-width: 100%;
        padding: 1.75rem;
        border-radius: 1rem;
    }

    .hero__title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .hero__cta .btn--primary {
        width: 100%;
        justify-content: center;
    }

    /* Kompass bar stacks vertically */
    .hero__kompass {
        width: 92%;
        max-width: none;
    }

    .hero__kompass-card {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }

    .hero__kompass-image {
        width: 64px;
        height: 52px;
    }

    .hero__kompass-content {
        text-align: center;
    }

    .hero__kompass-actions {
        width: 100%;
    }

    .hero__kompass-actions .btn--primary {
        width: 100%;
        justify-content: center;
    }

    /* More space after Kompass on mobile */
    .hero--has-kompass + .section {
        padding-block-start: calc(var(--section-padding) + 10rem);
    }

    /* BGM Solutions: tabs in 2x2 + 1 grid */
    .bgm-solutions__tabs {
        gap: 0.5rem;
    }

    .bgm-solutions__tab {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
        max-width: none;
        padding: 1rem 0.75rem;
    }

    /* Last tab (5th) full width */
    .bgm-solutions__tab:last-child {
        flex: 1 1 100%;
    }

    .bgm-solutions__tab-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0.5rem;
    }

    .bgm-solutions__tab-icon svg {
        width: 22px;
        height: 22px;
    }

    .bgm-solutions__tab-name {
        font-size: 0.75rem;
    }

    .bgm-solutions__tab-sub {
        font-size: 0.6875rem;
    }

    /* Detail card stacks vertically */
    .bgm-solutions__detail-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .bgm-solutions__detail-action {
        width: 100%;
    }

    .bgm-solutions__detail-action .bgm-solutions__detail-link {
        width: 100%;
        justify-content: center;
    }
}

/* --- Tablet (≥ 768px) --- */
@media (min-width: 768px) {

    /* Hero card: slightly more padding */
    .hero__card {
        padding: 2.5rem 3rem;
    }

    /* Trust: side-by-side layout */
    .trust__person-grid {
        grid-template-columns: auto 1fr;
        gap: 3rem;
        text-align: left;
    }

    .trust__certs {
        justify-content: flex-start;
    }

    /* PT Teaser: 3-column features */
    .pt-teaser__features {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    /* Trust portrait size */
    .trust__portrait {
        width: 220px;
        height: 220px;
    }

    /* BGM Solutions tabs: nice row */
    .bgm-solutions__tabs {
        flex-wrap: nowrap;
        gap: 1rem;
    }
}

/* --- Tablet Kompass: still stack vertically (768–1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__kompass {
        width: 70%;
        max-width: 500px;
    }

    .hero__kompass-card {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
        padding: 1.5rem 2rem;
    }

    .hero__kompass-image {
        width: 80px;
        height: 64px;
    }

    .hero__kompass-content {
        text-align: center;
    }

    .hero__kompass-actions {
        width: 100%;
    }

    .hero__kompass-actions .btn--primary {
        width: 100%;
        justify-content: center;
    }

    .hero--has-kompass + .section {
        padding-block-start: calc(var(--section-padding) + 10rem);
    }
}

/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {

    /* Hero card: max width enforced */
    .hero__card {
        max-width: 520px;
    }

    /* Kompass card: nice horizontal layout */
    .hero__kompass-card {
        gap: 2rem;
        padding: 1.5rem 2.5rem;
    }

    .hero__kompass-image {
        width: 160px;
        height: 120px;
    }

    .hero__kompass-title {
        font-size: 1.125rem;
    }

    /* Trust portrait */
    .trust__portrait {
        width: 260px;
        height: 260px;
    }
}

/* --- Large (≥ 1280px) --- */
@media (min-width: 1280px) {

    .hero__card {
        padding: 3rem 3.5rem;
    }

    .hero__title {
        font-size: 2.75rem;
    }

    .trust__person-grid {
        gap: 4rem;
    }

    .the-why__quote {
        padding: 2.5rem 3rem;
    }
}


/* ==========================================================================
   9. REDUCED MOTION — Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .bgm-solutions__detail--active {
        animation: none;
    }

    .bgm-solutions__tab {
        transition: none;
    }

    .hero__kompass-link {
        transition: none;
    }
}

/* ==========================================================================
   10. MOBILE HERO IMAGE POSITION
   ========================================================================== */

/* T180: Unter 1024 px Bild oben, Karte darunter — wie beim Seitenkopf der
   Unterseiten (sections-about.css). Vorher füllte das Bild hochkant die
   ganze Höhe: Auf dem Handy blieb vom Querformat nur ein schmaler Streifen
   aus der Mitte, Kathi stand ausserhalb davon und war gar nicht zu sehen.
   Jetzt das ganze Bild im eigenen Seitenverhältnis unter der Kopfzeile;
   die Parallaxe ist hier aus, sie würde oben einen Rand freilegen. */
@media (max-width: 1023px) {
    .hero {
        min-height: 0;
        padding-top: var(--header-height, 80px);
        background: var(--color-bg, #f8f9fa);
    }

    .hero__bg {
        position: relative;
        inset: auto;
    }

    .hero__bg img {
        height: auto !important;
        margin-top: 0;
        /* Querformat bleibt ganz. Nur Hochformat (Blatt auf /bgm/, Stein
           auf /angebot/) würde sonst den ganzen Schirm füllen und wird
           auf 60 % der Fensterhöhe gekürzt. */
        max-height: 60vh;
        object-fit: cover;
        transform: none !important;
    }

    .hero__overlay {
        display: none;
    }

    .hero__content {
        min-height: 0;
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
    }
}


/* ==========================================================================
   11. TEXT + BILD SECTION (NEU)
   Two-column layout with text and image.
   ========================================================================== */

.text-image {
    padding-block: var(--section-padding, 5rem);
}

.text-image__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.text-image__grid.text-image--reversed {
    direction: rtl;
}

.text-image__grid.text-image--reversed > * {
    direction: ltr;
}

.text-image__content .overline {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.text-image__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-900);
    margin-bottom: 1.5rem;
}

.text-image__text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-gray-600);
    margin-bottom: 2rem;
}

.text-image__text p:last-child {
    margin-bottom: 0;
}

.text-image__img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
}

@media (max-width: 767px) {
    .text-image__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .text-image__grid.text-image--reversed {
        direction: ltr;
    }

    .text-image__media {
        order: -1; /* Image on top on mobile */
    }
}


/* ==========================================================================
   12. ZITAT (QUOTE) SECTION (NEU)
   Large centered quote with author attribution.
   ========================================================================== */

.quote-section {
    padding-block: var(--section-padding, 5rem);
}

.quote-section__figure {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.quote-section__blockquote {
    position: relative;
    padding: 0;
    border: none;
    margin: 0;
}

.quote-section__blockquote p {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-gray-800);
}

.quote-section__caption {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-gray-600);
}

.quote-section__caption strong {
    display: block;
    color: var(--color-gray-900);
    font-weight: 600;
}

.quote-section__role {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-gray-400, #9ca3af);
}

/* Dark variant */
.quote-section.section--dark {
    background: var(--color-gray-900);
}

.quote-section.section--dark .quote-section__blockquote p {
    color: #fff;
}

.quote-section.section--dark .quote-section__caption {
    color: rgba(255, 255, 255, 0.6);
}

.quote-section.section--dark .quote-section__caption strong {
    color: #fff;
}


/* ==========================================================================
   13. CTA BANNER SECTION (NEU)
   Full-width call-to-action banner with heading, text and button.
   ========================================================================== */

.cta-banner {
    padding-block: 4rem;
}

.cta-banner--primary {
    background: var(--color-primary);
    color: #fff;
}

.cta-banner--dark {
    background: var(--color-gray-900);
    color: #fff;
}

.cta-banner__content {
    max-width: 40rem;
    margin-inline: auto;
}

.cta-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.cta-banner__text {
    font-size: 1.0625rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.cta-banner__action .btn--primary {
    background: #fff;
    color: var(--color-primary);
    font-weight: 700;
}

.cta-banner--dark .cta-banner__action .btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.cta-banner__action .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   T162: Use-Case-Finder-Kasten im Hero grösser und mittig (30.10.2026)
   Bild, Text und Button bilden eine Gruppe in der Mitte der Karte, statt
   an den Rändern zu kleben. Die `!important` sind nötig, weil die
   Grundregeln oben ebenfalls damit arbeiten.
   ========================================================================== */
@media (min-width: 1024px) {
    .hero__kompass {
        width: 76%;
        max-width: 900px;
    }

    .hero__kompass-card.glass-card {
        justify-content: center !important;
        gap: 2.75rem !important;
        padding: 1.75rem 3rem !important;
    }

    .hero__kompass-image {
        width: 168px !important;
        height: 116px !important;
    }

    .hero__kompass-content {
        flex: 0 1 auto;
    }

    .hero__kompass-overline {
        font-size: 0.75rem;
        margin-bottom: 0.4rem;
    }

    .hero__kompass-title {
        font-size: 1.375rem;
    }

    .hero__kompass-actions .btn--primary {
        padding: 0.85rem 2rem;
        font-size: 0.875rem;
    }
}