/* Visual identity: https://www.yuasa.com/de/, observed 01.10.2026.
   Logo and Roboto are served locally, including on the login page. */
@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto-Regular.woff2') format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto-Bold.woff2') format('woff2');
  font-style: normal; font-weight: 700; font-display: swap;
}
:root {
  --red: #e20714; --red-dark: #cb1628; --ink: #1a1818;
  --muted: #666; --line: #e3e3e3; --canvas: #f8f8f8; --nav: #1a1818;
}
body { font-family: Roboto, Arial, sans-serif; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.5px; }
h1 { font-size: 36px; }
.regular { font-weight: 400; }
.eyebrow { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--red); }

.sidebar { padding: 28px 18px; border-right: 1px solid #302d2d; color: #ddd; }
.sidebar .brand { margin: 0 12px 38px; }
.brand { font-style: normal; }
.brand img { display: block; width: 169px; height: auto; max-width: 100%; }
.brand span { font-family: Roboto, Arial, sans-serif; font-size: 10px; letter-spacing: 2.6px; color: #c9c9c9; margin-top: 15px; }
.nav-label { color: #a9a9a9; font-size: 10px; font-weight: 700; }
.sidebar nav { gap: 5px; }
.sidebar nav a { border-radius: 4px; font-weight: 700; padding: 13px 12px; gap: 11px; }
.sidebar nav a:hover { background: #302d2d; color: #fff; }
.sidebar nav a.active { background: var(--red); color: #fff; border: 0; padding-left: 12px; }
.nav-icon { flex: 0 0 20px; }
.confidential { color: #aaa; border-color: #3d3939; }
.account { color: #fff; }
.account small { color: #aaa; }
.avatar { background: #3d3939; }
.logout { color: #ccc; }
.logout:hover { color: #fff; text-decoration: underline; }
.topbar { border-top: 3px solid var(--red); color: #666; }
.topbar strong { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; color: var(--ink); }
.topbar b { color: #b9b9b9; }
.scope { color: #666; }

.button { border-radius: 4px; border-color: #cfcfcf; font-weight: 700; }
.button:hover { background: #f4f4f4; border-color: #aaa; }
.button.primary, .detail-jump { background: var(--red); border-color: var(--red); color: #fff; }
.button.primary:hover, .detail-jump:hover { background: var(--red-dark); border-color: var(--red-dark); }
.panel, .stats, .battery-card { border-radius: 4px; }
input, select { border-color: #ccc; border-radius: 4px; }
input::placeholder { color: #777; }
input:focus, select:focus { outline-color: #e2071440; border-color: var(--red); }
.notice { border-radius: 4px; }
.stats strong { font-weight: 700; }
.stats span, .stats small, .stats i { color: #666; }
.brand-tabs a { color: #666; font-weight: 700; }
.brand-tabs span, .offer-count { background: #f0f0f0; color: #555; border-radius: 3px; }
thead { background: #f3f3f3; color: #555; }
th { font-weight: 700; }
td { border-color: #ededed; }
tbody tr:hover { background: #fafafa; }
.table-caption, .table-caption b, .pagination, .back, .footnote { color: #666; }
.price-table .description, .brand-tag, .person span, .person details { color: #666; }
.brand-tag.yuasa { color: var(--red); }
.article, .compare { font-weight: 700; }
.schedule-card { background: #efefef; border-color: var(--red); border-radius: 4px; }
.schedule-card .eyebrow { color: var(--red); }
.schedule-card p, .schedule-card small { color: #666; }

.catalog-intro { background: var(--nav); border-radius: 4px; border-bottom: 4px solid var(--red); padding: 28px; }
.catalog-intro .eyebrow { color: #fff; }
.catalog-intro h2 { font-size: 24px; font-weight: 700; }
.catalog-intro p, .catalog-totals span { color: #d0d0d0; }
.catalog-totals strong { font-weight: 700; }
.battery-card:hover { border-color: var(--red); box-shadow: 0 3px 14px #1a181808; }
.origin-label { color: #666; background: #f3f3f3; }
.card-description, .battery-price small, .battery-price>span,
.comparison-price small, .detail-price small { color: #666; }
.battery-price strong, .comparison-price strong, .detail-price strong { color: var(--ink); font-weight: 700; }
.card-bottom { background: #f8f8f8; border-color: var(--line); color: #666; }
.spec-chips>span { background: #f3f3f3; color: #666; border-radius: 3px; }
.spec-chips b { color: var(--ink); font-weight: 700; }
.technical-grid dt { color: #666; }
.technical-grid dd { font-weight: 700; }
.cross-explanation, .reference-evidence small, .comparison-footer>span { color: #666; }
.badge.reference { background: #efefef; color: #444; }
.photo-placeholder { background: #f8f8f8; color: #666; }
.photo-placeholder>span { color: #aaa; }
.gallery-main>span { color: #555; border-radius: 3px; }
.gallery-main:hover>span { border-color: var(--red); color: var(--red); }
.image-credit { color: #777; }

.login-intro { background: var(--nav); border-bottom: 8px solid var(--red); }
.login-intro .brand img { width: 205px; }

@media(max-width:1150px) {
  .sidebar { padding: 28px 12px; }
  .sidebar .brand { margin-inline: 8px; }
  .sidebar nav a { padding: 12px 9px; gap: 8px; font-size: 13px; }
  .sidebar nav a.active { padding-left: 9px; }
}
@media(max-width:780px) {
  h1 { font-size: 30px; }
  .sidebar { padding: 20px 18px 16px; border: 0; }
  .sidebar .brand { margin: 0 0 22px; }
  .brand img { width: 130px; }
  .sidebar .brand span { font-size: 8px; letter-spacing: 2px; margin-top: 10px; }
  .sidebar-bottom { top: 25px; max-width: 44%; }
  .account span { overflow-wrap: anywhere; }
  .sidebar nav { gap: 6px; }
  .sidebar nav a, .sidebar nav a.active { padding: 10px; font-size: 12px; border: 0; }
  .nav-icon { width: 17px; height: 17px; flex-basis: 17px; }
  .topbar { height: 47px; }
  .catalog-intro { padding: 24px; }
  .catalog-intro h2 { font-size: 22px; }
  .login-layout { grid-template-rows: auto 1fr; }
  .login-intro .brand img { width: 160px; }
}
.catalog-intro.catalog-summary { grid-template-columns: 1fr; }

.price-table .price-photo-cell { width: 90px; padding: 12px 10px 12px 18px; }
.price-thumbnail { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: #bbb; font-size: 28px; }
.price-thumbnail img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.price-thumbnail:hover { border-color: var(--red); }