/* ==========================================================================
   ok-webhosting.de - Vantage Premium Theme: Gesamtes Header- & Footer-CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER: CONTAINER, LOGO & SCHRIFTZUG
   -------------------------------------------------------------------------- */
#masthead {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  padding: 10px 0 !important;
  position: relative !important;
  z-index: 100 !important;
}

#masthead .full-container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* Logo und Textblock eng zusammenführen */
#masthead .site-branding,
#masthead .header-logo,
#masthead .logo {
  display: flex !important;
  align-items: center !important;
  float: left !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 10px !important; /* Exakter Abstand zwischen Logo und Text */
}

#masthead .site-branding a,
#masthead .logo a {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  line-height: 0 !important;
}

#masthead .site-branding img,
#masthead .logo img {
  max-height: 48px !important;
  width: auto !important;
  margin: 0 !important;
  display: block !important;
}

/* Der Textblock "ok-webhosting - Webspace, close to you" */
#masthead .site-text,
#masthead .site-title-text,
#masthead .site-branding .site-title,
#masthead .site-branding .site-description,
#masthead h1.site-title,
#masthead h2.site-description {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.25 !important;
}

#masthead .site-title a,
#masthead h1.site-title a {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  text-decoration: none !important;
  letter-spacing: -0.3px !important;
}

#masthead .site-description,
#masthead h2.site-description {
  font-size: 0.82rem !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  margin-top: 1px !important;
}

/* --------------------------------------------------------------------------
   2. NAVIGATION: MENÜ & DROPDOWNS (NATIVE VANTAGE-STRUKTUR)
   -------------------------------------------------------------------------- */
.main-navigation {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: right !important;
}

.main-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.main-navigation ul li {
  display: inline-block !important;
  position: relative !important;
  float: left !important;
  margin: 0 2px !important;
}

/* Hauptmenü-Links */
.main-navigation ul li a {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: block !important;
  line-height: 1.4 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  background: #fffdf5 !important;
  color: #b45309 !important;
}

.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  box-shadow: inset 0 -2px 0 0 #fab800 !important;
}

/* Dropdown-Menüs (sauber unter dem Elternpunkt positioniert) */
.main-navigation ul ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-top: 3px solid #fab800 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  padding: 6px 0 !important;
  min-width: 200px !important;
  z-index: 99999 !important;
  display: none !important;
}

.main-navigation ul li:hover > ul {
  display: block !important;
}

.main-navigation ul ul li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.main-navigation ul ul li a {
  padding: 8px 16px !important;
  font-size: 0.88rem !important;
  color: #4b5563 !important;
  border-radius: 0 !important;
  display: block !important;
}

.main-navigation ul ul li a:hover {
  background: #fffdf5 !important;
  color: #b45309 !important;
}

/* Mobiler Menü-Button */
.main-navigation .menu-toggle {
  background: #fab800 !important;
  color: #111827 !important;
  border: 1px solid #e5a700 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   3. FOOTER: DURCHGEHENDES ANTHRAZIT MIT GOLDKANTE
   -------------------------------------------------------------------------- */
/* Alle denkbaren Vantage-Ebenen & Klassen auf #111827 zwingen */
html body #colophon,
html body footer#colophon,
html body .site-footer,
html body #colophon-bottom,
html body #footer-widgets,
html body #colophon .full-container,
html body #colophon .site-info,
html body #page-wrapper footer,
html body div#colophon {
  background: #111827 !important;
  background-color: #111827 !important;
  background-image: none !important;
  color: #9ca3af !important;
}

/* Goldene Kante und Abstände oben */
html body #colophon {
  border-top: 4px solid #fab800 !important;
  border-bottom: none !important;
  margin-top: 3.5rem !important;
  padding: 2.25rem 0 1.75rem 0 !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.04) !important;
}

html body #colophon .full-container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  text-align: center !important;
}

/* Footer-Widgets Überschriften */
html body #colophon h3.widget-title,
html body #colophon .widget-title {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #374151 !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1.25rem !important;
}

/* Unterste Footer-Zeile (Links & Copyright) */
html body #colophon .site-info,
html body #colophon-bottom {
  background: transparent !important;
  border-top: 1px solid #1f2937 !important;
  padding-top: 1.25rem !important;
  margin-top: 1.25rem !important;
  text-align: center !important;
  font-size: 0.88rem !important;
  line-height: 1.8 !important;
}

/* Footer-Links (AGB, Impressum, Datenschutz etc.) */
html body #colophon a,
html body footer#colophon a {
  color: #d1d5db !important;
  text-decoration: none !important;
  margin: 0 8px !important;
  transition: color 0.2s ease !important;
}

html body #colophon a:hover,
html body footer#colophon a:hover {
  color: #fab800 !important;
  text-decoration: underline !important;
}