:root{
  color-scheme:light;

  /* --- Flaechen und Text ------------------------------------------------ */
  --grund:#ffffff;
  --flaeche:#f5f5f7;
  --tinte:#1d1d1f;
  --gedaempft:#6e6e73;
  --linie:#e5e5e7;
  --linie-stark:#1d1d1f;

  /* --- Der eine Akzent -------------------------------------------------- */
  --akzent:#0066cc;
  --akzent-zart:#eaf3ff;
  --akzent-text:#ffffff;

  /* --- Datenzustaende ---------------------------------------------------
     --ja, --nein und --leer sind FUELLUNGEN (Segmente, Punkte, Balken) und
     halten gegen Weiss die 3:1, die WCAG fuer Grafik verlangt. Wo derselbe
     Zustand als WORT oder ZIFFER erscheint, gilt 4,5:1, und dafuer stehen die
     -text-Fassungen: #248a3d misst 4,39:1 und faellt als Text durch, #1e7a38
     misst 5,4:1 und ist vom Original nicht zu unterscheiden. #d70015 haelt
     5,4:1 und braucht keine zweite Fassung; #8e8e93 misst 3,3:1, deshalb
     traegt "not measured" als Wort das Grau des Sekundaertextes. */
  --ja:#248a3d;
  --ja-text:#1e7a38;
  --nein:#d70015;
  --nein-text:#d70015;
  --leer:#8e8e93;
  --leer-text:#6e6e73;

  /* --- Die sechs Baender. Sie bleiben, erscheinen aber nur im Etikett,
         im Band-Zeichen und in Diagrammen, nie als Flaeche einer Seite. --- */
  --a:#1a7f4b; --b:#4f8f1f; --c:#a67c00; --d:#c95f0d; --e:#c0392b; --f:#9b1c1c;
  --band-text:#ffffff;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --t1:13px; --t2:15px; --t3:17px; --t4:22px; --t5:32px; --t6:48px; --t7:64px;
  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:24px; --r6:32px; --r7:48px; --r8:64px; --r9:96px;
  --rund:12px;
  --rund-gross:20px;
  --rund-klein:6px;
  --schatten:0 8px 30px rgba(0,0,0,.04);
  --schatten-hoch:0 12px 36px rgba(0,0,0,.07);
  --mass:66ch;
  --kopfhoehe:58px;
}

/* Alles auf null, dann jede Zahl aus der Leiter. Die Vorgaben des Browsers
   (0.67em an h1, 40px an ol, 1px an td) staenden sonst neben der Leiter. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top BLEIBT, scroll-behavior:smooth IST WIEDER WEG.
   Das Polster ist noetig: Ohne es landet ein Anker unter der klebenden
   Kopfleiste. Das weiche Scrollen kostete mehr, als es brachte - es animiert
   JEDES programmatische Scrollen, auch das, das ein Browserwerkzeug vor einem
   Klick selbst ausloest. Playwright wartet dann darauf, dass das Element
   stillsteht, und laeuft in die Zeitgrenze; am 03.09.2026 hat das zwei
   verschiedene Befunde erzeugt, die beide nach einem Stilfehler aussahen und
   keiner waren. Die Bewegungsliste des Auftrags nennt es ohnehin nicht. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopfhoehe) + var(--r5))}
body{
  background:var(--grund);color:var(--tinte);
  font:400 var(--t3)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* --- Die Schriftleiter -------------------------------------------------
   Der Aufmacher der Startseite traegt 64 px, jede andere Seite 48. Auf EINER
   Seite ist es immer nur einer von beiden. Unter 640 px faellt jede Stufe um
   eine Stufe der Leiter, nie auf einen freien Wert. */
h1{font:700 var(--t6)/1.05 var(--sans);letter-spacing:-.022em;margin:0 0 var(--r4);text-wrap:balance;max-width:18ch}
h2{font:700 var(--t5)/1.15 var(--sans);letter-spacing:-.02em;margin:0 0 var(--r4);text-wrap:balance;max-width:22ch}
h3{font:600 var(--t4)/1.25 var(--sans);letter-spacing:-.01em;margin:0 0 var(--r2)}
@media(max-width:900px){h1{font-size:var(--t5)} h2{font-size:var(--t4)} h3{font-size:var(--t3)}}
p{margin:0 0 var(--r4);max-width:var(--mass)}
ul,ol{padding-left:var(--r5);margin:0 0 var(--r4);max-width:var(--mass)}
li{margin:0 0 var(--r2)}
strong,b{font-weight:600}
em{font-style:italic}
code,pre,kbd{font-family:inherit;font-size:inherit}
a{color:var(--akzent);text-underline-offset:.18em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--akzent);outline-offset:2px;border-radius:var(--rund-klein);
}
.rahmen{max-width:74rem;margin:0 auto;padding:0 var(--r6)}
@media(max-width:640px){.rahmen{padding:0 var(--r5)}}
/* Nur fuer Vorleseprogramme: der Name hinter einem Zeichen, die Zahl hinter
   einem Zaehler. Sie steht als echter Text im Markup, nicht nur in der CSS. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Kopfleiste --------------------------------------------------------
   58 PX, KLEBEND, DURCHSCHEINEND. Weiss mit 86 Prozent Deckkraft und einem
   Weichzeichner dahinter; die untere Linie ist ein Hauch und kein Strich. Auf
   breiten Schirmen: Signet, fuenf Punkte, der Knopf. Auf schmalen: Signet,
   Suchzeichen, "Menu" als <details>.

   DAS MENUE STEHT ZWEIMAL IM MARKUP, einmal als Leiste und einmal im
   Aufklapper. Ein geschlossenes <details> rendert seinen Inhalt nicht, und es
   laesst sich ohne Skript per CSS nicht aufhalten - eine Leiste, die auf dem
   Telefon in einen Aufklapper wandert, braucht deshalb zwei Formen. Sichtbar
   ist immer nur eine, die andere ist display:none und damit auch fuer
   Vorleseprogramme weg. Das Etikett und die Filter haben diese Doppelung am
   03.09.2026 verloren; hier bleibt sie, weil es dafuer keinen Weg ohne
   Skript gibt. */
.kopf{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.kopf .rahmen{display:flex;align-items:center;gap:var(--r5);min-height:var(--kopfhoehe)}
.wortmarke{
  display:inline-flex;align-items:center;gap:var(--r2);flex:none;
  min-width:44px;min-height:44px;margin-right:auto;
  font-size:var(--t2);font-weight:600;color:var(--tinte);text-decoration:none;letter-spacing:-.01em;
}
.signet{width:24px;height:24px;border-radius:var(--rund-klein);flex:none;background:var(--akzent);position:relative}
/* Das Signet ist ein aufgeschlagenes Register: eine Kante, die offen steht.
   Es ist das Thema der Seite in einer Form, nicht ein Buchstabe im Kasten. */
.signet::after{
  content:"";position:absolute;left:6px;top:5px;width:11px;height:14px;
  border-left:2px solid var(--grund);border-top:2px solid var(--grund);
  border-bottom:2px solid var(--grund);border-radius:2px 0 0 2px;
}
.kopfnav{display:flex;gap:var(--r5);align-items:center;position:relative}
/* min-width, weil ein kurzes Wort sonst unter 44 px liegt: "About" mass 43 px. */
.kopfnav a,.kopfnav summary{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:var(--tinte);text-decoration:none;font-size:var(--t2);white-space:nowrap}
.kopfnav a:hover,.kopfnav summary:hover{color:var(--akzent);text-decoration:none}
.kopfnav a[aria-current]{color:var(--akzent);font-weight:600}
/* Der eine Knopf der Leiste: dezent, gefuellt, blau. */
.kopfnav .kopfknopf{
  background:var(--akzent);color:var(--akzent-text);border-radius:999px;
  padding:0 var(--r4);font-weight:600;min-height:44px;
}
.kopfnav .kopfknopf:hover{color:var(--akzent-text);filter:brightness(1.1)}
.kopfnav .kopfknopf[aria-current]{color:var(--akzent-text)}
/* Der Aufklapper "Insights": ein details, kein Skript. */
.untermenue{position:relative;margin:0}
.untermenue summary{list-style:none;cursor:pointer;margin:0;gap:var(--r2)}
.untermenue summary::-webkit-details-marker{display:none}
.untermenue summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);flex:none}
.untermenue[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.untermenue[open] summary{color:var(--akzent)}
.untermenue-liste{
  position:absolute;right:0;top:100%;min-width:15rem;z-index:21;
  background:var(--grund);border:1px solid var(--linie);border-radius:var(--rund);
  padding:var(--r2) var(--r4);display:grid;box-shadow:var(--schatten-hoch);
  animation:aufklappen 120ms ease-out;
}
.untermenue-liste a{display:flex;align-items:center;min-height:44px;padding:0;border-bottom:1px solid var(--linie);white-space:nowrap}
.untermenue-liste a:last-child{border-bottom:0}
/* Die Suche im Kopf: auf der Startseite nur ein Zeichen, weil dort die grosse
   Suche im Aufmacher steht; auf jeder anderen Seite das volle Feld. */
.suche{display:flex;gap:var(--r2);flex:1 1 0%;min-width:0;max-width:20rem;margin:0}
.suche input{min-width:0;min-height:44px;font-size:var(--t2);border-radius:999px;background:var(--flaeche);border-color:transparent;padding:0 var(--r4)}
.suche button{flex:none;min-height:44px;padding:0 var(--r4);font-size:var(--t2);border-radius:999px}
.suchzeichen{
  display:inline-grid;place-items:center;position:relative;
  min-width:44px;min-height:44px;color:var(--tinte);text-decoration:none;
}
.suchzeichen::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-radius:50%;transform:translate(-2px,-2px)}
.suchzeichen::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:8px;background:currentColor;transform:translate(4px,2px) rotate(-45deg)}
.suchzeichen:hover{color:var(--akzent)}
/* Das Menue des Telefons: nur auf schmalen Schirmen da. */
.menue{display:none;margin:0}
@media(max-width:860px){
  .kopf .rahmen{gap:var(--r3)}
  .kopfnav{display:none}
  .suche{max-width:none}
  .menue{display:block;flex:none}
  .menue summary{
    list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--r2);
    min-height:44px;min-width:44px;padding:0 var(--r3);margin:0;font-size:var(--t2);font-weight:600;color:var(--tinte);
    border:1px solid var(--linie);border-radius:999px;
  }
  .menue summary::-webkit-details-marker{display:none}
  .menue summary:hover,.menue[open] summary{color:var(--akzent);border-color:var(--akzent);text-decoration:none}
  .menue-liste{
    position:absolute;left:0;right:0;top:100%;background:var(--grund);border-bottom:1px solid var(--linie);
    padding:var(--r2) var(--r5) var(--r5);display:grid;box-shadow:var(--schatten-hoch);
    animation:aufklappen 120ms ease-out;
  }
  .menue-liste a{display:flex;align-items:center;min-height:44px;font-size:var(--t3);color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie)}
  .menue-liste a:hover{color:var(--akzent)}
  .menue-liste a[aria-current]{color:var(--akzent);font-weight:600}
  .menue-rubrik{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);margin:var(--r4) 0 0;padding:var(--r2) 0 0;max-width:none}
}
@media(max-width:520px){
  .suche{max-width:none}
  .suche button{width:44px;padding:0;position:relative;display:inline-grid;place-items:center}
  .suche .suche-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .suche button::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-radius:50%;transform:translate(-2px,-2px)}
  .suche button::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:8px;background:currentColor;transform:translate(4px,2px) rotate(-45deg)}
  .wortmarke-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Der Sprungverweis fuer die Tastatur: unsichtbar, bis er den Fokus hat. Er
   hat sein volles Mass auch ausserhalb des Schirms, damit der Tippziel-Waechter
   ihn nicht als 1-px-Element meldet; angefahren wird er nur per Tastatur. */
.skip{
  position:absolute;left:var(--r4);top:-100px;z-index:30;display:inline-flex;align-items:center;
  min-height:44px;padding:0 var(--r4);background:var(--akzent);color:var(--akzent-text);
  border-radius:999px;font-weight:600;font-size:var(--t2);text-decoration:none;
}
.skip:focus{top:var(--r2)}

/* --- Der Wegweiser ------------------------------------------------------ */
.brotkrumen{margin:var(--r5) 0 0}
.brotkrumen ol{list-style:none;padding:0;margin:0;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--r2);font-size:var(--t2);color:var(--gedaempft)}
.brotkrumen li{margin:0;display:inline-flex;align-items:center;gap:var(--r2);min-height:44px}
.brotkrumen li+li::before{content:"/";color:var(--linie)}
.brotkrumen a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--gedaempft);text-decoration:none}
.brotkrumen a:hover{color:var(--akzent);text-decoration:underline}
.brotkrumen li[aria-current]{color:var(--tinte);font-weight:600}

/* --- Seitenkopf und Abschnitte -----------------------------------------
   Kein Kasten, keine Linie. Der Abstand macht den Abschnitt. */
.seitenkopf{padding:var(--r8) 0 0}
@media(max-width:640px){.seitenkopf{padding-top:var(--r6)}}
.rubrik{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);margin:0 0 var(--r3);max-width:none}
.rubrik a{color:inherit}
.fuehrung{font-size:var(--t4);line-height:1.45;color:var(--gedaempft);max-width:38ch;margin:0 0 var(--r5)}
@media(max-width:640px){.fuehrung{font-size:var(--t3)}}
.stand{margin:0 0 var(--r4);color:var(--gedaempft);font-size:var(--t2)}
.stand b{color:var(--tinte);font-variant-numeric:tabular-nums}
.quelle{font-size:var(--t2);color:var(--gedaempft);overflow-wrap:anywhere}
.quelle a{color:var(--akzent)}
.abschnitt{padding:var(--r9) 0 0}
@media(max-width:640px){.abschnitt{padding-top:var(--r8)}}
.abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--r3) var(--r5);margin:0 0 var(--r5)}
.abschnitt-kopf h2{margin:0}
.abschnitt-kopf .weiter{font-size:var(--t2);white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
/* Ein Hinweis ist eine ruhige Flaeche mit Text, kein Rahmen. */
.hinweis{background:var(--flaeche);border-radius:var(--rund);padding:var(--r5);margin:var(--r5) 0}
.hinweis p{margin:0;max-width:var(--mass)}
.hinweis p+p{margin-top:var(--r3)}
.liste{padding-left:var(--r5)}

/* --- Karten -------------------------------------------------------------
   NUR FUER GEGENSTAENDE: Anbieter, Kategorie, Vergleich, Kennzahl, Ergebnis.
   Nicht fuer Absaetze, nicht fuer Hinweise, nicht fuer Listen. */
.karte{
  background:var(--grund);border:1px solid var(--linie);border-radius:var(--rund-gross);
  padding:var(--r5);color:inherit;display:block;box-shadow:var(--schatten);
}
a.karte,.karte a.karte{text-decoration:none}
a.karte:hover,li:hover>a.karte{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.karte p{max-width:none}
.karten{list-style:none;padding:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--r5)}
.karten li{margin:0}
@media(max-width:640px){.karten{grid-template-columns:1fr;gap:var(--r4)}}

/* --- Knoepfe ------------------------------------------------------------ */
.knopfreihe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3) var(--r5);margin:0 0 var(--r5);max-width:none}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--r5);
  background:var(--akzent);color:var(--akzent-text);border:1px solid var(--akzent);border-radius:999px;
  font-weight:600;font-size:var(--t3);text-decoration:none;
}
.knopf:hover{filter:brightness(1.1)}
.knopf.leer{background:transparent;color:var(--akzent);border-color:var(--linie)}
.knopf.leer:hover{filter:none;background:var(--flaeche)}
/* Ein Verweis, der wie ein Verweis aussehen soll und trotzdem ein Tippziel ist. */
.textknopf{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--t3);font-weight:600}
/* Ein Verweis, der allein eine Handlung ist (Korrektur melden, zurueck). */
.handlung{display:inline-flex;align-items:center;min-height:44px;min-width:44px}

/* --- Formulare ----------------------------------------------------------
   17 px im Feld sind kein Geschmack: Unter 16 px zoomt iOS beim Antippen in
   die Seite hinein. */
form{max-width:34rem;margin:0 0 var(--r5)}
label{display:block;font-weight:600;font-size:var(--t2);margin:0 0 var(--r2)}
input,select{
  width:100%;min-height:48px;padding:0 var(--r4);font:inherit;font-size:var(--t3);
  color:var(--tinte);background:var(--grund);
  border:1px solid var(--linie);border-radius:var(--rund);
}
input:focus-visible,select:focus-visible{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
input::placeholder{color:var(--gedaempft)}
button{
  min-height:48px;padding:0 var(--r5);font:inherit;font-weight:600;font-size:var(--t3);
  color:var(--akzent-text);background:var(--akzent);border:0;border-radius:999px;cursor:pointer;
}
button:hover{filter:brightness(1.1)}
pre{background:var(--flaeche);border-radius:var(--rund);padding:var(--r4);overflow-x:auto;font-size:var(--t2);margin:0 0 var(--r4);max-width:var(--mass)}

/* --- Fuss --------------------------------------------------------------- */
.fuss{border-top:1px solid var(--linie);margin-top:var(--r9);padding:var(--r8) 0;color:var(--gedaempft);font-size:var(--t2)}
@media(max-width:640px){.fuss{margin-top:var(--r8);padding:var(--r6) 0}}
.fuss p{margin:0 0 var(--r3);max-width:56ch}
.fuss nav{display:flex;flex-wrap:wrap;gap:0 var(--r5);margin-top:var(--r4)}
.fuss nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--gedaempft);text-decoration:none}
.fuss nav a:hover{color:var(--akzent);text-decoration:underline}

/* --- Der Transparenzwert, ueberall gleich (darstellung/wert.js) -----------
     "Transparency 91/100 [A]": das Wort, die Zahl, das Band als Zeichen. */
.wert{display:inline-flex;align-items:center;gap:var(--r2);flex-wrap:wrap}
.wert-was{font-size:var(--t1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft)}
.wert-punkte{font-size:var(--t4);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.wert-von{font-size:var(--t1);color:var(--gedaempft)}
.wert-band{display:inline-grid;place-items:center;width:28px;height:28px;font-size:var(--t2);font-weight:700;color:var(--band-text);border-radius:var(--rund-klein)}
.wert-band.klein{width:22px;height:22px;font-size:var(--t1)}
.wert-keine{font-size:var(--t1);color:var(--gedaempft)}
.zaehler{display:inline-flex;flex-wrap:wrap;gap:0 var(--r3);font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums}
.zaehler b{color:var(--tinte)}
.zaehler-ja b{color:var(--ja-text)}
.zaehler-nein b{color:var(--nein-text)}
.zaehler-leer b{color:var(--leer-text)}
.ohnedaten{color:var(--gedaempft);font-size:var(--t1)}

/* --- Der Signalstreifen -------------------------------------------------
   ZWOELF ZUSTAENDE ALS EIN GEGENSTAND und nicht als zwoelf Kaestchen. Bis zum
   03.09.2026 standen zwoelf einzelne Kacheln mit Abstand nebeneinander; sie
   lasen sich als zwoelf Dinge und nicht als eine Messung. Jetzt ist es ein
   Streifen mit runden Enden, dessen Segmente durch eine Fuge von 1 px
   getrennt sind. Die Fuge ist ein Rahmen und kein gap: gap kaeme aus der
   Weissraumleiter, und 1 px steht dort nicht - richtigerweise, denn es ist
   eine Trennung innerhalb eines Gegenstands.

   DIE BEWEGUNG ENTHUELLT NUR. Jedes Segment steht im Markup mit seinem
   Versatz (--i); ohne Animation ist es sofort da. */
.signalstreifen{
  display:flex;list-style:none;padding:0;margin:0;max-width:none;
  border-radius:999px;overflow:hidden;background:var(--linie);height:14px;
}
.signalstreifen .p{
  flex:1 1 0%;margin:0;min-width:6px;border-right:1px solid var(--grund);
  animation:erscheinen 25ms ease-out backwards;animation-delay:calc(var(--i) * 25ms);
}
.signalstreifen .p:last-child{border-right:0}
.signalstreifen .ja{background:var(--ja)}
.signalstreifen .nein{background:var(--nein)}
.signalstreifen .leer{background:var(--leer)}
.signalstreifen.gross{height:20px}
/* Die Legende darunter: drei Farben, drei Woerter, nie Farbe allein. */
.legende{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--r5);font-size:var(--t1);color:var(--gedaempft);margin:0 0 var(--r4);max-width:none}
.legende li{margin:0;display:inline-flex;align-items:center;gap:var(--r2)}
.legende i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.legende-ja i{background:var(--ja)}
.legende-nein i{background:var(--nein)}
.legende-leer i{background:var(--leer)}
/* Der Satz unter der Legende ist ein Satz und kein Listeneintrag mit
   Zeichen: als flex bekaeme der Verweis darin die Luecke der Liste. */
.legende-satz{flex-basis:100%;margin-top:var(--r2);display:block}

/* --- Die Zustandsleiste: gefunden, nicht gefunden, nicht gemessen --------
   Ein Balken aus drei Teilen, jede Breite im Markup, jede Zahl daneben. */
.zustandsleiste{margin:0 0 var(--r5);max-width:34rem}
.zl-balken{display:flex;height:20px;border-radius:999px;overflow:hidden;background:var(--linie)}
.zl-balken i{display:block;width:var(--w);border-right:1px solid var(--grund)}
.zl-balken i:last-child{border-right:0}
.zl-ja{background:var(--ja)}
.zl-nein{background:var(--nein)}
.zl-leer{background:var(--leer)}
.zl-woerter{display:flex;flex-wrap:wrap;gap:0 var(--r5);margin:var(--r3) 0 0;max-width:none;list-style:none;padding:0;font-size:var(--t2);color:var(--gedaempft)}
.zl-woerter li{margin:0;display:inline-flex;align-items:center;gap:var(--r2)}
.zl-woerter i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.zl-woerter b{color:var(--tinte);font-variant-numeric:tabular-nums}

/* --- Der hochzaehlende Wert --------------------------------------------
   DER ENDZUSTAND STEHT IM MARKUP, zweimal sogar: als --ziel am Element und
   als echter Text im .sr-Kind, das jedes Vorleseprogramm und jeder Crawler
   liest. Sichtbar wird er ueber counter(), damit die Zahl von 0 hochlaufen
   kann; das geht ohne eine Zeile JavaScript, weil @property den
   Eigenschaftswert als Ganzzahl registriert und damit animierbar macht.
   Ohne @property (aeltere Browser) steht sofort die Endzahl da - der
   Anfangswert kommt nur aus dem Keyframe. */
.hochzaehlen{--n:var(--ziel);counter-reset:punkte var(--n);font-variant-numeric:tabular-nums}
.hochzaehlen::after{content:counter(punkte)}
@media (prefers-reduced-motion:no-preference){
  .hochzaehlen{animation:hochzaehlen 700ms cubic-bezier(.2,.8,.2,1)}
}

/* --- Die Startseite: der Aufschlag ---------------------------------------
   ZWEISPALTIG: links die Aussage und die Handlung, rechts EIN Gegenstand.
   Keine weitere Illustration, kein Kasten mehr. */
.aufschlag{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--r8) var(--r9);align-items:center;
  padding:var(--r9) 0;
}
@media(max-width:1024px){.aufschlag{grid-template-columns:1fr;gap:var(--r8);padding:var(--r8) 0}}
@media(max-width:640px){.aufschlag{padding:var(--r6) 0 var(--r8);gap:var(--r6)}}
.aufschlag h1{font-size:var(--t7);letter-spacing:-.03em;line-height:1.03;max-width:15ch;margin:0 0 var(--r5)}
@media(max-width:1024px){.aufschlag h1{font-size:var(--t6)}}
@media(max-width:640px){.aufschlag h1{font-size:var(--t5)}}
.unterzeile{font-size:var(--t4);line-height:1.4;margin:0 0 var(--r6);max-width:34ch;color:var(--gedaempft)}
.unterzeile b{font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}
@media(max-width:640px){.unterzeile{font-size:var(--t3);margin-bottom:var(--r5)}}
.grosse-suche{display:flex;gap:var(--r3);max-width:32rem;margin:0 0 var(--r5)}
.grosse-suche input{min-width:0;min-height:56px;font-size:var(--t3);border-radius:999px;padding:0 var(--r5);background:var(--flaeche);border-color:transparent}
.grosse-suche input:hover:not(:focus-visible){border-color:var(--linie)}
.grosse-suche button{flex:none;min-height:56px;padding:0 var(--r5)}
@media(max-width:640px){.grosse-suche input,.grosse-suche button{min-height:48px}}
.vertrauen{display:flex;flex-wrap:wrap;gap:0 var(--r5);margin:0;max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.vertrauen span{display:inline-flex;align-items:center;gap:var(--r2)}
.vertrauen span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--leer);flex:none}

/* Die Schaukarte: EIN echter Anbieter, der am Median. Kein Spitzenreiter,
   denn ein Spitzenreiter auf der Startseite saehe aus wie eine Empfehlung. */
.schaufeld{background:var(--flaeche);border-radius:var(--rund-gross);padding:var(--r6)}
@media(max-width:640px){.schaufeld{padding:var(--r5)}}
.schaukarte{padding:var(--r5)}
.sk-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--r3);margin:0 0 var(--r4)}
.sk-name{font-size:var(--t4);font-weight:600;letter-spacing:-.01em}
.sk-domain{font-size:var(--t1);color:var(--gedaempft)}
.sk-wert{display:flex;align-items:baseline;gap:var(--r2);margin:0 0 var(--r2)}
.sk-punkte{font-size:var(--t6);font-weight:700;line-height:1;letter-spacing:-.03em}
.sk-von{font-size:var(--t3);color:var(--gedaempft)}
.sk-band{margin-left:auto;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--rund-klein);color:var(--band-text);font-weight:700;font-size:var(--t4);align-self:center}
.sk-rang{font-size:var(--t2);color:var(--gedaempft);margin:0 0 var(--r4)}
/* Die Bandleiter mit der Markierung, die an ihren Platz faehrt. */
.sk-leiter{margin:0 0 var(--r4)}
.sk-stufen{display:flex;list-style:none;padding:0;margin:0;max-width:none;height:8px;border-radius:999px;overflow:hidden}
.sk-stufen li{flex:1 1 0%;margin:0;border-right:1px solid var(--grund)}
.sk-stufen li:last-child{border-right:0}
.sk-marke{position:relative;height:20px;margin:var(--r1) 0 0}
.sk-marke span{
  position:absolute;top:0;left:var(--x);transform:translateX(-50%);
  font-size:var(--t1);font-weight:700;color:var(--tinte);white-space:nowrap;
  animation:faehrt 600ms cubic-bezier(.2,.8,.2,1);
}
.sk-marke span::before{content:"";position:absolute;left:50%;top:-6px;width:0;height:0;border:4px solid transparent;border-bottom-color:var(--tinte);transform:translateX(-50%)}
.sk-fuss{font-size:var(--t1);color:var(--gedaempft);margin:var(--r4) 0 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--r3)}
.schau-satz{font-size:var(--t2);color:var(--gedaempft);margin:var(--r4) 0 0;max-width:none}
.schau-satz a{color:var(--akzent)}

/* --- Das Marktband: vier Zahlen auf heller Flaeche, ueber die volle Breite
   Der Ausbruch aus dem Rahmen laeuft ueber clip-path und einen Schatten,
   nicht ueber 100vw: 100vw zaehlt die Bildlaufleiste mit und erzeugt genau
   das waagerechte Scrollen, das der Waechter auf drei Breiten misst. */
.marktband{
  background:var(--flaeche);margin:var(--r9) 0 0;padding:var(--r8) 0;
  clip-path:inset(0 -100vmax);box-shadow:0 0 0 100vmax var(--flaeche);
}
@media(max-width:640px){.marktband{margin-top:var(--r8);padding:var(--r6) 0}}
.marktzahlen{
  list-style:none;padding:0;margin:0 0 var(--r8);max-width:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--r5);
}
@media(max-width:860px){.marktzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.marktzahlen li{margin:0}
.mz-wert{font-size:var(--t6);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@media(max-width:640px){.mz-wert{font-size:var(--t5)}}
.mz-einheit{font-size:var(--t4);font-weight:600;color:var(--gedaempft)}
.mz-wort{display:block;font-size:var(--t2);color:var(--gedaempft);margin-top:var(--r2)}
.marktband .bandverteilung{margin:0;max-width:44rem}
.marktband .bv-balken{background:var(--grund)}

/* --- Die Kategoriekarten der Startseite ---------------------------------- */
.katkarte{display:grid;gap:var(--r3);height:100%}
/* min-height fuer zwei Zeilen Titel: sonst stehen 'Median' und der Balken
   in einer Reihe Karten auf verschiedenen Hoehen. */
.katkarte .kk-kopf{display:flex;align-items:center;gap:var(--r3);margin:0;min-height:56px}
.kk-zeichen{
  display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:var(--rund);background:var(--akzent-zart);color:var(--akzent);
}
.kk-zeichen svg{width:22px;height:22px;display:block}
.kk-name{font-size:var(--t4);font-weight:600;letter-spacing:-.01em;color:var(--tinte)}
.kk-zahl{font-size:var(--t2);color:var(--gedaempft);margin:0}
.kk-median{display:flex;align-items:baseline;gap:var(--r2);margin:0;font-size:var(--t2);color:var(--gedaempft)}
.kk-median b{font-size:var(--t4);font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums;line-height:1}
.kk-lage{font-size:var(--t2);color:var(--gedaempft);margin:0}
/* Die Verteilung als kleines Balkendiagramm. Die Linie darunter ist die
   Grundlinie: ohne sie schweben sechs Bloecke ohne Bezug. */
.kk-verteilung{display:flex;align-items:flex-end;gap:var(--r1);height:32px;margin:0;list-style:none;padding:0;max-width:none;border-bottom:1px solid var(--linie)}
.kk-verteilung li{flex:1 1 0%;margin:0;height:var(--h);min-height:3px;border-radius:2px 2px 0 0}
.kk-pfeil{margin-top:auto;display:inline-flex;align-items:center;gap:var(--r2);min-height:44px;font-size:var(--t2);font-weight:600;color:var(--akzent)}
/* AUF DEM TELEFON KOMPAKT. Gemessen am 03.09.2026 bei 390 px: sechs Karten in
   der Fassung der breiten Schirme kosteten 2011 px. Zahl, Median und
   Einordnung stehen dort in EINER Zeile, das Diagramm ist flacher, und der
   Pfeil traegt den Namen der Kategorie statt einer eigenen Zeile. */
@media(max-width:640px){
  /* flex statt grid: Grid macht aus jedem Kind einen Block, und dann steht
     jede Angabe auf einer eigenen Zeile. */
  .katkarte{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2) var(--r4)}
  .katkarte .kk-kopf{flex-basis:100%;min-height:0}
  .kk-zeichen{width:32px;height:32px}
  .kk-zeichen svg{width:18px;height:18px}
  .kk-name{font-size:var(--t3)}
  .kk-median b{font-size:var(--t3)}
  .kk-verteilung{flex-basis:100%;height:20px}
  .kk-pfeil{flex-basis:100%;margin-top:0}
  .karten .karte{padding:var(--r4)}
  .katliste a{min-height:48px}
  .familie summary{min-height:52px}
}
.kk-pfeil::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex:none}
a.karte:hover .kk-pfeil{text-decoration:underline}

/* --- Wie es funktioniert: drei Schritte, gross und schlicht --------------- */
.schritte{list-style:none;padding:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r8)}
@media(max-width:860px){.schritte{grid-template-columns:1fr;gap:var(--r6)}}
.schritte li{margin:0}
.schritt-zahl{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;
  background:var(--tinte);color:var(--grund);font-size:var(--t1);font-weight:700;margin-bottom:var(--r4);
}
.schritte h3{margin:0 0 var(--r2)}
.schritte p{margin:0;color:var(--gedaempft);max-width:30ch}

/* --- Die Kategorien der Startseite --------------------------------------- */
/* AUF DEM TELEFON WEG. Zehn Chips wickeln sich dort auf fuenf Zeilen (rund
   260 px gemessen bei 390 px) und springen auf Ueberschriften, die 300 px
   weiter unten ohnehin sichtbar sind. Auf einem breiten Schirm sind sie eine
   Abkuerzung, auf einem schmalen eine Wiederholung. */
.familienchips{list-style:none;padding:0;margin:0 0 var(--r6);max-width:none;display:flex;flex-wrap:wrap;gap:var(--r2)}
@media(max-width:640px){.familienchips{display:none}}
.familienchips li{margin:0}
.familienchips a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--r4);
  border-radius:999px;background:var(--flaeche);color:var(--tinte);
  text-decoration:none;font-size:var(--t2);font-weight:600;
}
.familienchips a:hover{background:var(--akzent-zart);color:var(--akzent)}
.katliste{list-style:none;padding:0;margin:0 0 var(--r6);max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:0 var(--r6)}
.katliste li{margin:0;border-bottom:1px solid var(--linie)}
.katliste a{display:flex;align-items:center;justify-content:space-between;gap:var(--r3);min-height:52px;color:var(--tinte);text-decoration:none;font-size:var(--t3)}
.katliste a:hover{color:var(--akzent)}
.katliste span{color:var(--gedaempft);font-size:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.familie{border-bottom:1px solid var(--linie);margin:0}
.familie:first-of-type{border-top:1px solid var(--linie)}
.familie summary{display:flex;align-items:center;gap:var(--r3);padding:0;margin:0;min-height:56px;font-size:var(--t3);font-weight:600;color:var(--tinte);cursor:pointer;list-style:none}
.familie summary::-webkit-details-marker{display:none}
.familie summary span{font-size:var(--t1);font-weight:400;color:var(--gedaempft)}
/* Das Dreieck faellt mit display:flex weg; ein eigenes Zeichen bringt es zurueck. */
.familie summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--gedaempft);border-bottom:2px solid var(--gedaempft);transform:rotate(45deg);flex:none}
.familie[open] summary::after{transform:rotate(-135deg)}
.familie .inhalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 var(--r6);padding:0 0 var(--r4);animation:aufklappen 120ms ease-out}
.familie .inhalt a{display:flex;align-items:center;justify-content:space-between;gap:var(--r2);min-height:44px;color:var(--tinte);text-decoration:none;font-size:var(--t2)}
.familie .inhalt a:hover{color:var(--akzent)}
.familie .inhalt a span{color:var(--gedaempft);font-size:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Die Laufkarte: eine kompakte Statuszeile, kein Abschnitt ------------- */
.laufkarte{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3) var(--r5);margin:var(--r9) 0 0}
@media(max-width:640px){.laufkarte{margin-top:var(--r8)}}
.laufkarte p{margin:0;font-size:var(--t2);color:var(--gedaempft)}
.laufkarte b{color:var(--tinte);font-variant-numeric:tabular-nums}
.laufkarte .puls{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ja);margin-right:var(--r2)}
.laufkarte .weiter{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t2);font-weight:600}

/* --- Datengrafiken (darstellung/grafik.js) --------------------------------
   Jede Breite steht im Markup (--w). Die Balken laufen einmal ein und sind
   bei 1 die Identitaet; ohne Bewegung stehen sie sofort. */
.bandverteilung{margin:0 0 var(--r4);max-width:36rem}
.bv{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:var(--r2)}
.bv-zeile{display:grid;grid-template-columns:22px minmax(0,1fr) 6rem;align-items:center;gap:var(--r3);margin:0;min-height:24px}
.bv-zeile.hier .bv-zahl b{color:var(--akzent)}
.bv-note{display:grid;place-items:center;width:22px;height:22px;font-size:var(--t1);font-weight:700;color:var(--band-text);border-radius:var(--rund-klein)}
.bv-balken{display:block;height:12px;background:var(--flaeche);border-radius:999px;overflow:hidden}
.bv-balken i{display:block;height:100%;width:var(--w);border-radius:999px;transform-origin:left center;animation:einlaufen 400ms ease-out}
.bv-zahl{font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums;white-space:nowrap}
.bv-zahl b{color:var(--tinte);font-size:var(--t2)}
.bandverteilung figcaption,.medianvergleich figcaption{font-size:var(--t1);color:var(--gedaempft);margin-top:var(--r3);max-width:var(--mass)}
.anteil{display:inline-flex;align-items:center;gap:var(--r2);font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums}
.anteil b{color:var(--tinte)}
.anteil-balken{display:inline-block;width:64px;height:6px;background:var(--linie);border-radius:999px;overflow:hidden;flex:none}
.anteil-balken i{display:block;height:100%;width:var(--w);background:var(--tinte);transform-origin:left center;animation:einlaufen 400ms ease-out}
.medianvergleich{margin:0;max-width:36rem}
.mv{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:var(--r2)}
.mv-zeile{display:grid;grid-template-columns:minmax(6rem,11rem) minmax(0,1fr) 2.5rem;align-items:center;gap:var(--r3);margin:0;min-height:24px;font-size:var(--t1);color:var(--gedaempft)}
.mv-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-zeile.hier .mv-name,.mv-zeile.hier .mv-wert{color:var(--tinte);font-weight:600}
.mv-balken{display:block;height:10px;background:var(--flaeche);border-radius:999px;overflow:hidden}
.mv-balken i{display:block;height:100%;width:var(--w);background:var(--leer);border-radius:999px;transform-origin:left center;animation:einlaufen 400ms ease-out}
.mv-zeile.hier .mv-balken i{background:var(--akzent)}
.mv-wert{font-variant-numeric:tabular-nums;text-align:right;font-size:var(--t2)}
.gewicht-staebe{display:inline-flex;align-items:center;gap:var(--r1);vertical-align:middle}
.gewicht-staebe i{display:block;width:5px;height:12px;border-radius:1px;background:var(--tinte)}
.gewicht-staebe i.aus{background:var(--linie)}
.gewicht-wort{font-size:var(--t1);color:var(--gedaempft);margin-left:var(--r1)}
.gewicht{margin-left:auto;font-size:var(--t1);color:var(--gedaempft);white-space:nowrap}

/* --- Die Kategorieseite --------------------------------------------------
   KOPF AUF WEISS: links Name, Zahl und Datum, rechts EINE Visualisierung.
   Darunter Filterchips in einer Zeile und die Zeilen der Anbieter. Die
   dauerhaft sichtbare Filterwand der breiten Schirme ist am 03.09.2026
   entfallen; sie stand als zweite Ausgabe desselben Formulars im Markup und
   war auf dem Telefon display:none. Jetzt gibt es EIN Formular, in einem
   Aufklapper, auf jeder Breite dasselbe. */
.kategoriekopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:var(--r6) var(--r8);align-items:start;padding:var(--r7) 0 0}
@media(max-width:980px){.kategoriekopf{grid-template-columns:1fr;padding-top:var(--r6)}}
.kategoriekopf h1{margin:0 0 var(--r3)}
.kk-lauf{font-size:var(--t2);color:var(--gedaempft);margin:0 0 var(--r5);max-width:none}
.kk-lauf b{color:var(--tinte);font-variant-numeric:tabular-nums}
.marktlage{background:var(--flaeche);border-radius:var(--rund-gross);padding:var(--r5)}
.marktlage .medianvergleich{max-width:none}
.ml-abstand{display:flex;align-items:baseline;gap:var(--r2);margin:0 0 var(--r4)}
.ml-abstand b{font-size:var(--t5);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ml-abstand span{font-size:var(--t2);color:var(--gedaempft)}
.marktlage .bandverteilung{margin:var(--r5) 0 0;max-width:none}
.marktlage .bv-balken{background:var(--grund)}

/* Filterchips: helle Pillen in einer Zeile, jede ein Verweis. Ein gesetzter
   Filter ist gefuellt und traegt das Zeichen zum Entfernen. */
.filterzeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2);margin:var(--r6) 0 var(--r5);max-width:none;list-style:none;padding:0}
.filterzeile li{margin:0}
.filterzeile a{
  display:inline-flex;align-items:center;gap:var(--r2);min-height:44px;padding:0 var(--r4);
  border-radius:999px;background:var(--flaeche);color:var(--tinte);text-decoration:none;font-size:var(--t2);
}
.filterzeile a:hover{background:var(--akzent-zart);color:var(--akzent)}
.filterzeile a.an{background:var(--akzent);color:var(--akzent-text)}
.filterzeile a.an:hover{filter:brightness(1.1);background:var(--akzent);color:var(--akzent-text)}
.filterzeile .n{font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums}
.filterzeile a.an .n{color:var(--akzent-text)}
.filterzeile .alle a{background:transparent;color:var(--akzent)}
/* Das Feld mit allen Filtern: ein Aufklapper, der weich einschiebt. */
.filterfeld{margin:0}
.filterfeld>summary{
  display:inline-flex;align-items:center;gap:var(--r2);min-height:44px;padding:0 var(--r4);margin:0;
  border:1px solid var(--linie);border-radius:999px;font-size:var(--t2);font-weight:600;
  color:var(--tinte);cursor:pointer;list-style:none;
}
.filterfeld>summary::-webkit-details-marker{display:none}
.filterfeld>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--gedaempft);border-bottom:2px solid var(--gedaempft);transform:rotate(45deg);flex:none}
.filterfeld[open]>summary{border-color:var(--akzent);color:var(--akzent)}
.filterfeld>summary:hover{background:var(--flaeche)}
.filterfeld[open]>summary::after{transform:rotate(-135deg)}
.schiene{margin:var(--r4) 0 0;max-width:none;background:var(--flaeche);border-radius:var(--rund-gross);padding:var(--r5);animation:einschieben 120ms ease-out}
.schiene fieldset{border:0;margin:0 0 var(--r5);padding:0}
.schiene fieldset:last-of-type{margin-bottom:0}
.schiene legend{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);padding:0 0 var(--r2)}
.schiene .felder{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:0 var(--r5)}
.kaestchen{display:flex;align-items:center;gap:var(--r3);margin:0;max-width:none}
.kaestchen input{width:22px;height:22px;min-height:0;padding:0;margin:0;accent-color:var(--akzent);flex:none}
.kaestchen label{flex:1;display:flex;justify-content:space-between;gap:var(--r2);align-items:center;min-height:44px;margin:0;font-weight:400;font-size:var(--t2);cursor:pointer}
.kaestchen .n{color:var(--gedaempft);font-variant-numeric:tabular-nums}
.kaestchen.aus label{color:var(--gedaempft)}
.kaestchen.aus label:hover{color:var(--gedaempft)}
.kaestchen.aus input{cursor:default}
.kaestchen-hinweis{font-size:var(--t1);color:var(--gedaempft);margin:var(--r2) 0 0}
.knopfzeile{display:flex;align-items:center;flex-wrap:wrap;gap:var(--r4);margin:var(--r5) 0 0;max-width:none}
.knopfzeile a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t2)}
.listenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r2) var(--r5);flex-wrap:wrap;margin:0 0 var(--r4)}
.listenkopf h2{margin:0;font-size:var(--t4)}
.sortierung{display:flex;flex-wrap:wrap;gap:0 var(--r4);align-items:baseline;margin:0;max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.sortierung a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.sortierung a[aria-current]{color:var(--tinte);font-weight:600;text-decoration:none}

/* --- Die Anbieterzeile ---------------------------------------------------
   MEHR LUFT, WENIGER TEXT. "Why this rank?" ist am 03.09.2026 aus der Liste
   verschwunden: Es stand je Anbieter mit allen zwoelf Kriteriennamen im
   Markup, dreimal (gefunden, nicht gefunden, nicht gemessen), und die genaue
   Rechnung gehoert auf das Profil. */
.zeilen{list-style:none;padding:0;margin:0;max-width:none;border-top:1px solid var(--linie)}
.zeile{
  display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;
  grid-template-areas:"platz wer wert" "platz signal signal" "platz fuss fuss";
  gap:var(--r2) var(--r5);align-items:center;padding:var(--r5) 0;border-bottom:1px solid var(--linie);margin:0;
}
.zeile:hover{background:var(--flaeche)}
.z-platz{grid-area:platz;align-self:start;font-size:var(--t4);font-weight:600;color:var(--gedaempft);text-align:right;font-variant-numeric:tabular-nums;line-height:1.4}
.z-wer{grid-area:wer;min-width:0}
.z-name{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--t4);font-weight:600;letter-spacing:-.01em;color:var(--tinte);text-decoration:none}
.z-name:hover{color:var(--akzent);text-decoration:underline}
.z-heimat{display:block;font-size:var(--t1);color:var(--gedaempft)}
.z-wert{grid-area:wert;display:flex;align-items:center;gap:var(--r3);justify-self:end}
.z-wert .wert-keine{text-align:right;max-width:12rem}
.z-signal{grid-area:signal;max-width:26rem}
.z-fuss{grid-area:fuss;display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r5);margin:0;max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.z-luecke{font-size:var(--t2);color:var(--gedaempft)}
.z-luecke-wort{color:var(--nein-text);font-weight:600}
.z-luecke.keine{color:var(--ja-text)}
.z-luecke.leer{color:var(--leer-text)}
.z-vergleich{display:inline-flex;align-items:center;gap:var(--r2);margin-left:auto}
.z-vergleich input{width:20px;height:20px;min-height:0;padding:0;margin:0;accent-color:var(--akzent);flex:none}
.z-vergleich label{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:0;font-weight:400;font-size:var(--t2);color:var(--akzent);cursor:pointer}
.z-vergleich label:hover{text-decoration:underline}
.z-vergleich input:disabled+label{color:var(--gedaempft);cursor:default;text-decoration:none}
@media(max-width:640px){
  .zeile{grid-template-columns:1.75rem minmax(0,1fr) auto;gap:var(--r2) var(--r3);padding:var(--r4) 0}
  .z-platz{font-size:var(--t3)}
  .z-name{font-size:var(--t3)}
  .z-wert{gap:var(--r2)}
  .z-wert .wert-was{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .z-wert .wert-punkte{font-size:var(--t3)}
  .z-wert .wert-keine{max-width:9rem}
  .z-signal{max-width:none}
}
/* Die Leiste der freien Auswahl: faehrt von unten ein, wenn sie unten steht. */
.vergleichsleiste{display:flex;align-items:center;flex-wrap:wrap;gap:var(--r3);margin:0 0 var(--r5);max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.vergleichsleiste.unten{margin:var(--r5) 0 0;animation:einfahren 240ms ease-out}
.vergleichsleiste button{background:transparent;color:var(--tinte);border:1px solid var(--linie)}
.vergleichsleiste button:hover{filter:none;background:var(--flaeche)}
.vergleichswahl{margin:0 0 var(--r4)}
.vergleichswahl-zeile{display:flex;gap:var(--r3);align-items:center}
.vergleichswahl-zeile select{flex:1 1 0%;min-width:0}
.vergleichswahl-zeile button{flex:none}

/* --- Das Anbieterprofil --------------------------------------------------
   WIE EIN PRODUKT-DASHBOARD: oben das Monogramm, der Name, die Herkunft und
   die Zahl; darunter die Zustandsleiste, dann drei Saetze, dann die
   Abschnitte. Die vollen Quellenlisten stehen erst unter "Evidence". */
.profilkopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r5);padding:var(--r7) 0 0}
@media(max-width:640px){.profilkopf{padding-top:var(--r6);gap:var(--r4)}}
.monogramm{
  display:inline-grid;place-items:center;width:64px;height:64px;flex:none;
  border-radius:var(--rund-gross);background:var(--flaeche);
  font-size:var(--t4);font-weight:700;color:var(--tinte);letter-spacing:-.01em;
}
.profilkopf .wer{min-width:0}
.profilkopf h1{margin:0;font-size:var(--t6);letter-spacing:-.025em}
@media(max-width:640px){.profilkopf h1{font-size:var(--t5)}}
.p-herkunft{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--r3);margin:var(--r2) 0 0;max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.p-herkunft a{color:var(--gedaempft)}
.p-herkunft a:hover{color:var(--akzent)}
.p-zahl{margin-left:auto;display:flex;align-items:center;gap:var(--r4)}
@media(max-width:860px){.p-zahl{margin-left:0;width:100%}}
.p-punkte{font-size:var(--t7);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@media(max-width:860px){.p-punkte{font-size:var(--t6)}}
.p-von{font-size:var(--t3);color:var(--gedaempft)}
.p-band{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--rund);color:var(--band-text);font-weight:700;font-size:var(--t5)}
.p-rang{font-size:var(--t2);color:var(--gedaempft);margin:var(--r4) 0 var(--r4);max-width:none}
.p-zusammenfassung{font-size:var(--t3);max-width:60ch;margin:var(--r6) 0 0;color:var(--tinte)}
/* Die Abschnittsnavigation des Profils: Anker, klebend unter der Kopfleiste. */
.profilnav{
  position:sticky;top:var(--kopfhoehe);z-index:5;background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--linie);margin:var(--r6) 0 0;
}
.profilnav ul{list-style:none;padding:0;margin:0;max-width:none;display:flex;flex-wrap:wrap;gap:0 var(--r6);overflow-x:auto}
.profilnav li{margin:0}
.profilnav a{display:inline-flex;align-items:center;min-height:52px;min-width:44px;color:var(--gedaempft);text-decoration:none;font-size:var(--t2);font-weight:600;white-space:nowrap}
.profilnav a:hover{color:var(--akzent)}
.profilabschnitt{padding:var(--r8) 0 0}
.profilabschnitt h2{font-size:var(--t5)}
@media(max-width:900px){.profilabschnitt h2{font-size:var(--t4)}}

/* Das Etikett steht seit dem 03.09.2026 GENAU EINMAL im Markup. Bis dahin
   wurde es zweimal ausgegeben - als klebende Spalte und als Aufklapper des
   Telefons -, weil ein geschlossenes <details> sich per CSS nicht oeffnen
   laesst. Es ist kein <details> mehr: Die Antwort (Zahl, Band, Zustandsleiste)
   steht jetzt VOR ihm, also kostet es auf dem Telefon nichts mehr, wenn es
   einfach dasteht. */
.etikettspalt{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:var(--r6) var(--r8);align-items:start}
@media(max-width:980px){.etikettspalt{grid-template-columns:1fr}}
.e-spalte{position:sticky;top:calc(var(--kopfhoehe) + var(--r5));margin:0}
.e-spalte figcaption p{max-width:none}
@media(max-width:980px){.e-spalte{position:static}}
.etikett{border:1px solid var(--linie);border-radius:var(--rund-gross);overflow:hidden;background:var(--grund);color:var(--tinte);box-shadow:var(--schatten)}
.e-kopf{display:flex;justify-content:space-between;gap:var(--r2);margin:0;padding:var(--r3) var(--r4);background:var(--tinte);color:var(--grund);font-size:var(--t1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;max-width:none}
.e-kopf span:last-child{font-weight:400;letter-spacing:0;text-transform:none}
.e-wer{padding:var(--r4);border-bottom:1px solid var(--linie)}
.e-name{font:600 var(--t4)/1.2 var(--sans);letter-spacing:-.01em;margin:0;max-width:none}
.e-meta{font-size:var(--t1);color:var(--gedaempft);margin:0;max-width:none}
.e-leiter{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--linie)}
.e-stufen{list-style:none;margin:0;padding:var(--r4);display:grid;gap:var(--r1);max-width:none}
.e-stufe{display:flex;align-items:center;gap:var(--r2);height:20px;margin:0;font-size:var(--t1);font-weight:700;color:var(--gedaempft)}
.e-stufe i{display:block;width:var(--w);height:100%;border-radius:2px;opacity:.28;transform-origin:left center;animation:einlaufen 400ms ease-out}
.e-stufe.hier{color:var(--tinte)}
.e-stufe.hier i{opacity:1}
.e-ablesung{border-left:1px solid var(--linie);padding:var(--r4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:8rem;gap:var(--r2)}
.e-band{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--rund);font-size:var(--t5);font-weight:700;line-height:1;color:var(--band-text)}
.e-wert{display:flex;flex-direction:column;align-items:center}
.e-punkte{font-size:var(--t5);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.e-von{font-size:var(--t1);color:var(--gedaempft)}
.e-rang,.e-keine{font-size:var(--t2);font-weight:600}
.e-block{border-bottom:1px solid var(--linie)}
.e-blockkopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--r2);margin:0;padding:var(--r3) var(--r4) 0;font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);max-width:none}
.e-blockkopf b{color:var(--tinte);letter-spacing:0;font-variant-numeric:tabular-nums;text-transform:none}
.e-block ul{list-style:none;margin:0;padding:0 var(--r4) var(--r3);max-width:none}
.e-zeile{display:grid;grid-template-columns:1rem 1fr auto;align-items:center;gap:var(--r2);margin:0;padding:0;border-bottom:1px solid var(--linie);font-size:var(--t2)}
.e-zeile:last-child{border-bottom:0}
.e-z{font-weight:700;text-align:center}
.e-zeile.ja .e-z{color:var(--ja-text)}
.e-zeile.nein .e-z{color:var(--nein-text)}
.e-zeile.leer .e-z{color:var(--leer-text)}
.e-zeile a{display:block;padding:var(--r2) 0;color:var(--tinte);text-decoration:none}
.e-zeile a:hover{color:var(--akzent);text-decoration:underline}
.e-g{font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums}
.e-fuss{margin:0;padding:var(--r3) var(--r4);background:var(--flaeche);font-size:var(--t1);color:var(--gedaempft);max-width:none}
.e-fuss b{color:var(--tinte)}
.e-hilfe{margin:var(--r4) 0 0;font-size:var(--t2)}
.e-hilfe-satz{margin:var(--r2) 0 0;font-size:var(--t1);color:var(--gedaempft)}

/* --- Der Belegteil: Zeilen mit einer Linie, keine Karten ------------------ */
.zellen{display:flex;flex-direction:column;margin:0}
.zelle{border-top:1px solid var(--linie);padding:var(--r5) 0}
.zelle .kopfzeile{display:flex;align-items:baseline;gap:var(--r3);margin:0 0 var(--r2)}
.zelle h3{margin:0;font-size:var(--t3)}
.zelle p{margin:var(--r2) 0 0;font-size:var(--t2)}
.marke{font-size:var(--t3);line-height:1;font-weight:700}
.marke.ja{color:var(--ja-text)}
.marke.nein{color:var(--nein-text)}
.marke.leer{color:var(--leer-text)}
/* JEDER AUFKLAPPER IST EIN BEDIENELEMENT, auch der ohne eigene Regel:
   Am 03.09.2026 mass der Aufklapper auf /bot 342 x 24 px. Die Regeln mit
   Klasse (.familie, .gruppe, .filterfeld, .aufklapper, .menue) setzen ihr
   eigenes display und gewinnen ueber diese hier. */
details>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--akzent);font-size:var(--t2)}
.zelle details ol{font-size:var(--t1);color:var(--gedaempft);word-break:break-all;padding-left:var(--r5);margin:0 0 var(--r2);animation:aufklappen 120ms ease-out}
/* Eine Gruppe von Belegen als Aufklapper: der Titel mit Zahl, 44 px. */
.gruppe{margin:var(--r5) 0 0;border-top:1px solid var(--linie)}
.gruppe>summary{display:flex;align-items:center;gap:var(--r3);min-height:56px;margin:0;font:600 var(--t4)/1.2 var(--sans);letter-spacing:-.01em;color:var(--tinte);list-style:none;cursor:pointer}
.gruppe>summary::-webkit-details-marker{display:none}
.gruppe>summary .n{font-size:var(--t2);font-weight:400;color:var(--gedaempft)}
.gruppe>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--gedaempft);border-bottom:2px solid var(--gedaempft);transform:rotate(45deg);flex:none}
.gruppe[open]>summary::after{transform:rotate(-135deg)}
.gruppe>summary:hover{color:var(--akzent);text-decoration:none}
.gruppe .zellen{animation:aufklappen 120ms ease-out}
.handlungen{margin-top:var(--r4)}

/* --- Die Verlaufslinie --------------------------------------------------- */
.verlauf{margin:0;max-width:28rem}
.verlauf svg{display:block;width:100%;height:auto;overflow:visible}
.v-achse{stroke:var(--linie);stroke-width:1}
.v-skala{fill:var(--gedaempft);font-size:var(--t1)}
.v-linie{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;animation:zeichnen 800ms ease-out}
.verlauf circle{fill:var(--grund);stroke:var(--akzent);stroke-width:2}
.verlauf figcaption{font-size:var(--t1);color:var(--gedaempft);margin-top:var(--r2)}

/* --- Die Vergleichsseite -------------------------------------------------
   ZWEI GROSSE KARTEN, dazwischen der Unterschied. Darunter die Matrix: kurze
   Zellen, die Quelle erst auf Klick. Auf dem Telefon wird aus der Tabelle je
   Kriterium eine Karte, weil zwei Anbieter nebeneinander in einer Tabelle bei
   390 px nicht lesbar sind. */
.v-gegenueber{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--r5);align-items:center;margin:var(--r6) 0 var(--r8)}
@media(max-width:860px){.v-gegenueber{grid-template-columns:1fr;gap:var(--r4)}}
.v-karte{text-align:center}
.v-karte .sk-wert{justify-content:center}
.v-karte .sk-band{margin-left:0}
.v-karte .sk-kopf{justify-content:center;flex-direction:column;gap:var(--r1)}
.v-abstand{text-align:center;padding:0 var(--r3)}
.v-abstand b{display:block;font-size:var(--t5);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.v-abstand span{display:block;font-size:var(--t2);color:var(--gedaempft);margin-top:var(--r2)}
.v-matrix{width:100%}
.v-matrix .zustand{display:inline-flex;align-items:baseline;gap:var(--r2)}
.zustand-zeichen{font-weight:700}
.zustand-ja .zustand-zeichen{color:var(--ja-text)}
.zustand-nein .zustand-zeichen{color:var(--nein-text)}
.zustand-leer .zustand-zeichen{color:var(--leer-text)}
.v-notiz{display:block;font-size:var(--t1);color:var(--gedaempft)}
/* Eine Zeile, in der die beiden auseinanderliegen: ein Strich am linken Rand,
   keine Flaeche. Die Ordnung steht schon im Markup (Unterschiede zuerst). */
.v-matrix .v-unterschied th{box-shadow:inset 3px 0 0 var(--akzent)}
.v-quelle{margin:0}
.v-quelle>summary{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--t1)}
.v-quelle ol{font-size:var(--t1);color:var(--gedaempft);word-break:break-all;padding-left:var(--r5);margin:0;animation:aufklappen 120ms ease-out}
/* AUF DEM TELEFON WIRD AUS JEDER ZEILE EINE KARTE, per CSS und nicht durch
   eine zweite Ausgabe im Markup: Zwei Anbieter nebeneinander in einer Tabelle
   sind bei 390 px nicht lesbar. Der Spaltenname steht als data-spalte an
   jeder Zelle und wird hier zum Vorsatz. */
@media(max-width:860px){
  /* .tabellenrahmen steht weiter unten in dieser Datei und gewaenne bei
     gleicher Spezifitaet; deshalb beide Klassen. */
  .tabellenrahmen.v-tabelle{border:0;border-radius:0;overflow:visible}
  .v-matrix,.v-matrix tbody,.v-matrix tr,.v-matrix td{display:block;width:100%}
  .v-matrix thead{display:none}
  .v-matrix tbody tr{border-bottom:1px solid var(--linie);padding:var(--r4) 0}
  .v-matrix tbody tr:hover{background:transparent}
  .v-matrix tbody th{display:block;border:0;padding:0 0 var(--r3);font-size:var(--t3)}
  .v-matrix .v-unterschied th{box-shadow:none;color:var(--akzent)}
  .v-matrix td{border:0;padding:0 0 var(--r3)}
  /* Der Spaltenname UEBER dem Wert und nicht daneben: Bei 390 px bleiben neben
     einer 8rem-Spalte 190 px, und "Not found, 6 addresses checked" bricht dort
     um - dann steht der eine Wert neben seinem Namen und der andere darunter. */
  .v-matrix td::before{display:block;content:attr(data-spalte);font-size:var(--t1);color:var(--gedaempft)}
  .v-matrix td .v-notiz,.v-matrix td .v-quelle{padding-left:0}
}
.v-werte{list-style:none;padding:0;margin:0 0 var(--r4);max-width:none;border-top:1px solid var(--linie)}
.v-werte li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3) var(--r5);margin:0;padding:0;border-bottom:1px solid var(--linie)}
.v-werte li>a{font-size:var(--t3);font-weight:600;color:var(--tinte);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.v-werte li>a:hover{color:var(--akzent);text-decoration:underline}
.v-rang{font-size:var(--t1);color:var(--gedaempft)}
.zwei-etiketten{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--r5);margin:var(--r5) 0;max-width:calc(52rem + var(--r5))}

/* --- Die Kriterienseiten -------------------------------------------------
   Die Uebersicht als Kartenraster, drei mal vier. Jede Karte traegt ein
   eigenes Linienzeichen, den Namen, das Gewicht, den Anteil, einen Balken und
   EINEN Satz. */
.kriterienraster{list-style:none;padding:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r5)}
@media(max-width:1024px){.kriterienraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .kriterienraster{grid-template-columns:1fr;gap:var(--r4)}
  .kriterienraster .karte{padding:var(--r4)}
  .kr-karte{gap:var(--r2)}
  .kr-zeichen{width:32px;height:32px}
  .kr-zeichen svg{width:18px;height:18px}
  .kr-name{font-size:var(--t3)}
}
.kriterienraster li{margin:0}
.kr-karte{display:grid;gap:var(--r3);height:100%}
.kr-zeichen{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--rund);background:var(--akzent-zart);color:var(--akzent);flex:none}
.kr-zeichen svg{width:22px;height:22px;display:block}
/* Dasselbe Zeichen im Kopf seiner eigenen Seite, eine Stufe groesser. */
.kr-gross{width:56px;height:56px;border-radius:var(--rund-gross);margin:0 0 var(--r4);max-width:none}
.kr-gross svg{width:30px;height:30px}
.kr-name{font-size:var(--t4);font-weight:600;letter-spacing:-.01em;color:var(--tinte);margin:0}
.kr-satz{font-size:var(--t2);color:var(--gedaempft);margin:0;max-width:none}
.kr-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--r3);margin:0;max-width:none}
/* Balken und Fusszeile haengen am unteren Rand der Karte: sonst stehen sie
   in einer Reihe Karten auf verschiedenen Hoehen, je nach Laenge des Satzes. */
.kr-balken{display:block;height:6px;background:var(--linie);border-radius:999px;overflow:hidden;margin:auto 0 0}
.kr-balken i{display:block;height:100%;width:var(--w);background:var(--akzent);border-radius:999px;transform-origin:left center;animation:einlaufen 400ms ease-out}
/* Die Liste der Kriterien (Startseite, Methodik): eine Zeile je Kriterium. */
.pruefliste{list-style:none;padding:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:0 var(--r8);border-top:1px solid var(--linie)}
.pruefliste li{display:grid;grid-template-columns:1fr auto;gap:0 var(--r4);align-items:center;padding:0;border-bottom:1px solid var(--linie);margin:0}
.pruefliste a{display:flex;align-items:center;min-height:52px;font-weight:600;color:var(--tinte);text-decoration:none}
.pruefliste a:hover{color:var(--akzent);text-decoration:underline}
.pruefliste .anteil{grid-column:1 / -1;padding-bottom:var(--r3)}
.pruefliste .warum{grid-column:1 / -1;font-size:var(--t2);color:var(--gedaempft);margin:0 0 var(--r3);max-width:var(--mass)}
.pruefliste.voll{grid-template-columns:1fr}
@media(max-width:640px){
  .pruefliste:not(.voll){grid-template-columns:1fr 1fr;gap:0 var(--r5)}
  .pruefliste:not(.voll) .anteil,.pruefliste:not(.voll) .gewicht-wort{display:none}
  .pruefliste:not(.voll) a{font-size:var(--t2)}
}

/* --- Die Trendseite ------------------------------------------------------
   OHNE BELASTBARE VERAENDERUNG KEINE TABELLE AUS NULLEN, sondern eine ruhige
   Leerdarstellung und die vergangenen Laeufe als waagerechte Zeitleiste. */
.leerbild{text-align:center;padding:var(--r9) 0;max-width:44rem;margin:0 auto}
.leerbild p{font-size:var(--t5);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--tinte);margin:0 auto var(--r5);max-width:20ch}
@media(max-width:640px){.leerbild{padding:var(--r8) 0} .leerbild p{font-size:var(--t4)}}
.leerbild .knopfreihe{justify-content:center;margin:0}
.leerbild .grund{font-size:var(--t3);line-height:1.6;font-weight:400;color:var(--gedaempft);max-width:44ch}
/* --- Das grosse Diagramm der Trendseite: Balkenpaare auf einer Nulllinie --- */
.trendwahl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--r4) var(--r6);margin:0 0 var(--r5);max-width:none}
.trendwahl .sortierung{margin:0}
.kriterienwahl{margin:0;max-width:26rem;flex:1 1 20rem}
.kriterienwahl label{margin:0 0 var(--r2)}
.marktverlauf{margin:0 0 var(--r6);max-width:48rem}
.marktverlauf svg{display:block;width:100%;height:auto}
.marktverlauf .mv-auf{fill:var(--ja)}
.marktverlauf .mv-ab{fill:var(--nein)}
.marktverlauf figcaption{font-size:var(--t1);color:var(--gedaempft);margin-top:var(--r3);display:flex;flex-wrap:wrap;gap:var(--r2) var(--r5);max-width:none}
.mv-legende{display:inline-flex;align-items:center;gap:var(--r2)}
.mv-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.mv-legende i.mv-auf{background:var(--ja)}
.mv-legende i.mv-ab{background:var(--nein)}
.mv-satz{flex-basis:100%;max-width:var(--mass)}
.zeitleiste{list-style:none;padding:0;margin:var(--r8) 0 0;max-width:none;display:flex;gap:0;overflow-x:auto;border-top:1px solid var(--linie)}
.zeitleiste li{margin:0;flex:1 1 0%;min-width:8rem;padding:var(--r5) var(--r3) 0;position:relative;text-align:center}
.zeitleiste li::before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--akzent);transform:translateX(-50%)}
.zeitleiste .datum{display:block;font-size:var(--t2);font-weight:600;font-variant-numeric:tabular-nums}
.zeitleiste .was{display:block;font-size:var(--t1);color:var(--gedaempft);margin-top:var(--r1)}

/* --- Der Selbsttest: fuenf Schritte, die nacheinander bestaetigt werden --- */
.schrittliste{list-style:none;padding:0;margin:0 0 var(--r6);max-width:36rem;counter-reset:schritt}
.schrittliste li{
  display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:var(--r3);
  margin:0;padding:var(--r3) 0;border-bottom:1px solid var(--linie);font-size:var(--t3);
}
.schrittliste li:last-child{border-bottom:0}
.schrittliste .nummer{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;
  background:var(--flaeche);color:var(--gedaempft);font-size:var(--t1);font-weight:700;
}
.schrittliste .fertig .nummer{background:var(--ja);color:var(--grund);font-size:var(--t2)}
.schrittliste .zustand{font-size:var(--t1);color:var(--gedaempft)}
.schrittliste .fertig .zustand{color:var(--ja-text)}
/* Das Ergebnis des Selbsttests: die Karte links, die Zahlen daneben. */
.pruefergebnis{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:var(--r6);align-items:start;margin:0 0 var(--r6)}
@media(max-width:860px){.pruefergebnis{grid-template-columns:1fr;gap:var(--r5)}}
.fortschritt{display:block;height:6px;background:var(--linie);border-radius:999px;overflow:hidden;margin:0 0 var(--r5);max-width:36rem}
.fortschritt i{display:block;height:100%;width:var(--w);background:var(--akzent);border-radius:999px}
.aufklapper-reihe{margin:var(--r6) 0 0;max-width:36rem}
.aufklapper{border-bottom:1px solid var(--linie);margin:0}
.aufklapper:first-child{border-top:1px solid var(--linie)}
.aufklapper>summary{display:flex;align-items:center;gap:var(--r3);min-height:52px;margin:0;font-size:var(--t3);font-weight:600;color:var(--tinte);list-style:none;cursor:pointer}
.aufklapper>summary::-webkit-details-marker{display:none}
.aufklapper>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--gedaempft);border-bottom:2px solid var(--gedaempft);transform:rotate(45deg);flex:none}
.aufklapper[open]>summary::after{transform:rotate(-135deg)}
.aufklapper>summary:hover{color:var(--akzent);text-decoration:none}
.aufklapper .inhalt{padding:0 0 var(--r4);animation:aufklappen 120ms ease-out}
.aufklapper .inhalt p{font-size:var(--t2);color:var(--gedaempft);margin:0 0 var(--r3)}
.aufklapper .inhalt p:last-child{margin-bottom:0}

/* --- Die Suchseite ------------------------------------------------------- */
.suchform{max-width:34rem;margin:var(--r5) 0}
/* Die Suche im Kategorieabschnitt: Feld und Knopf in einer Zeile, wie im
   Aufschlag, nur kleiner. */
.katsuche{display:flex;gap:var(--r3);max-width:30rem;margin:0 0 var(--r5)}
.katsuche input{min-width:0;border-radius:999px;background:var(--flaeche);border-color:transparent;padding:0 var(--r5)}
.katsuche input:hover:not(:focus-visible){border-color:var(--linie)}
.katsuche button{flex:none}
.treffer{list-style:none;padding:0;margin:0;max-width:none;border-top:1px solid var(--linie)}
li.treffer{display:flex;flex-wrap:wrap;gap:0 var(--r4);align-items:center;margin:0;padding:0;border-bottom:1px solid var(--linie)}
li.treffer a{display:inline-flex;align-items:center;min-height:52px;min-width:44px;font-size:var(--t3);font-weight:600;color:var(--tinte);text-decoration:none}
li.treffer a:hover{color:var(--akzent);text-decoration:underline}
li.treffer span{font-size:var(--t1);color:var(--gedaempft)}

/* --- Tabellen ------------------------------------------------------------ */
.tabellenrahmen{overflow-x:auto;margin:0 0 var(--r5);border:1px solid var(--linie);border-radius:var(--rund-gross);background:var(--grund)}
table{border-collapse:collapse;width:100%}
.tabellenrahmen.breit table{min-width:40rem}
th,td{padding:var(--r3) var(--r4);text-align:left;border-bottom:1px solid var(--linie);vertical-align:top;overflow-wrap:anywhere}
thead th{
  background:var(--flaeche);font-size:var(--t1);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft);white-space:nowrap;
}
/* Eine Zahlenspalte bricht NICHT mitten in der Zahl um. Das overflow-wrap an
   td gilt fuer lange Adressen; an einer Zahl machte es aus 2400 ein
   "24 00" (gemessen auf /trend am 03.09.2026). */
thead th.mitte,tbody td.mitte,tbody th.mitte{text-align:center;overflow-wrap:normal;white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover{background:var(--flaeche)}
tbody th{font-weight:600}
tbody th a{color:var(--tinte);text-decoration:none}
tbody th a:hover{color:var(--akzent);text-decoration:underline}
td.rang{color:var(--gedaempft);font-variant-numeric:tabular-nums;width:2.5rem;font-size:var(--t2)}

/* --- Die Zeichnung auf /bot: was der Crawler abruft ---------------------- */
.abrufe-bild{margin:0 0 var(--r5);max-width:26rem}
.abrufe{display:block;width:100%;height:auto}
.a-domain{fill:var(--tinte)}
.a-domain-text{fill:var(--grund);font-size:var(--t2);font-weight:700}
.a-stamm,.a-ast{stroke:var(--linie);stroke-width:2}
.a-name{fill:var(--tinte);font-size:var(--t2)}
.a-zahl{fill:var(--gedaempft);font-size:var(--t1)}
.abrufe-bild figcaption{font-size:var(--t1);color:var(--gedaempft);margin-top:var(--r3)}
.abrufe-liste{margin:0 0 var(--r5)}
.abrufe-liste dl{margin:0;max-width:var(--mass)}
.abrufe-liste dt{font-weight:600;margin:0}
.abrufe-liste dt>a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.abrufe-liste dd{margin:0 0 var(--r3);font-size:var(--t2);color:var(--gedaempft);line-height:1.7}
.abrufe-liste code{background:var(--flaeche);padding:0 var(--r1);border-radius:4px}

/* --- Wegweiser: eine Reihe von Verweisen, jeder ein Tippziel -------------- */
.wegweiser{list-style:none;padding:0;margin:0 0 var(--r4);max-width:none;display:flex;flex-wrap:wrap;gap:0 var(--r5)}
.wegweiser li{margin:0}
.wegweiser a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--t2)}
ul.liste{list-style:none;padding:0;margin:0 0 var(--r4);max-width:none}
ul.liste li{margin:0}
ul.liste a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
main h2>a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
/* Tabellen: die Zelle gibt ihr Padding an den Verweis ab; :has() kennt jeder
   Browser seit 2023, ein aelterer bekommt eine hoehere Zeile und kein Loch. */
tbody th>a,td.verweis>a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
tbody th:has(>a),td.verweis{padding-top:0;padding-bottom:0}
.einordnung{margin:0 0 var(--r5)}

/* --- Hover und Fokus: 120 ms, Rueckmeldung, sonst nichts ----------------
   Jedes Bedienelement aendert unter der Maus etwas Sichtbares, jede stetige
   Aenderung dauert 120 ms, und keine andere Dauer kommt auf irgendeiner Seite
   vor. Der Fokusring (oben, :focus-visible) erscheint OHNE Uebergang: Wer mit
   der Tastatur springt, will sofort sehen, wo er ist.

   Diese Regeln stehen am Ende, weil sie gleich spezifische Farbregeln weiter
   oben ueberstimmen muessen. */
a,button,summary,input,select,.kaestchen label,.zeile,tbody tr,.karte{
  transition:color 120ms ease-out,background-color 120ms ease-out,border-color 120ms ease-out,
    filter 120ms ease-out,box-shadow 120ms ease-out,transform 120ms ease-out,
    text-decoration-thickness 120ms ease-out,text-decoration-color 120ms ease-out;
}
a{text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.wortmarke:hover{color:var(--akzent)}
summary:hover{color:var(--akzent);text-decoration:underline}
.familie summary:hover,.gruppe>summary:hover,.filterfeld>summary:hover,.aufklapper>summary:hover,.menue summary:hover,.untermenue summary:hover{text-decoration:none}
.filterfeld>summary:hover{color:var(--akzent);border-color:var(--akzent)}
.untermenue[open] summary:hover{text-decoration:underline}
input:hover:not(:focus-visible),select:hover:not(:focus-visible){border-color:var(--gedaempft)}
.kaestchen label:hover{color:var(--akzent)}

/* --- Bewegung -----------------------------------------------------------
   Jede Animation erklaert Daten: eine Zahl laeuft hoch, ein Balken laeuft
   ein, eine Linie zeichnet sich, Segmente erscheinen nacheinander, ein Feld
   schiebt ein. Keine laeuft in einer Schleife, keine dauert laenger als
   800 ms, und der ganze Aufschlag ist nach 1,2 Sekunden fertig. */
@property --n{syntax:"<integer>";initial-value:0;inherits:false}
@keyframes einlaufen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes erscheinen{from{opacity:0;transform:scaleY(.2)}}
@keyframes zeichnen{from{stroke-dashoffset:var(--laenge)}to{stroke-dashoffset:0}}
@keyframes hochzaehlen{from{--n:0}}
@keyframes faehrt{from{left:0;opacity:0}}
@keyframes aufklappen{from{opacity:0;transform:translateY(-4px)}}
@keyframes einschieben{from{opacity:0;transform:translateY(-8px)}}
@keyframes einfahren{from{opacity:0;transform:translateY(12px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}