/* ==========================================================================
   Gärtner-Marketing – Zentrales Design-System
   Reines HTML/CSS/JS · Fonts selbst gehostet · DSGVO-konform
   ========================================================================== */

:root {
    /* Farben – Markenfarben Gärtner-Marketing */
    --color-primary: #1A1F2B;        /* Dunkles Navy – Hauptfarbe */
    --color-primary-soft: #232A3B;   /* Navy aufgehellt für Karten auf dunklem Grund */
    --color-accent: #4A9FD8;         /* Hellblau – Akzent & Links */
    --color-accent-hover: #3487C0;   /* Hellblau dunkler – Hover */
    --color-success: #00A86B;        /* Grün – Checkmarks & Erfolge */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F4F7FB;         /* Sehr helles Blaugrau für Wechselsektionen */
    --color-text: #1D2026;
    --color-text-muted: #5A6A7A;
    --color-text-inverse: #FFFFFF;
    --color-text-inverse-muted: rgba(255, 255, 255, .72);
    --color-border: #E2E8F0;
    --color-card: #FFFFFF;

    /* Layout */
    --max-width: 1600px;
    --content-padding: clamp(1rem, 2.5vw, 2rem);
    --section-spacing: clamp(4rem, 10vw, 8rem);

    /* Typografie – selbst gehostet */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Schriftgrößen – fluid */
    --text-sm: clamp(.85rem, .8rem + .2vw, .95rem);
    --text-base: clamp(1rem, .95rem + .25vw, 1.1rem);
    --text-lg: clamp(1.1rem, 1rem + .4vw, 1.3rem);
    --text-xl: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    --text-2xl: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem);
    --text-3xl: clamp(2.2rem, 1.6rem + 2.2vw, 3.6rem);

    /* Rundungen & Schatten */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(26, 31, 43, .06);
    --shadow-md: 0 4px 16px rgba(26, 31, 43, .08);
    --shadow-lg: 0 12px 40px rgba(26, 31, 43, .12);

    /* Transitions */
    --transition-fast: .2s ease;
    --transition-base: .3s ease;
}

/* Reset & Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.7;
    overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; color: var(--color-primary); }
ul, ol { list-style-position: inside; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}
/* content-visibility: Sektionen außerhalb des Sichtfensters überspringt der
   Browser komplett – das spart beim Scrollen den Großteil der Layout- und
   Malarbeit. contain-intrinsic-size hält dabei die Scrollhöhe stabil. */
.section {
    padding: var(--section-spacing) 0;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 980px;   /* gemessener Median der Sektionshöhen */
}
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-primary); }
.section--dark h2, .section--dark h3 { color: var(--color-text-inverse); }
.section--dark p { color: var(--color-text-inverse-muted); }

/* Eyebrow / Kicker über Überschriften */
.eyebrow {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.section-head { max-width: 820px; margin: 0 auto 3.5rem; text-align: center; }
.section-head h2 { font-size: var(--text-2xl); margin-bottom: 1rem; }
.section-head p { color: var(--color-text-muted); font-size: var(--text-lg); }
.section--dark .section-head p { color: var(--color-text-inverse-muted); }

/* Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .95rem 2rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-base);
    text-align: center;
    min-height: 44px;
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--dark { background: var(--color-primary); color: #fff; }
.btn--dark:hover { background: var(--color-primary-soft); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: #fff; color: var(--color-primary); border-color: #fff; }

/* Header & Navigation
   ========================================================================== */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.topbar .container { display: flex; justify-content: flex-start; gap: 2rem; padding-top: .4rem; padding-bottom: .4rem; }
.topbar a { color: var(--color-text-muted); display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--color-accent); }

.site-header {
    /* Blau statt Anthrazit und etwas höher – wie auf der bisherigen Seite */
    background: #1B3B5F;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 18px rgba(16, 32, 52, .18);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 92px;
}
@media (max-width: 1023px) {
    .site-header .container { min-height: 76px; }
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.brand__claim { font-size: .72rem; color: var(--color-text-inverse-muted); letter-spacing: .04em; }
.brand:hover .brand__name { color: var(--color-accent); }

.main-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; }
.main-nav li { position: relative; }
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    font-weight: 500;
    font-size: 1.01rem;
    padding: .65rem .9rem;
    border-radius: var(--radius-sm);
}
.main-nav a:hover, .main-nav a.active { color: var(--color-accent); }
.main-nav .caret { width: 10px; height: 10px; transition: transform var(--transition-fast); }

/* Dropdowns */
.dropdown { position: relative; }
.dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: .6rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--transition-fast);
    z-index: 1001;
}
.dropdown:hover > .dropdown__menu,
.dropdown:focus-within > .dropdown__menu,
.dropdown.open > .dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown:hover > a .caret, .dropdown.open > a .caret { transform: rotate(180deg); }
.dropdown__menu a {
    display: block;
    color: var(--color-text);
    padding: .55rem .85rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.dropdown__menu a:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.dropdown__menu a small { display: block; color: var(--color-text-muted); font-weight: 400; font-size: .8rem; line-height: 1.4; }

.nav-cta { margin-left: .75rem; padding: .65rem 1.5rem !important; background: var(--color-accent); color: #fff !important; border-radius: 999px; font-weight: 600 !important; }
.nav-cta:hover { background: var(--color-accent-hover); }

/* Burger (Mobile) */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 1002;
}
.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    margin: 6px auto;
    transition: all var(--transition-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Hero
   ========================================================================== */
.hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #253046 60%, #2C3D5C 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -8%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 159, 216, .18) 0%, transparent 70%);
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -6%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 107, .10) 0%, transparent 70%);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 {
    font-size: var(--text-3xl);
    color: #fff;
    hyphens: none;
    max-width: 900px;
    margin-bottom: 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--color-accent); }
.hero p.lead { font-size: var(--text-lg); color: var(--color-text-inverse-muted); max-width: 720px; margin-bottom: 2rem; }
.hero__badge {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero__trust { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; color: var(--color-text-inverse-muted); font-size: var(--text-sm); }
.hero__trust .stars { color: #FFC93C; letter-spacing: .1em; }

/* Check-Listen */
.check-list { list-style: none; }
.check-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: .8rem;
}
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .34em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--color-success);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-1.2 14.6-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4-7.2 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-1.2 14.6-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4-7.2 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Karten & Grids
   ========================================================================== */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card h3 { font-size: var(--text-xl); margin-bottom: .75rem; }
.card p { color: var(--color-text-muted); }
.card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(74, 159, 216, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--color-accent);
}
.card__icon svg { width: 28px; height: 28px; }

.card--dark { background: var(--color-primary-soft); border-color: rgba(255,255,255,.08); }
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--color-text-inverse-muted); }

/* Zahlen / Statistiken */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat__number {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
}
.stat__label { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: .35rem; }
.section--dark .stat__label { color: var(--color-text-inverse-muted); }

/* Schritte (1-2-3-4) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
.step { position: relative; padding: 2rem 1.5rem 1.5rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.step__number {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-accent);
    opacity: .35;
    line-height: 1;
    margin-bottom: .75rem;
}
.step h3 { font-size: var(--text-lg); margin-bottom: .5rem; }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* FAQ (Accordion) */
.faq { max-width: 900px; margin: 0 auto; }
.faq details {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
}
.faq summary {
    cursor: pointer;
    padding: 1.25rem 3.25rem 1.25rem 1.5rem;
    font-weight: 600;
    font-size: var(--text-base);
    list-style: none;
    position: relative;
    color: var(--color-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--color-accent);
    transition: transform var(--transition-fast);
}
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 1.5rem 1.5rem; color: var(--color-text-muted); }

/* Testimonials */
.testimonial {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
.testimonial .stars { color: #FFC93C; font-size: 1.05rem; letter-spacing: .12em; margin-bottom: 1rem; }
.testimonial blockquote { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: 1.25rem; }
.testimonial cite { font-style: normal; font-weight: 600; color: var(--color-primary); display: block; }
.testimonial cite small { display: block; font-weight: 400; color: var(--color-text-muted); }

/* CTA-Banner */
.cta-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2C3D5C 100%);
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(74, 159, 216, .15);
}
.cta-banner h2 { color: #fff; font-size: var(--text-2xl); margin-bottom: 1rem; position: relative; }
.cta-banner p { color: var(--color-text-inverse-muted); max-width: 640px; margin: 0 auto 2rem; position: relative; }
.cta-banner .hero__actions { justify-content: center; position: relative; }

/* Footer
   ========================================================================== */
.site-footer { background: var(--color-primary); color: var(--color-text-inverse-muted); padding: var(--section-spacing) 0 0; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); margin-bottom: 1.25rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand .brand__name { font-size: 1.6rem; }
.footer-brand p { margin-top: 1rem; max-width: 320px; font-size: var(--text-sm); }
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: .6rem; }
.site-footer a { color: var(--color-text-inverse-muted); }
.site-footer a:hover { color: var(--color-accent); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--text-sm);
}
.footer-bottom ul { display: flex; gap: 1.5rem; list-style: none; }

/* Scroll-Animationen
   ========================================================================== */
/* Nur ausblenden, wenn JavaScript läuft – sonst bliebe die Seite leer. */
.js .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.js .animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .js .animate-on-scroll { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* Dekorative Bubbles */
.bubbles::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(74, 159, 216, .05);
    pointer-events: none;
}
.bubbles::after {
    content: '';
    position: absolute;
    bottom: -8%;
    right: -3%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(0, 168, 107, .05);
    pointer-events: none;
}

/* Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    .main-nav a { padding: .6rem .55rem; font-size: .92rem; }
}
@media (max-width: 1023px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .nav-toggle { display: block; }
    .main-nav {
        position: fixed;
        inset: 0;
        background: var(--color-primary);
        flex-direction: column;
        justify-content: flex-start;
        padding: 6rem 1.5rem 2rem;
        transform: translateX(100%);
        transition: transform var(--transition-base);
        overflow-y: auto;
        z-index: 1001;
    }
    .main-nav.open { transform: translateX(0); }
    .main-nav > ul { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
    .main-nav a { padding: .9rem .5rem; font-size: 1.1rem; width: 100%; justify-content: space-between; }
    .dropdown__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,.05);
        display: none;
        min-width: 0;
    }
    .dropdown.open > .dropdown__menu { display: block; }
    .dropdown__menu a { color: #fff; }
    .dropdown__menu a small { color: var(--color-text-inverse-muted); }
    .dropdown__menu a:hover { background: rgba(255,255,255,.08); color: var(--color-accent); }
    .nav-cta { margin: 1rem 0 0; text-align: center; justify-content: center; }
}
@media (max-width: 767px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .topbar .container { gap: 1rem; flex-wrap: wrap; }
    .hero { min-height: auto; }
    .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   STARTSEITE – Live-Look (Hero hell, Kundenlogos, dunkle Kennzahlen, Team)
   Ergänzung 2026-08 · orientiert am Live-Auftritt gaertner-marketing.de
   ========================================================================== */

/* --- Hero: heller Auftritt mit Netzwerk-Grafik --------------------------- */
.hero--light {
    min-height: auto;
    color: var(--color-text);
    background: radial-gradient(115% 85% at 74% 12%, #E9F2FB 0%, #F3F8FC 42%, #FFFFFF 100%);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hero--light::before, .hero--light::after { display: none; }
.hero__art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero__art img {
    position: absolute; right: -10%; top: -14%;
    width: min(1560px, 124%); opacity: .78;
    -webkit-mask-image: radial-gradient(74% 76% at 58% 46%, #000 46%, transparent 84%);
    mask-image: radial-gradient(74% 76% at 58% 46%, #000 46%, transparent 84%);
}
.hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.hero__inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
    align-items: center;
}
.hero--light h1 { color: var(--color-primary); max-width: 27ch; }
.hero--light h1 em { color: var(--color-accent); font-style: italic; }
.hero--light p.lead { color: var(--color-text-muted); max-width: 62ch; }
.hero--light .hero__badge {
    background: rgba(74, 159, 216, .12);
    border: 1px solid rgba(74, 159, 216, .28);
    border-radius: 999px;
    padding: .45rem 1rem;
    color: #2C7CB4;
    letter-spacing: .1em;
}
.hero--light .check-list li { color: var(--color-text); font-weight: 500; }
.hero--light .hero__trust { color: var(--color-text-muted); }

/* Avatar-Reihe im Hero */
.trust-row { display: flex; align-items: center; gap: .9rem; margin-top: 2rem; flex-wrap: wrap; }
.avatar-stack { display: flex; }
.avatar-stack span {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-body); font-size: .78rem; font-weight: 700; color: #fff;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(26,31,43,.14);
    margin-left: -12px;
}
.avatar-stack span:first-child { margin-left: 0; }
.avatar-stack span.avatar-stack__img { padding: 0; overflow: hidden; background: #E2E8F0; }
.avatar-stack span.avatar-stack__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-stack span:nth-child(1) { background: linear-gradient(135deg, #2C7CB4, #4A9FD8); }
.avatar-stack span:nth-child(2) { background: linear-gradient(135deg, #1A1F2B, #3A4B66); }
.avatar-stack span:nth-child(3) { background: linear-gradient(135deg, #00A86B, #3FC48F); }
.avatar-stack span:nth-child(4) { background: linear-gradient(135deg, #4A5A70, #7A8DA5); }
.trust-row__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; }
.trust-row__text strong { color: var(--color-text); font-weight: 600; }
.trust-row .stars { display: block; color: #FFC93C; letter-spacing: .12em; font-size: 1rem; }

/* Dashboard-Mockup rechts */
.hero__visual { position: relative; }
/* Laufband im Hero – wie auf der bisherigen Startseite: ein schmales
   Fenster, durch das die Auswertungsblätter langsam durchlaufen. Die
   Ränder blenden weich aus, damit die Blätter nicht abgeschnitten wirken. */
.hero__reports {
    position: relative;
    width: clamp(300px, 27vw, 620px);
    margin-left: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hero__track {
    will-change: transform;
    display: flex;
    width: max-content;
    animation: marquee 34s linear infinite;
}
.hero__set {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.25rem, 3.7vw, 4.9rem);
    padding-right: clamp(1.25rem, 3.7vw, 4.9rem);
}
.hero__report {
    display: block;
    flex: 0 0 auto;
    width: clamp(190px, 16.6vw, 380px);
    height: auto;
    aspect-ratio: 354 / 500;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.hero__reports:hover .hero__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .hero__track { animation: none; }
    .hero__set:last-child { display: none; }
}

@media (max-width: 980px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { order: -1; max-width: 620px; margin: 0 auto 1.75rem; }
    .hero__reports { width: 100%; margin: 0 auto; }
    .hero__set { gap: clamp(1rem, 5vw, 2.5rem); padding-right: clamp(1rem, 5vw, 2.5rem); }
    .hero__report { width: clamp(170px, 38vw, 300px); }
    .hero__art img { right: -25%; top: -5%; width: 150%; opacity: .8; }
}
@media (max-width: 560px) {
    .hero__set { gap: 1rem; padding-right: 1rem; }
    .hero__report { width: clamp(150px, 46vw, 240px); }
}

/* --- Kundenlogos: Endlos-Laufband ---------------------------------------- */
.logobar { background: #fff; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 2.25rem 0; overflow: hidden; }
.logobar__label {
    text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1.25rem;
}
.marquee { position: relative; overflow: hidden; min-height: clamp(30px, 3.2vw, 42px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marquee__track { will-change: transform; --logo-gap: clamp(2.5rem, 5vw, 4.5rem); display: flex; align-items: center; width: max-content; animation: marquee 26s linear infinite; }
.marquee__set { display: flex; align-items: center; gap: var(--logo-gap); padding-right: var(--logo-gap); }
/* Kein Anhalten beim Überfahren – das Band wirkte dadurch wie eingefroren,
   sobald der Mauszeiger zufällig darüber lag. */
.marquee img {
    width: auto; height: auto; flex: none;
    max-height: clamp(30px, 3.2vw, 42px);
    max-width: clamp(120px, 13vw, 180px);
    filter: grayscale(100%) contrast(1.2); opacity: .86;
    transition: filter var(--transition-base), opacity var(--transition-base);
}
/* Die Logodateien sind bereits in Graustufen – beim Überfahren nur aufhellen. */
.marquee img:hover { opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; width: 100%; }
    .marquee__set:last-child { display: none; }
    .marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; width: 100%; padding-right: 0; }
}

/* --- Dunkle Kennzahlen-Sektion (wie live) --------------------------------- */
.section--navy {
    background:
        radial-gradient(90% 70% at 20% 0%, rgba(74,159,216,.16) 0%, transparent 60%),
        radial-gradient(70% 60% at 88% 100%, rgba(0,168,107,.10) 0%, transparent 60%),
        linear-gradient(160deg, #16213A 0%, #1A2740 55%, #16203A 100%);
    color: #fff;
}
.section--navy::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.section--navy > .container { position: relative; z-index: 1; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .section-head p, .section--navy p { color: rgba(255,255,255,.74); }
.section--navy .eyebrow { color: #7FC0EE; }
.section--navy .eyebrow::before, .section--navy .eyebrow::after {
    content: ''; display: inline-block; width: 24px; height: 1px;
    background: rgba(127,192,238,.55); vertical-align: middle; margin: 0 .8rem;
}
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.6vw, 1.5rem); }
.stat-card {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-md);
    padding: clamp(1.4rem, 2.4vw, 2.2rem) 1rem;
    text-align: center;
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.stat-card:hover { transform: translateY(-4px); border-color: rgba(127,192,238,.42); }
.stat-card__number {
    font-family: var(--font-heading); font-weight: 700; line-height: 1.05;
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
    color: #6FB6EA;
}
.stat-card__label { font-size: var(--text-sm); color: rgba(255,255,255,.66); margin-top: .5rem; }

.included {
    margin-top: clamp(2rem, 4vw, 3.25rem);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: grid; grid-template-columns: 1fr 1fr auto;
    gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center;
}
.included__head {
    grid-column: 1 / -1;
    font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem;
}
.included__head::before { content: ''; width: 26px; height: 1px; background: #7FC0EE; flex: none; }
.included ul { list-style: none; display: grid; gap: .7rem; }
.included li { position: relative; padding-left: 1.6rem; font-size: var(--text-sm); color: rgba(255,255,255,.82); line-height: 1.55; }
.included li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #7FC0EE; font-weight: 700; }
@media (max-width: 900px) {
    .stat-cards { grid-template-columns: repeat(2, 1fr); }
    .included { grid-template-columns: 1fr; }
    .included .btn { justify-self: start; }
}

/* --- Team-Karten mit Foto/Initialen -------------------------------------- */
.team-card { text-align: center; padding-top: 2.25rem; }
.team-card .avatar {
    width: 96px; height: 96px; border-radius: 50%;
    margin: 0 auto 1.1rem;
    display: grid; place-items: center;
    font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: #fff;
    background: linear-gradient(140deg, #1A1F2B 0%, #2C4468 55%, #4A9FD8 100%);
    box-shadow: 0 10px 26px rgba(26,31,43,.20), 0 0 0 6px rgba(74,159,216,.10);
    overflow: hidden;
}
.team-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card .role {
    color: var(--color-accent); font-size: .78rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; margin: .35rem 0 .9rem;
}
.team-card p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Bildbausteine für Unterseiten ---------------------------------------- */
.photo-grid { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); grid-template-columns: repeat(3, 1fr); }
.photo-grid img {
    width: 100%; height: auto; object-fit: cover;
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    aspect-ratio: 4 / 3;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.photo-grid img:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.photo-grid--wide { grid-template-columns: repeat(2, 1fr); }
.photo-grid figure { margin: 0; }
.photo-grid figcaption { font-size: .82rem; color: var(--color-text-muted); margin-top: .5rem; }
@media (max-width: 720px) { .photo-grid, .photo-grid--wide { grid-template-columns: repeat(2, 1fr); } }

.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.media-split img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.media-split--flip .media-split__media { order: 2; }
@media (max-width: 860px) {
    .media-split { grid-template-columns: 1fr; }
    .media-split--flip .media-split__media { order: -1; }
}

.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.showcase figure { margin: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.showcase figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.showcase img { width: 100%; height: auto; display: block; }
.showcase figcaption { padding: 1rem 1.25rem 1.25rem; }
.showcase figcaption strong { display: block; font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-primary); margin-bottom: .3rem; }
.showcase figcaption span { font-size: .85rem; color: var(--color-text-muted); }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .showcase { grid-template-columns: 1fr; } }

/* --- Bewegter Halbton-Hintergrund (z. B. „Unsere Leistungen") ------------- */
.section--motion { position: relative; overflow: hidden; isolation: isolate; }
.section--motion::before {
    content: '';
    position: absolute; inset: -10%;
    z-index: -2;
    background-image:
        radial-gradient(rgba(74, 159, 216, .22) 1.1px, transparent 1.2px),
        radial-gradient(rgba(26, 31, 43, .10) 1px, transparent 1.1px);
    background-size: 26px 26px, 46px 46px;
    background-position: 0 0, 13px 13px;
    -webkit-mask-image: radial-gradient(85% 70% at 50% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
    mask-image: radial-gradient(85% 70% at 50% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
    animation: gm-drift 38s linear infinite;
}
.section--motion::after {
    content: '';
    position: absolute; inset: -12%;
    z-index: -1;
    background:
        radial-gradient(38% 46% at 22% 30%, rgba(74, 159, 216, .16) 0%, transparent 62%),
        radial-gradient(34% 40% at 78% 68%, rgba(0, 168, 107, .10) 0%, transparent 62%),
        radial-gradient(30% 34% at 60% 12%, rgba(74, 159, 216, .10) 0%, transparent 62%);
    animation: gm-glow 26s ease-in-out infinite alternate;
}
@keyframes gm-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-46px, -46px, 0); }
}
@keyframes gm-glow {
    from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
    to   { transform: translate3d(2.5%, 2%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .section--motion::before, .section--motion::after { animation: none; }
}

/* --- Verlinkte Bilder mit Hinweis-Badge ----------------------------------- */
.img-link { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; }
.img-link img { transition: transform var(--transition-base); }
.img-link:hover img { transform: scale(1.02); }
.img-link__badge {
    position: absolute; right: 1rem; bottom: 1rem;
    background: rgba(26, 31, 43, .86); color: #fff;
    font-size: .82rem; font-weight: 600;
    padding: .5rem .9rem; border-radius: 999px;
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.img-link:hover .img-link__badge, .img-link:focus-visible .img-link__badge { opacity: 1; transform: translateY(0); }
@media (hover: none) { .img-link__badge { opacity: 1; transform: none; } }

/* ==========================================================================
   ERGÄNZUNG 2026-08 · Bewegte Hintergründe, Bildebenen & Team-Fotos
   Alle Effekte laufen ausschließlich über transform/opacity (GPU-schonend)
   und sind bei prefers-reduced-motion vollständig abgeschaltet.
   ========================================================================== */

/* --- Grundgerüst: Effekt-Ebene liegt IMMER unter dem Inhalt --------------- */
.fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.section > .container,
.hero > .container,
.logobar > .container { position: relative; z-index: 1; }

/* --- 1) Aurora: weich treibende Farbfelder (helle Sektionen) -------------- */
.fx--aurora::before,
.fx--aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}
.fx--aurora::before {
    width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
    top: -18%; left: -12%;
    background: radial-gradient(circle, rgba(74, 159, 216, .22) 0%, rgba(74, 159, 216, 0) 68%);
    animation: gm-aurora-a 24s ease-in-out infinite alternate;
}
.fx--aurora::after {
    width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
    bottom: -22%; right: -10%;
    background: radial-gradient(circle, rgba(0, 168, 107, .15) 0%, rgba(0, 168, 107, 0) 68%);
    animation: gm-aurora-b 30s ease-in-out infinite alternate;
}
@keyframes gm-aurora-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(14%, 9%, 0) scale(1.18); }
}
@keyframes gm-aurora-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-12%, -8%, 0) scale(.92); }
}

/* --- 2) Raster: technisches Gitter, das langsam wandert ------------------- */
.fx--grid::before {
    content: '';
    position: absolute; inset: -12%;
    background-image:
        linear-gradient(rgba(26, 31, 43, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 31, 43, .055) 1px, transparent 1px);
    background-size: 54px 54px, 54px 54px;
    -webkit-mask-image: radial-gradient(78% 68% at 50% 42%, #000 8%, rgba(0,0,0,.4) 58%, transparent 88%);
    mask-image: radial-gradient(78% 68% at 50% 42%, #000 8%, rgba(0,0,0,.4) 58%, transparent 88%);
    animation: gm-grid 40s linear infinite;
}
.fx--grid::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(42% 48% at 18% 24%, rgba(74, 159, 216, .13) 0%, transparent 62%),
        radial-gradient(38% 42% at 84% 74%, rgba(74, 159, 216, .09) 0%, transparent 62%);
    animation: gm-glow 28s ease-in-out infinite alternate;
}
@keyframes gm-grid {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-54px, -54px, 0); }
}

/* --- 3) Halbton-Punkte (Pendant zu .section--motion, als Ebene) ----------- */
.fx--dots::before {
    content: '';
    position: absolute; inset: -10%;
    background-image:
        radial-gradient(rgba(74, 159, 216, .19) 1.1px, transparent 1.2px),
        radial-gradient(rgba(26, 31, 43, .10) 1px, transparent 1.1px);
    background-size: 26px 26px, 46px 46px;
    background-position: 0 0, 13px 13px;
    -webkit-mask-image: radial-gradient(85% 70% at 50% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
    mask-image: radial-gradient(85% 70% at 50% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
    animation: gm-drift 38s linear infinite;
}
.fx--dots::after {
    content: '';
    position: absolute; inset: -12%;
    background:
        radial-gradient(38% 46% at 22% 30%, rgba(74, 159, 216, .16) 0%, transparent 62%),
        radial-gradient(34% 40% at 78% 68%, rgba(0, 168, 107, .10) 0%, transparent 62%);
    animation: gm-glow 26s ease-in-out infinite alternate;
}

/* --- 4) Mesh: lebendiger Farbnebel für dunkle Sektionen ------------------- */
.fx--mesh::before {
    content: '';
    position: absolute; inset: -14%;
    background:
        radial-gradient(32% 38% at 20% 26%, rgba(74, 159, 216, .30) 0%, transparent 60%),
        radial-gradient(30% 34% at 78% 22%, rgba(0, 168, 107, .15) 0%, transparent 60%),
        radial-gradient(38% 40% at 62% 82%, rgba(74, 159, 216, .19) 0%, transparent 62%),
        radial-gradient(26% 30% at 12% 78%, rgba(127, 192, 238, .13) 0%, transparent 60%);
    animation: gm-mesh 34s ease-in-out infinite alternate;
}
.fx--mesh::after {
    content: '';
    position: absolute; inset: -8%;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 26px 26px;
}
@keyframes gm-mesh {
    from { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
    to   { transform: translate3d(3%, 2.5%, 0) scale(1.14) rotate(4deg); }
}

/* --- 5) Lichtstrahl: diagonaler Sweep ------------------------------------ */
.fx--beam::before {
    content: '';
    position: absolute;
    top: -60%; left: -40%;
    width: 38%; height: 150%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: rotate(18deg);
    animation: gm-beam 22s ease-in-out infinite;
}
.section--dark .fx--beam::before,
.section--navy .fx--beam::before,
.hero .fx--beam::before { background: linear-gradient(90deg, transparent, rgba(127, 192, 238, .11), transparent); }
@keyframes gm-beam {
    0%        { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
    8%        { opacity: 1; }
    34%, 100% { transform: translate3d(340%, 0, 0) rotate(18deg); opacity: 0; }
}

/* --- 6) Rotierende Ringe ------------------------------------------------- */
.fx--rings::before,
.fx--rings::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(74, 159, 216, .22);
}
.fx--rings::before {
    width: 34vw; height: 34vw; max-width: 430px; max-height: 430px;
    top: -14%; right: -8%;
    animation: gm-spin 46s linear infinite;
}
.fx--rings::after {
    width: 24vw; height: 24vw; max-width: 300px; max-height: 300px;
    bottom: -12%; left: -6%;
    border-color: rgba(0, 168, 107, .18);
    animation: gm-spin 62s linear infinite reverse;
}
.section--dark .fx--rings::before, .section--navy .fx--rings::before { border-color: rgba(127, 192, 238, .20); }
.section--dark .fx--rings::after,  .section--navy .fx--rings::after  { border-color: rgba(255, 255, 255, .10); }
@keyframes gm-spin { to { transform: rotate(360deg); } }

/* --- 7) Bildebene: Report-/Dashboard-Grafiken im Hintergrund -------------- */
/*  Die Grafiken kommen als background-image über die Variablen --r1/--r2, die
    im HTML am Element stehen. Vorteil: Sollte das Stylesheet einmal nicht
    geladen werden (Cache, Tippfehler im Pfad), bleibt schlicht ein leeres
    <div> übrig – es können keine riesigen Bilder in den Textfluss rutschen.  */
.fx--report::before,
.fx--report::after {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    border-radius: 14px;
    opacity: .11;
    filter: saturate(.5);
    -webkit-mask-image: radial-gradient(68% 68% at 50% 45%, #000 18%, transparent 78%);
    mask-image: radial-gradient(68% 68% at 50% 45%, #000 18%, transparent 78%);
}
.fx--report::before {
    top: -6%; right: -6%;
    width: clamp(260px, 34vw, 520px);
    height: clamp(380px, 50vw, 760px);
    background-image: var(--r1);
    transform: rotate(-5deg);
    animation: gm-float-a 26s ease-in-out infinite alternate;
}
.fx--report::after {
    bottom: -12%; left: -7%;
    width: clamp(220px, 27vw, 420px);
    height: clamp(320px, 40vw, 620px);
    background-image: var(--r2);
    transform: rotate(6deg);
    animation: gm-float-b 32s ease-in-out infinite alternate;
}
.section--dark .fx--report::before, .section--dark .fx--report::after,
.section--navy .fx--report::before, .section--navy .fx--report::after {
    opacity: .085; filter: saturate(.4) brightness(1.1);
}
@keyframes gm-float-a {
    from { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
    to   { transform: translate3d(-4%, 5%, 0) rotate(-1deg) scale(1.07); }
}
@keyframes gm-float-b {
    from { transform: translate3d(0, 0, 0) rotate(6deg) scale(1); }
    to   { transform: translate3d(5%, -6%, 0) rotate(2deg) scale(1.06); }
}

/* Vollflächige Bildebene (Foto als Textur hinter dunklen Sektionen) */
.fx--photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .14;
    filter: grayscale(.35) saturate(.8);
    transform-origin: 55% 45%;
    animation: gm-kenburns 38s ease-in-out infinite alternate;
}
.fx--photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(26, 31, 43, .55) 0%, rgba(26, 31, 43, .10) 55%, rgba(74, 159, 216, .18) 100%);
}
@keyframes gm-kenburns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.17) translate3d(-2%, -2.5%, 0); }
}

/* --- Parallax-Feinschliff (per JS gesteuert, rein optional) --------------- */
.fx[data-parallax] {
    top: -48px; bottom: -48px;
    transform: translate3d(0, var(--fx-shift, 0px), 0);
}

/* --- Nur sichtbare Sektionen animieren (spart CPU und Akku) --------------- */
.js-fx .fx::before,
.js-fx .fx::after,
.js-fx .fx img,
.js-fx .team-photo::before,
.js-fx .strip__media img { animation-play-state: paused; }
.js-fx .fx-live .fx::before,
.js-fx .fx-live .fx::after,
.js-fx .fx-live .fx img,
.js-fx .fx-live .team-photo::before,
.js-fx .fx-live .strip__media img { animation-play-state: running; }

/* --- Heller Hero: Effekte dezenter halten -------------------------------- */
.hero--light .fx--aurora::before { opacity: .55; }
.hero--light .fx--aurora::after { opacity: .5; }

/* --- Abschaltung für Nutzer mit reduzierter Bewegung ---------------------- */
@media (prefers-reduced-motion: reduce) {
    .fx *,
    .fx::before,
    .fx::after { animation: none !important; }
    .fx--beam { display: none; }
    .fx[data-parallax] { transform: none; }
}
@media (max-width: 720px) {
    .fx--rings::after { display: none; }
}

/* ==========================================================================
   TEAM-FOTOS · runder Look mit rotierendem Marken-Ring (wie bisher live)
   ========================================================================== */
.team-photo {
    position: relative;
    width: clamp(148px, 15vw, 184px);
    aspect-ratio: 1 / 1;
    margin: 0 auto 1.35rem;
    border-radius: 50%;
}
.team-photo::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #4A9FD8, #1A1F2B 30%, #00A86B 58%, #4A9FD8 100%);
    animation: gm-spin 9s linear infinite;
}
.team-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 22%;
    border: 4px solid var(--color-card);
    box-shadow: 0 12px 30px rgba(26, 31, 43, .18);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.card:hover .team-photo img,
.team-card:hover .team-photo img { transform: scale(1.05); }
.section--alt .team-photo img { border-color: var(--color-card); }
@media (prefers-reduced-motion: reduce) {
    .team-photo::before { animation: none; }
}

/* Kleine Team-Runde (z. B. Foto & Video, Hero-Vertrauenszeile) */
.team-photo--sm { width: clamp(104px, 11vw, 128px); margin-bottom: 1rem; }
.team-photo--sm::before { inset: -4px; }
.team-photo--sm img { border-width: 3px; }

/* ==========================================================================
   BILD-BAUSTEINE · Ergänzungen für Unterseiten
   ========================================================================== */
/* Gerahmtes Browser-Mockup für Screenshots/Reports */
.frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
.frame__bar {
    display: flex; align-items: center; gap: .4rem;
    padding: .7rem .9rem;
    background: #F6F9FC;
    border-bottom: 1px solid var(--color-border);
}
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D7DEE7; }
.frame__bar i:nth-child(1) { background: #FF5F57; }
.frame__bar i:nth-child(2) { background: #FEBC2E; }
.frame__bar i:nth-child(3) { background: #28C840; }
.frame__url {
    margin-left: .5rem; font-size: .72rem; color: var(--color-text-muted);
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 999px; padding: .12rem .7rem;
}
.frame img { display: block; width: 100%; height: auto; }
.frame--tilt { transform: rotate(-1.2deg); transition: transform var(--transition-base); }
.frame--tilt:hover { transform: rotate(0deg) translateY(-4px); }

/* Zwei versetzte Report-Karten (wie im Hero der Startseite) */
.report-stack {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 1.25rem 0 1.25rem 10%;
}
/* Die Breiten stehen bewusst auf den Modifier-Selektoren mit img davor:
   sonst gewinnt .media-split img { width:100% } und beide Karten werden
   gleich breit – die hintere Karte würde aus dem Rahmen laufen. */
.report-stack img {
    display: block; height: auto;
    border-radius: 14px; background: #fff;
    box-shadow: 0 26px 60px rgba(26, 31, 43, .20), 0 2px 8px rgba(26, 31, 43, .08);
}
/* Die Karten sind eigens für diese Anzeigegröße entworfen und werden
   deshalb vollständig gezeigt – kein Zuschnitt, nichts abgeschnitten. */
.report-stack img.report-stack__back {
    position: absolute; left: -13%; top: 10%; width: 60%; height: auto;
    transform: rotate(-3.5deg); opacity: .72; filter: saturate(.7); z-index: 1;
}
.report-stack img.report-stack__front {
    position: relative; width: 86%; margin-left: auto; height: auto;
    transform: rotate(1.2deg); z-index: 2;
}
@media (max-width: 980px) {
    .report-stack { padding: 1rem 3% 1rem 12%; }
    .report-stack img.report-stack__back { left: -5%; width: 50%; }
}


/* Bild-Band über die volle Breite (Trennsektion zwischen Inhalten) */
.strip {
    position: relative;
    min-height: clamp(220px, 30vw, 380px);
    display: grid; place-items: center;
    overflow: hidden;
    color: #fff;
}
.strip__media { position: absolute; inset: 0; }
.strip__media img { width: 100%; height: 100%; object-fit: cover; animation: gm-kenburns 34s ease-in-out infinite alternate; }
.strip__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(26,31,43,.88) 0%, rgba(26,31,43,.70) 55%, rgba(20,60,95,.72) 100%); }
.strip__inner { position: relative; z-index: 1; text-align: center; padding: clamp(2rem, 5vw, 3.5rem) var(--content-padding); max-width: 820px; }
.strip__inner h2, .strip__inner p { color: #fff; }
.strip__inner p { color: rgba(255,255,255,.93); margin-top: .75rem; }
@media (prefers-reduced-motion: reduce) { .strip__media img { animation: none; } }

/* Zwei Team-Fotos nebeneinander (Foto & Video) */
.team-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.team-duo figure { margin: 0; text-align: center; }
.team-duo .team-photo { margin-bottom: .75rem; }
.team-duo figcaption strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.team-duo figcaption span { display: block; font-size: .78rem; color: var(--color-text-muted); line-height: 1.4; margin-top: .15rem; }
@media (max-width: 420px) { .team-duo { grid-template-columns: 1fr; } }

/* Screenshot/Dashboard-Abbildung ohne zusätzlichen Rahmen */
.media-split .shot,
.shot {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 60px rgba(26, 31, 43, .16), 0 2px 8px rgba(26, 31, 43, .06);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s;
}
.shot--tilt { transform: rotate(-1deg); }
.shot--tilt:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 32px 80px rgba(26, 31, 43, .2); }
.media-note { font-size: .78rem; color: var(--color-text-muted); margin-top: 1rem; }
.media-split .eyebrow { margin-bottom: .75rem; }
.media-split h2 { margin-bottom: 1rem; }
.media-split p { color: var(--color-text-muted); margin-bottom: 1rem; }
.media-split .check-list { margin: 1.25rem 0 1.75rem; }
.section--dark .media-note { color: var(--color-text-inverse-muted); }

/* --- Eigenes Band für die Report-/Dashboard-Sektionen ---------------------
   Damit heben sie sich immer von den Nachbarsektionen ab – egal, ob davor
   oder danach eine helle oder eine .section--alt-Sektion steht.            */
.section--tint {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #EDF3FA 38%, #E7EFF8 62%, #FFFFFF 100%);
    border-top: 1px solid rgba(74, 159, 216, .12);
    border-bottom: 1px solid rgba(74, 159, 216, .12);
}

/* Standort-Karten (SEO-Seite) */
.locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.location {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 2.5vw, 2rem);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.location:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.location__city {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: .6rem;
}
.location__city::after {
    content: ''; display: block; width: 34px; height: 2px;
    background: var(--color-accent); margin-top: .6rem;
}
.location p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: 1rem; }
@media (max-width: 860px) { .locations { grid-template-columns: 1fr; } }

/* Zweispalter nicht über die ganze Bildschirmbreite auseinanderziehen –
   sonst stehen Bild und Text auf großen Monitoren beziehungslos weit auseinander. */
.media-split { max-width: 1280px; margin-left: auto; margin-right: auto; }
.media-split__media img { margin-left: auto; margin-right: auto; }

/* --- Netzwerk-Grafik als ruhig treibende Hintergrund-Textur --------------
   Die Grafik kommt über --net am Element; ohne Stylesheet bleibt die
   Ebene leer und es kann kein Bild in den Textfluss rutschen.            */
.fx--net::before {
    content: '';
    position: absolute;
    top: -18%; right: -14%;
    width: min(1180px, 88%);
    aspect-ratio: 3 / 2;
    background-image: var(--net);
    background-size: cover;
    background-position: center;
    opacity: .22;
    -webkit-mask-image: radial-gradient(58% 62% at 58% 48%, #000 24%, transparent 78%);
    mask-image: radial-gradient(58% 62% at 58% 48%, #000 24%, transparent 78%);
    animation: gm-net 34s ease-in-out infinite alternate;
}
.section--dark .fx--net::before,
.section--navy .fx--net::before { opacity: .16; }
@keyframes gm-net {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-4%, 3%, 0) scale(1.09); }
}
@media (max-width: 720px) { .fx--net::before { opacity: .18; } }

/* Bildband als Kollage – das Bild ist bereits abgedunkelt, daher hier ein
   leichterer Schleier als beim Einzelfoto. */
.strip--collage .strip__media::after {
    background: linear-gradient(115deg, rgba(14, 20, 30, .78) 0%, rgba(14, 20, 30, .52) 50%, rgba(20, 60, 95, .58) 100%);
}
.strip--collage .strip__media img { animation-duration: 46s; }

/* Persönlicher Ansprechpartner-Block */
.person {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}
.person__photo .team-photo { width: clamp(180px, 20vw, 240px); margin: 0; }
.person h2 { margin-bottom: 1rem; }
.person p { color: var(--color-text-muted); margin-bottom: 1rem; }
.person__sign {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary) !important;
    margin-top: 1.25rem;
}
.person__sign span {
    display: block;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: .2rem;
}
@media (max-width: 720px) {
    .person { grid-template-columns: 1fr; text-align: center; }
    .person__photo .team-photo { margin: 0 auto; }
    .person .hero__actions { justify-content: center; }
}

/* ==========================================================================
   Hinweis unter den Google-Bewertungen: „so etwas gibt es auch für Sie"
   Liegt bewusst IN der Bewertungs-Sektion – erscheint also nur, wenn das
   Widget wirklich geladen hat. Kein Widget, kein Werbeblock.
   ========================================================================== */
.review-offer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    max-width: 1180px;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.75rem);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.review-offer::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #4285F4, #34A853 34%, #FBBC05 67%, #EA4335);
}
.review-offer__mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding-left: .5rem;
}
.review-offer__mark svg { width: 44px; height: 44px; }
.review-offer__stars { color: #FBBC04; letter-spacing: .1em; font-size: .95rem; }
.review-offer__body .eyebrow { margin-bottom: .5rem; }
.review-offer__body h3 {
    font-size: var(--text-xl);
    margin-bottom: .6rem;
}
.review-offer__body p { color: var(--color-text-muted); margin-bottom: 1rem; }
.review-offer__list { list-style: none; display: grid; gap: .45rem; }
.review-offer__list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.5;
}
.review-offer__list li::before {
    content: '✓';
    position: absolute; left: 0; top: 0;
    color: var(--color-success);
    font-weight: 700;
}
.review-offer__action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    text-align: center;
    max-width: 260px;
}
.review-offer__action .btn { justify-content: center; }
.review-offer__note {
    font-size: .78rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}
@media (max-width: 980px) {
    .review-offer { grid-template-columns: auto minmax(0, 1fr); }
    .review-offer__action { grid-column: 1 / -1; max-width: none; align-items: center; }
    .review-offer__action .btn { width: auto; }
}
@media (max-width: 620px) {
    .review-offer { grid-template-columns: 1fr; text-align: center; }
    .review-offer__mark { flex-direction: row; justify-content: center; padding-left: 0; }
    .review-offer__list li { text-align: left; }
}

/* Referenz-Kacheln in der Vierer-Reihe: kompakter, damit vier nebeneinander
   nicht überladen wirken. */
.refs-compact { gap: 1.15rem; }
.refs-compact .card { padding: 1.25rem; }
.refs-compact .card h3 { font-size: var(--text-base); margin-bottom: .35rem; }
.refs-compact .card p { font-size: var(--text-sm); line-height: 1.55; }
.refs-compact .card .eyebrow { font-size: .72rem; letter-spacing: .14em; }
.refs-compact .card-link { font-size: var(--text-sm); }
@media (max-width: 1200px) { .grid--4.refs-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .refs-compact { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Allgemeines Kontaktformular (Web3Forms)
   --------------------------------------------------------------- */
.contact-form-wrap {
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 900px) { .contact-form-wrap { grid-template-columns: 1fr; } }

.contact-form {
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(26, 31, 43, .08);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
}
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .contact-form .cf-row { grid-template-columns: 1fr; } }

.contact-form .cf-field { margin-bottom: 1.15rem; }
.contact-form label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: .4rem;
    color: var(--color-primary);
}
.contact-form label .req { color: var(--color-accent); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: .85rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(191, 141, 62, .16);
}
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) { border-color: #D64545; }

.contact-form .cf-consent { display: flex; align-items: flex-start; gap: .7rem; margin: 1.25rem 0 1.5rem; }
.contact-form .cf-consent input[type="checkbox"] {
    accent-color: var(--color-accent);
    width: 20px; height: 20px; margin-top: .15rem; flex: 0 0 auto;
}
.contact-form .cf-consent span { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.contact-form .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { width: 100%; justify-content: center; }
.contact-form .cf-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 1rem; text-align: center; }
.contact-form .cf-status { margin-top: 1rem; font-size: var(--text-sm); font-weight: 600; text-align: center; }
.contact-form .cf-status[data-state="err"] { color: #B03030; }
.contact-form .cf-status[data-state="ok"] { color: var(--color-success, #2E7D5B); }

.contact-aside { align-self: start; }
.contact-aside h3 { font-size: var(--text-xl); margin-bottom: 1rem; }
.contact-aside .check-list li { color: var(--color-text-muted); }
.contact-aside .contact-aside__direct {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: .55rem;
}
.contact-aside .contact-aside__direct a { font-weight: 600; }

.contact-aside.card:hover { transform: none; box-shadow: var(--shadow-sm); }

/* Touch-Bedienung: Direktkontakt-Links im Kontaktbereich groß genug antippbar */
@media (hover: none) {
    .contact-aside .contact-aside__direct a { display: block; padding: .35rem 0; }
    .contact-form .cf-consent input[type="checkbox"] { width: 24px; height: 24px; }
}

/* Wortmarke im Fußbereich */
.footer-logo {
    width: auto;
    max-width: 260px;
    height: auto;
    max-height: 46px;
    margin-bottom: 1rem;
}