/* MPU Blitz – gemeinsames Stylesheet (Neubau ohne Webflow)
   Maße, Farben und Umbrüche entsprechen der bisherigen Webflow-Seite.
   Umbruchpunkte wie im Original: 991px, 767px, 479px. */

:root {
  --gold: #d0a64e;
  --schwarz: #000;
  --weiss: #fff;
  --text: #333;
  --linie: #e4ebf3;
  --blau-dunkel: #284e75;
  --blau-feld: #203768;
  --menue-aktiv: #a6b1bf;
  --roboto: Roboto, Arial, sans-serif;
  --bitter: Bitter, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--weiss); color: var(--text);
  font-family: var(--roboto); font-size: 14px; line-height: 20px;
}
img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; border: 0; }
a { background: transparent; }
h1, h2, h3 { font-weight: bold; margin: 20px 0 10px; }
p { margin: 0 0 10px; }
ul { margin: 0 0 10px; }
button, input, textarea { font: inherit; color: inherit; margin: 0; }
:focus-visible { outline: 2px solid #0050bd; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { display: none; }

/* ---------- Raster (ersetzt Webflow-Layouts) ---------- */
.grid { display: grid; grid-auto-columns: 1fr; gap: 20px; justify-content: center; padding: 20px; }
.cell { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ---------- Buttons ---------- */
.btn, .btn-black {
  display: inline-block; color: var(--weiss); text-align: center; text-decoration: none;
  border: 0; border-radius: 6px; cursor: pointer;
  font-family: var(--roboto); font-size: 18px; font-weight: 400; line-height: 20px;
  -webkit-appearance: none; appearance: none;
}
.btn { background: var(--gold); padding: 13.5px 54px; }
.btn-black { background: var(--schwarz); padding: 10.5px 86.5px; }
.btn:hover, .btn-black:hover { filter: brightness(1.05); }

/* ---------- Kopfzeile / Navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--weiss); }
.navbar { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; padding: 20px; }
.container { width: 100%; max-width: 940px; margin: 0 auto; }
.navbar-wrapper { display: flex; justify-content: space-between; align-items: center; }
.brand { display: block; text-decoration: none; }
.brand img { width: 150px; height: auto; }
.nav-list { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0; list-style: none; }
.nav-link, .nav-link-accent {
  color: var(--schwarz); letter-spacing: .25px; padding: 5px 10px; text-decoration: none;
  font-family: var(--roboto); font-size: 16px; font-weight: 700; line-height: 20px;
}
.nav-link { margin: 0 5px; }
.nav-link-accent { margin: 0 20px 0 5px; }
.nav-link:hover, .nav-link-accent:hover { color: #1a1b1fbf; }
.nav-item-gap { padding-right: 21px; }
.menu-button {
  display: none; padding: 12px; background: transparent; border: 0; cursor: pointer; color: var(--schwarz);
  line-height: 0; -webkit-tap-highlight-color: transparent;
}
.menu-button svg { width: 24px; height: 24px; display: block; }
.menu-button[aria-expanded="true"] { background: var(--menue-aktiv); color: var(--weiss); }

/* ---------- Bühne (Hero mit Bild) ---------- */
.hero {
  position: relative; background-color: #f5f7fa; background-size: cover; background-repeat: no-repeat;
  padding: 80px 30px;
}
.hero-home { background-image: url(/img/hero-zurueck-am-steuer.jpg); background-position: 0%; min-height: 700px; margin-bottom: -3px; }
.hero-about { background-image: url(/img/mpu-seminar.jpg); background-position: 50%; min-height: 500px; }
.hero-container { width: 100%; max-width: 940px; margin: 0 auto auto; padding-top: 25vh; }
.hero-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.hero-split { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; max-width: 46%; }
.hero-title {
  color: var(--weiss); width: 740px; padding-bottom: 33px;
  font-size: 55px; font-style: italic; line-height: 71px;
}

/* ---------- Goldenes Band ---------- */
.band {
  position: relative; display: flex; align-items: center; background: var(--gold);
  min-height: 500px; max-height: 500px; margin-bottom: 60px; padding: 80px 30px;
}
.band-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; }
.band-inner { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; max-width: 800px; margin: 0 auto; }
.band-title {
  color: var(--weiss); max-width: 1200px; margin-top: 0; padding: 24px;
  font-size: 40px; font-style: italic; font-weight: 700; line-height: 44px;
}
.band-text { color: var(--weiss); max-width: 1178px; padding-bottom: 40px; font-size: 16px; line-height: 30px; }

/* ---------- Leistungs-Abschnitte ---------- */
.overview { position: relative; display: block; border-bottom: 1px solid var(--linie); padding: 80px 30px 0; }
.overview-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 124px; }
.section-title {
  color: var(--schwarz); text-align: center; letter-spacing: -.015em; margin: 0;
  font-size: 40px; font-style: italic; font-weight: 700; line-height: 72px;
}
.gap-50 { gap: 50px; }
.card-title {
  min-height: 90px; color: var(--schwarz); text-align: center; letter-spacing: -.015em;
  margin: 0; padding: 10px 0 45px; font-size: 24px; font-weight: 700; line-height: 36px;
}
.text-lg { color: var(--schwarz); min-height: 160px; margin-bottom: 20px; font-size: 16px; line-height: 33px; }
.text-md { color: var(--schwarz); min-height: 80px; margin-bottom: 20px; font-size: 16px; line-height: 33px; }

.img-band { background-size: cover; background-repeat: no-repeat; }
.img-vertrag { background-image: url(/img/vertragsabschluss-mpu.jpg); background-position: 50% 0; height: 60vh; }
.img-fahren { background-image: url(/img/endlich-wieder-fahren.jpg); background-position: 0 0; min-height: 782px; }
.img-instruktor { background-image: url(/img/instruktor-erklaert.jpg); background-position: 0 0; height: 80vh; }

/* ---------- Bild + Text ---------- */
.split { max-width: 1240px; margin: 0 auto; }
.gap-60 { gap: 60px; }
.split-img { margin: auto 0; }
.split-title {
  color: var(--schwarz); text-align: left; letter-spacing: -.015em; padding: 10px 0 45px;
  font-size: 40px; font-style: italic; font-weight: 600; line-height: 50px;
}

/* ---------- Kundenstimmen ---------- */
.reviews { max-width: 994px; margin: 0 auto; padding-bottom: 108px; }
.reviews-title {
  color: var(--schwarz); text-align: center; margin: 100px 0 118px;
  font-size: 40px; font-style: italic; font-weight: 700; line-height: 44px;
}
.review { width: 100%; max-width: 940px; margin: 0 auto; }
.review-title { display: block; color: var(--schwarz); font-size: 22px; font-weight: 700; line-height: 44px; }
.quote {
  color: var(--schwarz); text-align: left; min-height: 50px; padding: 10px 20px 10px 0;
  font-size: 16px;
}
.review-name { color: var(--schwarz); }

/* ---------- Team (Über uns) ---------- */
.team-intro { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 500px; }
.team-intro-title {
  color: var(--schwarz); text-align: center; padding-bottom: 20px;
  font-size: 38px; font-style: italic; font-weight: 700; line-height: 44px;
}
.team-intro-text { color: var(--schwarz); text-align: center; max-width: 1000px; padding: 10px 20px 10px 10px; font-size: 16px; line-height: 33px; }
.team { max-width: 1000px; margin: 0 auto; padding-bottom: 120px; }
.team .grid { margin-bottom: 100px; }
.team .grid:last-child { margin-bottom: 0; }
.person-name { color: var(--schwarz); text-align: left; font-size: 38px; font-weight: 700; line-height: 44px; }
.person-role { color: var(--schwarz); }
.person-role.grau { color: var(--text); }
.person-img-right { margin: 0; }

/* ---------- Kontaktbereich ---------- */
.gold { background: var(--gold); }
.contact { width: 100%; max-width: 1200px; margin: 0 auto; background: var(--gold); padding: 56px 0 60px; }
.contact-title {
  color: var(--weiss); text-align: center; padding-bottom: 60px;
  font-size: 40px; font-style: italic; font-weight: 700; line-height: 44px;
}
.contact-info-cell { padding-left: 60px; }
.contact-info { grid-template-columns: .25fr 1fr; grid-template-rows: auto auto auto auto; }
.span-2 { grid-column: span 2 / span 2; }
.contact-text { color: var(--weiss); text-align: center; font-size: 18px; line-height: 30px; margin: 0 0 10px; }
a.contact-text { margin: 0; }
.contact-mail { color: var(--weiss); margin: 0 0 10px; }
.form-block { display: flex; flex-direction: column; align-items: center; min-width: 600px; margin: 0 0 15px; }
.form { color: var(--blau-dunkel); font-family: var(--bitter); }
.field {
  display: block; width: 100%; height: 38px; padding: 8px 12px; margin-bottom: 10px;
  font-size: 14px; line-height: 1.42857143; vertical-align: middle;
  background: var(--weiss); border: 1px solid #ccc; border-radius: 9px;
  color: var(--schwarz); font-family: var(--roboto); overflow: auto;
}
.field::placeholder { color: #999; }
.field:focus { border-color: #3898ec; outline: 0; }
textarea.field { height: auto; color: var(--blau-feld); font-family: var(--bitter); margin-bottom: 24px; resize: vertical; }
.check { display: block; margin-bottom: 5px; padding-left: 20px; font-weight: bold; cursor: pointer; }
.check input { float: left; margin: 4px 0 0 -20px; line-height: normal; }
.check span {
  display: inline-block; color: var(--weiss); padding-bottom: 33px;
  font-family: var(--roboto); font-weight: normal;
}

/* ---------- Rechtstexte ---------- */
.legal-wrap { background: var(--weiss); }
.legal { width: 100%; max-width: 1200px; margin: 0 auto; background: var(--weiss); padding: 56px 40px 0; }
.legal.agb { padding: 56px 0 0; }
.legal-title {
  color: var(--schwarz); text-align: center; padding-bottom: 60px;
  font-size: 40px; font-style: italic; font-weight: 700; line-height: 44px;
}
.richtext { color: var(--schwarz); max-width: 1000px; }
.richtext .leer { min-height: 20px; }
.richtext .leer-gross { height: 44px; margin: 20px 0 10px; }
.message { text-align: center; padding: 0 20px 80px; color: var(--schwarz); font-size: 16px; line-height: 30px; }

/* ---------- Fußzeile ---------- */
.footer { position: relative; border-bottom: 1px solid var(--linie); padding: 80px 30px 40px; }
.footer-container { width: 100%; max-width: 940px; margin: 0 auto; }
.footer-wrapper { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: inline-block; }
.footer-brand img { min-height: 50px; max-height: 100px; }
.footer-block { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-left: 100px; }
.footer-link { color: var(--schwarz); padding-bottom: 10px; font-size: 16px; text-decoration: none; }
.footer-link:hover { color: #1a1b1fbf; }
.footer-cta { width: 315px; max-width: 100%; margin-bottom: 0; }
.footer-cta-inner { text-align: right; padding: 0 20px; margin: 0 auto; }
.footer-divider { background: var(--linie); width: 100%; height: 1px; margin: 40px 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-copyright { color: var(--schwarz); }
.footer-social { display: flex; justify-content: flex-start; align-items: center; margin: 0 0 0 -12px; }
.footer-social a { margin-left: 12px; }

/* ================= bis 991px (Tablet) ================= */
@media (max-width: 991px) {
  .container, .hero-container, .band-container, .overview-container, .footer-container { max-width: 728px; }
  .nav-link, .nav-link-accent { padding-left: 5px; padding-right: 5px; }
  .menu-button { display: block; }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; text-align: center; }
  .nav-menu.open { display: block; }
  .nav-list {
    background: var(--weiss); border-radius: 50px; flex-wrap: wrap; justify-content: space-around; align-items: center;
    margin-top: 10px; padding: 20px; box-shadow: 0 8px 50px #0000000d;
  }
  .section-title { font-size: 34px; }
  .hero-home { background-position: 70%; }
  .hero-about { background-position: 100%; }
  .hero-wrapper { flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: -40px; }
  .hero-split { max-width: 100%; margin-bottom: 40px; }
  .hero-title { font-size: 40px; }
  .band-title { width: 768px; font-size: 34px; }
  .reviews-title { font-size: 34px; }
  .footer-wrapper { flex-wrap: wrap; }
  .footer-cta { width: 100%; margin-top: 40px; }
  .footer-cta-inner { max-width: 350px; margin: 0; }
  .legal-title { color: var(--blau-dunkel); font-size: 34px; }
  .card-title { font-size: 28px; }
  .review { padding-left: 20px; padding-right: 20px; }
  .split-img { width: 100%; margin-left: auto; margin-right: auto; }
  .contact-cell-form { align-items: center; }
  .text-lg { min-height: 120px; }
  .contact-title { margin-left: auto; margin-right: auto; font-size: 34px; }
  /* Raster */
  .g-leistung { grid-template-columns: 1fr 1fr; }
  .g-leistung > :nth-child(3) { grid-column: span 2 / span 2; }
  .g-split { grid-template-columns: 1fr; }
  .g-contact > .cell { grid-column: span 2 / span 2; }
}

/* ================= bis 767px (Mobil quer) ================= */
@media (max-width: 767px) {
  .nav-link, .nav-link-accent { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
  .nav-link-accent { margin-right: 5px; }
  .nav-item-cta { margin-top: 10px; }
  .navbar { max-width: 100%; }
  .nav-list { border-radius: 20px; flex-direction: column; padding-bottom: 30px; }
  .section-title { font-size: 32px; }
  .hero-home { background-position: 50%; padding: 60px 15px; }
  .hero-about { padding: 60px 15px; min-height: 568px; }
  .band { padding: 60px 15px; }
  .band-title { width: 568px; }
  .img-vertrag { background-position: 50%; }
  .reviews-title { font-size: 32px; }
  .footer { padding-left: 15px; padding-right: 15px; }
  .footer-bottom { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .footer-copyright { font-size: 14px; line-height: 20px; }
  .footer-social { margin-top: 20px; }
  .footer-social a { margin-left: 20px; }
  .legal-title { font-size: 32px; }
  .legal { max-width: 500px; }
  .overview { padding: 60px 15px; }
  .overview-container { padding-bottom: 0; }
  .team { max-width: 568px; }
  .contact-info-cell { padding-left: 0; }
  .hero-title { width: 500px; font-size: 34px; }
  .card-title { font-size: 24px; }
  .split-title { height: 90px; font-size: 30px; }
  .person-img-right { margin: auto 0; }
  .text-lg { min-height: 80px; }
  .contact-title { max-width: 400px; font-size: 32px; }
  .g-leistung, .g-pakete { grid-template-columns: 1fr; }
  .g-leistung > :nth-child(3) { grid-column: span 1 / span 1; }
  .g-reviews { grid-template-columns: 1fr 1fr; }
  .g-reviews > :nth-child(3) { grid-column: span 2 / span 2; }
}

/* ================= bis 479px (Smartphone) ================= */
@media (max-width: 479px) {
  .container { max-width: none; }
  .section-title { font-size: 28px; line-height: 43px; }
  .btn, .btn-black { max-width: 300px; }
  .hero-home {
    background-image: url(/img/hero-zurueck-am-steuer-mobil.png); background-position: 50%;
    height: 600px; min-height: 561px;
  }
  .hero-about { background-position: 50% 0; }
  .hero-container { padding-top: 20vh; }
  .band-container { max-width: none; }
  .band { max-height: 900px; }
  .band-inner { max-width: 900px; }
  .band-title { width: 320px; font-size: 28px; }
  .reviews-title { font-size: 28px; }
  .review-title { margin-top: 5px; margin-bottom: 5px; font-size: 20px; }
  .review img { max-width: 40%; }
  .footer-container { max-width: none; }
  .footer-wrapper { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .footer-block { margin-top: 40px; }
  .img-fahren, .img-instruktor { background-position: 50%; }
  .reviews { max-width: 320px; }
  .legal-title { font-size: 28px; }
  .form { width: 300px; }
  .form-block { min-width: 320px; }
  .legal.agb { max-width: 300px; }
  .legal { max-width: 300px; padding-left: 10px; padding-right: 0; }
  .overview-container { max-width: none; }
  .contact-info-cell { padding-left: 20px; padding-right: 20px; }
  .hero-title { width: 250px; font-size: 33px; line-height: 43px; }
  .band-text { max-width: 300px; }
  .card-title { font-size: 22px; }
  .contact-info { padding-left: 0; }
  .split-title { height: 120px; font-size: 24px; }
  .team-intro { min-height: 600px; }
  .contact-title { max-width: 280px; font-size: 28px; }
  .g-contact { grid-template-columns: 1fr; }
  .g-contact > .contact-info-cell { order: -9999; grid-column: span 1 / span 1; }
  .g-contact > .contact-cell-form { grid-column: span 1 / span 1; }
  .g-reviews { grid-template-columns: 1fr; }
  .g-reviews > :nth-child(3) { grid-column: span 1 / span 1; }
  .team .grid { grid-template-columns: 1fr; }
  .team .img-first { order: -9999; }
}