/* ==========================================================================
   GPS-Infostars — Basis
   Reihenfolge: Reset, Typografie, Layout, Komponenten, WooCommerce
   ========================================================================== */

/* --- Schriften, lokal gehostet ------------------------------------------- */
/* Seit 0.28.0 eine verkleinerte Fassung: nur lateinische Zeichen (inkl.
   Ä Ö Ü ß, č ž ć š, € „ “ — → ✓), Stärken 400 bis 700, ohne Optical-Size-Achse.
   47 statt 352 KB. Sie wird auf jeder Seite mit höchster Priorität geladen —
   jedes Kilobyte hier verzögert am Telefon das erste Bild.
   Neue Zeichen nötig? Siehe assets/fonts/LIESMICH.txt. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Ersatzschrift mit Inters Maßen. Bis Inter geladen ist, steht der Text in
   Arial — so zugeschnitten, dass beim Wechsel nichts verrutscht (CLS). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}
/* Playfair Display liegt noch nicht bei — siehe assets/fonts/LIESMICH.txt.
   Solange die Datei fehlt, greift der Serif-Rückfall aus --font-display. */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Kein overflow-x: hidden mehr auf html.
   Es hat zu breiten Inhalt nicht behoben, sondern unsichtbar abgeschnitten —
   der Leser konnte nicht einmal hinscrollen. Breite Inhalte werden jetzt dort
   gebändigt, wo sie entstehen (siehe shop.css). Bleibt doch etwas übrig,
   ist es sichtbar und damit behebbar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* --- Typografie ----------------------------------------------------------- */
/* overflow-wrap als Sicherung: Eine lange Überschrift darf nie über den
   Rand hinauslaufen. Greift nur, wenn ein Wort allein zu breit ist — am
   normalen Umbruch ändert es nichts. */
h1, h2, h3, h4, h5, h6 { color: var(--c-primary); text-wrap: balance; overflow-wrap: break-word; }

/* Überschriften sind Inter. Immer. Ohne Ausnahme außer der Hero-Klasse.
 *
 * !important, und das ist hier kein Zurückbiegen, sondern eine Hausregel:
 * Der Blockeditor kann jeder Überschrift eine eigene Schrift mitgeben — wer
 * einen Text als "Vorformatiert" einfügt oder aus Word kopiert, bekommt
 * Schreibmaschinenschrift oder Calibri, ohne es zu merken. Genau das ist auf
 * der Tracking-Vergleichsseite passiert, während dieselbe Seite fürs
 * Fahrtenbuch richtig aussah: gleicher Code, anderer Block.
 *
 * Eine Regel, die nur dort greift, wo das Plugin seine eigene Klasse setzt,
 * schützt die Hälfte der Seiten. Diese hier schützt alle. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body) !important;
}

/* Die eine bewusste Ausnahme. */
.hero h1, h1.hero__titel, .titel--hero {
  font-family: var(--font-display) !important;
}
/* Überschriften sind Inter — ALLE, auch h1.
 *
 * Die CI-Vorgabe ist dabei eindeutig: "Playfair Display sollte nur für Hero
 * Headlines verwendet werden." Das Theme hat sie trotzdem auf jedes h1
 * gelegt, also auch auf "Warenkorb", "Kasse" und jede Vergleichsseite — und
 * danach an zwei Stellen wieder auf Inter zurückgedreht, beim Shop-Kopf sogar
 * mit !important. Drei verschiedene Verhaltensweisen für dasselbe Element,
 * und als Ergebnis wechselt die Schrift beim Blättern durch den Shop.
 *
 * Jetzt gilt eine Regel: Inter, außer die Überschrift ist ausdrücklich als
 * Hero ausgezeichnet. Das ist auch die ehrlichere Lesart der Vorgabe — ein
 * Seitentitel über einer Produktliste ist keine Hero Headline. */
h1 {
  font-family: var(--font-body);
  font-size: var(--step-4);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Die Ausnahme, bewusst gesetzt: der große Aufmacher einer Landingpage.
   Dort — und nur dort — trägt Playfair die Eleganz, für die sie gewählt
   wurde. */
.hero h1, h1.hero__titel, .titel--hero {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2 { font-size: var(--step-3); font-weight: var(--fw-semibold); line-height: 1.25; }
h3 { font-size: var(--step-1); font-weight: var(--fw-semibold); line-height: 1.35; }
h4 { font-size: var(--step-0); font-weight: var(--fw-semibold); }
p, li { text-wrap: pretty; }
p { max-width: var(--measure); }
a { color: var(--c-primary); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-gold-muted); }
small, .text-small { font-size: var(--step--1); color: var(--c-text-muted); }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--space-s), var(--wrap)); margin-inline: auto; }
.stack > * + * { margin-block-start: var(--space-s); }
.section { padding-block: var(--space-2xl); }
.grid-cards {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.skip-link {
  position: absolute; left: -9999px;
  background: var(--c-primary); color: #fff; padding: var(--space-2xs) var(--space-s);
}
.skip-link:focus { left: var(--space-s); top: var(--space-s); z-index: 100; }

/* --- Kopf ----------------------------------------------------------------- */
.site-header {
  background: var(--c-primary);
  color: #fff;
  padding-block: var(--space-xs);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header a { color: #fff; text-decoration: none; }

/* Der Adminbalken schiebt die Kopfzeile nur dann nach unten, wenn er auch
   wirklich darüber steht. Vorher galt der Versatz immer — bei Besuchern ohne
   Anmeldung und am Telefon klaffte deshalb eine leere Zeile über der Leiste.
   Unter 600 px setzt WordPress den Balken nach oben weg, dort also kein Versatz. */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; }
.site-brand { font-weight: var(--fw-bold); font-size: var(--step-1); letter-spacing: -0.01em; display: flex; align-items: center; }

/* Das Logo.
 *
 * Höhe statt Breite begrenzt: Die Kopfzeile hat eine feste Höhe, und ein Logo
 * mit anderem Seitenverhältnis — ein Querformat etwa — würde sie sonst
 * auseinandertreiben. 2.5rem entspricht rund 40 Pixeln; darunter wird die
 * Schrift in einem Wort-Bild-Logo unleserlich.
 *
 * object-fit: contain, falls jemand ein Logo mit anderem Zuschnitt hochlädt:
 * lieber Luft daneben als ein abgeschnittener Buchstabe. */
.site-brand img,
.site-brand .custom-logo {
  display: block;
  block-size: auto;
  max-block-size: 2.5rem;
  inline-size: auto;
  max-inline-size: min(100%, 15rem);
  object-fit: contain;
}
@media (max-width: 48rem) {
  .site-brand img,
  .site-brand .custom-logo { max-block-size: 2rem; max-inline-size: 11rem; }
}

.site-brand span { color: var(--c-gold); }

/* --- Helle Kopfzeile ------------------------------------------------------
 *
 * Für ein Logo mit dunkler Schrift auf hellem Grund. Es wechselt nur, welche
 * Farbe Grund und welche Schrift ist — die Palette bleibt dieselbe, der
 * goldene Akzent markiert weiterhin den aktiven Punkt. */
body.kopf-hell .site-header {
  background: #fff;
  color: var(--c-text, #333);
  border-block-end: 1px solid var(--c-border, #E2DFD8);
}
body.kopf-hell .site-header a { color: var(--c-primary, #1d3a5f); }
body.kopf-hell .site-brand span { color: var(--c-gold); }
body.kopf-hell .nav-toggle__balken,
body.kopf-hell .nav-toggle__balken::before,
body.kopf-hell .nav-toggle__balken::after { background: var(--c-primary, #1d3a5f); }
body.kopf-hell .warenkorb-zahl { background: var(--c-primary, #1d3a5f); color: #fff; }

/* Die aufklappbare Fläche am Telefon erbt den Grund der Kopfzeile — sonst
   klappt aus einer weißen Leiste ein dunkles Feld heraus. */
@media (max-width: 48rem) {
  body.kopf-hell .site-panel { background: #fff; }
}
.site-nav ul { display: flex; gap: var(--space-m); list-style: none; padding: 0; flex-wrap: wrap; }
.site-nav a {
  font-weight: var(--fw-medium); font-size: var(--step--1);
  padding-block: var(--space-3xs); border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav .current-menu-item > a { border-bottom-color: var(--c-gold); }

/* --- Untermenüs ----------------------------------------------------------
 *
 * Bis 0.11 gab es dazu keine einzige Zeile — und das fiel niemandem auf,
 * weil der Hauptnavigation gar kein Menü zugewiesen war. Mit dem ersten
 * Menü standen alle Unterpunkte offen in der Kopfzeile und schoben sie auf
 * drei Zeilen auseinander.
 *
 * Aufgeklappt wird ohne JavaScript, über :hover und :focus-within. Der Trick
 * dabei ist, WIE versteckt wird: display:none und visibility:hidden nehmen
 * den Verweisen die Fokussierbarkeit — dann springt die Tabulatortaste nie
 * hinein, :focus-within greift nie, und das Untermenü ist mit der Tastatur
 * unerreichbar. Deshalb wird es stattdessen aus dem Bild geschoben. Dort ist
 * es weiterhin fokussierbar, und der erste Tabulatorsprung holt es zurück.
 */
.site-nav li { position: relative; }

.site-nav .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -9999px;
  flex-direction: column;
  gap: 0;
  min-inline-size: max-content;
  margin: 0;
  /* Die eigene Hintergrundfarbe der Kopfzeile, damit das Feld auch über
     hellem Seiteninhalt lesbar bleibt. */
  background: var(--c-primary);
  padding: var(--space-2xs) var(--space-s);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 60;
}

/* Kein Spalt zwischen Punkt und Feld: Wandert die Maus durch eine Lücke,
   verliert sie den Hover und das Menü klappt mitten in der Bewegung zu. */
.site-nav .menu-item-has-children > a { padding-block-end: var(--space-2xs); }

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
  inset-inline-start: 0;
}

/* Ein Pfeil sagt, dass da noch etwas kommt. Ohne ihn sieht ein Punkt mit
   Untermenü aus wie einer ohne — und niemand fährt mit der Maus darüber. */
.site-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  inline-size: 0.4em;
  block-size: 0.4em;
  margin-inline-start: 0.45em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

body.kopf-hell .site-nav .sub-menu {
  background: #fff;
  border: 1px solid var(--c-border, #E2DFD8);
}
.site-header__actions { margin-inline-start: auto; display: flex; gap: var(--space-s); align-items: center; }

/* Sprachwahl: ein kleiner Verweis auf die andere Sprache (seit 0.24.2) */
.sprach-link {
  font-size: var(--step--1); font-weight: var(--fw-semibold); letter-spacing: .06em;
  line-height: 1; padding: .3em .45em;
  border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius);
}
.sprach-link:hover, .sprach-link:focus-visible { border-color: var(--c-gold); color: var(--c-gold); }
body.kopf-hell .sprach-link { border-color: currentColor; }

/* Am Rechner etwas engere Abstände im Hauptmenü — damit Menü, Kontakt und
   Sprache in einer Zeile Platz haben, auch mit den längeren englischen
   Beschriftungen. */
@media (min-width: 861px) {
  .site-nav ul { gap: var(--space-s); }
  .site-header__inner { gap: var(--space-s); }
}

/* --- Fuß ------------------------------------------------------------------ */
.site-footer {
  background: var(--c-primary); color: #fff;
  padding-block: var(--space-xl) var(--space-m);
  margin-block-start: var(--space-3xl);
}
.site-footer a { color: #fff; opacity: .85; text-decoration: none; }
.site-footer a:hover { opacity: 1; color: var(--c-gold); }
.site-footer h4 { color: var(--c-gold); margin-block-end: var(--space-2xs); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-block-start: var(--space-3xs); }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-block-start: var(--space-l); padding-block-start: var(--space-s);
  font-size: var(--step--1); opacity: .75;
}

/* --- Knöpfe --------------------------------------------------------------- */
.btn, .button, button[type="submit"] {
  display: inline-block;
  font-family: var(--font-body); font-size: var(--step-0);
  font-weight: var(--fw-semibold); letter-spacing: .03em;   /* CI: 0,5px bei 16px */
  background: var(--c-gold); color: var(--c-primary);
  padding: var(--space-xs) var(--space-m);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover, .button:hover, button[type="submit"]:hover {
  background: var(--c-gold-muted); color: var(--c-primary);
}
.btn--ghost {
  background: transparent; color: var(--c-primary); border-color: var(--c-primary);
}
.btn--ghost:hover { background: var(--c-primary); color: #fff; }

/* --- Karten --------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-bottom: 3px solid var(--c-gold);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card__header {
  background: var(--c-gold-muted); color: #fff;
  padding: var(--space-xs) var(--space-s);
  font-weight: var(--fw-semibold);
}
.card__body { padding: var(--space-s); flex: 1; }

/* --- Hinweisleisten -------------------------------------------------------- */
.notice {
  border-inline-start: 3px solid var(--c-gold);
  background: var(--c-surface);
  padding: var(--space-xs) var(--space-s);
  font-size: var(--step--1);
}
.notice--warn { border-color: var(--c-warning); }

/* --- Häkchenliste ---------------------------------------------------------- */
.checklist { list-style: none; padding: 0; }
.checklist li { padding-inline-start: 1.6em; position: relative; }
.checklist li + li { margin-block-start: var(--space-2xs); }
.checklist li::before {
  content: "✓"; position: absolute; inset-inline-start: 0;
  color: var(--c-gold); font-weight: var(--fw-bold);
}

/* --- Navigations-Umschalter --------------------------------------------- */
.nav-toggle { display: none; background: none; border: 0; padding: var(--space-2xs); cursor: pointer; }
.nav-toggle__balken, .nav-toggle__balken::before, .nav-toggle__balken::after {
  display: block; width: 22px; height: 2px; background: #fff; transition: transform .2s ease;
}
.nav-toggle__balken::before, .nav-toggle__balken::after { content: ""; position: relative; }
.nav-toggle__balken::before { top: -7px; }
.nav-toggle__balken::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__balken { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__balken::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__balken::after { transform: translateY(-5px) rotate(-45deg); }

/* Am Rechner steht alles in einer Zeile, das Feld ist immer offen. */
.site-panel { display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; }
.site-header__actions { margin-inline-start: auto; }

@media (max-width: 860px) {
  /* Eine Zeile: Marke links, Warenkorb und Menüknopf rechts.
     Das Feld darunter erscheint nur auf Tastendruck. */
  /* wrap muss bleiben: Das Feld bekommt flex-basis 100 % und soll damit auf
     eine eigene Zeile rutschen. Mit nowrap blieb es in der Kopfzeile stehen
     und ragte nach rechts aus dem Bildschirm. Marke und Warenkorb stehen
     trotzdem nebeneinander, weil das Feld geschlossen display:none ist. */
  .site-header__inner { flex-wrap: wrap; gap: var(--space-s); row-gap: 0; }
  .site-brand { font-size: var(--step-0); }
  .nav-toggle { display: block; }
  .site-header__actions { margin-inline-start: auto; gap: var(--space-2xs); flex: 0 0 auto; }
  .warenkorb-link__text { display: none; }   /* nur die Zahl, das spart eine halbe Zeile */
  .konto-link__text { display: none; }       /* dasselbe fürs Konto: nur das Zeichen */

  .site-panel {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-block-size: calc(100svh - 8rem);
    overflow-y: auto;
    padding-block-start: var(--space-2xs);
  }
  .site-header--offen .site-panel { display: flex; }
  .site-panel > * { inline-size: 100%; }

  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-top: 1px solid rgba(255,255,255,.12); }
  .site-nav a { display: block; padding: var(--space-2xs) 0; }

  /* Am Telefon kein Aufklappen: Die Unterpunkte stehen eingerückt in der
     Liste. Ein Aufklappmenü im Aufklappmenü verlangt einen zweiten,
     zielgenauen Fingertipp — und wer den ersten nicht trifft, landet auf
     der Elternseite statt im Untermenü. Eingerückt sieht man alles auf
     einmal und trifft jede Zeile. */
  .site-nav .sub-menu {
    position: static;
    inset: auto;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 var(--space-s);
  }

  body.kopf-hell .site-nav .sub-menu { background: none; border: 0; }

  /* Der Pfeil zeigt am Telefon nichts an, was man anklicken könnte. */
  .site-nav .menu-item-has-children > a::after { display: none; }

  .site-header--offen .welt-schalter__liste { flex-direction: column; gap: 0; }
  .site-header--offen .welt-schalter a {
    display: block; padding: var(--space-2xs) var(--space-2xs);
    border-top: 1px solid rgba(255,255,255,.12); border-radius: 0;
  }
  .site-header--offen .welt-schalter a[aria-current] { border-radius: var(--radius); }
}

/* --- Fußzeile, Raster ---------------------------------------------------- */
.site-footer__spalten {
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* --- nur für Screenreader ------------------------------------------------ */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Inhaltsbereich einer Seite ------------------------------------------ */
.inhalt > * + * { margin-block-start: var(--space-s); }
.inhalt h2 { margin-block-start: var(--space-xl); }
.inhalt h3 { margin-block-start: var(--space-l); }
.inhalt ul, .inhalt ol { padding-inline-start: 1.4em; max-width: var(--measure); }
.inhalt li + li { margin-block-start: var(--space-3xs); }


/* --- Umschalter für den Anwendungsbereich --------------------------------
   Zeigt, in welcher Welt der Besucher ist, und lässt ihn wechseln.
   Die Wahl gilt für die Sitzung — über Produktseiten, Warenkorb und Kasse.
   Ausgabe von wp_nav_menu, Position „bereiche“: nav > ul > li > a. */
.welt-schalter__liste {
  display: flex; gap: var(--space-3xs); flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.welt-schalter a {
  font-size: var(--step--1); font-weight: var(--fw-medium);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius); text-decoration: none;
  color: rgba(255,255,255,.72); white-space: nowrap;
}
.welt-schalter a:hover { color: #fff; background: rgba(255,255,255,.08); }
.welt-schalter a[aria-current] {
  color: var(--c-primary); background: var(--c-gold); font-weight: var(--fw-semibold);
}
/* Zwischen 861 und 1080 px bleibt die Zeile bestehen, die Welt-Schaltflächen
   dürfen aber umbrechen, statt die Kopfzeile zu sprengen. */
@media (min-width: 861px) and (max-width: 1080px) {
  .site-panel { flex: 1 1 auto; }
  .welt-schalter__liste { flex-wrap: wrap; }
}

/* --- Einwilligung (seit 0.25.0) ------------------------------------------
   Eine Leiste am unteren Rand, kein Overlay: Sie blockiert nichts und
   verschiebt beim Laden nichts. "Ablehnen" und "Alle akzeptieren" sind
   bewusst gleich gestaltet. Am Telefon teilen sich die Knöpfe die Breite. */
.einwilligung {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  background: var(--c-surface); color: var(--c-text);
  border-top: 3px solid var(--c-gold);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  font-size: var(--step--1); line-height: 1.5;
  padding-block: var(--space-s);
  max-height: 85vh; overflow-y: auto;
}
.einwilligung[hidden], .einwilligung [hidden] { display: none; }
/* Seit 0.28.0 zeigt ein kleines Skript im Kopf die Leiste schon beim ersten
   Bild (Klasse einw-offen am <html>), statt auf messung.js zu warten. */
html.einw-offen .einwilligung[hidden] { display: block; }
.einwilligung__innen {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-s) var(--space-l);
}
.einwilligung__text { flex: 1 1 30rem; margin: 0; max-width: var(--measure); }
.einwilligung__text a { color: inherit; text-decoration: underline; }
.einwilligung__wahl { flex-basis: 100%; display: grid; gap: var(--space-2xs); order: 1; }
.einwilligung__wahl label { display: flex; gap: var(--space-2xs); align-items: flex-start; cursor: pointer; }
.einwilligung__wahl input { margin-block-start: .3em; accent-color: var(--c-primary); }
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2xs); order: 2; }
.einwilligung__knoepfe .btn { font-size: var(--step--1); padding: var(--space-2xs) var(--space-s); }
/* Die beiden Entscheidungen stehen nebeneinander und sind gleich breit;
   "Einstellungen" steht davor (Rechner) bzw. darunter (Telefon). */
.einwilligung__knoepfe [data-wahl="keine"],
.einwilligung__knoepfe [data-wahl="alle"] { min-width: 10.5rem; }
.einwilligung__knoepfe [data-wahl="einstellungen"],
.einwilligung__knoepfe [data-wahl="auswahl"] { order: -1; }
@media (max-width: 600px) {
  .einwilligung__knoepfe { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .einwilligung__knoepfe [data-wahl="keine"],
  .einwilligung__knoepfe [data-wahl="alle"] { min-width: 0; }
  .einwilligung__knoepfe [data-wahl="einstellungen"],
  .einwilligung__knoepfe [data-wahl="auswahl"] { order: 1; grid-column: 1 / -1; }
}
.einwilligung-oeffnen { white-space: nowrap; }

/* ==========================================================================
   Aus shop.css übernommen (seit 0.28.0)
   ==========================================================================
   shop.css lädt nur noch auf Shop-Seiten (Produkte, Kategorien, Warenkorb,
   Kasse, Mein Konto) und auf Seiten mit Shop-Shortcodes. Was auf JEDER Seite
   gebraucht wird, steht deshalb hier: Meldungen, Warenkorb und Konto im Kopf,
   Telefon/WhatsApp, der Menüknopf "Zusammenstellen", Kontakt und Anfrage,
   Verkaufsstatus, Formulare von Erweiterungen und das Bändigen von Tabellen
   im Seiteninhalt.

   Anlass: PageSpeed meldete auf der Startseite (Konfigurator) rund 17 KB
   ungenutztes CSS aus shop.css, das trotzdem das erste Bild aufhielt.

   Die Regeln stehen in derselben Reihenfolge wie vorher. Sie sind so
   geschrieben (:where(), :not(...)), dass sie mit den Shop-Regeln nicht
   konkurrieren; dass sie jetzt vor shop.css stehen, ändert nichts.
   ========================================================================== */

/* --- Meldungen --------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--c-surface); border-inline-start: 3px solid var(--c-gold);
  padding: var(--space-xs) var(--space-s); list-style: none; margin-block-end: var(--space-m);
}
.woocommerce-error { border-color: var(--c-danger); }
.woocommerce-message { border-color: var(--c-success); }

/* --- Warenkorb und Konto im Kopf ---------------------------------------------- */
.warenkorb-link,
.konto-link {
  font-size: var(--step--1); font-weight: var(--fw-medium); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-3xs);
}
/* Das Wagenzeichen erscheint erst am Telefon — dort tritt der Schriftzug ab,
   damit Marke, Warenkorb und Menüknopf in eine Zeile passen. */
.warenkorb-link__zeichen,
.konto-link__zeichen { display: none; }
@media (max-width: 860px) {
  .warenkorb-link__zeichen,
  .konto-link__zeichen { display: block; }
}
.warenkorb-zahl {
  display: inline-block; min-width: 1.5em; text-align: center;
  background: var(--c-gold); color: var(--c-primary);
  border-radius: 999px; font-size: .78em; font-weight: var(--fw-bold);
  padding: .1em .5em; margin-inline-start: .25em;
}

/* --- Fremdinhalte bändigen ------------------------------------------------- */
/* Die übernommenen Produkttexte bringen Tabellen mit fest eingetragenen
   Breiten aus dem alten Shop mit. Am Telefon passt davon keine. Sie werden
   deshalb für sich scrollbar, statt die ganze Seite zu verbreitern.
 *
 * Wichtig ist, WAS hier nicht gemeint ist. Die Regel war zuerst auf jede
 * Tabelle im Seiteninhalt gemünzt — und hat damit dreimal etwas zerlegt, das
 * gar nicht aus dem alten Shop stammt: die Vergleichstabelle, die
 * Fahrtenbuch-Übersicht und zuletzt den Warenkorb. Warenkorb und Kasse sind
 * Blöcke von WooCommerce; ihre Tabelle bringt ein eigenes Spaltenlayout mit,
 * das hier nur überschrieben werden kann, nicht verbessert.
 *
 * Deshalb werden eigene und fremde Tabellen ausgenommen, statt sie hinterher
 * mit !important zurückzubiegen. Ein Zurückbiegen stellt nie wieder her, was
 * die Fremdregel vorgesehen hatte — es setzt nur etwas anderes an die Stelle.
 *
 * Gemeint ist: Tabellen aus Produkttexten. Sonst nichts. */
.woocommerce-Tabs-panel table,
.woocommerce-product-details__short-description table,
.inhalt table:not([class*="wc-block"]):not(.shop_table):not(.vgl__tabelle):not(.tech-tabelle):not(.laufzeiten) {
  display: block;
  inline-size: 100% !important;
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td,
.woocommerce-product-details__short-description table th,
.woocommerce-product-details__short-description table td,
.inhalt table:not([class*="wc-block"]):not(.shop_table):not(.vgl__tabelle):not(.tech-tabelle):not(.laufzeiten) th,
.inhalt table:not([class*="wc-block"]):not(.shop_table):not(.vgl__tabelle):not(.tech-tabelle):not(.laufzeiten) td {
  inline-size: auto !important;
  white-space: nowrap;
  padding: var(--space-3xs) var(--space-2xs);
}

/* Warenkorb und Kasse: Nichts erzwingen. Eine Sicherung bleibt — lange
   Artikelnummern und Produktnamen dürfen brechen, statt die Seite breiter zu
   machen als das Fenster. */
.wc-block-cart, .wc-block-checkout { overflow-wrap: break-word; }
.wc-block-cart-items__product { min-inline-size: 0; }


/* ==========================================================================
   0.23 — Kontakt, Anfrage, Verkaufsstatus
   ========================================================================== */

/* --- Telefon und WhatsApp in der Kopfzeile ------------------------------
 *
 * Am breiten Bildschirm mit Nummer, darunter nur als Zeichen. Die Nummer
 * zeigt, dass hier ein Mensch erreichbar ist — das Zeichen allein sagt nur,
 * dass es irgendwo ein Telefon gibt. */
.kopf-kontakt {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--step--1); font-weight: var(--fw-medium); white-space: nowrap;
}
.kopf-kontakt__zeichen { display: block; flex: none; }
.kopf-kontakt--wa .kopf-kontakt__text { display: none; }
@media (max-width: 75rem) {
  .kopf-kontakt--tel .kopf-kontakt__text { display: none; }
}
@media (min-width: 88rem) {
  .kopf-kontakt--wa .kopf-kontakt__text { display: inline; }
}
.kopf-kontakt:hover { color: var(--c-gold); }
body.kopf-hell .kopf-kontakt:hover { color: var(--c-gold-muted); }

/* --- "Zusammenstellen" als Knopf im Menü --------------------------------- */
.site-nav .menu-item--cta > a {
  background: var(--c-gold); color: var(--c-primary);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius); border-bottom: 0;
  font-weight: var(--fw-semibold);
}
.site-nav .menu-item--cta > a:hover { background: var(--c-gold-muted); color: var(--c-primary); }
body.kopf-hell .site-nav .menu-item--cta > a { color: var(--c-primary); }
@media (max-width: 860px) {
  .site-nav .menu-item--cta > a {
    margin-block: var(--space-2xs); text-align: center;
  }
}

/* --- Hilfezeile ------------------------------------------------------------
 * Ruhig: kleiner als der Text drumherum, gedämpft, aber mit klaren Verweisen.
 * Sie soll gefunden werden, nicht auffallen. */
.gpsi-hilfe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3xs);
  font-size: var(--step--1); color: var(--c-text-muted);
  margin-block: var(--space-s) 0; max-width: none;
}
.gpsi-hilfe__frage { color: var(--c-text); font-weight: var(--fw-medium); }
.gpsi-hilfe__weg { color: var(--c-primary); font-weight: var(--fw-medium); }
.gpsi-hilfe__zeit { opacity: .8; }

/* --- Anfrageformular -------------------------------------------------------- */
.gpsi-anfrage {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--space-m);
  margin-block: var(--space-m);
}
.gpsi-anfrage[hidden] { display: none; }
.gpsi-anfrage__titel { margin-block: 0 var(--space-2xs); }
.gpsi-anfrage__einleitung { color: var(--c-text-muted); font-size: var(--step--1); margin-block-end: var(--space-s); }
.gpsi-anfrage__zusammenstellung {
  background: var(--c-bg); border-radius: var(--radius);
  padding: var(--space-xs) var(--space-s); margin-block-end: var(--space-s);
  font-size: var(--step--1);
}
.gpsi-anfrage__zusammenstellung ul { margin: 0; padding-inline-start: 1.1em; }
.gpsi-anfrage__felder {
  display: grid; gap: var(--space-xs) var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gpsi-anfrage__feld { margin: 0; display: flex; flex-direction: column; gap: var(--space-3xs); max-width: none; }
.gpsi-anfrage__feld--breit { grid-column: 1 / -1; }
.gpsi-anfrage__feld label { font-size: var(--step--1); font-weight: var(--fw-medium); }
.gpsi-anfrage__feld input[type="text"],
.gpsi-anfrage__feld input[type="email"],
.gpsi-anfrage__feld input[type="tel"],
.gpsi-anfrage__feld textarea {
  font: inherit; font-size: max(16px, 1em);   /* unter 16px zoomt iOS beim Tippen */
  padding: var(--space-2xs); border: 1px solid var(--c-border); border-radius: var(--radius);
  background: #fff; inline-size: 100%;
}
.gpsi-anfrage__rueckruf label { font-weight: var(--fw-regular); display: flex; gap: var(--space-2xs); align-items: center; }
/* Die Falle für Programme: aus dem Bild, aber nicht display:none — manche
   Programme überspringen unsichtbare Felder gezielt. */
.gpsi-anfrage__falle { position: absolute; left: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.gpsi-anfrage__absenden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); margin-block: var(--space-s) 0; max-width: none; }
.gpsi-anfrage__privat { font-size: var(--step--1); color: var(--c-text-muted); flex: 1 1 16rem; }
.gpsi-anfrage__danke, .gpsi-anfrage__fehler {
  padding: var(--space-xs) var(--space-s); border-inline-start: 3px solid var(--c-success);
  background: var(--c-bg); margin-block-end: var(--space-s); max-width: none;
}
.gpsi-anfrage__fehler { border-color: var(--c-danger); }

/* --- Kontaktseite ------------------------------------------------------------ */
.gpsi-kontakt__wege {
  list-style: none; padding: 0; margin: 0 0 var(--space-l);
  display: grid; gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gpsi-kontakt__weg {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-bottom: 3px solid var(--c-gold); border-radius: var(--radius);
  padding: var(--space-s); display: flex; flex-direction: column; gap: var(--space-3xs);
}
.gpsi-kontakt__art { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
.gpsi-kontakt__weg a { font-size: var(--step-1); font-weight: var(--fw-semibold); text-decoration: none; }
.gpsi-kontakt__dazu { font-size: var(--step--1); color: var(--c-text-muted); }
.gpsi-kontakt__adresse { font-size: var(--step--1); color: var(--c-text-muted); margin-block-start: var(--space-l); }

/* --- Geräteseite: Einstieg in den Konfigurator ------------------------------ */
.geraet-einstieg {
  border: 1px solid var(--c-border); border-inline-start: 3px solid var(--c-gold);
  background: var(--c-surface); border-radius: var(--radius);
  padding: var(--space-s); margin-block: var(--space-s);
}
.geraet-einstieg__text { font-size: var(--step--1); margin-block: 0 var(--space-xs); }
.geraet-einstieg p:last-child { margin: 0; }
.geraet-einzeln { font-size: var(--step--1); color: var(--c-text-muted); margin-block: var(--space-m) var(--space-2xs); }

/* --- Verkaufsstatus: Abzeichen und Preistext ---------------------------------- */
.kachel-status {
  display: inline-block; margin-block-end: var(--space-3xs);
  font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-primary); background: var(--c-bg); border: 1px solid var(--c-gold);
  border-radius: 999px; padding: .1em .65em;
}
.preis-status { font-weight: var(--fw-semibold); color: var(--c-primary); }

/* --- Formulare von Erweiterungen im Seiteninhalt ----------------------------
 *
 * Anlass: das Widerrufsformular von German Market („Vertrag widerrufen“).
 * Es kommt ohne eigene Gestaltung; im Theme stand die Beschriftung deshalb
 * neben dem Feld, jedes Feld begann woanders, und das Kommentarfeld hing
 * mit seiner Beschriftung unten rechts. Hier gilt dieselbe Ordnung wie in
 * „Mein Konto“: Beschriftung über dem Feld, alle Felder gleich breit, das
 * Ganze als eine Karte.
 *
 * Wie bei den Tabellen oben gilt: eigene und WooCommerce-Formulare sind
 * ausgenommen, statt sie hinterher zurückzubiegen. Gemeint ist jedes andere
 * Formular, das eine Erweiterung per Shortcode in eine Seite setzt.
 * :where() hält die Regeln so schwach, dass jede gezielte Regel gewinnt. */
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form)) {
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-top: 3px solid var(--c-gold);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: var(--space-m);
  max-inline-size: 34rem;
  margin-block: var(--space-m) 0;
}
@media (min-width: 600px) {
  :where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
    .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
    .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form)) {
    padding: var(--space-l);
  }
}

/* Abkürzung für die folgenden Regeln: F = das Formular von oben. */
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  :is(p, .form-row, fieldset) {
  margin: 0 0 var(--space-s); max-width: none;
}
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  > :last-child {
  margin-block-end: 0;
}

:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  label {
  display: block; margin-block-end: var(--space-3xs);
  font-size: var(--step--1); font-weight: var(--fw-medium); color: var(--c-text);
}

/* Kästchen und Auswahlknöpfe bleiben neben ihrem Text. */
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  label:has(input[type="checkbox"], input[type="radio"]) {
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  font-weight: var(--fw-regular); cursor: pointer;
}
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  :is(input[type="checkbox"], input[type="radio"]) {
  flex: none; margin-block-start: .25em; accent-color: var(--c-primary);
}

/* Pflichtfeld-Stern: sichtbar, aber nicht laut. */
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  :is(.required, abbr[title]) {
  color: var(--c-danger); text-decoration: none; border: 0;
}

:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
      input[type="date"], input[type="password"], input:not([type]), select, textarea) {
  display: block; inline-size: 100%; min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  font: inherit; font-size: max(16px, 1em);   /* unter 16px zoomt iOS beim Tippen */
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  transition: border-color .15s ease;
}
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  textarea:not([hidden]) {   /* :not() nur, damit die Regel die Feldhöhe oben schlägt */
  min-block-size: 8rem; resize: vertical;
}
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  :is(input, select, textarea):hover {
  border-color: var(--c-gold-muted);
}
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 1px; border-color: var(--c-primary);
}

/* Absätze ohne Feld — etwa „Es gilt unsere Datenschutzerklärung“ — sind
   Nachsatz, nicht Inhalt: kleiner und gedämpft, der Verweis bleibt klar. */
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  p:not(:has(input, select, textarea, button, label)) {
  font-size: var(--step--1); color: var(--c-text-muted);
}

/* Knopf: Abstand nach oben, am Telefon über die volle Breite. */
:where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
  .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
  .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
  :is(button[type="submit"], input[type="submit"]) {
  margin-block-start: var(--space-xs);
}
.inhalt input[type="submit"]:not([class*="wc-block"]) {
  font-family: var(--font-body); font-size: var(--step-0);
  font-weight: var(--fw-semibold); letter-spacing: .03em;
  background: var(--c-gold); color: var(--c-primary);
  padding: var(--space-xs) var(--space-m);
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.inhalt input[type="submit"]:not([class*="wc-block"]):hover { background: var(--c-gold-muted); }
@media (max-width: 599px) {
  :where(.inhalt form:not(.konf, .gpsi-anfrage, .woocommerce-cart-form, .woocommerce-checkout,
    .checkout, .woocommerce-form, .woocommerce-EditAccountForm, .woocommerce-ResetPassword,
    .cart, .search-form, [class*="wc-block"]):not(.woocommerce-MyAccount-content form, [class*="wc-block"] form))
    :is(button[type="submit"], input[type="submit"]) {
    inline-size: 100%;
  }
}