/**
 * Brand tokens and base layer — S&W Autoservice GmbH.
 *
 * Mirrors section 2 of WORDPRESS-DESIGN.md verbatim. Treat that document as the
 * source of truth: change tokens there first, then copy the block back in here.
 * The only deviation is the Google Fonts @import, which is enqueued as its own
 * stylesheet in inc/enqueue.php so it can load in parallel.
 */


:root{
  /* Marke */
  --sw-navy-900:#0B0E1C; --sw-navy-800:#141A33; --sw-navy-700:#1E2645; --sw-navy-600:#2C3559; --sw-navy-500:#3E4970;
  /* Briefpapier-Blau (Band vom Geschäftsbrief) */
  --sw-band-100:#F2F9FE; --sw-band-200:#E6F3FB; --sw-band-300:#DFF1FB; --sw-band-400:#CBE3F3; --sw-band-500:#AFD2E9;
  /* Stahlblau — einziger Akzent */
  --sw-steel-100:#E8F0F9; --sw-steel-200:#C9DCF0; --sw-steel-400:#5F8BC7; --sw-steel-500:#3D6FB4; --sw-steel-600:#31598F; --sw-steel-700:#1F4571;
  /* Neutral */
  --sw-grey-0:#FFFFFF; --sw-grey-50:#F7F8FA; --sw-grey-100:#F0F1F4; --sw-grey-200:#E5E7EC;
  --sw-grey-300:#CFD3DC; --sw-grey-400:#9AA0AE; --sw-grey-500:#767D8C; --sw-grey-600:#575E6C; --sw-grey-700:#3A404E;
  /* Status — nur für Status, nie dekorativ */
  --sw-green-500:#1E7A4B; --sw-green-100:#E6F2EB;
  --sw-amber-500:#B8720E; --sw-amber-100:#FBF1E1;
  --sw-red-500:#B4232A;   --sw-red-100:#FAEAEA;

  /* Semantik */
  --sw-text-heading:var(--sw-navy-800); --sw-text-body:var(--sw-grey-700); --sw-text-muted:var(--sw-grey-500);
  --sw-text-inverse:#fff; --sw-text-link:var(--sw-steel-600);
  --sw-surface-page:#fff; --sw-surface-subtle:var(--sw-grey-50); --sw-surface-band:var(--sw-band-300);
  --sw-surface-inverse:var(--sw-navy-800);
  --sw-border-subtle:var(--sw-grey-200); --sw-border-default:var(--sw-grey-300); --sw-border-focus:var(--sw-steel-500);
  --sw-focus-ring:0 0 0 3px rgba(61,111,180,.35);

  /* Typografie */
  --sw-font-sans:'Public Sans','Helvetica Neue',Arial,sans-serif;
  --sw-font-mono:'IBM Plex Mono',Consolas,monospace;
  --sw-fs-display:56px; --sw-fs-display-2:44px; --sw-fs-h1:34px; --sw-fs-h2:26px; --sw-fs-h3:20px; --sw-fs-h4:17px;
  --sw-fs-body:16px; --sw-fs-body-sm:14px; --sw-fs-caption:13px; --sw-fs-micro:11px;
  --sw-ls-display:-.022em; --sw-ls-heading:-.014em; --sw-ls-label:.02em; --sw-ls-eyebrow:.14em;

  /* Raster (4-px-Basis) */
  --sw-space-1:4px; --sw-space-2:8px; --sw-space-3:12px; --sw-space-4:16px; --sw-space-5:20px; --sw-space-6:24px;
  --sw-space-8:32px; --sw-space-10:40px; --sw-space-12:48px; --sw-space-16:64px; --sw-space-20:80px;
  --sw-page-max:1200px; --sw-page-pad:32px; --sw-gutter:24px; --sw-section-y:80px;

  /* Radien / Höhen */
  --sw-radius-badge:2px; --sw-radius-control:3px; --sw-radius-image:4px; --sw-radius-card:6px;
  --sw-control-h-sm:32px; --sw-control-h:40px; --sw-control-h-lg:48px;

  /* Schatten — flach halten */
  --sw-shadow-xs:0 1px 1px rgba(11,14,28,.05);
  --sw-shadow-md:0 2px 6px rgba(11,14,28,.08),0 1px 2px rgba(11,14,28,.05);
  --sw-shadow-lg:0 8px 24px rgba(11,14,28,.10),0 2px 6px rgba(11,14,28,.05);
  --sw-shadow-overlay:0 20px 48px rgba(11,14,28,.22);

  /* Bewegung */
  --sw-dur-fast:140ms; --sw-dur-base:200ms; --sw-ease:cubic-bezier(.2,0,.2,1);
}

/* --- Basis --- */
body{margin:0;font:400 var(--sw-fs-body)/1.65 var(--sw-font-sans);color:var(--sw-text-body);background:var(--sw-surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--sw-text-heading);letter-spacing:var(--sw-ls-heading)}
h1{font-size:var(--sw-fs-h1);font-weight:700;line-height:1.2}
h2{font-size:var(--sw-fs-h2);font-weight:700;line-height:1.2}
h3{font-size:var(--sw-fs-h3);font-weight:600;line-height:1.3}
h4{font-size:var(--sw-fs-h4);font-weight:600;line-height:1.3}
p{margin:0 0 var(--sw-space-4)}
p, .sw-prose{max-width:62ch}
a{color:var(--sw-text-link);text-decoration:none;border-bottom:1px solid var(--sw-steel-200);transition:color var(--sw-dur-fast) var(--sw-ease),border-color var(--sw-dur-fast) var(--sw-ease)}
a:hover{color:var(--sw-steel-600);border-bottom-color:var(--sw-steel-600)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--sw-focus-ring)}
::selection{background:var(--sw-band-400);color:var(--sw-navy-900)}

/* --- Layout --- */
.sw-container{max-width:var(--sw-page-max);margin-inline:auto;padding-inline:var(--sw-page-pad)}
.sw-section{padding-block:var(--sw-section-y)}
.sw-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sw-gutter)}
.sw-stack{display:flex;flex-direction:column;gap:var(--sw-space-4)}
@media (max-width:900px){:root{--sw-page-pad:20px;--sw-section-y:48px}.sw-grid-3{grid-template-columns:1fr}}

/* --- Textrollen --- */
.sw-eyebrow{font-size:var(--sw-fs-micro);font-weight:700;letter-spacing:var(--sw-ls-eyebrow);text-transform:uppercase;color:var(--sw-text-muted)}
.sw-data{font-family:var(--sw-font-mono);font-size:var(--sw-fs-body-sm);font-weight:500}
.sw-caption{font-size:var(--sw-fs-caption);color:var(--sw-text-muted)}
.sw-display{font-size:var(--sw-fs-display-2);font-weight:700;line-height:1.06;letter-spacing:var(--sw-ls-display)}

/* --- Band (Signatur-Element vom Briefkopf) --- */
.sw-band{background:var(--sw-surface-band);color:var(--sw-navy-800);padding-block:var(--sw-space-6);border-radius:0}
.sw-band--rule{border-top:1px solid var(--sw-navy-800)}
.sw-band--soft{background:var(--sw-band-200)}
.sw-band--navy{background:var(--sw-surface-inverse);color:var(--sw-text-inverse)}

/* --- Buttons --- */
.sw-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sw-space-2);
  height:var(--sw-control-h);padding-inline:var(--sw-space-5);border:1px solid transparent;border-radius:var(--sw-radius-control);
  font:600 var(--sw-fs-body-sm)/1 var(--sw-font-sans);letter-spacing:var(--sw-ls-label);cursor:pointer;border-bottom-width:1px;
  transition:background-color var(--sw-dur-fast) var(--sw-ease),border-color var(--sw-dur-fast) var(--sw-ease),color var(--sw-dur-fast) var(--sw-ease)}
.sw-btn:hover{border-bottom-width:1px}
.sw-btn--sm{height:var(--sw-control-h-sm);padding-inline:var(--sw-space-3)}
.sw-btn--lg{height:var(--sw-control-h-lg);padding-inline:var(--sw-space-6);font-size:var(--sw-fs-body)}
.sw-btn--primary{background:var(--sw-navy-800);border-color:var(--sw-navy-800);color:#fff}
.sw-btn--primary:hover{background:var(--sw-navy-700);border-color:var(--sw-navy-700);color:#fff}
.sw-btn--secondary{background:#fff;border-color:var(--sw-navy-800);color:var(--sw-navy-800)}
.sw-btn--secondary:hover{background:var(--sw-band-200);color:var(--sw-navy-800)}
.sw-btn--action{background:var(--sw-steel-500);border-color:var(--sw-steel-500);color:#fff}
.sw-btn--action:hover{background:var(--sw-steel-600);border-color:var(--sw-steel-600);color:#fff}
.sw-btn--ghost{background:transparent;color:var(--sw-navy-800)}
.sw-btn--ghost:hover{background:var(--sw-grey-100)}
.sw-btn:active{transform:scale(.995)}
.sw-btn[disabled],.sw-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}

/* --- Karten --- */
.sw-card{background:#fff;border:1px solid var(--sw-border-subtle);border-radius:var(--sw-radius-card);
  box-shadow:var(--sw-shadow-xs);padding:var(--sw-space-6);
  transition:box-shadow var(--sw-dur-base) var(--sw-ease),border-color var(--sw-dur-base) var(--sw-ease)}
.sw-card--band{background:var(--sw-band-200);border-color:var(--sw-band-400);box-shadow:none}
.sw-card--flush{padding:0;overflow:hidden}
a.sw-card,.sw-card--link{border-bottom:1px solid var(--sw-border-subtle)}
a.sw-card:hover,.sw-card--link:hover{box-shadow:var(--sw-shadow-lg);border-color:var(--sw-band-500)}

/* --- Badges / Tags --- */
.sw-badge{display:inline-flex;align-items:center;height:20px;padding-inline:var(--sw-space-2);border-radius:var(--sw-radius-badge);
  font:700 var(--sw-fs-micro)/1 var(--sw-font-sans);letter-spacing:var(--sw-ls-label);text-transform:uppercase;
  background:var(--sw-grey-100);color:var(--sw-grey-700)}
.sw-badge--brand{background:var(--sw-navy-800);color:#fff}
.sw-badge--verfuegbar{background:var(--sw-green-100);color:var(--sw-green-500)}
.sw-badge--reserviert{background:var(--sw-amber-100);color:var(--sw-amber-500)}
.sw-badge--verkauft{background:var(--sw-red-100);color:var(--sw-red-500)}
.sw-tag{display:inline-flex;align-items:center;gap:var(--sw-space-2);height:28px;padding-inline:var(--sw-space-3);
  border:1px solid var(--sw-border-default);border-radius:var(--sw-radius-control);
  font:600 var(--sw-fs-body-sm)/1 var(--sw-font-sans);color:var(--sw-navy-800);background:#fff}
.sw-tag[aria-pressed=true]{border-color:var(--sw-navy-800);background:var(--sw-band-200)}

/* --- Formulare --- */
.sw-field{display:flex;flex-direction:column;gap:var(--sw-space-2);margin-bottom:var(--sw-space-5)}
.sw-label{font:600 var(--sw-fs-body-sm)/1.3 var(--sw-font-sans);color:var(--sw-text-heading)}
.sw-input,.sw-select,.sw-textarea{width:100%;font-family:var(--sw-font-sans);font-size:var(--sw-fs-body-sm);color:var(--sw-text-body);
  background:#fff;border:1px solid var(--sw-border-default);border-radius:var(--sw-radius-control);outline:none;
  transition:border-color var(--sw-dur-fast) var(--sw-ease)}
.sw-input,.sw-select{height:var(--sw-control-h);padding-inline:var(--sw-space-3)}
.sw-textarea{padding:var(--sw-space-3);line-height:1.5;resize:vertical}
.sw-input:focus,.sw-select:focus,.sw-textarea:focus{border-color:var(--sw-border-focus);box-shadow:var(--sw-focus-ring)}
.sw-input[aria-invalid=true]{border-color:var(--sw-red-500)}
.sw-hint{font-size:var(--sw-fs-caption);color:var(--sw-text-muted)}
.sw-error{font-size:var(--sw-fs-caption);color:var(--sw-red-500)}

/* --- Datenliste (Fahrzeugdaten) --- */
.sw-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sw-space-8);margin:0}
.sw-specs > div{display:flex;justify-content:space-between;gap:var(--sw-space-4);
  padding-block:var(--sw-space-3);border-bottom:1px solid var(--sw-border-subtle)}
.sw-specs dt{font-size:var(--sw-fs-body-sm);color:var(--sw-text-muted)}
.sw-specs dd{margin:0;font-family:var(--sw-font-mono);font-size:var(--sw-fs-body-sm);font-weight:500;color:var(--sw-text-heading);text-align:right}
@media (max-width:900px){.sw-specs{grid-template-columns:1fr}}

/* --- Bildplatzhalter, solange keine Fotos vorliegen --- */
.sw-photo-placeholder{aspect-ratio:4/3;background:var(--sw-band-200);border:1px solid var(--sw-border-subtle);
  border-radius:var(--sw-radius-image);display:grid;place-items:center;
  font-size:var(--sw-fs-micro);font-weight:700;letter-spacing:var(--sw-ls-eyebrow);text-transform:uppercase;color:var(--sw-band-500)}

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