/*
 * ================================================================
 *  STARK Abschleppdienst Koblenz — stark-custom.css  (v3 FINAL)
 *  Banner-inspiriertes Schwarz/Gold-Design
 *
 *  STRATEGIE:
 *  - Alle Farben, Fonts und Abstände als CSS Custom Properties
 *  - Keine Layout- oder Funktions-Änderungen (Links, Forms, Maps)
 *  - Gezieltes Überschreiben der Mobirise-Defaults via !important
 *  - Vollständige Abdeckung: Desktop, Tablet, Mobile
 *  - Inline-Styles (color: rgb(0,76,126)) per Attribut-Selektor
 * ================================================================
 */

/* ================================================================
   1.  CSS CUSTOM PROPERTIES (Design Tokens)
   ================================================================ */
:root {
  /* Farben */
  --c-black:     #05070A;
  --c-dark:      #111111;
  --c-mid:       #1a1a1a;
  --c-card:      #222222;
  --c-card2:     #2a2a2a;
  --c-yellow:    #f5c000;
  --c-yellow-d:  #c49800;
  --c-yellow-bg: rgba(245, 192, 0, 0.08);
  --c-yellow-glow: rgba(245, 192, 0, 0.30);
  --c-white:     #f0f0f0;
  --c-text:      #b2b2b2;
  --c-muted:     #666666;
  --c-border:    rgba(245, 192, 0, 0.18);
  --c-divider:   rgba(255, 255, 255, 0.06);
  --c-green:     #25d366;

  /* Diagonales Warn-Streifen-Muster (Banner-Look) */
  --c-stripe: repeating-linear-gradient(
    -52deg,
    transparent       0px,
    transparent      24px,
    rgba(245, 192, 0, 0.065) 24px,
    rgba(245, 192, 0, 0.065) 48px
  );

  /* Sonstiges */
  --radius:  8px;
  --radius-l: 12px;
  --trans:   all 0.25s ease;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 6px 24px var(--c-yellow-glow);
}


/* ================================================================
   2.  GLOBALE BASIS
   ================================================================ */
html {
  scroll-behavior: smooth;
}

html,
body {
  background-color: var(--c-black) !important;
  color: var(--c-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Keyboard focus — sichtbarer Fokusrahmen für Barrierefreiheit */
:focus-visible {
  outline: 2px solid var(--c-yellow) !important;
  outline-offset: 3px               !important;
  border-radius: 3px                !important;
}
:focus:not(:focus-visible) {
  outline: none !important;
}

/* Alle Mobirise-Sections standardmäßig dunkel */
section {
  background-color: var(--c-dark) !important;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
  color:       var(--c-white)    !important;
  word-break:  break-word;
  line-height: 1.15              !important;
}

h1 {
  letter-spacing: -0.01em   !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

h2 {
  letter-spacing: -0.005em  !important;
}

/* strong/b in Überschriften → Gold-Akzent */
h1 strong, h1 b,
h2 strong, h2 b,
h3 strong, h3 b {
  color: var(--c-yellow) !important;
}

/* Fließtext */
p,
.mbr-text {
  color:       var(--c-text) !important;
  font-size:   1.05rem       !important;
  line-height: 1.85          !important;
}

/* Listen in Inhalt-Sections (NICHT Navbar/Footer) */
section ul li,
section ol li {
  color: var(--c-text) !important;
  line-height: 1.7 !important;
}

/* strong/b in Fließtext */
p strong, p b,
li strong, li b {
  color: var(--c-white) !important;
}

/* Links */
a {
  color: var(--c-yellow) !important;
  transition: color 0.2s ease !important;
}
a:hover {
  color: var(--c-white) !important;
}

/* Scrollbar */
::-webkit-scrollbar        { width: 5px; background: var(--c-black); }
::-webkit-scrollbar-thumb  { background: var(--c-yellow); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-yellow-d); }

/* Textauswahl */
::selection { background: var(--c-yellow); color: var(--c-black); }

/* Inline-Style-Override: blauer Icon-Farbwert → Gold */
[style*="color: rgb(0, 76, 126)"]  { color: var(--c-yellow) !important; }
[style*="fill: rgb(0, 76, 126)"]   { fill:  var(--c-yellow) !important; }

/* Inline-Style-Override: WhatsApp-Grün beibehalten */
[style*="color: rgb(18, 138, 70)"] { color: var(--c-green) !important; }
[style*="fill: rgb(18, 138, 70)"]  { fill:  var(--c-green) !important; }


/* ================================================================
   3.  NAVBAR
   ================================================================ */

/* Haupt-Navbar — alle cid-Varianten */
.menu .navbar,
nav.navbar.navbar-dropdown {
  background: var(--c-black)            !important;
  border-bottom: 2px solid var(--c-yellow) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6) !important;
  transition: var(--trans)              !important;
}

/* Geöffneter Zustand (Mobilmenü) */
.menu .navbar.opened {
  background: var(--c-black) !important;
}

/* ---- Navbar Logo (picture element — stark-site-logo) --------- */
.stark-site-logo {
  width:          clamp(180px, 14vw, 230px) !important;
  height:         auto                      !important;
  display:        block                     !important;
  transition:     opacity 0.2s ease         !important;
}
.stark-site-logo:hover {
  opacity: 0.85 !important;
}

@media (max-width: 700px) {
  .stark-site-logo {
    width: 180px !important;
  }
}

.navbar .navbar-logo img {
  height:       4.8rem    !important;
  width:        auto      !important;
  max-width:    240px     !important;
  transition:   opacity 0.2s ease !important;
}
.navbar .navbar-logo img:hover {
  opacity: 0.85 !important;
}

/* ---- Nav-Links ------------------------------------------------ */
/* Kernproblem-Fix: display-4 gibt 1.5rem + word-break.
   Hier wird beides für Navbar-Kontext zurückgesetzt.           */
.navbar-nav .nav-item {
  flex: 0 0 auto         !important;
}

.navbar-nav .nav-link,
.navbar-nav a.nav-link,
.nav-dropdown .link,
.navbar-nav .nav-link.text-black,
.navbar-nav .nav-link.text-primary,
.navbar-nav .nav-link.display-4 {
  font-family:     'Jost', sans-serif  !important;
  font-size:       0.95rem             !important;
  font-weight:     700                 !important;
  letter-spacing:  0.1em               !important;
  text-transform:  uppercase           !important;
  line-height:     1.2                 !important;
  white-space:     nowrap              !important;
  word-break:      normal              !important;
  word-wrap:       normal              !important;
  overflow-wrap:   normal              !important;
  color:           var(--c-white)      !important;
  padding:         0.4em 0.75em        !important;
  position:        relative            !important;
  transition:      color 0.2s ease     !important;
}

/* Gold-Unterstrich beim Hover */
.navbar-nav .nav-link::after,
.nav-dropdown .link::after {
  content:    ''                      !important;
  position:   absolute                !important;
  bottom:     -2px                    !important;
  left:       0.75em                  !important;
  right:      0.75em                  !important;
  height:     2px                     !important;
  background: var(--c-yellow)         !important;
  transform:  scaleX(0)               !important;
  transition: transform 0.22s ease    !important;
  border-radius: 1px                  !important;
}
.navbar-nav .nav-link:hover::after,
.nav-dropdown .link:hover::after {
  transform: scaleX(1) !important;
}

.navbar-nav .nav-link:hover,
.nav-dropdown .link:hover {
  color: var(--c-yellow) !important;
}

/* ---- Dropdown-Menü ------------------------------------------- */
.navbar .dropdown-menu {
  background:    #0d0d0d                            !important;
  border:        1px solid var(--c-border)          !important;
  border-top:    2px solid var(--c-yellow)          !important;
  border-radius: 0 0 var(--radius) var(--radius)    !important;
  box-shadow:    0 8px 24px rgba(0, 0, 0, 0.6)      !important;
  padding:       0                                  !important;
  min-width:     180px                              !important;
}

.navbar .dropdown-item {
  background:      transparent                  !important;
  color:           var(--c-white)               !important;
  font-size:       0.78rem                      !important;
  font-weight:     600                          !important;
  letter-spacing:  0.08em                       !important;
  text-transform:  uppercase                    !important;
  padding:         0.7rem 1.4rem                !important;
  border-bottom:   1px solid var(--c-divider)   !important;
  border-left:     3px solid transparent        !important;
  white-space:     nowrap                       !important;
  transition:      var(--trans)                 !important;
}
.navbar .dropdown-item:last-child {
  border-bottom: none !important;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background:   rgba(245, 192, 0, 0.08) !important;
  color:        var(--c-yellow)         !important;
  border-left:  3px solid var(--c-yellow) !important;
}

/* ---- Navbar CTAs: Anruf-Button + WhatsApp-Kreis ---- */
/* Keine Mobirise-Klassen — vollständig eigene, konfliktfreie Klassen */

.navbar .stark-cta-call {
  display:         inline-flex      !important;
  align-items:     center           !important;
  gap:             7px              !important;
  background:      var(--c-yellow)  !important;
  color:           var(--c-black)   !important;
  padding:         0 16px 0 11px    !important;
  height:          40px             !important;
  border-radius:   5px              !important;
  width:           auto             !important;
  font-weight:     800              !important;
  font-size:       0.8rem           !important;
  letter-spacing:  0.05em           !important;
  text-transform:  uppercase        !important;
  text-decoration: none             !important;
  white-space:     nowrap           !important;
  border:          none             !important;
  transition:      background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  flex-shrink:     0                !important;
  margin-left:     14px             !important;
  line-height:     1                !important;
}
.navbar .stark-cta-call:hover {
  background:  #e6b400                         !important;
  color:       var(--c-black)                  !important;
  transform:   translateY(-1px)                !important;
  box-shadow:  0 4px 16px rgba(245,192,0,0.35) !important;
}
.navbar .stark-cta-call .mbr-iconfont {
  color:       var(--c-black) !important;
  font-size:   1rem           !important;
  flex-shrink: 0              !important;
  padding:     0              !important;
  margin:      0              !important;
}
.stark-cta-call-text {
  color:          var(--c-black) !important;
  font-weight:    800            !important;
  font-size:      0.8rem         !important;
  letter-spacing: 0.05em         !important;
}

.navbar .stark-cta-wa {
  display:         inline-flex      !important;
  align-items:     center           !important;
  justify-content: center           !important;
  width:           40px             !important;
  height:          40px             !important;
  border-radius:   50%              !important;
  background:      #25D366          !important;
  text-decoration: none             !important;
  border:          none             !important;
  flex-shrink:     0                !important;
  margin-left:     8px              !important;
  transition:      background 0.18s ease, transform 0.18s ease !important;
  line-height:     1                !important;
}
.navbar .stark-cta-wa:hover {
  background: #1db954       !important;
  transform:  scale(1.08)   !important;
  color:      #25D366       !important;
}
.navbar .stark-cta-wa span {
  color:           #ffffff !important;
  font-size:       1.2rem  !important;
  display:         flex    !important;
  align-items:     center  !important;
  justify-content: center  !important;
  padding:         0       !important;
  margin:          0       !important;
  line-height:     1       !important;
}

@media (max-width: 991px) {
  /* icons-menu is outside collapse → brand gets auto margin to push it right */
  .navbar .navbar-brand {
    margin-right:  auto !important;
    padding-right: 0    !important;  /* Mobirise adds 2rem here — removes it to prevent wrapping */
  }
  .navbar .stark-cta-call {
    display:       inline-flex !important;
    align-items:   center      !important;
    justify-content: center    !important;
    width:         40px        !important;
    height:        40px        !important;
    padding:       0           !important;
    border-radius: 50%         !important;
    gap:           0           !important;
    margin-left:   6px         !important;
  }
  .stark-cta-call-text {
    display: none !important;
  }
  /* Icon perfekt zentriert im Kreis */
  .navbar .stark-cta-call .mbr-iconfont {
    display:         flex    !important;
    align-items:     center  !important;
    justify-content: center  !important;
    width:           auto    !important;
    height:          auto    !important;
    padding:         0       !important;
    margin:          0       !important;
    line-height:     1       !important;
    font-size:       1.2rem  !important;
  }
}

/* Desktop: icons-menu re-ordered to appear after nav links */
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    flex-grow: 1       !important;
  }
  .navbar .icons-menu {
    order: 10          !important;
  }
}

/* ---- Hamburger (Mobile) -------------------------------------- */
.navbar-toggler .hamburger span {
  background-color: var(--c-yellow) !important;
}

/* ---- Mobile Collapse ----------------------------------------- */
@media (max-width: 991px) {
  .navbar-collapse {
    background:  var(--c-black)          !important;
    border-top:  1px solid var(--c-border) !important;
    padding:     0.5rem 0               !important;
  }
  .navbar-nav .nav-link,
  .nav-dropdown .link {
    font-size:   1rem           !important;
    padding:     0.75rem 1.5rem !important;
    border-bottom: 1px solid var(--c-divider) !important;
    text-align:  center         !important;
    white-space: nowrap         !important;
  }
  .navbar-nav .nav-link:hover {
    background: var(--c-yellow-bg) !important;
    color: var(--c-yellow)         !important;
  }
  .navbar .dropdown-menu {
    border:        none                     !important;
    border-radius: 0                        !important;
    box-shadow:    none                     !important;
    background:    #111111                  !important;
    border-top:    1px solid var(--c-border) !important;
  }
}


/* ================================================================
   4.  CTA-ABSCHNITTE — Diagonale Warnstreifen (Banner-Look)
       content4 = oberes CTA-Banner (jede Seite)
       content11 = mittleres ANRUFEN-Banner
   ================================================================ */

/* WICHTIG: padding-top kompensiert die fixe Navbar-Höhe (~100px) */
.menu + section,
section.content4,
[class*="cid-"][class*="tQhQTFQYga"],
[class*="cid-"][class*="tTaa2ykTup"] {
  background-color:  var(--c-black)  !important;
  background-image:  var(--c-stripe) !important;
  padding-top:       8.5rem          !important;
  padding-bottom:    2rem            !important;
  border-bottom:     1px solid var(--c-border) !important;
}

section.content4 .mbr-section-subtitle,
section.content4 h4 {
  color:       var(--c-white) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

/* "schnelle Hilfe" und Highlights */
section.content4 h4 b,
section.content4 h4 strong {
  color: var(--c-yellow) !important;
}

section.content11,
[class*="cid-"][class*="tQEZr1ppEu"] {
  background-color: var(--c-black)  !important;
  background-image: var(--c-stripe) !important;
  padding:          2.5rem 0        !important;
  border-top:    1px solid var(--c-border) !important;
  border-bottom: 1px solid var(--c-border) !important;
}


/* ================================================================
   5.  HERO SECTION (header14)
   ================================================================ */

section.header14 {
  background:   var(--c-dark) !important;
  padding-top:  2.5rem        !important;  /* breathing room after CTA stripe (mbr-additional sets 0) */
}

section.header14 h1.mbr-section-title {
  color:          var(--c-white)    !important;
  font-weight:    800               !important;
  font-size:      clamp(2rem, 4vw, 3.4rem) !important;
  letter-spacing: -0.02em           !important;
}

section.header14 h1 strong {
  color: var(--c-yellow) !important;
}

section.header14 .mbr-text,
section.header14 p {
  color:       var(--c-text) !important;
  font-size:   1.05rem       !important;
  line-height: 1.85          !important;
}

/* Bild mit Tiefenwirkung und Hover */
section.header14 .image-wrapper img {
  border-radius: var(--radius-l)                        !important;
  box-shadow:    0 20px 60px rgba(0, 0, 0, 0.75),
                 0 0 0 1px var(--c-border)              !important;
  transition:    transform 0.4s ease, box-shadow 0.4s ease !important;
}
section.header14 .image-wrapper img:hover {
  transform:  translateY(-4px)                     !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.85),
              0 0 0 1px var(--c-yellow)             !important;
}


/* ================================================================
   6.  FEATURE CARDS (features15)
       24h | Reaktionszeit | Transparenz
   ================================================================ */

section.features15 {
  background: var(--c-mid) !important;
  padding:    3rem 0       !important;
}

section.features15 .item-wrapper {
  background:    var(--c-card)                    !important;
  border:        1px solid var(--c-border)        !important;
  border-top:    3px solid var(--c-yellow)        !important;
  border-radius: var(--radius)                    !important;
  padding:       2rem 1.8rem                      !important;
  height:        100%                             !important;
  transition:    var(--trans)                     !important;
  align-items:   center                           !important;
}

section.features15 .item-wrapper:hover {
  border-color:  var(--c-yellow)                  !important;
  transform:     translateY(-6px)                 !important;
  box-shadow:    0 12px 40px rgba(0,0,0,0.6),
                 0 0 0 1px var(--c-yellow)        !important;
}

/* Icon */
section.features15 .mbr-iconfont {
  color:       var(--c-yellow) !important;
  fill:        var(--c-yellow) !important;
  font-size:   2.5rem          !important;
  display:     block           !important;
  flex-shrink: 0               !important;
  margin:      0 1.4rem 0 0    !important;  /* rechts Abstand zum Text, kein auto-margin */
}

/* Titel der Karte */
section.features15 .card-title {
  color:       var(--c-white) !important;
  font-size:   1.1rem         !important;
  font-weight: 700            !important;
  margin:      0.5rem 0       !important;
}

/* Text der Karte — display-4 gibt 1.5rem, hier korrigiert */
section.features15 .card-text {
  color:       var(--c-text)  !important;
  font-size:   1.05rem        !important;
  line-height: 1.6            !important;
}


/* ================================================================
   7.  LEISTUNGSLISTEN (content13)
   ================================================================ */

section.content13 {
  background: var(--c-dark) !important;
  padding:    2rem 0 3rem   !important;
}

section.content13 .mbr-section-title {
  color:         var(--c-yellow)                    !important;
  font-weight:   700                                !important;
  font-size:     1.2rem                             !important;
  border-left:   4px solid var(--c-yellow)          !important;
  padding-left:  1rem                               !important;
  margin-bottom: 1.5rem                             !important;
}

section.content13 ul {
  list-style:   none          !important;
  padding-left: 0.5rem        !important;
  margin:       0             !important;
}

section.content13 ul li {
  position:    relative   !important;
  padding-left: 1.6rem    !important;
  color:        var(--c-text)  !important;
  margin-bottom: 1rem     !important;
  line-height:  1.65      !important;
  font-size:    1.05rem   !important;
}

section.content13 ul li::before {
  content:  '▸'               !important;
  position: absolute          !important;
  left:     0                 !important;
  top:      0.15rem           !important;
  color:    var(--c-yellow)   !important;
  font-size: 0.9rem           !important;
}

section.content13 ul li strong {
  color:       var(--c-white) !important;
  font-weight: 600            !important;
}


/* ================================================================
   8.  EINSATZGEBIETE (content5)
   ================================================================ */

section.content5 {
  background: var(--c-mid)  !important;
  padding:    3rem 0 2.5rem !important;
}

section.content5 .mbr-section-subtitle,
section.content5 h4 {
  color:        var(--c-white) !important;
  font-weight:  700            !important;
  border-left:  4px solid var(--c-yellow) !important;
  padding-left: 1rem           !important;
}

section.content5 .mbr-text,
section.content5 p {
  color: var(--c-text) !important;
}


/* ================================================================
   9.  KONTAKT-KARTEN (contacts2)
   ================================================================ */

section.contacts2 {
  background: var(--c-dark) !important;
  padding:    3rem 0        !important;
}

section.contacts2 .mbr-section-title {
  font-size:   2rem !important;
  font-weight: 700  !important;
  line-height: 1.2  !important;
}

section.contacts2 .mbr-section-title strong {
  color: var(--c-yellow) !important;
}

section.contacts2 .card-wrapper {
  background:    var(--c-card)                    !important;
  border:        1px solid var(--c-border)        !important;
  border-left:   4px solid var(--c-yellow)        !important;
  border-radius: var(--radius)                    !important;
  padding:       1.5rem 2rem                      !important;
  margin-bottom: 1.5rem                           !important;
  transition:    var(--trans)                     !important;
}

section.contacts2 .card-wrapper:hover {
  border-color:  var(--c-yellow)                  !important;
  transform:     translateX(4px)                  !important;
  box-shadow:    var(--shadow-card)               !important;
  background:    var(--c-card2)                   !important;
}

/* Icon in Karte */
section.contacts2 .mbr-iconfont {
  color:     var(--c-yellow) !important;
  fill:      var(--c-yellow) !important;
  font-size: 1.8rem          !important;
}

section.contacts2 .card-title,
section.contacts2 h6 {
  color:       var(--c-white) !important;
  font-size:   1.1rem         !important;
  font-weight: 700            !important;
}

section.contacts2 .mbr-text,
section.contacts2 p {
  color:     var(--c-text) !important;
  font-size: 1.05rem       !important;
}

/* Hervorgehobene Infos in Gold (Firmenname, Öffnungszeiten) */
section.contacts2 .mbr-text strong,
section.contacts2 p strong {
  color:       var(--c-yellow) !important;
  font-weight: 600             !important;
}

section.contacts2 a.text-secondary,
section.contacts2 a {
  color:       var(--c-yellow) !important;
  font-weight: 500             !important;
}
section.contacts2 a:hover {
  color: var(--c-white) !important;
}


/* ================================================================
   10. KONTAKTFORMULAR (form5)
   ================================================================ */

section.form5 {
  background: var(--c-mid)  !important;
  padding:    3rem 0 4rem   !important;
}

section.form5 .mbr-section-title strong {
  color: var(--c-white) !important;
}

section.form5 .mbr-section-subtitle {
  color: var(--c-text) !important;
}

/* Eingabefelder */
.form-control {
  background-color: var(--c-card2)                    !important;
  border:           1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius:    6px                               !important;
  color:            var(--c-white)                    !important;
  font-size:        0.95rem                           !important;
  box-shadow:       none                              !important;
  transition:       border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control::placeholder {
  color: var(--c-muted) !important;
}

.form-control:focus {
  border-color: var(--c-yellow)                        !important;
  box-shadow:   0 0 0 3px rgba(245, 192, 0, 0.12)      !important;
  background-color: #2e2e2e                            !important;
  outline: none                                        !important;
}

.alert-success {
  background-color: var(--c-yellow) !important;
  color:            var(--c-black)  !important;
  font-weight:      700             !important;
  border-radius:    6px             !important;
}

.alert-danger {
  background-color: #c0392b !important;
  border-radius:    6px     !important;
}


/* ================================================================
   11. GOOGLE MAPS SECTION (map2)
   ================================================================ */

section.map2 {
  background: var(--c-dark) !important;
}

section.map2 iframe {
  filter: grayscale(25%) brightness(0.82) !important;
  display: block                          !important;
}


/* ================================================================
   12. FOOTER (footer3)
   ================================================================ */

section.footer3 {
  background:  #060606                        !important;
  border-top:  2px solid var(--c-yellow)      !important;
  padding:     3rem 0                         !important;
}

/* Footer-Navigationslinks */
section.footer3 .foot-menu {
  gap: 0 !important;
}
section.footer3 .foot-menu li a,
section.footer3 .text-success {
  color:          #666666      !important;
  font-size:      0.82rem      !important;
  font-weight:    600          !important;
  letter-spacing: 0.08em       !important;
  text-transform: uppercase    !important;
  transition:     color 0.2s   !important;
}
section.footer3 .foot-menu li a:hover,
section.footer3 .text-success:hover {
  color: var(--c-yellow) !important;
}

/* Social Icons — immer horizontal, auf allen Breakpoints */
section.footer3 .social-list,
section.footer3 .social-list.align-right {
  display:         flex    !important;
  flex-direction:  row     !important;
  flex-wrap:       nowrap  !important;  /* verhindert vertikales Stapeln */
  justify-content: center  !important;
  align-items:     center  !important;
  gap:             0.8rem  !important;
  width:           100%    !important;  /* erzwingt volle Breite im Bootstrap-row-Kontext */
  text-align:      center  !important;
}

section.footer3 .mbr-iconfont-social,
section.footer3 .social-list .socicon {
  color: var(--c-yellow) !important;
  fill:  var(--c-yellow) !important;
}

section.footer3 .social-list a {
  opacity: 0.65 !important;
  transition: opacity 0.2s !important;
}
section.footer3 .social-list a:hover {
  opacity: 1 !important;
}

/* Abstand zwischen Social-Icons und Nav-Links (Icons sind oben) */
section.footer3 .social-row {
  margin-bottom: 0.75rem !important;
}

/* Footer-Logo */
.stark-footer-logo {
  width:          160px   !important;
  height:         auto    !important;
  opacity:        0.80    !important;
  display:        inline-block !important;
  transition:     opacity 0.2s ease !important;
}
.stark-footer-logo:hover {
  opacity: 1 !important;
}

/* Copyright */
section.footer3 .row-copirayt p,
section.footer3 .mbr-white {
  color:     #5a5a5a  !important;
  font-size: 0.82rem  !important;
}


/* ================================================================
   13. BUTTONS
   ================================================================ */

/* Primary — Gold/Schwarz */
.btn-primary,
.btn-primary:active {
  background-color: var(--c-yellow) !important;
  border-color:     var(--c-yellow) !important;
  color:            #080808         !important;
  font-weight:      800             !important;
  letter-spacing:   0.08em          !important;
  text-transform:   uppercase       !important;
  box-shadow:       none            !important;
  transition:       var(--trans)    !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active {
  background-color: var(--c-yellow-d) !important;
  border-color:     var(--c-yellow-d) !important;
  color:            #080808           !important;
  box-shadow:       var(--shadow-glow) !important;
  transform:        translateY(-2px)   !important;
}

/* Secondary — Outline Gold */
.btn-secondary,
.btn-secondary:active {
  background-color: transparent        !important;
  border-color:     var(--c-yellow)    !important;
  color:            var(--c-yellow)    !important;
  font-weight:      700                !important;
  letter-spacing:   0.08em             !important;
  text-transform:   uppercase          !important;
  transition:       var(--trans)       !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active {
  background-color: var(--c-yellow)   !important;
  border-color:     var(--c-yellow)   !important;
  color:            #080808           !important;
  box-shadow:       var(--shadow-glow) !important;
  transform:        translateY(-2px)   !important;
}

/* Pill-Form für alle Seiten-Buttons */
.mbr-section-btn .btn {
  border-radius:  50px         !important;
  padding:        0.9rem 2.4rem !important;
  font-size:      0.9rem        !important;
  letter-spacing: 0.1em         !important;
}

/* Größerer ANRUFEN-Button auf Startseite */
section.content4 .mbr-section-btn .btn,
section.content11 .mbr-section-btn .btn {
  padding:    1rem 3rem  !important;
  font-size:  1rem       !important;
}

/* Icon-Farbe im Button erbt */
.btn .mbr-iconfont {
  color: inherit !important;
  fill:  inherit !important;
}

/* Schwebend bei Hover — nur kein transform auf deaktivierten Buttons */
.btn:disabled,
.btn.disabled {
  transform:  none  !important;
  box-shadow: none  !important;
}


/* ================================================================
   14. ICONS (allgemein)
   ================================================================ */

/* Alle Mobirise-Icons → Gold */
span.mbr-iconfont,
.mbr-iconfont,
.mobi-mbri,
.mbrib-clock,
.mbrib-rocket,
.mbrib-search,
.mbrib-map-pin,
.socicon-viber {
  color: var(--c-yellow) !important;
  fill:  var(--c-yellow) !important;
}

/* WhatsApp → grün */
.socicon-whatsapp {
  color: var(--c-green) !important;
  fill:  var(--c-green) !important;
}

/* Social-Icons im Footer → Gold */
.mbr-iconfont-social {
  color: var(--c-yellow) !important;
  fill:  var(--c-yellow) !important;
}


/* ================================================================
   15. FARB-HILFSKLASSEN (Mobirise-Semantik)
   ================================================================ */

.text-primary   { color: var(--c-yellow) !important; }
.text-secondary { color: var(--c-yellow) !important; }

/* text-success wird im Footer für Links genutzt — dort separat */
section:not(.footer3) .text-success { color: var(--c-yellow) !important; }


/* ================================================================
   16. ABSCHNITT-RHYTHMUS (Section Backgrounds)
       Abwechselnd dunkel/mittel für visuellen Fluss
   ================================================================ */

/* Dunkel */
section.header14,
section.content13,
section.contacts2,
section.map2 {
  background-color: var(--c-dark) !important;
}

/* Mittel */
section.features15,
section.content5,
section.form5 {
  background-color: var(--c-mid) !important;
}

/* Schwarz + Streifen */
section.content4,
section.content11 {
  background-color: var(--c-black)  !important;
  background-image: var(--c-stripe) !important;
}

/* Tiefes Schwarz */
section.footer3 {
  background-color: #060606 !important;
}


/* ================================================================
   17. UNTERSEITEN-SPEZIFISCHE SECTIONS
       unternehmen, team, jobs, impressionen, mietwagen,
       anhaengerverleih, impressum, datenschutz
   ================================================================ */

/* Allgemeine Inhalts-Sections, die hier nicht einzeln erfasst */
section.content1,  section.content2,  section.content3,
section.content6,  section.content7,  section.content8,
section.content9,  section.content10, section.content12,
section.content14, section.content15, section.content16 {
  background-color: var(--c-dark) !important;
  color: var(--c-text)            !important;
}

/* Impressionen-Galerie */
[class*="gallery"] .item-wrapper,
[class*="gallery2"] .item-wrapper,
[class*="gallery3"] .item-wrapper,
[class*="gallery4"] .item-wrapper {
  border-radius: var(--radius)             !important;
  overflow:      hidden                    !important;
  border:        1px solid var(--c-border) !important;
  transition:    var(--trans)              !important;
}

[class*="gallery"] .item-wrapper:hover {
  border-color: var(--c-yellow) !important;
  box-shadow:   var(--shadow-card) !important;
}

[class*="gallery"] .item-wrapper img {
  transition: transform 0.4s ease !important;
}

[class*="gallery"] .item-wrapper:hover img {
  transform: scale(1.04) !important;
}

/* Mietwagen / Anhänger — Sections ähnlich Hero */
section.header14 + section.header14 {
  background-color: var(--c-mid) !important;
}

/* Impressum / Datenschutz — gute Lesbarkeit */
section.content16 p,
section.content14 p,
section.content12 p,
section.content8  p,
section.content3  p {
  color:     var(--c-text) !important;
  font-size: 1.05rem       !important;
}

section.content16 a,
section.content14 a,
section.content12 a {
  color:            var(--c-yellow)  !important;
  text-decoration:  underline        !important;
}

section.content16 h3,
section.content14 h3,
section.content16 h4,
section.content14 h4 {
  color: var(--c-white) !important;
}

/* Impressum & Datenschutz: content4 IS the main page text — remove stripe, keep navbar clearance */
section[class*="cid-tyGqUddQgb"],
section[class*="cid-tCgVr8zYH0"] {
  background-image: none            !important;
  background-color: var(--c-dark)   !important;
  padding-top:      5.5rem          !important;
  padding-bottom:   4rem            !important;
  border-bottom:    none            !important;
}

section[class*="cid-tyGqUddQgb"] h4,
section[class*="cid-tyGqUddQgb"] .mbr-section-subtitle,
section[class*="cid-tCgVr8zYH0"] h4,
section[class*="cid-tCgVr8zYH0"] .mbr-section-subtitle {
  text-shadow: none !important;
}

section[class*="cid-tyGqUddQgb"] p,
section[class*="cid-tCgVr8zYH0"] p {
  color:       var(--c-text) !important;
  font-size:   1.05rem       !important;
  line-height: 1.8           !important;
}

section[class*="cid-tyGqUddQgb"] a,
section[class*="cid-tCgVr8zYH0"] a {
  color:           var(--c-yellow) !important;
  text-decoration: underline       !important;
}


/* ================================================================
   18. COOKIE-BANNER
   ================================================================ */

.cookies-alert-container {
  background:  var(--c-card2)                  !important;
  border-top:  2px solid var(--c-yellow)       !important;
  color:       var(--c-text)                   !important;
  box-shadow:  0 -4px 24px rgba(0, 0, 0, 0.5) !important;
}

.cookies-alert-container a {
  color: var(--c-yellow) !important;
}

.cookies-btn-accept {
  background:    var(--c-yellow) !important;
  color:         #080808         !important;
  font-weight:   700             !important;
  border-radius: 50px            !important;
  border:        none            !important;
}

.cookies-btn-reject {
  background:    transparent                         !important;
  border:        1px solid rgba(255, 255, 255, 0.2)  !important;
  color:         var(--c-text)                       !important;
  border-radius: 50px                                !important;
}


/* ================================================================
   18b. BLOCKSATZ — Professionelle Textausrichtung
        Nur für Sections mit langen Fließtextabsätzen;
        kurze Karten/Kontakt-Snippets bleiben linksbündig.
        lang="de" auf <html> aktiviert deutsche Silbentrennung.
   ================================================================ */

section.header14 .mbr-text,
section.content1  p, section.content2  p, section.content3  p,
section.content5  p, section.content5  .mbr-text,
section.content6  p, section.content7  p, section.content8  p,
section.content9  p, section.content10 p, section.content12 p,
section.content14 p, section.content15 p, section.content16 p,
section[class*="cid-tyGqUddQgb"] p,
section[class*="cid-tCgVr8zYH0"] p {
  text-align:      justify !important;
  hyphens:         auto    !important;
  -webkit-hyphens: auto    !important;
  -ms-hyphens:     auto    !important;
  word-break:      break-word !important;
}


/* ================================================================
   19. RESPONSIVE — Tablet (768px–991px)
   ================================================================ */

@media (min-width: 768px) and (max-width: 991px) {
  section.header14 .image-wrapper {
    margin-bottom: 2rem !important;
  }

  section.features15 .item-wrapper {
    margin-bottom: 1.5rem !important;
  }

  section.contacts2 .card-wrapper {
    padding: 1rem 1.5rem !important;
  }
}


/* ================================================================
   20. RESPONSIVE — Mobile (< 768px)
   ================================================================ */

@media (max-width: 767px) {
  /* Navbar-Logo verkleinern auf Mobile */
  .navbar .navbar-logo img[style*="6.2rem"] {
    height: 3.5rem !important;
  }

  /* Hero — Bild über Text */
  section.header14 .image-wrapper {
    margin-bottom: 1.5rem !important;
  }

  section.header14 h1.mbr-section-title {
    font-size: 2rem !important;
  }

  /* Hero bottom padding — mbr-additional sets 4rem which creates huge gap after mid-page button */
  section.header14 {
    padding-bottom: 2rem !important;
  }

  /* CTA-Banner Abstand */
  section.content4,
  .menu + section {
    padding-top:    7.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Impressum & Datenschutz: weniger Leerraum auf Mobile */
  section[class*="cid-tyGqUddQgb"],
  section[class*="cid-tCgVr8zYH0"] {
    padding-top:    5.5rem !important;
    padding-bottom: 2rem   !important;
  }

  /* Feature-Cards */
  section.features15 .item-wrapper {
    margin-bottom: 1rem !important;
  }

  /* Kontakt-Karten */
  section.contacts2 .card-wrapper {
    margin-bottom: 1rem  !important;
    padding:       1rem  !important;
  }

  /* Buttons auf Mobile — proportional, nicht 100% Breite */
  .mbr-section-btn .btn {
    display:      inline-flex          !important;
    width:        auto                 !important;
    min-width:    220px                !important;
    max-width:    88vw                 !important;
    justify-content: center            !important;
    padding:      0.9rem 2rem          !important;
    margin-left:  auto                 !important;
    margin-right: auto                 !important;
  }
  .mbr-section-btn {
    display:        flex               !important;
    justify-content: center            !important;
  }

  /* Formular */
  .form-control {
    font-size: 1rem !important;
  }

  /* Footer-Links — kompakt und horizontal */
  section.footer3 .foot-menu {
    flex-direction:  row        !important;
    flex-wrap:       wrap       !important;
    justify-content: center     !important;
    align-items:     center     !important;
    gap:             0          !important;
    padding:         0          !important;
  }
  section.footer3 .foot-menu li {
    padding: 0          !important;
    margin:  0          !important;
    width:   auto       !important;
  }
  section.footer3 .foot-menu li a {
    padding:  0.2rem 0.55rem !important;
    display:  inline-block   !important;
  }
  /* Leistungsliste — gleiche Größe wie Desktop */
  section.content13 ul li {
    font-size:   1.05rem !important;
    line-height: 1.7     !important;
  }

  /* Kontaktkarten — kompakter auf Mobile */
  section.contacts2 .card-wrapper {
    padding: 1rem 1.1rem !important;
  }
  section.contacts2 .card-title,
  section.contacts2 h6 {
    font-size: 0.92rem !important;
    hyphens:   none    !important;
  }
  section.contacts2 .mbr-text,
  section.contacts2 p {
    font-size: 0.97rem !important;
  }
}


/* ================================================================
   21. PRINT-OPTIMIERUNG (Komfort-Feature)
   ================================================================ */

@media print {
  body, section, html {
    background: #fff   !important;
    color:      #000   !important;
  }
  .menu, section.footer3 { display: none !important; }
}