/*!
 * longevity-firma.de – Themenseiten (Ergänzung zu styles.css)
 * Gleiche CI-Tokens wie die Startseite. Danach folgen die Komponenten-Stile (tools.css).
 */

/* ------------------------------------------------------------------ Grundlagen */
:where(h2, h3)[id], .prose :where(h2, h3) { scroll-margin-top: calc(var(--header-h) + 24px); }
.btn--navy { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.btn--navy:hover, .btn--navy:focus-visible { background: var(--navy-700); color: #fff; }
.main-nav a.is-active { color: var(--gold-700); }
.main-nav a[aria-current="page"] { color: var(--gold-700); text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 6px; }

/* ------------------------------------------------------------------ Hero der Themenseiten */
.page-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(233, 207, 152, .28) 0%, rgba(233, 207, 152, 0) 55%),
    linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(28px, 5vw, 64px) clamp(36px, 6vw, 72px);
}
.page-hero__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 1024px) { .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.page-hero__text .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.page-hero__title {
  font-family: var(--font-serif); font-weight: 600; color: var(--navy-900);
  font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.1; letter-spacing: -.01em; margin: .35em 0 .45em;
  text-wrap: balance; hyphens: auto;
}
.page-hero__lead { font-size: clamp(1.06rem, 1.6vw, 1.22rem); line-height: 1.65; color: var(--ink-2); max-width: 40em; margin: 0 0 18px; hyphens: manual; }
.page-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .86rem; color: var(--ink-3); margin: 0 0 22px; }
.page-hero__meta .icon { width: 16px; height: 16px; color: var(--gold-600); }
.page-hero .cta-group { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.page-hero__visual { margin: 0; position: relative; }
.page-hero__visual picture, .page-hero__visual img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.page-hero__visual img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-lg); }
.page-hero__visual::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: var(--radius);
  border: 1px solid var(--gold-400); z-index: -1;
}
.page-hero__visual { isolation: isolate; }
.page-hero__visual--countdown::before { display: none; }
.page-hero--conversion { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%); color: var(--on-dark); border-bottom: 0; }
.page-hero--conversion .page-hero__title { color: #fff; }
.page-hero--conversion .page-hero__lead { color: var(--on-dark); }
.page-hero--conversion .page-hero__meta { color: var(--on-dark-2); }
.page-hero--conversion .page-hero__meta .icon { color: var(--gold-400); }
.page-hero--conversion .eyebrow { color: var(--gold-300); }
.page-hero--conversion .breadcrumb, .page-hero--conversion .breadcrumb a { color: var(--on-dark-2); }
.page-hero--conversion .breadcrumb [aria-current] { color: #fff; }
.page-hero--conversion .assurance li { color: var(--on-dark); }
.page-hero--conversion .assurance .icon { color: var(--gold-400); }
.page-hero--conversion .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .55); }
.page-hero--conversion .btn--outline:hover, .page-hero--conversion .btn--outline:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }

/* Brotkrümel */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 14px; padding: 0; font-size: .86rem; color: var(--ink-3); }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; color: var(--gold-600); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { text-decoration: underline; color: var(--navy-900); }
.breadcrumb [aria-current] { color: var(--navy-900); font-weight: 600; }

/* ------------------------------------------------------------------ Zweispaltiges Layout */
.page-layout { display: grid; gap: clamp(32px, 5vw, 64px); padding-block: clamp(36px, 6vw, 72px); align-items: stretch; }
@media (min-width: 1024px) { .page-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.page-article { min-width: 0; max-width: 780px; }
.page-aside { display: flex; flex-direction: column; gap: 20px; align-self: stretch; }
.page-aside__sticky { display: grid; gap: 20px; }
@media (min-width: 1024px) { .page-aside__sticky { position: sticky; top: calc(var(--header-h) + 20px); } }
@media (max-width: 1023.98px) { .page-aside .cluster-nav { order: 2; } }

/* Kurz erklärt / Das Wichtigste */
.definition-box { background: var(--sky-50); border: 1px solid var(--sky-100); border-left: 4px solid var(--gold-500); border-radius: 14px; padding: 20px 22px; margin: 0 0 22px; }
.definition-box__label { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
.definition-box p:last-child { margin: 0; font-size: 1.08rem; line-height: 1.7; color: var(--ink); }
.keypoints { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 0 0 24px; box-shadow: var(--shadow-sm); }
.keypoints__title { font-family: var(--font-sans); font-size: 1rem; font-weight: 800; color: var(--navy-900); margin: 0 0 10px; letter-spacing: .01em; }
.keypoints ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.keypoints li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; line-height: 1.55; color: var(--ink); }
.keypoints .icon { width: 18px; height: 18px; color: var(--gold-600); margin-top: 3px; }

/* Inhaltsverzeichnis */
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .93rem; line-height: 1.4; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover, .toc a:focus-visible, .toc a.is-current { color: var(--navy-900); text-decoration: underline; text-decoration-color: var(--gold-500); }
.toc--mobile { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 0 0 28px; background: var(--cream-50); }
.toc--mobile summary { cursor: pointer; font-weight: 700; color: var(--navy-900); }
.toc--mobile ol { margin-top: 10px; }
.toc--aside { display: none; }
@media (min-width: 1024px) {
  .toc--mobile { display: none; }
  .toc--aside { display: block; border-left: 2px solid var(--line); padding-left: 16px; }
}
.toc__title, .cluster-nav__title { margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); display: flex; align-items: center; gap: 8px; }
.cluster-nav__title .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ Fließtext */
.prose { font-size: 1.0625rem; line-height: 1.75; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-family: var(--font-serif); font-weight: 600; color: var(--navy-900); font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.2; margin: 2.2em 0 .6em; text-wrap: balance; }
.prose h3 { font-family: var(--font-sans); font-weight: 800; color: var(--navy-900); font-size: 1.16rem; line-height: 1.35; margin: 1.8em 0 .5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--gold-600); }
.prose a { color: var(--navy-800); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-500); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover, .prose a:focus-visible { color: var(--gold-700); }
.prose a.btn { text-decoration: none; }
.prose a.btn--gold, .prose a.btn--outline, .prose a.btn--gold:hover, .prose a.btn--outline:hover { color: var(--navy-900); }
.prose a.btn--navy, .prose a.lf-btn--navy, .prose a.btn--navy:hover, .prose a.btn--navy:focus-visible { color: #fff; }
.prose strong { color: var(--navy-900); }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold-500); color: var(--ink-2); font-style: italic; }
.prose code { background: var(--cream-100); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* Tabellen */
.table-wrap { overflow-x: auto; margin: 1.4em 0 1.6em; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.table-wrap:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; min-width: 520px; }
.data-table caption { caption-side: top; text-align: left; padding: 12px 16px 0; font-weight: 700; color: var(--navy-900); }
.data-table th, .data-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.data-table thead th { background: var(--cream-100); color: var(--navy-900); font-weight: 800; font-size: .86rem; letter-spacing: .02em; border-bottom: 1px solid var(--line); }
.data-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) th { background: var(--cream-50); }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }

/* Hinweisboxen */
.callout { border-radius: 14px; padding: 18px 20px; margin: 1.6em 0; border: 1px solid var(--line); background: #fff; }
.callout > :last-child { margin-bottom: 0; }
.callout__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-weight: 800; color: var(--navy-900); }
.callout__title .icon { width: 18px; height: 18px; color: var(--gold-600); flex: none; }
.callout--info { background: var(--sky-50); border-color: var(--sky-100); }
.callout--tipp { background: var(--gold-100); border-color: var(--gold-200); }
.callout--hinweis { background: var(--cream-100); border-color: var(--cream-200); border-left: 4px solid var(--navy-700); }
.callout--zitat { background: #fff; border: 1px dashed var(--gold-500); }
.callout ul, .callout ol { padding-left: 1.2em; }

/* Inline-CTA im Text */
.inline-cta {
  display: grid; gap: 18px; align-items: center; margin: 2.2em 0; padding: clamp(20px, 3vw, 28px);
  border-radius: 18px; color: var(--on-dark); box-shadow: var(--shadow-md);
  background: radial-gradient(120% 140% at 0% 0%, rgba(221, 182, 106, .22) 0%, rgba(221, 182, 106, 0) 50%), linear-gradient(140deg, var(--navy-900), var(--navy-700));
}
@media (min-width: 720px) { .inline-cta { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.inline-cta p { margin: 0 0 8px; color: var(--on-dark); line-height: 1.6; }
.inline-cta__title { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.25; color: #fff !important; }
.inline-cta__incentive { display: flex; gap: 8px; align-items: flex-start; color: var(--gold-300) !important; font-weight: 600; }
.inline-cta__incentive .icon { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.inline-cta__action { display: grid; gap: 8px; justify-items: stretch; }
.inline-cta__action .btn { text-decoration: none; justify-content: center; }
.inline-cta__fine { font-size: .82rem; color: var(--on-dark-2) !important; text-align: center; margin: 0 !important; }

/* Seitenleiste */
.aside-cta { border-radius: 18px; padding: 20px; color: var(--on-dark); background: linear-gradient(150deg, var(--navy-900), var(--navy-800)); box-shadow: var(--shadow-md); }
.aside-cta p { margin: 0 0 10px; }
.aside-cta__kicker { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.aside-cta__title { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.3; color: #fff; }
.aside-cta__next { font-size: .9rem; color: var(--on-dark); line-height: 1.5; }
.aside-cta__fine { font-size: .78rem; color: var(--on-dark-2); margin: 10px 0 0 !important; text-align: center; }
.cluster-nav { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: #fff; }
.cluster-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.cluster-nav a, .cluster-nav [aria-current] { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.cluster-nav li:last-child a, .cluster-nav li:last-child [aria-current] { border-bottom: 0; }
.cluster-nav a:hover, .cluster-nav a:focus-visible { color: var(--navy-900); text-decoration: underline; text-decoration-color: var(--gold-500); }
.cluster-nav [aria-current] { color: var(--navy-900); font-weight: 700; }

/* FAQ, Quellen */
.page-faq, .page-sources { margin-top: clamp(40px, 6vw, 64px); }
.page-faq h2, .page-sources h2 { font-family: var(--font-serif); font-weight: 600; color: var(--navy-900); font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin: 0 0 18px; }
.sources { margin: 0 0 16px; padding-left: 1.4em; font-size: .9rem; line-height: 1.55; color: var(--ink-2); display: grid; gap: 6px; }
.sources a { color: var(--navy-800); text-decoration: underline; text-decoration-color: var(--gold-400); text-underline-offset: 2px; overflow-wrap: anywhere; }
/* kein Flex: Text und Links würden sonst zu einzelnen Spalten (z. B. „Impressum“ gequetscht) */
.page-note { position: relative; padding-left: 24px; font-size: .86rem; line-height: 1.55; color: var(--ink-3); margin: 0; }
.page-note .icon { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; color: var(--gold-600); }
.page-note a { color: var(--ink-2); }

/* Abschluss-CTA */
.final-cta__incentive { display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: var(--gold-300); font-weight: 600; margin: 0 auto 22px; max-width: 46em; }
.final-cta__incentive .icon { width: 18px; height: 18px; flex: none; }

/* Weiterlesen */
.related { background: var(--cream-100); padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
.related h2 { font-family: var(--font-serif); font-weight: 600; color: var(--navy-900); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 24px; }
.rel-grid, .hub-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.rel-card, .hub-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.rel-card:hover, .rel-card:focus-within, .hub-card:hover, .hub-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rel-card__kicker { margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
.rel-card__title, .hub-card__title { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.35; margin: 0 0 8px; }
.rel-card__title a, .hub-card__title a { color: var(--navy-900); text-decoration: none; }
.rel-card__title a::after, .hub-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.rel-card__title a:focus-visible, .hub-card__title a:focus-visible { outline: none; }
.rel-card:focus-within, .hub-card:focus-within { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.rel-card p:last-child, .hub-card p:last-child { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }

/* Regional-Teaser: zusätzlicher Link */
.lf-cityfinder__more { margin: 14px 0 0; }
.lf-cityfinder__more a { font-weight: 700; color: var(--navy-800); text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Termine & Webinare */
.ev-list { display: grid; gap: 18px; margin: 1.6em 0 .8em; }
@media (min-width: 760px) { .ev-list:not(.ev-list--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-card { position: relative; display: grid; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.ev-card.is-next { border-color: var(--gold-400); box-shadow: 0 0 0 2px var(--gold-300), var(--shadow-md); }
.ev-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ev-card__body { padding: 18px 20px 20px; display: grid; gap: 10px; }
.ev-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); }
.ev-card__kicker .icon { width: 16px; height: 16px; }
.ev-card__flag { background: var(--navy-900); color: #fff; border-radius: 999px; padding: 2px 10px; letter-spacing: .04em; font-size: .72rem; }
.ev-card.is-live .ev-card__flag { background: #B42318; }
.ev-card__title { font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.3; color: var(--navy-900); margin: 0; }
.ev-card__facts { margin: 0; display: grid; gap: 6px; font-size: .94rem; line-height: 1.5; }
.ev-card__facts > div { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.ev-card__facts dt .icon { width: 18px; height: 18px; color: var(--gold-600); margin-top: 2px; }
.ev-card__facts dd { margin: 0; color: var(--ink); }
.ev-card__facts a { color: var(--ink-2); }
.ev-card__scarcity, .wb-card__scarcity { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: #8A2C0D; font-size: .92rem; }
.ev-card__scarcity .icon, .wb-card__scarcity .icon { width: 18px; height: 18px; }
.ev-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.ev-card__actions .btn { text-decoration: none; }
.ev-card__ics { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--navy-800); }
.ev-card__ics .icon { width: 16px; height: 16px; }
/* Karten stehen im Artikel: dessen Abstände für h3/p (.prose) nicht übernehmen, den Abstand regelt das Grid der Karte */
.prose .ev-card__kicker, .prose .ev-card__title, .prose .ev-card__scarcity { margin: 0; }
/* Hervorgehobene Karte bleibt einspaltig: in der Artikelspalte (max. 780px) wäre das Bild nebeneinander zu niedrig und ließe eine weiße Fläche */
.ev-empty { padding: 18px 20px; border: 1px dashed var(--gold-500); border-radius: 16px; background: var(--cream-50); margin: 0; }
.ev-note { font-size: .88rem; color: var(--ink-3); margin: 0 0 1.4em; }
.wb-list { display: grid; gap: 18px; margin: 1.6em 0; }
@media (min-width: 760px) { .wb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wb-card { background: var(--sky-50); border: 1px solid var(--sky-100); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.wb-card p { margin: 0; line-height: 1.55; }
.wb-card .btn { justify-self: start; margin-top: 6px; text-decoration: none; }
.wb-card__kicker { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-700); }
.wb-card__kicker .icon, .wb-card__meta .icon { width: 16px; height: 16px; }
.wb-card__title { font-family: var(--font-serif); font-size: 1.22rem; color: var(--navy-900); margin: 0; }
.wb-card__meta { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .92rem; }
.wb-card__host { font-size: .9rem; color: var(--ink-2); }
.steps-box { margin: 1.6em 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.steps-box .steps { margin-bottom: 18px; }
.steps-box .cta-row .btn { text-decoration: none; }
.page-article .lf-countdown { margin: 1.6em 0; }

/* Steckbriefe, Bereiche, Zitat, Download */
.facts-box { margin: 1.6em 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.facts-box__title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 18px; background: var(--cream-100); font-weight: 800; color: var(--navy-900); border-bottom: 1px solid var(--line); }
.facts-box__title .icon { width: 18px; height: 18px; color: var(--gold-600); }
.facts-box dl { margin: 0; }
.facts-box dl > div { display: grid; gap: 2px 18px; padding: 11px 18px; border-bottom: 1px solid var(--line-2); }
.facts-box dl > div:last-child { border-bottom: 0; }
@media (min-width: 640px) { .facts-box dl > div { grid-template-columns: 210px 1fr; } }
.facts-box dt { font-weight: 700; color: var(--navy-900); font-size: .92rem; }
.facts-box dd { margin: 0; color: var(--ink); font-size: .96rem; line-height: 1.5; }
.facts-box a { color: var(--navy-800); }
.areas-box { margin: 1.6em 0; }
.areas-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.area-card { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.area-card .icon { width: 26px; height: 26px; color: var(--gold-600); margin-bottom: 4px; }
.area-card__en { font-weight: 800; color: var(--navy-900); line-height: 1.3; }
.area-card__de { font-size: .9rem; color: var(--ink-2); line-height: 1.4; }
.areas-note { font-size: .86rem; color: var(--ink-3); margin: 10px 0 0; }
.cite-box { margin: 1.6em 0; padding: 18px 20px; border-radius: 16px; border: 1px dashed var(--gold-500); background: var(--cream-50); display: grid; gap: 10px; justify-items: start; }
.cite-box p { margin: 0; }
.cite-box__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy-900); }
.cite-box__title .icon { width: 18px; height: 18px; color: var(--gold-600); }
.cite-box__text { font-size: .95rem; line-height: 1.55; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.cite-box__code { margin: 0; width: 100%; max-height: 140px; overflow: auto; font-size: .8rem; line-height: 1.45; white-space: pre-wrap; word-break: break-all; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cite-box__note { font-size: .86rem; color: var(--ink-2); }
.cite-box__dl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy-800); }
.cite-box__dl .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.download-box { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; margin: 1.6em 0; padding: 20px; border-radius: 18px; background: var(--gold-100); border: 1px solid var(--gold-200); }
.download-box__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--navy-900); color: var(--gold-300); }
.download-box__icon .icon { width: 26px; height: 26px; }
.download-box p { margin: 0 0 10px; line-height: 1.55; }
.download-box__title { font-weight: 800; color: var(--navy-900); }
.download-box .btn { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.download-box .btn .icon { transform: rotate(90deg); width: 16px; height: 16px; }
.download-box__meta { font-weight: 500; opacity: .85; }

/* ------------------------------------------------------------------ Themen-Hub */
.hub-jump { padding-block: 24px 0; }
.hub-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-jump a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy-900); font-weight: 700; font-size: .9rem; text-decoration: none; }
.hub-jump a:hover, .hub-jump a:focus-visible { border-color: var(--gold-500); background: var(--gold-100); }
.hub-section { padding-block: clamp(36px, 5vw, 56px); }
.hub-section:nth-of-type(even) { background: var(--cream-50); }
.hub-section__head { max-width: 760px; margin-bottom: 22px; }
.hub-section__head h2 { font-family: var(--font-serif); font-weight: 600; color: var(--navy-900); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 6px 0 8px; }
.hub-section__head p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.hub-section__head a { font-weight: 700; color: var(--navy-800); }
.hub-section__head .eyebrow { display: inline-flex; gap: 8px; align-items: center; }

/* ------------------------------------------------------------------ Regionen-Hub */
.regions-intro { padding-block: clamp(36px, 5vw, 56px) 8px; }
.regions-intro__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .regions-intro__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.regions-list { padding-block: 8px clamp(48px, 6vw, 72px); }
.regions-filter { max-width: 560px; margin: 0 0 28px; display: grid; gap: 6px; }
.region-country { margin-top: 36px; }
.region-country > h2 { font-family: var(--font-serif); font-weight: 600; color: var(--navy-900); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.region-country__count { font-family: var(--font-sans); font-size: .9rem; font-weight: 700; color: var(--gold-700); }
.region-group { margin-top: 22px; }
.region-group__title { font-size: 1rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.city-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.city-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); display: grid; gap: 6px; align-content: start; scroll-margin-top: calc(var(--header-h) + 24px); }
.city-card:target { border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-300), var(--shadow-md); }
.city-card__name { font-family: var(--font-serif); font-size: 1.25rem; color: var(--navy-900); margin: 0; }
.city-card p { margin: 0; font-size: .9rem; line-height: 1.5; }
.city-card__meta { color: var(--ink-3); }
.city-card__next { color: var(--ink); }
.city-card__web { color: var(--ink-2); }
.city-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; font-size: .92rem; color: var(--navy-800); text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
.city-card__cta .icon { width: 16px; height: 16px; }
.city-card[hidden], .region-group[hidden] { display: none; }

/* ------------------------------------------------------------------ Footer & Druck */
.footer__legal [data-disclaimer] { font-size: .82rem; line-height: 1.6; }
@media print {
  .lf-urgency, .site-header, .page-aside, .final-cta, .related, .lf-cityfinder, .sticky-cta, .exit-modal, .inline-cta, .page-hero .cta-group, .page-hero .assurance { display: none !important; }
  .page-layout { display: block; }
  .page-hero { background: none; border: 0; padding: 0; }
  .page-hero__visual { display: none; }
  .prose a { text-decoration: none; }
}

/* Webinar-Hero: Bild mit Info-Karte */
.page-hero__visual--webinar img { aspect-ratio: 4 / 3; }
.hero-webinar { display: grid; gap: 6px; margin-top: -48px; margin-inline: 16px; position: relative; padding: 16px 18px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); border: 1px solid var(--gold-300); }
@media (min-width: 1024px) { .hero-webinar { position: absolute; left: -28px; bottom: -28px; margin: 0; max-width: 320px; } }
.hero-webinar__kicker { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
.hero-webinar__title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--navy-900); line-height: 1.25; }
.hero-webinar__meta, .hero-webinar__scarcity { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.hero-webinar__scarcity { font-weight: 700; color: #8A2C0D; }
.hero-webinar .icon { width: 16px; height: 16px; flex: none; }

/* === Komponenten (tools.css) === */
/*!
 * longevity-firma.de · Komponenten · tools.css v1.0.0
 * Ergänzt assets/css/styles.css (Tokens, .btn, .eyebrow, .container, .visually-hidden) – wird danach geladen.
 * Alle Klassen mit Präfix lf-. Keine globalen Element-Stile, kein @font-face. Nur helles Farbschema.
 */

:root {
  --lf-error: #B3261E;          /* 6,4:1 auf Weiß */
  --lf-error-bg: #FDF1EF;
  --lf-focus: var(--gold-700);  /* 5,3:1 auf Weiß – Fokusring auf hellen Flächen */
  --lf-focus-dark: var(--gold-300);
  --lf-field-border: var(--ink-3);
  --lf-radius: 26px;
}

/* ------------------------------------------------------------------ Fokus (Kontrast ≥ 3:1) */
.lf-tool :focus-visible,
.lf-cityfinder :focus-visible,
.lf-checklist :focus-visible,
.lf-checklist__bar :focus-visible,
.lf-copy:focus-visible,
.lf-cityfilter :focus-visible,
.lf-event-card :focus-visible { outline: 3px solid var(--lf-focus); outline-offset: 3px; }
.lf-urgency :focus-visible,
.lf-countdown :focus-visible { outline: 3px solid var(--lf-focus-dark); outline-offset: 3px; }
.lf-countdown--light :focus-visible { outline-color: var(--lf-focus); }

/* ------------------------------------------------------------------ Grundbausteine */
.lf-icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lf-tool {
  position: relative;
  padding: clamp(20px, 4vw, 44px);
  border-radius: var(--lf-radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.lf-tool + .lf-tool { margin-top: clamp(28px, 4vw, 44px); }
.lf-tool__head { max-width: 48rem; margin-bottom: clamp(20px, 3vw, 30px); }
.lf-tool__head .eyebrow { margin-bottom: 10px; }
.lf-tool__title {
  margin: 0 0 12px;
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.55rem, 1.15rem + 1.4vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em;
  color: var(--navy-900);
}
.lf-tool__intro { color: var(--ink-2); margin-bottom: 14px; }
.lf-tool__privacy {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 11px 15px; border-radius: 14px;
  background: var(--sky-50); border: 1px solid var(--sky-100);
  font-size: .9rem; line-height: 1.5; color: var(--ink-2);
}
.lf-tool__privacy .lf-icon { color: var(--navy-700); margin-top: 2px; }

.lf-btn--navy { background: var(--navy-900); color: #fff; box-shadow: var(--shadow-sm); }
.lf-btn--navy:hover { background: var(--navy-700); transform: translateY(-1px); }
.lf-linkbtn {
  padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: .18em;
}
.lf-linkbtn:hover { color: var(--navy-900); }

.lf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.lf-form__status:empty { display: none; }
.lf-form__status {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 12px;
  background: var(--lf-error-bg); color: var(--lf-error); font-weight: 700; font-size: .92rem;
}
.lf-form__hint { margin: 16px 0 0; font-size: .88rem; color: var(--ink-2); }

/* Felder */
.lf-field { min-width: 0; }
.lf-field__label { display: block; margin-bottom: 6px; font-weight: 800; font-size: .95rem; line-height: 1.35; color: var(--navy-900); }
.lf-field__control { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.lf-input, .lf-select {
  min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 1rem; line-height: 1.3; color: var(--ink);
  background: #fff; border: 1px solid var(--lf-field-border); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.lf-input { flex: 1 1 auto; width: 100%; min-width: 0; }
.lf-select { flex: none; width: auto; padding-right: 34px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306223B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
}
.lf-input:hover, .lf-select:hover { border-color: var(--navy-700); }
.lf-input:focus-visible, .lf-select:focus-visible { outline: 3px solid var(--lf-focus); outline-offset: 2px; border-color: var(--navy-900); }
.lf-input[aria-invalid="true"] { border-color: var(--lf-error); box-shadow: 0 0 0 1px var(--lf-error); }
.lf-unit {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 0 12px;
  border-radius: 12px; background: var(--cream-100); border: 1px solid var(--line);
  font-weight: 700; font-size: .92rem; color: var(--ink-2);
}
.lf-field__hint { margin: 6px 0 0; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.lf-field__error {
  display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0;
  font-size: .88rem; font-weight: 700; line-height: 1.45; color: var(--lf-error);
}
.lf-field__error::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: var(--lf-error); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1;
}

/* Hinweise, Badges */
.lf-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  padding: 12px 16px; border-radius: 14px;
  background: #FFF8EC; border: 1px solid #EAD7B0;
  font-size: .9rem; line-height: 1.55; color: var(--ink);
}
.lf-note .lf-icon { color: var(--gold-700); margin-top: 2px; }
.lf-note--inline { margin-top: 16px; }
.lf-notes { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.lf-notes li { position: relative; padding-left: 20px; }
.lf-notes li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--gold-600); transform: rotate(45deg); }
.lf-notes strong { color: var(--navy-900); }
.lf-source { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.lf-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 4px 0 0;
  padding: 6px 13px; border-radius: 999px; background: var(--cream-100); border: 1px solid var(--line);
  font-size: .84rem; font-weight: 800; color: var(--navy-900);
}
.lf-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-600); }
.lf-live-dot {
  display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-300); box-shadow: 0 0 0 0 rgba(221, 182, 106, .7);
  animation: lf-pulse 2.2s infinite;
}
@keyframes lf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(221, 182, 106, .75); }
  70% { box-shadow: 0 0 0 10px rgba(221, 182, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(221, 182, 106, 0); }
}

/* Ergebnisbereich (aria-live) */
.lf-result { margin-top: 0; }
.lf-result__panel {
  margin-top: 26px; padding: clamp(20px, 3vw, 32px); border-radius: 22px;
  background: var(--sky-50); border: 1px solid var(--sky-100);
  animation: lf-in .45s var(--ease);
}
@keyframes lf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lf-result__title { margin: 0 0 10px; font-family: var(--font-sans); font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700); }
.lf-result__subtitle { margin: 24px 0 12px; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--navy-900); }
.lf-result__text { margin: 14px 0 0; color: var(--ink-2); }
.lf-result__after { display: grid; gap: 18px; margin-top: 18px; }
.lf-score { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.lf-score__line { margin: 0; display: flex; align-items: baseline; gap: 4px; color: var(--navy-900); }
.lf-score__value { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.lf-score__max { font-weight: 700; color: var(--ink-2); }
.lf-band {
  margin: 0; display: inline-flex; padding: 7px 15px; border-radius: 999px;
  background: var(--navy-900); color: #fff; font-weight: 800; font-size: .9rem; line-height: 1.3;
}
.lf-meter { height: 10px; margin-top: 16px; border-radius: 999px; background: #fff; border: 1px solid var(--sky-100); overflow: hidden; }
.lf-meter__fill { height: 100%; border-radius: inherit; background: var(--grad-gold); transition: width .7s var(--ease); }
.lf-levers { list-style: none; counter-reset: lf-lever; display: grid; gap: 12px; margin: 0; padding: 0; }
.lf-lever {
  counter-increment: lf-lever; position: relative; display: grid; gap: 4px;
  padding: 16px 18px 16px 62px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
}
.lf-lever::before {
  content: counter(lf-lever); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-gold); color: var(--navy-950); font-weight: 800; font-size: .95rem;
}
.lf-lever__title { color: var(--navy-900); font-size: 1.02rem; }
.lf-lever__tip { color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.lf-cta { display: grid; justify-items: start; gap: 10px; padding-top: 4px; }
.lf-cta__text { margin: 0; color: var(--ink); font-weight: 600; }
.lf-cta__note { margin: 0; font-size: .84rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ a) Lebensstil-Check */
.lf-questions { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.lf-fieldset {
  min-width: 0; margin: 0; padding: 18px 18px 20px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--cream-50);
  transition: border-color .2s, background-color .2s;
}
.lf-fieldset.is-invalid { border-color: var(--lf-error); background: var(--lf-error-bg); }
.lf-legend {
  float: left; width: 100%; display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 14px; padding: 0;
  font-weight: 800; font-size: 1.02rem; line-height: 1.45; color: var(--navy-900);
}
.lf-legend + * { clear: both; }
.lf-qnum {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold-300); font-size: .86rem; font-weight: 800;
}
.lf-legend small { display: block; margin-top: 2px; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.lf-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.lf-option {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  min-height: 48px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--line);
  font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--ink);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.lf-option:hover { border-color: var(--gold-400); }
.lf-option input {
  flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy-900); cursor: pointer;
}
.lf-option input:focus-visible { outline: 3px solid var(--lf-focus); outline-offset: 2px; }
.lf-option:has(input:checked) { border-color: var(--gold-600); background: var(--gold-100); box-shadow: inset 0 0 0 1px var(--gold-600); }
.lf-fieldset .lf-field__error { margin-top: 12px; }

/* ------------------------------------------------------------------ b) PhenoAge-Rechner */
.lf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px 22px; }
.lf-pheno__value { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); color: var(--navy-900); }
.lf-pheno__value strong { display: inline-block; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.015em; }
.lf-pheno__diff { margin: 8px 0 0; font-weight: 600; color: var(--ink); }
.lf-pheno__diff strong { color: var(--navy-900); white-space: nowrap; }

/* ------------------------------------------------------------------ c) Termin-Finder (Teaser über dem Footer) */
.lf-cityfinder {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(52px, 8vw, 96px);
  background: linear-gradient(180deg, var(--sky-50) 0%, var(--cream-50) 100%);
  border-top: 1px solid var(--line-2);
}
.lf-cityfinder::before {
  content: ""; position: absolute; z-index: -1; width: 640px; aspect-ratio: 1; right: -220px; top: -300px; border-radius: 50%;
  border: 1px solid rgba(201, 154, 69, .25); box-shadow: 0 0 0 60px rgba(201, 154, 69, .03);
}
.lf-cityfinder__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(26px, 5vw, 64px); align-items: start; }
.lf-cityfinder__title {
  margin: 0 0 14px; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.12; letter-spacing: -.012em; color: var(--navy-900);
}
.lf-cityfinder__text { color: var(--ink-2); margin: 0; }
.lf-cityfinder__points { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding: 0; font-weight: 700; font-size: .95rem; color: var(--ink-2); }
.lf-cityfinder__points li { display: flex; gap: 10px; align-items: flex-start; }
.lf-cityfinder__points .lf-icon { color: var(--gold-600); margin-top: 3px; }
.lf-cityfinder__panel {
  padding: clamp(20px, 3vw, 32px); border-radius: var(--lf-radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.lf-search__row { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-search__row .lf-input { flex: 1 1 220px; }
.lf-search__row .btn { flex: 0 0 auto; }
.lf-cityfinder__result:empty { display: none; }
.lf-cf-event {
  display: grid; gap: 6px; margin-top: 22px; padding: 20px 22px; border-radius: 20px;
  background: var(--cream-50); border: 1px solid var(--line);
  animation: lf-in .45s var(--ease);
}
.lf-cf-event.is-live { border-color: var(--gold-500); }
.lf-cf-event__lead { margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); }
.lf-cf-event__lead strong { color: var(--navy-900); }
.lf-cf-event__kicker { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }
.lf-cf-none { margin: 22px 0 0; font-weight: 700; color: var(--navy-900); }
.lf-cf-event__title { margin: 2px 0 4px; font-family: var(--font-serif); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem); font-weight: 600; line-height: 1.25; color: var(--navy-900); }
.lf-cf-event__when { margin: 0; font-weight: 800; color: var(--navy-900); }
.lf-cf-event__where { margin: 0; color: var(--ink-2); font-size: .95rem; }
.lf-cf-event .lf-badge { justify-self: start; }
.lf-cf-event__more { margin: 8px 0 0; font-weight: 800; }
.lf-cf-event__more a { color: var(--navy-900); }
.lf-cf-event__more a:hover { color: var(--gold-700); }
.lf-cityfinder__after { display: grid; justify-items: start; gap: 12px; margin-top: 16px; }
.lf-webinar {
  justify-self: stretch; display: grid; gap: 6px; padding: 16px 20px; border-radius: 18px;
  background: var(--navy-900); color: var(--on-dark);
}
.lf-webinar__title { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-weight: 800; color: #fff; line-height: 1.4; }
.lf-webinar__title .lf-icon { color: var(--gold-300); margin-top: 3px; }
.lf-webinar__list { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0 0 0 28px; font-size: .9rem; line-height: 1.5; color: var(--on-dark-2); }
.lf-webinar__list strong { color: var(--on-dark); font-weight: 700; }

/* ------------------------------------------------------------------ c2) Städtefilter */
.lf-cityfilter { display: grid; gap: 8px; max-width: 34rem; }
.lf-cityfilter__field { position: relative; }
.lf-cityfilter__field .lf-input { padding-left: 44px; }
.lf-cityfilter__field .lf-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.lf-cityfilter__count { margin: 0; font-size: .9rem; font-weight: 700; color: var(--ink-2); }

/* ------------------------------------------------------------------ d) Termin-Karten (optional nutzbar) */
.lf-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.lf-events__empty {
  grid-column: 1 / -1; margin: 0; padding: 18px 20px; border-radius: 18px; text-align: center;
  background: var(--cream-100); border: 1px dashed var(--gold-400); color: var(--ink-2);
}
.lf-event-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.lf-event-card.is-next { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500), var(--shadow-md); }
.lf-event-card.is-live { border-color: var(--navy-900); }
.lf-event-card__kicker { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.lf-event-card__title { margin: 0 0 4px; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: var(--navy-900); }
.lf-event-card__line { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.lf-event-card .btn { margin-top: auto; align-self: flex-start; }
.lf-event-card .lf-badge { margin-bottom: 10px; }
.lf-event-flag {
  align-self: flex-start; margin: 0 0 4px; padding: 5px 12px; border-radius: 999px;
  background: var(--grad-gold); color: var(--navy-950);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.is-live > .lf-event-flag, .is-live .lf-event-flag { background: var(--navy-900); color: var(--gold-300); }

/* ------------------------------------------------------------------ e) Countdown */
.lf-countdown {
  display: grid; gap: 14px; max-width: 460px;
  padding: 22px 24px 24px; border-radius: 22px;
  background: radial-gradient(120% 120% at 0% 0%, var(--navy-700) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  border: 1px solid rgba(233, 207, 152, .35); box-shadow: var(--shadow-md);
  color: var(--on-dark);
}
.lf-countdown p { margin: 0; }
.lf-countdown__active, .lf-countdown__fallback { display: grid; gap: 6px; }
.lf-countdown__status {
  display: flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300);
}
.lf-countdown__title { font-family: var(--font-serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 600; line-height: 1.3; color: #fff; }
.lf-countdown__meta { font-size: .92rem; line-height: 1.5; color: var(--on-dark-2); }
.lf-countdown__meta b { color: var(--on-dark); font-weight: 800; }
.lf-countdown__meta .lf-countdown__date { color: inherit; font-weight: 500; }
.lf-countdown__clock { display: flex; gap: 8px; margin-top: 8px; }
.lf-countdown__unit {
  flex: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(233, 207, 152, .26);
}
.lf-countdown__unit b { font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.lf-countdown__unit small { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.lf-countdown .btn { justify-self: start; }
.lf-countdown.is-live .lf-live-dot { background: var(--gold-400); }
.lf-countdown--light {
  background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); color: var(--ink);
}
.lf-countdown--light .lf-countdown__status { color: var(--gold-700); }
.lf-countdown--light .lf-countdown__title { color: var(--navy-900); }
.lf-countdown--light .lf-countdown__meta { color: var(--ink-2); }
.lf-countdown--light .lf-countdown__meta b { color: var(--navy-900); }
.lf-countdown--light .lf-countdown__meta .lf-countdown__date { color: var(--ink-2); }
.lf-countdown--light .lf-countdown__unit { background: var(--cream-100); border-color: var(--line); }
.lf-countdown--light .lf-countdown__unit b { color: var(--navy-900); }
.lf-countdown--light .lf-countdown__unit small { color: var(--ink-2); }
.lf-countdown--light .lf-live-dot { background: var(--gold-500); }

/* ------------------------------------------------------------------ f) Dringlichkeitsleiste */
.lf-urgency { position: relative; z-index: 101; background: var(--navy-950); color: var(--on-dark); font-size: .88rem; }
.lf-urgency__inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 18px; min-height: 46px; padding-block: 7px; text-align: center;
}
.lf-urgency__text { margin: 0; display: inline-flex; align-items: center; gap: 10px; line-height: 1.45; font-weight: 600; }
.lf-urgency__text > span { color: #fff; }
.lf-urgency .btn { --pad-y: 7px; --pad-x: 16px; font-size: .84rem; box-shadow: none; }

/* ------------------------------------------------------------------ g) Checkliste */
.lf-checklist { margin-block: 18px; }
.lf-checklist__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  margin-bottom: 14px; padding: 14px 16px; border-radius: 18px;
  background: var(--cream-100); border: 1px solid var(--line);
}
.lf-checklist__status { display: grid; gap: 8px; flex: 1 1 200px; min-width: 0; }
.lf-checklist__progress { margin: 0; font-weight: 800; color: var(--navy-900); }
.lf-checklist__meter { height: 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.lf-checklist__meter-fill { width: 0; height: 100%; border-radius: inherit; background: var(--grad-gold); transition: width .4s var(--ease); }
.lf-checklist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lf-checklist__list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.lf-check {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  transition: border-color .2s, background-color .2s;
}
.lf-check:hover { border-color: var(--gold-400); }
.lf-check__input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy-900); cursor: pointer; }
.lf-check__label { flex: 1; min-width: 0; cursor: pointer; font-weight: 600; line-height: 1.5; color: var(--ink); }
.lf-check.is-done { background: var(--cream-50); border-color: var(--gold-300); }
.lf-check.is-done .lf-check__label { color: var(--ink-2); }
.lf-checklist__note { margin: 10px 0 0; font-size: .82rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ h) Kopieren */
.lf-copy {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--navy-900); background: #fff; color: var(--navy-900);
  font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lf-copy:hover { background: var(--navy-900); color: #fff; }
.lf-copy.is-copied { background: var(--gold-100); border-color: var(--gold-600); color: var(--navy-900); }
.lf-quote {
  margin: 0; padding: 20px 22px; border-radius: 18px; border-left: 3px solid var(--gold-500);
  background: #fff; box-shadow: var(--shadow-sm); color: var(--ink);
}
.lf-quote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Infografiken (SVG) */
/* Breite Variante (.lf-figure__wide) ab 700 px Abbildungsbreite, darunter die hohe Mobil-Variante (.lf-figure__tall).
   Umschalten nach tatsächlicher Breite der Abbildung (Container Query), Fallback: Viewport < 768 px. */
.lf-figure { margin: clamp(24px, 4vw, 40px) 0; container-type: inline-size; }
.lf-figure svg, .lf-figure img { display: block; width: 100%; height: auto; }
.lf-figure figcaption { margin-top: 10px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.lf-figure__tall { display: none; max-width: 480px; margin-inline: auto; }
@container (max-width: 699px) {
  .lf-figure__wide { display: none; }
  .lf-figure__tall { display: block; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .lf-figure__wide { display: none; }
    .lf-figure__tall { display: block; }
  }
}

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
  .lf-cityfinder__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lf-tool { border-radius: 22px; }
  .lf-fieldset { padding: 16px 14px 18px; }
  .lf-legend { font-size: .98rem; gap: 10px; }
  .lf-actions .btn, .lf-search__row .btn, .lf-cta .btn, .lf-cityfinder__after .btn { width: 100%; }
  .lf-lever { padding: 14px 14px 14px 56px; }
  .lf-lever::before { left: 12px; }
  .lf-countdown { padding: 18px 18px 20px; }
  .lf-countdown .btn { justify-self: stretch; }
  .lf-urgency__text { font-size: .84rem; }
}
@media (max-width: 380px) {
  .lf-field__control { flex-wrap: wrap; }
  .lf-field__control .lf-select, .lf-field__control .lf-unit { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .lf-live-dot, .lf-result__panel, .lf-cf-event { animation: none; }
  .lf-meter__fill, .lf-checklist__meter-fill, .lf-option, .lf-input, .lf-select, .lf-check, .lf-fieldset, .lf-copy { transition: none; }
  .lf-btn--navy:hover { transform: none; }
}

/* ------------------------------------------------------------------ Druck */
@media print {
  .lf-urgency, .lf-cityfinder, .lf-countdown, .lf-checklist__actions, .lf-checklist__meter, .lf-checklist__note, .lf-copy { display: none !important; }
  .lf-tool { box-shadow: none; border-color: #999; }
  .lf-checklist__bar { background: none; border: 0; padding: 0; margin-bottom: 8pt; }
  .lf-checklist__list { gap: 4pt; }
  .lf-check, .lf-check.is-done { break-inside: avoid; padding: 6pt 0; border: 0; border-bottom: .5pt solid #bbb; border-radius: 0; background: none !important; }
  .lf-check__input {
    -webkit-appearance: none; appearance: none; width: 13pt; height: 13pt; margin-top: 1pt;
    border: 1.2pt solid #000; border-radius: 2pt; background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .lf-check__input:checked {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11pt no-repeat;
  }
  .lf-check__label { color: #000 !important; }
  .lf-check__label a::after { content: " (" attr(href) ")"; font-weight: 400; font-size: .85em; }
  /* „Checkliste drucken“: nur die Liste (und ihre Überschrift) drucken */
  html.lf-print-only body *:not(.lf-print-path):not(.lf-print-target):not(.lf-print-target *) { display: none !important; }
  html.lf-print-only .lf-print-path { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; }
  html.lf-print-only .lf-print-target { display: block !important; margin: 0 0 10pt !important; }
}

/* === Startseite: Themen-Teaser und fünfspaltiger Footer === */
@media (min-width: 1181px) { .footer__top--five { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; } }
.lf-home-wissen .hub-grid { margin-top: 28px; }
.lf-home-wissen .rel-card__kicker { display: flex; align-items: center; gap: 6px; }
.lf-home-wissen .rel-card__kicker .icon { width: 15px; height: 15px; }
.lf-home-wissen__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ------------------------------------------------------------------ Face Scan (face-scan.html, assets/js/face-scan.js) */
.fs { margin: clamp(26px, 4vw, 44px) 0; border-radius: var(--radius); overflow: hidden; color: var(--on-dark); box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 48%, var(--navy-950) 100%); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose .fs h2, .prose .fs h3, .prose .fs p, .prose .fs ol, .prose .fs ul, .prose .fs li { margin: 0; }
.prose .fs ol, .prose .fs ul { padding: 0; }
.prose .fs strong { color: #fff; }
.fs__head { padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 28px) 0; }
.fs__eyebrow { display: flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); }
.fs__eyebrow .icon { width: 16px; height: 16px; flex: none; }
.prose .fs .fs__heading { font-family: var(--font-serif); font-weight: 600; color: #fff; font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.2; margin: 8px 0 6px; }
.fs__lead { color: var(--on-dark-2); font-size: .98rem; line-height: 1.55; }
.fs__grid { display: grid; gap: 18px; padding: 18px clamp(14px, 3vw, 28px) clamp(16px, 2.6vw, 24px); }
@media (min-width: 700px) { .fs__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }

/* Bühne: Modell, Livebild, Führungsoval */
.fs__stage { position: relative; isolation: isolate; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; border: 1px solid rgba(221, 182, 106, .28);
  scroll-margin-top: calc(var(--header-h) + 12px);
  background: radial-gradient(ellipse at 50% 46%, rgba(221, 182, 106, .15) 0%, rgba(18, 61, 99, .35) 38%, transparent 70%),
    radial-gradient(circle, rgba(221, 182, 106, .16) .8px, transparent 1px) 0 0 / 16px 16px, var(--navy-950); }
@media (min-width: 700px) { .fs__stage { aspect-ratio: auto; min-height: 440px; } }
.fs__model, .fs__camera, .fs__guide { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs__model { display: block; cursor: grab; outline: none; }
.fs__model:active { cursor: grabbing; }
.fs__model:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-400); }
.fs__camera { object-fit: contain; transform: scaleX(-1); background: #020F1C; }
.fs__guide { display: grid; place-items: center; pointer-events: none; }
.fs__oval { width: min(52%, 220px); height: 68%; border: 2px dashed rgba(243, 228, 194, .55); border-radius: 48%; transition: border-color .2s, box-shadow .2s; }
.fs__guide.is-match .fs__oval { border: 2px solid var(--gold-400); box-shadow: 0 0 0 4px rgba(221, 182, 106, .18), 0 0 30px rgba(221, 182, 106, .35); }
.fs__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 12px;
  background: rgba(4, 26, 47, .88); border: 1px solid rgba(221, 182, 106, .4); color: #fff; font-size: .88rem; font-weight: 600; line-height: 1.35; text-align: center; }
.fs__badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; pointer-events: none;
  background: rgba(4, 26, 47, .72); border: 1px solid rgba(221, 182, 106, .35); color: var(--gold-200); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fs__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 8px var(--gold-400); }
.fs__stage.is-live .fs__badge i { background: #E5484D; box-shadow: 0 0 8px #E5484D; animation: fs-pulse 1.4s ease-in-out infinite; }
@keyframes fs-pulse { 50% { opacity: .35; } }
.fs__tools { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fs__stage.is-live .fs__tools { display: none; }
.fs__seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(4, 26, 47, .8); border: 1px solid rgba(221, 182, 106, .3); }
.fs__seg button, .fs__zoom button { font: inherit; cursor: pointer; border: 0; color: var(--on-dark); background: transparent; }
.fs__seg button { padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.fs__seg button[aria-pressed="true"] { background: var(--gold-400); color: var(--navy-950); }
.fs__zoom { display: inline-flex; gap: 4px; }
.fs__zoom button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(4, 26, 47, .8); border: 1px solid rgba(221, 182, 106, .3); font-size: 1.05rem; font-weight: 700; }
.fs__seg button:focus-visible, .fs__zoom button:focus-visible, .fs__secondary:focus-visible, .fs__tips summary:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.fs__seg button:disabled, .fs__zoom button:disabled { opacity: .45; cursor: default; }
.fs__ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fs__zoom .fs__ico { width: 16px; height: 16px; }

/* Steuerung, Fortschritt, CTA */
.fs__panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fs__phase { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.prose .fs .fs__step { font-family: var(--font-sans); font-weight: 800; font-size: 1.22rem; line-height: 1.3; color: #fff; margin-top: -6px; }
.fs__text { color: var(--on-dark-2); font-size: .95rem; line-height: 1.55; }
.prose .fs .fs__count { margin-bottom: 8px; font-size: .8rem; color: var(--on-dark-3); }
.fs__count span { color: var(--gold-300); font-weight: 800; }
.fs__poses { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fs__pose { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 12px; text-align: center; color: var(--on-dark-3);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); transition: border-color .2s, background-color .2s, color .2s; }
.fs__pose-icon { width: 26px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fs__pose-icon .fs-accent { stroke: var(--gold-400); }
.fs__pose-name { font-size: .74rem; font-weight: 800; color: var(--on-dark); }
.fs__pose-state { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.fs__pose.is-current { border-color: var(--gold-400); background: rgba(221, 182, 106, .12); color: var(--gold-200); }
.fs__pose.is-done { border-color: rgba(221, 182, 106, .45); background: rgba(221, 182, 106, .2); color: var(--gold-300); }
.fs__actions { display: grid; gap: 10px; }
.fs__actions .btn { --pad-y: 13px; }
.fs__actions .btn:disabled { cursor: default; opacity: .72; transform: none; box-shadow: none; }
.fs__actions .btn:disabled::after { display: none; }
.fs a.btn.btn--outline, .fs a.btn.btn--outline:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }
.fs a.btn.btn--outline:hover, .fs a.btn.btn--outline:focus-visible { background: rgba(255, 255, 255, .1); }
.fs__secondary { justify-self: center; padding: 4px 8px; font: inherit; font-size: .88rem; font-weight: 700; color: var(--on-dark-2); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fs__secondary:hover { color: #fff; }
.fs__consent { display: flex; gap: 8px; font-size: .8rem; line-height: 1.5; color: var(--on-dark-3); }
.fs__consent .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--gold-400); }
.fs__cta { display: grid; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid rgba(221, 182, 106, .5);
  background: linear-gradient(150deg, rgba(221, 182, 106, .2), rgba(221, 182, 106, .06)); }
.fs__cta:not([hidden]) { animation: fs-in .5s var(--ease) both; }
@keyframes fs-in { from { opacity: 0; transform: translateY(8px); } }
.fs__cta-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.fs__cta-title { font-family: var(--font-serif); font-size: 1.28rem; line-height: 1.25; color: #fff; }
.fs__cta-text { font-size: .9rem; line-height: 1.55; color: var(--on-dark-2); }
.fs__cta-fine { font-size: .74rem; color: var(--on-dark-3); text-align: center; }
.fs__tips { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .88rem; line-height: 1.5; color: var(--on-dark-2); }
.fs__tips summary { cursor: pointer; font-weight: 800; color: var(--gold-200); }
.prose .fs .fs__tips ul { display: grid; gap: 6px; margin-top: 8px; padding-left: 1.1em; }
.fs__note { display: flex; gap: 8px; align-items: flex-start; padding: 0 clamp(18px, 3vw, 28px) clamp(16px, 2.4vw, 22px); font-size: .78rem; line-height: 1.5; color: var(--on-dark-3); }
.fs__note .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--gold-400); }
/* Nach dem Scan: Fortschritt ausblenden, CTA direkt unter das Ergebnis (vor Download/Neustart) */
.fs[data-state="done"] .fs__progress { display: none; }
.fs[data-state="done"] .fs__cta { order: 1; }
.fs[data-state="done"] .fs__actions { order: 2; }
@media (prefers-reduced-motion: reduce) { .fs__cta:not([hidden]), .fs__stage.is-live .fs__badge i { animation: none; } }