: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. DIE WERTE KOMMEN AUS lib/band.js UND STEHEN HIER NICHT MEHR GETIPPT: Der Buchstabe darauf ist weisser Text und braucht 4,5:1, und die Rechnung dafuer gehoert dorthin, wo die Schwellen stehen. --- */ --a:#1a7f4b; --b:#457c1b; --c:#8d6900; --d:#b35309; --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
. DAS MENUE STEHT ZWEIMAL IM MARKUP, einmal als Leiste und einmal im Aufklapper. Ein geschlossenes
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. DIE SCHWELLE STEHT SEIT DEM 04.09.2026 BEI 1024 UND NICHT MEHR BEI 860 px. Mit dem fuenften Punkt "Data" ist die Leiste zu voll fuer den Bereich dazwischen: Suchfeld, vier Verweise, ein Aufklapper und ein Knopf haben auf einem 900-px-Schirm keinen Platz nebeneinander, und was passiert, ist kein Umbruch, sondern ein Zusammendruecken. Am 31.08.2026 hat schon einmal ein fuenfter Menuepunkt die Kopfnavigation gesprengt (367 gegen 358 px), und 141 gruene Tests haben es nicht bemerkt. */ .menue{display:none;margin:0} @media(max-width:1024px){ .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} /* DIE KENNUNG DES ABZUGS. Sie steht in der Fusszeile jeder Seite mit gemessenen Zahlen und sagt, aus welchem Stand sie kommen. Kleiner als der uebrige Fusstext und mit einer Linie darueber: Sie gehoert zur Seite und nicht zum Haftungsteil. Die Kennung selbst ist Code, damit sie sich markieren und in eine Akte kopieren laesst. */ .abzug{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--r2);font-size:var(--t1);border-top:1px solid var(--linie);padding-top:var(--r3);max-width:none} .abzug-wort{font-weight:600;color:var(--tinte)} .abzug code{font-size:var(--t1);background:var(--flaeche);border-radius:var(--rund-klein);padding:0 var(--r1);color:var(--tinte)} .abzug a{color:var(--gedaempft);text-decoration:underline} .abzug a:hover{color:var(--akzent)} /* --- 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} /* --- Die Punktzahl ------------------------------------------------------- SIE LIEF BIS ZUM 04.09.2026 VON NULL HOCH, ueber counter() und @property, ohne eine Zeile JavaScript. Technisch huebsch und sachlich falsch: Der Zwischenzustand ist eine LESBARE Zahl. Eine 70 stand beim Laden sichtbar als "7/100" da, eine 65 als "6/100" - auf einer Seite, deren ganzer Zweck die nachpruefbare Zahl ueber eine echte Firma ist. Was bleibt, ist das Einblenden der Karte: eine Bewegung, die nichts behauptet. tabular-nums bleibt, damit zwei Karten nebeneinander die Ziffern auf derselben Achse haben. */ .punktzahl,.sk-punkte,.p-punkte{font-variant-numeric:tabular-nums} /* --- 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)}} /* DIE KARTE BLENDET EIN, DIE ZAHL NICHT. Ein kurzes Aufblenden sagt "hier ist ein Gegenstand"; eine hochlaufende Ziffer sagt eine falsche Zahl. */ .schaukarte{padding:var(--r5)} @media (prefers-reduced-motion:no-preference){ .schaukarte{animation:aufblenden 260ms ease-out} } .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)} .familienchips .n{margin-left:var(--r2);font-weight:400;color:var(--gedaempft);font-variant-numeric:tabular-nums} /* --- Der Kategorie-Explorer (/categories) ------------------------------- ZWEIHUNDERT KATEGORIEN SIND KEINE LISTE, SIE SIND EIN VERZEICHNIS. Auf der Startseite standen sie als 273 Verweise und haben die eine wichtige Handlung verduennt. Hier haben sie Platz, und jede Karte traegt, was nur hier nebeneinandersteht: Anbieterzahl, Median, Abdeckung, Verteilung. */ .kx-familie{margin:0 0 var(--r8)} .kx-familie .abschnitt-kopf h2{display:flex;align-items:center;gap:var(--r3);margin:0} .kx-zeichen{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;color:var(--akzent)} .kx-zeichen svg{width:100%;height:100%;display:block} .kx-raster{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))} .kx-karte{display:grid;gap:var(--r3);height:100%;align-content:start} .kx-name{font-size:var(--t3);font-weight:600;letter-spacing:-.01em;color:var(--tinte)} .kx-zahlen{display:flex;flex-wrap:wrap;gap:0 var(--r4);font-size:var(--t1);color:var(--gedaempft)} .kx-zahl b{color:var(--tinte);font-variant-numeric:tabular-nums} .kx-lage{font-size:var(--t1);color:var(--gedaempft)} .kx-lage::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:var(--r2);background:var(--leer);vertical-align:middle} .kx-above::before{background:var(--ja)} .kx-below::before{background:var(--nein)} @media(max-width:640px){.kx-raster{grid-template-columns:1fr}} .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 SORTIERUNG SIND KNOEPFE, damit sie die Auswahl mitnehmen - sie sehen aus wie die Verweise, die sie waren. */ .sortierung button{ display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0; background:none;border:0;color:var(--akzent);font:inherit;font-size:var(--t2);cursor:pointer; } .sortierung button:hover{text-decoration:underline} .sortierung button[aria-current]{color:var(--tinte);font-weight:600;text-decoration:none;cursor:default} /* --- 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. */ /* --- Die Merkliste ------------------------------------------------------- Drei bis fuenf Anbieter nebeneinander, ueber Kategorien hinweg. Der Kopf traegt Name, Herkunft, Zahl und den Weg, einen wieder zu entfernen; auf dem Telefon wird aus jeder ZEILE eine Karte, per CSS und ohne zweite Ausgabe - dieselbe Entscheidung wie bei der Vergleichsmatrix. */ .merkliste th[scope=col]{vertical-align:top;min-width:11rem} .merkliste th[scope=col] a{display:block;font-size:var(--t3)} .ml-unter{display:block;font-size:var(--t1);font-weight:400;color:var(--gedaempft);margin-top:var(--r1)} .ml-wert{display:block;margin-top:var(--r2);font-weight:400;font-variant-numeric:tabular-nums} .ml-wert b{font-size:var(--t4);font-weight:700} .ml-band{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:var(--rund-klein);color:var(--band-text);font-weight:700;font-size:var(--t1);vertical-align:middle} .ml-weg{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t1);font-weight:400;color:var(--gedaempft)} .ml-weg:hover{color:var(--nein-text)} /* --- Die Alternativenseite ------------------------------------------------ "Wer sonst noch?" wird mit einem UNTERSCHIED beantwortet, nicht mit einer Namensliste. Die beiden Spalten tragen die Richtung im Vorzeichen und in der Farbe - und beide Male steht die Zahl als Text daneben. */ .alt-domain{display:block;font-size:var(--t1);font-weight:400;color:var(--gedaempft)} .alt-mehr b,.alt-weniger b{ display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 var(--r1); border-radius:var(--rund-klein);color:var(--band-text);font-size:var(--t1);margin-right:var(--r2); } .alt-mehr b{background:var(--ja)} .alt-weniger b{background:var(--leer)} /* --- Der Quelltextblock der Entwicklerseite ------------------------------- EIN BEISPIEL IST EINE ANTWORT UND KEIN BILD: Es steht als Text da, laesst sich markieren und kopieren, und es scrollt in SICH und nicht die Seite. */ .quelltext{ background:var(--flaeche);border-radius:var(--rund);padding:var(--r4); overflow-x:auto;margin:0 0 var(--r5);max-width:none; } .quelltext code{font-size:var(--t1);line-height:1.5;white-space:pre;background:none;padding:0} /* --- DIE SUCHERGEBNISSE -------------------------------------------------- BEI EINER SUCHE NACH "stripe" standen der ANBIETER Stripe, die Anbieter, deren Subprozessorliste ihn nennt, und die Seiten, die stripe.com beim ersten Laden laden, fast gleich aussehend untereinander. Drei voellig verschiedene Aussagen in derselben Zeilenform. Jede Zeile traegt jetzt ihr Kennzeichen, und ein Anbieter seine Zahl. */ .trefferarten{display:flex;flex-wrap:wrap;gap:var(--r2);margin:0 0 var(--r5)} .trefferarten 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); } .trefferarten a:hover{background:var(--akzent-zart);color:var(--akzent)} .trefferarten a[aria-current]{background:var(--tinte);color:var(--grund)} .trefferarten a[aria-current] .n{color:var(--grund)} .trefferarten .n{color:var(--gedaempft);font-variant-numeric:tabular-nums} ul.treffer{list-style:none;padding:0;margin:0;max-width:none;border-top:1px solid var(--linie)} li.treffer{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--r4); margin:0;padding:var(--r4) 0;border-bottom:1px solid var(--linie); } li.treffer>a{grid-column:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--r3);min-height:44px;text-decoration:none;color:var(--tinte)} /* DIE RUECKMELDUNG SITZT AM VERWEIS SELBST und nicht nur an einem Kind: Die Browserprobe misst die Aenderung an dem Element, ueber dem der Zeiger steht. */ li.treffer>a:hover{color:var(--akzent)} li.treffer>a:hover .tr-name{text-decoration:underline} .tr-name{font-size:var(--t3);font-weight:600} .tr-art{ flex:none;font-size:var(--t1);font-weight:600;letter-spacing:.02em; padding:0 var(--r2);border-radius:var(--rund-klein); background:var(--flaeche);color:var(--gedaempft); } .tr-vendor{background:var(--akzent-zart);color:var(--akzent)} .tr-category{background:var(--flaeche);color:var(--tinte)} .tr-unter{grid-column:1;font-size:var(--t1);color:var(--gedaempft)} .tr-unter a{color:var(--gedaempft)} .tr-warum{grid-column:1;display:block;font-size:var(--t1);color:var(--gedaempft);margin-top:var(--r1);font-style:italic} .tr-wert{grid-column:2;grid-row:1 / span 2;align-self:center;display:inline-flex;align-items:center;gap:var(--r2);font-size:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums} .tr-wert b{font-size:var(--t4);font-weight:700} .tr-band{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--rund-klein);color:var(--band-text);font-weight:700;font-size:var(--t1)} @media(max-width:640px){ li.treffer{grid-template-columns:1fr} .tr-wert{grid-column:1;grid-row:auto;margin-top:var(--r2)} } /* --- DER VERGLEICHSBAUKASTEN (/compare/) --------------------------------- Die Seite sagte "Build your own comparison" und hatte keine Auswahl: Man musste erst eine Kategorie oeffnen. Jetzt zwei Schritte - Kategorie, dann zwei Felder mit Vorschlagsliste. datalist ist echte Vervollstaendigung ohne eine Zeile JavaScript. */ .baukasten{background:var(--flaeche);border-radius:var(--rund-gross);padding:var(--r6);margin:0 0 var(--r8)} @media(max-width:640px){.baukasten{padding:var(--r5)}} .baukasten h2{margin-top:0} .baukasten p{max-width:var(--mass)} .bk-schritt{margin:var(--r5) 0 0} .bk-schritt label{display:block;font-weight:600;font-size:var(--t2);margin:0 0 var(--r2)} .bk-zeile{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:center} .bk-zeile select{flex:1 1 18rem;min-width:0} .bk-paar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:var(--r3);align-items:center} .bk-paar input{min-width:0} .bk-gegen{color:var(--gedaempft);font-size:var(--t2);font-weight:600} .bk-hinweis{font-size:var(--t1);color:var(--gedaempft);margin:var(--r3) 0 0} @media(max-width:640px){ .bk-paar{grid-template-columns:1fr} .bk-gegen{text-align:center} .bk-paar button,.bk-zeile button{width:100%} } /* --- DIE KLEBENDE AUSWAHLLEISTE ----------------------------------------- Sie verschwand beim Scrollen durch eine lange Rangliste - also genau dann, wenn man den zweiten Anbieter anhakt. Jetzt klebt sie am unteren Rand, solange die Liste im Bild ist. DER ZAEHLER IST REINES CSS. Die Seite faehrt script-src 'none', und das ist eine Zusage, die eine Bedienhilfe nicht brechen darf. :has() DARF NICHT IN :has() STEHEN. Die erste Fassung stand am 04.09.2026 als .auswahlfeld:has(li:has(input:checked)) da, war damit ungueltiges CSS, und der Browser hat die ganze Regel verworfen - KEINE der vier Zeilen war sichtbar, auch nicht die fuer "null gewaehlt". Die Browserprobe hat es gemessen; ein Waechter ueber den Quelltext haette die Regel gefunden und fuer richtig gehalten. GUELTIG IST DIE GESCHWISTERKETTE: li:has(input:checked) ~ li:has(...) - beide nebeneinander im selben Selektor, nicht ineinander. Aus "mindestens" wird "genau", indem die naechsthoehere Regel spaeter steht und die vorige wieder ausblendet. Deshalb ist die Leiste das letzte li der Liste: Nur als GESCHWISTER der Zeilen ist sie von ihnen aus erreichbar. OHNE :has() BLEIBT DER NEUTRALE HINWEIS STEHEN. Eine Zahl, die nicht zaehlen kann, waere schlimmer als keine - deshalb @supports und nicht Hoffnung. (Und keine Backticks in dieser Datei, auch nicht im Kommentar.) */ li.vergleichsleiste{ position:sticky;bottom:0;z-index:5;list-style:none;border-bottom:0; display:flex;align-items:center;flex-wrap:wrap;gap:var(--r3) var(--r5); margin:var(--r4) 0 0;max-width:none;font-size:var(--t2);color:var(--gedaempft); padding:var(--r3) var(--r4);border-radius:var(--rund); background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px); border:1px solid var(--linie);box-shadow:var(--schatten); } .vb-zaehler{margin:0;max-width:none;flex:1 1 12rem} .vb-zaehler b{color:var(--tinte)} li.vergleichsleiste button{background:transparent;color:var(--tinte);border:1px solid var(--linie);flex:none} li.vergleichsleiste button:hover{filter:none;background:var(--flaeche)} .vb-z0,.vb-z1,.vb-z2,.vb-z3{display:none} @media(max-width:640px){ /* Auf dem Telefon eine kompakte Leiste ueber die volle Breite. */ li.vergleichsleiste{margin-left:calc(var(--r4) * -1);margin-right:calc(var(--r4) * -1);border-radius:0;border-left:0;border-right:0} li.vergleichsleiste button{width:100%} } @supports selector(:has(*)){ .vb-hinweis{display:none} .zeilen .vb-z0{display:inline} /* mindestens einer */ li:has(input:checked) ~ li.vergleichsleiste .vb-z0{display:none} li:has(input:checked) ~ li.vergleichsleiste .vb-z1{display:inline} /* mindestens zwei: die vorige Zeile wieder aus */ li:has(input:checked) ~ li:has(input:checked) ~ li.vergleichsleiste .vb-z1{display:none} li:has(input:checked) ~ li:has(input:checked) ~ li.vergleichsleiste .vb-z2{display:inline} /* mindestens drei */ li:has(input:checked) ~ li:has(input:checked) ~ li:has(input:checked) ~ li.vergleichsleiste .vb-z2{display:none} li:has(input:checked) ~ li:has(input:checked) ~ li:has(input:checked) ~ li.vergleichsleiste .vb-z3{display:inline} /* DER KNOPF SIEHT ABGESCHALTET AUS, SOLANGE ER NICHTS TUT. Er ist es nicht: Wer ihn ueber die Tastatur erreicht, bekommt vom Server dieselbe hilfreiche Antwort wie bisher. Eine CSS-Sperre ist ein Hinweis und nie das Tor. */ .zeilen .vb-knopf{opacity:.45} li:has(input:checked) ~ li:has(input:checked) ~ li.vergleichsleiste .vb-knopf{ opacity:1;background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent); } li:has(input:checked) ~ li:has(input:checked) ~ li:has(input:checked) ~ li.vergleichsleiste .vb-knopf{ opacity:.45;background:transparent;color:var(--tinte);border-color:var(--linie); } /* DIE ANGEHAKTE ZEILE IST MARKIERT. Die Namen kann die Leiste ohne Skript nicht zeigen; die Zeile selbst kann es, und dort hakt man auch ab. */ .zeilen>li.zeile:has(input:checked){background:var(--akzent-zart);box-shadow:inset 3px 0 0 var(--akzent)} } /* --- 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. */ /* --- Die Alternativenseite ------------------------------------------------ "Wer sonst noch?" wird mit einem UNTERSCHIED beantwortet, nicht mit einer Namensliste. Die beiden Spalten tragen die Richtung im Vorzeichen und in der Farbe - und beide Male steht die Zahl als Text daneben. */ .alt-domain{display:block;font-size:var(--t1);font-weight:400;color:var(--gedaempft)} .alt-mehr b,.alt-weniger b{ display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 var(--r1); border-radius:var(--rund-klein);color:var(--band-text);font-size:var(--t1);margin-right:var(--r2); } .alt-mehr b{background:var(--ja)} .alt-weniger b{background:var(--leer)} /* --- Der Quelltextblock der Entwicklerseite ------------------------------- EIN BEISPIEL IST EINE ANTWORT UND KEIN BILD: Es steht als Text da, laesst sich markieren und kopieren, und es scrollt in SICH und nicht die Seite. */ .quelltext{ background:var(--flaeche);border-radius:var(--rund);padding:var(--r4); overflow-x:auto;margin:0 0 var(--r5);max-width:none; } .quelltext code{font-size:var(--t1);line-height:1.5;white-space:pre;background:none;padding:0} /* --- DIE SUCHERGEBNISSE -------------------------------------------------- BEI EINER SUCHE NACH "stripe" standen der ANBIETER Stripe, die Anbieter, deren Subprozessorliste ihn nennt, und die Seiten, die stripe.com beim ersten Laden laden, fast gleich aussehend untereinander. Drei voellig verschiedene Aussagen in derselben Zeilenform. Jede Zeile traegt jetzt ihr Kennzeichen, und ein Anbieter seine Zahl. */ .trefferarten{display:flex;flex-wrap:wrap;gap:var(--r2);margin:0 0 var(--r5)} .trefferarten 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); } .trefferarten a:hover{background:var(--akzent-zart);color:var(--akzent)} .trefferarten a[aria-current]{background:var(--tinte);color:var(--grund)} .trefferarten a[aria-current] .n{color:var(--grund)} .trefferarten .n{color:var(--gedaempft);font-variant-numeric:tabular-nums} ul.treffer{list-style:none;padding:0;margin:0;max-width:none;border-top:1px solid var(--linie)} li.treffer{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--r4); margin:0;padding:var(--r4) 0;border-bottom:1px solid var(--linie); } li.treffer>a{grid-column:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--r3);min-height:44px;text-decoration:none;color:var(--tinte)} /* DIE RUECKMELDUNG SITZT AM VERWEIS SELBST und nicht nur an einem Kind: Die Browserprobe misst die Aenderung an dem Element, ueber dem der Zeiger steht. */ li.treffer>a:hover{color:var(--akzent)} li.treffer>a:hover .tr-name{text-decoration:underline} .tr-name{font-size:var(--t3);font-weight:600} .tr-art{ flex:none;font-size:var(--t1);font-weight:600;letter-spacing:.02em; padding:0 var(--r2);border-radius:var(--rund-klein); background:var(--flaeche);color:var(--gedaempft); } .tr-vendor{background:var(--akzent-zart);color:var(--akzent)} .tr-category{background:var(--flaeche);color:var(--tinte)} .tr-unter{grid-column:1;font-size:var(--t1);color:var(--gedaempft)} .tr-unter a{color:var(--gedaempft)} .tr-warum{grid-column:1;display:block;font-size:var(--t1);color:var(--gedaempft);margin-top:var(--r1);font-style:italic} .tr-wert{grid-column:2;grid-row:1 / span 2;align-self:center;display:inline-flex;align-items:center;gap:var(--r2);font-size:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums} .tr-wert b{font-size:var(--t4);font-weight:700} .tr-band{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--rund-klein);color:var(--band-text);font-weight:700;font-size:var(--t1)} @media(max-width:640px){ li.treffer{grid-template-columns:1fr} .tr-wert{grid-column:1;grid-row:auto;margin-top:var(--r2)} } /* --- DER VERGLEICHSBAUKASTEN (/compare/) --------------------------------- Die Seite sagte "Build your own comparison" und hatte keine Auswahl: Man musste erst eine Kategorie oeffnen. Jetzt zwei Schritte - Kategorie, dann zwei Felder mit Vorschlagsliste. datalist ist echte Vervollstaendigung ohne eine Zeile JavaScript. */ .baukasten{background:var(--flaeche);border-radius:var(--rund-gross);padding:var(--r6);margin:0 0 var(--r8)} @media(max-width:640px){.baukasten{padding:var(--r5)}} .baukasten h2{margin-top:0} .baukasten p{max-width:var(--mass)} .bk-schritt{margin:var(--r5) 0 0} .bk-schritt label{display:block;font-weight:600;font-size:var(--t2);margin:0 0 var(--r2)} .bk-zeile{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:center} .bk-zeile select{flex:1 1 18rem;min-width:0} .bk-paar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:var(--r3);align-items:center} .bk-paar input{min-width:0} .bk-gegen{color:var(--gedaempft);font-size:var(--t2);font-weight:600} .bk-hinweis{font-size:var(--t1);color:var(--gedaempft);margin:var(--r3) 0 0} @media(max-width:640px){ .bk-paar{grid-template-columns:1fr} .bk-gegen{text-align:center} .bk-paar button,.bk-zeile button{width:100%} } /* --- DIE KLEBENDE AUSWAHLLEISTE ----------------------------------------- Sie verschwand beim Scrollen durch eine lange Rangliste - also genau dann, wenn man den zweiten Anbieter anhakt. Jetzt klebt sie am unteren Rand, solange die Liste im Bild ist. DER ZAEHLER IST REINES CSS. Die Seite faehrt script-src 'none', und das ist eine Zusage, die eine Bedienhilfe nicht brechen darf. Die Regel :has() kann Geschwister zaehlen: "mindestens einer" ist li:has(:checked), "mindestens zwei" derselbe Ausdruck zweimal mit ~. Aus "mindestens" wird "genau", indem man das naechsthoehere ausschliesst. OHNE :has() BLEIBT DER NEUTRALE HINWEIS STEHEN. Eine Zahl, die nicht zaehlen kann, waere schlimmer als keine - deshalb @supports und nicht Hoffnung. (Und keine Backticks in dieser Datei, auch nicht im Kommentar: Sie ist JavaScript mit CSS in einem Template-Literal, und einer beendet es.) */ .auswahlfeld{position:relative} .vergleichsleiste{ position:sticky;bottom:0;z-index:5; display:flex;align-items:center;flex-wrap:wrap;gap:var(--r3) var(--r5); margin:var(--r5) 0 0;max-width:none;font-size:var(--t2);color:var(--gedaempft); padding:var(--r3) var(--r4);border-radius:var(--rund); background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px); border:1px solid var(--linie);box-shadow:var(--schatten); } .vb-zaehler{margin:0;max-width:none;flex:1 1 12rem} .vb-zaehler b{color:var(--tinte)} .vergleichsleiste button{background:transparent;color:var(--tinte);border:1px solid var(--linie);flex:none} .vergleichsleiste button:hover{filter:none;background:var(--flaeche)} .vb-z0,.vb-z1,.vb-z2,.vb-z3{display:none} @media(max-width:640px){ /* Auf dem Telefon eine kompakte Leiste ueber die volle Breite. */ .vergleichsleiste{margin-left:calc(var(--r4) * -1);margin-right:calc(var(--r4) * -1);border-radius:0;border-left:0;border-right:0} .vergleichsleiste button{width:100%} } @supports selector(:has(*)){ .vb-hinweis{display:none} .auswahlfeld:not(:has(.zeilen>li:has(input:checked))) .vb-z0{display:inline} .auswahlfeld:has(.zeilen>li:has(input:checked)):not(:has(.zeilen>li:has(input:checked) ~ li:has(input:checked))) .vb-z1{display:inline} .auswahlfeld:has(.zeilen>li:has(input:checked) ~ li:has(input:checked)):not(:has(.zeilen>li:has(input:checked) ~ li:has(input:checked) ~ li:has(input:checked))) .vb-z2{display:inline} .auswahlfeld:has(.zeilen>li:has(input:checked) ~ li:has(input:checked) ~ li:has(input:checked)) .vb-z3{display:inline} /* DER KNOPF SIEHT ABGESCHALTET AUS, SOLANGE ER NICHTS TUT. Er ist es nicht: Wer ihn ueber die Tastatur erreicht, bekommt vom Server dieselbe hilfreiche Antwort wie bisher. Eine CSS-Sperre ist ein Hinweis und nie das Tor. */ .auswahlfeld:not(:has(.zeilen>li:has(input:checked) ~ li:has(input:checked))) .vb-knopf, .auswahlfeld:has(.zeilen>li:has(input:checked) ~ li:has(input:checked) ~ li:has(input:checked)) .vb-knopf{ opacity:.45; } .auswahlfeld:has(.zeilen>li:has(input:checked) ~ li:has(input:checked)):not(:has(.zeilen>li:has(input:checked) ~ li:has(input:checked) ~ li:has(input:checked))) .vb-knopf{ background:var(--akzent);color:var(--akzent-text);border-color:var(--akzent); } /* DIE ANGEHAKTE ZEILE IST MARKIERT. Die Namen kann die Leiste ohne Skript nicht zeigen; die Zeile selbst kann es, und dort hakt man auch ab. */ .zeilen>li:has(input:checked){background:var(--akzent-zart);box-shadow:inset 3px 0 0 var(--akzent)} } .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
sich per CSS nicht oeffnen laesst. Es ist kein
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} /* --- /data: das Verzeichnis der gemessenen Werte ---------------------- Ein Block je Merkmalsart, darin die haeufigsten Werte als Wortliste. Keine Karte je Wert: Ein Wert ist kein Gegenstand, sondern ein Verweis. */ .datenblock{margin:var(--r8) 0 0;padding-top:var(--r5);border-top:1px solid var(--linie)} .datenblock h2{margin:0;font-size:var(--t5);letter-spacing:-.02em} .datenblock .fuehrung{margin:var(--r2) 0 0} .wertliste{list-style:none;display:flex;flex-wrap:wrap;gap:var(--r2);margin:var(--r4) 0 0;padding:0} .wertliste li{margin:0} .wertliste 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(--t2);text-decoration:none;color:var(--tinte)} .wertliste a:hover{background:var(--akzent-zart);color:var(--akzent);border-color:var(--akzent-zart)} .wertliste .n{color:var(--gedaempft);font-variant-numeric:tabular-nums} /* Das Zitat in einer Tabellenzeile. Es ist fremder Text und wird als solcher gezeigt; die Quelle darunter ist der Beleg. */ td q{color:var(--tinte)} td .quelle{display:inline-block;margin-top:var(--r1);overflow-wrap:anywhere} td .quelle a{color:var(--akzent)} /* --- Die Merkmale: was in dem Dokument steht, das die Zelle gefunden hat --- KEINE KARTE UND KEIN KASTEN. Sie gehoeren zu der Zelle, unter der sie stehen; ein eigener Rahmen machte aus einem Beleg einen zweiten Gegenstand, und eine Karte ist hier fuer einen GEGENSTAND da. Was sie abhebt, ist eine Linie links und sonst nichts. DAS ZITAT LIEGT EINE STUFE TIEFER, mit dem Akzent als Kante: Es ist fremder Text auf unserer Seite, und man soll auf einen Blick sehen, wo er anfaengt und wo er aufhoert. */ .merkmale{list-style:none;margin:var(--r3) 0 0;padding:0 0 0 var(--r4);border-left:2px solid var(--linie);display:flex;flex-direction:column;gap:var(--r3)} .merkmale>li{margin:0;font-size:var(--t2);line-height:1.5} .merkmale b{font-weight:600} .m-was{color:var(--gedaempft)} .m-zahl{font-weight:700} /* WESSEN AUSSAGE DAS IST. Gedaempft und in Klammern: Der Wert bleibt die Auskunft, die Zuschreibung ist ihre Einschraenkung. */ .m-subjekt{color:var(--gedaempft);font-size:var(--t1)} .m-beleg>summary{min-height:44px;font-size:var(--t1)} .merkmale blockquote{margin:var(--r2) 0 0;padding:0 0 0 var(--r3);border-left:2px solid var(--akzent-zart)} .merkmale blockquote p{margin:0;font-size:var(--t1);color:var(--gedaempft)} .merkmale cite{display:block;margin-top:var(--r1);font-style:normal;font-size:var(--t1);color:var(--gedaempft);overflow-wrap:anywhere} /* 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; } /* ERLEDIGT IST NICHT BESTANDEN. Bis zum 04.09.2026 stand hier ein gruenes Haekchen. Es hiess "fertig gemessen" und wurde als "bestanden" gelesen - eine Zusage ueber eine fremde Seite, bevor ein einziges Ergebnis dasteht. Ein gefuellter neutraler Kreis sagt "erledigt" und behauptet nichts; Gruen und Rot gibt es erst auf der Ergebnisseite, wo sie etwas bedeuten. */ .schrittliste .fertig .nummer{background:var(--tinte)} .schrittliste .zustand{font-size:var(--t1);color:var(--gedaempft)} .schrittliste .fertig .zustand{color:var(--tinte)} /* Was jetzt und was nachts gemessen wird - ueber dem Knopf, nicht im Aufklapper darunter. Am 04.09.2026 gemeldet: Die Seite sprach von denselben Kriterien wie das Ranking, und die Einschraenkung kam erst im Ergebnis. */ .umfang{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--r2);margin:var(--r3) 0 var(--r4);font-size:var(--t2);color:var(--gedaempft);max-width:none} .umfang b{color:var(--tinte);font-weight:600} /* 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} /* DER ALTE TREFFERBLOCK IST AM 04.09.2026 ENTFALLEN. Er stand hier ein zweites Mal, weiter unten als der neue, und sein li.treffer-span faerbte ALLES in der Zeile grau - auch den Buchstaben auf der Bandfarbe. Die Browserprobe hat es gemessen: 1,00:1 auf Band C. Zwei Stilbloecke fuer dieselbe Sache sind die zweite Wahrheit, nur in CSS, und die spaetere gewinnt. */ /* --- 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. */ @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 faehrt{from{left:0;opacity:0}} @keyframes aufblenden{from{opacity:0;transform:translateY(6px)}} @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} }