@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    src: url('fonts/inter-v20-latin-100.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    src: url('fonts/inter-v20-latin-200.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/inter-v20-latin-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/inter-v20-latin-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/inter-v20-latin-900.woff2') format('woff2');
}

:root {
    --text-farbe: #111827;
    --akzent-farbe: #f39220;
    --grau-akzent: #8a99aa;
    --tiefes-schwarz: #030616;
    --eisblau: #f5fcff;
    --claim-layer-hoehe: 16vh;
    --seiten-padding: clamp(0.4rem, 0.4rem + 3.8vw, 5.5rem);
    --container-max-width: 2500px;
    --text-line-height: 1.5; /* Desktop-Standard */
}
    /* ... deine restlichen bestehenden Desktop-Styles ... */

@media (max-width: 768px) {
    :root {
        --grau-akzent: #acb8c7;
        --text-line-height: 1.35; /* Dein Testwert für Mobile */
    }
}

@media (max-width: 360px) {
    :root {
        --seiten-padding: 0.75rem;
    }
}

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

html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    overflow-x: clip;
    background-color: var(--eisblau);
    color: var(--text-farbe);
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 2.5vw, 1.15rem);
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: var(--text-line-height);
    scroll-behavior: auto;
    scrollbar-gutter: stable;
    overflow-wrap: break-word;
}


p {
    hyphens: auto;
    -webkit-hyphens: auto;
}
strong, b {
    font-weight: 600;
    color: inherit;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--seiten-padding);
}

.sektions-titel {
    font-size: clamp(1.85rem, 1.2rem + 1.8vw, 3rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.14;
    letter-spacing: 0.02em;
    color: var(--text-farbe);
    margin: 0;
}
@media (max-width: 768px) {
    .sektions-titel {
        /* Vorher: clamp(1.5rem, 6vw, 1.9rem) */
        font-size: clamp(1.8rem, 7.5vw, 2.3rem);
        line-height: 1.15;
    }
}
.riesige-drei {
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    line-height: 0.8;
    display: inline-block;
    transform: translateY(0.1em); 
}

.titel-grau { color: var(--grau-akzent); }
.titel-weiss { color: var(--eisblau); }

.display-block { display: block; }
.display-flex { display: flex; }
.display-grid { display: grid; }
.display-contents { display: contents; }

.grid-col-2 { grid-column: 2; }
@media (max-width: 768px) { .grid-col-2 { grid-column: auto; } }

/* ==========================================================================
   1a. WASSERZEICHEN / LOGO BRANDING HINTERGRUND
   ========================================================================== */
.wasserzeichen-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden; 
    pointer-events: none; 
    z-index: 24; 
    isolation: isolate;
}

.wasserzeichen-logo { position: absolute; display: block; }
.wz-desktop {
    top: 5vh;
    right: -2%; 
    width: clamp(25rem, 43vw, 35rem);
    height: auto;
}
.wz-mobile-quadrat, .wz-mobile-ellypse { display: none; }

@media (max-width: 768px) {
    .wz-desktop { display: none; }
    .wz-mobile-quadrat {
        display: block;
        top: 18vh; 
        right: -37%;
        width: clamp(20rem, 40vw, 50rem);
        height: 40vh; 
    }
    .wz-mobile-ellypse {
        display: block;
        top: calc(18vh + 36vh); 
        right: -31%;
        width: clamp(20rem, 40vw, 50rem);
        height: auto;
    }
}
/* ==========================================================================
   1b. LICHT-EFFEKT (HERO LINKS OBEN)
   ========================================================================== */

.licht-effekt-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    background: radial-gradient(
        ellipse 70% 100% at 22% 0%,
        rgba(72, 119, 230, 0.18) 0%,
        rgba(255, 255, 255, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 38;
    transform-origin: 22% 0;
    will-change: transform, opacity;
}
/* ==========================================================================
   2. SEITEN-HEADER
   ========================================================================== */
.seiten-kopf {
    width: 100%;
    height: 60px;
    background: color-mix(in srgb, var(--tiefes-schwarz) 85%, transparent);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--seiten-padding);
    transition: transform 0.3s ease;
}

.seiten-kopf.is-hidden {
    transform: translateY(-100%);
}

.logo-link { 
    display: flex; 
    align-items: center; 
}

.seiten-logo { 
    height: 20px; 
    width: auto; 
    display: block; 
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2.6rem); /* Vorher: 1.6rem */
    margin-left: auto;
    margin-right: clamp(1rem, 2.5vw, 3.5rem); /* Vorher: 2rem */
}

.nav-link {
    color: var(--grau-akzent);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    transition: color 0.25s ease;
}

.nav-link:hover {
    color: var(--eisblau);
}

.header-rechts {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-telefon {
    color: var(--grau-akzent);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: none; 
    padding: 0;        
    gap: 0.5rem;      
}

.header-telefon-icon {
    width: 18px;
    height: 18px;
}

.header-mail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grau-akzent);
    text-decoration: none;
    transition: color 0.25s ease;
}

.header-mail-link:hover {
    color: var(--akzent-farbe);
}

.header-mail-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* ==========================================================================
   MOBILE HEADER BUTTONS (MINIMALISTISCH)
   ========================================================================== */

.burger-button,
.header-cta-mobile {
    display: none;
    width: 48px; 
    height: 48px;
    background-color: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    z-index: 10000;
    -webkit-tap-highlight-color: transparent;
}

/* 1. Burger-Spezifisch: 3 feine Striche, exakt 13px Gesamthöhe */
.burger-button {
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 3.5px; /* 2px + 3.5px + 2px + 3.5px + 2px = exakt 13px */
    padding: 0;
    padding-right: 4px;
    margin: 0;
}

.burger-button span {
    display: block;
    height: 2px; /* Minimal dünner (vorher 2.5px) */
    background-color: var(--eisblau);
    border-radius: 1px;
    width: 22px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 3-Striche X-Animation (zentriert exakt auf der 6.5px-Mittelachse) */
.burger-button.is-active span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
.burger-button.is-active span:nth-child(2) {
    opacity: 0;
}
.burger-button.is-active span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* 2. Telefon-Spezifisch (Deine perfekten Werte) */
.header-cta-mobile {
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    padding-left: 15px;
    margin: 0;
    text-decoration: none;
}

.header-cta-mobile svg {
    width: 27px; 
    height: 27px; 
    color: var(--akzent-farbe);
    fill: currentColor;
    stroke: none;          /* Vorher: currentColor – nimmt den fetten Außenrand sofort weg */
    stroke-width: 0;       /* Vorher: 1px */
    transition: transform 0.2s ease;
}

.header-cta-mobile:active svg {
    transform: scale(0.9);
}

/* 3. Auslöser für mobile Ansicht */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    
    /* HIER EINFÜGEN: */
    .seiten-logo {
        height: 13px; /* Kleiner stellen (Standard ist 20px, z. B. 16px oder 17px) */
    }

    .header-rechts { 
        gap: 0; 
        margin-right: 5px; 
    }
    
    .header-cta-mobile, 
    .burger-button { 
        display: flex !important; 
    }
}

/* ==========================================================================
   4. INTRO-ANSCHLUSS & H1
   ========================================================================== */
.grauer-bereich-fix {
    position: relative;
    width: 100%;
}

/* --- BILDSCHIRM 1 (HERO & ANKÜNDIGUNG) --- */
.haupt-h1-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: clamp(3rem, 12vh, 17rem);
}

.hero-h1-gruppe {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
}

.ebene-hero-claim {
    position: relative;
    width: 100vw;
    margin-top: calc(clamp(28vh, 24vw, 34vh) - 60px);
    height: var(--claim-layer-hoehe);
    z-index: 190;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ebene-hero-claim .container {
    max-width: var(--container-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--seiten-padding);
}

.hero-titel-block {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin-left: 12.5rem;
}

.hero-titel-haupt {
    display: block;
    font-weight: 900;
    font-size: clamp(1.8rem, 5vw, 2.9rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--eisblau);
    opacity: 0.35; /* Nach Belieben feinjustieren (z. B. 0.25 bis 0.45) */
}

.hero-titel-sub {
    display: block;
    color: var(--eisblau);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.haupt-h1-wrapper .intro-anschluss-inhalt {
    display: block !important;
    width: 100%;
}

.h1-subtext-neu {
    display: block;
    margin-left: 12.8rem;
    margin-bottom: clamp(1.5rem, 3vh, 6.5rem);
    color: var(--grau-akzent);
    font-size: inherit;
    font-weight: 300;
    line-height: var(--text-line-height);
    text-align: left;
    white-space: nowrap;
}

.intro-trust-texte { 
    display: block; 
    margin: 0 0 0 12.8rem;
}

.trust-zahl { 
    display: block; 
    font-size: clamp(1.25em, 1.6vw, 1.7em); 
    font-weight: 300; 
    color: var(--akzent-farbe); 
    line-height: 1.2; 
    letter-spacing: 0.01em;
    white-space: nowrap;
}


/* --- BILDSCHIRM 2 (AB SCHNITTKANTE) --- */
.intro-anschluss-container {
    width: 100%;
    position: relative;
    z-index: 30;
    padding-top: 0;
    padding-bottom: 0;
}

.intro-anschluss-inhalt {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--seiten-padding);
    display: flex;
    flex-direction: column;
}

.hero-fokus-text {
    display: block;
    margin-left: 12.8rem;
    margin-bottom: clamp(4.5rem, 28vh, 34rem); /* Mobil: 3.5rem | Skalierung: 8vh | Desktop: 8rem */
    color: var(--grau-akzent);
    font-size: inherit;
    line-height: var(--text-line-height);
    text-align: left;
}


.intro-oberer-grid {
    display: grid;
    grid-template-columns: 12rem 1fr; 
    column-gap: 0.5rem; 
    row-gap: 0.15rem;
    align-items: baseline;
}

/* Weist einem Element (z. B. 'IN 3 SCHRITTEN') direkt die 2. Spalte zu */
.grid-col-2 {
    grid-column: 2;
}

.titel-rhythmus { display: contents; }

.vorsatz {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--grau-akzent);
    text-transform: uppercase;
    line-height: 1.1;
    justify-self: end;
    white-space: nowrap;
}

.mandate-intro {
    display: block;
    margin-left: 12.8rem;
    margin-top: 1.2rem;
    margin-bottom: clamp(2.5rem, 4vh, 3.5rem);
    color: var(--grau-akzent);
    font-size: inherit;
    font-weight: 300;
    line-height: var(--text-line-height);
}

.mandate-intro .mandate-zahl {
    color: var(--akzent-farbe);
    font-weight: inherit;
}


/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1024px) {
    
    .hero-titel-block {
        margin-left: 0;
    }

    .hero-titel-sub {
        font-size: inherit;
        letter-spacing: 0.04em;
        margin-top: 0.35rem;
    }

    .h1-subtext-neu,
    .intro-trust-texte,
    .hero-fokus-text,
    .mandate-intro {
        margin-left: 0 !important;
    }
   

    .mandate-intro {
        margin-top: 1rem;
        margin-bottom: 2.5rem;
    }

    .intro-oberer-grid { 
        display: flex; 
        flex-direction: column; 
        gap: 1.5rem; 
    }

    .titel-rhythmus {
        display: grid; 
        grid-template-columns: max-content 1fr;
        column-gap: 0.6rem; 
        row-gap: 0.15rem; 
        align-items: baseline; 
        width: 100%;
    }

    .intro-wirtschaft-block {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.6rem;
        row-gap: 0.2rem;
    }
}

@media (max-width: 360px) { 
    .titel-rhythmus { column-gap: 0.3rem; } 
}
/* ==========================================================================
   5. LOGO BÜHNE & MANDATE-EINLEITUNG
   ========================================================================== */

/* 2. Logo-Raster */
.logo-stage {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 2.2rem auto 16rem auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    padding: 0 1.5rem;
}
@media (max-width: 768px) {
    .logo-stage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        padding: 0 0.5rem;
        margin-top: 0.8rem; /* Vorher 1.8rem */
        margin-bottom: 8rem;
    }
}

/* 3. Logo-Slots */
.logo-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 2.6 / 1;
    min-height: 90px;
    background: radial-gradient(ellipse 90% 120% at bottom left, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 769px) {
    .logo-slot {
        transition: background 0.3s ease;
    }
    .logo-slot:has(a.stage-logo-item.active:hover) {
        background: radial-gradient(ellipse 90% 120% at bottom left, rgba(243, 146, 32, 0.24) 0%, transparent 70%);
    }
}
@media (max-width: 768px) {
    .logo-slot {
        aspect-ratio: 2.2 / 1;
        min-height: 68px;
        background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.2) 0%, transparent 75%);
    }
}

/* 4. Logo-Einträge & Animation */
.stage-logo-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(0.5rem, 1.2vw, 1.2rem);
    background: transparent;
    color: var(--text-farbe);
    font-size: clamp(0.58rem, 1.1vw, 1.1rem);
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
    pointer-events: none;
}
.stage-logo-item.active {
    opacity: 0.9;
    pointer-events: auto;
}
.stage-logo-item.text-fallback {
    color: var(--eisblau);
    text-shadow: none;
    letter-spacing: 1.1px;
}
.stage-logo-item[href]:hover {
    opacity: 0.8;
}
.stage-logo-item.text-fallback[href]:hover {
    color: var(--eisblau);
}
.stage-logo-item img {
    width: 100%;
    height: 100%;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
@media (max-width: 768px) {
    .stage-logo-item.active {
        pointer-events: none !important;
    }
}
/* ==========================================================================
   6. PROZESS SZENE & DASHBOARD
   ========================================================================== */
.prozess-szene {
    position: relative;
    width: 100%;
    z-index: 25;
    margin-top: 4rem;
}

.dashboard-wrapper {
    position: sticky;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    height: calc(100svh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--seiten-padding);
    pointer-events: none;
    perspective: 1600px;
    z-index: 25;
    will-change: transform, opacity;
    transition: opacity 2.2s cubic-bezier(0.4, 0.5, 0.2, 1);
}

.dashboard-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    
    --zentrum: 93%; 
    
    background: 
        linear-gradient(to bottom, 
            transparent calc(var(--zentrum) - 25%), 
            rgba(20, 28, 42, 0.25) calc(var(--zentrum) - 10%), 
            rgba(48, 64, 92, 0.55) var(--zentrum), 
            rgba(20, 28, 42, 0.25) calc(var(--zentrum) + 10%), 
            transparent calc(var(--zentrum) + 25%)
        ), 
        linear-gradient(to bottom, 
            #030616 0%, 
            #040714 calc(var(--zentrum) - 25%), 
            #0e1626 var(--zentrum), 
            #060a14 calc(var(--zentrum) + 20%), 
            #030616 100%
        );
}

@media (max-width: 768px) {
    .dashboard-wrapper {
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 3rem;
    }

    .dashboard-wrapper::before {
        --zentrum: 39%;
        background: 
            linear-gradient(to bottom, 
                transparent 0%, 
                rgba(30, 42, 65, 0.5) 5%, 
                rgba(58, 85, 130, 0.76) var(--zentrum), /* Minimal abgedunkelt: Deckkraft 0.76 statt 0.85 */
                rgba(30, 42, 65, 0.4) calc(var(--zentrum) + 40%), 
                transparent calc(var(--zentrum) + 60%)
            ), 
            linear-gradient(to bottom, 
                #030616 0%, 
                #050a1a 8%, 
                #10192c var(--zentrum),                  /* Minimal abgedunkelt: Zwischen #0e1626 und #121d33 */
                #060a14 calc(var(--zentrum) + 25%), 
                #030616 100%
            );
    }
}

.dashboard-schatten {
    --schatten-end-transform: translate(10%, calc(clamp(312px, 27vh, 350px) + 25px)) scaleX(1.95) scaleY(0.15);
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(580px, 44vw);
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(ellipse 85% 65% at 50% 50%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.75) 45%, rgba(3, 6, 22, 0.35) 70%, transparent 85%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
    filter: blur(25px);
    transform: translate(-85%, clamp(450px, 125vh, 500px)) scaleX(2.2) scaleY(2);
    transform-origin: right center;
    will-change: transform, opacity, filter;
}

.dashboard-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    min-height: 300px; 
    border-radius: 16px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: center center;
    transform: scale(0.85) translateY(5%) rotateY(-20deg);
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: cubic-bezier(0.5, 1, 1, 0.5);
}

.dashboard-svg {
    width: 100%; height: auto; display: block; border-radius: 16px;
    backface-visibility: hidden; -webkit-font-smoothing: antialiased; transform: translateZ(0);
}

.screen-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--tiefes-schwarz); opacity: 0; pointer-events: none; z-index: 30; will-change: opacity;
}

.dashboard-inner.is-playing, 
.dashboard-schatten.is-playing {
    animation-duration: 2.2s; 
    animation-timing-function: cubic-bezier(0.4, 0.9, 0.36, 0.8); 
    animation-fill-mode: forwards;
}

.dashboard-wrapper:has(.dashboard-inner.is-playing) .dashboard-schatten {
    animation-duration: 2.2s; 
    animation-timing-function: cubic-bezier(0.4, 0.9, 0.36, 0.8); 
    animation-fill-mode: forwards;
}

.dashboard-inner.is-playing { animation-name: payhawkEffekt; }
.dashboard-schatten.is-playing { animation-name: schattenAblauf; }
.dashboard-wrapper:has(.dashboard-inner.is-playing) .dashboard-schatten { animation-name: schattenAblauf; }

@keyframes payhawkEffekt {
    0% { opacity: 0; transform: scale(0.85) translateY(5%) rotateY(-20deg); }
    40% { opacity: 1; transform: scale(0.95) translateY(-3%) rotateY(0deg); }
    100% { opacity: 1; transform: scale(0.78) translateY(0) rotateY(0deg); }
}

@keyframes schattenAblauf {
    35% { opacity: 0; filter: blur(16px); transform: translate(-30%, clamp(480px, 55vh, 600px)) scaleX(2.2) scaleY(0.7); }
    100% { opacity: 0.6; filter: blur(4px); transform: var(--schatten-end-transform); }
}

.dashboard-inner.is-settled {
    opacity: 1; 
    transform: scale(0.78) translateY(0); 
    transform-style: flat;
    backface-visibility: visible;
    will-change: auto;
    transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dashboard-schatten.is-settled {
    opacity: 0.6; filter: blur(4px); transform-origin: right center; transform: var(--schatten-end-transform);
}

@media (max-width: 768px) {
    .dashboard-wrapper {
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 0rem; /* Schiebt das Dashboard nach unten */
    }

    .dashboard-inner { 
        --dash-scale: 2.2; /* Deine Skalierung */
        transform-origin: left top; /* Wächst nur nach unten/rechts, nicht mehr in die Überschrift */
        transform: translateX(-120%) scale(var(--dash-scale)); 
        opacity: 0; 
    }
    
    .dashboard-inner.is-playing { 
    animation-name: payhawkEffektMobile; 
    animation-duration: 1.8s; 
    animation-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1); 
}
    
    .dashboard-inner.is-settled { 
        transform-origin: left top; 
        transform: translateX(0) scale(var(--dash-scale)); 
        opacity: 1; 
    }
    
    .dashboard-schatten { display: none !important; }
}

@keyframes payhawkEffektMobile {
    0% { 
        opacity: 0; 
        transform: translateX(-120%) scale(var(--dash-scale)); 
    }
    30% { 
        opacity: 1; 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0) scale(var(--dash-scale)); 
    }
}

/* ==========================================================================
   7. TEXTBLÖCKE & ICONS
   ========================================================================== */
.text-bloecke-wrapper {
    position: relative; z-index: 40; width: 100%; max-width: 1400px; 
    margin: 5vh auto 0 auto; 
    padding: 0 var(--seiten-padding); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem;
}
.text-block { position: relative; font-size: 1.18rem; color: var(--eisblau); font-weight: 300; letter-spacing: 0.02em; text-align: center; flex: 1 1 20%; min-width: 200px; }
.punkt-vier { flex: 1 1 100%; margin-top: 15rem; }
.text-block strong { font-weight: 600; color: inherit; }
.icon-platzhalter { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1.5rem; pointer-events: none; display: flex; justify-content: center; align-items: center; }
.animiertes-icon { width: 64px; height: 64px; display: block; pointer-events: none; }
/* Tablet-Optimierung: 3 Spalten nebeneinander halten & Umbruch verhindern */
@media (min-width: 769px) and (max-width: 1024px) {
    .text-bloecke-wrapper {
        gap: 0.8rem; /* Schafft mehr Platz für die Spalten */
    }

    .text-block {
        font-size: 1.02rem; /* Leicht kompakter, damit der Text nie staucht */
        min-width: 0;        /* Verhindert starre Mindestbreiten */
    }

    .text-block strong {
        white-space: nowrap; /* Hält "Überblick & Kontrolle" fest auf 1 Zeile */
    }
}
@media (max-width: 768px) {
    .text-bloecke-wrapper { 
        flex-direction: column; 
        align-items: center; 
        gap: 7rem; 
        margin-top: 0; /* Vorher: -30vh. Beliebig anpassen: z. B. -10vh, 0 oder 4rem */
    }
    .punkt-vier { margin-top: 3rem; }
    .icon-platzhalter { margin-top: 0.5rem; }
}

/* ==========================================================================
   8. STATISCHER KASTEN & HAKEN
   ========================================================================== */
.begriffe-scroll-track {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(2rem, 4vh, 3.5rem);
    z-index: 40;
    pointer-events: none;
}

.begriffe-sticky-box {
    position: relative;
    width: clamp(400px, 26vw, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Kreuzraster im Hintergrund */
.kreuz-raster-hintergrund {
    --kreuz-abstand: 25px;    
    --strich-dicke: 1px;      
    --kreuz-farbe: var(--grau-akzent); 

    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translate(-50%, 3rem); 
    top: -25vh;
    bottom: -20vh; 
    z-index: 0;
    pointer-events: none;
    opacity: 0.35; 

    background-image: 
        linear-gradient(90deg, transparent calc(50% - var(--strich-dicke)/2), var(--kreuz-farbe) calc(50% - var(--strich-dicke)/2), var(--kreuz-farbe) calc(50% + var(--strich-dicke)/2), transparent calc(50% + var(--strich-dicke)/2)),
        linear-gradient(0deg, transparent calc(50% - var(--strich-dicke)/2), var(--kreuz-farbe) calc(50% - var(--strich-dicke)/2), var(--kreuz-farbe) calc(50% + var(--strich-dicke)/2), transparent calc(50% + var(--strich-dicke)/2));
    background-size: var(--kreuz-abstand) var(--kreuz-abstand);
    background-position: center;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}

/* Äußerer Kasten: Puristischer Doppelrahmen */
.begriffe-formular-box {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 1.4rem;
    border: 1px solid color-mix(in srgb, var(--grau-akzent) 40%, transparent);
    background-color: var(--tiefes-schwarz);
}

/* Inneres Feld: Tiefschwarz mit eigenem Rahmen */
.begriffe-feld-innen {
    width: 100%;
    background-color: var(--tiefes-schwarz);
    border: 1px solid color-mix(in srgb, var(--grau-akzent) 40%, transparent);
    padding: 2.4rem 0.9rem;
}

.kasten-text { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    gap: 1.1rem; 
}

.kasten-text span {
    position: relative; 
    font-size: 0.95rem; 
    font-weight: 300; 
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1.4;
    color: var(--eisblau); 
    padding-bottom: 6px;
}

@media (max-width: 768px) {
    .begriffe-sticky-box {
        width: min(90vw, 340px);
    }
    .begriffe-formular-box {
        padding: 1.2rem;
    }
    .begriffe-feld-innen {
        padding: 1.8rem 1rem;
    }
    .kreuz-raster-hintergrund {
        display: none;
    }
}
/* ==========================================================================
   9. ÜBERLEITUNG & FREIRAUM TITEL
   ========================================================================== */
.ueberleitung-freiraum { display: grid; grid-template-columns: 12rem 1fr; column-gap: 0.8rem; margin-top: 40vh; padding: 0 var(--seiten-padding); position: relative; z-index: 30; }
.ueberleitung-text-spalte { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; }
.ueberleitung-text { color: var(--grau-akzent); margin: 0; max-width: 900px; }
.ueberleitung-sub-titel {
    display: inline-block;

}
#freiraumUeberschrift { margin-top: 0.9rem; }
@media (max-width: 1024px) { 
    .ueberleitung-freiraum { 
        display: flex; 
        flex-direction: column; 
        margin-top: 35vh; 
    } 
    .ueberleitung-sub-titel { 
        margin-top: 6rem; 
    } 
}
.trigger-container { position: absolute; bottom: 10vh; width: 100%; }
#triggerDarauf { height: 1px; }
@media (max-width: 768px) {
    .ueberleitung-freiraum {
        margin-top: 7rem; /* HIER einstellen: Vorher 35vh. Je kleiner der Wert, desto näher am Kasten */
    }

    .ueberleitung-text {
        display: none;
    }
}
/* ==========================================================================
   10. HIMMEL
   ========================================================================== */
#layerHimmel { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; z-index: 22; pointer-events: none; overflow: hidden; will-change: transform; }
.himmel-bild { position: absolute; top: -25vh; left: 0; width: 100%; height: 150vh; object-fit: cover; object-position: 87% center; display: block; }
.himmel-schleier { position: absolute; inset: 0; background-color: var(--tiefes-schwarz); opacity: 0; will-change: opacity; }
.himmel-botschaft { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--eisblau); font-size: clamp(1.4rem, 3.5vw, 2.6rem); font-weight: 300; line-height: 1.4; text-shadow: 0 4px 25px rgba(0, 0, 0, 0.4); opacity: 0; }
.himmel-botschaft strong { font-weight: 600; color: var(--eisblau); }

@media (min-width: 768px) { .himmel-bild { object-position: right 30%; } }
@media (min-width: 1400px) { .himmel-bild { object-position: right 40%; } }

.guckloch-spacer { position: relative; width: 100%; background: transparent; pointer-events: none; z-index: 150; }
.spacer-himmel { height: 190vh; }

/* Für iPads / Tablets im Zwischenbereich */
.spacer-frau { 
    position: relative;
    height: calc(200vh + 15vw); 
}

/* Für schmalere / längliche Tablets (wie das Galaxy Tab) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .spacer-frau {
        height: calc(225vh + 5vw); 
    }
}

/* Für Handys */
@media (max-width: 768px) {
    .spacer-frau {
        height: clamp(1600px, calc(880px + 104vh), 1840px);
        height: clamp(1600px, calc(880px + 104svh), 1840px);
    }
}

/* Universeller Ankerpunkt: exakt 100vh vor dem Ende des Spacers */
#wir {
    position: absolute;
    top: auto;
    bottom: 100vh;
    width: 100%;
    height: 1px;
    pointer-events: none;
    /* Schiebt den echten Anker-Punkt um exakt die Header-Höhe nach oben, 
       sodass der Browser beim Anspringen automatisch unter dem Header landet */
    transform: translateY(-75px); 
}

@media (max-width: 768px) {
    .himmel-botschaft {
        font-size: clamp(1.7rem, 6vw, 2.2rem);
        width: 90%;
    }

    .spacer-himmel {
        height: 105vh;
    }

    .himmel-botschaft {
        top: 65%;
    }
}
/* ==========================================================================
   11. MAGAZIN (3 SCHRITTE) BEREICH
   ========================================================================== */
.schwarzer-bereich-magazin { 
    position: fixed; 
    top: 65vh; 
    isolation: isolate; 
    width: 100%; 
    min-height: 138vh; 
    background-color: var(--tiefes-schwarz); 
    z-index: 22; 
    padding-top: 0; 
    padding-bottom: 8rem; 
    box-shadow: 0 -60px 0 0 var(--tiefes-schwarz), 0 60px 0 0 var(--tiefes-schwarz); 
}

.magazin-reveal-element {
    filter: blur(20px);
    opacity: 0;
    transform: scale(0.95);
    transition: filter 0.8s ease-out, opacity 0.5s ease-out, transform 0.5s ease-out;
    will-change: filter, opacity, transform;
}

.magazin-reveal-element.is-visible {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
}

.schwarzer-bereich-magazin .intro-anschluss-inhalt {
    padding-top: 7rem !important;
}

.titel-sub-grau { 
    display: flex; 
    flex-direction: column; 
    gap: 0.2rem; 
    margin-top: 2.5rem; 
    margin-bottom: 4rem; 
    font-size: clamp(1.2rem, 4vw, 1.4rem); 
    font-weight: 300; 
    color: var(--grau-akzent); 
    line-height: 1.3; 
}
.titel-sub-grau p { margin: 0; }

.trennlinie-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: var(--container-max-width); 
    margin: 0 auto; 
    padding: 5rem var(--seiten-padding); 
    z-index: 45; 
    pointer-events: none; 
}

.glanz-linie { width: 100%; height: 1px; display: block; flex-shrink: 0; }

.glanz-linie-grau { 
    background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 4px); 
    opacity: 0.8; 
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); 
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); 
}

.magazin-punkte-sektion { 
    position: relative; 
    margin-top: 8vh; 
    width: 100%; 
    max-width: var(--container-max-width); 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0 var(--seiten-padding); 
    z-index: 45; 
    hyphens: none; 
    -webkit-hyphens: none; 
    overflow-wrap: normal; 
    word-break: normal; 
}

.magazin-raster { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 4rem; 
    max-width: 1400px; 
    margin: 0 auto; 
    align-items: start; 
}

.magazin-punkt-karte { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    gap: 0.8rem; 
    padding-right: 2.5rem; 
    opacity: 1; 
}

@media (min-width: 1025px) {
    .magazin-punkt-karte:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 15%;
        bottom: 15%;
        right: 0;
        width: 1px;
        background: repeating-linear-gradient(to bottom, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 4px);
        opacity: 0.6;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    }
}

.magazin-karte-kopf { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }

.magazin-nummer {
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 200;
    color: var(--akzent-farbe);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.magazin-titel { 
    font-size: clamp(1.3rem, 2.2vw, 1.6rem); 
    font-weight: 400; 
    line-height: 1.05; 
    letter-spacing: 0.02em; 
    color: var(--eisblau); 
    text-transform: uppercase; 
    transform-origin: bottom left; 
    margin: 0; 
}

.magazin-text { color: var(--grau-akzent); margin: 0; }

.magazin-text.mobile-only {
    display: none;
}

.magazin-cta-wrapper { 
    margin-top: 10rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 1.2rem; 
}

.magazin-cta-text { color: var(--grau-akzent); font-size: 1.15rem; margin: 0; }

.magazin-cta-text .cta-num {
    color: var(--akzent-farbe);
    font-size: 1.2em;
    font-weight: 400;
    display: inline-block;
}

.magazin-cta-button { 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    padding: 0.8rem 1.8rem; 
    color: var(--akzent-farbe); 
    text-decoration: none; 
    border: 1px solid rgba(243, 146, 32, 0.8); 
    background: rgba(243, 146, 32, 0.03); 
    transition: all 0.3s ease; 
    font-family: inherit;
    font-size: 1.18rem;  
}

.magazin-cta-button:hover {
    background-color: var(--akzent-farbe);
    color: var(--eisblau);
    border-color: var(--akzent-farbe);
    transform: translateY(-1px);
}

.cta-pfeil { font-size: 1.2em; font-weight: 500; margin-left: 0.5rem; line-height: 1; }

/* Tablet & Mobile: 1-Spalten-Layout (bis 1024px) */
@media (max-width: 1024px) { 
    .schwarzer-bereich-magazin { 
        min-height: auto; 
        padding-bottom: 15rem; 
    } 

    .trennlinie-wrapper {
        padding-top: 5rem;
        padding-bottom: 0rem;
    }

    .magazin-punkte-sektion { 
        margin-top: 1rem; 
    } 

    .magazin-raster { 
        grid-template-columns: 1fr; 
        gap: 2rem; 
        max-width: 100%; 
    }

    .magazin-punkt-karte { 
        padding-right: 0; 
        padding-bottom: 2rem; 
    }

    .magazin-punkt-karte:not(:last-child)::after { 
        content: '';
        position: absolute;
        width: 100%; 
        height: 1px; 
        top: auto; 
        bottom: 0; 
        right: auto; 
        left: 0; 
        background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 4px); 
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); 
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); 
    }

    .magazin-titel { font-size: 1.25rem; }

    .magazin-cta-wrapper {
        margin-top: 3.5rem; 
    }
}

/* Nur Handys: Vertikale Position, reduziertes Spacing & mobile Textschaltung (bis 768px) */
@media (max-width: 768px) {
    .schwarzer-bereich-magazin {
        top: 85vh;
        padding-bottom: 9rem; /* Vorher: 15rem. Je kleiner der Wert, desto kompakter schließt der Layer unten ab */
    }

    .schwarzer-bereich-magazin .intro-anschluss-inhalt {
        padding-top: 0.5rem !important; 
    }

    .magazin-reveal-element {
        transition: filter 0.8s ease-out, opacity 0.7s ease-out, transform 0.7s ease-out;
    }

    /* Text-Umschaltung für Mobilgeräte */
    .magazin-text.desktop-only {
        display: none !important;
    }

    .magazin-text.mobile-only {
        display: block !important;
    }

    /* Gleichmäßiger Abstand über Punkt 01 (exakt passend zu 02 & 03) */
    .trennlinie-wrapper {
        padding-bottom: 0;
    }

    .magazin-punkte-sektion {
        margin-top: 1rem;
    }

    /* Typografie & Zeilenabstände */
    .magazin-karte-kopf {
        margin-bottom: 0;
    }

    .magazin-punkt-karte {
        gap: 0.25rem;
        padding-bottom: 1rem;
    }

    .magazin-raster {
        gap: 1rem;
    }
}
/* ==========================================================================
   12. EBENE FRAU (ZITAT, PORTRÄT & TEAM)
   ========================================================================== */
.ebene-frau { 
    position: fixed; 
    inset: 0; 
    z-index: 20; 
    width: 100%; 
    height: 100vh; 
    height: 100svh; 
    background-color: #e1c7a4; 
    overflow: hidden; 
    pointer-events: none; 
    visibility: visible; /* Auf visible geändert */
    will-change: visibility; 
}
.frau-schleier {
    position: absolute;
    inset: 0;
    background-color: var(--eisblau);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    will-change: opacity;
}
.frau-bild-layer { position: absolute; bottom: 0; left: 0; height: 100vh; height: 100svh; display: flex; align-items: flex-end; pointer-events: none; z-index: 1; transform: translateX(clamp(-50%, calc((100vw - 1200px) * 0.55 - 15%), -5%)); }
.frau-bild { height: 100%; width: auto; object-fit: contain; object-position: left bottom; display: block; }
.frau-bild-layer::after { content: ""; position: absolute; top: 0; right: 0; width: 30%; height: 100%; background: linear-gradient(in oklab to right, transparent 0%, #e1c7a4 100%); pointer-events: none; }
.zitat-wrapper { position: relative; z-index: 2; width: 100%; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; pointer-events: none; }
.rechte-spalte { grid-column: 2; justify-self: center; width: fit-content; max-width: 100%; padding-right: clamp(2rem, 4vw, 4rem); padding-left: clamp(1rem, 2vw, 2rem); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 3vh, 2.5rem); pointer-events: auto; transform: translateY(clamp(-4rem, 10vh, -3rem)); }
.zitat-container { display: flex; flex-direction: column; width: fit-content; max-width: 100%; margin: 0; text-align: left; padding: 0; }
.zitat-text { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; color: var(--eisblau); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; transform: translateY(3.5rem); margin: 0; }
.team-brand-wrapper {
    display: contents;
}
.team-container { width: 100%; margin: 0; transform: translateY(7rem); }
.team-grid { display: grid; grid-template-columns: max-content 1fr; column-gap: clamp(0.8rem, 1.5vw, 1.4rem); row-gap: clamp(0.35rem, 0.6vh, 0.65rem); align-items: baseline; }
.team-name { text-align: right; font-size: clamp(0.92rem, 1.05vw, 1.05rem); font-weight: 500; color: var(--text-farbe); white-space: nowrap; }
.team-titel { text-align: left; font-size: clamp(0.88rem, 0.95vw, 0.98rem); font-weight: 300; color: var(--text-farbe); line-height: 1.3; }
.brand-container { position: relative; display: inline-block; width: fit-content; max-width: 100%; margin: 0; margin-top: clamp(2.5rem, 6vh, 5rem); opacity: 0.8; text-align: left; padding: 0; font-size: clamp(1.4rem, calc(0.8rem + 1.6vw), 3.2rem); transform: translateY(10rem); }
.brand-logo { position: absolute; right: calc(100% + 0.45em); top: 0.22em; height: 0.75em; width: auto; display: block; }
.brand-titel { display: block; font-weight: 500; color: var(--eisblau); line-height: 1.22; letter-spacing: -0.02em; text-transform: uppercase; }
.brand-line { display: inline-block; white-space: nowrap; }
/* Tablet & Übergangsbereich: Text nach links holen & Zitat schützen */

@media (max-width: 480px) {
    .ebene-frau,
    .zitat-wrapper {
        overflow-x: clip;
    }

    .frau-bild-layer { 
        transform: translateX(-29%); 
        height: 100vh; 
        height: 100svh; 
        bottom: 0; 
    }
    
    .zitat-wrapper { 
        grid-template-columns: 1fr; 
    }

    .rechte-spalte { 
        grid-column: 1; 
        justify-self: stretch; 
        width: 100%; 
        max-width: 100%; 
        height: 100vh; 
        height: 100svh; 
        position: relative; 
        display: flex;
        flex-direction: column;
        justify-content: flex-end; 
        align-items: flex-end; 
        padding-top: 2rem; 
        padding-bottom: clamp(1.2rem, 3.5svh, 2rem); 
        padding-left: 1rem; 
        padding-right: 1.25rem; 
        box-sizing: border-box;
        transform: none; 
    }
    
    /* 1. Wrapper auflösen für freie Sortierung */
    .team-brand-wrapper {
        display: contents;
    }

    /* 2. Tanja Törsel & Team: Ganz oben (Order 1) */
    .brand-container { 
        order: 1;
        position: relative; 
        margin: 0 0 0.55rem 0; /* Abstand um ca. 30 % verringert */
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end; 
        width: 100%;
        font-size: clamp(0.85rem, 3.2vw, 0.95rem); 
        transform: none; 
    }

    .brand-logo {
        display: none !important;
    }

    .brand-titel {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0.15rem;
        line-height: 1.15;
        color: var(--eisblau);
        font-weight: 600;
    }

    .brand-line {
        display: block;
        white-space: nowrap;
    }

    /* 3. Zitat-Glaskarte: In der Mitte (Order 2) */
    .zitat-container { 
        order: 2;
        align-self: flex-end;
        position: relative;
        width: fit-content; 
        max-width: calc(100% + 1.25rem); 
        margin: 0 -1.25rem 0.55rem 0; /* Abstand nach unten um ca. 30 % verringert (vorher 0.8rem) */
        padding: 0.45rem 1.25rem 0.45rem 0.6rem; 
        box-sizing: border-box;
        transform: none !important; 
    }

    .zitat-container::before {
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background-color: transparent;
        border: 1px solid color-mix(in srgb, var(--eisblau) 20%, transparent);
        border-right: none;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        z-index: -1;
        pointer-events: none;
    }

    .zitat-text { 
        text-align: left;
        font-size: clamp(1.15rem, 4.4vw, 1.45rem); 
        line-height: 1.15; 
        margin: 0;
        transform: none !important;
        color: var(--eisblau);
        text-transform: uppercase;
        background: none;
        -webkit-text-fill-color: initial;
        white-space: nowrap;
    }

    .zitat-text span {
        display: block;
        white-space: nowrap;
    }

    /* 4. Team-Glaskarte: Ganz unten (Order 3) */
    .team-container { 
        order: 3;
        position: relative;
        width: fit-content;
        max-width: calc(100% + 1.25rem);
        margin: 0 -1.25rem 0 0;
        padding: 0.45rem 1.25rem 0.45rem 0.5rem;
        box-sizing: border-box;
        transform: none;
    }

    .team-container::before {
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background-color: transparent;
        border: 1px solid color-mix(in srgb, var(--eisblau) 20%, transparent);
        border-right: none;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        z-index: -1;
        pointer-events: none;
    }

    .team-grid { 
        width: fit-content; 
        display: grid; 
        grid-template-columns: auto minmax(0, 1fr); 
        column-gap: 0.6rem; 
        row-gap: clamp(0.18rem, 0.4svh, 0.3rem); 
    }

    .team-name { 
        font-size: clamp(0.76rem, 2.8vw, 0.84rem); 
        white-space: nowrap; 
        text-align: right; 
        color: var(--eisblau);
        font-weight: 500;
    }

    .team-titel {
        font-size: clamp(0.72rem, 2.6vw, 0.8rem);
        line-height: 1.2;
        white-space: normal;
        text-align: left;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* ==========================================================================
   13. INHALTS-SEKTION (HALTUNG & ANSPRUCH)
   ========================================================================== */
.inhalt-sektion { 
    padding: 14rem 0; 
    background-color: var(--eisblau); 
    position: relative; 
    z-index: 50; 
}

.text-block-gross { 
    max-width: 100%; 
}

.sektions-badge { 
    position: relative; 
    display: inline-block; 
    color: var(--grau-akzent); 
    font-size: 1.1rem; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    padding-left: 0.8rem; 
    margin-bottom: 5rem; 
}

.sektions-badge::before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    height: 0.9em; 
    width: 2.5px; 
    background-color: var(--akzent-farbe); 
}

.akzent-zeichen { 
    color: var(--akzent-farbe); 
}

.text-zeile, 
.text-normal { 
    color: var(--grau-akzent); 
    font-size: 1.15rem; 
    max-width: 100%; 
}

.trennlinie { 
    width: 100%; 
    height: 1px; 
    margin: 14rem 0; 
    background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 4px);
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.uhrwerk-icon {
    width: 100%;
    max-width: 20rem; 
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    top: -4rem;    
    left: 0;   
}

.haltung-grid { 
    display: grid; 
    grid-template-columns: 1.4fr 1fr; 
    gap: 4rem; 
    align-items: stretch; 
}

.linke-text-spalte { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    gap: 1.5rem; 
}

.rechte-text-spalte { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start; 
    gap: 1rem; 
}

.daten-euro-icon { 
    width: 100%; 
    max-width: 55rem; 
    height: auto; 
    display: block; 
}

@media (min-width: 1025px) { 
    .daten-euro-icon { 
        width: 35vw; 
        max-width: 55rem; 
        position: relative;
        top: 0;    
        left: -2rem;  
    } 
}

.haltung-rhythmus {
    display: grid;
    grid-template-columns: 12rem 1fr;
    column-gap: 0.5rem;
    row-gap: 0.2rem;
    align-items: baseline;
}

.haltung-rhythmus .vorsatz {
    justify-self: end;
}

.text-eingerueckt {
    grid-column: 2; 
    margin-top: 1.8rem; 
}

/* --- TABLET (769px bis 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .inhalt-sektion { 
        padding: 8rem 0; 
    }
    
    .inhalt-sektion .container { 
        padding: 0 var(--seiten-padding); 
    }

    .trennlinie { 
        margin: 6.5rem 0; 
    }

    .haltung-grid {
        grid-template-columns: 1fr;
        gap: 0rem;
    }

    .rechte-text-spalte {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 2rem;
    }

    .daten-euro-icon {
        max-width: 620px;
        margin: 0 auto;
    }

    .uhrwerk-icon {
        top: 0;
        left: 0;
        max-width: 440px;
    }

    .anspruch-block .rechte-text-spalte {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
    }
}

/* --- MOBILE (bis 768px) --- */
@media (max-width: 768px) {
    .inhalt-sektion {
        padding: 1rem 0 2rem 0;
    }

    .inhalt-sektion .container { 
        padding: 0 var(--seiten-padding); 
    }

    .trennlinie { 
        margin: 1rem 0; 
        margin-top: 2.5rem; 
    }

    .inhalt-sektion .sektions-badge {
        margin-bottom: 3.2rem;
    }

    .haltungs-block .sektions-badge {
        margin-bottom: 3rem;
    }

    .haltung-grid { 
        grid-template-columns: 1fr; 
        gap: 0rem; 
    }

    .haltung-rhythmus {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0.6rem;
        row-gap: 0; 
    }

    .haltung-rhythmus .vorsatz {
        justify-self: start;
        margin-top: 1rem; 
    }

    .haltung-rhythmus .vorsatz:first-of-type {
        margin-top: 0;
    }

    .text-eingerueckt {
    grid-column: auto; 
    margin-top: 1.5rem;
    }

    .rechte-text-spalte {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 2rem;
    }

   .daten-euro-icon {
        width: 100%;
        max-width: 100%; /* Vorher: 290px */
        margin: 0 auto;
    }

    .uhrwerk-icon {
        top: 0rem;  /* Vorher: 0 – zieht das Icon jetzt minimal nach oben */
        left: -1.8rem; /* Vorher: 0 – rückt das Icon minimal nach links */
        max-width: 260px;
    }
}
@media (min-width: 769px) {
    .vorhang-sektion .sektions-titel,
    .versprechen-sektion .sektions-titel,
    .kontakt-haupt-titel,
    .kontakt-sub-titel,
    .entlastung-wrapper,
    .kontakt-text-bereich { 
        margin-left: 6rem; 
    }
}
/* ==========================================================================
   14. LEISTUNGSMATRIX & FOOTER-EBENE
   ========================================================================== */
.footer-ebene { position: relative; z-index: 300; background-color: var(--tiefes-schwarz); }
@media (max-width: 1024px) { .footer-ebene .container { padding: 0 var(--seiten-padding); } }

.vorhang-sektion { position: relative; background-color: var(--tiefes-schwarz); color: var(--eisblau); padding: 14rem 0 12rem; z-index: 5; overflow-x: clip; overflow-y: visible; }
.vorhang-sektion .sektions-titel { margin-bottom: 4rem; }

.zahnrad-hintergrund-layer {
    position: absolute;
    width: 1200px;
    height: 700px;
    transform: rotate(90deg) scale(1.15);
    transform-origin: center center;
    top: -13.5rem;        
    right: -11rem;    
    left: auto;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35; 
}

.zahnrad-hintergrund-layer img { display: none; }

.zahnrad-hintergrund-layer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--grau-akzent);
    -webkit-mask-image: url('images/zahnrad-hintergrund.svg');
    mask-image: url('images/zahnrad-hintergrund.svg');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.zahnrad-hintergrund-layer svg { width: 100%; height: 100%; object-fit: cover; }
.zahnrad-hintergrund-layer svg *, .zahnrad-hintergrund-layer svg g { stroke: var(--grau-akzent) !important; }

@media (max-width: 1024px) {
    .zahnrad-hintergrund-layer {
        display: block !important;
        left: calc(50% - 600px);
        right: auto;
        top: -12.5rem; 
        transform: rotate(90deg) scale(0.65); 
    }
}

.dotgrid-hintergrund-matrix {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none; opacity: 0.3;
    background-image: radial-gradient(var(--grau-akzent) 1px, transparent 1px);
    background-size: 6px 6px; background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.leistungen-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-bottom: 8rem; margin-top: 7.5rem; }

.leistungs-karte { 
    background-color: var(--tiefes-schwarz); 
    border: none; padding: 2.5rem 1.8rem; 
    display: flex; flex-direction: column; justify-content: flex-start; 
    position: relative; z-index: 2; 
}
@media (max-width: 1024px) { .leistungs-karte { width: 100%; } }

.leistungs-kopf { 
    display: flex; flex-direction: column; gap: 0.5rem; 
    padding: 0.5rem 0 1.5rem; position: relative; cursor: default;
}
.leistungs-kopf::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; 
    background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 4px);
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.leistungs-titel-main { color: var(--akzent-farbe); font-size: clamp(1rem, 1.3vw, 1.35rem); text-transform: uppercase; font-weight: 400; margin: 0; }
.leistungs-schlagwort { color: var(--grau-akzent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }

.mobile-schlagwort { display: none; }

.leistungs-body { padding-top: 1.5rem; }
.leistungs-text { color: var(--eisblau); font-size: 0.95rem; margin: 0; }

.accordion-plus { display: none; color: var(--akzent-farbe); font-size: 2.5rem; font-weight: 300; }

@media (max-width: 1024px) {
    .leistungen-raster { display: flex; flex-direction: column; gap: 0; width: 100%; margin: 0 0 4rem 0; }
    .leistungs-karte { background-color: transparent; padding: 0; }
    .leistungs-titel-main { color: var(--eisblau); grid-column: 1; margin: 0; padding-right: 1rem; line-height: 1.2; }
    
    .desktop-schlagwort { display: none; }
    .mobile-schlagwort { display: block; margin-bottom: 0.6rem; }

    .leistungs-kopf { display: grid; grid-template-columns: 1fr max-content; align-items: center; min-height: 4.8rem; padding: 0; cursor: pointer; }
    .leistungs-karte.is-open .leistungs-kopf::after { opacity: 0; }

    .accordion-plus { display: block; position: static; transform: none; grid-column: 2; line-height: 0.8; margin-bottom: 0; transition: transform 0.3s ease; }
    .leistungs-karte.is-open .accordion-plus { transform: rotate(45deg); }
    
    .leistungs-body { max-height: 0; overflow: hidden; padding-top: 0; margin-bottom: 0; position: relative; transition: max-height 0.4s ease, opacity 0.4s ease, padding-top 0.4s ease, padding-bottom 0.4s ease; opacity: 0; }

    .leistungs-body::after {
        content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; 
        background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 4px);
        opacity: 0.6;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    }
    
    .leistungs-karte.is-open .leistungs-body { max-height: 800px; opacity: 1; padding-top: 0.5rem; padding-bottom: 4.5rem; }
    .compliance-banner { margin-top: 3rem; }
}

.compliance-banner { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 1.2rem; padding: 2.5rem 1.8rem 0 1.8rem; z-index: 2; position: relative; align-self: end; }
.bbh-link { text-decoration: none; }
.bbh-inner { display: flex; align-items: flex-end; gap: 1rem; }
.bbh-logo { height: 32px; width: auto; display: block; margin-bottom: 2px; filter: grayscale(100%) brightness(1.5) opacity(75%); transition: filter 0.3s ease; }
.bbh-text { display: inline; color: var(--grau-akzent); font-size: 0.65rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.03em; }
.bbh-link:hover .bbh-logo { filter: none; }
.bbh-link:hover .bbh-text { color: var(--eisblau); }
.compliance-text { color: var(--grau-akzent); font-size: 0.7rem; line-height: 1.5; margin: 0; font-weight: 400; }
@media (max-width: 768px) {
    .vorhang-sektion {
        padding-top: 6rem; /* Vorher: 14rem – zieht den Titel deutlich näher an die schwarze Oberkante */
    }
    .vorhang-sektion .sektions-badge {
        margin-bottom: 3rem; /* Exakt derselbe Wert wie bei .haltungs-block */
    }
    .zahnrad-hintergrund-layer {
        /* 1. GRÖSSE: Relativer Skalierungsfaktor (bisher 0.65) */
        transform: rotate(90deg) scale(0.4); 

        /* 2. VERTIKAL: In rem gesteuert */
        top: -13rem; /* Weiter ins Minus = höher | Näher an 0 = tiefer */

        /* 3. HORIZONTAL: In rem statt Pixeln */
        left: calc(50% - 28rem); 
    }
}
/* ==========================================================================
   14a. EIGENSTÄNDIGE FOKUS-SEKTION (100% Box)
   ========================================================================== */
.fokus-sektion { background-color: var(--tiefes-schwarz); padding: 0 0 8rem; position: relative; z-index: 5; }
.fokus-box { text-align: center; background: transparent; border: none; padding: 4rem 2rem; border-radius: 0; position: relative; z-index: 2; }
.fokus-nummer { font-size: clamp(4.5rem, 12vw, 8.5rem); font-weight: 100; color: var(--akzent-farbe); display: block; margin-bottom: 1rem; line-height: 1; }
.fokus-box h3 { font-size: clamp(1.4rem, 4vw, 2rem); text-transform: uppercase; margin-bottom: 1rem; color: var(--eisblau); }

/* ==========================================================================
   15. MAXIMALE ENTLASTUNG, KONTAKT & FOOTER
   ========================================================================== */
.versprechen-sektion, .kontakt-sektion, .site-footer { 
    background-color: var(--tiefes-schwarz); 
    color: var(--eisblau); 
    padding: 8rem 0; 
    position: relative; 
    z-index: 5; 
    border-top: none; 
}
.site-footer {
    background-color: var(--tiefes-schwarz);
    color: var(--eisblau);
    padding: 4rem 0 6rem 0;
    text-align: center;
    position: relative;
    z-index: 400; /* Auf 400 erhöhen, damit er über haupt-scroll-block (150) liegt */
}

.versprechen-sektion::before, .kontakt-sektion::before, .site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 4px);
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.entlastung-wrapper { display: flex; flex-direction: column; margin-top: 7.5rem; }

.entlastung-liste-container { 
    width: 100%;
    display: flex; 
    align-items: flex-start; 
    margin-top: -0.3rem; 
}

.versprechen-liste { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.versprechen-liste li { font-size: clamp(1.2rem, 4vw, 1.8rem); font-weight: 700; display: flex; align-items: center; text-transform: uppercase; color: var(--eisblau); }
.quadrat-bullet { width: 14px; height: 14px; background-color: var(--akzent-farbe); display: inline-block; margin-right: 1.2rem; flex-shrink: 0; }
.kontakt-sub-titel {
    margin-top: 0;
    margin-bottom: 0;
}

.kontakt-haupt-titel {
    margin-top: 0.2rem;
}
.kontakt-wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; 
    gap: 4rem; 
    margin-top: 7.5rem; 
}
.kontakt-text-bereich {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}

.kontakt-intro { color: var(--eisblau); font-weight: 500; margin-bottom: 2rem; font-size: 1.05em; }
.kontakt-blindtext { color: var(--grau-akzent); margin-bottom: 2.5rem; font-size: inherit; }

.kontakt-daten-block {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    gap: 1rem;
}

.kontakt-daten-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.icon-zeile { 
    flex-direction: row; 
    align-items: flex-start; 
    gap: 1rem; 
}

.daten-icon { 
    width: 20px; 
    height: 20px; 
    flex-shrink: 0; 
    color: var(--grau-akzent); 
    margin-top: 0.15rem; 
}
.daten-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grau-akzent);
}
.daten-wert {
    font-size: inherit;
    color: var(--grau-akzent);
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    line-height: var(--text-line-height);
}
.daten-link-orange {
    color: var(--eisblau);
    text-decoration: none;
    transition: color 0.3s ease;
}
.daten-link-orange:hover {
    color: var(--akzent-farbe);
}

.mobile-call-button {
    display: none; 
}

.kontakt-formular-bereich { 
    flex: 1 1 400px; 
    padding: 2.5rem; 
    border: 1px solid color-mix(in srgb, var(--grau-akzent) 40%, transparent); 
    background-color: transparent; 
    background-image: radial-gradient(color-mix(in srgb, var(--grau-akzent) 40%, transparent) 1px, transparent 1px);
    background-size: 6px 6px;
    background-position: center;
}

.kontakt-formular { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
}

.formular-feld { 
    width: 100%; 
    padding: 1.2rem; 
    background-color: var(--tiefes-schwarz); 
    border: 1px solid color-mix(in srgb, var(--grau-akzent) 40%, transparent); 
    color: var(--grau-akzent); 
    font-family: 'Inter', sans-serif; 
    font-size: 1em; 
    border-radius: 0; 
    transition: border-color 0.25s ease; 
}

.formular-feld::placeholder {
    color: var(--grau-akzent);
    opacity: 1;
}

.formular-feld:focus { 
    outline: none; 
    border-color: var(--akzent-farbe); 
}

textarea.formular-feld { 
    resize: vertical; 
}

.formular-datenschutz {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    cursor: pointer;
    user-select: none;
    margin-top: -0.25rem;
}

.formular-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
    background-color: var(--tiefes-schwarz);
    border: 1px solid color-mix(in srgb, var(--grau-akzent) 50%, transparent);
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    border-radius: 0;
    transition: all 0.2s ease;
}

.formular-checkbox:checked {
    background-color: var(--akzent-farbe);
    border-color: var(--akzent-farbe);
}

.formular-checkbox:checked::before {
    content: "";
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--eisblau);
    border-bottom: 2px solid var(--eisblau);
    transform: rotate(-45deg) translate(1px, -1px);
}

.datenschutz-text {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.45;
}

.datenschutz-link {
    color: var(--eisblau);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s ease;
}

.datenschutz-link:hover {
    color: var(--akzent-farbe);
}

.formular-submit { 
    padding: 1.2rem; 
    background-color: var(--tiefes-schwarz); 
    border: 1px solid var(--akzent-farbe); 
    color: var(--akzent-farbe); 
    cursor: pointer; 
    font-family: 'Inter', sans-serif; 
    font-size: 1rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    transition: all 0.3s ease; 
    border-radius: 0; 
}

.formular-submit:hover { 
    background-color: var(--akzent-farbe); 
    color: var(--eisblau); 
}

.formular-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--grau-akzent);
    color: var(--grau-akzent);
}
/* NEU ERSETZEN: */
@media (max-width: 768px) {
    .versprechen-sektion {
        padding-top: 1rem;
    }

    .versprechen-sektion::before {
        display: none;
    }

    .versprechen-sektion .sektions-badge {
        margin-bottom: 3rem;
    }

    .kontakt-sektion {
        padding-top: 1rem;
    }

    .kontakt-sektion .sektions-badge {
        margin-bottom: 3rem;
    }

    .kontakt-wrapper {
        flex-direction: column;
        gap: 2.5rem;
        margin-top: 2rem; 
    }

    .kontakt-daten-block {
        display: none;
    }

    .kontakt-formular-bereich {
        padding: 1.5rem;
    }

    /* Der Button NUR mobil: Transparent, oranger Rahmen, vor dem Intro-Text */
    .mobile-call-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        order: -1;
        width: 100%;
        padding: 1.2rem;
        margin-top: 0;
        margin-bottom: 2rem;
        background-color: transparent;
        border: 1px solid var(--akzent-farbe);
        color: var(--akzent-farbe);
        text-decoration: none;
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-radius: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .mobile-call-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        stroke: currentColor;
    }

    .mobile-call-button:hover,
    .mobile-call-button:active {
        background-color: var(--akzent-farbe);
        color: var(--eisblau);
    }
}
/* ==========================================================================
   15a. SEO & TRUST BEREICH
   ========================================================================== */
.seo-trust-sektion {
    background-color: var(--tiefes-schwarz);
    padding: 2.5rem 0 2.5rem 0; 
    position: relative;
    z-index: 5;
    text-align: left;
}

.seo-trust-text {
    color: var(--grau-akzent);
    max-width: 700px;
    margin-top: 0;
    margin-bottom: 7rem;
    text-align: left;
}

@media (min-width: 769px) {
    .seo-trust-text,
    .seo-trust-sektion .magazin-cta-button {
        margin-left: 6rem;
    }
}
/* ==========================================================================
   20. SEO & CONTENT BEREICH (Startseite Details / Akkordeon)
   ========================================================================== */
.raster-rechts {
    width: 55vw; 
    left: auto;
    right: calc(var(--seiten-padding) * -1); 
    top: -4rem; 
    bottom: -4rem; 
    transform: none;
    
    -webkit-mask-image: 
        linear-gradient(to bottom, transparent 0%, black 15%, black 65%, transparent 90%),
        linear-gradient(to left, black 0%, black 15%, transparent 85%);
    -webkit-mask-composite: source-in;
    
    mask-image: 
        linear-gradient(to bottom, transparent 0%, black 15%, black 65%, transparent 90%),
        linear-gradient(to left, black 0%, black 15%, transparent 85%);
    mask-composite: intersect;
}

.details-content-wrapper {
    position: relative;
    z-index: 10;
    margin-top: 3rem; 
}

.details-header-block {
    margin-bottom: clamp(3rem, 6vh, 4.5rem);
}

.details-lead-text {
    color: var(--grau-akzent);
    font-size: 1.15rem;
    font-weight: 300;
    margin: 0;
    max-width: 850px; 
}

.details-raster {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 769px) {
    .details-lead-text,
    .details-raster {
        margin-left: 6rem;
    }
}

.details-sektion {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.details-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
    max-width: 950px;
    gap: 2rem;
}

.details-kopf-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.details-kicker {
    font-size: 1.02em; /* 5 % größer als der geerbte Fließtext */
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--eisblau);
    text-transform: uppercase;
    line-height: 1.3;
}

.details-sektion .details-h2 {
    font-size: 1.05em; /* 10 % größer als der geerbte Fließtext */
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--grau-akzent);
    text-transform: none;
    margin: 0;
}

.details-sektion .accordion-plus {
    display: flex !important; 
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--akzent-farbe);
    font-weight: 300;
    line-height: 0.8;
    margin-bottom: 0;
    transition: transform 0.3s ease;
}

.details-sektion.is-open .accordion-plus {
    transform: rotate(45deg);
}

.details-linie {
    width: 100%;
    max-width: 950px;
    height: 2px;
    margin-top: 1.8rem;
    background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 5px);
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.details-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.details-sektion.is-open .details-body {
    max-height: 500px;
    opacity: 1;
    padding-top: 1.5rem;
}

.details-text {
    color: var(--grau-akzent);
    margin: 0;
    max-width: 800px;
}

.details-cta-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    margin-bottom: 2rem;
}
#leistungen, #kontakt {
    scroll-margin-top: 100px;
}
/* ==========================================================================
   FOOTER (Fortsetzung)
   ========================================================================== */
.footer-copyright {
    color: var(--grau-akzent);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.footer-links { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 2rem; 
    flex-wrap: nowrap;
}

.footer-link { 
    color: var(--grau-akzent); 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 0.9rem; 
    letter-spacing: 1px; 
    transition: color 0.3s ease; 
}

.footer-link:hover { 
    color: var(--akzent-farbe); 
}
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==========================================================================
   16. MOBILES MENÜ OVERLAY (OHNE BLUR, PERFORMANT)
   ========================================================================== */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--tiefes-schwarz) 100%, transparent) 40%,
        color-mix(in srgb, var(--tiefes-schwarz) 90%, transparent) 75%,
        transparent 100%
    );
    z-index: 9998;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 130px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body:has(.mobile-menu-overlay.is-active) .seiten-kopf {
    transform: translateY(0) !important;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    width: 80%;
    max-width: 320px;
    text-align: center;
}

.mobile-link {
    color: var(--eisblau);
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.4rem 0;
    display: block;
    position: relative;
    transition: color 0.2s ease;
}

.mobile-link:hover,
.mobile-link:active {
    color: var(--akzent-farbe);
}

.mobile-link:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--grau-akzent) 0, var(--grau-akzent) 2px, transparent 2px, transparent 5px);
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

@media (min-width: 769px) {
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* 1. Hintergrund fixieren und Scrollen des Overlays erlauben */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: color-mix(in srgb, var(--tiefes-schwarz) 90%, transparent);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow-y: auto;
    padding: 1rem;
}

.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    background-color: var(--tiefes-schwarz);
    border: 1px solid color-mix(in srgb, var(--grau-akzent) 40%, transparent);
    padding: 3.5rem 2.5rem 2.5rem;
    background-image: radial-gradient(color-mix(in srgb, var(--grau-akzent) 40%, transparent) 1px, transparent 1px);
    background-size: 6px 6px;
    background-position: center;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .modal-content {
        border: 1px solid color-mix(in srgb, var(--grau-akzent) 60%, transparent);
        background-image: radial-gradient(color-mix(in srgb, var(--grau-akzent) 60%, transparent) 1px, transparent 1px);
    }
}
.modal-overlay.is-active .modal-content {
    transform: translateY(0);
}

body:has(.modal-overlay.is-active) {
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--grau-akzent);
    font-size: 2.5rem;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
    padding: 0;
    z-index: 10;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 3.5rem 1.5rem 1.5rem;
    }
}

/* ==========================================================================
   17a. DATENSCHUTZ MODAL
   ========================================================================== */
.datenschutz-modal-content {
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    text-align: left;
    position: relative;
}

.datenschutz-close-sticky {
    position: sticky;
    top: 0;
    float: right;
    z-index: 100;
    background: var(--tiefes-schwarz);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--akzent-farbe);
}

.datenschutz-close-sticky:hover {
    color: var(--eisblau);
}

.datenschutz-titel {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    margin-top: -1rem;
}

.datenschutz-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    color: var(--grau-akzent);
    font-size: 0.95rem;
    line-height: 1.8;
    clear: both;
}

.datenschutz-untertitel {
    color: var(--eisblau);
    font-size: 1.1rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.datenschutz-absatz {
    margin-top: 1rem;
}

/* ==========================================================================
   18. DUNKLE UNTERSEITEN (DATENSCHUTZ, IMPRESSUM, JOBS)
   ========================================================================== */
body.dunkle-unterseite {
    background-color: var(--tiefes-schwarz);
    color: var(--grau-akzent);
}

body.dunkle-unterseite .sektions-titel,
body.dunkle-unterseite h1,
body.dunkle-unterseite h2,
body.dunkle-unterseite h3 {
    color: var(--eisblau);
}

.datenschutz-main,
.impressum-main {
    padding: 12rem 0 8rem 0;
}

/* ==========================================================================
   19. JOBS SEITE
   ========================================================================== */
.jobs-main {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding-top: 100px; /* 60px Header + exakt 40px sichtbare Luft = identisch mit Ankern */
    padding-bottom: 8rem;
}

.jobs-main .details-content-wrapper {
    margin-top: 0; /* Verhindert die zusätzlichen 3rem Abstand */
}

/* 1. Vertikaler Abstand unter dem Badge wie bei Kontakt (5rem) */
.jobs-main .sektions-badge {
    margin-bottom: 5rem;
}

/* 1. Typografie des Kickers */
.jobs-kicker {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--grau-akzent);
    text-transform: uppercase;
    line-height: 1.08;
    margin-bottom: 0.9rem;
}

/* 2. Titelzeilen ohne störende Lücke */
.jobs-titel {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.08;
    margin-bottom: 0;
    color: var(--eisblau);
}

@media (max-width: 1024px) {
    .jobs-titel {
        line-height: 1.18; /* Exakter Zeilenabstand aller H2 auf Mobilgeräten */
    }
}

/* 2. Beidseitig gleichen Wunschabstand für das Intro definieren */
.jobs-intro {
    color: var(--grau-akzent);
    font-size: clamp(1.1rem, 1.3vw, 1.2rem);
    max-width: 750px;
    margin-top: 5.5rem;    /* Schiebt den Text nach unten (Wert nach Wunsch anpassen) */
    margin-bottom: 5.5rem; /* Exakt derselbe Abstand zur Box */
}

.job-karte {
    position: relative;
    background-color: var(--tiefes-schwarz);
    border: 1px solid color-mix(in srgb, var(--grau-akzent) 40%, transparent);
    padding: 3rem;
    max-width: 800px;
    overflow: hidden;
}

.job-karte::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--grau-akzent) 40%, transparent) 1px, transparent 1px);
    background-size: 6px 6px;
    background-position: center;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 65%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 65%);
}

.job-karte > * {
    position: relative;
    z-index: 2;
}
.jobs-main .raster-rechts {
    top: 15rem;
    bottom: -15rem; /* Gibt dem Gitter nach unten hin wieder vollen Raum */
}
@media (max-width: 768px) {
    .job-karte {
        padding: 2rem 1.5rem;
    }
}

.job-badge {
    color: var(--akzent-farbe);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.5rem;
}

.job-text {
    color: var(--grau-akzent);
    margin-bottom: 2.5rem;
}

.job-text p {
    margin: 0 0 1.2rem 0;
}

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

.job-karte .magazin-cta-button {
    background-color: var(--tiefes-schwarz);
}

.job-karte .magazin-cta-button:hover {
    background-color: var(--akzent-farbe);
    color: var(--eisblau);
}

@media (min-width: 769px) {
    .jobs-titel,
    .jobs-intro,
    .job-karte {
        margin-left: 6rem;
    }
}