/* =========================================================
   PUELS.LEGAL · Section-spezifische Animationen
   Jeder Bereich bekommt sein eigenes Verhalten — keine
   1:1-Wiederholungen. Modern, dezent, premium.
   ========================================================= */

/* ===== A) HERO — Direkte Headline-Animation ===========
   Erste Zeile: Wort-für-Wort fade-up.
   Zweite Zeile (gold em): stempelt sich mit kurzem Blur-Clear
   und kleinem Scale-Settle als Punchline rein.
   Goldakzent-Linie zeichnet sich anschließend darunter. */
.hero-copy h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: pl-word-rise .85s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  animation-delay: calc(var(--word-i, 0) * 75ms + 150ms);
  will-change: opacity, transform;
}
@keyframes pl-word-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Gold-Em ("rechtliche Bremse.") — Stamp-Auftritt als Punchline */
.hero-copy h1 em,
.hero h1 em {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(24px) scale(.97);
  filter: blur(4px);
  animation: pl-em-stamp 1s var(--ease-out, cubic-bezier(.16,1,.3,1)) .55s both;
  will-change: opacity, transform, filter;
}
@keyframes pl-em-stamp {
  0%   { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(4px); }
  55%  { opacity: 1; transform: translateY(-3px) scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

/* Goldakzent-Linie unter dem em-Wort */
.hero-copy h1 em::after,
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.05em;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--gold, #B08856) 0%,
    var(--gold-bright, #D4B36A) 50%,
    transparent 100%);
  animation: pl-em-underline 1.1s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1.35s forwards;
}
@keyframes pl-em-underline {
  to { width: 100%; }
}

/* Falls JS aussetzt oder noch nicht gelaufen ist: Fallback nach 1.5s */
.hero-copy h1,
.hero h1 {
  animation: pl-headline-fallback 0s linear 2.5s forwards;
}
@keyframes pl-headline-fallback {
  to { opacity: 1; }
}

/* Hero-Trust-Pills cascade nach Headline */
.hero-trust > * {
  opacity: 0;
  transform: translateY(12px);
  animation: pl-fade-rise .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  animation-delay: calc(900ms + var(--trust-i, 0) * 90ms);
}
@keyframes pl-fade-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero-Buttons cascade */
.hero-actions > * {
  opacity: 0;
  transform: translateY(14px);
  animation: pl-fade-rise .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  animation-delay: calc(1100ms + var(--cta-i, 0) * 120ms);
}

/* Hero-Portrait subtler Ken-Burns — kaum spürbar, nur Atmosphäre */
.hero-portrait img,
.hero-portrait video {
  animation: pl-kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes pl-kenburns {
  0%   { transform: scale(1)     translate(0, 0); }
  100% { transform: scale(1.025) translate(-.6%, -.4%); }
}

/* ===== B) USP-BAR — Icon-Pop + Underline-Akzent ======
   .usp-item bekommt:
   - Icon, das beim Erscheinen rotiert/skaliert reinpoppt
   - Goldakzent-Linie, die unter dem Text rauswächst */
.usp-item .usp-icon,
.usp-item > svg:first-child,
.usp-item > div > svg {
  transition: transform .6s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              filter .6s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.usp-item.is-visible .usp-icon,
.usp-item.is-visible > svg:first-child,
.usp-item.is-visible > div > svg {
  animation: pl-icon-pop .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes pl-icon-pop {
  0%   { opacity: 0; transform: scale(.85) rotate(-4deg); }
  60%  { opacity: 1; transform: scale(1.03) rotate(0); }
  100% { opacity: 1; transform: scale(1)   rotate(0); }
}

/* Goldakzent unter jedem USP-Item, der reinwächst */
.usp-item {
  position: relative;
}
.usp-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold, #B08856), transparent);
  transition: width 1.1s var(--ease-out, cubic-bezier(.16,1,.3,1)) .35s;
  pointer-events: none;
  z-index: 3;
}
.usp-item.is-visible::after { width: 56px; }

/* ===== C) SECTION-HEAD — Underline Draw ===============
   Headlines bekommen einen goldenen Strich, der
   beim Reinscrollen rauswächst. */
.section-head h2 {
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold, #B08856) 0%, var(--gold-soft, #C9A871) 70%, transparent 100%);
  transition: width 1.1s var(--ease-out, cubic-bezier(.16,1,.3,1)) .25s;
}
.section-head.is-visible h2::after,
.section-head.auto-reveal.is-visible h2::after {
  width: 88px;
}

/* Falls section-head selbst kein .auto-reveal hat,
   reagiert die h2 auf das eigene .is-visible */
.section-head h2.is-visible::after { width: 88px; }

/* ===== D) CARD-HOVER — einheitliches Verhalten =========
   Alle Service-/Team-/Location-/Feature-Cards bekommen das
   gleiche Hover-Muster wie die USP-Bar:
   - Sanfter Lift + leichtes Scale (wirkt "leicht größer")
   - Icon-Container glow + Scale
   - Headline wechselt auf Goldakzent
   - Paragraph wird heller
   3D-Tilt + Goldlinie am oberen Rand entfernt — wirkten unruhig. */
.service-tile,
.team-card,
.location-card,
.feature-card,
.review-card {
  transition:
    transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    border-color .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
  will-change: transform;
}

.service-tile:hover,
.team-card:hover,
.location-card:hover,
.feature-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-lg, 0 25px 60px -15px rgba(15,17,21,.18));
}

/* Icon-Container in den Cards: animiert mit dem Hover */
.service-tile .ic,
.team-card .ic,
.location-card .ic,
.feature-card .ic {
  transition:
    background .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    color .4s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.service-tile:hover .ic,
.team-card:hover .ic,
.location-card:hover .ic,
.feature-card:hover .ic {
  box-shadow: 0 0 24px -4px rgba(176, 136, 86, .45);
  transform: scale(1.06);
}

/* Headline wechselt auf Gold-Akzent beim Hover */
.service-tile h3,
.service-tile h4,
.feature-card h3,
.feature-card h4,
.team-card h3,
.team-card h4,
.location-card h3,
.location-card h4 {
  transition: color .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.service-tile:hover h3,
.service-tile:hover h4,
.feature-card:hover h3,
.feature-card:hover h4,
.team-card:hover h3,
.team-card:hover h4,
.location-card:hover h3,
.location-card:hover h4 {
  color: var(--navy, #14213D);
}

/* "Zum Bereich" Link bewegt seinen Pfeil etwas weiter beim Hover */
.service-tile .go svg,
.feature-card .go svg {
  transition: transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.service-tile:hover .go svg,
.feature-card:hover .go svg {
  transform: translateX(5px);
}

/* ===== F) PROCESS-STEP — Sequenzielle Verbindung =======
   Die Goldlinien zwischen den Steps zeichnen sich
   nacheinander: erst 01→02, dann 02→03. Die existierende
   journeyFlow-Animation (Dash-Flow) läuft permanent weiter.
   transform: scaleX kontrolliert die Reveal-Phase. */
.process-step {
  position: relative;
}

.career-journey .process-step::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-out, cubic-bezier(.16,1,.3,1));
}

.career-journey .process-step.is-visible::after,
.career-journey.is-visible .process-step::after {
  transform: scaleX(1);
}

/* Sequenzielle Delays: 1. Linie kommt zuerst, 2. erst nach Pause */
.career-journey .process-step:nth-child(1).is-visible::after,
.career-journey.is-visible .process-step:nth-child(1)::after {
  transition-delay: 0.4s;
}
.career-journey .process-step:nth-child(2).is-visible::after,
.career-journey.is-visible .process-step:nth-child(2)::after {
  transition-delay: 1.6s;  /* nach Linie 1 fertig ist */
}

/* ===== F2) STEP-ICONS — Animation pro Schritt =========
   Jeder Step-Card bekommt ein erklärendes SVG-Icon,
   dessen Linien sich beim Reinscrollen "zeichnen". */
.step-icon {
  display: block;
  width: 48px;
  height: 48px;
  color: var(--gold, #B08856);
  margin-bottom: 1.1rem;
}
.step-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Initial: alle Pfade unsichtbar via stroke-dashoffset */
.step-icon svg path,
.step-icon svg line,
.step-icon svg polyline,
.step-icon svg circle,
.step-icon svg rect {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  fill-opacity: 0;
}

/* Special: Scale-Icon hat Polygone die fill brauchen */
.step-icon svg .fill-stroke {
  fill: currentColor;
  fill-opacity: 0;
  transition: fill-opacity .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1.2s;
}

/* Wenn Step sichtbar: Pfade zeichnen sich, Fills fade-in */
.process-step.is-visible .step-icon svg path,
.process-step.is-visible .step-icon svg line,
.process-step.is-visible .step-icon svg polyline,
.process-step.is-visible .step-icon svg circle,
.process-step.is-visible .step-icon svg rect {
  animation: pl-step-icon-draw 1.1s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
}
.process-step.is-visible .step-icon svg .fill-stroke {
  fill-opacity: 0.7;
}

@keyframes pl-step-icon-draw {
  to { stroke-dashoffset: 0; }
}

/* Stagger: Pfade innerhalb eines Icons nacheinander */
.process-step.is-visible .step-icon svg > *:nth-child(1) { animation-delay: 0.2s; }
.process-step.is-visible .step-icon svg > *:nth-child(2) { animation-delay: 0.4s; }
.process-step.is-visible .step-icon svg > *:nth-child(3) { animation-delay: 0.6s; }
.process-step.is-visible .step-icon svg > *:nth-child(4) { animation-delay: 0.8s; }
.process-step.is-visible .step-icon svg > *:nth-child(5) { animation-delay: 1.0s; }
.process-step.is-visible .step-icon svg > *:nth-child(6) { animation-delay: 1.2s; }

/* ===== Loop-Animationen: nach dem Reveal laufen Icons weiter ===== */

/* 01 RECHT — Story: Vertrag → Lupe-Scan → Highlight → Checks
   Größere, innovative Mehrphasen-Animation:
   - Dokument mit Schatten
   - Lupe (Magnifying Glass) wandert mit Goldhalo durchs Doc
   - Goldene Highlight-Streifen blitzen unter jedem § auf
   - § Paragraph-Symbole pulsieren wenn die Lupe drüber kommt
   - Goldene Check-Badges (Kreis + weißes Häkchen) als Lösung
   Cycle: 7s. */

/* Vergrößertes Icon — füllt fast die ganze Card-Breite aus */
.process-grid.career-journey .step-card .step-icon--contract,
.step-icon--contract {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  min-height: 280px;
  margin: 0 auto 2rem !important;
}
.step-icon--contract svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Override des generischen Step-Icon Verhaltens auf das Contract-Icon:
   - stroke-dasharray entfernen (sonst Dokumentrahmen abgeschnitten)
   - fill-opacity normal (sonst weißes Doc + Gold-Checks unsichtbar)
   - generische Draw-In Animation deaktivieren */
.step-icon--contract svg rect,
.step-icon--contract svg path,
.step-icon--contract svg line,
.step-icon--contract svg circle,
.step-icon--contract svg polyline {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  fill-opacity: 1 !important;
}
.process-step.is-visible .step-icon--contract svg rect,
.process-step.is-visible .step-icon--contract svg path,
.process-step.is-visible .step-icon--contract svg line,
.process-step.is-visible .step-icon--contract svg circle,
.process-step.is-visible .step-icon--contract svg polyline {
  animation: none;
}

/* Dynamische Story-Elemente: opacity:0 als Default, Animation übernimmt */
.step-icon--contract svg .ph-scan,
.step-icon--contract svg .ph-check,
.step-icon--contract svg .ph-strip,
.step-icon--contract svg .ph-bg-glow {
  opacity: 0;
}

/* Card-Hintergrundglow pulsiert dezent während der Animation */
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-bg-glow {
  animation: pl-bg-glow 7s ease-in-out 1.4s infinite both;
}
@keyframes pl-bg-glow {
  0%, 100% { opacity: 0; }
  20%, 60% { opacity: 1; }
}

/* Scanner: Lupe wandert vertikal */
.step-icon--contract svg .ph-scan {
  transform-box: fill-box;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-scan {
  animation: pl-lupe-scan 7s ease-in-out 1.4s infinite both;
}
@keyframes pl-lupe-scan {
  0%   { transform: translateY(0)    translateX(0);  opacity: 0; }
  6%   { transform: translateY(0)    translateX(0);  opacity: 1; }
  20%  { transform: translateY(28px) translateX(-2px); opacity: 1; }
  35%  { transform: translateY(48px) translateX(2px);  opacity: 1; }
  50%  { transform: translateY(68px) translateX(-2px); opacity: 1; }
  60%  { transform: translateY(70px) translateX(0);    opacity: 0; }
  100% { transform: translateY(0)    translateX(0);    opacity: 0; }
}

/* §§ pulsieren wenn die Lupe sie erreicht */
.step-icon--contract svg .ph-para {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-para:nth-of-type(1) {
  animation: pl-para-flash 7s ease-in-out 1.7s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-para:nth-of-type(2) {
  animation: pl-para-flash 7s ease-in-out 2.4s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-para:nth-of-type(3) {
  animation: pl-para-flash 7s ease-in-out 3.1s infinite both;
}
@keyframes pl-para-flash {
  0%, 5%, 100% { fill: currentColor; transform: scale(1); }
  8%, 12%      { fill: #D4B36A; transform: scale(1.25); }
  18%, 100%    { fill: currentColor; transform: scale(1); }
}

/* Goldene Highlight-Streifen blitzen unter jedem § auf */
.step-icon--contract svg .ph-strip {
  transform-box: fill-box;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-strip:nth-of-type(1) {
  animation: pl-strip-flash 7s ease-in-out 1.65s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-strip:nth-of-type(2) {
  animation: pl-strip-flash 7s ease-in-out 2.35s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-strip:nth-of-type(3) {
  animation: pl-strip-flash 7s ease-in-out 3.05s infinite both;
}
@keyframes pl-strip-flash {
  0%, 4%   { opacity: 0; transform: scaleX(0); transform-origin: left; }
  10%      { opacity: 0.18; transform: scaleX(1); }
  16%      { opacity: 0.10; }
  60%      { opacity: 0; transform: scaleX(1); }
  100%     { opacity: 0; transform: scaleX(0); }
}

/* Check-Badges erscheinen nacheinander mit Overshoot */
.step-icon--contract svg .ph-check {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-check:nth-of-type(1) {
  animation: pl-check-pop 7s ease-out 3.5s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-check:nth-of-type(2) {
  animation: pl-check-pop 7s ease-out 3.85s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-check:nth-of-type(3) {
  animation: pl-check-pop 7s ease-out 4.2s infinite both;
}
@keyframes pl-check-pop {
  0%, 18%   { opacity: 0; transform: scale(0) rotate(-45deg); }
  25%       { opacity: 1; transform: scale(1.25) rotate(0); }
  32%       { opacity: 1; transform: scale(0.95) rotate(0); }
  38%, 78%  { opacity: 1; transform: scale(1) rotate(0); }
  90%, 100% { opacity: 0; transform: scale(0.5) rotate(0); }
}

/* ===== 02 STEUERN — Story: 5 € werden geprüft → 4 gestrichen → 1 bleibt =====
   Cycle: 7s, läuft endlos nach Reveal.
   Erzählt: viele Kostenfaktoren werden überprüft, die meisten lassen sich
   wegoptimieren — was übrig bleibt ist die Ersparnis. */

/* Vergrößertes Icon */
.step-icon--euro {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
}
.step-icon--euro svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Override: keine generische Stroke-Draw, fill-opacity normal */
.step-icon--euro svg rect,
.step-icon--euro svg path,
.step-icon--euro svg line,
.step-icon--euro svg circle,
.step-icon--euro svg polyline {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  fill-opacity: 1 !important;
}
.process-step.is-visible .step-icon--euro svg rect,
.process-step.is-visible .step-icon--euro svg path,
.process-step.is-visible .step-icon--euro svg line,
.process-step.is-visible .step-icon--euro svg circle,
.process-step.is-visible .step-icon--euro svg polyline {
  animation: none;
}

/* Dynamische Story-Elemente: opacity:0 als Default */
.step-icon--euro svg .ph-bg-glow,
.step-icon--euro svg .ph-strike,
.step-icon--euro svg .ph-scan-bar,
.step-icon--euro svg .ph-glow,
.step-icon--euro svg .ph-arrow,
.step-icon--euro svg .ph-result-line {
  opacity: 0;
}

/* Card-Hintergrundglow pulsiert während des Cycles */
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-bg-glow {
  animation: pl-eu-bg-glow 7s ease-in-out 1.4s infinite both;
}
@keyframes pl-eu-bg-glow {
  0%, 100% { opacity: 0; }
  20%, 75% { opacity: 1; }
}

/* Scanner-Bar wandert von links nach rechts durch die € Reihe */
.step-icon--euro svg .ph-scan-bar {
  transform-box: fill-box;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-scan-bar {
  animation: pl-eu-scan 7s ease-in-out 1.5s infinite both;
}
@keyframes pl-eu-scan {
  0%   { transform: translateX(0);   opacity: 0; }
  6%   { transform: translateX(0);   opacity: 1; }
  35%  { transform: translateX(80px); opacity: 1; }
  42%  { transform: translateX(80px); opacity: 0; }
  100% { transform: translateX(0);   opacity: 0; }
}

/* € Symbole: pulsieren wenn der Scanner sie erreicht */
.step-icon--euro svg .ph-eur {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-eur-1 {
  animation: pl-eu-pulse 7s ease-in-out 1.7s infinite both;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-eur-2 {
  animation: pl-eu-pulse 7s ease-in-out 2.05s infinite both;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-eur-3 {
  animation: pl-eu-pulse-keep 7s ease-in-out 2.4s infinite both;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-eur-4 {
  animation: pl-eu-pulse 7s ease-in-out 2.75s infinite both;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-eur-5 {
  animation: pl-eu-pulse 7s ease-in-out 3.1s infinite both;
}
@keyframes pl-eu-pulse {
  /* Pulst kurz, fadet dann aus (gestrichen → entfällt) */
  0%, 5%   { transform: scale(1); fill: currentColor; opacity: 1; }
  8%       { transform: scale(1.2); fill: #B83A2C; opacity: 1; }
  18%, 60% { transform: scale(0.95); fill: currentColor; opacity: 0.4; }
  78%, 100% { transform: scale(0.85); opacity: 0.2; }
}
@keyframes pl-eu-pulse-keep {
  /* Bleibt erhalten, wechselt zu Gold und vergrößert sich am Ende */
  0%, 5%   { transform: scale(1); fill: currentColor; opacity: 1; }
  10%      { transform: scale(1.3); fill: #D4B36A; opacity: 1; }
  20%, 38% { transform: scale(1.15); fill: #D4B36A; opacity: 1; }
  45%, 75% { transform: scale(1.6); fill: #D4B36A; opacity: 1; }
  85%, 100% { transform: scale(1); fill: currentColor; opacity: 1; }
}

/* Strike-Lines erscheinen für die 4 € die wegoptimiert werden */
.step-icon--euro svg .ph-strike {
  transform-box: fill-box;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-strike-1 {
  animation: pl-eu-strike 7s ease-in-out 1.85s infinite both;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-strike-2 {
  animation: pl-eu-strike 7s ease-in-out 2.2s infinite both;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-strike-4 {
  animation: pl-eu-strike 7s ease-in-out 2.9s infinite both;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-strike-5 {
  animation: pl-eu-strike 7s ease-in-out 3.25s infinite both;
}
@keyframes pl-eu-strike {
  0%, 4%   { opacity: 0; transform: scaleX(0); transform-origin: left; }
  10%      { opacity: 1; transform: scaleX(1); }
  60%      { opacity: 1; transform: scaleX(1); }
  78%, 100%{ opacity: 0.4; transform: scaleX(1); }
}

/* Goldener Glow um das überlebende € erscheint nach dem Scan */
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-glow {
  animation: pl-eu-result-glow 7s ease-in-out 3.4s infinite both;
}
@keyframes pl-eu-result-glow {
  0%, 8%   { opacity: 0; transform: scale(0.5); }
  18%      { opacity: 1; transform: scale(1.1); }
  25%, 75% { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(0.5); }
}
.step-icon--euro svg .ph-glow {
  transform-box: fill-box;
  transform-origin: center;
}

/* Ersparnis-Pfeil + Linie unten erscheinen nach dem Glow */
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-arrow,
.process-step:nth-child(2).is-visible .step-icon--euro svg .ph-result-line {
  animation: pl-eu-arrow 7s ease-in-out 3.7s infinite both;
}
@keyframes pl-eu-arrow {
  0%, 12%  { opacity: 0; transform: translateY(-6px); }
  22%, 75% { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(-6px); }
}
.step-icon--euro svg .ph-arrow,
.step-icon--euro svg .ph-result-line {
  transform-box: fill-box;
}

/* ===== 03 WACHSTUM — Story: Bars wachsen → Trendlinie → Umsatz-€ =====
   Cycle: 7s. Erzählt: das Unternehmen wächst Jahr für Jahr,
   die Trendlinie zeigt steilen Anstieg, am Ende steht der goldene
   Umsatz als Resultat. */

/* Vergrößertes Icon */
.step-icon--growth {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
}
.step-icon--growth svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Override generisches Step-Icon Verhalten */
.step-icon--growth svg rect,
.step-icon--growth svg path,
.step-icon--growth svg line,
.step-icon--growth svg circle,
.step-icon--growth svg polyline {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  fill-opacity: 1 !important;
}
.process-step.is-visible .step-icon--growth svg rect,
.process-step.is-visible .step-icon--growth svg path,
.process-step.is-visible .step-icon--growth svg line,
.process-step.is-visible .step-icon--growth svg circle,
.process-step.is-visible .step-icon--growth svg polyline {
  animation: none;
}

/* Initial-State der dynamischen Elemente */
.step-icon--growth svg .gr-bar,
.step-icon--growth svg .gr-trend,
.step-icon--growth svg .gr-arrow,
.step-icon--growth svg .gr-result-glow,
.step-icon--growth svg .gr-revenue,
.step-icon--growth svg .gr-counter,
.step-icon--growth svg .ph-bg-glow {
  opacity: 0;
}

.step-icon--growth svg .gr-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
}

/* Card-Hintergrundglow */
.process-step:nth-child(3).is-visible .step-icon--growth svg .ph-bg-glow {
  animation: pl-gr-bg-glow 7s ease-in-out 1.2s infinite both;
}
@keyframes pl-gr-bg-glow {
  0%, 100% { opacity: 0; }
  20%, 75% { opacity: 1; }
}

/* Bars wachsen sequenziell von links nach rechts */
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-bar {
  animation: pl-gr-bar-grow 7s ease-out infinite both;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-bar-1 { animation-delay: 1.2s; }
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-bar-2 { animation-delay: 1.55s; }
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-bar-3 { animation-delay: 1.9s; }
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-bar-4 { animation-delay: 2.25s; }
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-bar-5 { animation-delay: 2.6s; }

@keyframes pl-gr-bar-grow {
  0%        { transform: scaleY(0); opacity: 1; }
  3%        { transform: scaleY(0); opacity: 1; }
  9%        { transform: scaleY(1); opacity: 1; }
  78%       { transform: scaleY(1); opacity: 1; }
  88%, 100% { transform: scaleY(1); opacity: 0; }
}

/* Trendlinie zeichnet sich nach den Bars (stroke-draw) */
.step-icon--growth svg .gr-trend {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-trend {
  animation: pl-gr-trend 7s ease-out 3s infinite both;
}
@keyframes pl-gr-trend {
  0%, 5%    { opacity: 0; stroke-dashoffset: 120; }
  10%       { opacity: 1; stroke-dashoffset: 120; }
  35%       { opacity: 1; stroke-dashoffset: 0; }
  78%       { opacity: 1; stroke-dashoffset: 0; }
  88%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

/* Trend-Pfeilkopf erscheint am Ende der Linie */
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-arrow {
  animation: pl-gr-arrow 7s ease-out 4.2s infinite both;
}
@keyframes pl-gr-arrow {
  0%, 12%   { opacity: 0; transform: scale(0.5); }
  20%       { opacity: 1; transform: scale(1.2); }
  28%, 75%  { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(0.5); }
}
.step-icon--growth svg .gr-arrow {
  transform-box: fill-box;
  transform-origin: center;
}

/* Goldener Glow um den höchsten Bar */
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-result-glow {
  animation: pl-gr-result-glow 7s ease-out 4s infinite both;
}
@keyframes pl-gr-result-glow {
  0%, 12%   { opacity: 0; transform: scale(0.4); }
  22%       { opacity: 1; transform: scale(1.15); }
  30%, 75%  { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(0.5); }
}
.step-icon--growth svg .gr-result-glow {
  transform-box: fill-box;
  transform-origin: center;
}

/* Umsatz-€ über dem letzten Bar */
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-revenue {
  animation: pl-gr-revenue 7s ease-out 4.3s infinite both;
}
@keyframes pl-gr-revenue {
  0%, 14%   { opacity: 0; transform: translateY(8px); }
  24%, 75%  { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(-4px); }
}
.step-icon--growth svg .gr-revenue {
  transform-box: fill-box;
}

/* Counter "+ UMSATZ" am unteren Rand */
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-counter {
  animation: pl-gr-counter 7s ease-out 4.6s infinite both;
}
@keyframes pl-gr-counter {
  0%, 18%   { opacity: 0; transform: translateY(6px); }
  28%, 75%  { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(0); }
}
.step-icon--growth svg .gr-counter {
  transform-box: fill-box;
}

/* Reduced Motion: Icons direkt sichtbar, keine Loops */
@media (prefers-reduced-motion: reduce) {
  .step-icon svg path,
  .step-icon svg line,
  .step-icon svg polyline,
  .step-icon svg circle,
  .step-icon svg rect {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .step-icon svg .fill-stroke {
    fill-opacity: 0.7 !important;
    transition: none !important;
  }
  .process-step:nth-child(1).is-visible .step-icon svg,
  .process-step:nth-child(2).is-visible .step-icon svg path.fill-stroke,
  .process-step:nth-child(3).is-visible .step-icon svg circle.fill-stroke,
  .process-step:nth-child(3).is-visible .step-icon svg polyline:nth-of-type(1) {
    animation: none !important;
    transform: none !important;
  }
  .career-journey .process-step::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* ===== G) STAT — Pop-In für Zahlen =================== */
.stat {
  position: relative;
}
.stat.is-visible,
.stat.auto-reveal.is-visible {
  animation: pl-stat-pop .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes pl-stat-pop {
  0%   { transform: scale(.94); opacity: 0; }
  60%  { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Subtile pulsierende Aura unter den Stats */
.about-stats .stat::before {
  content: "";
  position: absolute;
  inset: -10% 20% 60% 20%;
  background: radial-gradient(circle, rgba(176, 136, 86, .14) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .8s var(--ease-out, cubic-bezier(.16,1,.3,1)) .5s;
  z-index: -1;
  pointer-events: none;
}
.about-stats .stat.is-visible::before,
.about-stats .stat.auto-reveal.is-visible::before { opacity: 1; }

/* ===== H) ABOUT-PHOTO — Reveal-Effekt (sicher) =========
   Clip-Path Reveal entfernt, weil das Bild stehen bleibt
   wenn der IntersectionObserver mal nicht feuert (z.B. mit
   gecachter CSS aus alter Version). Die .reveal-Klasse auf
   dem Element handelt schon den Opacity-Reveal. */

/* ===== H2) USP-ITEMS — Hover-Highlight ================
   Karten in der dunklen USP-Bar: lift + Icon-Gold-Glow +
   Headline wechselt zu Gold-Bright. Macht klar, dass die
   Items "lebendig" sind, ohne aufdringlich zu wirken. */
.usp-item {
  transition: transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1));
  cursor: default;
}
.usp-item:hover {
  transform: translateY(-5px);
}

/* Icon: Goldglow + sanftes Scale + minimale Drehung */
.usp-item .ic {
  transition:
    background .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    transform   .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    color       .4s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.usp-item:hover .ic {
  background: rgba(176, 136, 86, .32);
  box-shadow: 0 0 28px -4px rgba(176, 136, 86, .55);
  transform: scale(1.08) rotate(-3deg);
  color: var(--gold-bright, #D4B36A);
}

/* Headline: Wechsel zu Gold-Bright */
.usp-item h4 {
  transition: color .35s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              letter-spacing .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.usp-item:hover h4 {
  color: var(--gold-bright, #D4B36A);
  letter-spacing: -0.005em;
}

/* Paragraph: heller, aus dem Muted raus */
.usp-item p {
  transition: color .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.usp-item:hover p {
  color: var(--text-on-dark, #F5F2EA);
}

/* Goldlinie unten verlängert sich auf Hover */
.usp-item:hover::after {
  width: 100% !important;
  transition: width .45s var(--ease-out, cubic-bezier(.16,1,.3,1)) !important;
}

/* Reduced Motion: Hover bleibt, nur ohne Bewegung */
@media (prefers-reduced-motion: reduce) {
  .usp-item, .usp-item:hover,
  .usp-item .ic, .usp-item:hover .ic,
  .usp-item h4, .usp-item p {
    transition: none !important;
    transform: none !important;
  }
}

/* ===== I) CTA-BLOCK Button — Shimmer ================= */
.cta-block .btn-primary,
.cta-block a.btn,
.about .btn-primary {
  position: relative;
  overflow: hidden;
}
.cta-block .btn-primary::after,
.cta-block a.btn::after,
.about .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .85s var(--ease-out, cubic-bezier(.16,1,.3,1));
  pointer-events: none;
}
.cta-block .btn-primary:hover::after,
.cta-block a.btn:hover::after,
.about .btn-primary:hover::after {
  left: 130%;
}

/* ===== J) REVIEW-CARD — kein Endlos-Float (zu unruhig).
   Hover-Lift kommt aus dem Card-Hover-Block oben. */

/* ===== K) GOLD-Akzente in Headlines =================
   Italic-Spans und em/i in H1/H2 bekommen einen
   subtil schimmernden Goldverlauf. */
.hero h1 em, .hero h1 i, .hero h1 .italic-accent,
.section-head h2 em, .section-head h2 i,
.page-hero h1 em, .page-hero h1 i {
  background: linear-gradient(110deg,
    var(--gold, #B08856) 0%,
    var(--gold-bright, #D4B36A) 55%,
    var(--gold-soft, #C9A871) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ===== L1) KÜNDIGUNGS-CHECKLISTE — Sequentielles Abhaken ====
   Die Checkliste hakt sich Punkt für Punkt ab, sobald die
   Sektion sichtbar wird. Jedes Item:
   1) Item slidet leicht von links rein
   2) Navy-Kreis poppt auf
   3) Häkchen wird in den Kreis "gezeichnet" (stroke-dashoffset)
   Am Ende: Goldstreifen am "Wichtig"-Hinweis. */

/* Initial state */
.kuendigung-checks ul li {
  opacity: 0;
  transform: translateX(-10px);
}
.kuendigung-checks ul li svg {
  transform: scale(0);
  transform-origin: center;
}
.kuendigung-checks ul li svg polyline {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Wenn die Karte sichtbar wird: Sequenz starten */
.kuendigung-checks.is-visible ul li,
.kuendigung-checks.auto-reveal.is-visible ul li {
  animation: pl-check-li-rise .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.kuendigung-checks.is-visible ul li:nth-child(1),
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(1) { animation-delay: 200ms; }
.kuendigung-checks.is-visible ul li:nth-child(2),
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(2) { animation-delay: 380ms; }
.kuendigung-checks.is-visible ul li:nth-child(3),
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(3) { animation-delay: 560ms; }
.kuendigung-checks.is-visible ul li:nth-child(4),
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(4) { animation-delay: 740ms; }

@keyframes pl-check-li-rise {
  to { opacity: 1; transform: translateX(0); }
}

/* Navy-Kreis poppt knapp nach dem Item-Slide */
.kuendigung-checks.is-visible ul li svg,
.kuendigung-checks.auto-reveal.is-visible ul li svg {
  animation: pl-check-circle-pop .45s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.kuendigung-checks.is-visible ul li:nth-child(1) svg,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(1) svg { animation-delay: 320ms; }
.kuendigung-checks.is-visible ul li:nth-child(2) svg,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(2) svg { animation-delay: 500ms; }
.kuendigung-checks.is-visible ul li:nth-child(3) svg,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(3) svg { animation-delay: 680ms; }
.kuendigung-checks.is-visible ul li:nth-child(4) svg,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(4) svg { animation-delay: 860ms; }

@keyframes pl-check-circle-pop {
  0%   { transform: scale(0)    rotate(-15deg); }
  60%  { transform: scale(1.12) rotate(0); }
  100% { transform: scale(1)    rotate(0); }
}

/* Häkchen wird in den Kreis gezeichnet */
.kuendigung-checks.is-visible ul li svg polyline,
.kuendigung-checks.auto-reveal.is-visible ul li svg polyline {
  animation: pl-check-draw .42s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.kuendigung-checks.is-visible ul li:nth-child(1) svg polyline,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(1) svg polyline { animation-delay: 480ms; }
.kuendigung-checks.is-visible ul li:nth-child(2) svg polyline,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(2) svg polyline { animation-delay: 660ms; }
.kuendigung-checks.is-visible ul li:nth-child(3) svg polyline,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(3) svg polyline { animation-delay: 840ms; }
.kuendigung-checks.is-visible ul li:nth-child(4) svg polyline,
.kuendigung-checks.auto-reveal.is-visible ul li:nth-child(4) svg polyline { animation-delay: 1020ms; }

@keyframes pl-check-draw {
  to { stroke-dashoffset: 0; }
}

/* Eyebrow-Underline am H4 wächst, sobald Karte sichtbar */
.kuendigung-checks h4 {
  position: relative;
  display: inline-block;
}
.kuendigung-checks h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold, #B08856), transparent);
  transition: width 1s var(--ease-out, cubic-bezier(.16,1,.3,1)) .15s;
}
.kuendigung-checks.is-visible h4::after,
.kuendigung-checks.auto-reveal.is-visible h4::after { width: 48px; }

/* "Wichtig"-Hinweis: Goldstreifen links wächst nach allen Häkchen */
.kuendigung-checks .note {
  position: relative;
  padding-left: 1rem;
  margin-left: -1rem;
}
.kuendigung-checks .note::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--gold, #B08856), var(--gold-soft, #C9A871));
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height .8s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1.25s;
}
.kuendigung-checks.is-visible .note::before,
.kuendigung-checks.auto-reveal.is-visible .note::before { height: 70%; }

/* "Wichtig:" Wort selbst leicht hervorheben (kein Pulse, dezent) */
.kuendigung-checks .note strong {
  color: var(--alert, #B83A2C);
  letter-spacing: -0.005em;
}

/* Reduced Motion: alle Sequenz-Animationen aus */
@media (prefers-reduced-motion: reduce) {
  .kuendigung-checks ul li,
  .kuendigung-checks ul li svg,
  .kuendigung-checks ul li svg polyline,
  .kuendigung-checks h4::after,
  .kuendigung-checks .note::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ===== L) Answer-Card / Step-Card — Border Reveal ==== */
.answer-card, .step-card {
  position: relative;
  overflow: hidden;
}
.answer-card::before, .step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--gold, #B08856), var(--gold-soft, #C9A871));
  transition: height 1s var(--ease-out, cubic-bezier(.16,1,.3,1)) .2s;
  pointer-events: none;
}
.answer-card.is-visible::before, .step-card.is-visible::before,
.answer-card.auto-reveal.is-visible::before, .step-card.auto-reveal.is-visible::before {
  height: 100%;
}

/* Reviews-Marquee: schnelle, gleichmäßige Geschwindigkeit, nahtloser Loop
   ohne Pause. Ende = Anfang (Cards werden in JS dupliziert, Keyframes
   gehen von 0 → -50 % und springen pixelgenau zurück → kein Gap). */
.reviews-track {
  /* Doppelte Laufzeit = halbe Geschwindigkeit (vorher 60s) — angenehmer zum
     Lesen der Bewertungen. */
  animation-duration: 120s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  gap: 0 !important;
}
/* Kein Pause auf Hover/Focus — Marquee läuft konstant durch */
.reviews-track:hover,
.reviews-track:focus-within,
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track {
  animation-play-state: running !important;
}
.reviews-track .review-card { margin-right: 1.5rem; }
@media (max-width: 600px) {
  /* Doppelte Laufzeit = halbe Geschwindigkeit (vorher 320s). */
  .reviews-track { animation-duration: 640s !important; }
  .reviews-track .review-card { margin-right: 1rem; }
}
@media (max-width: 400px) {
  /* Doppelte Laufzeit = halbe Geschwindigkeit (vorher 400s). */
  .reviews-track { animation-duration: 800s !important; }
}

/* ===== N) Hero-Badge dezenter statischer Goldakzent =====
   Kein Endlos-Pulsieren — der Akzent ist da und ruhig. */
.hero-badge {
  position: relative;
}

/* ==========================================================
   PREMIUM BUTTON GLOW & INVITATION
   Alle primären Buttons leuchten dezent, atmen sanft, und
   reagieren auf Hover/Press wie ein physisches Objekt.
   ========================================================== */

/* Stelle sicher, dass alle Buttons positioniert sind und
   einen eigenen Stacking-Context haben (für ::before-Glow). */
.btn,
button.btn,
a.btn {
  position: relative;
  isolation: isolate;
}

/* ----- Primary + Gold Buttons: Glow-Halo -----
   ::before erzeugt eine weiche, atmende Aura hinter dem Button.
   Auf Hover intensiviert sie sich, bei :active drückt sie sich rein. */
.btn-primary::before,
.btn-gold::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center,
    rgba(176, 136, 86, .45) 0%,
    rgba(176, 136, 86, .18) 40%,
    transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transform: scale(.98);
  z-index: -1;
  pointer-events: none;
  transition: opacity .4s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}

.btn-primary:hover::before,
.btn-gold:hover::before {
  opacity: .85;
  transform: scale(1.04);
}

.btn-primary:active::before,
.btn-gold:active::before {
  opacity: .7;
  transform: scale(.99);
  transition-duration: .12s;
}

/* ----- Shimmer-Sweep auf Primary + Gold (universell) ----- */
.btn-primary::after,
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, .28) 50%,
    transparent 65%,
    transparent 100%);
  background-size: 280% 100%;
  background-position: -100% 0;
  pointer-events: none;
  transition: background-position .85s var(--ease-out, cubic-bezier(.16,1,.3,1));
  mix-blend-mode: overlay;
}

.btn-primary:hover::after,
.btn-gold:hover::after {
  background-position: 200% 0;
}

/* (Endlos-Shimmer entfernt — Buttons signalisieren bereits genug
   über Halo + Hover-Sweep. Permanente Bewegung wirkt unruhig.) */

/* ----- Press-Feedback (alle Primary-Variants) ----- */
.btn-primary:active,
.btn-gold:active,
.btn-secondary:active {
  transform: translateY(0) scale(.98);
  transition-duration: .1s;
}

/* ----- Secondary Button: subtilerer Glow ----- */
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center,
    rgba(20, 33, 61, .35) 0%,
    transparent 70%);
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.btn-secondary:hover::before { opacity: .8; }

/* ----- Ghost Button: Border + Background Glow ----- */
.btn-ghost {
  overflow: hidden;
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(176, 136, 86, .22) 0%,
    transparent 50%);
  opacity: 0;
  transition: opacity .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
  pointer-events: none;
  z-index: -1;
}
.btn-ghost:hover::before { opacity: 1; }

/* ----- Ripple-Element (von JS gesetzt) ----- */
.btn .pl-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, 0) 70%);
  animation: pl-ripple .65s ease-out forwards;
  z-index: 1;
  mix-blend-mode: overlay;
}
.btn-ghost .pl-ripple {
  background: radial-gradient(circle,
    rgba(176, 136, 86, .35) 0%,
    rgba(176, 136, 86, 0) 70%);
  mix-blend-mode: normal;
}
@keyframes pl-ripple {
  0%   { transform: scale(0);   opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ----- Btn-Link: Underline-Draw beim Hover ----- */
.btn-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              gap var(--dur, .3s) var(--ease, cubic-bezier(.2,.8,.2,1)),
              color var(--dur, .3s) var(--ease, cubic-bezier(.2,.8,.2,1));
}
.btn-link:hover {
  background-size: 100% 1.5px;
}

/* (Urgent-Banner-Pulse entfernt — der existierende rote Pulse-Dot
   im Banner reicht als Aufmerksamkeitssignal.) */

/* ===== O) Reduced Motion — alle Animationen aus ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 .word,
  .hero-copy h1 em,
  .hero-trust > *,
  .hero-actions > *,
  .hero-portrait img,
  .hero-portrait video,
  .usp-item.is-visible .usp-icon,
  .usp-item.is-visible > svg:first-child,
  .usp-item.is-visible > div > svg,
  .review-card,
  .stat.is-visible,
  .stat.auto-reveal.is-visible,
  .hero-badge::before,
  .hero h1 em, .hero h1 i, .hero h1 .italic-accent,
  .section-head h2 em, .section-head h2 i,
  .page-hero h1 em, .page-hero h1 i {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-copy h1 em::after,
  .hero h1 em::after {
    animation: none !important;
    width: 100% !important;
  }

  .section-head h2::after,
  .usp-item::after,
  .process-step::after,
  .answer-card::before, .step-card::before {
    transition: none !important;
  }

  .service-tile {
    transform: none !important;
  }

  .btn-primary::before, .btn-gold::before,
  .btn-primary::after, .btn-gold::after,
  .btn-secondary::before, .btn-ghost::before,
  .urgent-banner a::after,
  .btn .pl-ripple {
    animation: none !important;
    transition: none !important;
  }
}


/* size-boost-euro-growth */
.process-grid.career-journey .step-card .step-icon--euro,
.process-grid.career-journey .step-card .step-icon--growth,
.step-icon--euro,
.step-icon--growth {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  min-height: 280px;
  margin: 0 auto 2rem !important;
}