/* =========================================================================
   senioren-notruf.info – Design-System (handgeschrieben, kein Framework)
   Vertrauenswürdig, seniorengerecht: große, kontraststarke Typografie,
   viel Weißraum, klare Karten. Light & Dark Mode über Tokens. WCAG 2.2 AA+.
   ========================================================================= */

/* --------------------------------------------------- 0. Fonts (self-hosted, DSGVO-konform) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --------------------------------------------------- 1. Tokens (Light)
   „Warmes Papier": blendarme, getönte Neutrale statt Klinik-Weiß –
   angenehmer für ältere Augen, redaktioneller Charakter. */
:root {
  --canvas: #faf8f4;
  --surface: #fffefb;
  --surface-muted: #f3efe7;

  --ink: #1a2b28;
  --muted: #42564f;
  --subtle: #5a6b64;

  --line: #e6e1d5;
  --line-strong: #cfc8b6;

  --brand: #0f766e;
  --brand-strong: #115e59;
  --brand-ink: #ffffff;
  --brand-soft: #e9f4ef;

  --accent: #c2410c;
  --accent-strong: #9a3412;
  --accent-ink: #ffffff;
  --accent-soft: #faeee3;

  --ring: #0d9488;

  --success: #15803d; --success-soft: #ecfdf3;
  --warning: #b45309; --warning-soft: #fff7ed;
  --danger: #b91c1c;  --danger-soft: #fef2f2;
  --info: #1d4ed8;    --info-soft: #eff4ff;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --radius: 1rem;
  --radius-sm: 0.6rem;
  --shadow-soft: 0 1px 2px rgb(8 20 33 / .04), 0 4px 14px rgb(8 20 33 / .05);
  --shadow-card: 0 1px 3px rgb(8 20 33 / .06), 0 14px 34px -16px rgb(8 20 33 / .16);
  --shadow-lift: 0 2px 6px rgb(8 20 33 / .08), 0 24px 48px -20px rgb(8 20 33 / .22);

  --wrap: 75rem;
  color-scheme: light;
}

/* --------------------------------------------------- Tokens (Dark) */
html.dark {
  --canvas: #0a1018;
  --surface: #121b27;
  --surface-muted: #0e1620;

  --ink: #e9eff6;
  --muted: #a8b7c7;
  --subtle: #8597a8;

  --line: #20303f;
  --line-strong: #2c3e50;

  --brand: #2dd4bf;
  --brand-strong: #5eead4;
  --brand-ink: #04231f;
  --brand-soft: #0d2926;

  --accent: #fb923c;
  --accent-strong: #fdba74;
  --accent-ink: #1f1304;
  --accent-soft: #2a1a0c;

  --ring: #2dd4bf;

  --success: #4ade80; --success-soft: #0f2a1b;
  --warning: #fbbf24; --warning-soft: #2a2009;
  --danger: #f87171;  --danger-soft: #2a1414;
  --info: #60a5fa;    --info-soft: #0f1d33;

  color-scheme: dark;
}

/* --------------------------------------------------- 2. Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-tap-highlight-color: transparent;
}

/* Drei Schriftstufen (Umschalter im Header, localStorage 'snr-fontsize').
   Skaliert die rem-Basis, das responsive Layout fängt den Zuwachs auf. */
html.font-plus { font-size: 112.5%; }
html.font-max { font-size: 125%; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
h5, h6 { font-weight: 600; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; }
strong, b { font-weight: 650; }
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand); color: var(--brand-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* --------------------------------------------------- 3. Layout helpers */
.site-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .site-wrap { padding-inline: 2rem; } }
.site-wrap--narrow { max-width: 52rem; }

.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section--muted { background: var(--surface-muted); border-block: 1px solid var(--line); }

.stack > * + * { margin-top: 1.25rem; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); }

/* responsive Karten-Raster */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid--2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.card-grid--4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split-2 { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .split-2 { grid-template-columns: 1fr 1fr; } }

.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }

/* --------------------------------------------------- 4. Kicker / Skip */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--brand); color: var(--brand-ink);
  padding: .75rem 1.25rem; border-radius: .5rem; font-weight: 600; transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------- 5. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; border-radius: 999px; border: 2px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s; text-align: center;
  text-decoration: none;
}
.btn--sm { font-size: .9rem; padding: .4rem 1rem; min-height: 40px; }
.btn--md { font-size: 1rem; padding: .55rem 1.35rem; min-height: 48px; }
.btn--lg { font-size: 1.1rem; padding: .7rem 1.75rem; min-height: 56px; }
.btn--primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--brand-strong); }
.btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-soft); }
.btn--accent:hover { background: var(--accent-strong); }
.btn--outline { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--brand); background: var(--surface-muted); }
.btn--ghost { color: var(--brand); background: transparent; }
.btn--ghost:hover { background: var(--brand-soft); }

/* --------------------------------------------------- 6. Badges */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: .25rem .75rem; font-size: .875rem; font-weight: 600;
  text-decoration: none;
}
.badge--brand { background: var(--brand-soft); color: var(--brand); }
.badge--neutral { background: var(--surface-muted); color: var(--muted); }
.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--info { background: var(--info-soft); color: var(--info); }

/* --------------------------------------------------- 7. Section heading */
.section-heading { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.section-heading--center { align-items: center; text-align: center; margin-inline: auto; max-width: 42rem; }
.section-heading__title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem); }
.section-heading__intro { font-size: 1.15rem; color: var(--muted); max-width: 42rem; }

/* --------------------------------------------------- 8. Cards */
.topic-card, .tool-card {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-soft); text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.topic-card:hover, .tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.topic-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: .8rem; background: var(--brand-soft); color: var(--brand);
  transition: background-color .2s, color .2s;
}
.topic-card:hover .topic-card__icon { background: var(--brand); color: var(--brand-ink); }
.topic-card__title, .tool-card__title { font-size: 1.25rem; font-weight: 600; }
.topic-card__desc, .tool-card__desc { color: var(--muted); }
.topic-card__more, .tool-card__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--brand);
}
.topic-card:hover .topic-card__more .icon, .tool-card:hover .tool-card__more .icon { transform: translateX(4px); }
.topic-card__more .icon, .tool-card__more .icon { transition: transform .2s; }

.tool-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.tool-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: .75rem; background: var(--brand-soft); color: var(--brand);
}
.tool-card__dur { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface-muted); color: var(--subtle); border-radius: 999px; padding: .25rem .65rem; font-size: .875rem; font-weight: 600; }

.article-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.article-card__media { display: block; }
.article-card__thumb {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10;
  background: var(--brand-soft); color: color-mix(in srgb, var(--brand) 40%, transparent);
}
.article-card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.35rem; flex: 1; }
.article-card__badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.article-card__title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.article-card__title a { text-decoration: none; }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card__title a:hover { color: var(--brand); }
.article-card__desc {
  color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card__meta { margin-top: auto; padding-top: .25rem; color: var(--subtle); font-size: .9rem; }
.article-card__meta time { display: inline-flex; align-items: center; gap: .4rem; }
/* Badge-Links über der Karten-Fläche klickbar halten */
.article-card__badges a { position: relative; z-index: 1; }

/* --------------------------------------------------- 9. Infobox */
.infobox { display: flex; gap: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.infobox__icon { flex-shrink: 0; margin-top: .1rem; }
.infobox__title { font-weight: 600; margin-bottom: .3rem; }
.infobox__content > * + * { margin-top: .5rem; }
.infobox__content a { color: var(--brand); text-decoration: underline; }
.infobox--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.infobox--info .infobox__icon, .infobox--info .infobox__title { color: var(--info); }
.infobox--tip { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.infobox--tip .infobox__icon, .infobox--tip .infobox__title { color: var(--brand); }
.infobox--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.infobox--warning .infobox__icon, .infobox--warning .infobox__title { color: var(--warning); }
.infobox--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.infobox--success .infobox__icon, .infobox--success .infobox__title { color: var(--success); }
.infobox--note { background: var(--surface-muted); border-color: var(--line-strong); }
.infobox--note .infobox__icon, .infobox--note .infobox__title { color: var(--muted); }

/* --------------------------------------------------- 10. Breadcrumbs */
.breadcrumbs { font-size: .9rem; margin-bottom: 1.5rem; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--subtle); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
.breadcrumbs .icon { color: var(--line-strong); }

/* --------------------------------------------------- 11. Header */
/* Solide Fläche statt Blur: ruhiger, besser lesbar beim Scrollen. */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--canvas); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.5rem; }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; color: inherit; }
/* Bild-Logo (feste Höhe, kein Umbruch → Header bleibt ruhig, nichts „verzogen"). */
.brand__logo { display: block; width: auto; height: 2.6rem; }
/* Dark Mode: das Logo trägt eine dunkle Wortmarke. Auf hellem „Chip" bleibt sie
   auch auf dunklem Untergrund (Header & Footer) gut lesbar. */
html.dark .brand__logo { background: #fbfbf7; border-radius: .55rem; padding: .3rem .6rem; box-sizing: content-box; }
/* Kompaktere Screens: Logo etwas kleiner, damit es neben den Aktionsbuttons
   nie mit ihnen kollidiert (kein horizontales Scrollen). */
@media (max-width: 560px) { .brand__logo { height: 2.3rem; } }
/* Sehr schmale Screens: Header kompakt halten. Suche & Dark-Mode wandern ins
   Mobilmenü, der Schriftgrößen-Umschalter bleibt (Kernfunktion der Zielgruppe). */
@media (max-width: 430px) {
  .site-header__inner { gap: .5rem; }
  .site-header .site-header__actions { gap: .25rem; }
  /* Touch-Ziele bewusst bei 44px (2.75rem) belassen – zwei Buttons passen. */
  .site-header__actions .header-search,
  .site-header__actions #theme-toggle { display: none; }
}
.mobile-menu__link--search { display: flex; align-items: center; gap: .5rem; }
.mobile-menu__theme { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: transparent; text-align: left; border-bottom: 1px solid var(--line); border-radius: .7rem .7rem 0 0; margin-bottom: .35rem; padding-bottom: .85rem; }
.mobile-menu__theme .theme-icon { display: none; }
html:not(.dark) .mobile-menu__theme .theme-icon--moon { display: inline-flex; }
html.dark .mobile-menu__theme .theme-icon--sun { display: inline-flex; }

/* Volle Navigation erst ab 1200px: sieben teils lange deutsche Labels passen
   erst dann sicher ohne Umbruch in die (auf 75rem begrenzte) Kopfzeile. Darunter
   übernimmt das Hamburger-Menü (Breakpoint von .menu-toggle bewusst identisch!). */
.main-nav { display: none; }
@media (min-width: 1200px) { .main-nav { display: block; } }
.main-nav__list { list-style: none; padding: 0; display: flex; align-items: center; gap: .1rem; }
/* Item als zentrierte Flex-Zeile: Label + Chevron bleiben nebeneinander und
   mittig – nie gestapelt oder umgebrochen. */
.main-nav__item { position: relative; display: flex; align-items: center; }
.main-nav__link { position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: .45rem .62rem; border-radius: 999px; font-weight: 600; font-size: .92rem; white-space: nowrap; text-decoration: none; color: var(--ink); transition: background-color .2s, color .2s; }
.main-nav__link:hover { color: var(--brand); background: var(--brand-soft); }
.main-nav__link.is-active { color: var(--brand); }
.main-nav__link.is-active::after { content: ""; position: absolute; left: .62rem; right: .62rem; bottom: 0; height: 3px; border-radius: 2px; background: var(--brand); }
/* Untermenü-Toggle: eigener Button (Klick statt Hover-only – Touch & Motorik) */
.main-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 2rem; margin-left: -.28rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); transition: background-color .2s, color .2s; }
.main-nav__toggle:hover { background: var(--brand-soft); color: var(--brand); }
.main-nav__toggle .icon { transition: transform .2s; }
.main-nav__item.is-open .main-nav__toggle { background: var(--brand-soft); color: var(--brand); }
.main-nav__item.is-open .main-nav__toggle .icon { transform: rotate(180deg); }
.main-nav__panel { position: absolute; left: 0; top: 100%; padding-top: .5rem; visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
/* Bewusst drei getrennte Regeln: verwirft ein älterer Browser einen
   Selektor (z. B. :focus-within), bleiben die anderen wirksam. */
.main-nav__item.is-open .main-nav__panel { visibility: visible; opacity: 1; }
.main-nav__item.has-children:hover .main-nav__panel { visibility: visible; opacity: 1; }
.main-nav__item.has-children:focus-within .main-nav__panel { visibility: visible; opacity: 1; }
.main-nav__panel ul { list-style: none; margin: 0; padding: .5rem; width: 18rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.main-nav__panel a { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .85rem; border-radius: .6rem; text-decoration: none; transition: background-color .2s; }
.main-nav__panel a:hover { background: var(--brand-soft); }
.main-nav__child-label { font-weight: 600; }
.main-nav__child-desc { font-size: .85rem; color: var(--subtle); }

.site-header__actions { display: flex; align-items: center; gap: .4rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background-color .2s; text-decoration: none; }
.icon-btn:hover { background: var(--surface-muted); }
/* Variante mit sichtbarem Textlabel (z. B. Schriftgrößen-Umschalter am Desktop) */
.icon-btn--labeled { width: auto; gap: .45rem; padding-inline: .8rem; }
.icon-btn__label { display: none; font-size: .85rem; font-weight: 600; }
@media (min-width: 1024px) { .icon-btn__label { display: inline; } }
.menu-toggle { display: inline-flex; }
@media (min-width: 1200px) { .menu-toggle { display: none; } }
.theme-icon--sun { display: none; }
html.dark .theme-icon--sun { display: inline-flex; }
html.dark .theme-icon--moon { display: none; }

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 50; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__overlay { position: absolute; inset: 0; background: rgb(0 0 0 / .5); }
.mobile-menu__panel { position: absolute; right: 0; top: 0; height: 100%; width: 100%; max-width: 22rem; background: var(--canvas); box-shadow: var(--shadow-lift); overflow-y: auto; display: flex; flex-direction: column; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.mobile-menu__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; }
.mobile-menu__nav { padding: 1rem; }
.mobile-menu__nav > ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu__link { display: block; padding: .75rem 1rem; border-radius: .7rem; font-weight: 600; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
.mobile-menu__link.is-active, .mobile-menu__link:hover { color: var(--brand); background: var(--brand-soft); }
.mobile-menu__sub { list-style: none; margin: .1rem 0 .4rem; padding-left: .85rem; border-left: 2px solid var(--line); display: flex; flex-direction: column; }
.mobile-menu__sub a { display: block; padding: .5rem .75rem; color: var(--muted); text-decoration: none; border-radius: .5rem; }
.mobile-menu__sub a:hover { color: var(--brand); background: var(--surface-muted); }

/* --------------------------------------------------- 12. Footer */
.site-footer { margin-top: 6rem; background: var(--surface-muted); border-top: 1px solid var(--line); padding-block: 3.5rem; }
.site-footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .site-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.site-footer__brand p { max-width: 22rem; margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.site-footer__col h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--subtle); margin-bottom: .8rem; }
.site-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.site-footer__col a { color: var(--muted); text-decoration: none; }
.site-footer__col a:hover { color: var(--brand); }
.site-footer__note { display: flex; gap: .8rem; margin-top: 3rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; color: var(--muted); }
.site-footer__note-icon { color: var(--brand); flex-shrink: 0; }
.site-footer__bottom { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--subtle); }
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.site-footer__bottom ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; }
.site-footer__bottom a { color: inherit; text-decoration: none; }
.site-footer__bottom a:hover { color: var(--brand); }
.site-footer__rss { display: inline-flex; align-items: center; gap: .4rem; }

/* --------------------------------------------------- 13. Hero */
.hero { border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-soft) 60%, transparent), var(--canvas)); overflow: hidden; }
.hero__inner { display: grid; gap: 3rem; align-items: center; padding-block: clamp(3rem, 6vw, 6rem); }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.1fr .9fr; } }
.hero__title { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem); line-height: 1.08; }
.hero__title span { color: var(--brand); }
.hero__lead { font-size: 1.2rem; color: var(--muted); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.hero__trust li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .95rem; color: var(--muted); }
.hero__trust .icon { color: var(--brand); }
.hero__panel { background: var(--surface); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.5rem; box-shadow: var(--shadow-card); }
.hero__panel-title { display: flex; align-items: center; gap: .5rem; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.hero__panel-title .icon { color: var(--brand); }
.hero__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.hero__link { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--canvas); font-weight: 600; text-decoration: none; color: var(--ink); transition: background-color .2s, border-color .2s; }
.hero__link:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-soft); }
.hero__link-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.hero__link .hero__arrow { margin-left: auto; color: var(--subtle); transition: transform .2s, color .2s; }
.hero__link:hover .hero__arrow { transform: translateX(4px); color: var(--brand); }

/* --------------------------------------------------- 14. Page header */
.page-header { border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-soft) 50%, transparent), var(--canvas)); padding-block: clamp(2rem, 4vw, 3rem); }
.page-header__row { display: flex; align-items: flex-start; gap: 1.25rem; }
.page-header__icon { display: none; }
@media (min-width: 640px) { .page-header__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1rem; background: var(--brand); color: var(--brand-ink); flex-shrink: 0; } }
.page-header__text { max-width: 48rem; display: flex; flex-direction: column; gap: .75rem; }
.page-header__title { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); }
.page-header__intro { font-size: 1.2rem; color: var(--muted); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* --------------------------------------------------- 15. FAQ accordion */
.faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.faq__item + .faq__item { border-top: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; font-size: 1.1rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--surface-muted); }
.faq__chevron { color: var(--brand); transition: transform .2s; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a { padding: 0 1.25rem 1.25rem; color: var(--muted); }
.faq__a > * + * { margin-top: .75rem; }
.faq__a a { color: var(--brand); text-decoration: underline; font-weight: 500; }
.faq__more a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.faq__more a:hover { color: var(--brand-strong); }

/* --------------------------------------------------- 16. NOA recommendation */
.noa { border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); border-radius: 1.25rem; padding: 1.5rem 1.75rem; background: linear-gradient(135deg, var(--brand-soft), var(--surface)); }
/* Werbekennzeichnung („Anzeige …“): ruhig, aber deutlich lesbar (WCAG) */
.noa__ad { font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--subtle); margin: 0 0 .6rem; }
.noa-inline__ad { font-weight: 700; }

/* Newsletter-Honeypot: für Menschen (und Screenreader) unsichtbar */
.nl-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Anbieter-Vergleichstabelle (/vergleich/): NOA-Spalte als Anzeige hervorgehoben */
.provider-table__group { font-family: var(--font-serif); font-size: 1.3rem; margin: 1.5rem 0 .75rem; }
.provider-table__ad { display: block; font-size: .72rem; font-weight: 700; color: var(--subtle); letter-spacing: .02em; margin-bottom: .25rem; }
.provider-col--own { background: var(--brand-soft); }
.noa__inner { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 640px) { .noa__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.noa__title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; margin: .4rem 0; }
.noa__desc { color: var(--muted); max-width: 34rem; }
.noa__cta { flex-shrink: 0; }
.noa__disclosure { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--brand) 15%, transparent); font-size: .875rem; color: var(--subtle); }
.noa-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .9rem; color: var(--subtle); }
.noa-inline .icon { color: var(--brand); }
.noa-inline a { color: var(--brand); font-weight: 600; }

/* Featured-Variante: Empfehlung mit USP-Liste */
.noa--featured { display: flex; flex-direction: column; gap: .35rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.noa--featured .noa__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.noa__usps { list-style: none; padding: 0; margin: 1rem 0 .25rem; display: grid; gap: .65rem; }
@media (min-width: 768px) { .noa__usps { grid-template-columns: 1fr 1fr; } }
.noa__usps li { display: flex; align-items: flex-start; gap: .6rem; }
.noa__usps .icon { color: var(--brand); flex-shrink: 0; margin-top: .15rem; }
.noa__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1rem; }
.noa__review-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--brand); font-weight: 600; text-decoration: none; }
.noa__review-link:hover { text-decoration: underline; }

/* --------------------------------------------------- 17. Newsletter */
.newsletter { border-radius: 1.5rem; padding: clamp(1.75rem, 3vw, 2.5rem); }
.newsletter--band { background: var(--brand); color: var(--brand-ink); }
.newsletter--card { background: var(--surface); border: 1px solid var(--line); }
.newsletter__grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) { .newsletter__grid { grid-template-columns: 1fr 1fr; } }
.newsletter--band .kicker { color: color-mix(in srgb, var(--brand-ink) 85%, transparent); }
.newsletter__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); margin: .3rem 0; }
.newsletter--band .newsletter__title { color: var(--brand-ink); }
.newsletter--band .newsletter__intro p { color: color-mix(in srgb, var(--brand-ink) 90%, transparent); }
.newsletter__form { display: flex; flex-direction: column; gap: 1rem; }
.newsletter__form label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .35rem; }
.newsletter--band .newsletter__form > div label { color: var(--brand-ink); }
.newsletter__form input[type="email"] { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: .8rem; padding: .8rem 1rem; }
.newsletter__consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; font-weight: 400 !important; }
.newsletter--band .newsletter__consent { color: color-mix(in srgb, var(--brand-ink) 92%, transparent); }
.newsletter__consent input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--brand); flex-shrink: 0; }
.newsletter__consent a { color: inherit; }
.newsletter__status { font-size: .9rem; min-height: 1.2em; }

/* --------------------------------------------------- 18. Rich text (article) */
.rte { font-size: 1.1875rem; line-height: 1.8; color: var(--ink); }
.rte > * + * { margin-top: 1.25em; }
.rte h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.95rem); margin-top: 2.5em; scroll-margin-top: 6rem; }
.rte h3 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem); margin-top: 1.8em; scroll-margin-top: 6rem; }
.rte h4 { font-size: 1.15rem; margin-top: 1.5em; }
.rte a { color: var(--brand); font-weight: 550; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: .18em; }
.rte a:hover { text-decoration-color: var(--brand); }
.rte ul, .rte ol { padding-left: 1.4em; }
.rte ul { list-style: none; }
.rte ul > li { position: relative; padding-left: .35em; }
.rte ul > li::before { content: ""; position: absolute; left: -.9em; top: .72em; width: .5em; height: .5em; border-radius: 50%; background: var(--brand); }
.rte ol { list-style: decimal; }
.rte ol > li::marker { color: var(--brand); font-weight: 600; }
.rte li + li { margin-top: .5em; }
.rte blockquote { border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); background: var(--brand-soft); padding: 1.15rem 1.4rem; border-radius: var(--radius-sm); font-family: var(--font-serif); font-size: 1.06em; }
.rte blockquote > * + * { margin-top: .5em; }
.rte hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.rte table { width: 100%; border-collapse: collapse; font-size: 1rem; display: block; overflow-x: auto; }
.rte th, .rte td { border: 1px solid var(--line); padding: .7em .9em; text-align: left; vertical-align: top; }
.rte thead th { background: var(--surface-muted); font-weight: 650; }
.rte code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--surface-muted); padding: .15em .4em; border-radius: .35em; border: 1px solid var(--line); }

/* --------------------------------------------------- 19. Article layout */
.article-hero { border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-soft) 40%, transparent), var(--canvas)); padding-block: clamp(2rem, 4vw, 2.5rem); }
.article-hero__title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem); margin: 1rem 0 .75rem; }
.article-hero__desc { font-size: 1.2rem; color: var(--muted); }
.article-hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; font-size: .9rem; color: var(--muted); margin-top: 1.25rem; }
.article-meta__author { display: inline-flex; align-items: center; gap: .6rem; }
.article-meta__avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.article-meta a { color: var(--ink); font-weight: 600; text-decoration: none; }
.article-meta a:hover { color: var(--brand); }
.article-meta span.dot, .article-meta time, .article-meta .article-meta__x { display: inline-flex; align-items: center; gap: .4rem; }

.article-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; max-width: 70rem; margin-inline: auto; }
/* Contentspalte auf ~70 Zeichen begrenzen – Lese-Optimum der Zielgruppe. */
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 46rem) 16rem; justify-content: center; } }
.toc { position: sticky; top: 6rem; }
.toc__title { display: flex; align-items: center; gap: .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--subtle); font-weight: 700; margin-bottom: .75rem; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: .4rem .75rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .9rem; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--brand); border-color: var(--brand); }
.toc a.is-active { color: var(--brand); border-color: var(--brand); font-weight: 600; }
.toc__sub { padding-left: 1.5rem !important; }

.key-takeaways { border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); background: var(--brand-soft); border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.key-takeaways__title { display: flex; align-items: center; gap: .5rem; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.key-takeaways__title .icon { color: var(--brand); }
.key-takeaways ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.key-takeaways li { display: flex; align-items: flex-start; gap: .75rem; }
.key-takeaways li .icon { color: var(--brand); margin-top: .2rem; flex-shrink: 0; }

.author-box { border: 1px solid var(--line); background: var(--surface-muted); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 640px) { .author-box { flex-direction: row; } }
.author-box__avatar { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.author-box__eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--subtle); font-weight: 600; }
.author-box__name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; }
.author-box__role { color: var(--brand); font-weight: 500; font-size: .9rem; }
.author-box__bio { color: var(--muted); margin-top: .5rem; }
.author-box__creds { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.author-box__creds li { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; color: var(--muted); }
.author-box__creds .icon { color: var(--brand); }

/* --------------------------------------------------- 20. Filter bar */
.filter-bar { display: flex; flex-direction: column; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 1024px) { .filter-bar { flex-direction: row; align-items: center; justify-content: space-between; } }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip { border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: .5rem 1rem; font-size: .875rem; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s; }
.filter-chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.filter-chip.is-active { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.filter-sort { display: flex; align-items: center; gap: .6rem; }
.filter-sort label { font-size: .9rem; font-weight: 500; color: var(--muted); }
.filter-sort select { border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: .5rem 1rem; font-weight: 600; font-size: .875rem; }
.filter-count { font-size: .9rem; color: var(--subtle); margin-bottom: 1.5rem; }
.list-empty { display: flex; flex-direction: column; align-items: center; gap: .75rem; border: 1px dashed var(--line-strong); background: var(--surface-muted); border-radius: var(--radius); padding: 3rem; text-align: center; color: var(--muted); }
.list-empty .icon { color: var(--brand); }

/* --------------------------------------------------- 21. Tools (forms) */
.tool { max-width: 52rem; margin-inline: auto; }
.tool-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; background: var(--surface); }
.tool-fieldset legend { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; padding: 0 .35rem; }
.tool-options { display: grid; gap: .6rem; margin-top: 1rem; }
@media (min-width: 560px) { .tool-options--2 { grid-template-columns: 1fr 1fr; } .tool-options--3 { grid-template-columns: repeat(3, 1fr); } }
.tool-option { display: flex; align-items: center; gap: .65rem; border: 1px solid var(--line); border-radius: .7rem; padding: .8rem 1rem; cursor: pointer; min-height: 48px; transition: border-color .2s, background-color .2s; }
.tool-option:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-soft); }
.tool-option input { accent-color: var(--brand); width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.tool-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.tool-select { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: .7rem; padding: .75rem 1rem; margin-top: 1rem; min-height: 48px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.tool-error { color: var(--danger); font-weight: 600; margin-top: 1rem; }
.tool-result { margin-top: 2rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; background: var(--surface); box-shadow: var(--shadow-card); }
.tool-result[hidden] { display: none; }
.tool-result h2, .tool-result h3 { font-family: var(--font-serif); }
.tool-result ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.tool-result li { display: flex; align-items: flex-start; gap: .6rem; }
.tool-result li .icon { color: var(--brand); margin-top: .2rem; flex-shrink: 0; }
.result-figure { font-size: 2.25rem; font-weight: 700; font-family: var(--font-serif); color: var(--brand); font-variant-numeric: tabular-nums; }
.result-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 560px) { .result-grid { grid-template-columns: 1fr 1fr; } }
.result-box { border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem 1.25rem; background: var(--surface-muted); }
.result-box small { color: var(--subtle); display: block; }

/* Ampel */
.ampel { display: flex; align-items: center; gap: 1rem; border-radius: var(--radius); padding: 1.25rem 1.5rem; font-weight: 600; }
.ampel .icon { flex-shrink: 0; }
.ampel--gruen { background: var(--success-soft); color: var(--success); }
.ampel--gelb { background: var(--warning-soft); color: var(--warning); }
.ampel--rot { background: var(--danger-soft); color: var(--danger); }
.ampel__light { width: 2.75rem; height: 2.75rem; border-radius: 999px; flex-shrink: 0; }
.ampel--gruen .ampel__light { background: var(--success); }
.ampel--gelb .ampel__light { background: var(--warning); }
.ampel--rot .ampel__light { background: var(--danger); }

/* --------------------------------------------------- 20b. Zielgruppen-Komponenten */
/* FAQ-Sprungliste */
.faq-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.faq-jump__label { font-weight: 600; color: var(--muted); margin-right: .25rem; }
.faq-jump .filter-chip { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* Schriftgrößen-Umschalter im Header */
.fontsize-glyph { display: inline-flex; align-items: baseline; font-family: var(--font-serif); font-weight: 700; line-height: 1; }
.fontsize-glyph > span { font-size: .62em; }

/* Themen als große Link-Zeilen (statt Kartenraster) */
.topic-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
@media (min-width: 768px) { .topic-list { grid-template-columns: 1fr 1fr; } }
.topic-list a { display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .2s, background-color .2s; }
.topic-list a:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-soft); }
.topic-list__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .7rem; background: var(--brand-soft); color: var(--brand); }
.topic-list a:hover .topic-list__icon { background: var(--brand); color: var(--brand-ink); }
.topic-list__label { font-weight: 650; font-size: 1.08rem; }
.topic-list__desc { display: block; font-weight: 400; color: var(--muted); font-size: .95rem; margin-top: .1rem; }
.topic-list__arrow { margin-left: auto; color: var(--subtle); flex-shrink: 0; transition: transform .2s, color .2s; }
.topic-list a:hover .topic-list__arrow { transform: translateX(4px); color: var(--brand); }

/* Vertrauensargumente als ruhige Icon-Liste (keine Karten) */
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem 3rem; }
@media (min-width: 768px) { .trust-list { grid-template-columns: 1fr 1fr; } }
.trust-list li { display: flex; align-items: flex-start; gap: 1.1rem; }
.trust-list__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.trust-list h3 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 650; line-height: 1.35; }
.trust-list p { color: var(--muted); margin-top: .25rem; }

/* --------------------------------------------------- 21b. Feature-Karten (Pro/Contra, statische Info-Karten) */
.topic-card--static { cursor: default; }
.topic-card--static:hover { transform: none; box-shadow: var(--shadow-soft); border-color: var(--line); }
.topic-card--static:hover .topic-card__icon { background: var(--brand-soft); color: var(--brand); }
.feature-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); }
.feature-card__title { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; margin-bottom: 1rem; }
.feature-card__title .icon { flex-shrink: 0; color: var(--brand); }
.feature-card--muted .feature-card__title .icon { color: var(--muted); }
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.feature-list li { display: flex; align-items: flex-start; gap: .55rem; }
.feature-list .icon { color: var(--brand); flex-shrink: 0; margin-top: .15rem; }
.feature-card--muted .feature-list .icon { color: var(--muted); }
.h2-icon { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; }
.h2-icon .icon { color: var(--brand); }

/* --------------------------------------------------- 22. Utility spacing */
.mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-14 { margin-top: 3.5rem; }
.mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; }
.hidden { display: none; }
/* Links müssen als Links erkennbar sein (Zielgruppe): immer unterstrichen. */
.prose-links a { color: var(--brand); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); text-underline-offset: .18em; display: inline-flex; align-items: center; gap: .4rem; }
.prose-links a:hover { color: var(--brand-strong); text-decoration-color: var(--brand-strong); }