/* ==========================================================================
   Easy Trans – Basis, Layout & Komponenten
   Nur Tokens aus tokens.css verwenden – keine Roh-Werte für Farbe/Abstand.
   ========================================================================== */

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--font-size-300);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--color-text-brand); text-underline-offset: 0.2em; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-2) var(--space-4); background: var(--color-bg-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-gutter); }
.section { padding-block: var(--space-section); }
.section--subtle { background: var(--color-bg-subtle); }
.section--brand { background: var(--color-bg-brand); color: var(--color-text-on-brand); }

.section-header { max-width: 40rem; margin-bottom: var(--space-stack-lg); }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header h2 { font-size: var(--font-size-700); margin-bottom: var(--space-4); }
.section-header p { font-size: var(--font-size-400); color: var(--color-text-secondary); }
.section--brand .section-header p { color: var(--color-text-on-brand-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-accent); margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; border-radius: 2px; }
.section--brand .eyebrow, .hero .eyebrow { color: var(--amber-300); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ---------- Button ---------- */
.button {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 3rem; padding: var(--button-padding-y) var(--button-padding-x);
  border: 2px solid transparent; border-radius: var(--button-radius);
  font-weight: var(--font-weight-semibold); text-decoration: none; line-height: 1.2; cursor: pointer;
  transition: background-color var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard), transform var(--duration-fast) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard);
}
.button:active { transform: translateY(1px); }
.button svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }

.button--primary { background: var(--button-bg-primary); color: var(--button-text-primary); box-shadow: 0 6px 18px -6px rgb(242 140 11 / 0.55); }
.button--primary:hover { background: var(--button-bg-primary-hover); }
.button--secondary { background: var(--color-action-secondary); color: var(--color-text-on-brand); }
.button--secondary:hover { background: var(--color-action-secondary-hover); }
.button--ghost { background: transparent; color: inherit; border-color: currentColor; }
.button--ghost:hover { background: rgb(127 127 127 / 0.1); }
.button--sm { min-height: 2.5rem; padding: var(--space-2) var(--space-5); font-size: var(--font-size-200); }
.button--block { width: 100%; }

.button-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Site Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-height);
  background: rgb(251 250 248 / 0.85); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color var(--duration-base);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border-default); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 100%; }

.logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-primary); text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-weight-black); font-size: var(--font-size-500); letter-spacing: -0.03em; }
.logo__mark { width: 2.25rem; height: 2.25rem; }
.logo__accent { color: var(--color-text-brand); }

.nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; }
.nav__link { display: block; white-space: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); color: var(--color-text-secondary); text-decoration: none; font-weight: var(--font-weight-medium); font-size: var(--font-size-200); transition: color var(--duration-fast), background-color var(--duration-fast); }
.nav__link:hover { color: var(--color-text-primary); background: var(--color-bg-subtle); }
.nav__toggle { display: none; }

@media (max-width: 68rem) {
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
    background: transparent; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); cursor: pointer;
  }
  .nav__toggle svg { width: 1.25rem; height: 1.25rem; }
  .nav {
    position: fixed; inset: var(--header-height) 0 auto 0; padding: var(--space-4) var(--space-gutter) var(--space-6);
    background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default); box-shadow: var(--shadow-lg);
    transform: translateY(-0.5rem); opacity: 0; visibility: hidden;
    transition: opacity var(--duration-base), transform var(--duration-base) var(--easing-standard), visibility var(--duration-base);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__link { font-size: var(--font-size-400); padding: var(--space-3) var(--space-4); }
  .site-header__cta { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 10%, var(--petrol-600) 0%, transparent 55%), linear-gradient(160deg, var(--petrol-800), var(--petrol-950));
  color: var(--color-text-on-brand);
  padding-block: clamp(var(--space-12), 8vw, var(--space-24)) clamp(var(--space-16), 10vw, 7.5rem);
}
.hero__inner { display: grid; gap: var(--space-12); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .hero__inner { grid-template-columns: 1.15fr 1fr; } }
.hero h1 { font-size: var(--font-size-800); font-weight: var(--font-weight-black); margin-bottom: var(--space-6); }
.hero h1 em { font-style: normal; color: var(--amber-300); }
.hero__lead { font-size: var(--font-size-400); color: var(--color-text-on-brand-muted); max-width: 34rem; margin-bottom: var(--space-8); }
.hero .button--ghost { color: var(--color-text-on-brand); border-color: rgb(255 255 255 / 0.35); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-10); padding: 0; list-style: none; font-size: var(--font-size-200); color: var(--color-text-on-brand-muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__trust svg { width: 1.125rem; height: 1.125rem; color: var(--amber-300); }

.hero__visual { position: relative; }
.hero__road { position: absolute; inset: auto -20% -30% -20%; z-index: -1; opacity: 0.5; }

.route-card {
  background: rgb(255 255 255 / 0.06); border: 1px solid var(--color-border-on-brand); border-radius: var(--radius-xl);
  padding: var(--space-6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.45);
}
.route-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); font-size: var(--font-size-200); color: var(--color-text-on-brand-muted); }
.route-card__status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgb(255 191 77 / 0.15); color: var(--amber-200); font-weight: var(--font-weight-semibold); }
.route-card__status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--amber-300); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.route { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-4); }
.route__line { grid-row: span 3; display: flex; flex-direction: column; align-items: center; padding-block: 0.35rem; }
.route__dot { width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 3px solid var(--amber-300); }
.route__dot--end { background: var(--amber-300); }
.route__track { flex: 1; width: 2px; margin-block: var(--space-1); background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.4) 0 6px, transparent 6px 12px); }
.route__stop strong { display: block; font-size: var(--font-size-400); }
.route__stop span { font-size: var(--font-size-200); color: var(--color-text-on-brand-muted); }
.route__meta { padding-block: var(--space-4); display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-200); color: var(--color-text-on-brand-muted); }
.route__meta svg { width: 2.5rem; height: auto; color: var(--neutral-0); }

.route-card__footer { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border-on-brand); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.route-card__stat span { display: block; font-size: var(--font-size-100); color: var(--color-text-on-brand-muted); }
.route-card__stat strong { font-size: var(--font-size-400); }

/* ---------- Card ---------- */
.card {
  position: relative; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding);
  transition: box-shadow var(--duration-base) var(--easing-standard), transform var(--duration-base) var(--easing-standard), border-color var(--duration-base);
}
.card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }
.card__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-5);
  border-radius: var(--radius-md); background: var(--color-bg-brand-subtle); color: var(--color-text-brand);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }
.card h3 { font-size: var(--font-size-500); margin-bottom: var(--space-2); }
.card p { color: var(--color-text-secondary); }

/* Audience-Card */
.audience { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(var(--space-6), 4vw, var(--space-10)); }
.audience h3 { font-size: var(--font-size-600); }
.audience .checklist { margin-block: var(--space-2) var(--space-4); }
.audience .button { align-self: flex-start; margin-top: auto; }
.audience--business { background: var(--color-bg-brand); color: var(--color-text-on-brand); border-color: transparent; }
.audience--business p { color: var(--color-text-on-brand-muted); }
.audience--business .card__icon { background: rgb(255 255 255 / 0.08); color: var(--amber-300); }
.audience--business .checklist svg { color: var(--amber-300); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--font-size-100); font-weight: var(--font-weight-semibold);
  background: var(--color-bg-accent-subtle); color: var(--color-text-accent);
}
.badge--on-brand { background: rgb(255 191 77 / 0.15); color: var(--amber-200); }

.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.15em; color: var(--color-feedback-success); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; }
.step { position: relative; padding-top: var(--space-2); }
.step__number {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-5);
  border-radius: 50%; background: var(--color-bg-surface); border: 2px solid var(--color-border-brand);
  font-family: var(--font-heading); font-weight: var(--font-weight-black); font-size: var(--font-size-500); color: var(--color-text-brand);
}
.step h3 { font-size: var(--font-size-500); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-secondary); }
@media (min-width: 60rem) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(var(--space-2) + 1.5rem); left: calc(3rem + var(--space-4)); right: calc(var(--space-6) * -1 + var(--space-4));
    height: 2px; background: repeating-linear-gradient(to right, var(--color-border-strong) 0 6px, transparent 6px 12px);
  }
}

/* ---------- Form Controls ---------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); }
.field__hint { font-size: var(--font-size-100); color: var(--color-text-muted); }
.field__error { font-size: var(--font-size-100); color: var(--color-feedback-error); }

.input, .select, .textarea {
  width: 100%; min-height: var(--input-height); padding: var(--space-3) var(--space-4);
  background: var(--input-bg); border: var(--input-border); border-radius: var(--input-radius);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.textarea { min-height: 11rem; resize: vertical; }
.select { appearance: none; padding-right: var(--space-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357544d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 1.25rem; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-border-brand); box-shadow: 0 0 0 4px rgb(63 154 168 / 0.25); }
.input[aria-invalid="true"] { border-color: var(--color-feedback-error); }

.input-group { position: relative; }
.input-group .input { padding-right: 3rem; -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.input-group .input::-webkit-outer-spin-button, .input-group .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-group__suffix { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-weight: var(--font-weight-medium); pointer-events: none; }

/* Range */
.range { width: 100%; height: 1.5rem; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; --fill: 20%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--petrol-500) var(--fill), var(--neutral-200) var(--fill)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--neutral-200); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--petrol-500); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -9px; border-radius: 50%; background: var(--neutral-0); border: 3px solid var(--petrol-500); box-shadow: var(--shadow-md); }
.range::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--neutral-0); border: 3px solid var(--petrol-500); box-shadow: var(--shadow-md); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgb(63 154 168 / 0.35); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgb(63 154 168 / 0.35); }

/* Segmented Control (Radio-Gruppe) */
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); padding: var(--space-1); background: var(--color-bg-subtle); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); min-width: 0; }
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmented label { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--duration-base), color var(--duration-base), box-shadow var(--duration-base); white-space: nowrap; }
.segmented label svg { flex-shrink: 0; }
@media (max-width: 30rem) { .segmented { display: grid; width: 100%; } .segmented label { padding-inline: var(--space-2); } .segmented label svg { display: none; } }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* Choice Tiles (Fahrzeugklasse) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-3); border: 0; padding: 0; }
.choice-grid legend { margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); }
.choice {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-4); border: 1.5px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast);
}
.choice:hover { border-color: var(--color-border-strong); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice svg { width: 2.5rem; height: 1.5rem; color: var(--color-text-muted); transition: color var(--duration-fast); }
.choice__title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); line-height: var(--line-height-snug); }
.choice__meta { font-size: var(--font-size-100); color: var(--color-text-muted); }
.choice:has(input:checked) { border-color: var(--color-border-brand); background: var(--color-bg-brand-subtle); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.choice:has(input:checked) svg { color: var(--color-text-brand); }
.choice:has(input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* Toggle-Option (Checkbox als Zeile) */
.option {
  position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.option:hover { border-color: var(--color-border-strong); }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__box { flex-shrink: 0; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border: 2px solid var(--color-border-strong); border-radius: 0.375rem; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.option__box svg { width: 0.875rem; height: 0.875rem; color: var(--neutral-0); opacity: 0; transform: scale(0.6); transition: opacity var(--duration-fast), transform var(--duration-base) var(--easing-emphasized); }
.option__text { flex: 1; min-width: 0; display: grid; gap: 0.125rem; hyphens: auto; overflow-wrap: break-word; }
.option__title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-200); }
.option__desc { font-size: var(--font-size-100); color: var(--color-text-muted); }
.option__price { font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); white-space: nowrap; }
.option:has(input:checked) { border-color: var(--color-border-brand); background: var(--color-bg-brand-subtle); }
.option:has(input:checked) .option__box { background: var(--petrol-600); border-color: var(--petrol-600); }
.option:has(input:checked) .option__box svg { opacity: 1; transform: none; }
.option:has(input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* ---------- Calculator ---------- */
.calculator { display: grid; gap: var(--space-6); align-items: start; }
.calculator > *, .calculator__form > *, .calculator__group > * { min-width: 0; }
@media (min-width: 64rem) { .calculator { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); } }
.calculator__form { display: grid; gap: var(--space-8); }
.calculator__group { display: grid; gap: var(--space-4); }
.calculator__group-title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-400); }
.calculator__group-title span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-bg-brand); color: var(--color-text-on-brand); font-size: var(--font-size-200); }
.calculator__row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.calculator__distance { display: grid; gap: var(--space-3); }
.calculator__distance-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); }
.calculator__distance-head .input-group { width: 8.5rem; flex-shrink: 0; }
.range-scale { display: flex; justify-content: space-between; font-size: var(--font-size-100); color: var(--color-text-muted); }
.options-list { display: grid; gap: var(--space-3); }
.place-hint:empty { display: none; }
.place-hint.is-resolved { color: var(--color-feedback-success); }
.place-hint.is-error { color: var(--color-feedback-error); }
.distance-status {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--color-bg-brand-subtle); color: var(--color-text-brand); font-size: var(--font-size-200);
}
.distance-status[hidden] { display: none; }
.distance-status svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.distance-status.is-loading::before { content: ""; width: 0.875rem; height: 0.875rem; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
.distance-status.is-error { background: var(--color-feedback-error-bg); color: var(--color-feedback-error); }
.distance-status.is-manual { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.link-button { padding: 0; margin-left: auto; background: none; border: 0; color: var(--color-text-brand); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
@keyframes spin { to { transform: rotate(360deg); } }

.quote {
  position: sticky; top: calc(var(--header-height) + var(--space-4));
  background: var(--color-bg-brand-strong); color: var(--color-text-on-brand); border-radius: var(--radius-xl); padding: var(--card-padding); box-shadow: var(--shadow-lg);
  overflow: hidden; isolation: isolate;
}
.quote::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 70%; aspect-ratio: 1; z-index: -1; background: radial-gradient(circle, rgb(31 125 140 / 0.55), transparent 65%); }
.quote__label { font-size: var(--font-size-200); color: var(--color-text-on-brand-muted); }
.quote__price { font-family: var(--font-heading); font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); font-weight: var(--font-weight-black); letter-spacing: -0.03em; line-height: 1.1; margin-block: var(--space-1) var(--space-1); font-variant-numeric: tabular-nums; }
.quote__price small { font-size: 0.45em; font-weight: var(--font-weight-semibold); letter-spacing: 0; color: var(--color-text-on-brand-muted); }
.quote__tax { font-size: var(--font-size-100); color: var(--color-text-on-brand-muted); }
.quote__breakdown { list-style: none; padding: 0; margin-block: var(--space-6); display: grid; gap: var(--space-2); font-size: var(--font-size-200); border-top: 1px solid var(--color-border-on-brand); padding-top: var(--space-5); }
.quote__breakdown li { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--color-text-on-brand-muted); }
.quote__breakdown li span:last-child { color: var(--color-text-on-brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote__breakdown .is-discount span:last-child { color: var(--amber-200); }
.quote__breakdown .is-total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border-on-brand); color: var(--color-text-on-brand); font-weight: var(--font-weight-semibold); }
.quote__note { font-size: var(--font-size-100); color: var(--color-text-on-brand-muted); margin-top: var(--space-4); }
.quote__business {
  margin-bottom: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md);
  background: rgb(255 191 77 / 0.1); border: 1px solid rgb(255 191 77 / 0.3); font-size: var(--font-size-200);
}
.quote__business strong { display: block; color: var(--amber-200); margin-bottom: var(--space-1); }
.quote__business p { color: var(--color-text-on-brand-muted); }
.quote .button--ghost { color: var(--color-text-on-brand); border-color: rgb(255 255 255 / 0.3); }
.quote .button-group { flex-direction: column; }

/* ---------- Price List ---------- */
.prices__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-stack-lg); }
.prices__head .section-header { margin-bottom: 0; }
.prices { margin-bottom: var(--space-6); }
.price-card h3 { margin-bottom: var(--space-1); }
.price-card__sub { font-size: var(--font-size-200); margin-bottom: var(--space-4); }

.price-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-200); }
.price-table th, .price-table td { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); vertical-align: top; }
.price-table tbody tr:first-child > * { border-top: 0; }
.price-table th { text-align: left; font-weight: var(--font-weight-medium); color: var(--color-text-primary); padding-right: var(--space-4); }
.price-table th small { display: block; font-size: var(--font-size-100); font-weight: var(--font-weight-regular); color: var(--color-text-muted); line-height: var(--line-height-snug); margin-top: 0.125rem; }
.price-table td { text-align: right; font-weight: var(--font-weight-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }

.examples { display: grid; gap: var(--space-8); }
@media (min-width: 56rem) { .examples { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.examples h3 { font-size: var(--font-size-500); margin-bottom: var(--space-1); }
.examples__intro > p { color: var(--color-text-secondary); font-size: var(--font-size-200); margin-bottom: var(--space-5); }
.examples__intro .checklist { font-size: var(--font-size-200); }
.examples__intro .examples__note { margin-top: var(--space-5); font-size: var(--font-size-100); color: var(--color-text-muted); }
.price-table--examples { font-size: var(--font-size-300); }
.price-table--examples thead th { font-size: var(--font-size-100); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); border-top: 0; padding-top: 0; }
.price-table--examples thead th:not(:first-child) { text-align: right; }
.price-table--examples tbody tr:first-child > * { border-top: 1px solid var(--color-border-default); }
.price-table--examples td:nth-child(2) { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.price-table--examples td:last-child { color: var(--color-text-brand); font-size: var(--font-size-400); }

.prices__business {
  display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--color-bg-accent-subtle); font-size: var(--font-size-200); color: var(--color-text-secondary);
}
.prices__business[hidden] { display: none; }
.prices__business svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-text-accent); margin-top: 0.1em; }
.prices__business strong { color: var(--color-text-primary); }

/* ---------- Business ---------- */
.business { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 60rem) { .business { grid-template-columns: 1fr 1fr; } }
.business h2 { font-size: var(--font-size-700); margin-bottom: var(--space-4); }
.business__lead { color: var(--color-text-on-brand-muted); font-size: var(--font-size-400); margin-bottom: var(--space-8); }
.benefits { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.benefit { padding: var(--space-5); border-radius: var(--radius-lg); background: rgb(255 255 255 / 0.05); border: 1px solid var(--color-border-on-brand); }
.benefit svg { width: 1.5rem; height: 1.5rem; color: var(--amber-300); margin-bottom: var(--space-3); }
.benefit h3 { font-size: var(--font-size-400); margin-bottom: var(--space-1); }
.benefit p { font-size: var(--font-size-200); color: var(--color-text-on-brand-muted); }
.industries { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); padding: 0; list-style: none; }
.industries li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border-on-brand); font-size: var(--font-size-200); color: var(--color-text-on-brand-muted); }

/* ---------- Trust / Stats ---------- */
.feature { display: flex; gap: var(--space-4); }
.feature .card__icon { margin: 0; flex-shrink: 0; }
.feature h3 { font-size: var(--font-size-400); margin-bottom: var(--space-1); }
.feature p { color: var(--color-text-secondary); font-size: var(--font-size-200); }

/* ---------- FAQ (Accordion) ---------- */
.faq { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: var(--space-3); }
.faq details { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); transition: border-color var(--duration-base), box-shadow var(--duration-base); }
.faq details[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); cursor: pointer; font-weight: var(--font-weight-semibold); list-style: none; border-radius: var(--radius-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-text-brand); transition: transform var(--duration-base) var(--easing-standard); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > div { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-secondary); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: var(--space-8); }
@media (min-width: 60rem) { .contact { grid-template-columns: 1fr 1.5fr; gap: var(--space-12); } }
.contact__info h2 { font-size: var(--font-size-700); margin-bottom: var(--space-4); }
.contact__info > p { color: var(--color-text-secondary); margin-bottom: var(--space-8); }
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.contact-list a { display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-primary); text-decoration: none; font-weight: var(--font-weight-semibold); }
.contact-list a:hover span:last-child { text-decoration: underline; }
.contact-list small { display: block; font-weight: var(--font-weight-regular); color: var(--color-text-muted); font-size: var(--font-size-100); }
.contact-list .card__icon { margin: 0; }
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.form__group { display: grid; gap: var(--space-4); border: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border-default); min-width: 0; }
.form__group legend { font-weight: var(--font-weight-semibold); font-size: var(--font-size-400); font-family: var(--font-heading); padding: 0; margin-bottom: var(--space-1); }
.form__row--plz { grid-template-columns: minmax(6rem, 1fr) 3fr; }
.form__summary { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-bg-brand-subtle); font-size: var(--font-size-200); color: var(--color-text-brand); }
.form__summary[hidden] { display: none; }
.form__summary dl, .request-result dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.form__summary dt, .request-result dt { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.form__summary dd, .request-result dd { margin: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.request-result { display: grid; gap: var(--space-4); }
.request-result h3 { font-size: var(--font-size-500); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-feedback-error); }
.form__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--font-size-200); color: var(--color-text-secondary); }
.form__consent input { width: 1.125rem; height: 1.125rem; margin-top: 0.2em; accent-color: var(--petrol-600); flex-shrink: 0; }
.form__status { padding: var(--space-4); border-radius: var(--radius-sm); font-size: var(--font-size-200); }
.form__status[hidden] { display: none; }
.form__status--info { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.form__status--success { background: var(--color-feedback-success-bg); color: var(--color-feedback-success); }
.form__status--error { background: var(--color-feedback-error-bg); color: var(--color-feedback-error); }

/* ---------- CTA Banner ---------- */
.cta-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: clamp(var(--space-8), 5vw, var(--space-12)); border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--amber-300), var(--amber-400)); color: var(--color-text-on-accent);
}
.cta-banner h2 { font-size: var(--font-size-600); margin-bottom: var(--space-1); }
.cta-banner .button--secondary { background: var(--petrol-900); }
.cta-banner .button--secondary:hover { background: var(--petrol-800); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-bg-brand-strong); color: var(--color-text-on-brand-muted); padding-block: var(--space-16) var(--space-8); font-size: var(--font-size-200); }
.site-footer__grid { display: grid; gap: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: var(--space-12); }
.site-footer .logo { color: var(--color-text-on-brand); margin-bottom: var(--space-4); }
.site-footer .logo__accent { color: var(--amber-300); }
.site-footer h3 { font-family: var(--font-body); font-size: var(--font-size-200); color: var(--color-text-on-brand); letter-spacing: 0; margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.site-footer a { color: var(--color-text-on-brand-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-text-on-brand); text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-border-on-brand); }

/* ---------- Reveal-Animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--easing-standard), transform var(--duration-slow) var(--easing-standard); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Legal pages ---------- */
.legal { max-width: var(--container-narrow); margin-inline: auto; padding-block: var(--space-16); }
.legal h1 { font-size: var(--font-size-700); margin-bottom: var(--space-8); }
.legal h2 { font-size: var(--font-size-500); margin-block: var(--space-10) var(--space-3); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.legal h3 { font-size: var(--font-size-400); margin-block: var(--space-6) var(--space-2); }
.legal p, .legal li { color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.legal ol, .legal ul { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.legal li::marker { color: var(--color-text-muted); }
.legal strong { color: var(--color-text-primary); }
.legal__lead { font-size: var(--font-size-400); color: var(--color-text-primary) !important; }
.legal__stand { margin-top: var(--space-12); font-size: var(--font-size-200); color: var(--color-text-muted) !important; }
.legal-toc { margin-block: var(--space-6) var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--color-bg-subtle); border: 1px solid var(--color-border-default); }
.legal-toc ol { margin: 0; columns: 2 16rem; column-gap: var(--space-8); }
.legal-toc li { margin-bottom: var(--space-1); break-inside: avoid; }
.legal-box { margin-block: var(--space-6); padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-bg-brand-subtle); border-left: 4px solid var(--color-border-brand); }
.legal-box > :last-child { margin-bottom: 0; }
.legal-box h2 { margin-top: 0; }
.table-wrap { overflow-x: auto; margin-bottom: var(--space-4); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-200); }
.legal-table th, .legal-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-default); vertical-align: top; }
.legal-table th { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); background: var(--color-bg-subtle); }
.legal-table td { color: var(--color-text-secondary); }
.legal-form { padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.legal-form__line { border-bottom: 1px solid var(--color-border-strong); margin-bottom: var(--space-4) !important; }
.legal-nav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-6); }
.legal-nav a[aria-current="page"] { color: var(--color-text-on-brand); font-weight: var(--font-weight-semibold); }
.site-footer--compact { padding-block: var(--space-10) var(--space-6); }
.placeholder { background: var(--color-bg-accent-subtle); color: var(--color-text-accent); padding: 0 var(--space-1); border-radius: 0.25rem; }
@media print { .site-header, .site-footer, .skip-link { display: none; } .legal { padding: 0; } }