/* Die Suchseite selbst und ihre Treffer */
.suchform{max-width:34rem;margin:var(--r5) 0}
.treffer{list-style:none;padding:0;margin:0;max-width:none;border-top:2px solid var(--linie-stark)}
li.treffer{display:flex;flex-wrap:wrap;gap:var(--r1) var(--r3);align-items:baseline;margin:0;padding:var(--r3) 0;border-bottom:1px solid var(--linie)}
li.treffer a{font-weight:600;color:var(--tinte);text-decoration:none;padding:var(--r1) 0}
li.treffer a:hover{color:var(--akzent);text-decoration:underline}
li.treffer span{font-size:var(--t1);color:var(--gedaempft)}

/* --- Seitenkopf --- */
.seitenkopf{padding:var(--r7) 0 0}
.fuehrung{color:var(--gedaempft);max-width:var(--mass);margin:0 0 var(--r3)}

/* Die Kennzahlkacheln sind seit dem 02.09.2026 auf allen Seiten eine Zeile
   Text (p.stand): Kein Kasten, in dem eine Zeile steht. */

/* --- Tabellen ---
   Ohne Mindestbreite: Die Rangtabelle, fuer die die 58rem standen, ist seit
   dem 01.09.2026 weg, und eine Tabelle mit zwei Spalten braucht keine. Die
   breiten (vier oder fuenf Spalten, /changes und /trend) tragen .breit und
   scrollen in ihrem Rahmen, statt auf dem Telefon zu Zeilen aus einem Wort
   zu werden. */
.tabellenrahmen{overflow-x:auto;margin:var(--r5) 0;border:1px solid var(--linie);border-radius:var(--rund);background:var(--grund)}
table{border-collapse:collapse;width:100%}
.tabellenrahmen.breit table{min-width:40rem}
th,td{padding:var(--r3) var(--r2);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:.04em;text-transform:uppercase;color:var(--gedaempft);white-space:nowrap;
}
thead th.mitte,tbody td.mitte,tbody th.mitte{text-align:center;padding-left:var(--r1);padding-right:var(--r1)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover{background:var(--flaeche)}
td.rang{color:var(--gedaempft);font-variant-numeric:tabular-nums;width:2.5rem;font-size:var(--t2)}
tbody th{font-weight:600}
tbody th a{color:var(--tinte);text-decoration:none}
tbody th a:hover{color:var(--akzent);text-decoration:underline}

/* Der Punktebalken: die Antwort auf die Frage der Seite, in der Rangliste
   selbst. Die Breite steht im Markup; eine Animation wuerde sie nur enthuellen. */
.punkte{display:flex;align-items:center;gap:var(--r2);min-width:7.5rem}
.balken{flex:1;height:6px;border-radius:3px;background:var(--linie);overflow:hidden;min-width:3.5rem}
.balken i{display:block;height:100%;background:var(--akzent);border-radius:3px}
.punkte b{font-size:var(--t2);font-variant-numeric:tabular-nums;min-width:2.2rem;text-align:right}
.ohnedaten{color:var(--gedaempft);font-size:var(--t1);white-space:nowrap}

.marke{font-size:var(--t2);line-height:1}
.marke.ja{color:var(--ja)}
.marke.nein{color:var(--nein)}
.marke.leer{color:var(--leer)}

/* --- Chips --- */
.chip{
  display:inline-flex;align-items:center;gap:var(--r1);
  border:1px solid var(--linie);border-radius:999px;
  padding:0 var(--r2);font-size:var(--t1);color:var(--gedaempft);background:var(--grund);
}
.chip.ja{color:var(--ja);border-color:color-mix(in srgb,var(--ja) 35%,var(--linie))}
.chip.nein{color:var(--nein);border-color:color-mix(in srgb,var(--nein) 30%,var(--linie))}

/* --- Karten --- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--r4);margin:var(--r4) 0 0}
.karte{
  background:var(--grund);border:1px solid var(--linie);border-radius:var(--rund);
  padding:var(--r5);text-decoration:none;color:inherit;display:block;
}
a.karte:hover{border-color:var(--akzent)}
.karte p{max-width:none}
.karte .unter{color:var(--gedaempft);font-size:var(--t1);margin:var(--r1) 0 var(--r2)}
.karte .fuss{color:var(--gedaempft);font-size:var(--t1);margin:var(--r2) 0 0}

/* --- Kriterienblock auf der Profilseite --- */
.zelle{border:1px solid var(--linie);border-radius:var(--rund);padding:var(--r4) var(--r5);background:var(--grund)}
.zellen{display:flex;flex-direction:column;gap:var(--r3);margin-top:var(--r5)}
.zelle .kopfzeile{display:flex;align-items:baseline;gap:var(--r2);margin-bottom:var(--r1)}
.zelle p{margin:var(--r1) 0;font-size:var(--t2)}
.quelle{font-size:var(--t1);color:var(--gedaempft);word-break:break-word}
.quelle a{color:var(--akzent)}
details summary{cursor:pointer;color:var(--akzent);font-size:var(--t2);padding:var(--r3) 0;margin-top:var(--r1)}
details ol{font-size:var(--t1);color:var(--gedaempft);word-break:break-all;padding-left:var(--r5);margin:var(--r2) 0 0}

/* Ein Hinweis ist ein Kasten mit Text; als p bleibt er bei 66ch, als div traegt er ein p. */
.hinweis{background:var(--akzent-zart);border-radius:var(--rund);padding:var(--r4) var(--r5);margin:var(--r5) 0}
.hinweis p{margin:0}
.liste{padding-left:var(--r5)}

/* --- Formular ---
   DIESE REGELN SIND BEIM UMBAU AUF DIE VORIGE BILDSPRACHE EINMAL
   HERAUSGEFALLEN, und keine Suite hat es gemerkt: Der Absendeknopf war 21 px
   hoch statt 44. Gefunden hat es die Browserprobe, und genau dafuer gibt es
   sie - ein Waechter ueber den Quelltext sieht eine fehlende Regel nicht.

   17 px im Feld sind kein Geschmack: Unter 16 px zoomt iOS beim Antippen in
   die Seite hinein. */
form{max-width:34rem;margin:var(--r5) 0}
label{display:block;font-weight:600;font-size:var(--t2);margin:var(--r4) 0 var(--r1)}
input,select{
  width:100%;min-height:44px;padding:var(--r2) var(--r3);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:44px;padding:var(--r2) var(--r5);font:inherit;font-weight:600;font-size:var(--t2);
  color:var(--akzent-text);background:var(--akzent);border:0;border-radius:var(--rund);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(--r3);max-width:var(--mass)}

/* --- Fuss --- */
.fuss{border-top:1px solid var(--linie);margin-top:var(--r8);padding:var(--r6) 0 var(--r7);color:var(--gedaempft);font-size:var(--t2)}
@media(max-width:640px){.fuss{margin-top:var(--r6);padding:var(--r4) 0 var(--r4);font-size:var(--t1)} .fuss nav{gap:var(--r3)}}
.fuss p{margin:0 0 var(--r2)}
.fuss nav{display:flex;flex-wrap:wrap;gap:var(--r4);margin-top:var(--r3)}
.fuss nav a{display:inline-block;min-width:44px;padding:var(--r3) 0}

/* --- Das Etikett ------------------------------------------------------
   Ein Gegenstand nach Art eines Energielabels: Rand aus Tinte, die Bandleiter
   als wachsende Balken, darunter die zwoelf Zeilen. Jede Breite steht im
   Markup (--w je Stufe); die Animation skaliert von 0 auf 1 und ist bei 1 die
   Identitaet. Ohne Bewegung steht alles sofort da. */
.etikettspalt{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:var(--r6) var(--r7);align-items:start;margin-top:var(--r6)}
@media(max-width:980px){.etikettspalt{grid-template-columns:1fr}}
.e-spalte{position:sticky;top:80px;margin:0}
.e-spalte figcaption p{max-width:none}
@media(max-width:980px){.e-spalte{position:static}}
.etikett{border:2px solid var(--linie-stark);background:var(--grund);color:var(--tinte)}
.e-kopf{display:flex;justify-content:space-between;gap:var(--r2);margin:0;padding:var(--r2) var(--r3);background:var(--linie-stark);color:var(--grund);font-size:var(--t1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;max-width:none}
.e-kopf span:last-child{font-weight:400;letter-spacing:0;text-transform:none}
.e-wer{padding:var(--r3);border-bottom:2px solid var(--linie-stark)}
.e-name{font:600 var(--t4)/1.2 var(--serif);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:2px solid var(--linie-stark)}
.e-stufen{list-style:none;margin:0;padding:var(--r3);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%;opacity:.3;transform-origin:left center;animation:einlaufen 400ms ease-out}
.e-stufe.hier{color:var(--tinte)}
.e-stufe.hier i{opacity:1;outline:2px solid var(--linie-stark);outline-offset:1px}
.e-ablesung{border-left:1px solid var(--linie);padding:var(--r3);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:64px;height:64px;font-size:var(--t6);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}
.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;justify-content:space-between;gap:var(--r2);margin:0;padding:var(--r2) var(--r3) 0;font-size:var(--t1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft);max-width:none}
.e-blockkopf b{color:var(--tinte);letter-spacing:0;font-variant-numeric:tabular-nums}
.e-block ul{list-style:none;margin:0;padding:0 var(--r3) var(--r2);max-width:none}
.e-zeile{display:grid;grid-template-columns:1rem 1fr auto;align-items:center;gap:var(--r2);margin:0;padding:var(--r1) 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)}
.e-zeile.nein .e-z{color:var(--nein)}
.e-zeile.leer .e-z{color:var(--leer)}
.e-zeile a{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(--r2) var(--r3);background:var(--flaeche);font-size:var(--t1);color:var(--gedaempft);max-width:none}
.e-fuss b{color:var(--tinte)}
/* Zwei Etiketten nebeneinander (Vergleichsseite), unter 40rem untereinander.
   Das RASTER hat die Obergrenze (zwei Etiketten zu 26rem plus Abstand), nicht
   die Spalte: Ohne sie bekam jedes Etikett eine halbe Seite als Zelle und
   stand an deren linkem Rand - bei 1440 px lagen 148 px dazwischen, bei
   1024 px 84, beides aus keiner Leiter. Eine Obergrenze an der SPALTE
   (minmax(18rem,26rem)) zaehlt auto-fit nach der Obergrenze und stellte die
   beiden bei 720 px untereinander, wo sie mit 324 px nebeneinander passen.
   Gemessen in browser-test/e2e.py bei 720, 1024 und 1440 px. */
.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))}
.e-hilfe{margin:var(--r3) 0 0;font-size:var(--t2)}
.e-hilfe-satz{margin:var(--r1) 0 0;font-size:var(--t1);color:var(--gedaempft)}
/* Nur fuer Vorleseprogramme sichtbar: der Name hinter einem Zeichen. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rubrik{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);margin:0 0 var(--r2)}
.rubrik a{color:inherit}
.einordnung{margin:0 0 var(--r5)}
.gewicht{margin-left:auto;font-size:var(--t1);color:var(--gedaempft);white-space:nowrap}

/* Der Belegteil: Zeilen mit einer Linie, keine Karten. Ein Rahmen muss etwas
   trennen, und hier trennt die Linie. */
.zellen{gap:0;margin-top:0}
.zelle{border:0;border-top:1px solid var(--linie);border-radius:0;padding:var(--r4) 0;background:transparent}
.zelle .kopfzeile{align-items:baseline}

/* --- Die Verlaufslinie ---
   Die Laenge steht als stroke-dasharray und --laenge im Markup; die Animation
   setzt nur den Versatz von dort auf null. */
.verlauf{margin:0 0 var(--r6);max-width:26rem}
.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(--r1)}

/* Der Punktebalken laeuft beim Laden einmal ein - wie der Ausschlag eines
   Messinstruments. Seine Breite steht im Markup. */
.balken i{transform-origin:left center;animation:einlaufen 400ms ease-out}

/* --- Die Startseite: Aufschlag mit dem Etikett als Schaustueck -----------
   Der Aufschlag ist eine Frage, das Etikett daneben die Antwort in einem
   Gegenstand. Keine Kacheln: die Zahlen sind eine Zeile Text. */
/* Die Textspalte ist hoechstens 66ch breit (Zeilenlaenge), das Etikett bekommt den Rest. */
.aufschlag{display:grid;grid-template-columns:minmax(0,66ch) minmax(22rem,1fr);gap:var(--r6) var(--r7);align-items:start;padding:var(--r7) 0 var(--r6);border-bottom:1px solid var(--linie)}
@media(max-width:1024px){.aufschlag{grid-template-columns:1fr;padding-top:var(--r6)}}
@media(max-width:640px){.aufschlag{padding:var(--r5) 0;gap:var(--r5)} .knopfreihe,.merkzeile{margin-top:var(--r4)} .schau .e-stufe{height:16px} .schau .e-band{width:48px;height:48px;font-size:var(--t5)} .schau .e-punkte{font-size:var(--t4)} .schau .e-ablesung{gap:var(--r1)}}
.aufschlag h1 em{font-style:italic;color:var(--akzent)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:var(--r2);margin:var(--r5) 0 0;max-width:none}
.knopf{display:inline-flex;align-items:center;min-height:44px;padding:var(--r2) var(--r5);background:var(--akzent);color:var(--akzent-text);border:1px solid var(--akzent);border-radius:var(--rund);font-weight:600;font-size:var(--t2);text-decoration:none}
.knopf.leer{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.knopf:hover{filter:brightness(1.1)}
.merkzeile{display:flex;flex-wrap:wrap;gap:var(--r1) var(--r5);margin:var(--r5) 0 0;font-size:var(--t2);color:var(--gedaempft);max-width:none}
.merkzeile b{color:var(--tinte);font-weight:700;font-variant-numeric:tabular-nums}
.schau{max-width:26rem}
.schau-satz{font-size:var(--t1);color:var(--gedaempft);margin:var(--r3) 0 0}
.abschnitt{padding:var(--r7) 0 0}
@media(max-width:640px){.abschnitt{padding-top:var(--r5)} .knopf{padding:var(--r2) var(--r4)} .familie:first-of-type{margin-top:var(--r2)}}
.abschnitt h2{margin:0 0 var(--r2)}
.pruefliste{list-style:none;padding:0;margin:var(--r4) 0 0;max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:0 var(--r7);border-top:1px solid var(--linie)}
.pruefliste li{display:grid;grid-template-columns:1fr auto;gap:var(--r1) var(--r3);align-items:baseline;padding:var(--r3) 0;border-bottom:1px solid var(--linie);margin:0}
/* Auf dem Telefon nur Name und Gewicht, der Anteil steht auf der Kriterienseite:
   zwoelf dreizeilige Eintraege kosteten 888 px einer Seite, die unter 2500 bleiben soll. */
@media(max-width:640px){.pruefliste li{padding:var(--r1) 0;gap:var(--r2)} .pruefliste .anteil{display:none} .pruefliste a{font-size:var(--t2);line-height:1.3}}
.pruefliste a{font-weight:600;color:var(--tinte);text-decoration:none}
.pruefliste a:hover{color:var(--akzent);text-decoration:underline}
.gewicht-staebe{display:inline-flex;gap:var(--r1);vertical-align:middle}
.gewicht-staebe i{display:block;width:5px;height:12px;background:var(--akzent)}
.gewicht-staebe i.aus{background:var(--linie)}
.pruefliste .anteil{grid-column:1 / -1;font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums}
.pruefliste .warum{grid-column:1 / -1;font-size:var(--t2);color:var(--gedaempft);margin:0;max-width:var(--mass)}
/* Die volle Liste (/criteria/, /methodology) zeigt den Anteil auch auf dem Telefon. */
.pruefliste.voll{grid-template-columns:1fr}
.pruefliste.voll .anteil{display:block}
@media(max-width:640px){.pruefliste.voll li{padding:var(--r3) 0} .pruefliste.voll a{font-size:var(--t3);line-height:1.3}}
.familie{border-bottom:1px solid var(--linie);margin:0}
.familie:first-of-type{border-top:1px solid var(--linie);margin-top:var(--r4)}
.familie summary{display:flex;align-items:baseline;gap:var(--r3);padding:var(--r2) 0;margin:0;font-size:var(--t3);font-weight:600;color:var(--tinte);cursor:pointer;list-style:none;min-height:44px}
.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)}
.familie .inhalt a{display:flex;justify-content:space-between;gap:var(--r2);padding:var(--r2) 0;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 Zeichnung auf /bot: was der Crawler abruft --------------------
   Stehend, ohne Animation. Schriftgrade und Farben aus der Leiter, damit die
   Zeichnung hell und dunkel liest; die Gestaltwaechter messen auch sie. */
.abrufe-bild{margin:var(--r4) 0 0;max-width:24rem}
.abrufe{display:block;width:100%;height:auto}
.a-domain{fill:var(--linie-stark)}
.a-domain-text{fill:var(--grund);font-size:var(--t2);font-weight:700}
.a-stamm,.a-ast{stroke:var(--linie-stark);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(--r2)}
.abrufe-liste{margin:var(--r3) 0 var(--r5)}
.abrufe-liste dl{margin:var(--r2) 0 0;max-width:var(--mass)}
.abrufe-liste dt{font-weight:600;margin:var(--r3) 0 var(--r1)}
.abrufe-liste dd{margin:0;font-size:var(--t2);color:var(--gedaempft);line-height:1.8}
.abrufe-liste code{background:var(--flaeche);padding:0 var(--r1);border-radius:4px}

/* --- Die Kategorieseite: Filterschiene links, Zeilen rechts ---------------
   Auf schmalen Schirmen steht die Liste zuerst und die Schiene danach; der
   Verweis "Filter this list" springt hin. Ein Kaestchen ist 24 px, sein
   Tippziel ist die ganze Beschriftungszeile (44 px). */
.zweispalt{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:0 var(--r7);align-items:start;margin-top:var(--r6)}
.stand{margin:0 0 var(--r3)}
.schiene{position:sticky;top:80px;margin:0;max-width:none}
.schiene fieldset{border:0;margin:0 0 var(--r5);padding:0}
.schiene legend{font-size:var(--t1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft);padding:0 0 var(--r2)}
.kaestchen{display:flex;align-items:center;gap:var(--r3);margin:0;max-width:none}
.kaestchen input{width:24px;height:24px;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);padding:var(--r3) 0;margin:0;font-weight:400;font-size:var(--t2);cursor:pointer}
.kaestchen .n{color:var(--gedaempft);font-variant-numeric:tabular-nums}
.kaestchen-hinweis{font-size:var(--t1);color:var(--gedaempft);margin:var(--r2) 0 0}
.knopfzeile{display:flex;align-items:center;gap:var(--r4);margin:var(--r4) 0 0;max-width:none}
.knopfzeile a{display:inline-block;padding:var(--r3) 0;font-size:var(--t2)}
.listenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r2) var(--r4);flex-wrap:wrap;margin:0 0 var(--r3)}
.listenkopf h2{margin:0}
.sortierung{display:flex;flex-wrap:wrap;gap:0 var(--r3);align-items:baseline;margin:0;max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.sortierung a{display:inline-block;min-width:44px;padding:var(--r3) 0}
.sortierung a[aria-current]{color:var(--tinte);font-weight:600;text-decoration:none}
/* Unter 900 px: die Spalte weicht dem Aufklapper "Filters (n)" ueber der Liste.
   Bis zum 02.09.2026 stand die Schiene HINTER der Liste, und "Filter this
   list" sprang ueber 15 bis 30 Ergebnisse. */
@media(max-width:900px){
  .zweispalt{grid-template-columns:1fr;gap:0}
  .schiene-seite{display:none}
  .liste .filter-mobil{display:block}
}
.zeilen{list-style:none;padding:0;margin:0;max-width:none;border-top:2px solid var(--linie-stark)}
.zeile{
  display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;
  grid-template-areas:"platz wer wert" "platz punkte punkte" "platz warum warum";
  gap:var(--r1) var(--r3);align-items:center;padding:var(--r4) 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.3}
.z-wer{grid-area:wer;min-width:0}
.z-name{font-size:var(--t3);font-weight:600;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}
.punkte12{grid-area:punkte;display:flex;flex-wrap:wrap;gap:var(--r1);list-style:none;padding:0;margin:0;max-width:none}
/* backwards und nicht both, und kein to-Keyframe: Die Animation endet im
   EIGENEN Zustand des Punktes. Mit both stand ein nicht gemessener Punkt
   danach auf opacity 1 statt .4 - die Bewegung haette etwas erzeugt. Gemessen
   in der Browserprobe. */
.punkte12 .p{display:grid;place-items:center;width:20px;height:16px;border-radius:2px;margin:0;font-size:var(--t1);font-weight:700;line-height:1;color:var(--band-text);animation:erscheinen 25ms ease-out backwards;animation-delay:calc(var(--i) * 25ms)}
.punkte12 .ja{background:var(--ja)}
.punkte12 .nein{background:var(--nein)}
/* Nicht gemessen: Grund statt Farbe, der Strich in gedaempfter Tinte. Keine
   Deckkraft mehr - Text mit 40 Prozent Deckkraft hielte keinen Kontrast. */
.punkte12 .leer{background:var(--flaeche);color:var(--gedaempft)}
/* Auf dem Telefon bleiben Name und Punktzahl in EINER Zeile; untereinander
   kostete jede Zeile 40 px mehr, mal 28 Anbieter (gemessen 02.09.2026). */
@media(max-width:640px){
  .zeile{grid-template-columns:1.75rem minmax(0,1fr) auto;gap:var(--r1) var(--r2)}
  .z-platz{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-mitte{gap:var(--r1) var(--r3)}
}


/* --- Der Transparenzwert, ueberall gleich (darstellung/wert.js) -----------
   "Transparency 91/100 [A]": das Wort, die Zahl, das Band als Kachel. */
.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:32px;height:32px;font-size:var(--t3);font-weight:700;color:var(--band-text);border-radius:2px}
.wert-band.klein{width:24px;height:24px;font-size:var(--t1)}
.wert-keine{font-size:var(--t1);color:var(--gedaempft)}
.zaehler{display:inline-flex;flex-wrap:wrap;gap:var(--r1) 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)}
.zaehler-nein b{color:var(--nein)}
.zaehler-leer b{color:var(--leer)}

/* --- Die Legende ueber der Liste: drei Zeichen, drei Woerter --------------- */
.legende{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--r1) var(--r4);font-size:var(--t1);color:var(--gedaempft);margin:0 0 var(--r3);max-width:none}
.legende li{margin:0}
.legende i{display:inline-grid;place-items:center;width:20px;height:16px;border-radius:2px;font-style:normal;font-weight:700;font-size:var(--t1);color:var(--band-text);margin-right:var(--r1)}
.legende-ja i{background:var(--ja)}
.legende-nein i{background:var(--nein)}
.legende-leer i{background:var(--flaeche);color:var(--gedaempft)}
.legende-satz{flex-basis:100%}

/* --- Chips: die aktiven Filter, jeder mit dem Weg, ihn zu entfernen -------- */
.chips{list-style:none;padding:0;margin:0 0 var(--r3);max-width:none;display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center}
.chips li{margin:0}
.chips a{display:inline-flex;align-items:center;gap:var(--r2);min-height:44px;padding:0 var(--r3);border:1px solid var(--linie);border-radius:999px;font-size:var(--t1);color:var(--tinte);text-decoration:none;background:var(--flaeche)}
.chips a:hover{border-color:var(--akzent);color:var(--akzent);text-decoration:none}
.chips-alle a{background:transparent;color:var(--akzent)}

/* --- Das Formular der freien Auswahl: "Compare selected" ------------------- */
.vergleichsleiste{display:flex;align-items:center;flex-wrap:wrap;gap:var(--r2) var(--r3);margin:0 0 var(--r3);max-width:none;font-size:var(--t1);color:var(--gedaempft)}
.vergleichsleiste.unten{margin:var(--r4) 0 0}
.vergleichsleiste button{background:transparent;color:var(--tinte);border:1px solid var(--linie-stark)}
.vergleichsleiste button:hover{filter:none;background:var(--flaeche)}
.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;padding:0 var(--r1);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}
/* Die Auswahl auf dem Profil: ein select und ein Knopf in einer Zeile. */
.vergleichswahl{margin:0 0 var(--r3)}
.vergleichswahl label{margin:0 0 var(--r1)}
.vergleichswahl-zeile{display:flex;gap:var(--r2);align-items:center}
.vergleichswahl-zeile select{flex:1 1 0%;min-width:0}
.vergleichswahl-zeile button{flex:none}

/* --- Die Zeile: Luecke und Rechnung ---------------------------------------- */
.z-mitte{grid-area:punkte;display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r4)}
.z-luecke{font-size:var(--t2);color:var(--gedaempft)}
.z-luecke-wort{color:var(--nein);font-weight:600}
.z-luecke a{color:var(--tinte)}
.z-luecke.keine{color:var(--ja)}
.z-luecke.leer{color:var(--leer)}
.z-warum{grid-area:warum;margin:0}
.z-warum summary{color:var(--gedaempft);font-size:var(--t2);padding:var(--r2) 0;margin:0;min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--r1) var(--r3);list-style:none}
.z-warum summary::-webkit-details-marker{display:none}
.z-warum-wort{color:var(--akzent);white-space:nowrap}
.z-warum summary:hover{text-decoration:none}
.z-warum summary:hover .z-warum-wort{text-decoration:underline}
.z-warum-inhalt{padding:0 0 var(--r3)}
.z-warum-inhalt p{font-size:var(--t2);margin:0 0 var(--r2);max-width:var(--mass)}
.z-warum-inhalt b.ja{color:var(--ja)} .z-warum-inhalt b.nein{color:var(--nein)} .z-warum-inhalt b.leer{color:var(--leer)}
.z-g{font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums}

/* --- Die Filter auf dem Telefon: ein Aufklapper UEBER der Liste ------------ */
.filter-mobil{display:none;margin:0 0 var(--r3);border:1px solid var(--linie);border-radius:var(--rund)}
.filter-mobil summary{display:flex;align-items:center;gap:var(--r2);min-height:44px;padding:0 var(--r4);margin:0;font-size:var(--t2);font-weight:600;color:var(--tinte);cursor:pointer;list-style:none}
.filter-mobil summary::-webkit-details-marker{display:none}
.filter-mobil summary .n{color:var(--gedaempft);font-weight:400}
.filter-mobil 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}
.filter-mobil[open] summary::after{transform:rotate(-135deg)}
.filter-mobil .schiene{position:static;padding:0 var(--r4) var(--r4);border-top:1px solid var(--linie)}
.filter-mobil fieldset:first-of-type{margin-top:var(--r3)}
.kaestchen.aus label{color:var(--gedaempft)}
.kaestchen.aus label:hover{color:var(--gedaempft)}
.kaestchen.aus input{cursor:default}

/* --- Die Startseite: der grosse Einstieg ----------------------------------- */
.unterzeile{font-size:var(--t4);line-height:1.3;margin:0 0 var(--r5);max-width:var(--mass);color:var(--tinte)}
.unterzeile b{font-weight:700;font-variant-numeric:tabular-nums}
.grosse-suche{display:flex;gap:var(--r2);max-width:36rem;margin:0 0 var(--r3)}
.grosse-suche input{min-width:0;min-height:56px;font-size:var(--t3);padding:var(--r2) var(--r4)}
.grosse-suche button{flex:none;min-height:56px;padding:var(--r2) var(--r5)}
.beispiele{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--r2);margin:0 0 var(--r3);max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.beispiele a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 var(--r1)}
.vertrauen{display:flex;flex-wrap:wrap;gap:var(--r1) var(--r4);margin:0 0 var(--r2);max-width:none;font-size:var(--t2);font-weight:600;color:var(--tinte)}
.vertrauen span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ja);margin-right:var(--r2);vertical-align:middle}
.aufschlag{display:block;padding:var(--r7) 0 var(--r6);border-bottom:1px solid var(--linie)}
.aufschlag .rubrik{margin:0 0 var(--r3)}
.aufschlag .merkzeile{margin:0 0 var(--r4)}
.aufschlag .knopfreihe{margin:0}
@media(max-width:640px){.aufschlag{padding:var(--r5) 0} .aufschlag .merkzeile{margin:0 0 var(--r3)} .grosse-suche input,.grosse-suche button{min-height:48px}}
/* Die meistgefragten Rankings: eine Zeile je Kategorie, ganz als Verweis. */
.beliebt{list-style:none;padding:0;margin:var(--r4) 0 0;max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:0 var(--r6);border-top:1px solid var(--linie)}
.beliebt li{margin:0;border-bottom:1px solid var(--linie)}
.beliebt a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name median" "zahl median";align-items:center;gap:0 var(--r3);min-height:44px;padding:var(--r2) 0;color:var(--tinte);text-decoration:none}
.beliebt a:hover .beliebt-name{color:var(--akzent);text-decoration:underline}
.beliebt-name{grid-area:name;font-size:var(--t3);font-weight:600}
.beliebt-zahl{grid-area:zahl;font-size:var(--t1);color:var(--gedaempft)}
.beliebt-median{grid-area:median;display:inline-flex;align-items:center;gap:var(--r1);font-size:var(--t1);color:var(--gedaempft);font-variant-numeric:tabular-nums}
.beliebt-median b{color:var(--tinte);font-size:var(--t2)}
/* Der typische Anbieter: der Median als Zeile, darunter die Verteilung. */
.typisch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r4);margin:var(--r4) 0 var(--r3);max-width:none}
.typisch-wort{font-size:var(--t1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft)}
.typisch-wert{display:inline-flex;align-items:center;gap:var(--r2);font-size:var(--t2)}
.typisch-wert b{font-size:var(--t4);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}

/* --- 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(--r3);max-width:34rem}
.bv{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:var(--r1)}
.bv-zeile{display:grid;grid-template-columns:24px minmax(0,1fr) 6rem;align-items:center;gap:var(--r2);margin:0;min-height:24px}
.bv-zeile.hier .bv-zahl b{color:var(--akzent)}
.bv-note{display:grid;place-items:center;width:24px;height:24px;font-size:var(--t1);font-weight:700;color:var(--band-text);border-radius:2px}
.bv-balken{display:block;height:16px;background:var(--flaeche);border-radius:2px;overflow:hidden}
.bv-balken i{display:block;height:100%;width:var(--w);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(--r2);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:8px;background:var(--flaeche);border-radius:2px;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 0 var(--r3);max-width:34rem}
.mv{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:var(--r1)}
.mv-zeile{display:grid;grid-template-columns:minmax(6rem,10rem) minmax(0,1fr) 2.5rem;align-items:center;gap:var(--r2);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:12px;background:var(--flaeche);border-radius:2px;overflow:hidden}
.mv-balken i{display:block;height:100%;width:var(--w);background:var(--gedaempft);transform-origin:left center;animation:einlaufen 400ms ease-out}
.mv-zeile.hier .mv-balken i{background:var(--tinte)}
.mv-wert{font-variant-numeric:tabular-nums;text-align:right;font-size:var(--t2)}
.gewicht-wort{font-size:var(--t1);color:var(--gedaempft);margin-left:var(--r1)}

/* --- Das Profil: die Antwort im Kopf, das Etikett als Spalte oder Aufklapper - */
.p-kopf{padding:var(--r4) 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:var(--r4) 0 0}
.p-wert{margin:0 0 var(--r2);max-width:none}
.p-fakten{display:flex;flex-wrap:wrap;gap:var(--r1) var(--r4);margin:0 0 var(--r2);max-width:none;font-size:var(--t2);color:var(--gedaempft)}
.p-fakten b{color:var(--tinte)}
.p-luecken{margin:0 0 var(--r2);max-width:none;font-size:var(--t2);display:flex;flex-wrap:wrap;gap:var(--r1) var(--r3);align-items:baseline}
.p-luecken b.nein{color:var(--nein)}
.p-kopf .quelle{margin:0}
.e-mobil{display:none;margin:0 0 var(--r4)}
.e-mobil summary{display:flex;align-items:center;min-height:44px;padding:0 var(--r4);margin:0;border:1px solid var(--linie);border-radius:var(--rund);font-size:var(--t2);font-weight:600;color:var(--tinte);list-style:none;cursor:pointer}
.e-mobil summary::-webkit-details-marker{display:none}
.e-mobil 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}
.e-mobil[open] summary::after{transform:rotate(-135deg)}
.e-mobil .etikett{margin-top:var(--r3)}
@media(max-width:980px){.e-spalte{display:none} .e-mobil{display:block} .etikettspalt{margin-top:var(--r4)}}
/* Eine Belegtgruppe 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(--r2);min-height:44px;padding:var(--r2) 0;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}
.handlungen{margin-top:var(--r2)}
/* Die Vergleichsseite: der Wert je Anbieter als Zeile. */
.v-werte{list-style:none;padding:0;margin:0 0 var(--r3);max-width:none;border-top:1px solid var(--linie)}
.v-werte li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r4);margin:0;padding:var(--r2) 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)}

/* --- Tippziele: jeder Verweis, der nicht in einem Satz steht, ist 44 px ----
   Gemessen am 02.09.2026 gegen den Live-Bestand bei 390 px: 21 von 27
   Verweisgruppen lagen darunter - der Wegweiser der Kriterienseite bei 15 px
   mit 146 Verweisen, die Namen der Kategoriezeilen bei 20, die Prueflisten
   bei 20, die Vergleichsliste bei 20 und 26, Suchtreffer bei 34, die Familien
   der Startseite bei 39. Der Waechter kannte nur "nav a" und eine getippte
   Liste; er leitet die Ziele jetzt aus dem DOM ab (browser-test/e2e.py).
   Ein Verweis bekommt sein Mass ueber Padding, nie ueber negative Raender:
   Die waeren ein Tippziel, das dem Nachbarn gehoert, und der
   Weissraum-Waechter meldete sie ohnehin. Die Zeile, die das Padding traegt,
   gibt ihres ab, damit die Seiten nicht laenger werden.
   Die Zeilen des Etiketts sind die eine Ausnahme: ein Gegenstand fester
   Dichte, der Verweis fuellt die Zeile (30 px, WCAG 2.5.8 verlangt 24). */
.wortmarke{min-width:44px;min-height:44px;padding:0}
/* min-width, weil ein kurzer Name sonst schmaler als 44 px ist: "Box" mass 31. */
.z-name{display:inline-block;min-width:44px;padding:var(--r3) 0}
.zeile{padding:var(--r1) 0}
.pruefliste li{padding:0}
.pruefliste a{display:block;padding:var(--r3) 0;line-height:1.5}
/* Auf dem Telefon zweispaltig: zwoelf Zeilen zu 44 px kosteten 200 px mehr,
   und die Startseite bleibt unter 2500 px. Die volle Liste (.voll) traegt
   den Anteil je Zeile und bleibt einspaltig. */
@media(max-width:640px){
  .pruefliste:not(.voll){grid-template-columns:1fr 1fr;gap:0 var(--r4)}
  .pruefliste:not(.voll) li{padding:0}
  .pruefliste:not(.voll) a{font-size:var(--t2);line-height:1.5}
  /* Zwei Spalten zu 160 px tragen die Staebe, aber nicht das Wort dazu; das
     Wort steht im aria-label und auf /criteria/ in voller Breite. */
  .pruefliste:not(.voll) .gewicht-wort{display:none}
  .pruefliste:not(.voll) li{grid-template-columns:minmax(0,1fr) auto}
  .pruefliste.voll li{padding:0}
}
li.treffer a{display:inline-block;min-width:44px;padding:var(--r3) 0}
.familie .inhalt a{padding:var(--r3) 0}
ul.liste{list-style:none;padding:0;margin:0 0 var(--r3);max-width:none}
ul.liste li{margin:0}
ul.liste a{display:inline-block;min-width:44px;padding:var(--r3) 0}
main h2>a{display:inline-block;min-width:44px;padding:var(--r3) 0}
dt>a{display:inline-block;min-width:44px;padding:var(--r3) 0}
.abrufe-liste dt{margin:0}
/* 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-block;min-width:44px;padding:var(--r3) 0}
tbody th:has(>a),td.verweis{padding-top:0;padding-bottom:0}
.e-zeile{padding:0}
.e-zeile a{display:block;padding:var(--r1) 0}
/* Ein Verweis, der allein eine Handlung ist (Korrektur melden, zurueck). */
.handlung{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
/* Der Wegweiser: Verweise als Kette, jeder ein Tippziel. */
.wegweiser{list-style:none;padding:0;margin:0 0 var(--r3);max-width:none;display:flex;flex-wrap:wrap;gap:0 var(--r4)}
.wegweiser li{margin:0}
.wegweiser a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--t2)}

/* --- Hover und Fokus: 120 ms, Rueckmeldung, sonst nichts ----------------
   Der Auftrag in einem Satz. 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. browser-test/e2e.py faehrt jedes Ziel mit der Maus an und jeden
   Tab-Halt mit der Tastatur; Rand- und Unterstreichungsfarbe stehen in der
   Liste, weil sie currentcolor folgen und sich mit der Farbe aendern.

   Die Sprache der Rueckmeldung, je nach dem, was das Element ist: Text in
   Tinte wird zum Akzent (Menue, Namen, Aufklapper, Beschriftungen); ein
   Verweis, der schon Akzent ist, unterstreicht dicker; ein gefuellter Knopf
   wird heller, ein leerer bekommt Grund; eine Zeile bekommt Grund; ein Feld
   bekommt einen staerkeren Rand. Diese Regeln stehen am Ende, weil sie
   gleich spezifische Farbregeln weiter oben ueberstimmen muessen. */
a,button,summary,input,select,.kaestchen label,.zeile,tbody tr{
  transition:color 120ms ease-out,background-color 120ms ease-out,border-color 120ms ease-out,
    filter 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,.e-mobil summary:hover,.filter-mobil summary:hover,.menue summary:hover,.untermenue summary:hover{text-decoration:none}
.filter-mobil summary:hover,.e-mobil summary:hover{color:var(--akzent)}
/* Der offene Aufklapper ist schon Akzent; unter der Maus unterstreicht er. */
.untermenue[open] summary:hover{text-decoration:underline}
input:hover:not(:focus-visible),select:hover:not(:focus-visible){border-color:var(--linie-stark)}
.kaestchen label:hover{color:var(--akzent)}
.knopf.leer:hover{filter:none;background:var(--flaeche)}

@keyframes einlaufen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes erscheinen{from{opacity:0;transform:scale(.5)}}
@keyframes zeichnen{from{stroke-dashoffset:var(--laenge)}to{stroke-dashoffset:0}}

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