/* ============================================================
   mobileeee · step4.css — additions for Step-4 pages only.
   Layered on top of site.css. Uses existing tokens.
   ============================================================ */

/* ── Feature tiles (text-only, used on e-carsharing & geschaeftskunden) ── */
.features{
  display:grid;grid-template-columns:1fr;gap:0;
}
@media(min-width:640px){.features{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media(min-width:1024px){.features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:40px}}
.feature{
  text-align:left;padding:24px 0;
  border-top:1px solid var(--m-stone);
  display:flex;flex-direction:column;gap:8px;
}
.feature h3{
  font-family:var(--font-display);font-weight:600;
  font-size:20px;line-height:1.3;color:var(--m-navy-800);margin:0;
}
.feature p{
  margin:0;color:var(--m-graphite);
  font-size:15px;line-height:1.55;
}

/* ── Trust bar (standard variant — used across all pages) ── */
.trust-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  align-items:center;
}
@media(min-width:768px){.trust-bar{grid-template-columns:repeat(6,1fr);gap:24px}}
.trust-bar .trust{
  height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-xs);background:var(--m-cloud);
  border:1px dashed var(--m-stone);
}
.trust-bar .trust__name{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--m-graphite);
}
/* Logo-Variante (echte Logos statt Platzhalter) */
/* Flex statt fester 6-Spalten: gleicher Abstand zwischen allen Logos,
   unabhängig von ihrer Breite (sonst "schwimmt" das quadratische Entega-Logo) */
.trust-bar.trust-bar--logos{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:40px 64px;
}
.trust-bar--logos .trust{
  flex:0 0 auto;height:64px;
  border:none;background:none;
}
.trust-bar .trust__logo{
  width:auto;
  filter:grayscale(1);opacity:.55;
  transition:filter var(--dur-base) var(--ease-standard),
             opacity var(--dur-base) var(--ease-standard);
}
.trust-bar .trust:hover .trust__logo{filter:grayscale(0);opacity:1}
/* Feste Höhe je Logo (width:auto) — funktioniert auch für SVGs ohne
   width/height-Attribut; die Originalproportionen sind sehr unterschiedlich */
.trust-bar .trust__logo--emsland{height:50px}
.trust-bar .trust__logo--entega{height:48px}
.trust-bar .trust__logo--grafschafter{height:42px}
.trust-bar .trust__logo--mtk{height:40px}
.trust-bar .trust__logo--rmv{height:31px}
.trust-bar .trust__logo--dawonia{height:24px}
.trust-bar__more{
  margin-top:12px;text-align:right;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--m-graphite);opacity:.6;
}

.page-hero--cream{background:var(--m-cream);border-bottom-color:var(--m-stone)}
.page-hero--dark{background:var(--m-navy-800);color:#fff;border-bottom-color:var(--m-navy-700)}
.page-hero--dark h1,.page-hero--dark .lede{color:#fff}
.page-hero--dark .lede{color:rgba(255,255,255,.78)}
.page-hero--dark .breadcrumb,.page-hero--dark .breadcrumb a{color:rgba(255,255,255,.6)}
.page-hero--dark .breadcrumb a:hover{color:#fff}
.page-hero--dark .eyebrow{color:var(--m-cyan-200)}

/* ============================================================
   BRAND MARK — hero watermark + cta band accent (Step 4e)
   ============================================================ */
.page-hero,.hero{position:relative;overflow:hidden}
.page-hero > .container,.hero > .hero__inner{position:relative;z-index:1}
.hero-mark{
  position:absolute;top:50%;right:-8%;transform:translateY(-50%);
  width:480px;height:480px;pointer-events:none;opacity:.06;z-index:0;
}
.hero-mark img{width:100%;height:100%;display:block}
@media (max-width:768px){
  .hero-mark{width:280px;height:280px;right:-20%;opacity:.05}
}

.page-hero--dark .hero-mark img{filter:brightness(0) invert(1)}

.cta-band{position:relative;overflow:hidden}
.cta-band > *:not(.cta-band__mark){position:relative;z-index:1}
.cta-band__mark{
  position:absolute;bottom:-40%;left:-8%;
  width:320px;height:320px;pointer-events:none;
  opacity:.10;z-index:0;
}
.cta-band__mark img{width:100%;height:100%;display:block;filter:brightness(0) invert(1)}
@media (max-width:768px){
  .cta-band__mark{width:200px;height:200px}
}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

.splitcard{
  display:grid;grid-template-columns:1fr;gap:24px;
  background:#fff;border:1px solid var(--m-stone);
  border-radius:var(--r-xl);padding:32px;
}
@media(min-width:880px){.splitcard{grid-template-columns:1.2fr 1fr;gap:40px;padding:48px}}

.speclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.speclist li{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;background:var(--m-cloud);border-radius:var(--r-md);
  font-size:14px;color:var(--m-graphite);
}
.speclist b{color:var(--m-navy-900);font-size:15px}

/* ── Vehicle grid (E-Carsharing) ── */
.vehicle-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:680px){.vehicle-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.vehicle-grid{grid-template-columns:repeat(3,1fr)}}
.vehicle{
  background:#fff;border:1px solid var(--m-stone);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease-standard),box-shadow .2s,border-color .2s;
}
.vehicle:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);border-color:var(--m-navy-700)}
.vehicle__photo{
  aspect-ratio:4/3;background:var(--m-cloud);
  display:grid;place-items:center;border-bottom:1px solid var(--m-stone);
  position:relative;overflow:hidden;
}
/* Per-Klasse-Gradient (mobileeee-Illustrationspalette wie im Home-Step-Flow:
   S = Cyan, M = Sage, L = Terracotta) + dezenter Licht-Glanz oben links. */
.vehicle__photo--s,
.vehicle__photo--m,
.vehicle__photo--l{
  border-bottom:none;
  /* Neutrale, vom Marken-Navy abgeleitete Flaeche (passend zu den navyfarbenen Autos),
     mit dezentem Licht-Glanz oben links. Alle drei Klassen einheitlich. */
  background:
    radial-gradient(120% 120% at 24% 14%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    #DCE0EA;
}

/* Fahrzeug-Illustrationen (Step 29: drei eigenständige Karosserien statt
   eines skalierten Icons). Die Größenstaffelung S→L steckt jetzt schon in
   den Zeichnungen selbst — die Breiten hier ergänzen nur noch ein dezentes
   zusätzliches Größensignal. */
.vehicle__car{
  height:auto;
  filter:drop-shadow(0 6px 14px rgba(20,25,58,.22));
  transition:transform .35s var(--ease-standard);
}
.vehicle__photo--s .vehicle__car{ width:90% }
.vehicle__photo--m .vehicle__car{ width:95% }
.vehicle__photo--l .vehicle__car{ width:100% }
.vehicle:hover .vehicle__car{ transform:translateX(7%) }
@media (prefers-reduced-motion:reduce){
  .vehicle__car{ transition:none }
  .vehicle:hover .vehicle__car{ transform:none }
}
/* Fallback: falls eine Karte noch das alte (ungestylte) SVG hätte */
.vehicle__photo>svg:not(.vehicle__car){width:78%;height:auto}
.vehicle__klasse{
  position:absolute;top:14px;left:14px;
  background:var(--m-navy-800);color:#fff;
  font:700 11px var(--font-mono);letter-spacing:.06em;
  padding:6px 10px;border-radius:6px;
}
.vehicle__body{padding:20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.vehicle h3{margin:0;color:var(--m-navy-900);font-size:18px}
.vehicle__sub{margin:0;color:var(--m-graphite);font-size:13px;font-family:var(--font-mono);letter-spacing:.04em}
.vehicle__specs{
  margin:0;padding:14px 0 0;border-top:1px solid var(--m-stone);
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;
}
.vehicle__specs li{font-size:12px;color:var(--m-graphite);display:flex;flex-direction:column;gap:2px}
.vehicle__specs b{color:var(--m-navy-900);font-size:14px;font-variant-numeric:tabular-nums}
.vehicle__cta{margin-top:auto;font-size:13px}

/* ── FAQ search + filter ── */
.faq-toolbar{
  display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px;
  position:sticky;top:64px;z-index:40;background:var(--m-paper);padding:14px 0;
  border-bottom:1px solid var(--m-stone);
}
@media(min-width:720px){.faq-toolbar{grid-template-columns:auto 1fr;align-items:center}}
.faq-search{
  position:relative;
}
.faq-search input{
  width:100%;border:1px solid var(--m-stone);border-radius:999px;
  padding:12px 16px 12px 44px;font:400 15px var(--font-sans);
  background:#fff;
}
.faq-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--m-graphite)}
.faq-search input:focus{outline:0;border-color:var(--m-navy-800);box-shadow:0 0 0 3px rgba(214,240,245,.6)}
.faq-cats{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.faq-cat{
  flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--m-stone);
  background:#fff;color:var(--m-graphite);font:500 13px var(--font-sans);
  cursor:pointer;transition:all .18s var(--ease-standard);white-space:nowrap;
}
.faq-cat:hover{border-color:var(--m-navy-800);color:var(--m-navy-800)}
.faq-cat.is-active{background:var(--m-navy-800);color:#fff;border-color:var(--m-navy-800)}
.faq__item.is-hidden{display:none}
.faq__empty{padding:48px 16px;text-align:center;color:var(--m-graphite);font-size:14px}

/* ── Solutions hub ── */
.solutions-hub{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.solutions-hub{grid-template-columns:repeat(3,1fr)}}
.solution-card{
  display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--m-stone);border-radius:var(--r-lg);
  padding:28px;text-decoration:none;
  transition:transform .2s var(--ease-standard),box-shadow .2s,border-color .2s;
}
.solution-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--m-navy-700)}
.solution-card__icon{
  width:48px;height:48px;border-radius:var(--r-md);background:var(--m-cyan-200);
  color:var(--m-navy-800);display:grid;place-items:center;
}
.solution-card__icon svg{width:24px;height:24px}
.solution-card h3{font-size:20px;color:var(--m-navy-900);margin:0}
.solution-card p{margin:0;color:var(--m-graphite);font-size:14px;line-height:1.55;flex:1}
.solution-card .arrow{color:var(--m-cyan-600)}

.solution-detail{
  display:grid;grid-template-columns:1fr;gap:32px;
  padding:48px 0;border-top:1px solid var(--m-stone);
}
@media(min-width:880px){.solution-detail{grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}}
.solution-detail h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.solution-detail__media{
  aspect-ratio:4/3;background:var(--m-cloud);border-radius:var(--r-lg);
  border:1px solid var(--m-stone);position:relative;overflow:hidden;
  display:grid;place-items:center;color:var(--m-graphite);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}

/* ── Press list ── */
.press-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--m-stone)}
.press-item{
  display:grid;grid-template-columns:1fr;gap:6px;padding:24px 0;
  border-bottom:1px solid var(--m-stone);
}
@media(min-width:720px){.press-item{grid-template-columns:120px 1fr auto;gap:24px;align-items:center}}
.press-item time{font:600 12px var(--font-mono);color:var(--m-graphite);letter-spacing:.04em}
.press-item h3{margin:0;font-size:17px;color:var(--m-navy-900);line-height:1.4}
.press-item .link--arrow{font-size:13px}

/* ── Career / job list ── */
.job-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.job-grid{grid-template-columns:repeat(2,1fr)}}
.job{
  background:#fff;border:1px solid var(--m-stone);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .2s,transform .2s var(--ease-standard);
}
.job:hover{border-color:var(--m-navy-800);transform:translateY(-1px)}
.job__meta{font:600 11px var(--font-mono);letter-spacing:.06em;color:var(--m-cyan-600);text-transform:uppercase}
.job h3{margin:0;font-size:18px;color:var(--m-navy-900)}
.job p{margin:0;color:var(--m-graphite);font-size:13px;line-height:1.55}

/* ── Legal pages (long-form copy) ── */
.legal-shell{max-width:780px}
.legal-shell h2{font-size:22px;color:var(--m-navy-900);margin:36px 0 12px}
.legal-shell h3{font-size:16px;color:var(--m-navy-800);margin:24px 0 8px}
.legal-shell p,.legal-shell li{font-size:15px;line-height:1.7;color:var(--m-graphite)}
.legal-shell ul,.legal-shell ol{padding-left:20px}

/* ── About: mission + locations ── */
.locations-mini{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
@media(min-width:680px){.locations-mini{grid-template-columns:repeat(2,1fr)}}
.location-mini{
  background:#fff;border:1px solid var(--m-stone);border-radius:var(--r-lg);
  padding:20px;
}
.location-mini__tag{font:600 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--m-cyan-600)}
.location-mini h3{font-size:16px;color:var(--m-navy-900);margin:6px 0 6px}
.location-mini p{margin:0;font-size:13px;color:var(--m-graphite);line-height:1.55}

/* ── Hero meta + region intro ── */
.region-intro{
  display:grid;grid-template-columns:1fr;gap:18px;
  padding:24px;background:var(--m-cream);border-radius:var(--r-lg);border:1px solid var(--m-stone);
}
@media(min-width:760px){.region-intro{grid-template-columns:auto 1fr;gap:24px;align-items:center}}
.region-intro__num{
  font:700 36px var(--font-sans);color:var(--m-navy-900);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;
}
.region-intro p{margin:0;color:var(--m-navy-700)}


/* ===== Tarif-Vergleichstabelle (Step 5) ===== */

.tariff-table{
  border:1px solid var(--m-stone);
  border-radius:var(--r-lg);
  overflow:clip;
  overflow-clip-margin:20px;
  background:#fff;
  box-shadow:var(--shadow-1);
}

.tariff-table__head{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  border-bottom:1px solid var(--m-stone);
}

.tariff-table__col{
  padding:28px 20px;
  text-align:center;
  border-right:1px solid var(--m-stone);
  position:relative;
}
.tariff-table__col:last-child{border-right:none}
.tariff-table__col--featured{background:var(--m-cyan-50)}
.tariff-table__col--spacer{
  background:var(--m-paper);
  padding:0;
}

.tariff-table__name{
  font-family:var(--font-display);font-weight:700;
  font-size:24px;line-height:1.1;letter-spacing:-.01em;
  margin:0 0 4px;color:var(--m-navy-800);
}
.tariff-table__type{
  font:600 11px var(--font-mono);
  color:var(--m-graphite);
  margin:0 0 12px;
  text-transform:uppercase;letter-spacing:.12em;
}
.tariff-table__price{
  margin:0;font-size:14px;color:var(--m-graphite);
}
.tariff-table__price strong{
  display:block;
  font-family:var(--font-display);font-weight:700;
  font-size:28px;color:var(--m-navy-800);
  letter-spacing:-.01em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}

.tariff-badge{
  position:absolute;top:-10px;right:-10px;
  background:var(--m-navy-800);color:#fff;
  font:600 10px var(--font-mono);
  padding:4px 10px;border-radius:var(--r-pill);
  text-transform:uppercase;letter-spacing:.12em;
  box-shadow:var(--shadow-1);
}

.tariff-table__section{border-bottom:1px solid var(--m-stone)}
.tariff-table__section:last-child{border-bottom:none}

.tariff-table__section-title{
  padding:14px 20px;margin:0;
  background:var(--m-paper);
  font:600 14px var(--font-body);
  color:var(--m-navy-800);
  letter-spacing:.01em;
}
.tariff-table__models{
  font-weight:400;font-size:13px;
  color:var(--m-graphite);margin-left:8px;
}

/* Fahrzeug-Illustration im Kategorie-Titel (S/M/L) — freigestelltes WebP auf --m-paper */
.tariff-table__section-title--vehicle{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:8px;
  padding-bottom:8px;
}
.tariff-table__vehicle{
  height:74px;width:auto;flex:none;
}
@media (max-width:560px){
  .tariff-table__vehicle{height:54px}
}

.tariff-table__row{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  border-top:1px solid var(--m-stone);
}

/* Visuell gekoppelte Zeilengruppe (z. B. Gebühr + zugehöriger Rabattcode) */
.tariff-table__group{position:relative}
.tariff-table__group .tariff-table__row + .tariff-table__row{border-top:1px dashed var(--m-stone)}
.tariff-table__group .tariff-table__label{
  background:linear-gradient(to right, var(--m-cyan-50) 0, var(--m-cyan-50) 100%);
  flex-direction:column;align-items:flex-start;justify-content:center;
}
.tariff-table__group .tariff-table__label small{
  display:block;margin-top:4px;
  font:500 11px var(--font-mono);
  color:var(--m-graphite);
  letter-spacing:.03em;
}
.tariff-table__group-bracket{
  grid-column:1 / -1;
  padding:8px 20px 6px;
  background:var(--m-cyan-50);
  border-top:1px solid var(--m-stone);
  font:600 11px var(--font-mono);
  color:var(--m-navy-800);
  letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.tariff-table__group-bracket::before{
  content:"";width:14px;height:1px;background:var(--m-cyan-500);flex:none;
}
.tariff-table__group .tariff-table__row:first-of-type{border-top:none}
@media (max-width:768px){
  .tariff-table__group-bracket{padding:10px 20px;border-top:1px solid var(--m-stone)}
}

/* Microcopy unter CTA-Buttons */
.cta-band__micro{
  margin:14px auto 0;max-width:520px;
  font:500 12px var(--font-mono);
  color:rgba(255,255,255,.7);
  letter-spacing:.02em;
  text-align:center;
}

.tariff-table__label{
  padding:14px 20px;
  font-size:14px;line-height:1.4;
  color:var(--m-navy-800);
  background:var(--m-paper);
  border-right:1px solid var(--m-stone);
  display:flex;align-items:center;
}
.tariff-table__label small{
  display:block;
  color:var(--m-graphite);
  font-size:12px;font-weight:400;
  margin-top:2px;
}

.tariff-table__cell{
  padding:14px 16px;
  text-align:center;
  font-size:14px;line-height:1.4;
  color:var(--m-navy-800);
  border-right:1px solid var(--m-stone);
  font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.tariff-table__cell:last-child{border-right:none}
.tariff-table__cell--featured{background:var(--m-cyan-50);font-weight:600}

/* Step 28 (Hebel D): Zeilen-Hover — Lesehilfe über die vier Spalten.
   Nur echte Pointer; die featured-Spalte bleibt durch kräftigeres Cyan
   auch im Hover-Zustand unterscheidbar. */
@media (hover:hover) and (pointer:fine){
  .tariff-table__row{transition:background-color var(--dur-fast) var(--ease-standard)}
  .tariff-table__row:hover{background:var(--m-cloud)}
  .tariff-table__row .tariff-table__cell--featured{transition:background-color var(--dur-fast) var(--ease-standard)}
  .tariff-table__row:hover .tariff-table__cell--featured{background:var(--m-cyan-200)}
}
.tariff-table__cell small{
  display:block;font-weight:400;
  color:var(--m-graphite);
  font-size:12px;margin-top:2px;
}

/* Info-Grid für die zwei Info-Karten */
.info-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media(min-width:680px){
  .info-grid{grid-template-columns:1fr 1fr;gap:20px}
}

/* ===== Mobile: Tabelle in Karten umbrechen ===== */
@media(max-width:720px){
  .tariff-table{box-shadow:none}

  .tariff-table__head{grid-template-columns:1fr}
  .tariff-table__col{
    border-right:none;
    border-bottom:1px solid var(--m-stone);
    text-align:left;
    padding:20px;
  }
  .tariff-table__col:last-child{border-bottom:none}
  .tariff-table__col--spacer{display:none}
  .tariff-badge{top:-10px;right:12px}

  .tariff-table__section-title{padding:14px 20px}

  .tariff-table__row{grid-template-columns:1fr}

  .tariff-table__label{
    border-right:none;
    border-bottom:1px solid var(--m-stone);
    font-weight:600;
    padding:12px 20px;
  }

  .tariff-table__cell{
    border-right:none;
    border-bottom:1px solid var(--m-stone);
    text-align:left;align-items:flex-start;
    padding:12px 20px;
  }
  .tariff-table__cell:last-child{border-bottom:none}

  /* Auf Mobile vor jeder Zelle den Tarif-Namen einblenden */
  .tariff-table__cell::before{
    content:attr(data-tariff);
    display:block;
    font:600 10px var(--font-mono);
    color:var(--m-navy-800);
    text-transform:uppercase;letter-spacing:.12em;
    margin-bottom:4px;
  }
}