/* =========================================================================
   Autoservice Helmut Teuber, Schwäbisch Gmünd
   Werkstatt bei Nacht: blaustichiges Off-Schwarz, warmes Halogen-Weiß,
   ein einziger roter Akzent, ausschließlich für Handlungen.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* Grund und Flächen. Leicht ins Marineblau gezogen, damit sie zum
     Navy des Logos gehören, statt neutral daneben zu stehen. */
  --ground:    #0A0C12;
  --surface:   #11141C;
  --surface-2: #181C26;
  --line:      rgba(190, 205, 232, .11);
  --line-soft: rgba(190, 205, 232, .06);

  /* Schrift. Warmes Off-Weiß wie Hallenlicht. Der bewusste Gegenpol
     zum kühlen Blau, sonst kippt die ganze Seite ins Technische. */
  --ink:   #F2EFE9;
  --ink-2: rgba(242, 239, 233, .62);
  --ink-3: rgba(242, 239, 233, .38);

  /* IDENTITÄT: das Blau aus dem Logo.
     Original ist #1F5DA6, gemessen aus der Datei. Auf dem dunklen Grund
     kommt es nur auf 2,76:1 und ist damit zu matt. Diese Fassung hält
     denselben Farbton (212 Grad) und erreicht 5,2:1, also auch für
     Fließtext ausreichend. */
  --brand:      #4286D7;
  --brand-deep: #286DBD;
  --brand-wash: rgba(66, 134, 215, .12);
  --brand-print: #1F5DA6;   /* unveränderte Logofarbe für helle Flächen */

  /* HANDLUNG: das Rot bleibt, aber sparsam. Es markiert ausschließlich
     Verpflichtendes (Termin anfragen, Angebot sichern, Anfrage senden)
     sowie Fehler und Warnungen. Dadurch behält es seine Wirkung. */
  --action:      #E11B38;
  --action-deep: #B01128;
  --action-wash: rgba(225, 27, 56, .12);

  /* Signalfarben, nur für echten Zustand */
  --ok:   #4ADE80;
  --warn: #FBBF24;

  /* Form: alles 2px. Einzige Ausnahme sind die Blenden-Rahmen,
     deren Radius Teil des Effekts ist. */
  --r: 2px;

  /* Raster */
  --wrap: min(1520px, 92vw);
  --gut: clamp(1.25rem, 4vw, 2rem);

  /* Vertikaler Rhythmus */
  --band:   clamp(5rem, 9vw, 9rem);
  --band-s: clamp(3rem, 5vw, 4.5rem);

  /* Bühnenhöhe. svh, nicht dvh: dvh löst auf iOS beim Ein- und Ausblenden
     der URL-Leiste ein Relayout mitten im Scroll aus und die Blende
     springt sichtbar. Die Navigation bleibt oben stehen, also gehört
     ihre Höhe abgezogen, sonst rutscht der Hero unten aus dem Bild. */
  --stage-h: calc(100svh - var(--nav-h));

  /* Blenden-Geometrie. Vier Seiten einzeln, damit der Hero eine
     asymmetrische Blende bekommen kann: oben schmal, unten weit,
     damit die Überschrift unter dem Bildband Platz hat. */
  --ap-t: 27%;
  --ap-e: 31%;   /* rechts */
  --ap-b: 27%;
  --ap-w: 31%;   /* links */
  --ap-r: 24px;

  /* Kurven */
  --ease:     cubic-bezier(.23, 1, .32, 1);
  --ease-mid: cubic-bezier(.77, 0, .175, 1);

  --nav-h: 68px;
}

@media (max-width: 900px) {
  :root { --ap-t: 22%; --ap-e: 14%; --ap-b: 22%; --ap-w: 14%; --ap-r: 16px; --nav-h: 60px; }
}
@media (max-width: 560px) {
  :root { --ap-t: 18%; --ap-e: 8%; --ap-b: 18%; --ap-w: 8%; }
}

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

html {
  /* Verhindert Sprünge, sobald ein Overlay den Scroll sperrt. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden. hidden würde jedes position:sticky auf der
     Seite unbrauchbar machen, also auch alle drei Blenden. */
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Ausgeblendetes muss ausgeblendet bleiben.
   Der Browser bringt zwar [hidden] { display: none } mit, das ist aber nur
   eine Voreinstellung und unterliegt jeder eigenen display-Angabe. Regeln
   wie .card { display: flex } oder .rail { display: grid } setzen sie
   damit außer Kraft: Der Filter markierte Karten als ausgeblendet, sichtbar
   blieben sie trotzdem. Deshalb hier ausdrücklich und mit Vorrang. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  font-variation-settings: inherit;
}

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ Typografie */

/* Display-Zeilen laufen breit. Das ist die eine typografische Geste
   der Seite: Archivo mit aufgezogener Breitenachse. */
.d1, .d2, .d3 {
  font-variation-settings: 'wdth' 118, 'wght' 700;
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.6rem, 6.4vw, 6.4rem); }
.d2 { font-size: clamp(2rem, 3.9vw, 3.6rem); }
.d3 { font-size: clamp(1.4rem, 2vw, 1.9rem); font-variation-settings: 'wdth' 112, 'wght' 700; }

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0;
}

.body-2 { color: var(--ink-2); max-width: 62ch; margin: 0; }

/* Der Größencode. 205/55 R16 ist die Sprache dieser Branche,
   deshalb bekommt sie überall dieselbe Auszeichnung. */
.code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variation-settings: normal;
  letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1;
}

.kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------- Primitive */
.wrap { width: var(--wrap); margin-inline: auto; }
.band { padding-block: var(--band); }
.band-s { padding-block: var(--band-s); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* -------------------------------------------------------- Fortschritt */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 300;
  pointer-events: none;
}
@keyframes rp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      animation-name: rp-grow;
      animation-fill-mode: both;
      animation-timing-function: linear;
      /* Auf einer scroll()-Timeline sind benannte Bereiche wie `contain`
         nicht erlaubt, die Deklaration würde sonst verworfen. */
      animation-timeline: scroll(root block);
    }
  }
}

/* ---------------------------------------------------------------- Kopf */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--ink-3);
}
.topbar__in {
  width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .55rem;
}
.topbar__facts { display: flex; gap: 1.75rem; }
.topbar__facts span { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__phone { color: var(--ink); font-weight: 600; letter-spacing: .01em; }
@media (max-width: 860px) { .topbar__facts { display: none; } }

.nav {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  width: var(--wrap); margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.5rem;
}
/* Wortmarke. Das Logo bringt seine eigene Typografie mit, deshalb hier
   nur noch Größe und Ausrichtung. Die Höhe steuert alles, die Breite
   ergibt sich aus dem Seitenverhältnis der Datei. */
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 38px; width: auto; }
.logo--lg img { height: 50px; }
@media (max-width: 900px) { .logo img { height: 32px; } }
@media (max-width: 640px) { .logo img { height: 27px; } }

.nav__links { display: flex; gap: .25rem; margin-left: .5rem; }
.nav__links a {
  padding: .45rem .7rem;
  font-size: .875rem;
  color: var(--ink-2);
  border-radius: var(--r);
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a[aria-current="true"]::after {
  content: ''; display: block; height: 2px; margin-top: .3rem;
  background: var(--brand);
}
.nav__right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
@media (max-width: 1180px) { .nav__links { display: none; } }

.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 1px solid var(--line);
  padding: .6rem .65rem; border-radius: var(--r); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); }
@media (max-width: 1180px) { .burger { display: flex; } }

/* Schublade */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
  background: var(--surface); z-index: 400;
  transform: translateX(101%);
  transition: transform .38s var(--ease);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.drawer__links { display: flex; flex-direction: column; padding: .75rem; }
.drawer__links a {
  padding: .85rem 1rem; color: var(--ink-2); border-radius: var(--r);
  border-bottom: 1px solid var(--line-soft);
}
.drawer__links a:hover { color: var(--ink); background: var(--surface-2); }
.scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  z-index: 399; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ================================================================ BLENDE
   Der Kern der Seite. Grundzustand ist der statische: kurze Section,
   Rahmen offen, kein Pin. Die gesamte Choreographie liegt in einem
   einzigen verschachtelten Block, damit der Fallback die Höhen
   automatisch kollabiert statt Leerlauf zu erzeugen.
   ================================================================ */
.ap { position: relative; }

.ap__stage {
  position: relative;
  height: var(--stage-h);
  overflow: clip;
}

.ap__frame {
  position: absolute; inset: 0;
  clip-path: inset(var(--ap-t) var(--ap-e) var(--ap-b) var(--ap-w)
             round var(--ap-r) var(--ap-r) var(--ap-r) var(--ap-r));
  margin: 0;
}
.ap__frame img {
  width: 100%; height: 100%; object-fit: cover;
  /* Leicht abgedunkelt, damit die Schrift darüber ohne zusätzliche
     Schicht lesbar bleibt. */
  filter: brightness(.82) saturate(.92);
}

/* Platzhalterbilder werden entsättigt. Ein zufälliges buntes Foto würde
   sonst die ganze Farbwelt kippen und beim Ansehen den falschen Eindruck
   erzeugen. Sobald ein echtes Werkstattfoto hinterlegt ist, fällt die
   Klasse weg und das Bild kommt in voller Farbe. */
.is-ph { filter: grayscale(1) brightness(.92) contrast(1.04) !important; }
.gal .is-ph { filter: grayscale(1) brightness(.8) contrast(1.04) !important; }
.gal button:hover .is-ph { filter: grayscale(1) brightness(1) contrast(1.04) !important; }

/* Verlauf für die Textlesbarkeit im Vollbild. Solange der Rahmen klein
   ist, liegt der Text ohnehin auf dem dunklen Grund und der Schleier
   wird nicht gebraucht. */
.ap__veil {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, .8) 0%, rgba(10, 11, 13, 0) 36%),
    linear-gradient(0deg,   rgba(10, 11, 13, .94) 0%, rgba(10, 11, 13, 0) 58%);
}

/* Inhalt über der Blende */
.ap__content {
  position: absolute; inset: auto 0 0 0;
  padding-bottom: clamp(2.5rem, 7vh, 5.5rem);
  z-index: 2;
}

/* Bildunterschrift, klein und in Mono */
.ap__cap {
  position: absolute; right: 0; bottom: 1.1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Erst hier entstehen Scrollweg und Pin. */
    .ap { height: calc(var(--stage-h) * 2.5); }
    .ap__stage { position: sticky; top: var(--nav-h); }

    /* Eigener Name pro Blende. Timeline-Namen gelten auch für folgende
       Geschwister, drei gleichnamige Sections wären mehrdeutig. */
    #ap-1 { view-timeline-name: --ap1; }
    #ap-2 { view-timeline-name: --ap2; }
    #ap-3 { view-timeline-name: --ap3; }

    /* Bewusst nur Langformen. Die animation-Kurzschreibweise setzt
       animation-timeline und animation-range wieder auf ihre
       Startwerte zurück und der Scrub wäre still tot. */
    .ap__frame,
    .ap__frame img,
    .ap__veil,
    .ap-2 .ap__content,
    .ap-3 .ap__content {
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-range: contain 0% contain 100%;
    }
    .ap__frame     { animation-name: rp-aperture; }
    .ap__frame img { animation-name: rp-counterzoom; }
    .ap__veil      { animation-name: rp-veil; }
    /* Der Hero-Text bleibt durchgehend sichtbar: er steht bei kleinem
       Rahmen unter dem Bildband auf dem dunklen Grund und liegt bei
       offener Blende auf dem Schleier. Nur die beiden späteren Blenden
       blenden ihren Text ein und wieder aus. */
    .ap-2 .ap__content { animation-name: rp-apcontent; }
    .ap-3 .ap__content { animation-name: rp-apcontent; }

    #ap-1 .ap__frame, #ap-1 .ap__frame img, #ap-1 .ap__veil { animation-timeline: --ap1; }
    #ap-2 .ap__frame, #ap-2 .ap__frame img, #ap-2 .ap__veil, #ap-2 .ap__content { animation-timeline: --ap2; }
    #ap-3 .ap__frame, #ap-3 .ap__frame img, #ap-3 .ap__veil, #ap-3 .ap__content { animation-timeline: --ap3; }

    /* will-change nur solange die Blende in der Nähe ist. */
    .ap[data-near="true"] .ap__frame { will-change: clip-path; }
  }
}

/* Öffnen 0 bis 34, halten 34 bis 72, schließen 72 bis 96. */
@keyframes rp-aperture {
  0% {
    clip-path: inset(var(--ap-t) var(--ap-e) var(--ap-b) var(--ap-w)
               round var(--ap-r) var(--ap-r) var(--ap-r) var(--ap-r));
  }
  34%, 72% {
    clip-path: inset(0% 0% 0% 0% round 0px 0px 0px 0px);
  }
  96%, 100% {
    clip-path: inset(var(--ap-t) var(--ap-e) var(--ap-b) var(--ap-w)
               round var(--ap-r) var(--ap-r) var(--ap-r) var(--ap-r));
  }
}

@keyframes rp-veil {
  0%        { opacity: 0; }
  34%, 72%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* Gegen-Zoom. Ohne ihn sieht es aus wie ein wachsendes Bild
   statt wie eine sich öffnende Blende. */
@keyframes rp-counterzoom {
  0%       { transform: scale(1.14); }
  34%, 72% { transform: scale(1); }
  96%, 100%{ transform: scale(1.14); }
}

/* Der Text erscheint erst, wenn der Rahmen offen ist. */
@keyframes rp-apcontent {
  0%, 22%   { opacity: 0; transform: translateY(28px); }
  40%, 70%  { opacity: 1; transform: translateY(0); }
  86%, 100% { opacity: 0; transform: translateY(-18px); }
}

/* ---- Hero ----------------------------------------------------------
   Eigene, absichtlich unsymmetrische Blende: oben schmal, unten weit.
   Dadurch liegt im Ruhezustand ein breites Bildband über der Schrift
   und die Überschrift steht darunter auf dem dunklen Grund. Sie ist
   damit vom ersten Moment an lesbar, ohne dass etwas eingeblendet
   werden muss. */
#ap-1 { --ap-t: 12%; --ap-e: 24%; --ap-b: 43%; --ap-w: 24%; }
@media (max-width: 1100px) { #ap-1 { --ap-e: 12%; --ap-w: 12%; --ap-b: 46%; } }
@media (max-width: 640px)  { #ap-1 { --ap-t: 9%; --ap-e: 6%; --ap-w: 6%; --ap-b: 52%; } }

.ap-1 .ap__top {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  padding-top: clamp(1.25rem, 3.5vh, 2.5rem);
}
.ap-1 .ap__content { padding-bottom: clamp(1.5rem, 5vh, 3.5rem); }

.hero__kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.1rem;
}
.hero__kicker::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: var(--brand); vertical-align: middle; margin-right: .75rem;
}
/* Zwei Gewichtungen statt zweier Farben. Eine komplett rote Headline
   wäre genau der Auto-Look, den diese Seite nicht haben soll: das Rot
   bleibt den Handlungen vorbehalten. */
.hero__h1 { max-width: 16ch; color: var(--ink-2); }
.hero__h1 em { font-style: normal; color: var(--ink); display: block; }
.hero__sub { margin: 1.4rem 0 2rem; max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  /* Ohne diese Angabe zieht der Browser seinen eigenen Knopfhintergrund
     heran. Bei .btn--quiet, das selbst keinen setzt, ergab das einen
     weißen Block mitten auf dunklem Grund. */
  background: none;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: .92rem; font-variation-settings: 'wdth' 105, 'wght' 650;
  cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.975); }

.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-deep); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.03); }
.btn--ghost:hover { border-color: var(--ink-3); background: rgba(255,255,255,.07); }

.btn--quiet { color: var(--ink-2); padding-inline: 0; }
.btn--quiet:hover { color: var(--ink); }

.btn--sm { padding: .55rem 1rem; font-size: .82rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* --------------------------------------------------------- Reifensuche */
.search { background: var(--surface); border-block: 1px solid var(--line); }
.search__in { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) {
  .search__in { grid-template-columns: 1fr 1.15fr; align-items: center; }
}

/* Die Größe groß in Mono. Das ersetzt die gezeichnete Reifengrafik
   der alten Seite und ist das ehrlichere Bild. */
.search__display {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1; letter-spacing: -.04em;
  display: flex; align-items: baseline; gap: .1em; flex-wrap: wrap;
}
.search__display span { transition: color .25s var(--ease); }
.search__display .is-set { color: var(--ink); }
.search__display .is-unset { color: var(--ink-3); }
.search__display .sep { color: var(--brand); }
.search__meta {
  margin-top: 1rem; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

.seg {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; flex-wrap: wrap;
}
.seg button {
  background: none; border: 0; padding: .6rem 1.1rem;
  font-size: .85rem; color: var(--ink-2); cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }

.field { display: flex; flex-direction: column; gap: .45rem; }
.field > label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.field select, .field input, .field textarea {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .8rem .9rem;
  color: var(--ink);
  width: 100%;
  transition: border-color .18s var(--ease);
}
.field select:hover, .field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field select:focus, .field input:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
}
.field select:disabled { opacity: .4; }
.field textarea { resize: vertical; min-height: 7rem; }
.field ::placeholder { color: var(--ink-3); opacity: 1; }
.field--err input, .field--err select, .field--err textarea { border-color: var(--action); }
.field__err { font-size: .8rem; color: var(--action); }

.search__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 560px) { .search__row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Banner */
.promo {
  background: var(--action);
  color: #fff;
}
.promo__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-block: 1.5rem;
}
.promo__tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.promo__h { font-variation-settings: 'wdth' 112, 'wght' 700; font-size: clamp(1.15rem,2vw,1.6rem); margin: .2rem 0 .1rem; }
.promo__sub { font-size: .88rem; color: rgba(255,255,255,.8); margin: 0; }
.promo__right { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cd { display: flex; gap: .4rem; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.cd div { background: rgba(0,0,0,.22); padding: .5rem .7rem; border-radius: var(--r); text-align: center; min-width: 3.4rem; }
.cd b { display: block; font-size: 1.25rem; line-height: 1; font-weight: 600; }
.cd span { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.66); margin-top: .25rem; }
.promo .btn--primary { background: #fff; color: var(--action); }
.promo .btn--primary:hover { background: rgba(255,255,255,.88); }

/* ---------------------------------------------------------- Leistungen */
/* Ein großes Feld, fünf schmale. Ausdrücklich keine drei gleichen Karten. */
.svc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px)  { .svc { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .svc { grid-template-columns: repeat(4, 1fr); } }

.svc__item {
  background: var(--ground);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex; flex-direction: column; gap: .7rem;
  transition: background .25s var(--ease);
}
.svc__item:hover { background: var(--surface); }
@media (min-width: 1280px) {
  .svc__item:first-child { grid-column: span 2; grid-row: span 2; justify-content: flex-end; }
  .svc__item:first-child .svc__title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
  .svc__item:first-child .svc__body { max-width: 44ch; font-size: 1.05rem; }
}
.svc__ico { color: var(--brand); margin-bottom: .35rem; }
.svc__title { font-variation-settings: 'wdth' 110, 'wght' 700; font-size: 1.12rem; margin: 0; letter-spacing: -.01em; }
.svc__body { color: var(--ink-2); font-size: .92rem; margin: 0; }

/* -------------------------------------------------------- Einlagerung */
.storage__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 1000px) { .storage__grid { grid-template-columns: 1.25fr .75fr; align-items: end; } }
.storage__feats { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .7rem; }
.storage__feats li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-2); font-size: .94rem; }
.storage__feats svg { color: var(--brand); flex: none; margin-top: .3rem; }
.storage__price {
  border-left: 2px solid var(--brand); padding-left: 1.25rem;
}
.storage__price b {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; font-weight: 600;
}
.storage__price span { color: var(--ink-2); font-size: .88rem; }

/* ----------------------------------------------------------- Produkte */
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 3vw, 3rem);
}

.grid-4 { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1320px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--ground);
  display: flex; flex-direction: column;
  transition: background .25s var(--ease);
}
.card:hover { background: var(--surface); }

.card__media {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--surface-2);
  display: grid; place-items: center; overflow: clip;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media svg { color: var(--ink-3); }
.card__badge {
  position: absolute; top: .7rem; left: .7rem;
  background: var(--action); color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: var(--r);
}
.card__body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__brand {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.card__name { font-variation-settings: 'wdth' 108, 'wght' 650; font-size: 1rem; margin: 0; letter-spacing: -.01em; }
.card__dim { font-size: 1.05rem; color: var(--ink); }
.card__foot {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.card__price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.03em;
}
.card__price small { font-size: .68rem; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }

.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; padding: .2rem .5rem; border-radius: var(--r);
  border: 1px solid var(--line); color: var(--ink-2);
}
.tag--summer  { color: #FBBF24; border-color: rgba(251,191,36,.32); }
.tag--winter  { color: #7DD3FC; border-color: rgba(125,211,252,.32); }
.tag--allseason { color: #86EFAC; border-color: rgba(134,239,172,.32); }
.tag--res { color: var(--warn); border-color: rgba(251,191,36,.32); }
.tag--avail { color: var(--ok); border-color: rgba(74,222,128,.3); }

/* Profiltiefe. Echte Messwerte, deshalb ein Balken, aber ohne
   gefüllte Hintergrundschiene. */
.tread { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--ink-2); }
.tread__bar { flex: 1; height: 2px; background: var(--line); position: relative; }
.tread__bar i { position: absolute; inset: 0 auto 0 0; display: block; }
.tread--g i { background: var(--ok); }
.tread--y i { background: var(--warn); }
.tread--r i { background: var(--action); }
.tread__v { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--ink); }

.empty {
  grid-column: 1 / -1; background: var(--ground);
  padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;
}
.empty p { color: var(--ink-2); margin: .5rem 0 1.5rem; }

/* --------------------------------------------------- Gebrauchtware Rail */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(84vw, 340px);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-track { background: var(--surface); }
.rail::-webkit-scrollbar-thumb { background: var(--ink-3); }

/* ----------------------------------------------------------- Galerie */
.gal { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px)  { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 230px); } }
@media (min-width: 1000px) { .gal > :first-child { grid-column: span 2; grid-row: span 2; } }

.gal button {
  border: 0; padding: 0; background: var(--surface-2);
  position: relative; overflow: clip; cursor: pointer;
  aspect-ratio: 4 / 3;
}
@media (min-width: 1000px) { .gal button { aspect-ratio: auto; height: 100%; } }
.gal img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.78) saturate(.9);
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.gal button:hover img { transform: scale(1.05); filter: brightness(1) saturate(1); }
.gal figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1rem;
  background: linear-gradient(0deg, rgba(10,11,13,.9), transparent);
  font-size: .8rem; color: var(--ink-2); text-align: left;
}

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(6, 7, 8, .95);
  display: none; place-items: center; padding: clamp(1rem, 4vw, 3rem);
}
.lb[data-open="true"] { display: grid; }
.lb img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lb__cap { color: var(--ink-2); font-size: .85rem; margin-top: 1rem; text-align: center; }
.lb__x {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: none; border: 1px solid var(--line); color: var(--ink);
  width: 2.75rem; height: 2.75rem; border-radius: var(--r); cursor: pointer;
  display: grid; place-items: center;
}
.lb__x:hover { border-color: var(--brand); color: var(--brand); }
.lb__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  background: none; border: 1px solid var(--line); color: var(--ink);
  width: 2.75rem; height: 2.75rem; cursor: pointer; display: grid; place-items: center;
}
.lb__nav:hover { border-color: var(--brand); color: var(--brand); }
.lb__nav[data-dir="prev"] { left: 1.25rem; }
.lb__nav[data-dir="next"] { right: 1.25rem; }

/* -------------------------------------------------------- Bewertungen */
.rev { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .rev { grid-template-columns: .8fr 2.2fr; align-items: start; } }
.rev__score {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: 1;
  letter-spacing: -.05em; font-weight: 600;
}
.stars { display: flex; gap: 2px; color: var(--warn); margin: .6rem 0 .35rem; }
.rev__list { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 760px)  { .rev__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .rev__list { grid-template-columns: repeat(3, 1fr); } }
.rev__item { background: var(--ground); padding: 1.5rem; }
.rev__item p { color: var(--ink-2); font-size: .92rem; margin: 0 0 1rem; }
.rev__who { display: flex; align-items: baseline; gap: .6rem; font-size: .82rem; }
.rev__who b { font-variation-settings: 'wdth' 105, 'wght' 650; }
.rev__who span { color: var(--ink-3); }

/* ---------------------------------------------------------------- FAQ */
.faq { max-width: 62rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0; position: relative;
  font-variation-settings: 'wdth' 106, 'wght' 600;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px; translate: 0 -50%;
  background:
    linear-gradient(var(--ink-2) 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(var(--ink-2) 0 0) center / 1.5px 100% no-repeat;
  transition: rotate .3s var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--ink-2); margin: 0 0 1.5rem; max-width: 68ch; }

/* ------------------------------------------------------------ Kontakt */
.contact { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .contact { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--ink-2); }
.check input { margin-top: .25rem; accent-color: var(--brand); width: 1rem; height: 1rem; flex: none; }

.note {
  border: 1px solid var(--line); border-left: 2px solid var(--brand);
  padding: 1rem 1.15rem; font-size: .88rem; color: var(--ink-2);
}
.note--ok { border-left-color: var(--ok); }

.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts > div { background: var(--ground); padding: 1.35rem 1.5rem; display: flex; gap: 1rem; }
.facts svg { color: var(--brand); flex: none; margin-top: .2rem; }
.facts dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .3rem;
}
.facts dd { margin: 0; }

.hours { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hours th { text-align: left; font-weight: 400; color: var(--ink-2); padding: .35rem 0; }
.hours td { text-align: right; padding: .35rem 0; }
.hours .is-closed { color: var(--ink-3); font-style: italic; }
.hours tr[data-today="true"] th, .hours tr[data-today="true"] td { color: var(--ink); }
.hours tr[data-today="true"] th::before {
  content: ''; display: inline-block; width: 5px; height: 5px;
  background: var(--brand); margin-right: .55rem; vertical-align: middle;
}

/* -------------------------------------------------------- Textseiten */
.prose { max-width: 68ch; }
.prose h1 { margin: 0 0 2rem; }
.prose h2 {
  font-variation-settings: 'wdth' 110, 'wght' 700;
  font-size: 1.15rem; letter-spacing: -.01em;
  margin: 2.75rem 0 .75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.prose h3 { font-size: 1rem; font-weight: 650; margin: 1.75rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose address { font-style: normal; color: var(--ink); }

/* Stellen, die der Betreiber selbst ausfüllen muss. Bewusst auffällig,
   damit sie nicht versehentlich online gehen. */
.todo {
  border: 1px dashed var(--action); background: var(--action-wash);
  padding: 1rem 1.15rem; margin: 0 0 1.25rem; color: var(--ink-2); font-size: .9rem;
}
.todo b { color: var(--ink); display: block; margin-bottom: .35rem; }

/* ------------------------------------------------------------- Footer */
.foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot__grid { display: grid; gap: clamp(2rem, 3vw, 3rem); padding-block: var(--band-s); }
@media (min-width: 760px)  { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.foot h3 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.1rem; font-weight: 400;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot a { color: var(--ink-2); font-size: .9rem; }
.foot a:hover { color: var(--ink); }
.foot__bottom {
  border-top: 1px solid var(--line); padding-block: 1.1rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-3);
}
.foot__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ Ladeschirm
   Deckt den ersten Aufbau ab, solange Schrift und das große Blendenbild
   noch unterwegs sind. Der Balken zeigt echten Fortschritt: Schrift
   geladen, Hero-Bild geladen, Seite fertig. Er läuft nicht nach einer
   erfundenen Zeitkurve.

   Zwei Vorsichtsmaßnahmen: ohne JavaScript wird er gar nicht erst
   angezeigt, und nach spätestens drei Sekunden verschwindet er auf
   jeden Fall. Ein Ladeschirm, der hängenbleibt, sperrt die ganze Seite. */
#loader {
  position: fixed; inset: 0; z-index: 900;
  background: var(--ground);
  display: grid; place-items: center;
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
#loader[data-done="true"] {
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}

/* Zweite Notbremse, diesmal ohne JavaScript. Sollte site.js gar nicht
   ankommen, blendet der Schirm sich nach 3,5 Sekunden von selbst aus.
   Sonst stünde der Besucher vor einer dauerhaft verdeckten Seite. */
@keyframes rp-loader-weg {
  to { opacity: 0; visibility: hidden; }
}
#loader {
  animation-name: rp-loader-weg;
  animation-duration: .45s;
  animation-delay: 7.5s;
  animation-fill-mode: forwards;
  animation-timing-function: var(--ease);
}

.load__in { display: grid; justify-items: center; gap: 1.75rem; width: min(460px, 78vw); }
.load__logo { width: 100%; height: auto; }

.load__track {
  width: 100%; height: 4px;
  background: rgba(190, 205, 232, .12);
  position: relative; overflow: hidden;
}

/* Der Verlauf liegt fest über der ganzen Schiene und wird von links
   nach rechts freigelegt. Dadurch wandert die Farbe mit dem Fortschritt
   von Babyblau ins Logoblau, statt dass sich ein einfarbiger Balken
   schiebt. */
.load__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
      #CDE7FC   0%,     /* Babyblau, hell angesetzt damit es auch auf
                           vier Pixel Höhe als solches erkennbar ist */
      #96C8F2  22%,
      #4286D7  62%,     /* Bildschirmfassung des Logoblaus */
      #1F5DA6 100%);    /* Logoblau im Original */
  /* Kein CSS-Übergang: die Bewegung steuert das Skript Bild für Bild,
     damit der Balken weich nachläuft statt in vier Sprüngen zu hüpfen. */
  clip-path: inset(0 100% 0 0);
}

.load__pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .18em;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  #loader, .load__fill { transition-duration: .01ms; }
}

/* --------------------------------------------------------------- Toast */
.toasts {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 600;
  display: grid; gap: .5rem; pointer-events: none;
}
.toast {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  padding: .8rem 1.1rem; font-size: .88rem; max-width: 26rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast[data-in="true"] { opacity: 1; transform: none; }
.toast--ok { border-left-color: var(--ok); }

/* ------------------------------------------------------- Nach oben */
.totop {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 250;
  width: 2.9rem; height: 2.9rem; border-radius: var(--r);
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), background .18s var(--ease);
}
.totop[data-show="true"] { opacity: 1; pointer-events: auto; }
.totop:hover { background: var(--brand-deep); }

/* ------------------------------------------------------------- Reveal */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .rv[data-in="true"] { opacity: 1; transform: none; }
  .rv-d1 { transition-delay: .07s; }
  .rv-d2 { transition-delay: .14s; }
  .rv-d3 { transition-delay: .21s; }
}

/* ------------------------------------------------- Bewegung reduziert */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Blende bleibt offen und vollständig lesbar. */
  .ap__frame { clip-path: inset(0 0 0 0 round 0); }
  .ap__frame img { transform: none; }
  .ap__content { opacity: 1; transform: none; }
  .ap__veil { opacity: 1; }
}

/* Ohne Unterstützung für scroll-driven animations (Firefox stable noch
   nicht, iOS vor 26) gilt derselbe Zustand: Blende offen, Schleier an,
   Section nur eine Bildschirmhöhe hoch. Kein Leerlauf beim Scrollen. */
@supports not (animation-timeline: view()) {
  .ap__frame { clip-path: inset(0 0 0 0 round 0); }
  .ap__veil { opacity: 1; }
}

/* ------------------------------------------------------- EU-Reifenlabel
   Kompakte Wiedergabe der Pflichtangaben nach Verordnung 2020/740 auf der
   Produktkarte. Die Klassenbuchstaben stehen in der Mono-Schrift, damit
   sie zur übrigen Kennzeichnung der Reifen passen. */
.eul {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: .2rem 0 0;
  background: var(--line); border: 1px solid var(--line);
}
.eul > div { background: var(--surface); padding: .45rem .4rem .5rem; text-align: center; }
.eul dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .2rem;
}
.eul dd { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.eul__db { font-size: .78rem; color: var(--ink-2); }
.eul__leer { color: var(--ink-3); font-weight: 400; }

.eul__zeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 0; }
.eul__zeile .tag { gap: .3rem; }
.eul__eprel {
  font-size: .72rem; color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px;
}
.eul__eprel:hover { color: var(--ink); }

/* Auflösung von Tragfähigkeits- und Geschwindigkeitsindex.
   "91 V" sagt den wenigsten etwas, deshalb steht die Bedeutung
   kleingeschrieben darunter. */
.card__idx { margin: -.15rem 0 0; font-size: .76rem; color: var(--ink-3); }