/* ═══════════════════════════════════════════════════════════════════════════════
   MotorSur — Instrumententafel
   ───────────────────────────────────────────────────────────────────────────────
   Auf einem Fahrzeugmarktplatz sind die Zahlen das Produkt: Preis, Baujahr,
   Kilometerstand entscheiden den Klick. Die Gestaltung behandelt sie deshalb wie
   Messwerte — Monospace mit Tabellenziffern, Haarlinien als Skalenstriche,
   gestanzte Zustandsplaketten auf dem Bild. Alles andere bleibt bewusst leise,
   damit die Zahlen tragen können.

   Schriften liegen unter /static/fonts (siehe @font-face unten), nicht bei
   Google — eine Fremddomäne im kritischen Renderpfad wäre ein Fremdausfall im
   kritischen Renderpfad. Archivo und IBM Plex Sans sind Variable Fonts: eine
   Datei je Subset deckt den gesamten Strichstärkenbereich ab.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Archivo-400to700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Archivo-400to700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-100to700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/IBMPlexSans-100to700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Marken-Token ───────────────────────────────────────────────────────────── */

:root {
  /* Graphit statt des früheren #1a1a2e: das zog ins Violette und ließ das Orange
     stumpf wirken. Ein neutral-kühles Anthrazit lässt das Signal knallen. */
  --ms-ink: #0f1419;
  --ms-ink-raised: #1a232d;
  --ms-ink-line: rgba(255, 255, 255, 0.12);

  /* Das Blau der Marke bleibt — es trägt die Preise und die Links. */
  --ms-navy: #17395c;
  --ms-navy-hover: #0f2942;
  --ms-navy-tint: #eef3f9;

  /* Die einzige laute Farbe. Nur Handlungsaufforderung und Aktivzustand — wird
     sie zur Dekoration, verliert sie genau die Funktion, für die sie da ist. */
  --ms-signal: #ee6c12;
  --ms-signal-hover: #d65c08;
  --ms-signal-tint: #fdf0e6;

  --ms-whatsapp: #25d366;
  --ms-whatsapp-hover: #1da851;
  --ms-error: #c92a3b;
  --ms-success: #1a7f4b;

  --ms-surface: #ffffff;
  --ms-bg: #f1f2f4;
  --ms-text: #12171d;
  --ms-muted: #5e6874;
  --ms-line: #dee2e7;
  --ms-line-soft: #ebeef1;

  --ms-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ms-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ms-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ms-radius: 10px;
  --ms-radius-sm: 6px;
  --ms-radius-xs: 3px;
  --ms-width: 1240px;
  --ms-gutter: 1.5rem;

  --ms-shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.05), 0 1px 1px rgba(15, 20, 25, 0.04);
  --ms-shadow-md: 0 4px 6px -1px rgba(15, 20, 25, 0.07), 0 12px 24px -8px rgba(15, 20, 25, 0.14);
  --ms-shadow-lg: 0 24px 48px -16px rgba(15, 20, 25, 0.22);

  /* Altnamen. Das Stylesheet ist über 1800 Zeilen lang und referenziert sie an
     hunderten Stellen (Formulare, Auth, Bildverwaltung) — als Alias umgebogen
     erben diese Bereiche die neue Palette, ohne dass jede Regel angefasst wird. */
  --ms-primary: var(--ms-navy);
  --ms-primary-hover: var(--ms-navy-hover);
  --ms-accent: var(--ms-signal);
  --ms-accent-hover: var(--ms-signal-hover);
  --ms-border: var(--ms-line);
  --ms-header-bg: var(--ms-ink);
  --ms-footer-bg: var(--ms-ink);

  --pico-font-size: 100%;
  --pico-font-family: var(--ms-font-body);
  --pico-line-height: 1.6;
  --pico-text-color: var(--ms-text);
  --pico-background-color: var(--ms-bg);
  --pico-primary: var(--ms-navy);
  --pico-primary-background: var(--ms-navy);
  --pico-primary-hover: var(--ms-navy-hover);
  --pico-primary-hover-background: var(--ms-navy-hover);
  --pico-primary-focus: rgba(23, 57, 92, 0.25);
  --pico-primary-inverse: #ffffff;
  --pico-form-element-background-color: #ffffff;
  --pico-border-radius: var(--ms-radius-sm);
  --pico-spacing: 1.5rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-typography-spacing-vertical: 1.25rem;
  --pico-font-weight: 400;
}

/* ── Grundtypografie ─────────────────────────────────────────────────────────
   Archivo trägt die Überschriften: eine Grotesk mit der Anmutung von
   Verkehrsbeschilderung, eng gesetzt. Plex Sans trägt den Fließtext. Plex Mono
   trägt jede Zahl — das ist der eigentliche Griff dieses Entwurfs.            */

body {
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--ms-font-display);
  color: var(--ms-ink);
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.15;
}

h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); }
h3 { font-size: 1.1rem; }

/* Jede Zahl der Plattform. `tabular-nums` ist hier keine Feinheit, sondern der
   Grund für die ganze Übung: im Kartenraster stehen die Preise untereinander,
   und nur mit Tabellenziffern fluchten die Stellen auch wirklich. */
.num {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Kleine Versalzeile über einem Abschnitt — Skalenbeschriftung, kein Zierrat.
   Trägt immer eine echte Angabe (Rubrik, Anzahl, Kategorie). */
.eyebrow {
  font-family: var(--ms-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-muted);
}

a { text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--ms-signal);
  outline-offset: 2px;
  border-radius: var(--ms-radius-xs);
}

/* ── Kopfzeile ──────────────────────────────────────────────────────────────── */

body > header.site-header {
  background: var(--ms-ink);
  border-bottom: none;
  padding: 0;
  position: relative;
  z-index: 10;
}

body > header.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--ms-width);
  margin: 0 auto;
  padding: 0.8rem var(--ms-gutter);
}

body > header.site-header .site-title {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  color: #ffffff;
  letter-spacing: -0.03em;
}

body > header.site-header .site-title span {
  color: var(--ms-signal);
}

body > header.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

body > header.site-header .site-nav a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.15s;
}

body > header.site-header .site-nav a:hover {
  color: #ffffff;
}

body > header.site-header .site-nav a.nav-btn {
  padding: 0.45rem 1rem;
  border-radius: var(--ms-radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
}

body > header.site-header .site-nav a.nav-btn-primary {
  background: var(--ms-signal);
  color: #ffffff;
}

body > header.site-header .site-nav a.nav-btn-primary:hover {
  background: var(--ms-signal-hover);
}

body > header.site-header .site-nav a.nav-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

body > header.site-header .site-nav a.nav-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

body > header.site-header .locale-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--ms-ink-line);
}

body > header.site-header .locale-switcher a.locale-switcher-link {
  font-family: var(--ms-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}

body > header.site-header .locale-switcher a.locale-switcher-link:hover {
  color: #ffffff;
}

/* ── Klappmenü ────────────────────────────────────────────────────────────────
   Alles hier hängt an `.js-nav`, das erst das Skript in PageLayout.kt setzt.
   Ohne JavaScript bleibt die Navigation sichtbar und bricht auf schmalen
   Schirmen einfach um — kein Knopf, der nichts tut.                          */

body > header.site-header .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ms-radius-sm);
  background: none;
  color: #ffffff;
  cursor: pointer;
}

body > header.site-header .nav-toggle:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

body > header.site-header .nav-toggle svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 860px) {
  body > header.site-header nav {
    padding: 0.65rem 1rem;
  }

  body > header.site-header.js-nav .nav-toggle {
    display: inline-flex;
  }

  /* Das Panel hängt unter der Kopfzeile und schiebt den Seiteninhalt nicht
     nach unten — deshalb absolut, nicht im Fluss. */
  body > header.site-header.js-nav .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
    background: var(--ms-ink);
    border-top: 1px solid var(--ms-ink-line);
    box-shadow: var(--ms-shadow-md);
  }

  body > header.site-header.js-nav.nav-open .site-nav {
    display: flex;
  }

  body > header.site-header.js-nav .site-nav a {
    padding: 0.75rem 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  body > header.site-header.js-nav .site-nav a.nav-btn {
    margin-top: 0.75rem;
    padding: 0.7rem 1rem;
    text-align: center;
    border-bottom: none;
  }

  body > header.site-header.js-nav .site-nav a.nav-btn + a.nav-btn {
    margin-top: 0.5rem;
  }

  body > header.site-header.js-nav .locale-switcher {
    margin-top: 0.75rem;
    padding-left: 0;
    border-left: none;
  }

  /* Ohne JavaScript: umbrechen statt kollidieren. */
  body > header.site-header:not(.js-nav) nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  body > header.site-header:not(.js-nav) .site-nav {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* ── Seitenrumpf ────────────────────────────────────────────────────────────── */

main {
  max-width: var(--ms-width);
  margin: 0 auto;
  padding: 2rem var(--ms-gutter) 3.5rem;
  flex: 1;
  width: 100%;
}

/* Die Startseite setzt ihre Abschnitte selbst randlos über die volle Breite und
   zieht die Begrenzung nach innen in `.wrap`. Das vermeidet die
   `calc(50% - 50vw)`-Ausbruchsrechnung, die je nach Bildlaufleiste einen
   waagerechten Überlauf erzeugt. */
main.main-flush {
  max-width: none;
  padding: 0;
}

.wrap {
  max-width: var(--ms-width);
  margin: 0 auto;
  padding: 0 var(--ms-gutter);
  width: 100%;
}

footer.site-footer {
  background: var(--ms-ink);
  color: rgba(255, 255, 255, 0.65);
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: none;
}

/* Raster statt space-between: bei 1240 px trieben drei Flex-Spalten sonst so weit
   auseinander, dass die beiden Linkspalten am rechten Rand klebten. */
footer.site-footer .footer-inner {
  max-width: var(--ms-width);
  margin: 0 auto;
  padding: 2.75rem var(--ms-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  font-size: 0.875rem;
}

footer.site-footer .footer-col p {
  max-width: 34ch;
  margin: 0;
}

@media (max-width: 640px) {
  footer.site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 2rem var(--ms-gutter);
  }
}

footer.site-footer .footer-col h4 {
  font-family: var(--ms-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.9rem;
}

footer.site-footer .footer-col a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  display: block;
  margin-bottom: 0.45rem;
  transition: color 0.15s;
}

footer.site-footer .footer-col a:hover {
  color: #ffffff;
}

footer.site-footer .footer-bottom {
  border-top: 1px solid var(--ms-ink-line);
  padding: 1.15rem var(--ms-gutter);
  text-align: center;
  font-family: var(--ms-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

/* ═══ Startseite ════════════════════════════════════════════════════════════ */

/* Der Kopfbereich ist das Instrumentenbrett: Anthrazit, darüber ein sehr
   schwaches Millimeterraster (zwei Verläufe, keine Bilddatei) und ein warmer
   Schein aus der Signalfarbe. Das Raster ist die eine bewusste Freiheit dieses
   Entwurfs — es zitiert das Datenblatt, aus dem die ganze Bildsprache kommt,
   und kostet dafür kein einziges Byte Bildmaterial. */
.home-hero {
  position: relative;
  background: var(--ms-ink);
  color: #ffffff;
  padding: 4.5rem 0 3.25rem;
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.085) 1px, transparent 1px);
  background-size: 52px 52px;
  /* Nach rechts unten auslaufend, damit das Raster hinter der Überschrift steht und
     nicht hinter der Suchleiste — dort würde es die Kanten des weißen Felds stören. */
  mask-image: radial-gradient(95% 85% at 8% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}

.home-hero::after {
  content: "";
  position: absolute;
  top: -35%;
  right: -10%;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(circle, rgba(238, 108, 18, 0.22) 0%, transparent 62%);
  pointer-events: none;
}

.home-hero .wrap {
  position: relative;
  z-index: 1;
}

.home-hero .eyebrow {
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 1rem;
}

.home-hero h1 {
  color: #ffffff;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 16ch;
  margin: 0 0 1rem;
}

.home-hero p.home-hero-sub {
  font-size: 1.075rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0 0 2.25rem;
}

/* Suchleiste — das eine, was ein Käufer auf der Startseite wirklich tun will. */
.home-search {
  display: flex;
  gap: 0.5rem;
  background: var(--ms-surface);
  border-radius: var(--ms-radius);
  padding: 0.5rem;
  box-shadow: var(--ms-shadow-lg);
  max-width: 40rem;
  margin: 0;
}

.home-search .home-search-field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.home-search .home-search-field svg {
  position: absolute;
  left: 0.85rem;
  width: 19px;
  height: 19px;
  color: var(--ms-muted);
  pointer-events: none;
}

.home-search input[type="search"],
.home-search input[type="text"] {
  width: 100%;
  margin: 0;
  border: none;
  background: none;
  padding: 0.7rem 0.75rem 0.7rem 2.6rem;
  font-size: 1rem;
  box-shadow: none;
}

.home-search input:focus {
  outline: none;
  box-shadow: none;
}

.home-search button {
  width: auto;
  margin: 0;
  padding: 0.7rem 1.6rem;
  background: var(--ms-signal);
  border-color: var(--ms-signal);
  border-radius: var(--ms-radius-sm);
  font-weight: 600;
  white-space: nowrap;
}

.home-search button:hover {
  background: var(--ms-signal-hover);
  border-color: var(--ms-signal-hover);
}

/* Kennzahlenzeile unter der Suche: echte Bestandszahlen, als Messwerte gesetzt. */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ms-ink-line);
  max-width: 40rem;
}

.home-stats .home-stat-value {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.home-stats .home-stat-label {
  font-family: var(--ms-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.3rem;
}

/* Abschnittskopf: Überschrift links, Weiterführung rechts, Haarlinie darunter. */
.home-section {
  padding: 3.25rem 0 0;
}

.home-section:last-of-type {
  padding-bottom: 3.5rem;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ms-line);
}

.section-head h2 {
  margin: 0;
}

.section-head .section-link {
  font-family: var(--ms-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ms-navy);
  text-decoration: none;
  white-space: nowrap;
}

.section-head .section-link:hover {
  color: var(--ms-signal);
}

/* Kategorie-Kacheln. Die Zahl rechts ist der Bestand — sie macht die Kachel zu
   einer Angabe statt zu einer Schaltfläche mit Bildchen. */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

.category-tile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  text-decoration: none;
  color: var(--ms-text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.category-tile:hover {
  border-color: var(--ms-navy);
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.category-tile svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--ms-navy);
}

.category-tile .category-tile-name {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.category-tile .category-tile-count {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--ms-muted);
  margin-top: 0.15rem;
}

/* Händler-Aufruf am Fuß der Startseite. */
.home-cta {
  margin: 3.5rem 0 0;
  background: var(--ms-navy);
  color: #ffffff;
  border-radius: var(--ms-radius);
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.home-cta h2 {
  color: #ffffff;
  margin: 0 0 0.4rem;
}

.home-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  max-width: 52ch;
}

.home-cta a {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--ms-signal);
  color: #ffffff;
  border-radius: var(--ms-radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.home-cta a:hover {
  background: var(--ms-signal-hover);
}

@media (max-width: 640px) {
  .home-hero {
    padding: 2.75rem 0 2.25rem;
  }

  .home-search {
    flex-direction: column;
  }

  .home-search button {
    width: 100%;
  }

  .home-stats {
    gap: 1.5rem 2rem;
  }

  .home-cta {
    padding: 1.75rem 1.25rem;
  }
}

/* ═══ Seitenkopf innerer Seiten ═════════════════════════════════════════════ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin: 0;
}

/* ═══ Fahrzeugkarte ═════════════════════════════════════════════════════════ */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 1.25rem;
}

.listing-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  /* Kein Padding auf der Karte selbst — das Titelbild sitzt randlos.
     Die Innenabstände liegen in .card-body. */
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.listing-card:hover {
  box-shadow: var(--ms-shadow-md);
  border-color: #cdd4dc;
  transform: translateY(-3px);
  text-decoration: none;
}

/* ── Bildslot der Karte ───────────────────────────────────────────────────── */

/* Feste 4:3-Box: der Platz steht vor dem Laden fest, das Nachladen verschiebt
   also nichts (kein Layout-Shift). Passt zum CARD-Preset 640x480. */
.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ms-bg);
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.listing-card:hover .card-media img {
  transform: scale(1.035);
}

.card-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c3cad2;
  background: linear-gradient(160deg, #eef0f3 0%, #e3e7ec 100%);
}

.card-media-placeholder svg {
  width: 4rem;
  height: 4rem;
}

/* Gestanzte Plakette auf dem Bild — Zustand ist die erste Frage jedes Käufers. */
.card-tag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-family: var(--ms-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  border-radius: var(--ms-radius-xs);
  background: rgba(15, 20, 25, 0.78);
  color: #ffffff;
  backdrop-filter: blur(3px);
}

.card-tag-new {
  background: var(--ms-signal);
}

.listing-card .card-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.listing-card .card-title {
  font-family: var(--ms-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0 0 0.6rem;
  color: var(--ms-ink);
  line-height: 1.25;
}

/* ── Die Preisanzeige ─────────────────────────────────────────────────────────
   Das Erkennungszeichen der Seite. Kürzel klein und stumpf davor, Betrag groß
   in Tabellenziffern, Gegenwährung darunter. Markup: layout/PriceReadout.kt. */

.price-readout .price-primary {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.price-readout .price-currency {
  font-family: var(--ms-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ms-muted);
}

.price-readout .price-amount {
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ms-navy);
  line-height: 1.1;
}

.price-readout .price-secondary {
  font-size: 0.76rem;
  color: var(--ms-muted);
  margin-top: 0.15rem;
  letter-spacing: -0.01em;
}

/* Kartenfuß: oben die Messwerte (Baujahr, Kilometer) durch Haarlinien getrennt
   wie Skalenstriche, darunter der Ort. Sitzt am unteren Rand, damit die Zeile
   über ungleich lange Titel hinweg in allen Karten auf einer Höhe steht. */
.listing-card .card-foot {
  margin-top: auto;
  padding-top: 0.85rem;
}

.listing-card .card-spec {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--ms-muted);
  display: flex;
  align-items: center;
}

.listing-card .card-spec > span + span {
  margin-left: 0.55rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--ms-line);
}

.listing-card .card-place {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--ms-muted);
  min-width: 0;
}

.listing-card .card-place svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.75;
}

.listing-card .card-place span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-card .card-actions {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ms-line);
}

/* ═══ Detailseite ═══════════════════════════════════════════════════════════ */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Galerie der Detailseite ──────────────────────────────────────────────────
   Karussell ohne JavaScript: horizontaler Scroll-Container mit scroll-snap.
   Auf dem Telefon wischt man, am Desktop scrollt man oder klickt die
   Thumbnails — das sind gewöhnliche Anker-Links auf die Slides. */

.detail-gallery {
  margin-bottom: 1.5rem;
}

.detail-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0.5rem;
  border-radius: var(--ms-radius);
  background: var(--ms-bg);
}

.detail-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
}

.detail-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--ms-radius);
}

.detail-gallery-empty {
  aspect-ratio: 4 / 3;
  border-radius: var(--ms-radius);
  border: 1px solid var(--ms-border);
}

.detail-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin-top: 0.5rem;
  padding-bottom: 0.25rem;
}

.detail-thumb {
  flex: 0 0 auto;
  width: 5rem;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ms-border);
  border-radius: 4px;
  overflow: hidden;
  display: block;
}

.detail-thumb:hover {
  border-color: var(--ms-primary);
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bildverwaltung im Bearbeiten-Formular ───────────────────────────────── */

.image-manager {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ms-border);
}

.image-manager-hint {
  font-size: 0.875rem;
  color: var(--ms-muted);
  margin: 0 0 1rem;
}

.image-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.image-manager-item {
  position: relative;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  overflow: hidden;
  background: var(--ms-surface);
}

.image-manager-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.image-cover-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
}

.image-manager-actions {
  display: flex;
  border-top: 1px solid var(--ms-border);
}

/* Die Aktionen sind je ein eigenes Formular (POST je Operation), deshalb muss
   der Flex-Container die Formulare gleichmäßig verteilen, nicht die Buttons. */
.image-manager-actions form {
  flex: 1;
  margin: 0;
}

.image-action-btn {
  width: 100%;
  padding: 0.4rem 0;
  background: none;
  border: none;
  border-right: 1px solid var(--ms-border);
  color: var(--ms-text);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}

.image-manager-actions form:last-child .image-action-btn {
  border-right: none;
}

.image-action-btn:hover:not([disabled]) {
  background: var(--ms-bg);
}

.image-action-btn[disabled] {
  color: var(--ms-border);
  cursor: default;
}

.image-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.image-upload-form input[type="file"] {
  flex: 1;
  min-width: 12rem;
  margin: 0;
}

.image-upload-form input[type="submit"] {
  width: auto;
  margin: 0;
}

/* Kopf der Detailseite: Rubrikzeile, Titel, darunter die Kerndaten als
   Messwertzeile — dieselbe Sprache wie auf der Karte, eine Stufe größer. */
.detail-head {
  margin-bottom: 1.5rem;
}

.detail-head h1 {
  margin: 0.5rem 0 0;
}

.detail-head .detail-spec {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--ms-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.3rem;
  margin-top: 0.7rem;
}

.detail-head .detail-spec > span + span {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--ms-line);
}

.detail-main {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  padding: 1.5rem;
}

.detail-main h2 {
  margin-top: 2rem;
}

.detail-main h2:first-of-type {
  margin-top: 1.5rem;
}

.detail-sidebar {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  padding: 1.5rem;
  box-shadow: var(--ms-shadow-sm);
}

/* Der Preis und die Kontaktknöpfe sollen beim Lesen der Ficha técnica nicht
   weglaufen — das ist die einzige Handlung, die die Seite anbietet. */
@media (min-width: 901px) {
  .detail-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}

.seller-map {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: var(--ms-radius-sm);
  margin-top: 0.75rem;
}

/* Große Ausführung der Preisanzeige. Der Skalenstrich darüber ist die einzige
   Zierlinie der Seite und markiert den Punkt, auf den alles zuläuft. */
.price-readout-lg {
  padding-top: 0.9rem;
  margin-bottom: 1.5rem;
  border-top: 3px solid var(--ms-signal);
}

.price-readout-lg .price-currency {
  font-size: 0.85rem;
}

.price-readout-lg .price-amount {
  font-size: 2.1rem;
  letter-spacing: -0.03em;
}

.price-readout-lg .price-secondary {
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0;
}

.specs-table th,
.specs-table td {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ms-line-soft);
  text-align: left;
  font-size: 0.9rem;
}

.specs-table th {
  width: 42%;
  color: var(--ms-muted);
  font-weight: 400;
  background: none;
}

.specs-table td {
  color: var(--ms-text);
  font-weight: 500;
}

.specs-table tr:last-child th,
.specs-table tr:last-child td {
  border-bottom: none;
}

.feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
}

/* Ausstattungsmerkmale sind Ja/Nein-Angaben — als gestanzte Plaketten gesetzt,
   dieselbe Form wie die Zustandsplakette auf dem Bild. */
.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  background: var(--ms-navy-tint);
  color: var(--ms-navy);
  border-radius: var(--ms-radius-xs);
  font-family: var(--ms-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filter-panel {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-top: 3px solid var(--ms-accent);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-sm);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.filter-panel form {
  display: flex;
  align-items: stretch;
  margin: 0;
}

/* Category icon tabs (left sidebar) */

.filter-category-tabs {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 72px;
  border-right: 1px solid var(--ms-border);
  padding: 0.5rem 0;
}

.filter-category-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.25rem;
  border-left: 3px solid transparent;
  color: var(--ms-muted);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-category-tabs a:hover {
  color: var(--ms-primary);
}

.filter-category-tabs a.active {
  border-left-color: var(--ms-accent);
  background: rgba(232, 118, 45, 0.07);
  color: var(--ms-accent);
  font-weight: 700;
}

.filter-category-tabs svg {
  width: 22px;
  height: 22px;
}

/* Main panel: primary row + actions row */

.filter-panel-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
}

.filter-primary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filter-subcategory-field {
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--ms-border);
}

.filter-subcategory-field .filter-pill-toggle {
  gap: 0.35rem;
}

.filter-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(30, 58, 95, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.filter-field select,
.filter-field input {
  margin: 0;
  min-width: 130px;
  background-color: rgba(30, 58, 95, 0.035);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.filter-field select:hover,
.filter-field input:hover {
  border-color: var(--ms-primary);
}

.filter-field select:focus,
.filter-field input:focus {
  outline: none;
  border-color: var(--ms-accent);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(232, 118, 45, 0.15);
}

.filter-field.filter-field-wide {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.filter-field.filter-field-wide label {
  flex-basis: 100%;
}

.filter-field.filter-field-wide select {
  flex: 1;
  min-width: 110px;
}

.filter-range {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.filter-range input {
  width: 100px;
  min-width: 100px;
  padding: 0.5rem 0.5rem;
}

.filter-range span {
  color: var(--ms-muted);
}

button.filter-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--ms-radius);
  white-space: nowrap;
  margin-left: auto;
}

.filter-submit svg {
  width: 18px;
  height: 18px;
}

.filter-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--ms-border);
}

.filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ms-muted);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.filter-reset:hover {
  color: var(--ms-accent);
}

.filter-reset svg {
  width: 16px;
  height: 16px;
}

.filter-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ms-muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.filter-more summary::-webkit-details-marker {
  display: none;
}

.filter-more summary::marker {
  content: "";
  display: none;
}

.filter-more summary::after {
  display: none;
}

.filter-more summary:hover,
.filter-more[open] summary {
  color: var(--ms-primary);
}

.filter-more summary svg {
  width: 16px;
  height: 16px;
}

.filter-more summary .chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
}

.filter-more[open] summary .chevron {
  transform: rotate(180deg);
}

.filter-more-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--ms-border);
}

.filter-pill-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.filter-pill-toggle label {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  background-color: rgba(30, 58, 95, 0.035);
  color: var(--ms-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-pill-toggle label:hover {
  border-color: var(--ms-primary);
}

.filter-pill-toggle input[type="radio"] {
  display: none;
}

.filter-pill-toggle label:has(input:checked) {
  background-color: var(--ms-primary);
  color: #ffffff;
  border-color: var(--ms-primary);
}

.results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.filter-active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-active .filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.35rem 0.3rem 0.6rem;
  background: var(--ms-navy-tint);
  color: var(--ms-navy);
  border-radius: var(--ms-radius-xs);
  font-size: 0.8rem;
  font-weight: 500;
}

.filter-active .filter-tag a {
  color: var(--ms-navy);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.25rem;
  border-radius: var(--ms-radius-xs);
  opacity: 0.6;
}

.filter-active .filter-tag a:hover {
  color: var(--ms-error);
  opacity: 1;
}

/* Die Trefferzahl ist eine Messgröße, keine Beschriftung. */
.result-count {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ms-muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .filter-panel form {
    flex-direction: column;
  }

  .filter-category-tabs {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--ms-border);
    padding: 0.35rem 0.5rem;
  }

  .filter-category-tabs a {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .filter-category-tabs a.active {
    border-left-color: transparent;
    border-bottom-color: var(--ms-accent);
  }

  .filter-primary-row,
  .filter-more-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-field {
    width: 100%;
  }

  .filter-field select,
  .filter-field input {
    min-width: 0;
    width: 100%;
  }

  .filter-range input {
    width: auto;
    flex: 1;
  }

  button.filter-submit {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .filter-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-pill-toggle {
    width: 100%;
  }

  .filter-pill-toggle label {
    flex: 1;
    text-align: center;
  }

  .results-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ms-line);
}

.pagination-bar a {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-surface);
  color: var(--ms-navy);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.pagination-bar a:hover {
  border-color: var(--ms-navy);
  color: var(--ms-navy-hover);
}

.pagination-bar .page-info {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--ms-muted);
  padding: 0 0.5rem;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-actions form {
  margin: 0;
}

.contact-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  margin: 0;
  padding: 0.6rem 1.1rem;
  font-size: 0.925rem;
  font-weight: 600;
  border-radius: var(--ms-radius-sm);
  white-space: nowrap;
}

.contact-actions button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* WhatsApp trägt seine Markenfarbe und ist der einzige laute Kontaktknopf — er ist
   der Weg, über den auf dieser Plattform tatsächlich verkauft wird. */
.btn-whatsapp {
  --pico-primary-background: var(--ms-whatsapp);
  --pico-primary-hover-background: var(--ms-whatsapp-hover);
  background: var(--ms-whatsapp);
  border-color: var(--ms-whatsapp);
  color: #ffffff;
}

.btn-whatsapp:hover {
  background: var(--ms-whatsapp-hover);
  border-color: var(--ms-whatsapp-hover);
}

/* Anruf, Instagram und Facebook bleiben zurückhaltend. In ihren Markenfarben
   ausgeführt konkurrierten drei bunte Knöpfe mit WhatsApp — das Markenzeichen
   allein genügt zur Erkennung. */
.btn-call,
.btn-instagram,
.btn-facebook {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  color: var(--ms-text);
}

.btn-call:hover,
.btn-instagram:hover,
.btn-facebook:hover {
  background: var(--ms-surface);
  border-color: var(--ms-navy);
  color: var(--ms-navy);
}

.btn-call svg,
.btn-instagram svg,
.btn-facebook svg {
  opacity: 0.75;
}

.btn-accent {
  --pico-primary-background: var(--ms-accent);
  --pico-primary-hover-background: var(--ms-accent-hover);
  background: var(--ms-accent);
  border-color: var(--ms-accent);
}

.btn-accent:hover {
  background: var(--ms-accent-hover);
  border-color: var(--ms-accent-hover);
}

/* Verkäuferblock in der Seitenspalte der Detailseite: Beschriftung, Name, Ort,
   dann die Kontaktknöpfe. Der Block darf nicht mit dem Preis darüber um
   Aufmerksamkeit ringen — er beantwortet nur „von wem". */
.seller-card {
  margin-bottom: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ms-line-soft);
}

.seller-card .seller-name {
  margin: 0.5rem 0 0;
  font-family: var(--ms-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.seller-card .seller-name a {
  color: var(--ms-ink);
  text-decoration: none;
}

.seller-card .seller-name a:hover {
  color: var(--ms-navy);
  text-decoration: underline;
}

.seller-info {
  margin: 0.4rem 0 1.15rem;
  font-size: 0.875rem;
  color: var(--ms-muted);
}

.seller-info p {
  margin: 0.15rem 0;
}

/* In der Seitenspalte stehen die Kontaktknöpfe untereinander und über die volle
   Breite — WhatsApp ist die einzige Handlung, die diese Seite anbietet. */
.detail-sidebar .contact-actions {
  flex-direction: column;
  gap: 0.5rem;
}

.detail-sidebar .contact-actions form {
  width: 100%;
}

.detail-sidebar .contact-actions button {
  width: 100%;
  padding: 0.75rem 1rem;
}

/* ── Auth (Anmeldung + Registrierung) ─────────────────────────────────────────
   Zweispaltig: links das dunkle Markenpanel, rechts das Formular. Es gibt im
   Projekt keine Bilddateien, das Panel trägt sich über Typo, Farbe und den
   Kategorie-Icon-Satz aus layout/Icons.kt. Markup: layout/AuthLayout.kt.      */

.auth-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  max-width: 860px;
  margin: 1.5rem auto 2.5rem;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-md);
  overflow: hidden;
}

/* Die Registrierung hat ein zweispaltiges Feldraster und braucht mehr Platz. */
.auth-shell-wide {
  grid-template-columns: 300px minmax(0, 1fr);
  max-width: 1020px;
}

.auth-aside {
  background: var(--ms-header-bg);
  color: #ffffff;
  padding: 2.5rem 2rem;
}

/* Klebt oben, damit neben dem langen Registrierungsformular keine tote
   Fläche steht. */
.auth-shell-wide .auth-aside-inner {
  position: sticky;
  top: 1.5rem;
}

/* Die Anmeldung ist kurz — hier stünde das Panel sonst oben und ließe darunter
   eine leere dunkle Fläche. Sticky braucht es dafür nicht. */
.auth-shell:not(.auth-shell-wide) .auth-aside {
  display: flex;
  align-items: center;
}

.auth-brand {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.auth-brand span {
  color: var(--ms-accent);
}

.auth-blurb {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.auth-rule {
  width: 40px;
  height: 3px;
  background: var(--ms-accent);
  border-radius: 2px;
  margin: 1.5rem 0;
}

.auth-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.auth-category {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ms-radius);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.auth-category-icon {
  display: inline-flex;
  color: var(--ms-accent);
}

.auth-category-icon svg {
  width: 22px;
  height: 22px;
}

.auth-card {
  padding: 2.5rem 2.25rem;
}

.auth-card h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 0.35rem;
}

.auth-card .auth-sub {
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
  color: var(--ms-muted);
}

.auth-card form {
  margin: 0;
}

/* Innerhalb der Auth-Karte sind die Abschnitte keine eigenen Karten mehr —
   sonst steckt eine Karte in der anderen. */
.auth-card .form-section {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.75rem;
}

.auth-card .form-section h2 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ms-muted);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.form-grid .auth-field {
  margin-bottom: 0;
}

.auth-field label,
.auth-card .form-group label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ms-muted);
  margin: 0;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Nicht jedes Feld hat ein Icon (Google Maps, Instagram, Beschreibung …) — ohne
   diese gemeinsame Grundlage stünden zweierlei Eingabefelder nebeneinander. */
.input-wrap input,
.auth-card .form-group input,
.auth-card .form-group select,
.auth-card .form-group textarea {
  margin: 0;
  background-color: rgba(30, 58, 95, 0.035);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.input-wrap input {
  padding-left: 2.6rem;
}

.auth-card .form-group input:hover,
.auth-card .form-group select:hover,
.auth-card .form-group textarea:hover {
  border-color: var(--ms-primary);
}

.auth-card .form-group input:focus,
.auth-card .form-group select:focus,
.auth-card .form-group textarea:focus {
  outline: none;
  border-color: var(--ms-accent);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(232, 118, 45, 0.15);
}

.input-wrap:has(.pw-toggle) input {
  padding-right: 2.75rem;
}

.input-wrap input:hover {
  border-color: var(--ms-primary);
}

.input-wrap input:focus {
  outline: none;
  border-color: var(--ms-accent);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(232, 118, 45, 0.15);
}

.field-icon {
  position: absolute;
  left: 0.85rem;
  display: inline-flex;
  pointer-events: none;
  color: var(--ms-muted);
  transition: color 0.15s;
}

.field-icon svg {
  width: 18px;
  height: 18px;
}

.input-wrap:focus-within .field-icon {
  color: var(--ms-accent);
}

/* Startet unsichtbar und wird erst vom Skript eingeblendet — ohne JavaScript
   gäbe es sonst eine Schaltfläche, die nichts tut. */
.pw-toggle {
  display: none;
  position: absolute;
  right: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--ms-muted);
  cursor: pointer;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: var(--ms-primary);
  background: none;
}

.pw-toggle svg {
  width: 18px;
  height: 18px;
}

.auth-submit {
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0.7rem 1rem;
  font-weight: 700;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--ms-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ms-border);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-surface);
  color: var(--ms-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.btn-google:hover {
  border-color: var(--ms-primary);
  background: #f8f9fb;
  color: var(--ms-text);
}

.btn-google .google-mark {
  display: inline-flex;
}

.btn-google svg {
  width: 18px;
  height: 18px;
}

.auth-alt {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ms-border);
  text-align: center;
  font-size: 0.875rem;
}

.auth-alt a {
  color: var(--ms-primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-alt a:hover {
  color: var(--ms-accent);
}

@media (max-width: 860px) {
  .auth-shell,
  .auth-shell-wide {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .auth-aside {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .auth-aside-inner {
    position: static;
  }

  .auth-rule {
    margin: 1rem 0 0;
  }

  /* Der Icon-Rail ist auf schmalen Schirmen reine Dekoration und weicht dem
     Formular. */
  .auth-categories {
    display: none;
  }

  .auth-card {
    padding: 1.75rem 1.25rem 2rem;
  }
}

.role-selector {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.role-selector label {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.15s;
}

.role-selector label:hover {
  border-color: var(--ms-primary);
}

.role-selector input[type="radio"] {
  display: none;
}

.role-selector input[type="radio"]:checked + span {
  color: var(--ms-primary);
}

.role-selector label:has(input:checked) {
  border-color: var(--ms-primary);
  background: #e8f0fe;
}

.badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-active { background: #d4edda; color: #155724; }
.badge-draft { background: #e2e3e5; color: #383d41; }
.badge-review { background: #fff3cd; color: #856404; }
.badge-sold { background: #cce5ff; color: #004085; }
.badge-paused { background: #e2e3e5; color: #383d41; }
.badge-rejected { background: #f8d7da; color: #721c24; }

.own-listings-table td .status-badge {
  font-size: 0.75rem;
}

.admin-status-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.admin-status-nav a {
  padding: 0.35rem 0.85rem;
  border-radius: var(--ms-radius);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  color: var(--ms-text);
  transition: all 0.15s;
}

.admin-status-nav a:hover {
  border-color: var(--ms-primary);
}

.admin-status-nav a.active {
  background: var(--ms-primary);
  color: #ffffff;
}

.lead-period-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.lead-period-nav a {
  padding: 0.35rem 0.85rem;
  border-radius: var(--ms-radius);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  color: var(--ms-text);
  transition: all 0.15s;
}

.lead-period-nav a:hover {
  border-color: var(--ms-primary);
}

.lead-period-nav a.active {
  background: var(--ms-primary);
  color: #ffffff;
  border-color: var(--ms-primary);
}

.form-section {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.form-section h2 {
  font-size: 1.1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ms-border);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-full {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0;
}

.requirement-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.requirement-list:empty {
  display: none;
}

.requirement-list li,
.requirement-list span {
  font-size: 0.8rem;
}

.requirement-ok {
  color: #155724;
}

.requirement-fail {
  color: #721c24;
}

.form-group input,
.form-group select,
.form-group textarea {
  margin: 0;
}

/* Aktivierung des Verkäuferprofils — eigenständige Seite und eingebettet in "Mis publicaciones". */
.activation-panel {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.5rem;
  max-width: 640px;
}

.activation-panel h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.activation-panel > p {
  color: var(--ms-muted);
  margin: 0 0 1.25rem;
}

.activation-panel form {
  margin: 0;
}

.activation-panel input[type="submit"] {
  margin: 1.25rem 0 0;
  width: auto;
}

.select-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.select-pair select {
  flex: 1;
  min-width: 140px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  margin: 0;
}

.radio-group {
  display: flex;
  gap: 1rem;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 400;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  margin: 0;
}

.currency-toggle {
  display: flex;
  gap: 0.25rem;
}

.currency-toggle label {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ms-border);
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 500;
}

.currency-toggle label:first-of-type {
  border-radius: var(--ms-radius-sm) 0 0 var(--ms-radius-sm);
}

.currency-toggle label:last-of-type {
  border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
}

.currency-toggle input[type="radio"] {
  display: none;
}

.currency-toggle label:has(input:checked) {
  background: var(--ms-primary);
  color: #ffffff;
  border-color: var(--ms-primary);
}

p.error {
  color: var(--ms-error);
  font-weight: 600;
  background: #fdf0f0;
  padding: 0.75rem 1rem;
  border-radius: var(--ms-radius-sm);
  border: 1px solid #f5c6cb;
  margin-bottom: 1rem;
}

p.success {
  color: #1e7e34;
  font-weight: 600;
  background: #eaf6ec;
  padding: 0.75rem 1rem;
  border-radius: var(--ms-radius-sm);
  border: 1px solid #c3e6cb;
  margin-bottom: 1rem;
}

.empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--ms-muted);
  background: var(--ms-surface);
  border: 1px dashed var(--ms-line);
  border-radius: var(--ms-radius);
}

.empty-state p {
  font-size: 1.02rem;
  margin: 0;
}

.empty-state p + p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.inline-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.inline-actions form {
  margin: 0;
}

/* Hover-Effekte mit Bewegung (Karten, Hero-Buttons) sind Beiwerk — wer
   reduzierte Bewegung eingestellt hat, bekommt nur den Farbwechsel. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .listing-card:hover,
  .category-tile:hover,
  .listing-card:hover .card-media img {
    transform: none;
  }
}