/*
 * Brillante Strukturen - Marken-Override (2026-09-09)
 * Wird NACH main.css geladen und überschreibt gezielt nur die
 * Hintergrund-"Balken" (Header/Nav, Footer, alternierende Sektionen)
 * auf die neue Old/New-Money-Palette. main.css selbst bleibt unverändert,
 * damit die Original-Theme-Datei als Referenz/Fallback erhalten bleibt.
 *
 * Palette:
 *   Dunkel (Header/Hero/Footer-Bogen): #1A2E16 / #16260F
 *   Warmes Ivory (helle Sektionen):    #F7F3E8
 *   Warmes Parchment (Wechsel-Bänder): #EFE6D2
 *   Marken-Grün (dominant, unverändert): #70A837
 *   Messing/Bronze (Sekundärakzent):   #C2A165
 */

/* Header / Navbar: hell -> dunkel, Messing-Akzentlinie statt Hellgrün */
.navbar-light {
  background: #1A2E16;
  border-top: solid 4px #C2A165;
}
/* .tiny = kompakter Zustand nach dem Scrollen (per JS-Klasse gesetzt);
   hat im Theme dieselbe Selektor-Spezifität wie eine eigene Regel weiter
   unten in main.css und muss daher explizit mitüberschrieben werden. */
.navbar-light.tiny {
  background: #1A2E16;
  border-top-color: #C2A165;
}
.navbar-light .navbar-collapse .navbar-nav > li > a {
  color: #CFC7AB;
}
.navbar-light .navbar-collapse .navbar-nav > li > a:hover,
.navbar-light .navbar-collapse .navbar-nav > li > a:focus,
.navbar-light .navbar-collapse .navbar-nav > li > a:active,
.navbar-light .navbar-collapse .navbar-nav > li.active > a,
.navbar-light .navbar-collapse .navbar-nav > li.active > a:hover,
.navbar-light .navbar-collapse .navbar-nav > li.active > a:focus,
.navbar-light .navbar-collapse .navbar-nav > li.active > a:active {
  background-color: #70A837;
  color: #FFFFFF;
}
.navbar-light .navbar-toggle span.navbar-toggler-icon i,
.navbar-light .navbar-toggler span.navbar-toggler-icon i {
  color: #CFC7AB;
}

/* Footer: bestehendes Dunkelgrün auf denselben Ton wie Header angleichen,
   damit Kopf und Fuß denselben "Bogen" bilden */
.footer-top {
  background-color: #1A2E16;
  color: #E6DFC9;
}
.footer-bottom {
  background-color: #16260F;
}
.footer-top .footer-widget h3 {
  color: #F2F8EC;
}

/* Helle Wechsel-Sektionen: warmes Ivory statt kühlem Blaugrau */
.bg-gray {
  background-color: #F7F3E8;
}

/* Hauptüberschriften (z.B. "Unternehmens-Quick-Check", "Latest Contracts")
   auf den literalen Marken-Grünton statt des bisherigen dunkleren
   Theme-Oliv. .title-r ist die rechtsbündige Variante (z.B. "Latest
   Contracts", "Team"). */
.title h2, .title h3,
.title-r h2, .title-r h3 {
  color: #70A837;
}

/* Dünner Messing-Akzent für Trennlinien/Zitate, wo im Theme genutzt */
blockquote,
.quote {
  border-color: #C2A165;
}

/* Hero-Slogan (3-zeilig, ersetzt den bisherigen kurzen Markennamen-Claim).
   Jede Zeile ist ein eigenes Glanz-Segment (.shine-line) mit identischem,
   rein horizontalem (90°) Verlauf – dadurch leuchten alle drei Zeilen an
   derselben Mausposition synchron auf, statt durch einen schrägen
   Verlauf über den ganzen Block versetzt/ungleichmäßig zu wirken. */
.home-promo .titlepro .middle.slogan {
  font-size: 34px;
  line-height: 1.35;
  font-weight: 800;
  /* Der dunkle text-shadow von main.css (.titlepro, fuer Lesbarkeit der
     weissen Zeilen auf Fotos) verdunkelt/vermatscht die goldene
     Farbverlauf-Schrift, da er direkt hinter den Buchstaben-Konturen
     liegt - fuer die Slogan-Zeilen deaktivieren. */
  text-shadow: none;
}
.home-promo .titlepro .middle.slogan .shine-line {
  display: inline-block;
  background-image: linear-gradient(90deg, #D4AF37 0%, #F0D875 20%, #FFF6D6 40%, #F0D875 60%, #D4AF37 80%, #C9A227 100%);
  background-size: 250% 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: #D4AF37;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.08s ease-out;
}
.home-promo .titlepro .middle.slogan.auto-shine .shine-line {
  animation: slogan-shine 6s ease-in-out infinite;
}
@keyframes slogan-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-promo .titlepro .middle.slogan.auto-shine .shine-line {
    animation: none;
  }
}
/* Heller Hero-Überzug (statt dunkel) für besseren Kontrast zur Messing-
   Schrift – dafür müssen die übrigen Textzeilen von Weiß auf dunkle
   Tinte umgestellt werden, sonst verschwinden sie auf hellem Grund. */
.home-promo {
  color: #1A2E16;
}
.home-promo .titlepro .upper {
  font-size: 22px;
  font-weight: 600;
  color: #1A2E16;
}
.home-promo .titlepro .bottom {
  color: #1A2E16;
}

/* Globale Unterüberschriften-Farbe: Hauptüberschriften (.title h2/h3, z.B.
   "Unternehmens-Quick-Check") bleiben unverändert in ihrem bisherigen Grün.
   Alle Unterüberschriften (h3/h4/h5 außerhalb von .title, z.B. Fragetexte
   im Quick-Check, Sektions-Zwischentitel) bekommen einheitlich das
   Dunkelgrün #1A2E16. Bereits bestehende, spezifischere Regeln (z.B. die
   hellen Footer-Widget-Überschriften auf dunklem Grund) sind spezifischer
   und behalten weiterhin Vorrang. */
h3, h4, h5 {
  color: #1A2E16;
}

/* Unternehmens-Quick-Check Funnel (Startseite) */
.qc-progress-wrap {
  margin-bottom: 30px;
}
.qc-progress-track {
  height: 6px;
  width: 100%;
  border-radius: 6px;
  background: #E4E4E4;
  overflow: hidden;
}
.qc-progress-bar {
  height: 100%;
  width: 0;
  background: #70A837;
  transition: width 0.3s ease;
}
.qc-progress-label {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: #52525b;
}
.qc-question {
  text-align: center;
  color: #1A2E16;
  font-weight: 700;
  margin-bottom: 24px;
}
.qc-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qc-option {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 2px solid #D5D5D5;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #4A4030;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.qc-option:hover {
  border-color: #70A837;
  background-color: #F7F3E8;
}
.qc-result {
  text-align: center;
}
.qc-result-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C2A165;
  margin-bottom: 8px;
}
#qc-result-label {
  color: #1A2E16;
  font-weight: 800;
  margin-bottom: 12px;
}
#qc-result-text {
  color: #4A4030;
  max-width: 480px;
  margin: 0 auto 24px;
}

/* Hero-Slider (Startseite): 5 neue Motive (2026-09-10), ersetzt die
   bisherigen Platzhalter-/Stock-Bilder aus main.css.
   Ursache fuer den anfaenglich uneinheitlichen Grauton: slide-1 nutzte
   in main.css einen deutlich duenneren Ivory-Überzug (0.35 Alpha) als
   slide-2/3/4 (0.72 Alpha) - dadurch wirkte nur "Brillanten" dunkler.
   Hier alle 5 Slides auf denselben duennen 0.35-Überzug vereinheitlicht,
   damit der komplette Slider "aus einem Guss" wirkt. */
.bg-slider-wrapper .flexslider .slide.slide-1 {
  background: #222 url("../img/hero/hero-1-brillanten.jpg") no-repeat 50% top;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .slide.slide-2 {
  background: #222 url("../img/hero/hero-2-mittelstand.jpg") no-repeat 50% top;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .slide.slide-3 {
  background: #222 url("../img/hero/hero-3-business.jpg") no-repeat 50% top;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .slide.slide-4 {
  background: #222 url("../img/hero/hero-4-handwerk.jpg") no-repeat 50% top;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .slide.slide-5 {
  background: #222 url("../img/hero/hero-5-industrie.jpg") no-repeat 50% top;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .slide.slide-2:before,
.bg-slider-wrapper .flexslider .slide.slide-3:before,
.bg-slider-wrapper .flexslider .slide.slide-4:before {
  background: rgba(247, 243, 232, 0.35);
}
/* Impressum: Sprungziel fuer Anker-Links (z.B. "AGB der App" von
   transformation.html aus) - ohne diesen Versatz wuerde die fixierte Navbar
   die Ueberschrift beim Anspringen verdecken. */
.legal-anchor {
  scroll-margin-top: 110px;
}

.bg-slider-wrapper .flexslider .slide.slide-5:before {
  background: rgba(247, 243, 232, 0.35);
  content: "";
  position: absolute;
  width: 100%;
  height: 600px;
  top: 0;
  left: 0;
  z-index: 5;
}