/* ==========================================================================
   Puels.legal · Foundation polish
   - Lenis smooth scroll setup
   - Custom cursor (desktop)
   - View Transitions API
   - Mesh-gradient backdrop helper
   - Reading progress bar
   - Variable font feature settings
   ========================================================================== */

/* Variable Font activation: stylistic sets + opt features --------------- */
html {
  font-feature-settings: "ss01", "ss03", "cv11";
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* Lenis smooth-scroll baseline (required by Lenis) ---------------------- */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* View Transitions API — disabled (breaks on file:// protocol; will be
   re-enabled once site is deployed to https). */

/* ================================ Cursor ================================ */
/* Native cursor stays visible everywhere. Custom-cursor disabled — see foundation.js.
   We keep the styles below so an opt-in (#pl-cursor element) is still possible later. */
#pl-cursor { pointer-events: none; display: none; }
#pl-cursor .pl-cursor-dot,
#pl-cursor .pl-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 2147483600;
  will-change: transform;
}

#pl-cursor .pl-cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--navy, #14213D);
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease;
}
#pl-cursor .pl-cursor-ring {
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 1.5px solid rgba(20, 33, 61, 0.45);
  background: transparent;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}

#pl-cursor.is-hover .pl-cursor-dot {
  width: 0; height: 0;
}
#pl-cursor.is-hover .pl-cursor-ring {
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-color: var(--gold, #B08856);
  background: rgba(212, 179, 106, 0.10);
}
#pl-cursor.is-down .pl-cursor-ring {
  transform: translate(var(--rx, 0), var(--ry, 0)) scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  #pl-cursor { display: none; }
  body, a, button { cursor: auto !important; }
}

/* ============================ Magnetic CTAs ============================= */
.btn-primary,
.btn-magnetic {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              box-shadow 0.4s ease;
  will-change: transform;
}

/* ====================== Mesh-gradient drift (subtle) ==================== */
.mesh-bg {
  position: relative;
  isolation: isolate;
}
.mesh-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(212,179,106,.10), transparent 60%),
    radial-gradient(50% 35% at 80% 70%, rgba(20,33,61,.07),    transparent 65%),
    radial-gradient(40% 30% at 50% 100%, rgba(176,136,86,.10), transparent 70%);
  background-size: 140% 140%;
  background-position: 0% 0%, 100% 100%, 50% 100%;
  animation: pl-mesh-drift 60s ease-in-out infinite;
}
@keyframes pl-mesh-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 100%; }
  25%      { background-position: 30% 20%, 70% 80%, 60% 90%; }
  50%      { background-position: 20% 40%, 80% 60%, 40% 80%; }
  75%      { background-position: 10% 10%, 90% 90%, 55% 95%; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-bg::before { animation: none; }
}

/* ========================= Reading-progress bar ========================= */
#pl-reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-bright, #D4B36A), var(--gold, #B08856));
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 2147483300;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(176,136,86,0.35);
}

/* ==================== Animated headline weight on hover ================== */
.hl-shift {
  font-variation-settings: "wght" 700;
  transition: font-variation-settings 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hl-shift:hover { font-variation-settings: "wght" 800; }

/* === Trust pill counter — keeps width stable while ticking ============== */
[data-counter-to] { font-variant-numeric: tabular-nums; }

/* ================ Hero · Live Trust Strip ============================== */
.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(20,33,61,0.06);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text, #1A2535);
  box-shadow: 0 4px 14px -6px rgba(15,17,21,0.10);
}

.hero-live-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2E5E4E; /* success-green */
  flex: 0 0 auto;
}
.hero-live-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(46,94,78,0.5);
  animation: pl-live-pulse 2s ease-out infinite;
}
@keyframes pl-live-pulse {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2);   opacity: 0; }
}

.hero-live-text strong {
  color: var(--navy, #14213D);
  font-weight: 700;
}
.hero-live-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--navy, #14213D);
  font-variant-numeric: tabular-nums;
}
.hero-live-stats { color: var(--text-muted, #5C6878); margin-left: 0.25rem; }
.hero-live .dot-sep { margin: 0 .5rem; opacity: .35; }

@media (max-width: 600px) {
  .hero-live { font-size: 0.75rem; padding: 0.45rem 0.85rem 0.45rem 0.7rem; }
  .hero-live .dot-sep { display: none; }
  .hero-live-stats { display: block; margin-left: 0; margin-top: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-live-dot::before { animation: none; }
}

/* ==========================================================================
   Header-Bereich (Hero) → Content blend
   Verschmilzt den großen Hero-Banner mit dem darunterliegenden Bereich:
   - Hero fadet unten 120px aus
   - Ist die nächste Sektion DUNKEL (usp-bar / cta-block), bekommt diese
     oben einen cream-Glow — beide Seiten treffen sich weich in der Mitte.
   ========================================================================== */

section.hero,
section.page-hero {
  position: relative;
}

/* (1) Hero unten: 120px Bottom-Fade in cream */
section.hero::after,
section.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(248, 245, 236, 0.55) 55%,
    rgba(248, 245, 236, 0.85) 100%
  );
}

/* Page-Hero with bg-image: keep photo crisp at top, fade in lower 1/3 */
section.page-hero--bg::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 25%,
    rgba(248, 245, 236, 0.55) 70%,
    rgba(248, 245, 236, 0.85) 100%
  );
}

/* Hero content sits above the fade — but DO NOT touch background video / overlay */
section.hero > .container,
section.page-hero > .container,
section.hero > .reveal,
section.page-hero > .reveal {
  position: relative;
  z-index: 2;
}

/* Background video + overlay must stay absolutely positioned at the back */
section.hero .page-hero-video-bg,
section.page-hero .page-hero-video-bg,
section.hero .page-hero-video-overlay,
section.page-hero .page-hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

section.hero .page-hero-video-bg,
section.page-hero .page-hero-video-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* (2) When the section directly below the Hero is DARK (usp-bar / cta-block),
   that section gets a cream "incoming glow" at its top — so the cream from
   the hero "bleeds" softly into the navy. Direct-sibling selector is robust
   across all browsers. */
section.hero + section.usp-bar,
section.hero + section.cta-block,
section.page-hero + section.usp-bar,
section.page-hero + section.cta-block {
  box-shadow: inset 0 90px 120px -40px rgba(248, 245, 236, 0.45);
  position: relative;
  z-index: 0;
}

/* Override the hero-fade for this case: instead of fading to cream,
   gently fade through cream toward navy so the merge feels natural */
section.hero:has(+ section.usp-bar)::after,
section.hero:has(+ section.cta-block)::after,
section.page-hero:has(+ section.usp-bar)::after,
section.page-hero:has(+ section.cta-block)::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(248, 245, 236, 0.40) 40%,
    rgba(248, 245, 236, 0.65) 75%,
    rgba(248, 245, 236, 0.80) 100%
  );
}

/* (3) Subtle gold "stitch" centered at the bottom of the Hero — small
   editorial touch, marks the seam without making it harsh */
section.hero > .hero-stitch,
section.page-hero > .hero-stitch {
  /* placeholder if we ever inject markup; for now we leave decorative gold
     hairline as a non-essential element */
}

@media (prefers-reduced-motion: reduce) {
  section.hero::after,
  section.page-hero::after { transition: none; }
}

/* ==========================================================================
   Urgent-Banner — sticky bottom, scroll-triggered
   Bar versteckt am Top der Seite, taucht beim Scroll (>150 px) sanft unten
   auf und läuft dort mit. Cookie-Banner & AI-Chat-Button rücken nach oben,
   wenn die Bar aktiv ist.
   ========================================================================== */

.urgent-banner {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 50;
  padding: 0.75rem 0 !important;
  border-top: 1px solid rgba(212, 179, 106, 0.20);
  box-shadow: 0 -8px 24px -10px rgba(15, 17, 21, 0.30);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.4s;
}

.urgent-banner.is-shown {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

.urgent-banner-row { font-size: 0.88rem !important; }

@media (max-width: 720px) {
  .urgent-banner { padding: 0.6rem 0 !important; }
  .urgent-banner-row {
    flex-direction: column !important;
    gap: 0.25rem !important;
    font-size: 0.78rem !important;
    padding: 0 1rem;
  }
}

/* Body padding only added when banner is visible — preventing content jump */
body.urgent-shown { padding-bottom: 60px; }
@media (max-width: 720px) { body.urgent-shown { padding-bottom: 96px; } }

/* Push other fixed-bottom elements up only when banner is shown */
body.urgent-shown #pcm-banner       { bottom: calc(1.25rem + 60px) !important; }
body.urgent-shown #pl-ai-btn        { bottom: calc(1.5rem  + 60px) !important; }
body.urgent-shown .live-chat        { bottom: calc(1.25rem + 60px) !important; }

@media (max-width: 720px) {
  body.urgent-shown #pcm-banner { bottom: calc(0.75rem + 96px) !important; }
  body.urgent-shown #pl-ai-btn  { bottom: calc(1rem    + 96px) !important; }
  body.urgent-shown .live-chat  { bottom: calc(1rem    + 96px) !important; }
}

/* Smooth transition when the bar appears/disappears, so other elements
   don't jump abruptly */
#pcm-banner, #pl-ai-btn, .live-chat {
  transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Print: bar static, no body-padding */
@media print {
  .urgent-banner { position: static !important; box-shadow: none; transform: none; opacity: 1; visibility: visible; }
  body.urgent-shown { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .urgent-banner,
  #pcm-banner, #pl-ai-btn, .live-chat { transition: none; }
}

/* ==========================================================================
   Urgent-Banner — specificity hardening
   Ensure no parent (Lenis wrapper, transform-container) breaks fixed pos.
   ========================================================================== */

html body .urgent-banner,
html body div.urgent-banner {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
}

/* Make sure no ancestor has a transform that would reparent fixed elements.
   The body-level move via JS handles that, but as a safety: do not transform body. */
html, body { transform: none !important; }

/* ==========================================================================
   Hero-BG Video — Segelschiff (puels-hero-bow) als dezenter Hintergrund
   Ganz hinten, sehr leicht — Text bleibt komplett lesbar.
   ========================================================================== */
.hero.has-bg-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
  /* Dezent: leicht entsaettigt, etwas weicher gezogen */
  opacity: 0.24;
  filter: saturate(0.55) brightness(1.05) contrast(0.95);
  pointer-events: none;
  /* Sanft einblenden nach Pageload */
  animation: hero-bg-video-in 1.6s ease-out 0.2s both;
}

@keyframes hero-bg-video-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 0.18; transform: scale(1); }
}

/* Cream-Overlay damit der Hero-Content klar lesbar bleibt — wirkt wie
   ein sanfter Schleier vor dem Video. Verlauf links staerker, rechts duenner,
   damit das Schiff rechts noch leicht durchscheint. */
.hero-bg-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(245, 242, 234, 0.44) 0%,
      rgba(245, 242, 234, 0.38) 35%,
      rgba(245, 242, 234, 0.27) 60%,
      rgba(245, 242, 234, 0.17) 85%,
      rgba(245, 242, 234, 0.09) 100%
    ),
    radial-gradient(800px 400px at 90% 30%, rgba(212, 179, 106, 0.10), transparent 70%);
}

/* Hero-Content muss ueber dem Video liegen */
.hero.has-bg-video > .container,
.hero.has-bg-video > .hero-grid,
.hero.has-bg-video .hero-copy,
.hero.has-bg-video .hero-portrait {
  position: relative;
  z-index: 2;
}

/* Mobile: Video fade staerker, Overlay fast deckend — sonst zu busy */
@media (max-width: 720px) {
  .hero-bg-video {
    opacity: 0.6;
    object-position: 40% 50%;
  }
  .hero-bg-video-overlay {
    background: transparent;
  }
}

/* Reduced motion: Video pausieren via aria, Overlay etwas staerker */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    animation: none;
    opacity: 0.10;
  }
}

/* Print: Video ausblenden */
@media print {
  .hero-bg-video,
  .hero-bg-video-overlay { display: none !important; }
}

/* ==========================================================================
   Team-Card Polish — Initialen-Placeholder + Lead-Card Highlight
   ========================================================================== */
.team-card .team-photo {
  position: relative;
  background: linear-gradient(135deg, var(--bg-cream, #F5F2EA), #FFFFFF);
}

.team-card .team-photo .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(212, 179, 106, 0.18) 0%,
    rgba(20, 33, 61, 0.06) 100%);
  color: var(--gold, #B08856);
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}
.team-card .team-photo .placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 179, 106, 0.20), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(20, 33, 61, 0.10), transparent 60%);
  pointer-events: none;
}
.team-card .team-photo .placeholder::after {
  content: "";
  position: absolute;
  inset: auto auto -1px -1px;
  width: 28px; height: 28px;
  border-bottom-left-radius: inherit;
  background: linear-gradient(135deg, transparent 50%, var(--gold, #B08856) 50%);
  opacity: 0.30;
  pointer-events: none;
}

/* Lead-Card (Jonas) — etwas prominenter, spannt 2 Spalten auf grossen Screens */
@media (min-width: 980px) {
  .team-card.team-card--lead {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
    gap: 0;
  }
  .team-card.team-card--lead .team-photo {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .team-card.team-card--lead .team-info {
    padding: 1.8rem 1.8rem;
  }
  .team-card.team-card--lead h3 {
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  }
  .team-card.team-card--lead .role {
    font-size: 0.78rem;
  }
}

/* Lead Border accent */
.team-card.team-card--lead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.team-card.team-card--lead::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(212, 179, 106, 0.45), rgba(176, 136, 86, 0.10) 60%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Hover lift universal */
.team-card { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease; }
.team-card:hover { transform: translateY(-4px); }

/* ==========================================================================
   FIX: ProvenExpert / Hero-Trust Badge — keinen Cream-Hintergrund auf Hover
   Der Cream-Block wirkte unsauber. Lift + Shadow bleiben, Fill weg.
   ========================================================================== */
.hero-trust a.item,
.hero-trust a.item:hover,
.hero-trust a.item:focus-visible,
a.hero-badge,
a.hero-badge:hover,
a.hero-badge:focus-visible {
  background: transparent !important;
}

/* ==========================================================================
   Anchor-Scroll: #abfindungsrechner — sticky-Header beruecksichtigen
   Damit beim Anker-Sprung der Rechner nicht halb hinter dem Header verschwindet.
   ========================================================================== */
#abfindungsrechner {
  scroll-margin-top: clamp(80px, 9vw, 120px);
}

/* ==========================================================================
   .btn-gold-soft — leichter Gold-Sekundärbutton (Header-Nav)
   Designed als ruhige Variante neben .btn-primary (Navy/Gold).
   Pill-Form, dezenter Gold-Wash, Gold-Border, Hover steigert Saturation.
   ========================================================================== */
.btn.btn-gold-soft {
  background: rgba(212, 179, 106, 0.14);
  color: var(--gold, #B08856);
  border: 1px solid rgba(176, 136, 86, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset;
  padding-block: 0.85rem;
  padding-inline: 1.35rem;
}
.btn.btn-gold-soft:hover {
  background: var(--gold-wash, #F4ECD8);
  color: var(--gold-bright, #D4B36A);
  border-color: var(--gold, #B08856);
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px -8px rgba(176, 136, 86, 0.40),
    0 1px 0 rgba(255, 255, 255, 0.60) inset;
}
.btn.btn-gold-soft:focus-visible {
  outline: 3px solid var(--gold-bright, #D4B36A);
  outline-offset: 2px;
}

/* Mobile: Abfindungsrechner-Button im Header-CTA auf kleinen Screens
   ausblenden — der Mobile-Drawer enthaelt den Abfindungsrechner stattdessen
   als goldenen CTA-Button. */
@media (max-width: 1024px) {
  .nav-cta .btn.btn-gold-soft { display: none; }
}

/* Mobile-Drawer: Abfindungsrechner als goldener Button – wie in der vollen
   Desktop-Ansicht. Ueberschreibt das generische .mobile-drawer .btn{color:#fff}. */
.mobile-drawer .btn.btn-gold-soft {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.95rem 1.35rem;
  border-bottom: none;
  background: rgba(212, 179, 106, 0.16);
  color: var(--gold, #B08856);
  border: 1px solid rgba(176, 136, 86, 0.40);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset;
}
.mobile-drawer .btn.btn-gold-soft:hover {
  background: var(--gold-wash, #F4ECD8);
  color: var(--gold-bright, #D4B36A);
  border-color: var(--gold, #B08856);
}
/* Folgt direkt der Termin-sichern-Button, Abstand zwischen den beiden kleiner halten */
.mobile-drawer .btn.btn-gold-soft + .btn {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Spotlight-Cursor (Option C) — atmosphaerischer cream-gold Glow folgt dem
   Mauszeiger. Native cursor bleibt sichtbar, pointer-events: none, sehr dezent.
   Auf Touch-Devices / reduced-motion / Mobile deaktiviert.
   ========================================================================== */
#pl-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  /* Deutlich kleiner — ehemals 420px */
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(212, 179, 106, 0.12) 0%,
      rgba(245, 242, 234, 0.06) 35%,
      transparent 70%
    );
  /* Sanfter Blur — nicht zu cloudy */
  filter: blur(16px);
  /* Screen blendet ruhiger als plus-lighter */
  mix-blend-mode: screen;
  transform: translate3d(-9999px, -9999px, 0);
  opacity: 0;
  /* Lower max opacity via the visible class for extra subtlety */
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
#pl-spotlight.is-visible { opacity: 0.7; }

/* Auf dunklen Sektionen (Navy-CTA, Urgent-Banner) wirkt das gold etwas
   intensiver — wirkt wie Spotlicht im dunklen Raum. */

/* Print: weg */
@media print { #pl-spotlight { display: none !important; } }

/* Touch / reduced-motion / Mobile -> komplett deaktiviert */
@media (hover: none),
       (pointer: coarse),
       (prefers-reduced-motion: reduce),
       (max-width: 1024px) {
  #pl-spotlight { display: none !important; }
}

/* Anchor-Scroll: #termin (Beratungsoptionen auf kontakt.html) — Header beruecksichtigen */
#termin,
#path-chooser {
  scroll-margin-top: clamp(80px, 9vw, 120px);
}

/* ==========================================================================
   Kontakt-Hero — Bild absolut rechts, überlappt in die naechste Section.
   Text ist frei (volle linke Breite), Bild bildet die Section-Bruecke.
   ========================================================================== */

/* Hero-Section selbst — Overflow erlauben, damit Bild ueberlappen kann */
.page-hero:has(.kontakt-hero-grid) {
  overflow: visible !important;
  position: relative;
  /* Mehr Platz rechts, damit Text nicht unter das Bild laeuft */
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

/* Naechste Section nach dem Hero ueberlappt das Bild — durch z-index handling */
.page-hero:has(.kontakt-hero-grid) + section {
  position: relative;
  z-index: 1;
}

/* Grid: Text bekommt rund 58 % der Breite, rechts bleibt Platz fuer das Bild */
.kontakt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

/* removed older reveal max-width rule — superseded */

/* Bild absolut positioniert — rechts oben, ragt nach unten in die naechste Section */
.kontakt-hero-figure {
  position: absolute;
  top: -1rem;
  right: 0;
  width: clamp(320px, 38vw, 480px);
  z-index: 3;
  isolation: isolate;
  pointer-events: auto;
}

.kontakt-hero-figure picture {
  display: block;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 32px 72px -18px rgba(15, 17, 21, 0.32),
    0 12px 28px -10px rgba(15, 17, 21, 0.20),
    0 0 0 1px rgba(176, 136, 86, 0.14);
  transform: rotate(-1deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background: #FFFFFF;
}
.kontakt-hero-figure:hover picture {
  transform: rotate(-1deg) translateY(-4px);
}

.kontakt-hero-figure picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20, 33, 61, 0.12) 100%);
  pointer-events: none;
}

.kontakt-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
}

/* Subtiler Gold-Rahmen dahinter, leicht gegen-rotiert */
.kontakt-hero-figure::before {
  content: "";
  position: absolute;
  inset: -10px -10px -10px 10px;
  border: 1.5px solid rgba(176, 136, 86, 0.35);
  border-radius: 26px;
  pointer-events: none;
  z-index: -1;
  transform: rotate(1.2deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.kontakt-hero-figure:hover::before {
  transform: rotate(1.6deg);
}

/* Persönliches Badge */
.kontakt-hero-badge {
  position: absolute;
  left: -1.4rem;
  bottom: -1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.2rem 0.85rem 0.95rem;
  background: #FFFFFF;
  border: 1px solid rgba(176, 136, 86, 0.20);
  border-radius: 100px;
  box-shadow:
    0 16px 36px -14px rgba(15, 17, 21, 0.22),
    0 4px 12px -4px rgba(176, 136, 86, 0.20);
  z-index: 4;
  max-width: 92%;
}
.kontakt-hero-badge svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright, #D4B36A), var(--gold, #B08856));
  color: #FFFFFF;
}
.kontakt-hero-badge div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.kontakt-hero-badge strong {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy, #14213D);
  letter-spacing: -0.005em;
}
.kontakt-hero-badge span {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.78rem;
  color: rgba(20, 33, 61, 0.65);
  margin-top: 1px;
}

/* ============== Mobile: image stacks under headline, normal flow ============== */
@media (max-width: 980px) {
  .page-hero:has(.kontakt-hero-grid) {
    overflow: hidden !important;
  }
  .kontakt-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .kontakt-hero-grid > .reveal {
    max-width: none;
  }
  .kontakt-hero-figure {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 360px;
    margin: 1.5rem auto 0;
  }
  .kontakt-hero-figure picture { transform: none; }
  .kontakt-hero-figure::before { display: none; }
  .kontakt-hero-figure:hover picture { transform: translateY(-3px); }
  .kontakt-hero-badge {
    left: 1rem;
    right: auto;
    bottom: -1rem;
    font-size: 0.85rem;
  }
}

/* @supports fallback for browsers without :has() (older Firefox).
   Without :has(), the page-hero won't get overflow:visible. To preserve
   layout, we apply identical behavior via a fallback class .has-kontakt-hero. */
.page-hero.has-kontakt-hero {
  overflow: visible !important;
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 4rem);
}
.page-hero.has-kontakt-hero + section {
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .page-hero.has-kontakt-hero { overflow: hidden !important; }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-hero-figure picture,
  .kontakt-hero-figure::before {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   FINAL FIX: Kontakt-Hero overflow — brute force
   Mehrere alternative Selektoren mit hoechster Spezifizitaet, damit das Bild
   die Section-Grenze ueberraegen kann.
   ========================================================================== */
html body section.page-hero.has-kontakt-hero,
section.page-hero:has(.kontakt-hero-grid),
section.page-hero.has-kontakt-hero > .container,
section.page-hero.has-kontakt-hero .kontakt-hero-grid,
section.page-hero:has(.kontakt-hero-grid) > .container,
section.page-hero:has(.kontakt-hero-grid) .kontakt-hero-grid {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  contain: none !important;
  clip-path: none !important;
}

/* Bild kann nach unten ragen (negativer margin-bottom trick als Backup) */
.kontakt-hero-figure {
  margin-bottom: -180px;
}

@media (max-width: 980px) {
  html body section.page-hero.has-kontakt-hero,
  section.page-hero:has(.kontakt-hero-grid) {
    overflow: hidden !important;
  }
  .kontakt-hero-figure {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Kontakt-Hero-Figure WRAPPER — Bild sitzt zwischen den Sections,
   wird per negativem top in die Hero-Section hochgezogen und reicht
   nach unten in die Termin-Section. Keine Overflow-Probleme mehr.
   ========================================================================== */
.kontakt-hero-figure-wrapper {
  position: relative;
  height: 0;
  width: 100%;
  z-index: 12;
  pointer-events: none;
}
.kontakt-hero-figure-wrapper .container {
  position: relative;
  height: 0;
}
.kontakt-hero-figure-wrapper .kontakt-hero-figure {
  position: absolute;
  /* Bild sitzt vertikal mittig auf der Hero-Section-Grenze:
     ~75 % nach oben in den Hero, ~25 % nach unten in die Termin-Section. */
  top: -340px;
  right: 0;
  width: clamp(260px, 26vw, 340px);
  pointer-events: auto;
  z-index: 12;
}

/* Mobile: wrapper wird zur normalen flow-Section, Bild stapelt */
@media (max-width: 980px) {
  .kontakt-hero-figure-wrapper {
    height: auto;
    padding: 1.5rem 0 2rem;
    background: var(--bg-cream, #F5F2EA);
    pointer-events: auto;
  }
  .kontakt-hero-figure-wrapper .container {
    height: auto;
    display: flex;
    justify-content: center;
  }
  .kontakt-hero-figure-wrapper .kontakt-hero-figure {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 360px;
  }
}

/* ==========================================================================
   FINAL: Grid braucht keine asymmetrische Spalte mehr, da Bild nicht
   mehr im Grid sitzt. Text bekommt volle Breite zurueck.
   ========================================================================== */
.kontakt-hero-grid > .reveal {
  max-width: clamp(540px, 60vw, 720px);
}
@media (max-width: 980px) {
  .kontakt-hero-grid > .reveal { max-width: none; }
}