/* =============================================================
   style-hero-final-v6.css
   Vereinigung aus style-hero-symbol-v5 + style-hero-hotfix (voll funktionsfähig)
   Keine Änderungen an Layout, Farben oder Abständen.
   ============================================================= */

/* --- BEGIN: style-hero-symbol-v5 --- */
/* === style-hero-symbol-XL-v5.css (Logo extra groß oben, Untertext unten, Handy-optimiert) === */

.hero-overlay-symbol {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hero-Bild */
.hero-symbol img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}

/* === EXTRA GROßES LOGO OBEN MIT ABSTAND === */
.hero-overlay-symbol::before {
  content: "";
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 1300px;
  height: 460px;
  background: url("images/Logo_RS.png?v=2025-11-07-heroXL5") no-repeat center / contain;
  z-index: 3;
  pointer-events: none;
  opacity: 0.98;
}

/* Überschrift bleibt ausgeblendet */
.hero-overlay-symbol h1 {
  display: none !important;
}

/* === PILLE (UNTERTEXT) UNTEN IM HERO === */
.hero-overlay-symbol .hero-text {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: #fff;
}

.hero-overlay-symbol .muted.pill {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 25px;
  background: rgba(0, 70, 110, 0.75);
  color: #f8faff;
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: 0 6px 20px rgba(0, 30, 60, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* === Tablet === */
@media (max-width: 1024px) {
  .hero-symbol img { height: 60vh; }
  .hero-overlay-symbol::before {
    width: 1000px;
    height: 360px;
    top: 4%;
  }
  .hero-overlay-symbol .hero-text { bottom: 5%; }
}

/* === Handy === */
@media (max-width: 600px) {
  .hero-symbol img { height: 50vh; }

  .hero-overlay-symbol::before {
    width: 600px;
    height: 240px;
    top: 5%;
  }

  .hero-overlay-symbol .hero-text { bottom: 4%; }

  /* Pille: kompakt und einzeilig */
  .hero-overlay-symbol .muted.pill {
    font-size: 0.82rem;
    padding: 8px 14px;
    white-space: nowrap;
    border-radius: 18px;
    background: rgba(0, 70, 110, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
  }
}


/* --- END: style-hero-symbol-v5 --- */

/* --- BEGIN: style-hero-hotfix --- */
/* style-hero-hotfix.css — Erzwingt identisches Verhalten wie Startseite (Overlay + Logo) */
.hero-overlay-symbol { position: relative !important; overflow: hidden !important; text-align: center !important; margin: 0 !important; padding: 0 !important; }
.hero-symbol img { width: 100% !important; height: 55vh !important; object-fit: cover !important; display: block !important; opacity: 0.9 !important; }
.hero-overlay-symbol::before {
  content: "" !important;
  position: absolute !important;
  top: 3% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1300px !important; height: 460px !important;
  background: url("images/Logo_RS.png?v=2025-11-07-hotfixXL5") no-repeat center / contain !important;
  z-index: 3 !important; pointer-events: none !important; opacity: .98 !important;
}
.hero-overlay-symbol h1 { display: none !important; }
.hero-overlay-symbol .hero-text {
  position: absolute !important;
  bottom: 6% !important; left: 50% !important; transform: translateX(-50%) !important;
  z-index: 2 !important; text-align: center !important; color: #fff !important;
}
.hero-overlay-symbol .muted.pill {
  display: inline-block !important; padding: 14px 28px !important; border-radius: 25px !important;
  background: rgba(0, 70, 110, .75) !important; color: #f8faff !important; font-weight: 600 !important;
  box-shadow: 0 6px 20px rgba(0,30,60,.25) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}
@media (max-width: 600px) {
  .hero-symbol img { height: 50vh !important; }
  .hero-overlay-symbol::before { width: 600px !important; height: 240px !important; top: 5% !important; }
  .hero-overlay-symbol .hero-text { bottom: 4% !important; }
  .hero-overlay-symbol .muted.pill { font-size: .82rem !important; padding: 8px 14px !important; white-space: nowrap !important; border-radius: 18px !important; }
}


/* --- END: style-hero-hotfix --- */



/* =============================================================
   Logo-Position-Optimierung (RS) – Logo leicht nach oben versetzt
   ============================================================= */
.hero-overlay-symbol::before {
  top: 2.2% !important; /* vorher ca. 3–4% */
}
@media (max-width: 600px) {
  .hero-overlay-symbol::before {
    top: 4% !important; /* mobil leicht tiefer für Balance */
  }
}



/* =============================================================
   HERO-SYNC + LOGO-RAISE (RS)
   - identische Hero-Höhe auf allen Seiten
   - Logo insgesamt höher (ca. +5–6%)
   - Pille/Textsicherheit beibehalten
   ============================================================= */
:where(.hero-overlay-symbol){ position: relative !important; }

/* Einheitliche Bildhöhe + Ausschnitt */
:where(.hero-overlay-symbol) .hero-symbol img{
  width: 100% !important;
  height: 55vh !important;              /* überall gleich */
  object-fit: cover !important;
  object-position: center 28% !important; /* leicht nach oben fokussiert */
  display: block !important;
}

/* Logo insgesamt höher setzen */
:where(.hero-overlay-symbol)::before{
  top: 1.6% !important;                  /* vorher ~2.2–4% */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
}

/* Pille unten stabil */
:where(.hero-overlay-symbol) .hero-text{
  position: absolute !important;
  bottom: 5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  text-align: center !important;
}

/* Mobile Tweaks */
@media (max-width: 600px){
  :where(.hero-overlay-symbol) .hero-symbol img{
    height: 50vh !important;
    object-position: center 26% !important;
  }
  :where(.hero-overlay-symbol)::before{ top: 3.6% !important; }
  :where(.hero-overlay-symbol) .hero-text{ bottom: 4.5% !important; }
}



/* =============================================================
   Chrome Desktop Tweak – Logo höher & Bildfokus leicht nach oben
   ============================================================= */
:where(.hero-overlay-symbol)::before{
  top: 0.8% !important;   /* vorher 1.6% */
}
:where(.hero-overlay-symbol) .hero-symbol img{
  object-position: center 25% !important; /* vorher 28% */
}
@media (max-width: 600px){
  :where(.hero-overlay-symbol)::before{ top: 3% !important; }
  :where(.hero-overlay-symbol) .hero-symbol img{ object-position: center 24% !important; }
}



/* =============================================================
   Logo höher positioniert (perfekter Abstand zum oberen Rand)
   ============================================================= */
:where(.hero-overlay-symbol)::before{
  top: 0.2% !important;  /* Logo sehr nah am oberen Rand, aber mit leichter Luft */
}



/* =============================================================
   HERO-Bereich verlängert (mehr vertikale Höhe für harmonischen Aufbau)
   ============================================================= */
:where(.hero-overlay-symbol) .hero-symbol img{
  height: 60vh !important; /* vorher 55vh */
}
@media (max-width: 600px){
  :where(.hero-overlay-symbol) .hero-symbol img{
    height: 55vh !important; /* vorher 50vh */
  }
}



/* =============================================================
   Bildausschnitt nach unten verlagern – Hände sichtbar machen
   ============================================================= */
:where(.hero-overlay-symbol) .hero-symbol img{
  object-position: center 45% !important;  /* mehr vom unteren Bereich sichtbar (Hände) */
}
@media (max-width: 600px){
  :where(.hero-overlay-symbol) .hero-symbol img{
    object-position: center 40% !important;  /* mobil etwas weniger nach unten für Balance */
  }
}



/* =============================================================
   Bildausschnitt weiter nach unten – Hände stärker sichtbar
   ============================================================= */
:where(.hero-overlay-symbol) .hero-symbol img{
  object-position: center 52% !important;  /* mehr vom unteren Bereich sichtbar */
}
@media (max-width: 600px){
  :where(.hero-overlay-symbol) .hero-symbol img{
    object-position: center 47% !important;  /* mobil leicht angehoben für Balance */
  }
}



/* =============================================================
   Bildausschnitt noch weiter nach unten – Hände deutlich sichtbar
   ============================================================= */
:where(.hero-overlay-symbol) .hero-symbol img{
  object-position: center 58% !important;  /* Hände fast vollständig sichtbar */
}
@media (max-width: 600px){
  :where(.hero-overlay-symbol) .hero-symbol img{
    object-position: center 53% !important;  /* mobil leicht höher für Balance */
  }
}



/* =============================================================
   Logo noch höher – feiner Abstand zum oberen Rand
   ============================================================= */
:where(.hero-overlay-symbol)::before{
  top: -0.8% !important;
}



/* =============================================================
   Logo noch etwas höher – Feinanpassung (-1.2%)
   ============================================================= */
:where(.hero-overlay-symbol)::before{
  top: -1.2% !important;
}