/* Lesbarkeit25: bestehende Gestaltung, lokal bereitgestellte Schriften. */
:root {
  --text-body: 1.0625rem;
  --text-reading: 1rem;
  --text-small: .875rem;
  --target: 2.75rem;
  --header-offset: 10rem;
}
html { scroll-padding-top: var(--header-offset); }
body { font-size: var(--text-body); line-height: 1.65; font-optical-sizing: auto; }
h1, h2 { letter-spacing: -.025em; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.75rem, 5.1vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.875rem); }
h3 { font-size: 1.4375rem; letter-spacing: -.015em; }
p, li { overflow-wrap: anywhere; }
.notice { font-size: var(--text-small); line-height: 1.5; letter-spacing: .025em; }
.header-inner { position: relative; flex-wrap: wrap; gap: .75rem 1.5rem; padding-block: .5rem; }
.wordmark { font-size: 1.5rem; letter-spacing: -.04em; }
.nav { flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--text-reading); min-width: 0; }
.nav a, .nav .nav-cta, .menu-button {
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  overflow-wrap: anywhere;
}
/* Die mobile Schaltfläche bleibt außerhalb des mobilen Breakpoints verborgen. */
.menu-button { display: none; font-size: var(--text-reading); }
.eyebrow { font-size: var(--text-small); letter-spacing: .08em; line-height: 1.5; }
.hero-intro { font-size: 1.125rem; line-height: 1.65; max-width: 45ch; }
.hero-sub, .visual-caption { font-size: var(--text-small); line-height: 1.5; }
.visual-caption { letter-spacing: .06em; }
.button { font-size: var(--text-reading); line-height: 1.5; min-height: 3.25rem; }
.hero-motion { font-size: var(--text-small); line-height: 1.5; min-height: var(--target); }
.intro-strip strong { font-size: var(--text-reading); line-height: 1.5; }
.intro-strip p { font-size: var(--text-small); line-height: 1.6; }
.intro-strip .number { font-size: 1.75rem; }
.section-heading p, .product-body > p, .criteria p, .affiliate-box p,
.faq-list details p, .guide-entry p, .team-grid p,
.legal p, .legal li, .legal address {
  font-size: var(--text-reading);
  line-height: 1.7;
}
.section-heading p { max-width: 38ch; }
.product-meta, .product-index { font-size: var(--text-small); line-height: 1.5; letter-spacing: .04em; }
.product-index { right: 1.375rem; }
.product-facts { font-size: var(--text-reading); }
.product-facts li { flex-wrap: wrap; gap: .25rem 1rem; }
.product-body h3 { font-size: 1.5625rem; line-height: 1.35; }
.text-link, .source-link, .product-guide-link, .guide-label a, .legal .back {
  font-size: var(--text-reading);
  line-height: 1.6;
  min-height: var(--target);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.source-link, .product-guide-link, .legal .back { display: inline-flex; align-items: center; }
.product-note, .guide-note, .footer-copy, .footer-bottom {
  font-size: var(--text-small);
  line-height: 1.7;
}
.product-note, .guide-note { max-width: 75ch; }
.selection-intro > p, .faq-intro p { max-width: 42ch; }
.criteria .step, .guide-label { font-size: var(--text-small); line-height: 1.6; }
.criteria h3 { font-size: 1.25rem; line-height: 1.4; }
.guide-entry { scroll-margin-top: 1rem; }
.guide-entry h3 { font-size: 1.6875rem; line-height: 1.35; }
.guide-entry p { max-width: 65ch; }
.guide-label { min-width: 0; }
.guide-label a { letter-spacing: 0; }
.affiliate-box h3 { font-size: 1.8125rem; letter-spacing: -.015em; }
.faq-list summary { font-size: var(--text-reading); line-height: 1.6; min-height: var(--target); }
.faq-list details p { max-width: 65ch; }
.footer-links { font-size: var(--text-reading); gap: .5rem 1.5rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--target); }
.footer-bottom { flex-wrap: wrap; }
.legal h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
.legal h2 { font-size: 1.4375rem; }
.legal p, .legal li { max-width: 70ch; }
/* Bestehende Farbpaarungen bleiben erhalten; Fokus auf beiden Hintergründen. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.affiliate-box a:focus-visible { outline-color: var(--paper); }
.nav a:active, .text-link:active, .source-link:active,
.product-guide-link:active, .footer-links a:active { text-decoration-thickness: 3px; text-decoration-line: underline; }
.button:active { background: #143c2c; }
.menu-button:active, .hero-motion:active, summary:active { background: var(--soft); }
@media (max-width: 1000px) {
  .hero-intro { font-size: var(--text-reading); }
}
@media (max-width: 700px) {
  .wordmark { font-size: 1.375rem; }
  .menu-button { display: inline-flex; }
  .nav { top: 100%; gap: 0; flex-wrap: nowrap; }
  .nav a, .nav .nav-cta { padding-block: .75rem; }
  .hero h1 { font-size: clamp(2.125rem, 8.8vw, 3rem); }
  .hero-intro { font-size: var(--text-reading); }
  .intro-strip { grid-template-columns: 1fr; gap: 1rem; }
  .intro-strip > div { display: flex; align-items: start; gap: 1rem; }
  .intro-strip .number { font-size: 1.5rem; margin: .2rem 0 0; min-width: 1.75rem; }
  .guide-label { flex-wrap: wrap; }
  .guide-entry h3 { font-size: 1.5rem; }
  .affiliate-box h3 { font-size: 1.6875rem; }
  .selection-intro > p, .faq-intro p { max-width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .hero--naturstein .visual-caption { background: var(--paper); }
}
@media (prefers-contrast: more) {
  :root { --muted: #193d33; --line: #4f6258; }
  .site-header, .hero--naturstein .visual-caption { background: var(--paper); }
  .hero--naturstein .hero-scrim { background: var(--paper); }
  .hero h1 span { color: var(--ink); }
  .affiliate-box p, .affiliate-box .text-link { color: #fff; }
  .product-facts li, .faq-list details { border-color: var(--muted); }
  .nav a, .text-link { text-decoration-line: underline; }
}
@media (forced-colors: active) {
  .hero-scene, .hero-scrim { display: none; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: Highlight; }
  .affiliate-box a:focus-visible { outline-color: Highlight; }
  .button, .menu-button, .hero-motion { border: 1px solid ButtonText; }
}
/* Ohne JS kann die offene Navigation groß werden: Inhalt bleibt erreichbar. */
html:not(.js) .site-header { position: static; }
html:not(.js) { scroll-padding-top: 1rem; }

/* Logo27: freigegebene PNG unverändert, intrinsisches Seitenverhältnis reserviert. */
.wordmark--image {
  background: var(--paper);
  border-radius: .25rem;
  width: 12.5rem;
  max-width: 100%;
  min-width: 0;
  min-height: var(--target);
  gap: 0;
}
.wordmark--image img { width: 100%; height: auto; }
.wordmark--image .wordmark-text { display: none; }
@media (max-width: 700px) {
  .wordmark--image { width: 10.5rem; }
  .menu-button { flex-shrink: 0; }
}
@media (forced-colors: active) {
  .wordmark--image img { display: none; }
  .wordmark--image .wordmark-text { display: inline; color: LinkText; }
}

/* Strecke34: Silbentrennung (lang="de") nur für lange Wörter, vor dem Notumbruch aus Befund32. */
h1, h2, h3, h4, p, li, summary, dd, td, th, figcaption, address {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
/* Strecke34: Marke nie trennen; weiche Trennstriche (­) im HTML sind die feste Trennbasis. */
.marke { white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }

/* Strecke35c: Kontaktformular im Impressum. */
.kontakt { max-width: 36rem; margin-top: 1rem; }
.kontakt-feld label { display: block; font-weight: 700; margin-bottom: .35rem; }
.kontakt-feld input, .kontakt-feld textarea {
  width: 100%; min-height: var(--target, 2.75rem); padding: .6rem .75rem;
  font: inherit; color: inherit; background: #fff; border: 1px solid #8c9a86; border-radius: .5rem;
}
.kontakt-feld textarea { resize: vertical; }
.kontakt-feld input:focus-visible, .kontakt-feld textarea:focus-visible { outline: 3px solid #71451e; outline-offset: 2px; }
/* Honeypot: wie .sr-only weggeclippt statt nach links verschoben (kein Inhalt außerhalb des Viewports). */
.kontakt-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kontakt-hinweis { font-size: .9375rem; }
.kontakt-status:empty { display: none; }
.kontakt-status.is-fehler, .kontakt-meldung.is-fehler { color: #8a2c14; }
/* Meldungen für den Fallback ohne JavaScript: Dienst leitet auf #kontakt-… um. */
.kontakt-meldung { display: none; font-weight: 700; }
.kontakt-meldung:target { display: block; }
.kontakt button[disabled] { opacity: .6; cursor: not-allowed; }

/* Strecke36: Ratgeberartikel (Vorlage). Tabelle ohne horizontales Scrollen, auch bei 320 px/200 %. */
.artikel-label { font-size: var(--text-small, .875rem); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 1.5rem; }
.artikel-intro { font-size: 1.125rem; }
.artikel-beispiel, .artikel-werbung { padding: 1rem 1.25rem; border-left: 3px solid #a5b591; background: #f4f6ef; }
.artikel-tabelle { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1rem 0; }
.artikel-tabelle caption { text-align: left; font-weight: 700; margin-bottom: .5rem; }
.artikel-tabelle th, .artikel-tabelle td { text-align: left; vertical-align: top; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.artikel-tabelle th:nth-child(1) { width: 48%; }
.artikel-tabelle th:nth-child(2) { width: 30%; }
.artikel-tabelle th:nth-child(3) { width: 22%; }
.artikel-schritte { padding-left: 1.25rem; }
.artikel-schritte li + li { margin-top: .75rem; }
.artikel-quellen a { overflow-wrap: anywhere; }
.artikel-stand { font-size: var(--text-small, .875rem); color: var(--muted); }
.topic-artikel { margin-top: 1rem; }
.artikel-faq h3 { font-size: 1.125rem; margin-top: 1.25rem; }
.artikel-tabelle--vergleich th:nth-child(1) { width: 26%; }
.artikel-tabelle--vergleich th:nth-child(2), .artikel-tabelle--vergleich th:nth-child(3) { width: 37%; }
.artikel-tabelle--zwei th { width: 50%; }
.umrechner { display: grid; gap: .25rem; max-width: 24rem; margin: 1rem 0; }