/* ==========================================================================
   eologistik – Ervis Osmani Transport und Logistik
   Designsystem abgeleitet aus der visuellen Referenz (Beispielbild)
   ========================================================================== */

:root{
  --navy:          #14294a;   /* Überschriften, Logo, dunkler Text        */
  --navy-band:     #1c3f70;   /* Kontaktband                              */
  --navy-footer:   #16294a;   /* Footer                                   */
  --navy-deep:     #101f38;   /* Footer-Unterzeile                        */
  --blue:          #1a56a8;   /* Primärer Button                          */
  --blue-hover:    #16478c;
  --blue-accent:   #2563b0;   /* Trennstriche, Tonnage, aktiver Link      */

  --text:          #4d5763;
  --muted:         #6d7684;
  --footer-text:   #9fb0c6;

  --bg:            #ffffff;
  --bg-soft:       #f7f8fa;
  --bg-soft-2:     #eceff3;
  --border:        #e1e5ea;
  --field-border:  #d5dbe2;

  --radius:        6px;
  --radius-sm:     3px;
  --shadow-card:   0 1px 2px rgba(16,32,58,.06), 0 6px 18px rgba(16,32,58,.07);
  --shadow-soft:   0 1px 2px rgba(16,32,58,.05), 0 10px 30px rgba(16,32,58,.06);
  --container:     1180px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:26px;
  padding-right:26px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px;
  font-size:14px; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; text-decoration:none; }

:focus-visible{ outline:3px solid var(--blue-accent); 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;
}

/* ============================== Buttons ================================= */

.btn{
  display:inline-block;
  padding:13px 26px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ text-decoration:none; }

.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-hover); }

.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover{ background:#e9eef6; }

.btn-outline{
  background:transparent; color:var(--navy);
  border-color:#c3cbd6;
}
.btn-outline:hover{ background:#eef1f5; }

/* ============================== Header ================================== */

.site-header{
  position:sticky; top:0; z-index:60;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(16,32,58,.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}

.logo{ display:flex; align-items:center; gap:12px; }
.logo:hover{ text-decoration:none; }
.logo svg{ width:46px; height:34px; flex:none; }
.logo-text{ display:block; line-height:1.05; }
.logo-name{
  display:block;
  font-size:21px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; color:var(--navy);
}
.logo-sub{
  display:block; margin-top:3px;
  font-size:11px; font-weight:600; letter-spacing:1.7px;
  text-transform:uppercase; color:#71809a;
}

.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav a{
  font-size:14.5px; color:#3f4855; padding:6px 0;
  border-bottom:2px solid transparent;
}
.main-nav a:hover{ color:var(--blue-accent); text-decoration:none; }
.main-nav a.active{ color:var(--blue-accent); border-bottom-color:var(--blue-accent); font-weight:600; }

.nav-toggle{
  display:none; width:44px; height:38px;
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; width:20px; height:2px; margin:4px auto;
  background:var(--navy); transition:.2s;
}

/* =============================== Hero =================================== */

/* Startbild: exakt im Seitenverhältnis der Bilddatei, dadurch weder
   Beschnitt noch Verzerrung. Der Text ist Teil des Bildes; der Button
   ist ein echtes HTML-Element und sitzt prozentual an der richtigen Stelle. */
.hero{
  position:relative;
  width:100%;
  aspect-ratio:1672 / 941;
  background-color:#00121f;
  background-image:url("assets/hero.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 100%;
}
.hero-cta{
  position:absolute;
  left:3.29%;
  top:54.5%;
}
.hero-cta .btn{
  font-size:clamp(12px, .9vw, 13px);
  padding:clamp(12px, 1.05vw, 15px) clamp(22px, 1.9vw, 28px);
  box-shadow:0 6px 18px rgba(0,12,26,.35);
}

/* ============================== Sections ================================ */

.section{ padding:74px 0; }
.section-soft{ background:var(--bg-soft); }
.section-soft-2{ background:var(--bg-soft-2); }

.section-title{
  margin:0;
  text-align:center;
  overflow-wrap:anywhere;
  font-size:23px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--navy);
}
.section-title::after{
  content:"";
  display:block;
  width:58px; height:3px;
  margin:13px auto 0;
  background:var(--blue-accent);
}
.section-lead{
  max-width:640px; margin:20px auto 0;
  text-align:center; font-size:15.5px; color:var(--muted);
}

/* ============================ Dienstleistungen ========================== */

.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px 56px;
  margin-top:50px;
}
.service-head{ display:flex; align-items:center; gap:14px; }
.service-head svg{ width:30px; height:30px; flex:none; color:var(--navy); }
.service-head h3{
  margin:0;
  font-size:14px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--navy);
}
.service p{ margin:14px 0 0; font-size:14.5px; line-height:1.72; color:var(--text); }

/* ============================== Fuhrpark ================================ */

/* Transparenzhinweis zu den Fahrzeugdarstellungen */
.ai-note{
  max-width:720px;
  margin:26px auto 0;
  padding:12px 18px;
  border-left:3px solid var(--blue-accent);
  background:rgba(255,255,255,.72);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13.2px;
  line-height:1.6;
  color:var(--muted);
  text-align:left;
}

/* noch einzutragende Angaben – im Quelltext leicht auffindbar */
.todo{
  color:#8a94a2;
  font-style:italic;
}

.fleet{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-top:34px;
}
.fleet-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .18s ease, box-shadow .18s ease;
}
.fleet-card:hover{ transform:translateY(-3px); box-shadow:0 3px 6px rgba(16,32,58,.08), 0 16px 34px rgba(16,32,58,.12); }
.fleet-media{ position:relative; }
/* Bilder werden nie beschnitten oder verzerrt: 16:9-Rahmen, contain */
.fleet-card img,
.fleet-details img{
  display:block; width:100%; height:auto;
  aspect-ratio:16 / 9; object-fit:contain;
  background:#eef1f5;
  border-bottom:1px solid var(--border);
}
.fleet-count{
  position:absolute; top:14px; right:14px;
  background:var(--navy); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase;
  padding:6px 12px; border-radius:3px;
  box-shadow:0 2px 6px rgba(16,32,58,.22);
}
.fleet-body{ padding:22px 22px 28px; text-align:center; }
.fleet-body h3{
  margin:0;
  font-size:14px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--navy);
}
.fleet-ton{
  display:block; margin:10px 0 0;
  font-size:16px; font-weight:800; letter-spacing:.6px;
  color:var(--blue-accent);
}
.fleet-equip{
  display:block; margin:7px 0 0;
  font-size:13.4px; font-weight:600; letter-spacing:.3px;
  color:var(--muted);
}
.fleet-body > p:not(.fleet-ton):not(.fleet-equip){
  margin:15px auto 0; max-width:46ch;
  font-size:14.2px; line-height:1.68; color:var(--text);
}

/* Ausstattungsdetails – keine zusätzlichen Fahrzeuge */
.fleet-subhead{
  margin:56px 0 0;
  text-align:center;
  font-size:14px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--navy);
}
.fleet-subhead::after{
  content:""; display:block; width:40px; height:2px;
  margin:11px auto 0; background:var(--blue-accent);
}
.fleet-details{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:28px; margin-top:26px;
}
.fleet-details figure{
  margin:0; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-card);
}
.fleet-details figcaption{
  padding:17px 20px 22px; text-align:center;
  font-size:13.8px; line-height:1.62; color:var(--text);
}
.fleet-details strong{
  display:block; margin-bottom:7px;
  font-size:13px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--navy);
}

/* Ausstattungsdetails (keine zusätzlichen Fahrzeuge) */
.fleet-subhead{
  margin:56px 0 0;
  text-align:center;
  font-size:14px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--navy);
}
.fleet-subhead::after{
  content:""; display:block; width:40px; height:2px;
  margin:11px auto 0; background:var(--blue-accent);
}
.fleet-details{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:28px; margin-top:26px;
}
.fleet-details:has(> figure:only-child){
  grid-template-columns:minmax(0,660px);
  justify-content:center;
}
.fleet-details figure{
  margin:0; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-card);
}
.fleet-details figcaption{
  padding:17px 20px 22px; text-align:center;
  font-size:13.8px; line-height:1.62; color:var(--text);
}
.fleet-details strong{
  display:block; margin-bottom:7px;
  font-size:13px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--navy);
}

.fleet-note{
  margin:38px auto 0; max-width:760px; text-align:center;
  font-size:14px; color:var(--muted);
}

/* ============================== Kontakt ================================= */

.contact-grid{
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:30px;
  margin-top:48px;
  align-items:start;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:32px;
}
.card h3{
  margin:0 0 22px;
  font-size:14px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--navy);
}

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{
  display:block; margin-bottom:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--navy);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  font-family:inherit; font-size:14.5px; color:var(--navy);
  background:#fff;
  border:1px solid var(--field-border);
  border-radius:var(--radius-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--blue-accent);
  box-shadow:0 0 0 3px rgba(37,99,176,.12);
}
.field input.invalid,
.field textarea.invalid{ border-color:#c0392b; }

.consent{ display:flex; gap:11px; align-items:flex-start; margin:4px 0 22px; }
.consent input{ margin-top:3px; flex:none; width:16px; height:16px; }
.consent label{ font-size:13px; line-height:1.6; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }

.hp-field{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}
.form-hint{
  margin:12px 0 0; font-size:13px; color:var(--muted);
}
.form-hint[hidden]{ display:none; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn[disabled]:hover{ background:var(--blue); }

.form-status{
  display:none; margin-top:18px; padding:13px 16px;
  border-radius:var(--radius-sm); font-size:14px;
  background:#eef4fb; border:1px solid #cfe0f2; color:var(--navy);
}
.form-status.show{ display:block; }

/* Ansprechpartner / Kontaktdaten */
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{
  display:flex; gap:13px; align-items:flex-start;
  padding:13px 0;
  border-bottom:1px solid var(--border);
  font-size:14.5px; color:var(--text);
}
.info-list li:last-child{ border-bottom:0; }
.info-list svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--blue-accent); }
.info-list strong{ display:block; color:var(--navy); font-weight:700; font-size:14px; }

.person{ display:flex; gap:15px; align-items:center; margin-bottom:20px; }
.person-avatar{
  width:52px; height:52px; flex:none; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; letter-spacing:.5px;
}
.person-name{ font-size:15.5px; font-weight:700; color:var(--navy); }
.person-role{ font-size:13.5px; color:var(--muted); }

.hours{ margin-top:26px; }

/* =========================== Kontaktband ================================ */

.cta-band{ background:var(--navy-band); color:#fff; }
.cta-inner{
  display:flex; align-items:center; gap:34px;
  padding:26px 0;
}
.cta-lead{ display:flex; align-items:center; gap:16px; }
.cta-icon{
  width:44px; height:44px; flex:none; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
}
.cta-icon svg{ width:20px; height:20px; color:#fff; }
.cta-lead strong{
  display:block; font-size:14px; font-weight:800;
  letter-spacing:1.1px; text-transform:uppercase;
}
.cta-lead span{ font-size:13.5px; color:#c4d2e5; }

.cta-divider{ width:1px; height:44px; background:rgba(255,255,255,.22); }

.cta-contacts{ display:flex; align-items:center; gap:38px; flex:1; }
.cta-contacts a{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-size:14.5px;
}
.cta-contacts a:hover{ color:#cfe0f5; text-decoration:none; }
.cta-contacts svg{ width:17px; height:17px; color:#a9c1de; }
.cta-hours{
  display:flex; align-items:center; gap:10px;
  color:#c4d2e5; font-size:14.5px;
}
.cta-hours svg{ width:17px; height:17px; color:#a9c1de; }

/* =============================== Footer ================================= */

.site-footer{ background:var(--navy-footer); color:var(--footer-text); }
.footer-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr .85fr;
  gap:44px;
  padding:56px 0 42px;
}
.footer-brand .logo-name{ color:#fff; font-size:19px; }
.footer-brand .logo-sub{ color:#8fa2ba; }
.footer-brand p{ margin:18px 0 0; font-size:13.5px; line-height:1.75; max-width:280px; }

.site-footer .footer-head{
  margin:0 0 18px;
  font-size:12.5px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:#fff;
}
.footer-list{ list-style:none; margin:0; padding:0; }
.footer-list li{
  display:flex; gap:11px; align-items:flex-start;
  margin-bottom:12px; font-size:13.5px; line-height:1.6;
}
.footer-list svg{ width:15px; height:15px; flex:none; margin-top:3px; color:#7f93ad; }
.footer-list address{ font-style:normal; }
.footer-list a{ color:var(--footer-text); }
.linklike{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--footer-text); text-align:left;
}
.linklike:hover{ color:#fff; text-decoration:underline; }
.footer-list .todo{ color:#7f8ea3; }
.footer-list a:hover{ color:#fff; text-decoration:none; }
.footer-links li{ display:block; margin-bottom:11px; }

.footer-bottom{
  background:var(--navy-deep);
  padding:16px 0;
  text-align:center;
  font-size:12.5px;
  color:#7f8ea3;
}

/* ============================ Rechtsseiten ============================== */

.page-hero{
  background:linear-gradient(180deg,#1b3862 0%, #14294a 100%);
  padding:56px 0 58px;
  text-align:center;
}
.page-hero h1{
  margin:0;
  font-size:clamp(21px,3.4vw,34px);
  font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:#fff;
  overflow-wrap:anywhere; hyphens:auto;
}
.page-hero h1::after{
  content:""; display:block; width:58px; height:3px;
  margin:14px auto 0; background:var(--blue-accent);
}
.page-hero p{ margin:16px auto 0; max-width:600px; font-size:14.5px; color:#c2d0e3; }

.legal{ max-width:880px; margin:0 auto; overflow-wrap:anywhere; }
.legal h2{
  overflow-wrap:break-word; hyphens:auto;
  margin:38px 0 12px;
  font-size:15px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--navy);
}
.legal h2:first-child{ margin-top:0; }
.legal h3{ margin:26px 0 8px; font-size:14.5px; font-weight:700; color:var(--navy); }
.legal address{
  font-style:normal;
  font-size:14.8px; line-height:1.8; color:var(--text);
}
.legal p, .legal li{ font-size:14.8px; line-height:1.8; color:var(--text); }
.legal ul{ padding-left:20px; }
.legal .card{ padding:26px 30px; }
.legal-data{
  margin:14px 0 0;
  display:grid;
  gap:0;
}
.legal-data > div{
  display:grid;
  grid-template-columns:minmax(0,240px) 1fr;
  gap:6px 24px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}
.legal-data > div:last-child{ border-bottom:0; }
.legal-data dt{
  font-size:12.5px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted);
  align-self:start; padding-top:2px;
}
.legal-data dd{
  margin:0; font-size:14.8px; line-height:1.6; color:var(--navy); font-weight:600;
}

.legal-note{
  border-left:3px solid var(--blue-accent);
  background:var(--bg-soft);
  padding:14px 18px;
  font-size:14px;
  color:var(--muted);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============================ Cookie-Banner ============================= */

.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:#fff;
  border-top:3px solid var(--blue-accent);
  box-shadow:0 -6px 26px rgba(16,32,58,.16);
  transform:translateY(110%);
  transition:transform .3s ease;
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-inner{
  display:flex; align-items:center; gap:28px;
  padding:22px 0;
}
.cookie-text{ flex:1; }
.cookie-text strong{
  display:block; margin-bottom:5px;
  font-size:13.5px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--navy);
}
.cookie-text p{ margin:0; font-size:13.8px; line-height:1.65; color:var(--text); }
.cookie-actions{ display:flex; gap:10px; flex:none; flex-wrap:wrap; }
.btn-cookie{
  background:#fff;
  color:var(--navy);
  border:1px solid var(--navy);
  min-width:150px;
  text-align:center;
}
.btn-cookie:hover{ background:#eaeff6; }

.cookie-settings{
  border-top:1px solid var(--border);
  background:var(--bg-soft);
  padding:22px 0 24px;
  max-height:56vh;
  overflow-y:auto;
}
.cookie-settings[hidden]{ display:none; }
.cookie-settings-head{
  margin:0 0 16px;
  font-size:13.5px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--navy);
}
.cookie-cats{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.cookie-cats li{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px 15px;
}
.cookie-cats label{ display:flex; gap:13px; align-items:flex-start; cursor:pointer; }
.cookie-cats input{ margin-top:2px; width:20px; height:20px; flex:none; }
.cookie-cats input:disabled{ cursor:not-allowed; }
.cookie-cats span{ font-size:13.4px; line-height:1.55; color:var(--text); }
.cookie-cats strong{
  display:block; margin-bottom:3px;
  font-size:13px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--navy);
}
.cookie-hint{
  margin:16px 0 0; font-size:12.6px; line-height:1.6; color:var(--muted);
}
.cookie-banner[hidden]{ display:none; }

/* ============================== Responsive ============================== */

@media (max-width:1040px){
  .services{ gap:20px 34px; }
  .fleet{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  /* Touch-Ziele auf Tablets und Smartphones */
  .btn{ padding:15px 26px; }
  .hero-cta .btn{ font-size:12.5px; padding:15px 26px; }
  .nav-toggle{ display:block; height:44px; }
  .main-nav a{ padding:15px 0; }
  .footer-list a,
  .info-list a,
  .cta-contacts a{ display:inline-block; padding:11px 0; }
  .footer-links a,
  .footer-links .linklike{ display:inline-block; padding:14px 0; }
  /* Datenschutz-Häkchen: größere Trefferfläche, Beschriftung bleibt klickbar */
  .consent{ gap:14px; align-items:center; }
  .consent input{ width:26px; height:26px; margin-top:0; }
  .consent label{ font-size:13.5px; }

  .main-nav{
    display:none;
    position:absolute; left:0; right:0; top:78px;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 12px 24px rgba(16,32,58,.10);
    padding:8px 26px 18px;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{
    padding:13px 0; border-bottom:1px solid var(--border);
  }
  .main-nav a.active{ border-bottom-color:var(--border); }

  .section{ padding:56px 0; }
  .services{ grid-template-columns:1fr; gap:30px; }
  .fleet{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }

  .cta-inner{ flex-wrap:wrap; gap:20px; justify-content:center; text-align:center; }
  .cta-divider{ display:none; }
  .cta-contacts{ flex:1 1 100%; justify-content:center; gap:24px; flex-wrap:wrap; }
  .cta-inner .btn{ flex:0 0 auto; }
}

@media (max-width:760px){
  /* Hochformat-Fassung des Startbildes: Text bleibt groß und lesbar,
     das Fahrzeug vollständig sichtbar. Der Button steht darunter. */
  .hero{
    aspect-ratio:auto;
    background-image:url("assets/hero-mobil.jpg");
    background-size:100% auto;
    background-position:top center;
    padding-top:127%;
    padding-bottom:4px;
  }
  .hero-cta{
    position:static;
    padding:22px 6% 30px;
  }
  .hero-cta .btn{
    display:inline-block;
    font-size:12.5px;
    padding:15px 26px;
  }
}

@media (max-width:620px){
  .legal-data > div{ grid-template-columns:1fr; gap:2px; padding:12px 0; }
  .legal h2{ font-size:13.2px; letter-spacing:.8px; }

  .fleet,
  .fleet-details{ grid-template-columns:1fr; gap:22px; }
  .fleet-subhead{ margin-top:44px; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; padding:44px 0 34px; }
  .card{ padding:24px 20px; }
  .cookie-inner{ flex-direction:column; align-items:stretch; gap:16px; }
  .cookie-actions{ flex-direction:column; }
  .cookie-actions .btn{ width:100%; }
  .logo-name{ font-size:18px; }
  .logo svg{ width:40px; height:30px; }
  .container{ padding-left:20px; padding-right:20px; }
}