/* ==========================================================================
   CSS VARIABLEN UND GRUNDEINSTELLUNGEN
   ========================================================================== */

/* Farbvariablen */
:root {
  /* MAGENTAROT */
  --color-magenta: #d60029; /* Hauptrot */
  --color-magenta-dark: #a5001e; /* dunkles Rot */
  --color-magenta-hsl: hsl(349, 100%, 65%);
  --color-magenta-pale: #f29494;
  --color-magenta-pale-hsl: hsl(360, 79%, 76%);

  /* HIMMELBLAU → ersetzt durch Grau */
  --color-sky: #444; /* dunkelgrau */
  --color-sky-hsl: hsl(0, 0%, 27%);
  --color-sky-pale: #888; /* hellgrau */
  --color-sky-pale-hsl: hsl(0, 0%, 53%);

  /* RAPSGELB */
  --color-yellow: #ffd300;
  --color-yellow-hsl: hsl(45, 97%, 50%);
  --color-yellow-pale: #fef2b3;
  --color-yellow-pale-hsl: hsl(45, 95%, 85%);

  /* LIMETTENGRÜN → ersetzt durch dunkles Grau */
  --color-lime: #222222; /* dunkelgrau */
  --color-lime-hsl: hsl(0, 0%, 13%);
  --color-lime-pale: #444; /* normalgrau */
  --color-lime-pale-hsl: hsl(0, 0%, 27%);

  /* GRAU */
  --color-grey: #444;
  --color-light-grey: #888;
}

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */

.small, small {
  font-size: .6em !important;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.navbar-custom::after {
  background: linear-gradient( to left, #FFD300 0% 50%, #CC1734 50% 100% );
}

.navbar-brand {
  padding: 17px 20px;
}

.navbar-nav .nav-link {
  margin-right: 45px!important;
}

.navbar-brand img {
  height: 92px;
  margin-top: -10px;
}

.search-form button:hover {
  background-color: #c80024;
}

.pill-element:hover {
  background: #c80024;
}

/* Navigation - Responsive */
@media (max-width: 1200px) {
  .navbar-brand {padding:0;}    
  .navbar-brand img {height: 75px;}
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Hintergrund */
}

.video-overlay {
background-color: rgba(0, 0, 0, 0.5);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* dunkles Overlay */
  z-index: 0;
}

.header-content {
  position: relative;
  z-index: 1; /* über Overlay */
  color: #fff;
  text-align: center;
  padding: 2rem;
}

/* ==========================================================================
   SECTIONS - ALLGEMEINE SECTION STYLES
   ========================================================================== */

section#aktuelles::before {
  background: url(../img/bildmarke-sbg.svg) no-repeat;
  background-size: 650px;
}

section#nachhaltigkeit::before {
  background: rgba(0, 0, 0, 0.7); /* Overlay */
}

section#nachhaltigkeit {
  background: url(../img/business-partners-working-office.jpg) center bottom no-repeat fixed;
  background-size: cover;
}

.date-pill {
  background-color: var(--color-magenta);
}

.round-button {
  box-shadow: 0 4px 15px rgba(68, 68, 68, 0.3);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer::before {
  background: #CC1734;
}

footer h3  {
  color: var(--color-magenta);
  font-style: italic;
  font-weight: bold;
}

.social-icon {
  background-color: var(--color-grey);
}

/* ==========================================================================
   TOCHTERUNTERNEHMEN - CAROUSEL
   ========================================================================== */

.company-subsidiaries-slider .owl-nav button { 
  background: transparent!important;
  box-shadow: none!important;
}

.company-subsidiaries-slider .owl-next i,
.company-subsidiaries-slider .owl-prev i {
  color: var(--color-grey) !important;
}

.company-subsidiaries-slider .owl-prev {
  left: -25px !important;
}

.company-subsidiaries-slider .owl-next {
  right: -25px !important;
}

.subsidiary-company-card {
  padding: 7px;
  margin: 10px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 150px; /* Feste Höhe für alle Cards */
}

.subsidiary-company-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.company-image-wrapper {
  background: white;
  padding: 0px 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Nutzt die volle Höhe der Card */
}

.company-image {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.card-title {
  color: var(--color-magenta);
}

/* Tochterunternehmen - Responsive */
@media (max-width: 991.98px) {
  .company-image-wrapper {
    min-height: 100px;
    padding: 20px 15px;
  }
  
  .company-image {
    max-height: 60px;
  }
}

@media (max-width: 575.98px) {
  .subsidiary-company-card {
    margin: 5px;
    padding: 15px;
  }
  
  .company-image-wrapper {
    min-height: 80px;
    padding: 15px 10px;
  }
  
  .company-image {
    max-height: 50px;
  }
}

/* ==========================================================================
   DATEN UND FAKTEN - MANAGEMENT CARDS
   ========================================================================== */

#daten-fakten {
  padding-top: 120px;
  padding-bottom: 0px!important;
  margin-top: 80px;
}

.management-card {
  background: white;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  height: 100%;
  max-width: 325px;
  margin: 0 auto;
}

.management-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.management-role {
  padding: 15px 20px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.5px;
}

.management-content {
  padding: 20px 20px;
}

.management-name {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--color-grey);
}

/* Management Cards - Responsive */
@media (max-width: 767.98px) {
  .management-card {
    max-width: 280px;
  }
  
  .management-content {
    padding: 25px 20px;
  }
  
  .management-name {
    font-size: 18px;
  }
}