/* =====================================================================
   Kindersicherheitswelt — Startseite v3 (Konzept C, 09/2026)
   Mobile-first. Ergänzt styles.css (Bestand). Nur auf index.html geladen.
   Prinzip: große Typografie mit roten Punkten, Fotos in weichen Formen,
   eine Hauptszene (Grundriss), ruhige Bewegung. prefers-reduced-motion = statisch.
   ===================================================================== */
:root {
  --kv-ease: cubic-bezier(.2,.7,.2,1);
  --kv-ease-out: cubic-bezier(.16,1,.3,1);
  --kv-hdr: 73px;
  --kv-amber: #e09a2b;
  --kv-petrol: #136e78;
  --kv-lila: #6b3aa8;
  --kv-line: rgba(107,29,34,.12);
}
@media (min-width: 1100px) { :root { --kv-hdr: 85px; } }

.kv-page { background: var(--ks-cream); }
.kv-page section { position: relative; }
.kv-center { text-align: center; margin: 12px 0 0; }

/* ---------- Typografie ---------- */
.kv-h2 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(34px, 9.4vw, 66px); color: var(--ks-ink); margin: 0 0 18px; text-wrap: balance; hyphens: manual; }
.kv-dot { font-style: normal; color: var(--ks-red); display: inline-block; }
.kv-page .ks-lead { font-size: 16.5px; line-height: 1.62; }
.kv-page .ks-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.kv-page .ks-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

/* Wort-für-Wort-Aufbau (JS setzt .kv-sw) */
.kv-sw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin: 0 -.02em -.12em; }
.kv-sw > span { white-space: nowrap; display: inline-block; transform: translateY(108%); transition: transform 1s var(--kv-ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.kv-split.is-in .kv-sw > span { transform: none; }

/* Einblenden */
.js .kv-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--kv-ease), transform 1s var(--kv-ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js .kv-rv.is-in { opacity: 1; transform: none; }

/* Fotos: weiche Formen, blenden beim Scrollen auf */
.kv-img { position: relative; overflow: hidden; isolation: isolate; }
.kv-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js .kv-img { clip-path: inset(9% 7% 9% 7% round 48px); transition: clip-path 1.4s var(--kv-ease-out); }
.js .kv-img img { transform: scale(1.14); transition: transform 1.8s var(--kv-ease-out); }
.js .kv-img.is-in { clip-path: inset(0 0 0 0 round var(--r, 36px)); }
.js .kv-img.is-in img { transform: scale(1); }

/* ---------- 1 Hero ---------- */
.kv-hero { padding: 14px 0 34px; overflow: hidden; isolation: isolate; }
.kv-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kv-orbs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: kvDrift 22s ease-in-out infinite alternate; }
.kv-orbs span:nth-child(1) { width: 380px; height: 380px; right: -140px; top: -60px; background: #f6d5cf; }
.kv-orbs span:nth-child(2) { width: 300px; height: 300px; left: -150px; top: 46%; background: #f5e2c2; animation-duration: 26s; }
.kv-orbs span:nth-child(3) { width: 240px; height: 240px; right: 10%; bottom: -120px; background: #efd9dc; animation-duration: 30s; }
@keyframes kvDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(40px,-30px,0) scale(1.12); } }

.kv-hero__grid { display: grid; gap: 18px; }
.kv-hero__media { position: relative; width: min(100%, 440px); margin: 0 auto; }
.kv-blob { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; animation: kvMorph 16s ease-in-out infinite alternate; box-shadow: 0 40px 80px -50px rgba(107,29,34,.55); }
.kv-blob img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.js .kv-blob { clip-path: circle(0% at 55% 60%); transition: clip-path 1.6s var(--kv-ease-out) .15s; }
.js .kv-hero.is-in .kv-blob { clip-path: circle(80% at 55% 60%); }
.js .kv-blob img { transform: scale(1.18); transition: transform 2.2s var(--kv-ease-out) .15s; }
.js .kv-hero.is-in .kv-blob img { transform: scale(1); }
@keyframes kvMorph {
  0%   { border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; }
  50%  { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; }
  100% { border-radius: 42% 58% 48% 52% / 58% 42% 58% 42%; }
}
.kv-seal { position: absolute; width: 104px; height: 104px; right: -2px; bottom: -8px; display: grid; place-items: center; }
.kv-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: kvSpin 38s linear infinite; z-index: 1; }
.kv-seal text { font-family: var(--f-body); font-size: 13px; font-weight: 700; letter-spacing: .06em; fill: var(--ks-wine); }
.kv-seal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fffdf9; box-shadow: 0 22px 44px -20px rgba(107,29,34,.6), inset 0 0 0 1px rgba(107,29,34,.08); }
.kv-seal__core { position: relative; z-index: 2; width: 44%; height: 44%; display: grid; place-items: center; border-radius: 50%; background: var(--ks-red); color: #fff; }
.kv-seal__core svg { position: static; z-index: auto; width: 64%; height: 64%; animation: none; }
.js .kv-seal { opacity: 0; transform: scale(.6) rotate(-40deg); transition: opacity .8s var(--kv-ease) .9s, transform 1.2s var(--kv-ease-out) .9s; }
.js .kv-hero.is-in .kv-seal { opacity: 1; transform: none; }
@keyframes kvSpin { to { transform: rotate(360deg); } }

.kv-hero__title { margin: 0; font-family: var(--f-display); }
.kv-claim { display: block; font-weight: 800; font-size: clamp(50px, 15.4vw, 124px); line-height: .92; letter-spacing: -.045em; color: var(--ks-ink); }
.kv-w { display: block; overflow: hidden; padding: 0 .04em .1em; margin: 0 -.04em -.1em; }
.kv-w > span { display: inline-block; }
.js .kv-w > span { transform: translateY(110%); transition: transform 1.1s var(--kv-ease-out); transition-delay: calc(.25s + var(--d) * .14s); }
.js .is-in .kv-w > span { transform: none; }
.js .kv-w .kv-dot { transform: scale(0); transition: transform .6s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.95s + var(--d) * .14s); }
.js .is-in .kv-w .kv-dot { transform: none; }
.kv-hero__sub { display: block; margin-top: 16px; font-size: clamp(19px, 5.2vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--ks-wine); }
.kv-hero__lead { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ks-muted); max-width: 520px; text-wrap: pretty; }
.kv-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.kv-hero__cta .ks-btn { flex: 1 1 150px; }
.js .kv-hero__sub, .js .kv-hero__lead, .js .kv-hero__cta { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--kv-ease), transform 1s var(--kv-ease-out); }
.js .kv-hero.is-in .kv-hero__sub { opacity: 1; transform: none; transition-delay: .75s; }
.js .kv-hero.is-in .kv-hero__lead { opacity: 1; transform: none; transition-delay: .9s; }
.js .kv-hero.is-in .kv-hero__cta { opacity: 1; transform: none; transition-delay: 1.05s; }
.kv-cue { display: none; }

/* Kleine Handys (SE): Bild flacher, damit Claim + Buttons im ersten Screen bleiben */
@media (max-width: 899px) and (max-height: 760px) {
  .kv-hero__media { width: min(100%, 360px); }
  .kv-blob { aspect-ratio: 16 / 10; }
  .kv-seal { width: 80px; height: 80px; }
  .kv-claim { font-size: clamp(44px, 13.4vw, 64px); }
  .kv-hero__sub { margin-top: 10px; }
  .kv-hero__text { display: flex; flex-direction: column; }
  .kv-hero__lead { order: 3; margin-top: 18px; }
}

/* ---------- 2 Themen: Stapelkarten ---------- */
.kv-topics { padding: 64px 0 40px; }
.kv-topics__grid { display: grid; gap: 26px; }
.kv-topics__index { display: none; }
.kv-stack { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
.kv-card { position: sticky; top: calc(var(--kv-hdr) + 14px + var(--i) * 10px); display: block; color: inherit; text-decoration: none; }
.kv-card__in { display: flex; flex-direction: column; background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(29,29,27,.45), 0 1px 0 rgba(107,29,34,.06); transform-origin: 50% 0; transform: scale(var(--sc, 1)); filter: brightness(var(--br, 1)); transition: box-shadow .4s; will-change: transform; }
.kv-card__media { display: block; position: relative; height: 210px; overflow: hidden; border-radius: 0 0 44px 0; }
.kv-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(29,29,27,.18)); }
.kv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--kv-ease-out); }
.kv-card:hover .kv-card__media img { transform: scale(1.06); }
.kv-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; position: relative; }
.kv-card__body::before { content: ''; position: absolute; left: 22px; top: 0; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: var(--a); }
.kv-card__top { display: flex; align-items: center; gap: 10px; }
.kv-card__ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--a); flex-shrink: 0; }
.kv-card__ico svg { width: 20px; height: 20px; }
.kv-card__chip { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.kv-card h3 { font-family: var(--f-display); font-size: clamp(24px, 6.6vw, 34px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; color: var(--ks-ink); margin: 2px 0 0; }
.kv-card p { font-size: 15px; line-height: 1.55; color: var(--ks-muted); margin: 0; }
.kv-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.kv-card__link svg { width: 18px; height: 18px; transition: transform .3s var(--kv-ease); }
.kv-card:hover .kv-card__link svg { transform: translateX(5px); }
.kv-card:hover .kv-card__in { box-shadow: 0 40px 70px -40px rgba(29,29,27,.55), 0 1px 0 rgba(107,29,34,.06); }

/* ---------- 3 Warum ---------- */
.kv-marker.ks-why { all: unset; display: block; height: 1px; }
.kv-why { padding: 36px 0 72px; }
.kv-why__grid { display: grid; gap: 30px; }
.kv-why__media { position: relative; }
.kv-leaf { --r: 140px 28px 140px 28px; aspect-ratio: 4 / 3.4; border-radius: var(--r); }
.js .kv-leaf.kv-img.is-in { clip-path: inset(0 0 0 0 round 140px 28px 140px 28px); }
.kv-why__tag { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ks-wine); box-shadow: 0 16px 30px -20px rgba(29,29,27,.5); }
.kv-why__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ks-red); box-shadow: 0 0 0 0 rgba(216,37,41,.5); animation: kvPing 2.4s infinite; }
@keyframes kvPing { 0% { box-shadow: 0 0 0 0 rgba(216,37,41,.5); } 80%,100% { box-shadow: 0 0 0 10px rgba(216,37,41,0); } }
.kv-why__list { margin-top: 18px !important; }
.kv-why__list li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; padding: 18px 0; }
.kv-why__list li::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--kv-line); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--kv-ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.kv-why__list li.is-in::after { transform: none; }
.kv-why__ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ks-red-soft); color: var(--ks-red); }
.kv-why__ico svg { width: 22px; height: 22px; }
.kv-why__list b { font-family: var(--f-display); font-size: clamp(22px, 6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ks-ink); }
.kv-why__list span:not(.kv-why__ico) { font-size: 15px; line-height: 1.55; color: var(--ks-muted); }

/* ---------- Abschnittskopf mit Pfeilen ---------- */
.kv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.kv-head .ks-arrows { flex-shrink: 0; }
.kv-page .kv-gal { margin-top: 0; }

/* ---------- 4 Kurse ---------- */
.kv-courses { background: var(--ks-cream2); padding: 72px 0 44px; border-radius: 44px 44px 0 0; }
.js .kv-gal > * { opacity: 0; transform: translateY(40px) rotate(1.2deg); transition: opacity .9s var(--kv-ease), transform 1.1s var(--kv-ease-out); transition-delay: calc(var(--k, 0) * 90ms); }
.js .kv-gal.is-in > * { opacity: 1; transform: none; }
.kv-courses .ks-kc { transition: transform .5s var(--kv-ease), box-shadow .5s; }
.kv-courses .ks-kc:hover { transform: translateY(-6px); }

/* ---------- 5 Grundriss-Szene ---------- */
.kv-plan { background: #3f1014; color: var(--ks-cream); }
.kv-plan__track { position: relative; height: calc(100svh + var(--n) * 50svh + 80svh); }
.kv-plan__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.kv-plan__bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 80% 30%, rgba(216,37,41,.28), transparent 70%),
  radial-gradient(50% 45% at 10% 55%, rgba(224,154,43,.12), transparent 70%),
  linear-gradient(180deg, #5d181d, #3f1014); }
.kv-plan__bg::after { content: ''; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(250,246,240,.09) 1px, transparent 1.2px); background-size: 22px 22px; }
.kv-plan__grid { position: relative; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding-top: calc(var(--kv-hdr) + 6px); padding-bottom: 18px; }
.kv-plan__stage { grid-row: 1; min-height: 0; position: relative; margin-bottom: 10px; }
.kv-plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kv-plan__text { grid-row: 2; position: relative; height: 250px; }
.kv-plan__panel, .kv-step { position: absolute; left: 0; right: 0; bottom: 34px; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--kv-ease), transform .7s var(--kv-ease-out); pointer-events: none; }
.kv-plan__panel.is-on, .kv-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kv-plan .ks-eyebrow { color: #f2b04a; }
.kv-plan .kv-h2 { color: #fff; font-size: clamp(30px, 8.4vw, 60px); margin-bottom: 10px; }
.kv-plan__lead { font-size: 14.5px; line-height: 1.55; color: rgba(250,246,240,.78); margin: 0; max-width: 520px; }
.kv-step__n { display: block; font-size: 12px; letter-spacing: .18em; font-weight: 700; color: #f2b04a; margin-bottom: 6px; }
.kv-step__room { font-family: var(--f-display); font-size: clamp(34px, 10vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 8px; color: #fff; }
.kv-step__intro { font-size: 14.5px; line-height: 1.5; color: rgba(250,246,240,.72); margin: 0 0 12px; }
.kv-step__item { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(250,246,240,.08); border: 1px solid rgba(250,246,240,.12); font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; }
.kv-step__st { position: relative; width: 26px; height: 26px; flex-shrink: 0; }
.kv-step__st i { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; transition: opacity .4s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.kv-st-open { background: var(--ks-red); box-shadow: 0 0 0 4px rgba(216,37,41,.25); animation: kvPing 1.8s infinite; }
.kv-st-ok { background: var(--kv-amber); color: #3f1014; opacity: 0; transform: scale(.3); }
.kv-st-ok svg { width: 16px; height: 16px; }
.kv-step.is-ok .kv-st-open { opacity: 0; transform: scale(.3); }
.kv-step.is-ok .kv-st-ok { opacity: 1; transform: none; }
.kv-plan__rail { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; gap: 6px; }
.kv-plan__rail li { flex: 1; }
.kv-plan__rail span { display: block; height: 4px; border-radius: 4px; background: rgba(250,246,240,.16); overflow: hidden; position: relative; }
.kv-plan__rail span::after { content: ''; position: absolute; inset: 0; background: var(--kv-amber); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.kv-plan__rail em { display: none; }
/* Endpanel */
.kv-plan__end { display: flex; align-items: center; gap: 18px; }
.kv-plan__endtext { min-width: 0; flex: 1; }
.kv-plan__endtext .ks-btn { white-space: normal; text-align: center; }
.kv-plan__endtext h3 { font-size: 19px; line-height: 1.25; font-weight: 700; color: #fff; margin: 0 0 12px; }
.kv-plan__endtext .ks-btn { min-height: 48px; font-size: 14.5px; }
.kv-score { position: relative; width: 116px; height: 116px; flex-shrink: 0; display: grid; place-items: center; align-content: center; }
.kv-score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.kv-score__bg { fill: none; stroke: rgba(250,246,240,.14); stroke-width: 8; }
.kv-score__arc { fill: none; stroke: var(--kv-amber); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sc, 0)); transition: stroke-dashoffset .2s linear; }
.kv-score__num { position: relative; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
.kv-score__lbl { position: relative; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: rgba(250,246,240,.7); margin-top: 4px; }

/* Grundriss-SVG */
.kv-room { fill: rgba(250,246,240,0); transition: fill .6s var(--kv-ease); }
.kv-room.is-hot { fill: rgba(216,37,41,.22); }
.kv-room.is-ok { fill: rgba(224,154,43,.10); }
.kv-wall, .kv-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--dw, 1)); }
.kv-wall { stroke: rgba(250,246,240,.92); stroke-width: 3; }
.kv-wall--out { stroke-width: 5; }
.kv-line { stroke: rgba(250,246,240,.5); stroke-width: 1.6; stroke-dashoffset: calc(1 - var(--df, 1)); }
.kv-soft { stroke: rgba(250,246,240,.3); }
.kv-pwin { stroke: #f2b04a; stroke-width: 2; }
.kv-door { stroke: rgba(250,246,240,.35); stroke-dasharray: 1; }
.kv-fence { stroke: rgba(250,246,240,.55); stroke-width: 2; }
.kv-gate { stroke: #f2b04a; stroke-width: 2.4; }
.kv-label { font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: rgba(250,246,240,.55); opacity: var(--df, 1); transition: fill .4s; }
.kv-label.is-hot { fill: #fff; }
.kv-mark { opacity: 0; transition: opacity .4s; }
.kv-mark.is-hot, .kv-mark.is-ok { opacity: 1; }
.kv-mark__glow { opacity: 0; transition: opacity .5s; }
.kv-mark.is-hot .kv-mark__glow { opacity: 1; animation: kvGlow 1.8s ease-in-out infinite; }
.kv-mark__ring { fill: none; stroke: #fff; stroke-width: 2.5; transition: opacity .3s; }
.kv-mark__dot { fill: var(--ks-red); transition: opacity .3s; }
.kv-mark__ok { opacity: 0; transform: scale(.2); transition: opacity .35s, transform .55s cubic-bezier(.3,1.6,.5,1); }
.kv-mark__ok circle { fill: var(--kv-amber); stroke: #fff; stroke-width: 2; }
.kv-mark__ok path { fill: none; stroke: #3f1014; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kv-mark.is-ok .kv-mark__ok { opacity: 1; transform: none; }
.kv-mark.is-ok .kv-mark__ring, .kv-mark.is-ok .kv-mark__dot, .kv-mark.is-ok .kv-mark__glow { opacity: 0; }
@keyframes kvGlow { 0%,100% { transform: scale(.8); } 50% { transform: scale(1.25); } }
.kv-mark__glow { transform-box: fill-box; transform-origin: center; }

/* Nach der Szene: Liste + CTA */
.kv-plan__after { position: relative; background: #3f1014; padding: 8px 0 60px; margin-top: -1px; }
.kv-plan__aftergrid { display: grid; gap: 24px; }
.kv-plan__list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(250,246,240,.12); font-size: 15px; line-height: 1.5; color: rgba(250,246,240,.86); }
.kv-plan__list li::before { content: '' !important; width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; background: var(--kv-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f1014' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.kv-plan__aftercta .ks-btn { width: 100%; }
.kv-plan__ages { margin: 16px 0 0; font-size: 13px; color: rgba(250,246,240,.65); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kv-plan__ages span { display: contents; }
.kv-plan__ages em { font-style: normal; font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: rgba(250,246,240,.1); color: #fff; }
/* Kein JS / reduzierte Bewegung: Szene statisch, alles gesichert */
.kv-plan.is-static .kv-plan__track { height: auto; }
.kv-plan.is-static .kv-plan__pin { position: relative; height: auto; }
.kv-plan.is-static .kv-plan__grid { grid-template-rows: auto auto; height: auto; }
.kv-plan.is-static .kv-plan__stage { height: 60vh; max-height: 520px; }
.kv-plan.is-static .kv-plan__svg { position: static; }
.kv-plan.is-static .kv-plan__text { height: auto; }
.kv-plan.is-static .kv-plan__panel, .kv-plan.is-static .kv-step, .kv-plan.is-static .kv-plan__rail { position: static; }
.kv-plan.is-static .kv-plan__intro { opacity: 1; transform: none; }
.kv-plan.is-static .kv-step, .kv-plan.is-static .kv-plan__end, .kv-plan.is-static .kv-plan__rail { display: none; }

/* ---------- 6 All-Access ---------- */
.kv-aa { padding: 76px 0 0; overflow: hidden; }
.kv-aa__grid { display: grid; gap: 26px; }
.kv-aa__h2 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ks-wine); margin: 0 0 12px; }
.kv-aa__claim { font-family: var(--f-display); font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(44px, 12.6vw, 104px); color: var(--ks-ink); margin: 0 0 18px; }
.kv-aa__box { background: var(--ks-wine); color: #fff; border-radius: 32px; padding: 26px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; box-shadow: 0 40px 70px -40px rgba(107,29,34,.8); position: relative; overflow: hidden; }
.kv-aa__box::before { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(216,37,41,.55), transparent 70%); }
.kv-aa__price { position: relative; font-size: 60px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.kv-aa__box small { position: relative; font-size: 13px; color: rgba(255,255,255,.72); }
.kv-aa__box .ks-btn { position: relative; margin: 12px 0 6px; width: 100%; }
.kv-marquee { margin-top: 40px; padding: 10px 0 70px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kv-marquee__track { display: flex; gap: 16px; width: max-content; animation: kvMarq 48s linear infinite; }
.kv-marquee figure { margin: 0; width: 200px; flex-shrink: 0; }
.kv-marquee img { width: 200px; height: 200px; object-fit: cover; border-radius: 26px; display: block; box-shadow: 0 24px 40px -28px rgba(29,29,27,.6); }
.kv-marquee figcaption { margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ks-muted); text-align: center; }
.kv-marquee figure:nth-child(even) { transform: translateY(22px); }
@keyframes kvMarq { to { transform: translateX(calc(-100% / 3)); } }
.js .kv-claimrv .kv-w > span { transform: translateY(110%); }
.js .kv-claimrv.is-in .kv-w > span { transform: none; transition-delay: calc(var(--d) * .14s); }
.js .kv-claimrv .kv-w .kv-dot { transform: scale(0); }
.js .kv-claimrv.is-in .kv-w .kv-dot { transform: none; transition-delay: calc(.6s + var(--d) * .14s); }

/* ---------- 7 Kostenlos ---------- */
.kv-free { background: var(--ks-cream2); padding: 72px 0 52px; border-radius: 44px 44px 0 0; }

/* ---------- 8 Über uns ---------- */
.kv-about { padding: 80px 0 40px; }
.kv-about__h2 { font-size: clamp(20px, 5.4vw, 28px); letter-spacing: -.02em; font-weight: 700; color: var(--ks-wine); margin: 0 0 14px; }
.kv-words { font-family: var(--f-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; font-size: clamp(30px, 8.6vw, 72px); color: var(--ks-ink); margin: 0 0 34px; text-wrap: balance; }
.kv-words .kv-wd { opacity: .16; transition: opacity .35s linear; }
.kv-words .kv-wd.is-on { opacity: 1; }
.kv-words .kv-wd--em { color: var(--ks-red); }
.kv-about__row { display: grid; gap: 22px; align-items: end; }
.kv-wide { --r: 36px 140px 36px 140px; aspect-ratio: 16 / 10; border-radius: var(--r); }
.js .kv-wide.kv-img.is-in { clip-path: inset(0 0 0 0 round 36px 140px 36px 140px); }
.kv-about__text p { font-size: 17px; line-height: 1.6; color: var(--c-text); margin: 0 0 18px; }

/* ---------- 9 Blog ---------- */
.kv-blog { padding: 56px 0 30px; }

/* ---------- 10 Abschluss ---------- */
.kv-final { padding: 20px 0 64px; }
.kv-final__box { position: relative; background: var(--ks-wine); color: var(--ks-cream); border-radius: 40px; padding: 64px 24px 44px; text-align: center; overflow: hidden; isolation: isolate; }
.kv-final__box::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 0%, rgba(216,37,41,.35), transparent 70%); }
.kv-final__line { display: none; position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); z-index: -1; pointer-events: none; }
.kv-final__line path { fill: none; stroke: rgba(242,176,74,.55); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 2.6s var(--kv-ease-out); }
.kv-final__box.is-in .kv-final__line path { stroke-dashoffset: 0; }
.kv-final__seal { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-red); color: #fff; box-shadow: 0 0 0 10px rgba(216,37,41,.18); }
.kv-final__seal svg { width: 28px; height: 28px; }
.kv-final__h2 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; font-size: clamp(32px, 9vw, 72px); color: #fff; margin: 0 auto 16px; max-width: 900px; text-wrap: balance; }
.kv-final__box p { font-size: 16px; line-height: 1.6; color: rgba(250,246,240,.8); max-width: 560px; margin: 0 auto 26px; }
.kv-final__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kv-final__btns .ks-btn { flex: 1 1 180px; max-width: 260px; }

/* =====================================================================
   Tablet
   ===================================================================== */
@media (min-width: 640px) {
  .kv-card__in { flex-direction: row; min-height: 300px; }
  .kv-card__media { width: 44%; height: auto; flex-shrink: 0; border-radius: 0 60px 0 0; order: 2; }
  .kv-card__body { justify-content: center; padding: 30px 30px 30px 34px; }
  .kv-card__body::before { left: 34px; }
  .kv-plan__text { height: 230px; }
  .kv-aa__box { max-width: 420px; }
  .kv-final__line { display: block; }
}

/* =====================================================================
   Desktop
   ===================================================================== */
@media (min-width: 900px) {
  .kv-hero { padding: 26px 0 56px; min-height: calc(100vh - var(--kv-hdr)); display: flex; align-items: center; }
  .kv-hero > .ks-wrap { width: min(1240px, calc(100% - 2 * var(--ks-pad))); }
  .kv-hero__grid { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px; }
  .kv-hero__text { order: 1; }
  .kv-hero__media { order: 2; width: 100%; max-width: 560px; margin: 0 0 0 auto; }
  .kv-blob { aspect-ratio: 4 / 4.6; }
  .kv-seal { width: 164px; height: 164px; left: -60px; right: auto; bottom: 40px; }
  .kv-claim { font-size: clamp(76px, 8.4vw, 128px); }
  .kv-hero__sub { font-size: clamp(24px, 2.3vw, 32px); margin-top: 24px; }
  .kv-hero__lead { font-size: 16.5px; margin-top: 14px; }
  .kv-hero__cta { margin-top: 28px; }
  .kv-hero__cta .ks-btn { flex: 0 0 auto; }
  .kv-cue { display: grid; place-items: center; position: absolute; left: 50%; bottom: 22px; width: 30px; height: 48px; margin-left: -15px; border: 1.5px solid rgba(29,29,27,.3); border-radius: 20px; }
  .kv-cue span { width: 4px; height: 9px; border-radius: 4px; background: var(--ks-red); animation: kvCue 2s var(--kv-ease) infinite; }
  @keyframes kvCue { 0% { transform: translateY(-8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }

  .kv-topics { padding: 110px 0 60px; }
  .kv-topics__grid { grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
  .kv-topics__intro { position: sticky; top: calc(var(--kv-hdr) + 40px); }
  .kv-topics__index { display: flex; flex-direction: column; margin-top: 30px !important; border-top: 1px solid var(--kv-line); }
  .kv-topics__index a { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--kv-line); font-size: 15px; font-weight: 600; color: rgba(29,29,27,.45); transition: color .3s, padding .4s var(--kv-ease); }
  .kv-topics__index i { width: 8px; height: 8px; border-radius: 50%; background: var(--a); opacity: .35; transition: opacity .3s, transform .4s var(--kv-ease); }
  .kv-topics__index li.is-on a, .kv-topics__index a:hover { color: var(--ks-ink); padding-left: 6px; }
  .kv-topics__index li.is-on i { opacity: 1; transform: scale(1.5); }
  .kv-stack { gap: 40px; padding-bottom: 40px; }
  .kv-card { top: calc(var(--kv-hdr) + 40px + var(--i) * 14px); }
  .kv-card__in { min-height: 400px; border-radius: 36px; }
  .kv-card__body { padding: 40px 36px 40px 44px; gap: 12px; }
  .kv-card__body::before { left: 44px; }
  .kv-card h3 { font-size: clamp(30px, 2.8vw, 42px); }
  .kv-card p { font-size: 16px; }

  .kv-why { padding: 50px 0 110px; }
  .kv-why__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .kv-leaf { aspect-ratio: 4 / 4.8; }
  .kv-why__tag { left: 26px; bottom: 26px; }
  .kv-why__list li { grid-template-columns: 52px 1fr; padding: 22px 0; column-gap: 20px; }
  .kv-why__ico { width: 52px; height: 52px; border-radius: 16px; }

  .kv-courses, .kv-free { padding: 110px 0 60px; border-radius: 64px 64px 0 0; }
  .kv-head { margin-bottom: 34px; }

  .kv-plan__track { height: calc(100vh + var(--n) * 62vh + 90vh); }
  .kv-plan__pin { height: 100vh; }
  .kv-plan__grid { grid-template-columns: .95fr 1.05fr; grid-template-rows: 1fr; gap: 56px; align-items: center; padding-top: calc(var(--kv-hdr) + 20px); padding-bottom: 40px; }
  .kv-plan__stage { grid-column: 2; grid-row: 1; height: 100%; }
  .kv-plan__text { grid-column: 1; grid-row: 1; height: 440px; }
  .kv-plan__panel, .kv-step { bottom: auto; top: 50%; transform: translateY(calc(-50% + 22px)); }
  .kv-plan__panel.is-on, .kv-step.is-on { transform: translateY(-50%); }
  .kv-plan__lead { font-size: 16.5px; }
  .kv-step__intro { font-size: 16px; margin-bottom: 18px; }
  .kv-step__item { font-size: 18px; padding: 18px 20px; }
  .kv-step__room { font-size: clamp(56px, 5.6vw, 84px); }
  .kv-plan .kv-h2 { font-size: clamp(44px, 4.4vw, 64px); }
  .kv-plan__rail { bottom: -8px; flex-direction: row; }
  .kv-plan__rail em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: rgba(250,246,240,.45); margin-top: 8px; white-space: nowrap; transition: color .3s; }
  .kv-plan__rail li.is-on em { color: #fff; }
  .kv-plan__end { gap: 30px; }
  .kv-score { width: 170px; height: 170px; }
  .kv-score__num { font-size: 50px; }
  .kv-score__lbl { font-size: 11px; }
  .kv-plan__endtext h3 { font-size: 26px; }
  .kv-plan__after { padding: 20px 0 90px; }
  .kv-plan__aftergrid { grid-template-columns: 1.3fr .7fr; gap: 64px; align-items: start; }
  .kv-plan__list li { font-size: 16px; }

  .kv-aa { padding: 120px 0 0; }
  .kv-aa__grid { grid-template-columns: 1.35fr .65fr; gap: 64px; align-items: end; }
  .kv-aa__box { padding: 34px 32px; border-radius: 40px; }
  .kv-aa__price { font-size: 76px; }
  .kv-marquee figure { width: 260px; }
  .kv-marquee img { width: 260px; height: 260px; border-radius: 32px; }

  .kv-about { padding: 130px 0 60px; }
  .kv-about__row { grid-template-columns: 1.4fr .6fr; gap: 56px; }
  .kv-blog { padding: 80px 0 40px; }
  .kv-final { padding: 30px 0 110px; }
  .kv-final__box { padding: 110px 60px 90px; border-radius: 56px; }
  .kv-final__box p { font-size: 18px; }
}

/* =====================================================================
   Reduzierte Bewegung: alles sofort sichtbar, keine Endlos-Animationen
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kv-orbs span, .kv-blob, .kv-seal svg, .kv-marquee__track, .kv-why__tag i, .kv-st-open, .kv-cue span, .kv-mark.is-hot .kv-mark__glow { animation: none !important; }
  .js .kv-rv, .js .kv-img, .js .kv-img img, .js .kv-blob, .js .kv-blob img, .js .kv-seal,
  .js .kv-w > span, .js .kv-w .kv-dot, .js .kv-sw > span, .js .kv-gal > *,
  .js .kv-hero__sub, .js .kv-hero__lead, .js .kv-hero__cta { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .kv-words .kv-wd { opacity: 1; }
  .kv-final__line path { stroke-dashoffset: 0; transition: none; }
  .kv-marquee { overflow-x: auto; }
}

/* =====================================================================
   WOW-RUNDE 29.09.: Haus-Einstieg · Kino-Bühne · Bibliothek · Roter Faden
   ===================================================================== */
.kv-page { position: relative; }
.kv-page .ks-wrap { position: relative; z-index: 2; }
.kv-house, .kv-cin, .kv-plan, .kv-lib { z-index: 3; }

/* ---------- Haus-Einstieg ---------- */
.kv-house { background: var(--ks-cream); }
.kv-house__track { position: relative; height: calc(100svh - var(--kv-hdr) + 95svh); }
.kv-house__pin { position: sticky; top: var(--kv-hdr); height: calc(100svh - var(--kv-hdr)); overflow: hidden; isolation: isolate; }
.kv-house__photo { position: absolute; inset: 0; z-index: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.5 8.5Q50 4 55.5 8.5L93 40Q96 42.5 96 46.5V90Q96 96 90 96H10Q4 96 4 90V46.5Q4 42.5 7 40Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.5 8.5Q50 4 55.5 8.5L93 40Q96 42.5 96 46.5V90Q96 96 90 96H10Q4 96 4 90V46.5Q4 42.5 7 40Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--mw, 0px) var(--mw, 0px); mask-size: var(--mw, 0px) var(--mw, 0px);
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%); mask-position: var(--mx, 50%) var(--my, 50%); }
.kv-house__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; transform: scale(var(--iz, 1.14)); transform-origin: 50% 60%; }
.js .kv-house__photo { opacity: 0; transition: opacity 1s var(--kv-ease) .2s; }
.js .kv-house.is-in .kv-house__photo { opacity: 1; }
.kv-house__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--sh, 0);
  background: linear-gradient(180deg, rgba(29,20,20,.15) 0%, rgba(29,20,20,0) 30%, rgba(40,12,16,.55) 58%, rgba(40,12,16,.9) 100%); }
.kv-house__outline { position: absolute; z-index: 2; left: 0; top: 0; width: var(--ow, 0px); height: var(--ow, 0px); transform: translate(var(--ox, 0px), var(--oy, 0px)); overflow: visible; pointer-events: none; opacity: var(--oo, 1); }
.kv-house__outline path { fill: none; stroke: var(--ks-red); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--kv-ease-out) .5s; }
.kv-house.is-in .kv-house__outline path { stroke-dashoffset: 0; }
.kv-house__grid { position: relative; z-index: 2; height: 100%; }
.kv-house__text { height: 100%; display: flex; flex-direction: column; padding: 18px 0 20px; }
.kv-house .kv-hero__title { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kv-house__slot--m { display: block; flex: 1; min-height: 150px; margin: 10px 0 6px; }
.kv-house__slot--d { display: none; }
.kv-house .kv-claim .kv-w { transform: translate3d(calc(var(--p, 0) * var(--fx, 0) * 1px), calc(var(--p, 0) * -120px), 0); opacity: calc(1 - var(--p, 0) * 2.4); will-change: transform; }
.kv-house .kv-claim .kv-w:nth-child(1) { --fx: -140; }
.kv-house .kv-claim .kv-w:nth-child(2) { --fx: 170; }
.kv-house .kv-claim .kv-w:nth-child(3) { --fx: -110; }
.kv-house .kv-hero__sub, .kv-house .kv-hero__lead { transition: color .5s var(--kv-ease), opacity .9s var(--kv-ease), transform 1s var(--kv-ease-out); }
.kv-house.is-over .kv-hero__sub { color: #fff; }
.kv-house.is-over .kv-hero__lead { color: rgba(255,255,255,.86); }
.js .kv-house.is-in .kv-hero__sub { opacity: 1; transform: none; transition-delay: .75s; }
.js .kv-house.is-in .kv-hero__lead { opacity: 1; transform: none; transition-delay: .9s; }
.js .kv-house.is-in .kv-hero__cta { opacity: 1; transform: none; transition-delay: 1.05s; }
.js .kv-house.is-in.is-over .kv-hero__sub, .js .kv-house.is-in.is-over .kv-hero__lead { transition-delay: 0s; }
.kv-house .kv-cue { opacity: calc(1 - var(--p, 0) * 5); }
@media (max-width: 899px) and (max-height: 760px) {
  .kv-house .kv-hero__lead { font-size: 14px; margin-top: 8px; }
  .kv-house__slot--m { min-height: 120px; }
}

/* ---------- Kino-Bühne Kurse ---------- */
.kv-cin { --cc: #e0343a; background: #160f11; color: #fff; overflow: clip; }
.kv-cin__track { position: relative; }
.kv-cin__pin { position: relative; padding: 72px 0 60px; isolation: isolate; }
.kv-cin__glow { position: absolute; z-index: 0; width: 120vmax; height: 120vmax; left: 50%; top: 42%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--cc), transparent 72%); opacity: .34; transition: background .9s var(--kv-ease); pointer-events: none; }
.kv-cin__beam { position: absolute; z-index: 0; left: 50%; top: -10%; width: 70vmax; height: 90%; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255,240,225,.10) 175deg, rgba(255,240,225,.16) 180deg, rgba(255,240,225,.10) 185deg, transparent 200deg); filter: blur(8px); }
.kv-cin__pin::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px); background-size: 20px 20px; }
.kv-cin__grid { display: grid; gap: 18px; }
.kv-cin .ks-eyebrow { color: #f2b04a; }
.kv-cin .kv-h2 { color: #fff; }
.kv-cin__lead { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0; max-width: 560px; }
.kv-cin__stage { position: relative; }
.kv-cin__ring { position: relative; height: 300px; perspective: 1200px; perspective-origin: 50% 40%; margin: 8px 0 54px; }
.kv-cin__cover { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; border-radius: 28px; overflow: visible; display: block;
  transform: translate(-50%, -50%); transform-style: preserve-3d; will-change: transform, opacity;
  -webkit-box-reflect: below 10px linear-gradient(transparent 64%, rgba(255,255,255,.2)); }
.kv-cin__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; box-shadow: 0 40px 70px -30px rgba(0,0,0,.8); transition: filter .5s; filter: brightness(.72) saturate(.85); }
.kv-cin__cover.is-front img { filter: none; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 2px var(--c), 0 0 60px -10px var(--c); }
.kv-cin__play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--c); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 0 10px rgba(255,255,255,.18); }
.kv-cin__play svg { width: 26px; height: 26px; margin-left: 3px; }
.kv-cin__cover.is-front .kv-cin__play { opacity: 1; transform: none; }
.kv-cin.is-snap .kv-cin__cover { transition: transform .8s var(--kv-ease-out), opacity .6s var(--kv-ease); }
.kv-cin__nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.kv-cin__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, border-color .3s; }
.kv-cin__arrow:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.kv-cin__arrow svg { width: 20px; height: 20px; }
.kv-cin__dots { display: flex; gap: 8px; }
.kv-cin__dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.kv-cin__dots span { width: 8px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.3); transition: width .4s var(--kv-ease), background .4s; }
.kv-cin__dots button.is-on span { width: 26px; background: var(--cc); }
.kv-cin__infos { display: grid; margin-top: 10px; }
.kv-cin__info { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--kv-ease), transform .7s var(--kv-ease-out); pointer-events: none; }
.kv-cin__info.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kv-cin__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--c); }
.kv-cin__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.kv-cin__info h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(30px, 8vw, 50px); color: #fff; margin: 10px 0 10px; }
.kv-cin__info > p { font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0 0 16px; }
.kv-cin__info ul { display: grid; gap: 8px; margin: 0 0 22px !important; }
.kv-cin__info li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
.kv-cin__info li::before { content: '' !important; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; transform: translateY(-2px); }
.kv-cin__info li.is-more { color: rgba(255,255,255,.55); }
.kv-cin__info li.is-more::before { background: rgba(255,255,255,.35); }
.kv-cin__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.kv-cin__dur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
.kv-cin__dur svg { width: 16px; height: 16px; }
.kv-cin__price { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.kv-cin__price small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); margin-left: 6px; letter-spacing: 0; }
.kv-cin__foot .ks-btn { margin-left: auto; min-height: 50px; }

/* ---------- Bibliothek ---------- */
.kv-lib { background: var(--ks-cream); }
.kv-lib__track { position: relative; height: calc(100svh - var(--kv-hdr) + 85svh); }
.kv-lib__pin { position: sticky; top: var(--kv-hdr); height: calc(100svh - var(--kv-hdr)); overflow: hidden; }
.kv-lib__grid { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 14px 0 22px; }
.kv-lib__stage { position: relative; min-height: 0; z-index: 1; }
.kv-lib__text { position: relative; z-index: 2; }
.kv-lib__pile { position: absolute; left: 50%; top: 52%; width: min(86%, 380px); aspect-ratio: 640 / 520; transform: translate(-50%, -50%); }
.kv-lib__pile::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(107,29,34,.28), transparent); filter: blur(6px); z-index: -1; opacity: var(--ps, 0); }
.kv-lib__doc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; will-change: transform; filter: drop-shadow(0 6px 8px rgba(60,20,20,.10)); }
.kv-lib .kv-aa__h2 { margin-bottom: 8px; }
.kv-lib .kv-aa__claim { font-size: clamp(38px, 11vw, 96px); margin-bottom: 14px; }
.kv-lib__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px; }
.kv-lib__facts li { display: flex; flex-direction: column; gap: 2px; }
.kv-lib__facts b { font-family: var(--f-display); font-size: clamp(28px, 7.6vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ks-red); font-variant-numeric: tabular-nums; }
.kv-lib__facts li > span { font-size: 12px; line-height: 1.35; color: var(--ks-muted); max-width: 120px; }
.kv-lib__desk { display: none; }
.kv-lib__after { padding: 10px 0 70px; display: grid; gap: 22px; }
.kv-lib__after .kv-aa__box, .kv-lib__desk .kv-aa__box { max-width: 460px; }

/* ---------- Roter Faden ---------- */
.kv-thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.kv-thread__path { fill: none; stroke: var(--ks-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.kv-thread__tip { fill: var(--ks-red); opacity: 0; filter: drop-shadow(0 0 6px rgba(216,37,41,.7)); transition: opacity .3s; }
.kv-thread.is-drawing .kv-thread__tip { opacity: 1; }

@media (min-width: 640px) {
  .kv-cin__ring { height: 360px; }
  .kv-cin__cover { width: 290px; height: 290px; }
}
@media (min-width: 900px) {
  .kv-house__track { height: calc(100vh - var(--kv-hdr) + 90vh); }
  .kv-house__pin { height: calc(100vh - var(--kv-hdr)); }
  .kv-house__shade { display: none; }
  .kv-house__photo img { position: absolute; right: 0; top: 0; width: 64%; height: 100%; object-position: 50% 60%; }
  .kv-house > .kv-house__track > .kv-house__pin > .ks-wrap { width: min(1240px, calc(100% - 2 * var(--ks-pad))); }
  .kv-house__grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px; }
  .kv-house__text { height: auto; padding: 0; display: block; }
  .kv-house .kv-hero__title { display: block; }
  .kv-house__slot--m { display: none; }
  .kv-house__slot--d { display: block; height: min(64vh, 560px); }
  .kv-house .kv-claim .kv-w { transform: translate3d(0, calc(var(--p, 0) * -30px), 0); opacity: 1; }
  .kv-house .kv-claim { font-size: clamp(76px, 8vw, 124px); }

  .kv-cin__track { height: calc(100vh - var(--kv-hdr) + (var(--n) - 1) * 60vh + 30vh); }
  .kv-cin__pin { position: sticky; top: var(--kv-hdr); height: calc(100vh - var(--kv-hdr)); padding: 0; }
  .kv-cin__grid { height: 100%; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto minmax(0, 1fr); column-gap: 56px; row-gap: 0; padding: 40px 0 36px; }
  .kv-cin__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .kv-cin__head .kv-h2 { margin: 0; }
  .kv-cin__lead { max-width: 380px; padding-bottom: 8px; }
  .kv-cin__stage { display: flex; flex-direction: column; justify-content: center; }
  .kv-cin__ring { height: min(46vh, 420px); margin: 0 0 66px; }
  .kv-cin__cover { width: min(40vh, 360px); height: min(40vh, 360px); }
  .kv-cin__infos { align-self: center; margin: 0; }
  .kv-cin__info h3 { font-size: clamp(36px, 3.4vw, 54px); }

  .kv-lib__track { height: calc(100vh - var(--kv-hdr) + 90vh); }
  .kv-lib__pin { height: calc(100vh - var(--kv-hdr)); }
  .kv-lib__grid { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 30px 0; }
  .kv-lib__stage { order: 2; height: 100%; }
  .kv-lib__pile { width: min(92%, 560px); }
  .kv-lib__text { order: 1; }
  .kv-lib__desk { display: grid; gap: 22px; margin-top: 26px; }
  .kv-lib__after { display: none; }
  .kv-lib__facts { gap: 34px; }
  .kv-lib__facts li > span { font-size: 13px; max-width: 150px; }
  .kv-lib .kv-aa__claim { font-size: clamp(52px, 4.9vw, 76px); }
  .kv-thread__path { stroke-width: 2.6; }
}
@media (min-width: 900px) and (max-height: 820px) { .kv-lib__desk .ks-lead { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .kv-house__track, .kv-lib__track, .kv-cin__track { height: auto !important; }
  .kv-house__pin { position: relative; top: 0; height: calc(100svh - var(--kv-hdr)); }
  .kv-lib__pin, .kv-cin__pin { position: relative; top: 0; height: auto; }
  .kv-lib__stage { height: 320px; }
  .kv-house__outline path { stroke-dashoffset: 0; transition: none; }
  .js .kv-house__photo { opacity: 1; transition: none; }
  .kv-lib__doc { opacity: 1; }
}

/* ---------- Große Zwischen-Sätze ---------- */
.kv-say { padding: 56px 0; overflow: clip; }
.kv-say--light { background: var(--ks-cream); color: var(--ks-ink); }
.kv-say--dark { background: #160f11; color: #fff; padding-bottom: 10px; }
.kv-say--wine { background: #3f1014; color: #fff; padding: 70px 0 20px; }
.kv-say__txt { font-family: var(--f-display); font-weight: 800; letter-spacing: -.045em; line-height: .98; font-size: clamp(38px, 10.8vw, 150px); margin: 0; text-wrap: balance; transform: translate3d(var(--dx, 0px), 0, 0); will-change: transform; }
.kv-say__statt { font-weight: 300; font-style: italic; letter-spacing: -.02em; color: var(--ks-muted); font-size: .62em; }
.kv-say__b { white-space: nowrap; }
.kv-say__b s { text-decoration: none; position: relative; color: rgba(29,29,27,.38); }
.kv-say__b s::after { content: ''; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; border-radius: .05em; background: var(--ks-red); transform-origin: 0 50%; transform: scaleX(var(--st, 0)); }
.kv-say__claim { font-family: var(--f-display); font-weight: 800; letter-spacing: -.045em; line-height: .92; font-size: clamp(44px, 12.4vw, 150px); margin: 0; }
.kv-say__claim .kv-w > span { white-space: nowrap; }
.kv-say--wine .kv-say__claim .kv-w:nth-child(2) { padding-left: .3em; }
.kv-say--wine .kv-say__claim .kv-w:nth-child(3) { padding-left: .6em; }
@media (min-width: 900px) { .kv-say--wine .kv-say__claim .kv-w:nth-child(2) { padding-left: .6em; } .kv-say--wine .kv-say__claim .kv-w:nth-child(3) { padding-left: 1.2em; } }
.kv-say--dark .kv-dot, .kv-say--wine .kv-dot { color: #f24b4f; }
.kv-page .kv-say .ks-wrap { z-index: 2; }
.kv-say--dark, .kv-say--wine { z-index: 3; }
@media (min-width: 900px) {
  .kv-say { padding: 110px 0; }
  .kv-say--dark { padding-bottom: 20px; }
  .kv-say--wine { padding: 130px 0 30px; }
}
/* Roter Faden nur am Desktop */
@media (max-width: 899px) { .kv-thread { display: none; } }

/* =====================================================================
   Einstieg v3.3 — Schutzkreis (kv-top--kreis) / Sechs Welten (kv-top--welten)
   ===================================================================== */
.kv-top { background: var(--ks-cream); z-index: 3; }
.kv-top__track { position: relative; height: calc(100svh - var(--kv-hdr) + 80svh); }
.kv-top--welten .kv-top__track { height: calc(100svh - var(--kv-hdr) + var(--n) * 40svh + 20svh); }
.kv-top__pin { position: sticky; top: var(--kv-hdr); height: calc(100svh - var(--kv-hdr)); overflow: hidden; isolation: isolate; }
.kv-top__grid { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 14px 0 16px; }
.kv-top__stage { flex: 1; min-height: 180px; position: relative; margin: 10px 0 12px; }
.kv-top .kv-claim { font-size: clamp(42px, 12.6vw, 124px); }
.kv-top .kv-hero__sub { margin-top: 10px; font-size: clamp(18px, 5vw, 30px); }
.kv-top .kv-hero__lead { margin: 0; font-size: 14.5px; }
.kv-top .kv-hero__cta { margin-top: 14px; }
.js .kv-top.is-in .kv-hero__sub { opacity: 1; transform: none; transition-delay: .75s; }
.js .kv-top.is-in .kv-hero__lead { opacity: 1; transform: none; transition-delay: .9s; }
.js .kv-top.is-in .kv-hero__cta { opacity: 1; transform: none; transition-delay: 1.05s; }
.kv-top .kv-cue { opacity: calc(1 - var(--p, 0) * 5); }
@media (max-width: 899px) and (max-height: 760px) {
  .kv-top .kv-claim { font-size: clamp(38px, 11.4vw, 60px); }
  .kv-top .kv-hero__lead { font-size: 13.5px; line-height: 1.5; }
  .kv-top__stage { margin: 6px 0 8px; }
}

/* ---- Schutzkreis ---- */
.kv-ring { position: absolute; left: 50%; top: 50%; width: var(--S, 300px); height: var(--S, 300px); transform: translate(-50%, -50%); }
.kv-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.kv-ring__arc { fill: none; stroke: var(--a); stroke-width: .05; stroke-linecap: butt; }
.kv-ring__photo { position: absolute; left: 50%; top: 50%; width: var(--D, 150px); height: var(--D, 150px); border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%);
  box-shadow: 0 30px 60px -30px rgba(107,29,34,.6), 0 0 0 6px #fff; }
.kv-ring__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; transform: scale(var(--iz, 1.12)); }
.js .kv-ring__photo { clip-path: circle(0% at 50% 50%); transition: clip-path 1.5s var(--kv-ease-out) .2s; }
.js .kv-top.is-in .kv-ring__photo { clip-path: circle(51% at 50% 50%); }
.kv-ring__b { position: absolute; left: 50%; top: 50%; width: var(--bs, 44px); height: var(--bs, 44px); margin: calc(var(--bs, 44px) / -2) 0 0 calc(var(--bs, 44px) / -2);
  border-radius: 50%; background: #fff; color: var(--a); display: grid; place-items: center; text-decoration: none; z-index: 3;
  box-shadow: 0 14px 28px -14px rgba(29,29,27,.45), 0 0 0 1.5px color-mix(in srgb, var(--a) 30%, transparent);
  transform: translate(var(--x, 0px), var(--y, 0px)); transition: background .5s var(--kv-ease), color .5s var(--kv-ease), box-shadow .5s; }
.kv-ring__ico svg { width: calc(var(--bs, 44px) * .46); height: calc(var(--bs, 44px) * .46); display: block; }
.js .kv-ring__b { opacity: 0; }
.js .kv-top.is-in .kv-ring__b { opacity: 1; transition: opacity .8s var(--kv-ease) calc(.9s + var(--k) * .08s), background .5s, color .5s, box-shadow .5s; }
.kv-ring.is-closed .kv-ring__b { background: var(--a); color: #fff; box-shadow: 0 14px 28px -14px rgba(29,29,27,.55), 0 0 0 4px #fff; }
.kv-ring__lbl { display: none; }
.kv-ring__pulse { position: absolute; left: 50%; top: 50%; width: calc(var(--R, 120px) * 2); height: calc(var(--R, 120px) * 2); margin: calc(var(--R, 120px) * -1) 0 0 calc(var(--R, 120px) * -1);
  border-radius: 50%; border: 2px solid var(--ks-red); opacity: 0; pointer-events: none; }
.kv-ring.is-closed .kv-ring__pulse { animation: kvPulse 3.4s var(--kv-ease-out) infinite; }
.kv-ring.is-closed .kv-ring__pulse--2 { animation-delay: 1.7s; }
@keyframes kvPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.32); opacity: 0; } }

/* ---- Sechs Welten ---- */
.kv-welt { position: absolute; inset: 0; --ring: var(--ks-red); }
.kv-welt__blob { position: absolute; left: 50%; top: 46%; width: var(--S, 300px); height: calc(var(--S, 300px) * .9); transform: translate(-50%, -50%); overflow: hidden; z-index: 2;
  border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; animation: kvMorph 14s ease-in-out infinite alternate;
  box-shadow: 0 0 0 4px var(--ring), 0 40px 70px -40px rgba(107,29,34,.6); transition: box-shadow .6s var(--kv-ease); }
.kv-welt__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; clip-path: circle(var(--r, 0%) at 50% 62%); transform: scale(calc(1.1 - var(--r, 0%) / 1500%)); }
.kv-welt__img.is-base { clip-path: none; transform: none; object-position: 50% 58%; }
.js .kv-welt__blob { clip-path: circle(0% at 50% 60%); transition: clip-path 1.5s var(--kv-ease-out) .2s, box-shadow .6s var(--kv-ease); }
.js .kv-top.is-in .kv-welt__blob { clip-path: circle(80% at 50% 60%); }
.kv-welt__names { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); z-index: 1; height: 1.1em; font-family: var(--f-display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(70px, 24vw, 230px); line-height: 1; pointer-events: none; overflow: visible; }
.kv-welt__name { position: absolute; left: 50%; top: 0; white-space: nowrap; color: color-mix(in srgb, var(--a) 16%, transparent); transform: translate(-50%, 30%); opacity: 0; transition: opacity .6s var(--kv-ease), transform .9s var(--kv-ease-out); }
.kv-welt__name .kv-dot { color: color-mix(in srgb, var(--a) 40%, transparent); }
.kv-welt__name.is-on { opacity: 1; transform: translate(-50%, 0); }
.kv-welt__tags { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; display: grid; width: max-content; max-width: 100%; }
.kv-welt__tag { grid-area: 1 / 1; justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; color: var(--ks-ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 18px 34px -18px rgba(29,29,27,.5); opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; transition: opacity .45s var(--kv-ease), transform .6s var(--kv-ease-out); }
.kv-welt__tag.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kv-welt__tico { width: 32px; height: 32px; border-radius: 50%; background: var(--a); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.kv-welt__tico svg { width: 17px; height: 17px; }
.kv-welt__arr { width: 16px; height: 16px; color: var(--ink); }
.kv-welt__dots { position: absolute; right: 0; top: 46%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.kv-welt__dots li { width: 6px; height: 6px; border-radius: 6px; background: rgba(29,29,27,.18); transition: height .4s var(--kv-ease), background .4s; }
.kv-welt__dots li.is-on { height: 22px; background: var(--a); }

@media (min-width: 900px) {
  .kv-top__track { height: calc(100vh - var(--kv-hdr) + 80vh); }
  .kv-top--welten .kv-top__track { height: calc(100vh - var(--kv-hdr) + var(--n) * 45vh + 20vh); }
  .kv-top__pin { height: calc(100vh - var(--kv-hdr)); }
  .kv-top > .kv-top__track > .kv-top__pin > .ks-wrap { width: min(1240px, calc(100% - 2 * var(--ks-pad))); }
  .kv-top__grid { display: grid; grid-template-columns: 1.02fr .98fr; grid-template-rows: auto auto; align-content: center; column-gap: 48px; row-gap: 22px; padding: 0; }
  .kv-top__top { grid-column: 1; grid-row: 1; align-self: end; }
  .kv-top__bot { grid-column: 1; grid-row: 2; align-self: start; }
  .kv-top__stage { grid-column: 2; grid-row: 1 / 3; height: min(72vh, 640px); margin: 0; }
  .kv-top .kv-claim { font-size: clamp(72px, 7.6vw, 120px); }
  .kv-top .kv-hero__sub { margin-top: 22px; }
  .kv-top .kv-hero__lead { font-size: 16.5px; max-width: 500px; }
  .kv-top .kv-hero__cta { margin-top: 24px; }
  .kv-top .kv-hero__cta .ks-btn { flex: 0 0 auto; }
  .kv-ring__lbl { display: block; position: absolute; left: 50%; top: 50%; white-space: nowrap; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--ks-ink);
    padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 10px 20px -14px rgba(29,29,27,.45);
    transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))); opacity: var(--lo, 0); transition: opacity .4s; pointer-events: none; }
  .kv-welt__names { font-size: clamp(120px, 13vw, 230px); }
  .kv-welt__tag { font-size: 15px; padding: 10px 20px 10px 10px; }
  .kv-welt__tico { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-top__track { height: auto !important; }
  .kv-top__pin { position: relative; top: 0; }
  .kv-welt__blob { animation: none; }
  .js .kv-ring__photo, .js .kv-welt__blob { clip-path: none; transition: none; }
  .js .kv-ring__b { opacity: 1; }
  .kv-ring.is-closed .kv-ring__pulse { animation: none; }
}
.kv-welt__names { display: none; }

/* =====================================================================
   v3.4 — Einstieg „Claim als Fenster“ (mobile first)
   ===================================================================== */
.kv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kv-win { background: var(--ks-cream); z-index: 3; }
.kv-win__src { display: none; }
.kv-win__track { position: relative; height: calc(100svh - var(--kv-hdr) + 110svh); }
.kv-win__pin { position: sticky; top: var(--kv-hdr); height: calc(100svh - var(--kv-hdr)); overflow: hidden; isolation: isolate; }
.kv-win__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.kv-win__t { font-family: var(--f-display); font-weight: 800; letter-spacing: -.045em; }
.kv-win__img { filter: brightness(var(--ib, .62)) saturate(1.3) contrast(1.15); }
.kv-win__full { opacity: var(--fo, 0); }
.kv-win__dots .kv-win__ghost { fill: transparent; }
.kv-win__dots .kv-win__dot { fill: var(--ks-red); }
.kv-win__dots { opacity: var(--do, 1); }
.js .kv-win__svg { opacity: 0; transform: scale(.96); transform-origin: 50% 35%; transition: opacity 1.2s var(--kv-ease) .1s, transform 1.6s var(--kv-ease-out) .1s; }
.js .kv-win.is-in .kv-win__svg { opacity: 1; transform: none; }
.kv-win__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--sh, 0);
  background: linear-gradient(180deg, rgba(29,20,20,.1) 0%, rgba(29,20,20,0) 34%, rgba(40,12,16,.55) 60%, rgba(40,12,16,.9) 100%); }
.kv-win__grid { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 0 0 18px; }
.kv-win__claimspace { flex: 1; min-height: 160px; }
.kv-win .kv-hero__title { margin: 0; }
.kv-win .kv-hero__sub { margin-top: 0; font-size: clamp(20px, 5.6vw, 32px); }
.kv-win .kv-hero__lead { margin-top: 8px; font-size: 14.5px; }
.kv-win .kv-hero__cta { margin-top: 16px; }
.kv-win .kv-hero__sub, .kv-win .kv-hero__lead { transition: color .5s var(--kv-ease), opacity .9s var(--kv-ease), transform 1s var(--kv-ease-out); }
.kv-win.is-over .kv-hero__sub { color: #fff; }
.kv-win.is-over .kv-hero__lead { color: rgba(255,255,255,.88); }
.js .kv-win.is-in .kv-hero__sub { opacity: 1; transform: none; transition-delay: .6s; }
.js .kv-win.is-in .kv-hero__lead { opacity: 1; transform: none; transition-delay: .75s; }
.js .kv-win.is-in .kv-hero__cta { opacity: 1; transform: none; transition-delay: .9s; }
.js .kv-win.is-in.is-over .kv-hero__sub, .js .kv-win.is-in.is-over .kv-hero__lead { transition-delay: 0s; }
.kv-win .kv-cue { opacity: calc(1 - var(--p, 0) * 5); z-index: 3; }
@media (max-width: 899px) and (max-height: 760px) {
  .kv-win .kv-hero__lead { font-size: 13.5px; line-height: 1.5; }
  .kv-win__claimspace { min-height: 130px; }
}
@media (min-width: 900px) {
  .kv-win__track { height: calc(100vh - var(--kv-hdr) + 100vh); }
  .kv-win__pin { height: calc(100vh - var(--kv-hdr)); }
  .kv-win > .kv-win__track > .kv-win__pin > .ks-wrap { width: min(1240px, calc(100% - 2 * var(--ks-pad))); }
  .kv-win__grid { display: grid; grid-template-columns: 1fr 340px; align-items: end; gap: 48px; padding: 0 0 56px; }
  .kv-win__claimspace { height: 100%; min-height: 0; }
  .kv-win__bot { padding-bottom: 6px; }
  .kv-win .kv-hero__sub { font-size: 26px; }
  .kv-win .kv-hero__lead { font-size: 15.5px; }
  .kv-win .kv-hero__cta { flex-wrap: wrap; }
  .kv-win .kv-hero__cta .ks-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-win__track { height: auto !important; }
  .kv-win__pin { position: relative; top: 0; }
  .js .kv-win__svg { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   v3.4 — Freebies als Kartenfächer (mobile first)
   ===================================================================== */
.kv-fan__head { margin-bottom: 6px; }
.kv-fan { position: relative; }
.kv-fan__deck { position: relative; height: 468px; margin: 0 -20px; overflow: hidden; touch-action: pan-y; }
.kv-fan__card { position: absolute; left: 50%; bottom: 18px; width: 258px; margin-left: -129px; background: #fff; border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 50px -32px rgba(29,29,27,.55), 0 0 0 1px rgba(107,29,34,.06);
  transform-origin: 50% 190%; transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) rotate(var(--fr, 0deg)); z-index: var(--fz, 1);
  transition: transform .85s var(--kv-ease-out), box-shadow .4s, filter .4s; filter: brightness(var(--fb, 1)); cursor: pointer; outline: none; }
.kv-fan__card.is-front { cursor: default; box-shadow: 0 40px 70px -36px rgba(29,29,27,.6), 0 0 0 2px var(--t); }
.kv-fan__stage { height: 150px; background: linear-gradient(160deg, #f6efe4, #efe5d6); display: grid; place-items: center; padding: 10px 14px 0; overflow: hidden; }
.kv-fan__stage img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--kv-ease-out); }
.kv-fan__card.is-front .kv-fan__stage img { transform: translateY(-4px) scale(1.04); }
.kv-fan__body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.kv-fan__chip { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--t); }
.kv-fan__body h3 { font-size: 18px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--ks-ink); margin: 0; min-height: 2.4em; }
.kv-fan__body p { font-size: 13.5px; line-height: 1.5; color: var(--ks-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5em; }
.kv-fan__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.kv-fan__btn { min-height: 42px; padding: 0 16px; font-size: 13.5px; background: var(--t); color: #fff; gap: 8px; }
.kv-fan__btn:hover { color: #fff; filter: brightness(1.08); }
.kv-fan__btn svg { width: 16px; height: 16px; }
.kv-fan__card:not(.is-front) .kv-fan__btn { pointer-events: none; }
.kv-fan__size { font-size: 11.5px; line-height: 1.3; color: var(--ks-muted); text-align: right; }
.kv-fan__nav { margin-top: 6px; }
.kv-fan .kv-cin__arrow { border-color: rgba(29,29,27,.2); background: #fff; color: var(--ks-ink); }
.kv-fan .kv-cin__dots span { background: rgba(29,29,27,.2); }
.kv-fan .kv-cin__dots button.is-on span { background: var(--fc, var(--ks-red)); }
@media (min-width: 900px) {
  .kv-fan__deck { height: 560px; margin: 0; overflow: visible; }
  .kv-fan__card { width: 300px; margin-left: -150px; bottom: 30px; transform-origin: 50% 220%; }
  .kv-fan__card:not(.is-front):hover { --fy2: -18px; filter: brightness(1.02); }
  .kv-fan__stage { height: 176px; }
  .kv-fan__body h3 { font-size: 20px; }
  .kv-fan__head { text-align: center; max-width: 760px; margin: 0 auto 10px; }
  .kv-fan__head .ks-eyebrow { justify-content: center; }
  .kv-fan__head .ks-lead { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .kv-fan__card { transition: none; } }

/* ---------- Sicherheits-Check: unterer Teil (29.09.) ---------- */
.kv-plan__after { padding: 16px 0 64px; }
.kv-plan__feats { display: grid; gap: 12px; }
.kv-plan__feats li { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px 18px; border-radius: 20px; background: rgba(250,246,240,.05); border: 1px solid rgba(250,246,240,.1); }
.kv-plan__feats li::before { content: '' !important; grid-row: span 2; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(224,154,43,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b04a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px no-repeat; }
.kv-plan__feats b { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.kv-plan__feats span { font-size: 14.5px; line-height: 1.5; color: rgba(250,246,240,.72); }
.kv-agecard { border-radius: 26px; padding: 22px 20px 20px; background: linear-gradient(160deg, rgba(250,246,240,.09), rgba(250,246,240,.03)); border: 1px solid rgba(250,246,240,.14); }
.kv-agecard__lbl { display: block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #f2b04a; margin-bottom: 16px; }
.kv-ages { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 22px !important; padding-top: 22px !important; }
.kv-ages::before { content: ''; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 5px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(242,176,74,.35), #f2b04a); }
.kv-ages li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kv-ages li::before { content: '' !important; position: absolute; top: -22px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #3f1014; border: 2px solid #f2b04a; box-shadow: 0 0 0 4px rgba(242,176,74,.12); }
.kv-ages li:last-child::before { background: #f2b04a; }
.kv-ages b { font-family: var(--f-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.kv-ages span { margin-top: 4px; font-size: 12.5px; color: rgba(250,246,240,.65); }
.kv-agecard .ks-btn { width: 100%; }
@media (min-width: 900px) {
  .kv-plan__after { padding: 24px 0 100px; }
  .kv-plan__aftergrid { grid-template-columns: 1fr 420px; gap: 40px; align-items: stretch; }
  .kv-plan__feats { align-content: center; gap: 16px; }
  .kv-plan__feats li { padding: 22px 24px; }
  .kv-plan__feats b { font-size: 20px; }
  .kv-plan__feats span { font-size: 15.5px; }
  .kv-agecard { padding: 28px 28px 26px; }
  .kv-ages b { font-size: 36px; }
}

/* =====================================================================
   v3.5 — Wissens-Blog als Stories (mobile first)
   ===================================================================== */
.kv-stories { position: relative; max-width: 440px; margin: 0 auto; }
.kv-stories__deck { position: relative; aspect-ratio: 9 / 14; max-height: calc(100svh - var(--kv-hdr) - 40px); width: 100%; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #1d1414;
  box-shadow: 0 40px 70px -40px rgba(29,29,27,.6); isolation: isolate; }
.kv-story { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--kv-ease); }
.kv-story.is-on { opacity: 1; z-index: 2; }
.kv-story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.kv-story.is-on .kv-story__img { animation: kvKen 7s linear forwards; }
@keyframes kvKen { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.kv-story__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,10,.45) 0%, rgba(20,10,10,0) 22%, rgba(20,10,10,0) 42%, rgba(30,10,12,.88) 100%); }
.kv-story__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kv-story__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--t); color: #fff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.kv-story__body h3 { font-family: var(--f-display); font-size: clamp(26px, 7.4vw, 34px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: #fff; margin: 0; text-wrap: balance; }
.kv-story__date { font-size: 12.5px; color: rgba(255,255,255,.7); }
.kv-story__btn { margin-top: 6px; min-height: 48px; gap: 8px; }
.kv-story__btn svg { width: 18px; height: 18px; }
.js .kv-story .kv-story__body > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--kv-ease), transform .7s var(--kv-ease-out); }
.js .kv-story.is-on .kv-story__body > * { opacity: 1; transform: none; }
.js .kv-story.is-on .kv-story__body > *:nth-child(2) { transition-delay: .08s; }
.js .kv-story.is-on .kv-story__body > *:nth-child(3) { transition-delay: .16s; }
.js .kv-story.is-on .kv-story__body > *:nth-child(4) { transition-delay: .24s; }
.kv-stories__bars { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 5; display: flex; gap: 5px; pointer-events: none; }
.kv-stories__bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.kv-stories__bars i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--b, 0)); }
.kv-stories__tap { position: absolute; top: 0; height: 58%; z-index: 4; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kv-stories__tap--prev { left: 0; width: 34%; }
.kv-stories__tap--next { right: 0; width: 66%; }
.kv-stories.is-paused .kv-story.is-on .kv-story__img { animation-play-state: paused; }
@media (min-width: 900px) {
  .kv-stories { max-width: none; }
  .kv-stories__deck { aspect-ratio: auto; max-height: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: none; box-shadow: none; overflow: visible; border-radius: 0; }
  .kv-story { position: relative; inset: auto; opacity: 1; aspect-ratio: 9 / 14; border-radius: 28px; overflow: hidden; transition: transform .5s var(--kv-ease), box-shadow .5s; box-shadow: 0 30px 50px -34px rgba(29,29,27,.6); }
  .kv-story:hover { transform: translateY(-10px); box-shadow: 0 44px 70px -36px rgba(29,29,27,.7); }
  .kv-story .kv-story__img { transition: transform 1.2s var(--kv-ease-out); animation: none !important; }
  .kv-story:hover .kv-story__img { transform: scale(1.08); }
  .js .kv-story .kv-story__body > * { opacity: 1; transform: none; }
  .kv-story__body h3 { font-size: 22px; }
  .kv-stories__bars, .kv-stories__tap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kv-story.is-on .kv-story__img { animation: none; } }
.kv-about__belief { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--ks-wine); max-width: 640px; margin: -14px 0 28px; }
@media (min-width: 900px) { .kv-about__belief { font-size: 22px; margin: -18px 0 40px; } }

/* ---------- Hintergrund-Bewegung (Vergleich) ---------- */
.kv-bg { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; }
.kv-page { background: var(--ks-cream); }
/* Bibliothek: Hintergrund-Bewegung sichtbar (Chris, 29.09.) */
.kv-lib { background: transparent; }

/* =====================================================================
   v4.0 (30.09.)
   ===================================================================== */
/* Grundriss auf dem Handy ~1/3 kürzer */
@media (max-width: 899px) { .kv-plan__track { height: calc(100svh + var(--n) * 33svh + 55svh); } }

/* Header versteckt sich beim Runterscrollen, rote Fortschrittslinie */
.k-header { transition: transform .45s var(--kv-ease), background .3s, box-shadow .3s, border-color .3s; }
body.kv-hdr-hide .k-header { transform: translateY(-105%); }
.kv-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 1000; background: var(--ks-red); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .k-header { transition: none; } }

/* Kino-Bühne: Teaser-Loops + Handy-Layout */
.kv-cin__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; opacity: 0; transition: opacity .6s var(--kv-ease); pointer-events: none; }
.kv-cin__cover.is-playing .kv-cin__vid { opacity: 1; }
.kv-cin__cover.is-playing .kv-cin__play { left: auto; top: auto; right: 12px; bottom: 12px; margin: 0; width: 42px; height: 42px; box-shadow: 0 0 0 6px rgba(255,255,255,.16); }
.kv-cin__cover.is-playing .kv-cin__play svg { width: 18px; height: 18px; }
@media (max-width: 899px) {
  .kv-cin__pin { padding: 60px 0 44px; }
  .kv-cin__grid { gap: 10px; }
  .kv-cin__ring { height: min(80vw, 340px); margin: 6px 0 44px; }
  .kv-cin__cover { width: min(74vw, 310px); height: min(74vw, 310px); }
  .kv-cin__nav { gap: 12px; }
  .kv-cin__arrow { width: 42px; height: 42px; }
  .kv-cin__infos { margin-top: 12px; }
  .kv-cin__info h3 { font-size: 28px; margin: 6px 0 6px; }
  .kv-cin__info > p { font-size: 14.5px; margin-bottom: 10px; }
  .kv-cin__info ul { gap: 5px; margin-bottom: 14px !important; }
  .kv-cin__info li { font-size: 13.5px; }
  .kv-cin__foot { padding-top: 12px; gap: 8px 14px; }
  .kv-cin__price { font-size: 26px; }
  .kv-cin__foot .ks-btn { min-height: 46px; }
}

/* Fix (30.09.): 980–1099 px zeigte das Menü dauerhaft aufgeklappt ohne Burger (Bestand 10.09.) */
@media (min-width: 980px) and (max-width: 1099px) {
  .k-nav { display: none !important; }
  .k-nav.is-open { display: flex !important; }
  .k-burger { display: block !important; }
}

/* ---------- Barrierefreiheit (Prüfroutine 30.09.): Kontraste auf WCAG AA angehoben, Farbwirkung unverändert ---------- */
:root { --c-muted: #63625d; --ks-muted: #63625d; }
.ks-chip--red, .ks-fc__cta, .ks-toc__count { color: #c01f23 !important; }
.ks-chip--amber { color: #8a5a0e !important; }
.ks-section--tint .ks-eyebrow, .kv-fan .ks-eyebrow, [data-thread="3"] { color: #c01f23; }
.ks-check-row a, .k-nl__consent a { text-decoration: underline; text-underline-offset: 2px; }
.k-footer__partner-label { color: var(--ks-muted) !important; opacity: 1 !important; }
.k-footer__partner-link { opacity: 1 !important; }
.kv-fan__btn { background: color-mix(in srgb, var(--t) 80%, #1a0a00) !important; }