/*
==============================================================================
HOMEPAGE LAYOUT - ALLGEMEINE SEKTIONEN UND CONTAINER
==============================================================================
Diese Styles definieren das grundlegende Layout für die Startseite.
Alle Sektionen erhalten ein einheitliches Vollbild-Format mit konsistenten
Abständen und Ausrichtung.
*/

.section {
  min-height: 100vh;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 15vw;
  padding-right:15vw;
  background-color: #fff;
  display: flex;
  align-items: center;

}

/*
------------------------------------------------------------------------------
HERO-SEKTION CONTAINER STYLING
------------------------------------------------------------------------------
Spezielle Ausrichtung für den Container und die Hauptüberschrift im Hero-Bereich.
Alle Elemente werden zentriert dargestellt.
*/

.hero-section .container {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.hero-section .container h1 {
  text-align: center;
}

/*
------------------------------------------------------------------------------
TRANSPARENTE HINTERGRÜNDE FÜR KINDELEMENTE
------------------------------------------------------------------------------
Alle Kindelemente außerhalb des Hero-Bereichs erhalten transparente 
Hintergründe, um ein sauberes Design zu gewährleisten.
*/

.section * {
  background-color: transparent;
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

/*
==============================================================================
HERO-BEREICH HAUPTGESTALTUNG
==============================================================================
Der Hero-Bereich ist der erste Eindruck der Website mit Hintergrundbild,
Overlay-Effekt und zentraler Positionierung. Das negative margin-top
kompensiert eventuelle Header-Höhen.
*/

.hero-section {
  position: relative;
  margin-top: -15vh;
  min-height: 100vh;
  background-image: url('../img/4bfd17d2-8f0c-4ebb-a70e-01844acc2baa.png');
  background-size: cover;
  background-position: center;
  color: #fff;
}

/*
------------------------------------------------------------------------------
HERO OVERLAY UND CONTENT SCHICHTUNG
------------------------------------------------------------------------------
Das Overlay sorgt für bessere Lesbarkeit des Textes über dem Hintergrundbild.
Der Content wird durch z-index über das Overlay gelegt.
*/

.hero-section .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.hero-section .content {
  position: relative;
  z-index: 1;
}

/*
==============================================================================
KARTEN UND BILDER DARSTELLUNG
==============================================================================
Optimierte Darstellung für Service-Karten und Referenzbilder mit
einheitlichen Höhen und angepassten Proportionen.
*/

.service-card img {
  height: 220px;
  object-fit: cover;
}

.referenz-img {
  max-height: 50vh;
  object-fit: cover;
}

/*
==============================================================================
KARUSSELL KOMPONENTEN
==============================================================================
Anpassungen für Karussell-Beschriftungen mit dunklem Overlay-Hintergrund
für bessere Lesbarkeit.
*/

.custom-caption {
  background: var(--overlay-dark) !important;
  color: white;
}

/*
==============================================================================
BEWERTUNGS- UND RATING-SYSTEM
==============================================================================
Styling für Sterne-Bewertungen mit angepasster Schriftgröße.
*/

.star-rating {
  font-size: 1.2rem;
}

/*
==============================================================================
PARTNER LOGOS
==============================================================================
Responsive Darstellung der Partnerlogos mit quadratischen Proportionen
und angepasster Größe basierend auf der Viewport-Breite.
*/

.partner-logo {
  height: 30vw; 
  width: 30vw; 
  object-fit: contain;
}

/*
==============================================================================
COUNTER ANIMATION
==============================================================================
Zähler-Animationen erben Schriftarten und -gewichtung vom übergeordneten
Element für konsistente Typografie.
*/

.counter {
  font-family: inherit;
  font-weight: inherit;
}

/*
==============================================================================
ACCORDION KOMPONENTEN STYLING
==============================================================================
Erweiterte Gestaltung für Accordion-Elemente mit benutzerdefinierten
Farben und Interaktionseffekten.
*/

/*
------------------------------------------------------------------------------
ERWEITERTE ACCORDION BUTTONS
------------------------------------------------------------------------------
Styling für aufgeklappte Accordion-Buttons mit blauem Hintergrund und
weißer Schrift für bessere Sichtbarkeit des aktiven Zustands.
*/

.accordion-button:not(.collapsed) {
  background-color: var(--blue) !important;
  color: var(--white) !important;
  border-color: var(--blue) !important;
}

/*
------------------------------------------------------------------------------
ACCORDION FOCUS-ZUSTAND
------------------------------------------------------------------------------
Angepasster Focus-Ring für erweiterte Accordion-Buttons mit blauer
Schattierung für bessere Barrierefreiheit.
*/

.accordion-button:not(.collapsed):focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 47, 255, 0.25) !important;
}

/*
------------------------------------------------------------------------------
ACCORDION BUTTON TYPOGRAFIE
------------------------------------------------------------------------------
Verstärkte Schriftgewichtung für alle Accordion-Buttons zur besseren
Hervorhebung der Klickbereiche.
*/

.accordion-button {
  font-weight: 600;
}