/* ═══════════════════════════════════════════════════════════════════════
   Yui's Spidernet — Gastseite, optisches Update
   Gegenstueck zu chat-controls.css. Reine Optik: keine Klassennamen, ids
   oder data-Attribute geaendert, kein JS, keine Texte.
   Als LETZTES Stylesheet laden, nach brand.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --sp-bg:#0E0D0C;
  --sp-s0:#121110;
  --sp-s1:#1C1A19;
  --sp-s2:#242120;
  --sp-bar:#161413;
  --sp-line:#262322;
  --sp-line-card:#332F2D;
  --sp-line-strong:#3A3533;
  --sp-line-btn:#463F3B;
  --sp-ink:#F6F3F0;
  --sp-ink-2:#C4BDB6;
  --sp-ink-3:#B8B1AA;
  --sp-ink-4:#9B948D;
  --sp-ink-5:#8F877F;
  --sp-red:#FF3B24;
  --sp-red-hover:#FF5940;
  --sp-red-text:#FF8A78;
  --sp-on-red:#14110F;
  --sp-green:#7FC4A7;
  --sp-green-dot:#2E8B60;
}

html,body{background:var(--sp-s0) !important;}

/* Zahlen stehen ueberall untereinander. */
.bm-priceline,.trust-row strong,.bm-fcount,.deal-price,
.bm-sheet-price,.hero-chips{font-variant-numeric:tabular-nums;}

/* ── Fokus: einer fuer alles ─────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--sp-red) !important;outline-offset:2px !important;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────── */
header.sr-band{
  background:var(--sp-s0) !important;
  border-bottom:1px solid var(--sp-line-card) !important;
  box-shadow:none !important;
}
.nav-burger{
  width:44px !important;height:44px !important;
  border-radius:13px !important;
  border:1px solid var(--sp-line-card) !important;
  background:transparent !important;
}
.nav-burger:hover{background:var(--sp-s1) !important;}
.nav-burger span{background:var(--sp-ink) !important;}
/* Der Sprachwaehler: gleiche Form wie der Menue-Knopf daneben. */
.lang-select-wrap{border-radius:14px !important;}
.lang-select-wrap select{
  min-height:44px;background:var(--sp-s1) !important;
  border:1px solid var(--sp-line-card) !important;
  border-radius:14px !important;color:var(--sp-ink) !important;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.book.sr-band{background:var(--sp-s0) !important;}
.book-heading{
  font-family:var(--yui-head) !important;
  text-transform:uppercase;letter-spacing:0.005em;
  font-size:clamp(30px,8.6vw,38px) !important;line-height:1.02 !important;
  color:var(--sp-ink) !important;
}
.book .sub{color:var(--sp-ink-2) !important;max-width:32ch;}
/* Genau ein gefuellter Knopf auf dem Bildschirm. */
.wa-btn.wa-link{
  min-height:52px;background:var(--sp-red) !important;
  border:none !important;border-radius:999px !important;
  color:var(--sp-on-red) !important;
  font-family:var(--yui-body);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;box-shadow:none !important;
}
.wa-btn.wa-link:hover{background:var(--sp-red-hover) !important;}
.wa-btn.wa-link svg{fill:var(--sp-on-red) !important;}

/* Die drei Aussagen aus der alten Werbeleiste. */
.hero-chips{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
}
.hero-chips li{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px;border-radius:999px;
  background:transparent;border:1px solid var(--sp-line-strong);
  color:var(--sp-ink-3);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.hero-chips svg{width:15px;height:15px;flex:0 0 15px;color:var(--sp-green);}

/* ── Leiste unten mit den drei Wegen ─────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;background:var(--sp-bar);
  border-top:1px solid var(--sp-line);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));
}
.tabbar-item{
  flex:1 1 0;min-width:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-height:56px;padding:6px 4px;
  color:var(--sp-ink-4);text-decoration:none;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.tabbar-item svg{width:22px;height:22px;flex:0 0 22px;}
.tabbar-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tabbar-item:hover{color:var(--sp-ink-2);}
.tabbar-item.is-on{color:var(--sp-ink);}
.tabbar-item.is-on::after{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:999px;background:var(--sp-red);
}
/* Platz fuer die Leiste, damit der Fuss nicht darunter verschwindet. */
body{padding-bottom:calc(74px + env(safe-area-inset-bottom)) !important;}
/* Auf dem Schreibtisch traegt die Kopfzeile die Navigation - dort ist die
   Leiste unten doppelt. Die Buchungsseite hat keine Kopfzeilen-Navigation,
   dort bleibt sie stehen. */
@media(min-width:820px){
  body:has(header nav.links) .tabbar{display:none;}
  body:has(header nav.links){padding-bottom:0 !important;}
}

/* ── Menue-Schublade ─────────────────────────────────────────────────── */
.drawer-nav{display:flex;flex-direction:column;gap:6px;margin:0 0 18px;}
.drawer-nav-link{
  display:flex;align-items:center;min-height:52px;padding:0 16px;
  border-radius:16px;border:1px solid var(--sp-line-card);
  background:var(--sp-s1);color:var(--sp-ink);text-decoration:none;
  font-family:var(--yui-head);font-weight:600;font-size:17px;
  letter-spacing:.06em;text-transform:uppercase;
}
.drawer-nav-link:hover{border-color:var(--sp-ink);}
.filter-drawer-close{
  width:44px !important;height:44px !important;
  border-radius:13px !important;
  background:var(--sp-s2) !important;border:1px solid var(--sp-line-strong) !important;
  color:var(--sp-ink) !important;
}

/* ── Abschnittskopf der Flotte ───────────────────────────────────────── */
.sec-kicker{color:var(--sp-ink-4) !important;}
.sec-title{color:var(--sp-ink) !important;}
.bm-intro,.bm-slogan{color:var(--sp-ink-2) !important;}

/* ── Filter ──────────────────────────────────────────────────────────── */
.bm-flabel{color:var(--sp-ink-4) !important;letter-spacing:.14em;}
.bm-chip{
  min-height:44px !important;padding:0 16px !important;
  border-radius:999px !important;
  background:transparent !important;border:1px solid var(--sp-line-strong) !important;
  color:var(--sp-ink-3) !important;font-weight:600 !important;
}
.bm-chip:hover{border-color:var(--sp-ink) !important;color:var(--sp-ink) !important;}
.bm-chip[aria-pressed="true"]{
  background:var(--sp-ink) !important;border-color:var(--sp-ink) !important;
  color:var(--sp-on-red) !important;font-weight:700 !important;
}
.bm-chip .bm-n{color:var(--sp-ink-5) !important;font-weight:700 !important;background:none !important;border:none !important;padding:0 0 0 7px !important;}
.bm-chip[aria-pressed="true"] .bm-n{color:var(--sp-ink-5) !important;}
.bm-chip.bm-chip-soon{opacity:.5;}
/* Chip-Zeilen duerfen nie abschneiden - der letzte Chip war sonst nicht
   erreichbar. */
.bm-fchips{display:flex !important;flex-wrap:wrap !important;gap:8px !important;overflow:visible !important;}
.bm-frow{overflow:visible !important;}
.bm-fnote,.bm-fcount{color:var(--sp-ink-5) !important;}
.bm-freset{
  min-height:44px;border-radius:999px !important;
  border:1px solid var(--sp-line-btn) !important;
  background:transparent !important;color:var(--sp-ink) !important;
}
/* Die drei selten gebrauchten Zeilen liegen hinter einem Knopf. */
.bm-fmore[hidden]{display:none !important;}
.bm-fmore-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:44px;margin:4px 0 2px;padding:0 16px;
  border-radius:16px;border:1px solid var(--sp-line-btn);
  background:transparent;color:var(--sp-ink);
  font-family:var(--yui-head);font-size:14px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;
}
.bm-fmore-btn:hover{border-color:var(--sp-ink);}
.bm-fmore-btn::after{
  content:"";width:9px;height:9px;flex:0 0 9px;
  border-right:2px solid var(--sp-ink-5);border-bottom:2px solid var(--sp-ink-5);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;
}
.bm-fmore-btn[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px);}

/* ── Fahrzeugkarten ──────────────────────────────────────────────────── */
.bm-card{
  background:var(--sp-s1) !important;
  border:1px solid var(--sp-line-card) !important;
  border-radius:22px !important;overflow:hidden;
  box-shadow:none !important;
}
.bm-card:hover{border-color:#4E4741 !important;}
.bm-photo{background:var(--sp-s2) !important;}
.bm-kicker{color:var(--sp-ink-4) !important;letter-spacing:.14em;}
.bm-name{font-family:var(--yui-head) !important;text-transform:uppercase;color:var(--sp-ink) !important;}
.bm-specs span{
  min-height:32px;display:inline-flex;align-items:center;
  padding:0 12px;border-radius:999px;
  background:var(--sp-s2) !important;border:1px solid var(--sp-line-strong) !important;
  color:var(--sp-ink-2) !important;white-space:nowrap;
}
.bm-specs{display:flex;flex-wrap:wrap;gap:7px;overflow:visible !important;}

/* Der Tagespreis stand in Rot, gleichauf mit jedem Knopf. Zahlen sind
   keine Handlungsaufforderung. */
.bm-priceline b{color:var(--sp-ink) !important;font-size:24px;font-weight:800;}
.bm-priceline span{color:var(--sp-ink-3) !important;font-weight:600;}

/* Verfuegbarkeit umgedreht: frei ist der helle Chip mit gruenem Punkt,
   vermietet der ruhige dunkle. Vorher schrie "AVAILABLE NOW" in Alarmrot. */
.bm-avail{
  display:inline-flex !important;align-items:center;gap:7px;
  padding:5px 12px !important;border-radius:999px !important;
  font-size:10.5px !important;font-weight:700 !important;
  letter-spacing:.1em !important;text-transform:uppercase !important;
}
.bm-avail.free{
  background:var(--sp-ink) !important;color:var(--sp-on-red) !important;
  border:none !important;
}
.bm-avail.free::before{
  content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--sp-green-dot);
}
.bm-avail.out{
  background:rgba(20,17,15,.85) !important;
  border:1px solid #4A443F !important;color:var(--sp-ink-2) !important;
}

/* Ein gefuellter Knopf pro Karte - und nur, wenn es wirklich etwas zu
   mieten gibt. */
.bm-btn{
  min-height:48px;border-radius:16px !important;
  background:var(--sp-red) !important;border:none !important;
  color:var(--sp-on-red) !important;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:none !important;
}
.bm-btn:hover{background:var(--sp-red-hover) !important;}
.bm-btn .bm-btn-icon{fill:var(--sp-on-red) !important;}
.bm-card.is-out .bm-btn,.bm-card .bm-btn.ask{
  background:transparent !important;border:1px solid var(--sp-line-btn) !important;
  color:var(--sp-ink) !important;
}
.bm-card.is-out .bm-btn:hover{border-color:var(--sp-ink) !important;background:transparent !important;}
.bm-refnote{color:var(--sp-ink-4) !important;}

/* ── Zahlenzeile ─────────────────────────────────────────────────────── */
.trust-row strong{color:var(--sp-ink) !important;}
.trust-row span{color:var(--sp-ink-4) !important;}

/* ── Datenblatt ──────────────────────────────────────────────────────── */
.bm-sheet{
  background:var(--sp-s1) !important;border:1px solid var(--sp-line-strong) !important;
  border-radius:30px 30px 0 0 !important;
}
.bm-sheet-x{
  width:44px !important;height:44px !important;border-radius:13px !important;
  background:var(--sp-s2) !important;border:1px solid var(--sp-line-strong) !important;
  color:var(--sp-ink) !important;
}
.bm-sheet-back{background:rgba(8,7,6,.78) !important;}

/* ── Einwilligung ────────────────────────────────────────────────────── */
.sr-consent{background:var(--sp-bar) !important;border-top:1px solid var(--sp-line-card) !important;}
.sr-consent-text{color:var(--sp-ink-2) !important;}
.sr-consent-btn,.sr-consent-no,.sr-consent-yes{
  background:transparent !important;border:1px solid var(--sp-line-btn) !important;
  color:var(--sp-ink) !important;
}
.sr-consent-btn:hover{border-color:var(--sp-ink) !important;}
.sr-consent-link{color:var(--sp-ink-3) !important;}
/* Die Einwilligung schwebte ueber dem Inhalt und verdeckte auf 390px rund
   ein Drittel des Bildschirms. Jetzt steht sie als Karte im Fluss, direkt
   unter dem Hero - beide Knoepfe gleich gewichtet. */
.sr-consent{
  position:static !important;left:auto !important;right:auto !important;bottom:auto !important;
  z-index:auto !important;
  background:var(--sp-s1) !important;
  border:1px solid var(--sp-line-card) !important;border-top:1px solid var(--sp-line-card) !important;
  border-radius:20px !important;
  margin:0 auto 26px !important;max-width:640px;
  padding:16px 18px !important;
}
.sr-consent-inner{gap:14px 16px !important;}
.sr-consent-actions{width:100%;display:flex;gap:10px;}
.sr-consent-btn{flex:1 1 0;min-height:44px;border-radius:999px !important;}
body.sr-consent-open .tabbar{opacity:1;pointer-events:auto;}
body.sr-consent-open .fab-row,body.sr-consent-open .drawer-tab{opacity:1 !important;}

/* ── Reihenfolge in der Kopfzeile ────────────────────────────────────── */
/* Vorlage: Marke links, Sprache, Menue ganz rechts. Im Markup steht der
   Menue-Knopf vor der Navigation - hier nur die Anzeigereihenfolge. */
.nav{gap:10px !important;}
.nav .brand{order:1;min-width:104px;flex:0 1 auto;}
.nav nav.links{order:2;margin-left:auto;}
.nav .nav-burger{order:3;flex:0 0 44px;}
/* Die Wortmarke braucht Platz, sonst wird sie auf schmalen Geraeten
   auf ein Drittel gestaucht. */
.nav .yui-wordmark{min-width:96px;}
@media(max-width:400px){
  .nav .brand{min-width:92px;}
  .nav .yui-wordmark{min-width:84px;}
  .lang-select-wrap{max-width:104px;}
}

/* ── Etikett im Bild ─────────────────────────────────────────────────── */
/* Umgedreht: frei ist der ruhige helle Chip mit gruenem Punkt, vermietet
   der dunkle, der mit dem Datum fuehrt. Vorher schrie "AVAILABLE NOW" in
   Alarmrot, waehrend "RENTED OUT" in ruhigem Weiss stand. */
.bm-grid .bm-avail{
  display:inline-flex !important;align-items:center;gap:7px;
  top:13px !important;left:13px !important;
  padding:6px 12px !important;font-size:10.5px !important;
}
.bm-grid .bm-avail.free{
  background:var(--sp-ink) !important;color:var(--sp-on-red) !important;
}
.bm-grid .bm-avail.free::before{
  content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--sp-green-dot);
}
.bm-grid .bm-avail.out{
  background:rgba(20,17,15,.85) !important;
  border:1px solid #4A443F !important;color:var(--sp-ink-2) !important;
}

/* Das Bild nahm ein ganzes Quadrat ein; auf dem Handy passte damit kaum
   eine Karte auf den Schirm. */
.bm-grid .bm-photo,.bm-photo{aspect-ratio:16/11 !important;}
.bm-grid .bm-body{padding:15px !important;gap:10px !important;}

/* ── Merkmale ────────────────────────────────────────────────────────── */
/* Die drei Angaben standen in einer gemeinsamen grauen Sammelpille; der
   dritte Eintrag wurde darin regelmaessig abgeschnitten. Jetzt je ein Chip,
   umbrechend, ohne Kuerzung. */
.bm-grid .bm-specs{
  background:transparent !important;padding:0 !important;
  gap:7px !important;border-radius:0 !important;
}
.bm-grid .bm-specs span{
  min-height:32px;display:inline-flex;align-items:center;
  padding:0 12px;border-radius:999px;
  background:var(--sp-s2) !important;border:1px solid var(--sp-line-strong);
  color:var(--sp-ink-2) !important;font-size:12.5px;white-space:nowrap;
}
.bm-grid .bm-priceline b{
  font-family:var(--yui-body) !important;font-size:24px !important;font-weight:800 !important;
  color:var(--sp-ink) !important;
}
.bm-grid .bm-priceline span{color:var(--sp-ink-3) !important;font-weight:600;}

/* ── Abschnittsueberschrift ueber der Flotte ─────────────────────────── */
/* Stand kursiv und damit als einzige Schrift der Seite schraeg. Die
   Vorlage kennt nur zwei Familien und keine Kursive. */
.guide-cat-title{
  font-style:normal !important;color:var(--sp-ink) !important;
  letter-spacing:0.005em !important;
}
.sr-eyebrow{color:var(--sp-ink-4) !important;}

/* Eine Linie mitten in einer runden Karte sah aus wie ein Fehler; die
   Chips darunter tragen ihre Trennung selbst. */
.bm-specs{border-top:0 !important;padding-top:0 !important;}
.nav{gap:14px !important;}

/* ── Anmeldekarte (Buchungsseite) ────────────────────────────────────── */
.signin-card{
  background:var(--sp-s1) !important;border:1px solid var(--sp-line-card) !important;
  border-radius:22px !important;box-shadow:none !important;
}
.signin-card p{color:var(--sp-ink-2) !important;}
.signin-note{
  display:flex;align-items:flex-start;gap:9px;justify-content:center;
  margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--sp-ink-2);text-align:left;
}
.signin-note svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:var(--sp-green);}
.signin-alt{color:var(--sp-ink-3) !important;}
.account-card,.booking-row,.fav-card{
  background:var(--sp-s1) !important;border:1px solid var(--sp-line-card) !important;
  border-radius:20px !important;
}
/* Der Abschnitt selbst ist kein Kasten. Vorher trug er denselben Rahmen wie
   die Buchungen darin - zwei Rahmen ineinander, und "MY BOOKINGS" lag genau
   auf der oberen Linie. Gemessen: Beschriftung bei y=241, Kasten bei y=240. */
section.acct-section{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;
}
/* Ueberschrift wie im Control Center: Grossbuchstaben, Linie nach rechts. */
section.acct-section > .section-label{
  display:flex;align-items:center;gap:12px;margin:0 0 14px !important;
  font-family:var(--yui-head);font-weight:700;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sp-ink) !important;
}
section.acct-section > .section-label::after{
  content:"";flex:1 1 auto;height:1px;background:var(--sp-line-card);
}

/* Der Zustand einer Buchung in den Farben der Marke. Blau auf Blau kommt in
   der Palette nicht vor. */
.booking-status{
  font-family:var(--yui-body);font-size:10px !important;font-weight:700 !important;
  letter-spacing:.1em;border-radius:999px !important;padding:4px 10px !important;
}
.booking-status.confirmed,.booking-status.rented{
  background:rgba(95,169,140,.16) !important;color:var(--sp-green) !important;
}
.booking-status.pending{background:rgba(255,59,36,.16) !important;color:var(--sp-red-text) !important;}
.booking-status.declined{background:rgba(255,59,36,.12) !important;color:var(--sp-red-text) !important;}
.booking-status.completed{background:var(--sp-s2) !important;color:var(--sp-ink-3) !important;}
/* Der Name brach hinter dem Abzeichen um ("Honda X-ADV / 750"). Das Abzeichen
   bekommt eine eigene Zeile darueber, der Name die volle Breite. */
.booking-row-top{flex-wrap:wrap;}
.booking-row-item{flex:1 1 100%;font-size:17px !important;}
.booking-status{order:-1;}

/* Eine Adresse als roher Link brach ueber zwei Zeilen quer durch die Tabelle. */
.booking-fact dd{overflow-wrap:anywhere;}
.booking-fact dd a{color:var(--sp-green) !important;}
/* "My Profile" im Menue stand als einziger Knopf neben FLEET/CHAT/MY
   BOOKINGS in der Fliesstextschrift. */
.drawer-profile-btn{
  font-family:var(--yui-head) !important;font-weight:600 !important;
  letter-spacing:.07em;text-transform:uppercase;
}
.signout-pill{
  min-height:48px;border-radius:999px !important;padding:0 26px !important;
  background:transparent !important;border:1px solid var(--sp-line-btn) !important;
  color:var(--sp-ink) !important;
  font-family:var(--yui-head) !important;font-weight:600 !important;font-size:13.5px !important;
  letter-spacing:.07em;text-transform:uppercase;
}

/* ── Mindestgroesse zum Treffen ──────────────────────────────────────── */
/* Alles Antippbare mindestens 44px hoch. Gemessen waren: Klassen-Chips im
   Menue 36px, Marken 38px, die Fusszeilen-Links 34px. */
.drawer-chip{min-height:44px !important;padding:0 16px !important;border-radius:999px !important;
  background:transparent !important;border:1px solid var(--sp-line-strong) !important;color:var(--sp-ink-3) !important;}
.drawer-chip[aria-pressed="true"]{background:var(--sp-ink) !important;border-color:var(--sp-ink) !important;color:var(--sp-on-red) !important;}
.drawer-brand{min-height:44px !important;border-radius:14px !important;
  border:1px solid var(--sp-line-card) !important;color:var(--sp-ink-2) !important;}
.drawer-brand:hover{border-color:var(--sp-ink) !important;}
footer a,.site-foot a,.foot-links a{
  display:inline-flex;align-items:center;min-height:44px;
}
.sr-consent-reopen{min-height:44px !important;}
/* Die drei Rechtslinks im Fuss standen auf 34px. */
.site-footer a,.footer a,#siteFooter a{display:inline-flex;align-items:center;min-height:44px;}
footer a{display:inline-flex !important;align-items:center;min-height:44px !important;}
.nav .brand{min-height:44px;align-items:center;}

/* ── Fahrzeug-Datenblatt ─────────────────────────────────────────────── */
.bm-sheet-head{
  display:flex !important;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:14px;
}
.bm-sheet-id{min-width:0;flex:1 1 auto;}
.bm-sheet-brand{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sp-ink-4) !important;margin-bottom:4px;
}
.bm-sheet-name{
  font-family:var(--yui-head) !important;text-transform:uppercase;
  color:var(--sp-ink) !important;line-height:1.05 !important;margin:0 !important;
}
/* Der Preis stand in Rot unter den Etiketten und ohne Tausendertrennung,
   waehrend jede andere Zahl der Seite formatiert war. */
.bm-sheet-price{flex:0 0 auto;text-align:right;line-height:1.1;}
.bm-sheet-price b{
  display:block;font-size:24px;font-weight:800;color:var(--sp-ink);
  font-variant-numeric:tabular-nums;
}
.bm-sheet-price span{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sp-ink-4);margin-top:2px;
}
.bm-goodfor{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sp-ink-4);margin:18px 0 9px;
}
/* Drei gleiche neutrale Kaesten. Vorher war "Beginner" ein rotes Kreuz auf
   rotbraunem Grund - ein rotes Kreuz auf einer roten Marke liest sich als
   Fehler, nicht als Einschaetzung. */
.bm-lights{display:grid !important;grid-template-columns:repeat(3,1fr);gap:9px !important;}
.bm-light{
  background:var(--sp-s2) !important;border:1px solid var(--sp-line-card) !important;
  border-radius:16px !important;padding:14px 8px !important;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.bm-light b{font-size:17px;line-height:1;color:var(--sp-ink-4) !important;}
.bm-light.g b{color:var(--sp-green) !important;}
.bm-light.y b{color:var(--sp-ink-3) !important;}
.bm-light.r b{color:var(--sp-ink-4) !important;}
.bm-light span{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sp-ink-2) !important;
}
/* Technische Daten als Tabelle: Schluessel links, Wert rechts. */
.bm-sheet .bm-specs{
  display:block !important;background:var(--sp-s2) !important;border:0 !important;
  border-radius:16px !important;padding:2px 14px !important;margin:16px 0 !important;
}
.bm-sheet .bm-specs > div{
  display:flex !important;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0 !important;border-bottom:1px solid #2B2827;
}
.bm-sheet .bm-specs > div:last-child{border-bottom:0;}
.bm-sheet .bm-specs dt{color:var(--sp-ink-4) !important;font-size:13.5px !important;flex:0 0 auto;}
.bm-sheet .bm-specs dd{
  color:var(--sp-ink) !important;font-weight:700 !important;font-size:13.5px !important;
  text-align:right;margin:0 !important;
}
/* Plus und Minus waren Schriftzeichen im Fliesstext. */
.bm-pc{display:flex !important;align-items:flex-start;gap:10px;margin:0 0 8px !important;
  font-size:13.5px;line-height:1.55;color:var(--sp-ink-2) !important;}
.bm-pc b{flex:0 0 16px;font-size:15px;line-height:1.5;}
.bm-pc.plus b{color:var(--sp-green) !important;}
.bm-pc.minus b{color:var(--sp-ink-4) !important;}
.bm-actions .bm-btn{width:100%;}

/* Die Etiketten im Datenblatt trugen eine eigene gruene Variante fuer
   "sehr verbreitet" - eine Bedeutung mehr, die niemand gesucht hat. */
.bm-sheet .bm-badge,.bm-sheet .bm-badge.cc,.bm-sheet .bm-badge[class*="a-"]{
  background:var(--sp-s2) !important;border:1px solid var(--sp-line-strong) !important;
  color:var(--sp-ink-2) !important;min-height:32px;display:inline-flex;align-items:center;
  padding:0 12px !important;border-radius:999px !important;
}
.bm-sheet .bm-meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px !important;}
.bm-sheet .bm-avail{margin:0 !important;}

/* ═══════════════════════════════════════════════════════════════════════
   Aus dem Audit vom 16.09.2026
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Auswahlliste war 126px breit, ihr Rahmen aber auf 104px begrenzt.
   Auf einem 390px-Telefon - der haeufigsten Breite - ragte sie 8px unter
   den Menue-Knopf: ein Tipp auf dessen linke Kante klappte die Sprachliste
   auf statt das Menue. Gemessen, nicht vermutet. */
.lang-select-wrap{overflow:hidden;}
.lang-select-wrap select{max-width:100% !important;width:100% !important;}

/* Unter jedem Fahrzeugnamen klaffte ein Loch von 35px: die alte Regel
   height:2.5em stammt aus der Zeit, als der Name 14px gross war. Mit 26px
   reserviert dieselbe Regel 65px fuer eine Zeile von 30px. Die Begrenzung
   auf zwei Zeilen macht schon -webkit-line-clamp. */
.bm-grid .bm-name,.bm-card .bm-name{height:auto !important;}
/* line-height:0.98 ist enger als der Zeilenkasten der Schrift: mit Archivo
   und mit thailaendischer Schrift schneidet overflow:hidden unten ab.
   Gemessen: Inhalt 28px in einem Kasten von 25px. */
.bm-grid .bm-name,.bm-card .bm-name{line-height:1.1 !important;}

/* Antippbares unter 34px: die drei Links waren 14 bis 19px hoch. */
.sr-consent-link,#srConsentMore{
  min-height:44px !important;display:inline-flex !important;align-items:center;
}
.site-link,.signin-alt,.back-link{
  min-height:44px;display:inline-flex;align-items:center;
}
@media(max-width:900px){
  .nav-link{min-height:44px;display:inline-flex;align-items:center;}
}
.datenschutz-marke,.legal .brand,body > header .brand{min-height:44px;align-items:center;}