/* Startseite — hell, ruhig, wenig Farbe, große Schrift.
   Bewegung nur dort, wo sie etwas zeigt. */
.kf-start{
  --kf-paper:#fff; --kf-ink:#101619; --kf-ink-2:#445257; --kf-ink-3:#677376;
  --kf-rule:#dbe1e0; --kf-wash:#f2f5f4;
  --kf-accent:#0f5b52; --kf-accent-2:#2f7d72; --kf-accent-4:#93bdb5;
  --kf-pos:#0e7a45; --kf-neg:#c0281c;
  --kf-weich:cubic-bezier(.22,.75,.28,1);
  max-width:1040px; margin:0 auto; padding:0 20px 72px;
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  color:var(--kf-ink); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* der weiche Schein hinter dem Titel darf nicht breit machen */
}
.kf-start *{box-sizing:border-box}

/* ---------------------------------------------------------- Einblenden */
/* Ohne Skript bleibt alles sichtbar — .kf-bewegt setzt das Skript selbst. */
.kf-start.kf-bewegt .kf-auf{opacity:0; transform:translateY(16px)}
.kf-start.kf-bewegt .kf-auf.kf-da{
  opacity:1; transform:none;
  transition:opacity .75s var(--kf-weich), transform .75s var(--kf-weich);
}
.kf-start.kf-bewegt .kf-held .kf-auf:nth-child(2).kf-da{transition-delay:.07s}
.kf-start.kf-bewegt .kf-held .kf-auf:nth-child(3).kf-da{transition-delay:.14s}
.kf-start.kf-bewegt .kf-held .kf-auf:nth-child(4).kf-da{transition-delay:.20s}
.kf-start.kf-bewegt .kf-schau.kf-da{transition-delay:.26s}
.kf-start.kf-bewegt .kf-was article:nth-child(2).kf-da{transition-delay:.09s}
.kf-start.kf-bewegt .kf-was article:nth-child(3).kf-da{transition-delay:.18s}

/* ------------------------------------------------------------- Kopfzeile */
/* Der Seitentitel des Themes doppelt unsere Überschrift — auf unseren Seiten weg. */
body.kf-ohne-titel .wp-block-post-title,
body.kf-ohne-titel .entry-title,
body.kf-ohne-titel .page-title,
body.kf-ohne-titel header.entry-header{display:none !important}

/* Nackter Kopf: Marke, Logo und die übrigen Menüpunkte bleiben auf den
   Kapitalfluss-Seiten aus. Nur der Konto-Knopf bleibt stehen. */
/* Unsichtbar, aber der Platz bleibt: sonst rutscht das Menü nach links,
   weil die Marke als Gegengewicht fehlt. */
body.kf-nackt .site-title,
body.kf-nackt .site-description,
body.kf-nackt .custom-logo-link,
body.kf-nackt .wp-block-site-title,
body.kf-nackt .wp-block-site-logo,
body.kf-nackt .wp-block-site-tagline{visibility:hidden !important}

body.kf-nackt .menu-item:not(.kf-menu-eintrag),
body.kf-nackt .wp-block-navigation-item:not(.kf-menu-eintrag),
body.kf-nackt .wp-block-page-list{display:none !important}

/* Der Knopf rutscht ans rechte Ende, wo sonst das Menü stand. */
body.kf-nackt .kf-menu-eintrag{margin-left:auto}

/* Auf dem Handy klappen Themes ihr Menü in einen Burger. Da steckt bei uns
   aber nur noch der Anmeldeknopf drin — der Burger wäre eine Tür vor einer
   Tür. Also: Burger weg, Menü immer offen, Knopf oben rechts. */
body.kf-nackt .menu-toggle,
body.kf-nackt .mobile-menu-toggle,
body.kf-nackt .nav-toggle,
body.kf-nackt .hamburger,
body.kf-nackt button.navbar-toggler,
body.kf-nackt .wp-block-navigation__responsive-container-open,
body.kf-nackt .wp-block-navigation__responsive-container-close,
body.kf-nackt .toggle-menu,
body.kf-nackt .menu-mobile-toggle,
body.kf-nackt .et_mobile_nav_menu,
body.kf-nackt .elementor-menu-toggle{display:none !important}

/* Das eingeklappte Menü wieder ausklappen — sonst versteckt es unseren Knopf.
   Wichtig: nur die Liste, in der unser Knopf wirklich steckt. Vorher hieß die
   Regel schlicht „.nav-menu“ und „.main-navigation ul“ — und manche Themes
   benutzen diese Namen auch für Behälter, in denen der Seiteninhalt liegt.
   Dann wurde der ganze Inhalt zur Flex-Reihe und quetschte sich zusammen. */
body.kf-nackt .wp-block-navigation__responsive-container:not(.is-menu-open):has(.kf-menu-eintrag){
	display:block !important; position:static !important; background:none !important;
	width:auto !important; height:auto !important; padding:0 !important; z-index:auto !important}
body.kf-nackt .wp-block-navigation__responsive-container-content:has(.kf-menu-eintrag){
	display:flex !important; justify-content:flex-end}
body.kf-nackt ul:has(> .kf-menu-eintrag){
	display:flex !important; justify-content:flex-end;
	position:static !important; opacity:1 !important; visibility:visible !important;
	max-height:none !important; transform:none !important; overflow:visible !important}

/* Fällt der Knopf trotzdem in eine eigene Zeile, sitzt er wenigstens rechts
   und auf gleicher Höhe wie der Rest der Kopfzeile. */
@media (max-width:782px){
	body.kf-nackt .kf-menu-eintrag{margin-left:auto; justify-content:flex-end}
	body.kf-nackt .kf-konto-ecke{margin-left:auto}
	body.kf-nackt .kf-kopf--lose{padding-top:0}
}

/* Themes packen gern 60–100 px Luft über den Inhalt. Auf unseren Seiten nicht. */
body.kf-seite .entry-content,
body.kf-seite .wp-block-post-content,
body.kf-seite .site-main,
body.kf-seite main{padding-top:0 !important; margin-top:0 !important}
body.kf-seite .kf-start{padding-top:0}

/* Der Knopf im Menü des Themes */
.kf-menu-eintrag{display:flex; align-items:center; list-style:none}
.kf-menu-eintrag > a{display:none}          /* falls das Theme selbst einen Link erwartet */
.kf-konto-ecke{position:relative; display:inline-flex; align-items:center; gap:10px;
  --kf-paper:#fff; --kf-ink:#101619; --kf-ink-2:#445257; --kf-ink-3:#677376;
  --kf-rule:#dbe1e0; --kf-wash:#f2f5f4; --kf-accent:#0f5b52; --kf-neg:#c0281c;}

/* Ohne Menü: oben rechts in der Seite */
.kf-kopf--lose{display:flex; justify-content:flex-end; padding:14px 0 0; position:relative; z-index:30}

.kf-anmelde-knopf{
  font:inherit; font-size:14.5px; font-weight:500; line-height:1.2; color:var(--kf-ink, #101619); cursor:pointer;
  background:none; border:1px solid var(--kf-rule, #dbe1e0); border-radius:99px; padding:8px 18px;
  transition:background .15s ease, border-color .15s ease, color .15s ease; white-space:nowrap;
}
.kf-anmelde-knopf:hover{border-color:var(--kf-accent, #0f5b52); color:var(--kf-accent, #0f5b52)}
.kf-anmelde-knopf[aria-expanded="true"]{background:var(--kf-accent, #0f5b52); border-color:var(--kf-accent, #0f5b52); color:#fff}

.kf-fenster{
  position:absolute; right:0; top:calc(100% + 12px); width:min(340px,calc(100vw - 32px));
  background:var(--kf-paper, #fff); border:1px solid var(--kf-rule, #dbe1e0); border-radius:14px; padding:22px;
  box-shadow:0 26px 54px -28px rgba(16,22,25,.55); text-align:left; z-index:80;
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; color:var(--kf-ink, #101619);
  --kf-paper:#fff; --kf-ink:#101619; --kf-ink-2:#445257; --kf-ink-3:#677376;
  --kf-rule:#dbe1e0; --kf-wash:#f2f5f4; --kf-accent:#0f5b52; --kf-accent-4:#93bdb5;
  --kf-weich:cubic-bezier(.22,.75,.28,1); line-height:1.6;
}
.kf-fenster[hidden]{display:none}

/* Auf dem Handy hat ein 340-Pixel-Fenster neben dem Knopf keinen Platz — es
   ragt links aus dem Bild. Also wird es dort zu einer Karte, die mittig unter
   der Kopfzeile steht und den Rand beider Seiten einhält. */
@media (max-width:600px){
  .kf-fenster{
    position:fixed; left:0; right:0; top:auto; bottom:0; margin:0 auto;
    width:auto; max-width:460px; max-height:88vh; overflow-y:auto;
    border-radius:20px 20px 0 0; border-bottom:0; padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 60px -20px rgba(16,22,25,.5);
    animation:kf-hoch .22s var(--kf-weich, ease) both;
  }
  .kf-fenster::before{
    content:""; display:block; width:38px; height:4px; border-radius:2px;
    background:var(--kf-rule, #dbe1e0); margin:-6px auto 16px;
  }
  .kf-fenster h3{font-size:18px; text-align:center; margin-bottom:18px}
  .kf-fenster .kf-form > button{width:100%; padding:15px 20px; font-size:16px}
  .kf-fenster .kf-form input[type=text],
  .kf-fenster .kf-form input[type=email],
  .kf-fenster .kf-form input[type=password]{
    box-sizing:border-box; width:100%; font-size:16px}   /* unter 16px zoomt iOS hinein */
  /* Der Rest der Seite tritt zurück, solange das Blatt offen ist. */
  .kf-fenster::after{
    content:""; position:fixed; inset:0 0 0 0; bottom:100%; height:200vh;
    background:rgba(16,22,25,.42); z-index:-1; pointer-events:none;
  }
  .kf-fuss-zeile{justify-content:center; gap:10px 18px; margin-top:18px}
}
@keyframes kf-hoch{from{transform:translateY(26px); opacity:0}
                   to{transform:translateY(0); opacity:1}}
.kf-fenster h3{font-size:16px; font-weight:600; margin:0 0 16px}
.kf-fenster .kf-form label{margin-bottom:13px}
.kf-fenster .kf-details{margin-top:16px; font-size:13px}
.kf-fuss-zeile{display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 0 0}
.kf-wechsel{
  font:inherit; font-size:13px; color:var(--kf-accent, #0f5b52); background:none; border:0; padding:0;
  cursor:pointer; border-bottom:1px solid transparent;
}
.kf-wechsel:hover{border-bottom-color:currentColor}

.kf-avatar{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--kf-rule, #dbe1e0); background:var(--kf-wash, #f2f5f4);
  color:var(--kf-ink-2, #445257); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  display:grid; place-items:center; transition:.15s; padding:0;
}
.kf-avatar:hover{border-color:var(--kf-accent, #0f5b52); color:var(--kf-accent, #0f5b52)}
.kf-avatar[aria-expanded="true"]{background:var(--kf-accent, #0f5b52); border-color:var(--kf-accent, #0f5b52); color:#fff}
.kf-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:226px; text-align:left; z-index:80;
  background:var(--kf-paper, #fff); border:1px solid var(--kf-rule, #dbe1e0); border-radius:12px; padding:6px;
  box-shadow:0 22px 44px -26px rgba(16,22,25,.55);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; line-height:1.5;
}
.kf-menu[hidden]{display:none}
.kf-menu-kopf{padding:9px 11px 11px; border-bottom:1px solid var(--kf-rule, #dbe1e0); margin-bottom:5px}
.kf-menu-kopf b{display:block; font-size:14.5px; color:var(--kf-ink, #101619); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kf-menu-kopf span{display:block; font-size:12.5px; color:var(--kf-ink-3, #677376); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Doppelt gewichtet, damit die Farbregel des Themes nicht gewinnt — sonst
   standen „Einstellungen“ und „Support“ im Dunkelmodus grau auf grau. */
.kf-menu a[role="menuitem"]{display:block; padding:9px 11px; font-size:14.5px;
  color:var(--kf-ink, #101619); text-decoration:none; border-radius:7px}
.kf-menu a[role="menuitem"]:hover,.kf-menu a[role="menuitem"]:focus{
  background:var(--kf-wash, #f2f5f4); color:var(--kf-accent, #0f5b52); outline:none}
.kf-menu a[role="menuitem"].kf-menu-ab{color:var(--kf-ink-2, #445257); border-top:1px solid var(--kf-rule, #dbe1e0); margin-top:5px; padding-top:11px}
.kf-menu a[role="menuitem"].kf-menu-ab:hover{color:var(--kf-neg, #c0281c)}

/* ------------------------------------------------------------------ Held */
.kf-held{position:relative; padding:28px 0 26px; text-align:center; max-width:780px; margin:0 auto}
.kf-held::before{
  content:""; position:absolute; inset:-120px -40% auto; height:620px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 52% at 28% 18%, rgba(15,91,82,.13), transparent 70%),
    radial-gradient(40% 46% at 74% 6%, rgba(47,125,114,.11), transparent 72%),
    radial-gradient(60% 60% at 50% 34%, rgba(15,91,82,.06), transparent 72%);
  animation:kf-schweben 18s ease-in-out infinite alternate;
}
@keyframes kf-schweben{
  from{transform:translate3d(-1.2%,0,0) scale(1)}
  to{transform:translate3d(1.2%,-1.5%,0) scale(1.05)}
}
/* Feines Raster im Hintergrund — sichtbar nur, wenn man darauf achtet. */
.kf-start{position:relative}
.kf-start::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--kf-rule) 1px, transparent 1px),
                   linear-gradient(90deg, var(--kf-rule) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 55% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%, #000 0%, transparent 75%);
}
.kf-marke-zeile{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 18px;
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  color:var(--kf-accent); background:rgba(15,91,82,.07); border-radius:99px; padding:7px 16px;
}
.kf-punkt{width:7px; height:7px; border-radius:50%; background:var(--kf-accent); position:relative}
.kf-punkt::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--kf-accent); opacity:.5; animation:kf-puls 2.4s ease-out infinite;
}
@keyframes kf-puls{0%{transform:scale(.7);opacity:.6} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0}}

.kf-held h1{
  font-size:clamp(40px,7.4vw,70px); line-height:1.03; letter-spacing:-.032em;
  font-weight:600; margin:0 0 22px; color:var(--kf-ink);
}
.kf-hell{
  background:linear-gradient(100deg, var(--kf-accent) 0%, #2f7d72 55%, #4d968b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kf-lead{font-size:clamp(17px,2.2vw,20px); color:var(--kf-ink-2); margin:0 auto 30px; max-width:34em}
.kf-lead-klein{font-size:16px; color:var(--kf-ink-2); margin:0 0 22px}
.kf-tat{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin:0}
.kf-cta{
  display:inline-block; font:inherit; border:0; cursor:pointer; background:var(--kf-accent); color:#fff; text-decoration:none;
  font-size:17px; font-weight:600; padding:15px 34px; border-radius:11px;
  box-shadow:0 1px 2px rgba(16,22,25,.16);
  transition:background .18s ease, transform .18s var(--kf-weich), box-shadow .18s ease;
}
.kf-cta:hover,.kf-cta:focus-visible{
  background:#0b463f; color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(15,91,82,.55);
}
.kf-cta:active{transform:translateY(0)}
.kf-still{
  display:inline-block; color:var(--kf-accent); text-decoration:none; font-size:16px; font-weight:500;
  padding:15px 12px; border-bottom:1px solid transparent; transition:border-color .18s ease;
}
.kf-still:hover{border-bottom-color:var(--kf-accent-4)}
.kf-klein{font-size:13.5px; color:var(--kf-ink-3); margin:14px 0 0}
.kf-held .kf-klein{display:inline-flex; flex-wrap:wrap; gap:6px 14px; justify-content:center}
.kf-nano{font-size:12.5px; color:var(--kf-ink-3); margin:8px 0 0; line-height:1.5}

/* Schaufenster unter dem Held */
.kf-schau{margin:44px 0 0; padding:0}
.kf-schau svg{
  display:block; width:100%; height:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,245,244,.75));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--kf-rule); border-radius:20px; padding:16px;
  box-shadow:0 30px 60px -34px rgba(16,22,25,.55), 0 1px 0 rgba(255,255,255,.9) inset;
  transition:transform .5s var(--kf-weich), box-shadow .5s ease;
}
.kf-schau:hover svg{transform:translateY(-4px); box-shadow:0 40px 70px -34px rgba(16,22,25,.5)}
.kf-schau-wert{margin-top:16px; text-align:center}
.kf-schau-wert b{
  display:block; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(26px,4.4vw,34px); font-weight:500; letter-spacing:-.02em; color:var(--kf-ink);
}
.kf-schau-wert span{display:block; font-size:13px; color:var(--kf-ink-3); margin-top:4px}

/* Linie zeichnet sich, Kreuz kommt danach */
.kf-bewegt .kf-schau .kf-strich{stroke-dasharray:1400; stroke-dashoffset:1400}
.kf-bewegt .kf-schau.kf-da .kf-strich{animation:kf-zeichnen 1.6s var(--kf-weich) .1s forwards}
.kf-bewegt .kf-schau .kf-flaeche,.kf-bewegt .kf-schau .kf-kreuz{opacity:0}
.kf-bewegt .kf-schau.kf-da .kf-flaeche{animation:kf-ein .8s ease .9s forwards}
.kf-bewegt .kf-schau.kf-da .kf-kreuz{animation:kf-ein .5s ease 1.35s forwards}
@keyframes kf-zeichnen{to{stroke-dashoffset:0}}
@keyframes kf-ein{to{opacity:1}}

/* ------------------------------------------------------------ Drei Karten */
.kf-was{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:36px; padding:64px 0 12px}
.kf-was article{min-width:0}
.kf-bild{margin-bottom:20px}
.kf-bild svg{
  display:block; width:100%; height:auto; border:1px solid var(--kf-rule); border-radius:14px;
  transition:transform .35s var(--kf-weich), box-shadow .35s ease, border-color .35s ease;
}
.kf-was article:hover .kf-bild svg{
  transform:translateY(-5px) scale(1.012); border-color:var(--kf-accent-4);
  box-shadow:0 22px 34px -22px rgba(16,22,25,.5);
}
.kf-was h2{transition:color .25s ease}
.kf-was article:hover h2{color:var(--kf-accent)}
.kf-was h2{font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0 0 8px; color:var(--kf-ink)}
.kf-was p{font-size:15px; color:var(--kf-ink-2); margin:0}

/* --------------------------------------------------------- Dunkles Band */
.kf-band-dunkel{
  margin:72px 0 0; border-radius:22px; overflow:hidden; position:relative;
  background:linear-gradient(140deg, #0d211f 0%, #123b35 55%, #0f5b52 130%);
  color:#eef3f2;
}
.kf-band-dunkel::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 80% at 15% 0%, rgba(147,189,181,.28), transparent 60%);
}
.kf-band-innen{position:relative; padding:clamp(32px,5vw,56px)}
.kf-band-dunkel h2{
  font-size:clamp(22px,3.2vw,30px); font-weight:600; letter-spacing:-.02em; margin:0 0 28px; color:#fff;
}
.kf-drei{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px 36px}
.kf-drei div{border-top:1px solid rgba(255,255,255,.22); padding-top:14px}
.kf-drei b{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#93bdb5; margin-bottom:8px;
}
.kf-drei span{display:block; font-size:15.5px; line-height:1.6; color:#dbe6e4}

/* ------------------------------------------------------------- Schritte */
.kf-schritte{padding:64px 0 8px}
.kf-schritte h2,.kf-quellen h2,.kf-fragen h2,.kf-konto h2{
  font-size:clamp(24px,3.4vw,30px); font-weight:600; letter-spacing:-.02em; margin:0 0 22px;
}
.kf-schritte ol{
  list-style:none; counter-reset:kf; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px;
}
.kf-schritte li{counter-increment:kf; padding-top:14px; border-top:2px solid var(--kf-rule); transition:border-color .3s ease}
.kf-schritte li:hover{border-top-color:var(--kf-accent)}
.kf-schritte li::before{
  content:counter(kf); display:block; font-family:"IBM Plex Mono",monospace;
  font-size:13px; color:var(--kf-accent); margin-bottom:8px;
}
.kf-schritte b{display:block; font-size:17px; font-weight:600; margin-bottom:6px}
.kf-schritte p{margin:0; font-size:15px; color:var(--kf-ink-2)}

/* -------------------------------------------------------------- Quellen */
.kf-quellen{padding:64px 0 8px}
.kf-quellen dl{margin:0; display:grid; gap:0}
.kf-quellen dl > div{
  display:grid; grid-template-columns:180px 1fr; gap:8px 28px;
  padding:20px 0; border-top:1px solid var(--kf-rule);
}
.kf-quellen dl > div:last-child{border-bottom:1px solid var(--kf-rule)}
.kf-quellen dt{font-weight:600; font-size:16px}
.kf-quellen dd{margin:0; font-size:15px; color:var(--kf-ink-2)}
.kf-quellen dd b{color:var(--kf-ink); font-weight:600}

/* ---------------------------------------------------------------- Konto */
.kf-konto{border-top:1px solid var(--kf-rule); margin-top:64px; padding-top:44px; scroll-margin-top:20px}
.kf-konto h2{margin-bottom:10px}
.kf-konto .kf-lead-klein{margin-bottom:28px}
.kf-karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:26px}
.kf-karte{
  border:1px solid var(--kf-rule); border-radius:16px; padding:28px; background:var(--kf-paper);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s var(--kf-weich);
}
.kf-karte:hover{box-shadow:0 16px 34px -28px rgba(16,22,25,.6)}
.kf-karte:focus-within{border-color:var(--kf-accent-4); box-shadow:0 16px 34px -26px rgba(15,91,82,.6)}
.kf-karte--still{background:var(--kf-wash); border-style:dashed}
.kf-karte--still:hover{box-shadow:none}
.kf-karte h3{font-size:17px; font-weight:600; margin:0 0 18px}

.kf-karte form p{margin:0 0 14px}
.kf-form label,.kf-karte label{display:block; font-size:13px; font-weight:500; color:var(--kf-ink-2); margin-bottom:14px}
.kf-form input,.kf-karte input[type=text],.kf-karte input[type=email],.kf-karte input[type=password]{
  display:block; width:100%; margin-top:6px; font:inherit; font-size:16px; color:var(--kf-ink);
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:10px; padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.kf-form input:focus,.kf-karte input:focus{outline:none; border-color:var(--kf-accent); box-shadow:0 0 0 3px rgba(15,91,82,.12)}
.kf-karte .login-remember{font-size:13px; color:var(--kf-ink-3)}
.kf-karte .login-remember input{width:auto; display:inline-block; margin:0 6px 0 0}
.kf-form > button,.kf-karte input[type=submit]{
  width:100%; font:inherit; font-size:16px; font-weight:600; color:#fff; background:var(--kf-accent);
  border:0; border-radius:10px; padding:13px 20px; cursor:pointer; margin-top:4px;
  transition:background .18s ease, transform .18s var(--kf-weich);
}
.kf-form > button:hover,.kf-karte input[type=submit]:hover{background:#0b463f; transform:translateY(-1px)}
.kf-form > button:active,.kf-karte input[type=submit]:active{transform:none}
.kf-karte a{color:var(--kf-accent)}
.kf-honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Passwortfelder mit Auge */
.kf-pw{position:relative; display:block}
.kf-pw input{padding-right:44px !important}
.kf-auge{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; border-radius:8px; color:var(--kf-ink-3); cursor:pointer; padding:0;
  transition:color .15s ease, background .15s ease;
}
.kf-auge:hover{color:var(--kf-accent); background:var(--kf-wash)}
.kf-auge[aria-pressed="true"]{color:var(--kf-accent)}
.kf-auge svg{display:block}

/* Wie tragfähig ist das Passwort */
.kf-staerke[hidden]{display:none}
.kf-staerke{display:flex; align-items:center; gap:10px; margin:-6px 0 14px}
.kf-staerke > span{
  flex:1; height:5px; border-radius:3px; background:var(--kf-rule); position:relative; overflow:hidden;
}
.kf-staerke > span::after{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--kf-anteil,0%);
  background:var(--kf-farbe,var(--kf-accent)); border-radius:3px;
  transition:width .3s var(--kf-weich), background .3s ease;
}
.kf-staerke em{font-style:normal; font-size:12px; color:var(--kf-ink-3); min-width:8ch}

/* Häkchen */
.kf-haken{display:flex !important; align-items:center; gap:9px; margin-bottom:16px !important; cursor:pointer}
.kf-haken input{width:auto !important; margin:0 !important; accent-color:var(--kf-accent)}
.kf-haken span{font-weight:400; color:var(--kf-ink-2)}

.kf-karten--eins{grid-template-columns:minmax(0,460px)}
.kf-hilfen{display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:24px}
.kf-tat--links{justify-content:flex-start; margin-top:28px}

.kf-details{margin-top:26px; font-size:14px}
.kf-hilfen .kf-details{margin-top:0}
.kf-details summary{cursor:pointer; color:var(--kf-ink-2)}
.kf-form--schmal{max-width:380px; margin-top:16px}

/* ------------------------------------------------- Eigene Einstellungsseite */
/* Untereinander statt in Kästen: links steht, worum es geht, rechts das Feld. */
/* Die Seite hat ein Maß: über tausend Pixel Formularbreite liest niemand
   gern, und daneben klafft sonst eine leere Hälfte. */
.kf-ein{max-width:1080px}

/* Jeder Abschnitt ist eine Karte — so sieht man, wo einer aufhört. */
.kf-abschnitt{
  scroll-margin-top:20px; margin-top:26px; padding:28px 30px 8px;
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:18px;
}
.kf-abschnitt h2{font-size:clamp(20px,2.4vw,24px); font-weight:600; letter-spacing:-.02em; margin:0 0 8px}
.kf-abschnitt > .kf-lead-klein{margin-bottom:4px; max-width:62ch}
.kf-reihe{
  display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:10px 48px;
  padding:26px 0; border-top:1px solid var(--kf-rule);
}
.kf-reihe:first-of-type{border-top:1px solid var(--kf-rule); margin-top:22px}
.kf-reihe:last-child{border-bottom:0}
.kf-reihe-kopf h3{font-size:16px; font-weight:600; margin:0 0 6px}
.kf-reihe-kopf p{margin:0; font-size:13.5px; color:var(--kf-ink-3); line-height:1.6; max-width:36ch}
.kf-feld{max-width:560px}
.kf-feld--weit{max-width:none}
.kf-feld > .kf-band{margin-bottom:16px}
.kf-feld .kf-details{margin-top:18px}
.kf-feld .kf-nano{margin-top:10px}
.kf-abschnitt .kf-form > button{width:auto; padding:12px 24px; margin-top:6px}
.kf-abschnitt .kf-tat{margin-top:0; padding:26px 0; border-top:1px solid var(--kf-rule)}

@media (max-width:760px){
  .kf-abschnitt{padding:22px 18px 6px; border-radius:14px; margin-top:18px}
  .kf-reihe{grid-template-columns:1fr; gap:14px; padding:22px 0}
  .kf-reihe-kopf p{max-width:none}
  .kf-feld{max-width:none}
  .kf-abschnitt .kf-form > button{width:100%}
}

/* Kein Riesenabstand über der Überschrift: darüber steht schon der Kopf
   des Themes, und zusammen wurde daraus ein halber leerer Bildschirm. */
.kf-ein-titel{font-size:clamp(28px,4vw,38px); font-weight:600; letter-spacing:-.025em; margin:22px 0 12px}
.kf-ein-nav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px}
.kf-ein-nav a{font-size:13.5px; color:var(--kf-ink-2); text-decoration:none;
  border:1px solid var(--kf-rule); border-radius:99px; padding:6px 14px; transition:.15s}
.kf-ein-nav a:hover{border-color:var(--kf-accent); color:var(--kf-accent)}
.kf-opt{font-weight:400; color:var(--kf-ink-3); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase}
.kf-form select,.kf-form textarea{
  display:block; width:100%; margin-top:6px; font:inherit; font-size:16px; color:var(--kf-ink);
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:10px; padding:11px 13px;
}
.kf-form textarea{resize:vertical; line-height:1.5}
.kf-form select:focus,.kf-form textarea:focus{outline:none; border-color:var(--kf-accent); box-shadow:0 0 0 3px rgba(15,91,82,.12)}
.kf-liste{margin:12px 0 0; padding-left:20px; font-size:14px; color:var(--kf-ink-2); line-height:1.65}
.kf-liste li{margin-bottom:7px}
.kf-liste a{color:var(--kf-accent)}
.kf-zahlen{margin:0; font-size:14.5px}
.kf-zahlen{max-width:520px}
.kf-zahlen > div{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--kf-rule)}
.kf-zahlen dt{color:var(--kf-ink-2)}
.kf-zahlen dd{margin:0; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
.kf-zahlen dd.pos{color:var(--kf-pos)} .kf-zahlen dd.neg{color:var(--kf-neg)}
.kf-zahlen-summe{border-bottom:0 !important; padding-top:14px !important}
.kf-zahlen-summe dt{font-weight:600; color:var(--kf-ink) !important}
.kf-zahlen-summe dd{font-size:19px}

/* --------------------------------------------------------------- Fragen */
.kf-fragen{padding:64px 0 0}
.kf-fragen details{border-bottom:1px solid var(--kf-rule)}
.kf-fragen details:first-of-type{border-top:1px solid var(--kf-rule)}
.kf-fragen summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-size:17px; font-weight:500; transition:color .2s ease;
}
.kf-fragen summary::-webkit-details-marker{display:none}
.kf-fragen summary:hover{color:var(--kf-accent)}
.kf-fragen summary::after{
  content:""; position:absolute; right:6px; top:26px; width:9px; height:9px;
  border-right:2px solid var(--kf-ink-3); border-bottom:2px solid var(--kf-ink-3);
  transform:rotate(45deg); transition:transform .25s var(--kf-weich);
}
.kf-fragen details[open] summary::after{transform:rotate(-135deg); top:30px}
.kf-fragen p{margin:0 0 20px; font-size:15px; color:var(--kf-ink-2); max-width:62ch}
.kf-fragen details[open] p{animation:kf-auf .35s var(--kf-weich)}
@keyframes kf-auf{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* --------------------------------------------------------------- Bänder */
.kf-band{border-radius:11px; padding:13px 16px; font-size:14.5px; margin:0 0 20px}
.kf-band--gut{background:#e8f3ec; color:#0b5c34; border:1px solid #bfe0cd}
.kf-band--warn{background:#fdeeec; color:#8e1f16; border:1px solid #f2c9c4}
.kf-bewegt .kf-band{animation:kf-band-ein .45s var(--kf-weich)}
@keyframes kf-band-ein{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

.kf-fuss{margin-top:64px; padding-top:26px; border-top:1px solid var(--kf-rule);
  font-size:13px; color:var(--kf-ink-3); text-align:center}
.kf-fuss p{margin:0}
.kf-fuss-links{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; margin-top:12px !important}
.kf-fuss-links a{color:var(--kf-ink-2); text-decoration:none; border-bottom:1px solid var(--kf-rule)}
.kf-fuss-links a:hover{color:var(--kf-accent); border-bottom-color:currentColor}

@media (max-width:600px){
  .kf-held{padding:52px 0 12px}
  .kf-was{gap:30px; padding:48px 0 8px}
  .kf-schritte,.kf-quellen,.kf-fragen{padding-top:48px}
  .kf-konto{margin-top:48px; padding-top:44px}
  .kf-karte{padding:22px}
  .kf-quellen dl > div{grid-template-columns:1fr; gap:4px}
  .kf-schau svg{padding:8px; border-radius:14px}
}

/* Wer weniger Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  .kf-held::before,.kf-punkt::after{animation:none !important}
  .kf-start *,.kf-start *::before,.kf-start *::after{
    animation:none !important; transition:none !important;
  }
  .kf-start .kf-auf{opacity:1 !important; transform:none !important}
}

/* Dieselbe Befreiung wie in kapitalfluss.css — Startseite, Einstellungen
   und Support hängen im selben engen Kasten des Themes. */
body.kf-seite .entry-content,
body.kf-seite .wp-block-post-content,
body.kf-seite .site-main,
body.kf-seite .content-area,
body.kf-seite .wp-site-blocks,
body.kf-seite .is-layout-constrained,
body.kf-seite #primary,
body.kf-seite #content{ max-width:none !important; width:auto !important }
body.kf-seite .is-layout-constrained > *,
body.kf-seite .entry-content > *,
body.kf-seite .wp-block-post-content > *{
  max-width:none !important; margin-left:0 !important; margin-right:0 !important }

/* Ausnahme: die Startseite. Aus dem engen Kasten des Themes soll sie heraus —
   ihre eigene Breite behält sie aber, sonst läuft der Text über die ganze
   Bildschirmbreite und wird unlesbar. Am Telefon gilt weiter der Vollbild-
   Ausbruch weiter unten, deshalb erst ab 641 px. */
@media (min-width:641px){
  body.kf-seite .is-layout-constrained > .kf-start,
  body.kf-seite .entry-content > .kf-start,
  body.kf-seite .wp-block-post-content > .kf-start{
    margin-left:auto !important; margin-right:auto !important }
  body.kf-seite .is-layout-constrained > .kf-lp,
  body.kf-seite .entry-content > .kf-lp,
  body.kf-seite .wp-block-post-content > .kf-lp{ max-width:1120px !important }

  /* Support und Einstellungen sind Lesetexte, keine Schaufenster — sie
     bleiben schmaler als die Startseite, sonst laufen die Zeilen über die
     ganze Breite und niemand findet den Zeilenanfang wieder. */
  body.kf-seite .is-layout-constrained > .kf-support,
  body.kf-seite .entry-content > .kf-support,
  body.kf-seite .wp-block-post-content > .kf-support,
  body.kf-seite .is-layout-constrained > .kf-ein,
  body.kf-seite .entry-content > .kf-ein,
  body.kf-seite .wp-block-post-content > .kf-ein{
    max-width:860px !important }
}

/* ------------------------------------------------------- Konto löschen */
/* Der gefährliche Teil sieht auch gefährlich aus — aber erst, wenn man ihn
   aufklappt. Ungefragt schreit hier nichts rot. */
.kf-knopf--still{
  background:none !important; border:1px solid var(--kf-rule) !important;
  color:var(--kf-ink-2) !important; font-weight:500 !important;
}
.kf-knopf--still:hover{ border-color:var(--kf-accent) !important; color:var(--kf-accent) !important }

.kf-gefahr{ margin-top:6px }
.kf-gefahr > summary{
  cursor:pointer; list-style:none; display:inline-block;
  font-size:13.5px; color:var(--kf-neg); padding:8px 0;
  border-bottom:1px solid transparent;
}
.kf-gefahr > summary::-webkit-details-marker{ display:none }
.kf-gefahr > summary:hover{ border-bottom-color:currentColor }
.kf-gefahr[open]{
  border:1px solid color-mix(in srgb, var(--kf-neg) 30%, transparent);
  border-radius:14px; padding:16px 18px; margin-top:14px;
  background:color-mix(in srgb, var(--kf-neg) 5%, transparent);
}
.kf-gefahr[open] > summary{ color:var(--kf-neg); font-weight:600; margin-bottom:10px }
.kf-gefahr .kf-form > button{
  background:var(--kf-neg); border-color:var(--kf-neg); color:#fff; margin-top:4px;
}
.kf-gefahr .kf-form > button:hover{ filter:brightness(1.07) }


/* =====================================================================
   Handy: der Titelbereich.

   Zwei Dinge waren schlecht. Erstens stand der Text mittig — auf einem
   schmalen Bildschirm werden daraus neun ausgefranste Zeilen, die das Auge
   bei jedem Zeilenwechsel neu suchen lassen. Linksbündig liest sich das
   ruhig. Zweitens hängt der Kasten des Themes davor: manche geben ihm auf
   dem Handy so viel Rand, dass für den Inhalt kaum die Hälfte bleibt.
   Deshalb bricht der Bereich hier aus jedem Elternkasten aus und nimmt sich
   die volle Bildschirmbreite — mit eigenem, maßvollem Rand.
   ===================================================================== */
@media (max-width:640px){
  /* Nur die negativen Ränder — zusammen mit width:auto ergibt das exakt die
     Bildschirmbreite. Mit zusätzlichem width:100vw wäre der Kasten um die
     Polsterung des Themes zu breit und ragte rechts hinaus. */
  body.kf-seite .kf-start{
    width:auto; max-width:none;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding-left:20px; padding-right:20px;
  }

  .kf-held{ text-align:left; padding:16px 0 24px; max-width:none }
  .kf-held h1{
    font-size:clamp(32px,9vw,44px); line-height:1.08; letter-spacing:-.028em;
    margin:0 0 16px; text-wrap:balance;
  }
  .kf-marke-zeile{ margin-bottom:16px; font-size:11.5px; letter-spacing:.07em; padding:6px 13px }
  .kf-lead{
    margin:0 0 26px; max-width:none; text-align:left;
    font-size:16.5px; line-height:1.62;
  }
  .kf-tat{ justify-content:stretch; gap:10px }
  .kf-tat .kf-cta{ flex:1 1 100%; text-align:center; padding:16px 24px }
  .kf-tat .kf-still{ flex:1 1 100%; text-align:center }
  .kf-klein{ text-align:left }

  /* Der weiche Schein hinter dem Titel darf nicht über den Rand quellen. */
  .kf-held::before{ inset:-80px -10% auto; height:420px }
}

/* Die Polsterung, die Block-Themes an ihre Behälter hängen, gilt auf unseren
   Seiten nicht — sonst kommt sie doppelt und dreifach zusammen. */
body.kf-seite .has-global-padding,
body.kf-seite .wp-block-post-content,
body.kf-seite .entry-content{ padding-left:0 !important; padding-right:0 !important }
body.kf-seite .wp-block-post-title{ display:none }

/* =====================================================================
   Startseite, zweiter Aufbau: Held mit Beispieldepot, Problem, Karten,
   dunkles Band, Schritte, Ehrlichkeit, Fragen, Abschluss.

   Der Grundsatz bleibt: viel Weißraum, wenig Farbe, Bewegung nur da, wo
   sie etwas zeigt. Die Schriften bringt das Plugin selbst mit — nichts
   wird von einem fremden Server geladen, auch keine Google-Schrift.
   ===================================================================== */

/* .kf-lp ist nur die Startseite. Support und Einstellungen tragen dieselbe
   Wurzelklasse .kf-start (wegen Farben, Kopf und Knöpfen), sollen aber
   nicht das großzügige Abschnittsraster einer Landeseite bekommen —
   sonst klaffen dort 104 px Luft über und unter jedem Kasten. */
.kf-lp{ max-width:1120px }
.kf-lp section{ padding-block:clamp(56px,8vw,104px) }
.kf-schmal{ max-width:64ch }

.kf-uber{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--kf-accent); margin:0;
}
.kf-lp section h2{
  font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:600; letter-spacing:-.025em;
  line-height:1.12; margin:14px 0 0; text-wrap:balance;
}
.kf-lp section .kf-lead{ margin-top:18px; color:var(--kf-ink-2); max-width:62ch }
.kf-lp section .kf-lead + .kf-lead{ margin-top:14px }
.kf-lp .kf-lead b{ color:var(--kf-ink); font-weight:600 }

.kf-pfeil{ display:inline-block; transition:transform .18s var(--kf-weich) }
.kf-cta:hover .kf-pfeil{ transform:translateX(3px) }

/* Die Zeile mit den Haken unter dem Knopf */
.kf-haken-zeile{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:14.5px; color:var(--kf-ink-3);
}
.kf-haken-zeile li{ display:inline-flex; align-items:center; gap:7px }
svg.kf-haken{ width:15px; height:15px; flex:none; color:var(--kf-accent) }
svg.kf-kreuz{ width:15px; height:15px; flex:none; color:var(--kf-ink-3) }

/* ------------------------------------------------------------- Held */
/* Der Held hat jetzt zwei Spalten: links der Text, rechts das
   Beispieldepot. Die alten Regeln oben zentrierten ihn und hielten ihn
   auf 780 px — das wird hier gelöst, sonst bricht die Überschrift nach
   drei Wörtern um und rechts bleibt die Hälfte leer. */
.kf-held{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4.5vw,64px); align-items:center;
  max-width:none; margin:0; text-align:left;
  padding:clamp(20px,3.5vw,44px) 0 clamp(40px,6vw,80px);
}
.kf-held-text{ min-width:0 }
.kf-held h1{
  font-size:clamp(2.2rem,4.2vw,3.3rem); line-height:1.06; letter-spacing:-.028em;
  margin:0 0 20px;
}
.kf-held .kf-lead{ margin:0; max-width:56ch; font-size:clamp(1.02rem,1.5vw,1.16rem) }
.kf-held .kf-tat{ justify-content:flex-start; margin-top:28px }
.kf-held .kf-marke-zeile{ margin-bottom:20px }

/* Das Beispieldepot. Es soll wie die echte Anwendung aussehen, ohne
   vorzugeben, echte Kurse zu zeigen — deshalb der Satz am Fuß. */
.kf-tafel{
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:16px;
  box-shadow:0 1px 2px rgba(16,22,25,.05), 0 20px 44px -24px rgba(16,22,25,.28);
  overflow:hidden; min-width:0;
}
.kf-tafel-kopf{
  padding:18px 20px 15px; border-bottom:1px solid var(--kf-rule);
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
}
.kf-tafel-lbl{ display:block; font-size:12.5px; color:var(--kf-ink-3); letter-spacing:.03em }
.kf-tafel-summe{
  display:block; margin-top:3px;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(1.55rem,3vw,2.05rem); font-weight:600; letter-spacing:-.025em;
}
.kf-tafel-delta{
  font-family:"IBM Plex Mono",monospace; font-size:13.5px; font-weight:500; white-space:nowrap;
  color:var(--kf-pos); background:var(--kf-wash); border-radius:7px; padding:4px 9px;
}
.kf-tafel-zeilen{ list-style:none; margin:0; padding:6px 0 }
.kf-tafel-zeilen li{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px;
  align-items:center; padding:11px 20px;
}
.kf-tz-n{ display:flex; align-items:center; gap:11px; min-width:0 }
.kf-tz-n i{ width:9px; height:9px; border-radius:50%; flex:none }
.kf-tz-n b{ display:block; font-size:14.5px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.kf-tz-n em{ display:block; font-style:normal; font-size:12.5px; color:var(--kf-ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.kf-tz-v{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:14.5px }
.kf-tz-c{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:12.5px; text-align:right; min-width:60px; color:var(--kf-ink-3) }
.kf-tz-c.kf-plus{ color:var(--kf-pos) }
.kf-tz-c.kf-minus{ color:var(--kf-neg) }
.kf-tafel-fuss{
  padding:12px 20px; border-top:1px solid var(--kf-rule); background:var(--kf-wash);
  font-size:12.5px; color:var(--kf-ink-3); margin:0;
}

/* Die Zeilen kommen nacheinander herein — nur wenn Bewegung erlaubt ist. */
.kf-start.kf-bewegt .kf-tafel-zeilen li{ opacity:0; transform:translateY(9px) }
.kf-start.kf-bewegt .kf-tafel.kf-da .kf-tafel-zeilen li{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s var(--kf-weich);
}
.kf-start.kf-bewegt .kf-tafel.kf-da .kf-tafel-zeilen li:nth-child(1){ transition-delay:.10s }
.kf-start.kf-bewegt .kf-tafel.kf-da .kf-tafel-zeilen li:nth-child(2){ transition-delay:.18s }
.kf-start.kf-bewegt .kf-tafel.kf-da .kf-tafel-zeilen li:nth-child(3){ transition-delay:.26s }
.kf-start.kf-bewegt .kf-tafel.kf-da .kf-tafel-zeilen li:nth-child(4){ transition-delay:.34s }
.kf-start.kf-bewegt .kf-tafel.kf-da .kf-tafel-zeilen li:nth-child(5){ transition-delay:.42s }
.kf-start.kf-bewegt .kf-tafel.kf-da .kf-tafel-zeilen li:nth-child(6){ transition-delay:.50s }

/* ---------------------------------------------------------- Problem */
.kf-zwei{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,60px); align-items:center }

/* Sechs Zettel, die zusammenfahren: das Bild zur Aussage darüber. */
.kf-streu{ position:relative; height:400px; min-width:0 }
.kf-streu-rahmen{
  position:absolute; left:50%; top:50%; width:258px; height:320px;
  transform:translate(-50%,-50%); border:2px dashed var(--kf-rule); border-radius:16px;
  opacity:0; transition:opacity .5s ease .55s;
}
.kf-streu.kf-da .kf-streu-rahmen{ opacity:1 }
.kf-streu-rahmen span{
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  font-size:12.5px; color:var(--kf-ink-3); white-space:nowrap;
}
.kf-zettel{
  position:absolute; left:50%; top:50%; white-space:nowrap;
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:10px;
  padding:9px 13px; font-size:14px; font-weight:600; color:var(--kf-ink);
  box-shadow:0 1px 2px rgba(16,22,25,.05), 0 12px 28px -16px rgba(16,22,25,.3);
  transform:translate(-50%,-50%) translate(var(--vx),var(--vy)) rotate(var(--vr));
  transition:transform .95s cubic-bezier(.3,.8,.25,1);
}
.kf-zettel small{ font-weight:400; color:var(--kf-ink-3); font-size:12.5px; margin-left:6px }
.kf-streu.kf-da .kf-zettel{
  transform:translate(-50%,-50%) translate(var(--nx),var(--ny)) rotate(0deg);
  z-index:2;
}

/* ------------------------------------------------------------ Karten */
.kf-vier{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px }
.kf-zwei-spalten{ grid-template-columns:repeat(2,1fr) }
.kf-karte{
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:16px;
  padding:24px 22px 26px; min-width:0;
  transition:transform .22s var(--kf-weich), box-shadow .22s ease;
}
.kf-karte:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgba(16,22,25,.06), 0 22px 44px -22px rgba(16,22,25,.32) }
.kf-karte h3{ font-size:1.16rem; font-weight:600; letter-spacing:-.015em; margin:14px 0 8px }
.kf-karte p{ font-size:14.5px; line-height:1.6; color:var(--kf-ink-2); margin:0 }
.kf-ico{ border-radius:12px; overflow:hidden; background:var(--kf-wash) }
.kf-ico svg{ display:block; width:100%; height:auto }

/* ------------------------------------------------------ dunkles Band */
.kf-dunkelband{
  background:#0c3b2b; color:#eaf3ed; border-radius:20px;
  padding:clamp(36px,5vw,64px) clamp(22px,4vw,52px) !important;
  margin-block:clamp(20px,3vw,40px);
}
.kf-lp .kf-dunkelband .kf-uber{ color:#8fd3b2 }
.kf-lp .kf-dunkelband h2{ color:#fff }
/* Muss die allgemeine Regel für .kf-lead überbieten — sonst steht der
   Absatz in Tintengrau auf dunkelgrünem Grund und ist nicht zu lesen. */
.kf-lp .kf-dunkelband .kf-lead{ color:#bcd6c7 }
.kf-dkarte{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:16px; padding:24px 22px 26px;
  transition:background .22s ease, transform .22s var(--kf-weich);
}
.kf-dkarte:hover{ background:rgba(255,255,255,.09); transform:translateY(-4px) }
.kf-dkarte h3{ color:#fff; font-size:1.16rem; font-weight:600; letter-spacing:-.015em; margin:0 0 9px }
.kf-dkarte p{ color:#b7d2c3; font-size:14.5px; line-height:1.62; margin:0 }
.kf-dunkelband-note{
  margin:32px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.15);
  font-size:14px; color:#9dbcab; max-width:78ch;
}

/* -------------------------------------------------------- Ehrlichkeit */
.kf-ehrlich{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.kf-ekarte{
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:16px;
  padding:26px 24px 28px;
}
.kf-ekarte--still .kf-uber{ color:var(--kf-ink-3) }
.kf-ekarte ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:13px }
.kf-ekarte li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px;
  line-height:1.6; color:var(--kf-ink-2) }
.kf-ekarte li svg{ margin-top:4px }
.kf-ekarte li b{ color:var(--kf-ink); font-weight:600 }

/* ---------------------------------------------------------- Abschluss */
.kf-schluss-karte{
  background:var(--kf-paper); border:1px solid var(--kf-rule); border-radius:20px;
  padding:clamp(32px,5vw,58px) clamp(22px,4vw,48px); text-align:center;
  box-shadow:0 1px 2px rgba(16,22,25,.05), 0 20px 44px -26px rgba(16,22,25,.26);
}
.kf-schluss-karte h2{ margin-top:0 }
.kf-schluss-karte .kf-lead{ margin-inline:auto }
.kf-schluss-karte .kf-tat{ justify-content:center }
.kf-schluss-karte .kf-haken-zeile{ justify-content:center }

/* ------------------------------------------------------------ schmal */
@media (max-width:940px){
  .kf-held, .kf-zwei, .kf-ehrlich{ grid-template-columns:1fr }
  .kf-vier{ grid-template-columns:repeat(2,1fr) }
  .kf-streu{ height:380px }
}
@media (max-width:640px){
  .kf-vier, .kf-zwei-spalten{ grid-template-columns:1fr }
  .kf-start section{ padding-block:clamp(44px,10vw,72px) }
  .kf-tafel-zeilen li{ padding:11px 16px; gap:10px }
  .kf-tafel-kopf{ padding:16px }
  .kf-tafel-fuss{ padding:11px 16px }
  .kf-tz-c{ min-width:52px }
  /* Am Telefon braucht der Stapel mehr Höhe, sonst steht der unterste
     Zettel aus dem gestrichelten Rahmen heraus und die Bildunterschrift
     liegt darauf. */
  .kf-streu{ height:392px }
  .kf-zettel{ font-size:13.5px; padding:8px 12px }
  .kf-streu-rahmen{ width:min(272px, 88vw); height:324px }

  /* Der Knopf nimmt die ganze Breite, der Link darunter bleibt links. */
  .kf-held .kf-tat{ display:grid; grid-template-columns:1fr; gap:6px; justify-content:stretch }
  .kf-held .kf-cta{ text-align:center }
  .kf-held .kf-still{ justify-self:start; padding-left:0 }
}

@media (prefers-reduced-motion:reduce){
  .kf-zettel{ transform:translate(-50%,-50%) translate(var(--nx),var(--ny)) !important }
  .kf-streu-rahmen{ opacity:1 !important }
  .kf-tafel-zeilen li{ opacity:1 !important; transform:none !important }
}