/* Motorrad Adermayer — zusammengeführtes Design-System-CSS (für die PHP-Seiten). */
/* ============================================================
   Motorrad Adermayer — Webfonts

   PRIMARY BRAND FONT: **Sharp Grotesk** (Sharp Type)
   https://www.sharptype.co/typefaces/sharp-grotesk
   Self-hosted from the licensed files supplied by the client.
   Width/weight mapping in use:
     - Display  → Sharp Grotesk Black No.10 (heavy, compressed) + its italic
     - Heading  → Sharp Grotesk Bold  No.15
     - Body/UI  → Sharp Grotesk Book  No.15 (+ Book No.20 for large lead text)

   Licensed full retail cut (Sharp Type), converted to .woff2 for the web.
   Anton / Oswald / Barlow remain in the fallback stack (tokens/typography.css)
   so text still renders if a face fails to load.
   ============================================================ */

/* ---- Display: Sharp Grotesk Black No.10 ---- */
@font-face {
  font-family: "Sharp Grotesk Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-Black10.woff2") format("woff2");
}
@font-face {
  font-family: "Sharp Grotesk Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-BlackItalic10.woff2") format("woff2");
}

/* ---- Text family: Sharp Grotesk No.15 (Book + Bold) ---- */
@font-face {
  font-family: "Sharp Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-Book15.woff2") format("woff2");
}
@font-face {
  font-family: "Sharp Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-Book15.woff2") format("woff2");
}
@font-face {
  font-family: "Sharp Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-Bold15.woff2") format("woff2");
}
@font-face {
  font-family: "Sharp Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-Bold15.woff2") format("woff2");
}

/* ---- Large lead / subhead cut: Sharp Grotesk Book No.20 (wider) ---- */
@font-face {
  font-family: "Sharp Grotesk Wide";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-Book20.woff2") format("woff2");
}

/* ---- Poster display: Sharp Grotesk Bold No.20 (wide + bold) ----
   The signature hero cut — "WIR GEBEN GAS." lettering. */
@font-face {
  font-family: "Sharp Grotesk Poster";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/SharpGrotesk-Bold20.woff2") format("woff2");
}

/* ============================================================
   Fallback faces (used only if Sharp Grotesk fails to load)
   ============================================================ */

/* Anton — display fallback */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-400.woff2") format("woff2");
}

/* Oswald — heading fallback */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/oswald-300.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/oswald-400.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/oswald-500.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/oswald-600.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/oswald-700.woff2") format("woff2");
}

/* Barlow — body fallback */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-700.woff2") format("woff2");
}
/* ============================================================
   Motorrad Adermayer — Color tokens
   Core red + navy reflect the CURRENT brand application (key visual):
   pure red #E7031A + indigo navy #171878. Older stationery vectors
   used a warmer red/darker navy; the current values win.
   ============================================================ */
:root {
  /* --- Brand core (raw) --- */
  --ma-red: #E7031A;        /* brand red — primary (current key visual) */
  --ma-red-600: #C80217;    /* pressed / darker red */
  --ma-red-700: #A00213;    /* deepest red */
  --ma-red-300: #F4576A;    /* tint */
  --ma-red-100: #FCDBDF;    /* wash */

  --ma-navy: #171878;       /* indigo navy — secondary (current key visual) */
  --ma-navy-700: #0F1057;   /* darker navy */
  --ma-navy-300: #5A5CB0;   /* muted navy */
  --ma-navy-100: #E1E1F2;   /* navy wash */

  /* --- Neutrals / surfaces --- */
  --ma-black: #101114;      /* near-black — mailer backgrounds */
  --ma-ink: #2C2E35;        /* body ink, rgb(44,46,53) */
  --ma-ink-600: #505A5B;    /* secondary ink, rgb(80,90,91) */
  --ma-ink-400: #8A9092;    /* tertiary / muted */
  --ma-line: #DCDAD1;       /* hairline on paper */
  --ma-line-dark: #2A2C33;  /* hairline on dark */
  --ma-paper: #FFFEF8;      /* off-white paper, rgb(255,254,248) */
  --ma-cream: #F8F5ED;      /* warm cream panel, rgb(248,245,237) */
  --ma-white: #FFFFFF;

  /* --- Secondary graphic accents (used sparingly, from mailer graphics) --- */
  --ma-cyan: #52D3F7;       /* rgb(82,211,247) */
  --ma-green: #36B64B;      /* rgb(54,182,75) */

  /* --- Brand gradient (from the reverse of the letterhead / key visual) --- */
  --ma-indigo: var(--ma-navy);      /* alias — gradient navy endpoint #171878 */
  --ma-red-pure: var(--ma-red);     /* alias — gradient red endpoint #E7031A */
  /* Signature diagonal: indigo (top-left) → red (bottom-right) */
  --ma-gradient-brand: linear-gradient(135deg, #171878 0%, #7E0B45 52%, #E7031A 100%); /* @kind color */
  /* Mark treatment: red (top) → indigo (bottom) */
  --ma-gradient-mark: linear-gradient(155deg, #E7031A 0%, #171878 100%); /* @kind color */

  /* ---------- Semantic aliases ---------- */
  --color-primary: var(--ma-red);
  --color-primary-hover: var(--ma-red-600);
  --color-primary-active: var(--ma-red-700);
  --color-on-primary: var(--ma-paper);

  --color-secondary: var(--ma-navy);
  --color-secondary-hover: var(--ma-navy-700);
  --color-on-secondary: var(--ma-paper);

  /* Text */
  --text-strong: var(--ma-ink);
  --text-body: var(--ma-ink);
  --text-muted: var(--ma-ink-600);
  --text-subtle: var(--ma-ink-400);
  --text-inverse: var(--ma-paper);
  --text-brand: var(--ma-red);
  --text-link: var(--ma-red);
  --text-link-hover: var(--ma-red-700);

  /* Surfaces */
  --surface-page: var(--ma-paper);
  --surface-card: var(--ma-white);
  --surface-panel: var(--ma-cream);
  --surface-inverse: var(--ma-black);
  --surface-inverse-2: var(--ma-navy);

  /* Lines / borders */
  --border-default: var(--ma-line);
  --border-strong: var(--ma-ink);
  --border-inverse: var(--ma-line-dark);

  /* Status */
  --color-success: var(--ma-green);
  --color-info: var(--ma-cyan);
  --color-danger: var(--ma-red);
  --color-warning: #E8A100;

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--ma-red) 45%, transparent);
}
/* ============================================================
   Motorrad Adermayer — Typography tokens
   Display: Sharp Grotesk Black No.10 (heavy compressed).
   Headings/labels: Sharp Grotesk Bold No.15. Body/UI: Sharp Grotesk Book.
   Uppercase + wide tracking for kickers/labels is a core brand mannerism
   (see "ADERMAYER", "WIR GEBEN GAS").
   ============================================================ */
:root {
  /* Families */
  /* PRIMARY BRAND FONT: Sharp Grotesk (Sharp Type) — self-hosted, see tokens/fonts.css.
     Anton/Oswald/Barlow stay in the stack as load-failure fallbacks only. */
  --font-display: "Sharp Grotesk Display", "Anton", "Arial Narrow", sans-serif;
  --font-heading: "Sharp Grotesk", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Sharp Grotesk", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-lead: "Sharp Grotesk Wide", "Sharp Grotesk", "Barlow", system-ui, sans-serif; /* @kind other */
  --font-poster: "Sharp Grotesk Poster", "Sharp Grotesk", "Arial", sans-serif; /* @kind other */
  --font-mono: "Sharp Grotesk", ui-monospace, monospace;

  /* Weights */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */

  /* Type scale (rem, 16px base) */
  --fs-display-2xl: 6rem;     /* 96px — hero statements */
  --fs-display-xl: 4.5rem;    /* 72px */
  --fs-display-lg: 3.5rem;    /* 56px */
  --fs-h1: 2.75rem;           /* 44px */
  --fs-h2: 2.125rem;          /* 34px */
  --fs-h3: 1.5rem;            /* 24px */
  --fs-h4: 1.25rem;           /* 20px */
  --fs-lg: 1.125rem;          /* 18px */
  --fs-base: 1rem;            /* 16px */
  --fs-sm: 0.875rem;          /* 14px */
  --fs-xs: 0.75rem;           /* 12px */
  --fs-2xs: 0.6875rem;        /* 11px — micro labels */

  /* Line heights */
  --lh-tight: 0.95; /* @kind other */
  --lh-snug: 1.1; /* @kind other */
  --lh-heading: 1.2; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-display: -0.01em; /* @kind other */
  --ls-tight: -0.005em; /* @kind other */
  --ls-normal: 0em; /* @kind other */
  --ls-label: 0.08em; /* @kind other */
  --ls-wide: 0.18em; /* @kind other */
}
/* ============================================================
   Motorrad Adermayer — Spacing, radii, shadows, motion
   Sharp/angular brand: small radii, hard edges dominate.
   Spacing on a 4px base grid.
   ============================================================ */
:root {
  /* Spacing (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radii — the mark is angular; keep corners crisp */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-default: var(--radius-sm);

  /* Border widths */
  --border-hair: 1px; /* @kind other */
  --border-thin: 1.5px; /* @kind other */
  --border-thick: 2px; /* @kind other */
  --border-heavy: 3px; /* @kind other */

  /* Shadows — restrained; brand favours flat + hard edges */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.08);
  --shadow-md: 0 4px 14px rgba(16, 17, 20, 0.10);
  --shadow-lg: 0 12px 32px rgba(16, 17, 20, 0.16);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  /* Signature "offset block" shadow (hard, no blur) */
  --shadow-block: 6px 6px 0 var(--ma-navy);
  --shadow-block-red: 6px 6px 0 var(--ma-red);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 340ms; /* @kind other */

  /* Layout */
  --container-max: 1200px; /* @kind other */
  --container-wide: 1400px; /* @kind other */
  --gutter: var(--space-5);
}
/* ============================================================
   Motorrad Adermayer — base element defaults
   Opt-in resets + brand typography applied to raw elements.
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use the condensed grotesque, tightly tracked */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); }

small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-bold); }

hr {
  border: 0;
  border-top: var(--border-hair) solid var(--border-default);
  margin: var(--space-6) 0;
}

/* Utility: brand display heading */
.ma-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Utility: eyebrow / kicker label */
.ma-kicker {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-brand);
}

/* Utility: outline display text (as on the mailer) */
.ma-outline {
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
}

::selection { background: var(--ma-red); color: var(--ma-paper); }
/* ============================================================
   Motorrad Adermayer — component styles
   Ported verbatim from the design-system component sources
   (components/**). Values are the source of truth — do not hardcode.
   ============================================================ */

/* ---- Button ---- */
.ma-btn{
  --_bg:var(--ma-red); --_fg:var(--ma-paper); --_bd:transparent; --_bgh:var(--ma-red-600); --_bga:var(--ma-red-700);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none;
  border:var(--border-thin) solid var(--_bd); border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ma-btn:hover{ background:var(--_bgh); }
.ma-btn:active{ background:var(--_bga); transform:translateY(1px); }
.ma-btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.ma-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

.ma-btn--sm{ font-size:var(--fs-xs); padding:8px 14px; }
.ma-btn--md{ font-size:var(--fs-sm); padding:11px 20px; }
.ma-btn--lg{ font-size:var(--fs-base); padding:15px 28px; letter-spacing:.08em; }
.ma-btn--block{ display:flex; width:100%; }

.ma-btn--secondary{ --_bg:var(--ma-navy); --_bgh:var(--ma-navy-700); --_bga:var(--ma-navy-700); --_fg:var(--ma-paper); }
.ma-btn--outline{ --_bg:transparent; --_fg:var(--ma-ink); --_bd:var(--ma-ink); --_bgh:var(--ma-ink); }
.ma-btn--outline:hover{ color:var(--ma-paper); }
.ma-btn--ghost{ --_bg:transparent; --_fg:var(--ma-red); --_bd:transparent; --_bgh:var(--ma-red-100); }
.ma-btn--ghost:hover{ color:var(--ma-red-700); }
.ma-btn--onDark{ --_bg:var(--ma-red); --_fg:var(--ma-paper); }
.ma-btn .ma-btn__icon{ display:inline-flex; width:1.1em; height:1.1em; }
.ma-btn .ma-btn__icon svg{ width:100%; height:100%; }

/* ---- IconButton ---- */
.ma-iconbtn{
  --_bg:transparent; --_fg:var(--ma-ink); --_bgh:var(--ma-red-100); --_fgh:var(--ma-red);
  display:inline-flex; align-items:center; justify-content:center;
  border:var(--border-thin) solid transparent; border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ma-iconbtn:hover{ background:var(--_bgh); color:var(--_fgh); }
.ma-iconbtn:active{ transform:translateY(1px); }
.ma-iconbtn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.ma-iconbtn[disabled]{ opacity:.4; cursor:not-allowed; }
.ma-iconbtn svg{ width:1.15em; height:1.15em; display:block; }
.ma-iconbtn--sm{ width:32px; height:32px; font-size:15px; }
.ma-iconbtn--md{ width:40px; height:40px; font-size:18px; }
.ma-iconbtn--lg{ width:48px; height:48px; font-size:21px; }
.ma-iconbtn--solid{ --_bg:var(--ma-red); --_fg:var(--ma-paper); --_bgh:var(--ma-red-600); --_fgh:var(--ma-paper); }
.ma-iconbtn--outline{ border-color:var(--ma-line); --_bgh:var(--ma-ink); --_fgh:var(--ma-paper); }

/* ---- Field (shared by Input + Select) ---- */
.ma-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-body); }
.ma-field__label{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-sm);
  text-transform:uppercase; letter-spacing:.06em; color:var(--ma-ink); }
.ma-field__req{ color:var(--ma-red); margin-left:2px; }
.ma-field__hint{ font-size:var(--fs-xs); color:var(--ma-ink-600); }
.ma-field--error .ma-field__hint{ color:var(--ma-red); }

/* ---- Input ---- */
.ma-field__wrap{ position:relative; display:flex; align-items:center; }
.ma-input{
  width:100%; font-family:var(--font-body); font-size:var(--fs-base); color:var(--ma-ink);
  background:var(--ma-white); border:var(--border-thin) solid var(--ma-line);
  border-radius:var(--radius-sm); padding:11px 14px; line-height:1.3;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ma-input::placeholder{ color:var(--ma-ink-400); }
.ma-input:hover{ border-color:var(--ma-ink-400); }
.ma-input:focus{ outline:none; border-color:var(--ma-red); box-shadow:var(--shadow-focus); }
.ma-input[disabled]{ background:var(--ma-cream); opacity:.7; cursor:not-allowed; }
.ma-field--error .ma-input{ border-color:var(--ma-red); }
.ma-field__wrap--pre .ma-input{ padding-left:38px; }
.ma-field__wrap--suf .ma-input{ padding-right:38px; }
.ma-field__addon{ position:absolute; display:inline-flex; align-items:center; color:var(--ma-ink-400); pointer-events:none; }
.ma-field__addon svg{ width:18px; height:18px; }
.ma-field__addon--pre{ left:12px; }
.ma-field__addon--suf{ right:12px; }

/* ---- Select ---- */
.ma-field--error .ma-select{ border-color:var(--ma-red); }
.ma-select__wrap{ position:relative; display:flex; align-items:center; }
.ma-select{
  width:100%; appearance:none; -webkit-appearance:none;
  font-family:var(--font-body); font-size:var(--fs-base); color:var(--ma-ink);
  background:var(--ma-white); border:var(--border-thin) solid var(--ma-line);
  border-radius:var(--radius-sm); padding:11px 38px 11px 14px; line-height:1.3; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ma-select:hover{ border-color:var(--ma-ink-400); }
.ma-select:focus{ outline:none; border-color:var(--ma-red); box-shadow:var(--shadow-focus); }
.ma-select[disabled]{ background:var(--ma-cream); opacity:.7; cursor:not-allowed; }
.ma-select__chevron{ position:absolute; right:12px; pointer-events:none; color:var(--ma-ink-600); display:inline-flex; }

/* ---- Checkbox ---- */
.ma-check{ display:inline-flex; align-items:flex-start; gap:10px; font-family:var(--font-body);
  font-size:var(--fs-base); color:var(--ma-ink); cursor:pointer; line-height:1.4; }
.ma-check input{ position:absolute; opacity:0; width:0; height:0; }
.ma-check__box{ flex:none; width:20px; height:20px; margin-top:1px; border:var(--border-thick) solid var(--ma-ink);
  border-radius:var(--radius-xs); background:var(--ma-white); display:inline-flex; align-items:center; justify-content:center;
  color:var(--ma-paper); transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.ma-check__box svg{ width:14px; height:14px; opacity:0; transform:scale(.6); transition:opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.ma-check input:checked + .ma-check__box{ background:var(--ma-red); border-color:var(--ma-red); }
.ma-check input:checked + .ma-check__box svg{ opacity:1; transform:scale(1); }
.ma-check input:focus-visible + .ma-check__box{ box-shadow:var(--shadow-focus); }
.ma-check:hover .ma-check__box{ border-color:var(--ma-red); }
.ma-check input:disabled ~ *{ opacity:.5; }
.ma-check--radio .ma-check__box{ border-radius:var(--radius-pill); }
.ma-check--radio input:checked + .ma-check__box{ background:var(--ma-white); }
.ma-check--radio input:checked + .ma-check__box .ma-check__dot{ background:var(--ma-red); }
.ma-check__dot{ width:10px; height:10px; border-radius:var(--radius-pill); background:transparent; }

/* ---- Switch ---- */
.ma-switch{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body);
  font-size:var(--fs-base); color:var(--ma-ink); cursor:pointer; }
.ma-switch input{ position:absolute; opacity:0; width:0; height:0; }
.ma-switch__track{ position:relative; flex:none; width:44px; height:24px; border-radius:var(--radius-pill);
  background:var(--ma-ink-400); transition:background var(--dur-base) var(--ease-out); }
.ma-switch__thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:var(--radius-pill);
  background:var(--ma-white); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out); }
.ma-switch input:checked + .ma-switch__track{ background:var(--ma-red); }
.ma-switch input:checked + .ma-switch__track .ma-switch__thumb{ transform:translateX(20px); }
.ma-switch input:focus-visible + .ma-switch__track{ box-shadow:var(--shadow-focus); }
.ma-switch input:disabled ~ *{ opacity:.5; }

/* ---- Card ---- */
.ma-card{ display:flex; flex-direction:column; background:var(--ma-white);
  border:var(--border-hair) solid var(--ma-line); border-radius:var(--radius-md); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.ma-card--flat{ box-shadow:none; }
.ma-card--raised{ border-color:transparent; box-shadow:var(--shadow-md); }
.ma-card--block{ border:var(--border-thick) solid var(--ma-ink); border-radius:var(--radius-sm); box-shadow:var(--shadow-block); }
.ma-card--interactive{ cursor:pointer; }
.ma-card--interactive:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent; }
.ma-card--block.ma-card--interactive:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ma-navy); }
.ma-card__media{ position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--ma-cream); }
.ma-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out); }
.ma-card--interactive:hover .ma-card__media img{ transform:scale(1.04); }
.ma-card__body{ display:flex; flex-direction:column; gap:8px; padding:var(--space-5); }
.ma-card__footer{ margin-top:auto; padding:var(--space-4) var(--space-5); border-top:var(--border-hair) solid var(--ma-line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ---- Badge ---- */
.ma-badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-heading);
  font-weight:600; font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--radius-xs); line-height:1; white-space:nowrap; }
.ma-badge svg{ width:12px; height:12px; }
.ma-badge--solid{ background:var(--ma-red); color:var(--ma-paper); }
.ma-badge--solid.ma-badge--navy{ background:var(--ma-navy); }
.ma-badge--solid.ma-badge--success{ background:var(--ma-green); }
.ma-badge--solid.ma-badge--info{ background:var(--ma-cyan); color:var(--ma-ink); }
.ma-badge--solid.ma-badge--neutral{ background:var(--ma-ink); }
.ma-badge--soft{ background:var(--ma-red-100); color:var(--ma-red-700); }
.ma-badge--soft.ma-badge--navy{ background:var(--ma-navy-100); color:var(--ma-navy); }
.ma-badge--soft.ma-badge--success{ background:#DEF3E1; color:#1E7A2E; }
.ma-badge--soft.ma-badge--info{ background:#D9F4FC; color:#0B6E8A; }
.ma-badge--soft.ma-badge--neutral{ background:var(--ma-cream); color:var(--ma-ink-600); }
.ma-badge--outline{ background:transparent; color:var(--ma-ink); border:var(--border-thin) solid currentColor; }
.ma-badge--outline.ma-badge--brand{ color:var(--ma-red); }

/* ---- Tag ---- */
.ma-tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body);
  font-weight:500; font-size:var(--fs-sm); color:var(--ma-ink);
  background:var(--ma-white); border:var(--border-thin) solid var(--ma-line);
  padding:6px 12px; border-radius:var(--radius-pill); line-height:1; cursor:default;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ma-tag--selectable{ cursor:pointer; }
.ma-tag--selectable:hover{ border-color:var(--ma-ink); }
.ma-tag--selected{ background:var(--ma-ink); border-color:var(--ma-ink); color:var(--ma-paper); }
.ma-tag--selected.ma-tag--brand{ background:var(--ma-red); border-color:var(--ma-red); }
.ma-tag__x{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:var(--radius-pill); cursor:pointer; opacity:.65; }
.ma-tag__x:hover{ opacity:1; background:rgba(0,0,0,.08); }
.ma-tag--selected .ma-tag__x:hover{ background:rgba(255,255,255,.2); }
.ma-tag__x svg{ width:11px; height:11px; }

/* ---- Alert ---- */
.ma-alert{ display:flex; gap:12px; align-items:flex-start; font-family:var(--font-body);
  padding:14px 16px; border-radius:var(--radius-sm); border-left:var(--border-heavy) solid var(--ma-red);
  background:var(--ma-red-100); color:var(--ma-ink); }
.ma-alert__icon{ flex:none; display:inline-flex; margin-top:1px; color:var(--ma-red); }
.ma-alert__icon svg{ width:20px; height:20px; }
.ma-alert__body{ flex:1; display:flex; flex-direction:column; gap:2px; }
.ma-alert__title{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:var(--fs-sm); }
.ma-alert__msg{ font-size:var(--fs-sm); color:var(--ma-ink-600); }
.ma-alert--info{ border-left-color:var(--ma-cyan); background:#E6F7FD; }
.ma-alert--info .ma-alert__icon{ color:#0B6E8A; }
.ma-alert--success{ border-left-color:var(--ma-green); background:#E4F5E7; }
.ma-alert--success .ma-alert__icon{ color:#1E7A2E; }
.ma-alert--warning{ border-left-color:var(--color-warning); background:#FBF0D6; }
.ma-alert--warning .ma-alert__icon{ color:#8A6100; }
/* ============================================================
   Motorrad Adermayer — website screen + chrome styles
   Ported verbatim from ui_kits/website/*.jsx (the design reference).
   ============================================================ */

.wb{ font-family:var(--font-body); color:var(--ma-ink); }

/* ---- Header ---- */
.wb-header{ position:sticky; top:0; z-index:20; background:var(--ma-paper); color:var(--ma-ink);
  border-bottom:1px solid var(--ma-line); }
.wb-header__in{ max-width:var(--container-wide); margin:0 auto; padding:0 28px; height:72px;
  display:flex; align-items:center; gap:28px; }
.wb-logo{ display:flex; align-items:center; height:34px; }
.wb-logo img{ height:34px; width:auto; display:block; }
.wb-nav{ display:flex; gap:26px; margin-left:8px; }
.wb-nav a{ font-family:var(--font-heading); font-weight:500; font-size:14px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ma-ink); cursor:pointer; opacity:.78; transition:opacity .12s, color .12s; }
.wb-nav a:hover, .wb-nav a.is-active{ opacity:1; color:var(--ma-red); }
.wb-header__cta{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.wb-phone{ display:flex; align-items:center; gap:7px; color:var(--ma-ink); font-weight:600; font-size:14px; }
.wb-phone svg{ color:var(--ma-red); }
.wb-burger{ display:none; }

/* ---- Footer ---- */
.wb-footer{ background:var(--ma-gradient-brand); color:var(--ma-paper); }
.wb-footer__in{ max-width:var(--container-wide); margin:0 auto; padding:56px 28px 28px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.wb-footer h4{ font-family:var(--font-heading); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ma-paper); margin:0 0 16px; }
.wb-footer a, .wb-footer p{ color:rgba(255,254,248,.8); font-size:14px; text-decoration:none; display:block; margin:0 0 9px; }
.wb-footer a{ cursor:pointer; }
.wb-footer a:hover{ color:var(--ma-paper); }
.wb-footer__logo img{ height:28px; margin-bottom:16px; }
.wb-footer__legal{ max-width:var(--container-wide); margin:0 auto; padding:18px 28px;
  border-top:1px solid rgba(255,254,248,.14); display:flex; justify-content:space-between; gap:20px;
  font-size:12px; color:rgba(255,254,248,.55); }
.wb-footer__legal a{ color:rgba(255,254,248,.55); }
.wb-footer__legal a:hover{ color:var(--ma-paper); }
.wb-footer__links{ white-space:nowrap; flex:0 0 auto; }
.wb-footer__links a{ display:inline; margin:0; }
.wb-social{ display:flex; gap:12px; }
.wb-social a{ display:inline-flex; margin:0; color:rgba(255,254,248,.8); }

/* ---- Branded photo placeholder ---- */
.wb-photo{ position:relative; overflow:hidden; background:
  repeating-linear-gradient(-38deg, #16171C 0 22px, #191A20 22px 44px); }
.wb-photo::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 78% 12%, rgba(255,46,23,.16), transparent 55%); }
.wb-photo__mark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.wb-photo__mark img{ width:34%; max-width:120px; opacity:.16; filter:grayscale(1) brightness(2.2); }
.wb-photo__tag{ position:absolute; left:12px; bottom:10px; z-index:2; font-family:var(--font-heading);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,254,248,.5); }
.wb-photo img.wb-photo__real{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

/* ============================================================
   Home
   ============================================================ */
.hm-hero{ position:relative; background:var(--ma-red); color:var(--ma-paper); overflow:hidden; }
.hm-hero__helmet{ position:absolute; z-index:1; right:-90px; top:50%; transform:translateY(-50%);
  width:760px; max-width:70%; pointer-events:none; }
.hm-hero__helmet img{ width:100%; height:auto; display:block; }
.hm-hero__bike{ position:absolute; z-index:2; right:1%; bottom:-2%; width:56%; height:92%;
  object-fit:contain; object-position:bottom right; filter:drop-shadow(0 18px 34px rgba(16,17,20,.4)); }
.hm-hero__in{ position:relative; z-index:3; max-width:var(--container-wide); margin:0 auto; padding:104px 28px 112px; }
.hm-kicker{ font-family:var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ma-paper); margin-bottom:20px; }
.hm-hero h1{ font-family:var(--font-poster); text-transform:uppercase; font-weight:700; letter-spacing:-.01em;
  line-height:.86; font-size:clamp(72px,10vw,148px); margin:0;
  color:transparent; -webkit-text-stroke:2.5px var(--ma-paper); }
.hm-hero__lead{ font-size:19px; color:rgba(255,254,248,.9); max-width:40ch; margin:24px 0 34px; }
.hm-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hm-band{ background:var(--ma-red); color:var(--ma-paper); }
.hm-band__in{ max-width:var(--container-wide); margin:0 auto; padding:22px 28px; display:flex; gap:48px; flex-wrap:wrap;
  align-items:center; justify-content:space-between; }
.hm-stat{ display:flex; align-items:baseline; gap:10px; }
.hm-stat b{ font-family:var(--font-display); font-size:34px; line-height:1; }
.hm-stat span{ font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.08em; font-size:13px; opacity:.9; }

.hm-sec{ max-width:var(--container-wide); margin:0 auto; padding:76px 28px; }
.hm-sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; }
.hm-sec__head h2{ font-family:var(--font-heading); font-weight:600; font-size:38px; margin:0; letter-spacing:-.01em; }
.hm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.hm-services{ background:var(--ma-cream); }
.hm-services__in{ max-width:var(--container-wide); margin:0 auto; padding:76px 28px; }
.hm-services h2{ font-family:var(--font-heading); font-weight:600; font-size:38px; margin:0 0 32px; letter-spacing:-.01em; }
.hm-svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hm-svc{ background:var(--ma-white); border:1px solid var(--ma-line); border-radius:var(--radius-md); padding:28px; }
.hm-svc__ic{ width:48px; height:48px; border-radius:var(--radius-sm); background:var(--ma-red); color:var(--ma-paper);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.hm-svc h3{ margin:0 0 8px; font-size:22px; }
.hm-svc p{ margin:0; color:var(--ma-ink-600); font-size:15px; }

/* ============================================================
   Inventory / Bestand
   ============================================================ */
.iv{ max-width:var(--container-wide); margin:0 auto; padding:40px 28px 76px; }
.iv__head{ margin-bottom:28px; }
.iv__head h1{ font-family:var(--font-heading); font-weight:600; font-size:40px; margin:0 0 6px; letter-spacing:-.01em; }
.iv__head p{ color:var(--ma-ink-600); margin:0; }
.iv__kicker{ color:var(--ma-red); font-family:var(--font-heading); font-weight:600; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:8px; }
.iv__layout{ display:grid; grid-template-columns:264px 1fr; gap:32px; align-items:start; }
.iv__filters{ position:sticky; top:96px; display:flex; flex-direction:column; gap:24px;
  background:var(--ma-white); border:1px solid var(--ma-line); border-radius:var(--radius-md); padding:22px; }
.iv__fgroup h4{ font-family:var(--font-heading); font-weight:600; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ma-ink); margin:0 0 12px; }
.iv__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.iv__toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; }
.iv__count{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size:13px; color:var(--ma-ink-600); }
.iv__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.iv__empty{ grid-column:1/-1; padding:60px; text-align:center; color:var(--ma-ink-400); }
.iv__card.is-hidden{ display:none; }
@media (max-width:1080px){ .iv__grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   Vehicle detail
   ============================================================ */
.vd{ max-width:var(--container-wide); margin:0 auto; padding:26px 28px 76px; }
.vd__back{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-heading); font-weight:500;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ma-ink-600); cursor:pointer; margin-bottom:22px; }
.vd__back:hover{ color:var(--ma-red); }
.vd__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:start; }
.vd__gallery{ display:flex; flex-direction:column; gap:12px; }
.vd__main{ aspect-ratio:16/10; border-radius:var(--radius-md); }
.vd__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.vd__thumb{ aspect-ratio:4/3; border-radius:var(--radius-sm); cursor:pointer; }
.vd__thumb.is-active{ outline:2px solid var(--ma-red); outline-offset:2px; }
.vd__panel{ position:sticky; top:96px; }
.vd__make{ font-family:var(--font-heading); font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ma-ink-400); }
.vd__panel h1{ font-family:var(--font-heading); font-weight:600; font-size:38px; margin:6px 0 14px; line-height:1; }
.vd__price{ font-family:var(--font-display); font-size:44px; color:var(--ma-red); line-height:1; margin:10px 0 2px; }
.vd__price small{ font-family:var(--font-body); font-size:13px; color:var(--ma-ink-400); }
.vd__taxline{ display:block; font-size:13px; color:var(--ma-ink-400); font-family:var(--font-body); }
.vd__desc{ margin:20px 0 0; color:var(--ma-ink-600); font-size:15px; line-height:1.6; }
.vd__desc p{ margin:0 0 12px; }
.vd__specs{ width:100%; border-collapse:collapse; margin:22px 0; }
.vd__specs tr{ border-bottom:1px solid var(--ma-line); }
.vd__specs td{ padding:11px 0; font-size:15px; }
.vd__specs td:first-child{ color:var(--ma-ink-600); }
.vd__specs td:last-child{ text-align:right; font-weight:600; font-family:var(--font-heading); }
.vd__cta{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.vd__badges{ display:flex; gap:8px; margin-bottom:6px; }

/* ============================================================
   Vehicle card
   ============================================================ */
.vc h3{ margin:0; font-size:21px; line-height:1.05; }
.vc__make{ font-family:var(--font-heading); font-weight:500; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ma-ink-400); }
.vc__specs{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:4px; color:var(--ma-ink-600); font-size:13px; }
.vc__specs span{ display:inline-flex; align-items:center; gap:5px; }
.vc__specs svg{ color:var(--ma-ink-400); }
.vc__price{ font-family:var(--font-heading); font-weight:600; font-size:20px; color:var(--ma-ink); }
.vc__price small{ display:block; font-family:var(--font-body); font-weight:400; font-size:11px; color:var(--ma-ink-400); letter-spacing:0; }
.vc__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.vc a.vc__link{ color:inherit; text-decoration:none; display:block; }

/* ============================================================
   Contact
   ============================================================ */
.ct-hero{ background:var(--ma-red); color:var(--ma-paper); }
.ct-hero__in{ max-width:var(--container-wide); margin:0 auto; padding:56px 28px; }
.ct-hero h1{ font-family:var(--font-poster); text-transform:uppercase; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(42px,5vw,72px); line-height:.9; margin:12px 0 0; color:var(--ma-paper); }
.ct-hero h1 em{ color:var(--ma-paper); font-style:normal; }
.ct-hero__kicker{ font-family:var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ma-paper); }
.ct{ max-width:var(--container-wide); margin:0 auto; padding:56px 28px 80px; display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start; }
.ct h2{ font-family:var(--font-heading); font-weight:600; font-size:28px; margin:0 0 6px; }
.ct__lead{ color:var(--ma-ink-600); margin:0 0 24px; }
.ct-form{ display:flex; flex-direction:column; gap:18px; }
.ct-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ct-form__status{ margin-bottom:18px; }
.ct-side{ display:flex; flex-direction:column; gap:20px; }
.ct-map{ aspect-ratio:4/3; border-radius:var(--radius-md); border:1px solid var(--ma-line); overflow:hidden; }
.ct-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.2) contrast(1.02); }
.ct-map__consent{ width:100%; height:100%; border:0; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px;
  background:var(--ma-cream); color:var(--ma-ink); font-family:var(--font-body);
  transition:background var(--dur-fast) var(--ease-out); }
.ct-map__consent:hover{ background:var(--ma-navy-100); }
.ct-map__consent .ct-map__pin{ color:var(--ma-red); }
.ct-map__consent strong{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:15px; }
.ct-map__consent small{ max-width:34ch; color:var(--ma-ink-600); font-size:12px; line-height:1.5; }
.ct-map__consent small a{ color:var(--ma-red); }
.ct-info{ background:var(--ma-cream); border-radius:var(--radius-md); padding:24px; }
.ct-info h4{ font-family:var(--font-heading); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ma-red); margin:0 0 14px; }
.ct-info__row{ display:flex; align-items:flex-start; gap:11px; margin-bottom:13px; color:var(--ma-ink); font-size:15px; }
.ct-info__row svg{ color:var(--ma-red); flex:none; margin-top:2px; }
.ct-info__row b{ font-family:var(--font-heading); font-weight:600; }
/* ============================================================
   Motorrad Adermayer — global entry point.
   Import order mirrors the design-system styles.css, then adds the
   ported component + screen styles and production-only responsive /
   accessibility rules.
   ============================================================ */

/* Horizontalen Überlauf abklemmen (z. B. Hero-Grafiken, die bewusst über den
   Rand ragen). `clip` statt `hidden`: verhindert auf iOS Safari das seitliche
   Verschieben, ohne einen Scroll-Container zu erzeugen (Sticky-Header + vertikales
   Scrollen bleiben intakt). */
html, body { overflow-x: clip; }

/* Legal / content pages (Impressum, Datenschutz) */
.legal{ max-width:820px; margin:0 auto; padding:56px 28px 80px; }
.legal__kicker{ color:var(--ma-red); font-family:var(--font-heading); font-weight:600; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:8px; }
.legal h1{ font-family:var(--font-heading); font-weight:600; font-size:40px; margin:0 0 24px; letter-spacing:-.01em; }
.legal h2{ font-family:var(--font-heading); font-weight:600; font-size:22px; margin:36px 0 10px; }
.legal h3{ font-size:17px; margin:22px 0 6px; }
.legal p, .legal li{ color:var(--ma-ink-600); line-height:1.65; font-size:15px; }
.legal ul{ margin:0 0 var(--space-4); padding-left:20px; }
.legal a{ color:var(--ma-red); }
.legal address{ font-style:normal; color:var(--ma-ink); }
.legal__note{ margin-top:40px; padding:14px 16px; border-left:var(--border-heavy) solid var(--ma-line);
  background:var(--ma-cream); color:var(--ma-ink-600); font-size:13px; border-radius:var(--radius-sm); }

/* Skip link for keyboard users */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ma-ink); color:var(--ma-paper);
  padding:10px 16px; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.06em; }
.skip-link:focus{ left:8px; top:8px; }

img{ max-width:100%; }

/* Field-level error message on the contact form */
.ma-field__err{ display:none; font-size:var(--fs-xs); color:var(--ma-red); }
.ma-field.is-error .ma-input,
.ma-field.is-error .ma-select{ border-color:var(--ma-red); }
.ma-field.is-error .ma-field__err{ display:block; }
.ma-check.is-error .ma-check__box{ border-color:var(--ma-red); }

/* ============================================================
   Responsive — the prototype was desktop-only; add graceful breakpoints.
   ============================================================ */
@media (max-width:900px){
  .wb-nav, .wb-phone{ display:none; }
  .wb-burger{ display:inline-flex; margin-left:auto; }
  .wb-header__cta{ margin-left:0; gap:10px; }
  .wb-nav.is-open{ display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    background:var(--ma-paper); border-bottom:1px solid var(--ma-line); padding:16px 28px; gap:16px; margin:0; }
  .iv__layout{ grid-template-columns:1fr; }
  .iv__filters{ position:static; }
  .vd__grid{ grid-template-columns:1fr; }
  .vd__panel{ position:static; }
  .ct{ grid-template-columns:1fr; gap:32px; }
  .hm-sec__head{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:760px){
  .hm-grid, .hm-svc-grid{ grid-template-columns:1fr; }
  .iv__grid{ grid-template-columns:1fr; }
  /* Hero: text/CTAs on top, bike as a clean product shot anchored to the
     bottom (own band, full opacity — no washed-out overlay). */
  .hm-hero__in{ padding:64px 20px 232px; }
  .hm-hero__bike{ opacity:1; width:90%; height:auto; top:auto; right:-12%; bottom:0; }
  .hm-hero__helmet{ width:520px; right:-140px; opacity:.9; }
  .footer-cols, .wb-footer__in{ grid-template-columns:1fr 1fr; }
  .wb-footer__legal{ flex-direction:column; gap:8px; }
  .ct-form__row{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .wb-footer__in{ grid-template-columns:1fr; }
}

/* ============================================================
   Motion — respect reduced-motion (handoff requirement).
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .ma-card--interactive:hover{ transform:none; }
  .ma-btn:active{ transform:none; }
}