/* ===================================================================
   FINANCEKLAR – Designsprache "Kontobuch"
   Angelegt 2026-08-06. Laedt NACH style.css und ueberschreibt dort,
   wo die alte Fintech-Optik sass (Indigo-Verlauf auf kaltem Weiss,
   weiche Schatten, Pill-Gradient-Buttons).

   Idee: Financeklar ist Buchhaltung. Das eigenstaendigste Revier dafuer
   ist das Kontobuch, nicht das Dashboard. Warmes Papier statt kaltem
   Weiss, Haarlinien als Rasterprinzip, Tabellenziffern in Monospace,
   Buchhalter-Rot fuer Streichpreise und Minusbetraege. Indigo bleibt
   Markenanker (Abgrenzung zu Lohnklar Blau, HRklar Teal, RK Amber),
   wird aber punktuell gesetzt statt flaechig verlaufen.

   Reihenfolge in includes/head.php:
     1. style.css        (Struktur, Layout, Altbestand)
     2. design-2026.css  (Tokens, Typo, Oberflaeche)
   =================================================================== */

/* -------------------------------------------------------------
   1. SCHRIFTEN – lokal, kein Google-CDN (DSGVO)
   ------------------------------------------------------------- */
@font-face {
    font-family: 'Grotesk';
    src: url('/fonts/SpaceGrotesk-var.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Sans';
    src: url('/fonts/IBMPlexSans-var.woff2') format('woff2-variations');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('/fonts/IBMPlexMono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('/fonts/IBMPlexMono-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------
   2. TOKENS
   Die alten Variablennamen werden mit umgehaengt, damit der
   Altbestand in style.css die neue Palette erbt, statt dass
   3.900 Zeilen einzeln angefasst werden muessen.
   ------------------------------------------------------------- */
:root {
    /* Papier und Tinte */
    --paper:        #f4f3f0;
    --paper-deep:   #e9e7e2;
    --paper-card:   #fdfdfc;
    --ink:          #14140f;
    --ink-soft:     #46453f;
    --ink-mute:     #63625a;
    --rule:         #dcdad4;
    --rule-strong:  #b8b5ac;

    /* Marke */
    --indigo:       #4338ca;
    --indigo-deep:  #2e257f;
    --indigo-wash:  #e6e3f7;

    /* Buchhalter-Rot: Streichpreise, Minusbetraege, Fristen */
    --ledger-red:   #ad3620;

    /* Altbestand umgehaengt */
    --primary:       var(--indigo);
    --primary-dark:  var(--indigo-deep);
    --primary-light: var(--indigo-wash);
    --violet:        #6f66d8;
    --dark:          var(--ink);
    --slate:         #23201a;
    --text:          var(--ink);
    --body:          var(--ink-soft);
    --subtle:        var(--ink-mute);
    --muted:         #9a9080;
    --bg-light:      var(--paper-deep);
    --bg-violet:     var(--indigo-wash);
    --border:        var(--rule);
    --white:         var(--paper-card);
    --gold:          #a8712a;

    /* Typo */
    --font-display: 'Grotesk', 'Plex Sans', -apple-system, sans-serif;
    --font-body:    'Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* -------------------------------------------------------------
   3. GRUNDFLAECHE
   ------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Papierkorn. Sehr schwach, aber es nimmt der Flaeche das Digitale. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* -------------------------------------------------------------
   4. TYPOGRAFIE
   Display: Newsreader, eng gesetzt, gross. Fliesstext: Plex Sans.
   Zahlen und Labels: Plex Mono mit Tabellenziffern.
   ------------------------------------------------------------- */
h1, h2, h3, .fk-hero h1, .fk-section-title, .fk-pv-title, .fk-th-title,
.preis-hero h1, .preis-section-title {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
}
h1, .fk-hero h1, .preis-hero h1 {
    font-size: clamp(2.9rem, 6.4vw, 5.4rem);
    letter-spacing: -0.032em;
}
h2, .fk-section-title, .fk-pv-title, .fk-th-title, .preis-section-title {
    font-size: clamp(2rem, 4vw, 3.1rem);
}
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.012em; }

/* Betonung im Display. Frueher eine Serifenkursive, die den ganzen
   Auftritt nach Zeitschrift aussehen liess. Jetzt Indigo mit einer
   Unterstreichung, die beim Laden einlaeuft.

   Die Linie ist ein Hintergrundverlauf, kein ::after-Element. Ein
   absolut positioniertes ::after braucht white-space: nowrap, und
   genau das hat die Zeile auf dem Handy aus dem Bild geschoben.
   box-decoration-break: clone zeichnet die Linie auf jeder Zeile. */
.fk-em {
    font-style: normal;
    font-weight: 700;
    color: var(--indigo);
    background-image: linear-gradient(var(--indigo), var(--indigo));
    background-repeat: no-repeat;
    background-position: 0 96%;
    background-size: 0 0.07em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
    .fk-em { animation: fk-underline 0.75s cubic-bezier(0.22, 0.8, 0.3, 1) 0.5s forwards; }
}
@media (prefers-reduced-motion: reduce) {
    .fk-em { background-size: 100% 0.07em; }
}
@keyframes fk-underline { to { background-size: 100% 0.07em; } }

/* Eyebrows, Labels, Kennzeichnungen: Mono, gesperrt, klein. */
.fk-hero-eyebrow, .fk-eyebrow, .fk-pv-eyebrow, .fk-th-eyebrow,
.preis-hero-eyebrow, .preis-eyebrow, .fk-th-staedte-label,
.preis-addons-title, .preis-tag-label, .fk-ledger-label,
.fk-report-kpi-label, .preis-tag-sticker {
    font-family: var(--font-mono);
    font-size: 0.68rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* Alle Betraege und Kennzahlen: Tabellenziffern, damit Spalten
   untereinander stehen wie im Kontoauszug. */
.fk-ledger-value, .fk-report-amount, .fk-report-kpi-value,
.preis-paket-price, .preis-tag-num, .fk-pv-val, .fk-th-num,
.bkk-stat-card-value, .bkk-profile-price, .fk-uu-stat-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

p { max-width: 68ch; }

/* -------------------------------------------------------------
   5. HAARLINIEN STATT SCHATTEN
   Der groesste Einzelunterschied zum Fintech-Standard: Kanten
   werden gezeichnet, nicht geweichzeichnet.
   ------------------------------------------------------------- */
.fk-card, .fk-service-card, .fk-team-card, .preis-paket, .fk-faq-item,
.bkk-stat-card, .bkk-profile-card, .fk-testimonial, .fk-step {
    box-shadow: none !important;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper-card);
}
.fk-team-card { border-radius: 3px; overflow: hidden; }

/* -------------------------------------------------------------
   6. BUTTONS
   Weg vom Verlaufs-Pill. Flache Tintenflaeche, 3 px Radius,
   Versatzkante beim Hover statt Schlagschatten.
   ------------------------------------------------------------- */
.btn, .preis-paket-cta, .fk-pricing-hint-link {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.005em;
    border-radius: 3px !important;
    transition: transform 0.14s ease, background 0.14s ease,
                color 0.14s ease, box-shadow 0.14s ease;
}
.btn-primary, .preis-paket-cta--primary {
    background: var(--ink) !important;
    color: var(--paper-card) !important;
    border: 1px solid var(--ink) !important;
    box-shadow: 4px 4px 0 var(--indigo);
}
.btn-primary:hover, .preis-paket-cta--primary:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--indigo);
    background: var(--ink) !important;
    color: var(--paper-card) !important;
}
.btn-outline, .preis-paket-cta--outline {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
}
.btn-outline:hover, .preis-paket-cta--outline:hover {
    background: var(--ink) !important;
    color: var(--paper-card) !important;
}
.btn-white {
    background: var(--paper-card) !important;
    color: var(--ink) !important;
    border: 1px solid var(--paper-card) !important;
    box-shadow: 4px 4px 0 var(--indigo);
}
.btn-white:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--indigo); }
.btn-white-outline {
    background: transparent !important;
    border: 1px solid rgba(251, 249, 244, 0.55) !important;
    color: var(--paper-card) !important;
}
.btn-white-outline:hover { background: rgba(251, 249, 244, 0.12) !important; }

/* -------------------------------------------------------------
   7. NAVIGATION
   ------------------------------------------------------------- */
.fk-nav {
    background: rgba(242, 238, 230, 0.92) !important;
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--rule);
    box-shadow: none !important;
}
.fk-nav.scrolled { box-shadow: none !important; border-bottom-color: var(--rule-strong); }
.fk-nav a, .fk-nav-links a { font-family: var(--font-body); font-weight: 500; color: var(--ink-soft); }
.fk-nav-links a:hover { color: var(--ink); }
.fk-logo-text, .fk-logo strong { font-family: var(--font-display); letter-spacing: -0.03em; }

/* -------------------------------------------------------------
   8. SEKTIONEN
   ------------------------------------------------------------- */
.fk-section { background: transparent; }
.fk-section--gray, .preis-section--gray, .fk-pv--gray { background: var(--paper-deep) !important; }
.fk-section--gray, .preis-section--gray, .fk-pv--gray,
.fk-section, .preis-section, .fk-pv {
    border-top: 1px solid var(--rule);
}

/* Dunkle Flaechen: warmes Schwarz statt Marineblau-Verlauf. */
.fk-th, .fk-cta-band, .fk-why, .fk-hero-right, .preis-hero,
.fk-blog-hero, .fk-ba-hero, .fk-page-hero {
    background: var(--ink) !important;
    background-image: none !important;
}
.fk-th::before, .preis-hero::after { display: none; }

/* -------------------------------------------------------------
   9. PREISVERGLEICH – Balken als Kontobuchzeilen
   ------------------------------------------------------------- */
.fk-pv-row {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1rem;
    align-items: baseline;
}
.fk-pv-bar { border-radius: 0; height: 26px; background: var(--rule-strong); }
.fk-pv-row--us .fk-pv-bar { background: var(--indigo); box-shadow: none; }
.fk-pv-val { font-size: 1.05rem; }
.fk-pv-row:not(.fk-pv-row--us) .fk-pv-val { color: var(--ledger-red); }
.fk-pv-label { font-family: var(--font-body); }

/* -------------------------------------------------------------
   10. THEMEN-LANDKARTE auf Tinte
   ------------------------------------------------------------- */
.fk-th-num { font-family: var(--font-mono); color: rgba(251, 249, 244, 0.26); }
.fk-th-col-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; border-bottom-color: rgba(251, 249, 244, 0.22); }
.fk-th-list a, .fk-th-staedte a { font-family: var(--font-body); }
.fk-th-list a:hover, .fk-th-staedte a:hover { border-bottom-color: var(--paper-card); }
.fk-th-staedte { border-top-color: rgba(251, 249, 244, 0.18); }

/* -------------------------------------------------------------
   11. PREISSCHILD auf der Preisseite
   ------------------------------------------------------------- */
.preis-tag {
    border-radius: 3px;
    border: 1px solid var(--ink);
    box-shadow: 8px 8px 0 var(--indigo) !important;
    background: var(--paper-card);
}
.preis-tag-num {
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
    font-weight: 400;
    font-family: var(--font-mono);
}
.preis-tag-sticker {
    border-radius: 2px;
    background: var(--ledger-red);
    box-shadow: none;
    transform: rotate(-3deg);
}
.preis-tag-compare s { color: var(--ledger-red); }
.preis-ticker { background: var(--indigo); }
.preis-ticker-inner { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.preis-ticker-item::before { background: var(--paper-card); border-radius: 0; width: 4px; height: 4px; }

/* Paketpreise als Buchungsbetrag */
.preis-paket-price { font-weight: 400; color: var(--ink); }
.preis-paket--featured { border-color: var(--ink) !important; box-shadow: 6px 6px 0 var(--indigo) !important; }
.preis-paket-badge { border-radius: 2px; background: var(--ink); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; }

/* -------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------- */
.fk-footer { background: var(--ink) !important; border-top: 1px solid var(--rule); }

/* -------------------------------------------------------------
   13. PREISHINWEIS-BAND auf der Startseite
   ------------------------------------------------------------- */
.fk-pricing-hint { background: var(--indigo) !important; border-bottom: 1px solid var(--indigo-deep); }
.fk-pricing-hint-text { font-family: var(--font-mono); font-size: 0.78rem !important; letter-spacing: 0.06em; text-transform: uppercase; }
.fk-pricing-hint-link { border-radius: 2px !important; border-color: rgba(251,249,244,0.5) !important; }

/* -------------------------------------------------------------
   14. HERO "KONTOBUCH"  Prefix: fk-h26-
   Ersetzt den Split-Diagonal-Hero mit Dashboard-Mockup.
   Die Preisaussage ist hier ein Buchungsbeleg, kein Dekor:
   der Vergleich, der die Kernbotschaft traegt, steht als
   Kontozeilen da, inklusive Summenstrich.
   ------------------------------------------------------------- */
.fk-h26 {
    background: var(--paper);
    padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
}
/* Kontobuch-Linien: sehr schwache Horizontalen ueber die Flaeche. */
.fk-h26::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 47px,
        var(--rule) 47px,
        var(--rule) 48px
    );
    opacity: 0.4;
    mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
}
.fk-h26-inner { position: relative; z-index: 1; }

/* Kopfzeile mit Trennlinie, wie ein Belegkopf */
.fk-h26-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
    margin-bottom: 1.75rem;
    max-width: none;
}
.fk-h26-meta-rule { flex: 1; height: 1px; background: var(--rule-strong); }

.fk-h26-title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 8vw, 6.5rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    text-wrap: balance;
}

.fk-h26-body {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 420px);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.fk-h26-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 46ch;
    margin-bottom: 2rem;
}
.fk-h26-ctas { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* --- Beleg --- */
.fk-h26-ledger {
    border: 1px solid var(--ink);
    border-radius: 3px;
    background: var(--paper-card);
    padding: 1.35rem 1.5rem 1.25rem;
    box-shadow: 7px 7px 0 var(--indigo);
}
.fk-h26-led-cap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-mute);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--ink);
    max-width: none;
}
.fk-h26-led-rows { display: flex; flex-direction: column; }
.fk-h26-led-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.62rem 0;
    border-bottom: 1px solid var(--rule);
}
.fk-h26-led-label { font-size: 0.87rem; color: var(--ink-soft); }
.fk-h26-led-val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    color: var(--ink);
    white-space: nowrap;
}
.fk-h26-led-val--red { color: var(--ledger-red); }

/* Summenstrich: doppelte Linie, wie im Kontoabschluss */
.fk-h26-led-row--sum {
    border-top: 3px double var(--ink);
    border-bottom: none;
    margin-top: 0.35rem;
    padding-top: 0.8rem;
}
.fk-h26-led-row--sum .fk-h26-led-label,
.fk-h26-led-row--year .fk-h26-led-label { font-weight: 600; color: var(--ink); }
.fk-h26-led-row--year { border-bottom: none; padding-top: 0; }
.fk-h26-led-val--sum {
    color: var(--indigo);
    font-weight: 600;
    font-size: 1.25rem;
}
.fk-h26-led-foot {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--ink-mute);
    margin-top: 0.9rem;
    max-width: none;
}
.fk-h26-led-foot a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }

/* --- Vertrauenszeile --- */
.fk-h26-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule-strong);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-mute);
}
.fk-h26-trust li { display: flex; align-items: center; gap: 0.5rem; }
.fk-h26-trust li::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--indigo);
    flex-shrink: 0;
}

/* --- Einblendung beim Laden, gestaffelt --- */
@media (prefers-reduced-motion: no-preference) {
    .fk-h26-meta, .fk-h26-title, .fk-h26-left, .fk-h26-ledger, .fk-h26-trust {
        opacity: 0;
        transform: translateY(14px);
        animation: fk-h26-rise 0.62s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
    }
    .fk-h26-meta   { animation-delay: 0.04s; }
    .fk-h26-title  { animation-delay: 0.11s; }
    .fk-h26-left   { animation-delay: 0.2s; }
    .fk-h26-ledger { animation-delay: 0.28s; }
    .fk-h26-trust  { animation-delay: 0.36s; }
}
@keyframes fk-h26-rise {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .fk-h26-body { grid-template-columns: 1fr; }
    .fk-h26-ledger { max-width: 460px; }
}
@media (max-width: 520px) {
    .fk-h26-ctas { flex-direction: column; }
    .fk-h26-ctas .btn { width: 100%; text-align: center; }
    .fk-h26-ledger { box-shadow: 5px 5px 0 var(--indigo); }
    .fk-h26-meta { font-size: 0.6rem; letter-spacing: 0.12em; gap: 0.75rem; }
    /* Die Trennlinie kollabiert im Umbruch auf Null und liesse
       nur eine Luecke stehen. */
    .fk-h26-meta-rule { display: none; }
}

/* -------------------------------------------------------------
   15. NACHZIEHER
   Stellen, die in style.css mit !important gesetzt sind und
   deshalb hier explizit nachgezogen werden muessen.
   ------------------------------------------------------------- */
.fk-nav-cta {
    background: var(--ink) !important;
    color: var(--paper-card) !important;
    border-radius: 3px !important;
    border: 1px solid var(--ink) !important;
    font-weight: 600 !important;
    box-shadow: 3px 3px 0 var(--indigo);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.fk-nav-cta:hover {
    background: var(--ink) !important;
    color: var(--paper-card) !important;
    transform: translate(1.5px, 1.5px);
    box-shadow: 1.5px 1.5px 0 var(--indigo);
}
.fk-nav-sister { border-radius: 2px !important; border-color: var(--rule-strong) !important; }

/* CTA-Paar im Hero: gleiche Hoehe, gleiche Ausrichtung, nebeneinander
   solange Platz ist. Vorher stapelten sie unterschiedlich breit. */
.fk-h26-ctas .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
}

/* Balkenspur als Grid: 1fr fuer den Balken, auto fuer den Betrag.
   Vorher war die Spur ein Flexbox-Paar und der 100-Prozent-Balken
   schob den Betrag "ab 1.800 EUR" aus dem Container. */
.fk-pv-track {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 0.85rem;
    align-items: center;
}
.fk-pv-bar { width: 100%; }
.fk-pv-bar--w8   { width: 8%; }
.fk-pv-bar--w11  { width: 11%; }
.fk-pv-bar--w14  { width: 14%; }
.fk-pv-bar--w17  { width: 17%; }
.fk-pv-bar--w22  { width: 22%; }
.fk-pv-bar--w100 { width: 100%; }
.fk-pv-val { text-align: right; }

/* -------------------------------------------------------------
   16. UEBERSCHRIFTEN AUF DUNKLEM GRUND
   Der Typo-Block oben setzt h1/h2/h3 pauschal auf --ink. Auf den
   Tinte-Flaechen waere das Schwarz auf Schwarz. Hier zurueckgeholt.
   ------------------------------------------------------------- */
.fk-th h1, .fk-th h2, .fk-th h3, .fk-th-title,
.fk-cta-band h1, .fk-cta-band h2, .fk-cta-band h3,
.fk-why h1, .fk-why h2, .fk-why h3,
.fk-footer h1, .fk-footer h2, .fk-footer h3, .fk-footer h4,
.preis-hero h1, .preis-hero h2,
.fk-section--accent h2, .fk-section--accent h3 {
    color: var(--paper-card);
}
.fk-th p, .fk-cta-band p, .fk-why p { color: rgba(251, 249, 244, 0.74); }
.fk-th-eyebrow, .fk-cta-band .fk-eyebrow { color: #8f86e8; }

/* -------------------------------------------------------------
   17. RESTBESTAND DER ALTEN SPRACHE
   style.css setzt an 19 Stellen border-radius:50px und an neun
   Stellen einen Indigo-Verlauf. Beides ist die Optik, die weg
   sollte. Hier gesammelt nachgezogen, statt 3.900 Zeilen
   umzuschreiben.
   ------------------------------------------------------------- */

/* Alles, was Pille war, wird Kante. */
.fk-angebot-btn, .fk-ba-cat, .fk-ba-cta-box a, .fk-blog-cat,
.fk-blog-filter-btn, .fk-blog-search-input, .fk-cookie-btn,
.fk-cookie-detail-badge, .fk-footer-cta, .fk-page-hero-eyebrow,
.fk-service-featured-link, .fk-team-badge, .fk-team-linkedin,
.fk-topbar-site, .fk-uu-btn-white, .fk-uu-btn-white-outline {
    border-radius: 3px !important;
}
.fk-ba-cat, .fk-blog-cat, .fk-cookie-detail-badge, .fk-team-badge,
.fk-page-hero-eyebrow {
    border-radius: 2px !important;
    font-family: var(--font-mono);
    font-size: 0.66rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Verlaufsflaechen werden flach. */
.fk-footer-cta, .fk-angebot-btn, .fk-ba-cta-box a, .fk-service-featured-link {
    background: var(--paper-card) !important;
    background-image: none !important;
    color: var(--ink) !important;
    border: 1px solid var(--paper-card) !important;
    box-shadow: 3px 3px 0 var(--indigo);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.fk-footer-cta:hover, .fk-angebot-btn:hover,
.fk-ba-cta-box a:hover, .fk-service-featured-link:hover {
    opacity: 1;
    color: var(--ink) !important;
    transform: translate(1.5px, 1.5px);
    box-shadow: 1.5px 1.5px 0 var(--indigo);
}

/* Blogfilter und Suchfeld im Papierlook */
.fk-blog-filter-btn {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink-soft) !important;
    font-family: var(--font-mono);
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fk-blog-filter-btn.is-active, .fk-blog-filter-btn:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--paper-card) !important;
}
.fk-blog-search-input {
    background: var(--paper-card) !important;
    border: 1px solid var(--rule-strong) !important;
    font-family: var(--font-body);
}

/* Cookie-Banner mitziehen, sonst sticht er als einziges Element
   im alten Stil heraus. */
.fk-cookie-btn { font-family: var(--font-body); font-weight: 600; }
.fk-cookie-btn--accept {
    background: var(--ink) !important;
    background-image: none !important;
    color: var(--paper-card) !important;
    border: 1px solid var(--ink) !important;
}
.fk-cookie-btn--reject {
    background: transparent !important;
    border: 1px solid var(--ink) !important;
    color: var(--ink) !important;
}

/* LinkedIn-Marke in den Teamkarten */
.fk-team-linkedin {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink-soft) !important;
}
.fk-team-linkedin:hover { background: var(--ink) !important; color: var(--paper-card) !important; border-color: var(--ink) !important; }

/* -------------------------------------------------------------
   18. ACCENT-SEKTION
   Regel 8 setzt .fk-section auf transparent und hat damit auch
   .fk-section--accent den dunklen Grund genommen (gleiche
   Spezifitaet, spaeter geladen). Folge war weisser Text auf
   hellem Papier, Kontrast 1,1:1. Hier explizit zurueckgeholt.
   ------------------------------------------------------------- */
.fk-section--accent {
    background: var(--ink) !important;
    background-image: none !important;
}
.fk-section--accent .fk-section-title,
.fk-section--accent h2,
.fk-section--accent h3,
.fk-section--accent strong { color: var(--paper-card) !important; }
.fk-section--accent p,
.fk-section--accent .fk-section-sub,
.fk-section--accent li { color: rgba(251, 249, 244, 0.78) !important; }
.fk-section--accent .fk-eyebrow,
.fk-eyebrow--white { color: #8f86e8 !important; }

/* Fussnote unter dem Preisvergleich war mit 3,68:1 zu blass. */
.fk-pv-note { color: var(--ink-soft); }

/* Wortmarke auf dunklem Grund: Indigo auf Tinte kommt nur auf
   2,3:1. Logotypen sind von WCAG 1.4.3 ausgenommen, lesbar soll
   es trotzdem sein, deshalb auf den Tinte-Flaechen aufgehellt. */
.fk-footer .fk-logo-klar,
.fk-th .fk-logo-klar,
.fk-cta-band .fk-logo-klar { color: #8f86e8; }

/* -------------------------------------------------------------
   19. BUTTONS AUF DUNKLEM GRUND
   .btn-primary ist eine Tintenflaeche. Auf den dunklen Heroes der
   Serviceseiten verschwindet sie im Hintergrund, sichtbar blieb
   nur der Indigo-Versatz. Dort wird sie invertiert.
   ------------------------------------------------------------- */
.fk-page-hero .btn-primary,
.fk-section--accent .btn-primary,
.fk-cta-band .btn-primary,
.fk-th .btn-primary,
.preis-hero .btn-primary,
.fk-footer .btn-primary {
    background: var(--paper-card) !important;
    color: var(--ink) !important;
    border-color: var(--paper-card) !important;
}
.fk-page-hero .btn-outline,
.fk-section--accent .btn-outline,
.preis-hero .btn-outline {
    border-color: rgba(251, 249, 244, 0.55) !important;
    color: var(--paper-card) !important;
}
.fk-page-hero .btn-outline:hover,
.fk-section--accent .btn-outline:hover,
.preis-hero .btn-outline:hover {
    background: var(--paper-card) !important;
    color: var(--ink) !important;
}

/* Eyebrow-Chip im Serviceseiten-Hero */
.fk-page-hero-eyebrow {
    background: transparent !important;
    border: 1px solid rgba(251, 249, 244, 0.35) !important;
    color: var(--paper-card) !important;
}

/* Preisschild: 149 und Euro standen durch das Sperren der
   Monoziffern zu weit auseinander. */
.preis-tag-num { letter-spacing: -0.045em; }

/* -------------------------------------------------------------
   20. UEBERSCHRIFTEN IN KARTEN
   Die Display-Skala in Block 4 gilt pauschal fuer h2. In den
   Blogkarten sassen dadurch 40-px-Titel in 299 px breiten Karten
   und brachen ueber vier Zeilen. Kartenkontexte bekommen eine
   eigene, kleinere Stufe.
   ------------------------------------------------------------- */
.fk-blog-card h2,
.fk-blog-card h3,
.fk-service-card h2,
.fk-service-card h3,
.fk-card h2,
.fk-card h3,
.fk-step h3,
.fk-testimonial h3,
.bkk-profile-card h3,
.preis-paket h2,
.preis-paket h3 {
    font-size: clamp(1.08rem, 1.5vw, 1.32rem) !important;
    line-height: 1.22;
    letter-spacing: -0.015em;
}
.fk-blog-featured h2 { font-size: clamp(1.5rem, 2.6vw, 2rem) !important; line-height: 1.15; }

/* ===================================================================
   21. BEWEGUNG
   Alles hier liegt hinter prefers-reduced-motion. Die Seite muss
   ohne Animation vollstaendig lesbar bleiben, deshalb ist jeder
   Endzustand auch der Ausgangszustand, wenn Bewegung abgelehnt wird.
   =================================================================== */

/* --- Logo: Balken wachsen, Trendlinie zeichnet sich, Punkt setzt auf ---
   Kein Markup noetig, die Kinder des SVG werden direkt adressiert.
   transform-box: fill-box, damit transform-origin im SVG greift. */
.fk-logo-icon rect,
.fk-logo-icon circle,
.fk-logo-icon path {
    transform-box: fill-box;
}
.fk-logo-icon rect {
    transform-origin: bottom center;
    transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.fk-logo-icon circle { transform-origin: center; }
.fk-logo-icon path {
    stroke-dasharray: 30;
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .fk-logo-icon rect { animation: fk-bar-rise 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
    .fk-logo-icon rect:nth-of-type(1) { animation-delay: 0.06s; }
    .fk-logo-icon rect:nth-of-type(2) { animation-delay: 0.15s; }
    .fk-logo-icon rect:nth-of-type(3) { animation-delay: 0.24s; }
    .fk-logo-icon path {
        animation: fk-line-draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.34s backwards;
    }
    .fk-logo-icon circle {
        animation: fk-dot-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.82s backwards;
    }

    /* Hover: die Balken treten der Reihe nach eine Stufe hoch. */
    .fk-logo:hover .fk-logo-icon rect:nth-of-type(1) { transform: translateY(-2px); }
    .fk-logo:hover .fk-logo-icon rect:nth-of-type(2) { transform: translateY(-3px); transition-delay: 0.04s; }
    .fk-logo:hover .fk-logo-icon rect:nth-of-type(3) { transform: translateY(-4px); transition-delay: 0.08s; }
}

@keyframes fk-bar-rise {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
@keyframes fk-line-draw {
    from { stroke-dashoffset: 30; }
    to   { stroke-dashoffset: 0; }
}
@keyframes fk-dot-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* --- Scroll-Reveal: weniger Weg, praezisere Kurve --- */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s cubic-bezier(0.22, 0.8, 0.3, 1),
                    transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .reveal.visible { opacity: 1; transform: none; }

    /* Rasterkinder laufen gestaffelt ein statt alle gleichzeitig. */
    .fk-team-grid > *, .fk-services-grid > *, .preis-pakete > *,
    .fk-blog-grid > *, .fk-th-col {
        transition-delay: calc(var(--fk-i, 0) * 55ms);
    }
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* --- Vergleichsbalken laufen ein, sobald die Sektion sichtbar wird --- */
@media (prefers-reduced-motion: no-preference) {
    .fk-pv-bar {
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .fk-pv.is-shown .fk-pv-bar { transform: scaleX(1); }
    .fk-pv.is-shown .fk-pv-row:nth-child(2) .fk-pv-bar { transition-delay: 0.1s; }
    .fk-pv.is-shown .fk-pv-row:nth-child(3) .fk-pv-bar { transition-delay: 0.2s; }
    .fk-pv.is-shown .fk-pv-row:nth-child(4) .fk-pv-bar { transition-delay: 0.3s; }
}

/* --- Karten: Versatzkante beim Hover statt Schlagschatten --- */
.fk-blog-card, .fk-service-card, .fk-team-card, .preis-paket, .bkk-profile-card {
    transition: transform 0.18s cubic-bezier(0.22, 0.8, 0.3, 1),
                box-shadow 0.18s cubic-bezier(0.22, 0.8, 0.3, 1),
                border-color 0.18s ease;
}
@media (hover: hover) {
    .fk-blog-card:hover, .fk-service-card:hover, .bkk-profile-card:hover {
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 var(--indigo) !important;
        border-color: var(--ink);
    }
    .fk-team-card:hover { transform: translateY(-3px); border-color: var(--ink); }
}

/* --- Navigationslinks: Linie laeuft von links ein --- */
.fk-nav-menu a:not(.fk-nav-cta) { position: relative; }
.fk-nav-menu a:not(.fk-nav-cta)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1.5px;
    background: var(--indigo);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.24s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.fk-nav-menu a:not(.fk-nav-cta):hover::after,
.fk-nav-menu a:not(.fk-nav-cta):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- Zahlen im Hero-Beleg zaehlen hoch --- */
.fk-h26-led-val { font-variant-numeric: tabular-nums; }

/* Magazin- und Artikelkopf mitziehen: waren als einzige noch
   marineblaue Verlaeufe aus dem Altbestand. */
.fk-blog-hero h1, .fk-ba-hero h1, .fk-page-hero h1,
.fk-blog-hero h2, .fk-ba-hero h2 { color: var(--paper-card) !important; }
.fk-blog-hero p, .fk-ba-hero p { color: rgba(253, 253, 252, 0.76) !important; }
.fk-blog-hero .fk-eyebrow, .fk-ba-hero .fk-eyebrow { color: #8f86e8 !important; border-top-color: #8f86e8 !important; }

/* -------------------------------------------------------------
   22. BREITE TABELLEN IN ARTIKELN
   Vier Magazinartikel haben Tabellen ohne Scroll-Container. Auf
   schmalen Bildschirmen schoben die den Textkoerper seitlich raus.
   display:block macht die Tabelle selbst scrollbar, ohne dass in
   29 Artikeln Markup angefasst werden muss.
   ------------------------------------------------------------- */
.fk-ba-body table,
.fk-art-body table,
article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}