:root {
--c-marke: #1f4fd6;
--c-marke-dunkel: #16379b;
--c-marke-hell: #e9effd;
--c-marke-tint: #f3f6fe;
--c-text: #0f1b33;
--c-text-2: #34425e;
--c-leise: #5b6680;
--c-bg: #fff;
--c-bg-weich: #f4f6fa;
--c-linie: #e2e7f0;
--c-linie-stark: #cfd7e6;
--c-gut: #0e7a4c;
--c-gut-bg: #e7f6ee;
--c-mittel: #8a5a00;
--c-mittel-bg: #fff4dc;
--c-schlecht: #b3261e;
--c-schlecht-bg: #fdecea;
--c-ampel-gruen: #12a150;
--c-ampel-gelb: #f0b000;
--c-ampel-rot: #d93a2f;
--c-cta: #ffb31a;
--c-cta-hover: #f29d00;
--c-cta-text: #1c1400;
--c-anzeige: #8f5f2a;
--c-anzeige-bg: #fff3e3;
--c-anzeige-rand: #fde6c8;
--c-stern: #f5a524;
--c-stern-leer: #d9dfea;
--c-score-a: #0a6a3c;
--c-score-b: #16834d;
--c-score-c: #1f4fd6;
--c-score-d: #586378;
--c-fuss: #0f1b33;
--c-fuss-text: #c3cbe0;
--c-fuss-leise: #9aa6c0;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--fs-xs: .75rem;
--fs-s: .875rem;
--fs-m: 1rem;
--fs-l: 1.125rem;
--fs-h4: 1.0625rem;
--fs-h3: 1.25rem;
--fs-h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
--fs-h1: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
--lh: 1.65;
--lh-eng: 1.25;
--fw-mittel: 600;
--fw-fett: 720;
--fw-schwer: 800;
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 64px;
--abschnitt: clamp(40px, 5vw, 64px);
--rand: clamp(16px, 3vw, 32px);
--breite: 1280px;
--breite-text: 46rem;
--r-s: 6px;
--r-m: 10px;
--r-l: 14px;
--r-rund: 999px;
--sh-1: 0 1px 2px rgba(15, 27, 51, .06);
--sh-2: 0 1px 2px rgba(15, 27, 51, .05), 0 8px 24px rgba(15, 27, 51, .08);
--sh-3: 0 20px 48px rgba(15, 27, 51, .16);
--z-kopf: 50;
--z-sprung: 40;
--z-pop: 70;
--z-menue: 80;
--z-consent: 100;
--kopf-h: 60px;
--sprung-h: 48px;
--dauer: .16s;
}
@media (min-width: 1100px) {
:root { --kopf-h: 68px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: var(--fs-m); line-height: var(--lh); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
@media (min-width: 900px) { body { font-size: 1.0625rem; } }
body > * { width: 100%; min-width: 0; }
main { flex: 1 0 auto; display: block; }
img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }
svg { flex: none; }
a { color: var(--c-marke); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-marke-dunkel); }
:focus-visible { outline: 2px solid var(--c-marke); outline-offset: 2px; border-radius: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--kopf-h) + var(--sprung-h) + 16px); }
h1, h2, h3, h4 { color: var(--c-text); font-weight: var(--fw-schwer); line-height: var(--lh-eng); letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-fett); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-fett); letter-spacing: 0; }
p { margin: 0 0 1em; }
small { font-size: var(--fs-s); }
strong, b { font-weight: var(--fw-fett); }
hr { border: 0; border-top: 1px solid var(--c-linie); margin: var(--s6) 0; }
table { border-collapse: collapse; }
.zahl, td, .ui-tab { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { width: auto !important; position: absolute; left: var(--s3); top: -60px; z-index: 200; background: var(--c-text); color: #fff; padding: var(--s2) var(--s4); border-radius: var(--r-s); font-weight: var(--fw-mittel); text-decoration: none; }
.skip-link:focus { top: var(--s3); color: #fff; }
.leise { color: var(--c-leise); }
.container { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt--weich { background: var(--c-bg-weich); }
.abschnitt--weich + .abschnitt, .abschnitt + .abschnitt--weich { padding-top: var(--abschnitt); }
.stapel > * + * { margin-top: var(--s5); }
.ui-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 1100px) {
.ui-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 64px); }
.ui-layout__seite > .ui-klebt { position: sticky; top: calc(var(--kopf-h) + var(--s5)); }
}
.ui-layout__haupt { min-width: 0; }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: var(--r-m); font-size: .9375rem; font-weight: var(--fw-fett); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--dauer), border-color var(--dauer), color var(--dauer); background: var(--c-bg); color: var(--c-text); border-color: var(--c-linie-stark); }
.ui-btn:hover { background: var(--c-bg-weich); color: var(--c-text); border-color: var(--c-leise); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn--cta { background: var(--c-cta); border-color: var(--c-cta); color: var(--c-cta-text); }
.ui-btn--cta:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-cta-text); }
.ui-btn--dunkel { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.ui-btn--dunkel:hover { background: #1d2c4d; border-color: #1d2c4d; color: #fff; }
.ui-btn--marke { background: var(--c-marke); border-color: var(--c-marke); color: #fff; }
.ui-btn--marke:hover { background: var(--c-marke-dunkel); border-color: var(--c-marke-dunkel); color: #fff; }
.ui-btn--klein { min-height: 36px; padding: 6px 12px; font-size: var(--fs-s); border-radius: var(--r-s); }
.ui-btn--breit { display: flex; width: 100%; }
.ui-link-pfeil { font-weight: var(--fw-mittel); text-decoration: none; overflow-wrap: anywhere; }
.ui-link-pfeil::after { content: "\2060→"; margin-left: .3em; white-space: nowrap; }
.ui-link-pfeil:hover { text-decoration: underline; }
.seitennav { padding: var(--s4) var(--s5); border: 1px solid var(--c-linie); border-radius: var(--r-l); }
.seitennav__titel { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .07em; text-transform: uppercase; color: var(--c-leise); }
.seitennav ul { list-style: none; margin: 0; padding: 0; }
.seitennav a { display: block; padding: 8px 0; color: var(--c-text-2); font-size: var(--fs-s); font-weight: var(--fw-mittel); text-decoration: none; }
.seitennav a:hover { color: var(--c-marke); }
.seitennav a[aria-current] { color: var(--c-marke); }
@media (max-width: 1099.98px) { .seitennav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); } }
main { padding-bottom: var(--abschnitt); }
.werbeleiste { background: var(--c-bg-weich); border-bottom: 1px solid var(--c-linie); color: var(--c-leise); font-size: var(--fs-xs); line-height: 18px; text-align: center; }
.werbeleiste .container { padding-block: 3px; }
.werbeleiste a { color: inherit; display: inline-block; padding-block: 3px; margin-block: -3px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.werbeleiste a:hover { color: var(--c-text); }
.werbeleiste__lang { display: none; }
@media (min-width: 900px) { .werbeleiste__lang { display: inline; } .werbeleiste__kurz { display: none; } }
.kopf { position: sticky; top: 0; z-index: var(--z-kopf); background: var(--c-bg); border-bottom: 1px solid var(--c-linie); }
.kopf__innen { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); min-height: var(--kopf-h); }
.kopf__logo { display: flex; align-items: center; flex: none; margin-right: auto; padding-block: var(--s2); }
.kopf__logo img { display: block; width: auto; height: 26px; }
.kopf__knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-m); color: var(--c-text); text-decoration: none; }
.kopf__knopf:hover, .kopf__knopf[aria-expanded="true"] { background: var(--c-bg-weich); color: var(--c-marke); }
.kopf__knopf--menue { margin-right: -8px; }
.kopf__suche { position: relative; display: none; order: 9; flex: 1 0 100%; margin: 0 0 var(--s3); }
.kopf.ist-suche .kopf__suche { display: block; }
.kopf__feld { width: 100%; height: 44px; padding: 0 48px 0 14px; border: 1.5px solid var(--c-linie); border-radius: var(--r-m); background: var(--c-bg-weich); font-size: var(--fs-m); color: var(--c-text); -webkit-appearance: none; appearance: none; }
.kopf__feld::placeholder { color: var(--c-leise); opacity: 1; }
.kopf__feld:focus { outline: none; border-color: var(--c-marke); background: var(--c-bg); box-shadow: 0 0 0 3px var(--c-marke-hell); }
.kopf__feld::-webkit-search-cancel-button { -webkit-appearance: none; }
.kopf__los { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-s); background: transparent; color: var(--c-leise); }
.kopf__los:hover { color: var(--c-marke); }
@media (min-width: 640px) {
.kopf__logo img { height: 30px; }
.kopf__logo { margin-right: var(--s4); }
.kopf__suche { display: block; order: 0; flex: 1 1 280px; max-width: 520px; margin: 0 auto 0 0; }
.kopf__knopf--suche { display: none; }
}
@media (min-width: 1100px) {
.kopf__logo img { height: 32px; }
.kopf__logo { margin-right: var(--s5); }
.kopf__suche { flex-basis: 320px; max-width: 460px; }
.kopf__knopf--menue { display: none; }
}
.hauptnav__liste, .megamenue ul { list-style: none; margin: 0; padding: 0; }
.hauptnav__link { color: var(--c-text-2); font-weight: var(--fw-mittel); text-decoration: none; }
@media (min-width: 1100px) {
.hauptnav { margin-left: var(--s4); }
.hauptnav__kopf { display: none; }
.hauptnav__liste { display: flex; align-items: center; gap: 2px; }
.hauptnav__punkt--mega { position: static; }
.hauptnav__link { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; border-radius: var(--r-m); font-size: .9375rem; white-space: nowrap; }
.hauptnav__link:hover, .hauptnav__link[aria-expanded="true"] { color: var(--c-marke); background: var(--c-bg-weich); }
.hauptnav__link .ui-icon { transition: transform var(--dauer); }
.hauptnav__link[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.megamenue { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bg); border-top: 1px solid var(--c-linie); box-shadow: var(--sh-3); max-height: calc(100vh - var(--kopf-h) - 24px); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity var(--dauer), transform var(--dauer), visibility 0s linear var(--dauer); }
html:not(.js) .hauptnav__punkt--mega:hover .megamenue, html:not(.js) .hauptnav__punkt--mega:focus-within .megamenue, .hauptnav__punkt--mega.ist-offen .megamenue { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.megamenue__innen { display: flex; gap: var(--s6); padding-top: var(--s5); padding-bottom: var(--s6); }
.megamenue__bereiche { flex: 0 0 272px; padding-right: var(--s5); border-right: 1px solid var(--c-linie); }
.megamenue__ueber { margin: 0 0 var(--s2) 12px; font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .07em; text-transform: uppercase; color: var(--c-leise); }
.megamenue__bereich { display: flex; align-items: center; gap: var(--s2); padding: 8px 12px; border-radius: var(--r-m); color: var(--c-text-2); font-size: .9375rem; font-weight: var(--fw-mittel); line-height: 1.35; text-decoration: none; }
.megamenue__bereich span { flex: 1; }
.megamenue__bereich small { font-size: var(--fs-xs); font-weight: var(--fw-mittel); color: var(--c-leise); background: var(--c-bg-weich); border-radius: var(--r-rund); padding: 1px 8px; }
.megamenue__bereich .ui-icon { opacity: 0; color: var(--c-marke); }
.megamenue__bereich:hover, .megamenue__bereich.is-aktiv { background: var(--c-marke-tint); color: var(--c-marke); }
.megamenue__bereich.is-aktiv small { background: var(--c-bg); }
.megamenue__bereich.is-aktiv .ui-icon { opacity: 1; }
.megamenue__alle { display: inline-block; margin: var(--s3) 0 0 12px; font-size: var(--fs-s); }
.megamenue__flaechen { flex: 1; min-width: 0; }
.megamenue__flaeche { display: none; }
.megamenue__flaeche.is-aktiv { display: block; }
.megamenue__flaeche-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s3); padding: 0 10px; }
.megamenue__zurueck { display: none; }
.megamenue__titel { margin: 0; font-size: 1.125rem; font-weight: var(--fw-schwer); color: var(--c-text); }
.megamenue__flaeche-kopf .ui-link-pfeil { font-size: var(--fs-s); }
.megamenue__hubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--s4); }
.megamenue__hubs a { display: flex; flex-direction: column; padding: 7px 10px; border-radius: var(--r-m); text-decoration: none; line-height: 1.3; }
.megamenue__hubs a:hover { background: var(--c-bg-weich); }
.megamenue__hubs span { font-size: .9375rem; font-weight: var(--fw-mittel); color: var(--c-text); }
.megamenue__hubs a:hover span { color: var(--c-marke); }
.megamenue__hubs small { font-size: var(--fs-xs); color: var(--c-leise); }
}
@media (min-width: 1360px) { .megamenue__hubs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1099.98px) {
.hauptnav { position: fixed; inset: 0; z-index: var(--z-menue); display: none; flex-direction: column; background: var(--c-bg); }
.hauptnav.ist-offen, .hauptnav:target { display: flex; }
.hauptnav__kopf { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--kopf-h); padding-inline: var(--rand); border-bottom: 1px solid var(--c-linie); }
.hauptnav__titel { font-size: var(--fs-l); font-weight: var(--fw-schwer); }
.hauptnav__zu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border-radius: var(--r-m); color: var(--c-text); }
.hauptnav__zu:hover { background: var(--c-bg-weich); }
.hauptnav__liste { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s6); }
.hauptnav__link { display: flex; align-items: center; min-height: 52px; padding: 0 var(--rand); border-bottom: 1px solid var(--c-linie); font-size: 1.0625rem; color: var(--c-text); }
.hauptnav__link--mega { display: none; }
.megamenue__innen { padding-inline: 0; }
.megamenue__ueber { margin: 0; padding: var(--s4) var(--rand) var(--s1); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .07em; text-transform: uppercase; color: var(--c-leise); }
.megamenue__bereich { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--rand); border-bottom: 1px solid var(--c-linie); color: var(--c-text); font-size: 1.0625rem; font-weight: var(--fw-mittel); text-decoration: none; }
.megamenue__bereich span { flex: 1; }
.megamenue__bereich small { font-size: var(--fs-xs); color: var(--c-leise); }
.megamenue__bereich .ui-icon { color: var(--c-leise); }
.megamenue__alle { display: flex; align-items: center; min-height: 52px; padding: 0 var(--rand); border-bottom: 1px solid var(--c-linie); }
.megamenue__flaeche { display: none; }
.megamenue__flaeche.ist-offen { display: block; position: fixed; inset: var(--kopf-h) 0 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; background: var(--c-bg); padding-bottom: var(--s6); }
.megamenue__flaeche-kopf { padding: var(--s1) var(--rand) var(--s3); border-bottom: 1px solid var(--c-linie); }
.megamenue__zurueck { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; margin-left: -6px; padding: 0 8px 0 2px; border: 0; background: none; color: var(--c-marke); font-weight: var(--fw-mittel); }
.megamenue__titel { margin: var(--s1) 0 var(--s1); font-size: 1.375rem; font-weight: var(--fw-schwer); line-height: 1.25; }
.megamenue__flaeche-kopf .ui-link-pfeil { display: inline-block; padding-block: var(--s2); }
.megamenue__hubs a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; padding: 6px var(--rand); border-bottom: 1px solid var(--c-linie); text-decoration: none; }
.megamenue__hubs span { color: var(--c-text); font-weight: var(--fw-mittel); }
.megamenue__hubs small { flex: none; font-size: var(--fs-xs); color: var(--c-leise); }
}
@media (min-width: 640px) and (max-width: 1099.98px) {
.megamenue__hubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); padding-inline: var(--rand); }
.megamenue__hubs a { padding-inline: 0; }
}
body.menue-offen { overflow: hidden; }
.brotkrumen { font-size: var(--fs-s); line-height: 1.5; color: var(--c-leise); padding-top: var(--s3); }
.brotkrumen ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.brotkrumen li { display: inline-flex; align-items: center; min-width: 0; }
.brotkrumen li + li::before { content: ""; width: 6px; height: 6px; margin: 0 9px 0 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; flex: none; }
.brotkrumen a { display: inline-block; padding-block: 4px; color: var(--c-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--c-marke); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--c-text-2); padding-block: 4px; }
.fuss { background: var(--c-fuss); color: var(--c-fuss-text); font-size: var(--fs-s); line-height: 1.6; padding: var(--s7) 0 var(--s5); }
.fuss a { color: #e6ebf7; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss p { margin: 0 0 var(--s3); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.fuss__marke, .fuss__spalte--methodik { grid-column: 1 / -1; }
.fuss__spalte--methodik ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.fuss__logo { display: inline-block; margin-bottom: var(--s3); }
.fuss__logo img { display: block; height: 30px; width: auto; }
.fuss__marke p { max-width: 48ch; }
.fuss__klein { font-size: var(--fs-xs); color: var(--c-fuss-leise); }
.fuss__titel { color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s2) !important; }
.fuss li a, .fuss__linkknopf { display: block; padding: 9px 0; line-height: 1.35; }
.fuss__linkknopf { border: 0; background: none; color: #e6ebf7; text-align: left; font-size: inherit; }
.fuss__linkknopf:hover { color: #fff; text-decoration: underline; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-xs); color: var(--c-fuss-leise); }
@media (min-width: 900px) {
.fuss { padding-top: var(--s8); }
.fuss__raster { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.fuss__marke, .fuss__spalte--methodik { grid-column: auto; }
.fuss__spalte--methodik ul { display: block; }
.fuss li a, .fuss__linkknopf { padding: 5px 0; }
}
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-consent); background: var(--c-bg); border-top: 1px solid var(--c-linie); box-shadow: 0 -8px 32px rgba(15, 27, 51, .14); padding-block: var(--s4); max-height: 85vh; overflow-y: auto; }
.consent__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); }
.consent__text { flex: 1 1 480px; margin: 0; font-size: var(--fs-s); line-height: 1.55; color: var(--c-text-2); }
.consent__text strong { display: block; margin-bottom: var(--s1); font-size: var(--fs-m); color: var(--c-text); }
.consent__knoepfe, .consent-dialog__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.consent__knoepfe .ui-btn, .consent-dialog__knoepfe .ui-btn { flex: 1 1 140px; }
.consent__neben { flex-basis: 100% !important; }
@media (min-width: 900px) { .consent__knoepfe { flex: 0 1 auto; } .consent__knoepfe .ui-btn { min-width: 168px; } .consent__knoepfe .consent__neben { flex-basis: auto !important; order: -1; } }
.consent-dialog { position: fixed; inset: 0; z-index: calc(var(--z-consent) + 1); display: grid; place-items: center; padding: var(--s4); background: rgba(10, 20, 42, .55); }
.consent-dialog__box { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: var(--s5); border-radius: var(--r-l); background: var(--c-bg); box-shadow: var(--sh-3); }
.consent-dialog__box h2 { margin: 0 0 var(--s2); font-size: 1.375rem; }
.consent-dialog__box > p { font-size: var(--fs-s); color: var(--c-text-2); }
.consent-kat { margin: var(--s3) 0; padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-m); }
.consent-kat label { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 32px; font-weight: var(--fw-fett); cursor: pointer; }
.consent-kat input { width: 20px; height: 20px; accent-color: var(--c-marke); }
.consent-kat p { margin: var(--s1) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.consent-dialog__knoepfe { margin-top: var(--s4); }
.prosa { color: var(--c-text-2); }
.prosa > :first-child { margin-top: 0; }
.prosa > :last-child { margin-bottom: 0; }
.prosa h2 { margin: 2em 0 .6em; color: var(--c-text); }
.prosa h3 { margin: 1.7em 0 .5em; color: var(--c-text); }
.prosa h4 { margin: 1.5em 0 .4em; color: var(--c-text); }
.prosa h2 + h3 { margin-top: .9em; }
.prosa p, .prosa ul, .prosa ol, .prosa blockquote, .prosa dl { margin: 0 0 1.1em; }
.prosa strong { color: var(--c-text); }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa li { margin: .35em 0; padding-left: .2em; }
.prosa li::marker { color: var(--c-marke); }
.prosa ol li::marker { font-weight: var(--fw-fett); }
.prosa li > ul, .prosa li > ol { margin: .35em 0 0; }
.prosa a { font-weight: 500; }
.prosa li > a, .prosa td > a { padding-block: 3px; }
.prosa blockquote { margin-left: 0; padding: var(--s1) 0 var(--s1) var(--s4); border-left: 3px solid var(--c-marke); color: var(--c-text); font-style: italic; }
.prosa code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--c-bg-weich); border-radius: 4px; padding: .1em .35em; }
.prosa img { border-radius: var(--r-m); }
.prosa hr { margin: 2em 0; }
.prosa dt { font-weight: var(--fw-fett); color: var(--c-text); }
.prosa dd { margin: 0 0 .6em; }
.prosa table { display: block; overflow-x: auto; max-width: 100%; margin: 0 0 1.4em; font-size: var(--fs-s); line-height: 1.45; }
.prosa .ui-tabelle { margin: 0 0 1.4em; }
.prosa .ui-tabelle table { display: table; overflow: visible; margin: 0; }
.prosa table, .ui-tabelle table { border-collapse: collapse; width: 100%; color: var(--c-text-2); }
.prosa th, .prosa td, .ui-tabelle th, .ui-tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--c-linie); text-align: left; vertical-align: top; }
.prosa thead th, .ui-tabelle thead th { position: relative; background: var(--c-bg-weich); color: var(--c-text); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; border-bottom-color: var(--c-linie-stark); }
.prosa tbody th, .ui-tabelle tbody th { color: var(--c-text); font-weight: var(--fw-mittel); }
.prosa tbody tr:hover, .ui-tabelle tbody tr:hover { background: var(--c-marke-tint); }
.prosa caption, .ui-tabelle caption { caption-side: bottom; padding-top: var(--s2); font-size: var(--fs-xs); color: var(--c-leise); text-align: left; }
.ui-icon { display: inline-block; vertical-align: middle; }
.ui-score { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: var(--r-s); background: var(--c-score-d); color: #fff; font-size: var(--fs-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle; }
.ui-score--a { background: var(--c-score-a); }
.ui-score--b { background: var(--c-score-b); }
.ui-score--c { background: var(--c-score-c); }
.ui-score--d { background: var(--c-score-d); }
.ui-score__label { display: inline-flex; align-items: center; height: 16px; padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, .35); font-weight: var(--fw-mittel); }
.ui-score__wert { font-weight: var(--fw-mittel); opacity: .95; }
.ui-score__wert strong { margin-right: 1px; font-size: 1rem; font-weight: var(--fw-schwer); }
.ui-score--kompakt { justify-content: center; min-width: 44px; padding: 0 8px; }
.ui-score--kompakt strong { font-size: .9375rem; font-weight: var(--fw-schwer); }
.ui-score--leer { background: var(--c-bg-weich); color: var(--c-leise); font-size: var(--fs-s); }
.ui-score-wort { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.3; color: var(--c-leise); }
.ui-note { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.2; vertical-align: middle; }
.ui-note__siegel { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border: 1.5px solid currentColor; border-radius: var(--r-s); font-size: var(--fs-s); font-weight: var(--fw-mittel); white-space: nowrap; }
.ui-note__siegel strong { font-size: .9375rem; font-weight: var(--fw-schwer); font-variant-numeric: tabular-nums; }
.ui-note--a, .ui-note--b { color: var(--c-gut); }
.ui-note--c { color: var(--c-mittel); }
.ui-note--d, .ui-note--e { color: var(--c-schlecht); }
.ui-note__tests { font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.ui-note--leer { font-size: var(--fs-s); color: var(--c-leise); }
.ui-sterne-zeile { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-s); line-height: 1.3; color: var(--c-text-2); vertical-align: middle; }
.ui-sterne-zeile strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.ui-sterne-zeile__n { color: var(--c-leise); }
.ui-sterne-zeile--kompakt .ui-sterne-zeile__n { flex-basis: 100%; font-size: var(--fs-xs); }
.ui-sterne { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 1px; color: var(--c-stern-leer); white-space: nowrap; }
.ui-sterne::before { content: "★★★★★"; }
.ui-sterne::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: 0; overflow: hidden; color: var(--c-stern); }
.ui-sterne-zeile--kompakt .ui-sterne { font-size: 13px; }
.ui-sterne--5::after { width: 10%; } .ui-sterne--10::after { width: 20%; } .ui-sterne--15::after { width: 30%; } .ui-sterne--20::after { width: 40%; }
.ui-sterne--25::after { width: 50%; } .ui-sterne--30::after { width: 60%; } .ui-sterne--35::after { width: 70%; } .ui-sterne--40::after { width: 80%; }
.ui-sterne--45::after { width: 90%; } .ui-sterne--50::after { width: 100%; }
.ui-preis { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.25; vertical-align: middle; }
.ui-preis__zeile { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ui-preis__ab { font-size: var(--fs-s); color: var(--c-leise); }
.ui-preis__wert { font-size: 1rem; font-weight: var(--fw-schwer); color: var(--c-text); font-variant-numeric: tabular-nums; }
.ui-preis__stand { font-size: var(--fs-xs); color: var(--c-leise); white-space: nowrap; }
.ui-preis__zeile:has(.ui-ampel) + .ui-preis__stand { padding-left: 16px; }
.ui-preis--leer { font-size: var(--fs-s); color: var(--c-leise); }
.ui-ampel { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-ampel-gelb); box-shadow: 0 0 0 3px rgba(240, 176, 0, .18); }
.ui-ampel--gruen { background: var(--c-ampel-gruen); box-shadow: 0 0 0 3px rgba(18, 161, 80, .16); }
.ui-ampel--rot { background: var(--c-ampel-rot); box-shadow: 0 0 0 3px rgba(217, 58, 47, .15); }
.ui-ampel--gross { width: 18px; height: 18px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .8); }
.ui-kaufampel { padding: var(--s4) var(--s4) var(--s3); border-radius: var(--r-l); background: var(--c-mittel-bg); }
.ui-kaufampel--gruen { background: var(--c-gut-bg); }
.ui-kaufampel--rot { background: var(--c-schlecht-bg); }
.ui-kaufampel__kopf { display: flex; align-items: center; gap: var(--s3); }
.ui-kaufampel__frage { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); }
.ui-kaufampel__urteil { margin: 0; font-size: 1.25rem; font-weight: var(--fw-schwer); line-height: 1.2; color: var(--c-mittel); }
.ui-kaufampel--gruen .ui-kaufampel__urteil { color: var(--c-gut); }
.ui-kaufampel--rot .ui-kaufampel__urteil { color: var(--c-schlecht); }
.ui-kaufampel__text { margin: var(--s2) 0 var(--s3); font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
.ui-kaufampel__werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: var(--r-m); overflow: hidden; background: rgba(15, 27, 51, .07); }
.ui-kaufampel__werte > div { padding: 10px 12px; background: rgba(255, 255, 255, .72); min-width: 0; }
.ui-kaufampel__werte > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ui-kaufampel__werte dt { font-size: var(--fs-xs); line-height: 1.35; color: var(--c-leise); }
.ui-kaufampel__werte dd { margin: 2px 0 0; font-size: 1rem; font-weight: var(--fw-schwer); line-height: 1.25; color: var(--c-text); font-variant-numeric: tabular-nums; }
.ui-kaufampel__werte dd small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.ui-kaufampel__stand { margin: var(--s3) 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-leise); }
@media (min-width: 640px) {
.ui-kaufampel { padding: var(--s5) var(--s5) var(--s4); }
.ui-kaufampel__werte { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.ui-kaufampel__werte > div:last-child:nth-child(odd) { grid-column: auto; }
}
.ui-anzeige { display: inline-block; padding: 0 7px; border: 1px solid var(--c-anzeige-rand); border-radius: var(--r-rund); background: var(--c-anzeige-bg); color: var(--c-anzeige); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; white-space: nowrap; }
.ui-anzeige--ecke { position: absolute; top: 8px; right: 8px; z-index: 2; }
.ui-partner { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; vertical-align: middle; }
.ui-partner--breit { display: flex; width: 100%; }
.ui-pangv { margin: var(--s3) 0 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--c-leise); }
.ui-pangv a { color: inherit; }
.ui-bild { display: block; flex: none; object-fit: contain; background: #fff; border-radius: var(--r-m); }
.ui-bild--48 { width: 48px; height: 48px; border-radius: var(--r-s); }
.ui-bild--64 { width: 64px; height: 64px; }
.ui-bild--96 { width: 96px; height: 96px; }
.ui-bild--160 { width: 160px; height: 160px; }
.ui-bild--240 { width: 240px; height: 240px; max-width: 100%; }
.ui-bild--leer { border: 1px solid var(--c-linie); background: var(--c-bg-weich) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3c5' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7v10l8 4 8-4V7z'/%3E%3Cpath d='m4 7 8 4 8-4M12 11v10'/%3E%3C/svg%3E") center / 42% no-repeat; }
.ui-pliste__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-linie); }
.ui-pliste__kopf { display: none; }
.ui-pzeile { position: relative; display: grid; grid-template-columns: auto 64px minmax(0, 1fr); grid-template-areas: "rang bild name" "werte werte werte"; gap: var(--s3); align-items: start; padding: var(--s4) 0; border-bottom: 1px solid var(--c-linie); }
.ui-pzeile--ohne-bild { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rang name" "werte werte"; }
.ui-pzeile--ohne-rang { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "bild name" "werte werte"; }
.ui-pzeile--ohne-rang.ui-pzeile--ohne-bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "werte"; }
.ui-pzeile__rang { grid-area: rang; min-width: 20px; padding-top: 1px; font-size: var(--fs-s); font-weight: var(--fw-schwer); color: var(--c-leise); font-variant-numeric: tabular-nums; }
.ui-pzeile__bild { grid-area: bild; }
.ui-pzeile__name { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-pzeile__link { padding-block: 2px; }
.ui-pzeile__link, .ui-pzeile__titel { font-size: 1rem; font-weight: var(--fw-fett); line-height: 1.35; color: var(--c-text); text-decoration: none; }
.ui-pzeile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ui-pzeile--link:hover .ui-pzeile__link { color: var(--c-marke); text-decoration: underline; }
.ui-pzeile__marke { font-size: var(--fs-s); color: var(--c-leise); }
.ui-pzeile__staerken { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-s); line-height: 1.4; color: var(--c-text-2); }
.ui-pzeile__staerken li { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0; }
.ui-pzeile__staerken .ui-icon { margin-top: 2px; color: var(--c-gut); }
.ui-pzeile__werte { grid-area: werte; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s4); padding: 10px 14px; border-radius: var(--r-m); background: var(--c-bg-weich); }
.ui-pzeile__werte--1 { grid-template-columns: minmax(0, 1fr); }
.ui-pzeile__werte--3 > :last-child { grid-column: 1 / -1; }
.ui-pzeile__wert { min-width: 0; }
.ui-pzeile__lbl { display: block; margin-bottom: 3px; font-size: var(--fs-xs); font-weight: var(--fw-mittel); line-height: 1.2; color: var(--c-leise); }
.ui-pzeile__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ui-pzeile__sub { font-size: var(--fs-xs); line-height: 1.2; color: var(--c-leise); }
.ui-pzeile__leer { font-size: var(--fs-s); color: var(--c-leise); }
@media (max-width: 639.98px) {
.ui-pzeile__staerken li + li { display: none; }
.ui-tabelle--kleben tbody > tr > :first-child, .ui-tabelle--kleben thead th:first-child { min-width: 148px; }
}
@media (min-width: 640px) {
.ui-pzeile { grid-template-areas: "rang bild name" "rang bild werte"; column-gap: var(--s4); }
.ui-pzeile--ohne-bild { grid-template-areas: "rang name" "rang werte"; }
.ui-pzeile--ohne-rang { grid-template-areas: "bild name" "bild werte"; }
.ui-pzeile__werte { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; background: none; }
.ui-pzeile__werte--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-pzeile__werte--3 > :last-child { grid-column: auto; }
.ui-pzeile__werte--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.ui-pliste__kopf, .ui-pzeile { grid-template-columns: 36px 64px minmax(0, 1fr) auto; grid-template-areas: "rang bild name werte"; column-gap: var(--s5); padding-inline: var(--s3); }
.ui-pliste--ohne-bild .ui-pliste__kopf, .ui-pzeile--ohne-bild { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "rang name werte"; }
.ui-pzeile--ohne-rang { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "bild name werte"; }
.ui-pzeile { align-items: center; padding-block: var(--s4); }
.ui-pzeile__rang { padding-top: 0; font-size: 1rem; text-align: center; }
.ui-pzeile--link:hover { background: var(--c-marke-tint); }
.ui-pliste__kopf { display: grid; align-items: end; padding-block: 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .05em; text-transform: uppercase; color: var(--c-leise); }
.ui-pliste__k-rang { text-align: center; }
.ui-pliste__k-name { grid-column: 2 / 4; }
.ui-pliste--ohne-bild .ui-pliste__k-name { grid-column: 2 / 3; }
.ui-pliste__kopf .ui-pzeile__werte { grid-area: auto; }
.ui-pzeile__werte, .ui-pzeile__werte--2, .ui-pzeile__werte--3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; column-gap: var(--s5); align-items: center; }
.ui-pzeile__lbl { display: none; }
.ui-w--score { width: 88px; }
.ui-w--note { width: 108px; }
.ui-w--kaeufer { width: 128px; }
.ui-w--preis { width: 136px; }
}
.ui-seitenkopf { padding-bottom: var(--s6); background: linear-gradient(180deg, var(--c-marke-tint) 0%, var(--c-bg) 100%); border-bottom: 1px solid var(--c-linie); }
.ui-seitenkopf .brotkrumen { margin-bottom: var(--s4); }
.ui-seitenkopf h1 { margin: 0; max-width: 28ch; }
.ui-seitenkopf__chip { display: inline-block; margin: 0 0 var(--s3); padding: 2px 12px; border: 1px solid var(--c-linie-stark); border-radius: var(--r-rund); background: var(--c-bg); color: var(--c-marke); font-size: var(--fs-s); font-weight: var(--fw-fett); }
.ui-seitenkopf__lead { margin: var(--s3) 0 0; max-width: 64ch; font-size: var(--fs-l); line-height: 1.55; color: var(--c-text-2); }
.ui-seitenkopf--dunkel { background: radial-gradient(ellipse 60% 90% at 90% 0%, rgba(42, 87, 216, .55) 0%, transparent 70%), linear-gradient(160deg, #18264d 0%, var(--c-text) 100%); border-bottom: 0; color: #fff; }
.ui-seitenkopf--dunkel h1 { color: #fff; }
.ui-seitenkopf--dunkel .ui-seitenkopf__lead { color: #d3dbee; }
.ui-seitenkopf--dunkel .brotkrumen, .ui-seitenkopf--dunkel .brotkrumen a { color: #b6c1db; }
.ui-seitenkopf--dunkel .brotkrumen [aria-current] { color: #e6ebf7; }
.ui-seitenkopf--dunkel .ui-seitenkopf__chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #fff; }
.ui-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s5); margin-bottom: var(--s4); }
.ui-abschnitt-kopf > h2, .ui-abschnitt-kopf > h3 { margin: 0; }
.ui-abschnitt-kopf__mehr { font-size: var(--fs-s); padding-block: 4px; }
.ui-abschnitt-unter { margin: calc(-1 * var(--s2)) 0 var(--s4); max-width: 72ch; font-size: var(--fs-s); color: var(--c-leise); }
.ui-kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-linie); }
.ui-kennzahl { display: flex; flex-direction: column; min-width: 0; padding: var(--s3) var(--s4); background: var(--c-bg); }
.ui-kennzahl:first-child { border-top-left-radius: var(--r-l); }
.ui-kennzahl:last-child { border-bottom-right-radius: var(--r-l); }
.ui-kennzahl:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom-left-radius: var(--r-l); }
.ui-kennzahl dt { order: 2; font-size: var(--fs-s); font-weight: var(--fw-mittel); line-height: 1.35; color: var(--c-text-2); }
.ui-kennzahl__wert { order: 1; margin: 0 0 2px; font-size: 1.5rem; font-weight: var(--fw-schwer); line-height: 1.15; color: var(--c-text); font-variant-numeric: tabular-nums; }
.ui-kennzahl__unter { order: 3; margin: 2px 0 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--c-leise); }
@media (min-width: 900px) {
.ui-kennzahlen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-kennzahlen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-kennzahlen--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-kennzahlen--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ui-kennzahl { padding: var(--s4) var(--s5); }
.ui-kennzahl:last-child:nth-child(odd) { grid-column: auto; border-bottom-left-radius: 0; }
.ui-kennzahl:last-child { border-top-right-radius: var(--r-l); }
.ui-kennzahl:first-child { border-bottom-left-radius: var(--r-l); }
.ui-kennzahl__wert { font-size: 1.75rem; }
}
.ui-info { display: inline; white-space: nowrap; }
.ui-info__knopf { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-leise); vertical-align: middle; }
.ui-info__knopf:hover, .ui-info__knopf[aria-expanded="true"] { color: var(--c-marke); background: var(--c-marke-hell); }
.ui-info__pop { position: fixed; left: 16px; top: 0; z-index: var(--z-pop); width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 10px 14px; border-radius: var(--r-m); background: var(--c-text); box-shadow: var(--sh-3); color: #fff; font-size: var(--fs-s); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; }
.ui-tabelle__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-linie); border-radius: var(--r-l); background: linear-gradient(to right, var(--c-bg) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local, linear-gradient(to left, var(--c-bg) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(15, 27, 51, .16), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(15, 27, 51, .16), transparent) right / 12px 100% no-repeat scroll; }
.ui-tabelle table { font-size: var(--fs-s); line-height: 1.45; }
.ui-tabelle td, .ui-tabelle tbody th { vertical-align: middle; }
.ui-tabelle tbody tr:last-child > * { border-bottom: 0; }
.ui-tabelle thead th:first-child { border-top-left-radius: var(--r-l); }
.ui-tabelle thead th:last-child { border-top-right-radius: var(--r-l); }
.ui-tabelle--kleben tbody > tr > :first-child, .ui-tabelle--kleben thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--c-bg); box-shadow: inset -1px 0 0 var(--c-linie); }
.ui-tabelle--kleben thead th:first-child { background: var(--c-bg-weich); }
.ui-tabelle__wischen { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; font-size: var(--fs-xs); color: var(--c-leise); }
.ui-auf { border-bottom: 1px solid var(--c-linie); }
:not(.ui-auf) + .ui-auf, .ui-auf:first-child { border-top: 1px solid var(--c-linie); }
.ui-auf__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding: var(--s3) var(--s1); list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: var(--fw-fett); line-height: 1.35; color: var(--c-text); }
.ui-auf__kopf::-webkit-details-marker { display: none; }
.ui-auf__kopf:hover { color: var(--c-marke); }
.ui-auf__kopf > .ui-icon { color: var(--c-leise); transition: transform var(--dauer); }
.ui-auf[open] > .ui-auf__kopf > .ui-icon { transform: rotate(180deg); }
.ui-auf__unter { display: block; margin-top: 2px; font-size: var(--fs-s); font-weight: 400; color: var(--c-leise); }
.ui-auf__inhalt { padding: 0 var(--s1) var(--s5); }
.ui-auf__inhalt > :last-child { margin-bottom: 0; }
.ui-sprung { position: sticky; top: var(--kopf-h); z-index: var(--z-sprung); background: var(--c-bg); border-bottom: 1px solid var(--c-linie); }
.ui-sprung__liste { display: flex; gap: 2px; margin: 0 -12px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ui-sprung__liste::-webkit-scrollbar { display: none; }
.ui-sprung__link { display: flex; align-items: center; height: var(--sprung-h); padding: 0 12px; border-bottom: 2.5px solid transparent; color: var(--c-text-2); font-size: var(--fs-s); font-weight: var(--fw-mittel); text-decoration: none; white-space: nowrap; }
.ui-sprung__link:hover { color: var(--c-marke); }
.ui-sprung__link.is-aktiv { color: var(--c-marke); border-bottom-color: var(--c-marke); }
.ui-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.ui-karte { position: relative; display: flex; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); transition: box-shadow var(--dauer), border-color var(--dauer); }
.ui-karte:hover { border-color: var(--c-linie-stark); box-shadow: var(--sh-2); }
.ui-karte__bild { position: relative; flex: 0 0 104px; background: var(--c-bg-weich); }
.ui-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-karte__text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--s3) var(--s4); }
.ui-karte__titel { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.ui-karte__titel a { display: inline-block; padding-block: 2px; color: var(--c-text); text-decoration: none; }
.ui-karte__titel a::after { content: ""; position: absolute; inset: 0; }
.ui-karte:hover .ui-karte__titel a { color: var(--c-marke); }
.ui-karte__beschreibung { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
.ui-karte__meta { margin: 2px 0 0; font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-marke); }
.ui-ki { position: absolute; right: 6px; bottom: 6px; padding: 2px 5px; border-radius: 4px; background: rgba(15, 27, 51, .62); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-fett); line-height: 1.2; }
@media (min-width: 640px) {
.ui-karten { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.ui-karten > * { grid-column: span 3; }
.ui-karte--mit-bild { flex-direction: column; }
.ui-karte--mit-bild .ui-karte__bild { flex: none; aspect-ratio: 16 / 9; max-height: 224px; }
.ui-karte__text { justify-content: flex-start; padding: var(--s4) var(--s5) var(--s5); }
.ui-karte__beschreibung { -webkit-line-clamp: 3; }
.ui-karte__meta { margin-top: auto; padding-top: var(--s2); }
}
@media (min-width: 640px) and (max-width: 1099.98px) {
.ui-karten > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ui-karten > .ui-karte--mit-bild:last-child:nth-child(odd) { flex-direction: row; }
.ui-karten > .ui-karte--mit-bild:last-child:nth-child(odd) .ui-karte__bild { flex: 0 0 40%; aspect-ratio: auto; min-height: 200px; }
.ui-karten > :last-child:nth-child(odd) .ui-karte__text { justify-content: center; }
.ui-karten > :last-child:nth-child(odd) .ui-karte__meta { margin-top: 0; }
.ui-karten > .ui-karte--mit-bild:last-child:nth-child(odd) .ui-karte__bild { max-height: none; }
}
@media (min-width: 1100px) {
.ui-karten { gap: var(--s5); }
.ui-karten--3 > * { grid-column: span 2; }
.ui-karten--3 > :nth-last-child(2):nth-child(3n+1), .ui-karten--3 > :last-child:nth-child(3n+2) { grid-column: span 3; }
.ui-karten--3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.ui-karten--4 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ui-karten--4 > * { grid-column: span 3; }
.ui-karten--4 > :nth-last-child(2):nth-child(4n+1), .ui-karten--4 > :last-child:nth-child(4n+2) { grid-column: span 6; }
.ui-karten--4 > :nth-last-child(3):nth-child(4n+1), .ui-karten--4 > :nth-last-child(2):nth-child(4n+2), .ui-karten--4 > :last-child:nth-child(4n+3) { grid-column: span 4; }
.ui-karten--4 > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
.ui-karten--3 > .ui-karte--mit-bild:last-child:nth-child(3n+1), .ui-karten--4 > .ui-karte--mit-bild:last-child:nth-child(4n+1) { flex-direction: row; }
.ui-karten--3 > .ui-karte--mit-bild:last-child:nth-child(3n+1) .ui-karte__bild, .ui-karten--4 > .ui-karte--mit-bild:last-child:nth-child(4n+1) .ui-karte__bild { flex: 0 0 34%; aspect-ratio: auto; min-height: 220px; }
.ui-karten--3 > :last-child:nth-child(3n+1) .ui-karte__text, .ui-karten--4 > :last-child:nth-child(4n+1) .ui-karte__text { justify-content: center; padding: var(--s5) var(--s6); }
.ui-karten--3 > :last-child:nth-child(3n+1) .ui-karte__meta, .ui-karten--4 > :last-child:nth-child(4n+1) .ui-karte__meta { margin-top: 0; }
.ui-karten--3 > .ui-karte--mit-bild:last-child:nth-child(3n+1) .ui-karte__bild, .ui-karten--4 > .ui-karte--mit-bild:last-child:nth-child(4n+1) .ui-karte__bild { max-height: none; }
}
.ui-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.ui-chips ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.ui-chips__label { font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-leise); }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-rund); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-s); font-weight: var(--fw-mittel); line-height: 1.2; text-decoration: none; }
.ui-chip small { font-size: var(--fs-xs); color: var(--c-leise); }
a.ui-chip:hover { border-color: var(--c-marke); color: var(--c-marke); }
.ui-chip.is-aktiv { border-color: var(--c-marke); background: var(--c-marke); color: #fff; }
.ui-chip.is-aktiv small { color: rgba(255, 255, 255, .85); }
.ui-hinweis { display: flex; gap: var(--s3); padding: 14px var(--s4); border-radius: var(--r-l); background: var(--c-marke-tint); color: var(--c-text-2); font-size: var(--fs-s); line-height: 1.55; }
.ui-hinweis > .ui-icon { margin-top: 1px; color: var(--c-marke); }
.ui-hinweis--gut { background: var(--c-gut-bg); }
.ui-hinweis--gut > .ui-icon { color: var(--c-gut); }
.ui-hinweis--warnung { background: var(--c-mittel-bg); }
.ui-hinweis--warnung > .ui-icon { color: var(--c-mittel); }
.ui-hinweis__text { min-width: 0; }
.ui-hinweis__text p { margin: 0 0 .5em; }
.ui-hinweis__text > :last-child { margin-bottom: 0; }
.ui-hinweis__titel { margin: 0 0 2px !important; font-weight: var(--fw-fett); color: var(--c-text); }
.ui-leer { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5); border-radius: var(--r-l); background: var(--c-bg-weich); color: var(--c-text-2); }
.ui-leer > .ui-icon { margin-top: 1px; color: var(--c-leise); }
.ui-leer__titel { margin: 0; font-weight: var(--fw-fett); color: var(--c-text); }
.ui-leer__text { margin: 2px 0 0; font-size: var(--fs-s); }
.ui-leer .ui-link-pfeil { display: inline-block; margin-top: 4px; padding-block: 2px; font-size: var(--fs-s); }
.muster-label { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .05em; text-transform: uppercase; color: var(--c-leise); }
.muster-abstand { margin-top: var(--s6); }
.muster-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 640px) { .muster-raster--2, .muster-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .muster-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .muster-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.muster-feld { min-width: 0; padding: var(--s4) var(--s5); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.muster-feld .muster-label:not(:first-child) { margin-top: var(--s4); }
.muster-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.muster-zeile--unten { align-items: flex-end; }
.muster-icons span { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; color: var(--c-text-2); }
.muster-icons code, .muster-farben code { font-size: var(--fs-xs); color: var(--c-leise); }
.muster-h1 { margin: 0 0 .3em; font-size: var(--fs-h1); font-weight: var(--fw-schwer); line-height: var(--lh-eng); letter-spacing: -.02em; color: var(--c-text); }
.muster-farben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s5); padding: 0; list-style: none; }
@media (min-width: 640px) { .muster-farben { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .muster-farben { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.muster-farben li { display: flex; flex-direction: column; gap: var(--s1); }
.muster-farbe { display: block; height: 48px; border-radius: var(--r-m); border: 1px solid rgba(15, 27, 51, .08); }
.muster-farbe--marke { background: var(--c-marke); } .muster-farbe--text { background: var(--c-text); } .muster-farbe--leise { background: var(--c-leise); }
.muster-farbe--weich { background: var(--c-bg-weich); } .muster-farbe--cta { background: var(--c-cta); } .muster-farbe--gut { background: var(--c-gut); }
.muster-farbe--mittel { background: var(--c-mittel); } .muster-farbe--schlecht { background: var(--c-schlecht); }
.muster-kachel { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s4); padding-right: 72px; border: 1px solid var(--c-linie); border-radius: var(--r-l); color: var(--c-text); text-decoration: none; }
.muster-kachel:hover { border-color: var(--c-linie-stark); box-shadow: var(--sh-2); }
.muster-kachel > span:last-child { display: flex; flex-direction: column; font-size: var(--fs-s); line-height: 1.4; }
.muster-tests { margin: 0; padding: 0; list-style: none; }
.muster-tests li { margin: var(--s2) 0; }
.muster-daten { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 640px) { .muster-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }
.muster-daten div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--c-linie); font-size: var(--fs-s); }
.muster-daten dt { color: var(--c-leise); }
.muster-daten dd { margin: 0; text-align: right; font-weight: var(--fw-mittel); }
.muster-zeile:has(> :only-child) { display: block; }
.prod-h3 { margin: var(--s5) 0 var(--s3); font-size: 1.0625rem; }
.prod-kopf { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "galerie" "titel" "wertung" "preis" "punkte"; gap: var(--s4); align-items: start; padding: var(--s3) 0 var(--s6); }
.prod-kopf--ohne-bild { grid-template-areas: "titel" "wertung" "preis" "punkte"; }
.prod-kopf__galerie { grid-area: galerie; min-width: 0; }
.prod-kopf__titel { grid-area: titel; min-width: 0; }
.prod-kopf__wertung { grid-area: wertung; min-width: 0; }
.prod-kopf__preis { grid-area: preis; min-width: 0; }
.prod-kopf__punkte { grid-area: punkte; min-width: 0; }
@media (min-width: 640px) and (max-width: 899.98px) {
.prod-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "galerie galerie" "titel titel" "wertung preis" "punkte punkte"; }
.prod-kopf--ohne-bild { grid-template-areas: "titel titel" "wertung preis" "punkte punkte"; }
}
@media (min-width: 900px) {
.prod-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "galerie titel" "galerie punkte" "wertung punkte" "preis punkte"; gap: var(--s4) var(--s6); padding-top: var(--s4); }
.prod-kopf--ohne-bild { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto auto 1fr; grid-template-areas: "titel wertung" "punkte wertung" "punkte preis" "punkte ."; }
}
@media (min-width: 1100px) {
.prod-kopf { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) 312px; grid-template-rows: auto auto auto 1fr; grid-template-areas: "galerie titel wertung" "galerie punkte wertung" "galerie punkte preis" "galerie punkte ."; gap: var(--s4) clamp(24px, 3vw, 40px); }
.prod-kopf--ohne-bild { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto auto 1fr; grid-template-areas: "titel wertung" "punkte wertung" "punkte preis" "punkte ."; }
}
.prod-galerie { position: relative; padding: var(--s3); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: #fff; }
.prod-galerie__band { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.prod-galerie__band::-webkit-scrollbar { display: none; }
.prod-galerie__bild { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; max-height: 320px; scroll-snap-align: center; }
.prod-galerie__bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.prod-galerie__thumbs { display: flex; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; overflow-x: auto; }
.prod-galerie__thumbs a { display: block; width: 56px; height: 56px; padding: 3px; border: 1.5px solid var(--c-linie); border-radius: var(--r-s); }
.prod-galerie__thumbs a:hover { border-color: var(--c-marke); }
.prod-galerie__thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
.prod-galerie__quelle { position: absolute; right: var(--s3); bottom: 6px; margin: 0; font-size: var(--fs-xs); color: var(--c-leise); }
.prod-galerie--mehr .prod-galerie__quelle { position: static; margin-top: var(--s2); text-align: right; }
.prod-galerie__leer { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s5) var(--s3); text-align: center; }
.prod-galerie__leer .ui-bild { width: 160px; height: 160px; }
.prod-galerie__leer p { margin: 0; font-size: var(--fs-s); color: var(--c-leise); }
@media (min-width: 900px) { .prod-galerie__bild { aspect-ratio: 1; max-height: none; } }
.prod-kopf__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.prod-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border: 1px solid var(--c-linie-stark); border-radius: var(--r-rund); background: var(--c-bg); color: var(--c-marke); font-size: var(--fs-s); font-weight: var(--fw-fett); line-height: 1.3; text-decoration: none; }
a.prod-chip:hover { border-color: var(--c-marke); }
.prod-chip--badge { border-color: transparent; background: var(--c-gut-bg); color: var(--c-gut); }
.prod-chip--alt { border-color: transparent; background: var(--c-mittel-bg); color: var(--c-mittel); }
.prod-kopf h1 { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem); }
.prod-kopf__sterne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: var(--s3) 0 0; font-size: var(--fs-s); }
.prod-kopf__sterne > a { padding-block: 4px; }
.prod-kopf__fett { margin: 0 0 var(--s3); font-weight: var(--fw-fett); line-height: 1.45; color: var(--c-text); }
.prod-kopf__fuer, .prod-kopf__grund { margin: 0 0 var(--s3); color: var(--c-text-2); }
.prod-kopf__grund { padding: var(--s3) var(--s4); border-left: 3px solid var(--c-gut); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--c-gut-bg); font-size: var(--fs-s); line-height: 1.5; }
.prod-punkte { margin: 0 0 var(--s4); padding: 0; list-style: none; color: var(--c-text-2); }
.prod-punkte li { position: relative; margin: 0 0 6px; padding-left: 20px; line-height: 1.5; }
.prod-punkte li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-marke); }
.prod-ampel { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-mittel-bg); }
.prod-ampel--gruen { background: var(--c-gut-bg); border-color: #c7ead7; }
.prod-ampel--rot { background: var(--c-schlecht-bg); border-color: #f6cdc9; }
.prod-ampel--gelb { border-color: #f3dfaa; }
.prod-ampel__kopf { display: flex; align-items: center; gap: var(--s3); }
.prod-ampel__kopf > div { flex: 1; min-width: 0; }
.prod-ampel__urteil { margin: 0; font-size: 1.0625rem; font-weight: var(--fw-schwer); line-height: 1.25; color: var(--c-mittel); }
.prod-ampel--gruen .prod-ampel__urteil { color: var(--c-gut); }
.prod-ampel--rot .prod-ampel__urteil { color: var(--c-schlecht); }
.prod-ampel__text { margin: 2px 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-ampel__preis { margin: 0; font-size: 1.25rem; font-weight: var(--fw-schwer); color: var(--c-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-ampel__preis sup { font-size: .6em; }
.prod-ampel__balken { margin-top: var(--s3); }
.prod-ampel__svg { display: block; width: 100%; height: 20px; overflow: visible; }
.prod-ampel__spur { stroke: url(#ampel-verlauf); stroke-width: 6px; stroke-linecap: round; }
.prod-ampel__s1 { stop-color: var(--c-ampel-gruen); }
.prod-ampel__s2 { stop-color: var(--c-ampel-gelb); }
.prod-ampel__s3 { stop-color: var(--c-ampel-rot); }
.prod-ampel__avg { stroke: var(--c-text); stroke-width: 2px; }
.prod-ampel__punkt { stroke: var(--c-text); stroke-width: 14px; stroke-linecap: round; }
.prod-ampel__achse { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); margin-top: 6px; font-size: var(--fs-xs); line-height: 1.35; color: var(--c-leise); }
.prod-ampel__achse span { display: flex; flex-direction: column; }
.prod-ampel__achse span:last-child { text-align: right; }
.prod-ampel__achse strong { color: var(--c-text); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.prod-ampel__mitte { align-self: end; text-align: center; }
.prod-wertung, .prod-preiskarte { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); box-shadow: var(--sh-1); }
.prod-wertung__kopf { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .06em; text-transform: uppercase; color: var(--c-leise); }
.prod-wertung__band { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 10px 14px; border-radius: var(--r-m); background: var(--c-score-d); color: #fff; }
.prod-wertung__band--a { background: var(--c-score-a); }
.prod-wertung__band--b { background: var(--c-score-b); }
.prod-wertung__band--c { background: var(--c-score-c); }
.prod-wertung__zahl { font-size: var(--fs-s); font-weight: var(--fw-mittel); font-variant-numeric: tabular-nums; }
.prod-wertung__zahl strong { font-size: 1.875rem; font-weight: var(--fw-schwer); line-height: 1; margin-right: 2px; }
.prod-wertung__wort { font-size: 1rem; font-weight: var(--fw-fett); }
.prod-wertung__basis { margin: var(--s2) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-wertung__ohne { margin: 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-wertung__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--c-linie); }
.prod-wertung__fuss .ui-link-pfeil { font-size: var(--fs-s); padding-block: 4px; }
.prod-preiskarte__ab { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--c-leise); }
.prod-preiskarte__ab strong { font-size: 1.875rem; font-weight: var(--fw-schwer); line-height: 1.1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.prod-preiskarte__ab sup { margin-left: -6px; color: var(--c-text); }
.prod-preiskarte__n { margin: 2px 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-preiskarte__ohne { margin: 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-preiskarte__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.prod-preiskarte__knoepfe:empty { display: none; }
.prod-preiskarte__knoepfe > :only-child { grid-column: 1 / -1; }
.prod-preiskarte__knoepfe .ui-btn { padding-inline: 10px; font-size: var(--fs-s); }
.prod-preiskarte .ui-partner--breit { margin-bottom: var(--s3); }
.prod-preiskarte .ui-partner--breit .ui-anzeige { align-self: flex-end; }
.prod-spark { display: block; margin-top: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--c-linie); color: var(--c-text); text-decoration: none; }
.prod-spark__kopf { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-s); font-weight: var(--fw-fett); }
.prod-spark__kopf .ui-link-pfeil { color: var(--c-marke); font-weight: var(--fw-mittel); }
.prod-spark__svg { display: block; width: 100%; height: 44px; margin: 6px 0 4px; }
.prod-spark__svg polyline { fill: none; stroke: var(--c-gut); stroke-width: 2px; stroke-linejoin: round; }
.prod-spark__tief { font-size: var(--fs-xs); color: var(--c-leise); }
.prod-spark__tief strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.prod-spark:hover .prod-spark__kopf .ui-link-pfeil { text-decoration: underline; }
.prod-band .ui-abschnitt-kopf { margin-bottom: var(--s3); }
.prod-akarten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 76%); gap: var(--s3); margin: 0; padding: 2px 2px var(--s2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.prod-akarte { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); scroll-snap-align: start; }
.prod-akarte.is-best { border-color: var(--c-gut); box-shadow: 0 0 0 1px var(--c-gut) inset; }
.prod-akarte__tag { position: absolute; top: -1px; left: var(--s4); padding: 1px 8px; border-radius: 0 0 var(--r-s) var(--r-s); background: var(--c-gut); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-fett); }
.prod-akarte__shop { margin: var(--s2) 0 2px; font-weight: var(--fw-schwer); color: var(--c-text); overflow-wrap: anywhere; }
.prod-akarte__liefer { margin: 0 0 var(--s2); font-size: var(--fs-s); color: var(--c-text-2); }
.prod-akarte__preis { margin: auto 0 0; font-size: 1.5rem; font-weight: var(--fw-schwer); color: var(--c-text); font-variant-numeric: tabular-nums; }
.prod-akarte__preis sup { font-size: .55em; }
.prod-akarte__offen { font-size: 1rem; font-weight: var(--fw-mittel); color: var(--c-leise); }
.prod-akarte__versand { margin: 0; font-size: var(--fs-s); color: var(--c-gut); }
.prod-akarte__gesamt { margin: 0; font-size: var(--fs-xs); color: var(--c-leise); }
.prod-akarte__ohne { margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px solid var(--c-linie); font-size: var(--fs-xs); color: var(--c-leise); }
.prod-akarte .ui-partner { margin-top: var(--s3); }
@media (min-width: 900px) {
.prod-akarten { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding: 0; }
.prod-akarten--1 { grid-template-columns: minmax(0, 1fr); }
.prod-akarten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-akarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.prod-pc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.prod-pc__spalte { border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.prod-pc__kopf { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 10px var(--s4); border-radius: calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0; background: var(--c-gut-bg); color: var(--c-gut); font-weight: var(--fw-schwer); }
.prod-pc__spalte--schlecht .prod-pc__kopf { background: var(--c-schlecht-bg); color: var(--c-schlecht); }
.prod-pc__kopf small { font-size: var(--fs-xs); font-weight: var(--fw-mittel); color: var(--c-leise); }
.prod-pc ul { margin: 0; padding: var(--s2) var(--s4) var(--s3); list-style: none; }
.prod-pc li { display: flex; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--c-linie); line-height: 1.4; }
.prod-pc li:last-child { border-bottom: 0; }
.prod-pc li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-pc li strong { font-weight: var(--fw-mittel); color: var(--c-text); }
.prod-pc li small { font-size: var(--fs-xs); color: var(--c-leise); }
.prod-pc__zeichen { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--c-gut-bg); color: var(--c-gut); font-weight: var(--fw-schwer); line-height: 1; }
.prod-pc__spalte--schlecht .prod-pc__zeichen { background: var(--c-schlecht-bg); color: var(--c-schlecht); }
.prod-pc__leer { margin: 0; padding: var(--s4); font-size: var(--fs-s); color: var(--c-leise); }
@media (min-width: 900px) { .prod-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod-testliste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.prod-test { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--c-linie); }
.prod-test__text > :last-child { margin-bottom: 0; }
.prod-test__urteil { margin: 0 0 2px; font-weight: var(--fw-schwer); color: var(--c-text); line-height: 1.35; }
.prod-test__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 var(--s2); font-size: var(--fs-s); color: var(--c-leise); }
.prod-test__meta > * { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-rund); background: var(--c-bg-weich); }
.prod-test__meta > a { font-weight: var(--fw-mittel); }
.prod-test__titel, .prod-test__hinweis { margin: 0 0 var(--s2); font-size: var(--fs-s); color: var(--c-text-2); }
.prod-test__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s2); padding: 0; list-style: none; }
.prod-test__chips li { padding: 2px 10px; border-radius: var(--r-s); font-size: var(--fs-s); line-height: 1.45; }
.prod-test__chips .is-plus { background: var(--c-gut-bg); color: var(--c-gut); }
.prod-test__chips .is-minus { background: var(--c-schlecht-bg); color: var(--c-schlecht); }
.prod-test__link { display: inline-flex; align-items: center; gap: 4px; padding-block: 4px; font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.prod-tests .ui-auf { margin-top: var(--s4); }
.prod-tests__weitere { margin: var(--s4) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-tests__weitere a { display: inline-block; padding-block: 3px; }
.prod-noten, .prod-tquellen { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.prod-noten__titel, .prod-tquellen__titel { margin: 0 0 var(--s3); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-leise); }
.prod-noten ol { margin: 0; padding: 0; list-style: none; }
.prod-noten__zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; align-items: center; gap: var(--s2); padding: 4px 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-noten__zeile b { text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; }
.prod-noten__zeile.is-leer { color: var(--c-leise); }
.prod-noten__summe { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--c-linie); font-size: var(--fs-s); color: var(--c-text-2); }
.prod-tquellen ul { margin: 0; padding: 0; list-style: none; }
.prod-tquellen li { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-s); }
.prod-tquellen a { display: block; padding: 6px 0; }
.prod-tquellen small { padding-top: 7px; color: var(--c-leise); }
@media (max-width: 1099.98px) { .prod-tests .ui-layout__seite .stapel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); } .prod-tests .ui-layout__seite .stapel > * + * { margin-top: 0; } }
.prod-einordnung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.prod-einordnung__text { margin: 0 0 var(--s4); color: var(--c-text-2); max-width: 70ch; }
.prod-einordnung__balken { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.prod-einordnung__legende { display: flex; align-items: center; gap: 6px; margin: var(--s2) 0 0; font-size: var(--fs-xs); color: var(--c-leise); }
.prod-einordnung__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--c-marke); }
.prod-einordnung__strich { width: 2px; height: 12px; margin-left: var(--s2); background: var(--c-text); }
.prod-pl { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--c-bg); border: 1px solid var(--c-linie); font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
.prod-pl .ui-icon { margin-top: 1px; color: var(--c-leise); }
.prod-pl--gut { border-color: #c7ead7; background: var(--c-gut-bg); }
.prod-pl--gut .ui-icon { color: var(--c-gut); }
.prod-rang { margin: 0; padding: 0; list-style: none; border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.prod-rang > :first-child { border-radius: calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0; }
.prod-rang > :last-child { border-radius: 0 0 calc(var(--r-l) - 1px) calc(var(--r-l) - 1px); }
.prod-rang__zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr) 104px; align-items: center; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--c-linie); }
.prod-rang__zeile:last-child { border-bottom: 0; }
.prod-rang__zeile.is-selbst { background: var(--c-marke-tint); box-shadow: inset 3px 0 0 var(--c-marke); }
.prod-rang__nr { font-weight: var(--fw-schwer); color: var(--c-leise); text-align: center; font-variant-numeric: tabular-nums; }
.prod-rang__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.prod-rang__name > a, .prod-rang__name > span { font-weight: var(--fw-fett); color: var(--c-text); text-decoration: none; padding-block: 2px; overflow-wrap: anywhere; }
.prod-rang__name > a:hover { color: var(--c-marke); text-decoration: underline; }
.prod-rang__name small { font-size: var(--fs-xs); color: var(--c-leise); }
.prod-rang__score { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 6px; }
.prod-rang__score b { text-align: right; font-variant-numeric: tabular-nums; }
.prod-rang__luecke { padding: 0 var(--s4); border-bottom: 1px solid var(--c-linie); color: var(--c-leise); line-height: 24px; text-align: center; }
.prod-einordnung__hub { margin: var(--s3) 0 0; font-size: var(--fs-s); }
.prod-einordnung__hub a { display: inline-block; padding-block: 4px; }
.prod-auch { margin-top: var(--s4); }
.prod-auch__titel { margin: 0 0 var(--s2); font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-text); }
@media (min-width: 1100px) { .prod-einordnung { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); } }
.prod-pe { margin-bottom: var(--abschnitt); }
.prod-pe__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.prod-pe__status { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-l); background: var(--c-mittel-bg); }
.prod-pe__status--gruen { background: var(--c-gut-bg); }
.prod-pe__status--rot { background: var(--c-schlecht-bg); }
.prod-pe__status p { display: flex; flex-direction: column; margin: 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-pe__status strong { font-size: 1rem; color: var(--c-text); }
.prod-pe__werte { margin: 0; padding: 4px var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.prod-pe__werte > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--c-linie); }
.prod-pe__werte > div:last-child { border-bottom: 0; }
.prod-pe__werte dt { font-size: var(--fs-s); color: var(--c-text-2); }
.prod-pe__werte dd { margin: 0; font-weight: var(--fw-schwer); color: var(--c-text); text-align: right; font-variant-numeric: tabular-nums; }
.prod-pe__werte dd small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
@media (min-width: 1100px) { .prod-pe__raster { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); } }
.prod-alarm { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.prod-alarm__titel { margin: 0 0 4px; font-weight: var(--fw-schwer); color: var(--c-text); }
.prod-alarm__text { margin: 0 0 var(--s3); font-size: var(--fs-s); color: var(--c-text-2); }
.prod-alarm__felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.prod-alarm label > span { display: block; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: var(--fw-fett); color: var(--c-text-2); }
.prod-alarm input[type="number"], .prod-alarm input[type="email"] { width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); }
.prod-alarm input:focus { outline: none; border-color: var(--c-marke); box-shadow: 0 0 0 3px var(--c-marke-hell); }
.prod-alarm__ok { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s3) 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-2); }
.prod-alarm__ok input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--c-marke); }
.prod-alarm__falle { position: absolute; left: -9999px; width: 1px; height: 1px; }
.prod-alarm__meldung { margin: var(--s2) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-alarm__meldung:empty { display: none; }
.prod-angebote__sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: var(--fs-s); color: var(--c-leise); }
.prod-angebote__sort button { min-height: 36px; padding: 4px 14px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-rund); background: var(--c-bg); font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-text); }
.prod-angebote__sort button[aria-pressed="true"] { border-color: var(--c-marke); background: var(--c-marke); color: #fff; }
.prod-angebote__kopf { display: none; }
.prod-angebote__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.prod-angebot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "shop preis" "liefer versand" "liefer gesamt" "aktion aktion"; gap: 2px var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--c-linie); }
.prod-angebot.is-best { background: var(--c-gut-bg); box-shadow: inset 3px 0 0 var(--c-gut); }
.js .prod-angebot.is-mehr { display: none; }
.js .prod-angebote.ist-offen .prod-angebot.is-mehr { display: grid; }
.prod-angebot__shop { grid-area: shop; font-weight: var(--fw-fett); color: var(--c-text); overflow-wrap: anywhere; }
.prod-angebot__tag { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: var(--r-rund); background: var(--c-gut); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-fett); line-height: 1.6; vertical-align: 1px; }
.prod-angebot__liefer { grid-area: liefer; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-angebot__preis { grid-area: preis; text-align: right; font-variant-numeric: tabular-nums; }
.prod-angebot__preis strong { font-size: 1.0625rem; font-weight: var(--fw-schwer); color: var(--c-text); }
.prod-angebot__versand { grid-area: versand; text-align: right; font-size: var(--fs-xs); color: var(--c-gut); }
.prod-angebot__gesamt { grid-area: gesamt; text-align: right; font-size: var(--fs-xs); color: var(--c-leise); }
.prod-angebot__gesamt::before { content: "Gesamt "; }
.prod-angebot__aktion { grid-area: aktion; display: flex; justify-content: flex-end; }
.prod-angebot__aktion:has(.prod-angebot__ohne) { display: none; }
.prod-angebot .is-leer { display: none; }
.prod-angebot--amazon { grid-template-areas: "shop preis" "liefer aktion"; align-items: center; }
.prod-angebot__ohne { font-size: var(--fs-xs); color: var(--c-leise); }
.prod-angebote__mehr { margin-top: var(--s3); }
.prod-angebote__quelle { margin: var(--s3) 0 0; font-size: var(--fs-s); }
.prod-angebote__quelle small { display: block; color: var(--c-leise); }
@media (min-width: 900px) {
.prod-angebote__kopf, .prod-angebot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 112px minmax(0, 1fr) 104px 128px; grid-template-areas: none; align-items: center; column-gap: var(--s4); }
.prod-angebote__kopf { padding: 0 var(--s3) var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .05em; text-transform: uppercase; color: var(--c-leise); }
.prod-angebote__kopf span:nth-child(n+3) { text-align: right; }
.prod-angebot { grid-area: auto; padding: var(--s3); }
.prod-angebot > * { grid-area: auto; }
.prod-angebot__versand { font-size: var(--fs-s); }
.prod-angebot__gesamt { font-size: var(--fs-s); color: var(--c-text-2); }
.prod-angebot__gesamt::before { content: none; }
.prod-angebot__aktion, .prod-angebot__aktion:has(.prod-angebot__ohne) { display: flex; }
.prod-angebot .is-leer { display: block; }
.js .prod-angebote.ist-offen .prod-angebot.is-mehr { display: grid; }
}
.prod-kaeufer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.prod-kaeufer__karte { align-self: start; padding: var(--s5); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); text-align: center; }
.prod-kaeufer__gross { margin: 0; color: var(--c-leise); }
.prod-kaeufer__gross strong { font-size: 2.5rem; font-weight: var(--fw-schwer); line-height: 1; color: var(--c-text); margin-right: 4px; }
.prod-kaeufer__sterne { margin: var(--s2) 0; font-size: 22px; }
.prod-kaeufer__n { display: flex; flex-direction: column; margin: 0 0 var(--s4); font-weight: var(--fw-fett); color: var(--c-text); }
.prod-kaeufer__n small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.prod-kaeufer__vert { margin: 0; padding: var(--s3) 0 0; list-style: none; border-top: 1px solid var(--c-linie); text-align: left; }
.prod-kaeufer__vert li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; align-items: center; gap: var(--s2); padding: 3px 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-kaeufer__vert b { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text); }
.prod-kaeufer__satz, .prod-kaeufer__gekauft { margin: var(--s3) 0 0; font-size: var(--fs-s); color: var(--c-text-2); text-align: left; }
.prod-kaeufer__lead { margin: 0 0 var(--s2); font-weight: var(--fw-mittel); color: var(--c-text); }
.prod-kaeufer__eindruck { margin: 0 0 var(--s2); font-size: var(--fs-s); color: var(--c-text-2); }
.prod-kaeufer__inhalt > .prod-h3:first-child { margin-top: 0; }
.prod-themen { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.prod-themen li { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "name zahl" "bar bar"; gap: 4px var(--s3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-linie); }
.prod-themen__name { grid-area: name; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); font-weight: var(--fw-mittel); color: var(--c-text); }
.prod-themen__name small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.prod-themen__bar { grid-area: bar; display: block; width: 100%; height: 8px; border-radius: var(--r-rund); }
.prod-themen__bar .is-pos { fill: var(--c-ampel-gruen); }
.prod-themen__bar .is-neg { fill: var(--c-ampel-rot); opacity: .75; }
.prod-themen__zahl { grid-area: zahl; text-align: right; font-size: var(--fs-s); white-space: nowrap; }
.prod-themen__zahl .is-pos { color: var(--c-gut); }
.prod-themen__zahl .is-neg { color: var(--c-schlecht); }
.prod-kaeufer__bericht { margin: 0; color: var(--c-text-2); max-width: 75ch; }
.prod-kaeufer__listen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s4); }
.prod-kaeufer__listen > div { padding: var(--s4); border-radius: var(--r-l); background: var(--c-bg); border: 1px solid var(--c-linie); }
.prod-kaeufer__listen ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-kaeufer__listen li { margin: 4px 0; }
.prod-kaeufer__ltitel { margin: 0 0 var(--s2); font-weight: var(--fw-fett); color: var(--c-text); }
.prod-kaeufer__hinweis { margin: var(--s4) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.prod-kaeufer .ui-hinweis { margin-top: var(--s4); }
.prod-kaeufer .ui-hinweis ul { margin: 0; padding-left: 1.1em; }
.prod-kaeufer__quelle { margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--c-leise); }
@media (min-width: 640px) { .prod-kaeufer__listen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prod-kaeufer__listen > div:only-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .prod-kaeufer { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s6); } .prod-kaeufer > :only-child { grid-column: 1 / -1; } .prod-themen li { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 96px; grid-template-areas: "name bar zahl"; } }
.prod-alt + .prod-alt { margin-top: var(--s6); }
.prod-karten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 46%); gap: var(--s3); margin: 0; padding: 2px 2px var(--s2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.prod-karte { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); scroll-snap-align: start; transition: box-shadow var(--dauer), border-color var(--dauer); }
.prod-karte:hover { border-color: var(--c-linie-stark); box-shadow: var(--sh-2); }
.prod-karte__bild { position: relative; display: flex; align-items: center; justify-content: center; height: 132px; padding: var(--s3); border-radius: calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0; background: #fff; border-bottom: 1px solid var(--c-linie); }
.prod-karte__bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.prod-karte__bild .ui-bild--leer { width: 72px; height: 72px; }
.prod-karte__score { position: absolute; top: 8px; right: 8px; }
.prod-karte__text { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: var(--s3) var(--s4) var(--s4); }
.prod-karte__grund { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-fett); color: var(--c-gut); }
.prod-karte__name { margin: 0; font-size: .9375rem; line-height: 1.35; }
.prod-karte__name a { display: inline-block; padding-block: 3px; color: var(--c-text); text-decoration: none; }
.prod-karte__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prod-karte:hover .prod-karte__name a { color: var(--c-marke); }
.prod-karte__preis { margin: auto 0 0; padding-top: var(--s2); font-size: var(--fs-s); color: var(--c-leise); }
.prod-karte__preis strong { font-size: 1.0625rem; color: var(--c-text); font-variant-numeric: tabular-nums; }
.prod-karte__meta { display: flex; justify-content: space-between; gap: var(--s2); margin: 0; font-size: var(--fs-xs); color: var(--c-leise); }
.prod-karte__tests { margin-left: auto; padding: 0 6px; border-radius: var(--r-s); background: var(--c-bg-weich); font-weight: var(--fw-fett); }
@media (min-width: 640px) { .prod-karten { grid-auto-columns: minmax(200px, 31%); } }
@media (min-width: 1100px) {
.prod-karten { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding: 0; }
.prod-karten:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prod-karten:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod-karten:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-karten:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.prod-karten:has(> :nth-child(-n+3):last-child) .prod-karte { flex-direction: row; }
.prod-karten:has(> :nth-child(-n+3):last-child) .prod-karte__bild { flex: 0 0 168px; height: auto; min-height: 148px; border-bottom: 0; border-right: 1px solid var(--c-linie); border-radius: calc(var(--r-l) - 1px) 0 0 calc(var(--r-l) - 1px); }
}
.prod-duell th, .prod-duell td { min-width: 150px; }
.prod-duell thead th { white-space: normal; text-transform: none; letter-spacing: 0; font-size: var(--fs-s); }
.prod-duell thead th a { display: inline-block; padding-block: 3px; }
.prod-duell .is-selbst { background: var(--c-marke-tint); color: var(--c-text); font-weight: var(--fw-mittel); }
.prod-duell thead th.is-selbst { color: var(--c-marke-dunkel); }
.prod-daten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.prod-dkarte { min-width: 0; padding: var(--s4) var(--s4) var(--s3); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.prod-dkarte__titel { display: flex; align-items: center; gap: var(--s2); margin: 0 0 2px; font-size: 1rem; }
.prod-dkarte__titel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-marke); }
.prod-dkarte__quelle { margin: 0 0 var(--s3); padding-left: 16px; font-size: var(--fs-xs); color: var(--c-leise); }
.prod-dkarte__quelle a { color: inherit; }
.prod-dkarte__liste { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--c-linie); }
.prod-dkarte__zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s3); padding: 8px 0; border-bottom: 1px solid var(--c-linie); font-size: var(--fs-s); line-height: 1.45; }
.prod-dkarte__zeile:last-child { border-bottom: 0; }
.prod-dkarte__zeile dt { color: var(--c-leise); }
.prod-dkarte__zeile dd { margin: 0; color: var(--c-text); font-weight: var(--fw-mittel); overflow-wrap: anywhere; }
.prod-dkarte__zeile dd a { display: inline-block; padding-block: 3px; margin-block: -3px; }
.prod-dkarte__zeile code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.prod-dkarte__zeile--voll { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.prod-dkarte__auf summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--c-marke); font-size: var(--fs-s); font-weight: var(--fw-mittel); cursor: pointer; }
.prod-dkarte__auf[open] summary { margin-bottom: 0; }
.prod-varianten { margin: 0; padding: 0; list-style: none; }
.prod-varianten li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s3); padding: 4px 0; }
.prod-varianten a { padding-block: 3px; }
@media (min-width: 900px) {
.prod-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.prod-daten > .prod-dkarte--voll { grid-column: 1 / -1; }
.prod-dkarte--voll > .prod-dkarte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
.prod-dkarte--voll .prod-dkarte__zeile:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.prod-dkarte--voll .prod-dkarte__zeile--voll { grid-column: 1 / -1; }
}
.prod-methodik__links { display: flex; flex-wrap: wrap; gap: 4px var(--s4); margin: 0; }
.prod-methodik__links a { white-space: nowrap; padding-block: 3px; }
.prod-faq .ui-auf__inhalt p { color: var(--c-text-2); max-width: 72ch; }
.ui-sprung__zahl { margin-left: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.ui-sprung__link.is-aktiv .ui-sprung__zahl { color: inherit; }
.ui-sprung__innen { display: flex; align-items: center; gap: var(--s3); }
.ui-sprung__innen > .ui-sprung__liste { flex: 1; min-width: 0; }
.ui-sprung__knopf { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 14px; border-radius: var(--r-m); background: var(--c-marke); color: #fff; font-size: var(--fs-s); font-weight: var(--fw-schwer); white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.ui-sprung__knopf:hover { background: var(--c-marke-dunkel); color: #fff; }
@media (max-width: 639.98px) { .ui-sprung__knopf { height: 32px; padding: 0 8px 0 10px; } .ui-sprung__knopf .ui-icon { display: none; } }
@media (max-width: 899.98px) {
.ui-kennzahl:nth-child(2) { border-top-right-radius: var(--r-l); }
.ui-kennzahl:nth-last-child(2):nth-child(odd) { border-bottom-left-radius: var(--r-l); }
}
.li-balken { display: block; width: 100%; height: 8px; border-radius: var(--r-rund); overflow: hidden; }
.li-balken__spur { fill: var(--c-bg-weich); }
.li-balken__wert { fill: var(--c-marke); }
.li-balken--gut .li-balken__wert { fill: var(--c-ampel-gruen); }
.li-balken--mittel .li-balken__wert { fill: var(--c-ampel-gelb); }
.li-balken--schlecht .li-balken__wert { fill: var(--c-ampel-rot); }
.li-balken--note-a .li-balken__wert, .li-balken--note-b .li-balken__wert { fill: var(--c-gut); }
.li-balken--note-c .li-balken__wert { fill: var(--c-ampel-gelb); }
.li-balken--note-d .li-balken__wert, .li-balken--note-e .li-balken__wert { fill: var(--c-ampel-rot); }
.li-balken--note-x .li-balken__wert { fill: var(--c-linie-stark); }
.li-balken--score-a .li-balken__wert { fill: var(--c-score-a); }
.li-balken--score-b .li-balken__wert { fill: var(--c-score-b); }
.li-balken--score-c .li-balken__wert { fill: var(--c-score-c); }
.li-balken--score-d .li-balken__wert { fill: var(--c-score-d); }
.li-vgl { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label wert" "spur spur"; gap: 2px var(--s3); align-items: center; }
.li-vgl__label { grid-area: label; font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-text); }
.li-vgl__spur { grid-area: spur; display: block; width: 100%; height: 20px; overflow: visible; }
.li-vgl__linie { stroke: var(--c-linie-stark); stroke-width: 6px; stroke-linecap: round; }
.li-vgl__avg { stroke: var(--c-text); stroke-width: 2px; }
.li-vgl__punkt { stroke: var(--c-marke); stroke-width: 14px; stroke-linecap: round; }
.li-vgl--gut .li-vgl__punkt { stroke: var(--c-ampel-gruen); }
.li-vgl--schlecht .li-vgl__punkt { stroke: var(--c-ampel-rot); }
.li-vgl--mittel .li-vgl__punkt { stroke: var(--c-ampel-gelb); }
.li-vgl__wert { grid-area: wert; display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.3; }
.li-vgl__wert strong { font-size: var(--fs-s); color: var(--c-text); font-variant-numeric: tabular-nums; }
.li-vgl__wert small { font-size: var(--fs-xs); color: var(--c-leise); }
@media (min-width: 640px) {
.li-vgl { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 190px); grid-template-areas: "label spur wert"; column-gap: var(--s4); }
}
.li-kreis { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border: 3px solid currentColor; border-radius: 50%; font-size: 1rem; font-weight: var(--fw-schwer); line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-leise); background: var(--c-bg); }
.li-kreis--a, .li-kreis--b { color: var(--c-gut); }
.li-kreis--c { color: var(--c-mittel); }
.li-kreis--d, .li-kreis--e { color: var(--c-schlecht); }
.li-kreis--klein { width: 36px; height: 36px; border-width: 2px; font-size: var(--fs-s); }
.dia { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); }
.dia__y { display: flex; flex-direction: column; justify-content: space-between; margin: -9px 0 15px; font-size: var(--fs-xs); line-height: 18px; text-align: right; color: var(--c-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dia__flaeche { min-width: 0; }
.dia__svg { display: block; width: 100%; height: 200px; overflow: visible; }
.dia__x { display: flex; justify-content: space-between; height: 24px; font-size: var(--fs-xs); line-height: 24px; color: var(--c-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dia__gitter { stroke: var(--c-linie); stroke-width: 1px; }
.dia__punkt { stroke: var(--c-linie-stark); stroke-width: 10px; stroke-linecap: round; }
.dia__punkt.is-auswahl { stroke: var(--c-marke); stroke-width: 13px; }
.dia__svg:focus-visible { outline: 2px solid var(--c-marke); outline-offset: 4px; }
@media (min-width: 900px) { .dia__svg { height: 240px; } }
.dia--streu .dia__svg { height: 260px; }
.dia__x span { min-width: 0; }
@media (max-width: 639.98px) { .dia--streu .dia__x:has(> :nth-child(5)) > :nth-child(even) { visibility: hidden; } }
@media (min-width: 900px) { .dia--streu .dia__svg { height: 300px; } }
.pv { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.pv__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
.pv__titel { display: flex; flex-direction: column; margin: 0; font-weight: var(--fw-fett); color: var(--c-text); }
.pv__titel small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.pv__tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-m); background: var(--c-bg-weich); }
.pv__tab { min-width: 52px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--c-text-2); font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.pv__tab:hover { color: var(--c-marke); }
.pv__tab[aria-pressed="true"] { background: var(--c-bg); color: var(--c-marke); box-shadow: var(--sh-1); font-weight: var(--fw-fett); }
.pv__flaeche { fill: var(--c-marke-hell); opacity: .7; }
.pv__linie { fill: none; stroke: var(--c-marke); stroke-width: 2.5px; stroke-linejoin: round; }
.pv__avg { stroke: var(--c-leise); stroke-width: 1.5px; stroke-dasharray: 5 4; }
.pv__min { stroke: var(--c-ampel-gruen); stroke-width: 12px; stroke-linecap: round; }
.pv__max { stroke: var(--c-ampel-rot); stroke-width: 12px; stroke-linecap: round; }
.pv__cursor { stroke: var(--c-text); stroke-width: 1px; }
.pv__legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: var(--s2) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.pv__lg { display: inline-flex; align-items: center; gap: 6px; }
.pv__lg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-ampel-gruen); }
.pv__lg--max::before { background: var(--c-ampel-rot); }
.pv__lg--avg::before { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--c-leise); }
.pv__lg strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.pv__lesen { flex-basis: 100%; min-height: 1.5em; font-size: var(--fs-xs); color: var(--c-leise); }
.pv__satz { margin: var(--s2) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
@media (min-width: 900px) { .pv { padding: var(--s5); } .pv__lesen { flex-basis: auto; margin-left: auto; } }
.li-streu { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.li-streu__fig { margin: 0; padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.li-streu__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: var(--s2); font-size: var(--fs-xs); color: var(--c-leise); }
.li-streu__key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-linie-stark); }
.li-streu__key.is-auswahl { background: var(--c-marke); }
.li-streu__grenze { padding: var(--s4) var(--s5); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.li-streu__grenze h3 { margin: 0 0 4px; font-size: 1.0625rem; }
.li-streu__grenze > p { margin: 0 0 var(--s3); font-size: var(--fs-s); color: var(--c-leise); }
.li-streu__grenze ol { margin: 0; padding: 0; list-style: none; counter-reset: g; }
.li-streu__grenze li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--c-linie); font-size: var(--fs-s); }
.li-streu__name a { display: inline-block; padding-block: 4px; margin-block: -2px; font-weight: var(--fw-fett); }
.li-streu__wert { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) { .li-streu { grid-template-columns: minmax(0, 1fr) 320px; } }
.lst > * + * { margin-top: var(--s6); }
.container.abschnitt.lst { padding-top: var(--s6); }
.lst-stapel > * + * { margin-top: var(--abschnitt); }
.lst-kopfzeile { margin: var(--s3) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.lst-kopfzeile a { display: inline-block; padding-block: 4px; white-space: normal; }
.lst-text { margin: 0; max-width: 78ch; color: var(--c-text-2); }
.lst-notiz { margin: var(--s6) 0 0; font-size: var(--fs-s); color: var(--c-leise); }
.lst-notiz a { display: inline-block; padding-block: 3px; }
.lst-geschwister { margin-top: var(--s5); }
.lst-geschwister__mehr { display: inline-block; margin-top: var(--s2); padding-block: 4px; font-size: var(--fs-s); }
.lst-zahl { text-align: right !important; font-variant-numeric: tabular-nums; }
.lst-fakten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: var(--s4) 0 0; border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-linie); }
.lst-fakten > div { padding: var(--s3) var(--s4); background: var(--c-bg); }
.lst-fakten > :first-child { border-radius: calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0; }
.lst-fakten > :last-child { border-radius: 0 0 calc(var(--r-l) - 1px) calc(var(--r-l) - 1px); }
.lst-fakten > :only-child { border-radius: calc(var(--r-l) - 1px); }
.lst-fakten dt { margin-bottom: 2px; font-weight: var(--fw-fett); color: var(--c-text); }
.lst-fakten dd { margin: 0; font-size: var(--fs-s); line-height: 1.55; color: var(--c-text-2); }
.lst-fakten dd a { display: inline-block; padding-block: 4px; margin-block: -2px; }
@media (min-width: 900px) {
.lst-fakten > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); padding: var(--s4) var(--s5); }
.lst-fakten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lst-fakten--drei > div { display: block; }
.lst-fakten--drei > :first-child { border-radius: calc(var(--r-l) - 1px) 0 0 calc(var(--r-l) - 1px); }
.lst-fakten--drei > :last-child { border-radius: 0 calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0; }
}
.lst-tab th, .lst-tab .lst-zahl { white-space: nowrap; }
.lst-tab td { min-width: 96px; }
.lst-tab td.lst-tab__name { min-width: 200px; }
.lst-tab tbody th a { min-width: 32px; font-weight: var(--fw-fett); text-decoration: none; display: inline-block; padding-block: 3px; }
.lst-tab tbody th a:hover, .lst-tab td a:hover { text-decoration: underline; }
.lst-tab td a { display: inline-block; padding-block: 3px; }
.lst-best { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.lst-best__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kat score" "name name" "preis preis"; gap: 4px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--c-linie); }
.lst-best__kat { grid-area: kat; font-size: var(--fs-s); }
.lst-best__kat a { display: inline-block; padding-block: 3px; font-weight: var(--fw-fett); }
.lst-best__name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.lst-best__name > a { font-weight: var(--fw-fett); color: var(--c-text); text-decoration: none; padding-block: 2px; }
.lst-best__name > a:hover { color: var(--c-marke); text-decoration: underline; }
.lst-best__name small { font-size: var(--fs-xs); color: var(--c-leise); }
.lst-best__name small a { display: inline-block; padding-block: 5px; margin-block: -3px; color: inherit; }
.lst-best__score { grid-area: score; }
.lst-best__preis { grid-area: preis; }
@media (min-width: 900px) {
.lst-best__zeile { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 72px 150px; grid-template-areas: "kat name score preis"; align-items: center; column-gap: var(--s5); padding-inline: var(--s3); }
.lst-best__zeile:hover { background: var(--c-marke-tint); }
}
.lst-abc { position: sticky; top: var(--kopf-h); z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--s5); padding: var(--s2) 0; background: var(--c-bg-weich); }
.lst-abc a, .lst-abc span { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: var(--r-s); font-size: var(--fs-s); font-weight: var(--fw-fett); text-decoration: none; }
.lst-abc a { background: var(--c-bg); border: 1px solid var(--c-linie); color: var(--c-marke); }
.lst-abc a:hover { border-color: var(--c-marke); }
.lst-abc span { color: var(--c-linie-stark); }
.lst-az { column-gap: var(--s4); }
.lst-az__gruppe { break-inside: avoid; margin: 0 0 var(--s4); padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.lst-az__b { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s2); font-size: 1.25rem; }
.lst-az__b small { font-size: var(--fs-xs); font-weight: var(--fw-mittel); color: var(--c-leise); }
.lst-az ul { margin: 0; padding: 0; list-style: none; }
.lst-az li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); border-top: 1px solid var(--c-linie); }
.lst-az li a { display: block; min-width: 44px; padding: 8px 0; font-weight: var(--fw-mittel); }
.lst-az li small { flex: none; font-size: var(--fs-xs); color: var(--c-leise); }
@media (min-width: 640px) { .lst-az { column-count: 2; } }
@media (min-width: 1100px) { .lst-az { column-count: 3; } }
.li-gruppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.li-gruppe { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.li-gruppe__titel { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-leise); }
.li-gruppe ul { margin: 0; padding: 0; list-style: none; }
.li-gruppe li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); border-top: 1px solid var(--c-linie); }
.li-gruppe li a { display: block; padding: 8px 0; font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.li-gruppe li small { flex: none; font-size: var(--fs-xs); color: var(--c-leise); }
.li-gruppe__mehr summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--c-marke); font-size: var(--fs-s); font-weight: var(--fw-mittel); cursor: pointer; }
@media (min-width: 640px) { .li-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .li-gruppen > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
.li-gruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.li-gruppen > :last-child:nth-child(odd) { grid-column: auto; }
.li-gruppen:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.li-gruppen:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.li-gruppen:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.li-gruppen:has(> :only-child) ul, .li-gruppen:has(> :nth-child(2):last-child) ul { column-count: 2; column-gap: var(--s6); }
.li-gruppen:has(> :only-child) li { break-inside: avoid; }
}
.li-tt__kopf { display: none; }
.li-tt__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.li-tt__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p n" "u n" "meta o"; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--c-linie); font-size: var(--fs-s); }
.li-tt__datum { grid-area: meta; color: var(--c-leise); }
.li-tt__q { grid-area: meta; padding-left: 0; }
.li-tt__zeile:has(.li-tt__q) .li-tt__datum { display: none; }
.li-tt__q small { color: var(--c-leise); }
.li-tt__p { grid-area: p; display: flex; flex-direction: column; min-width: 0; }
.li-tt__p > a { font-weight: var(--fw-fett); color: var(--c-text); text-decoration: none; padding-block: 2px; }
.li-tt__p > a:hover { color: var(--c-marke); text-decoration: underline; }
.li-tt__p small { font-size: var(--fs-xs); color: var(--c-leise); }
.li-tt__p small a { display: inline-block; padding-block: 5px; margin-block: -3px; color: inherit; }
.li-tt__u { grid-area: u; color: var(--c-text-2); }
.li-tt__n { grid-area: n; align-self: center; }
.li-tt__o { grid-area: o; text-align: right; }
.li-tt__o a, .li-tt__q a { display: inline-flex; align-items: center; gap: 3px; padding-block: 3px; }
@media (min-width: 900px) {
.li-tt__kopf, .li-tt__zeile { display: grid; grid-template-columns: 88px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.2fr) 48px 84px; grid-template-areas: none; align-items: center; column-gap: var(--s4); }
.li-tt--ohne-q .li-tt__kopf, .li-tt--ohne-q .li-tt__zeile { grid-template-columns: 88px minmax(0, 1.8fr) minmax(0, 1.2fr) 48px 84px; }
.li-tt__kopf { padding: 0 var(--s3) var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .05em; text-transform: uppercase; color: var(--c-leise); }
.li-tt__zeile { padding: 10px var(--s3); }
.li-tt__zeile > * { grid-area: auto; }
.li-tt__zeile:has(.li-tt__q) .li-tt__datum { display: block; }
.li-tt__zeile:hover { background: var(--c-marke-tint); }
.li-tt__datum { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
}
.li-pt__kopf { display: none; }
.li-pt__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.li-pt__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name score" "preis diff"; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--c-linie); }
.li-pt__name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.li-pt__name > a, .li-pt__name > span { font-weight: var(--fw-fett); color: var(--c-text); text-decoration: none; padding-block: 2px; }
.li-pt__name > a:hover { color: var(--c-marke); text-decoration: underline; }
.li-pt__name small { font-size: var(--fs-xs); color: var(--c-leise); }
.li-pt__name small a { color: inherit; display: inline-block; padding-block: 5px; margin-block: -3px; }
.li-pt__score { grid-area: score; }
.li-pt__preis { grid-area: preis; }
.li-pt__diff { grid-area: diff; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: var(--fs-xs); color: var(--c-leise); line-height: 1.35; }
.li-pt__diff strong { font-size: 1.0625rem; color: var(--c-gut); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
.li-pt__kopf, .li-pt__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 96px 168px 220px; grid-template-areas: none; align-items: center; column-gap: var(--s5); }
.li-pt__kopf { padding: 0 var(--s3) var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .05em; text-transform: uppercase; color: var(--c-leise); }
.li-pt__kopf span:last-child { text-align: right; }
.li-pt__zeile { padding: var(--s3); }
.li-pt__zeile > * { grid-area: auto; }
.li-pt__zeile:hover { background: var(--c-marke-tint); }
}
.li-themen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.li-themen__spalte { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.li-themen__titel { margin: 0 0 var(--s3); font-size: 1rem; color: var(--c-gut); }
.li-themen__titel--schlecht { color: var(--c-schlecht); }
.li-themen ol { margin: 0; padding: 0; list-style: none; }
.li-themen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s3); padding: 8px 0; border-top: 1px solid var(--c-linie); font-size: var(--fs-s); }
.li-themen li .li-balken { grid-column: 1 / -1; }
.li-themen__name { font-weight: var(--fw-mittel); color: var(--c-text); }
.li-themen li small { font-size: var(--fs-xs); color: var(--c-leise); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .li-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .li-themen > :only-child { grid-column: 1 / -1; } }
.li-top3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.li-top3__karte { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.li-top3__rang { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-marke); color: #fff; font-weight: var(--fw-schwer); }
.li-top3__name { margin: 0 0 var(--s2); font-size: 1.0625rem; line-height: 1.3; }
.li-top3__name a { color: var(--c-text); text-decoration: none; display: inline-block; padding-block: 2px; }
.li-top3__name a:hover { color: var(--c-marke); text-decoration: underline; }
.li-top3__werte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.li-top3__grund { margin: var(--s3) 0 0; font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
@media (min-width: 1100px) { .li-top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.li-strenge { display: inline-block; padding: 1px 8px; border-radius: var(--r-rund); background: var(--c-bg-weich); font-size: var(--fs-xs); font-weight: var(--fw-fett); color: var(--c-text-2); white-space: nowrap; }
.li-strenge--streng { background: var(--c-schlecht-bg); color: var(--c-schlecht); }
.li-strenge--mild { background: var(--c-gut-bg); color: var(--c-gut); }
.bl { margin-top: var(--s6); }
.bl-steuerung { display: flex; flex-direction: column; gap: var(--s3); margin: 0 0 var(--s3); }
html:not(.js) .bl-steuerung, html:not(.js) .bl-mehr { display: none; }
.bl-chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); }
.bl-chips::-webkit-scrollbar { display: none; }
.bl-chip { flex: none; cursor: pointer; }
.bl-chip:hover { border-color: var(--c-marke); color: var(--c-marke); }
.bl-chip[aria-pressed="true"] { border-color: var(--c-marke); background: var(--c-marke); color: #fff; }
.bl-chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.bl-sort { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.bl-sort::-webkit-scrollbar { display: none; }
.bl-sort__label { flex: none; margin-right: var(--s1); font-size: var(--fs-s); color: var(--c-leise); }
.bl-sort__knopf { flex: none; min-height: 36px; padding: 4px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--c-text-2); font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.bl-sort__knopf:hover { color: var(--c-marke); }
.bl-sort__knopf[aria-pressed="true"] { border-bottom-color: var(--c-marke); color: var(--c-marke); font-weight: var(--fw-fett); }
.bl-zahl { margin: 0 0 var(--s2); font-size: var(--fs-s); color: var(--c-text-2); }
.bl-zahl strong { color: var(--c-text); }
.bl-zahl__zurueck { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--c-marke); font-size: inherit; font-weight: var(--fw-mittel); text-decoration: underline; }
.bl[aria-busy="true"] .ui-pliste { opacity: .5; transition: opacity .2s; }
.bl-leer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.bl-leer[hidden] { display: none; }
.bl-leer .ui-leer { flex: 1 1 320px; }
.bl-mehr { display: flex; justify-content: center; margin-top: var(--s4); }
.bl-mehr .ui-btn small { font-weight: 400; opacity: .8; }
@media (min-width: 900px) {
.bl-steuerung { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
.bl-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.bl-sort { flex: none; flex-wrap: nowrap; }
}
.suche{padding-block:16px 40px}
.suche h1{margin:8px 0 12px}
.suche__form,.suche__filter{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:0 0 16px}
.suche__feld{display:flex;flex-direction:column;gap:4px;font-size:.875rem;min-width:min(180px,100%)}
.suche__feld--q{flex:1 1 320px}
.suche__feld input,.suche__feld select,.suche__preis input{font:inherit;min-height:44px;padding:8px 10px;border-width:1.5px;border:1px solid var(--c-linie-stark,#c9ccd1);border-radius:var(--r-m,8px);background:var(--c-bg,#fff);color:inherit;max-width:100%}
.suche__preis{border:0;padding:0;margin:0;display:flex;align-items:center;gap:6px;font-size:.875rem}
.suche__preis legend{padding:0 0 4px}
.suche__preis input{width:6.5em}
.suche__filter{padding:12px;border:1px solid var(--c-linie,#e3e5e8);border-radius:var(--r-l,12px);background:var(--c-bg-weich,#f7f8fa)}
.suche .btn{font:inherit;font-weight:600;padding:9px 16px;border-radius:var(--r-m,8px);border:1px solid var(--c-marke,#1f4fd6);background:var(--c-marke,#1f4fd6);color:#fff;cursor:pointer}
.suche .btn--ghost{background:transparent;color:var(--c-marke,#1f4fd6)}
.suche__tipp,.suche__anzahl,.suche__hinweis{color:var(--c-text-2,#4b5563)}
.suche__ziele ul{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:8px}
.suche__ziele li{margin:0;min-width:0}
.suche__ziele li>a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:48px;height:100%;padding:10px 14px;border:1px solid var(--c-linie,#e2e7f0);border-radius:var(--r-m,8px);background:var(--c-bg,#fff);text-decoration:none;color:var(--c-text,#111827);overflow-wrap:anywhere}
.suche__ziele li>a:hover,.suche__ziele li>a:focus-visible{border-color:var(--c-marke,#1f4fd6);background:var(--c-bg-weich,#f4f6fa)}
.suche__ziele li>a strong{color:var(--c-marke,#1f4fd6);font-weight:600;line-height:1.35}
.suche__ziele li>a small{display:block;font-size:.8125rem;line-height:1.4;color:var(--c-text-2,#4b5563)}
.treffer-liste{list-style:none;padding:0;margin:0;border-top:1px solid var(--c-linie,#e3e5e8)}
.treffer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;padding:12px 0;border-bottom:1px solid var(--c-linie,#e3e5e8)}
.treffer__kopf{display:flex;flex-direction:column;gap:2px;min-width:0}
.treffer__name{font-weight:600}
.treffer__meta{font-size:.875rem;color:var(--c-text-2,#4b5563)}
.treffer__werte{display:grid;grid-template-columns:repeat(3,minmax(110px,auto));gap:4px 20px;margin:0}
.treffer__werte dt{font-size:.75rem;color:var(--c-text-2,#4b5563)}
.treffer__werte dd{margin:0}
.treffer__werte small{display:block;color:var(--c-text-2,#4b5563)}
.suche__seiten{display:flex;gap:16px;align-items:center;justify-content:center;margin:20px 0}
@media (max-width:720px){.treffer{grid-template-columns:1fr}
.treffer__werte{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.suche__feld input{-webkit-appearance:none;appearance:none}
.treffer__meta a{display:inline-block;padding-block:4px;min-height:24px}
.treffer__name{display:inline-block;padding-block:2px}
.red-kopf { padding: var(--s4) 0 var(--s5); background: linear-gradient(180deg, var(--c-marke-tint) 0%, var(--c-bg) 100%); border-bottom: 1px solid var(--c-linie); }
.red-kopf__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.red-kopf .brotkrumen { margin-bottom: var(--s3); }
.red-kopf h1 { margin: 0; }
.red-kopf__chip { display: inline-block; margin: 0 0 var(--s3); padding: 2px 12px; border: 1px solid var(--c-linie-stark); border-radius: var(--r-rund); background: var(--c-bg); color: var(--c-marke); font-size: var(--fs-s); font-weight: var(--fw-fett); text-decoration: none; }
a.red-kopf__chip:hover { border-color: var(--c-marke); }
.red-kopf__lead { margin: var(--s3) 0 0; max-width: 66ch; font-size: var(--fs-l); line-height: 1.55; color: var(--c-text-2); }
.red-meta { margin: var(--s3) 0 0; font-size: var(--fs-s); line-height: 1.6; color: var(--c-leise); word-spacing: 1px; }
.red-meta a { color: inherit; font-weight: var(--fw-mittel); }
.red-kurz { padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.red-kurz__titel { margin: 0 0 var(--s1); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-leise); }
.red-kurz ul { margin: 0; padding: 0; list-style: none; }
.red-kurz li { display: flex; gap: var(--s2); margin: 6px 0; font-size: .9375rem; line-height: 1.45; color: var(--c-text); }
.red-kurz li .ui-icon { margin-top: 1px; color: var(--c-gut); }
.red-kopf__bild { position: relative; display: none; margin: 0; }
.red-kopf__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); }
.red-ki { position: absolute; right: 8px; top: 8px; padding: 2px 7px; border-radius: var(--r-rund); background: rgba(15, 27, 51, .72); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-fett); line-height: 1.4; letter-spacing: .02em; }
.red-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: 0; }
.red-zahlen > div { display: flex; flex-direction: column-reverse; min-width: 0; }
.red-zahlen > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.red-zahlen dt { font-size: var(--fs-xs); line-height: 1.3; color: var(--c-leise); }
.red-zahlen dd { margin: 0; font-size: 1.125rem; font-weight: var(--fw-schwer); line-height: 1.25; color: var(--c-text); font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) { .red-kopf__lead { font-size: var(--fs-m); } }
@media (min-width: 640px) { .red-zahlen { display: flex; flex-wrap: wrap; } }
@media (min-width: 900px) {
.red-kopf { padding: var(--s5) 0 var(--s6); }
.red-kopf--bild .red-kopf__raster { grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); grid-template-areas: "text bild" "zahlen kurz"; column-gap: var(--s6); row-gap: var(--s4); }
.red-kopf--bild .red-kopf__text { grid-area: text; }
.red-kopf--bild .red-kopf__bild { display: block; grid-area: bild; align-self: end; }
.red-kopf--bild .red-kurz { grid-area: kurz; }
.red-kopf--bild .red-zahlen { grid-area: zahlen; align-self: start; padding-top: var(--s3); border-top: 1px solid var(--c-linie); }
}
.red-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-rund); font-size: var(--fs-xs); font-weight: var(--fw-fett); line-height: 1.5; white-space: nowrap; background: var(--c-bg-weich); color: var(--c-text-2); text-decoration: none; }
.red-tag--sieger { background: #fff4d6; color: #7a5200; }
.red-tag--sieger::before { content: "🏆"; font-size: 11px; }
.red-tag--hot { background: #ffe9e0; color: #9a3412; }
.red-tag--top { background: var(--c-gut-bg); color: var(--c-gut); }
.red-tag--unser { background: var(--c-marke-hell); color: var(--c-marke); }
a.red-tag--unser:hover { background: var(--c-marke); color: #fff; }
.red-ton { display: inline-flex; padding: 1px 8px; border-radius: var(--r-rund); font-size: var(--fs-xs); font-weight: var(--fw-fett); line-height: 1.5; }
.red-ton--gut { background: var(--c-gut-bg); color: var(--c-gut); }
.red-ton--mittel { background: var(--c-mittel-bg); color: var(--c-mittel); }
.red-ton--schlecht { background: var(--c-schlecht-bg); color: var(--c-schlecht); }
.red-plus, .red-minus { position: relative; padding-left: 22px; list-style: none; }
.red-plus::before, .red-minus::before { position: absolute; left: 0; top: 0; width: 16px; text-align: center; font-weight: var(--fw-schwer); }
.red-plus::before { content: "+"; color: var(--c-gut); }
.red-minus::before { content: "–"; color: var(--c-schlecht); }
.is-selten { opacity: .62; }
.red-klein { margin: var(--s2) 0 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--c-leise); }
.red-klein a { color: inherit; }
.red-zwischen { margin: var(--s5) 0 var(--s3); font-size: var(--fs-h4); font-weight: var(--fw-fett); color: var(--c-text); }
.red-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.red-pick { position: relative; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); transition: border-color var(--dauer), box-shadow var(--dauer); }
.red-pick:hover { border-color: var(--c-linie-stark); box-shadow: var(--sh-2); }
.red-pick--top { border: 2px solid var(--c-marke); }
.red-pick__badge { align-self: flex-start; margin: 0; padding: 2px 10px; border-radius: var(--r-rund); background: var(--c-marke-hell); color: var(--c-marke); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .02em; }
.red-pick--top .red-pick__badge { background: var(--c-marke); color: #fff; }
.red-pick__kopf { display: flex; gap: var(--s3); align-items: center; }
.red-pick__name { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.red-pick__link { color: var(--c-text); text-decoration: none; }
.red-pick__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.red-pick:hover .red-pick__link, .red-beliebt__k:hover .red-pick__link, .red-stop--rec:hover .red-pick__link, .red-seite-pick:hover .red-pick__link { color: var(--c-marke); text-decoration: underline; }
.red-pick__werte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.red-pick__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.red-pick__preis { margin: 0; }
.red-pick__text { font-size: .9375rem; line-height: 1.55; color: var(--c-text-2); }
.red-pick__text p { margin: 0; }
.red-pick__warum { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-m); background: var(--c-bg-weich); font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
.red-pick__cta { margin-top: auto; pointer-events: none; }
.red-pick__mehr { position: relative; z-index: 2; align-self: center; padding: 6px 4px; font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.red-pick__mehr::after { content: " →"; }
@media (min-width: 640px) {
.red-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.red-picks > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.red-picks--1 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
.red-picks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.red-picks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.red-picks--3 > :last-child:nth-child(odd), .red-picks--4 > :last-child:nth-child(odd) { grid-column: auto; }
.red-picks--1 .red-pick { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
.red-textband { border-top: 1px solid var(--c-linie); }
.red-text { font-size: 1.0625rem; }
.red-einleitung > p:first-child { font-size: var(--fs-l); color: var(--c-text); }
.red-kap { margin-top: var(--s7); }
.red-kap:first-child { margin-top: 0; }
.red-kap > h2 { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 .6em; }
.red-kap__nr { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; padding: 0 6px; border-radius: var(--r-s); background: var(--c-marke-hell); color: var(--c-marke); font-size: .9375rem; font-weight: var(--fw-schwer); font-variant-numeric: tabular-nums; transform: translateY(-2px); }
.red-kap--fazit { padding: var(--s5); border-radius: var(--r-l); background: var(--c-bg); border: 1px solid var(--c-linie); }
.red-kap--fehler h3 { color: var(--c-schlecht); }
.prosa .red-hinweis { padding: 12px var(--s4); border-left: 3px solid var(--c-marke); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--c-marke-tint); }
.prosa .red-hinweis--warn { border-left-color: var(--c-mittel); background: var(--c-mittel-bg); }
.red-figur { margin: var(--s5) 0; }
.red-figur__bild { position: relative; }
.red-figur img { display: block; width: 100%; height: auto; border-radius: var(--r-l); }
.red-figur figcaption { margin-top: var(--s2); font-size: var(--fs-s); line-height: 1.5; color: var(--c-leise); }
.red-figur__ki { margin-left: 4px; font-size: var(--fs-xs); }
.red-pc { display: grid; gap: var(--s3); margin: var(--s4) 0 var(--s5); }
.red-pc__teil { padding: var(--s3) var(--s4); border-radius: var(--r-l); background: var(--c-gut-bg); }
.red-pc__teil--con { background: var(--c-schlecht-bg); }
.red-pc__titel { margin: 0 0 var(--s1) !important; font-weight: var(--fw-schwer); color: var(--c-text); }
.prosa .red-pc ul { margin: 0; padding: 0; }
.prosa .red-pc li { position: relative; padding-left: 22px; list-style: none; }
.red-pc li::before { position: absolute; left: 0; font-weight: var(--fw-schwer); }
.red-pc__teil--pro li::before { content: "+"; color: var(--c-gut); }
.red-pc__teil--con li::before { content: "–"; color: var(--c-schlecht); }
@media (min-width: 640px) { .red-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.red-note { display: flex; gap: var(--s3); margin: var(--s4) 0; padding: 14px var(--s4); border-radius: var(--r-l); background: var(--c-marke-tint); font-size: .9375rem; }
.red-note > .ui-icon { margin-top: 3px; color: var(--c-marke); }
.red-note--warn { background: var(--c-mittel-bg); }
.red-note--warn > .ui-icon { color: var(--c-mittel); }
.red-note__text { min-width: 0; }
.red-note__text > :last-child { margin-bottom: 0; }
.red-faq { border-top: 1px solid var(--c-linie); }
.red-faq__f { border-bottom: 1px solid var(--c-linie); }
.red-faq__f > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; padding: var(--s3) 0; list-style: none; cursor: pointer; font-weight: var(--fw-fett); line-height: 1.4; color: var(--c-text); }
.red-faq__f > summary::-webkit-details-marker { display: none; }
.red-faq__frage { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.red-faq__f > summary > .ui-icon { flex: none; }
.red-faq__f > summary .ui-icon { color: var(--c-leise); transition: transform var(--dauer); }
.red-faq__f[open] > summary .ui-icon { transform: rotate(180deg); }
.red-faq__f > summary:hover { color: var(--c-marke); }
.red-faq__a { padding: 0 0 var(--s4); }
.red-faq__a > :last-child { margin-bottom: 0; }
.red-faq__tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-rund); background: var(--c-bg-weich); font-size: var(--fs-xs); font-weight: var(--fw-mittel); color: var(--c-leise); white-space: nowrap; }
.red-beliebt, .red-stimmen { display: grid; gap: var(--s3); margin: var(--s4) 0 0; }
.red-beliebt__k { position: relative; display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.red-beliebt__name { margin: 0 0 2px !important; padding-right: 56px; font-weight: var(--fw-fett); line-height: 1.35; }
.red-beliebt__k-gekauft { margin: 2px 0 0 !important; font-size: var(--fs-xs); color: var(--c-leise); }
.red-stimme { padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); }
.red-stimme__name { margin: 0 !important; font-weight: var(--fw-fett); }
.red-stimme__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 4px 0 var(--s2) !important; font-size: var(--fs-xs); color: var(--c-leise); }
.prosa .red-stimme ul { margin: 0; padding: 0; font-size: var(--fs-s); }
@media (min-width: 900px) { .red-beliebt { grid-template-columns: repeat(3, minmax(0, 1fr)); } .red-stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.red-stop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s6) 0; padding: var(--s4); border-radius: var(--r-l); background: var(--c-bg); border: 1px solid var(--c-linie); font-size: .9375rem; }
.red-stop__text { flex: 1 1 240px; min-width: 0; }
.red-stop__kicker { margin: 0 !important; font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-marke); }
.red-stop__titel { margin: 2px 0 0 !important; font-size: 1.0625rem; font-weight: var(--fw-fett); line-height: 1.35; color: var(--c-text); }
.red-stop__satz { margin: 4px 0 0 !important; color: var(--c-text-2); line-height: 1.5; }
.red-stop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s2) 0 0 !important; }
.red-stop__gross { flex: none; margin: 0 !important; min-width: 96px; font-size: 1.75rem; font-weight: var(--fw-schwer); line-height: 1.1; color: var(--c-marke); font-variant-numeric: tabular-nums; }
.prosa .red-stop ul { margin: var(--s1) 0 0; padding-left: 1.2em; }
.red-stop--berater { background: var(--c-marke-tint); border-color: var(--c-marke-hell); }
.red-seite-pick { position: relative; padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.red-seite-pick__titel { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-leise); }
.red-seite-pick__kopf { display: flex; gap: var(--s3); align-items: center; }
.red-seite-pick__name { margin: 0; font-weight: var(--fw-fett); line-height: 1.35; }
.red-seite-pick__werte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s3) 0; }
.red-toc { padding: var(--s4) var(--s5); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.red-toc__titel { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .07em; text-transform: uppercase; color: var(--c-leise); }
.red-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.red-toc li { counter-increment: toc; }
.red-toc a { display: flex; gap: var(--s2); padding: 7px 0; color: var(--c-text-2); font-size: var(--fs-s); font-weight: var(--fw-mittel); line-height: 1.4; text-decoration: none; }
.red-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 22px; color: var(--c-leise); font-variant-numeric: tabular-nums; }
.red-toc a:hover, .red-toc a.is-aktiv { color: var(--c-marke); }
@media (max-width: 1099.98px) { .red-textband .ui-layout__seite { display: none; } }
.red-rliste { display: grid; gap: var(--s3); }
.red-rliste__e { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--c-linie); border-radius: var(--r-l); color: var(--c-text); text-decoration: none; }
.red-rliste__e:hover { border-color: var(--c-marke); box-shadow: var(--sh-1); }
.red-rliste__e img { flex: none; width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-m); }
.red-rliste__e strong { display: block; line-height: 1.35; }
.red-rliste__e small { display: block; margin-top: 2px; color: var(--c-leise); line-height: 1.45; }
.red-rliste__e:hover strong { color: var(--c-marke); }
@media (min-width: 900px) { .red-rliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .red-rliste > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.red-schluss { display: grid; gap: var(--s4); padding-top: var(--s5); }
.red-cl { padding: var(--s4) var(--s5); border: 1px solid var(--c-linie); border-radius: var(--r-l); }
.red-cl__kopf h2 { margin: 0; font-size: var(--fs-h3); }
.red-cl__stand { display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin: 4px 0 var(--s3); font-size: var(--fs-s); color: var(--c-leise); }
.red-cl__stand b { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.red-cl__liste { margin: 0; padding: 0; list-style: none; }
.red-cl__e { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--s3); padding: 6px 0; border-top: 1px solid var(--c-linie); font-size: .9375rem; line-height: 1.5; }
.red-cl__e:first-child { border-top: 0; }
.red-cl__e time { font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-leise); font-variant-numeric: tabular-nums; }
.red-cl__e--neu time, .red-cl__e--start time { color: var(--c-gut); }
.red-cl__e--empfehlung time { color: var(--c-marke); }
.red-cl__mehr > summary { display: inline-block; margin-top: var(--s2); padding: 4px 0; cursor: pointer; font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-marke); }
.red-cl__mehr > summary small { font-weight: 400; color: var(--c-leise); }
.red-quellen .ui-auf { border-top: 1px solid var(--c-linie); }
.red-quellen h3 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-h4); }
.red-quellen__liste { margin: 0; padding-left: 1.2em; font-size: var(--fs-s); line-height: 1.55; }
.red-quellen__liste li { margin: 4px 0; overflow-wrap: anywhere; }
.red-autor { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4) var(--s5); border-radius: var(--r-l); background: var(--c-bg-weich); font-size: var(--fs-s); line-height: 1.55; color: var(--c-text-2); }
.red-autor__logo { flex: none; }
.red-autor__name { margin: 0 0 4px; font-size: .9375rem; font-weight: var(--fw-fett); color: var(--c-text); }
.red-autor p { margin: 0; }
.red-autor p + p { margin-top: 2px; }
.red-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sprung); display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--c-bg); border-top: 1px solid var(--c-linie); box-shadow: 0 -6px 20px rgba(15, 27, 51, .1); }
.red-leiste__text { flex: 1; min-width: 0; margin: 0; line-height: 1.25; }
.red-leiste__text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--c-leise); }
.red-leiste__text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); }
.red-leiste .ui-partner { flex-direction: row-reverse; align-items: center; gap: 6px; }
@media (min-width: 900px) { .red-leiste { display: none !important; } }
.red-hub-band { margin-top: calc(-1 * var(--s4)); position: relative; }
.red-hub { display: grid; gap: var(--s3) var(--s5); align-items: center; padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); box-shadow: var(--sh-1); }
.red-hub--unten { margin-top: var(--s2); }
.red-hub__kicker, .red-hub__label { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-marke); }
.red-hub__label { color: var(--c-leise); }
.red-hub__titel { margin: 2px 0; font-size: 1.1875rem; font-weight: var(--fw-schwer); line-height: 1.3; }
.red-hub__titel a { color: var(--c-text); }
.red-hub__fakten { margin: 0; font-size: var(--fs-s); color: var(--c-leise); }
.red-hub__pick { position: relative; display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--c-bg-weich); }
.red-hub__picktext p { margin: 0; }
.red-hub__name { font-weight: var(--fw-fett); line-height: 1.35; padding-right: 64px; }
.red-hub__score { margin-top: 6px !important; }
.red-hub__pick:hover .red-pick__link { color: var(--c-marke); text-decoration: underline; }
.red-hub__mehr { justify-self: start; padding-block: 6px; }
@media (min-width: 900px) { .red-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; } }
.red-seite--breit { max-width: none; }
.red-seite--breit > p, .red-seite--breit > ul, .red-seite--breit > ol, .red-seite--breit > h2, .red-seite--breit > h3 { max-width: 80ch; }
.red-stand { margin-top: var(--s6) !important; font-size: var(--fs-s); }
.red-kontakt { margin: 0; font-size: var(--fs-s); line-height: 1.5; }
.red-kontakt a { overflow-wrap: anywhere; }
.red-bar { display: block; width: 100%; max-width: 160px; height: 6px; margin: 4px 0 6px; }
.red-bar rect { fill: var(--c-marke); }
.red-bar .red-bar__bg { fill: var(--c-linie); }
.red-linkliste { display: grid; gap: 2px var(--s5); margin: 0; padding: 0; list-style: none; }
.red-linkliste a { display: block; padding: 8px 0; border-bottom: 1px solid var(--c-linie); font-weight: var(--fw-mittel); }
@media (min-width: 900px) { .red-linkliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.red-tester { margin: 0; max-width: 100ch; font-size: .9375rem; line-height: 1.7; color: var(--c-text-2); }
.red-pick__link, .red-stimme__name a, .red-quellen__liste a, .red-hub__titel a, .vgl-tabelle__name a, .vgl-tests-kompakt a, .vgl-tl__name a, .vgl-met__name a,
.vgl-sat__name a, .vgl-hm a, .vgl-tt a, .vgl-nt a, .vgl-ml a, .vgl-m__kauf a, .por-vgl__titel a, .por-tests__text a, .por-best a, .por-az__b a, .wz-thema__text h2 a,
.wz-d a, .wz-a__gruppe a, .wz-r__mname, .wz-f__tab a, .wz-g__info a, .wz-b__statisch a { padding-block: 4px; }
.red-meta a, .red-meta time, .vgl-klein a, .red-hinweis a { white-space: nowrap; }
.vgl-fig__lead a, .vgl-fig__lead strong { overflow-wrap: break-word; }
.wz-d__s a, .wz-d__s b { display: inline-block; }
.wz-d__kat li b { display: block; }
.red-pick__name, .vgl-m__titel h3, .vgl-tabelle__name { overflow-wrap: anywhere; }
.vgl-m__rolle { overflow-wrap: anywhere; hyphens: auto; }
.red-zahlen .ui-info__knopf { width: 20px; height: 20px; margin: -2px 0; }
@media (min-width: 900px) { .red-kopf:not(.red-kopf--bild) .red-kopf__raster { grid-template-columns: minmax(0, 1fr); } .red-kopf:not(.red-kopf--bild) .red-kurz { max-width: 760px; } }
.red-pick__tags .red-tag { white-space: normal; max-width: 100%; }
.red-text .ui-link-pfeil, .red-hub__mehr, .vgl-m__kauf .ui-link-pfeil { white-space: normal; }
.wz-d__tab td a, .red-text li > strong > a, .red-text li > a:first-child { padding-block: 5px; }
.red-autor a, .wz-d__quelle a { white-space: nowrap; }
.vgl-tests td > .red-tag--sieger { display: flex; width: fit-content; margin-top: 4px; }
.red-hub__label, .red-seite-pick__titel, .red-stop__kicker { width: fit-content; max-width: calc(100% - 72px); }
.vgl-tests td > a, .vgl-nt td > a { display: inline-block; min-width: 24px; padding-block: 4px; }
@media (max-width: 1099.98px) { .red-seite { display: none; } }
.red-toc--mobil { margin: 0 0 var(--s5); padding: 0 var(--s4); }
.red-toc--mobil > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0; cursor: pointer; list-style: none; }
.red-toc--mobil > summary::-webkit-details-marker { display: none; }
.red-toc--mobil > summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--c-marke); }
.red-toc--mobil[open] > summary::after { content: "–"; }
.red-toc--mobil ol { padding-bottom: var(--s3); }
@media (min-width: 1100px) { .red-toc--mobil { display: none; } }
.vgl-klein { margin: var(--s3) 0 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--c-leise); }
.vgl-klein a { color: inherit; }
.vgl-na { color: var(--c-leise); }
.vgl-unter { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--c-leise); }
.vgl-balken { display: block; width: 100%; height: 8px; }
.vgl-balken rect { fill: var(--c-marke); }
.vgl-balken .vgl-balken__bg { fill: var(--c-linie); }
.vgl-mehr-knopf { margin: var(--s4) 0 0; text-align: center; }
.vgl-tl__fazit { margin: 0 0 var(--s2); max-width: 80ch; color: var(--c-text-2); }
.vgl-tl__meta { display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin: 0 0 var(--s4); font-size: var(--fs-s); color: var(--c-leise); }
.vgl-tl__meta span + span::before { content: "·"; margin-right: var(--s3); }
.vgl-tl__liste { display: grid; gap: var(--s3); margin: 0 0 var(--s3); padding: 0; list-style: none; }
.vgl-tl__e { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.vgl-tl__e.is-rec { border-color: var(--c-marke); }
.vgl-tl__e.is-extern { background: transparent; border-style: dashed; }
.vgl-tl__platz { display: grid; place-items: center; width: 64px; height: 48px; color: var(--c-leise); }
.vgl-tl__text { min-width: 0; }
.vgl-tl__text p { margin: 0; }
.vgl-tl__quelle { font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .03em; text-transform: uppercase; color: var(--c-leise); }
.vgl-tl__name { font-weight: var(--fw-fett); line-height: 1.35; }
.vgl-tl__name a { color: var(--c-text); }
.vgl-tl__urteil { font-size: .9375rem; color: var(--c-text-2); }
.vgl-tl__rec { display: flex; align-items: center; gap: 4px; margin-top: 2px !important; font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-gut); }
.vgl-tl__hinweis { font-size: var(--fs-s); color: var(--c-leise); }
.vgl-tl__note { grid-column: 2; }
@media (min-width: 640px) { .vgl-tl__e { grid-template-columns: 64px minmax(0, 1fr) auto; } .vgl-tl__note { grid-column: auto; } }
@media (min-width: 1100px) { .vgl-tl__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vgl-tl__liste > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.vgl-tab__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.vgl-tab__info { margin: 0; font-size: var(--fs-s); color: var(--c-leise); }
.vgl-tab__werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.vgl-dd { position: relative; }
.vgl-dd > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); list-style: none; cursor: pointer; font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-text); white-space: nowrap; }
.vgl-dd > summary::-webkit-details-marker { display: none; }
.vgl-dd > summary:hover, .vgl-dd[open] > summary, .vgl-dd.is-aktiv > summary { border-color: var(--c-marke); color: var(--c-marke); }
.vgl-dd__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-rund); background: var(--c-marke); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-fett); }
.vgl-dd__panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: var(--z-pop); width: max-content; min-width: 220px; max-width: min(340px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: var(--s2); border: 1px solid var(--c-linie); border-radius: var(--r-m); background: var(--c-bg); box-shadow: var(--sh-3); }
.vgl-dd:last-of-type .vgl-dd__panel { left: auto; right: 0; }
.vgl-dd__hinweis { margin: 4px 8px var(--s2); font-size: var(--fs-xs); color: var(--c-leise); }
.vgl-dd__panel .wz-chk { display: flex; padding: 6px 8px; border-radius: var(--r-s); }
.vgl-dd__panel .wz-chk:hover { background: var(--c-bg-weich); }
.vgl-dd__diff { margin-top: 4px; border-top: 1px solid var(--c-linie); }
.vgl-tab__reset { min-height: 40px; padding: 6px 10px; border: 0; background: none; color: var(--c-marke); font-size: var(--fs-s); font-weight: var(--fw-mittel); text-decoration: underline; }
.vgl-tab__leer { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--c-bg); }
.vgl-tabelle { table-layout: fixed; min-width: 100%; width: max-content; background: var(--c-bg); }
.vgl-tabelle col, .vgl-tabelle th, .vgl-tabelle td { width: 190px; }
.vgl-tabelle tbody th, .vgl-tabelle .vgl-tabelle__ecke { width: 148px; hyphens: auto; overflow-wrap: break-word; font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-text); white-space: normal; text-transform: none; letter-spacing: 0; }
.vgl-tabelle td { white-space: normal; overflow-wrap: break-word; hyphens: auto; vertical-align: top !important; }
.vgl-tabelle thead th { vertical-align: top; padding: var(--s3); background: var(--c-bg) !important; text-transform: none; letter-spacing: 0; white-space: normal; }
.vgl-tabelle__kopf { text-align: left; }
.vgl-tabelle__kopf .ui-bild { margin: var(--s2) 0; }
.vgl-tabelle__name { display: block; font-size: .9375rem; font-weight: var(--fw-fett); line-height: 1.3; color: var(--c-text); }
.vgl-tabelle__name a { color: var(--c-text); }
.vgl-tabelle__fuer { display: block; margin-top: 4px; font-size: var(--fs-xs); font-weight: 400; line-height: 1.4; color: var(--c-leise); }
.vgl-band { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: var(--r-rund); background: var(--c-bg-weich); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-schwer); line-height: 1.5; }
.vgl-rolle--rec .vgl-band { background: var(--c-marke); color: #fff; }
.vgl-rolle--price .vgl-band { background: var(--c-gut-bg); color: var(--c-gut); }
.vgl-rolle--alt .vgl-band { background: var(--c-marke-hell); color: var(--c-marke); }
.vgl-tabelle th.vgl-rolle--rec, .vgl-tabelle td.is-rec { background: var(--c-marke-tint) !important; }
.vgl-tabelle td .red-tag { margin-top: 4px; }
.vgl-tests-kompakt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vgl-tests-kompakt a { font-size: var(--fs-xs); padding-block: 4px; }
.vgl-gekauft { font-weight: var(--fw-fett); color: var(--c-text); }
.vgl-gekauft small { font-weight: 400; color: var(--c-leise); }
.vgl-jn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.vgl-jn--ja { background: var(--c-gut-bg); color: var(--c-gut); }
.vgl-jn--nein { background: var(--c-schlecht-bg); color: var(--c-schlecht); }
.vgl-jn__rest { font-size: var(--fs-s); }
.vgl-best { display: inline-flex; flex-direction: column; padding: 2px 8px; border-radius: var(--r-s); background: var(--c-gut-bg); font-weight: var(--fw-fett); color: var(--c-text); }
.vgl-best small { font-size: var(--fs-xs); font-weight: var(--fw-mittel); color: var(--c-gut); }
.vgl-pro, .vgl-con { margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); line-height: 1.45; }
.vgl-pro li, .vgl-con li { position: relative; margin: 0 0 4px; padding-left: 16px; }
.vgl-pro li::before, .vgl-con li::before { position: absolute; left: 0; font-weight: var(--fw-schwer); }
.vgl-pro li::before { content: "+"; color: var(--c-gut); }
.vgl-con li::before { content: "–"; color: var(--c-schlecht); }
.vgl-z--angebot .ui-partner { align-items: flex-start; }
.vgl-unter-tabelle { display: grid; gap: var(--s3); margin-top: var(--s4); }
.vgl-unter-tabelle .ui-auf { background: var(--c-bg); border: 1px solid var(--c-linie); border-radius: var(--r-l); padding: 0 var(--s4); }
.vgl-basis { padding: 0; list-style: none; }
.vgl-basis li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); padding: 6px 0; border-top: 1px solid var(--c-linie); font-size: var(--fs-s); }
@media (max-width: 639.98px) { .vgl-tabelle col, .vgl-tabelle th, .vgl-tabelle td { width: 158px; } .vgl-tabelle tbody th, .vgl-tabelle .vgl-tabelle__ecke { width: 112px; min-width: 112px !important; } }
.vgl-tt td, .vgl-nt td { vertical-align: top !important; }
.vgl-tt td:first-child { min-width: 150px; font-weight: var(--fw-mittel); }
.vgl-tt td:nth-child(2) { min-width: 180px; }
.vgl-tt small, .vgl-nt small { display: block; color: var(--c-leise); }
.vgl-tt .is-extern td { background: var(--c-bg-weich); }
[data-vgl-tests].is-gekuerzt .is-mehr { display: none; }
.vgl-met__raster { display: grid; gap: var(--s4); }
.vgl-met__k { padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.vgl-met__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); margin: 0 0 var(--s3); }
.vgl-met__kopf span { font-size: var(--fs-xs); color: var(--c-leise); }
.vgl-met__liste { margin: 0; padding: 0; list-style: none; }
.vgl-met__liste li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: 4px 0; font-size: var(--fs-s); }
.vgl-met__name { line-height: 1.3; }
.vgl-met__name a { color: var(--c-text-2); }
.vgl-met__wert { min-width: 4.5rem; text-align: right; font-weight: var(--fw-mittel); font-variant-numeric: tabular-nums; }
.vgl-met__liste .is-best .vgl-balken rect:not(.vgl-balken__bg) { fill: var(--c-gut); }
.vgl-met__liste .is-best .vgl-met__wert { color: var(--c-gut); font-weight: var(--fw-schwer); }
.vgl-met__satz { margin: var(--s3) 0 0; font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
@media (min-width: 900px) { .vgl-met__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vgl-met__raster > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.vgl-kt { margin-bottom: var(--s5); }
.vgl-kt__intro { margin: 0 0 var(--s3); font-size: .9375rem; color: var(--c-text-2); }
.vgl-kt__raster { display: grid; gap: var(--s4); }
.vgl-kt__teil { padding: var(--s3) var(--s4); border-radius: var(--r-l); background: var(--c-bg); border: 1px solid var(--c-linie); }
.vgl-kt__h { margin: 0 0 var(--s1); font-weight: var(--fw-schwer); }
.vgl-kt__teil--con .vgl-kt__h { color: var(--c-schlecht); }
.vgl-kt__teil--pro .vgl-kt__h { color: var(--c-gut); }
.vgl-kt__z { border-top: 1px solid var(--c-linie); }
.vgl-kt__z > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); min-height: 44px; padding: 6px 0; list-style: none; cursor: pointer; font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.vgl-kt__z > summary::-webkit-details-marker { display: none; }
.vgl-kt__punkte { display: inline-flex; gap: 3px; }
.vgl-kt__punkte i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-linie-stark); }
.vgl-kt__teil--con .vgl-kt__punkte i.an { background: var(--c-schlecht); }
.vgl-kt__teil--pro .vgl-kt__punkte i.an { background: var(--c-gut); }
.vgl-kt__n { min-width: 2.5rem; text-align: right; font-size: var(--fs-xs); color: var(--c-leise); font-variant-numeric: tabular-nums; }
.vgl-kt__text { padding: 0 0 var(--s3); font-size: var(--fs-s); line-height: 1.55; color: var(--c-text-2); }
.vgl-kt__text p { margin: 0 0 4px; }
@media (min-width: 900px) { .vgl-kt__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vgl-kt__raster > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.vgl-dg__raster { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
@media (min-width: 1100px) { .vgl-dg__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vgl-dg__raster--1 { grid-template-columns: minmax(0, 1fr); } }
.vgl-fig { margin: 0; padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); min-width: 0; }
.vgl-fig__titel { margin: 0 0 var(--s3); font-weight: var(--fw-schwer); color: var(--c-text); }
.vgl-fig__lead { margin: 0 0 var(--s3); font-size: var(--fs-s); line-height: 1.55; color: var(--c-text-2); }
.vgl-sat { margin: 0; padding: 0; list-style: none; }
.vgl-sat li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 5rem; align-items: center; gap: var(--s3); padding: 5px 0; font-size: var(--fs-s); }
.vgl-sat li.is-rec .vgl-sat__name { font-weight: var(--fw-fett); }
.vgl-sat__name { line-height: 1.3; }
.vgl-sat__name a { color: var(--c-text-2); }
.vgl-sat__balken { display: block; width: 100%; height: 10px; border-radius: 5px; }
.vgl-sat__balken .p, .vgl-legende .p { fill: var(--c-ampel-gruen); background: var(--c-ampel-gruen); }
.vgl-sat__balken .m, .vgl-legende .m { fill: var(--c-ampel-gelb); background: var(--c-ampel-gelb); }
.vgl-sat__balken .n, .vgl-legende .n { fill: var(--c-ampel-rot); background: var(--c-ampel-rot); }
.vgl-sat__wert { text-align: right; font-weight: var(--fw-fett); line-height: 1.2; font-variant-numeric: tabular-nums; }
.vgl-sat__wert small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.vgl-legende { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s2) 0 0; font-size: var(--fs-xs); color: var(--c-leise); }
.vgl-legende span { display: inline-flex; align-items: center; gap: 5px; }
.vgl-legende i { width: 10px; height: 10px; border-radius: 2px; }
.vgl-streu { display: block; width: 100%; height: auto; font-size: 12px; fill: var(--c-leise); }
.vgl-streu .g { stroke: var(--c-linie); stroke-width: 1; }
.vgl-streu circle { fill: var(--c-marke); fill-opacity: .82; stroke: #fff; stroke-width: 2; }
.vgl-streu circle.rec { fill: var(--c-cta-hover); }
.vgl-streu .l { fill: var(--c-text-2); font-size: 13px; font-weight: 600; }
.vgl-streu .ax { font-size: 12px; }
.vgl-hm td, .vgl-hm th { text-align: center; }
.vgl-hm tbody th { text-align: left; min-width: 120px; }
.vgl-hm td { font-weight: var(--fw-fett); font-variant-numeric: tabular-nums; }
.vgl-hm .is-lo, .vgl-hm-key .is-lo { background: var(--c-gut-bg); color: var(--c-gut); }
.vgl-hm .is-mid, .vgl-hm-key .is-mid { background: var(--c-mittel-bg); color: var(--c-mittel); }
.vgl-hm .is-hi, .vgl-hm-key .is-hi { background: var(--c-schlecht-bg); color: var(--c-schlecht); }
.vgl-hm .is-na { color: var(--c-leise); font-weight: 400; }
.vgl-hm-key i { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; border-radius: 2px; vertical-align: -1px; }
.vgl-markt__lead, .vgl-ml__lead { margin: 0 0 var(--s4); max-width: 80ch; color: var(--c-text-2); }
.vgl-ml__filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s3); font-size: var(--fs-s); }
.vgl-ml__sort select { min-height: 40px; margin-left: 4px; padding: 4px 8px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); }
.vgl-ml__count { color: var(--c-leise); }
.vgl-ml__kopf { display: none; }
.vgl-ml__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.vgl-ml__z { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "r m m" ". s b" ". k k" ". kr kr" ". g g"; gap: 4px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--c-linie); font-size: var(--fs-s); }
.vgl-ml__z.is-unser { background: var(--c-marke-tint); }
.vgl-ml__rang { grid-area: r; font-weight: var(--fw-schwer); color: var(--c-leise); font-variant-numeric: tabular-nums; }
.vgl-ml__modell { grid-area: m; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); }
.vgl-ml__name { font-weight: var(--fw-fett); color: var(--c-text); }
.vgl-ml__modell small { color: var(--c-leise); }
.vgl-ml__sterne { grid-area: s; }
.vgl-ml__zahl:nth-of-type(4) { grid-area: b; }
.vgl-ml__zahl:nth-of-type(5) { grid-area: k; }
.vgl-ml__zahl small { color: var(--c-leise); }
.vgl-ml__krit { grid-area: kr; display: flex; flex-wrap: wrap; gap: 2px var(--s3); color: var(--c-text-2); }
.vgl-ml__pos { color: var(--c-leise); }
.vgl-ml__los { grid-area: g; }
.vgl-ml__los a { display: inline-block; padding: 4px 0; font-weight: var(--fw-mittel); }
.vgl-ml.is-js .vgl-ml__z[hidden] { display: none; }
@media (min-width: 1100px) {
.vgl-ml__kopf, .vgl-ml__z { grid-template-columns: 32px minmax(0, 2.2fr) 112px 110px 110px minmax(0, 1.4fr) 120px; grid-template-areas: none; align-items: center; column-gap: var(--s4); padding-inline: var(--s3); }
.vgl-ml__kopf { display: grid; padding-block: 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .05em; text-transform: uppercase; color: var(--c-leise); }
.vgl-ml__z > * { grid-area: auto !important; }
.vgl-ml__zahl small { display: none; }
.vgl-ml__krit { flex-direction: column; }
.vgl-ml__los { text-align: right; }
}
.vgl-mod__nav ol { display: flex; gap: var(--s2); margin: 0 0 var(--s4); padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.vgl-mod__nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 4px; border: 1px solid var(--c-linie); border-radius: var(--r-rund); background: var(--c-bg); color: var(--c-text-2); font-size: var(--fs-s); font-weight: var(--fw-mittel); text-decoration: none; white-space: nowrap; }
.vgl-mod__nav a span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-bg-weich); font-size: var(--fs-xs); font-weight: var(--fw-schwer); }
.vgl-mod__nav a:hover { border-color: var(--c-marke); color: var(--c-marke); }
.vgl-m { margin-bottom: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.vgl-m.vgl-rolle--rec { border: 2px solid var(--c-marke); }
.vgl-m__kopf { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: center; padding: var(--s4); border-bottom: 1px solid var(--c-linie); }
.vgl-m__titel h3 { margin: 4px 0 var(--s2); font-size: 1.1875rem; }
.vgl-m__rolle { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .04em; text-transform: uppercase; color: var(--c-marke); }
.vgl-m__nr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-marke); color: #fff; letter-spacing: 0; }
.vgl-m__werte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; }
.vgl-m__kauf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.vgl-m__inhalt { display: grid; gap: var(--s4); padding: var(--s4); }
.vgl-m__haupt { min-width: 0; font-size: .9375rem; line-height: 1.6; color: var(--c-text-2); }
.vgl-m__haupt > p { margin: 0 0 var(--s3); }
.vgl-m__sub { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-leise); }
.vgl-m__stimmen ul, .vgl-m__sicher ul, .vgl-m__pc { margin: 0 0 var(--s3); padding: 0; list-style: none; }
.vgl-m__stimmen li, .vgl-m__sicher li { display: flex; justify-content: space-between; gap: var(--s3); margin: 3px 0; font-size: var(--fs-s); }
.vgl-m__stimmen em, .vgl-m__sicher em { flex: none; font-style: normal; font-size: var(--fs-xs); color: var(--c-leise); font-variant-numeric: tabular-nums; }
.vgl-m__sicher { margin: 0 0 var(--s3); padding: var(--s3); border-radius: var(--r-m); background: var(--c-schlecht-bg); }
.vgl-m__sicher p { margin: 0 0 var(--s1); color: var(--c-schlecht); }
.vgl-m__zwei { display: grid; gap: var(--s4); margin: var(--s3) 0; }
.vgl-m__liste { margin: 0; padding-left: 1.1em; font-size: var(--fs-s); }
.vgl-m__liste li { margin: 3px 0; }
.vgl-az { margin: 0; padding: 0; list-style: none; }
.vgl-az li { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: 3px 0; font-size: var(--fs-s); }
.vgl-az li.is-gemischt > span:first-child { color: var(--c-mittel); }
.vgl-az__w { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.vgl-az__w small { color: var(--c-leise); }
.vgl-balken--pn .pos { fill: var(--c-ampel-gruen); }
.vgl-balken--pn .neg { fill: var(--c-ampel-rot); }
.vgl-m__seite { display: grid; gap: var(--s3); align-content: start; }
.vgl-m__box { padding: var(--s3); border-radius: var(--r-m); background: var(--c-bg-weich); }
.vgl-m__spec { margin: 0; font-size: var(--fs-s); }
.vgl-m__spec > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s2); padding: 4px 0; border-top: 1px solid var(--c-linie); }
.vgl-m__spec > div:first-child { border-top: 0; }
.vgl-m__spec dt { color: var(--c-leise); }
.vgl-m__spec dd { margin: 0; color: var(--c-text); }
.vgl-m__pc li { margin: 3px 0; font-size: var(--fs-s); line-height: 1.45; }
.vgl-m__haupt .ui-auf { margin-top: var(--s2); }
@media (min-width: 640px) { .vgl-m__zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
.vgl-m__kopf { grid-template-columns: 96px minmax(0, 1fr) auto; }
.vgl-m__kauf { grid-column: auto; flex-direction: column; align-items: flex-end; }
.vgl-m__inhalt { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); }
}
.vgl-nt td:nth-child(3) { min-width: 180px; }
.vgl-fl { display: grid; gap: var(--s4); }
.vgl-fl__g h3 { margin: 0 0 var(--s2); font-size: var(--fs-h4); }
.vgl-fl__mehr > summary { display: inline-block; margin-top: var(--s2); padding: 6px 0; cursor: pointer; font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-marke); }
.vgl-fl__mehr .ui-chips { margin-top: var(--s2); }
.vgl-m--kompakt .vgl-m__inhalt { grid-template-columns: minmax(0, 1fr); }
.vgl-m--kompakt .vgl-m__seite { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vgl-m__kauf .ui-link-pfeil { font-size: var(--fs-s); }
.vgl-m__sub .red-ton { margin-left: 6px; letter-spacing: 0; text-transform: none; }
.wz-kicker { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-marke); }
.wz-titel { margin: 2px 0 0; font-size: var(--fs-h3); font-weight: var(--fw-schwer); line-height: 1.25; color: var(--c-text); }
.wz-intro { margin: var(--s2) 0 0; max-width: 72ch; color: var(--c-text-2); }
.wz-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--c-marke-hell); color: var(--c-marke); }
.wz-ico--gut { background: var(--c-gut-bg); color: var(--c-gut); }
.wz-balken { display: block; width: 100%; height: 8px; }
.wz-balken rect { fill: var(--c-marke); }
.wz-balken .wz-balken__bg { fill: var(--c-linie); }
.wz-balken--klein { height: 4px; margin-top: 4px; }
.wz-quelle { font-size: var(--fs-s); }
.wz-chk { display: inline-flex; align-items: flex-start; gap: var(--s2); cursor: pointer; font-size: var(--fs-s); line-height: 1.4; }
.wz-chk input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-marke); }
.wz-chk strong { display: block; font-weight: var(--fw-mittel); color: var(--c-text); }
.wz-chk small { display: block; font-size: var(--fs-xs); color: var(--c-leise); }
.wz-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }
.wz-seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-seg label { position: relative; display: flex; }
.wz-seg input { position: absolute; opacity: 0; pointer-events: none; }
.wz-seg span { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); cursor: pointer; font-size: var(--fs-s); font-weight: var(--fw-mittel); line-height: 1.3; color: var(--c-text); }
.wz-seg small { margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.wz-seg input:checked + span { border-color: var(--c-marke); background: var(--c-marke-tint); box-shadow: inset 0 0 0 1px var(--c-marke); }
.wz-seg input:focus-visible + span { outline: 2px solid var(--c-marke); outline-offset: 2px; }
@media (max-width: 639.98px) { .wz-seg--3 { grid-template-columns: minmax(0, 1fr); } }
.wz-b { padding: var(--s5) var(--s4); border-radius: var(--r-l); background: linear-gradient(160deg, var(--c-marke-tint) 0%, var(--c-bg) 70%); border: 1px solid var(--c-marke-hell); }
.wz-b__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
.wz-b__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-l); background: var(--c-marke); color: #fff; }
.wz-b__titel { margin: 2px 0 0; font-size: var(--fs-h3); }
.wz-b__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .wz-b__chips { margin-left: auto; } }
.wz-b__chips li { padding: 2px 10px; border-radius: var(--r-rund); background: var(--c-bg); border: 1px solid var(--c-linie); font-size: var(--fs-xs); font-weight: var(--fw-mittel); color: var(--c-text-2); }
.wz-b__fortschritt { display: none; gap: 6px; margin-bottom: var(--s4); }
.wz-b.is-js .wz-b__fortschritt { display: flex; }
.wz-b__fortschritt span { flex: 1; height: 4px; border-radius: 2px; background: var(--c-linie); }
.wz-b__fortschritt .is-fertig { background: var(--c-marke); }
.wz-b__fortschritt .is-jetzt { background: var(--c-marke-hell); box-shadow: inset 0 0 0 1px var(--c-marke); }
.wz-b__form { margin: 0; }
.wz-b__schritt { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
.wz-b.is-js .wz-b__schritt { display: none; }
.wz-b.is-js .wz-b__schritt.is-aktiv { display: block; }
.wz-b__schritt legend { display: block; margin-bottom: var(--s3); padding: 0; font-size: 1.1875rem; font-weight: var(--fw-schwer); line-height: 1.3; color: var(--c-text); }
.wz-b__nr { display: block; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: var(--fw-mittel); letter-spacing: .04em; text-transform: uppercase; color: var(--c-leise); }
.wz-b__hilfe { margin: -4px 0 var(--s3); font-size: var(--fs-s); color: var(--c-text-2); }
.wz-b__opts { display: grid; gap: var(--s2); }
@media (min-width: 640px) { .wz-b__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wz-b__opts > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.wz-b__opt { position: relative; display: flex; }
.wz-b__opt input, .wz-b__weiss input { position: absolute; opacity: 0; pointer-events: none; }
.wz-b__opt > span { flex: 1; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s3); align-items: center; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); cursor: pointer; transition: border-color var(--dauer), background var(--dauer); }
.wz-b__opt em { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg-weich); font-style: normal; font-size: var(--fs-s); font-weight: var(--fw-schwer); color: var(--c-leise); }
.wz-b__opt strong { font-size: .9375rem; line-height: 1.3; color: var(--c-text); }
.wz-b__opt small { font-size: var(--fs-xs); color: var(--c-leise); }
.wz-b__opt:hover > span { border-color: var(--c-marke); }
.wz-b__opt input:checked + span { border-color: var(--c-marke); background: var(--c-marke-tint); }
.wz-b__opt input:checked + span em { background: var(--c-marke); color: #fff; }
.wz-b__opt input:focus-visible + span, .wz-b__weiss input:focus-visible + span { outline: 2px solid var(--c-marke); outline-offset: 2px; }
.wz-b__weiss { display: inline-flex; margin-top: var(--s2); }
.wz-b__weiss span { padding: 8px 4px; cursor: pointer; font-size: var(--fs-s); color: var(--c-leise); text-decoration: underline; }
.wz-b__weiss input:checked + span { color: var(--c-marke); font-weight: var(--fw-fett); }
.wz-b__nav { min-height: 0; }
.wz-b__zurueck { padding: 8px 0; border: 0; background: none; font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-marke); }
.wz-b__ergebnis { margin-bottom: var(--s4); }
.wz-b__laden { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r-m); background: var(--c-bg); }
.wz-b__dreh { width: 28px; height: 28px; border: 3px solid var(--c-marke-hell); border-top-color: var(--c-marke); border-radius: 50%; animation: wz-dreh .8s linear infinite; }
@keyframes wz-dreh { to { transform: rotate(360deg); } }
.wz-b__karten { display: grid; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
@media (min-width: 900px) { .wz-b__karten { grid-template-columns: 1.3fr 1fr; } }
.wz-b__karte { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.wz-b__karte.is-best { border: 2px solid var(--c-marke); }
.wz-b__karte-kopf { display: flex; gap: var(--s3); align-items: center; }
.wz-b__label { align-self: flex-start; padding: 2px 10px; border-radius: var(--r-rund); background: var(--c-marke); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-schwer); }
.wz-b__karte.is-alt .wz-b__label { background: var(--c-bg-weich); color: var(--c-text-2); }
.wz-b__warum { margin: 0; padding-left: 1.1em; font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
.wz-b__entgeht { padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--c-mittel-bg); font-size: var(--fs-s); line-height: 1.5; }
.wz-b__entgeht p { margin: 0 0 4px; font-weight: var(--fw-schwer); color: var(--c-mittel); }
.wz-b__entgeht ul { margin: 0; padding-left: 1.1em; }
.wz-b__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.wz-b__statisch { margin: 0; padding: 0; list-style: none; }
.wz-b__statisch li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); padding: 6px 0; border-top: 1px solid var(--c-linie); font-size: var(--fs-s); }
.wz-b .ui-auf { border-color: var(--c-linie); }
.wz-g__raster { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .wz-g__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.wz-g__zeile { padding: var(--s2) 0; border-top: 1px solid var(--c-linie); }
.wz-g__zeile label { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.wz-g__zeile output { color: var(--c-marke); font-weight: var(--fw-fett); }
.wz-g__range { width: 100%; height: 32px; accent-color: var(--c-marke); }
.wz-g__zeile small { font-size: var(--fs-xs); color: var(--c-leise); }
.wz-g__h { margin: 0 0 var(--s2); font-weight: var(--fw-schwer); }
.wz-g__liste { margin: 0; padding: 0; list-style: none; }
.wz-g__liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); padding: 6px 0; border-top: 1px solid var(--c-linie); font-size: var(--fs-s); }
.wz-g__pos { font-weight: var(--fw-schwer); color: var(--c-leise); }
.wz-g__info a { font-weight: var(--fw-mittel); color: var(--c-text); }
.wz-g__info small { display: block; font-size: var(--fs-xs); color: var(--c-leise); }
.wz-g__d { font-size: var(--fs-xs); font-weight: var(--fw-fett); }
.wz-g__d--hoch { color: var(--c-gut); }
.wz-g__d--runter { color: var(--c-schlecht); }
.wz-g__note, .wz-g__regel { font-size: var(--fs-xs); line-height: 1.55; color: var(--c-leise); }
.wz-g__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.wz-teilen.is-ok { border-color: var(--c-gut); color: var(--c-gut); }
.wz-r { padding: var(--s5) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); box-shadow: var(--sh-1); }
.prosa .wz-r { margin: var(--s5) 0; }
.wz-r__kopf { display: flex; gap: var(--s4); align-items: flex-start; margin-bottom: var(--s4); }
.prosa .wz-r__kopf p { margin: 0; }
.wz-r__raster { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .wz-r__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: start; } .wz-r__erg { position: sticky; top: calc(var(--kopf-h) + var(--sprung-h) + var(--s4)); } }
.wz-r__form { display: grid; gap: var(--s3); margin: 0; }
.wz-r__f { display: grid; gap: 4px; }
.wz-r__fl { font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-text); }
.wz-r__in, .wz-r__sel { display: flex; align-items: stretch; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); overflow: hidden; }
.wz-r__in:focus-within, .wz-r__sel:focus-within { border-color: var(--c-marke); box-shadow: 0 0 0 3px var(--c-marke-hell); }
.wz-r__in input, .wz-r__sel select { flex: 1; min-width: 0; height: 42px; padding: 0 10px; border: 0; background: none; font-size: var(--fs-m); color: var(--c-text); }
.wz-r__in input:focus, .wz-r__sel select:focus { outline: none; }
.wz-r__in em { display: grid; place-items: center; padding: 0 10px; background: var(--c-bg-weich); font-style: normal; font-size: var(--fs-s); color: var(--c-leise); }
.wz-r__in--s { width: 108px; }
.wz-r__fh { font-size: var(--fs-xs); line-height: 1.45; color: var(--c-leise); }
.prosa .wz-r__fh--reihe { margin: -4px 0 0; }
.wz-r__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.wz-r__fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.wz-r__fs legend { margin-bottom: var(--s2); padding: 0; font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-text); }
.wz-r__fs legend small { font-weight: 400; color: var(--c-leise); }
.wz-r__gkopf { display: none; }
.wz-r__geraet { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; padding: 6px 0; border-top: 1px solid var(--c-linie); }
@media (max-width: 479.98px) { .wz-r__geraet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wz-r__geraet .wz-chk { grid-column: 1 / -1; } .wz-r__in--s { width: auto; } }
.wz-r__mehr > summary { padding: 8px 0; cursor: pointer; font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-marke); }
.wz-r__mehr > summary small { font-weight: 400; color: var(--c-leise); }
.wz-r__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-r__chips button { min-height: 36px; padding: 4px 10px; border: 1px solid var(--c-linie-stark); border-radius: var(--r-rund); background: var(--c-bg); font-size: var(--fs-xs); font-weight: var(--fw-mittel); color: var(--c-text-2); }
.wz-r__chips button:hover { border-color: var(--c-marke); color: var(--c-marke); }
.wz-r__chips small { color: var(--c-leise); }
.wz-r__rad { display: grid; grid-template-columns: 24px minmax(0, 1fr) 108px; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.wz-r__radnr { font-weight: var(--fw-schwer); color: var(--c-leise); }
.wz-r__note { margin: 0; padding: var(--s3); border-radius: var(--r-m); background: var(--c-marke-tint); font-size: var(--fs-s); line-height: 1.5; color: var(--c-text-2); }
.wz-r__note--warn { background: var(--c-mittel-bg); }
.wz-r__erg { padding: var(--s4); border-radius: var(--r-l); background: var(--c-bg-weich); }
.wz-r__ergtitel { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: var(--fw-schwer); letter-spacing: .06em; text-transform: uppercase; color: var(--c-leise); }
.wz-r__live { display: grid; gap: var(--s2); }
.wz-r__kpi { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: var(--fs-s); color: var(--c-text-2); }
.wz-r__kpi strong { font-size: 1rem; color: var(--c-text); font-variant-numeric: tabular-nums; text-align: right; }
.wz-r__kpi.is-haupt strong { font-size: 1.5rem; font-weight: var(--fw-schwer); color: var(--c-marke); }
.wz-r__teile { margin: 0; font-size: var(--fs-xs); color: var(--c-leise); }
.wz-r__msg { margin: var(--s2) 0 0; padding: var(--s3); border-radius: var(--r-m); background: var(--c-gut-bg); font-size: var(--fs-s); line-height: 1.5; color: var(--c-text); }
.wz-r__msg.is-warn { background: var(--c-mittel-bg); }
.wz-r__msg.is-bad { background: var(--c-schlecht-bg); }
.wz-r__erg .wz-teilen { margin-top: var(--s3); }
.wz-r__modelle { margin-top: var(--s5); }
.wz-r__mkopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); margin: 0 0 var(--s2); }
.wz-r__mkopf span { font-size: var(--fs-s); color: var(--c-leise); }
.wz-r__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.wz-r__m { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "b t" "w w" "p p"; gap: var(--s2) var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--c-linie); }
.wz-r__m > .ui-bild { grid-area: b; }
.wz-r__mtext { grid-area: t; min-width: 0; }
.wz-r__mname { display: block; font-weight: var(--fw-fett); line-height: 1.3; color: var(--c-text); }
.wz-r__mfacts { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-leise); }
.wz-r__mwerte { grid-area: w; display: flex; align-items: center; gap: var(--s3); }
.wz-r__fit { font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-gut); }
.wz-r__m > .ui-partner { grid-area: p; align-items: flex-start; }
@media (min-width: 900px) { .wz-r__m { grid-template-columns: 48px minmax(0, 1fr) auto auto; grid-template-areas: "b t w p"; } .wz-r__m > .ui-partner { align-items: flex-end; } }
.wz-r__keins { margin: var(--s3) 0 0; padding: var(--s3); border-radius: var(--r-m); background: var(--c-mittel-bg); font-size: var(--fs-s); }
.wz-r .ui-auf { margin-top: var(--s4); }
.wz-f__form { display: grid; gap: var(--s3); margin: 0 0 var(--s4); }
@media (min-width: 900px) { .wz-f__form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .wz-f__form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wz-f__form .wz-r__fs { grid-column: 1 / -1; } }
.wz-f__summe { display: grid; gap: var(--s2); }
@media (min-width: 640px) { .wz-f__summe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wz-f__stat { padding: var(--s3); border-radius: var(--r-m); background: var(--c-bg-weich); }
.wz-f__stat span, .wz-f__stat em { display: block; font-size: var(--fs-xs); font-style: normal; color: var(--c-leise); }
.wz-f__stat strong { display: block; margin: 2px 0; font-size: 1.375rem; font-weight: var(--fw-schwer); color: var(--c-text); font-variant-numeric: tabular-nums; }
.wz-f__stat.is-gut strong { color: var(--c-gut); }
.wz-f__stat.is-diff strong { color: var(--c-marke); }
.wz-f__urteil { margin: var(--s3) 0; font-size: var(--fs-s); color: var(--c-text-2); }
.wz-f__tab th[scope="row"] { min-width: 180px; }
.wz-f__tab th[scope="row"] a { font-weight: var(--fw-fett); }
.wz-f__tab small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.wz-f__rang { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: var(--c-bg-weich); font-size: var(--fs-xs); font-weight: var(--fw-schwer); vertical-align: top; }
.wz-f__name { display: inline-block; max-width: calc(100% - 32px); }
.wz-f__tab .is-best td, .wz-f__tab .is-best th { background: var(--c-gut-bg); }
.wz-f__best { font-weight: var(--fw-fett); color: var(--c-gut); }
.wz-f__tab .is-na td { color: var(--c-leise); }
.wz-a__wahl { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
.wz-a__wahl legend { margin-bottom: var(--s2); padding: 0; font-weight: var(--fw-fett); }
.wz-a__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.wz-a__chip { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px 8px 12px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); cursor: pointer; }
.wz-a__chip input { position: absolute; opacity: 0; pointer-events: none; }
.wz-a__chipname { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-s); font-weight: var(--fw-fett); line-height: 1.3; overflow-wrap: anywhere; }
.wz-a__chipname small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.wz-a__n { flex: none; min-width: 24px; padding: 1px 6px; border-radius: var(--r-rund); background: var(--c-bg-weich); text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-schwer); }
.wz-a__chip:has(input:checked) { border-color: var(--c-marke); background: var(--c-marke-tint); box-shadow: inset 0 0 0 1px var(--c-marke); }
.wz-a__chip:has(input:focus-visible) { outline: 2px solid var(--c-marke); outline-offset: 2px; }
.wz-a__mehr > summary { margin-top: var(--s2); padding: 6px 0; cursor: pointer; font-size: var(--fs-s); font-weight: var(--fw-fett); color: var(--c-marke); }
.wz-a__panel { display: grid; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--c-linie); }
@media (min-width: 900px) { .wz-a__panel { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s5); } }
.wz-a__brief { padding: var(--s4); border-radius: var(--r-l); background: var(--c-bg-weich); font-size: var(--fs-s); }
.wz-a__brief p { margin: 0; }
.wz-a__name { margin: 2px 0 var(--s2) !important; font-size: 1.0625rem; font-weight: var(--fw-schwer); }
.wz-a__volt span { margin-right: var(--s2); color: var(--c-leise); }
.wz-a__fakten { margin: var(--s2) 0; padding-left: 1.1em; line-height: 1.5; }
.wz-a__fakten li { margin: 4px 0; }
.wz-a__quelle { font-size: var(--fs-xs); color: var(--c-leise); }
.wz-a__summe { margin: 0 0 var(--s3); }
.wz-a__gruppe { margin-bottom: var(--s3); }
.wz-a__gruppe h4 { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: .9375rem; }
.wz-a__gruppe h4 span { font-size: var(--fs-xs); font-weight: 400; color: var(--c-leise); }
.wz-a__gruppe ul { margin: 0; padding: 0; list-style: none; }
.wz-a__gruppe li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 5px 0; border-top: 1px solid var(--c-linie); font-size: var(--fs-s); }
.wz-a__gruppe li small { display: block; font-size: var(--fs-xs); color: var(--c-leise); }
.wz-a__luecke { padding: var(--s3); border-radius: var(--r-m); background: var(--c-mittel-bg); font-size: var(--fs-s); }
.wz-a__luecke--ok { background: var(--c-gut-bg); }
.wz-a__luecke p { margin: 0; }
.wz-a__links { display: flex; flex-wrap: wrap; gap: 4px var(--s3); margin-top: var(--s2) !important; }
.wz-a__links a { padding: 4px 0; }
.wz-a__fuss { margin: var(--s3) 0 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--c-leise); }
.wz-ah { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); font-size: var(--fs-s); }
.wz-ah .wz-ico { display: none; }
.wz-ah p { margin: 0; }
.wz-ah > .ui-link-pfeil { display: inline-block; padding-block: 6px; }
.wz-ah__sys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px !important; color: var(--c-leise); }
.wz-ah__sys a { padding: 3px 10px; border: 1px solid var(--c-linie); border-radius: var(--r-rund); color: var(--c-text-2); font-weight: var(--fw-mittel); text-decoration: none; }
.wz-ah__sys a:hover { border-color: var(--c-marke); color: var(--c-marke); }
@media (min-width: 640px) { .wz-ah { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .wz-ah .wz-ico { display: grid; } }
.wz-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 var(--s5); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-linie); overflow: hidden; }
.wz-kpis > div { display: flex; flex-direction: column; padding: var(--s3) var(--s4); background: var(--c-bg); }
.wz-kpis dd { margin: 0; font-size: 1.5rem; font-weight: var(--fw-schwer); color: var(--c-text); font-variant-numeric: tabular-nums; }
.wz-kpis dt { font-size: var(--fs-s); color: var(--c-leise); }
@media (min-width: 900px) { .wz-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wz-d__lead { margin: -4px 0 var(--s4); color: var(--c-text-2); }
.wz-d__bereiche { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
@media (min-width: 900px) { .wz-d__bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wz-d__bereiche > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .wz-d__bereiche { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wz-d__bereiche > :last-child:nth-child(odd) { grid-column: auto; } .wz-d__bereiche > :nth-last-child(2):nth-child(3n+1), .wz-d__bereiche > :last-child:nth-child(3n+2) { grid-column: span 1; } }
.wz-d__bereich { padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); }
.wz-d__bh { display: flex; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s2) !important; font-weight: var(--fw-schwer); }
.wz-d__bh small { font-weight: 400; color: var(--c-leise); }
.wz-d__bereich ul { margin: 0; padding: 0; list-style: none; }
.wz-d__bereich li { padding: 6px 0; border-top: 1px solid var(--c-linie); font-size: var(--fs-s); }
.wz-d__m { display: block; font-weight: var(--fw-fett); }
.wz-d__s { display: block; color: var(--c-leise); }
.wz-d__filter { display: grid; gap: var(--s3); margin-bottom: var(--s3); padding: var(--s4); border-radius: var(--r-l); background: var(--c-bg-weich); font-size: var(--fs-s); font-weight: var(--fw-mittel); }
.wz-d__filter label:not(.wz-chk) { display: grid; gap: 4px; }
.wz-d__filter input[type="search"], .wz-d__filter select { height: 42px; padding: 0 10px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); font-size: var(--fs-m); }
.wz-d__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
@media (min-width: 900px) { .wz-d__filter { grid-template-columns: 2fr 1.4fr 1fr 1.2fr; } .wz-d__reihe { grid-column: 1 / -1; } }
.wz-d__count { margin: 0 0 var(--s2); font-size: var(--fs-s); color: var(--c-leise); }
.wz-d__tab td { vertical-align: top !important; }
.wz-d__tab td:first-child { min-width: 170px; }
.wz-d__tab small { display: block; color: var(--c-leise); }
.wz-d__tab .is-sieger td:last-child { font-weight: var(--fw-fett); color: var(--c-gut); }
.wz-d__tab .is-sieger td:first-child { box-shadow: inset 3px 0 0 var(--c-ampel-gruen); }
.wz-d__leer, .wz-d__mehr { margin: var(--s3) 0 0; text-align: center; }
.wz-d__quelle { margin-top: var(--s5); font-size: var(--fs-s); color: var(--c-leise); }
.wz-d__chips { margin-bottom: var(--s4); }
.wz-d__chips button { cursor: pointer; }
.wz-d__thema { border-top: 1px solid var(--c-linie); }
.wz-d__thema > summary { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: var(--s3); min-height: 48px; padding: 6px 0; list-style: none; cursor: pointer; }
.wz-d__thema > summary::-webkit-details-marker { display: none; }
.wz-d__tn { display: flex; align-items: center; gap: var(--s2); font-weight: var(--fw-mittel); }
.wz-d__rang { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-bg-weich); font-size: var(--fs-xs); font-weight: var(--fw-schwer); }
.wz-d__tp { text-align: right; font-size: var(--fs-xs); color: var(--c-leise); white-space: nowrap; }
.wz-d__tp strong { display: block; font-size: .9375rem; color: var(--c-text); }
.wz-d__tb { padding: 0 0 var(--s3); font-size: var(--fs-s); color: var(--c-text-2); }
.wz-d__tb ul { margin: 0; padding-left: 1.1em; }
.wz-d__tb li { margin: 4px 0; }
.wz-d__tb small { display: block; color: var(--c-leise); }
.wz-d__gut { font-weight: var(--fw-fett); color: var(--c-gut); }
.wz-d__note { font-size: var(--fs-xs); color: var(--c-leise); }
@media (max-width: 639.98px) { .wz-d__hm { display: none; } .wz-d__thema > summary { grid-template-columns: minmax(0, 1fr) 60px auto; } }
.wz-d__kats { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .wz-d__kats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wz-d__kat { padding: var(--s3) var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); }
.wz-d__kat h3 { margin: 0; font-size: 1.0625rem; }
.wz-d__katmeta { margin: 2px 0 var(--s2); font-size: var(--fs-xs); color: var(--c-leise); }
.wz-d__kat ol { margin: 0 0 var(--s2); padding-left: 1.2em; font-size: var(--fs-s); }
.wz-d__kat em { font-style: normal; color: var(--c-leise); }
.wz-d__kat small { display: block; color: var(--c-leise); }
.wz-stats { margin: var(--s4) 0; }
.wz-stats__stand { margin: var(--s2) 0 0; font-size: var(--fs-xs); }
.wz-themen { display: grid; gap: var(--s4); }
.wz-thema { display: grid; gap: var(--s3); padding: var(--s3); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); }
.wz-thema__bild { position: relative; display: block; }
.wz-thema__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-m); }
.wz-thema__text h2 { margin: 0 0 4px; font-size: var(--fs-h3); }
.wz-thema__text h2 a { color: var(--c-text); text-decoration: none; }
.wz-thema__text h2 a:hover { color: var(--c-marke); text-decoration: underline; }
.prosa .wz-thema__text > p, .wz-thema__text > p { margin: 0 0 var(--s2); font-size: .9375rem; color: var(--c-text-2); }
.wz-thema__links { display: flex; flex-wrap: wrap; gap: 4px var(--s2); margin: 0 0 var(--s2) !important; padding: 0 !important; list-style: none; }
.wz-thema__links li { margin: 0 !important; padding: 0 !important; }
.wz-thema__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--c-linie); border-radius: var(--r-rund); font-size: var(--fs-s); font-weight: var(--fw-mittel); color: var(--c-text-2); text-decoration: none; }
.wz-thema__links a:hover { border-color: var(--c-marke); color: var(--c-marke); }
.wz-thema__links small { font-size: var(--fs-xs); color: var(--c-leise); }
.wz-thema__links li > small { display: none; }
.wz-thema__fuss { margin: 0 !important; }
@media (min-width: 900px) { .wz-thema { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s5); padding: var(--s4); align-items: start; } }
.por-suche { display: flex; gap: var(--s2); max-width: 640px; margin-top: var(--s5); }
.por-suche input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-m); background: var(--c-bg); font-size: var(--fs-m); color: var(--c-text); }
.por-suche input:focus { outline: none; border-color: var(--c-marke); box-shadow: 0 0 0 3px var(--c-marke-hell); }
.por-suche .ui-btn { min-height: 52px; }
@media (max-width: 479.98px) { .por-suche .ui-btn { padding-inline: 14px; } }
.por-held { position: relative; overflow: hidden; padding: var(--s7) 0 var(--s6); background: var(--c-text); color: #fff; }
.por-held__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.por-held__innen { position: relative; }
.por-held h1 { max-width: 22ch; margin: 0; color: #fff; }
.por-held__lead { max-width: 62ch; margin: var(--s3) 0 0; font-size: var(--fs-l); line-height: 1.55; color: #e3e8f4; }
.por-held__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); max-width: 760px; margin: var(--s5) 0 0; }
.por-held__zahlen > div { display: flex; flex-direction: column; }
.por-held__zahlen dd { margin: 0; font-size: 1.5rem; font-weight: var(--fw-schwer); line-height: 1.2; font-variant-numeric: tabular-nums; }
.por-held__zahlen dt { font-size: var(--fs-s); color: #c9d2e6; }
.por-held__ki { top: auto; bottom: 12px; right: 12px; }
@media (min-width: 900px) { .por-held { padding: var(--s8) 0 var(--s7); } .por-held__zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.por-vgl-liste { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .por-vgl-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); } .por-vgl-liste > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.por-vgl { position: relative; display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s3); border: 1px solid var(--c-linie); border-radius: var(--r-l); background: var(--c-bg); transition: border-color var(--dauer), box-shadow var(--dauer); }
.por-vgl:hover { border-color: var(--c-linie-stark); box-shadow: var(--sh-2); }
.por-vgl__bild { flex: none; width: 120px; height: 80px; object-fit: cover; border-radius: var(--r-m); background: var(--c-bg-weich); }
.por-vgl__text { flex: 1; min-width: 0; }
.por-vgl__titel { margin: 0 0 2px; font-size: 1.0625rem; line-height: 1.3; }
.por-vgl__titel a { color: var(--c-text); text-decoration: none; }
.por-vgl__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.por-vgl:hover .por-vgl__titel a { color: var(--c-marke); text-decoration: underline; }
.por-vgl__zahlen { margin: 0 0 var(--s2); font-size: var(--fs-xs); color: var(--c-leise); }
.por-vgl__z { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); margin: 2px 0 0; font-size: var(--fs-s); line-height: 1.4; color: var(--c-text); }
.por-vgl__z > span:first-child { min-width: 92px; font-size: var(--fs-xs); font-weight: var(--fw-fett); letter-spacing: .03em; text-transform: uppercase; color: var(--c-leise); }
.por-vgl__z small { color: var(--c-leise); }
.por-vgl__z .ui-score { height: 22px; min-width: 38px; }
@media (max-width: 479.98px) { .por-vgl__bild { width: 84px; height: 56px; } .por-vgl { gap: var(--s3); } .por-vgl__z > span:first-child { min-width: 0; flex-basis: 100%; } }
.por-kats { margin-top: var(--s5); }
.por-kats__titel { margin: 0 0 var(--s2); font-size: var(--fs-h4); }
.por-zwei { display: grid; gap: var(--s6); }
@media (min-width: 1100px) { .por-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .por-zwei--1 { grid-template-columns: minmax(0, 1fr); } }
.por-tests { display: grid; grid-template-columns: fit-content(140px) minmax(0, 1fr); column-gap: var(--s3); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linie); }
.por-tests li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--c-linie); }
@supports not (grid-template-columns: subgrid) { .por-tests li { grid-template-columns: 136px minmax(0, 1fr); gap: var(--s3); } }
.por-tests__text { min-width: 0; line-height: 1.35; }
.por-tests__text > a { font-weight: var(--fw-fett); color: var(--c-text); }
.por-tests__text small { display: block; margin-top: 2px; color: var(--c-leise); }
.por-tests__text small a { color: inherit; }
.por-best { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .por-best { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.por-best li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--c-linie); min-width: 0; }
.por-best a { padding-block: 2px; font-weight: var(--fw-fett); color: var(--c-text); }
.por-best small { font-size: var(--fs-xs); color: var(--c-leise); }
.por-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; }
.por-schritte { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 640px) { .por-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .por-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.por-schritte li { counter-increment: s; padding: var(--s4); border: 1px solid var(--c-linie); border-radius: var(--r-l); }
.por-schritte li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--s2); border-radius: 50%; background: var(--c-marke-hell); color: var(--c-marke); font-weight: var(--fw-schwer); }
.por-schritte strong { display: block; margin-bottom: 4px; color: var(--c-text); }
.por-schritte span { font-size: var(--fs-s); line-height: 1.55; color: var(--c-text-2); }
.por-az__nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--s4); }
.por-az__nav a { display: grid; place-items: center; min-width: 36px; height: 36px; border: 1px solid var(--c-linie); border-radius: var(--r-s); background: var(--c-bg); font-weight: var(--fw-fett); text-decoration: none; }
.por-az__nav a:hover { border-color: var(--c-marke); }
.por-az { columns: 2; column-gap: var(--s4); }
@media (min-width: 640px) { .por-az { columns: 3; column-gap: var(--s6); } }
@media (min-width: 1100px) { .por-az { columns: 4; } }
.por-az__b { break-inside: avoid; margin-bottom: var(--s4); }
.por-az__b h3 { margin: 0 0 4px; font-size: var(--fs-h4); color: var(--c-marke); }
.por-az__b ul { margin: 0; padding: 0; list-style: none; }
.por-az__b li { padding: 4px 0; line-height: 1.3; }
.por-az__b li a { font-weight: var(--fw-mittel); -webkit-hyphens: auto; hyphens: auto; }
.por-az__b li small { display: block; font-size: var(--fs-xs); color: var(--c-leise); }
.por-intro { max-width: 80ch; }
.por-tests__urteil { display: inline-block; padding: 2px 8px; border: 1px solid var(--c-linie-stark); border-radius: var(--r-s); font-size: var(--fs-xs); font-weight: var(--fw-fett); line-height: 1.3; overflow-wrap: anywhere; }
.por-best a { -webkit-hyphens: auto; hyphens: auto; }