/* Finanzkopf Komponenten, 1:1 aus dem Design System (components/bundle.css). Änderungen dort pflegen und hierher übernehmen. */
body { margin: 0; text-rendering: optimizeLegibility; font-family: var(--font-sans); font-size: 17px; line-height: 28px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.fk-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.fk-eyebrow { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kopf-text); margin: 0 0 var(--space-3); }
.fk-h1 { font-family: var(--font-display); font-size: 64px; line-height: 64px; font-weight: 600; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.fk-h2 { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.fk-h3 { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.fk-h4 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.fk-lead { font-size: 20px; line-height: 32px; color: var(--ink-muted); margin: var(--space-4) 0 0; max-width: 46ch; }
.fk-muted { color: var(--ink-muted); }
.fk-small { font-size: 15px; line-height: 24px; }
.fk-data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
a, .fk-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Button */
.fk-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 16px/20px var(--font-sans); padding: 14px 22px; border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.fk-btn:hover { border-color: var(--ink); }
.fk-btn-primary { background: var(--aktion); border-color: var(--aktion); color: var(--on-aktion); }
.fk-btn-primary:hover { background: var(--kopf-text); border-color: var(--kopf-text); }
.fk-btn-text { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--kopf-text); }
.fk-btn-text:hover { border-color: transparent; text-decoration: none; }
.fk-btn-text:hover .fk-btn-label { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fk-btn-sm { padding: 10px 16px; font-size: 15px; }
.fk-btn .fk-pfeil { transition: transform .15s; }
.fk-btn:hover .fk-pfeil { transform: translateX(3px); }
.fk-btn-auf-tief { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.fk-btn-auf-tief:hover { background: var(--gletscher); border-color: var(--gletscher); }

/* Header */
.fk-header { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--line); }
.fk-header img { height: 26px; display: block; }
.fk-nav { display: flex; gap: var(--space-5); margin-left: auto; }
.fk-nav a { font: 600 16px/20px var(--font-sans); color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.fk-nav a:hover, .fk-nav a[aria-current] { border-color: var(--kopf); }

/* Prioritäten-Leiter (Signatur) */
.fk-leiter { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; counter-reset: stufe; }
.fk-stufe { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-alt); counter-increment: stufe; }
.fk-stufe::before { content: counter(stufe); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--surface); color: var(--kopf-text); font: 500 15px/1 var(--font-mono); border: 1.5px solid var(--kopf); }
.fk-stufe b { display: block; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; }
.fk-stufe span { display: block; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.fk-stufe:nth-child(1) { margin-left: 0; }
.fk-stufe:nth-child(2) { margin-left: 12%; }
.fk-stufe:nth-child(3) { margin-left: 24%; }
.fk-stufe.ist-aktiv { background: var(--gletscher); }
.fk-stufe.ist-aktiv::before { background: var(--aktion); color: var(--on-aktion); border-color: var(--aktion); }
.fk-leiter-kompakt .fk-stufe { padding: var(--space-3) var(--space-4); }
.fk-leiter-kompakt .fk-stufe span { display: none; }

/* Hero */
.fk-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-7); align-items: center; padding: var(--space-8) var(--space-6); }
.fk-hero-bild { position: relative; }
.fk-hero-bild img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 38% 20%; border-radius: var(--radius-lg); display: block; }
.fk-hero-bild .fk-leiter { position: absolute; left: -48px; right: 24px; bottom: 24px; }
.fk-hero-bild .fk-stufe { background: var(--surface); box-shadow: var(--shadow-karte); }
.fk-hero-bild .fk-stufe.ist-aktiv { background: var(--gletscher); }
.fk-hero .fk-row { margin-top: var(--space-6); }
.fk-hero-meta { margin-top: var(--space-5); font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* Highlight-Banner */
.fk-banner { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--gletscher); }
.fk-banner .fk-badge { font: 500 13px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kopf-text); background: var(--surface); padding: 6px 10px; border-radius: var(--radius-pill); }
.fk-banner p { margin: 0; font-weight: 600; flex: 1; }

/* Karten */
.fk-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fk-karte { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: box-shadow .2s, border-color .2s; }
a.fk-karte:hover { box-shadow: var(--shadow-karte); border-color: transparent; }
.fk-karte p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.fk-karte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.fk-karte li { padding-left: 20px; position: relative; }
.fk-karte li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--kopf); }
.fk-karte .fk-mehr { margin-top: auto; font-weight: 600; color: var(--kopf-text); }
.fk-stufen-tag { align-self: flex-start; font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kopf-text); background: var(--gletscher); padding: 5px 10px; border-radius: var(--radius-pill); }

/* Preis */
.fk-preis .fk-zahl { font: 600 44px/48px var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.fk-preis .fk-mwst { align-self: flex-start; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tanne); background: var(--tanne-soft); padding: 4px 10px; border-radius: var(--radius-pill); }

/* Text-Bild */
.fk-textbild { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.fk-textbild.ist-gespiegelt .fk-textbild-medien { order: -1; }
.fk-textbild-medien { aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--surface-alt); overflow: hidden; }
.fk-textbild-medien img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-textbild p { margin: var(--space-4) 0 0; max-width: 52ch; }

/* Prozess */
.fk-prozess { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); list-style: none; padding: 0; margin: 0; counter-reset: schritt; position: relative; }
.fk-prozess::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: var(--line); }
.fk-schritt { position: relative; counter-increment: schritt; }
.fk-schritt::before { content: counter(schritt); position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--surface); border: 1.5px solid var(--kopf); color: var(--kopf-text); font: 500 15px/1 var(--font-mono); margin-bottom: var(--space-4); }
.fk-schritt:first-child::before { background: var(--aktion); border-color: var(--aktion); color: var(--on-aktion); }
.fk-schritt h4 { margin: 0 0 var(--space-2); }
.fk-schritt p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.fk-schritt .fk-data { display: inline-block; margin-top: var(--space-3); color: var(--tanne); }

/* Kennzahlen */
.fk-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding: var(--space-7) var(--space-6); background: var(--surface-tief); color: var(--tief-text); border-radius: var(--radius-lg); }
.fk-zahlen div { border-top: 2px solid var(--kopf); padding-top: var(--space-4); }
.fk-zahlen strong { display: block; white-space: nowrap; font: 600 52px/52px var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fk-zahlen span { display: block; margin-top: var(--space-2); font-size: 15px; line-height: 22px; color: var(--tief-muted); }

/* Testimonial */
.fk-stimme { margin: 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-alt); display: grid; gap: var(--space-5); }
.fk-stimme blockquote { margin: 0; font: 500 24px/34px var(--font-display); letter-spacing: -.01em; text-wrap: pretty; }
.fk-stimme figcaption { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 20px; }
.fk-stimme figcaption b { display: block; }
.fk-stimme figcaption span { color: var(--ink-muted); }
.fk-initial { width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--gletscher); color: var(--kopf-text); font: 600 16px/1 var(--font-sans); flex: none; }
img.fk-initial { object-fit: cover; display: block; }

/* FAQ */
.fk-faq { border-top: 1px solid var(--line); }
.fk-faq details { border-bottom: 1px solid var(--line); }
.fk-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) 0; font: 600 20px/28px var(--font-display); letter-spacing: -.01em; }
.fk-faq summary::-webkit-details-marker { display: none; }
.fk-faq summary::after { content: "+"; font: 400 28px/28px var(--font-sans); color: var(--kopf-text); transition: transform .2s; }
.fk-faq details[open] summary::after { transform: rotate(45deg); }
.fk-faq details p { margin: 0 0 var(--space-5); max-width: 68ch; color: var(--ink-muted); }

/* CTA-Band */
.fk-cta { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; padding: var(--space-7); border-radius: var(--radius-lg); background: var(--surface-tief); color: var(--tief-text); }
.fk-cta .fk-h3 { color: var(--tief-text); }
.fk-cta p { margin: var(--space-3) 0 0; color: var(--tief-muted); }
.fk-cta :focus-visible { outline-color: var(--tief-text); }

/* Formular */
.fk-form { display: grid; gap: var(--space-4); max-width: 520px; }
.fk-feld { display: grid; gap: var(--space-2); }
.fk-feld label, .fk-feld legend { font: 600 16px/20px var(--font-sans); }
.fk-feld input, .fk-feld textarea, .fk-feld select { font: 400 17px/24px var(--font-sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; }
.fk-feld textarea { min-height: 112px; resize: vertical; }
.fk-feld input:focus-visible, .fk-feld textarea:focus-visible, .fk-feld select:focus-visible { border-color: var(--fokus); outline: 2px solid var(--fokus); outline-offset: 1px; }
.fk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.fk-chips legend { margin-bottom: var(--space-2); }
.fk-chips label { font: 500 15px/20px var(--font-sans); padding: 8px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); cursor: pointer; }
.fk-chips input { position: absolute; opacity: 0; }
.fk-chips input:checked + span { color: var(--kopf-text); }
.fk-chips label:has(input:checked) { background: var(--gletscher); border-color: var(--kopf); }
.fk-chips label:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.fk-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.fk-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--aktion); flex: none; }
.fk-hinweis { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0; }

/* Artikel */
.fk-teaser { display: grid; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.fk-teaser-bild { aspect-ratio: 16/10; border-radius: var(--radius-md); background: var(--surface-alt); overflow: hidden; }
.fk-teaser-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.fk-teaser:hover img { transform: scale(1.03); }
.fk-teaser:hover .fk-h4 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.fk-teaser .fk-stufen-tag { justify-self: start; }
.fk-teaser .fk-meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.fk-artikelkopf { max-width: 760px; }
.fk-artikelkopf .fk-meta { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-5); font-size: 15px; line-height: 20px; color: var(--ink-muted); }
.fk-artikelkopf .fk-meta img { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; object-position: 38% 18%; }
.fk-artikelkopf .fk-meta b { color: var(--ink); }
.fk-autor { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-alt); max-width: 760px; }
.fk-autor img { width: 88px; height: 88px; border-radius: var(--radius-pill); object-fit: cover; object-position: 38% 18%; }
.fk-autor p { margin: var(--space-2) 0 var(--space-3); font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* Footer */
.fk-footer { background: var(--surface-tief); color: var(--tief-text); padding: var(--space-7) var(--space-6) var(--space-5); display: grid; gap: var(--space-6); }
.fk-footer-oben { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.fk-footer img { height: 26px; display: block; margin-bottom: var(--space-4); }
.fk-footer p { margin: 0; color: var(--tief-muted); font-size: 15px; line-height: 24px; }
.fk-footer h5 { margin: 0 0 var(--space-3); font: 500 13px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tief-muted); }
.fk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.fk-footer a { color: var(--tief-text); text-decoration: none; }
.fk-footer a:hover { text-decoration: underline; }
.fk-footer :focus-visible { outline-color: var(--tief-text); }
.fk-footer-unten { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; font-size: 14px; line-height: 20px; color: var(--tief-muted); }