/* ============================================================================
 * TGS ELEKTROANLAGEN – Master Stylesheet (Rev 3)
 * Cyan #00b0f0 | Navy #0A2540 | Signal-Rot #dc2626
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 1. Design-Tokens
 * -------------------------------------------------------------------------- */
:root {
    --color-primary:       #00b0f0;
    --color-primary-soft:  #5ccdf5;
    --color-primary-deep:  #0088c4;
    --color-primary-dark:  #006898;
    --color-secondary:     #0A2540;
    --color-secondary-2:   #0f3358;
    --color-accent:        #D97706;
    --color-accent-soft:   #F6AD55;
    --color-alarm:         #dc2626;
    --color-alarm-soft:    #fca5a5;
    --color-alarm-deep:    #991b1b;
    --color-ok:            #22c55e;
    --color-magenta:       #db2777;

    --color-bg:            #FFFFFF;
    --color-bg-alt:        #F7FAFC;
    --color-bg-dark:       #081a30;
    /* Sanftes TGS-Blau: Zielfarbe des Hero->Content-Verlaufs (statt Weiß) */
    --color-hero-blue:     #d6eaf8;
    --color-ink:           #0A2540;
    /* Schrift auf hellen Button-Flächen (Hero-CTAs): bewusst Schwarz statt
       Navy – auf Cyan und Weiß der maximal mögliche Kontrast. */
    --color-ink-deep:      #000000;
    --color-muted:         #576c88;
    --color-line:          #e3ecf4;

    --font-sans: 'Albert Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    --fs-xs:   0.8125rem;
    --fs-sm:   0.9375rem;
    --fs-base: 1.0625rem;
    --fs-md:   1.25rem;
    --fs-lg:   1.625rem;
    --fs-xl:   2.25rem;
    --fs-2xl:  clamp(2.5rem, 4.5vw + 1rem, 5.25rem);
    --fs-3xl:  clamp(3rem, 6vw + 1rem, 7rem);

    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 22px;

    --shadow-soft: 0 10px 40px -18px rgba(10, 37, 64, 0.25);
    --shadow-elev: 0 30px 70px -28px rgba(10, 37, 64, 0.45);

    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-snap:   cubic-bezier(0.5, 0, 0.1, 1);

    --content: 1240px;
}

/* ----------------------------------------------------------------------------
 * 2. Reset & Base
 * -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body.noScroll { overflow: hidden; }

img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, textarea, select { font: inherit; }
address { font-style: normal; }

.skipLink {
    position: absolute; top: -999px; left: 0; z-index: 9999;
    background: var(--color-secondary); color: #fff; padding: .75rem 1rem;
}
.skipLink:focus { top: 0; }

.container {
    width: 100%;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ----------------------------------------------------------------------------
 * 3. Typografie
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 { margin: 0 0 var(--space-md); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--color-secondary); }
h1 { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-md); max-width: 64ch; }

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: .35rem .75rem;
    border: 1px solid currentColor;
    border-radius: 99px;
}
.eyebrow::before {
    content: ""; display: inline-block; width: 6px; height: 6px;
    background: currentColor; border-radius: 50%;
    animation: pulseDot 1.8s ease-in-out infinite;
}
.eyebrow--light { color: var(--color-accent-soft); }
.eyebrow--alarm { color: var(--color-alarm); }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.6); } }

.lead { font-size: var(--fs-md); color: var(--color-muted); max-width: 58ch; }

/* ----------------------------------------------------------------------------
 * 4. Electric Links
 * -------------------------------------------------------------------------- */
a { color: var(--color-primary-deep); text-decoration: none; position: relative; transition: color .2s ease; }

.electricLink {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    --hoverTime: 0;
    --shake: calc(var(--hoverTime) * 1.4px);
}
.electricLink::before {
    content: "";
    position: absolute; inset: -4px -8px;
    border-radius: 8px;
    background: radial-gradient(60% 140% at 50% 50%, rgba(0,176,240,0.45), rgba(0,176,240,0) 70%);
    opacity: 0;
    filter: blur(6px);
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: -1;
}
.electricLink:hover {
    color: var(--color-primary-deep);
    text-shadow:
        calc(var(--shake) * 1)   0 0 rgba(0,176,240,0.55),
        calc(var(--shake) * -1)  0 0 rgba(255,0,120,0.35);
    animation: electroShake .08s linear infinite;
}
.electricLink:hover::before { opacity: 1; animation: electroGlow 1.4s ease-in-out infinite; }

@keyframes electroShake {
    0%   { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * 0.4))  skew(0.05deg); }
    25%  { transform: translate(calc(var(--shake) * 0.8), calc(var(--shake) * -0.5)) skew(-0.1deg); }
    50%  { transform: translate(calc(var(--shake) * -0.6), calc(var(--shake) * 0.2)) skew(0.08deg); }
    75%  { transform: translate(calc(var(--shake) * 1),    calc(var(--shake) * -0.3)) skew(-0.05deg); }
    100% { transform: translate(calc(var(--shake) * -1),   calc(var(--shake) * 0.4)) skew(0.05deg); }
}
@keyframes electroGlow {
    0%,100% { opacity: .85; filter: blur(6px); }
    50%     { opacity: 1;   filter: blur(3px) brightness(1.2); }
}

/* ----------------------------------------------------------------------------
 * 5. Buttons
 * -------------------------------------------------------------------------- */
.btn {
    --bg: var(--color-secondary);
    --fg: #fff;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .9rem 1.5rem;
    background: var(--bg);
    color: var(--fg);
    font-weight: 600;
    border-radius: 999px;
    transition: transform .25s var(--ease-spring), box-shadow .25s, background .25s;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-elev); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; }

.btn--primary  { --bg: var(--color-primary); --fg: var(--color-secondary); }
.btn--ghost    { --bg: transparent; --fg: var(--color-secondary); border: 1.5px solid currentColor; }
.btn--alarm    { --bg: var(--color-alarm); --fg: #fff; font-weight: 800; letter-spacing: -.01em; }
.btn--alarm:hover { --bg: var(--color-alarm-deep); }
.btn--ghostLight { color: #fff; border: 1.5px solid rgba(255,255,255,.3); background: transparent; }
.btn--ghostLight:hover { background: rgba(255,255,255,.08); }

.btn::after {
    content: ""; position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.35), transparent);
    transition: left .7s var(--ease-snap);
}
.btn:hover::after { left: 140%; }

/* ============================================================================
 * 6. HEADER – Premium mit echtem Blitz-Foto, feinen Technik-Linien
 * ========================================================================== */
.siteHeader { position: relative; isolation: isolate; }

/* 6a. Hero-Bereich ------------------------------------------------------- */
.siteHeader__hero {
    position: relative;
    /* Fullscreen-Hero: füllt den ersten Viewport komplett aus.
       svh für iOS/Mobile, damit die Adressleiste nicht abschneidet. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background: #0A2540; /* Fallback */
}

/* Hintergrund-Foto (Blitz über blauem Himmel) */
.siteHeader__photo {
    position: absolute;
    inset: 0;
    background-image: url('../img/header-lightning.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
    /* Leichter Color-Shift, damit das Foto besser in unser Brand-Cyan passt.
       Die Blitze im Foto "zünden": eine kurze Helligkeits-/Kontrast-Spitze
       lässt die Blitzadern für einen Sekundenbruchteil aufflammen (wie ein
       echter Einschlag die Szene erhellt). §18 (reduced-motion) friert die
       Animation auf den Basiswert = kein Blitzen. */
    filter: saturate(1.1) contrast(1.05);
    animation: heroBoltFlare 7s ease-out 2s infinite;
}
@keyframes heroBoltFlare {
    0%, 88%, 100% { filter: saturate(1.1)  contrast(1.05) brightness(1); }
    89%           { filter: saturate(1.35) contrast(1.30) brightness(1.7); }  /* Blitz 1 */
    90.5%         { filter: saturate(1.12) contrast(1.08) brightness(1.08); } /* Abfall */
    91.5%         { filter: saturate(1.4)  contrast(1.35) brightness(1.9); }  /* Blitz 2 (heller) */
    93%           { filter: saturate(1.12) contrast(1.10) brightness(1.1); }
    94%           { filter: saturate(1.28) contrast(1.24) brightness(1.45); } /* Nachzucken */
    95.5%         { filter: saturate(1.1)  contrast(1.05) brightness(1); }
}
/* Abdunklung + leichte Vignette für Lesbarkeit */
.siteHeader__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(10,37,64,0) 0%, rgba(10,37,64,.35) 90%),
        linear-gradient(180deg,
            rgba(10,37,64,.15) 0%,
            rgba(10,37,64,0) 25%,
            rgba(10,37,64,0) 70%,
            rgba(10,37,64,.06) 100%);
}
/* Zusätzlicher Lichtschein zum Blitz (synchron zu heroBoltFlare): `screen`-
   Blend legt einen weichen Aufhell-Halo genau auf die Blitzbahn. Der sichtbare
   Kern-Effekt kommt aber aus der Helligkeitsspitze des Fotos oben – dieser
   Overlay verstärkt nur. ~1×/7 s, weit unter der Foto-Sensibilitätsschwelle;
   prefers-reduced-motion (§18) friert alles ein → gar kein Blitzen. */
.siteHeader__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    /* Licht-Aufblitzen genau entlang der echten Blitzbahn im Foto:
       Ursprung oben-mitte + heller Einschlag unten-rechts. */
    background:
        radial-gradient(60% 55% at 50% 12%,  rgba(233,248,255,.95) 0%, rgba(190,230,255,.25) 45%, transparent 72%),
        radial-gradient(55% 60% at 90% 82%,  rgba(214,242,255,.9)  0%, rgba(150,215,255,.22) 40%, transparent 66%),
        linear-gradient(180deg, rgba(210,238,255,.25) 0%, transparent 55%);
    /* gleiche Taktung wie heroBoltFlare, damit Blitz + Lichtschein synchron sind */
    animation: heroLightning 7s ease-out 2s infinite;
}
@keyframes heroLightning {
    0%, 88%, 100% { opacity: 0; }
    89%           { opacity: .7; }    /* Blitz 1 */
    90.5%         { opacity: .1; }     /* Dunkelpause */
    91.5%         { opacity: .85; }    /* Blitz 2 */
    93%           { opacity: .08; }
    94%           { opacity: .45; }    /* Nachzucken */
    95.5%         { opacity: 0; }      /* Abklang */
}

/* 6b. Feine Technik-Linien ------------------------------------------------ */
.siteHeader__techOverlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Oberer Streifen – wie ein Platinen-Referenzrand */
.siteHeader__topBand {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 38px;
    background: rgba(10, 37, 64, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    pointer-events: auto;
}
.siteHeader__topBandInner {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
}
.siteHeader__topBandMark {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.siteHeader__topBandMark--muted { color: rgba(255,255,255,.68); }
.siteHeader__topBandSpacer { flex: 1; min-width: 12px; }
.siteHeader__topBandDot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    flex-shrink: 0;
}
.siteHeader__topBandDot--ok {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,.7);
    animation: pulseDot 2.4s ease-in-out infinite;
}
@media (max-width: 720px) {
    .siteHeader__topBandMark:nth-of-type(2),
    .siteHeader__topBandMark:nth-of-type(3) { display: none; }
}

/* Leiterbahn-SVG oben */
.siteHeader__circuit {
    position: absolute;
    top: 38px;
    left: 0; right: 0;
    width: 100%;
    height: 120px;
    opacity: .55;
}

/* Feines Gitterraster über dem gesamten Hero */
.siteHeader__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, #000 30%, transparent 85%);
}

/* Kantenlicht-Streifen links & rechts (sehr dezent) */
.siteHeader__edgeLight {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0,176,240,.3) 20%,
        rgba(0,176,240,.5) 50%,
        rgba(0,176,240,.3) 80%,
        transparent 100%);
}
.siteHeader__edgeLight--left  { left: clamp(12px, 3vw, 32px); }
.siteHeader__edgeLight--right { right: clamp(12px, 3vw, 32px); }

/* 6c. Hero-Navbar (unter dem TopBand, mit Logo-Mini + Actions) ----------- */
.heroNavbar {
    position: relative;
    z-index: 4;
    margin-top: 38px; /* unterhalb von topBand */
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(10,37,64,.15), transparent);
}
.heroNavbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}
.heroNavbar__logoMini {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(0,176,240,.4));
    transition: filter .3s;
}
.heroNavbar__link:hover .heroNavbar__logoMini {
    filter: drop-shadow(0 0 16px rgba(0,176,240,.7));
}
.heroNavbar__actions { display: flex; align-items: center; gap: .6rem; }

.heroNavbar__phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.95);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, transform .25s;
}
.heroNavbar__phone svg { width: 14px; height: 14px; }
.heroNavbar__phone:hover {
    background: rgba(0,176,240,.15);
    border-color: rgba(0,176,240,.5);
    transform: translateY(-1px);
    color: #fff;
}
@media (max-width: 560px) {
    .heroNavbar__phone span { display: none; }
    .heroNavbar__phone { padding: .6rem; }
}

/* 6d. Hero-Content: Logo + Claim ----------------------------------------- */
.siteHeader__content {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Weniger Bottom-Padding, damit Logo mittiger sitzt.
       Der Fade unten geht jetzt nicht mehr bis ins Content-Territorium. */
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem) clamp(6rem, 12vw, 10rem);
}

.siteHeader__kicker {
    display: inline-block;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.2);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    position: relative;
}
.siteHeader__kicker::before,
.siteHeader__kicker::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 4px; height: 4px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
}
.siteHeader__kicker::before { left: -10px; }
.siteHeader__kicker::after  { right: -10px; }

.siteHeader__brand {
    display: block;
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.siteHeader__logo {
    width: auto;
    max-width: min(94%, 820px);
    height: clamp(120px, 15vw, 240px);
    object-fit: contain;
    margin: 0 auto;
    /* Kein Drop-Shadow – das PNG hat bereits weiche Alpha-Kanten,
       zusätzliche Shadows erzeugen beim Skalieren sichtbare Ränder */
}

.siteHeader__claim {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    font-weight: 400;
    color: rgba(255,255,255,.9);
    letter-spacing: .05em;
    line-height: 1.55;
}

/* task19: CTA-Zeile im Hero ------------------------------------------------
   Der Hero war bisher rein repräsentativ – ohne Handlungsaufforderung und ohne
   sichtbaren Hinweis, dass unterhalb noch Inhalt folgt. Beides ergänzt dieser
   Block: ein Primär-Button in den Kontaktweg und ein Button, der weich in den
   Content springt (#main, html { scroll-behavior: smooth }). */
.siteHeader__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.siteHeader__cta {
    padding: 1.05rem 1.95rem;
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: -.005em;
    /* Kräftiger Schlagschatten statt Transparenz: löst die Buttons sauber vom
       Blitzfoto ab, ohne die Fläche aufzuweichen. */
    box-shadow: 0 18px 34px -16px rgba(4,15,28,.9);
}
.siteHeader__cta:hover { box-shadow: 0 24px 42px -16px rgba(4,15,28,.95); }
.siteHeader__cta svg { width: 1.15em; height: 1.15em; stroke-width: 2.6; }
/* Der helle Glanz-Sweep von .btn::after liegt über der Schrift und würde
   sie beim Hover kurz aufhellen – auf den hellen Hero-Flächen hinter den
   Text legen, damit die Beschriftung durchgehend satt dunkel bleibt. */
.siteHeader__cta::after { z-index: -1; }

/* Beide Hero-Buttons sind DECKEND – wie alle anderen Buttons der Seite.
   Vorher war der zweite halbtransparentes Navy mit 50-%-Rand und ging auf dem
   Foto unter. Jetzt: Cyan = Primäraktion, Weiß = Sekundäraktion (gleiche
   Logik wie der Menü-Button direkt darüber im selben Hero). */
.siteHeader__cta.btn--primary        { --bg: var(--color-primary); --fg: var(--color-ink-deep); }
.siteHeader__cta.btn--primary:hover  { --bg: var(--color-primary-soft); }

.siteHeader__cta--light        { --bg: #ffffff; --fg: var(--color-ink-deep); }
.siteHeader__cta--light:hover  { --bg: var(--color-hero-blue); }

/* Scroll-Indikator unten: jetzt ein echter, klickbarer Sprung in den Inhalt */
.siteHeader__scrollCta {
    position: absolute;
    bottom: clamp(2rem, 4.5vw, 3.25rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    z-index: 6;
    color: var(--color-ink-deep);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    /* Der Indikator liegt im hellen Fade-Auslauf – dunkle Schrift mit hellem
       Halo bleibt dort sicher lesbar. */
    text-shadow: 0 1px 2px rgba(255,255,255,.75);
}
.siteHeader__scrollCtaIcon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    border: 1.5px solid rgba(10,37,64,.12);
    color: var(--color-primary-deep);
    box-shadow: 0 12px 28px -12px rgba(10,37,64,.65);
    transition: transform .25s var(--ease-spring), box-shadow .25s, background .25s;
    animation: scrollCtaBob 2.2s ease-in-out infinite;
}
.siteHeader__scrollCtaIcon svg { width: 22px; height: 22px; }
.siteHeader__scrollCta:hover .siteHeader__scrollCtaIcon,
.siteHeader__scrollCta:focus-visible .siteHeader__scrollCtaIcon {
    background: var(--color-primary);
    color: var(--color-ink-deep);
    transform: translateY(3px);
    box-shadow: 0 16px 34px -12px rgba(0,176,240,.8);
}
@keyframes scrollCtaBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
@media (max-width: 640px) {
    .siteHeader__scrollCtaLabel { display: none; }
    .siteHeader__cta { padding: .9rem 1.45rem; font-size: .95rem; }
}
/* Sehr flache Viewports: Indikator bleibt sichtbar (er ist ja der Hinweis,
   dass es weitergeht), rückt aber näher an den Rand und wird kompakter. */
@media (max-height: 680px) {
    .siteHeader__scrollCta { bottom: 1.1rem; gap: .35rem; }
    .siteHeader__scrollCtaLabel { display: none; }
    .siteHeader__scrollCtaIcon { width: 38px; height: 38px; }
    .siteHeader__scrollCtaIcon svg { width: 18px; height: 18px; }
    .siteHeader__content { padding-bottom: clamp(4rem, 9vw, 7rem); }
}

/* 6e. Weicher Übergang zum Content (Wohntraum-Stil) --------------------- */
.siteHeader__fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    /* Sehr langer, weicher Verlauf ins Weiß – wie bei wohntraum-weiden.de.
       Kein harter Übergang/Trennlinie mehr zum Content. */
    height: clamp(360px, 52vh, 620px);
    z-index: 5;
    /* Der Verlauf endet in der TATSÄCHLICHEN Content-Farbe
       (--color-bg-alt = #F7FAFC), NICHT in reinem Weiß.

       Ursache der sichtbaren "weißen Linie": Das Blitz-Foto hat unten rechts
       einen sehr hellen Glow (Helligkeit ~ Content-Farbe oder heller). Solange
       der Fade dort noch teil-transparent ist, scheint dieser helle Bereich
       durch und erzeugt am Content-Rand einen helleren Streifen neben den
       dunkleren (blauen) Spalten – das liest sich als Kante.

       Lösung: Die Deckkraft folgt einer Smoothstep-Kurve (3t²−2t³) und
       erreicht die VOLLE Content-Farbe bereits bei ~85 % – danach bleibt der
       untere Streifen komplett flach in #F7FAFC. Dadurch ist der gesamte
       Bereich direkt oberhalb des Contents einheitlich #F7FAFC (egal was im
       Foto dahinter liegt) und geht ohne jede Kante in die Section über. */
    background: linear-gradient(180deg,
        rgba(247,250,252,0)    0%,
        rgba(247,250,252,.04)  10%,
        rgba(247,250,252,.13)  20%,
        rgba(247,250,252,.27)  30%,
        rgba(247,250,252,.43)  40%,
        rgba(247,250,252,.60)  50%,
        rgba(247,250,252,.76)  60%,
        rgba(247,250,252,.89)  70%,
        rgba(247,250,252,.94)  75%,
        rgba(247,250,252,.98)  80%,
        rgb(247,250,252)       85%,
        rgb(247,250,252)       100%);
    pointer-events: none;
}

/* task12: Auf der Startseite gleitet der Hero NICHT ins Weiß, sondern sanft
   ins schöne TGS-Blau. Dadurch entsteht ein weicher Farbverlauf statt einer
   harten Kante zum Content (Vorbild: wohntraum-weiden.de). Der Verlauf ist
   länger und folgt einer weichen Kurve, sodass oben am Übergang kein harter
   Sprung mehr entsteht. Endfarbe = Content-Startfarbe (--color-hero-blue). */
.page--home .siteHeader__fade {
    height: clamp(420px, 58vh, 720px);
    background: linear-gradient(180deg,
        rgba(214,234,248,0)    0%,
        rgba(214,234,248,.05)  12%,
        rgba(214,234,248,.14)  24%,
        rgba(214,234,248,.28)  36%,
        rgba(214,234,248,.44)  48%,
        rgba(214,234,248,.61)  59%,
        rgba(214,234,248,.77)  69%,
        rgba(214,234,248,.89)  78%,
        rgba(214,234,248,.96)  85%,
        rgb(214,234,248)       91%,
        rgb(214,234,248)      100%);
}
/* Content-Fallbackfarbe auf der Startseite = dasselbe Blau, damit eine
   etwaige Sub-Pixel-Fuge nicht mehr weiß, sondern blau (= unsichtbar) ist. */
.page--home .main { background-color: var(--color-hero-blue); }

/* 6f. Menu-Button (wird auch in topBar genutzt) -------------------------- */
.menuBtn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.1rem .6rem .9rem;
    background: rgba(255,255,255,.95);
    color: var(--color-secondary);
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,.3);
    transition: background .25s, transform .25s var(--ease-spring), box-shadow .3s;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.4);
}
.menuBtn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,.5);
}
.menuBtn--compact { padding: .5rem .9rem .5rem .75rem; }

.menuBtn__lines {
    position: relative;
    width: 16px; height: 12px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}
.menuBtn__lines span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-primary-deep);
    border-radius: 2px;
    transition: width .3s;
}
.menuBtn__lines span:nth-child(2) { width: 70%; align-self: flex-end; }
.menuBtn:hover .menuBtn__lines span:nth-child(2) { width: 100%; }

/* 6g. Sticky TopBar (unverändert, nur leicht refined) ------------------- */
.topBar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 90;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(10,37,64,.08);
    transform: translateY(-100%);
    transition: transform .4s var(--ease-spring);
    box-shadow: 0 4px 20px -12px rgba(10,37,64,.3);
}
.topBar.isVisible { transform: translateY(0); }
.topBar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem clamp(1rem, 4vw, 2rem);
    min-height: 62px;
}
.topBar__brand img {
    height: 38px;
    width: auto;
    filter: none;
}
.topBar__actions { display: flex; gap: .5rem; align-items: center; }
.topBar__phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem;
    color: var(--color-secondary);
    font-weight: 700;
    font-size: var(--fs-sm);
    border-radius: 999px;
    transition: background .2s;
}
.topBar__phone:hover { background: rgba(0,176,240,.1); color: var(--color-primary-deep); }
.topBar__phone svg { width: 14px; height: 14px; color: var(--color-primary-deep); }
@media (max-width: 560px) {
    .topBar__phone span { display: none; }
}

/* Die alten emergency & hero-action Classes bleiben für andere Seiten */
.heroActions, .emergencyBtn, .emergencyBtn__led {
    /* Legacy — wurden vom alten Design verwendet, jetzt nicht mehr im Header */
}

/* ============================================================================
 * 7. MEGA-MENU – der Hauptmenü-Overlay
 * ========================================================================== */
.megaMenu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: #fff;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s var(--ease-spring), visibility .4s;
    overflow: hidden;
}
.megaMenu.isOpen {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.megaMenu__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, #1d4d82 0%, #0A2540 55%, #05152a 100%);
    z-index: 0;
}
.megaMenu__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,176,240,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,240,.08) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 90%);
}

.megaMenu__head {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem clamp(1rem, 4vw, 2rem);
    z-index: 2;
}
.megaMenu__brand img,
.megaMenu__brandFull {
    height: auto;
    width: auto;
    max-height: 58px;
    max-width: 280px;
    filter: drop-shadow(0 0 10px rgba(0,176,240,.5));
}
.megaMenu__close {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: grid; place-items: center;
    transition: background .2s, transform .2s, box-shadow .2s;
    border: 1px solid rgba(255,255,255,.15);
}
.megaMenu__close:hover {
    background: var(--color-alarm);
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 0 0 8px rgba(220,38,38,.2);
}
.megaMenu__close svg { width: 22px; height: 22px; }

.megaMenu__inner {
    position: relative;
    z-index: 2;
    max-width: var(--content);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem);
    height: calc(100% - 76px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.megaMenu__grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 900px) { .megaMenu__grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .megaMenu__grid-cards { grid-template-columns: 1fr; } }

/* Menu-Tiles mit Farbakzenten + Stagger-Animation */
.menuTile {
    --accent: var(--color-primary);
    position: relative;
    display: block;
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 1.5rem 1.5rem 1.75rem;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .5s var(--ease-spring), transform .5s var(--ease-spring),
                background .35s, border-color .35s, box-shadow .35s;
    transition-delay: calc(var(--idx, 1) * 60ms + 150ms);
}
/* Staffelung der Kacheln ohne Inline-Styles (CSP-konform) */
.megaMenu__grid-cards .menuTile:nth-child(1) { --idx: 1; }
.megaMenu__grid-cards .menuTile:nth-child(2) { --idx: 2; }
.megaMenu__grid-cards .menuTile:nth-child(3) { --idx: 3; }
.megaMenu__grid-cards .menuTile:nth-child(4) { --idx: 4; }
.megaMenu__grid-cards .menuTile:nth-child(5) { --idx: 5; }
.megaMenu__grid-cards .menuTile:nth-child(6) { --idx: 6; }
/* Kleine Layout-Utility statt Inline-Style (CSP-konform) */
.u-ml-sm { margin-left: .5rem; }
.megaMenu.isOpen .menuTile {
    opacity: 1;
    transform: translateY(0);
}
.menuTile::before {
    /* Farbiger Lichtstreifen links */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent);
    box-shadow: 0 0 20px var(--accent);
    transition: width .35s var(--ease-spring);
    z-index: 1;
}
.menuTile::after {
    /* Glow rechts unten bei Hover */
    content: "";
    position: absolute;
    right: -30%; bottom: -50%;
    width: 80%; aspect-ratio: 1;
    background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s;
    z-index: 0;
}
.menuTile:hover {
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.menuTile:hover::before { width: 8px; }
.menuTile:hover::after  { opacity: .25; }

.menuTile--cyan    { --accent: #00b0f0; }
.menuTile--blue    { --accent: #5ccdf5; }
.menuTile--orange  { --accent: #f59e0b; }
.menuTile--magenta { --accent: #db2777; }
.menuTile--green   { --accent: #22c55e; }
.menuTile--navy    { --accent: #64748b; }

.menuTile__num {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .15em;
    color: var(--accent);
    position: relative; z-index: 2;
}
.menuTile__icon {
    display: inline-flex;
    width: 56px; height: 56px;
    margin: .75rem 0 1rem;
    color: var(--accent);
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border-radius: 14px;
    align-items: center; justify-content: center;
    position: relative; z-index: 2;
    transition: transform .3s var(--ease-spring);
}
.menuTile:hover .menuTile__icon { transform: scale(1.08) rotate(-4deg); }
.menuTile__icon svg { width: 28px; height: 28px; }

.menuTile h3 {
    color: #fff;
    font-size: 1.35rem;
    margin: 0 0 .4rem;
    position: relative; z-index: 2;
}
.menuTile p {
    color: rgba(255,255,255,.8);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-md);
    position: relative; z-index: 2;
}
.menuTile__go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent);
    position: relative; z-index: 2;
    transition: gap .3s;
}
.menuTile__go svg { width: 16px; height: 16px; }
.menuTile:hover .menuTile__go { gap: .75rem; }

/* MegaMenu Footer */
.megaMenu__foot {
    margin-top: auto;
    padding-top: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.1);
    opacity: 0;
    transition: opacity .5s var(--ease-spring);
    transition-delay: 550ms;
}
.megaMenu.isOpen .megaMenu__foot { opacity: 1; }
.megaMenu__link {
    color: rgba(255,255,255,.8);
    font-size: var(--fs-sm);
}
.megaMenu__link:hover { color: #fff; }
.megaMenu__phone {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .03em;
}

/* ----------------------------------------------------------------------------
 * 8. HERO (Homepage) – ruhig, zentriert, der Header trägt jetzt die Dramatik
 * -------------------------------------------------------------------------- */
/* Content-Wrapper: schließt eine mögliche Sub-Pixel-Fuge zwischen Header und
   Content (die sonst das weiße body-Hintergrund durchblitzen ließe = "weiße
   Linie") und legt als Fallback die Content-Farbe unter den gesamten Content. */
.main {
    background-color: #f7fafc;
    margin-top: -1px;
}

.hero {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 7vw, 6.5rem);
    overflow: hidden;
    /* Startet exakt in der Fade-Endfarbe (--color-hero-blue = TGS-Blau) und
       bleibt am Übergang zunächst flach, damit direkt an der Nahtstelle KEIN
       zweiter Farbwechsel (und damit keine sichtbare Kante) entsteht. Erst
       danach läuft der Hintergrund ganz sanft nach Weiß aus. */
    background: linear-gradient(180deg,
        #d6eaf8 0%,
        #d6eaf8 14%,
        #e7f2fb 42%,
        #ffffff 78%,
        #ffffff 100%);
}
/* Sehr dezentes Raster als Textur */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(10,37,64,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,37,64,.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, #000 0%, transparent 80%);
    pointer-events: none;
}

.hero__container {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.hero__eyebrow { margin-bottom: var(--space-md); }
.hero__title {
    font-size: var(--fs-3xl);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 0 auto var(--space-lg);
    max-width: 14ch;
}
.hero__title span { color: var(--color-primary-deep); position: relative; white-space: nowrap; }
.hero__title span::after {
    content: ""; position: absolute; left: -4px; right: -4px; bottom: .04em; height: .28em;
    background: var(--color-primary); opacity: .25; z-index: -1;
    transform: skewX(-12deg);
}
.hero__sub {
    font-size: var(--fs-md);
    color: var(--color-muted);
    margin: 0 auto var(--space-xl);
    max-width: 52ch;
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.hero__meta {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    padding: var(--space-lg) 0;
    border-top: 1px dashed var(--color-line);
    border-bottom: 1px dashed var(--color-line);
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}
.hero__metaItem strong {
    display: block;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    color: var(--color-secondary);
    font-weight: 900;
    line-height: 1;
}
.hero__metaItem span {
    font-size: var(--fs-xs);
    color: var(--color-muted);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Google-Bewertungs-Badge im Hero (task17, ersetzt das frühere Marketing-Zitat).
   Verlinkt auf den Bewertungsblock #bewertungen weiter unten. */
.heroRating {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: var(--space-2xl) auto 0;
    padding: .85rem 1.4rem;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--color-ink);
    transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .35s;
}
.heroRating:hover,
.heroRating:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-elev);
    border-color: transparent;
}
.heroRating__brand { width: 22px; flex: 0 0 22px; }
.heroRating__brand svg { width: 100%; height: auto; }
.heroRating__score {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-secondary);
}
.heroRating__text {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

@media (max-width: 520px) {
    .heroRating { border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
    .heroRating__text { flex-basis: 100%; text-align: center; }
}

/* ----------------------------------------------------------------------------
 * 9. Sections
 * -------------------------------------------------------------------------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.section--alt { background: linear-gradient(180deg, rgba(0,176,240,.05) 0%, var(--color-bg-alt) 12%); }
.section--dark { background: var(--color-secondary); color: #d4e3ef; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.sectionHead { max-width: 760px; margin-bottom: var(--space-2xl); }
.sectionHead .eyebrow { margin-bottom: var(--space-md); }

/* ----------------------------------------------------------------------------
 * 10. Service-Karten (Kern der Homepage)
 * -------------------------------------------------------------------------- */
.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }

/* Variante fuer Seiten mit genau vier Karten: 2 Spalten x 2 Zeilen */
.services--duo { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .services--duo { grid-template-columns: 1fr; } }

.serviceCard {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .35s;
    display: flex; flex-direction: column;
    min-height: 420px;
}
.serviceCard::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(600px 200px at var(--mx,50%) var(--my,50%), rgba(0,176,240,.18), transparent 70%);
    opacity: 0; transition: opacity .4s;
    z-index: -1;
}
.serviceCard:hover { transform: translateY(-6px); box-shadow: var(--shadow-elev); border-color: transparent; }
.serviceCard:hover::before { opacity: 1; }

.serviceCard--dark {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.1);
    color: #d4e3ef;
}
.serviceCard--dark:hover { border-color: rgba(0,176,240,.4); background: rgba(255,255,255,.05); }
.section--dark .serviceCard--dark p { color: #c8dcee; }

.serviceCard__num {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--color-muted);
    letter-spacing: 0.15em;
    margin-bottom: var(--space-lg);
}

.serviceCard__icon {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,176,240,.12), rgba(0,176,240,.02));
    color: var(--color-primary-deep);
    margin-bottom: var(--space-lg);
    position: relative;
}
.serviceCard__icon::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 16px;
    border: 1px solid rgba(0,176,240,.3);
}
.serviceCard__icon--dark {
    background: linear-gradient(135deg, rgba(0,176,240,.18), rgba(0,176,240,.04));
    color: var(--color-primary);
}
.serviceCard__icon--dark::after { border-color: rgba(0,176,240,.4); }
.serviceCard__icon svg { width: 32px; height: 32px; }

.serviceCard h3 { font-size: 1.5rem; margin-bottom: var(--space-sm); }
.serviceCard p { color: var(--color-muted); margin-bottom: var(--space-lg); flex: 1; }

.cardLink {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600;
    color: var(--color-secondary);
    transition: gap .3s, color .2s;
    align-self: flex-start;
}
.cardLink:hover { gap: .9rem; color: var(--color-primary-deep); }
.cardLink::after { content: "→"; transition: transform .3s; }
.serviceCard--dark .cardLink { color: #fff; }

/* ============================================================================
 * 11. ALARM-BAR – flat red, kompakt, mit LED-Ping
 * ========================================================================== */
.alarmBar {
    background: var(--color-alarm);
    color: #fff;
    padding: clamp(1.75rem, 3vw, 2.25rem) 0;
    position: relative;
    overflow: hidden;
}
/* Dezentes diagonales Muster rechts */
.alarmBar::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 10px,
        rgba(0,0,0,.06) 10px 12px
    );
    pointer-events: none;
    opacity: .7;
}
/* Warnstreifen oben */
.alarmBar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #fbbf24 0 20px,
        #0A2540 20px 40px
    );
}

.alarmBar__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
}
@media (max-width: 900px) {
    .alarmBar__inner { grid-template-columns: auto 1fr; }
    .alarmBar__actions { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
    .alarmBar__inner { grid-template-columns: 1fr; text-align: center; }
    .alarmBar__led { margin: 0 auto; }
    .alarmBar__actions { justify-self: center; }
}

/* LED-Pulsring (kompakter als vorher) */
.alarmBar__led {
    position: relative;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.alarmBar__ledCore {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #fee2e2 40%, #ffffff 100%);
    box-shadow:
        0 0 0 3px rgba(255,255,255,.3),
        0 0 14px 4px rgba(255,255,255,.8);
    position: relative;
    z-index: 2;
    animation: alarmBeat 1.1s ease-in-out infinite;
}
@keyframes alarmBeat {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.18); }
}
.alarmBar__ledPing {
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.9);
    transform: translate(-50%,-50%);
    animation: alarmRing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.alarmBar__ledPing--1 { animation-delay: 0s; }
.alarmBar__ledPing--2 { animation-delay: .9s; }
@keyframes alarmRing {
    0%   { transform: translate(-50%,-50%) scale(1);   opacity: .95; }
    100% { transform: translate(-50%,-50%) scale(3.2); opacity: 0; }
}

/* Text-Block */
.alarmBar__text { min-width: 0; }
.alarmBar__kicker {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: rgba(255,255,255,.2);
    padding: .2rem .55rem;
    border-radius: 99px;
    margin-bottom: .4rem;
}
.alarmBar__title {
    color: #fff;
    margin: 0 0 .25rem;
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.alarmBar__desc {
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: var(--fs-sm);
    max-width: 56ch;
}

/* Phone-Button prominent rechts */
.alarmBar__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}
@media (max-width: 900px) { .alarmBar__actions { align-items: flex-start; } }
@media (max-width: 560px) { .alarmBar__actions { align-items: center; } }

.alarmBar__phone {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.25rem;
    background: #fff;
    color: var(--color-alarm);
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s var(--ease-spring), box-shadow .25s;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,.25);
}
.alarmBar__phone:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0,0,0,.35); }
.alarmBar__phone svg { width: 22px; height: 22px; }
.alarmBar__phone small { display: block; font-size: .7rem; color: #991b1b; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.alarmBar__phone strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; color: var(--color-alarm); }

.alarmBar__secondary {
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    opacity: .9;
    text-decoration: none;
    transition: opacity .2s, padding-right .3s;
}
.alarmBar__secondary:hover { opacity: 1; padding-right: .25rem; }

/* ============================================================================
 * 12. GRUPPEN-ÜBERBLICK – ruhig, sauber, mit Icon-Kopf
 * ========================================================================== */
.groupOverview {
    background:
        linear-gradient(180deg, #ffffff 0%, #f7fafc 50%, #e8f2fb 100%);
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem);
    position: relative;
}
.groupOverview::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(900px 500px at 50% 100%, rgba(0,176,240,.08), transparent 70%);
    pointer-events: none;
}
.groupOverview .container { position: relative; }

.groupGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
@media (max-width: 900px) { .groupGrid { grid-template-columns: 1fr; } }

.groupTile {
    --accent: var(--color-primary);
    --accent-soft: rgba(0,176,240,.12);
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform .4s var(--ease-spring), box-shadow .4s;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(10,37,64,.05);
}
.groupTile:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -20px rgba(10,37,64,.35);
}

/* Icon-Kopf der Karte (farbig, mit Pattern) */
.groupTile__visual {
    position: relative;
    display: grid;
    place-items: center;
    height: 140px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--color-primary-deep)) 100%);
    color: #fff;
    overflow: hidden;
}
.groupTile__visual::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.groupTile__visual svg {
    width: 64px; height: 64px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.25));
    transition: transform .4s var(--ease-spring);
}
.groupTile:hover .groupTile__visual svg { transform: scale(1.12) rotate(-4deg); }

/* Akzentfarben pro Tile */
.groupTile--main   { --accent: #0A2540; --accent-deep: #05152a; }
.groupTile--nova   { --accent: #db2777; --accent-deep: #9d174d; }
.groupTile--shield { --accent: #0088c4; --accent-deep: #006898; }
.groupTile--solar  { --accent: #f59e0b; --accent-deep: #b45309; }

/* Text-Körper */
.groupTile__badge {
    align-self: flex-start;
    margin: 1.25rem 1.5rem 0;
    padding: .3rem .7rem;
    background: rgba(10,37,64,.06);
    color: var(--color-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 99px;
}
.groupTile__title {
    margin: .75rem 1.5rem .35rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-secondary);
    letter-spacing: -.02em;
}
.groupTile__desc {
    margin: 0 1.5rem 1rem;
    font-size: var(--fs-sm);
    color: var(--color-muted);
    line-height: 1.55;
    flex: 1;
}
.groupTile__link {
    margin: 0 1.5rem 1.5rem;
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--accent);
    transition: letter-spacing .3s;
}
.groupTile:hover .groupTile__link { letter-spacing: .02em; }

/* ----------------------------------------------------------------------------
 * 13. Formulare
 * -------------------------------------------------------------------------- */
.formGrid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 700px) { .formGrid { grid-template-columns: 1fr; } }
.formFull { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.field input, .field textarea, .field select {
    padding: .9rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--color-ink);
    transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0,176,240,.15);
}
.field textarea { min-height: 140px; resize: vertical; }
.field--checkbox { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--checkbox input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.field--checkbox label { text-transform: none; letter-spacing: 0; color: var(--color-muted); font-weight: 400; font-size: var(--fs-sm); }

.formHoneypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; }

.formStatus { margin-top: var(--space-md); padding: .75rem 1rem; border-radius: var(--radius-md); display: none; font-size: var(--fs-sm); }
.formStatus.isOk { display: block; background: rgba(46,204,113,.12); color: #1a7f4b; border: 1px solid rgba(46,204,113,.3); }
.formStatus.isError { display: block; background: rgba(217,119,6,.12); color: #a0531a; border: 1px solid rgba(217,119,6,.3); }
.formStatus.isVisible { display: block; }

/* ============================================================================
 * 14. FOOTER – Chipkarten (Pins VERSTECKT) + 3 Spalten + Copyright
 * ========================================================================== */
.footer {
    margin-top: var(--space-3xl);
    background: var(--color-bg-alt);
}

/* 14a. Social-Media-Bereich (Premium-Karten) ----------------------------- */
.socialRow {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    border-bottom: 1px solid var(--color-line);
}
/* Deko-Linie bewusst entfernt – Übergang kommt bereits vom Abschnitt darüber */
.socialRow::before { display: none; }

.socialRow__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-2xl);
}
.socialRow__head .eyebrow { margin-bottom: var(--space-md); }
.socialRow__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: var(--space-sm);
}
.socialRow__sub {
    margin: 0 auto;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    max-width: 60ch;
}

.socialRow__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(.75rem, 1.5vw, 1rem);
    max-width: 1100px;
    margin: 0 auto;
}
.socialTile { width: clamp(140px, 18vw, 200px); }
@media (max-width: 440px) { .socialTile { width: 100%; } }

/* Einzelne Social-Kachel: Icon groß in Markenfarbe, Name darunter */
.socialTile {
    --brand-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.75rem 1rem;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--color-ink);
    transition:
        transform .35s var(--ease-spring),
        border-color .3s,
        box-shadow .3s,
        background .3s;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 1 / 1;
}
/* Subtiler farbiger Schein im Hintergrund beim Hover */
.socialTile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, var(--brand-color), transparent 65%);
    opacity: 0;
    transition: opacity .4s;
    z-index: -1;
}
.socialTile:hover {
    transform: translateY(-4px);
    border-color: var(--brand-color);
    box-shadow: 0 20px 40px -18px rgba(10,37,64,.25);
}
.socialTile:hover::before { opacity: .06; }

.socialTile__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    color: var(--brand-color);
    transition: transform .35s var(--ease-spring);
}
.socialTile__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.socialTile:hover .socialTile__icon {
    transform: scale(1.12);
}

.socialTile__label {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: -.005em;
    transition: color .25s;
}
.socialTile:hover .socialTile__label {
    color: var(--brand-color);
}

/* Brand-Farben je Plattform */
.socialTile--facebook  { --brand-color: #1877F2; }
.socialTile--instagram { --brand-color: #E1306C; }
.socialTile--linkedin  { --brand-color: #0A66C2; }
.socialTile--xing      { --brand-color: #026466; }
.socialTile--whatsapp  { --brand-color: #25D366; }

/* 14b. Haupt-Footer: 4 Spalten (Logo | Kontakt | Informationen | Über) ---- */
.footer__main {
    background: linear-gradient(180deg, #00b0f0 0%, #0090cc 100%);
    color: #ffffff;
    padding: var(--space-2xl) 0 var(--space-2xl);
}
.footer__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 1fr 1.3fr;
    gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-xl); } }
@media (max-width: 600px)  { .footer__grid { grid-template-columns: 1fr; } }

.footer__col--brand { display: flex; flex-direction: column; gap: var(--space-md); }
.footer__brand {
    display: inline-block;
    padding: .5rem 0;
    transition: transform .3s var(--ease-spring);
}
.footer__brand:hover { transform: scale(1.04); }
.footer__brandLogo {
    width: auto;
    height: 72px;
    filter: drop-shadow(0 2px 10px rgba(10,37,64,.25));
}
.footer__brandClaim {
    margin: 0;
    color: #eaf6fd;
    font-size: var(--fs-sm);
    line-height: 1.55;
    max-width: 26ch;
}

.footer__col h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.01em;
    margin-bottom: var(--space-md);
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.25);
}

.footer__address {
    color: #eaf6fd;
    font-size: var(--fs-sm);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.footer__lines {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-md);
    row-gap: .35rem;
    margin: 0 0 var(--space-md);
    font-size: var(--fs-sm);
}
/* Zwischen-Überschrift in einer Footer-Spalte (z. B. „Öffnungszeiten“) –
   bewusst leiser als das h5 der Spalte, damit die Hierarchie erhalten bleibt. */
.footer__subHead {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .02em;
    margin: 0 0 .6rem;
}
.footer__lines dt { color: #b5e1f5; font-weight: 500; }
.footer__lines dd { margin: 0; }
.footer__lines dd a { color: #fff; }
.footer__lines dd a:hover { color: #0A2540; }

/* Kontakt-Button unter Adresse */
.footer__cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    background: #0A2540;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background .25s, transform .25s var(--ease-spring), box-shadow .25s;
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.3);
    align-self: flex-start;
}
.footer__cta svg { width: 16px; height: 16px; }
.footer__cta:hover {
    background: #061a33;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.45);
}

.toolLinks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.toolLinks li { display: flex; align-items: center; gap: .6rem; }
.toolLinks li::before {
    content: "›";
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(255,255,255,.55);
    width: auto;
    background-image: none;
}
.toolLinks a {
    color: #ffffff;
    font-size: var(--fs-sm);
    transition: color .2s, padding-left .3s;
}
.toolLinks a:hover { color: #0A2540; padding-left: .25rem; }

.footer__pullquote {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: var(--space-md);
}
.footer__col--about p { color: #eaf6fd; font-size: var(--fs-sm); line-height: 1.65; }

/* ============================================================================
 * 19. MEDIA-PLATZHALTER für Unterseiten
 * ========================================================================== */
.mediaHolder {
    margin: 0;
    position: relative;
    background: linear-gradient(135deg, #f0f7fc 0%, #dbe9f4 100%);
    border: 2px dashed rgba(10,37,64,.15);
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.mediaHolder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, transparent 48%, rgba(10,37,64,.035) 48% 52%, transparent 52%);
    background-size: 22px 22px;
    pointer-events: none;
}
.mediaHolder__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1.5rem;
    color: var(--color-muted);
}
.mediaHolder__icon {
    width: 44px; height: 44px;
    margin: 0 auto .75rem;
    opacity: .4;
}
.mediaHolder__icon svg { width: 100%; height: 100%; }
.mediaHolder__label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .2rem;
}
.mediaHolder__ratio {
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    opacity: .5;
    letter-spacing: .12em;
}

/* task19: Sobald ein echtes Bild gesetzt ist ($holderSrc), fällt der
   Platzhalter-Look weg – kein gestrichelter Rahmen, kein Schraffur-Muster.
   Das Bild füllt die Fläche formatfüllend, das Seitenverhältnis bleibt über
   die Varianten-Klassen (--hero/--square/--wide) erhalten. */
.mediaHolder--filled {
    border: 1px solid rgba(10,37,64,.08);
    background: var(--color-secondary);
    box-shadow: var(--shadow-soft);
}
.mediaHolder--filled::before { content: none; }
.mediaHolder__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.mediaHolder__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.75rem 1.25rem .8rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
    background: linear-gradient(180deg, rgba(10,37,64,0), rgba(10,37,64,.75));
}

/* task20: Klickbares Bild ($holderHref) – z.B. Standort-Karte → Google Maps.
   Der Link füllt die komplette Bildfläche; der Overlay-Button unten rechts
   zeigt an, wohin es geht. Auf Touch-Geräten ist er dauerhaft sichtbar, am
   Desktop hebt er sich beim Hover/Fokus zusätzlich hervor. */
.mediaHolder__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}
.mediaHolder--linked { transition: box-shadow .35s, transform .35s; }
.mediaHolder--linked:hover,
.mediaHolder--linked:focus-within { box-shadow: var(--shadow-elev); }
.mediaHolder--linked .mediaHolder__img { transition: transform .5s ease; }
.mediaHolder--linked:hover .mediaHolder__img { transform: scale(1.03); }
.mediaHolder__link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}
.mediaHolder__linkBadge {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .95rem;
    border-radius: 999px;
    background: var(--color-secondary);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: var(--shadow-soft);
    transition: background .25s, transform .25s;
}
.mediaHolder__linkBadge svg { width: 16px; height: 16px; flex: none; }
.mediaHolder__linkArrow { opacity: .7; }
.mediaHolder__link:hover .mediaHolder__linkBadge,
.mediaHolder__link:focus-visible .mediaHolder__linkBadge {
    background: var(--color-primary);
    transform: translateY(-2px);
}
/* Bildunterschrift liegt als Geschwister-Element über dem Link – sie darf
   Klicks nicht abfangen und muss dem Badge rechts Platz lassen. */
.mediaHolder--linked .mediaHolder__caption { pointer-events: none; padding-right: 14rem; }
@media (max-width: 600px) {
    /* wenig Höhe: Badge nach oben, damit er die Unterschrift nicht überdeckt */
    .mediaHolder__linkBadge { right: .6rem; bottom: auto; top: .6rem; padding: .5rem .75rem; }
    .mediaHolder--linked .mediaHolder__caption { padding-right: 1.25rem; }
}

.mediaHolder--hero     { aspect-ratio: 21/9; }
.mediaHolder--square   { aspect-ratio: 1/1; }
.mediaHolder--portrait { aspect-ratio: 3/4; }
.mediaHolder--wide     { aspect-ratio: 3/1; }

/* Split-Block: Text + Bild nebeneinander */
.splitBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
    margin: var(--space-2xl) 0;
}
.splitBlock--reverse { grid-template-areas: "b a"; }
.splitBlock--reverse .splitBlock__media { grid-area: b; }
.splitBlock--reverse .splitBlock__text  { grid-area: a; }
@media (max-width: 800px) {
    .splitBlock, .splitBlock--reverse {
        grid-template-columns: 1fr;
        grid-template-areas: "a" "b";
    }
}

/* Bildergalerie */
.mediaGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}
@media (max-width: 700px) { .mediaGallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mediaGallery { grid-template-columns: 1fr; } }

/* NOVA-Launch-Block (CTA-Kasten auf nova-Seite) */
.novaLaunch {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: linear-gradient(135deg, #fef1f9 0%, #fce7f3 100%);
    border: 1px solid #f9a8d4;
    border-radius: var(--radius-lg);
    align-items: center;
}
@media (max-width: 800px) { .novaLaunch { grid-template-columns: 1fr; } }

.novaLaunch__body h2 { color: #9d174d; }
.novaLaunch__body p { color: #701a3b; }
.novaLaunch__body .btn--primary { background: #db2777; color: #fff; }
.novaLaunch__body .btn--primary:hover { background: #9d174d; }

.novaLaunch__facts {
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid rgba(219,39,119,.2);
}
.novaLaunch__facts dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}
.novaLaunch__facts dt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9d174d;
}
.novaLaunch__facts dd {
    margin: 0 0 .5rem;
    color: var(--color-secondary);
    font-weight: 500;
    padding-bottom: .75rem;
    border-bottom: 1px dashed rgba(219,39,119,.2);
}
.novaLaunch__facts dd:last-child { border: 0; padding-bottom: 0; margin-bottom: 0; }

/* Nova Fact-List (in Service-Cards auf nova.php) */
.novaFactList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}
.novaFactList li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding-left: 1rem;
    position: relative;
}
.novaFactList li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
}
.novaFactList--grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .3rem;
}

/* Nova-Quote (in Dark-Section) */
.novaQuote {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.novaQuote__mark {
    width: 42px; height: 42px;
    color: var(--color-primary);
    opacity: .7;
    margin: 0 auto var(--space-md);
    display: block;
}
.novaQuote blockquote {
    margin: 0 auto var(--space-lg);
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 400;
    line-height: 1.5;
    color: #eaf2f8;
    font-style: italic;
    letter-spacing: -.005em;
    max-width: 60ch;
}
.novaQuote cite {
    display: block;
    font-style: normal;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.75);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Nova FAQ (details/summary) */
.novaFaq {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.novaFaq details {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    transition: border-color .2s, box-shadow .2s;
}
.novaFaq details[open] {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px -12px rgba(0,176,240,.3);
}
.novaFaq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-secondary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.novaFaq summary::-webkit-details-marker { display: none; }
.novaFaq summary::after {
    content: "+";
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-primary-deep);
    transition: transform .3s;
    flex-shrink: 0;
}
.novaFaq details[open] summary::after { transform: rotate(45deg); }
.novaFaq p {
    margin: .75rem 0 0;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* 14c. Copyright-Streifen ------------------------------------------------ */
.footer__bottom {
    background: var(--color-secondary);
    color: rgba(255,255,255,.82);
    padding: var(--space-md) 0;
    font-size: var(--fs-xs);
}
.footer__bottomInner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.footer__credit a { color: #fff; font-weight: 600; }
.footer__credit a:hover { color: var(--color-primary); }

/* ----------------------------------------------------------------------------
 * 15. Back-to-Top
 * -------------------------------------------------------------------------- */
.backToTop {
    position: fixed;
    right: clamp(1rem, 2.5vw, 1.75rem);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    width: 60px; height: 60px;
    background: var(--color-secondary);
    color: var(--color-primary);
    border-radius: 50%;
    display: grid; place-items: center;
    z-index: 50;
    opacity: 0;
    transform: translateY(20px) scale(.8);
    transition: opacity .35s var(--ease-spring), transform .35s var(--ease-spring), box-shadow .25s;
    pointer-events: none;
}
.backToTop.isVisible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.backToTop:hover { box-shadow: 0 0 0 6px rgba(0,176,240,.18), var(--shadow-elev); }
.backToTop.isFull {
    background: var(--color-primary);
    color: var(--color-secondary);
    animation: btComplete .9s var(--ease-spring);
}
@keyframes btComplete {
    0% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-10deg); }
    70% { transform: scale(.95); } 100% { transform: scale(1); }
}
.backToTop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.backToTop__ringTrack    { fill: none; stroke: rgba(0,176,240,.15); stroke-width: 4; }
.backToTop__ringProgress {
    fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round;
    stroke-dasharray: 289; stroke-dashoffset: 289;
    transition: stroke-dashoffset .1s linear, stroke .3s;
    filter: drop-shadow(0 0 4px var(--color-primary));
}
.backToTop.isFull .backToTop__ringProgress { stroke: #fff; }
.backToTop__arrow { font-size: 1.5rem; font-weight: 700; line-height: 1; }

/* ----------------------------------------------------------------------------
 * 16. Reveal on scroll
 * -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
.reveal.isIn { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }
.reveal[data-delay="6"] { transition-delay: .48s; }
.reveal[data-delay="7"] { transition-delay: .56s; }

/* ============================================================================
 * 17. 404-Seite – freundlich, mit 6er Raster
 * ========================================================================== */
.page404 {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 100%);
}
.page404__bg {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
}
.page404__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,176,240,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,240,.08) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%);
}
.page404__halo {
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(0,176,240,.18) 0%, transparent 65%);
    filter: blur(20px);
}
.page404__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.page404__hero { max-width: 780px; margin: 0 auto var(--space-2xl); }

.page404__code {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: var(--space-lg) 0;
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-secondary);
    letter-spacing: -.05em;
}
.page404__codeBolt {
    display: inline-flex;
    align-items: center;
    animation: bolt404 3s ease-in-out infinite;
}
.page404__codeBolt svg {
    height: clamp(4rem, 11vw, 7.2rem);
    width: auto;
    filter: drop-shadow(0 0 20px rgba(0,176,240,.6));
}
@keyframes bolt404 {
    0%,100% { transform: rotate(-2deg) scale(1); }
    50%     { transform: rotate(4deg)  scale(1.06); }
}

.page404 h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    margin-bottom: var(--space-md);
}
.page404 p { margin: 0 auto var(--space-md); }
.page404__sub { margin-top: var(--space-xl); font-size: var(--fs-md); color: var(--color-secondary); }

/* Suggestion-Grid */
.page404__grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: var(--content);
    margin: 0 auto;
}
@media (max-width: 900px) { .page404__grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .page404__grid-cards { grid-template-columns: 1fr; } }

.suggestCard {
    --accent: var(--color-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .35s;
    text-align: left;
}
.suggestCard::before {
    /* Farbband oben */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent);
    transform: scaleX(.2);
    transform-origin: left;
    transition: transform .4s var(--ease-spring);
}
.suggestCard:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 24px 50px -20px rgba(10,37,64,.3);
}
.suggestCard:hover::before { transform: scaleX(1); }

.suggestCard--cyan   { --accent: #00b0f0; }
.suggestCard--orange { --accent: #f59e0b; }
.suggestCard--green  { --accent: #22c55e; }
.suggestCard--navy   { --accent: #0A2540; }

.suggestCard__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    margin-bottom: var(--space-md);
    transition: transform .3s var(--ease-spring);
}
.suggestCard:hover .suggestCard__icon { transform: scale(1.12) rotate(-6deg); }
.suggestCard__icon svg { width: 26px; height: 26px; }

.suggestCard h3 { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--color-secondary); }
.suggestCard p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0 0 var(--space-md); flex: 1; }
.suggestCard__arrow {
    align-self: flex-end;
    font-size: 1.3rem;
    color: var(--accent);
    transition: transform .3s;
}
.suggestCard:hover .suggestCard__arrow { transform: translateX(6px); }

.page404__tail {
    text-align: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px dashed var(--color-line);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------------------------------------
 * 18. Sub-Pages & Utilities
 * -------------------------------------------------------------------------- */
.subPageIntro {
    background: var(--color-bg-alt);
    padding: var(--space-2xl) 0;
    border-bottom: 1px solid var(--color-line);
}
.subPageIntro .eyebrow { margin-bottom: var(--space-md); }
.subPageIntro h1 { margin-bottom: var(--space-md); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-lg); color: var(--color-primary-deep); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li { margin-bottom: .4rem; }
.prose p { color: var(--color-muted); }

.checklist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
@media (max-width: 700px) { .checklist { grid-template-columns: 1fr; } }
.checklist li {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: var(--space-md);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: #fff;
    transition: border-color .25s, transform .25s;
}
.checklist li:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.checklist li::before { content: "⚡"; color: var(--color-primary-deep); font-size: 1.2rem; flex-shrink: 0; }

.stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-2));
    color: #fff;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stats__item strong { display: block; font-size: clamp(2.2rem, 3.5vw, 3.2rem); font-weight: 900; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1; }
.stats__item span { display: block; font-size: .875rem; color: #a6bcd6; margin-top: .5rem; letter-spacing: .05em; }

.textCenter { text-align: center; }
.mtXL { margin-top: var(--space-xl); }
.mtLG { margin-top: var(--space-lg); }
.mtMD { margin-top: var(--space-md); }
.mtSM { margin-top: var(--space-sm); }
.textMuteLight { color: #c8daea; font-size: var(--fs-sm); margin: .5rem 0 0; }

.divider {
    display: flex; align-items: center; gap: var(--space-md);
    margin: var(--space-xl) 0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.divider span {
    font-family: var(--font-mono); font-size: var(--fs-xs);
    color: var(--color-muted); letter-spacing: 0.2em; text-transform: uppercase;
}

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

/* ============================================================================
 * 20. FLOATING CONTACT LAUNCHER (unten mittig – flankiert von BackToTop rechts
 *     und Compliance-Guardian links)
 * ========================================================================== */
.contactLauncher {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 80;
}
@media (max-width: 600px) {
    .contactLauncher { bottom: 1rem; }
}
/* task12: BackToTop bleibt rechts (Basisregel §15), Kontakt mittig,
   Compliance-Guardian links – die drei Floating-Buttons überlagern sich nicht. */

.contactLauncher__trigger {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.25rem .85rem 1.1rem;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: .03em;
    box-shadow:
        0 12px 32px -10px rgba(10,37,64,.5),
        0 0 0 0 rgba(0,176,240,.35);
    transition: background .25s, transform .3s var(--ease-spring), box-shadow .3s;
    position: relative;
    isolation: isolate;
}
.contactLauncher__trigger::before {
    /* subtiler Aufmerksamkeits-Puls */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(0,176,240,.5);
    animation: launcherPulse 2.8s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes launcherPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,176,240,.45); }
    70%  { box-shadow: 0 0 0 14px rgba(0,176,240,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,176,240,0); }
}
.contactLauncher__trigger:hover {
    background: #05152a;
    transform: translateY(-2px);
}

.contactLauncher__triggerIcon {
    display: inline-flex;
    width: 20px; height: 20px;
    color: var(--color-primary);
    transition: opacity .25s, transform .3s;
}
.contactLauncher__triggerIcon--close {
    position: absolute;
    left: 1.1rem;
    opacity: 0;
    transform: rotate(-90deg) scale(.7);
}
.contactLauncher.isOpen .contactLauncher__triggerIcon:not(.contactLauncher__triggerIcon--close) {
    opacity: 0;
    transform: rotate(90deg) scale(.7);
}
.contactLauncher.isOpen .contactLauncher__triggerIcon--close {
    opacity: 1;
    transform: rotate(0) scale(1);
}
.contactLauncher.isOpen .contactLauncher__trigger::before { animation: none; }

.contactLauncher__triggerLabel { white-space: nowrap; }

/* Popover */
.contactPopover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .75rem);
    width: 340px;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border-radius: 20px;
    box-shadow:
        0 30px 70px -20px rgba(10,37,64,.4),
        0 0 0 1px rgba(10,37,64,.06);
    /* mittig über dem zentrierten Kontakt-Button (translateX(-50%) bleibt in
       beiden Zuständen erhalten, damit nur Y/Scale animiert werden). */
    transform: translateX(-50%) translateY(12px) scale(.96);
    transform-origin: bottom center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease-spring), transform .35s var(--ease-spring);
    overflow: hidden;
}
.contactPopover[hidden] { display: block; } /* override, JS toggelt via .isOpen */
.contactLauncher.isOpen .contactPopover {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}

.contactPopover__head {
    padding: 1.25rem 1.5rem 1rem;
    background: linear-gradient(160deg, #0A2540 0%, #143a69 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.contactPopover__head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,176,240,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,240,.08) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
    pointer-events: none;
}
.contactPopover__badge {
    position: relative;
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: .3rem;
}
.contactPopover__head h3 {
    position: relative;
    margin: 0 0 .25rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}
.contactPopover__head p {
    position: relative;
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.72);
    line-height: 1.5;
}

.contactPopover__grid {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.contactOption {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border-radius: 12px;
    color: var(--color-secondary);
    text-decoration: none;
    transition: background .2s, transform .25s var(--ease-spring);
}
.contactOption:hover {
    background: var(--color-bg-alt);
    transform: translateX(2px);
}

.contactOption__icon {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--color-primary-deep);
    background: rgba(0,176,240,.1);
}
.contactOption__icon svg { width: 20px; height: 20px; }

.contactOption--whatsapp .contactOption__icon { color: #25D366; background: rgba(37,211,102,.1); }
.contactOption--email    .contactOption__icon { color: var(--color-secondary); background: rgba(10,37,64,.08); }
.contactOption--form     .contactOption__icon { color: var(--color-accent); background: rgba(217,119,6,.1); }
.contactOption--alarm    .contactOption__icon { color: var(--color-alarm); background: rgba(220,38,38,.1); }
.contactOption--alarm .contactOption__icon svg { animation: pulseDot 1.8s ease-in-out infinite; }

.contactOption__body { min-width: 0; }
.contactOption__body strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}
.contactOption__body small {
    display: block;
    font-size: .75rem;
    color: var(--color-muted);
    letter-spacing: .01em;
}
.contactOption__arrow {
    color: rgba(10,37,64,.3);
    font-size: 1.1rem;
    transition: transform .25s, color .25s;
}
.contactOption:hover .contactOption__arrow {
    color: var(--color-primary-deep);
    transform: translateX(3px);
}

.contactPopover__foot {
    padding: .75rem 1.5rem 1rem;
    font-size: .7rem;
    color: var(--color-muted);
    text-align: center;
    border-top: 1px solid var(--color-line);
    background: var(--color-bg-alt);
    letter-spacing: .02em;
}

/* ============================================================================
 * 21. HOMOGENITÄT MIT DEM MEGA-MENÜ
 *     Der Content bekommt dieselbe DNA wie das Menü-Overlay:
 *     – Farb-Akzente + glühende „Strom"-Kanten an den Karten
 *     – dezent driftende Technik-Raster als Background-Animation
 *     – atmende Glow-Orbs in dunklen Sections
 *     Alle Bewegungen laufen über background-position / opacity, damit
 *     Karten-Schatten nicht abgeschnitten werden. prefers-reduced-motion
 *     friert das Ganze global ein (siehe §18).
 * ========================================================================== */

/* --- gemeinsame Keyframes ------------------------------------------------- */
@keyframes gridPan      { to { background-position: 44px 44px; } }
@keyframes gridPanHero  { to { background-position: 80px 80px; } }
@keyframes glowShift    { to { background-position: 30% 22%, 72% 62%; } }
@keyframes glowBreathe  { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes strandFlow   { from { background-position: 0 120%; } to { background-position: 0 -120%; } }
@keyframes stripeScroll { to { background-position: 40px 0; } }
@keyframes boltFlick    { 0%,100% { opacity: 1; transform: scale(1); } 47% { opacity: 1; } 50% { opacity: .35; transform: scale(.86); } 53% { opacity: 1; transform: scale(1.12); } }
@keyframes underlineCharge { 0%,100% { opacity: .2; transform: skewX(-12deg) scaleX(1); } 50% { opacity: .5; transform: skewX(-12deg) scaleX(1.04); } }

/* --- Content über die animierten Deko-Ebenen heben ----------------------- */
.hero > .container,
.section--alt > .container,
.section--dark > .container { position: relative; z-index: 1; }
.groupOverview .container { z-index: 1; }
.stats > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------
 * 21.1 Service-Karten = Menü-Kacheln-DNA (wirkt seitenweit, 50+ Karten)
 *      Akzentfarben rotieren automatisch pro Karte – kein View-Eingriff nötig.
 * -------------------------------------------------------------------------- */
.serviceCard { --accent: var(--color-primary); }
.services > .serviceCard:nth-child(4n+1) { --accent: #00b0f0; }
.services > .serviceCard:nth-child(4n+2) { --accent: #f59e0b; }
.services > .serviceCard:nth-child(4n+3) { --accent: #22c55e; }
.services > .serviceCard:nth-child(4n+4) { --accent: #db2777; }

/* Spotlight in Akzentfarbe statt fixem Cyan */
.serviceCard::before {
    background: radial-gradient(600px 200px at var(--mx,50%) var(--my,50%),
                color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

/* Glühende „Strom"-Kante links – im Hover fliesst ein Puls nach oben */
.serviceCard::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--accent) 18%,
        color-mix(in srgb, var(--accent) 45%, #fff) 50%,
        var(--accent) 82%,
        transparent 100%);
    background-size: 100% 220%;
    box-shadow: 0 0 16px -2px var(--accent);
    opacity: .5;
    transition: width .35s var(--ease-spring), opacity .35s;
    z-index: 2;
    pointer-events: none;
}
.serviceCard:hover::after {
    width: 6px;
    opacity: 1;
    animation: strandFlow 1.6s linear infinite;
}
.serviceCard:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Nummer + Icon nehmen die Akzentfarbe auf */
.serviceCard__num { color: var(--accent); }
.serviceCard__icon {
    color: var(--accent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 16%, transparent),
        color-mix(in srgb, var(--accent) 3%, transparent));
    transition: transform .3s var(--ease-spring);
}
.serviceCard__icon::after { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.serviceCard:hover .serviceCard__icon { transform: scale(1.08) rotate(-4deg); }
.serviceCard .cardLink:hover { color: var(--accent); }

/* Satelliten-Karte: kein nummeriertes Modul, sondern eine Schwestermarke.
   Steht deshalb ausserhalb des Modul-Grids und liegt quer – so bleibt die
   Zählung der Überschrift („Fünf Module") sichtbar korrekt. */
.serviceCard--satellite {
    --accent: var(--color-accent);
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
    min-height: 0;
}
.serviceCard--satellite .serviceCard__icon { flex: none; margin-bottom: 0; }
.serviceCard--satellite .serviceCard__body { flex: 1; }
.serviceCard--satellite .serviceCard__num { margin-bottom: var(--space-sm); }
.serviceCard--satellite p { margin-bottom: var(--space-lg); max-width: 68ch; }
@media (max-width: 640px) {
    .serviceCard--satellite { flex-direction: column; gap: var(--space-lg); }
}

/* ----------------------------------------------------------------------------
 * 21.2 Background-Animationen für ausgewählte Sections
 * -------------------------------------------------------------------------- */

/* Hero: bestehendes Raster driftet + zwei atmende Glow-Orbs dahinter */
.hero::before { animation: gridPanHero 60s linear infinite; }
.hero::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 28%, rgba(0,176,240,.16), transparent 55%),
        radial-gradient(circle at 74% 72%, rgba(217,119,6,.10), transparent 55%);
    background-size: 170% 170%, 200% 200%;
    background-position: 0% 0%, 100% 100%;
    animation: glowShift 22s ease-in-out infinite alternate;
    /* task12: Die Glow-Orbs (v. a. der cyanfarbene oben) tönen den oberen
       Hero-Rand bläulich – der Header-Fade darunter hat diese Tönung NICHT.
       Ohne Maske entsteht dadurch am Übergang ein Farb-Sprung (die "Linie"),
       obwohl die Grundfarben identisch sind. Deshalb blenden wir die Deko-
       Ebene oben komplett aus, sodass der Hero-Anfang exakt die Fade-Endfarbe
       (#d6eaf8) behält und der Übergang nahtlos bleibt. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, #000 28%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, #000 28%);
}
.hero__title span::after { animation: underlineCharge 3.6s ease-in-out infinite; }

/* Services-Section (--alt): sehr feines, langsam driftendes Raster */
.section--alt { position: relative; }
.section--alt::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0,176,240,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,240,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 0%, transparent 78%);
    animation: gridPan 34s linear infinite;
}

/* Dunkle Section „Warum TGS": Menü-Look – driftendes Raster + Glow-Orbs */
.section--dark { position: relative; }
.section--dark::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0,176,240,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,240,.07) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 30%, #000 25%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 30%, #000 25%, transparent 88%);
    animation: gridPan 30s linear infinite;
}
.section--dark::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 30%, rgba(0,176,240,.20), transparent 55%),
        radial-gradient(circle at 78% 78%, rgba(0,176,240,.12), transparent 55%);
    background-size: 180% 180%, 200% 200%;
    background-position: 0% 0%, 100% 100%;
    animation: glowShift 20s ease-in-out infinite alternate;
}

/* Gruppen-Überblick: bestehender Glow atmet jetzt */
.groupOverview::before { animation: glowBreathe 12s ease-in-out infinite; }
/* Raster im Karten-Kopf gleitet beim Hover */
.groupTile:hover .groupTile__visual::before { animation: gridPan 6s linear infinite; }

/* Stats-Block (dunkel wie das Menü): Raster-Overlay + Akzent-Zahlen */
.stats::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0,176,240,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,240,.09) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 85%);
    animation: gridPan 28s linear infinite;
}
.stats::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 20% 20%, rgba(0,176,240,.18), transparent 50%),
                radial-gradient(circle at 85% 90%, rgba(217,119,6,.12), transparent 50%);
    background-size: 200% 200%, 200% 200%;
    background-position: 0% 0%, 100% 100%;
    animation: glowShift 24s ease-in-out infinite alternate;
}
.stats__item:nth-child(4n+2) strong { color: var(--color-accent-soft); }
.stats__item:nth-child(4n+3) strong { color: var(--color-ok); }
.stats__item:nth-child(4n+4) strong { color: var(--color-magenta); }

/* Alarm-Bar: Warnstreifen läuft, Diagonalmuster atmet – „lebt" jetzt */
.alarmBar::after { background-size: 40px 100%; animation: stripeScroll 1.6s linear infinite; }
.alarmBar::before { animation: glowBreathe 3.4s ease-in-out infinite; }

/* ----------------------------------------------------------------------------
 * 21.3 Kleine Gamification-Details
 * -------------------------------------------------------------------------- */
/* Checklisten-Blitz flackert wie ein echter Kontakt */
.checklist li::before { animation: boltFlick 4.5s ease-in-out infinite; }
.checklist li:nth-child(2n)::before  { animation-delay: 1.5s; }
.checklist li:nth-child(3n)::before  { animation-delay: 2.8s; }
.checklist li:hover::before { color: var(--color-primary); }

/* Hero-Kennzahlen: kleiner Akzent-Balken + Pop im Hover */
.hero__metaItem { position: relative; transition: transform .3s var(--ease-spring); cursor: default; }
.hero__metaItem::after {
    content: "";
    display: block;
    width: 0; height: 2px;
    margin: .5rem auto 0;
    background: var(--color-primary);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--color-primary);
    transition: width .35s var(--ease-spring);
}
.hero__metaItem:hover { transform: translateY(-3px); }
.hero__metaItem:hover::after { width: 32px; }

/* ============================================================================
 * 23. GOOGLE-BEWERTUNGEN (task17)
 *     Einziger Bewertungsbereich der Seite (Hero-Badge + Block auf der
 *     Startseite). Alles rein lokal – kein Google-Widget, kein Fremd-Skript,
 *     damit die strikte CSP (§1a in app.php) unangetastet bleibt.
 *     Kartenlogik bewusst nah an .serviceCard (gleiche Radien, Linien,
 *     Hover-Lift), damit der Block nicht wie ein Fremdkörper wirkt.
 * ========================================================================== */

/* Screenreader-only – für ergänzende Hinweise ("öffnet in neuem Tab") */
.visuallyHidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Sternreihe – Google-Gelb, wird im Hero und in den Karten verwendet */
.stars { display: inline-flex; align-items: center; gap: .12rem; color: #fbbc05; }
.stars__i { width: 18px; height: 18px; flex: 0 0 18px; }
.stars__i--off { color: var(--color-line); }
.stars--hero .stars__i { width: 16px; height: 16px; flex: 0 0 16px; }

.reviews { background: var(--color-bg-alt); }
.reviews__head { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.reviews__note { max-width: 720px; margin: 2rem auto 0; text-align: center; font-size: .8125rem; color: var(--color-muted); }

/* Zusammenfassung: Logo · Schnitt · Sterne · Link */
.reviewSummary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0 auto var(--space-xl);
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.reviewSummary__brand { width: 40px; flex: 0 0 40px; }
.reviewSummary__brand svg { width: 100%; height: auto; }
.reviewSummary__score {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 .75rem;
}
.reviewSummary__score strong {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-secondary);
}
.reviewSummary__count {
    grid-column: 2;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}
.reviewSummary__link { font-weight: 700; font-size: var(--fs-sm); }

/* Kartenraster – Masonry-Optik über automatische Zeilen vermeiden wir bewusst,
   die Karten bleiben gleich hoch und damit ruhig im Raster. */
.reviewGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-lg);
}

.reviewCard {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .35s;
}
.reviewCard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elev);
    border-color: transparent;
}

.reviewCard__head { display: flex; align-items: center; gap: .75rem; }
.reviewCard__avatar {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    color: #fff;
    background: var(--avatar, var(--color-primary));
}
/* Avatarfarben rotieren wie die Akzentfarben der Service-Karten (§10) */
.reviewGrid > .reviewCard:nth-child(4n+1) { --avatar: #00b0f0; }
.reviewGrid > .reviewCard:nth-child(4n+2) { --avatar: #f59e0b; }
.reviewGrid > .reviewCard:nth-child(4n+3) { --avatar: #22c55e; }
.reviewGrid > .reviewCard:nth-child(4n+4) { --avatar: #db2777; }

.reviewCard__ident { min-width: 0; flex: 1 1 auto; }
.reviewCard__author {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-secondary);
}
.reviewCard__meta {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-muted);
}
.reviewCard__source { width: 20px; flex: 0 0 20px; opacity: .9; }
.reviewCard__source svg { width: 100%; height: auto; }

.reviewCard__rating { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.reviewCard__date { font-size: var(--fs-xs); color: var(--color-muted); }
.reviewCard__badge {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: rgba(0,176,240,.12);
    border-radius: 999px;
    padding: .1rem .55rem;
}

.reviewCard__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
}
.reviewCard__tags li {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-secondary);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: .15rem .65rem;
}

.reviewCard__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--color-ink);
}
.reviewCard__text--empty { color: var(--color-muted); font-style: italic; }
/* Rezensionen ohne Kommentar: Der Hinweis rückt in die Mitte der Karte, damit
   im gleich hohen Raster keine leer wirkende Fläche entsteht. */
.reviewCard--noText .reviewCard__text { margin: auto 0; text-align: center; }

@media (max-width: 520px) {
    .reviewSummary { flex-direction: column; text-align: center; }
    .reviewSummary__score { justify-content: center; }
}

/* ============================================================================
 * 22. INTERAKTIVE, CURSOR-REAKTIVE BEWEGUNG (task13)
 *     Alle bisherigen Animationen (§21) laufen als Endlos-Loops unabhängig vom
 *     Nutzer – die Seite wirkt dadurch "vorgerendert". Hier reagieren Elemente
 *     direkt auf die Maus, damit sie sich lebendig/greifbar anfühlen.
 *     JS setzt ausschließlich CSS-Variablen + Klassen (CSP-konform, keine
 *     Inline-Styles im HTML). Nur Feinzeiger (Maus) erhalten die Listener;
 *     prefers-reduced-motion (§18) friert die Transitions global ein und das JS
 *     hängt die Listener dann gar nicht erst an.
 * ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* 3D-Neigung: Karten kippen sanft zur Maus – inkl. bestehendem Hover-Lift
       (-6px, identisch zu §10/§12) plus Mikro-Zoom. Höhere Spezifität als die
       :hover-Basisregeln, daher übernimmt der Tilt beim Zeigen. */
    .serviceCard.isTilting,
    .groupTile.isTilting {
        transform:
            perspective(900px)
            rotateX(var(--tiltX, 0deg))
            rotateY(var(--tiltY, 0deg))
            translateY(-6px) scale(1.015);
        transition: transform .12s ease-out, box-shadow .35s;
        will-change: transform;
    }
    /* kleiner Lichtreflex am oberen Rand, folgt der Neigung */
    .serviceCard.isTilting { box-shadow: var(--shadow-elev); }

    /* Magnetische Buttons: primärer CTA & Alarm-Button ziehen zur Maus und
       federn beim Verlassen über die Basis-Transition (.25s spring) zurück. */
    .btn--primary.isMagnetic,
    .btn--alarm.isMagnetic {
        transform: translate(var(--magX, 0), calc(var(--magY, 0) - 2px));
        transition: transform .09s linear, box-shadow .25s;
        box-shadow: var(--shadow-elev);
    }
}