/* =========================================================================
   ScootStore Design System
   Leitidee: urbane E-Mobilität bei Nacht – Asphaltgrau als Bühne, ein einziger
   satter "Ladezustand-Grün"-Akzent für Aktionen, dünne Diagonal-"Speed-Lines"
   als wiederkehrendes Signatur-Element (Bewegungsspuren des Scooters).
   ========================================================================= */

:root {
  --color-bg: #f2f3ee;
  --color-surface: #ffffff;
  --color-surface-raised: #e9ebe2;
  --color-border: #c7cabd;
  --color-text: #0e1013;
  --color-text-muted: #454b51;
  --color-accent: #1a8a49;       /* Frisches Grün: CTAs, Preise, Fokus */
  --color-accent-dark: #136636;
  --color-accent-tint: #dcf3e3;
  --color-info: #026aa3;         /* Verfügbarkeit "sofort lieferbar" */
  --color-warning: #92400a;      /* Verfügbarkeit "Lieferzeit" */
  --color-danger: #b91c1c;       /* Verfügbarkeit "nicht verfügbar" */

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 2px 10px rgba(14,16,19,0.10);
  --shadow-raised: 0 14px 34px rgba(14,16,19,0.16);
}

* { box-sizing: border-box; }

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden; /* Sicherheitsnetz: verhindert horizontales Scrollen/Abschneiden von Karten am rechten Rand */
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

img { max-width: 100%; }

/* --- Header --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,243,238,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px;
}
.brand__bolt { color: var(--color-accent); }

.main-nav { display: flex; gap: 22px; align-items: center; }
.main-nav a { color: var(--color-text-muted); font-weight: 500; font-size: 0.95rem; transition: color .15s; }
.main-nav a:hover { color: var(--color-text); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch { position: relative; }
.lang-switch select {
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 0.85rem;
}

.cart-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 0.9rem;
}
.cart-pill:hover { border-color: var(--color-accent); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform .12s, background .15s, border-color .15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-accent); color: #ffffff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-accent); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }

/* --- Hero --- */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 20px 72px;
  background:
    repeating-linear-gradient(115deg, transparent 0 68px, rgba(31,157,85,0.05) 68px 70px),
    radial-gradient(ellipse at 20% -10%, rgba(31,157,85,0.10), transparent 55%),
    var(--color-bg);
}
.hero__inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.hero__eyebrow { color: var(--color-accent); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 16ch; line-height: 1.02; }
.hero p { color: var(--color-text-muted); font-size: 1.1rem; max-width: 46ch; margin-bottom: 28px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Product grid ---
   Bewusst Flexbox statt CSS Grid: Bei einem CSS-Grid mit "repeat(auto-fill, ...)" reserviert
   die erste Zeile immer so viele Spalten, wie in die Zeilenbreite passen würden – auch wenn
   (noch) gar nicht so viele Produkte vorhanden sind. Das erzeugte bei wenigen hervorgehobenen
   Produkten eine große, leere Fläche rechts neben der/den Karte(n). Mit einer zentrierten,
   umbrechenden Flexbox nehmen die Karten nur den Platz ein, den sie brauchen, und rücken bei
   wenigen Elementen automatisch in die Mitte statt an den linken Rand zu "kleben". */
.section { padding: 56px 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }

.product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }

.product-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s; box-shadow: var(--shadow-card);
  flex: 1 1 260px; max-width: 320px; width: 100%;
}
.product-card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.product-card__image { aspect-ratio: 4/3; background: var(--color-surface-raised); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.product-card__desc { color: var(--color-text-muted); font-size: 0.88rem; flex: 1; }
.product-card__price-row { display: flex; align-items: baseline; gap: 8px; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--color-accent); }
.price--old { color: var(--color-text-muted); text-decoration: line-through; font-size: 0.9rem; }

/* --- Availability badge (Signatur-Element: "Ladezustand"-Pille) --- */
.availability { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.availability::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.availability--instock { background: #d7ecf8; color: var(--color-info); }
.availability--instock::before { background: var(--color-info); }
.availability--backorder { background: #f6e6cc; color: var(--color-warning); }
.availability--backorder::before { background: var(--color-warning); }
.availability--outofstock { background: #f6d9d9; color: var(--color-danger); }
.availability--outofstock::before { background: var(--color-danger); }
.availability--preorder { background: var(--color-accent-tint); color: var(--color-accent); }
.availability--preorder::before { background: var(--color-accent); }

/* --- Category filter pills --- */
.category-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.category-pill { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 600; }
.category-pill.is-active, .category-pill:hover { border-color: var(--color-accent); color: var(--color-text); }

/* --- Forms --- */
.form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; }
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; background: var(--color-surface-raised); border: 1px solid var(--color-border);
  color: var(--color-text); border-radius: var(--radius-sm); padding: 11px 12px; font-size: 0.95rem; margin-bottom: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-validation-error, .validation-summary-errors { color: var(--color-danger); font-size: 0.85rem; }

/* --- Cart / checkout table --- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 14px 10px; border-bottom: 1px solid var(--color-border); text-align: left; }
.cart-table th { color: var(--color-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

.summary-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; }
.summary-box__row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--color-text-muted); }
.summary-box__row--total { color: var(--color-text); font-weight: 700; font-size: 1.15rem; border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 14px; }

.payment-options { display: grid; gap: 10px; }
.payment-option { display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; }
.payment-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-tint); }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--color-border); padding: 48px 0; color: var(--color-text-muted); margin-top: 64px; }
.site-footer a:hover { color: var(--color-text); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }

/* --- Utility --- */
.muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.badge-review { background: rgba(255,182,72,0.15); color: var(--color-warning); font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; }

/* --- Homepage: Trust-Leiste (Versand, Garantie, Service, Rückgabe) --- */
.usp-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 40px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.usp-item { display: flex; gap: 14px; align-items: flex-start; }
.usp-item__icon { font-size: 1.6rem; line-height: 1; }
.usp-item h4 { font-size: 0.98rem; margin-bottom: 4px; }
.usp-item p { color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }

/* --- Homepage: Vertrauens-/Presseleiste --- */
.trust-strip { text-align: center; padding: 32px 0; }
.trust-strip__rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-text); margin-bottom: 18px; }
.trust-strip__stars { color: #f5a623; letter-spacing: 2px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; align-items: center; }
.logo-pill { color: var(--color-text-muted); font-weight: 600; font-size: 0.85rem; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 999px; }

/* --- Homepage: "Was suchst du?" Kachel-Auswahl --- */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.usecase-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, border-color .15s;
}
.usecase-card:hover { box-shadow: var(--shadow-raised); border-color: var(--color-accent); }
.usecase-card__eyebrow { color: var(--color-accent); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.usecase-card ul { margin: 8px 0 4px; padding-left: 18px; color: var(--color-text-muted); font-size: 0.9rem; }
.usecase-card ul li { margin-bottom: 4px; }

/* --- Homepage: Zahlungsarten-Leiste --- */
.payment-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 28px 0; }
.payment-strip span { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 18px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }

/* --- Homepage: "Warum ScootStore" Gründe-Karten --- */
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.reason-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; }
.reason-card__icon { font-size: 1.8rem; margin-bottom: 12px; display: block; }
.reason-card h4 { font-size: 1rem; margin-bottom: 8px; }
.reason-card p { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; }

/* --- Homepage: Service-Links-Grid --- */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-link { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; font-weight: 600; transition: border-color .15s; }
.service-link:hover { border-color: var(--color-accent); }
.service-link span { display: block; color: var(--color-text-muted); font-weight: 400; font-size: 0.85rem; margin-top: 4px; }

/* --- Homepage: FAQ Accordion (nativ, ohne JS) --- */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--color-border); padding: 18px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--color-accent); font-size: 1.3rem; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--color-text-muted); margin-top: 12px; }

/* --- Homepage: Newsletter-Banner --- */
.newsletter-banner {
  background: var(--color-accent); color: #ffffff; border-radius: var(--radius-lg);
  padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.newsletter-banner h3 { color: #ffffff; }
.newsletter-banner p { color: rgba(255,255,255,0.85); margin: 0; max-width: 44ch; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input[type=email] {
  min-width: 260px; margin: 0; background: #ffffff; border: none;
}
.newsletter-form button { background: #16181c; color: #fff; }

/* --- Mobile --- */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .main-nav.is-open {
    display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 16px 20px; gap: 14px;
  }
  [data-nav-toggle] { display: inline-flex !important; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 64px 20px 48px; }
  .usp-bar { grid-template-columns: 1fr 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .reason-grid { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-banner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}