/*
 * fahrtauglich.ch – Basis: Reset, Typografie, Links, Fokus, Raster
 * Mobile first; Erweiterungen ab 40em / 60em / 75em.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--ft-a-5); }
body {
  margin: 0;
  font-family: var(--ft-schrift);
  font-size: var(--ft-fs-text);
  font-weight: var(--ft-gewicht-normal);
  line-height: var(--ft-lh-text);
  color: var(--ft-tinte);
  background: var(--ft-weiss);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Überschriften: linksbündig, klare Hierarchie */
h1, h2, h3, h4 {
  margin: 0 0 var(--ft-a-4);
  font-weight: var(--ft-gewicht-fett);
  line-height: var(--ft-lh-titel);
  letter-spacing: -0.01em;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 14 6 6; /* nur lange Wörter trennen */
}
h1 { font-size: var(--ft-fs-h1); }
h2 { font-size: var(--ft-fs-h2); margin-top: var(--ft-a-7); }
h3 { font-size: var(--ft-fs-h3); margin-top: var(--ft-a-6); }
h4 { font-size: var(--ft-fs-h4); margin-top: var(--ft-a-5); }
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--ft-a-5); }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: var(--ft-a-2); }
strong, b { font-weight: var(--ft-gewicht-fett); }
small { font-size: var(--ft-fs-klein); }
hr { border: 0; border-top: 1px solid var(--ft-linie); margin: var(--ft-a-7) 0; }

/* Links: dunkler Text, gelbe Unterstreichung; Hover/Fokus mit gelber Fläche */
a {
  color: var(--ft-tinte);
  text-decoration: underline;
  text-decoration-color: var(--ft-gelb-hover);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.2em;
}
a:hover { background: var(--ft-gelb-hell); text-decoration-color: var(--ft-tinte); }

/* Sichtbarer Fokus überall (WCAG 2.4.7 / 2.4.11) */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--ft-fokus);
  outline-offset: 3px;
  border-radius: 4px;
}
.ft-dunkel :focus-visible { outline-color: var(--ft-fokus-dunkel); }

/* Fliesstext-Spalte */
.ft-text { max-width: var(--ft-breite-text); }
.ft-text > * + h2 { margin-top: var(--ft-a-7); }
.ft-lead { font-size: var(--ft-fs-gross); line-height: 1.55; color: var(--ft-tinte); }
.ft-neben { color: var(--ft-tinte-2); }

/* Raster */
.ft-container {
  width: 100%;
  max-width: calc(var(--ft-breite-seite) + 2 * var(--ft-rand));
  margin-inline: auto;
  padding-inline: var(--ft-rand);
}
.ft-container--schmal { max-width: calc(var(--ft-breite-schmal) + 2 * var(--ft-rand)); }
.ft-abschnitt { padding-block: var(--ft-abschnitt); }
.ft-abschnitt--creme { background: var(--ft-creme); }
.ft-abschnitt--flaeche { background: var(--ft-flaeche); }
.ft-abschnitt__kopf { max-width: var(--ft-breite-text); margin-bottom: var(--ft-a-6); }
.ft-abschnitt__kopf h2 { margin-top: 0; }
.ft-abschnitt__kopf p { color: var(--ft-tinte-2); margin-bottom: 0; }

.ft-raster { display: grid; gap: var(--ft-a-5); grid-template-columns: minmax(0, 1fr); }
.ft-raster > *, .ft-hero__raster > *, .ft-buchkopf > *, .ft-artikel > * { min-width: 0; }
@media (min-width: 40em) {
  :root { --ft-rand: 2rem; }
  .ft-raster--2, .ft-raster--3, .ft-raster--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
  .ft-raster--3 { grid-template-columns: repeat(3, 1fr); }
  .ft-raster--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Hilfsklassen */
.ft-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ft-sprunglink {
  position: absolute; left: var(--ft-a-4); top: -100px; z-index: 100;
  padding: var(--ft-a-3) var(--ft-a-4); background: var(--ft-gelb); color: var(--ft-tinte);
  font-weight: var(--ft-gewicht-fett); border-radius: var(--ft-radius-klein);
}
.ft-sprunglink:focus { top: var(--ft-a-4); }

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Druck: Checkliste und Ratgeber sauber ausdrucken */
@media print {
  .ft-kopf, .ft-fuss, .ft-cookie, .ft-toc, .ft-nicht-drucken, .ft-sprunglink, .ft-brotkrumen,
  .ft-buch, .ft-download, .ft-raster, .ft-autor { display: none !important; }
  .ft-seitenkopf { background: none !important; padding: 0 !important; }
  h2, h3 { break-after: avoid; }
  li { break-inside: avoid; }
  body { font-size: 12pt; }
  a { text-decoration: none; }
}

/* Complianz-Banner (Staging/live): auf dem Handy 19 px breiter als der Bildschirm, die Seite liess sich seitlich
   verschieben (A1, Runde 5, 30.10.2026). Nie breiter als das Fenster. */
.cmplz-cookiebanner { box-sizing: border-box !important; max-width: 100vw !important; }
.cmplz-cookiebanner * { box-sizing: border-box; }

/* WordPress-Klasse für Screenreader-Text (Complianz nutzt sie in den Kategorien; ohne Elterntheme-CSS erschien der
   Kategoriename doppelt und riesig, Runde 6, 1.11.2026) */
.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ============ Complianz-Banner in Markenfarben (Runde 6, 1.11.2026) ============
   Leiste unten (Einstellung in Complianz). Schalter: an Gelb mit dunklem Knopf, aus Grau. «Einstellungen» und
   «Einstellungen speichern» mit dunklem Rahmen. Handy: «Akzeptieren» und «Ablehnen» nebeneinander gleich gross,
   «Einstellungen» darunter als Textlink, kleine Innenabstände; Ziel höchstens etwa 30 % der Bildschirmhöhe. */
body .cmplz-cookiebanner {
  --cmplz_slider_active_color: #FFBF00; --cmplz_slider_inactive_color: #8A867E; --cmplz_slider_bullet_color: #1C1C1E;
  --cmplz_category_header_always_active_color: #1C1C1E; --cmplz_hyperlink_color: #1C1C1E;
  --cmplz_button_settings_background_color: #FFFFFF; --cmplz_button_settings_border_color: #1C1C1E; --cmplz_button_settings_text_color: #1C1C1E;
  --cmplz_button_border_radius: 999px; --cmplz_text_font_size: 16px; --cmplz_button_font_size: 16px;
  font-family: var(--ft-schrift);
}
/* Complianz setzt die Knopfhöhe sonst auf 15 % der Fensterhöhe (Desktop 101 px) */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-family: var(--ft-schrift); font-weight: 600; border-width: 2px !important; height: auto !important; min-height: 48px !important; padding: 10px 20px !important; zoom: 1 !important; line-height: 1.2 !important; }
body .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
body .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: #FFFFFF !important; border: 2px solid #1C1C1E !important; color: #1C1C1E !important; }
/* Desktop: Knöpfe nicht auf die Höhe des Textes strecken (vorher 101 px) */
body .cmplz-cookiebanner .cmplz-buttons { align-items: center !important; align-self: center; }
/* Complianz blendet das Banner nach der Wahl nur mit .cmplz-dismissed { display: none } aus (ohne !important). Das
   display: grid !important unten überschrieb das in -i: Das Banner schloss sich am Desktop nicht mehr (Befund Lukas
   2.11.2026, Blocker). Deshalb gilt das Raster nur für nicht geschlossene Banner, und «geschlossen» hat Vorrang. */
body .cmplz-cookiebanner.cmplz-dismissed { display: none !important; }
/* Desktop und Tablet ab 768 px (Runde 8, A1, 2.11.2026): kompakte, zentrierte Leiste, höchstens 960 px breit; Text links,
   Knöpfe direkt daneben rechts (vorher 1260 × 179 px mit Titelzeile «Cookies» und grosser Lücke). Titel nur für Screenreader,
   Schliessen-Kreuz oben rechts in einer eigenen schmalen Spalte. Bis 1023 px stehen die Knöpfe unter dem Text. */
@media (min-width: 48em) {
  body .cmplz-cookiebanner.cmplz-bottom:not(.cmplz-dismissed) { left: 50% !important; right: auto !important; bottom: 16px !important; top: auto !important; transform: translateX(-50%) !important; margin: 0 !important;
    width: min(60rem, calc(100% - 2rem)) !important; max-width: 60rem !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: center; gap: 12px 24px !important; padding: 16px 52px 16px 24px !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(28, 28, 30, 0.18) !important; }
  body .cmplz-cookiebanner .cmplz-header { position: absolute !important; top: 8px; right: 8px; margin: 0 !important; padding: 0 !important; max-height: none !important; display: block !important; }
  body .cmplz-cookiebanner .cmplz-logo, body .cmplz-cookiebanner .cmplz-divider { display: none !important; }
  body .cmplz-cookiebanner .cmplz-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body .cmplz-cookiebanner .cmplz-close { width: 32px; height: 32px; display: grid !important; place-items: center; }
  body .cmplz-cookiebanner > * { grid-column: 1 !important; }
  body .cmplz-cookiebanner .cmplz-body { display: block !important; width: auto !important; min-width: 0 !important; max-height: 70vh; }
  body .cmplz-cookiebanner .cmplz-body > .cmplz-message { width: auto !important; margin: 0 !important; }
  body .cmplz-cookiebanner .cmplz-message, body .cmplz-cookiebanner .cmplz-message p { font-size: 16px !important; line-height: 1.45 !important; margin: 0 !important; }
  body .cmplz-cookiebanner .cmplz-body > .cmplz-categories { width: auto !important; margin-top: 12px; }
  /* Complianz stellt die Knöpfe bis 768 px untereinander; hier immer nebeneinander */
  body .cmplz-cookiebanner .cmplz-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 10px !important; width: auto !important; margin: 0 !important; }
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 10px 22px !important; }
  /* «Akzeptieren» und «Ablehnen» gleich breit (Staging-Prüfung 2.11.2026: 149 und 144 px) */
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept, body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { min-width: 10rem !important; }
  /* Dokumenten-Links (leer bzw. doppelt) wie auf dem Handy ausblenden; die Datenschutzerklärung ist im Fuss verlinkt */
  body .cmplz-cookiebanner .cmplz-documents, body .cmplz-cookiebanner .cmplz-links:not(.cmplz-information) { display: none !important; }
}
/* Ab 1024 px Text und Knöpfe auf einer Höhe; mit offenen Einstellungen (Kategorien) wieder untereinander */
@media (min-width: 64em) {
  body .cmplz-cookiebanner.cmplz-bottom:not(.cmplz-categories-visible) { grid-template-columns: minmax(0, 1fr) auto !important; }
  body .cmplz-cookiebanner:not(.cmplz-categories-visible) > .cmplz-buttons { grid-column: 2 !important; grid-row: 1 / span 3; }
}
body .cmplz-cookiebanner .cmplz-category-title { font-size: 16px !important; font-weight: 600; }
body .cmplz-cookiebanner .cmplz-always-active { color: #1C1C1E !important; font-weight: 600; }
body .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label:after { background: #1C1C1E !important; }
body .cmplz-cookiebanner .cmplz-link, body .cmplz-cookiebanner .cmplz-documents a { color: #1C1C1E; text-decoration: underline; text-decoration-color: #FFBF00; text-decoration-thickness: 2px; }
@media (max-width: 47.99em) {
  body .cmplz-cookiebanner.cmplz-bottom { padding: 8px 14px calc(8px + env(safe-area-inset-bottom)) !important; gap: 6px !important; border-radius: 12px 12px 0 0 !important; max-height: 90vh; overflow: auto; }
  /* Kopfzeile nimmt keine eigene Zeile ein: Schliessen-Kreuz oben rechts neben dem Text, Titel «Cookies» nur für Screenreader */
  body .cmplz-cookiebanner { position: fixed; }
  body .cmplz-cookiebanner .cmplz-header { position: absolute !important; top: 6px; right: 8px; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; width: auto !important; }
  body .cmplz-cookiebanner .cmplz-logo { display: none !important; }
  body .cmplz-cookiebanner .cmplz-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body .cmplz-cookiebanner .cmplz-close { width: 32px; height: 32px; display: grid !important; place-items: center; }
  /* Nur die erste Textzeile weicht dem Kreuz aus (Platzhalter rechts), die übrigen nutzen die volle Breite */
  body .cmplz-cookiebanner .cmplz-message p::before { content: ""; float: right; width: 34px; height: 24px; }
  body .cmplz-cookiebanner .cmplz-divider { display: none !important; }
  body .cmplz-cookiebanner .cmplz-message, body .cmplz-cookiebanner .cmplz-message p { font-size: 16px !important; line-height: 1.4 !important; margin: 0 !important; }
  body .cmplz-cookiebanner .cmplz-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width: 100% !important; height: auto !important; min-height: 44px !important; padding: 8px 6px !important; margin: 0 !important; zoom: 1 !important; font-size: 16px !important; line-height: 1.2 !important; white-space: normal !important; }
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { grid-column: 1 / -1; min-height: 32px !important; padding: 4px 0 !important; background: none !important; border: 0 !important; text-decoration: underline; text-decoration-color: #FFBF00; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { grid-column: 1 / -1; }
  /* Dokumenten-Links sind ausgeblendet bzw. leer und nehmen sonst eine leere Zeile ein; die Datenschutzerklärung ist im Fuss verlinkt */
  body .cmplz-cookiebanner .cmplz-documents, body .cmplz-cookiebanner .cmplz-links:not(.cmplz-information) { display: none !important; }
  body .cmplz-cookiebanner .cmplz-categories .cmplz-category { margin-bottom: 6px; }
}

/* Handy mit niedrigem Bildschirm (Runde 8, -k, Entscheid Lukas 2.11.2026): bei 360 × 640 war das Banner 218 px = 34 % hoch.
   Nur innere Abstände und Zeilenabstand kleiner; Schrift 16 px, Knopfgrössen und -abstände unverändert. Ergibt bei
   360 × 640 und 375 × 667 je 186 px (29 % bzw. 28 %); Desktop und Tablet sind nicht betroffen.
   Steht am Dateiende, damit es die allgemeine Handy-Regel oben überschreibt. */
@media (max-width: 47.99em) and (max-height: 700px) {
  body .cmplz-cookiebanner.cmplz-bottom { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) !important; gap: 4px !important; }
  body .cmplz-cookiebanner .cmplz-message, body .cmplz-cookiebanner .cmplz-message p { line-height: 1.35 !important; }
}