/* ============================================================
   modern.css – Visuelle Modernisierung mototransporter.de
   Markenfarben: #0099FF (Blau) | #d91600 (Rot) – unveraendert
   Philosophie: Evolution statt Revolution
   ============================================================ */

/* --- CSS Custom Properties ----------------------------------- */
:root {
  --mt-blue:       #0099FF;
  --mt-blue-dark:  #007ACC;
  --mt-blue-deep:  #005f99;
  --mt-red:        #d91600;
  --mt-red-dark:   #b31200;
  --mt-text:       #2d2d2d;
  --mt-muted:      #555555;
  --mt-border:     #e0e6ed;
  --mt-card-bg:    #ffffff;
  --mt-page-bg:    #f5f7fa;
  --mt-footer-bg:  #111111;
  --r-card:        10px;
  --r-btn:         6px;
  --shadow-sm:     0 2px 10px rgba(0,0,0,0.07);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.13);
  --t:             0.22s ease;
}

/* --- Basis-Typografie --------------------------------------- */
body {
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  letter-spacing: 0 !important;
}

h1 { font-weight: 700 !important; }
h2 { font-weight: 600 !important; }
h3 { font-weight: 600 !important; }

p {
  line-height: 1.7 !important;
}

/* --- Abstände: Desktop optimiert ---------------------------- */
@media (min-width: 1000px) {
  #header {
    height: auto !important;
    min-height: 0 !important;
    padding: 1.75em 0 1.5em 0 !important;
  }
  #banner-wrapper {
    padding: 2.5em 0 2em 0 !important;
  }
  #main-wrapper {
    padding: 4.5em 0 5em 0 !important;
  }
  #featured-wrapper {
    padding: 4em 0 4em 0 !important;
  }
  #footer-wrapper {
    padding: 5em 0 3em 0 !important;
  }
}

/* --- Navigation -------------------------------------------- */
#nav a {
  border-radius: 4px;
  transition: background var(--t), color var(--t);
  font-weight: 500;
  letter-spacing: 0.2px;
}

#nav li:hover > a {
  background: rgba(0,153,255,0.12) !important;
  color: var(--mt-blue) !important;
}

#nav .current_page_item > a {
  background: var(--mt-blue) !important;
  color: #fff !important;
  border-radius: 4px;
}

.dropotron {
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
}

.dropotron li:hover > a,
.dropotron li:hover > span {
  background-color: var(--mt-blue) !important;
  color: #fff !important;
}

/* --- Hauptbereich Hintergrund (Startseite) ----------------- */
.homepage #main-wrapper {
  background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 60%) !important;
}

/* --- Content-Boxen: Modernes Karten-Design ----------------- */
.content-box {
  background: var(--mt-card-bg) !important;
  border: none !important;
  border-left: 4px solid var(--mt-blue) !important;
  border-radius: var(--r-card) !important;
  padding: 28px 32px !important;
  margin: 0 0 24px 0 !important;
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow var(--t) !important;
}

.content-box:hover {
  box-shadow: var(--shadow-lg) !important;
}

.content-box h2 {
  font-size: 1.35em !important;
  margin-top: 0 !important;
  margin-bottom: 0.7em !important;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--mt-border);
}

.content-box h3 {
  font-size: 1.15em !important;
  margin-top: 0 !important;
  margin-bottom: 0.5em !important;
}

.content-box p {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--mt-muted) !important;
  margin-top: 0 !important;
}

.content-box li {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--mt-muted) !important;
  margin-bottom: 0.4em !important;
}

/* --- FAQ-Bereich ------------------------------------------- */
#faq-wrapper {
  background: var(--mt-page-bg) !important;
  padding: 3em 0 3.5em 0 !important;
}

#faq-wrapper h2 {
  font-size: 1.5em !important;
  font-weight: 600 !important;
  color: var(--mt-text) !important;
  letter-spacing: 0 !important;
}

/* --- FAQ-Kacheln: Verfeinert ------------------------------- */
.faq-box {
  background: linear-gradient(135deg, #0077cc 0%, #0060a8 55%, #004d8a 100%) !important;
  border: none !important;
  border-radius: var(--r-card) !important;
  padding: 22px 24px !important;
  min-height: 0 !important;
  box-shadow: 0 4px 16px rgba(0,80,170,0.22) !important;
  transition: transform var(--t), box-shadow var(--t);
}

.faq-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,80,170,0.32) !important;
}

.faq-box h3 {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.faq-box p {
  color: rgba(255,255,255,0.93) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* --- Buttons: Modern --------------------------------------- */
.button {
  border-radius: var(--r-btn) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  transition: background-color var(--t), transform 0.15s ease, box-shadow var(--t) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  text-shadow: none !important;
  border: none !important;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.24) !important;
}

.button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
}

.button-icon {
  background-color: var(--mt-blue) !important;
  background-image: none !important;
}

.button-icon:hover {
  background-color: var(--mt-blue-dark) !important;
}

.button-alt {
  background: var(--mt-red) !important;
  background-image: none !important;
}

.button-alt:hover {
  background: var(--mt-red-dark) !important;
}

.button-alt2 {
  background: var(--mt-red) !important;
  background-image: none !important;
}

.button-alt2:hover {
  background: var(--mt-red-dark) !important;
}

.button-huge {
  font-size: 1.6em !important;
  padding: 0.9em 1em 1.1em 1em !important;
  letter-spacing: 0 !important;
}

.button-huge span {
  opacity: 0.75 !important;
  font-size: 0.68em !important;
}

.button-big {
  font-size: 1.3em !important;
  border-radius: var(--r-btn) !important;
}

/* --- Banner-Kacheln (Feature-Tiles) ------------------------ */
#banner section {
  transition: transform var(--t);
}

#banner section:hover {
  transform: translateY(-2px);
}

.image-full {
  border-radius: 8px;
  overflow: hidden;
}

.image-full img {
  border-radius: 8px;
}

/* --- Sidebar (service.html, rollertransport.html) ---------- */
ul.style2 h3 {
  font-size: 1.0em !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--mt-blue) !important;
}

ul.style2 li {
  border-top: 1px solid #ebebeb !important;
}

/* --- Footer ------------------------------------------------ */
#footer-wrapper {
  background: var(--mt-footer-bg) !important;
}

#footer h2 {
  font-size: 0.78em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 0.6em;
  margin-bottom: 1.2em !important;
}

ul.style1 a {
  color: #8aaecc !important;
  font-size: 1rem !important;
  transition: color var(--t) !important;
}

ul.style1 a:hover {
  color: var(--mt-blue) !important;
  text-decoration: none !important;
}

ul.style1 li {
  padding: 0.5em 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

ul.style1 .first {
  border-top: none !important;
}

ul.style3 .link a span {
  color: #8aaecc !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

#copyright {
  color: #555 !important;
  font-size: 0.82em !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: 1.5em;
  padding: 1.5em 0 0 0 !important;
  text-align: center !important;
}

/* --- Accessibility ----------------------------------------- */
a:focus-visible {
  outline: 2px solid var(--mt-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 3px;
}

/* --- Smooth Scroll ----------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* --- Mobile: bis 640px ------------------------------------- */
@media (max-width: 640px) {
  body {
    font-size: 16px !important;
  }

  .content-box {
    padding: 18px 16px !important;
    border-radius: 8px !important;
    margin: 0 0 14px 0 !important;
  }

  .content-box h2 {
    font-size: 1.15em !important;
  }

  .faq-box {
    border-radius: 8px !important;
    padding: 16px 15px !important;
    margin-bottom: 10px !important;
  }

  #faq-wrapper {
    padding: 2em 12px 2.5em 12px !important;
  }

  .button-huge {
    font-size: 1.2em !important;
    padding: 0.8em 1em 0.95em 1em !important;
  }

  .button-big {
    font-size: 1.05em !important;
  }

  #banner-wrapper {
    padding: 10px 10px 6px 10px !important;
  }

  #main-wrapper {
    padding: 2.5em 0 2.5em 0 !important;
  }

  #featured-wrapper {
    padding: 2em 0 2em 0 !important;
  }

  #footer-wrapper {
    padding: 3em 0 2em 0 !important;
  }

  .button {
    min-height: 44px;
  }
}

/* --- Tablet: 641–999px ------------------------------------- */
@media (min-width: 641px) and (max-width: 999px) {
  .content-box {
    padding: 22px 24px !important;
    border-radius: 8px !important;
  }

  .faq-box {
    border-radius: 8px !important;
  }

  .button-huge {
    font-size: 1.45em !important;
  }

  #main-wrapper {
    padding: 3.5em 0 3.5em 0 !important;
  }

  #footer-wrapper {
    padding: 4em 0 2.5em 0 !important;
  }
}