/* =======================================================================
   WECHSELPUNKT — site.css
   Baut auf den echten Design-System-Dateien auf (css/design-tokens.css →
   css/tokens/*.css: Farben, Schriftgrößen, Abstände, exakt aus Figma).
   Aufbau dieser Datei:
   1. Grundformatierung & Fluid-Typografie (skaliert bis genau zur
      Figma-Größe bei Desktop-Breite — siehe "1440px-Regel" unten)
   2. Buttons (primary / secondary / dark / dark-auf-schwarz)
   3. Header & Navigation (inkl. mobiles Menü)
   4. Jeder Seitenabschnitt: erst die responsive Grundversion (Handy bis
      kleine Laptops), danach ganz unten der Block "1440px-Regel" mit der
      exakten Pixel-Position aus dem Figma-Export für große Bildschirme.
   5. Footer mit "Reveal"-Effekt (schwebt am unteren Bildschirmrand)
   ======================================================================= */

:root{--backdrop:#242424} /* Browserhintergrund außerhalb der 1440px-Seite — dunkles Anthrazit */

*,*::before,*::after{box-sizing:border-box}
/* Kein "scroll-behavior:smooth" hier: das kollidiert nachweislich mit GSAP
   ScrollTrigger (ruckelnde/springende Scroll-Reveals, da beide Systeme die
   Scroll-Position gegeneinander ausspielen). Sanftes Scrollen inkl. sanfter
   Sprünge zu Anker-Links übernimmt stattdessen Lenis in js/animate.js, das
   speziell für das Zusammenspiel mit ScrollTrigger gebaut ist. */
html{-webkit-text-size-adjust:100%;background:var(--backdrop)}
body{margin:0;background:var(--backdrop);color:var(--text-main);font-family:var(--font-core);overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
p{margin:0}
::selection{background:var(--wp-accent);color:var(--wp-black)}
:focus-visible{outline:2px solid var(--wp-accent);outline-offset:2px}
.dot{color:var(--wp-accent)}

/* ---------- Seitenübergang: weiches Hochschieben beim Laden ----------
   Der Seiteninhalt (<main>, alles UNTER dem Header) schiebt sich beim
   Laden eine Bildschirmhöhe von unten ins Bild — mit einer weich
   auslaufenden Kurve (dieselbe "premium"-Kurve, die auf dieser Seite schon
   bei Karten-/Bild-Hovers für ein rundes Abbremsen statt hartem Stopp
   sorgt), damit die Bewegung physikalisch stimmig wirkt. Läuft rein per
   CSS-Animation, bei jedem Laden automatisch — kein JS, kann also nie
   hängenbleiben oder Inhalt dauerhaft verstecken.

   Bewusst auf "main" statt auf ".page-content" (das den Header mit
   umschließt): der Header (position:sticky) soll fest oben stehen bleiben
   und NICHT mittanimieren. ".page-content" selbst bewegt sich dadurch gar
   nicht mehr — sein Hintergrund deckt Header- und Main-Bereich also
   durchgehend ab, der fest positionierte Footer (.footer-fixed) kann so
   während der Animation nie mehr durchscheinen (der Bug des vorigen
   Versuchs, als noch ".page-content" komplett bewegt wurde).

   "100vh" statt "100%": Prozent bei transform bezieht sich auf die EIGENE
   Höhe von <main> (oft mehrere Bildschirmhöhen lang) und würde die Seite
   viel zu weit nach unten schieben. */
main{animation:wp-page-enter .9s cubic-bezier(.16,1,.3,1) both}

@keyframes wp-page-enter{from{transform:translateY(100vh)}}

@media (prefers-reduced-motion:reduce){
  main{animation:none}
}

/* ---------- 1a. Scroll-Reveal & Lade-Animationen ----------
   Die eigentliche Animation (Hero-Einstieg, Scroll-Reveal bei .reveal /
   .reveal-group, Zähl-Effekt bei .count-up-value) steckt komplett in
   js/animate.js (GSAP + ScrollTrigger, per CDN eingebunden) — hier keine
   CSS-Transitions/Keyframes mehr dafür. GSAP setzt die Anfangszustände erst
   zur Laufzeit per Inline-Style; ohne JavaScript bleibt der Inhalt dadurch
   automatisch normal sichtbar (kein "für immer unsichtbar"-Risiko). */

.page{position:relative;max-width:1440px;margin:0 auto;background:var(--background)}
.page-content{position:relative;z-index:1;background:var(--background)}

/* Fluid-Überschriften: die clamp()-Werte wachsen mit der Bildschirmbreite
   und erreichen bei ~1440px exakt die Figma-Größe (z.B. 64px im Hero). So
   ist Mobile lesbar UND Desktop bleibt pixelgenau, ohne zwei Regelsätze. */
.wp-display{font-size:clamp(2.25rem,6vw,4rem)}
.wp-display-2{font-size:clamp(2rem,6.4vw,4rem)}
.wp-h1{font-size:clamp(1.75rem,4.4vw,3.25rem)}
.wp-h2{font-size:clamp(1.75rem,4.2vw,3rem)}
.wp-h3{font-size:clamp(1.5rem,3.8vw,2.75rem)}
.wp-h5{font-size:clamp(1.125rem,2.4vw,1.75rem)}

/* ---------- 2. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 20px;border-radius:var(--radius-button,8px);border:0;font-family:var(--font-core);font-weight:400;font-size:16px;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 120ms ease}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--wp-accent);color:var(--wp-black)}
.btn-primary:hover{background:var(--wp-black);color:var(--wp-white)}
.btn-secondary{background:var(--wp-black);color:var(--wp-white)}
.btn-secondary:hover{background:var(--wp-accent);color:var(--wp-black)}
.btn-dark{background:var(--wp-white);color:var(--wp-black);box-shadow:inset 0 0 0 1px var(--wp-black)}
.btn-dark:hover{background:var(--wp-black);color:var(--wp-white)}
.btn-dark.on-dark{box-shadow:none}
.btn-dark.on-dark:hover{background:var(--wp-accent);color:var(--wp-black)}

/* ---------- 3. Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--background);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px;padding:12px clamp(20px,4.5vw,80px);box-sizing:border-box}
.site-logo{display:block;flex-shrink:0}
.site-logo img{width:clamp(150px,13.5vw,243px);height:auto;display:block}
.site-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
.site-nav a.nav-cta,.site-nav a.nav-cta:hover{font-size:16px;padding:10px 18px}
.site-nav a.btn-secondary{color:var(--wp-white)}
.site-nav a.btn-secondary:hover{color:var(--wp-black)}

/* Nav-Pills: pro Link ein eigener Unterstrich (statt Rahmen). Zusätzlich
   fährt bei jedem Punkt ein "›" von links ein (dezenter Spring-Effekt via
   cubic-bezier mit leichtem Überschwingen). */
.nav-links-group{position:relative;display:flex;align-items:center;gap:clamp(0px,0.4vw,6px)}
.nav-pill{position:relative;display:flex;align-items:center;padding:9px 8px;font-size:14px;font-weight:400;color:var(--text-main);text-decoration:none;white-space:nowrap;cursor:pointer}
.nav-pill:hover{color:var(--text-main)}

/* Unterstrich, der beim Hover von links hereinschiebt: der Trick steckt im
   Wechsel des transform-origin zwischen Ruhe- und Hover-Zustand. In Ruhe
   ist die Linie rechts auf 0 zusammengeschoben (transform-origin:right),
   beim Hover wächst sie auf volle Breite, aber der Ursprung springt dabei
   auf links — dadurch WIRKT es, als schiebe sich die Linie von links ein.
   Beim Verlassen läuft das exakt umgekehrt: sie zieht sich weiter nach
   rechts durch, statt einfach nach links zurückzuspringen — daher der
   fließende, "einseitige" Schwung statt eines symmetrischen Ein-/Ausblendens. */
.nav-pill .nav-label,.nav-services-btn .nav-label{position:relative;display:inline-block}
.nav-pill .nav-label::after,.nav-services-btn .nav-label::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.nav-pill:hover .nav-label::after,.nav-pill:focus-visible .nav-label::after,
.nav-services-btn:hover .nav-label::after,.nav-services-btn:focus-visible .nav-label::after,
.nav-services.is-open>.nav-services-btn .nav-label::after{transform:scaleX(1);transform-origin:left}
.nav-services-btn{display:flex;align-items:center;background:none;border:none;padding:0;margin:0;font:inherit;font-size:inherit;color:inherit;cursor:pointer;transition:opacity 120ms ease}
.nav-services-btn:active{opacity:.6}

.nav-arrow{display:inline-block;margin-right:6px;font-size:.85em;line-height:1;opacity:0;transform:translateX(-8px) rotate(0deg);transition:opacity 200ms ease,transform 380ms cubic-bezier(.34,1.56,.64,1)}
.nav-services-btn:hover .nav-arrow,.nav-services-btn:focus-visible .nav-arrow,
.nav-link:hover .nav-arrow,.nav-link:focus-visible .nav-arrow{opacity:1;transform:translateX(0) rotate(0deg)}
.nav-services.is-open>.nav-services-btn>.nav-arrow{opacity:1;transform:translateX(0) rotate(-90deg)}

/* Dropdown: helles Glass-Panel mit Blur, sanftes Herabgleiten beim Öffnen
   (opacity + translateY statt display:none, damit es animieren kann).
   Die Links bekommen den gleichen einfahrenden "›" wie die Hauptnav, bleiben
   farblich aber durchgehend Schwarz (kein Hover-Farbwechsel). */
.services-menu{position:absolute;top:100%;left:0;margin-top:12px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.15);padding:20px 24px;display:flex;flex-direction:column;gap:14px;border-radius:8px;min-width:180px;box-shadow:0 12px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 220ms ease,transform 260ms cubic-bezier(.2,0,.2,1),visibility 0s linear 260ms}
.services-menu a{display:flex;align-items:center;color:#000;font-size:14px}
.services-menu a:hover{color:#000}
.services-menu a:hover .nav-arrow,.services-menu a:focus-visible .nav-arrow{opacity:1;transform:translateX(0) rotate(0deg)}
.nav-services.is-open .services-menu{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 220ms ease,transform 260ms cubic-bezier(.2,0,.2,1),visibility 0s linear 0s}
.nav-toggle{display:none;width:32px;height:32px;padding:0;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;flex-shrink:0;transition:transform 120ms ease}
.nav-toggle:active{transform:scale(.88)}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--wp-black);transition:transform 160ms ease,opacity 160ms ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- 4a. Hero ---------- */
.hero{position:relative;min-height:min(88vh,780px);overflow:hidden;background:url(../assets/img/hero.jpg) center/cover no-repeat;display:flex;flex-direction:column;justify-content:center;gap:80px;padding:96px clamp(20px,5.5vw,80px) 56px}
.hero-content{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,4vw,64px);max-width:min(573px,90%)}
.hero-heading{margin:0;text-transform:uppercase}
.hero-heading .line-mask{display:block;overflow:hidden}
.hero-heading .line{display:block}
.hero-line{position:static;width:auto;max-width:46ch}
.hero-line-right{margin-top:-40px}

/* ---------- 4b. Über / "Das ist WECHSELPUNKT" ---------- */
.about{position:relative;overflow:hidden;background:url(../assets/img/fluid-wave2.webp) center/cover no-repeat;padding:clamp(48px,7vw,96px) clamp(20px,5.5vw,81px) clamp(64px,9vw,120px);display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.about-rule{display:none}
.about-intro{display:flex;flex-direction:column;gap:16px;max-width:52ch}
.about-kicker{margin:0;font-size:16px;font-weight:700;color:var(--text-main)}
.about-heading{margin:0;text-align:left;text-transform:uppercase}
.about-tagline{margin:0;max-width:34ch}
.about-buttons{display:flex;flex-wrap:wrap;gap:16px}
.about-buttons .btn:hover{background:var(--wp-gray-80);color:var(--wp-white)}
.about-buttons .btn-dark:hover{box-shadow:inset 0 0 0 1px var(--wp-gray-80)}

/* ---------- 4c. Bereiche (schwarzes Karten-Band) ---------- */
.bereiche{position:relative;overflow:hidden;background:var(--wp-black);display:flex;flex-direction:column;gap:0;padding:clamp(40px,6vw,64px) clamp(20px,5.5vw,80px)}
.bereiche-card{flex:1;border-left:1px solid var(--border);padding:24px;box-sizing:border-box;transition:background-color 260ms ease}
.bereiche-card:hover{background:rgba(255,255,255,.04)}
/* Hover-Lift bewusst auf ein inneres Element statt auf .bereiche-card selbst:
   die Scroll-Reveal-Animation (js/animate.js, GSAP-Scrub) steuert bei .bereiche-card
   dauerhaft ein Inline-"transform" — ein eigener Hover-transform auf demselben
   Element würde von GSAP bei jedem Scroll-Tick sofort wieder überschrieben. */
.bereiche-card-inner{height:100%;display:flex;flex-direction:column;gap:24px;transition:transform 450ms cubic-bezier(.16,1,.3,1)}
.bereiche-card:hover .bereiche-card-inner{transform:translateY(-16px)}
.bereiche-card h3{text-transform:uppercase}
.bereiche-body{display:flex;flex-direction:column;gap:12px}
.bereiche-card .btn{align-self:flex-start;margin-top:8px}

/* ---------- 4d. Angebot (Einzelpersonen / Unternehmen) ---------- */
.angebot{position:relative;overflow:hidden;background:var(--background);padding:clamp(48px,7vw,96px) clamp(20px,5.5vw,79px)}
.angebot-label{margin:0 0 8px;font-size:16px;font-weight:400;color:var(--text-main)}
.angebot-num{margin-right:6px}
.angebot-intro{max-width:52ch;margin-bottom:clamp(24px,4vw,48px)}
.angebot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,3vw,34px)}
.angebot-item{margin:0;display:flex;flex-direction:column;gap:16px}
.angebot-item .img-clip{overflow:hidden}
.angebot-item img{width:100%;aspect-ratio:295/366;object-fit:cover;transition:transform 500ms cubic-bezier(.16,1,.3,1)}
.angebot-item:hover img{transform:scale(1.045)}
.angebot-item figcaption{display:flex;flex-direction:column;gap:12px}
.angebot-item h4{margin:0;text-transform:uppercase;transition:color 200ms ease}
.angebot-item:hover h4{color:var(--wp-gray-50)}
.angebot-note{margin-top:clamp(24px,4vw,40px);max-width:70ch;color:var(--text-secondary)}

/* Angebot-Variante mit Überschrift statt "01/02"-Nummer (Unterseiten wie
   Coaching/Beratung/Strategie: "TYPISCHE WECHSELPUNKTE."). */
.angebot-heading-block{display:flex;flex-direction:column;gap:12px;max-width:70ch;margin:0 0 clamp(24px,4vw,48px)}
.angebot-heading-block h2{margin:0;text-transform:uppercase}
.angebot-heading-sub{margin:0;color:var(--text-main)}

/* ---------- 4e. Erfahrung ---------- */
.erfahrung{position:relative;padding:clamp(48px,7vw,96px) clamp(20px,5.5vw,80px);display:flex;flex-direction:column;gap:clamp(32px,5vw,56px)}
.erfahrung-portrait{width:100%;max-width:420px;aspect-ratio:514/753;object-fit:cover;margin:0 auto}
.erfahrung-text{display:flex;flex-direction:column;gap:clamp(24px,4vw,40px)}
.erfahrung-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.erfahrung-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:clamp(24px,4vw,40px)}
.erfahrung-stat{display:flex;flex-direction:column;gap:8px;min-width:0}
.erfahrung-stat .value{font-family:var(--font-core);font-weight:900;font-size:clamp(2rem,4.6vw,3.25rem);line-height:1;color:var(--text-main)}
.erfahrung-stat .label{font-size:14px;color:var(--text-main);white-space:nowrap}
.erfahrung-rule{height:1px;background:var(--rule)}
.erfahrung-quote{position:relative;background:var(--overlay-quote);padding:16px;display:flex;flex-direction:column}
.erfahrung-quote .who{margin:0 0 24px;font-size:14px;font-weight:900;color:var(--text-main)}
.erfahrung-quote .lines{display:flex;flex-direction:column;gap:17px}
.erfahrung-quote p{font-size:14px;line-height:140%;color:var(--text-main)}
.erfahrung-next{align-self:flex-end;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transform:rotate(90deg);display:flex;align-items:center;justify-content:center;transition:background-color 200ms ease,transform 200ms ease}
.erfahrung-next:hover{background:rgba(0,0,0,.06);transform:rotate(90deg) scale(1.12)}
.erfahrung-next:active{transform:rotate(90deg) scale(.9)}
.erfahrung-next img{width:13px;height:12px}

/* ---------- 4h. Service-Hero (Unterseiten: Coaching/Beratung/Strategie) ---------- */
.service-hero{position:relative;min-height:min(88vh,780px);overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:center;gap:clamp(32px,6vw,64px);padding:96px clamp(20px,5.5vw,80px) 56px}
.service-hero-content{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,3vw,28px);max-width:min(483px,90%)}
.service-hero-content h1{margin:0;text-transform:uppercase}
.service-hero-sub{margin:0;max-width:52ch}

/* ---------- 4i. Service-Intro ("Sektion 2" der Unterseiten) ---------- */
.service-intro{position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;padding:clamp(48px,7vw,96px) clamp(20px,5.5vw,81px) clamp(64px,9vw,120px);display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.service-intro-main{display:flex;flex-direction:column;gap:16px;max-width:60ch}
.service-intro-main h2{margin:0;text-transform:uppercase}
.service-intro-main .body-block{display:flex;flex-direction:column;gap:14px}
.service-intro-main p{margin:0}
.service-intro-cta{display:flex;flex-direction:column;gap:8px;max-width:40ch}
.service-intro-cta .kicker{margin:0;font-weight:900;font-size:16px;line-height:110%;text-transform:uppercase;color:var(--text-main)}
.service-intro-cta p{margin:0}
.service-intro-buttons{display:flex;flex-wrap:wrap;gap:16px}
.service-intro-buttons .btn:hover{background:var(--wp-gray-80);color:var(--wp-white)}
.service-intro-buttons .btn-dark:hover{box-shadow:inset 0 0 0 1px var(--wp-gray-80)}

/* ---------- 4j. Zusammenarbeit (2 Bilder + 2 Textspalten) ---------- */
.zusammenarbeit{position:relative;overflow:hidden;background:var(--wp-white);padding:clamp(48px,7vw,80px) clamp(20px,5.5vw,80px);display:flex;flex-direction:column;gap:32px}
.zusammenarbeit img{width:100%;aspect-ratio:635/353;object-fit:cover;display:block;transition:transform 500ms cubic-bezier(.16,1,.3,1)}
.zusammenarbeit img:hover{transform:scale(1.035)}
.zus-col{display:flex;flex-direction:column;gap:16px}
.zus-col h2{margin:0;text-transform:uppercase}
.zus-col p{margin:0}
.zus-media-1{order:1}
.zus-col-1{order:2}
.zus-media-2{order:3}
.zus-col-2{order:4}

/* ---------- 4k. Über-mich-Seite: Hero (Bildunterschrift unten im Bild) ---------- */
.person-hero{position:relative;min-height:min(88vh,780px);overflow:hidden;background-size:cover;background-position:center bottom;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:flex-end;gap:28px;padding:56px clamp(20px,5.5vw,80px) 96px}
.person-hero-copy{display:flex;flex-direction:column;gap:28px;align-items:flex-start;max-width:min(560px,90%)}
.person-hero-text{display:flex;flex-direction:column;gap:18px}
.person-hero-copy h1{margin:0;text-transform:uppercase}
.person-hero-copy p{margin:0;max-width:483px}

/* ---------- 4l. Über-mich-Seite: "Über mich" & "Werdegang" (Bild + Text) ---------- */
.person-section{position:relative;overflow:hidden;background:var(--wp-white);padding:clamp(48px,7vw,96px) clamp(20px,5.5vw,81px);display:flex;flex-direction:column;gap:clamp(32px,5vw,48px)}
.person-section.is-reversed{flex-direction:column}
.person-section img{width:100%;aspect-ratio:623/726;object-fit:cover;display:block}
.person-copy{display:flex;flex-direction:column;gap:16px}
.person-copy h2{margin:0;text-transform:uppercase}
.person-copy p{margin:0}
.person-credentials{background:rgb(230,230,230);padding:28px;box-sizing:border-box}
.person-credentials ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.person-credentials li{font-size:14px;line-height:140%;color:var(--wp-black)}
.person-rule{height:1px;background:rgba(0,0,0,0.3)}

/* ---------- 4m. Über-mich-Seite: Kunden & Projekte (Logo-Ticker + Stimmen) ---------- */
.person-kunden{position:relative;overflow:hidden;background:var(--background);padding:clamp(48px,7vw,96px) 0}
.person-kunden-head{padding:0 clamp(20px,5.5vw,79px);display:flex;flex-direction:column;gap:16px;max-width:70ch;margin-bottom:clamp(40px,8vw,96px)}
.person-kunden-head h2{margin:0;text-transform:uppercase}
.person-kunden-head p{margin:0;color:var(--text-main)}
.logo-ticker{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);margin-bottom:clamp(40px,8vw,96px)}
.logo-ticker-track{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;animation:logo-ticker-scroll 38s linear infinite}
.logo-ticker:hover .logo-ticker-track{animation-play-state:paused}
.logo-item{display:flex;align-items:center;height:32px;flex-shrink:0}
.logo-item img{height:100%;width:auto;display:block}
@keyframes logo-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-ticker-track{animation:none}}
.stimmen{padding:0 clamp(20px,5.5vw,79px);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.stimme{background:#222222;border:1px solid #3D3D3D;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;transition:transform 220ms cubic-bezier(.16,1,.3,1),box-shadow 220ms ease}
.stimme:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.12)}
.stimme .who{margin:0 0 6px;font-weight:900;font-size:12px;color:#FFFFFF}
.stimme .stars{margin:0 0 6px;color:var(--wp-accent);font-size:14px;letter-spacing:2px}
.stimme p{margin:0;font-size:12px;line-height:145%;color:#FFFFFF}

/* ---------- 4n. Kontakt-Seite: Formular über Hero-Bild ---------- */
.kontakt-hero{position:relative;min-height:min(88vh,780px);overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:clamp(40px,8vw,96px) clamp(20px,5.5vw,80px)}
.erst-hero-copy{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:640px}
.erst-hero-copy h1{margin:0;text-transform:uppercase}
.erst-hero-copy p{margin:0}
.kontakt-form{width:100%;max-width:405px;box-sizing:border-box;border-radius:20px;background:var(--wp-white);border:1px solid var(--wp-black);display:flex;flex-direction:column;gap:24px;padding:28px}
.kontakt-field{display:flex;flex-direction:column;gap:8px}
.kontakt-field label{font-size:13px;color:var(--wp-black)}
.kontakt-field input,.kontakt-field textarea{height:50px;box-sizing:border-box;border-radius:10px;background:var(--wp-white);border:1px solid rgba(0,0,0,0.15);padding:10px;font-family:var(--font-core);font-size:14px;color:var(--wp-black);outline:none;resize:none}
.kontakt-field textarea{height:110px}
.kontakt-form .btn{width:100%;height:37px;border:0}
.kontakt-form .btn[disabled]{opacity:.6;cursor:default}
/* Honeypot-Feld: für echte Besucher unsichtbar (nicht per display:none, das
   überspringen simple Bot-Skripte oft gezielt), bleibt aber im Tab-Fluss
   ausgenommen (tabindex="-1" im HTML). Füllt ein Bot es trotzdem aus,
   verwirft contact.php die Anfrage still, ohne eine Mail zu verschicken. */
.kontakt-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kontakt-status{margin:0;font-size:14px;line-height:140%}
.kontakt-status:empty{display:none}
.kontakt-status.is-success{color:#2e7d32}
.kontakt-status.is-error{color:#c62828}
.kontakt-note{font-size:12px;color:var(--wp-white);text-align:center;max-width:405px;margin:16px auto 0}

/* ---------- 4o. Erstgespräch-Seite: Cal.com-Einbettung über Hero-Bild ---------- */
.cal-embed-card{width:100%;max-width:900px;height:min(78vh,720px)}

/* ---------- 4p. Rechtsseiten: Impressum & Datenschutz ---------- */
.legal-page{position:relative;background:var(--wp-white);display:flex;flex-direction:column;align-items:flex-start;padding:clamp(112px,16vw,150px) clamp(20px,6vw,80px) clamp(48px,7vw,80px)}
.legal-content{width:100%;max-width:820px;display:flex;flex-direction:column;gap:clamp(32px,5vw,48px)}
.legal-content>h1{text-transform:uppercase}
.legal-section{display:flex;flex-direction:column;gap:24px}
.legal-section>h2{margin:0;text-transform:uppercase}
.legal-sub{display:flex;flex-direction:column;gap:8px}
.legal-sub h3{margin:0;font-family:var(--font-core);font-weight:900;font-size:16px;line-height:110%;color:var(--wp-black)}
.legal-sub p,.legal-sub li{line-height:150%}
.legal-sub ul{margin:4px 0 0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:6px}
.legal-sub a{color:var(--wp-black)}

/* ---------- 4q. Werte & FAQs-Seite ---------- */
.werte-hero{position:relative;min-height:min(92vh,860px);overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:96px clamp(20px,5.5vw,80px) 56px}
.werte-hero-content{display:flex;flex-direction:column;max-width:min(520px,90%)}
.werte-hero-content h1{margin:0;text-transform:uppercase}
.werte-hero-bottom{display:flex;flex-direction:column;gap:20px;max-width:min(520px,90%)}
.werte-hero-kicker{margin:0;font-weight:900;font-size:16px;color:var(--wp-black)}
.werte-hero-bottom p.wp-body{margin:0}
.werte-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.werte-section{position:relative;background:var(--wp-white);padding:clamp(48px,7vw,96px) clamp(20px,5.5vw,80px);scroll-margin-top:70px}
.werte-section-intro{max-width:74ch;display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px,5vw,48px)}
.werte-section-intro h2{margin:0;text-transform:uppercase}
.werte-section-intro p{margin:0}
.werte-grid{display:grid;grid-template-columns:1fr;gap:16px}
.werte-card{border:1px solid var(--wp-black);border-radius:8px;padding:clamp(24px,4vw,40px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;transition:border-color 220ms ease}
.werte-card:hover{border-color:var(--wp-accent)}
.werte-card-icon{width:44px;height:44px;flex-shrink:0}
.werte-card-icon svg{width:100%;height:100%;stroke:var(--wp-black);fill:none;stroke-width:1.4}
.werte-card h3{margin:0;text-transform:uppercase}
.werte-card p{margin:0;max-width:46ch}

.faq-section{position:relative;background:var(--wp-white);padding:clamp(48px,7vw,96px) clamp(20px,5.5vw,80px);scroll-margin-top:70px}
.faq-section-intro{max-width:74ch;display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px,5vw,48px)}
.faq-section-intro h2{margin:0;text-transform:uppercase}
.faq-section-intro p{margin:0}
.faq-group{margin-bottom:clamp(32px,5vw,48px)}
.faq-group:last-child{margin-bottom:0}
.faq-group h3{margin:0 0 16px;text-transform:uppercase}
.faq-list{display:flex;flex-direction:column;gap:6px}
.faq-item{background:var(--wp-black);border-radius:8px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;color:var(--wp-white);font-size:14px;font-weight:600;transition:color 160ms ease}
.faq-item summary:hover{color:var(--wp-accent)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;width:18px;height:18px;flex-shrink:0}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--wp-white);border-radius:1px}
.faq-icon::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}
.faq-icon::after{top:0;left:50%;width:2px;height:100%;transform:translateX(-50%);transition:opacity .15s,transform .15s}
.faq-item[open] .faq-icon::after{opacity:0;transform:translateX(-50%) rotate(90deg)}
/* Sanftes Ausklappen statt hartem Aufspringen: ".faq-answer" ist immer ein
   Grid-Container mit einer einzigen Zeilenspur, die zwischen 0fr (zu) und 1fr
   (offen) animiert wird ("grid-template-rows" ist animierbar, "display:none"
   der nativen <details> nicht) — das display:grid hier überschreibt bewusst
   die Browser-Vorgabe, die nicht geöffnete <details>-Kinder sonst hart per
   display:none versteckt. padding-bottom läuft synchron mit, sonst bliebe im
   geschlossenen Zustand ein kleiner Rest-Abstand stehen. */
.faq-answer{margin:0;padding:0 24px 0;color:var(--wp-white);font-size:13px;line-height:150%;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows 480ms cubic-bezier(.16,1,.3,1),padding-bottom 480ms cubic-bezier(.16,1,.3,1)}
.faq-item[open] .faq-answer{grid-template-rows:1fr;padding-bottom:20px}

/* ---------- 4f. CTA ---------- */
.cta{position:relative;background:var(--wp-black);display:flex;flex-direction:column;gap:32px;padding:clamp(64px,10vw,135px) clamp(24px,8vw,136px);justify-content:center;align-items:center;text-align:center}
.cta h2{margin:0;text-transform:uppercase}
.cta-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cta-buttons .btn:hover{background:var(--wp-gray-80);color:var(--wp-white)}

/* ---------- 4g. Footer / Impressum ----------
   "Reveal"-Footer: der Footer liegt fest (position:fixed) am unteren
   Bildschirmrand, UNTER dem restlichen Inhalt. Der Inhalt oben (page-content)
   hat einen deckenden Hintergrund und schiebt sich beim Scrollen darüber weg
   — der Footer wird dadurch erst sichtbar ("revealed"), wenn man ganz unten
   angekommen ist und weiterscrollt. Der Platzhalter .footer-spacer sorgt
   dafür, dass die Seite genau so weit scrollt, wie der Footer hoch ist
   (Höhe wird per JS von main.js live nachgeführt, da der Footer je nach
   Bildschirmbreite unterschiedlich hoch ist). Funktioniert bei jeder
   Fenstergröße, nicht nur bei sehr hohen Bildschirmen. */
.footer-spacer{position:relative}
.footer-fixed{position:fixed;left:0;right:0;bottom:0;z-index:0;pointer-events:none}
.footer-fixed .site-footer{pointer-events:auto}
.site-footer{position:relative;max-width:1440px;margin:0 auto;background:url(../assets/img/footer-bg.jpg) center/cover no-repeat;padding:clamp(40px,6vw,80px) clamp(20px,5.5vw,80px);display:flex;flex-direction:column;gap:clamp(56px,9vw,128px)}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.9) 16%,rgba(0,0,0,.78) 30%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.22) 66%,rgba(0,0,0,.1) 78%,rgba(0,0,0,.03) 90%,rgba(0,0,0,0) 100%)}
.footer-top{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px;justify-content:space-between}
.footer-brand{display:flex;flex-direction:column;gap:24px;max-width:320px}
.footer-brand img{width:clamp(200px,22vw,340px);height:auto}
.footer-brand p{font-size:14px;line-height:140%;color:var(--wp-white)}
.footer-brand a:hover{color:var(--wp-accent)}
.footer-claim{display:flex;flex-direction:column;gap:24px;align-items:flex-end;text-align:right;max-width:380px}
.footer-claim .claim{margin:0;font-family:var(--font-core);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.05;color:var(--wp-white)}
.footer-claim .copyright{font-size:14px;color:var(--wp-white)}
.footer-cols{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px}
.footer-col{display:flex;flex-direction:column;gap:20px}
.footer-col h3{margin:0;text-transform:uppercase;color:var(--wp-white)}
.footer-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col a{font-size:14px;color:var(--wp-white)}
.footer-col a:hover{color:var(--wp-accent)}

/* ---------- Reduzierte Bewegung: reine CSS-Hover-Effekte ----------
   js/animate.js prüft prefers-reduced-motion bereits selbst (bricht dann
   komplett ab). Diese hier laufen aber unabhängig davon rein über CSS
   :hover/:active — daher hier zusätzlich für alle, die spürbare Bewegung
   (Verschieben/Skalieren) abgeschaltet haben, deaktiviert. Farb-/Opacity-
   Übergänge bleiben bewusst erhalten, die gelten nicht als Bewegungsreiz. */
@media (prefers-reduced-motion:reduce){
  .btn:active,.nav-toggle:active{transform:none!important}
  .erfahrung-next,.erfahrung-next:hover,.erfahrung-next:active{transform:rotate(90deg)!important}
  .bereiche-card:hover .bereiche-card-inner{transform:none!important}
  .angebot-item:hover img{transform:none!important}
  .nav-arrow{transform:none!important}
  .services-menu,.nav-services.is-open .services-menu{transform:none!important}
  .zusammenarbeit img:hover{transform:none!important}
  .stimme:hover{transform:none!important}
  .nav-pill .nav-label::after,.nav-services-btn .nav-label::after{transition:none!important}
}

/* ---------- Mobiles Menü (<1000px) ---------- */
@media (max-width:999px){
  .nav-toggle{display:flex}
  .site-nav{position:fixed;top:70px;left:0;right:0;bottom:0;margin:0;background:var(--background);flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(20px,5.5vw,80px) 32px;overflow-y:auto;transform:translateX(100%);transition:transform 220ms ease;z-index:25}
  .site-nav.is-open{transform:translateX(0)}

  /* Auf dem Handy gibt es keinen Hover — der Unterstrich pro Link greift
     dadurch ohnehin nicht, der "›" ist immer sichtbar (kein Einfahren ohne
     Hover), Services klappt per Klick als Liste auf (Akkordeon). */
  .nav-links-group{flex-direction:column;align-items:stretch;gap:0}
  .nav-pill{padding:16px 0;border-bottom:1px solid var(--border-hairline,#e5e5e5)}
  .nav-arrow{opacity:1;transform:translateX(0) rotate(0deg)}
  .nav-services{flex-direction:column;align-items:stretch;border-bottom:1px solid var(--border-hairline,#e5e5e5);padding:0}
  .nav-services-btn{padding:16px 0;width:100%}
  .services-menu{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;margin:0;padding:0 0 16px;border-radius:0;box-shadow:none;gap:16px;transform:none}
  .nav-services.is-open .services-menu{transform:none}
  .services-menu a{color:var(--wp-black)}

  .nav-cta{margin-top:16px;border:0;width:fit-content}
}

/* ======================================================================
   1440px-REGEL — ab hier exakt wie im Figma-Export (Desktop-Kanvas).
   Unterhalb von 1440px gilt die responsive Grundversion oben.
   ====================================================================== */
@media (min-width:1440px){
  .page{width:1440px}

  .site-header{height:70px;padding:10px 80px}
  .site-logo img{width:243px}
  .site-nav{gap:35px}
  .nav-cta{width:130px;height:37px;padding:0}

  .hero{height:953px;min-height:953px;display:block;padding:0;overflow:hidden}
  .hero-content{position:absolute;left:80px;top:100px;width:573px;max-width:none;gap:64px}
  .hero-line{position:absolute;margin:0;max-width:none}
  .hero-line-left{left:80px;top:810px;width:425px}
  .hero-line-right{left:1035px;top:824px;width:327px;white-space:nowrap;line-height:1;margin-top:0}

  .about{height:939px;padding:0;display:block;overflow:hidden}
  .about-rule{display:block;position:absolute;left:81px;top:8px;width:1277px;height:1px;background:var(--border)}
  .about-intro{position:absolute;left:81px;top:98px;width:394px;max-width:none}
  .about-heading{position:absolute;right:81px;top:94px;width:399px;text-align:right}
  .about-tagline{position:absolute;left:81px;top:721px;width:296px;max-width:none}
  .about-buttons{position:absolute;left:81px;top:815px;display:contents}
  .about-btn-a{position:absolute;left:81px;top:817px;width:144px;height:37px;padding:0}
  .about-btn-b{position:absolute;left:243px;top:815px;width:134px;height:39px;padding:0}

  .bereiche{height:600px;flex-direction:row;gap:34px;padding:0 80px;justify-content:space-between;align-items:center}
  .bereiche-card{flex:none;width:404px;height:380px}
  .bereiche-card-inner{justify-content:space-between}
  .bereiche-card h3{white-space:nowrap}

  .angebot{height:880px;padding:0;overflow:hidden}
  .angebot-label{position:absolute;left:79px;top:92px;margin:0;white-space:nowrap}
  .angebot-num{font-size:52px;letter-spacing:-0.025em}
  .angebot-intro{position:absolute;right:79px;top:120px;margin:0;line-height:normal;text-align:right;white-space:nowrap;max-width:none}
  .angebot-intro--with-heading{top:157px;line-height:100%}
  .angebot-grid{position:absolute;left:79px;top:190px;display:flex;flex-direction:row;gap:34px}
  .angebot-item{width:295px}
  .angebot-item img{width:295px;height:366px}
  .angebot-item h4{white-space:nowrap}
  .angebot-note{position:absolute;left:79px;top:800px;width:900px;margin:0;max-width:none;white-space:nowrap}
  .angebot-heading-block{position:absolute;left:79px;top:92px;width:830px;margin:0}
  .angebot-heading-block h2{white-space:nowrap}
  .angebot-heading-sub{font-size:14px;line-height:140%}

  .service-hero{height:953px;min-height:953px;display:block;padding:0;overflow:hidden}
  .service-hero-content{position:absolute;left:78px;top:158px;width:483px;max-width:none;gap:28px}
  .service-hero-sub{position:absolute;left:80px;top:810px;width:456px;max-width:none;margin:0}
  /* Seitenspezifische Breiten/Positionen (nur Desktop-Kanvas, ersetzen die
     Inline-Styles — die dürften sonst auch auf Mobile durchschlagen). */
  .service-hero-content--beratung{width:600px}
  .service-hero-sub--beratung{top:864px;width:336px}
  .service-hero-content--strategie{width:551px}
  .service-hero-sub--strategie{top:904px;width:420px}

  .service-intro{height:939px;padding:0;display:block;overflow:hidden}
  .service-intro-main{position:absolute;left:81px;top:98px;width:513px;max-width:none}
  .service-intro-cta{position:absolute;left:81px;top:721px;width:296px;max-width:none}
  .service-intro-buttons{position:absolute;left:81px;top:815px;flex-wrap:nowrap}
  .service-intro-buttons .btn{width:139px;height:38px;padding:0}

  .person-hero{height:953px;min-height:953px;padding:0;display:block;overflow:hidden}
  .person-hero-copy{position:absolute;left:79px;top:593px;width:560px;max-width:none}

  .person-section{height:1040px;padding:0;display:block;overflow:hidden}
  .person-section img{position:absolute;left:736px;top:112px;width:623px;height:726px}
  .person-copy{position:absolute;left:81px;top:98px;width:394px}
  .person-credentials{position:absolute;left:81px;top:650px;width:389px}
  .person-rule{position:absolute;left:83px;top:1015px;width:1276px}
  .person-section.is-reversed img{left:81px;top:99px}
  .person-section.is-reversed .person-copy{left:954px;top:84px}

  .person-kunden{min-height:880px;padding:92px 0}
  .person-kunden-head{padding:0 79px;width:900px;max-width:none}
  .person-kunden-head h2{white-space:nowrap}
  .logo-item{height:40px}
  .stimmen{padding:0 79px;grid-template-columns:repeat(3,329px);gap:147px;justify-content:start}

  .zusammenarbeit{min-height:880px;padding:80px;display:grid;grid-template-columns:635px 635px;gap:40px 10px}
  .zus-media-1{grid-column:1;grid-row:1;order:initial}
  .zus-media-2{grid-column:2;grid-row:1;order:initial}
  .zus-col-1{grid-column:1;grid-row:2;width:635px;order:initial}
  .zus-col-2{grid-column:2;grid-row:2;width:635px;order:initial}

  .erfahrung{height:1024px;padding:0;display:block;overflow:hidden}
  .erfahrung-portrait{position:absolute;left:80px;top:130px;width:514px;max-width:none;height:753px;margin:0}
  .erfahrung-text{display:contents}
  .erfahrung-text .wp-h3{position:absolute;left:736px;top:130px}
  .erfahrung-cols{position:absolute;left:736px;top:210px;display:flex;flex-direction:row;gap:0;width:622px}
  .erfahrung-col{width:300px}
  .erfahrung-col:first-child{margin-right:22px}
  .erfahrung-stats{position:absolute;left:736px;top:418px;width:621px;grid-template-columns:repeat(3,1fr);gap:24px}
  .erfahrung-rule{position:absolute;left:740px;top:595px;width:620px}
  .erfahrung-quote{position:absolute;left:736px;bottom:141px;width:622px;padding:0;background:var(--overlay-quote)}
  .erfahrung-next{position:absolute;left:1350px;top:897px}

  .cta{height:600px;padding:135px 136px;overflow:hidden}
  .cta.cta--sm{height:437px;padding:100px 136px}

  .kontakt-hero{height:953px;min-height:953px;padding:0;display:block;overflow:hidden}
  .kontakt-form{position:absolute;left:50%;top:216px;transform:translateX(-50%);width:405px;max-width:none;height:auto;justify-content:center;padding:20px}

  .erst-hero-copy{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:640px;max-width:none}
  .cal-embed-card{position:absolute;left:50%;top:280px;transform:translateX(-50%);width:900px;max-width:none;height:640px}

  .legal-page{padding:150px 80px 80px}
  .legal-content{width:820px}

  .werte-hero{height:953px;min-height:953px;padding:0;display:block;overflow:hidden}
  .werte-hero-content{position:absolute;left:79px;top:130px;width:520px;max-width:none}
  .werte-hero-bottom{position:absolute;left:79px;bottom:96px;width:520px;max-width:none}

  #werte .werte-section-intro h2{white-space:nowrap}

  .werte-grid{grid-template-columns:1fr 1fr;gap:24px}
  .werte-card{height:276px;justify-content:center}

  .site-footer{padding:80px;min-height:1024px;justify-content:space-between;overflow:hidden}
  .footer-top{height:195px;flex-wrap:nowrap}
  .footer-cols{grid-template-columns:repeat(5,1fr)}
}