/* dadbase – main.css
   1 Tokens · 2 Basis · 3 Layout · 4 Header/Footer · 5 Bausteine · 6 Karten
   7 Seitenköpfe · 8 Artikel · 9 Produkt-Komponenten · 10 Vergleich · 11 Hub · 12 Responsive */

/* ---------- 0 Fonts (lokal, DSGVO-sauber) ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* Mono ist auf die tatsächlich genutzten Stärken 400–500 reduziert – spart ein Drittel der Dateigröße. */
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

/* ---------- 1 Tokens ---------- */
:root {
	--bg: #F6F4EE; --surface: #FFFFFF; --surface-2: #ECE8DE;
	--fg: #16181D; --muted: #5A5F6B; --line: #DDD8CC;
	--accent: #FF6A3D; --accent-fg: #16181D; --accent-text: #B93A0B;
	--inv-bg: #16181D; --inv-fg: #F2F0EA; --inv-muted: #B4B8C1; --inv-line: #343944;
	--good: #1F7A45; --bad: #B42318;

	--font-display: "Bricolage Grotesque", system-ui, sans-serif;
	--font-body: "Instrument Sans", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	--container: 1200px; --gutter: clamp(20px, 5vw, 80px);
	--r-s: 12px; --r-m: 18px; --r-l: 24px; --r-xl: 32px; --r-pill: 999px;
	--section: clamp(64px, 9vw, 112px);
	color-scheme: light;
}
:root[data-theme="dark"] {
	--bg: #111318; --surface: #1A1D24; --surface-2: #232730;
	--fg: #F2F0EA; --muted: #A3A8B3; --line: #2E333D;
	--accent-text: #FF8F66;
	--inv-bg: #232730; --inv-fg: #F2F0EA; --inv-muted: #B4B8C1; --inv-line: #3A404C;
	--good: #5FD08D; --bad: #FF8A7A;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #111318; --surface: #1A1D24; --surface-2: #232730;
		--fg: #F2F0EA; --muted: #A3A8B3; --line: #2E333D;
		--accent-text: #FF8F66;
		--inv-bg: #232730; --inv-fg: #F2F0EA; --inv-muted: #B4B8C1; --inv-line: #3A404C;
		--good: #5FD08D; --bad: #FF8A7A;
		color-scheme: dark;
	}
}

/* ---------- 2 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .82; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip-path: none; padding: 12px 18px; background: var(--fg); color: var(--bg); border-radius: var(--r-pill); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 3 Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }
.section { margin-top: var(--section); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 24px); }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 4 Header / Footer ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header__inner { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.wordmark span { color: var(--accent); }
.wordmark--s { font-size: 26px; }
.nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
.nav .current-menu-item > a, .nav .current-menu-parent > a, .nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-toggle { display: none; }
.search-panel { border-top: 1px solid var(--line); padding: 16px 0; }
.search-panel[hidden] { display: none; }
.search-form { display: flex; gap: 10px; }
.search-form input[type="search"] { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); }

.site-footer { margin-top: var(--section); }
.site-footer__grid { border-top: 1px solid var(--line); padding: 56px 0 28px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.site-footer__about { max-width: 340px; color: var(--muted); font-size: 15px; }
.site-footer__about .wordmark { color: var(--fg); margin-bottom: 8px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; }
.site-footer__legal { border-top: 1px solid var(--line); padding: 20px 0 32px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }

/* ---------- 5 Bausteine ---------- */
.kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.kicker--muted { color: var(--muted); }
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.tag { display: inline-block; align-self: flex-start; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.tag--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); font-size: 15px; font-weight: 600; cursor: pointer; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--fg); }
.btn--dark { background: var(--fg); border-color: var(--fg); color: var(--bg); min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 40px); margin-top: 10px; }
.ph { display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.media { overflow: hidden; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--43 { aspect-ratio: 4 / 3; } .media--32 { aspect-ratio: 3 / 2; } .media--219 { aspect-ratio: 21 / 9; border-radius: 28px; } .media--11 { aspect-ratio: 1; }
.inverse { background: var(--inv-bg); color: var(--inv-fg); border-radius: var(--r-xl); }
.inverse .kicker { color: var(--accent); }
.inverse .muted { color: var(--inv-muted); }
.muted { color: var(--muted); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); padding-top: 32px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb [aria-current] { color: var(--fg); }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.pagination .current { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* Newsletter */
.newsletter { padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.newsletter__text { flex: 1 1 320px; max-width: 520px; }
.newsletter h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 12px; }
.newsletter form { flex: 1 1 340px; max-width: 480px; display: flex; flex-direction: column; gap: 8px; }
.newsletter label { font-size: 13px; color: var(--inv-muted); }
.newsletter__row { display: flex; gap: 10px; }
.newsletter input[type="email"] { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--inv-line); background: transparent; color: var(--inv-fg); }
.newsletter .btn { height: 52px; }

/* ---------- 6 Karten ---------- */
.card { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 0 8px 12px; }
.card h3 { font-size: 22px; letter-spacing: -.01em; line-height: 1.2; }
.card p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.card--s h3 { font-size: 18px; }
.card--row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px; }
.card--row h3 { font-size: 20px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; }
.hub-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.hub-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.hub-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); color: var(--fg); }
.hub-card h3 { font-size: 24px; }
.hub-card p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.row-link { display: grid; grid-template-columns: 110px minmax(0, 1fr) 24px; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.row-link__title { font-size: 18px; font-weight: 600; line-height: 1.35; }
.row-list { border-bottom: 1px solid var(--line); }

/* ---------- 7 Seitenköpfe ---------- */
.hero { padding-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(48px, 7vw, 84px); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.hero__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--muted); max-width: 520px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__feature { display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.hero__feature h2 { font-size: clamp(24px, 2.4vw, 30px); }
.page-head { display: flex; flex-direction: column; gap: 20px; max-width: 980px; }
.page-head h1 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.page-head--xl h1 { font-size: clamp(48px, 7.5vw, 96px); line-height: .95; letter-spacing: -.045em; }
.lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--muted); }
.byline { display: flex; align-items: center; gap: 14px; }
.byline img, .byline .avatar-ph { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); }
.byline__name { font-size: 15px; font-weight: 600; }
.head-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: end; }
.head-facts { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

/* ---------- 8 Artikel ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 7vw, 96px); align-items: start; margin-top: 64px; }
.article-aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 104px; }
.box { border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); padding: 24px; }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; }
.toc a { display: flex; align-items: center; min-height: 40px; padding-left: 14px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.3; color: var(--muted); }
.toc a.is-active { color: var(--fg); border-left-color: var(--accent); }
.prose { max-width: 780px; font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 24px; }
.prose > h2 { font-size: clamp(27px, 2.8vw, 34px); line-height: 1.15; margin-top: 56px; }
.prose > h3 { font-size: 24px; margin-top: 40px; }
.prose a:not(.btn):not(.link-arrow) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose img { border-radius: var(--r-m); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.prose blockquote { margin-inline: 0; padding-left: 28px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.prose blockquote cite { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 400; font-style: normal; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); }
.prose th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.prose .wp-block-table { overflow-x: auto; }
/* FAQ: Core-Block „Details" */
.prose details, .faq details { border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); margin-top: 12px; }
.prose summary, .faq summary { min-height: 64px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.prose summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.prose summary::after, .faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-mono); font-size: 22px; font-weight: 400; color: var(--accent-text); }
.prose details[open] > summary::after, .faq details[open] > summary::after { content: "–"; }
.prose details > :not(summary), .faq details > :not(summary) { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.tip { border-radius: var(--r-l); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); padding: 22px 28px 24px; }
.tip__badge { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tip__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--fg); }
.tip__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); }
.tip p { font-size: 17px; line-height: 1.65; color: var(--fg); }
.panel .tip, .sidebar-widget .tip { background: var(--surface); }
.sidebar-widget .tip { padding: 18px 20px 20px; }
.sidebar-widget .tip p { font-size: 15px; }
.author-box { margin-top: 48px; display: flex; gap: 20px; align-items: center; }
.author-box img, .author-box .avatar-ph { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); }
.author-box__name { font-size: 18px; font-weight: 700; margin: 6px 0; }
.author-box p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.aside-cta { padding: 24px; display: flex; flex-direction: column; gap: 14px; border-radius: var(--r-l); }
.aside-cta__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.aside-cta .link-arrow { color: var(--inv-fg); }

/* ---------- 9 Produkt-Komponenten ---------- */
.checklist { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.checklist svg { flex-shrink: 0; margin-top: 3px; }
.checklist--pro svg { color: var(--good); } .checklist--con svg { color: var(--bad); }
.product-box { border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 24px; }
.product-box__top { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; }
.product-box__info { display: flex; flex-direction: column; gap: 12px; }
.product-box h3 { font-size: 26px; line-height: 1.15; margin: 0; }
.product-box__specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.spec-mini__label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec-mini__value { font-size: 16px; font-weight: 600; }
.product-box__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.product-box__lists li { font-size: 15px; }
.product-box__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.review-top { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.verdict { padding: 36px; border-radius: 28px; display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.verdict__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.verdict__grade { font-family: var(--font-display); font-size: clamp(64px, 7vw, 88px); line-height: .95; font-weight: 800; letter-spacing: -.04em; }
.verdict__label { font-family: var(--font-mono); font-size: 13px; color: var(--inv-muted); }
.verdict__text { font-size: 17px; line-height: 1.55; color: var(--inv-muted); }
.verdict__buy { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--inv-line); }
.verdict__price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.verdict__price strong { font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.verdict .btn--ghost { border-color: var(--inv-line); color: var(--inv-fg); }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pc-grid .box { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.pc-grid .kicker--good { color: var(--good); } .pc-grid .kicker--bad { color: var(--bad); }
.pc-grid h3 { font-size: 22px; }
.grades { padding: 12px 28px 8px; }
.grades__total { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 17px; font-weight: 700; }
.grades__total strong { font-family: var(--font-display); font-size: 32px; font-weight: 800; }
.grade-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 110px 56px; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.grade-row__label { font-size: 16px; font-weight: 600; }
.grade-row__bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.grade-row__bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.grade-row__value { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-align: right; }
.spec-list { padding: 8px 28px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.spec-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec-list dd { margin: 0; font-size: 16px; font-weight: 600; text-align: right; }
.facts > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 15px; font-weight: 600; }
.facts { margin: 12px 0 0; }

/* ---------- 10 Vergleich ---------- */
.compare-wrap { border-radius: 28px; background: var(--surface); border: 1px solid var(--line); padding: 16px 16px 24px; overflow-x: auto; }
.compare { display: grid; grid-template-columns: 200px repeat(var(--cols), minmax(190px, 1fr)); min-width: calc(200px + var(--cols) * 190px); }
.compare__cell { padding: 18px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; font-size: 16px; line-height: 1.45; }
.compare__cell--label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.compare__cell--head { border-top: 0; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 24px; padding-bottom: 24px; }
.compare__cell--head .tag { visibility: visible; }
.compare__cell--head .tag[aria-hidden="true"] { visibility: hidden; }
.compare__name { font-family: var(--font-display); font-size: 20px; line-height: 1.2; font-weight: 700; }
.compare__cell.is-first { background: var(--surface-2); }
.compare__cell--head.is-first { border-radius: 20px 20px 0 0; }
.compare__cell--foot.is-first { border-radius: 0 0 20px 20px; }
.compare__cell.is-best { font-weight: 700; }
.compare__cell.is-best::after { content: "★"; margin-left: 8px; color: var(--accent-text); font-size: 13px; }
.compare__grade { font-family: var(--font-display); font-size: 28px; font-weight: 800; }
.yn { display: inline-flex; align-items: center; gap: 8px; }
.yn--yes svg { color: var(--good); } .yn--no svg { color: var(--bad); }
.steps .box { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.steps h3 { font-size: 22px; }
.steps p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.teaser { padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.teaser h2 { font-size: clamp(32px, 3.8vw, 44px); line-height: 1.05; }
.teaser__rows { border-bottom: 1px solid var(--inv-line); }
.teaser__row { display: grid; grid-template-columns: 32px 64px minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--inv-line); }
.teaser__row .media { border-color: var(--inv-line); background: transparent; border-radius: var(--r-s); }
.teaser__row .meta { color: var(--inv-muted); font-size: 14px; }
.teaser__name { display: flex; flex-direction: column; gap: 6px; font-size: 17px; font-weight: 600; }

/* ---------- 11 Hub ---------- */
.hub-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-m); background: var(--accent); color: var(--accent-fg); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.chip.is-active { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.hub-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-top: 56px; }
.hub-feature__main { padding: 20px; border-radius: 28px; gap: 20px; }
.hub-feature__main h2 { font-size: clamp(26px, 2.6vw, 32px); }
.hub-feature__side { display: flex; flex-direction: column; gap: 20px; }
.hub-compare { padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px); }
.hub-compare h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 10px 0 32px; }
.hub-compare__item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: 22px; border: 1px solid var(--inv-line); }
.hub-compare__item strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.hub-compare__item svg { color: var(--accent); flex-shrink: 0; }

/* ---------- 12 Responsive ---------- */
@media (max-width: 1080px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.article-layout { grid-template-columns: minmax(0, 1fr); }
	.article-aside { position: static; order: -1; }
	.article-aside .aside-cta, .article-aside .facts-box { display: none; }
	.nav { display: none; position: absolute; top: 80px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 24px; }
	.nav.is-open { display: block; }
	.nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav a { min-height: 52px; font-size: 18px; border-bottom: 1px solid var(--line); }
	.nav-toggle { display: inline-flex; }
	.header-actions .btn--dark { display: none; }
}
@media (max-width: 860px) {
	.hero, .head-split, .review-top, .hub-feature, .teaser { grid-template-columns: minmax(0, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.section-head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
	.grade-row { grid-template-columns: minmax(0, 1fr) 56px; row-gap: 8px; }
	.grade-row__bar { grid-column: 1 / -1; order: 3; }
	.grade-row .meta { display: none; }
}
@media (max-width: 600px) {
	body { font-size: 16px; }
	.grid--2, .grid--3, .grid--4, .pc-grid, .spec-list, .product-box__lists { grid-template-columns: minmax(0, 1fr); }
	.product-box__top { grid-template-columns: minmax(0, 1fr); }
	.product-box__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.product-box, .verdict { padding: 22px; }
	.card--row { grid-template-columns: 110px minmax(0, 1fr); }
	.row-link { grid-template-columns: minmax(0, 1fr) 24px; }
	.row-link .meta { grid-column: 1 / -1; }
	.teaser__row { grid-template-columns: 24px minmax(0, 1fr) auto; }
	.teaser__row .media, .teaser__row .meta:last-child { display: none; }
	.newsletter__row { flex-direction: column; }
	.prose { font-size: 17px; }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.compare { grid-template-columns: 120px repeat(var(--cols), minmax(170px, 1fr)); min-width: calc(120px + var(--cols) * 170px); }
	.compare__cell { padding: 14px; font-size: 15px; }
}

/* ---------- 13 Affiliate: Preisvergleich, Preisverlauf ---------- */
.offers, .price-chart, .alternatives { border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); padding: 28px; }
.alternatives { background: transparent; border: 0; padding: 0; }
.offers__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.offers__head h3 { font-size: 22px; margin: 0; }
.offers__list { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 0 !important; }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.offer.is-best { background: var(--surface-2); margin: 0 -16px; padding: 18px 16px; border-radius: var(--r-m); border-top-color: transparent; }
.offer.is-best + .offer { border-top-color: transparent; }
.offer__merchant { display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.offer__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.offer__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.offer__price strong { font-family: var(--font-display); font-size: 24px; font-weight: 800; }
.offer__price s { font-size: 14px; color: var(--muted); }
.offers__note, .offers__empty { margin-top: 16px !important; font-size: 13px; line-height: 1.5; color: var(--muted); }
.offers__empty { font-size: 16px; }
.price-chart__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 20px; }
.price-chart__stats dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.price-chart__stats dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.price-chart__plot { position: relative; touch-action: pan-y; }
.price-chart__svg { width: 100%; height: auto; overflow: visible; }
.price-chart__grid { stroke: var(--line); stroke-width: 1; }
.price-chart__tick { fill: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.price-chart__line { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.price-chart__area { fill: var(--accent); opacity: .1; stroke: none; }
.price-chart__cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.price-chart__dot { fill: var(--accent-text); stroke: var(--surface); stroke-width: 2; }
.price-chart__tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--inv-bg); color: var(--inv-fg); font-size: 12px; line-height: 1.3; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.price-chart__tip[hidden], .price-chart__cross[hidden], .price-chart__dot[hidden] { display: none; }
.price-chart__tip strong { font-family: var(--font-display); font-size: 16px; }
.price-chart__tip span { color: var(--inv-muted); }
.prose .price-chart__table, .price-chart__table { border: 0; background: transparent; margin-top: 12px; }
.prose .price-chart__table summary, .price-chart__table summary { min-height: 44px; padding: 0; font-size: 14px; font-weight: 600; color: var(--accent-text); justify-content: flex-start; }
.prose .price-chart__table summary::after, .price-chart__table summary::after { content: none; }
.prose .price-chart__table > table, .price-chart__table > table { padding: 0; font-size: 15px; color: var(--fg); }
@media (max-width: 600px) {
	.offers, .price-chart { padding: 20px; }
	.offer { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
	.offer .btn { grid-column: 1 / -1; }
	.price-chart__stats dd { font-size: 17px; }
	.price-chart__tick { font-size: 22px; }
}

/* Produktfotos (meist freigestellt auf Weiß): vollständig zeigen statt beschneiden */
.media--product { background: #fff; }
.media--product img { object-fit: contain; padding: 6%; }
.review-gallery { display: flex; flex-direction: column; gap: 12px; }
.review-gallery__thumbs { display: grid; gap: 12px; }

/* ---------- 14 Testbericht: Galerie, Balken in der Urteilskarte, Kriterium-Block ---------- */
.review-gallery__thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.review-gallery__thumb { padding: 0; cursor: pointer; border: 1px solid var(--line); opacity: .72; transition: opacity .15s; }
.review-gallery__thumb:hover, .review-gallery__thumb[aria-current="true"] { opacity: 1; }
.review-gallery__thumb[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.verdict__grade { font-size: clamp(56px, 6vw, 76px); }
.verdict__bars { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.verdict__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; font-size: 14px; color: var(--inv-muted); }
.verdict__bar strong { font-family: var(--font-display); font-size: 15px; color: var(--inv-fg); }
.bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: var(--r-pill); background: var(--inv-line); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.grade-chip { border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.grade-chip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grade-chip__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.grade-chip__row strong { font-family: var(--font-display); font-size: 24px; font-weight: 800; }
.spec-list--single { grid-template-columns: minmax(0, 1fr); }
.data-field { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .review-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 15 Baukasten: Card, Buttons, Trennlinie, Bilderboxen, Sidebar-Widget ---------- */
.panel { border-radius: var(--r-l); padding: 28px 32px; border: 1px solid transparent; }
.panel--weiss { background: var(--surface); border-color: var(--line); }
.panel--sand { background: var(--surface-2); }
.panel--orange { background: var(--accent); color: var(--accent-fg); }
.panel--dunkel { background: var(--inv-bg); color: var(--inv-fg); }
.panel--rahmen { background: transparent; border-color: var(--line); }
.panel--highlight { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); border-width: 2px; box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--accent) 70%, transparent); }
.panel--highlight .panel__head { color: var(--accent-text); font-size: 13px; }
.panel--highlight .panel__icon { background: var(--accent); color: var(--accent-fg); }
.panel--highlight .panel__body > ul, .panel--highlight .panel__body > ol { gap: 12px; }
.panel--highlight .panel__body p, .panel--highlight .panel__body li { font-size: 17px; }
.panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.panel--orange .panel__head, .panel--orange a:not(.btn):not(.wp-block-button__link) { color: var(--accent-fg) !important; }
.panel--dunkel .panel__head, .panel--dunkel a:not(.btn):not(.wp-block-button__link) { color: var(--accent) !important; }
.panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: var(--accent-fg); }
.panel--orange .panel__icon { background: var(--accent-fg); color: var(--accent); }
.panel__body > * + * { margin-top: 14px; }
.panel__body > h2, .panel__body > h3 { font-size: 22px; margin-top: 0; }
.panel__body > h2 + *, .panel__body > h3 + * { margin-top: 10px; }
.panel__body p, .panel__body li { font-size: 17px; line-height: 1.6; }
.panel--dunkel .panel__body p, .panel--dunkel .panel__body li { color: var(--inv-muted); }
.panel .box, .panel .product-box, .panel .grade-chip { background: var(--surface); color: var(--fg); }

.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; }
.is-style-outline > .wp-block-button__link { background: transparent; border-color: var(--line); color: var(--fg) !important; }
.panel--dunkel .is-style-outline > .wp-block-button__link { border-color: var(--inv-line); color: var(--inv-fg) !important; }
.panel--orange .wp-block-button__link { background: var(--accent-fg); border-color: var(--accent-fg); color: #fff !important; }

.prose hr, .wp-block-separator { border: 0; height: 1px; background: var(--line); margin-block: 48px; }
.wp-block-separator.is-style-dots { background: none; height: auto; text-align: center; color: var(--muted); }
.wp-block-separator.is-style-dots::before { content: "· · ·"; font-size: 24px; letter-spacing: .4em; }

.image-boxes .card h3 { font-size: 20px; }
.prose a.card:not(.btn):not(.link-arrow) { color: inherit; text-decoration: none; }
.prose .image-boxes { max-width: none; }
.prose .wp-block-image img { border-radius: var(--r-m); }
.prose .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-m); }
.prose .newsletter { padding: 32px; }

.sidebar-widget { padding: 24px; }
.sidebar-widget .panel__body p, .sidebar-widget .panel__body li { font-size: 15px; line-height: 1.55; }
.sidebar-widget .panel__body > h2, .sidebar-widget .panel__body > h3 { font-size: 20px; }
.sidebar-widget .wp-block-button, .sidebar-widget .wp-block-button__link { width: 100%; }
.sidebar-widget .product-box { padding: 0; border: 0; gap: 16px; }
.sidebar-widget .product-box__top, .sidebar-widget .product-box__lists, .sidebar-widget .product-box__specs { grid-template-columns: minmax(0, 1fr); }
.sidebar-mobile { display: none; }
@media (max-width: 1080px) {
	.article-aside .sidebar-widget { display: none; }
	.sidebar-mobile { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: var(--section); }
}

/* ---------- 16 Icon-Liste, kompakte Vergleichstabelle, Tabellen ---------- */
.icon-list__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.icon-list.box { padding: 28px; }
.icon-list--gruen svg { color: var(--good); } .icon-list--rot svg { color: var(--bad); }
.icon-list--orange svg { color: var(--accent-text); } .icon-list--neutral svg { color: var(--muted); }
.panel--orange .icon-list svg, .panel--dunkel .icon-list--neutral svg { color: currentColor; }
.compare-wrap--compact { padding: 8px 8px 16px; border-radius: var(--r-l); }
.compare-wrap--compact .compare { grid-template-columns: 140px repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(140px + var(--cols) * 150px); }
.compare-wrap--compact .compare__cell { padding: 14px; font-size: 15px; }
.compare-wrap--compact .compare__name { font-size: 17px; }
.compare-wrap--compact .compare__grade { font-size: 22px; }
.compare-wrap--compact .compare__cell--head { padding-top: 16px; padding-bottom: 16px; gap: 10px; }
.prose .compare-wrap { max-width: none; }
.compare-more { margin-top: 8px !important; }
.prose .wp-block-table table { min-width: 480px; }
.prose .wp-block-table thead { border-bottom: 1px solid var(--line); }
.prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--surface-2); }
.prose .wp-block-table figcaption { text-align: left; }

/* ---------- 17 Beitrags-Teaser (länglich: Bild links, Text rechts) ---------- */
.teasers { display: flex; flex-direction: column; gap: 14px; }
.teasers__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prose a.teaser-row:not(.btn):not(.link-arrow) { color: inherit; text-decoration: none; }
.teaser-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; padding: 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s; }
.teaser-row:hover { opacity: 1; border-color: var(--accent); }
.teaser-row .media { aspect-ratio: 16 / 10; border-radius: 14px; }
.teaser-row__body { display: flex; flex-direction: column; gap: 8px; padding-right: 12px; min-width: 0; }
.teaser-row__title { font-family: var(--font-display); font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.teaser-row__text { font-size: 15px !important; line-height: 1.5 !important; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 !important; }
.panel .teaser-row { background: var(--surface); color: var(--fg); }
@media (max-width: 600px) {
	.teaser-row { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 10px; align-items: start; }
	.teaser-row .media { aspect-ratio: 1; }
	.teaser-row__title { font-size: 17px; }
	.teaser-row__text { display: none; }
}

/* ---------- 18. Redaktion: Rollen, Sterne, Autorenprofil ---------- */
.byline__name a, .author-box__name a { color: inherit; text-decoration: none; }
.byline__name a:hover, .author-box__name a:hover { color: var(--accent); }
.byline__roles { margin-top: 2px; }
.byline__roles a, .head-facts a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.author-box__job { margin: -2px 0 8px; }

.stars { display: inline-block; width: 5em; height: 1em; font-size: 18px; line-height: 1; position: relative; }
.stars::before, .stars::after { content: "★★★★★"; position: absolute; inset: 0; letter-spacing: 0; white-space: nowrap; overflow: hidden; font-family: Arial, sans-serif; }
.stars::before { color: color-mix(in srgb, currentColor 25%, transparent); }
.stars::after { color: var(--accent); width: calc(var(--stars, 0) / 5 * 100%); }
.rating { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; white-space: nowrap; }
.rating .stars { font-size: 14px; }
.rating__value { font-weight: 600; }
.rating--lg { margin-top: 10px; }
.rating--lg .stars { font-size: 24px; }
.compare__grade + .rating { display: flex; margin-top: 4px; }
.grades__total-value { display: inline-flex; align-items: center; gap: 12px; }

.profile { display: grid; grid-template-columns: 160px 1fr; gap: 40px; align-items: start; margin-top: 24px; }
.profile__image img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
.profile__job { font-family: var(--font-mono); font-size: 14px; color: var(--muted); margin-top: 8px; }
.profile__bio { margin-top: 20px; font-size: 18px; line-height: 1.6; max-width: 62ch; }
.profile__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.profile__facts ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.profile__facts--list ul { display: block; }
.profile__facts--list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.profile__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (max-width: 720px) {
	.profile { grid-template-columns: 1fr; gap: 20px; }
	.profile__image img { width: 96px; height: 96px; }
}

/* ---------- Sparrechner ---------- */
.rechner {
	--sr-ein: #1D4ED8; --sr-zins: #FF6A3D; --sr-real: #1F7A45;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
	padding: clamp(20px, 3vw, 32px); margin: 32px 0; display: grid; gap: 24px;
}
:root[data-theme="dark"] .rechner { --sr-ein: #4285F4; --sr-zins: #E2673A; --sr-real: #1EA160; }
.rechner__head h3 { margin: 6px 0 0; font-size: clamp(20px, 2.4vw, 26px); }
.rechner__inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.rechner__field { display: grid; gap: 6px; }
.rechner__label { font-size: 14px; color: var(--muted); }
.rechner__control { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); }
.rechner__control:focus-within { border-color: var(--accent); }
.rechner__control input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font-family: var(--font-mono); font-size: 16px; }
.rechner__control input:focus { outline: none; }
.rechner__unit { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

.rechner__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.rechner__stat { border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; display: grid; gap: 4px; border-left-width: 4px; }
.rechner__stat[data-serie="eingezahlt"] { border-left-color: var(--sr-ein); }
.rechner__stat[data-serie="nominal"] { border-left-color: var(--sr-zins); }
.rechner__stat[data-serie="real"] { border-left-color: var(--sr-real); }
.rechner__stat-label { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.rechner__stat strong { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.1; }
.rechner__stat--real { background: var(--surface-2); }

.rechner__figure { margin: 0; display: grid; gap: 12px; }
.rechner__chart { position: relative; }
.rechner__chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.sr-grid { stroke: var(--line); stroke-width: 1; }
.sr-fill--zinsen { fill: var(--sr-zins); fill-opacity: .9; }
.sr-fill--ein { fill: var(--sr-ein); fill-opacity: .9; }
.sr-edge { fill: none; stroke: var(--surface); stroke-width: 2; }
.sr-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.sr-line--nom { stroke: var(--sr-zins); }
.sr-line--real { stroke: var(--sr-real); stroke-dasharray: 6 4; }
.sr-cross { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 3 3; }

.rechner__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.rechner__key { display: inline-flex; align-items: center; gap: 8px; }
.rechner__key i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.rechner__key[data-serie="eingezahlt"] i { background: var(--sr-ein); }
.rechner__key[data-serie="nominal"] i { background: var(--sr-zins); }
.rechner__key[data-serie="real"] i { background: none; height: 0; border-top: 2px dashed var(--sr-real); border-radius: 0; }

.rechner__tip { position: absolute; top: 8px; pointer-events: none; background: var(--inv-bg); color: var(--inv-fg); border-radius: var(--r-s); padding: 10px 12px; font-size: 13px; display: grid; gap: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.rechner__tip[hidden] { display: none; }
.rechner__tip strong { font-size: 13px; }
.rechner__tip span { font-family: var(--font-mono); font-size: 12px; color: var(--inv-muted); }

@media (max-width: 640px) {
	.rechner__inputs { grid-template-columns: repeat(2, 1fr); }
	.rechner__results { grid-template-columns: 1fr; }
}
.sr-axis { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.sr-axis--end { fill: var(--fg); font-weight: 600; }

/* Taschengeld: Tabelle statt Grafik – ein Diagramm hätte hier nichts zu zeigen. */
.rechner__tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.rechner__tabelle th, .rechner__tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rechner__tabelle th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.rechner__tabelle td:last-child, .rechner__tabelle th:last-child { text-align: right; }
.rechner__tabelle tr[data-aktiv="1"] { background: var(--surface-2); }
.rechner__tabelle tr[data-aktiv="1"] td { font-weight: 600; }
.rechner__hinweis { margin: 0; padding: 12px 14px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: var(--r-s); font-size: 15px; }

/* Baseline-Vergleich: drei Szenarien gegen die Einzahlungen. */
.rechner { --rechner-basis: var(--muted); }
.rechner__stat[data-serie="basis"] { border-left-color: var(--rechner-basis); }
.rechner__stat[data-serie="s1"] { border-left-color: var(--sr-ein); }
.rechner__stat[data-serie="s2"] { border-left-color: var(--sr-real); }
.rechner__stat[data-serie="s3"] { border-left-color: var(--sr-zins); }
.rechner__key[data-serie="basis"] i { background: none; height: 0; border-top: 2px dashed var(--rechner-basis); border-radius: 0; }
.rechner__key[data-serie="s1"] i { background: var(--sr-ein); }
.rechner__key[data-serie="s2"] i { background: var(--sr-real); }
.rechner__key[data-serie="s3"] i { background: var(--sr-zins); }
.sr-line--basis { stroke: var(--rechner-basis); stroke-dasharray: 5 4; }
.sr-line--s1 { stroke: var(--sr-ein); }
.sr-line--s2 { stroke: var(--sr-real); }
.sr-line--s3 { stroke: var(--sr-zins); }
.rechner__inputs--breit { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
/* Ein einzelnes Eingabefeld soll nicht über die ganze Zeile laufen. */
.rechner__inputs:has(> .rechner__field:only-child) { grid-template-columns: minmax(150px, 240px); }

/* Finanz-Fahrplan: Checkliste mit echten Fristen. */
.fahrplan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: fahrplan; }
.fahrplan__punkt { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-m); padding: 14px 16px; display: grid; gap: 6px; }
.fahrplan__punkt[data-status="ueberfaellig"] { border-left-color: var(--bad); }
.fahrplan__punkt[data-status="bald"] { border-left-color: var(--accent); }
.fahrplan__punkt[data-status="offen"] { border-left-color: var(--sr-ein); }
.fahrplan__punkt[data-status="ohne"] { border-left-color: var(--line); }
.fahrplan__punkt[data-erledigt="1"] { opacity: .55; }
.fahrplan__punkt[data-erledigt="1"] .fahrplan__titel { text-decoration: line-through; }
.fahrplan__check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.fahrplan__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fahrplan__box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--line); border-radius: 7px; background: var(--bg); position: relative; }
.fahrplan__check input:checked + .fahrplan__box { background: var(--accent); border-color: var(--accent); }
.fahrplan__check input:checked + .fahrplan__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--accent-fg, #16181D); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fahrplan__check input:focus-visible + .fahrplan__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.fahrplan__titel { font-weight: 600; font-size: 17px; }
.fahrplan__text { margin: 0 0 0 32px; color: var(--muted); font-size: 15px; }
.fahrplan__frist { margin-left: 32px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.fahrplan__punkt[data-status="ueberfaellig"] .fahrplan__frist { color: var(--bad); font-weight: 600; }
.fahrplan__punkt[data-status="bald"] .fahrplan__frist { color: var(--accent-text); font-weight: 600; }

/* ---------- Vergleich: Rechner und Filter ---------- */
/* .compare__cell setzt display:flex – ohne diese Regel bliebe [hidden] wirkungslos. */
.compare__cell[hidden] { display: none; }

.ctools { display: grid; gap: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); }
.ctools[hidden] { display: none; }
.ctools__row { display: grid; gap: 10px; }
.ctools__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ctools__label strong { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--fg); margin-left: 6px; }
.ctools__slider { display: grid; gap: 8px; max-width: 460px; }
.ctools__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.ctools__hint { margin: 0; font-size: 14px; color: var(--muted); max-width: 62ch; }
.ctools__count { margin: 0; font-size: 14px; color: var(--accent-text); min-height: 1.4em; }

.ctools input[type="range"] { width: 100%; accent-color: var(--accent); height: 24px; }
.ctools input[type="range"]:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: var(--r-pill); }

.ctools__row--filter { grid-template-columns: 1fr; }
.ctools__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ctools .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: 14px; cursor: pointer; }
.ctools .chip:hover { border-color: var(--fg); }
.ctools .chip:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ctools .chip:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.ctools .chip input { accent-color: var(--accent); margin: 0; }

.compare__cell--calc { background: var(--surface-2); }
.compare__cell--calc.is-first { background: var(--surface-2); }
.calc-cost { display: grid; gap: 2px; line-height: 1.3; }
.calc-cost strong { font-size: 18px; }
.calc-cost__free { color: var(--good); }
.calc-cost__sub { font-size: 13px; color: var(--muted); }
.calc-cost.is-teuer strong { color: var(--bad); }

@media (max-width: 640px) {
	.ctools { padding: 18px 16px; border-radius: var(--r-m); }
	.ctools__slider { max-width: none; }
}