.start-sprungziele { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; padding: 12px 0 24px; font-size: 14px; }
.start-sprungziele > span { color: var(--gedaempft); }
.start-sprungziele a { display: inline-flex; align-items: center; min-height: 44px; }
#start-guides, #prepare-your-demo, #evaluate-options, #read-the-evidence { scroll-margin-top: 80px; }
@media (max-width: 760px) {
  .start-sprungziele { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .start-sprungziele > span { grid-column: 1/-1; margin-bottom: 8px; }
}

/* Demo-Vorbereitung: Arbeitsblatt und Startseitenbeispiel teilen die Sprache. */
.demo-start { background: #f0f5fa; }
.demo-start-raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.demo-start-raster h2 { max-width: 580px; }
.demo-start-raster .vorspann { max-width: 560px; }
.demo-start-raster .knopfreihe { margin: 28px 0 12px; }
.demo-naechste { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; }
.demo-naechste a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.kaufhilfe-kaufwege { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; border-top: 1px solid #d6e0e9; margin-top: 28px; padding-top: 16px; }
.kaufhilfe-kaufwege > span { color: var(--gedaempft); font-size: 14px; }
.kaufhilfe-kaufwege a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.demo-vorschau { background: #fff; border: 1px solid #d6e0e9; border-radius: 20px; padding: 32px; box-shadow: 0 12px 36px #152c4710; }
.demo-vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-vorschau-kopf .kicker { margin: 0; }
.demo-vorschau h3 { font-size: 28px; line-height: 1.2; margin: 24px 0 16px; }
.demo-vorschau dl, .demo-aufgaben dl { margin: 24px 0; }
.demo-vorschau dl > div { border-top: 1px solid var(--linie); padding: 16px 0; }
.demo-vorschau dt, .demo-aufgaben dt { font-weight: 650; font-size: 14px; }
.demo-vorschau dd, .demo-aufgaben dd { margin: 6px 0 0; color: var(--gedaempft); }
.demo-offen { border-left: 3px solid #986b16; padding-left: 14px; font-weight: 650; }
.demo-offen span { display: block; font-size: 13px; color: var(--gedaempft); font-weight: 400; margin-top: 4px; }
.demo-intro { margin-bottom: 32px; }
.demo-formular, .demo-ergebnis { padding: 32px; border: 1px solid var(--linie-stark); border-radius: 18px; margin: 32px 0 48px; scroll-margin-top: 96px; }
.demo-formular { background: var(--abgesetzt); }
.demo-formular .feld { margin-bottom: 22px; }
.demo-formular textarea { width: 100%; resize: vertical; }
.demo-aufgaben { padding-left: 24px; }
.demo-aufgaben > li { padding: 12px 0 20px 8px; border-bottom: 1px solid var(--linie); }
.demo-aufgaben dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.demo-ergebnis p, .demo-ergebnis dd { overflow-wrap: anywhere; }
.demo-pflicht { color: #715019; font-size: 13px; font-weight: 650; }
.demo-abschluss { margin: 28px 0; }
.demo-how { margin: 48px 0; }
@media (max-width: 760px) {
  .demo-start-raster { grid-template-columns: 1fr; gap: 28px; }
  .demo-vorschau, .demo-formular, .demo-ergebnis { padding: 22px 18px; }
  .demo-vorschau h3 { font-size: 24px; }
  .demo-aufgaben dl { grid-template-columns: 1fr; gap: 14px; }
}
@media print {
  body:has(.demo-ergebnis) .demo-formular, body:has(.demo-ergebnis) .demo-intro { display: none; }
  .demo-ergebnis { padding: 0; border: 0; }
  .demo-aufgaben > li { break-inside: avoid; }
  .demo-ergebnis a.weiter { display: none; }
}
:root {
  color-scheme: light;

  /* Flaechen */
  --grund: #ffffff;
  --abgesetzt: #f5f5f7;
  --flaeche: #ffffff;

  /* Schrift */
  --tinte: #1d1d1f;           /* 16,83:1 auf Weiss */
  --gedaempft: #6e6e73;       /*  5,07:1 auf Weiss, 4,66:1 auf #f5f5f7 */
  --linie: #e8e8ed;
  --linie-stark: #d6d6dc;

  /* Handlung */
  --aktion: #0071e3;          /* Flaeche. Weiss darauf 4,70:1 */
  --aktion-tief: #005bb8;     /* gedrueckt, und Flaeche mit Weiss 6,59:1 */
  --aktion-text: #0062c4;     /* Textlink: 5,93:1 auf Weiss, 5,44:1 auf #f5f5f7 */
  --aktion-schwach: #eef5fd;

  /* Pruefstaende. Je Stand ein Punkt (Farbe aus dem Auftrag) und ein
     Textton, der auf seiner Tinte 4,5:1 traegt. Gemessen, nicht geschaetzt. */
  --stand-verified-punkt: #12805c;  --stand-verified-tinte: #e8f3ef;  --stand-verified-text: #0b6b4e;  /* 5,73:1 */
  --stand-corrob-punkt:   #0b5cab;  --stand-corrob-tinte:   #e6eff9;  --stand-corrob-text:   #0b5cab;  /* 5,77:1 */
  --stand-vendor-punkt:   #b65c00;  --stand-vendor-tinte:   #faefe2;  --stand-vendor-text:   #8a4600;  /* 6,26:1 */
  --stand-kunde-punkt:    #6d4aa8;  --stand-kunde-tinte:    #efebf7;  --stand-kunde-text:    #5b3e8c;  /* 7,12:1 */
  --stand-schaetz-punkt:  #3f6b7a;  --stand-schaetz-tinte:  #e9f1f3;  --stand-schaetz-text:  #33606e;  /* 6,04:1 */
  --stand-offen-punkt:    #86868b;  --stand-offen-tinte:    #f0f0f2;  --stand-offen-text:    #5b5b60;  /* 5,93:1 */

  /* Die Markierung des Werts im Belegausschnitt. Tinte darauf 15,4:1. */
  --markierung: #fff3b0;

  --schrift: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  /* Monospace NUR fuer API- und Entwicklerdaten. Zahlen im Fliesstext tragen
     tabular-nums in derselben Schrift; eine Preistabelle in Menlo sieht aus
     wie ein Terminal und nicht wie ein Nachschlagewerk. */
  --code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --spalte: 1280px;
  --lesebreite: 720px;

  --radius-gross: 26px;
  --radius: 18px;
  --radius-klein: 12px;
  --tippziel: 44px;

  --abstand-abschnitt: 72px;
  --schatten: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  --schatten-hoch: 0 2px 4px rgba(0,0,0,0.05), 0 16px 40px rgba(0,0,0,0.09);

  /* Bruecken auf die Namen des alten Gestaltungssystems. Sie stehen hier,
     weil ein var(--akzent), das es nicht mehr gibt, LAUTLOS auf die geerbte
     Farbe faellt: Der Pluspunkt einer Finder-Zeile war deshalb schwarz statt
     gruen, und niemand haette es je gemeldet. test/darstellung-gestalt.test.js
     verlangt seit dem 03.09.2026, dass jede benutzte Variable definiert ist. */
  --akzent: var(--aktion-text);
  --akzent-schwach: var(--aktion-schwach);
  --zahlen: var(--code);
  --rahmen: var(--radius);

  --schnell: 180ms;
  --ruhig: 260ms;
  --zeichnen: 800ms;
  --kurve: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Zahlen laufen ueberall in gleichen Ziffernbreiten. Eine Spalte mit
   springenden Ziffern liest sich wie ein Fehler. */
body { font-variant-numeric: tabular-nums; }

a { color: var(--aktion-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

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

/* --- Raster ------------------------------------------------------------ */

.huelle { max-width: var(--spalte); margin: 0 auto; padding: 0 24px; }
.prosa { max-width: var(--lesebreite); }
.prosa p { margin: 0 0 1.1em; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li { margin-bottom: 0.45em; }
.eng { max-width: 900px; }
.mitte { margin-left: auto; margin-right: auto; }
.zentriert { text-align: center; }

/* --- Schriftleiter ------------------------------------------------------ */

h1, h2, h3, h4 { letter-spacing: -0.022em; line-height: 1.08; margin: 0; font-weight: 640; }
h1 { font-size: clamp(40px, 6.4vw, 68px); letter-spacing: -0.028em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.3; }

.vorspann { font-size: clamp(18px, 1.5vw, 21px); color: var(--gedaempft); line-height: 1.5; margin: 0; }
.kicker {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gedaempft); font-weight: 660; margin: 0 0 14px;
}
.klein { font-size: 14px; color: var(--gedaempft); }
.mono { font-family: var(--code); font-size: 0.92em; }

/* --- Abschnitte --------------------------------------------------------- */

main { display: block; }
section { margin: 0 0 56px; }
section:last-child { margin-bottom: 0; }

.band { padding: var(--abstand-abschnitt) 0; }
.band-abgesetzt { background: var(--abgesetzt); }
.band + .band-abgesetzt, .band-abgesetzt + .band { margin-top: 0; }

.abschnittskopf { max-width: var(--lesebreite); margin: 0 0 40px; }
.abschnittskopf.mitte { text-align: center; margin-left: auto; margin-right: auto; }
.abschnittskopf h2 + p { margin: 16px 0 0; }

/* Die Ueberschrift einer Unterteilung innerhalb einer Seite. Nicht mehr die
   Linie ueber die volle Breite: Sie hat jede Seite in gleich aussehende
   Streifen zerlegt. */
.blockkopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 0 0 20px;
}
.blockkopf h2 { font-size: clamp(22px, 2.2vw, 28px); }
.blockkopf h3 { font-size: 20px; }

/* --- Kopf --------------------------------------------------------------- */

header.haupt {
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 50;
}
header.haupt > .huelle {
  display: flex; align-items: center; gap: 8px; min-height: 56px;
}

.wortmarke {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 660; letter-spacing: -0.02em; font-size: 18px;
  color: var(--tinte); text-decoration: none; white-space: nowrap;
  min-height: var(--tippziel); padding-right: 8px;
}
.wortmarke:hover { text-decoration: none; }
.wortmarke .signet { flex: none; }

/* Die drei Balken des Signets ordnen sich beim Laden einmal uebereinander:
   die Source Tiers, aus denen der Name kommt. Einmal, nicht dauernd. */
.wortmarke .signet rect { transform-origin: 0 50%; animation: tierstapel 620ms var(--kurve) both; }
.wortmarke .signet rect:nth-child(2) { animation-delay: 80ms; }
.wortmarke .signet rect:nth-child(3) { animation-delay: 160ms; }
@keyframes tierstapel {
  from { transform: scaleX(0.15); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

nav.haupt { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
nav.haupt > * { position: relative; }

.navknopf, nav.haupt > a {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--tippziel); padding: 0 13px;
  font-size: 15px; font-weight: 500; color: var(--tinte);
  text-decoration: none; border: 0; background: none;
  font-family: inherit; border-radius: 10px; cursor: pointer;
  white-space: nowrap;
}
.navknopf:hover, nav.haupt > a:hover { background: var(--abgesetzt); text-decoration: none; }

.navknopf .pfeil { width: 9px; height: 9px; flex: none; transition: transform var(--schnell) var(--kurve); }

/* Das Mega-Menue. Ohne Skript: es oeffnet bei :hover und bei :focus-within,
   damit es auch mit der Tastatur erreichbar ist. */
.megagruppe:hover .navknopf .pfeil,
.megagruppe:focus-within .navknopf .pfeil { transform: rotate(180deg); }

/* Links am Knopf verankert, nicht mittig unter ihm. Mittig gerechnet ragte
   das Explore-Menue bei 1363 px 64 px ueber den LINKEN Bildschirmrand hinaus:
   Der Knopf steht am Anfang der Leiste, die Tafel ist 636 px breit, und die
   Haelfte davon liegt links von ihm im Nichts. */
.mega {
  position: absolute; top: calc(100% + 8px); left: 0;
  max-width: min(760px, calc(100vw - 32px));
  transform: translateY(-6px);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  padding: 22px; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--schnell) var(--kurve), transform var(--schnell) var(--kurve), visibility var(--schnell);
}
.megagruppe:hover .mega, .megagruppe:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Eine unsichtbare Bruecke: sonst schliesst das Menue im 8-px-Spalt. */
.megagruppe::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }

.mega-spalten { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 26px; }
.mega-spalten.zwei { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
.mega-spalten.eins { grid-template-columns: minmax(240px, 1fr); }
/* Der Sprunglink: das erste Element der Seite, unsichtbar, bis ihn die
   Tastatur erreicht. Ohne ihn liegen auf jeder Seite rund vierzig
   Bedienelemente des Kopfes vor dem Inhalt - am 05.09.2026 auf 276 von 276
   indexierten Seiten gemessen. */
.sprunglink {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--aktion); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-weight: 600; text-decoration: none; min-height: var(--tippziel); display: inline-flex; align-items: center;
}
.sprunglink:focus-visible { top: 12px; outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--aktion); }
/* Die Gruppentitel im Menue und in der Fusszeile sind keine Ueberschriften:
   Als <h4> standen sie am 05.09.2026 auf jeder der 276 indexierten Seiten VOR
   der H1 und bildeten damit den Anfang jeder Gliederung, die ein Screenreader
   vorliest. Sie heissen jetzt <p class="gruppentitel"> und sehen aus wie
   vorher. */
.mega .gruppentitel {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--gedaempft); font-weight: 660; margin: 0 0 8px;
}
.mega a {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tippziel); padding: 0 10px; margin: 0 -10px;
  border-radius: 10px; color: var(--tinte); text-decoration: none;
  font-size: 15px; white-space: nowrap;
}
.mega a:hover { background: var(--abgesetzt); text-decoration: none; }
.mega a .symbol { flex: none; width: 22px; height: 22px; color: var(--gedaempft); }
.mega a:hover .symbol { color: var(--aktion); }
.mega a .zaehler { margin-left: auto; font-size: 13px; color: var(--gedaempft); padding-left: 14px; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kopf-suchknopf {
  display: none; align-items: center; justify-content: center;
  width: var(--tippziel); height: var(--tippziel); border-radius: 10px;
  color: var(--tinte); text-decoration: none;
}
.kopf-suchknopf:hover { background: var(--abgesetzt); }

.kopfsuche { display: flex; align-items: center; }
.kopfsuche input {
  width: 168px; height: var(--tippziel); border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--abgesetzt);
  padding: 0 14px 0 36px; font-size: 15px; font-family: inherit; color: var(--tinte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px center; background-size: 17px;
  transition: width var(--ruhig) var(--kurve), background-color var(--schnell) var(--kurve);
}
.kopfsuche input:focus { width: 236px; background-color: var(--flaeche); }
.kopfsuche input::placeholder { color: var(--gedaempft); opacity: 1; }

/* --- Mobile Navigation -------------------------------------------------- */
/* Ein <details> statt eines Skripts. Der Pfeil des Browsers ist weg, weil das
   Element als Knopf gestaltet ist; das Zeichen bringt es selbst mit. */

.mobilnav { display: none; }
.mobilnav > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tippziel); height: var(--tippziel); border-radius: 10px;
}
.mobilnav > summary::-webkit-details-marker { display: none; }
.mobilnav > summary:hover { background: var(--abgesetzt); }
.mobilnav[open] > summary { background: var(--abgesetzt); }
.mobilnav:not([open]) .schublade { display: none; }
.mobilnav .schublade {
  position: fixed; left: 0; right: 0; top: 56px; bottom: 0;
  background: var(--grund); overflow-y: auto; z-index: 40;
  padding: 12px 24px 64px;
  animation: schubladeAuf var(--ruhig) var(--kurve) both;
}
@keyframes schubladeAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobilnav .gruppe { border-bottom: 1px solid var(--linie); padding: 4px 0; }
.mobilnav .gruppe > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; min-height: 52px; font-size: 19px; font-weight: 560;
}
.mobilnav .gruppe > summary::-webkit-details-marker { display: none; }
.mobilnav .gruppe > summary::after {
  content: ""; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--gedaempft); border-bottom: 2px solid var(--gedaempft);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--schnell) var(--kurve);
}
.mobilnav .gruppe[open] > summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.mobilnav .gruppe a, .mobilnav > .schublade > a {
  display: flex; align-items: center; gap: 12px; min-height: var(--tippziel);
  font-size: 17px; color: var(--tinte); text-decoration: none; padding: 4px 0;
}
.mobilnav .gruppe .liste { padding: 0 0 12px 2px; }
.mobilnav .gruppe .liste a { color: var(--gedaempft); }
.mobilnav .schublade .knopf { margin-top: 20px; width: 100%; color: #fff; }
.mobilnav .schublade .knopf:hover { color: #fff; }

/* --- Knoepfe ------------------------------------------------------------ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--aktion); color: #fff; border: 1px solid var(--aktion);
  font-size: 17px; font-weight: 560; font-family: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--schnell) var(--kurve), transform var(--schnell) var(--kurve);
}
.knopf:hover { background: var(--aktion-tief); border-color: var(--aktion-tief); color: #fff; text-decoration: none; }
.knopf:active { transform: scale(0.98); }
.knopf.stumm, .knopf.sekundaer {
  background: transparent; color: var(--aktion-text); border-color: var(--linie-stark);
}
.knopf.stumm:hover, .knopf.sekundaer:hover { background: var(--abgesetzt); color: var(--aktion-text); border-color: var(--linie-stark); }
.knopf.gefuellt-hell { background: var(--abgesetzt); color: var(--tinte); border-color: transparent; }
.knopf.gefuellt-hell:hover { background: var(--linie); color: var(--tinte); }
.knopf.klein { min-height: var(--tippziel); padding: 0 18px; font-size: 15px; }

.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Ein Textlink, der wie eine Handlung aussieht: mit Pfeil, ohne Kasten. */
.weiter {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tippziel);
  font-size: 17px; font-weight: 500; text-decoration: none;
}
.weiter::after {
  content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor;
  border-top: 1.8px solid currentColor; transform: rotate(45deg);
  transition: transform var(--schnell) var(--kurve);
}
.weiter:hover { text-decoration: none; }
.weiter:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* --- Pillen ------------------------------------------------------------- */

.pillen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.pille {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tippziel); min-width: var(--tippziel);
  padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  color: var(--tinte); text-decoration: none; font-size: 15px;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: border-color var(--schnell) var(--kurve), background var(--schnell) var(--kurve);
}
.pille:hover { border-color: var(--tinte); text-decoration: none; color: var(--tinte); }
.pille[aria-current="true"], .pille.aktiv {
  background: var(--tinte); border-color: var(--tinte); color: #fff;
}
.pille .zaehler { color: var(--gedaempft); font-size: 13px; }
.pille[aria-current="true"] .zaehler, .pille.aktiv .zaehler { color: rgba(255,255,255,0.75); }

/* Ein Deutungs-Chip: was die Suche aus einer Frage gelesen hat. Kein
   Bedienelement, deshalb kein Tippziel. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; font-size: 15px;
  background: var(--abgesetzt); color: var(--tinte); border: 1px solid transparent;
}
.chip .weg { color: var(--gedaempft); font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Eine Bedingung ablegen: der Weg steht AM Chip, als Link ohne Skript.
   Das Tippziel ist 44 x 44 px, der Chip bleibt so hoch wie vorher: Die
   negativen Raender nehmen die Flaeche aus dem Fluss. Bis zum 13.09.2026 mass
   der Link 22 x 22 px; gesehen hat es erst die Browserprobe, als sie eine
   Frage mit ablegbarer Bedingung bekam (/ask mit "family of 6") - vorher lag
   keine Seite mit einem solchen Chip in ihrer Liste. */
.chip .chip-weg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; margin: -12px -14px -12px -12px; padding: 0; border-radius: 999px;
  color: var(--gedaempft); text-decoration: none; font-size: 15px; line-height: 1;
}
.chip .chip-weg:hover, .chip .chip-weg:focus-visible { color: var(--tinte); text-decoration: underline; }
.chip.abgelegt { background: transparent; border-color: var(--linie-stark); color: var(--gedaempft); }
.chip.abgelegt s { text-decoration-thickness: 1px; }
/* "restore" ist ein Wort und kein Zeichen: kein negativer Rand links, sonst
   klebt es an "not applied". */
.chip.abgelegt .chip-weg { font-size: 13px; color: var(--aktion); margin-left: 0; padding: 0 12px; }

/* --- Was ein Treffer je Bedingung belegt --------------------------------- */
.anforderungen { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.anforderungen li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  font-size: 14px; border-bottom: 1px solid var(--linie); padding-bottom: 6px;
}
.anforderungen li:last-child { border-bottom: 0; padding-bottom: 0; }
.anforderungen .zustand { display: inline-flex; align-self: center; width: 18px; height: 18px; border-radius: 50%;
  align-items: center; justify-content: center; }
.anforderungen .zustand svg { width: 12px; height: 12px; stroke-width: 2.4; }
.anforderungen .belegt .zustand { background: #e3f4e8; color: #1d7a3a; }
.anforderungen .grenzfall .zustand { background: #fff1d6; color: #8a5a00; }
.anforderungen .offen .zustand { background: var(--abgesetzt); color: var(--gedaempft); }
/* Eine Rechnung aus belegten Zahlen (Sitzpreis mal Anzahl) ist KEIN Beleg:
   eigene Farbe, eigenes Wort ("estimated"), nie das Gruen von "documented". */
.anforderungen .schaetzung .zustand { background: #eef0fb; color: #3b4a9c; }
.anforderungen .schaetzung .wie { font-weight: 480; }
.anforderungen .was { color: var(--gedaempft); min-width: 0; }
.anforderungen .wie { font-weight: 560; text-align: right; }
.anforderungen .offen .wie, .anforderungen .grenzfall .wie { font-weight: 480; color: var(--gedaempft); }
.anforderungen .wie a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie-stark); }
.anforderungen .wie a:hover { border-bottom-color: var(--tinte); }
.anforderungen .satz { grid-column: 2 / -1; font-size: 13px; color: var(--gedaempft); line-height: 1.45; }
label.karte.auswaehlbar .anforderungen .wie a { pointer-events: auto; }

/* Eine Zeile, auf die ein Link zeigt (#attr-ram_gb), wird hervorgehoben. */
tr[id] { scroll-margin-top: 132px; } /* Kopf und Kapitelleiste stehen darueber */
tr:target td { background: color-mix(in srgb, var(--aktion) 9%, transparent); }
tr:target td:first-child { box-shadow: inset 3px 0 0 var(--aktion); }

/* --- Karten ------------------------------------------------------------- */

.karten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.karten.zwei { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.karten.drei { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.karten.vier { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Sechs Kacheln gehoeren in zwei Reihen zu drei. Mit 'auto-fit' werden es auf
   einem breiten Schirm vier und zwei, und die zweite Reihe sieht aus wie ein
   Rest. */
.karten.sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karten.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .karten.fuenf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .karten.fuenf { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .karten.sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .karten.sechs { grid-template-columns: 1fr; } }

.karte {
  display: block; position: relative;
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 20px; background: var(--flaeche);
  text-decoration: none; color: inherit;
  transition: transform var(--ruhig) var(--kurve), box-shadow var(--ruhig) var(--kurve), border-color var(--ruhig) var(--kurve);
}
a.karte:hover, label.karte:hover {
  transform: translateY(-4px); box-shadow: var(--schatten);
  border-color: var(--linie-stark); text-decoration: none;
}
.karte .marke {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--gedaempft); font-weight: 620; margin-bottom: 6px;
}
.karte .name { font-weight: 600; font-size: 17px; letter-spacing: -0.012em; margin-bottom: 4px; }
/* Ein Name, der ein Link ist, ist ein Tippziel und nicht nur Text. Er mass
   20 px hoch, und das auf jeder Kategorieseite zwanzigmal. */
/* Ein Tippziel ist 44 x 44 - in BEIDEN Richtungen. Mit nur min-height mass
   der Link "AI" 19 x 44 px und "Brex" 35 x 44. Die Breite faellt nicht auf,
   weil der Text linksbuendig bleibt; der Daumen merkt sie. */
.karte .name a, .vergleichskopf .name a, .merkmalname a,
h1 a, h2 a, h3 a, h4 a, .kachel h2 a, .kachel h3 a, .tagkopf a {
  display: inline-flex; align-items: center; justify-content: flex-start;
  min-height: var(--tippziel); min-width: var(--tippziel);
}
.karte .zeile { font-size: 15px; color: var(--gedaempft); line-height: 1.4; }
.karte .fuss { margin-top: 14px; display: flex; align-items: center; gap: 10px; }

/* Die grosse Kachel: eine Kategorie oder ein Werkzeug mit eigener Zeichnung. */
.kachel {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 26px; background: var(--flaeche); color: inherit; text-decoration: none;
  min-height: 200px;
  transition: transform var(--ruhig) var(--kurve), box-shadow var(--ruhig) var(--kurve);
}
a.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten); text-decoration: none; }
.kachel .bild {
  height: 76px; display: flex; align-items: center; justify-content: flex-start;
  color: var(--tinte);
}
.kachel { text-align: left; }
.kachel h2, .kachel h3 { font-size: 21px; }
.kachel .zeile { font-size: 15px; color: var(--gedaempft); line-height: 1.45; }
.kachel .zahl { margin-top: auto; font-size: 14px; color: var(--gedaempft); font-weight: 560; }
.kachel.hell { background: var(--abgesetzt); border-color: transparent; }

/* --- Hero --------------------------------------------------------------- */

.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); }
.hero-raster {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .leise { color: var(--gedaempft); display: block; }
.hero .vorspann { max-width: 30em; }

.suchleiste { margin: 30px 0 40px; }
.suchleiste form {
  display: flex; align-items: center; gap: 8px;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: 999px; padding: 6px 6px 6px 22px; min-height: 64px;
  box-shadow: var(--schatten);
  transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve);
}
.suchleiste form:focus-within { border-color: var(--aktion); box-shadow: var(--schatten-hoch); }
.suchleiste input[type="search"] {
  flex: 1 1 auto; min-width: 0; width: auto; outline: none;
  border: 0; background: none; box-shadow: none; border-radius: 0;
  padding: 0; margin: 0; font-size: 18px; font-family: inherit;
  color: var(--tinte); height: 50px; min-height: 50px;
  -webkit-appearance: none; appearance: none;
}
.suchleiste input[type="search"]::-webkit-search-decoration,
.suchleiste input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.suchleiste input::placeholder { color: var(--gedaempft); opacity: 1; }
.suchleiste button {
  flex: none; width: 50px; height: 50px; border-radius: 999px;
  background: var(--aktion); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--schnell) var(--kurve), transform var(--schnell) var(--kurve);
}
.suchleiste button:hover { background: var(--aktion-tief); }
.suchleiste button:active { transform: scale(0.94); }
.suchleiste button svg { width: 20px; height: 20px; color: #fff; }

.vorschlaege { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.vorschlaege .pille { font-size: 14px; min-height: var(--tippziel); background: var(--abgesetzt); border-color: transparent; }
.vorschlaege .pille:hover { background: var(--flaeche); border-color: var(--tinte); }

/* --- Vertrauensleiste --------------------------------------------------- */

.vertrauen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 34px 0; }
.vertrauen .zahlen {
  display: flex; gap: 10px 40px; flex-wrap: wrap; align-items: baseline; justify-content: center;
  font-size: clamp(19px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em;
}
.vertrauen .zahlen .was { color: var(--gedaempft); font-weight: 460; font-size: 0.68em; letter-spacing: -0.005em; }
.vertrauen .saetze {
  display: flex; gap: 8px 28px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px; font-size: 15px; color: var(--gedaempft);
}
.vertrauen .saetze span { display: inline-flex; align-items: center; gap: 8px; }
.vertrauen .saetze span::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--stand-verified-punkt); flex: none;
}

/* --- Segmentschalter ---------------------------------------------------- */
/* Zwei versteckte Radios und ihre Labels. Ohne Skript, und der Zustand
   ueberlebt keinen Seitenwechsel - er muss es auch nicht. */

/* Die Leiste steht IM MARKUP hinter den Tafeln, weil ':checked + .tafel' nur
   nach vorn wirkt - und OPTISCH davor, weil ein Schalter unter dem, was er
   schaltet, niemand findet. Genau dafuer gibt es 'order'. */
.segmente { position: relative; display: flex; flex-direction: column; }
/* Mit [type] geschrieben, weil die allgemeine Regel fuer Radios weiter unten
   steht und bei gleicher Spezifitaet gewinnt: Der Umschalter hatte dadurch
   zwei sichtbare 20-px-Knoepfe, die niemand sehen sollte. */
.segmente > input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; min-height: 0;
}
.segmentleiste {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
  background: var(--abgesetzt); margin: 0 auto 36px; order: -1; align-self: center;
}
.segmentleiste label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tippziel); padding: 0 26px; border-radius: 999px;
  font-size: 16px; font-weight: 560; cursor: pointer; color: var(--gedaempft);
  transition: background var(--schnell) var(--kurve), color var(--schnell) var(--kurve);
  white-space: nowrap;
}
.segmentleiste label:hover { color: var(--tinte); }
/* Der aktive Zustand war bis zum 03.09.2026 nur eine andere Schriftfarbe -
   zwei Woerter nebeneinander, eines etwas dunkler. Wer die Leiste ansah,
   konnte nicht sagen, welche Seite er gerade liest. Jetzt eine weisse Pille
   mit leichtem Schatten unter dem gewaehlten Wort, wie ueberall sonst auch.
   Gezaehlt wird nach nth-of-type ueber die beiden Radios, nicht nach einer
   Klasse: Die Tafel kennt ihre Position, das Markup muss sie nicht wissen. */
.segmente > input[type="radio"]:nth-of-type(1):checked ~ .segmentleiste label[data-fuer="1"],
.segmente > input[type="radio"]:nth-of-type(2):checked ~ .segmentleiste label[data-fuer="2"] {
  background: var(--flaeche); color: var(--tinte); font-weight: 620;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.segmenttafel { display: none; }
.segmente > input:checked + .segmenttafel { display: block; animation: einblenden var(--ruhig) var(--kurve) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.segmente > input:focus-visible ~ .segmentleiste label[data-fuer="1"],
.segmente > input:focus-visible ~ .segmentleiste label[data-fuer="2"] { outline: 2px solid var(--aktion); outline-offset: 2px; }

/* --- Schritte ----------------------------------------------------------- */

.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.schritt {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 28px; position: relative; z-index: 1;
}
.schritt .nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; background: var(--tinte);
  color: #fff; font-size: 15px; font-weight: 620; margin-bottom: 18px;
}
.schritt h3 { margin-bottom: 10px; }
.schritt p { margin: 0; color: var(--gedaempft); font-size: 16px; }
.schritt .zeichnung { margin: 20px 0 0; }

/* --- Pruefstand-Etiketten ----------------------------------------------- */
/* 'unknown' ist bewusst NEUTRAL und nicht rot. Es beschreibt unsere Messung
   und nicht den Anbieter; ein rotes Etikett wuerde daraus eine Note machen. */

.stand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 580; letter-spacing: 0.005em;
  padding: 4px 10px 4px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; vertical-align: middle;
}
.stand::before { content: ""; width: 6px; height: 6px; border-radius: 999px; flex: none; background: currentColor; }
.stand-verified          { background: var(--stand-verified-tinte); color: var(--stand-verified-text); }
.stand-verified::before  { background: var(--stand-verified-punkt); }
.stand-corroborated      { background: var(--stand-corrob-tinte);   color: var(--stand-corrob-text); }
.stand-corroborated::before { background: var(--stand-corrob-punkt); }
.stand-vendor_stated     { background: var(--stand-vendor-tinte);   color: var(--stand-vendor-text); }
.stand-vendor_stated::before { background: var(--stand-vendor-punkt); }
.stand-customer_reported { background: var(--stand-kunde-tinte);    color: var(--stand-kunde-text); }
.stand-customer_reported::before { background: var(--stand-kunde-punkt); }
.stand-estimated         { background: var(--stand-schaetz-tinte);  color: var(--stand-schaetz-text); }
.stand-estimated::before { background: var(--stand-schaetz-punkt); }
.stand-unknown           { background: var(--stand-offen-tinte);    color: var(--stand-offen-text); }
.stand-unknown::before   { background: var(--stand-offen-punkt); }

.konfidenz { font-size: 12.5px; color: var(--gedaempft); margin-left: 6px; white-space: nowrap; }
/* Der Trenner steht im CSS, damit "Verified" und "90% confidence" ein Satz
   sind und nicht zwei Angaben nebeneinander. */
.konfidenz::before { content: "\00b7\00a0"; }

.beleg { font-size: 13.5px; color: var(--gedaempft); margin-top: 6px; line-height: 1.45; }
.beleg a { color: var(--gedaempft); }
.beleg a:hover { color: var(--aktion-text); }
.methodik {
  font-size: 13.5px; color: var(--gedaempft); margin-top: 6px;
  border-left: 2px solid var(--linie-stark); padding-left: 10px;
}
.nichtgemessen { color: var(--gedaempft); }
/* Die Quelle an der Aussage, eine Zeile unter dem Etikett (kurzbeleg). Host
   und Pfad sind ein langes Wort ohne Trennstelle; ohne overflow-wrap schob
   eine Adresse wie www.apple.com/macbook-air/specs die Spalte breiter als das
   Telefon. */
.kurzbeleg { overflow-wrap: anywhere; }
/* Das Datum aber nicht: "2026-09-" / "02" stand im ersten Bildschirmfoto der
   Tabelle bei 1280 px, dieselbe Klasse wie td.datum weiter unten. */
.kurzbeleg .weitere, .kurzbeleg .tag, .kachelquelle .tag { white-space: nowrap; }
/* Die schwache Belegart (belegartVermerk): sichtbar und neutral. Dieselbe
   Gestalt wie die Methode einer Schaetzung, weil beides dasselbe ist - ein
   Satz darueber, WORAUS eine Aussage entstanden ist, und keiner ueber das
   Produkt. Tinte statt Grau: Er ist die Auskunft, nicht Kleingedrucktes. */
.belegartvermerk {
  font-size: 13px; color: var(--tinte); margin-top: 6px; line-height: 1.4;
  border-left: 2px solid var(--linie-stark); padding-left: 10px;
}
/* Nur fuer den Screenreader: das Ja oder Nein einer Kachel, deren Zeichen
   CSS ist. Sichtbar steht dasselbe als Haken oder Kreuz. */
.nurvorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Der Quelltext einer Vorlage: markierbar, mit Zeilenumbruch, in fester
   Schrift. Kein Kopierknopf - der braeuchte ein Skript, und diese Seite
   liefert default-src 'none' aus. */
.quelltext {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere; margin: 0; padding: 14px 16px;
  background: var(--abgesetzt); border: 1px solid var(--linie);
  border-radius: 10px; max-height: 60vh; overflow-y: auto;
}

/* Der Geltungsbereich steht UNTER dem Wert und nicht daneben: Eine Zahl, die
   nur fuer eine Ausgabe gilt, muss ihre Einschraenkung im selben Blick
   tragen. */
.geltung {
  font-size: 12.5px; color: var(--gedaempft); margin-top: 3px;
  font-style: italic; line-height: 1.35;
}

/* --- Der Evidenzblock --------------------------------------------------- */
/* Alles, was wir ueber die Herkunft EINER Aussage gespeichert haben. Er steht
   zugeklappt: Die Zeile bleibt lesbar, und wer nachpruefen will, klappt auf.
   Ohne Skript - das details-Element kann das selbst. */

.evidenz { margin-top: 8px; }
.evidenz > summary {
  font-size: 13px; color: var(--gedaempft); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0;
}
.evidenz > summary::-webkit-details-marker { display: none; }
.evidenz > summary::after { content: "\203a"; transition: transform .15s; }
.evidenz[open] > summary::after { transform: rotate(90deg); }
.evidenz > summary:hover { color: var(--aktion-text); }
.evidenz > summary:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
.evidenzrumpf {
  margin-top: 7px; padding: 10px 12px; border-radius: 8px;
  background: var(--abgesetzt); border: 1px solid var(--linie);
  font-size: 12.5px; line-height: 1.5;
}
.evidenzzeile { display: flex; gap: 10px; padding: 2px 0; }
.evidenzwas {
  flex: 0 0 118px; color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}
.evidenzwert { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.evidenzwert a { color: var(--aktion-text); }
/* Mehrere Aussagen in einem Block, je Merkmal eine Gruppe. */
.evidenzgruppe + .evidenzgruppe { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie); }
/* Wie gelesen wurde: Leser, Fassung, Daten, Praezisionen. Unter dem, was ein
   Mensch nachprueft, abgesetzt und ueberschrieben (evidenzZeilen, 13.09.2026). */
.evidenztechnik { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie); }
.evidenzunterkopf {
  font-size: 11.5px; font-weight: 640; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gedaempft); padding: 0 0 4px;
}
.evidenzwert code { font-size: 11.5px; overflow-wrap: anywhere; }
/* Die Belegstelle: der Satz, aus dem der Wert gelesen wurde, mit dem Wert
   markiert. Ein Zitat, deshalb <q> mit typografischen Anfuehrungszeichen. */
q.belegstelle { quotes: "\201c" "\201d"; font-style: italic; color: var(--tinte); }
q.belegstelle mark { background: var(--markierung); color: inherit; padding: 0 3px; border-radius: 3px; font-style: normal; }
/* Eine Edition ohne Aussage zu einem Merkmal: kein unknown, sondern nichts
   gespeichert. Der Strich traegt seine Erklaerung im title. */
.leerzelle { color: var(--gedaempft); }
/* Der zurueckgezogene Wert: durchgestrichen, ohne sein damaliges Etikett. */
.rueckzuege s { text-decoration-thickness: 1.5px; text-decoration-color: var(--gedaempft); }
.rueckzuege td.rueckzugsgrund { font-size: 14px; color: var(--gedaempft); line-height: 1.45; min-width: 24em; }
/* Eine Textspalte in einer breiten Tabelle bekommt eine Mindestbreite, damit
   der Rahmen waagerecht scrollt, statt den Text in eine 80 px schmale Spalte
   zu zwingen: Am 05.09.2026 war eine Zeile der Ruecknahmetabelle auf dem
   Telefon 1000 px hoch, weil der Grund in vier Woertern je Zeile umbrach. */
table.editionen td:last-child { min-width: 20em; }
/* Am Telefon (05.09.2026, /products/macbook-air-13 bei 390 px): Die Belegspalte
   stand rechts ausserhalb des Sichtfelds und machte jede Zeile 400 px hoch,
   sichtbar war eine leere Zelle. Die Quellen stehen weiter im Aufklapper
   "Evidence" derselben Zelle; nur die offenen Belegzeilen weichen. */
@media (max-width: 640px) {
  table.editionen td:last-child { min-width: 11em; }
  table.editionen td:last-child > .beleg { display: none; }
}

/* --- Die Spezifikationstabelle: Aussage und Beleg ----------------------- */
/* Drei Spalten am Schreibtisch; die dritte traegt Etikett, Quelle, Vermerk
   und den Evidenzblock und bekommt dafuer Platz. */
table.aussagen td.merkmal { width: 28%; }
table.aussagen td.aussagebeleg { width: 46%; }
/* Am Telefon eine Karte je Zeile: Merkmal und Wert oben nebeneinander, der
   Beleg darunter ueber die volle Breite. Drei Spalten bei 390 px liessen der
   Belegspalte rund 150 px; eine Quellzeile brach dort in vier Zeilen um, und
   ein aufgeklappter Evidenzblock (118 px Beschriftung) passte gar nicht mehr.
   Den Tabellenkopf braucht die Karte nicht zu sehen - er bleibt fuer den
   Screenreader stehen, nur nicht auf dem Schirm. */
@media (max-width: 640px) {
  table.aussagen, table.aussagen tbody { display: block; }
  table.aussagen thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  table.aussagen tr {
    display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%);
    column-gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--linie);
  }
  table.aussagen tbody tr:last-child { border-bottom: 0; }
  /* width: auto auch fuer die beiden Spalten mit eigener Breite: Die 28 Prozent
     von oben galten sonst in der Karte weiter, und "ISO/IEC 27001" brach neben
     einem "Yes" um, das rechts 250 px Luft hatte. */
  table.aussagen td, table.aussagen td.merkmal, table.aussagen td.aussagebeleg {
    display: block; padding: 0; border: 0; width: auto;
  }
  table.aussagen td.wert { text-align: right; font-weight: 560; }
  table.aussagen td.aussagebeleg { grid-column: 1 / -1; margin-top: 8px; }
  /* Im Evidenzblock steht die Beschriftung ueber dem Wert: Neben einer
     118 px breiten Beschriftung blieben dem Auszug und dem Lesemuster keine
     200 px, und ein Satz von 30 Woertern wurde eine Spalte von zehn Zeilen. */
  table.aussagen .evidenzzeile { flex-wrap: wrap; gap: 0 10px; padding: 3px 0; }
  table.aussagen .evidenzwas { flex: 0 0 100%; font-size: 11.5px; }
  /* Die Hervorhebung der angesprungenen Zeile gehoert jetzt der Karte und
     nicht den Zellen, sonst stuenden zwischen ihnen weisse Fugen. */
  table.aussagen tr:target { background: color-mix(in srgb, var(--aktion) 9%, transparent); box-shadow: inset 3px 0 0 var(--aktion); }
  table.aussagen tr:target td { background: transparent; box-shadow: none; }
}

/* --- Abdeckungsring ----------------------------------------------------- */
/* Der Ring zeichnet sich einmal ein. Der Wert steht daneben als Zahl - ein
   Ring allein ist eine Grafik und keine Auskunft. */

.ring { display: inline-flex; align-items: center; gap: 9px; }
.ring svg { width: 34px; height: 34px; flex: none; }
.ring .bogen {
  fill: none; stroke-width: 3.4; stroke-linecap: round;
  stroke: var(--aktion); transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: ringZeichnen var(--zeichnen) var(--kurve) both;
}
.ring .spur { fill: none; stroke-width: 3.4; stroke: var(--linie); }
.ring .wert { font-size: 14px; font-weight: 580; }
.ring .was { font-size: 13px; color: var(--gedaempft); }
.ring.gross svg { width: 58px; height: 58px; }
.ring.gross .wert { font-size: 19px; }
@keyframes ringZeichnen { from { stroke-dashoffset: var(--umfang); } }
.ring.satt .bogen { stroke: var(--stand-verified-punkt); }
.ring.duenn .bogen { stroke: var(--stand-offen-punkt); }

/* Drei belegte Werte neben einem Treffer. Als Pillen gesetzt haben sie
   umgebrochen ("HIPAA compliance stated" wurde dreizeilig) und sahen aus wie
   kaputte Knoepfe. Eine Liste tut, was eine Liste tut. */
.werteliste { margin: 10px 0 0; display: flex; flex-direction: column; gap: 5px; }
.werteliste > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--linie); padding-bottom: 5px;
}
.werteliste > div:last-child { border-bottom: 0; padding-bottom: 0; }
.werteliste dt { font-size: 13.5px; color: var(--gedaempft); margin: 0; min-width: 0; }
.werteliste dd { font-size: 14.5px; font-weight: 560; margin: 0; white-space: nowrap; text-align: right; }

/* --- Merkmalskacheln (At a glance) -------------------------------------- */

.merkmalskacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.merkmalskachel {
  background: var(--abgesetzt); border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.merkmalskachel .wert {
  font-size: clamp(21px, 2.4vw, 27px); font-weight: 620; letter-spacing: -0.022em; line-height: 1.15;
}
.merkmalskachel .was { font-size: 13.5px; color: var(--gedaempft); }
.merkmalskachel .stand { margin-top: 8px; align-self: flex-start; }
/* Tinte ausdruecklich: .klein ist sonst grau (14 px, --gedaempft), und bei
   einem Ja/Nein ist das Merkmal die Auskunft der Kachel. Bis zum 13.09.2026
   stand "ISO/IEC 27001" auf /products/proton-pass grau neben einem gruenen
   Haken (Bildschirmfoto bei 1280 px), heller als das Etikett darunter. */
.merkmalskachel .wert.klein { font-size: 17px; font-weight: 560; letter-spacing: -0.012em; line-height: 1.3; color: var(--tinte); }
/* Host und Tag der Quelle (kachelquelle). */
.merkmalskachel .kachelquelle {
  font-size: 12.5px; color: var(--gedaempft); margin-top: 4px;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
/* Eine Kachel mit Verweis ist ein Link auf ihre Tabellenzeile. Kein Heben wie
   bei den Karten: Eine Kachel ist eine Aussage und kein Weg zu einer anderen
   Seite. Der Rand sagt "hier geht es weiter", die Zeile darunter leuchtet
   ueber :target auf. */
a.merkmalskachel {
  color: inherit; text-decoration: none;
  transition: box-shadow var(--schnell) var(--kurve);
}
a.merkmalskachel:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--linie-stark); }
a.merkmalskachel:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
/* Ein Ja/Nein traegt sein Zeichen vor dem Merkmal: das Zeichen ist der Wert,
   das Merkmal ist die Auskunft. */
.merkmalskachel.jaNein .wert.klein { padding-left: 26px; position: relative; }
.merkmalskachel.jaNein .wert.klein::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 8px;
  border-left: 2.2px solid var(--stand-verified-punkt);
  border-bottom: 2.2px solid var(--stand-verified-punkt);
  transform: rotate(-45deg);
}
.merkmalskachel.jaNein.nein .wert.klein::before {
  border: 0; width: 14px; height: 14px; top: 3px; transform: none;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--gedaempft) 44%, var(--gedaempft) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--gedaempft) 44%, var(--gedaempft) 56%, transparent 56%);
}

/* --- Tabellen ----------------------------------------------------------- */

.tabellenrahmen {
  overflow-x: auto; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--flaeche);
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 14px 18px; vertical-align: top; border-bottom: 1px solid var(--linie); }
thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--gedaempft); font-weight: 640; white-space: nowrap;
  background: var(--abgesetzt); border-bottom-color: var(--linie);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--schnell) var(--kurve); }
tbody tr:hover { background: #fafafc; }
td.merkmal { font-weight: 520; width: 30%; }
td.wert { font-variant-numeric: tabular-nums; }
td.wert.zahl { font-variant-numeric: tabular-nums; }
td.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ein Datum bricht nicht um. "2026-09-" / "04" stand am 05.09.2026 live in der
   Preistabelle, weil die Spalte schmaler war als zehn Ziffern. */
td.datum { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Eine Textspalte in einer breiten Tabelle braucht eine Mindestbreite, sonst
   zwingt width: 100% den Satz in eine 50 px schmale Spalte und die Zeile wird
   am Telefon tausend Pixel hoch - am 05.09.2026 auf /pricing/airtable bei
   390 px gesehen, dieselbe Klasse wie die Ruecknahmetabelle am Vortag. */
td.satz { min-width: 22em; line-height: 1.45; }

/* --- Aufklapper --------------------------------------------------------- */
/* Alles, was Tiefe hat und nicht im Weg stehen soll: die Beweiskette, die
   Forschungsluecken, der technische Anhang. Ein <details> ist die einzige
   Faltung, die ohne Skript geht - und die einzige, die auch dann noch
   funktioniert, wenn jemand die Seite ausdruckt. */

.aufklapper {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); overflow: hidden;
}
.aufklapper + .aufklapper { margin-top: 10px; }
.aufklapper > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 12px; min-height: 56px; padding: 12px 20px; font-weight: 560; font-size: 16px;
}
.aufklapper > summary::-webkit-details-marker { display: none; }
.aufklapper > summary:hover { background: var(--abgesetzt); }
.aufklapper > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px; border-right: 2px solid var(--gedaempft);
  border-bottom: 2px solid var(--gedaempft); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--schnell) var(--kurve);
}
.aufklapper[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.aufklapper[open] > summary { border-bottom: 1px solid var(--linie); }
.aufklapper .rumpf { padding: 18px 20px 20px; animation: einblenden var(--schnell) var(--kurve) both; }
.aufklapper .rumpf > :first-child { margin-top: 0; }
.aufklapper .zaehler { color: var(--gedaempft); font-weight: 460; }

.aufklapper.leise { border: 0; background: none; }
.aufklapper.leise > summary { padding: 8px 0; min-height: var(--tippziel); font-size: 15px; color: var(--gedaempft); }
.aufklapper.leise > summary:hover { background: none; color: var(--tinte); }
.aufklapper.leise[open] > summary { border-bottom: 0; }
.aufklapper.leise .rumpf { padding: 4px 0 12px; }

/* --- Hinweise ----------------------------------------------------------- */

.hinweis {
  background: var(--abgesetzt); border-radius: var(--radius);
  padding: 16px 20px; font-size: 15px; color: var(--tinte); line-height: 1.5;
}
.hinweis.knapp { padding: 12px 16px; font-size: 14px; }
/* Der Weg zur Tabelle, die die Belege traegt, an der Stelle der Schublade. */
.hinweis.belegweg { margin: 0 0 10px; }
.leer { color: var(--gedaempft); padding: 28px 0; font-size: 16px; }

/* --- Formulare ---------------------------------------------------------- */

input, select, textarea, button { font-family: inherit; max-width: 100%; }
.feld { display: flex; flex-direction: column; gap: 7px; }
.feld > label, label.feldname { font-size: 14px; font-weight: 560; color: var(--tinte); }
.feld .hilfe { font-size: 13px; color: var(--gedaempft); }
input:not([type]),
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"], select, textarea {
  min-height: var(--tippziel); border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  padding: 10px 14px; font-size: 16px; color: var(--tinte); width: 100%;
  transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve);
}
textarea { line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--aktion); box-shadow: 0 0 0 3px var(--aktion-schwach);
}
::placeholder { color: var(--gedaempft); opacity: 1; }
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 38px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--aktion); }
.kaestchen { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tippziel); cursor: pointer; font-size: 15px; }

.formularreihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.formularreihe .feld { flex: 1 1 220px; min-width: 0; }
.formularraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* --- Regler ------------------------------------------------------------- */

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--tippziel);
  background: none; padding: 0; border: 0; min-height: var(--tippziel);
}
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: var(--linie); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: var(--linie); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 999px;
  background: #fff; border: 1px solid var(--linie-stark); box-shadow: var(--schatten);
  margin-top: -10.5px; cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 999px; background: #fff;
  border: 1px solid var(--linie-stark); box-shadow: var(--schatten); cursor: pointer;
}

/* Zwei Felder und ein Knopf, nebeneinander. Auf dem Telefon untereinander:
   zwei 44-px-Felder plus Knopf sind bei 390 px keine Zeile. */
.vergleichsformular {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;
  background: var(--abgesetzt); padding: 24px; border-radius: var(--radius-gross);
}
@media (max-width: 720px) { .vergleichsformular { grid-template-columns: 1fr; } }

/* --- Vergleichsseite ----------------------------------------------------- */

.vergleichskoepfe {
  display: flex; align-items: stretch; gap: 20px; margin-top: 30px; flex-wrap: wrap;
}
.vergleichskopf {
  display: flex; gap: 14px; align-items: flex-start; flex: 1 1 260px; min-width: 0;
  background: var(--abgesetzt); border-radius: var(--radius); padding: 18px 20px;
}
.vergleichskopf .name a { color: inherit; text-decoration: none; }
.vergleichskopf .name a:hover { text-decoration: underline; }
.gegen {
  align-self: center; font-size: 14px; font-weight: 620; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: 0.08em; flex: none;
}

.vergleichsblock { margin-bottom: 40px; }
.vergleichsblock h3 {
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gedaempft); font-weight: 660; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--linie);
}

.vergleichszeile {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2.6fr) minmax(90px, 0.7fr);
  gap: 20px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--linie);
}
.vergleichszeile > .aufklapper { grid-column: 1 / -1; }
.merkmalname { font-weight: 560; font-size: 15px; }
.seiten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.seite { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; min-width: 0; }
.seite .wertzeile { display: flex; align-items: center; gap: 8px; }
.seite .wert { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.seite .siegel { color: var(--stand-verified-punkt); display: inline-flex; }
.seite .wername { font-size: 13px; color: var(--gedaempft); }
.seite .balken { width: 100%; }
.urteil { font-size: 14px; color: var(--gedaempft); }

/* "Show differences only": ein Kaestchen, das seine Geschwister erreicht.
   Ohne Skript geht genau das - und ein Schalter, der ohne Skript nichts tut,
   waere ein Knopf, der luegt. */
.unterschiedsschalter input { margin: 0; }
.vergleichstafel:has(#nur-unterschiede:checked) .vergleichszeile.gleich,
.vergleichstafel:has(#nur-unterschiede:checked) .vergleichszeile.offen { display: none; }
.vergleichszeile.offen { grid-template-columns: minmax(140px, 1fr) minmax(0, 3.3fr); padding: 12px 0; }
.offenbeide { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 15px; }
.vergleichstafel:has(#nur-unterschiede:checked) .vergleichsblock:not(:has(.vergleichszeile:not(.gleich):not(.offen))) { display: none; }

@media (max-width: 720px) {
  .vergleichszeile, .vergleichszeile.offen { grid-template-columns: 1fr; gap: 12px; }
  .seiten { gap: 14px; }
  .gegen { display: none; }
}

/* --- Vergleichskorb ------------------------------------------------------ */
/* Eine Karte, die zugleich ein Label ist: der ganze Kasten waehlt aus. Der
   Name darin bleibt ein Link, denn "ansehen" und "vergleichen" sind zwei
   verschiedene Absichten. */
label.karte.auswaehlbar { cursor: pointer; }
label.karte.auswaehlbar .name a { color: inherit; text-decoration: none; }
label.karte.auswaehlbar .name a:hover { text-decoration: underline; }

/* --- Der Vergleichskorb ------------------------------------------------- */
/* Das echte Kaestchen steht als Geschwister VOR seiner Karte und ist
   unsichtbar; gezeichnet wird .korbhaken in der Karte. Der Grund steht in
   src/darstellung/korb.js: Nur als Geschwister laesst sich "genau zwei
   angekreuzt" ohne Skript ueberhaupt fragen. */
.korbliste { position: relative; }
.korbfeld {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0;
  opacity: 0; pointer-events: none;
}
.korbhaken {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--linie-stark); background: var(--flaeche);
  position: relative; transition: background var(--schnell) var(--kurve),
    border-color var(--schnell) var(--kurve);
}
.korbhaken::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform var(--schnell) var(--kurve);
}
.korbfeld:checked + label .korbhaken { background: var(--aktion); border-color: var(--aktion); }
.korbfeld:checked + label .korbhaken::after { transform: rotate(45deg) scale(1); }
.korbfeld:checked + label.karte { border-color: var(--aktion); box-shadow: 0 0 0 1px var(--aktion); }
.korbfeld:focus-visible + label.karte { outline: 2px solid var(--aktion); outline-offset: 2px; }

.korbleiste .korb-zuviel, .korbleiste .korb-fertig, .korbleiste .korb-los { display: none; }
.korbwahl, .korbwahl .und { display: none; }
.korbwahl b { font-weight: 620; }

/* Genau zwei: mindestens zwei UND nicht mindestens drei. */
.korbform:has(.korbfeld:checked ~ .korbfeld:checked):not(:has(.korbfeld:checked ~ .korbfeld:checked ~ .korbfeld:checked)) .korb-hinweis { display: none; }
.korbform:has(.korbfeld:checked ~ .korbfeld:checked):not(:has(.korbfeld:checked ~ .korbfeld:checked ~ .korbfeld:checked)) .korb-fertig { display: inline; }
.korbform:has(.korbfeld:checked ~ .korbfeld:checked):not(:has(.korbfeld:checked ~ .korbfeld:checked ~ .korbfeld:checked)) .korb-los { display: inline-flex; }
.korbform:has(.korbfeld:checked ~ .korbfeld:checked ~ .korbfeld:checked) .korb-hinweis { display: none; }
.korbform:has(.korbfeld:checked ~ .korbfeld:checked ~ .korbfeld:checked) .korb-zuviel { display: inline; }

.vergleichsleiste {
  position: sticky; bottom: 16px; z-index: 30; margin-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.92); border: 1px solid var(--linie-stark);
  box-shadow: var(--schatten-hoch); font-size: 15px;
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* --- Die Statuskarte eines leeren Bereichs ------------------------------- */
/* Ein leerer Abschnitt hatte Ueberschrift, Absatz und Weissraum wie ein
   voller. Auf einer Produktseite mit fuenf offenen Themen nahm das Nichts
   mehr Platz ein als alles Belegte zusammen. Die Auskunft bleibt - sie ist
   nur so gross wie ihr Inhalt. */

.leerkarte {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--radius);
  background: var(--abgesetzt); color: var(--gedaempft); font-size: 15px;
}
.leerkarte .klein { color: var(--gedaempft); }

/* Die Marktkarten-Kachel: der Pfeil rueckt beim Zeigen nach rechts. Er ist
   das einzige Bewegte daran und sagt, dass hinter der Karte etwas liegt. */
.kartenkachel .name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kartenkachel .pfeil { color: var(--gedaempft); flex: none; transition: transform var(--schnell) var(--kurve); }
.kartenkachel:hover .pfeil { transform: translateX(3px); color: var(--aktion); }

/* --- Der Fortschrittsbalken --------------------------------------------- */
/* Wie weit ist unsere Recherche? Er steht dort, wo wir NICHTS sagen koennen,
   und ersetzt vier gleich lange Absaetze mit derselben Ausrede. */

.fortschritt {
  height: 6px; border-radius: 999px; background: var(--abgesetzt);
  overflow: hidden;
}
.fortschritt > i { display: block; height: 100%; border-radius: 999px; background: var(--aktion); }

/* --- Vergleichsbalken --------------------------------------------------- */
/* Der Balken waechst beim Oeffnen auf seinen Wert. Er traegt IMMER seine Zahl
   daneben: eine Laenge ohne Zahl ist eine Andeutung. */

.balkenzeile { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 12px; align-items: center; }
.balken { height: 8px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.balken > i {
  display: block; height: 100%; border-radius: 999px; background: var(--aktion);
  transform-origin: 0 50%; animation: balkenWachsen var(--zeichnen) var(--kurve) both;
}
@keyframes balkenWachsen { from { transform: scaleX(0); } }
.balken.leiser > i { background: var(--stand-offen-punkt); }

.rangzahl {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 999px; background: var(--abgesetzt);
  color: var(--gedaempft); font-size: 15px; font-weight: 620;
}

/* --- Assistent ----------------------------------------------------------- */

.assistent {
  display: flex; gap: 10px; flex-wrap: wrap; list-style: none;
  margin: 0 0 40px; padding: 0;
}
.assistent li {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px;
  border-radius: 999px; background: var(--abgesetzt); color: var(--gedaempft);
  font-size: 15px; font-weight: 500;
}
.assistent li .nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  /* #6e6e73 traegt auf #e8e8ed nur 4,15:1 - die Browserprobe hat es an der
     Schrittnummer gefunden. #5b5b60 traegt 5,53:1; die Zeile steht in der
     PALETTE von werkzeuge/kontrast.mjs und wird dort mitgemessen. */
  background: var(--linie); color: #5b5b60; font-size: 13px; font-weight: 620;
}
.assistent li.jetzt { background: var(--tinte); color: #fff; }
.assistent li.jetzt .nr { background: rgba(255,255,255,0.22); color: #fff; }
.assistent li.fertig { color: var(--tinte); }
.assistent li.fertig .nr { background: var(--stand-verified-punkt); color: #fff; }

.roi-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.roi-ergebnis { position: sticky; top: 84px; }
.roi-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.roi-zahlen .zahl { font-size: clamp(22px, 2.6vw, 30px); font-weight: 620; letter-spacing: -0.025em; line-height: 1.1; }
.roi-zahlen .was { font-size: 13.5px; color: var(--gedaempft); margin-top: 4px; }
@media (max-width: 900px) {
  .roi-raster { grid-template-columns: 1fr; }
  .roi-ergebnis { position: static; }
}

/* Ein Feld mit seiner Einheit daneben: "0..1" ueber einem leeren Kasten war
   eine Aufforderung, die niemand ohne Anleitung richtig beantwortet. */
.einheitsfeld { position: relative; display: flex; align-items: center; }
.einheitsfeld input { padding-right: 62px; }
.einheitsfeld .einheit {
  position: absolute; right: 14px; font-size: 13px; color: var(--gedaempft);
  pointer-events: none; max-width: 54px; text-align: right;
}

/* --- Zeitleiste --------------------------------------------------------- */

.zeitleiste { position: relative; padding-left: 30px; }
.zeitleiste::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: var(--linie); border-radius: 999px;
  transform-origin: 50% 0; animation: linieZeichnen var(--zeichnen) var(--kurve) both;
}
@keyframes linieZeichnen { from { transform: scaleY(0); } }
.zeitpunkt { position: relative; padding: 0 0 26px; }
.zeitpunkt::before {
  content: ""; position: absolute; left: -30px; top: 6px; width: 16px; height: 16px;
  border-radius: 999px; background: var(--flaeche); border: 3px solid var(--linie-stark);
}
.zeitpunkt.wesentlich::before { border-color: var(--aktion); }
.zeitpunkt .wann { font-size: 13px; color: var(--gedaempft); margin-bottom: 6px; }
.zeitpunkt .was { font-size: 16px; margin-top: 2px; }
.zeitpunkt:last-child { padding-bottom: 0; }

.wandeltag { margin-bottom: 44px; }
.tagkopf {
  font-size: 15px; font-weight: 620; margin: 0 0 18px;
  display: flex; align-items: baseline; gap: 12px;
  position: sticky; top: 56px; background: var(--grund); padding: 8px 0; z-index: 5;
}
@media (max-width: 640px) { .tagkopf { top: 0; } }

/* Die Spitzenkarte eines Verzeichnisses: eine Karte, die eine Seite lang ist. */
.spitzenkarte { padding: 34px; background: var(--abgesetzt); border-color: transparent; }
.spitzenkarte h3 { margin: 8px 0; }
.spitzenkarte .zeile { font-size: 17px; max-width: 60ch; }

/* --- Signet ------------------------------------------------------------- */
/* Kein fremdes Logo und kein erfundenes Produktfoto: Die Bildmarke eines
   Anbieters wird aus seinem Namen GEZEICHNET. Das ist ehrlich, es ist unter
   'img-src 'self'' ueberhaupt das Einzige, was geht, und es sieht ueber 1611
   Organisationen gleich absichtlich aus. */

.signet {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 12px; font-weight: 640; letter-spacing: -0.02em;
  width: 44px; height: 44px; font-size: 16px; overflow: hidden;
}
.signet.gross { width: 72px; height: 72px; font-size: 25px; border-radius: 18px; }
.signet.klein { width: 30px; height: 30px; font-size: 12px; border-radius: 9px; }

/* Das echte Zeichen eines Anbieters an derselben Stelle und in derselben
   Groesse wie das gezeichnete Signet - sonst springt die Zeile, je nachdem ob
   wir eines haben. contain statt cover: Ein Zeichen wird nicht beschnitten,
   und ein weisser Rand um ein quadratisches Logo ist besser als ein
   abgeschnittenes. Der helle Grund traegt die vielen Zeichen mit
   transparentem Hintergrund und dunkler Zeichnung. */
.signet.zeichen {
  object-fit: contain; background: #fff; padding: 6px;
  border: 1px solid var(--linie, #e6e6e8);
}
.signet.zeichen.gross { padding: 9px; }
.signet.zeichen.klein { padding: 4px; }

/* Ein Zeichen neben einem Namen in einer Tabellenzelle oder Zeile: Bild und
   Text in EINER Zeile, das Bild verliert nie seine Breite. */
.mitzeichen { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }

/* Die Markenwand der Startseite: eine Kachel je Anbieter, das Zeichen oben,
   der Name darunter. Die ganze Kachel ist das Tippziel. */
.markenwand { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
/* Am Telefon: kleinere Kacheln, und nur die ersten 18 - 36 Kacheln in zwei
   Spalten waeren 18 Bildschirmzeilen fuer eine Zeile Inhalt. Der Rest steht
   einen Klick weit weg unter "All vendors". */
@media (max-width: 640px) {
  .markenwand { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .markenkachel { padding: 12px 6px 10px; gap: 6px; }
  .markenkachel .markenname { font-size: 12px; }
  .markenkachel:nth-child(n + 19) { display: none; }
}
.markenkachel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 10px 14px; min-height: var(--tippziel);
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
  color: inherit; text-decoration: none; text-align: center;
  transition: transform var(--ruhig) var(--kurve), box-shadow var(--ruhig) var(--kurve);
}
/* Nur eine verlinkte Kachel hebt sich (seit dem 28.09.2026 hat nicht jede ein Ziel). */
a.markenkachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); text-decoration: none; }
.markenkachel .markenname {
  font-size: 13px; color: var(--gedaempft); line-height: 1.3; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ein Zeichen als Link in einer Karte: 44 px Tippziel um ein 30-px-Bild. */
.markenreihe { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 8px; }
.markenlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tippziel); height: var(--tippziel); border-radius: var(--radius-klein);
}
.markenlink:hover { background: var(--abgesetzt); }
/* Eine Kennung aus einem Register: die Nummer in Schreibmaschinenschrift. */
.pille.kennung code { font-family: var(--code); font-size: 0.92em; margin-left: 4px; }

/* --- Kopfbereich einer Detailseite -------------------------------------- */

.seitenkopf { padding: 40px 0 32px; }

/* Der Weg zur Seite, an der Stelle des Kickers und in seiner Schrift. Die
   Glieder stehen in einer Liste: Das ist Fliesstext im Sinne der
   Tippziel-Probe, und so klein wie der Kicker, den sie ersetzen. */
.brotkrumen { margin: 0 0 10px; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.brotkrumen li {
  display: inline-flex; align-items: center;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 660; color: var(--gedaempft);
}
.brotkrumen li + li::before {
  content: ""; width: 5px; height: 5px; flex: none; margin: 0 9px 0 6px;
  border-right: 1.5px solid var(--linie-stark); border-top: 1.5px solid var(--linie-stark);
  transform: rotate(45deg);
}
.brotkrumen a { color: inherit; text-decoration: none; padding: 8px 0; }
.brotkrumen a:hover { color: var(--aktion-text); text-decoration: underline; text-decoration-thickness: 1px; }
.seitenkopf h1 { font-size: clamp(32px, 4.4vw, 52px); }
.seitenkopf .vorspann { margin-top: 16px; max-width: var(--lesebreite); }
.seitenkopf .pillen { margin-top: 24px; }

.objektkopf { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.objektkopf .text { flex: 1 1 320px; min-width: 0; }
.objektkopf .kennwerte { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 20px; }

/* Die mitlaufende Unternavigation einer Detailseite. */
.unternav {
  position: sticky; top: 56px; z-index: 20; background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie); margin-bottom: 40px;
}
.unternav .huelle { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.unternav .huelle::-webkit-scrollbar { display: none; }
.unternav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  font-size: 15px; color: var(--gedaempft); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.unternav a:hover { color: var(--tinte); text-decoration: none; }

/* --- Kennzahlen --------------------------------------------------------- */

.kennzahlen { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kennzahl { padding: 4px 0; }
.kennzahl .zahl { font-size: clamp(26px, 3vw, 38px); font-weight: 620; letter-spacing: -0.025em; line-height: 1.1; }
.kennzahl .was { font-size: 14px; color: var(--gedaempft); margin-top: 4px; }

/* --- Fuss --------------------------------------------------------------- */

footer.haupt {
  border-top: 1px solid var(--linie); background: var(--abgesetzt);
  padding: 56px 0 44px; font-size: 14px; color: var(--gedaempft); margin-top: 96px;
}
footer.haupt .spalten {
  display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px; margin-bottom: 36px;
}
footer.haupt .gruppentitel {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinte); font-weight: 660; margin: 0 0 6px;
}
footer.haupt nav { display: flex; flex-direction: column; }
footer.haupt a { color: var(--gedaempft); text-decoration: none; }
footer.haupt a:hover { color: var(--tinte); text-decoration: underline; }
footer.haupt nav a { display: inline-flex; align-items: center; min-height: var(--tippziel); }
footer.haupt .unten { border-top: 1px solid var(--linie-stark); padding-top: 22px; line-height: 1.6; max-width: 62em; }

.arbeitstitel { background: #7a5c00; color: #fff; font-size: 14px; text-align: center; padding: 10px 24px; }
.arbeitstitel a { color: #ffe9a8; display: inline-flex; align-items: center; min-height: var(--tippziel); padding: 0 6px; }

/* --- Code --------------------------------------------------------------- */

code { font-family: var(--code); font-size: 0.88em; background: var(--abgesetzt); padding: 0.15em 0.4em; border-radius: 6px; }
pre { font-family: var(--code); font-size: 13px; background: var(--abgesetzt); padding: 18px; border-radius: var(--radius); overflow-x: auto; }
pre code { background: none; padding: 0; }

/* --- Die Zeichnungen ---------------------------------------------------- */
/* Alles hier spielt GENAU EINMAL ('both', keine iteration-count) und bleibt
   dann stehen. Ein Element, das dauerhaft laeuft, zieht den Blick fuer immer
   auf sich und erklaert dabei nichts mehr. */

.reise { width: 100%; height: auto; max-width: 460px; }
.reise .r-schritt { opacity: 0; animation: reiseAuf 620ms var(--kurve) both; }
.reise .r-1 { animation-delay: 120ms; }
.reise .r-2 { animation-delay: 180ms; }
.reise .r-3 { animation-delay: 240ms; }
.reise .r-4 { animation-delay: 300ms; }
.reise .r-5 { animation-delay: 360ms; }
.reise .r-6 { animation-delay: 420ms; }
@keyframes reiseAuf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Die Linien zu den Quellen zeichnen sich, statt zu erscheinen: Der Weg IST
   die Aussage. 120 ist laenger als jeder der beiden Pfade, das genuegt. */
.reise .r-linie { stroke-dasharray: 120; stroke-dashoffset: 120; animation: strichZeichnen 700ms var(--kurve) 1620ms both; }
.reise .r-linie-b { animation-delay: 1740ms; }
@keyframes strichZeichnen { to { stroke-dashoffset: 0; } }

/* Der Punkt wandert einmal von der Frage ueber die Quelle zur Entscheidung. */
.reise .r-punkt { opacity: 0; animation: punktWandern 2000ms var(--kurve) 900ms both; }
@keyframes punktWandern {
  0%   { opacity: 0; transform: translate(210px, 44px); }
  12%  { opacity: 1; }
  32%  { transform: translate(210px, 109px); }
  56%  { transform: translate(106px, 193px); }
  78%  { transform: translate(210px, 268px); }
  94%  { opacity: 1; transform: translate(210px, 335px); }
  100% { opacity: 0; transform: translate(210px, 335px); }
}

.schrittlinie { width: 100%; height: 12px; margin: 26px 0 -6px; }
.schrittlinie .s-fortschritt {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: strichZeichnen 1400ms var(--kurve) 300ms both;
}

.schritt .zeichnung svg { width: 100%; height: auto; }
.f-auf > * { opacity: 0; animation: reiseAuf 500ms var(--kurve) both; }
.f-auf > *:nth-child(1), .f-auf > *:nth-child(2) { animation-delay: 400ms; }
.f-auf > *:nth-child(3), .f-auf > *:nth-child(4) { animation-delay: 540ms; }
.f-auf > *:nth-child(5), .f-auf > *:nth-child(6) { animation-delay: 680ms; }
.f-strich { stroke-dasharray: 70; stroke-dashoffset: 70; animation: strichZeichnen 620ms var(--kurve) 400ms both; }
.f-balken { transform-origin: 44px 50%; animation: balkenWachsen 900ms var(--kurve) 300ms both; }
.f-balken-2 { animation-delay: 460ms; }

.sparkline { flex: none; }
.sparkline polyline { stroke-dasharray: 260; stroke-dashoffset: 260; animation: strichZeichnen var(--zeichnen) var(--kurve) both; }

.methodikkette { width: 100%; height: auto; }
.methodikkette .m-station { opacity: 0; animation: reiseAuf 520ms var(--kurve) both; animation-delay: var(--verzug); }
.methodikkette .m-pfeil { stroke-dasharray: 40; stroke-dashoffset: 40; animation: strichZeichnen 380ms var(--kurve) both; animation-delay: var(--verzug); }

.zeichnung-rahmen {
  background: var(--abgesetzt); border-radius: var(--radius-gross);
  padding: clamp(20px, 3vw, 36px); display: flex; align-items: center; justify-content: center;
}

/* --- Bruchpunkte -------------------------------------------------------- */
/* Bis zum 03.09.2026 hatte das ausgelieferte CSS KEINEN einzigen
   Layout-Bruchpunkt, nur Regeln fuer den Dunkelmodus. Der Kopf konnte deshalb
   nur umbrechen, und auf dem Telefon stand eine mehrzeilige Navigationswand. */

@media (max-width: 1024px) {
  :root { --abstand-abschnitt: 80px; }
  .hero-raster { grid-template-columns: 1fr; }
  .hero-bild { max-width: 520px; margin-top: 8px; }
  .schritte { grid-template-columns: 1fr; }
  .mega-spalten { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 860px) {
  nav.haupt, .kopfsuche { display: none; }
  .mobilnav { display: block; }
  .kopf-suchknopf { display: inline-flex; }
  .huelle { padding: 0 20px; }
}

@media (max-width: 560px) {
  .kopf-rechts > .knopf { display: none; }
}

@media (max-width: 640px) {
  :root { --abstand-abschnitt: 68px; --radius-gross: 22px; --radius: 16px; }
  body { font-size: 16px; }
  section { margin-bottom: 44px; }
  .huelle { padding: 0 18px; }
  .karten { grid-template-columns: 1fr; gap: 12px; }
  .karten.zwei, .karten.drei, .karten.vier { grid-template-columns: 1fr; }
  .merkmalskacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suchleiste form { min-height: 58px; padding-left: 18px; }
  .suchleiste input { font-size: 17px; height: 46px; }
  .suchleiste button { width: 46px; height: 46px; }
  .segmentleiste { display: flex; width: 100%; }
  .segmentleiste label { flex: 1; padding: 0 12px; }
  .vertrauen .zahlen { flex-direction: column; align-items: center; gap: 6px; }
  th, td { padding: 12px 14px; }
  footer.haupt .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.haupt .spalten > div:first-child { grid-column:1 / -1; }
  .objektkopf { gap: 16px; }
  .unternav { top: 0; }
}

@media (max-width: 400px) {
  .merkmalskacheln { grid-template-columns: 1fr; }
}

/* --- Bewegung ----------------------------------------------------------- */
/* Jede Animation erklaert Daten. Wer sie abbestellt hat, bekommt denselben
   Endzustand ohne Weg dorthin - und nicht eine halb gezeichnete Grafik. */


.vergleichszeichen { display:flex; align-items:center; gap:16px; margin-bottom:20px; color:var(--gedaempft); font-size:13px; }

/* Kaufhilfen und Verzeichnisse: klare Schritte, lokale SVGs, sanfte Tiefe. */
.hero { position:relative; padding-top:64px; padding-bottom:56px; }
.hero::before { content:""; position:absolute; inset:16px -16px; z-index:-1; border-radius:36px; background:radial-gradient(ellipse at 90% 35%,#e9f1ff 0,transparent 58%); }
.hero h1 { max-width:690px; }
.hero .vorspann { max-width:560px; }
.hero .kicker { color:var(--aktion-text); margin-bottom:20px; }
.schnellwege { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:24px 0; }
.schnellwege .pille { gap:8px; }
.kaufhilfe-band { background:linear-gradient(180deg,#fff,#f8faff); }
.karten.kaufhilfe-karten { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kaufhilfe-karte { display:flex; flex-direction:column; padding:24px; overflow:hidden; }
.kaufhilfe-karte h3 { font-size:23px; }
.kaufhilfe-karte p { color:var(--gedaempft); margin:10px 0 20px; }
.kaufhilfe-karte .weiter { margin-top:auto; display:flex; gap:8px; align-items:center; }
.kaufhilfe-karte .weiter::after { content:none; }
.kaufhilfe-motiv { height:126px; margin:-24px -24px 22px; position:relative; display:grid; place-items:center; background:linear-gradient(125deg,#ecf3ff,#f4f7fd); perspective:600px; }
.kaufhilfe-karte:nth-child(2n) .kaufhilfe-motiv { background:linear-gradient(125deg,#eaf5f1,#f6faf8); }
.kaufhilfe-karte:nth-child(3n) .kaufhilfe-motiv { background:linear-gradient(125deg,#f1edfb,#f8f6fd); }
.motiv-platte { display:grid; place-items:center; width:88px; height:88px; border-radius:23px; background:#fff; color:#245c9c; border:1px solid #dce6f2; box-shadow:9px 10px 0 #cedcef,16px 20px 28px #284d781a; transform:rotateX(13deg) rotateY(-15deg) rotateZ(-8deg); transition:transform var(--ruhig); }
.kaufhilfe-karte:hover .motiv-platte, .kaufhilfe-karte:focus-visible .motiv-platte { transform:rotateX(0) rotateY(0) rotateZ(0) translateY(-3px); }
.motiv-punkt { width:15px; height:15px; background:#a9c9f2; border:4px solid #fff; border-radius:50%; position:absolute; left:calc(50% + 57px); top:25px; }
.kaufhilfe-verweis { display:flex; align-items:center; gap:20px; border:1px solid var(--linie); border-radius:var(--radius); background:var(--aktion-schwach); padding:24px; margin:20px 0; }
.kaufhilfe-verweis > svg { flex:none; color:var(--aktion-text); }
.kaufhilfe-verweis > div { flex:1; }
.kaufhilfe-verweis p { margin:6px 0 0; }
.kaufhilfe-verweis h2 { font-size:26px; }
.schrittnummer { display:inline-grid; place-items:center; width:44px; height:44px; background:var(--aktion-schwach); color:var(--aktion-text); border-radius:14px; font-weight:700; margin-bottom:20px; }
.kaufhilfe-szenario p { margin-bottom:0; color:var(--gedaempft); }
.kaufhilfe-szenario summary { display:flex; align-items:center; gap:14px; font-size:17px; font-weight:600; }
.kaufhilfe-szenario summary::after { content:'+'; margin-left:auto; color:var(--aktion-text); font-size:24px; }
.kaufhilfe-szenario[open] summary::after { content:'−'; }
.kaufhilfe-szenario .schrittnummer { margin:0; flex:none; }
.kaufhilfe-produkte { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0; }
.kaufhilfe-produkte > .karte { display:flex; flex-direction:column; }
.kaufhilfe-produkte > .karte > .weiter { margin-top:auto; padding-top:12px; }
.kaufhilfe-produktkopf { display:flex; align-items:center; gap:16px; }
.kaufhilfe-produktkopf > div { min-width:0; }
.kaufhilfe-produktkopf .marke { margin:0 0 4px; }
.kaufhilfe-produktkopf h3 { margin:0; }
.kaufhilfe-produktkopf h3 a { color:var(--tinte); text-decoration:none; }
.kaufhilfe-produktkopf h3 a:hover { text-decoration:underline; }
.weitere-fakten { margin-bottom:16px; font-size:14px; }
.guide-suche { display:flex; flex-wrap:wrap; gap:16px; align-items:end; background:var(--abgesetzt); padding:22px; border-radius:var(--radius); }
.guide-suche .feld { flex:1 1 260px; }
.guide-kopf { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); align-items:center; gap:56px; }
.guide-kopf h1 { font-size:clamp(36px,4.6vw,60px); }
.guide-kopf .vorspann { margin:20px 0 26px; }
.guide-kopf .weiter { display:inline-flex; margin:12px 0 0 18px; }
.guide-illustration { padding:28px; border-radius:28px; background:linear-gradient(140deg,#edf4ff,#f1edf9); color:#315e97; border:1px solid #dce6f2; box-shadow:12px 14px 0 #e8edf5; display:grid; justify-items:center; }
.guide-illustration > .symbol { margin:24px; }
.guide-illustration ol { margin:20px 0 0; padding:0; list-style:none; counter-reset:route; width:100%; }
.guide-illustration li { counter-increment:route; display:flex; align-items:center; gap:12px; min-height:42px; font-size:14px; color:var(--tinte); }
.guide-illustration li::before { content:counter(route); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; color:#315e97; font-weight:600; }
.leitbild { display:block; width:100%; max-width:260px; max-height:190px; }
.kaufhilfe-motiv .leitbild { height:115px; width:170px; color:#315e97; }
.leitbild-hinten { transform:translate(5px,7px); stroke:#b2c8e4; fill:#dce8f7; }
.leitbild-vorn { fill:#fff; transition:transform var(--ruhig); transform:translate(-2px,-2px); }
.kaufhilfe-karte:hover .leitbild-vorn, .kaufhilfe-karte:focus-visible .leitbild-vorn { transform:translate(-5px,-5px); }
.entscheidungswege { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.entscheidungsweg { display:flex; align-items:center; gap:16px; padding:22px; border:1px solid var(--linie); border-radius:var(--radius); background:#fff; color:var(--tinte); text-decoration:none; transition:transform var(--schnell),box-shadow var(--schnell); }
.entscheidungsweg:hover { transform:translateY(-3px); box-shadow:var(--schatten); }
.entscheidungsweg > span:nth-child(2) { flex:1; min-width:0; }
.entscheidungsweg strong { display:block; font-size:17px; }
.entscheidungsweg span span { display:block; color:var(--gedaempft); font-size:13px; line-height:1.5; margin-top:5px; }
.entscheidungsweg > svg { flex:none; color:var(--aktion-text); }
.weg-symbol { display:grid; place-items:center; width:54px; height:54px; flex:none; color:#315e97; background:#eef4fd; border-radius:16px; box-shadow:3px 4px 0 #e0e9f6; }
.kaufhilfe-fakten { margin:20px 0; }
.kaufhilfe-fakten > div { display:grid; grid-template-columns:1fr 1.3fr; gap:12px; border-top:1px solid var(--linie); padding:14px 0; }
.kaufhilfe-fakten dt { font-size:14px; color:var(--gedaempft); }
.kaufhilfe-fakten dd { margin:0; font-size:15px; }
.kaufhilfe-fakten .klein { display:block; margin-top:6px; }
.kaufhilfe-fakten time { white-space:nowrap; }
.kaufhilfe-fakten details p { font-size:14px; overflow-wrap:anywhere; }
.kaufhilfe-checkliste { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kaufhilfe-check { display:flex; align-items:flex-start; gap:14px; padding:22px; border:1px solid var(--linie); border-radius:var(--radius); cursor:pointer; }
.kaufhilfe-check input { margin:3px 0 0; flex:none; accent-color:var(--aktion); }
.kaufhilfe-check span span { display:block; color:var(--gedaempft); margin-top:7px; font-size:15px; }
.kaufhilfe-check:has(input:checked) { background:#edf7f1; border-color:#96c5ae; }
.kaufhilfe-frage { border-bottom:1px solid var(--linie); padding:12px 0; }
.kaufhilfe-frage summary { font-size:18px; font-weight:600; }
.kaufhilfe-frage p { max-width:750px; }
.verzeichnis-suche { margin-top:0; padding:24px; background:var(--abgesetzt); border:1px solid var(--linie); border-radius:var(--radius); }
.verzeichnis-filter { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.verzeichnis-filter .feld { flex:1 1 180px; }
.verzeichnis-filter .feld:first-child { flex:2 1 240px; }
.verzeichnis-filter .knopf { gap:8px; }
.filter-ergebnis a, .chip > a { display:inline-flex; align-items:center; min-height:var(--tippziel); min-width:var(--tippziel); }
.filter-ergebnis { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; margin-top:14px; font-size:14px; }
.verzeichnis-tabelle th { white-space:normal; }
.verzeichnis-tabelle tbody tr:hover { background:#f8faff; }
.verzeichnis-tabelle td { font-size:14px; }
.verzeichnis-register { border:1px solid var(--linie); border-radius:var(--radius); padding:20px; }
.verzeichnis-register > summary { font-size:18px; font-weight:600; }
.register-raster { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 24px; }
.register-raster > div { border-top:1px solid var(--linie); padding:14px 0; min-width:0; }
.register-raster strong { font-size:15px; overflow-wrap:anywhere; }
.register-raster > div > div { display:flex; flex-wrap:wrap; gap:0 16px; }
.register-raster a { display:inline-flex; align-items:center; min-height:var(--tippziel); min-width:var(--tippziel); font-size:14px; }
.vergleichsformular { padding:28px; border:1px solid #dce6f2; border-radius:var(--radius-gross); background:linear-gradient(135deg,#f4f8ff,#fff); box-shadow:var(--schatten); }
section[id] { scroll-margin-top:90px; }
@media (max-width:960px) {
  .karten.kaufhilfe-karten { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .entscheidungswege { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guide-kopf { gap:28px; }
}
@media (max-width:720px) {
  .hero { padding-top:36px; padding-bottom:30px; }
  .kaufhilfe-checkliste { grid-template-columns:1fr; }
  .kaufhilfe-produkte, .entscheidungswege, .guide-kopf { grid-template-columns:1fr; }
  .guide-illustration { grid-template-columns:110px 1fr; gap:20px; padding:18px; box-shadow:5px 6px 0 #e8edf5; border-radius:20px; }
  .guide-illustration > .symbol { width:72px; height:72px; margin:0; }
  .guide-illustration .leitbild { max-height:110px; }
  .guide-illustration ol { margin:0; }
  .guide-kopf .weiter { margin-left:0; }
  .guide-suche { gap:12px; padding:18px; }
  .guide-suche button { width:100%; }
  .register-raster { grid-template-columns:1fr; }
  .entscheidungsweg { padding:18px; }
  .karten.kaufhilfe-karten { grid-template-columns:1fr; }
  .kaufhilfe-verweis { flex-wrap:wrap; padding:20px; gap:14px; }
  .kaufhilfe-verweis > div { flex-basis:calc(100% - 56px); }
  .kaufhilfe-motiv { height:108px; }
  .verzeichnis-filter { gap:12px; }
  .verzeichnis-filter .feld, .verzeichnis-filter .feld:first-child { flex-basis:100%; }
  .verzeichnis-filter button { width:100%; }
  .verzeichnis-suche { padding:18px; }
  .verzeichnis-tabelle, .verzeichnis-tabelle tbody { display:block; width:100%; }
  .verzeichnis-tabelle thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .verzeichnis-tabelle tbody tr { display:block; padding:16px; border-bottom:1px solid var(--linie-stark); }
  .verzeichnis-tabelle td { display:grid; grid-template-columns:95px minmax(0,1fr); gap:12px; border:0; padding:7px 0; width:100%; min-width:0; white-space:normal; }
  .verzeichnis-tabelle td::before { content:attr(data-label); color:var(--gedaempft); font-size:12px; font-weight:500; align-self:center; }
  .verzeichnis-tabelle td.merkmal { font-size:17px; }
  .verzeichnis-tabelle td a { overflow-wrap:anywhere; }
  .vergleichsformular { padding:20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .ring .bogen { animation: none; }
  .balken > i { animation: none; }
  .zeitleiste::before { animation: none; }
}

@media print {
  header.haupt, footer.haupt, .unternav, .mobilnav { display: none; }
  .aufklapper .rumpf { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}
/* Vergleich: klare Zustandsfilter, ohne JavaScript und ohne neue Quellen. */
.vergleichsbilanz { display:flex; align-items:center; gap:28px; margin:28px 0 0; padding:24px 28px; border:1px solid #dbe5f1; border-radius:24px; background:linear-gradient(125deg,#f2f7ff,#fff); }
.vergleichsring { animation:vergleich-auftakt .45s ease-out both; width:116px; height:116px; flex:none; overflow:visible; filter:drop-shadow(0 6px 6px #c3d1e550); }
.vergleichsring .ring-0 { stroke:#176cd6; }
.vergleichsring .ring-1 { stroke:#24836e; }
.vergleichsring .ring-2 { stroke:#c3ccd8; }
.vergleichsring text { fill:var(--tinte); font-size:27px; font-weight:700; }
.vergleichsring .ring-label { font-size:12px; font-weight:500; }
.vergleichszahlen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; flex:1; }
.vergleichszahlen div { display:flex; flex-direction:column-reverse; gap:4px; }
.vergleichszahlen dd { margin:0; font-size:34px; font-weight:680; letter-spacing:-.04em; }
.vergleichszahlen dt { font-size:14px; color:var(--gedaempft); }
.vergleichszahlen div:first-child dd { color:#1760b5; }
.vergleichszahlen div:nth-child(2) dd { color:#206e5e; }
.unterschiedskarten, .vergleichsbeispiele { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.unterschiedskarte { display:block; color:inherit; text-decoration:none; }
.unterschiedskarte h3, .vergleichsbeispiel h3 { font-size:20px; margin:8px 0 16px; }
.unterschiedskarte dl { margin:0 0 18px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.unterschiedskarte dt { color:var(--gedaempft); font-size:13px; }
.unterschiedskarte dd { margin:5px 0 0; font-size:24px; font-weight:650; overflow-wrap:anywhere; }
.vergleichsbeispiel { position:relative; transition:transform .18s ease,box-shadow .18s ease; }
.vergleichsbeispiel:hover { transform:translateY(-3px); box-shadow:0 12px 30px #173b6314; }
.vergleichsbeispiel h3 a { display:flex; min-height:44px; align-items:center; color:var(--tinte); text-decoration:none; }
.vergleichsbeispiel h3 a:hover { color:var(--aktion-text); text-decoration:underline; }
.vergleichsbeispiel p:not(.marke) { color:var(--gedaempft); font-size:14px; margin-bottom:12px; }
.vergleichsthemen { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.vergleichsthemen .feld { flex:1; max-width:420px; min-width:200px; }
.vergleichsfilter { border:0; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 28px; }
.vergleichsfilter legend { width:100%; font-size:14px; font-weight:600; margin-bottom:10px; }
.vergleichsfilter label { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 13px; border:1px solid var(--linie); border-radius:12px; cursor:pointer; font-size:14px; }
.vergleichsfilter label:has(input:checked) { background:#edf4ff; border-color:#176cd6; color:#164f99; }
.vergleichsfilter label:has(input:focus-visible) { outline:3px solid #176cd6; outline-offset:3px; }
.vergleichsfilter input { margin:0; accent-color:#176cd6; }
.vergleichsfilter label span { font-size:12px; font-weight:700; }
.vergleichstafel:has(#nur-belegt:checked) .vergleichszeile[data-stand="offen"]:not(:target),
.vergleichstafel:has(#nur-unterschiede:checked) .vergleichszeile:not([data-stand="verschieden"]):not(:target),
.vergleichstafel:has(#nur-luecken:checked) .vergleichszeile:not([data-stand="offen"]):not(:target) { display:none; }
.vergleichstafel:has(#nur-belegt:checked) .vergleichsblock:not(:has(.vergleichszeile:not([data-stand="offen"]),:target)),
.vergleichstafel:has(#nur-unterschiede:checked) .vergleichsblock:not(:has(.vergleichszeile[data-stand="verschieden"],:target)),
.vergleichstafel:has(#nur-luecken:checked) .vergleichsblock:not(:has(.vergleichszeile[data-stand="offen"],:target)) { display:none; }
.vergleich-leer { display:none; }
.vergleichstafel:has(#nur-unterschiede:checked) .vergleich-leer[data-filter="unterschiede"]:not([hidden]),
.vergleichstafel:has(#nur-belegt:checked) .vergleich-leer[data-filter="belegt"]:not([hidden]),
.vergleichstafel:has(#nur-luecken:checked) .vergleich-leer[data-filter="luecken"]:not([hidden]) { display:block; }
.vergleich-geltung { font-size:13px; line-height:1.6; color:var(--gedaempft); overflow-wrap:anywhere; }
.vergleichszeile:target { scroll-margin-top:90px; border-radius:12px; outline:2px solid #82afe9; outline-offset:8px; }
@media (max-width:900px) { .vergleichsbeispiele { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
 .vergleichsbilanz { gap:14px; padding:18px 14px; }
 .vergleichsring { width:76px; height:76px; }
 .vergleichszahlen { gap:10px; }
 .vergleichszahlen dd { font-size:27px; }
 .vergleichszahlen dt { font-size:11px; line-height:1.4; }
 .unterschiedskarten, .vergleichsbeispiele { grid-template-columns:1fr; }
 .vergleichsfilter { display:grid; grid-template-columns:1fr 1fr; }
 .vergleichsfilter label { padding:8px; font-size:13px; }
 .vergleichskoepfe { gap:12px; }
 .vergleichskopf { flex:1 1 130px; padding:16px 12px; flex-wrap:wrap; }
 .vergleichskopf .name { font-size:17px; }
 .vergleichskopf .marke { font-size:12px; }
}
@keyframes vergleich-auftakt { from { opacity:0; transform:translateY(5px) scale(.96); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .vergleichsring { animation:none; } .vergleichsbeispiel { transition:none; } .vergleichsbeispiel:hover { transform:none; } }

/* Ruhige Startseite: echte Einstiege statt einer animierten Beispielszeichnung. */
.start-hero { padding:64px 0; }
.start-hero::before { display:none; }
.start-hero .hero-raster { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; }
.start-hero h1 { font-size:clamp(42px,4.5vw,65px); line-height:1.06; letter-spacing:-.045em; }
.start-hero h1 .leise { color:#375b82; }
.start-hero .vorspann { font-size:19px; line-height:1.65; margin-bottom:26px; }
.hero-zusage { color:var(--gedaempft); font-size:14px; margin:14px 0 24px; }
.hero-prinzipien { display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:0; font-size:13px; color:#42576c; }
.hero-prinzipien li::before { content:'✓'; color:#0b6b4e; margin-right:6px; }
.hero-suche { padding:34px; border:1px solid #dce6f0; border-radius:24px; background:#f3f7fc; }
.hero-suche h2 { font-size:30px; line-height:1.2; margin:0 0 14px; }
.hero-suche > p:not(.kicker) { color:#4b6179; font-size:16px; }
.hero-suche .kicker { font-size:11px; letter-spacing:.1em; margin-bottom:16px; }
.hero-suche .suchleiste { margin:24px 0 0; }
.hero-suche .suchleiste form { box-shadow:none; padding-left:16px; min-height:58px; }
.hero-suche .suchleiste input[type="search"] { font-size:16px; }
.hero-suche .hero-beispiele { margin:22px 0 4px; color:#4b6179; font-size:13px; }
.hero-suche .vorschlaege { display:grid; gap:5px; margin-top:6px; }
.hero-suche .pille { justify-content:flex-start; background:#fff; border:1px solid #dce6f0; border-radius:10px; font-size:13px; padding:9px 12px; text-align:left; white-space:normal; }
.hero-kategorien { margin-top:14px; font-size:14px; }
.vertrauen { padding:24px 0; }
.vertrauen-details { text-align:center; margin:8px auto 0; max-width:800px; }
.vertrauen-details summary { font-size:13px; color:var(--gedaempft); min-height:44px; padding:10px; cursor:pointer; }
.entscheidung-band { background:#f8fafc; }
.entscheidung-schritt { padding:26px 24px; border-left:1px solid #d5e0eb; }
.entscheidung-nummer { font-size:14px; font-weight:650; color:#375b82; }
.entscheidung-schritt h3 { font-size:23px; margin:18px 0 12px; }
.entscheidung-schritt p { color:var(--gedaempft); font-size:16px; }
.entscheidung-schritt .weiter { font-size:14px; }
.start-fragen { display:grid; grid-template-columns:1fr 1.35fr; gap:70px; }
.start-fragen h2 { font-size:36px; }
.start-fragen > div > p:not(.kicker) { color:var(--gedaempft); }

/* Rechner: native Formulare, beschriftete Ergebnisse und druckbare Annahmen. */
.kosten-intro { margin-bottom:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.kosten-intro p { margin:0; }
.kosten-formular { margin:32px 0; }
.kosten-formular fieldset { min-width:0; border:1px solid var(--linie-stark); border-radius:18px; padding:24px; margin:0 0 24px; }
.kosten-formular legend { padding:0 8px; font-size:20px; font-weight:650; }
.kosten-basis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.kosten-formular .feld { min-width:0; margin-bottom:16px; }
.kosten-formular .feld label { line-height:1.4; font-size:15px; }
.kosten-formular .feld .klein { font-size:13px; line-height:1.5; margin:8px 0 0; }
.kosten-formular .karten.zwei { gap:24px; }
.kosten-option { background:#f9fafc; }
.kosten-option summary { min-height:44px; font-size:14px; font-weight:600; padding:10px 0; cursor:pointer; }
.kosten-option details[open] summary { margin-bottom:16px; }
.kosten-formular [aria-invalid="true"] { border:2px solid #a32229; }
.kosten-fehler, .kosten-fehler a { color:#a32229; }
.kosten-ergebnis { background:#eef5fd; border:1px solid #cbddef; border-radius:22px; padding:30px; }
.kosten-ergebnis h2 { font-size:30px; }
.kosten-summe { background:#fff; border:1px solid #cbddef; border-radius:16px; padding:22px; min-width:0; }
.kosten-summe h3 { margin:0 0 12px; font-size:17px; }
.kosten-summe > strong { display:block; font-size:clamp(25px,3vw,37px); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; line-height:1.2; }
.kosten-summe > span, .kosten-summe p { font-size:13px; color:#4b6179; }
.kosten-summe p { margin:12px 0 0; }
.kosten-ergebnis .tabellenhuelle { margin:26px 0; }
.tabellenhuelle { overflow-x:auto; max-width:100%; }
.tabellenhuelle caption { text-align:left; padding:12px 0; font-size:14px; color:var(--gedaempft); }
.kosten-ergebnis td { white-space:nowrap; font-variant-numeric:tabular-nums; }
.kosten-formeln { padding-left:24px; }
.kosten-formeln li { padding:8px 0; }

/* Arbeitsanleitungen mit kurzem Inhaltsverzeichnis und eigenen Tabellen. */
.ratgeber-kopf { max-width:880px; padding-bottom:40px; }
.ratgeber-kopf h1 { font-size:clamp(38px,5vw,64px); }
.ratgeber-layout { display:grid; grid-template-columns:250px minmax(0,780px); gap:70px; align-items:start; }
.ratgeber-inhalt { position:sticky; top:96px; display:grid; gap:4px; border-left:2px solid #d8e4f1; padding:4px 0 4px 20px; font-size:14px; }
.ratgeber-inhalt strong { margin-bottom:12px; }
.ratgeber-inhalt a { display:flex; align-items:center; min-height:44px; padding:6px 0; text-decoration:none; color:#4b6179; }
.ratgeber-inhalt a:hover { color:var(--aktion-text); text-decoration:underline; }
.ratgeber-text { min-width:0; }
.ratgeber-text section:first-child { margin-top:0; padding-top:0; }
.ratgeber-text h2 { font-size:30px; line-height:1.25; }
.ratgeber-text p { line-height:1.75; }
.ratgeber-text table { font-size:14px; }
.ratgeber-text th, .ratgeber-text td { min-width:140px; vertical-align:top; white-space:normal; }
.ratgeber-text th:first-child { min-width:110px; }
.ratgeber-text .hinweis { margin:24px 0; font-size:15px; }
.ratgeber-text .hinweis p { margin:0 0 10px; }
.ratgeber-text .hinweis a { display:inline-flex; align-items:center; min-height:44px; }
.ratgeber-weiter { margin-top:24px; padding-left:22px; }
.ratgeber-weiter a { display:inline-flex; align-items:center; min-height:44px; }
.ratgeber-karte h3 { font-size:24px; margin:12px 0; }
.ratgeber-karte p { color:var(--gedaempft); }
.kosten-ergebnis, .kosten-formular, .ratgeber-text section { scroll-margin-top:96px; }
@media (max-width:1000px) {
  .start-hero .hero-raster { gap:30px; }
  .hero-suche { padding:26px; }
  .ratgeber-layout { grid-template-columns:210px minmax(0,1fr); gap:32px; }
}
@media (max-width:760px) {
  .start-hero { padding:36px 0; }
  .start-hero .hero-raster, .start-fragen, .ratgeber-layout { grid-template-columns:1fr; gap:28px; }
  .start-hero h1 { font-size:46px; }
  .start-hero .vorspann { font-size:17px; }
  .hero-suche { padding:24px; }
  .hero-suche h2 { font-size:27px; }
  .hero-prinzipien { gap:8px 13px; font-size:12px; }
  .ratgeber-inhalt { position:static; grid-template-columns:1fr 1fr; gap:4px 18px; }
  .ratgeber-inhalt strong { grid-column:1/-1; }
  .kosten-basis { grid-template-columns:1fr; gap:0; }
  .kosten-formular .karten.zwei, .kosten-ergebnis .karten.zwei { grid-template-columns:1fr; }
  .kosten-formular fieldset { padding:20px 16px; }
  .kosten-ergebnis { padding:22px 16px; }
  .kosten-ergebnis h2 { font-size:25px; }
  .entscheidung-schritt { padding:18px; }
  .ratgeber-text h2 { font-size:27px; }
}
@media (max-width:380px) {
  .start-hero h1 { font-size:40px; }
  .hero-suche { padding:20px 16px; }
  .ratgeber-inhalt { grid-template-columns:1fr; }
}
@media print {
  .ratgeber-inhalt, .kosten-intro, .kosten-formular .knopfreihe, .kosten-formular details:not([open]) { display:none; }
  .ratgeber-layout { display:block; }
  .kosten-ergebnis { break-inside:avoid; }
  .kosten-summe, .kosten-option { break-inside:avoid; }
}
/* Bewertungsbogen: auf kleinen Bildschirmen bleiben die zwei Antworten
   nebeneinander, Freitext und Belege erhalten die gesamte Breite. */
.score-intro { margin-bottom: 36px; }
.score-formular { scroll-margin-top: 90px; }
.score-kriterien { display: grid; gap: 24px; margin: 28px 0; }
.score-kriterium { margin: 0; padding: 24px; border: 1px solid var(--linie); border-radius: 18px; min-width: 0; }
.score-kriterium legend { padding: 0 8px; font-weight: 650; }
.score-zeile { display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 16px; }
.score-antworten { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.score-kriterium .feld { min-width: 0; margin: 0; }
.score-kriterium textarea { resize: vertical; min-height: 100px; }
.score-pflicht { display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; }
.score-pflicht input { width: 20px; height: 20px; flex: 0 0 auto; }
.score-kriterium details { margin-top: 18px; }
.score-kriterium summary, .score-details summary, .score-legende summary { padding: 12px 0; cursor: pointer; min-height: 44px; }
.score-ergebnis { padding: 28px; border: 1px solid var(--linie); border-radius: 20px; background: var(--abgesetzt); scroll-margin-top: 90px; }
.score-zusammenfassung { min-width: 0; padding: 24px; border-radius: 14px; background: var(--grund); }
.score-zahl { font-size: clamp(24px,4vw,42px); font-weight: 650; line-height: 1.2; }
.score-zahl span { font-size: 18px; color: var(--gedaempft); font-weight: 400; }
.score-offen { border-left: 3px solid #986b16; padding-left: 12px; }
.score-metadaten { display: block; font-size: 12px; font-weight: 400; margin-top: 6px; }
.score-ergebnis td, .score-ergebnis th, .score-ergebnis p { overflow-wrap: anywhere; }
.entscheidung-einstieg { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 48px; margin-bottom: 48px; }
.entscheidung-einstieg h2 { max-width: 640px; }
.entscheidung-einstieg .vorspann { margin: 20px 0 24px; }
.entscheidung-einstieg .klein { margin-top: 16px; }
.entscheidung-beispiel { background: var(--grund); border: 1px solid var(--linie); border-radius: 20px; padding: 28px; }
.entscheidung-beispiel dl { margin: 16px 0 24px; }
.entscheidung-beispiel dl div { border-bottom: 1px solid var(--linie); padding: 16px 0; }
.entscheidung-beispiel dt { font-weight: 650; }
.entscheidung-beispiel dd { margin: 6px 0 0; color: var(--gedaempft); font-size: 14px; }
@media (max-width: 700px) {
  .entscheidung-einstieg { grid-template-columns: 1fr; gap: 24px; }
  .score-ergebnis, .score-kriterium { padding: 18px; }
  .score-zeile { grid-template-columns: minmax(0,1fr) 72px; gap: 10px; }
  .score-antworten { gap: 10px; }
  .score-kriterium .feld label { font-size: 13px; }
  .score-kriterium .feld select { padding-left: 8px; padding-right: 20px; font-size: 14px; }
  .score-kriterium details .score-antworten { grid-template-columns: 1fr; }
  .start-kategorien .segmenttafel .karten.sechs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .start-kategorien .segmenttafel .kachel { padding: 20px 14px; }
}
@media print {
  body:has(.score-ergebnis) .score-formular,
  body:has(.score-ergebnis) .score-intro { display: none; }
  .score-ergebnis { padding: 0; border: 0; background: white; }
  .score-ergebnis .score-details::details-content { display: block; content-visibility: visible; }
  .score-ergebnis .score-details > :not(summary) { display: block; }
  .score-ergebnis .tabellenhuelle { overflow: visible; }
  .score-ergebnis .knopf, .score-ergebnis a.weiter { display: none; }
  .score-zusammenfassung { break-inside: avoid; }
}

/* Der Katalog fuehrt von der Aufgabe zum Produkt; Belege bleiben am Produkt. */
.katalog-kopf { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; padding-bottom:30px; }
.katalog-kopf h1 { font-size:clamp(38px,5vw,62px); }
.katalog-kompakt { padding-bottom:28px; }
.katalog-kompakt h1 { font-size:clamp(30px,4vw,42px); }
.katalog-kopf .vorspann { max-width:520px; }
.katalog-kopf .schnellwege { gap:12px 24px; margin-bottom:0; }
.katalog-skizze { display:grid; place-items:center; padding:20px; color:#315e97; background:radial-gradient(ellipse,#eaf2ff,transparent 72%); }
.katalog-skizze svg { width:100%; max-width:300px; overflow:visible; }
.katalog-skizze > span { font-size:13px; letter-spacing:.03em; color:var(--gedaempft); }
.katalog-ebene { fill:#fff; transform:rotate(-6deg); transform-origin:center; filter:drop-shadow(9px 12px 0 #dae5f4); }
.katalog-lupe { fill:#eef6ff; stroke-width:3; filter:drop-shadow(0 8px 8px #b9cde0); }
.katalog-filter { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:24px; border:1px solid var(--linie); border-radius:var(--radius); background:var(--abgesetzt); align-items:end; }
.katalog-filter .feld { min-width:0; margin:0; }
.katalog-query { grid-column:span 3; }
.katalog-filter select,.katalog-filter input { width:100%; min-width:0; }
.katalog-filter .knopf { width:100%; }
.katalog-filter + section { margin-top:32px; }
.katalog-produkte { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.katalog-produkt { display:flex; flex-direction:column; min-width:0; gap:18px; padding:24px; }
.katalog-produktkopf { display:flex; align-items:center; gap:14px; min-width:0; }
.katalog-produktkopf > div { min-width:0; flex:1; }
.katalog-produktkopf h3 { margin:0 0 4px; font-size:18px; overflow-wrap:anywhere; }
.katalog-produktkopf .klein { display:block; overflow-wrap:anywhere; }
.katalog-produktkopf > .symbol { flex-shrink:0; color:var(--gedaempft); }
.katalog-produkt .katalog-kategorie { margin:0; font-size:14px; color:var(--gedaempft); }
.katalog-status { margin-top:auto; font-size:13px; color:var(--gedaempft); display:flex; align-items:center; gap:8px; }
.katalog-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#86868b; flex-shrink:0; }
.katalog-status.belegt { color:#245a49; }
.katalog-status.belegt::before { background:#34735d; }
.katalog-blaettern { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin:32px 0 8px; }
.katalog-blaettern .pillen { align-items:center; }
.katalog-guide { display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-radius:12px; background:#eef5ff; padding:16px 20px; margin-bottom:20px; }
.katalog-guide .weiter { margin-left:auto; }
.katalog-leer { padding:40px 24px; background:var(--abgesetzt); border-radius:var(--radius); }
.katalog-leer h3 { margin-top:16px; }
.guide-themen { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 12px; }
.guide-entscheidungen .karten { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (prefers-reduced-motion:no-preference) {
  .katalog-lupe { animation:katalog-ankunft .8s ease-out both; }
  .katalog-produkt { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
  .katalog-produkt:hover { transform:translateY(-3px); box-shadow:0 12px 25px #243a5010; }
  @keyframes katalog-ankunft { from { opacity:0; transform:translate(18px,12px); } to { opacity:1; transform:translate(0,0); } }
}
@media (max-width:900px) {
  .katalog-produkte,.guide-entscheidungen .karten { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .katalog-kopf { gap:24px; }
  .katalog-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .katalog-query { grid-column:span 2; }
}
@media (max-width:600px) {
  .katalog-kopf { grid-template-columns:1fr; gap:12px; }
  .katalog-skizze { display:none; }
  .katalog-kopf .schnellwege { gap:0 20px; margin-top:18px; }
  .katalog-kopf .schnellwege .weiter { font-size:14px; }
  .katalog-filter { padding:16px; gap:14px 10px; }
  .katalog-filter label { font-size:13px; }
  .katalog-filter .knopf { grid-column:span 2; }
  .katalog-filter select { font-size:14px; }
  .katalog-produkte,.guide-entscheidungen .karten { grid-template-columns:1fr; }
  .katalog-produkt { padding:20px; gap:12px; }
  .katalog-blaettern { gap:12px; }
  .katalog-blaettern .pillen { order:-1; width:100%; justify-content:center; }
  .katalog-guide .weiter { margin-left:0; }
  .guide-themen .pille { font-size:13px; }
}

/* Kaufentscheidungen: konkrete Einstiege fuer offene Kaufaufgaben. */
.kaufentscheidung-band { background:#f5f8fc; }
.kaufentscheidung-band .blockkopf { align-items:flex-end; gap:24px; }
.kaufentscheidung-band .blockkopf h2 { max-width:690px; }
.kaufentscheidung-band .vorspann { margin-bottom:0; }
.kaufentscheidung-karte { display:flex; flex-direction:column; align-items:flex-start; padding:30px; border:1px solid #dce5ef; border-radius:18px; background:white; color:var(--tinte); text-decoration:none; }
.kaufentscheidung-karte:hover { border-color:#7da8d5; box-shadow:0 10px 28px #264e7a0c; }
.kaufentscheidung-karte:focus-visible { outline:3px solid var(--akzent); outline-offset:4px; }
.kaufentscheidung-symbol { display:grid; place-items:center; width:60px; height:60px; margin-bottom:28px; border-radius:16px; color:#375b82; background:#eef4fb; }
.kaufentscheidung-karte .kicker { font-size:11px; letter-spacing:.09em; }
.kaufentscheidung-karte h3 { font-size:25px; line-height:1.2; letter-spacing:-.025em; margin:4px 0 14px; }
.kaufentscheidung-karte > p:not(.kicker) { color:var(--gedaempft); line-height:1.65; margin:0 0 28px; }
.kaufentscheidung-karte .weiter { margin-top:auto; display:inline-flex; gap:10px; align-items:center; color:var(--aktion-text); }
.sicherheits-entscheidung { border-top:1px solid var(--linie); padding-top:36px; }
.sicherheits-entscheidung .karten { margin:24px 0; }
@media(max-width:900px) {
  .kaufentscheidung-karte { padding:24px; }
}
@media(max-width:700px) {
  .kaufentscheidung-band .blockkopf { align-items:flex-start; flex-direction:column; }
  .kaufentscheidung-band .karten,.sicherheits-entscheidung .karten { grid-template-columns:1fr; }
  .kaufentscheidung-symbol { margin-bottom:20px; }
}

.verzeichnis-produktmarke { display:flex; align-items:center; gap:10px; min-width:0; }
.verzeichnis-produktmarke .signet { flex:none; width:28px; height:28px; }
.verzeichnis-produktmarke span { min-width:0; overflow-wrap:anywhere; }

/* Abrechnungsvergleich: dieselben Zahlen als Text und ruhige Balken. */
.abrechnung-balken { display:block; width:100%; height:12px; margin-top:1rem; }
.abrechnung-tabelle { margin:1.5rem 0; }
.abrechnung-tabelle summary { cursor:pointer; font-weight:600; padding:.75rem 0; }
.abrechnung-auswahl { background:#edf7f0; }