/*
 * fahrtauglich.ch – Komponenten (Etappe 3a-0)
 * Klassen mit Präfix ft-, BEM-artig (ft-block__teil--variante).
 * Gleiche Klassen werden in den PHP-Parts des Themes verwendet.
 */

/* ============ Icons ============ */
.ft-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ft-icon--gross { width: 2rem; height: 2rem; }

/* ============ Buttons ============ */
.ft-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ft-a-2);
  min-height: var(--ft-button-hoehe);
  padding: 0.6rem 1.6rem;
  border: 2px solid var(--ft-gelb);
  border-radius: var(--ft-radius-pill);
  background: var(--ft-gelb);
  color: var(--ft-tinte);
  font-weight: var(--ft-gewicht-fett);
  font-size: var(--ft-fs-text);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ft-knopf:hover { background: var(--ft-gelb-hover); border-color: var(--ft-gelb-hover); }
.ft-knopf--dunkel { background: var(--ft-tinte); border-color: var(--ft-tinte); color: var(--ft-weiss); }
.ft-knopf--dunkel:hover { background: #3A3A3E; border-color: #3A3A3E; }
.ft-knopf--rahmen { background: transparent; border-color: var(--ft-tinte); color: var(--ft-tinte); }
.ft-knopf--rahmen:hover { background: var(--ft-tinte); color: var(--ft-weiss); }
.ft-knopf--breit { width: 100%; }
.ft-knopf[disabled], .ft-knopf[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ft-knopfreihe { display: flex; flex-direction: column; gap: var(--ft-a-3); }
.ft-knopfreihe .ft-knopf { width: 100%; }
@media (min-width: 40em) {
  .ft-knopfreihe { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ft-knopfreihe .ft-knopf { width: auto; }
}
/* Weiterlesen-Link mit Pfeil, grosse Klickfläche */
.ft-weiter {
  display: inline; padding-block: 0.6rem;
  font-weight: var(--ft-gewicht-fett);
}
.ft-weiter .ft-icon { display: inline-block; vertical-align: -0.22em; margin-inline: 0.15em; transition: transform .15s; }
.ft-weiter:hover .ft-icon { transform: translateX(3px); }

/* ============ Kopfbereich ============ */
.ft-kopf { background: var(--ft-weiss); border-bottom: 1px solid var(--ft-linie); position: relative; z-index: 20; }
.ft-kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--ft-a-2); min-height: 4.5rem; }
.ft-marke { display: inline-flex; align-items: center; gap: var(--ft-a-2); min-height: var(--ft-ziel-min); text-decoration: none; font-weight: var(--ft-gewicht-fett); font-size: 1.25rem; letter-spacing: -0.01em; flex-shrink: 0; white-space: nowrap; }
.ft-marke:hover { background: none; }
.ft-marke svg { width: 2.5rem; height: 2.5rem; }
.ft-menueknopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ft-a-2); flex-shrink: 0;
  /* Gleich breit für «Menü» und «Schliessen», das Logo behält seine Grösse (Korrektur 28.10.2026) */
  width: 8.5rem; min-height: var(--ft-ziel-min); padding: 0 0.625rem; white-space: nowrap;
  border: 2px solid var(--ft-tinte); border-radius: var(--ft-radius-pill);
  background: var(--ft-weiss); font-weight: var(--ft-gewicht-fett); cursor: pointer;
}
.ft-menueknopf[aria-expanded="true"] { background: var(--ft-tinte); color: var(--ft-weiss); }
.ft-menueknopf .ft-icon-zu { display: none; }
.ft-menueknopf[aria-expanded="true"] .ft-icon-auf { display: none; }
.ft-menueknopf[aria-expanded="true"] .ft-icon-zu { display: none; }
/* Handy: nur das Glühbirnen-Logo, so hoch wie der Menüknopf; Name nur für Screenreader über aria-label (Runde 5, B5) */
@media (max-width: 47.99em) {
  .ft-kopf .ft-marke__name { display: none; }
  .ft-kopf .ft-marke svg { width: var(--ft-ziel-min); height: var(--ft-ziel-min); }
}
.ft-nav { width: 100%; }
.ft-nav__liste { list-style: none; margin: 0; padding: 0; }
.ft-nav__liste li { margin: 0; }
.ft-nav__liste a {
  display: flex; align-items: center; min-height: 3.5rem; padding: 0 var(--ft-a-2);
  text-decoration: none; font-weight: var(--ft-gewicht-fett); border-bottom: 1px solid var(--ft-linie);
}
/* Aktueller Punkt: hellgelbe Fläche statt Balken links (Runde 5, 30.10.2026) */
.ft-nav__liste a[aria-current="page"] { background: var(--ft-gelb-hell); padding-left: var(--ft-a-4); }
.ft-sprache { display: inline-flex; align-items: center; gap: var(--ft-a-2); min-height: var(--ft-ziel-min); font-weight: var(--ft-gewicht-fett); }
.ft-sprache abbr { text-decoration: none; }
/* Ohne JavaScript ist die Navigation immer sichtbar; mit JS mobil hinter «Menü» */
.ft-kopf__nav-bereich { display: block; padding-bottom: var(--ft-a-4); }
.js .ft-kopf__nav-bereich { display: none; }
.js .ft-kopf[data-offen] .ft-kopf__nav-bereich { display: block; }
.no-js .ft-menueknopf, html:not(.js) .ft-menueknopf { display: none; }
.ft-kopf__sprache-mobil { padding: var(--ft-a-4) var(--ft-a-2) 0; }
@media (min-width: 70em) {
  .ft-kopf__innen { min-height: 5.5rem; }
  .ft-menueknopf { display: none !important; }
  /* Logo, Schriftzug und Menüpunkte auf einer Grundlinie (Runde 5, B5; Runde 6, A1): das Logo steht mit seiner
     Unterkante auf der Grundlinie («unten bündig»), nicht mehr mittig zum Schriftzug */
  .ft-kopf__wrap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ft-a-5); padding-block: 1.25rem; }
  .ft-kopf__innen { align-items: baseline; min-height: 0; }
  .ft-kopf .ft-marke { align-items: baseline; }
  .ft-kopf .ft-marke svg { align-self: baseline; }
  .ft-kopf__nav-bereich, .js .ft-kopf__nav-bereich { align-items: baseline !important; }
  .ft-nav__liste a { align-items: baseline; padding-top: 0.6rem; }
  .js .ft-kopf__nav-bereich, .ft-kopf__nav-bereich { display: flex !important; align-items: center; gap: var(--ft-a-5); padding: 0; }
  .ft-nav { width: auto; }
  .ft-nav__liste { display: flex; gap: var(--ft-a-1); }
  .ft-nav__liste a { border: 0; min-height: var(--ft-ziel-min); padding: 0 0.6rem; border-radius: var(--ft-radius-klein); white-space: nowrap; }
  .ft-nav__liste a:hover { background: var(--ft-gelb-hell); }
  .ft-nav__liste a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--ft-gelb); padding-left: 0.7rem; border-radius: 0; }
  .ft-kopf__sprache-mobil { padding: 0; border-left: 1px solid var(--ft-linie); padding-left: var(--ft-a-4); }
}

/* ============ Brotkrumen ============ */
.ft-brotkrumen { padding-block: var(--ft-a-4) 0; font-size: var(--ft-fs-klein); }
.ft-brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ft-a-2); margin: 0; padding: 0; }
.ft-brotkrumen li { margin: 0; display: inline-flex; align-items: center; gap: var(--ft-a-2); }
.ft-brotkrumen li + li::before { content: "›"; color: var(--ft-tinte-2); }
.ft-brotkrumen a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ft-brotkrumen [aria-current] { color: var(--ft-tinte-2); }

/* ============ Hero (Startseite, Variante A «Gelb mit Buchkarte», Entscheid 29.10.2026) ============ */
.ft-hero { background: var(--ft-gelb); padding-block: var(--ft-a-5) var(--ft-a-6); }
.ft-hero__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-a-5); align-items: center; }
.ft-kicker {
  display: inline-block; margin: 0 0 var(--ft-a-4);
  font-size: var(--ft-fs-klein); font-weight: var(--ft-gewicht-fett);
}
/* Kennzeile: eine leichte Zeile statt schwarzem Kasten */
.ft-hero__kicker { display: flex; align-items: center; gap: var(--ft-a-2); margin: 0 0 var(--ft-a-2); font-size: var(--ft-fs-klein); font-weight: var(--ft-gewicht-fett); }
.ft-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem); margin: 0 0 var(--ft-a-3); max-width: 20ch; }
.ft-hero__unterzeile { margin: 0 0 var(--ft-a-4); max-width: 46ch; }
.ft-hero .ft-knopfreihe { gap: var(--ft-a-3); }
.ft-hero .ft-knopf { border-color: var(--ft-tinte); }
.ft-hero .ft-knopf--hell { background: var(--ft-weiss); color: var(--ft-tinte); }
.ft-hero .ft-knopf--hell:hover { background: var(--ft-creme); }
.ft-hero .ft-knopf--rahmen:hover { background: var(--ft-tinte); color: var(--ft-weiss); }
.ft-hero a:hover { background: transparent; }
/* Buchkarte: Handy zwischen Unterzeile und Knöpfen (Titelbild links), Desktop rechts (Titelbild oben); Runde 5, C10 */
.ft-hero__buch { display: flex; align-items: center; gap: var(--ft-a-4); background: var(--ft-weiss); border-radius: var(--ft-radius); padding: var(--ft-a-3) var(--ft-a-4); text-decoration: none; color: var(--ft-tinte); box-shadow: var(--ft-schatten); }
.ft-hero a.ft-hero__buch:hover { background: var(--ft-weiss); box-shadow: 0 10px 28px rgba(28,28,30,.2); }
.ft-hero__buch img { width: 3.75rem; height: auto; border-radius: 3px; box-shadow: 0 4px 10px rgba(28,28,30,.25); flex-shrink: 0; }
.ft-hero__buch-text { display: flex; flex-direction: column; gap: var(--ft-a-1); min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
.ft-hero__buch strong { line-height: 1.3; }
.ft-hero__buch-preis { display: flex; flex-direction: column; font-size: var(--ft-fs-klein); color: var(--ft-tinte-2); }
.ft-hero__buch-link { font-weight: var(--ft-gewicht-fett); text-decoration: underline; text-decoration-color: var(--ft-gelb); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ft-hero__buch-link .ft-icon { display: inline-block; vertical-align: -0.2em; }
@media (max-width: 47.99em) { .ft-hero .ft-knopf { width: 100%; justify-content: center; } }
@media (min-width: 60em) {
  .ft-hero { padding-block: var(--ft-a-7); }
  .ft-hero__raster { grid-template-columns: 1.5fr 1fr; grid-template-areas: "text buch" "knoepfe buch"; gap: 0 var(--ft-a-7); }
  .ft-hero__text { grid-area: text; align-self: end; }
  .ft-hero__raster > .ft-hero__buch { grid-area: buch; }
  .ft-hero__raster > .ft-knopfreihe { grid-area: knoepfe; align-self: start; }
  .ft-hero__buch { flex-direction: column; text-align: center; padding: var(--ft-a-5); }
  .ft-hero__buch img { width: 11rem; }
  .ft-hero__buch-text { align-items: center; }
}

/* ============ Seitenkopf (Unterseiten) ============ */
.ft-seitenkopf { padding-block: var(--ft-a-5) var(--ft-a-6); }
.ft-seitenkopf h1 { margin-top: var(--ft-a-4); max-width: 24ch; }
.ft-seitenkopf--gelb { background: var(--ft-creme); border-bottom: 6px solid var(--ft-gelb); }
.ft-meta { display: flex; flex-wrap: wrap; gap: var(--ft-a-2) var(--ft-a-5); font-size: var(--ft-fs-klein); color: var(--ft-tinte-2); margin: 0; }
.ft-meta span { display: inline-flex; align-items: center; gap: var(--ft-a-2); }

/* ============ Antwortbox ============ */
/* «Kurz beantwortet»: hellcremefarbiger Kasten ohne Balken, Infosymbol und fette Überschrift (Runde 5, 30.10.2026) */
.ft-antwort {
  max-width: var(--ft-breite-text);
  padding: var(--ft-a-5);
  background: var(--ft-creme);
  border: 1px solid var(--ft-linie);
  border-radius: var(--ft-radius);
}
.ft-antwort__titel { font-weight: var(--ft-gewicht-fett); margin: 0 0 var(--ft-a-3); display: flex; align-items: center; gap: var(--ft-a-2); }
.ft-antwort__titel .ft-icon { width: 1.5rem; height: 1.5rem; }
.ft-antwort p { font-size: var(--ft-fs-text); }
@media (min-width: 40em) { .ft-antwort p { font-size: var(--ft-fs-gross); line-height: 1.55; } }
.ft-antwort p:last-child { margin-bottom: 0; }
.ft-antwort p.ft-antwort__titel { font-size: var(--ft-fs-h4); line-height: 1.35; margin-bottom: var(--ft-a-3); }
.ft-antwort { margin-bottom: var(--ft-a-5); }
.ft-antwort__quellen { font-size: var(--ft-fs-klein) !important; color: var(--ft-tinte-2); }

/* ============ Ablauf in Schritten ============ */
.ft-schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: 0; }
.ft-schritte > li {
  counter-increment: schritt;
  position: relative;
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--ft-a-4); align-content: start;
  margin: 0; padding-bottom: var(--ft-a-6);
}
.ft-schritte > li::before {
  content: counter(schritt);
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--ft-gelb); color: var(--ft-tinte);
  font-weight: var(--ft-gewicht-fett); font-size: 1.375rem;
  border: 2px solid var(--ft-tinte);
  position: relative; z-index: 1;
}
.ft-schritte > li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.625rem - 1px); top: 3.25rem; bottom: 0;
  width: 2px; background: var(--ft-tinte);
}
.ft-schritte h3 { margin: 0.55rem 0 var(--ft-a-2); font-size: var(--ft-fs-h4); }
.ft-schritte p { margin: 0; color: var(--ft-tinte-2); }
.ft-schritte p + p { margin-top: var(--ft-a-2); }
@media (min-width: 60em) {
  /* minmax(0, 1fr) und Silbentrennung: lange Wörter («Strassenverkehrsamt») sprengen die Spalte nicht (Runde 6, 31.10.2026) */
  .ft-schritte--quer { grid-template-columns: repeat(var(--anzahl, 5), minmax(0, 1fr)); gap: var(--ft-a-5); hyphens: auto; -webkit-hyphens: auto; }
  .ft-schritte--quer > li { grid-template-columns: 1fr; gap: var(--ft-a-3); padding-bottom: 0; }
  .ft-schritte--quer > li:not(:last-child)::after { left: 3.25rem; right: calc(-1 * var(--ft-a-5)); top: calc(1.625rem - 1px); bottom: auto; width: auto; height: 2px; }
  .ft-schritte--quer h3 { margin-top: var(--ft-a-2); }
}

/* ============ Tabellen (mobil als Karten) ============ */
.ft-tabelle-rahmen { max-width: 100%; }
/* Breite Tabellen (bis 6 Spalten) passen in die Spalte: Rasterspalte darf schrumpfen, lange Wörter werden getrennt. */
.ft-artikel__inhalt { min-width: 0; }
.ft-tabelle th, .ft-tabelle td { hyphens: auto; overflow-wrap: break-word; }
.ft-tabelle { width: 100%; border-collapse: collapse; font-size: var(--ft-fs-text); }
.ft-tabelle caption { text-align: left; font-weight: var(--ft-gewicht-fett); margin-bottom: var(--ft-a-3); }
.ft-tabelle th, .ft-tabelle td { text-align: left; vertical-align: top; padding: var(--ft-a-4); border-bottom: 1px solid var(--ft-linie); }
.ft-tabelle thead th { background: var(--ft-tinte); color: var(--ft-weiss); font-weight: var(--ft-gewicht-fett); border: 0; }
.ft-tabelle thead th:first-child { border-top-left-radius: var(--ft-radius-klein); }
.ft-tabelle thead th:last-child { border-top-right-radius: var(--ft-radius-klein); }
.ft-tabelle tbody th { font-weight: var(--ft-gewicht-fett); background: var(--ft-creme); width: 22%; }
.ft-tabelle td small { display: block; color: var(--ft-tinte-2); margin-top: var(--ft-a-1); }
@media (max-width: 47.99em) {
  .ft-tabelle--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ft-tabelle--karten, .ft-tabelle--karten tbody, .ft-tabelle--karten tr, .ft-tabelle--karten th, .ft-tabelle--karten td { display: block; width: 100%; }
  /* Titel der Tabelle über die ganze Breite, sonst bricht er nach jedem Wort um (Befund 29.10.2026) */
  /* Sichtbarer Titel über die ganze Breite; der versteckte (.ft-sr) bleibt 1 px breit, sonst ragt er über den Rand (A1, 30.10.2026) */
  .ft-tabelle--karten caption:not(.ft-sr) { display: block; width: 100%; }
  .ft-tabelle--karten tr { border: 2px solid var(--ft-tinte); border-radius: var(--ft-radius); margin-bottom: var(--ft-a-4); overflow: hidden; }
  .ft-tabelle--karten tbody th { width: auto; background: var(--ft-gelb); font-size: var(--ft-fs-h4); padding: var(--ft-a-3) var(--ft-a-4); border: 0; }
  .ft-tabelle--karten td { border-bottom: 1px solid var(--ft-linie); padding: var(--ft-a-3) var(--ft-a-4); }
  .ft-tabelle--karten td:last-child { border-bottom: 0; }
  .ft-tabelle--karten td::before { content: attr(data-label); display: block; font-size: var(--ft-fs-klein); font-weight: var(--ft-gewicht-fett); color: var(--ft-tinte-2); margin-bottom: var(--ft-a-1); }
}

/* ============ Aufklappbare Liste (Kantone) ============ */
.ft-aufklapp { border-top: 2px solid var(--ft-tinte); }
.ft-aufklapp details { border-bottom: 1px solid var(--ft-rahmen); }
.ft-aufklapp summary {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ft-a-3);
  min-height: 4rem; padding: var(--ft-a-3) var(--ft-a-2);
  cursor: pointer; list-style: none; font-weight: var(--ft-gewicht-fett); font-size: var(--ft-fs-h4);
}
.ft-aufklapp summary::-webkit-details-marker { display: none; }
.ft-aufklapp summary:hover { background: var(--ft-creme); }
.ft-aufklapp summary small { display: block; font-weight: var(--ft-gewicht-normal); font-size: var(--ft-fs-klein); color: var(--ft-tinte-2); }
.ft-aufklapp__zeichen { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--ft-tinte); display: grid; place-items: center; }
.ft-aufklapp__zeichen .ft-icon { transition: transform .2s; }
.ft-aufklapp details[open] .ft-aufklapp__zeichen { background: var(--ft-gelb); }
.ft-aufklapp details[open] .ft-aufklapp__zeichen .ft-icon { transform: rotate(180deg); }
.ft-aufklapp__inhalt { padding: 0 var(--ft-a-2) var(--ft-a-5); }
.ft-angaben { display: grid; grid-template-columns: 1fr; gap: var(--ft-a-1) var(--ft-a-5); margin: 0; }
.ft-angaben dt { font-weight: var(--ft-gewicht-fett); margin-top: var(--ft-a-3); }
.ft-angaben dd { margin: 0; }
@media (min-width: 40em) {
  .ft-angaben { grid-template-columns: 13rem 1fr; }
  .ft-angaben dt { margin-top: 0; }
  .ft-angaben dt, .ft-angaben dd { padding-block: var(--ft-a-2); border-bottom: 1px solid var(--ft-linie); }
}

/* ============ Hinweisboxen ============ */
.ft-hinweis {
  /* minmax(0, 1fr) und Silbentrennung: lange Wörter wie «Verkehrszulassungsverordnung» passen auch bei 320 px (A1, 30.10.2026) */
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ft-a-3); hyphens: auto; -webkit-hyphens: auto;
  max-width: var(--ft-breite-text);
  padding: var(--ft-a-4) var(--ft-a-5);
  border-radius: var(--ft-radius);
  background: var(--ft-gelb-hell);
  margin-bottom: var(--ft-a-5);
}
.ft-hinweis > .ft-icon { margin-top: 0.2em; width: 1.5rem; height: 1.5rem; }
.ft-hinweis p:last-child { margin-bottom: 0; }
.ft-hinweis__titel { font-weight: var(--ft-gewicht-fett); margin-bottom: var(--ft-a-1); }
.ft-hinweis--geltung { background: var(--ft-flaeche); padding-block: var(--ft-a-3); }
.ft-hinweis--wichtig { background: var(--ft-weiss); border: 2px solid var(--ft-tinte); }
.ft-hinweis--platzhalter { background: var(--ft-fehler-hell); border: 2px dashed var(--ft-fehler); }
.ft-platzhalter { background: var(--ft-fehler-hell); outline: 2px dashed var(--ft-fehler); outline-offset: 1px; padding: 0 0.25em; font-family: var(--ft-schrift); }

/* ============ Quellen ============ */
.ft-quelle {
  display: inline; 
  font-size: var(--ft-fs-klein); color: var(--ft-tinte-2);
  text-decoration-thickness: 1px;
}
.ft-quelle .ft-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.25em; }
.ft-quellen { counter-reset: q; list-style: none; padding: 0; font-size: var(--ft-fs-klein); }
.ft-quellen li { counter-increment: q; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); overflow-wrap: anywhere; gap: var(--ft-a-2); padding: var(--ft-a-3) 0; border-bottom: 1px solid var(--ft-linie); margin: 0; }
.ft-quellen li::before { content: counter(q); font-weight: var(--ft-gewicht-fett); width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ft-flaeche); display: grid; place-items: center; }
.ft-quellen li:target { background: var(--ft-gelb-hell); }
.ft-quellen__titel { font-weight: var(--ft-gewicht-fett); font-size: var(--ft-fs-text); }
.ft-quellen__meta { display: block; color: var(--ft-tinte-2); }

/* ============ Autorbox ============ */
.ft-autor { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--ft-a-4); align-items: start; max-width: var(--ft-breite-text); padding: var(--ft-a-5); background: var(--ft-flaeche); border-radius: var(--ft-radius); }
.ft-autor__bild { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; background: var(--ft-gelb); display: grid; place-items: center; font-weight: var(--ft-gewicht-fett); font-size: 1.375rem; }
.ft-autor__name { font-weight: var(--ft-gewicht-fett); margin: 0; }
.ft-autor__rolle { color: var(--ft-tinte-2); margin: 0 0 var(--ft-a-3); }
.ft-autor .ft-angaben { font-size: var(--ft-fs-klein); }
@media (min-width: 40em) { .ft-autor .ft-angaben { grid-template-columns: 11rem 1fr; } }
/* Team: Glühbirnen-Logo statt Kürzel (Runde 5, A3). Handy: kleines Logo neben dem Namen, Text in voller Breite,
   damit der Kasten trotz längerem Text nicht höher wird als bisher */
.ft-autor__logo { width: 4.5rem; height: 4.5rem; }
.ft-autor__von { font-weight: var(--ft-gewicht-normal); }
@media (max-width: 39.99em) {
  .ft-autor--team { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--ft-a-2) var(--ft-a-3); align-items: center; padding: var(--ft-a-4); }
  .ft-autor--team > div { display: contents; }
  .ft-autor--team > div > :not(.ft-autor__name) { grid-column: 1 / -1; }
  .ft-autor--team .ft-autor__logo { width: 3rem; height: 3rem; }
  .ft-autor--team .ft-autor__rolle { margin-bottom: 0; line-height: 1.5; }
  /* Bezeichnung und Wert in einer Zeile («Zuletzt geprüft: 26. Oktober 2026, …») */
  .ft-autor--team .ft-angaben { display: block; margin-top: var(--ft-a-2); line-height: 1.5; }
  .ft-autor--team .ft-angaben dt { display: inline; margin: 0; }
  .ft-autor--team .ft-angaben dt::after { content: ": "; }
  .ft-autor--team .ft-angaben dd { display: inline; margin: 0; }
  .ft-autor--team .ft-angaben dd::after { content: ""; display: block; margin-bottom: var(--ft-a-1); }
  .ft-autor--team > div > p:last-child { margin-top: var(--ft-a-1) !important; }
}

/* ============ Karten (Übungen, Ratgeber) ============ */
.ft-karte {
  position: relative;
  display: flex; flex-direction: column; gap: var(--ft-a-2);
  padding: var(--ft-a-5);
  background: var(--ft-weiss);
  border: 2px solid var(--ft-linie);
  border-radius: var(--ft-radius);
  height: 100%;
}
.ft-karte:hover { border-color: var(--ft-tinte); }
.ft-karte:focus-within { outline: 3px solid var(--ft-fokus); outline-offset: 3px; }
.ft-karte:focus-within a:focus-visible { outline: none; }
.ft-karte__bild { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ft-gelb); display: grid; place-items: center; margin-bottom: var(--ft-a-2); }
.ft-karte__bild .ft-icon { width: 1.9rem; height: 1.9rem; }
.ft-karte h3 { font-size: var(--ft-fs-h4); margin: 0; }
.ft-karte h3 a { text-decoration: none; }
.ft-karte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ft-radius); }
.ft-karte h3 a:hover { background: none; }
.ft-karte p { margin: 0; color: var(--ft-tinte-2); }
.ft-karte__fuss { margin-top: auto; padding-top: var(--ft-a-3); display: flex; flex-wrap: wrap; gap: var(--ft-a-2); align-items: center; justify-content: space-between; }
.ft-karte__pfeil { display: inline-flex; align-items: center; gap: var(--ft-a-2); font-weight: var(--ft-gewicht-fett); }
.ft-etikett { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.7rem; border-radius: var(--ft-radius-pill); background: var(--ft-flaeche); font-size: var(--ft-fs-klein); font-weight: var(--ft-gewicht-fett); color: var(--ft-tinte); }
.ft-etikett--gelb { background: var(--ft-gelb-hell); }
.ft-karte--link { flex-direction: row; align-items: center; gap: var(--ft-a-4); padding: var(--ft-a-4) var(--ft-a-5); }
.ft-karte--link h3 { flex: 1; }
.ft-karte--link > .ft-icon { width: 1.75rem; height: 1.75rem; }

/* ============ Buchkasten ============ */
.ft-buch { display: grid; gap: var(--ft-a-5); padding: var(--ft-a-5); background: var(--ft-creme); border-radius: var(--ft-radius); border: 2px solid var(--ft-tinte); }
.ft-buch__cover { width: 9rem; height: auto; box-shadow: 0 6px 18px rgba(28,28,30,.25); border-radius: 4px; }
.ft-buch__label { font-size: var(--ft-fs-klein); font-weight: var(--ft-gewicht-fett); color: var(--ft-tinte-2); margin: 0 0 var(--ft-a-2); }
.ft-buch h2, .ft-buch h3 { margin-top: 0; }
.ft-buch__haendler { font-size: var(--ft-fs-klein); color: var(--ft-tinte-2); margin: var(--ft-a-3) 0 0; }
@media (min-width: 40em) {
  .ft-buch { grid-template-columns: auto 1fr; align-items: center; padding: var(--ft-a-6); gap: var(--ft-a-6); }
  .ft-buch__cover { width: 11rem; }
}

/* ============ FAQ ============ */
.ft-faq { max-width: var(--ft-breite-text); border-top: 2px solid var(--ft-tinte); }
.ft-faq details { border-bottom: 1px solid var(--ft-rahmen); }
.ft-faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--ft-a-3); hyphens: auto; -webkit-hyphens: auto;
  min-height: 4rem; padding: var(--ft-a-3) 0; cursor: pointer; list-style: none;
  font-weight: var(--ft-gewicht-fett); font-size: var(--ft-fs-h4); line-height: 1.35;
}
.ft-faq summary::-webkit-details-marker { display: none; }
.ft-faq summary:hover { color: var(--ft-tinte); background: linear-gradient(var(--ft-gelb-hell), var(--ft-gelb-hell)) 0 100% / 100% 0 no-repeat; }
.ft-faq__zeichen { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--ft-tinte); display: grid; place-items: center; }
.ft-faq__zeichen::before { content: "+"; font-size: 1.5rem; line-height: 1; font-weight: var(--ft-gewicht-fett); }
.ft-faq details[open] .ft-faq__zeichen { background: var(--ft-gelb); }
.ft-faq details[open] .ft-faq__zeichen::before { content: "−"; }
.ft-faq__antwort { padding: 0 0 var(--ft-a-5); }
.ft-faq__antwort p:last-child { margin-bottom: 0; }

/* ============ Inhaltsverzeichnis ============ */
.ft-toc { padding: var(--ft-a-5); background: var(--ft-flaeche); border-radius: var(--ft-radius); margin-bottom: var(--ft-a-6); }
.ft-toc__titel { font-weight: var(--ft-gewicht-fett); margin: 0 0 var(--ft-a-2); }
.ft-toc ol { margin: 0; padding-left: 1.4em; }
.ft-toc li { margin: 0; }
.ft-toc a { display: inline-flex; min-height: 2.75rem; align-items: center; }
.ft-toc--mobil { margin-block: var(--ft-a-5); }
.ft-toc--mobil summary { cursor: pointer; min-height: var(--ft-ziel-min); display: flex; align-items: center; list-style: none; margin: 0; }
.ft-toc--mobil summary::-webkit-details-marker { display: none; }
.ft-toc--mobil summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; font-weight: var(--ft-gewicht-fett); }
.ft-toc--mobil[open] summary::after { content: "−"; }
.ft-toc--mobil ol { margin-top: var(--ft-a-2); }
@media (max-width: 74.99em) { .ft-artikel__seite nav.ft-toc { display: none; } .ft-artikel__seite:not(:has(> :not(nav.ft-toc))) { display: none; } }
@media (min-width: 75em) { .ft-toc--mobil { display: none; } }

/* ============ Ratgeber-Layout mit Seitenleiste ============ */
.ft-artikel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-a-6); padding-bottom: var(--ft-abschnitt); }
.ft-artikel__inhalt { min-width: 0; }
.ft-artikel__inhalt > * { max-width: var(--ft-breite-text); }
.ft-artikel__inhalt > .ft-breit { max-width: none; }
@media (min-width: 75em) {
  .ft-artikel { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--ft-a-8); }
  .ft-artikel__seite { order: 2; }
  .ft-artikel__seite .ft-toc { position: sticky; top: var(--ft-a-5); }
}

/* ============ Presse ============ */
/* Pressekarten und Zitate: dünner grauer Rahmen rundum statt Balken links (Runde 5, 30.10.2026) */
.ft-presse { display: flex; flex-direction: column; gap: var(--ft-a-3); padding: var(--ft-a-5); border: 1px solid var(--ft-linie); border-radius: var(--ft-radius); background: var(--ft-weiss); height: 100%; }
main blockquote:not(.ft-presse blockquote) { padding: var(--ft-a-4) var(--ft-a-5); border: 1px solid var(--ft-linie); border-radius: var(--ft-radius); background: var(--ft-weiss); }
main blockquote:not(.ft-presse blockquote) > :last-child { margin-bottom: 0; }
.ft-presse__quelle { font-weight: var(--ft-gewicht-fett); margin: 0; }
.ft-presse__datum { color: var(--ft-tinte-2); font-size: var(--ft-fs-klein); margin: 0; }
.ft-presse__titel { font-weight: var(--ft-gewicht-fett); margin: var(--ft-a-2) 0 0; }
.ft-presse blockquote { margin: 0; font-size: var(--ft-fs-text); }
.ft-presse blockquote p { margin: 0; }
.ft-presse__wer { color: var(--ft-tinte-2); font-size: var(--ft-fs-klein); margin: 0; }
.ft-presse .ft-weiter { margin-top: auto; }

/* ============ Download (PDF) ============ */
.ft-download { display: grid; grid-template-columns: auto 1fr; gap: var(--ft-a-4); align-items: center; max-width: var(--ft-breite-text); padding: var(--ft-a-5); border: 2px solid var(--ft-tinte); border-radius: var(--ft-radius); background: var(--ft-creme); }
.ft-download__icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ft-gelb); display: grid; place-items: center; }
.ft-download p { margin: 0; }
.ft-download .ft-knopfreihe { grid-column: 1 / -1; }
@media (min-width: 40em) { .ft-download { grid-template-columns: auto 1fr auto; } .ft-download .ft-knopfreihe { grid-column: auto; } }

/* ============ Formular ============ */
.ft-formular { max-width: 40rem; display: grid; gap: var(--ft-a-5); }
.ft-feld { display: grid; gap: var(--ft-a-2); }
.ft-feld label, .ft-feld legend { font-weight: var(--ft-gewicht-fett); }
.ft-feld__pflicht { font-weight: var(--ft-gewicht-normal); color: var(--ft-tinte-2); }
.ft-feld__hilfe { font-size: var(--ft-fs-klein); color: var(--ft-tinte-2); margin: 0; }
.ft-feld input[type="text"], .ft-feld input[type="email"], .ft-feld input[type="tel"], .ft-feld select, .ft-feld textarea {
  width: 100%; min-height: var(--ft-feld-hoehe); padding: 0.75rem 1rem;
  border: 2px solid var(--ft-rahmen); border-radius: 8px; background: var(--ft-weiss);
}
.ft-feld textarea { min-height: 10rem; resize: vertical; }
.ft-feld input:focus-visible, .ft-feld textarea:focus-visible, .ft-feld select:focus-visible { outline: 3px solid var(--ft-fokus); outline-offset: 2px; border-color: var(--ft-tinte); }
.ft-feld [aria-invalid="true"] { border-color: var(--ft-fehler); background: var(--ft-fehler-hell); }
.ft-feld__fehler { display: flex; gap: var(--ft-a-2); align-items: center; color: var(--ft-fehler); font-weight: var(--ft-gewicht-fett); margin: 0; }
.ft-ankreuz { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--ft-a-3); align-items: start; min-height: var(--ft-ziel-min); cursor: pointer; }
.ft-ankreuz input { width: 1.75rem; height: 1.75rem; margin: 0.15rem 0 0; accent-color: var(--ft-tinte); }

/* ============ Fusszeile ============ */
.ft-fuss { background: var(--ft-tinte); color: #F2F2F2; padding-block: var(--ft-a-8) var(--ft-a-6); margin-top: 0; }
.ft-fuss a { color: var(--ft-weiss); text-decoration-color: var(--ft-gelb); }
.ft-fuss a:hover { background: transparent; color: var(--ft-gelb); }
.ft-fuss__raster { display: grid; gap: var(--ft-a-6); }
.ft-fuss__titel { font-weight: var(--ft-gewicht-fett); color: var(--ft-gelb); margin: 0 0 var(--ft-a-3); font-size: var(--ft-fs-text); }
.ft-fuss ul { list-style: none; padding: 0; margin: 0; }
.ft-fuss li { margin: 0; }
.ft-fuss li a { display: inline-flex; align-items: center; min-height: var(--ft-ziel-min); }
.ft-fuss .ft-marke { color: var(--ft-weiss); margin-bottom: var(--ft-a-3); }
.ft-fuss .ft-marke:hover { color: var(--ft-weiss); }
.ft-fuss__text { color: #D9D9D9; max-width: 34ch; }
.ft-fuss__unten { margin-top: var(--ft-a-7); padding-top: var(--ft-a-5); border-top: 1px solid #4A4A4F; display: flex; flex-wrap: wrap; gap: var(--ft-a-3) var(--ft-a-5); align-items: center; justify-content: space-between; color: #D9D9D9; font-size: var(--ft-fs-klein); }
.ft-fuss__unten ul { display: flex; flex-wrap: wrap; gap: 0 var(--ft-a-5); }
@media (min-width: 40em) { .ft-fuss__raster { grid-template-columns: repeat(2, 1fr); } }
/* Desktop (Runde 6, A5): Beschreibung über die ganze Breite, darunter drei Linkspalten so breit wie ihr längster
   Link, damit jeder Link einzeilig bleibt */
@media (min-width: 60em) {
  .ft-fuss__raster > :first-child { grid-column: 1 / -1; }
  .ft-fuss__raster .ft-fuss__text { max-width: 60ch; }
  .ft-fuss li a { white-space: nowrap; }
}
@media (min-width: 75em) {
  .ft-fuss__raster { grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: var(--ft-a-6); }
}

/* ============ Cookie-Leiste (Gestaltungsziel für Complianz) ============ */
.ft-cookie {
  position: fixed; left: var(--ft-a-3); right: var(--ft-a-3); bottom: var(--ft-a-3); z-index: 50;
  display: grid; gap: var(--ft-a-3);
  padding: var(--ft-a-4) var(--ft-a-5);
  background: var(--ft-weiss); border: 2px solid var(--ft-tinte); border-radius: var(--ft-radius);
  box-shadow: var(--ft-schatten);
  max-height: 40vh; overflow: auto;
}
.ft-cookie p { margin: 0; font-size: var(--ft-fs-klein); }
.ft-cookie .ft-knopfreihe { gap: var(--ft-a-2); }
.ft-cookie .ft-knopf { min-height: var(--ft-ziel-min); padding-inline: 1.2rem; }
.ft-cookie--statisch { position: static; box-shadow: none; max-height: none; }
@media (min-width: 60em) {
  .ft-cookie { left: 50%; right: auto; transform: translateX(-50%); width: min(60rem, calc(100% - 2rem)); grid-template-columns: 1fr auto; align-items: center; }
  .ft-cookie--statisch { transform: none; width: auto; }
}

/* ============ Spielseite ============ */
.ft-spielbereich { padding-block: var(--ft-a-5) var(--ft-a-6); background: var(--ft-flaeche); }
.ft-spielbereich__hinweis { max-width: 850px; font-size: var(--ft-fs-klein); color: var(--ft-tinte-2); margin: var(--ft-a-4) auto 0; text-align: center; }

/* ============ Selbsttest ============ */
.ft-test { max-width: 46rem; }
.ft-fortschritt { margin-bottom: var(--ft-a-6); }
.ft-fortschritt__text { display: flex; justify-content: space-between; gap: var(--ft-a-3); font-weight: var(--ft-gewicht-fett); margin: 0 0 var(--ft-a-2); }
.ft-fortschritt__text span:last-child { font-weight: var(--ft-gewicht-normal); color: var(--ft-tinte-2); }
.ft-fortschritt__balken { height: 0.75rem; border-radius: var(--ft-radius-pill); background: var(--ft-flaeche); border: 1px solid var(--ft-rahmen); overflow: hidden; }
.ft-fortschritt__balken span { display: block; height: 100%; background: var(--ft-gelb); border-right: 2px solid var(--ft-tinte); }
.ft-frage { border: 0; margin: 0 0 var(--ft-a-6); padding: 0; }
.ft-frage legend { font-size: var(--ft-fs-h3); font-weight: var(--ft-gewicht-fett); line-height: 1.35; margin-bottom: var(--ft-a-5); padding: 0; }
.ft-wahl { display: grid; gap: var(--ft-a-3); }
.ft-wahl label {
  display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--ft-a-4); align-items: center;
  min-height: 4rem; padding: var(--ft-a-3) var(--ft-a-5);
  border: 2px solid var(--ft-rahmen); border-radius: var(--ft-radius);
  cursor: pointer; font-weight: var(--ft-gewicht-fett); background: var(--ft-weiss);
}
.ft-wahl label:hover { border-color: var(--ft-tinte); background: var(--ft-creme); }
.ft-wahl input { width: 1.75rem; height: 1.75rem; margin: 0; accent-color: var(--ft-tinte); }
.ft-wahl label:has(input:checked) { border-color: var(--ft-tinte); background: var(--ft-gelb-hell); }
.ft-wahl label:has(input:focus-visible) { outline: 3px solid var(--ft-fokus); outline-offset: 3px; }
.ft-test__nav { display: flex; justify-content: space-between; gap: var(--ft-a-3); flex-wrap: wrap-reverse; }
.ft-test__nav .ft-knopf { flex: 1 1 12rem; }
@media (min-width: 40em) { .ft-test__nav .ft-knopf { flex: 0 1 auto; } }
.ft-ergebnis-block { border: 2px solid var(--ft-tinte); border-radius: var(--ft-radius); padding: var(--ft-a-5); margin-bottom: var(--ft-a-5); background: var(--ft-weiss); }
.ft-ergebnis-block__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ft-a-2) var(--ft-a-4); margin-bottom: var(--ft-a-3); }
.ft-ergebnis-block__kopf h3 { margin: 0; }
.ft-ergebnis-liste { list-style: none; padding: 0; margin: 0; }
.ft-ergebnis-liste > li { padding: var(--ft-a-4) 0 0; margin: var(--ft-a-4) 0 0; border-top: 1px solid var(--ft-linie); }
.ft-ergebnis-liste__frage { margin: 0 0 var(--ft-a-1); color: var(--ft-tinte-2); }
.ft-ergebnis-liste__antwort { margin: 0 0 var(--ft-a-3); font-weight: var(--ft-gewicht-fett); }
.ft-ergebnis-liste .ft-hinweis { margin: 0; }
.ft-ergebnis-block--ruhig { background: var(--ft-flaeche); border-color: var(--ft-linie); }
.ft-ergebnis-block__hinweis { margin: var(--ft-a-5) 0 0; }

/* ============ Buchseite: Kopf mit Cover ============ */
.ft-buchkopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-a-4); margin-top: var(--ft-a-5); }
.ft-buchkopf h1 { margin-top: 0; max-width: 22ch; }
.ft-buchkopf__cover { width: 8rem; height: auto; border-radius: 4px; box-shadow: 0 10px 28px rgba(28,28,30,.28); }
.ft-buchkopf__zwischentitel { font-size: var(--ft-fs-h4); margin: var(--ft-a-6) 0 var(--ft-a-3); }
.ft-haendler { list-style: none; padding: 0; margin: 0 0 var(--ft-a-3); display: grid; gap: var(--ft-a-3); }
.ft-haendler li { margin: 0; }
.ft-haendler .ft-knopf { width: 100%; justify-content: space-between; background: var(--ft-weiss); }
.ft-haendler .ft-knopf:hover { background: var(--ft-tinte); }
@media (min-width: 40em) { .ft-haendler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Handy bis 767 px: Titel, Kaufkasten (mit kleinem Titelbild), erster Absatz, Autorenzeile; kein grosses Titelbild
   (Entscheide 28.10.2026). FR: der Hinweiskasten zur Sprache steht hinter dem Kaufkasten. */
.ft-kauf__cover { display: none; }
.ft-kauf__sprache { font-weight: var(--ft-gewicht-fett); margin: 0 0 var(--ft-a-3); }
@media (max-width: 47.99em) {
  .ft-seitenkopf:has(.ft-buchkopf) { padding-top: var(--ft-a-2); }
  .ft-buchkopf { margin-top: var(--ft-a-3); gap: 0; }
  .ft-buchkopf__text { display: contents; }
  .ft-buchkopf__cover { display: none; }
  .ft-buchkopf__text > .ft-hinweis { order: 1; margin-top: var(--ft-a-4); }
  .ft-buchkopf__rest { order: 2; margin-top: var(--ft-a-4); }
  .ft-buchkopf h1 { margin-bottom: 0; }
  /* Kaufkasten vor der Einleitung (Entscheid 29.10.2026, #60): Preis und Knopf bei 375 × 667 px ohne Scrollen */
  .ft-buchkopf .ft-lead { order: 1; margin: var(--ft-a-4) 0 0; }
  /* Kaufkasten: kleines Titelbild links neben dem Preis, Knopf darunter in voller Breite, dann die Hinweise */
  .ft-buchkopf .ft-kauf { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ft-a-4); align-items: center; margin-block: var(--ft-a-4) 0; padding: var(--ft-a-4); }
  .ft-buchkopf .ft-kauf > * { grid-column: 1 / -1; order: 3; }
  .ft-buchkopf .ft-kauf > .ft-kauf__cover { display: block; grid-column: 1; grid-row: 1; width: 6rem; height: auto; border-radius: 3px; box-shadow: 0 4px 10px rgba(28,28,30,.2); }
  .ft-buchkopf .ft-kauf > .ft-kauf__preis { grid-column: 2; grid-row: 1; margin: 0; }
  .ft-buchkopf .ft-kauf > .ft-kauf__sprache { order: 1; margin: var(--ft-a-3) 0 0; }
  .ft-buchkopf .ft-kauf > :is(form, p:has(> .ft-knopf)) { order: 2; margin: var(--ft-a-3) 0; }
  .ft-buchkopf .ft-kauf .ft-knopf { width: 100%; }
  .ft-buchkopf .ft-kauf > .ft-kauf__info:last-child { margin-bottom: 0; }
}
@media (min-width: 60em) {
  .ft-buchkopf { grid-template-columns: 17rem 1fr; gap: var(--ft-a-8); align-items: start; }
  .ft-buchkopf__cover { width: 100%; }
}
.ft-angaben--eng { grid-template-columns: 1fr; font-size: var(--ft-fs-klein); }
.ft-angaben--eng dt { margin-top: var(--ft-a-3); }
.ft-angaben--eng dt, .ft-angaben--eng dd { padding: 0; border: 0; }
/* Runde 6, A7: Spalten schrumpfen mit dem Kasten, kleiner Spaltenabstand (vorher ragten die Werte rechts hinaus) */
@media (min-width: 40em) { .ft-angaben--eng { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--ft-a-3); } .ft-angaben--eng dt, .ft-angaben--eng dd { padding-block: var(--ft-a-1); border-bottom: 1px solid var(--ft-linie); margin: 0; } }
.ft-angaben--eng dd { overflow-wrap: normal; }
.ft-nowrap { white-space: nowrap; }

/* ============ Kontakt: E-Mail-Adresse gross (kein Formular, Entscheid 3b) ============ */
.ft-kontakt-mail { font-size: var(--ft-fs-h3); font-weight: var(--ft-gewicht-fett); margin: var(--ft-a-5) 0; overflow-wrap: anywhere; }
.ft-kontakt-mail a { display: inline-flex; align-items: center; min-height: var(--ft-ziel-min); padding: var(--ft-a-2) var(--ft-a-4); border: 2px solid var(--ft-tinte); border-radius: var(--ft-radius); background: var(--ft-gelb-hell); color: var(--ft-tinte); text-decoration: underline; text-underline-offset: 0.2em; }
.ft-kontakt-mail a:hover { background: var(--ft-gelb); }

/* ============ Checkliste: kompakte Druckfassung (eine A4-Seite, auch Quelle des PDF) ============ */
@media print {
  .ft-seite-checkliste .ft-meta, .ft-seite-checkliste .ft-quelle, .ft-seite-checkliste .ft-toc--mobil { display: none !important; }
  .ft-seite-checkliste .ft-artikel { display: block; padding-top: 0 !important; }
  .ft-seite-checkliste .ft-artikel__inhalt > *:not(h2):not(ul):not(.ft-hinweis--geltung),
  .ft-seite-checkliste .ft-artikel__inhalt > h2:is(#weiter, #fragen, #quellen) { display: none !important; }
  .ft-seite-checkliste h1 { font-size: 16pt; margin: 0 0 2mm; }
  .ft-seite-checkliste .ft-hinweis--geltung { font-size: 9pt; padding: 2mm 3mm; margin: 0 0 4mm; }
  .ft-seite-checkliste .ft-hinweis--geltung .ft-icon { display: none; }
  .ft-seite-checkliste .ft-artikel__inhalt { font-size: 9pt; line-height: 1.3; columns: 2; column-gap: 7mm; }
  .ft-seite-checkliste .ft-artikel__inhalt > .ft-hinweis--geltung { column-span: all; }
  .ft-seite-checkliste h2 { font-size: 12pt; margin: 3mm 0 1.5mm; break-after: avoid; }
  .ft-seite-checkliste ul { list-style: none; padding: 0; margin: 0; }
  .ft-seite-checkliste li { position: relative; padding-left: 6mm; margin: 0 0 1.2mm; }
  .ft-seite-checkliste li::before { content: ""; position: absolute; left: 0; top: 0.5mm; width: 3.2mm; height: 3.2mm; border: 0.3mm solid #1C1C1E; }
}

/* ============ Bild im Fliesstext ============ */
.ft-bild { margin: var(--ft-a-5) 0; max-width: 32rem; }
.ft-bild img { display: block; width: 100%; height: auto; border-radius: var(--ft-radius-klein); }
.ft-bild--portrait { max-width: 14rem; }

/* Kaufkasten auf der Buchseite, solange der Shop aktiv ist (inc/shop.php, Phase 1) */
.ft-kauf { background: var(--ft-weiss); border-radius: var(--ft-radius); padding: var(--ft-a-5); margin-block: var(--ft-a-5); max-width: 30rem; }
.ft-kauf__preis { font-size: var(--ft-fs-h3); font-weight: var(--ft-gewicht-fett); line-height: var(--ft-lh-titel); margin: 0 0 var(--ft-a-2); }
.ft-kauf__info { font-size: var(--ft-fs-klein); color: var(--ft-tinte-2); margin: 0 0 var(--ft-a-4); }
.ft-kauf form, .ft-kauf p:last-child { margin-bottom: 0; }
.ft-kauf .ft-knopf { width: 100%; }
@media (min-width: 40em) { .ft-kauf .ft-knopf { width: auto; } }

/* Buchhinweis nach der Einleitung ([ft_buch_hinweis]) */
.ft-buchhinweis { display: flex; align-items: center; gap: var(--ft-a-4); background: var(--ft-creme); border-radius: var(--ft-radius); padding: var(--ft-a-3) var(--ft-a-4); }
.ft-buchhinweis img { width: 3.5rem; height: auto; flex-shrink: 0; border-radius: 3px; box-shadow: 0 4px 10px rgba(28,28,30,.2); }
@media print { .ft-buchhinweis { display: none; } }


/* Externe Links: Symbol ↗ (neues Fenster, Runde 5, D14) */
.ft-extern { display: inline-block; margin-left: 0.15em; font-size: 0.85em; line-height: 1; text-decoration: none; }

/* Einheitliche Inhaltsbreite auf der Startseite (Runde 6, A3): «Kurz beantwortet» und FAQ so breit wie Schrittfolge,
   Tabellen und Absätze (gleiche linke und rechte Kante); der Text darin höchstens etwa 90 Zeichen pro Zeile.
   Auf den Pillar-Seiten haben alle Elemente schon dieselbe Breite (Textspalte). */
.ft-abschnitt .ft-antwort, .ft-abschnitt .ft-faq { max-width: none; }
.ft-abschnitt .ft-antwort > p, .ft-abschnitt .ft-faq__antwort > *, .ft-abschnitt .ft-faq summary > :first-child { max-width: 90ch; }

/* Silbentrennung in Autorenkarten nur auf sehr schmalen Bildschirmen (320 px), sonst trennt sie zu oft (Runde 6) */
@media (max-width: 22.5em) { .ft-autor { hyphens: auto; -webkit-hyphens: auto; } }

/* Spende an die Demenzforschung ([ft_spende], Runde 6) */
.ft-spende { display: grid; gap: var(--ft-a-4); align-items: center; max-width: var(--ft-breite-text); padding: var(--ft-a-5); border: 1px solid var(--ft-linie); border-radius: var(--ft-radius); background: var(--ft-weiss); }
.ft-spende img { width: 12rem; height: auto; }
.ft-spende p { margin: 0 0 var(--ft-a-2); }
.ft-spende p:last-child { margin-bottom: 0; }
@media (min-width: 40em) { .ft-spende { grid-template-columns: 15rem minmax(0, 1fr); } .ft-spende img { width: 15rem; } }

/* ============ Blog-Übersicht nach Kategorien (Runde 7, D4) ============ */
.ft-blog-sprung li { margin: 0; }
.ft-blog-sprung ul { list-style: none; align-items: center; display: flex; flex-wrap: wrap; gap: var(--ft-a-2); margin: 0 0 var(--ft-a-6); padding: 0; }
.ft-blog-sprung a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--ft-a-4); border: 2px solid var(--ft-linie); border-radius: var(--ft-radius-pill); background: var(--ft-weiss); font-weight: var(--ft-gewicht-fett); text-decoration: none; }
.ft-blog-sprung a:hover { border-color: var(--ft-tinte); }
.ft-blog-kategorie + .ft-blog-kategorie { margin-top: var(--ft-a-8); }
.ft-blog-kategorie > h2 { scroll-margin-top: var(--ft-a-6); margin: 0 0 var(--ft-a-5); }
.ft-karte--foto { padding: 0; overflow: hidden; gap: 0; }
.ft-karte__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ft-flaeche); }
.ft-karte__inhalt { display: flex; flex-direction: column; gap: var(--ft-a-2); flex: 1; padding: var(--ft-a-5); }

/* ============ Runde 8 (2.11.2026): Zeilenumbruch, Kanten, Knöpfe ============ */
/* A2: keine einzelnen Wörter auf der letzten Zeile. Überschriften «balance» (basis.css), Absätze und Einleitungen
   «pretty». Kurze Texte in Karten, Kästen und Einleitungen (meist 2–4 Zeilen) «balance»: dort lässt «pretty» oft noch
   zwei, drei kurze Wörter allein stehen. Browser ohne Unterstützung umbrechen wie bisher. */
p, li, dd, blockquote, figcaption, caption, summary { text-wrap: pretty; }
.ft-lead, .ft-hero__unterzeile, .ft-abschnitt__kopf p, .ft-karte p, .ft-hinweis p, .ft-hinweis__titel, .ft-buch p,
.ft-antwort p, .ft-spende p, .ft-kauf p, .ft-schritte p, .ft-download p, .ft-meta, .ft-neben, .ft-autor__rolle, .ft-presse__titel { text-wrap: balance; }

/* A3/A5: Kästen in Abschnitten (Startseite, Übungen, Selbsttest) so breit wie ihre Nachbarn (Buchkasten, Karten);
   in der Textspalte der Ratgeber bleiben alle Elemente gleich breit (68 Zeichen) */
.ft-abschnitt .ft-spende, .ft-abschnitt .ft-hinweis, main > .ft-container > .ft-hinweis { max-width: none; }
.ft-abschnitt .ft-hinweis > div > p { max-width: 90ch; }

/* Knöpfe ohne Umbruch (B, Runde 8): auf dem Handy weniger Innenabstand seitlich, damit «En savoir plus sur le livre»
   und «PDF herunterladen (1 MB)» auch bei 360 px auf eine Zeile passen. Knöpfe mit bewusst zweizeiligem Text
   (Zusatz in Klammern als eigene, kleinere Zeile) tragen .ft-knopf--zweizeilig. */
@media (max-width: 39.99em) {
  .ft-knopf { padding-inline: 0.75rem; }
  .ft-download { padding: var(--ft-a-4); }
}
@media (max-width: 39.99em) {
  .ft-knopf--zweizeilig { flex-direction: column; gap: 0; line-height: 1.2; padding-block: 0.45rem; }
  .ft-knopf--zweizeilig .ft-knopf__zusatz { font-size: var(--ft-fs-klein); font-weight: var(--ft-gewicht-normal); }
}
/* Karten-Raster in der Textspalte (Ratgeber, Buchseite) mit derselben rechten Kante wie Text und Kästen; vorher 21 px
   (1280) bis 93 px (1024) breiter. Breite Tabellen (.ft-breit) dürfen weiter die ganze Spalte nutzen. */
.ft-artikel__inhalt > .ft-raster.ft-breit { max-width: var(--ft-breite-text); }
/* Breite Tabellen (bis 6 Spalten) zwischen 768 und 959 px: weniger Innenabstand, lange Wörter brechen notfalls um
   (FR-Tabelle auf /fr/examen-aptitude-conduite/ war bei 768 px bis 27 px breiter als die Spalte, Runde 8) */
@media (min-width: 48em) and (max-width: 59.99em) {
  .ft-tabelle th, .ft-tabelle td { padding: var(--ft-a-3) var(--ft-a-2); overflow-wrap: anywhere; }
}
/* A3: Spendenbox direkt unter dem Buchkasten als Einheit (vorher doppelter Abschnittsabstand, rund 170 px Leerraum) */
.ft-abschnitt:has(> .ft-container > .ft-buch:only-child):has(+ .ft-abschnitt > .ft-container > .ft-spende:only-child) { padding-bottom: 0; }
.ft-abschnitt:has(> .ft-container > .ft-buch:only-child) + .ft-abschnitt:has(> .ft-container > .ft-spende:only-child) { padding-top: var(--ft-a-5); }
/* Hinweiskasten als eigener Abschnitt vor Karten (Übungen, Selbsttest): gehört zu den Karten darunter, also normaler
   Blockabstand statt voller Abschnittsabstand (vorher über 100 px Leerraum, Runde 8) */
.ft-abschnitt:has(> .ft-container > .ft-hinweis:only-child) + .ft-abschnitt { padding-top: var(--ft-a-6); }