/* ═══════════════════════════════════════════════════════════════════════
   Yui's Spidernet — Bedienelemente nach Mockup 02
   Wird als LETZTES Stylesheet geladen. Reine Optik, keine Funktion.
   Zum Zurueckdrehen genuegt es, die eine <link>-Zeile zu entfernen.
   ───────────────────────────────────────────────────────────────────────
   AUS DEM MOCKUP GEMESSEN (Bild 780px breit, also 2x):

     Knopftext "RENT NOW"          Versalhoehe 20px -> 14.5px
     Chip      "MOTORBIKE"         Versalhoehe 17px -> 12.5px
     Kicker    "FLEET · KOH SAMUI" Versalhoehe 15px -> 10.5px
     Titel     "PICK YOUR BIKE"    Versalhoehe 46px -> 33px
     Knopf "RENT NOW": 638x88px, Eckenradius 27px  ->  44px hoch, r=14px

   WELCHE SCHRIFT? Ueber die Rundung des O entschieden:
     im Mockup ist O = 0,94 x Versalhoehe
     Barlow Condensed schafft nur 0,55   -> kann es nicht sein
     Archivo liegt bei 1,01              -> ist es
   Dasselbe gilt fuer Kicker und Chips. Nur die Ueberschriften sind
   kondensiert: "PICK YOUR BIKE" hat O = 0,59 -> Barlow Condensed.

   DIE REGEL:
     Barlow Condensed  ->  Ueberschriften, Modellnamen, grosse Preiszahlen
     Archivo           ->  alles, was man bedienen kann
     Aktionsknopf      ->  abgerundetes Rechteck, 14px
     Chip, Abzeichen, runder Symbolknopf, Eingabezeile -> bleibt Pille
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --r-btn:14px;
  --yui-btn:"Archivo","Noto Sans Thai","Archivo Ersatz","Barlow",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* ── 1. Alles Bedienbare bekommt Archivo ───────────────────────────────
   Nur Schrift. Groesse bleibt, wo sie nicht ausdruecklich unten steht -
   so kann keine Zeile durch diese Datei allein zu lang werden.
   Archivo laeuft breiter als Barlow Condensed, deshalb faellt der
   Buchstabenabstand von .08em auf .01em zurueck.                        */
button,
input[type="submit"], input[type="button"],
.btn, .bm-btn, .cta-btn, .deal-btn, .booking-btn, .save-btn, .login-btn,
.primary-btn, .btn-primary, .sb-cta, .bm-soon-btn, .bm-fmore-btn,
.footer-btn-become, .footer-btn-login, .notify-banner-enable,
.upload-btn, .bullet-add-btn, .qr-btn,
.drawer-nav-link, .drawer-profile-btn, .signout-pill,
.veh-add-btn, .help-cancel-btn, .notify-test-btn, .clear-date-btn,
.refresh-btn, .call-btn, .promo-copy-btn, .promo-paid-btn, .notify-btn,
#chatSend, #promoApplyBtn, #tillLink, #logoutBtn, #refreshBtn,
#addPromoBtn, #helpFab, #waHelpFab,
.chat-fab, .filter-jump-fab, .nav-drawer-link, .install-sheet .close-btn,
#contact-top .wa-btn, .wa-cta .wa-title, .sr-consent-btn, .sr-consent-reopen,
.req-actions button, .pf-savebar .save-btn, .bar .btn.red, .btn.sm{
  font-family:var(--yui-btn) !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:uppercase;
}

/* Der Haupt-Aktionsknopf ist im Mockup deutlich fetter als ein Chip. */
.bm-btn, .bm-grid .bm-btn, .cta-btn, .cta-btn.coral, .deal-btn,
.booking-btn, .save-btn, .login-btn, .primary-btn, .btn-primary, .sb-cta,
.footer-btn-become, .notify-banner-enable, .bm-soon-btn,
.veh-add-btn, .bar .btn.red, .btn.red, button[type="submit"],
#promoApplyBtn, #contact-top .wa-btn, .sr-consent-btn{
  font-weight:800 !important;
}

/* Groessen, die im Mockup nachgemessen sind ───────────────────────────── */
.bm-btn, .bm-grid .bm-btn{ font-size:14.5px !important; }
.bm-fmore-btn{ font-size:13px !important; }
.bm-chip{ font-size:12.5px !important; }
.drawer-chip{ font-size:12px !important; }
.bm-kicker, .bm-grid .bm-kicker{ font-size:11.5px !important; letter-spacing:.14em !important; }

/* ── 2. Chips, Abzeichen und Etiketten: Archivo, aber Pille bleibt ───── */
.kicker, .sr-eyebrow, .bm-chip, .drawer-chip, .top-tab, .tag, .chip,
.pf-chip, .bm-cc, .bm-brand-count, .bm-avail, .bm-grid .bm-avail,
.rs-label, .lbl, .status-badge, .req-status, .item-out-badge, .filter-btn,
.booking-status, .promo-code, .summary-chip .lbl{
  font-family:var(--yui-btn) !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
}
.kicker, .sr-eyebrow, .bm-grid .bm-kicker{ font-weight:600 !important; }

/* ── 3. Form: Aktionsknopf = abgerundetes Rechteck ─────────────────────
   Steht nach den Pillen-Regeln aus brand.css und schlaegt sie deshalb.  */
.bm-btn, .bm-grid .bm-btn, .cta-btn, .cta-btn.coral, .deal-btn,
.booking-btn, .save-btn, .login-btn, .primary-btn, .btn-primary, .sb-cta,
.footer-btn-become, .footer-btn-login, .notify-banner-enable,
.bm-soon-btn, .bm-fmore-btn, .cancel-btn, .cancel-btn.yes,
.upload-btn, .bullet-add-btn, .reach-row .bullet-add-btn,
.veh-add-btn, .help-cancel-btn, .veh-form-actions .help-cancel-btn,
.notify-test-btn, .clear-date-btn, .refresh-btn, .call-btn,
.promo-copy-btn, .promo-paid-btn, .notify-btn, .req-actions button,
.drawer-profile-btn, .signout-pill, .install-sheet .close-btn,
.sr-consent-btn, .sr-consent-reopen,
#promoApplyBtn, #tillLink, #logoutBtn, #refreshBtn, #addPromoBtn,
#contact-top .wa-btn, button[type="submit"], input[type="submit"],
/* Diese vier stehen in den Kontrollblaettern mit hoeherer Auszeichnung
   (.bar .btn.red, .pf-savebar .save-btn, .req-actions button) - deshalb
   muessen sie hier genauso genau benannt werden, sonst gewinnt die 16px. */
.btn, .btn.red, .btn.sm, .bar .btn.red,
.pf-savebar .save-btn, .req-actions button, #pwSaveBtn{
  border-radius:var(--r-btn) !important;
}

/* ── 4. Was ausdruecklich rund bleibt ──────────────────────────────────
   Rund, weil es rund GEMEINT ist: Symbolknopf, schwebender Knopf,
   Eingabezeile, Fortschrittsbalken, Abzeichen, Chips.
   Steht zuletzt und gewinnt damit gegen Abschnitt 3.                    */
#chatSend, #chatInput,
.chat-fab, .chat-fab img, .filter-jump-fab, .filter-jump-fab img,
.bm-chip, .drawer-chip, .chip, .pf-chip, .tag, .filter-btn,
.qr-btn, .bm-cc, .bm-brand-count, .status-badge, .req-status,
.item-out-badge, .booking-status, .bm-avail, .bm-grid .bm-avail,
.events-count, .pay-filter, .fj-icon, .maps-check,
.bm-bar, .bm-bar-thumb, .yui-progress, .yui-progress__bar,
.nav-toggle, .nav-drawer-close, .grp i,
.google-signin-slot, .google-signin-slot > div, .google-signin-slot iframe{
  border-radius:999px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Nachtrag aus dem Handoff-Ordner (README + Bilder 01-13)
   ───────────────────────────────────────────────────────────────────────
   Gemessen an den Vorlagen, nicht geschaetzt:
     01-guest-hero   "Find my bike"  112x688px @2x -> 56px hoch, Radius 16
     02-guest-fleet  "Rent now"       88x638px @2x -> 44px hoch, Radius 14
     12-dashboard    "Open till"     102x488px @2x -> 51px hoch, Radius 14
     12-dashboard    Suchfeld         87px hoch @2x -> 44px, volle Pille
   Der Hero-Knopf ist also 2px runder als die Knoepfe in den Karten.
   ═══════════════════════════════════════════════════════════════════════ */

/* Der grosse Knopf im Hero */
.wa-btn.wa-link, .book .wa-btn{ border-radius:16px !important; }

/* Google-Anmeldung: laut Handoff 16px wie alles andere, nicht rund. */
.google-signin-slot, .google-signin-slot > div, .google-signin-slot iframe{
  border-radius:16px !important;
}

/* Sucheingaben sind laut Handoff Pillen ("--r-pill: ... Inputs in Suchzeilen"). */
.search-row input, #orderSearchInput{ border-radius:999px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Bewegung — dezent
   ───────────────────────────────────────────────────────────────────────
   animations.js bringt schon eine ganze Bibliothek mit (Einblenden,
   Ladekacheln, hochzaehlende Zahlen, gruener Ring bei Erfolg). Was dort
   fehlt, ist die einfachste Rueckmeldung von allen: dass ein Knopf
   nachgibt, wenn man ihn drueckt. Die Liste dort umfasst sechs Klassen
   aus dem alten Entwurf (.cta-btn, .wa-btn, .bm-btn, .sb-cta, .book-btn,
   .maps-btn) - im Control Center und in der Kasse reagiert bisher gar
   nichts. Genau das kommt hier dazu, fuer alles Antippbare.

   Dezent heisst hier: 0,11 s beim Druecken, 0,16 s beim Ueberfahren,
   Groessenaenderung 2,5 %. Wer im Betriebssystem weniger Bewegung
   eingestellt hat, bekommt nichts davon - der letzte Block schaltet alles
   ab. Nichts wird durch eine Animation unsichtbar; es geht nur um
   Rueckmeldung, nie um Sichtbarkeit.
   ═══════════════════════════════════════════════════════════════════════ */

button, [role="button"], input[type="submit"], input[type="button"],
.btn, .bm-btn, .cta-btn, .deal-btn, .booking-btn, .save-btn, .login-btn,
.primary-btn, .btn-primary, .sb-cta, .bm-soon-btn, .bm-fmore-btn,
.footer-btn-become, .footer-btn-login, .notify-banner-enable,
.upload-btn, .bullet-add-btn, .qr-btn, .filter-btn, .top-tab,
.bm-chip, .drawer-chip, .chip, .pf-chip, .drawer-nav-link,
.drawer-profile-btn, .signout-pill, .veh-add-btn, .help-cancel-btn,
.notify-test-btn, .clear-date-btn, .refresh-btn, .call-btn,
.promo-copy-btn, .promo-paid-btn, .notify-btn, .req-actions button,
.map-cta, .cal-cta, .bike-cta, .drawer-brand, .hdr-menu > button,
a#tillLink.till-cta, #hdrMenuBtn, #notifyBtn, #promoApplyBtn,
#logoutBtn, #refreshBtn, #addPromoBtn, #chatSend,
.wa-fab, header a, header select, .pick button, .c-back, .c-edit{
  transition:transform .11s cubic-bezier(.34,1.2,.64,1),
             background-color .16s ease, border-color .16s ease,
             color .16s ease, box-shadow .16s ease;
}

button:active, [role="button"]:active, input[type="submit"]:active,
.btn:active, .bm-btn:active, .cta-btn:active, .deal-btn:active,
.booking-btn:active, .save-btn:active, .login-btn:active,
.primary-btn:active, .btn-primary:active, .sb-cta:active,
.bm-soon-btn:active, .bm-fmore-btn:active, .notify-banner-enable:active,
.upload-btn:active, .bullet-add-btn:active, .qr-btn:active,
.filter-btn:active, .top-tab:active, .bm-chip:active, .drawer-chip:active,
.chip:active, .pf-chip:active, .drawer-nav-link:active,
.drawer-profile-btn:active, .signout-pill:active, .veh-add-btn:active,
.help-cancel-btn:active, .notify-test-btn:active, .clear-date-btn:active,
.refresh-btn:active, .call-btn:active, .promo-copy-btn:active,
.promo-paid-btn:active, .notify-btn:active, .req-actions button:active,
.map-cta:active, .cal-cta:active, .bike-cta:active, .drawer-brand:active,
.hdr-menu > button:active,
a#tillLink.till-cta:active, #hdrMenuBtn:active, #notifyBtn:active,
#promoApplyBtn:active, #logoutBtn:active, #refreshBtn:active,
#addPromoBtn:active, .wa-fab:active, header a:active,
header select:active, .pick button:active, .c-back:active, .c-edit:active{
  transform:scale(.975);
}

/* Ein abgeschalteter Knopf gibt nicht nach - sonst verspricht er etwas,
   das er nicht einloest. */
button:disabled:active, .btn:disabled:active,
.req-actions button:disabled:active, [aria-disabled="true"]:active{
  transform:none !important;
}

/* Nur wo es wirklich einen Zeiger gibt. Auf dem Telefon bleibt ein
   :hover sonst nach dem Tippen kleben. */
@media (hover:hover) and (pointer:fine){
  .bm-btn:hover, .cta-btn:hover, .deal-btn:hover, .booking-btn:hover,
  .save-btn:hover, .primary-btn:hover, .btn-primary:hover, .sb-cta:hover,
  .notify-banner-enable:hover, .veh-add-btn:hover, .btn.red:hover,
  a#tillLink.till-cta:hover{
    transform:translateY(-1px);
  }
}

/* Die Karte hebt sich beim Ueberfahren leicht an - sie ist anklickbar. */
@media (hover:hover) and (pointer:fine){
  .bm-card{transition:transform .18s ease, border-color .18s ease;}
  .bm-card:hover{transform:translateY(-2px);}
}

/* Das Ueberlaufmenue faehrt auf, statt zu erscheinen. */
@keyframes yui-menu-auf{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.hdr-menu:not([hidden]){animation:yui-menu-auf .16s cubic-bezier(.22,.7,.3,1) both;transform-origin:top right;}

/* Der Filterwechsel gleitet, statt umzuspringen. */
.filter-btn, .top-tab, .bm-chip, .pf-chip{
  transition:transform .11s cubic-bezier(.34,1.2,.64,1),
             background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine.
   Die Liste ist bewusst breit: animations.js laesst .wa-btn und .bm-btn
   auch bei reduzierter Bewegung zusammenzucken - gemessen mit
   prefers-reduced-motion:reduce, der Knopf ging trotzdem auf 0.96.
   Dieses Blatt laedt zuletzt und schaltet es hier mit ab. */
@media (prefers-reduced-motion: reduce){
  a, button, [role="button"], input, select, textarea,
  .btn, .bm-btn, .wa-btn, .cta-btn, .sb-cta, .book-btn, .maps-btn,
  .filter-btn, .top-tab, .bm-chip, .drawer-chip, .chip, .pf-chip,
  .bm-card, .wa-fab, .rail-nav, .req-actions button,
  a#tillLink.till-cta, #hdrMenuBtn, #notifyBtn, #chatSend{
    transition:none !important;
  }
  a:active, button:active, [role="button"]:active, input:active, select:active,
  .btn:active, .bm-btn:active, .wa-btn:active, .cta-btn:active, .sb-cta:active,
  .book-btn:active, .maps-btn:active, .filter-btn:active, .top-tab:active,
  .bm-chip:active, .drawer-chip:active, .chip:active, .pf-chip:active,
  .bm-card:active, .wa-fab:active, .rail-nav:active, .req-actions button:active,
  a#tillLink.till-cta:active, #hdrMenuBtn:active, #notifyBtn:active,
  a:hover, button:hover, .bm-card:hover, .bm-btn:hover, .wa-btn:hover,
  .cta-btn:hover, a#tillLink.till-cta:hover{
    transform:none !important;
  }
  .hdr-menu:not([hidden]){animation:none !important;}
}

/* Der Druck muss das Ueberfahren schlagen. Beide Regeln sind gleich stark;
   gewonnen haette sonst die, die weiter unten steht - und das war das
   Ueberfahren. Gemessen am Knopf "New rental" in der Kasse: beim Druecken
   blieb er auf translateY(-1px) stehen, statt nachzugeben. */
@media (hover:hover) and (pointer:fine){
  .bm-btn:active, .cta-btn:active, .deal-btn:active, .booking-btn:active,
  .save-btn:active, .primary-btn:active, .btn-primary:active, .sb-cta:active,
  .notify-banner-enable:active, .veh-add-btn:active, .btn.red:active,
  .btn:active, a#tillLink.till-cta:active, .bm-card:active{
    transform:scale(.975);
  }
}