/* ============================================================
   KSV Design-Route F — "Frisch" (Runde 3, research-getrieben)
   Produkt-Inszenierung statt Kassen-Metapher. Dossier-Bausteine:
   helles Split-Editorial als Anti-Navy-Statement, Warmgrau-Staging
   (~#F0EBE3) fuer Geraete-Gleichbehandlung, Samsung-Shelf fuer die
   Bandbreite, Apple-Disziplin pro Entscheidungspunkt, EIN Akzent
   (Warm-Amber, Kandidat A), EIN Schriftsystem: Poppins (lokal im
   Theme als woff2, kein Zusatz-Load) + Georgia italic AUSSCHLIESSLICH
   fuer die eine Urteils-Zeile ("Zeitung, nicht SaaS").
   Runde-3b-Fix (Kunden-Feedback "die Geraete koennen sich doch
   ueberlappen"): Hero-Buehne als echte Produkt-Komposition.
   Zettle hinten-links hoeher auf der Tischebene (kleiner, +4 Grad),
   Move 5000 vorn-rechts (groesser, -5.5 Grad) ueberlappt ihn;
   zweistufige Bodenschatten (Kontakt + Streu) pro Geraet;
   scene-laden.jpg weichgezeichnet + gespiegelt (Licht von links)
   als Tiefen-Layer. Groessen-Ehrlichkeit aus Runde 3 bleibt
   (sichtbare Reader-Hoehe ~0,73x der Terminal-Hoehe). Sizing
   breiten-definiert, konfliktfrei zur globalen img-Regel (der
   Specificity-Monumental-Bug aus Runde 3 kann nicht zurueckkommen).
   Urteils-Zeile ohne Anfuehrungszeichen-Ornament (Amber-Regel
   statt Quote-Glyphe).
   Kontraste (WCAG-2-Formel, errechnet, im Task-Report belegt):
     Ink #1D1915 auf Papier #FBF9F5        = 16,61:1
     Soft #5C554C auf Papier               =  6,99:1
     Amber-Deep #92400E auf Papier         =  6,74:1
     Ink auf Stage #F0EBE3                 = 14,72:1
     Soft auf Stage                        =  6,19:1
     Ink auf Amber-CTA #D97706             =  5,48:1
     Band-Text #F5EFE6 auf Band #211C16    = 14,79:1
     Band-Dim #BFB4A4 auf Band             =  8,27:1
     Amber-Bright #F59E0B auf Band         =  7,87:1
     Amber #D97706 auf Papier (nur Grafik) =  3,03:1 (>= 3:1, nie Text)
   Animationen ausschliesslich transform/opacity, reduced-motion-
   guarded. Keine externen Loads. Gescoped unter .ksv-route-f.
   ============================================================ */

.ksv-route-f {
    --kf-paper: #FBF9F5;
    --kf-stage: #F0EBE3;
    --kf-card: #FFFFFF;
    --kf-ink: #1D1915;
    --kf-soft: #5C554C;
    --kf-line: rgba(29, 25, 21, .13);
    --kf-amber: #D97706;
    --kf-amber-deep: #92400E;
    --kf-amber-bright: #F59E0B;
    --kf-band: #211C16;
    --kf-band-text: #F5EFE6;
    --kf-band-dim: #BFB4A4;
    --kf-sans: 'Poppins', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --kf-serif: Georgia, 'Times New Roman', serif;
    --kf-shadow: 0 22px 44px -18px rgba(29, 25, 21, .28);
    background: var(--kf-paper);
    color: var(--kf-ink);
    font-family: var(--kf-sans);
    line-height: 1.65;
    overflow-x: clip;
}

.ksv-route-f *,
.ksv-route-f *::before,
.ksv-route-f *::after {
    box-sizing: border-box;
}

.ksv-route-f img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ksv-route-f a {
    color: inherit;
    text-decoration: none;
}

.ksv-route-f :focus-visible {
    outline: 2px solid var(--kf-amber-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

.kf-wrap {
    max-width: 74rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.kf-section {
    padding: 5rem 0;
}

/* ---------- Typo-Staffel (EIN System) ---------- */

.kf-kicker {
    margin: 0 0 1rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--kf-amber-deep);
}

.kf-h1 {
    margin: 0 0 1.25rem;
    font-family: var(--kf-sans);
    font-size: clamp(2.75rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.03em;
    color: var(--kf-ink);
}

.kf-h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--kf-ink);
}

.kf-lead {
    margin: 0;
    max-width: 34rem;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--kf-soft);
}

.kf-body {
    margin: 0 0 1.25rem;
    max-width: 38rem;
    font-size: 1.0625rem;
    color: var(--kf-soft);
}

.kf-caption {
    margin: .9rem 0 0;
    font-size: .8125rem;
    color: var(--kf-soft);
}

/* ---------- Buttons ---------- */

.kf-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85em 1.7em;
    border-radius: 999px;
    border: 1.5px solid var(--kf-amber);
    background: var(--kf-amber);
    color: var(--kf-ink);
    font-family: var(--kf-sans);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    transition: transform .25s ease;
    will-change: transform;
}

.kf-btn:hover {
    transform: translateY(-2px);
}

.kf-btn-ghost {
    background: transparent;
    border-color: var(--kf-ink);
    color: var(--kf-ink);
}

.kf-btn-big {
    font-size: 1.0625rem;
    padding: 1em 2em;
}

.kf-btn-dark {
    background: transparent;
    border-color: rgba(245, 239, 230, .45);
    color: var(--kf-band-text);
}

.kf-btn-dark:hover {
    border-color: var(--kf-amber-bright);
}

.kf-arrowlink {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kf-amber-deep);
}

.kf-arrowlink:hover {
    text-decoration: underline;
    text-underline-offset: .25em;
}

/* ============================================================
   (1) HERO
   ============================================================ */

.kf-hero {
    padding: 4.5rem 0 4rem;
}

.kf-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 64em) {
    .kf-hero-grid {
        grid-template-columns: 1.05fr .95fr;
        gap: 3.5rem;
    }
}

/* Produkt-Komposition (Runde 3b, Kunden-Feedback "die Geraete
   koennen sich doch ueberlappen"): kein aufgereihtes Nebeneinander
   mehr, sondern eine gestaffelte Tisch-Szene.
   Tiefenlogik: Zettle Reader hinten-rechts (kleiner, hoeher auf der
   Tischebene, +4 Grad), Move 5000 vorn-links (groesser, tiefer im
   Bild, -5.5 Grad) und ueberlappt den Reader um rund ein Viertel
   seiner sichtbaren Breite. Groessen-Ehrlichkeit aus Runde 3 bleibt:
   sichtbare Reader-Hoehe ~0,73x der sichtbaren Terminal-Hoehe.
   Erdung: pro Geraet ein zweistufiger Bodenschatten (Kontakt-Ellipse
   dunkel+eng, Streu-Ellipse weich+breit) im Figure, rotiert also mit.
   Die Cutouts tragen zusaetzlich ihre eingebackene Schattenbasis:
   die liefert den harten Kontakt direkt an der Standflaeche.
   Atmosphaere: scene-cafe.jpg stark weichgezeichnet, aufgehellt und
   warm overlayt als Hintergrund-Layer; die scharfen Geraete davor
   ergeben die Tiefenschaerfe-Wirkung. Overlay + Vignette + dunklere
   Bodenzone im ::after (liegt per z-index UNTER den Figures).
   Sizing-Regel: Figures sind breiten-definiert (width in % der
   Buehne), Bilder laufen mit width:100%/height:auto und bleiben
   damit konfliktfrei zur globalen Regel .ksv-route-f img
   { max-width:100%; height:auto } (der Monumental-Bug aus Runde 3
   war ein Specificity-Verlust der alten height-Prozente). */
.kf-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    background: var(--kf-stage);
    overflow: hidden;
    isolation: isolate;
}

/* Szene: scene-laden.jpg (Holztheke im Morgenlicht) liefert eine
   echte Tischebene unter den Geraeten. scaleX(-1) spiegelt das
   Fensterlicht nach links (Belichtungsrichtung des Dossiers),
   moderater Blur laesst die Theke als Flaeche lesbar. */
.ksv-route-f .kf-stage-scene {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 34%;
    filter: blur(9px) brightness(1.12) saturate(.88);
    transform: scaleX(-1);
    z-index: 0;
}

.kf-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(251, 249, 245, .30) 0%, rgba(251, 249, 245, .08) 38%, rgba(84, 62, 38, .06) 78%, rgba(66, 48, 28, .18) 100%),
        radial-gradient(120% 95% at 14% 4%, rgba(255, 243, 221, .55) 0%, rgba(255, 243, 221, 0) 58%),
        radial-gradient(145% 120% at 50% 42%, rgba(0, 0, 0, 0) 55%, rgba(46, 33, 19, .18) 100%);
}

.ksv-route-f .kf-stage-prop {
    position: absolute;
    margin: 0;
}

.ksv-route-f .kf-stage-prop--lead {
    width: 62%;
    left: 23%;
    bottom: 6%;
    z-index: 3;
    transform: rotate(-5.5deg);
    transform-origin: 50% 100%;
}

.ksv-route-f .kf-stage-prop--second {
    width: 32%;
    left: 13%;
    bottom: 22%;
    z-index: 2;
    transform: rotate(4deg);
    transform-origin: 50% 100%;
}

.ksv-route-f .kf-stage-img {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Zweistufiger Bodenschatten: Layer 1 = Kontakt (eng, dunkler),
   Layer 2 = Streu (breit, weich). Ellipsen unter der Standflaeche,
   auf die sichtbaren Pixel des jeweiligen Cutouts kalibriert
   (Move: sichtbar ~10-93% der Bildbreite; Zettle: ~22-79%). */
.ksv-route-f .kf-stage-shadow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(29, 25, 21, .44) 0%, rgba(29, 25, 21, .20) 48%, rgba(29, 25, 21, 0) 74%) 54% 32% / 62% 52% no-repeat,
        radial-gradient(closest-side, rgba(29, 25, 21, .26) 0%, rgba(29, 25, 21, .10) 52%, rgba(29, 25, 21, 0) 78%) 50% 50% / 100% 100% no-repeat;
}

.ksv-route-f .kf-stage-prop--lead .kf-stage-shadow {
    left: 8%;
    width: 92%;
    bottom: -5%;
    height: 18%;
}

/* Reader steht auf hell beleuchtetem Holz: sein Schatten braucht
   mehr Deckung als der des Terminals (das eine dunklere Zone trifft
   und seine eingebackene Schattenbasis mitbringt). */
.ksv-route-f .kf-stage-prop--second .kf-stage-shadow {
    left: 16%;
    width: 74%;
    bottom: -4.5%;
    height: 16%;
    background:
        radial-gradient(closest-side, rgba(29, 25, 21, .50) 0%, rgba(29, 25, 21, .24) 48%, rgba(29, 25, 21, 0) 74%) 54% 32% / 62% 52% no-repeat,
        radial-gradient(closest-side, rgba(29, 25, 21, .30) 0%, rgba(29, 25, 21, .12) 52%, rgba(29, 25, 21, 0) 78%) 50% 50% / 100% 100% no-repeat;
}

.kf-stage-chip {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42em .95em;
    border-radius: 999px;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--kf-ink);
}

.kf-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kf-amber);
    flex: none;
}

.kf-pulse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--kf-amber);
    opacity: 0;
    animation: kf-pulse 2.2s ease-out infinite;
}

@keyframes kf-pulse {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Die Weggabelung: zwei Tueren, nie versteckt, nie animiert-unsichtbar */
.kf-doors {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 3rem;
}

@media (min-width: 48em) {
    .kf-doors {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

.kf-door {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    padding: 1.5rem 1.6rem;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    border-radius: 20px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.kf-door:hover {
    transform: translateY(-4px);
    box-shadow: var(--kf-shadow);
}

.kf-door-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--kf-stage);
    color: var(--kf-amber-deep);
}

.kf-door-icon svg {
    width: 24px;
    height: 24px;
}

.kf-door-body {
    display: block;
    min-width: 0;
}

.kf-door-intent {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kf-amber-deep);
    margin-bottom: .3rem;
}

.kf-door-title {
    display: block;
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--kf-ink);
}

.kf-door-copy {
    display: block;
    margin-top: .35rem;
    font-size: .9375rem;
    color: var(--kf-soft);
}

.kf-door-arrow {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--kf-line);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--kf-ink);
    transition: transform .3s ease;
}

.kf-door:hover .kf-door-arrow {
    background: var(--kf-amber);
    border-color: var(--kf-amber);
    transform: translateX(3px);
}

/* ============================================================
   (2) PRUEF-TICKER (Fakten-Radar)
   ============================================================ */

.kf-ticker {
    background: var(--kf-band);
    color: var(--kf-band-text);
    padding: .9rem 0;
    overflow: hidden;
}

.kf-ticker-track {
    display: flex;
    width: max-content;
    animation: kf-marquee 46s linear infinite;
}

.kf-ticker:hover .kf-ticker-track {
    animation-play-state: paused;
}

.kf-ticker-group {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    list-style: none;
    margin: 0;
    padding: 0 1.2rem 0 1.2rem;
}

.kf-ticker-group li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kf-ticker-label {
    color: var(--kf-amber-bright);
    font-weight: 600;
}

.kf-tick {
    width: 14px;
    height: 14px;
    color: var(--kf-amber-bright);
    flex: none;
}

@keyframes kf-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   (3) TRUST: Fakten + Urteils-Zitat
   ============================================================ */

.kf-trust {
    padding-bottom: 4.5rem;
}

.kf-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0;
}

@media (min-width: 48em) {
    .kf-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

.kf-stat {
    border-top: 2px solid var(--kf-ink);
    padding-top: 1.1rem;
}

.kf-stat dt {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--kf-soft);
    margin: 0 0 .5rem;
}

.kf-stat-big {
    margin: 0;
    font-size: clamp(2.125rem, 3.8vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--kf-ink);
}

.kf-stat-sub {
    margin: .45rem 0 0;
    font-size: .9375rem;
    color: var(--kf-soft);
    max-width: 18rem;
}

/* Die eine Serif-Zeile: Georgia italic, sonst nirgends. Kein Zitat,
   keine Anfuehrungszeichen (Runde-3-Fix): eine Markt-Feststellung
   unter einer Amber-Regel, keine Bittsteller-Lesart. */
.kf-verdict {
    margin: 4rem auto 0;
    max-width: 52rem;
    text-align: center;
    position: relative;
    padding-top: 2.2rem;
}

.kf-verdict::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--kf-amber);
}

.kf-verdict-line {
    margin: 0;
    font-family: var(--kf-serif);
    font-style: italic;
    font-size: clamp(1.5rem, 2.8vw, 2.125rem);
    line-height: 1.35;
    color: var(--kf-ink);
}

.kf-verdict-sub {
    margin: 1.1rem auto 0;
    max-width: 36rem;
    font-size: .9375rem;
    color: var(--kf-soft);
}

/* ============================================================
   (4) EMPFEHLUNG: ready2order auf der Buehne
   ============================================================ */

.kf-feature {
    background: var(--kf-stage);
}

.kf-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 64em) {
    .kf-feature-grid {
        grid-template-columns: .9fr 1.1fr;
        gap: 4rem;
    }
}

.kf-feature-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 320px;
}

.kf-feature-img {
    width: auto;
    max-height: 540px;
    filter: drop-shadow(0 26px 30px rgba(29, 25, 21, .24));
}

.kf-feature-stage .kf-stage-chip {
    top: 0;
    left: 0;
}

.kf-feature-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .9rem;
}

.kf-feature-brand .kf-h2 {
    margin: 0;
}

.kf-logo-box {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 56px;
    padding: .5rem .7rem;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    border-radius: 12px;
}

.kf-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.kf-price {
    margin: 1.6rem 0 1.4rem;
}

.kf-price-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--kf-soft);
    margin-bottom: .2rem;
}

.kf-price-big {
    display: block;
    font-size: clamp(2.375rem, 4.4vw, 3.375rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.05;
    color: var(--kf-ink);
    font-variant-numeric: tabular-nums;
}

.kf-price-big small {
    font-size: .45em;
    font-weight: 600;
    color: var(--kf-soft);
    letter-spacing: 0;
}

.kf-price-word {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
}

.kf-price-term {
    display: block;
    margin-top: .35rem;
    font-size: .9375rem;
    color: var(--kf-soft);
}

.kf-specs {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem .5rem;
}

@media (min-width: 40em) {
    .kf-specs {
        grid-template-columns: 1fr 1fr;
    }
}

.kf-spec {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .9375rem;
    color: var(--kf-soft);
}

.kf-spec strong {
    color: var(--kf-ink);
    font-weight: 700;
}

.kf-glyph {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--kf-ink);
}

.kf-spec.is-no .kf-glyph,
.kf-spec.is-na .kf-glyph {
    color: var(--kf-soft);
}

.kf-feature-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

/* ============================================================
   (5) SHELF: Anbieter-Bandbreite
   ============================================================ */

.kf-sechead {
    max-width: 44rem;
    margin-bottom: 2.75rem;
}

.kf-shelf-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 48em) {
    .kf-shelf-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 64em) {
    .kf-shelf-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
}

.kf-shelf-tile a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 1.2rem 1rem 1.3rem;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    border-radius: 16px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.kf-shelf-tile a:hover {
    transform: translateY(-5px);
    border-color: var(--kf-amber);
}

.kf-shelf-imgbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    width: 100%;
    margin-bottom: .9rem;
}

.kf-shelf-imgbox img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.kf-shelf-brand {
    font-size: .71875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kf-soft);
}

.kf-shelf-product {
    margin-top: .15rem;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kf-ink);
}

.kf-shelf-typ {
    margin-top: .55rem;
    display: inline-block;
    padding: .18em .7em;
    border-radius: 999px;
    background: var(--kf-stage);
    font-size: .75rem;
    font-weight: 500;
    color: var(--kf-soft);
}

.kf-shelf-foot {
    margin: 2.25rem 0 0;
    text-align: center;
}

/* ============================================================
   (6) KOSTENBEISPIEL
   ============================================================ */

.kf-calc {
    background: var(--kf-card);
    border-top: 1px solid var(--kf-line);
    border-bottom: 1px solid var(--kf-line);
}

.kf-calc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 64em) {
    .kf-calc-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4.5rem;
    }
}

.kf-calc-card {
    background: var(--kf-paper);
    border: 1px solid var(--kf-line);
    border-radius: 20px;
    padding: 2rem 2rem 1.6rem;
}

.kf-calc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.2rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kf-soft);
}

.kf-calc-head span {
    padding: .2em .8em;
    border-radius: 999px;
    background: var(--kf-stage);
    color: var(--kf-amber-deep);
    letter-spacing: .08em;
}

.kf-calc-rows {
    margin: 0;
}

.kf-calc-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--kf-line);
}

.kf-calc-rows dt {
    font-size: .9375rem;
    color: var(--kf-soft);
}

.kf-calc-rows dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--kf-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kf-calc-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1.1rem 0 0;
    padding-top: 1.1rem;
    border-top: 2px solid var(--kf-ink);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kf-ink);
}

.kf-calc-sum strong {
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kf-calc-eff {
    margin: .4rem 0 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kf-amber-deep);
}

/* ============================================================
   (7) BRANCHEN
   ============================================================ */

.kf-branch-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 40em) {
    .kf-branch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64em) {
    .kf-branch-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
    }
}

.kf-branch a {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.kf-branch a:hover {
    transform: translateY(-5px);
}

.kf-branch-imgbox {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.kf-branch-imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.kf-branch-photo a:hover .kf-branch-imgbox img {
    transform: scale(1.045);
}

.kf-branch-plate {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.05rem 1.1rem 1.15rem;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
}

.kf-branch-title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kf-ink);
}

.kf-branch-copy {
    margin-top: .3rem;
    font-size: .8125rem;
    color: var(--kf-soft);
}

.kf-branch-cta {
    margin-top: auto;
    padding-top: .7rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--kf-amber-deep);
}

/* Typo-Kacheln (Friseur, Hotellerie): Ink-Flaeche, gleiche Masse */
.kf-branch-type .kf-branch-plate {
    border: 0;
    border-radius: 16px;
    background: var(--kf-band);
    justify-content: flex-end;
    min-height: 100%;
    padding-top: 3.5rem;
}

.kf-branch-type .kf-branch-title {
    color: var(--kf-band-text);
    font-size: 1.1875rem;
}

.kf-branch-type .kf-branch-copy {
    color: var(--kf-band-dim);
}

.kf-branch-type .kf-branch-cta {
    color: var(--kf-amber-bright);
}

/* ============================================================
   (8) FINALE
   ============================================================ */

.kf-final {
    background: var(--kf-band);
    color: var(--kf-band-text);
    padding: 6rem 0 6.5rem;
    text-align: center;
}

.kf-final-h2 {
    margin: 0 0 1.1rem;
    font-size: clamp(2.375rem, 5.4vw, 4.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.028em;
    color: var(--kf-band-text);
}

.kf-final-sub {
    margin: 0 auto;
    max-width: 32rem;
    font-size: 1.0625rem;
    color: var(--kf-band-dim);
}

.kf-final-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.4rem;
}

.kf-final-note {
    margin: 2.2rem 0 0;
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kf-band-dim);
}

/* ============================================================
   Reveal-Choreografie (Hooks aus design-routes.js: .kr-js/.kr-in)
   ============================================================ */

.kr-js .ksv-route-f [data-kr-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.kr-js .ksv-route-f [data-kr-reveal].kr-in {
    opacity: 1;
    transform: none;
}

/* Stagger: Shelf-Kacheln + Branchen-Kacheln laufen versetzt ein */
.kr-js .ksv-route-f .kf-shelf-grid .kf-shelf-tile,
.kr-js .ksv-route-f .kf-branch-grid .kf-branch {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.kr-js .ksv-route-f .kf-shelf-grid.kr-in .kf-shelf-tile,
.kr-js .ksv-route-f .kf-branch-grid.kr-in .kf-branch {
    opacity: 1;
    transform: none;
}

.kr-js .ksv-route-f .kr-in .kf-shelf-tile:nth-child(2),
.kr-js .ksv-route-f .kr-in .kf-branch:nth-child(2) { transition-delay: .08s; }
.kr-js .ksv-route-f .kr-in .kf-shelf-tile:nth-child(3),
.kr-js .ksv-route-f .kr-in .kf-branch:nth-child(3) { transition-delay: .16s; }
.kr-js .ksv-route-f .kr-in .kf-shelf-tile:nth-child(4),
.kr-js .ksv-route-f .kr-in .kf-branch:nth-child(4) { transition-delay: .24s; }
.kr-js .ksv-route-f .kr-in .kf-shelf-tile:nth-child(5),
.kr-js .ksv-route-f .kr-in .kf-branch:nth-child(5) { transition-delay: .32s; }
.kr-js .ksv-route-f .kr-in .kf-shelf-tile:nth-child(6) { transition-delay: .4s; }

/* ============================================================
   Reduced Motion: alles sichtbar, nichts bewegt sich
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .kr-js .ksv-route-f [data-kr-reveal],
    .kr-js .ksv-route-f .kf-shelf-grid .kf-shelf-tile,
    .kr-js .ksv-route-f .kf-branch-grid .kf-branch {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ksv-route-f .kf-ticker-track {
        animation: none;
    }

    .ksv-route-f .kf-pulse::after {
        animation: none;
        opacity: 0;
    }

    .ksv-route-f .kf-btn,
    .ksv-route-f .kf-door,
    .ksv-route-f .kf-door-arrow,
    .ksv-route-f .kf-shelf-tile a,
    .ksv-route-f .kf-branch a,
    .ksv-route-f .kf-branch-imgbox img {
        transition: none;
    }

    .ksv-route-f .kf-btn:hover,
    .ksv-route-f .kf-door:hover,
    .ksv-route-f .kf-shelf-tile a:hover,
    .ksv-route-f .kf-branch a:hover,
    .ksv-route-f .kf-branch-photo a:hover .kf-branch-imgbox img {
        transform: none;
    }
}

/* ============================================================
   Mobile-Feinschliff
   ============================================================ */

@media (max-width: 47.9375em) {
    .kf-hero {
        padding-top: 3rem;
    }

    .kf-section {
        padding: 3.5rem 0;
    }

    .kf-feature-img {
        max-height: 400px;
    }

    .kf-final {
        padding: 4.5rem 0 5rem;
    }
}