/* AJ Automobile – schlichtes, schnelles Stylesheet. Kein JS, keine externen Fonts. */

:root {
  /* Farben aus dem Logo: Schwarz des A, Dunkelrot des J. */
  --bg: #ffffff;
  --bg-2: #f7f7f8;
  --text: #1c1d20;
  --text-leise: #62656d;
  --linie: #e3e4e8;
  --akzent: #8e2b38;
  --akzent-hell: #a8333f;
  --akzent-text: #ffffff;
  --fokus: #8e2b38;
  --schwarz: #1f1f1f;
  --radius: 10px;
  --breite: 1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15161a;
    --bg-2: #1d1f25;
    --text: #eaecf0;
    --text-leise: #a4a8b2;
    --linie: #2d3038;
    --akzent: #e2808c;
    --akzent-hell: #eb949f;
    --akzent-text: #1a0f12;
    --fokus: #e2808c;
    --schwarz: #eaecf0;
  }
}
:root[data-theme="dark"] {
  --bg: #15161a; --bg-2: #1d1f25; --text: #eaecf0; --text-leise: #a4a8b2;
  --linie: #2d3038; --akzent: #e2808c; --akzent-hell: #eb949f;
  --akzent-text: #1a0f12; --fokus: #e2808c; --schwarz: #eaecf0;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 3px;
}

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

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--linie); background: var(--bg); }
.kopf .huelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px;
}
/* Schriftzug nach dem Aufbau des Logos: A schwarz, J rot, Wortmarke daneben. */
.marke {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; line-height: 1;
}
.marke-zeichen {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.045em;
}
.marke-zeichen b { color: var(--schwarz); font-weight: 800; }
.marke-zeichen i { color: var(--akzent); font-style: normal; font-weight: 800; }
.marke-wort {
  font-size: .82rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-leise);
}
.marke:hover .marke-wort { color: var(--text); }

/* Liegt eine Logodatei in assets/, tritt sie an die Stelle des Schriftzugs.
   Die Vorlage ist freigestellt; im Dunkelmodus liefert <picture> eine Fassung
   mit aufgehelltem Schwarz, damit das A nicht im Hintergrund verschwindet. */
.marke-bild { display: block; height: 58px; width: auto; }

/* Mit Logo: Bild plus ausgeschriebener Name.
   Ohne Logo: der gesetzte Schriftzug A/J + AUTOMOBILE. */
.marke:has(.marke-bild) .marke-zeichen,
.marke:has(.marke-bild) .marke-wort { display: none; }
.marke:not(:has(.marke-bild)) .marke-name { display: none; }

.marke-name {
  font-size: 1.12rem; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em; white-space: nowrap;
}
.marke:hover .marke-name { color: var(--akzent); }

@media (max-width: 420px) {
  .marke-bild { height: 46px; }
  .marke-name { font-size: 1rem; }
}

.marke-wort {
  font-size: .82rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-leise);
}
.marke:hover .marke-wort { color: var(--text); }

/* Liegt eine Logodatei in assets/, tritt sie an die Stelle der Buchstaben AJ.
   Das Logo ist hochformatig und enthält unten den Zusatz "AUTO MOBILE", der in
   Kopfzeilengröße nicht lesbar wäre. Statt die Datei zu beschneiden, zeigt der
   Browser nur den oberen Teil - die Marke selbst. */
.kopf nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.95rem; }
.kopf nav a { color: var(--text-leise); text-decoration: none; }
.kopf nav a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Typografie ---------- */
h1, h2, h3 { line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.28rem, 1.05rem + 1vw, 1.6rem); margin-top: 2.2em; font-weight: 700; }
h3 { font-size: 1.08rem; margin-top: 1.6em; }

/* Abschnittsüberschriften bekommen eine kurze Linie in der Markenfarbe. */
.kategorie > h2 {
  position: relative; padding-top: 14px; margin-top: 0;
}
.kategorie > h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 3px; border-radius: 2px; background: var(--akzent);
}
p { margin: 0 0 1em; }
.leise { color: var(--text-leise); }

.einleitung { max-width: 68ch; margin: 44px 0 8px; }
.einleitung p { font-size: 1.05rem; color: var(--text-leise); }
.einleitung p:first-of-type {
  font-size: 1.15rem; line-height: 1.6; color: var(--text);
}

/* ---------- Produktliste ---------- */
.kategorie { margin: 56px 0; scroll-margin-top: 24px; }
.kategorie > p { max-width: 70ch; color: var(--text-leise); margin-bottom: 1.6em; }

.liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.karte {
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.karte:hover {
  border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie));
  box-shadow: 0 6px 22px rgba(20, 22, 26, .09);
}
@media (prefers-reduced-motion: no-preference) { .karte:hover { transform: translateY(-3px); } }
.karte .bildlink { overflow: hidden; }
.karte img { transition: transform .35s ease; }
@media (prefers-reduced-motion: no-preference) {
  .karte:hover img { transform: scale(1.025); }
}

.karte a.bildlink { display: block; background: var(--bg-2); }
.karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.karte .inhalt { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.karte h3 { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.35; }
.karte h3 a { text-decoration: none; }
.karte h3 a:hover { text-decoration: underline; text-underline-offset: 2px; }
.karte .marke-zeile { font-size: .82rem; color: var(--text-leise); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.karte .eckdaten { margin: 0 0 12px; font-size: .9rem; color: var(--text-leise); line-height: 1.5; }
.karte .preis {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em;
}
.karte .preis small { display: block; font-size: .72rem; font-weight: 400; color: var(--text-leise); letter-spacing: 0; }

/* ---------- Produktseite ---------- */
.brotkrumen { font-size: .88rem; color: var(--text-leise); margin: 24px 0 8px; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.brotkrumen li::after { content: "›"; margin-left: 6px; color: var(--linie); }
.brotkrumen li:last-child::after { content: ""; }
.brotkrumen a { color: var(--text-leise); }

.produkt-kopf { margin-bottom: 28px; }
.produkt-kopf h1 { margin-bottom: .25em; }
.produkt-preis {
  font-size: 1.75rem; font-weight: 700; margin: 0;
  letter-spacing: -0.02em;
}
.produkt-preis small { font-size: .8rem; font-weight: 400; color: var(--text-leise); display: block; }

/* Kennzahlenleiste: die wichtigsten Werte direkt neben dem Preis */
.kennzahlen {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.kennzahlen li {
  border: 1px solid var(--linie); border-radius: 8px;
  padding: 8px 14px; min-width: 110px; background: var(--bg-2);
}
.kennzahlen span {
  display: block; font-size: .74rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-leise);
}
.kennzahlen b { font-size: 1rem; font-weight: 600; }

/* Die erste Überschrift einer Spalte braucht keinen Abstand nach oben –
   welcher Baustein dort steht, entscheidet site.json. */
.spalten > div > h2:first-child,
.beschreibung > h2:first-child { margin-top: 0; }

/* Galerie: reines CSS, scroll-snap */
.galerie { margin: 0 0 28px; }
.galerie .buehne {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 10px; border-radius: var(--radius); background: var(--bg-2);
  scrollbar-width: thin;
}
.galerie .buehne > figure {
  flex: 0 0 100%; margin: 0; scroll-snap-align: center;
  position: relative;
  /* Ohne diesen Abstand springt die Seite beim Klick auf einen Pfeil nach oben */
  scroll-margin-top: 90px;
}

/* Vor/Zurueck: reine Anker auf das Nachbarbild, kein JavaScript noetig. */
.galerie .pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .88);
  color: #16181d;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  text-decoration: none;
  font-size: 2rem; line-height: 1; font-weight: 400;
  padding-bottom: 4px;
  transition: background .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.galerie .pfeil:hover { background: #fff; }
.galerie .pfeil.zurueck { left: 12px; }
.galerie .pfeil.vor { right: 12px; }
.galerie .pfeil.zurueck span { margin-right: 2px; }
.galerie .pfeil.vor span { margin-left: 2px; }

.galerie .zaehler {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(20, 22, 26, .72); color: #fff;
  font-size: .8rem; padding: 4px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.galerie-hinweis { font-size: .85rem; margin: 6px 0 0; }

@media (max-width: 520px) {
  .galerie .pfeil { width: 40px; height: 40px; font-size: 1.7rem; }
  .galerie .pfeil.zurueck { left: 8px; }
  .galerie .pfeil.vor { right: 8px; }
}
.galerie .buehne img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg-2); }
.galerie .daumen {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: thin;
}
.galerie .daumen a { flex: 0 0 82px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; }
.galerie .daumen a:hover { border-color: var(--akzent); }
.galerie .buehne > figure:target { scroll-snap-align: center; }
.galerie .daumen img { width: 82px; aspect-ratio: 4 / 3; object-fit: cover; }

.spalten { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .spalten { grid-template-columns: 1.55fr 1fr; align-items: start; } }

.datenblatt { border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.datenblatt tr:nth-child(odd) { background: var(--bg-2); }
.datenblatt table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.datenblatt th, .datenblatt td { text-align: left; padding: 10px 14px; vertical-align: top; }
.datenblatt th { width: 42%; font-weight: 600; color: var(--text-leise); }
.datenblatt tr + tr { border-top: 1px solid var(--linie); }
/* Ausführungen mit eigenem Preis */
.varianten { max-width: 46rem; margin: 0 0 6px; }
.varianten caption {
  caption-side: bottom; text-align: left; padding: 8px 14px;
  font-size: .85rem; color: var(--text-leise);
}
.varianten th { width: auto; color: var(--text); font-weight: 500; }
.varianten td { text-align: right; font-weight: 600; white-space: nowrap; }
.varianten td .leise { font-weight: 400; }

.beschreibung { max-width: 72ch; }
.beschreibung ul { padding-left: 1.15em; margin: 0 0 1em; }
.beschreibung li { margin-bottom: .3em; }

details.block {
  border: 1px solid var(--linie); border-radius: var(--radius);
  margin: 0 0 12px; background: var(--bg);
}
details.block > summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::after { content: "+"; font-size: 1.3rem; color: var(--text-leise); line-height: 1; }
details.block[open] > summary::after { content: "–"; }
details.block > div { padding: 0 16px 16px; }
details.block h4 { margin: 1.2em 0 .4em; font-size: .95rem; }
details.block ul { margin: 0 0 1em; padding-left: 1.15em; }
details.block li { margin-bottom: .25em; }

.kontaktbox {
  border: 1px solid var(--linie); border-top: 3px solid var(--akzent);
  border-radius: 12px; padding: 22px; background: var(--bg-2);
  position: sticky; top: 18px;
}
@media (max-width: 899px) { .kontaktbox { position: static; } }
.kontaktbox h2 { margin-top: 0; font-size: 1.15rem; }
.knopf {
  display: inline-block; background: var(--akzent); color: var(--akzent-text);
  padding: 12px 20px; border-radius: 9px; text-decoration: none; font-weight: 600;
  margin: 4px 8px 4px 0; transition: background .15s ease, transform .15s ease;
}
.knopf:hover { background: var(--akzent-hell); }
.knopf:active { transform: translateY(1px); }
.knopf.sekundaer { background: transparent; color: var(--text); border: 1px solid var(--linie); }

/* ---------- Textseiten ---------- */
.textseite { max-width: 72ch; margin: 32px 0 0; }
.textseite h2 { margin-top: 1.8em; font-size: 1.2rem; }
.textseite dl { margin: 0 0 1.4em; }
.textseite dt { font-weight: 600; margin-top: .8em; }
.textseite dd { margin: 0; }
.textseite ul { padding-left: 1.2em; }
.textseite ol { padding-left: 1.2em; }
.textseite ol li { margin-bottom: .6em; }
.textseite h3 { margin-top: 1.4em; font-size: 1rem; }
.textseite h3 + p { margin-top: .3em; }
/* Markenliste auf der Batterietest-Seite */
.zwei-spalten {
  columns: 2; column-gap: 28px; padding-left: 1.2em;
  margin: 0 0 1.4em;
}
.zwei-spalten li { margin-bottom: .3em; break-inside: avoid; }
.textseite li { margin-bottom: .4em; }

/* Hinweis an den Betreiber – erscheint nur, solange Platzhalter offen sind. */
.hinweis-kasten {
  border: 2px solid var(--akzent); border-radius: 10px;
  padding: 14px 16px; background: var(--bg-2);
}

/* Erklärung der durchgestrichenen Mülltonne */
.zeichen {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 16px 18px; background: var(--bg-2); margin: 0 0 1.2em;
}
.zeichen p { margin: 0; }
.zeichen .tonne { flex: 0 0 auto; color: var(--text); }

/* Muster-Widerrufsformular zum Ausdrucken */
.formular {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 20px 22px; background: var(--bg-2);
}
.formular p { margin: 0 0 .9em; }
.formular p:last-child { margin-bottom: 0; }

/* ---------- Fuss ---------- */
.fuss {
  border-top: 1px solid var(--linie); margin-top: 72px;
  padding: 30px 0 44px; font-size: .92rem; color: var(--text-leise);
  background: var(--bg-2);
}
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.fuss a { color: var(--text-leise); }
.fuss nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Hilfen ---------- */
.zum-inhalt {
  position: absolute; left: -9999px; top: 0; background: var(--akzent); color: var(--akzent-text);
  padding: 10px 16px; z-index: 10; border-radius: 0 0 8px 0;
}
.zum-inhalt:focus { left: 0; }

.sprungliste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Kategorie- und Filterfelder teilen sich dieselbe Gestalt. */
.sprungliste a,
.unterfilter a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linie); background: var(--bg);
  border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: .9rem; text-decoration: none; color: var(--text);
}
.sprungliste a b,
.unterfilter a b {
  font-weight: 600; font-size: .78rem;
  background: var(--bg-2); color: var(--text-leise);
  border-radius: 999px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.sprungliste a:hover,
.unterfilter a:hover { border-color: var(--akzent); color: var(--akzent); }
.sprungliste a:hover b,
.unterfilter a:hover b { background: var(--akzent); color: var(--akzent-text); }

/* Navigationsblock: Kategorien und darunter die Filterseiten - ein Element,
   nicht zwei lose Chip-Reihen. */
.bereiche {
  margin: 28px 0 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 16px 18px;
}

.unterfilter {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.unterfilter p {
  margin: 0 0 8px; font-size: .85rem; color: var(--text-leise);
}
.unterfilter ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.unterfilter a.alle { border-style: dashed; }

/* Auf den Filterseiten steht der Block allein, ohne Rahmen und Trennlinie */
.unterfilter:first-child {
  margin-top: 22px; padding-top: 0; border-top: 0;
}