/* ================================
   Farb-Variablen (Theme)
   ================================ */
:root {
  --psh-dark: #ffffff;
  --psh-turquoise: #83c6a9;
  --psh-bright: #d3e8d4;
  --psh-bg: #0f1229;
}


/* ================================
   Buttons
   ================================ */

/* Basis-Styling für alle Buttons */
.btn,
.btn-highlight,
.btn-outline-highlight {
  min-height: 44px;          /* Mindesthöhe für Touch-Friendly Design */
  padding: 0.75rem 1.25rem;  /* Angenehmes Padding */
  font-size: 1rem;           /* Einheitliche Schriftgröße */
  border-radius: 0.75rem;    /* Abgerundete Ecken */
}

/* Mobile-Optimierung (XS-Bildschirme <576px) */
@media (max-width: 575.98px) {
  .btn,
  .btn-highlight,
  .btn-outline-highlight {
    display: block;          /* Buttons untereinander */
    width: 100%;             /* volle Breite */
    text-align: center;
  }

  /* Abstand zwischen Buttons */
  .btn + .btn {
    margin-top: 0.75rem;
  }
}


/* ================================
   Hero Section
   ================================ */

.hero-section {
  position: relative;
  overflow: clip;             /* Schneidet Überflüsse ab */
  isolation: isolate;         /* Eigenen Stacking Context */
  background-color: transparent;
}

/* Linke Bildspalte */
.hero-visual-wrapper {
  position: relative;
  overflow: hidden;
  height: 500px;
}

/* Hero-Bild (SVG) */
.hero-visual {
  position: absolute;
  bottom: 55px;
  right: 150px;
  width: 110%;
  max-width: none;
}

/* Rechte Textspalte im Hero */
.hero-text {
  padding-top: 2rem;          /* Luft zwischen Navbar und Headline */
}

.hero-text h1 {
  margin-top: 0;              /* kein zusätzliches margin */
}

.hero-text {
  margin-top: 50px!important;   /* Abstand vom oberen Rand */
}

/* ================================
   Hintergrund-Animation
   ================================ */

.hero-anim-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;               /* halbtransparent */
}

.hero-anim-bg .fusion-visual {
  max-width: none;
  width: 100%;
  height: 100%;
}

.hero-anim-bg .fusion-visual svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay für bessere Lesbarkeit des Textes */
.hero-anim-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 15% 40%, rgba(15,18,41,.55), transparent 60%),
              linear-gradient(180deg, rgba(15,18,41,.35) 0%, rgba(15,18,41,0) 40%);
  mix-blend-mode: multiply;
}

.hero-visual-wrapper {
  position: relative;
  overflow: hidden;
  height: auto;         /* statt fixer Höhe */
}

.hero-visual {
  position: relative;   /* statt absolute */
  top: auto;
  right: auto;
  width: 100%;          /* skaliert mit Container */
  height: auto;
  max-width: 100%;
  display: block;
}

/* ================================
   Responsiveness
   ================================ */

/* Desktop: BG-Animation ausblenden */
@media (min-width: 992px) {
  .hero-anim-bg { display: none; }
}

/* Mobile: rechte Spalte-Animation ausblenden */
@media (max-width: 991.98px) {
  .fusion-visual.desktop-only { display: none; }
}


/* ================================
   Motion Preferences
   ================================ */

/* Wenn Nutzer Bewegungen reduziert haben möchte */
@media (prefers-reduced-motion: reduce) {
  .hero-anim-bg { opacity: .15; } /* Animation sehr abgeschwächt */
  .fusion-visual [data-animated] { display: none; }
  .fusion-visual [data-static] { display: block; }
}

/* Default: statisches Bild versteckt */
.fusion-visual [data-static] { display: none; }