/* ==========================================================
   Hero System (kompatibel zur bestehenden Startseiten-Hero)
   ========================================================== */

/* Globale Variablen (ggf. mit deinem Theme abgleichen) */
:root {
  --ebrc-blue: #406bb2;
  --ebrc-green: #63b766;

  --hero-height: 25vh;                 /* Höhe der Rubrik-Heros */
  --hero-overlay: rgba(255, 255, 255, 0.6);

  --hero-title-font: "Poppins", sans-serif;
  --hero-title-weight: 700;
  --hero-title-size: 80px;             /* Desktop-Basis */
  --hero-title-line: 80px;

  --hero-subtitle-size: 24px;
  --hero-subtitle-weight: 400;
  --hero-subtitle-color: #555555;

  --hero-title-color: #222222;         /* Fallback */

  /* NEU: getrennte Variablen für Bild & Position */
  --hero-bg-image: none;
  --hero-bg-position: top left;

  /* Optional: andere Sektionen */
  --section-title-color: #222;
}

/* ----------------------------------------------------------
   Generische Hero-Basis
   ---------------------------------------------------------- */
.hero {
  width: 100%;
  height: var(--hero-height);
  position: relative;

  /* KEIN Shorthand mit doppelten Positionen mehr */
  background-image: var(--hero-bg-image);
  background-position: var(--hero-bg-position);
  background-repeat: no-repeat;
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;               /* Overlay unter den Inhalt legen */
}

.hero .container {
  position: relative;       /* Inhalt über Overlay */
  z-index: 2;
}

.hero__title {
  margin: 0;
  font-family: var(--hero-title-font);
  font-weight: var(--hero-title-weight);
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-line);
  color: var(--hero-title-color);
}

.hero__subtitle {
  color: var(--hero-subtitle-color);
  margin: 5px 0 30px 0;
  font-size: var(--hero-subtitle-size);
  font-weight: var(--hero-subtitle-weight);
}

/* Utilities */
.b-blue  { color: var(--ebrc-blue) !important; }
.b-green { color: var(--ebrc-green) !important; }
.c-italic { font-style: italic !important; }

/* ----------------------------------------------------------
   Startseite (#hero alias .hero--home)
   ---------------------------------------------------------- */
:is(#hero, .hero--home) {
  --hero-height: 75vh;
  --hero-overlay: rgba(255, 255, 255, 0.4);
  --hero-title-size: 56px;
  --hero-title-line: 84px;
}

.hero--home {
  /* HINTERGRUND NUR ÜBER VARIABLEN SETZEN */
  --hero-bg-image: url("../img/heroes/ebrc27_3000x1500.jpg");
  --hero-bg-position: bottom right;
}

.hero__title { margin:0; font-weight:900; line-height:1.05; font-family:"Poppins", Arial, sans-serif; }
.hero__title--xl { font-size:100px; }
.hero__title--blue { color: var(--ebrc-blue); }

@media (max-width: 992px){ .hero__title--xl { font-size:72px; } }
@media (max-width: 576px){ .hero__title--xl { font-size:52px; } }

.hero__welcome {
  display:inline-block;
  filter: drop-shadow(5px 5px 3px rgba(0,0,0,.5));
  margin-right:.25em;
}

/* =======================
   SVG-Logo
   ======================= */
.ebrc-logo__text {
  font-size: 180px;
  letter-spacing: -20px;
  font-family: "OfficinaSansITC", "Poppins", Arial, sans-serif;
}
.ebrc-logo__t--bold   { font-weight: 700; }
.ebrc-logo__t--regular { font-weight: 400; }
.ebrc-logo__t--italic { font-style: italic; }
.ebrc-logo__t--blue   { fill: var(--ebrc-blue); }
.ebrc-logo__t--green  { fill: var(--ebrc-green); }
.ebrc-logo__dot--green{ fill: var(--ebrc-green); }

/* ----------------------------------------------------------
   Rubrik-Modifier (nur Bild & Farbe)
   ---------------------------------------------------------- */
.hero--expertise {
    --hero-bg-image: url("../img/heroes/PeriodicTable.png");
    --hero-bg-position: center;
    --hero-title-color: var(--ebrc-blue);
}

.hero--services {
    --hero-bg-image: url("../img/heroes/Compass.png");
    --hero-bg-position: center;
    --hero-title-color: var(--ebrc-blue);
}

.hero--career {
    --hero-bg-image: url("../img/heroes/Road.png");
    --hero-bg-position: center;
    --hero-title-color: var(--ebrc-blue);
}

.hero--tools {
    --hero-bg-image: url("../img/heroes/Meeting2.png");
    --hero-bg-position: center;
    --hero-title-color: var(--ebrc-blue);
}
/* ... weitere Rubriken analog ...  */

/* ----------------------------------------------------------
   Buttons aus altem #hero übernehmen (sichtbar machen)
   ---------------------------------------------------------- */
.btn-get-started {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.3s ease;
  color: #fff;
  background: var(--ebrc-blue);
  text-decoration: none;
}
.btn-get-started:hover {
  background: #247cf0;
  color:#fff;
}

/* Optional: „Watch video“ aus Alt-Theme mitnehmen, falls genutzt */
.btn-watch-video {
  font-size: 16px;
  transition: 0.3s ease;
  margin-left: 25px;
  color: #222222;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.btn-watch-video i {
  color: var(--ebrc-blue);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}
.btn-watch-video:hover { color: var(--ebrc-blue); }
.btn-watch-video:hover i { color: #3b8af2; }

/* ----------------------------------------------------------
   Responsive (zentral)
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --hero-title-size: 40px;
    --hero-title-line: 64px;
    --hero-subtitle-size: 20px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --hero-title-size: 32px;
    --hero-title-line: 48px;
    --hero-subtitle-size: 18px;
  }
}

/* ==========================================================
   UTILITIES: Section-Titles
   ========================================================== */
.section-title h2 {
  color: var(--section-title-color);
  font-family: var(--hero-title-font);
  font-weight: 700;
}