/* ==========================================================================
   HYPOLOTSE — Designsystem
   --------------------------------------------------------------------------
   Haltung: moderne Bank. Weiß trägt die Seite, ein einziger Markenton führt,
   die Typografie macht die Arbeit.

   Bewegung gehört zum System: Elemente treten beim Scrollen auf, Zahlen
   zählen hoch, Flächen reagieren auf den Zeiger. Alle Animationen laufen
   über transform und opacity (kompositorfreundlich) und respektieren
   prefers-reduced-motion.

   Weiterhin bewusst NICHT enthalten: Rasterüberlagerungen, Glasmorphismus-
   Karten, Leuchteffekte, dekorative Trennstriche — die Handschrift
   generierter Seiten.

   Schrift: Schibsted Grotesk, selbst gehostet (SIL Open Font License 1.1).
   Kein Abruf von Google-Servern — das LG München hat die dynamische
   Einbindung von Google Fonts 2022 für DSGVO-widrig erklärt (3 O 17493/20).
   ========================================================================== */

/* --- 1. Schrift ---------------------------------------------------------- */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");
}

/* --- 2. Merkmale --------------------------------------------------------- */
:root {
  /* Ein Markenton. Grün, weil der gesamte Wettbewerb blau ist:
     Interhyp, Baufi24, Check24, ING, Commerzbank. Dr. Klein rot. */
  --brand:        #0F5C3F;
  --brand-hover:  #0B4630;
  --brand-deep:   #072E1F;
  --brand-tint:   #E9F2ED;
  --brand-tint-2: #CFE3D8;
  --brand-line:   #A9CDBB;
  --pop:          #17A46C;   /* hellerer Interaktionston des Markengrüns */
  --pop-2:        #2BD08E;

  /* Pastellflächen für Kartenreihen — Text bleibt immer Tinte */
  --tint-mint: #E4F3EB;
  --tint-sand: #FBF0E1;
  --tint-sky:  #E8F0FA;

  --paper:     #FFFFFF;
  --surface:   #F7F8F9;
  --surface-2: #F0F2F4;

  --line:        #E4E7EA;
  --line-strong: #CDD3D9;

  --ink:   #0E1114;
  --ink-2: #3F464E;
  --ink-3: #6A727C;
  --ink-4: #98A0A9;

  --warn:      #8A5406;
  --warn-tint: #FDF4E5;
  --warn-line: #EFD9AE;
  --err:       #B42318;
  --err-tint:  #FEF1F0;

  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1220px;
  --wrap-narrow: 740px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Verläufe: EIN Markenverlauf für Akzente, Aurora-Töne für Flächen.
     Immer aus der bestehenden Palette — nie fremde Hues. */
  --grad-brand: linear-gradient(115deg, var(--brand) 0%, var(--pop) 55%, var(--pop-2) 100%);
  --grad-line:  linear-gradient(115deg, var(--brand-line), var(--pop) 60%, var(--tint-sky));

  /* Schatten sehr sparsam — Struktur entsteht über Linien, nicht über Tiefe */
  --shadow-1: 0 1px 2px rgba(14,17,20,.05);
  --shadow-2: 0 4px 12px -2px rgba(14,17,20,.08), 0 1px 3px rgba(14,17,20,.04);
  --shadow-3: 0 20px 44px -12px rgba(14,17,20,.16), 0 2px 8px rgba(14,17,20,.05);
}

/* --- 3. Grundlagen ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6; letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: var(--brand-line); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--brand-tint-2); }

/* --- 4. Typografie ------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 .45em; color: var(--ink); font-weight: 600; line-height: 1.14; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.5rem + 3.3vw, 4rem); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -.028em; margin-top: 2em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); letter-spacing: -.018em; margin-top: 1.9em; }
h4 { font-size: 1.02rem; letter-spacing: -.012em; margin-top: 1.7em; }
p  { margin: 0 0 1.1em; }
strong, b { font-weight: 600; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.lead { font-size: clamp(1.09rem, 1rem + .5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); letter-spacing: -.014em; }
.hero h1 + .lead { margin-top: 1.1rem; }

/* Label statt Versalien-Overkill: kleiner Punkt, Markenfarbe, normale Schreibweise */
.label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 500; color: var(--brand);
  margin: 0 0 1rem; letter-spacing: -.004em;
}
.label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.label--light { color: #7FC4A2; }

/* Ziffern: bewusst OHNE tabular-nums. Schibsted Grotesk setzt Punkt und Komma
   darin auf volle Ziffernbreite — „314.864 €“ liest sich dann als „314 . 864 €“.
   Zahlenspalten richten sich am rechten Rand aus, das reicht für die Lesbarkeit.
   .num bleibt als Kennzeichnung im Markup erhalten (Auszeichnung, keine Wirkung). */
.muted { color: var(--ink-3); }
.text-sm { font-size: .9rem; }
.center { text-align: center; }
.mt-2 { margin-top: 1.1rem; } .mt-3 { margin-top: 2rem; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* --- 5. Raster ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(2.4rem, 1.6rem + 2.6vw, 4.2rem); }
/* Zwei gleichfarbige Abschnitte hintereinander wirken als eine große leere
   Fläche. Dann teilen sie sich das Polster statt es zu addieren. */
.section--white + .section--white, .section--paper + .section--paper {
  padding-top: clamp(1rem, .6rem + 1vw, 1.6rem);
}
.section--white + .section--white { border-top: 1px solid var(--line); }
.section--tight { padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.4rem); }
.section--paper { background: var(--surface); }
.section--white { background: var(--paper); }
.section--brand {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(23,164,108,.20), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(43,208,142,.10), transparent 50%),
    var(--brand-deep);
  color: #C9DDD3; position: relative; overflow: hidden; isolation: isolate;
}
.section--brand::before {
  content: ""; position: absolute; z-index: -1; width: 720px; height: 520px;
  right: -140px; top: -200px; border-radius: 50%; filter: blur(80px);
  background: radial-gradient(closest-side, rgba(43,208,142,.45), transparent 70%);
  pointer-events: none;
}
.section--brand::after {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 400px;
  left: -160px; bottom: -200px; border-radius: 50%; filter: blur(90px);
  background: radial-gradient(closest-side, rgba(23,164,108,.30), transparent 70%);
  pointer-events: none;
}
.motion-an .section--brand::before { animation: aurora-a 24s ease-in-out infinite alternate; }
.motion-an .section--brand::after  { animation: aurora-b 30s ease-in-out infinite alternate; }
.section--brand h2, .section--brand h3 { color: #fff; }
.section--brand p { color: #A9C7B9; }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 1rem + 3.5vw, 4rem); }
.grid-lotse { grid-template-columns: minmax(0, 1fr) minmax(0, 452px); gap: clamp(2rem, 1rem + 3vw, 3.6rem); align-items: start; }
@media (max-width: 980px) { .grid-lotse { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-sidebar { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } }

.section-head { max-width: 64ch; margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.section-head h2 { max-width: 26ch; }
.section-head .lead { max-width: 52ch; }
.section-head.center { max-width: 62ch; margin-inline: auto; text-align: center; }
.section-head.center h2, .section-head.center .lead { max-width: none; }
.section-head.center .label { justify-content: center; }
.section-head h2 { margin-top: 0; }

/* --- 6. Kopfzeile -------------------------------------------------------- */
.topbar { background: var(--paper); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 38px; }
.topbar ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.topbar a { color: var(--ink-3); text-decoration: none; }
.topbar a:hover { color: var(--ink); }
.topbar-badge { display: inline-flex; align-items: center; gap: .45rem; }
.topbar-badge svg { flex: none; color: var(--brand); }
@media (max-width: 820px) { .topbar { display: none; } }

.masthead { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.masthead > .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; transition: min-height .25s ease; }
.masthead.is-scrolled > .wrap { min-height: 56px; }
.masthead.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(14,17,20,.18); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 0; background: var(--grad-brand); transition: width .1s linear; }

/* Wortmarke: der Peilstrich sitzt über dem zweiten o */
.brand { display: inline-flex; align-items: baseline; text-decoration: none; flex: none; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.wordmark { font-size: 1.42rem; font-weight: 600; letter-spacing: -.042em; line-height: 1; white-space: nowrap; }
.wordmark .peil { position: relative; }
.wordmark .peil::after { content: ""; position: absolute; left: 5%; right: 5%; top: .17em; height: .085em; background: var(--grad-brand); border-radius: 1px; transition: left .22s ease, right .22s ease; }
.brand:hover .wordmark .peil::after { left: -4%; right: -4%; }
.brand--light { color: #fff; }
.brand--light .wordmark .peil::after { background: #6FBF98; }

.mainnav { margin-left: auto; }
.mainnav > ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.mainnav > ul > li { position: relative; }
.mainnav .navlink {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .72rem; border-radius: var(--r-sm); border: 0; background: none; cursor: pointer;
  font-size: .935rem; font-weight: 450; color: var(--ink-2); text-decoration: none; letter-spacing: -.01em;
}
.mainnav .navlink { position: relative; }
.mainnav .navlink::after {
  content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .3rem; height: 2px;
  background: var(--grad-brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.mainnav .navlink:hover::after, .mainnav .navlink[aria-expanded="true"]::after { transform: scaleX(1); }
.mainnav .navlink:hover, .mainnav .navlink[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.mainnav .caret { width: 10px; height: 10px; opacity: .45; transition: transform .16s ease; }
.mainnav .navlink[aria-expanded="true"] .caret { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 8px); left: -.4rem; min-width: 300px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-3); padding: .4rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.mainnav li:hover > .submenu, .mainnav li:focus-within > .submenu, .submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: block; padding: .55rem .7rem; border-radius: var(--r-sm); font-size: .93rem; font-weight: 450; color: var(--ink); text-decoration: none; }
.submenu a:hover { background: var(--brand-tint); }
.submenu .sub-desc { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 1px; font-weight: 400; }
@media (max-width: 1120px) { .mainnav { display: none; } }

.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .48rem .7rem; cursor: pointer; color: var(--ink); align-items: center; gap: .45rem; font-size: .9rem; font-weight: 500; }
@media (max-width: 1120px) { .nav-toggle { display: inline-flex; } }
@media (max-width: 700px) { .masthead .btn-primary.btn-sm { display: none; } }
.mobilenav { display: none; border-top: 1px solid var(--line); background: var(--paper); padding: .8rem 0 1.4rem; max-height: calc(100dvh - 68px); overflow-y: auto; }
.mobilenav.is-open { display: block; }
.mobilenav ul { list-style: none; margin: 0; padding: 0; }
.mobilenav > .wrap > ul > li { border-bottom: 1px solid var(--line); }
.mobilenav a:not(.btn) { display: block; padding: .8rem 0; color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 500; }
.mobilenav .btn { display: flex; width: 100%; margin-top: 1.2rem; }
.mobilenav .sub { padding: 0 0 .6rem .9rem; }
.mobilenav .sub a { padding: .42rem 0; font-size: .92rem; color: var(--ink-3); font-weight: 400; }

/* --- 7. Schaltflächen ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: .96rem; font-weight: 500; letter-spacing: -.012em; text-decoration: none; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  white-space: nowrap;
}
.btn svg { transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.btn { position: relative; overflow: hidden; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }
/* Lichtstreifen läuft beim Überfahren einmal durch die Fläche */
.btn-primary::after, .btn-dark::after, .btn-light::after {
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  transform: translateX(-130%); pointer-events: none;
}
.btn-light::after { background: linear-gradient(105deg, transparent 42%, rgba(15,92,63,.12) 50%, transparent 58%); }
.motion-an .btn-primary:hover::after, .motion-an .btn-dark:hover::after, .motion-an .btn-light:hover::after {
  transform: translateX(130%); transition: transform .55s ease;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color: #fff; box-shadow: 0 10px 24px -10px rgba(15,92,63,.5); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-ghost { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--surface); color: var(--ink); }
.btn-light { background: #fff; color: var(--brand-deep); }
.btn-light:hover { background: #EFF5F2; color: var(--brand-deep); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn-sm { padding: .48rem .95rem; font-size: .89rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* --- 8. Flächen ---------------------------------------------------------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.3rem, 1rem + .9vw, 1.9rem); }
.card--link {
  display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: border-color .18s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.card--link::after {
  content: "→"; position: absolute; right: 1.3rem; bottom: 1.05rem;
  font-size: 1.15rem; font-weight: 600; color: var(--brand);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
}
/* Spotlight: ein weicher Lichtkegel folgt dem Zeiger (Koordinaten setzt HL.motion) */
.motion-an .card--link::before, .motion-an .hebel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(23,164,108,.13), transparent 65%);
  transition: opacity .3s ease;
}
.motion-an .card--link:hover::before, .motion-an .hebel:hover::before { opacity: 1; }
.card--link > * { position: relative; z-index: 1; }
/* Verlaufsrand beim Überfahren: Kartenfläche innen, Markenverlauf auf der Kante */
.card--link:hover {
  border-color: transparent;
  background-image: linear-gradient(var(--paper), var(--paper)), var(--grad-line);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow-3); transform: translateY(-4px); text-decoration: none; color: inherit;
}
.cards-pop .card--link:hover { background-image: none; border-color: transparent; }
.card--link:hover::after { opacity: 1; transform: translateX(0); }
.card--link:hover h3 { color: var(--brand); }
.card--link { padding-bottom: 2.6rem; }
.card h3 { margin-top: 0; transition: color .15s ease; }
.card p:last-child { margin-bottom: 0; }
.card-index { display: block; font-size: .82rem; font-weight: 600; color: var(--brand); margin-bottom: 1.1rem; }
.card-kicker { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-4); margin-bottom: .55rem; }

.note { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 1.05rem 1.2rem; margin: 1.7rem 0; font-size: .95rem; color: var(--ink-2); }
.note--warn { background: var(--warn-tint); border-color: var(--warn-line); color: #5C3A06; }
.note--good { background: var(--brand-tint); border-color: var(--brand-line); color: #0B3F2C; }
.note--legal { background: var(--paper); color: var(--ink-3); font-size: .875rem; }
.note--tipp {
  background: linear-gradient(120deg, var(--tint-mint), var(--brand-tint));
  border-color: var(--brand-line); color: #0B3F2C; position: relative;
}
.note--tipp .note-title { color: var(--brand); }
.note--tipp .note-title::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-brand); margin-right: .45rem; vertical-align: 1px;
}
.note p:last-child { margin-bottom: 0; }
.note ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.note ul li { margin-bottom: .4rem; }
.note-title { display: block; font-weight: 600; margin-bottom: .3rem; color: inherit; }

/* Pastellkartenreihe: Farbe kommt aus der Fläche, nicht aus Dekor */
.cards-pop .card:nth-child(3n+1) { background: var(--tint-mint); border-color: transparent; }
.cards-pop .card:nth-child(3n+2) { background: var(--tint-sand); border-color: transparent; }
.cards-pop .card:nth-child(3n+3) { background: var(--tint-sky); border-color: transparent; }
.cards-pop .card--link:hover { border-color: transparent; }
.cards-pop .card-index { color: var(--ink); opacity: .45; }

/* --- 9. Tabellen --------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; margin: 1.7rem 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
table.data { width: 100%; min-width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data caption { text-align: left; padding: .95rem 1.15rem .35rem; font-size: .82rem; color: var(--ink-3); }
table.data th, table.data td { padding: .78rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--surface); color: var(--ink-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface); }
table.data td.n, table.data th.n { text-align: right; white-space: nowrap; }
table.data tfoot td { background: var(--surface); font-weight: 600; border-top: 1px solid var(--line-strong); }
@media (max-width: 620px) { table.data { font-size: .87rem; } table.data th, table.data td { padding: .62rem .8rem; } }

/* --- 10. Zinsleiste ------------------------------------------------------ */
.ratestrip { background: var(--paper); border-block: 1px solid var(--line); }
.ratestrip .wrap { display: flex; align-items: center; gap: 1.2rem 2rem; padding-block: 1.1rem; flex-wrap: wrap; }
.ratestrip-label { font-size: .82rem; color: var(--ink-3); flex: none; }
.ratestrip-items { display: flex; gap: 1.9rem; flex-wrap: wrap; margin: 0; margin-left: auto; }
.ratestrip-item { display: flex; flex-direction: column; gap: 1px; }
.ratestrip-item dt { font-size: .74rem; color: var(--ink-4); }
.ratestrip-item dd { margin: 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.ratestrip-stamp { flex-basis: 100%; font-size: .76rem; color: var(--ink-4); }
@media (max-width: 760px) { .ratestrip-items { margin-left: 0; gap: 1.2rem; } }

.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pop); margin-right: .45rem; position: relative; top: -1px; }
.is-live .live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--pop); opacity: 0; animation: puls 2.4s ease-out infinite;
}
@keyframes puls { 0% { transform: scale(.5); opacity: .7; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }
.live-tag {
  display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}
.ratestrip-item { position: relative; transition: transform .2s ease; padding-bottom: 3px; }
.ratestrip-item::after {
  content: ""; position: absolute; left: 0; right: 20%; bottom: 0; height: 2px;
  background: var(--grad-brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.ratestrip-item:hover { transform: translateY(-2px); }
.ratestrip-item:hover::after { transform: scaleX(1); }
.ratestrip-item:hover dd { color: var(--brand); }
.ratestrip-item dd { transition: color .2s ease; }

/* --- 11. Hero ------------------------------------------------------------ */
.hero { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; }
/* Aurora: zwei weiche Farbfelder aus der eigenen Palette, sehr langsam in
   Bewegung. Unter dem Inhalt, über dem Papier. */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.hero::before {
  width: 720px; height: 520px; right: -160px; top: -180px;
  background: radial-gradient(closest-side, var(--tint-mint), transparent 70%),
              radial-gradient(closest-side at 30% 70%, var(--tint-sky), transparent 70%);
  opacity: 1;
}
.hero::after {
  width: 560px; height: 420px; left: -180px; bottom: -220px;
  background: radial-gradient(closest-side, var(--tint-sand), transparent 70%);
  opacity: .8;
}
/* Hero mit Foto: warmes Bild hinter einem weißen Verlauf. Links bleibt der
   Text auf praktisch weißem Grund lesbar, rechts scheint die Szene durch;
   nach unten läuft das Bild weich in die Seite aus. */
.hero--foto { background: var(--paper); }

/* Zwei Ebenen: unten das Foto (filterbar), darüber der weiße Schleier.
   Getrennt, weil ein Filter auf dem Element auch den Text erfassen würde. */
.hero--foto::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  width: auto; height: auto; border-radius: 0; opacity: 1;
  background: url("/assets/img/hero-familie.jpg") 45% 34% / cover no-repeat;
  background-image: image-set(url("/assets/img/hero-familie-1536.webp") type("image/webp"),
                              url("/assets/img/hero-familie.jpg") type("image/jpeg"));
  /* Die Vorlage ist bewusst entsättigt fotografiert — hier wieder aufgedreht,
     damit Grün und Holz sichtbar werden. */
  filter: saturate(1.45) contrast(1.06) brightness(1.02);
  animation: none;
}
.hero--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  width: auto; height: auto; border-radius: 0; opacity: 1; filter: none;
  animation: none;
  background:
    linear-gradient(92deg, #FFFFFF 0%, rgba(255,255,255,.93) 24%, rgba(255,255,255,.44) 44%,
                    rgba(255,255,255,.06) 68%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 76%, rgba(255,255,255,.82) 94%, #FFFFFF 100%);
}
/* Auf dem Handy hinter dem Text unlesbar — deshalb dort ein echtes Bildband
   oben, darunter sauberes Weiß für Überschrift, Liste und Knopf. */
@media (max-width: 980px) {
  .hero--foto { padding-top: 0; }
  .hero--foto::before {
    inset: 0 0 auto; height: clamp(160px, 46vw, 240px);
    background-position: 50% 70%;
    filter: saturate(1.4) contrast(1.05);
  }
  .hero--foto::after {
    inset: 0 0 auto; height: calc(clamp(160px, 46vw, 240px) + 2px);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 58%,
                                rgba(255,255,255,.72) 84%, #FFFFFF 99%, #FFFFFF 100%);
  }
  .hero--foto .hero-grid { padding-top: clamp(160px, 46vw, 240px); }
}
.hero--foto .lotse { box-shadow: 0 30px 70px -18px rgba(15, 40, 30, .35); }

.motion-an .hero::before { animation: aurora-a 26s ease-in-out infinite alternate; }
.motion-an .hero::after  { animation: aurora-b 32s ease-in-out infinite alternate; }
@keyframes aurora-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-70px, 50px) scale(1.12); } }
@keyframes aurora-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -40px) scale(1.08); } }
.hero .wrap { position: relative; }
.hero-liste { margin: .8rem 0 0; }
.hero-liste li { padding-block: .16rem; font-size: .98rem; }
.hero-cta { margin-top: 1.1rem; }
.hero-micro { font-size: .84rem; color: var(--ink-3); margin: .55rem 0 0; }
.hero-privacy {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .84rem; color: var(--ink-3); margin: .7rem 0 0; max-width: 46ch;
  padding: .65rem .85rem; background: var(--tint-mint); border-radius: 8px;
}
.hero-privacy svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .12rem; color: var(--brand); }

/* Fokus-Modus: läuft der Dialog, bekommt er die Bühne ------------------- */
.hero-grid.lotse-fokus, .grid-lotse.lotse-fokus { grid-template-columns: minmax(0, 1fr); }
.hero-grid.lotse-fokus > div:not([data-lotse]),
.grid-lotse.lotse-fokus > div:not([data-lotse]) { display: none; }
.hero-grid.lotse-fokus > [data-lotse],
.grid-lotse.lotse-fokus > [data-lotse] { width: 100%; max-width: 760px; margin-inline: auto; }
.lotse-fokus .lotse-body { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.motion-an .lotse.lotse-auftritt { animation: lotse-buehne .45s cubic-bezier(.2,.7,.2,1); }
@keyframes lotse-buehne {
  from { transform: scale(.97) translateY(6px); opacity: .6; }
  to   { transform: none; opacity: 1; }
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 452px); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; padding-block: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); }
@media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { max-width: 22ch; }
.hero h1 .accent {
  background: linear-gradient(94deg, var(--brand) 10%, var(--pop) 55%, var(--pop-2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { max-width: 48ch; }

.hero-proof { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.2rem; margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.hero-proof-item strong { display: block; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); }
.hero-proof-item span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: .2rem; line-height: 1.35; }
@media (max-width: 560px) { .hero-proof { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.hero-trust { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.7rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .75rem;
  border-radius: var(--r-pill); font-size: .8rem; font-weight: 450;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, background .18s ease;
}
.chip:hover { transform: translateY(-2px); border-color: var(--brand-line); background: var(--brand-tint); }
.chip svg { width: 13px; height: 13px; color: var(--brand); flex: none; }

/* --- 12. Der Lotse ------------------------------------------------------- */
.lotse { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; position: relative; }
.hero .lotse { box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,255,255,.6), 0 30px 90px -30px rgba(15,92,63,.25); }
.lotse-head { padding: 1.15rem 1.5rem 0; }
.lotse-head-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lotse-title { font-size: .93rem; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -.015em; }
.lotse-step { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.lotse-progress { height: 2px; background: var(--line); border-radius: 2px; margin-top: 1rem; overflow: hidden; }
.lotse-progress i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--grad-brand); background-size: 220% 100%;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.motion-an .lotse-progress i { animation: schimmer 3.2s linear infinite; }
@keyframes schimmer { from { background-position: 0% 0; } to { background-position: -220% 0; } }
.lotse-body { padding: 1.5rem; }
.lotse-q { font-size: 1.32rem; font-weight: 600; color: var(--ink); margin: 0 0 .35rem; line-height: 1.22; letter-spacing: -.028em; }
.lotse-hint { font-size: .89rem; color: var(--ink-3); margin: 0 0 1.25rem; line-height: 1.5; }
.lotse-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding-top: 1.05rem; border-top: 1px solid var(--line); }
.lotse-back { background: none; border: 0; color: var(--ink-3); font-size: .88rem; cursor: pointer; padding: .35rem 0; display: inline-flex; align-items: center; gap: .35rem; }
.lotse-back:hover { color: var(--ink); }
.lotse-secure { font-size: .76rem; color: var(--ink-4); display: inline-flex; align-items: center; gap: .35rem; }
.lotse-secure svg { width: 12px; height: 12px; color: var(--brand); flex: none; }

.opt-list { display: grid; gap: .5rem; }
.opt {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  padding: .88rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.opt:hover { border-color: var(--brand-line); background: var(--surface); transform: translateX(4px); }
.opt:active { transform: translateX(4px) scale(.985); }
.opt[aria-pressed="true"], .opt.is-selected { border-color: var(--brand); background: var(--brand-tint); }
.opt-ico { width: 32px; height: 32px; flex: none; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; }
.opt-ico svg { width: 17px; height: 17px; }
.opt-ico { transition: background .15s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }
.opt:hover .opt-ico { background: #E7EAED; transform: scale(1.08) rotate(-3deg); }
.opt[aria-pressed="true"] .opt-ico, .opt.is-selected .opt-ico { background: var(--brand); color: #fff; }
.opt-txt strong { display: block; font-size: .95rem; font-weight: 550; color: var(--ink); line-height: 1.3; letter-spacing: -.014em; }
.opt-txt span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 1px; line-height: 1.4; }
.opt-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 560px) { .opt-grid-2 { grid-template-columns: minmax(0,1fr); } }

/* Eingabefelder */
.field { margin-bottom: 1rem; }
.field label, .lbl { display: block; font-size: .87rem; font-weight: 500; color: var(--ink-2); margin-bottom: .35rem; letter-spacing: -.008em; }
.field .help { font-size: .79rem; color: var(--ink-4); margin-top: .32rem; line-height: 1.45; }
.input, select.input, textarea.input {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); font-size: .98rem; color: var(--ink);
  transition: border-color .13s ease, box-shadow .13s ease;
}
.input:hover { border-color: var(--ink-4); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-tint); }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A727C' stroke-width='2'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 15px; padding-right: 2.2rem;
}
.input-euro, .input-pct { position: relative; }
.input-euro .input, .input-pct .input { padding-right: 2.1rem; }
.input-euro::after { content: "€"; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
.input-pct::after { content: "%"; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: minmax(0,1fr); } }
.err { color: var(--err); font-size: .82rem; margin-top: .3rem; display: none; }
.err.is-shown { display: block; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Schieberegler */
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; }
.range-val { font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -.025em; }
input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; margin: .4rem 0 .15rem; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand) 0 var(--p, 50%), var(--line) var(--p, 50%));
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--line); border-radius: 3px; }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--brand); border-radius: 3px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; margin-top: -7px; box-shadow: 0 1px 4px rgba(14,17,20,.22), 0 0 0 0 rgba(23,164,108,.25); transition: box-shadow .2s ease, transform .15s ease; }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 1px 4px rgba(14,17,20,.22), 0 0 0 7px rgba(23,164,108,.14); }
input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(14,17,20,.22), 0 0 0 10px rgba(23,164,108,.18); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(14,17,20,.22); }
.range-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--ink-4); }

/* Einwilligungen */
.consent { display: flex; gap: .65rem; align-items: flex-start; padding: .85rem .95rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: .6rem; }
.consent input[type="checkbox"] { margin-top: .2rem; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.consent label { font-size: .82rem; line-height: 1.5; color: var(--ink-2); margin: 0; font-weight: 400; }
.consent--required { background: var(--brand-tint); border-color: var(--brand-line); }

/* Ergebnis */
.result-hero { background: var(--brand-deep); color: #fff; padding: 1.6rem 1.5rem; position: relative; overflow: hidden; }
.result-hero::before {
  content: ""; position: absolute; width: 360px; height: 260px; right: -100px; top: -120px;
  border-radius: 50%; filter: blur(56px); pointer-events: none;
  background: radial-gradient(closest-side, rgba(43,208,142,.28), transparent 70%);
}
.result-hero > * { position: relative; }
.result-hero .label { color: #7FC4A2; margin-bottom: .7rem; }
.result-big { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: #fff; margin: 0; }
.result-sub { font-size: .86rem; color: #9FC2B2; margin: .5rem 0 0; line-height: 1.45; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.kpi { padding: 1rem .9rem; text-align: center; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi dt { font-size: .74rem; color: var(--ink-4); margin-bottom: .2rem; }
.kpi dd { margin: 0; font-size: 1.18rem; font-weight: 600; color: var(--ink); letter-spacing: -.03em; }
@media (max-width: 520px) { .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } .kpi:nth-child(2) { border-right: 0; } .kpi:nth-child(3) { grid-column: 1/-1; border-top: 1px solid var(--line); } }

.match-list { display: grid; gap: .5rem; }
.match { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.match-rank { font-size: .88rem; font-weight: 600; color: var(--brand); flex: none; width: 1.3rem; }
.match strong { display: block; font-size: .93rem; font-weight: 550; color: var(--ink); letter-spacing: -.012em; }
.match span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 1px; }

/* --- 13. Prozessschritte ------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.6rem; counter-reset: step; padding: 0; margin: 0; }
.steps > li { list-style: none; padding-top: 1.4rem; border-top: 2px solid var(--ink); position: relative; }
.steps > li:nth-child(n+2) { border-top-color: var(--line); }
.steps > li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-size: .8rem; font-weight: 600; color: var(--brand); margin-bottom: .6rem; }
.steps h3 { font-size: 1.05rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.steps p { font-size: .9rem; color: var(--ink-3); margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0,1fr); } }

/* --- 14. Fließtext ------------------------------------------------------- */
.prose { font-size: 1.05rem; color: var(--ink-2); }
.prose h2, .prose h3, .prose h4, .prose strong { color: var(--ink); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose ul li::marker { color: var(--ink-4); }
.prose ol li::marker { color: var(--brand); font-weight: 600; }
.checklist { list-style: none; padding: 0 !important; }
.checklist li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .46em; width: 10px; height: 5px; border-left: 1.8px solid var(--brand); border-bottom: 1.8px solid var(--brand); transform: rotate(-45deg); }

.toc { border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.3rem; margin-bottom: 2.2rem; background: var(--surface); }
.toc-title { font-size: .8rem; font-weight: 500; color: var(--ink-3); margin-bottom: .6rem; }
.toc ol { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.toc li { margin-bottom: .28rem; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative; font-size: 1.04rem; font-weight: 550; color: var(--ink); letter-spacing: -.018em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: .4rem; top: 1.42rem; width: 8px; height: 8px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg); transition: transform .16s ease; }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item[open] summary { color: var(--brand); }
.faq-item .faq-a { padding: 0 0 1.2rem; color: var(--ink-2); font-size: .98rem; }
.faq-item .faq-a > :last-child { margin-bottom: 0; }

.author-box { display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--r); margin: 2.5rem 0; background: var(--surface); }
.author-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.author-box strong { display: block; font-size: .96rem; color: var(--ink); }
.author-box .role { font-size: .82rem; color: var(--ink-3); margin-bottom: .5rem; }
.author-box p { font-size: .87rem; color: var(--ink-3); margin: 0; }
.meta-line { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; font-size: .82rem; color: var(--ink-4); margin-bottom: 1.8rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }

.breadcrumb { font-size: .82rem; color: var(--ink-4); padding-block: .95rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: .4rem; color: var(--ink-4); opacity: .6; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.page-head { padding-block: clamp(1.6rem, 1rem + 2.5vw, 3.2rem) clamp(1.4rem, 1rem + 2vw, 2.4rem); border-bottom: 1px solid var(--line); background: var(--paper); }
.page-head h1 { max-width: 22ch; }
.page-head .lead { max-width: 56ch; }

.sidebar { position: sticky; top: 92px; align-self: start; }
.sidebar-card { background: var(--brand-deep); color: #B7D3C6; border-radius: var(--r); padding: 1.4rem; margin-bottom: 1rem; }
.sidebar-card h3 { color: #fff; font-size: 1.06rem; margin: 0 0 .5rem; letter-spacing: -.022em; }
.sidebar-card p { font-size: .87rem; color: #9FC2B2; }
.sidebar-links { border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.sidebar-links h4 { margin: 0 0 .5rem; font-size: .8rem; font-weight: 500; color: var(--ink-4); }
.sidebar-links ul { list-style: none; margin: 0; padding: 0; }
.sidebar-links li { border-top: 1px solid var(--line); }
.sidebar-links li:first-child { border-top: 0; }
.sidebar-links a { display: block; padding: .55rem 0; font-size: .91rem; text-decoration: none; color: var(--ink-2); }
.sidebar-links a:hover { color: var(--brand); }
@media (max-width: 900px) { .sidebar { position: static; } }

/* --- 15. Fußzeile -------------------------------------------------------- */
.pangv { background: var(--surface); border-top: 1px solid var(--line); padding-block: 1.5rem; font-size: .8rem; color: var(--ink-3); line-height: 1.6; }
.pangv strong { color: var(--ink-2); font-weight: 550; }
.pangv-title { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-4); margin-bottom: .45rem; }

.site-footer { background: var(--ink); color: #939BA4; padding-block: clamp(2.6rem, 2rem + 2vw, 4rem) 1.8rem; font-size: .89rem; border-top: 2px solid transparent; background-clip: padding-box; position: relative; }
.site-footer::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--grad-brand); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
.site-footer h4 { color: #fff; font-size: .82rem; font-weight: 550; margin: 0 0 .85rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .48rem; }
.site-footer a { color: #939BA4; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-brand .wordmark { color: #fff; }
.footer-reg { border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: .9rem 1rem; margin-top: 1.2rem; font-size: .78rem; line-height: 1.55; }
.footer-reg strong { color: #D5DAE0; font-weight: 500; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: space-between; padding-top: 1.4rem; font-size: .79rem; color: #6E767F; }

/* --- 16. Einwilligungsbanner -------------------------------------------- */
.cc { position: fixed; inset: auto 0 0 0; z-index: 200; background: var(--paper); border-top: 1px solid var(--line-strong); box-shadow: 0 -10px 40px rgba(14,17,20,.12); padding: 1.4rem 0; }
.cc[hidden] { display: none; }
.cc-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: center; }
.cc h3 { margin: 0 0 .3rem; font-size: 1.05rem; letter-spacing: -.02em; }
.cc p { margin: 0; font-size: .87rem; color: var(--ink-3); }
.cc-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.cc-detail { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; grid-column: 1 / -1; }
.cc-purpose { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.cc-purpose input { margin-top: .18rem; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.cc-purpose label { font-size: .85rem; color: var(--ink-3); }
.cc-purpose label b { display: block; color: var(--ink); font-weight: 550; }
.cc-more { background: none; border: 0; color: var(--ink-3); font-size: .84rem; text-decoration: underline; cursor: pointer; padding: 0; margin-top: .6rem; }
.cc-more:hover { color: var(--ink); }
@media (max-width: 780px) { .cc-inner { grid-template-columns: minmax(0,1fr); } .cc-actions .btn { flex: 1; } }

/* --- 15b. Hebelkarten und Diagramme -------------------------------------- */
/* Hebel: eine Empfehlung, deren Kernzahl aus dem Rechenmodell kommt. */
.hebel-liste { display: grid; gap: .9rem; }
.hebel {
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.15rem 1.25rem;
  background: var(--paper); transition: border-color .18s ease, box-shadow .2s ease, transform .2s ease;
  position: relative; overflow: hidden;
}
.hebel > * { position: relative; z-index: 1; }
.hebel:hover { transform: translateY(-2px); }
.hebel:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.hebel:first-child { border-color: var(--brand-line); background: var(--brand-tint); }
.hebel-kopf { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; margin-bottom: .7rem; }
.hebel-kopf h4 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink-3); text-align: right; letter-spacing: -.012em; }
.hebel-zahl strong { display: block; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; color: var(--brand); }
.hebel-zahl span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .2rem; }
.hebel-aktion { font-size: .93rem; color: var(--ink-2); margin: 0 0 .8rem; line-height: 1.5; }
.hebel-details { margin: 0 0 .7rem; display: grid; gap: 0; }
.hebel-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.hebel:first-child .hebel-zeile { border-top-color: var(--brand-line); }
.hebel-zeile dt { color: var(--ink-3); margin: 0; }
.hebel-zeile dd { margin: 0; color: var(--ink); text-align: right; }
.hebel-hinweis { font-size: .82rem; color: var(--ink-2); margin: .7rem 0 0; padding: .6rem .75rem; background: var(--surface); border-radius: var(--r-sm); line-height: 1.5; }
.hebel:first-child .hebel-hinweis { background: rgba(255,255,255,.66); }
.hebel-grundlage { font-size: .79rem; color: var(--ink-4); margin: .6rem 0 0; line-height: 1.5; }
.tag { display: inline-block; padding: .05rem .42rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .66rem; font-weight: 600; vertical-align: 1px; }
table.data tr.is-aktuell td { background: var(--surface-2); font-weight: 550; }
table.data tr.is-beste td { background: var(--brand-tint); font-weight: 550; }
table.data tr.is-warn td { background: var(--warn-tint); }
.tag--best { background: var(--brand); }

/* Diagramme */
.chart { position: relative; margin: 1.2rem 0 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center; font-size: .82rem; color: var(--ink-3); margin-bottom: .5rem; }
.chart-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .4rem; vertical-align: 0; }
.chart-achse { margin-left: auto; color: var(--ink-4); font-size: .76rem; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: var(--r-sm);
  padding: .5rem .7rem; font-size: .8rem; line-height: 1.45; white-space: nowrap;
  box-shadow: var(--shadow-2);
}
.chart-tip strong { display: block; color: #fff; font-weight: 600; margin-bottom: .2rem; }
.chart-tip span { display: block; color: #D5DAE0; }
.chart-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .35rem; }
.chart-quelle { font-size: .78rem; color: var(--ink-4); margin: .6rem 0 0; }

/* Teilen-Schaltfläche der Rechner */
.rechner-fuss { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-top: 1.1rem; }
.teilen-ok { font-size: .84rem; color: var(--brand); }

/* --- 16b. Bewegung -------------------------------------------------------- */
.motion-an [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1) var(--rd, 0ms),
              transform .6s cubic-bezier(.2,.7,.3,1) var(--rd, 0ms);
}
.motion-an [data-reveal].is-in { opacity: 1; transform: none; }
/* Auftretende Karten dürfen zusätzlich auf Hover reagieren — transform
   kombiniert sich nicht, daher Hover erst nach dem Auftritt aktivieren */
.motion-an .card--link[data-reveal]:not(.is-in):hover { transform: translateY(22px); }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.motion-an .hero h1                { animation: rise .7s cubic-bezier(.2,.7,.3,1) both; }
.motion-an .hero .label            { animation: rise .6s cubic-bezier(.2,.7,.3,1) both; }
.motion-an .hero .lead             { animation: rise .7s cubic-bezier(.2,.7,.3,1) .12s both; }
.motion-an .hero .hero-trust       { animation: rise .7s cubic-bezier(.2,.7,.3,1) .22s both; }
.motion-an .hero .hero-proof       { animation: rise .7s cubic-bezier(.2,.7,.3,1) .32s both; }
.motion-an .hero .lotse            { animation: rise .8s cubic-bezier(.2,.7,.3,1) .18s both; }

/* --- 17. Hilfsklassen ---------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: .8rem 1.2rem; }
.skip-link:focus { left: 0; }
[hidden] { display: none !important; }

.error-page { text-align: center; padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.error-code { font-size: clamp(3.5rem, 2rem + 8vw, 7rem); font-weight: 600; letter-spacing: -.05em; color: var(--brand); line-height: 1; margin: 0 0 .6rem; }

@media print {
  .masthead, .topbar, .site-footer, .cc, .ratestrip, .btn, .sidebar { display: none !important; }
  body { font-size: 11pt; }
  .grid-sidebar { grid-template-columns: 1fr; }
}

/* == Ergebnis-Report zum Mitnehmen ====================================== */
.report-overlay {
  position: fixed; inset: 0; z-index: 300; overflow-y: auto;
  background: var(--paper); padding-bottom: 4rem;
}
html.report-offen { overflow: hidden; }
.report-leiste {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem clamp(1rem, 4vw, 2rem); background: var(--paper);
  border-bottom: 1px solid var(--line); font-weight: 600;
}
.report-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; }
.report-blatt {
  max-width: 820px; margin: 1.6rem auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: clamp(1.4rem, 1rem + 2.5vw, 3rem);
  box-shadow: 0 18px 50px -22px rgba(15, 40, 30, .18);
}
.rp { font-size: .94rem; color: var(--ink-2); line-height: 1.55; }
.rp-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem;
  flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 2px solid var(--brand); margin-bottom: 1.6rem; }
.rp-marke { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); margin: 0; }
.rp-sub { margin: .2rem 0 0; color: var(--ink-3); font-size: .88rem; }
.rp-hinweis { margin: 0; font-size: .78rem; color: var(--ink-4); max-width: 26ch; text-align: right; }
.rp-block { margin-bottom: 1.9rem; }
.rp-block h2 { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 0 0 .7rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line); letter-spacing: -.01em; }
.rp-block h3 { font-size: .95rem; font-weight: 600; color: var(--ink); margin: 1rem 0 .35rem; }
.rp-liste { margin: 0; }
.rp-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0;
  border-bottom: 1px dotted var(--line); }
.rp-zeile dt { color: var(--ink-3); }
.rp-zeile dd { margin: 0; text-align: right; font-variant-numeric: lining-nums; }
.rp-gross { font-size: 1.5rem; font-weight: 600; color: var(--brand); margin: 0 0 .7rem; letter-spacing: -.03em; }
.rp-tab { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rp-tab th, .rp-tab td { text-align: left; padding: .42rem .5rem; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.rp-tab th { font-weight: 600; color: var(--ink); background: var(--surface); }
.rp-klein { font-size: .8rem; color: var(--ink-4); }
.rp-warn { font-size: .84rem; background: var(--warn-tint); border-left: 3px solid var(--warn-line);
  padding: .55rem .8rem; margin: .6rem 0 0; color: #5C3A06; }
.rp-ul, .rp-num { margin: .3rem 0 0; padding-left: 1.2rem; }
.rp-ul li, .rp-num li { margin-bottom: .45rem; }
.rp-check { list-style: none; margin: .3rem 0 0; padding: 0; }
.rp-check li { padding-left: 1.5rem; position: relative; margin-bottom: .3rem; }
.rp-check li::before { content: ""; position: absolute; left: 0; top: .28rem; width: 11px; height: 11px;
  border: 1px solid var(--ink-4); border-radius: 2px; }
.rp-fuss { margin-top: 2rem; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--ink-4); }
.rp-fuss p { margin: 0 0 .4rem; }

@media print {
  body > *:not(.report-overlay) { display: none !important; }
  .report-overlay { position: static; overflow: visible; background: #fff; padding: 0; }
  .report-leiste { display: none !important; }
  .report-blatt { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .rp { font-size: 10.5pt; color: #000; }
  .rp-block { page-break-inside: avoid; }
  .rp-break { page-break-before: always; }
  .rp-tab { page-break-inside: auto; }
  a { color: #000; text-decoration: none; }
}

/* == Begrüßung beim ersten Laden ========================================= */
/* Einmal pro Sitzung, kurz, und rein visuell: Der Vorhang fängt keine Klicks
   ab (pointer-events: none), damit er niemanden aufhält und die Seite auch
   während der Einblendung bedienbar bleibt. Er wird per JavaScript eingefügt,
   steht also nicht im ausgelieferten HTML — kein Einfluss auf Ladewertung,
   Indexierung oder Layoutverschiebung. */
.vorhang {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  display: grid; place-items: center; text-align: center;
  background: var(--paper);
  animation: vorhang-weg .5s cubic-bezier(.4,0,.2,1) 1.05s forwards;
}
.vorhang::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 70% 30%, var(--tint-mint), transparent 70%),
    radial-gradient(closest-side at 20% 80%, var(--tint-sand), transparent 70%);
  opacity: .85;
}
.vorhang-inhalt { position: relative; }
.vorhang .wortmarke {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem); font-weight: 600;
  letter-spacing: -.045em; color: var(--ink); margin: 0;
  animation: vorhang-auf .6s cubic-bezier(.2,.7,.2,1) both;
}
.vorhang .wortmarke .peil { position: relative; }
.vorhang .wortmarke .peil::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: -.18em; height: 2px;
  border-radius: 2px; background: var(--grad-brand);
  transform-origin: left center;
  animation: vorhang-strich .7s cubic-bezier(.2,.7,.2,1) .12s both;
}
.vorhang p {
  margin: .5rem 0 0; color: var(--ink-3); font-size: clamp(.92rem, .86rem + .3vw, 1.05rem);
  animation: vorhang-auf .6s cubic-bezier(.2,.7,.2,1) .1s both;
}
@keyframes vorhang-auf { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes vorhang-strich { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes vorhang-weg { to { opacity: 0; visibility: hidden; } }

/* Wer Bewegung reduziert haben will, bekommt keinen Vorhang. */
.motion-aus .vorhang { display: none; }
@media print { .vorhang { display: none !important; } }

/* == Antwortblock ========================================================
   Steht ganz oben auf Seiten mit einer klaren Suchfrage. Optisch ruhig, aber
   abgesetzt: Er ist das, was Suchmaschinen und Antwortmaschinen entnehmen. */
.antwort {
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.8rem;
}
.antwort-frage {
  font-weight: 600; color: var(--brand-deep); font-size: .95rem;
  margin: 0 0 .45rem; letter-spacing: -.01em;
}
.antwort-text > :first-child { margin-top: 0; }
.antwort-text > :last-child { margin-bottom: 0; }
.antwort-text p { font-size: 1rem; color: var(--ink-2); margin: 0 0 .5rem; }
.antwort-quelle { font-size: .8rem; color: var(--ink-3); margin: .6rem 0 0; }

/* == Redaktionsprofil ==================================================== */
.redaktion-kopf {
  display: flex; gap: 1.4rem; align-items: flex-start;
  padding: 1.5rem; margin: 0 0 2rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.redaktion-avatar {
  width: 72px; height: 72px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em;
}
.redaktion-kopf h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.redaktion-rolle { font-size: .87rem; color: var(--ink-3); margin: 0 0 .9rem; }
.redaktion-kopf p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
  .redaktion-kopf { flex-direction: column; gap: 1rem; }
}

ol.schritte { margin: 1rem 0 1.6rem; padding-left: 1.2rem; }
ol.schritte li { margin-bottom: .55rem; }

pre.code {
  background: var(--brand-deep); color: #D8E8E0;
  padding: 1rem 1.15rem; border-radius: var(--r);
  overflow-x: auto; font-size: .82rem; line-height: 1.55;
  margin: 1rem 0 1.6rem;
}
pre.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.einbett-vorschau {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.2rem; margin: 1rem 0 1.8rem;
}

/* == Einbettbares Widget =================================================
   Läuft im iframe fremder Seiten — deshalb eigenständig und ohne Annahmen
   über die Umgebung. */
body.nackt { background: transparent; margin: 0; }
body.nackt main { padding: 0; }
.wg { padding: 2px; }
.wg-box {
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 1.15rem 1.25rem; background: #fff; max-width: 640px;
}
.wg-titel {
  font-weight: 600; font-size: 1.05rem; color: var(--ink);
  margin: 0 0 1rem; letter-spacing: -.015em;
}
.wg-feld { margin-bottom: .85rem; }
.wg-feld label {
  display: block; font-size: .84rem; color: var(--ink-2);
  margin-bottom: .3rem; font-weight: 500;
}
.wg-hint { font-weight: 400; color: var(--ink-3); }
.wg-eingabe { display: flex; align-items: stretch; }
.wg-eingabe input {
  flex: 1; min-width: 0; font: inherit; font-size: .98rem;
  padding: .55rem .7rem; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm) 0 0 var(--r-sm); background: #fff; color: var(--ink);
}
.wg-eingabe span {
  display: grid; place-items: center; padding: 0 .8rem;
  border: 1px solid var(--line-strong); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface); color: var(--ink-3); font-size: .9rem;
}
.wg-feld select {
  width: 100%; font: inherit; font-size: .98rem; padding: .55rem .7rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: #fff; color: var(--ink);
}
.wg-eingabe input:focus-visible, .wg-feld select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
.wg-erg { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.wg-zeile {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem 0; font-size: .92rem; color: var(--ink-2);
}
.wg-zeile--gross { font-size: 1.05rem; color: var(--ink); }
.wg-zeile--gross strong { font-size: 1.25rem; color: var(--brand); letter-spacing: -.02em; }
.wg-zeile--gut { color: var(--brand); }
.wg-zeile--summe {
  border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .55rem;
  color: var(--ink);
}
.wg-merk { font-size: .8rem; color: var(--ink-3); margin: .75rem 0 0; }
.wg-leer { font-size: .9rem; color: var(--ink-3); margin: 0; }
.wg-fuss {
  font-size: .74rem; color: var(--ink-4); margin: .9rem 0 0;
  border-top: 1px solid var(--line); padding-top: .6rem;
}
.wg-fuss a { color: var(--ink-3); }

/* Lange Code-Schnipsel (Einbettcode, Zitierbaustein) dürfen auf schmalen
   Geräten nicht die ganze Seite breiter machen. */
code { overflow-wrap: anywhere; word-break: break-word; }
.note code { display: inline-block; max-width: 100%; }