/* ============================================================
   Klangshow — slides.css
   CI-Slide-Builder. Nur Design-Sheet-Elemente (media.klangfeld.org/
   design-sheet.html): Creme/Neon-Palette, Alice + Merriweather Sans +
   Best Light, Glow, Brushstroke-Marker, Aquarell-Splashes.

   Feste 1280×720-Bühne (.kf-slide), per transform:scale() in den
   Frame (.kf-slide-frame) eingepasst — pixel-deterministisch, rendert
   überall identisch (Leinwand groß, Editor-Vorschau klein).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alice&family=Merriweather+Sans:wght@300;400;500;600;700&display=swap');
@font-face { font-family:'Best Light'; src:url('/fonts/BestLight.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }

/* Frame: gibt Anzeigegröße + 16:9 vor, clippt die skalierte Bühne */
.kf-slide-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#fbf8f3; border-radius:6px; }

/* Bühne: feste Designgröße 1280×720, wird per JS skaliert */
.kf-slide {
  --s-bg:#fbf8f3; --s-white:#ffffff;
  --s-green:#89f703; --s-cyan:#4aedfa; --s-yellow:#fafa42; --s-pink:#ff66c3; --s-lila:#8b50ff;
  --s-green-d:#3d6e00; --s-cyan-d:#006f75; --s-yellow-d:#8a7a00; --s-pink-d:#b8246e;
  --s-ink:#1a1a1a; --s-dark:#1a1209; --s-muted:#5a5444; --s-light:#9a8f7a;
  --s-line:rgba(26,18,9,0.10); --s-line-soft:rgba(26,18,9,0.06);
  --s-glow-k:0.55;
  --s-ff-title:'Alice', Georgia, serif;
  --s-ff-sans:'Merriweather Sans', system-ui, sans-serif;
  --s-ff-script:'Best Light', cursive;
  --acc:var(--s-green); --acc-d:var(--s-green-d); --acc-rgb:137,247,3;

  position:absolute; top:0; left:0; width:1280px; height:720px;
  transform-origin:top left;
  background:var(--s-bg); color:var(--s-ink);
  font-family:var(--s-ff-sans); overflow:hidden;
  display:flex; flex-direction:column;
}
.kf-slide.accent-green  { --acc:var(--s-green);  --acc-d:var(--s-green-d);  --acc-rgb:137,247,3; }
.kf-slide.accent-cyan   { --acc:var(--s-cyan);   --acc-d:var(--s-cyan-d);   --acc-rgb:74,237,250; }
.kf-slide.accent-yellow { --acc:var(--s-yellow); --acc-d:var(--s-yellow-d); --acc-rgb:250,250,66; }
.kf-slide.accent-pink   { --acc:var(--s-pink);   --acc-d:var(--s-pink-d);   --acc-rgb:255,102,195; }

.kf-slide-splash { position:absolute; pointer-events:none; z-index:0; top:-100px; right:-110px; width:660px; opacity:0.5; filter:saturate(1.05); }
.kf-slide.no-splash .kf-slide-splash { display:none; }

.kf-slide-head, .kf-slide-body, .kf-slide-foot { position:relative; z-index:2; }
.kf-slide-head { display:flex; align-items:flex-start; justify-content:space-between; padding:48px 80px 0; }
.kf-kicker { font-family:var(--s-ff-sans); font-weight:300; text-transform:uppercase; letter-spacing:0.22em; font-size:19px; color:var(--acc-d); }
.kf-slide-brand { display:flex; align-items:center; gap:14px; }
.kf-slide-emblem { height:46px; width:auto; display:block; }
.kf-slide-wordmark { font-family:var(--s-ff-script); font-size:34px; letter-spacing:0.16em; color:var(--s-ink); line-height:1; }

.kf-slide-body { flex:1; min-height:0; padding:22px 80px; display:flex; flex-direction:column; justify-content:center; }
.kf-slide-foot { display:flex; align-items:center; justify-content:space-between; padding:0 80px 36px; font-family:var(--s-ff-sans); font-weight:300; font-size:17px; color:var(--s-muted); }
.kf-slide-foot .live-dot { display:inline-flex; align-items:center; gap:10px; }
.kf-slide-foot .live-dot i { width:11px; height:11px; border-radius:50%; background:var(--acc); box-shadow:0 0 calc(12px*var(--s-glow-k)) rgba(var(--acc-rgb),0.8); }

.kf-title { font-family:var(--s-ff-title); font-weight:400; color:var(--s-ink); line-height:1.05; letter-spacing:-0.01em; font-size:66px; margin:0; max-width:22ch; }
.kf-title.big { font-size:90px; }
.kf-subtitle { font-family:var(--s-ff-sans); font-weight:300; color:var(--s-muted); font-size:26px; line-height:1.45; max-width:50ch; margin:18px 0 0; }
.kf-lead { font-family:var(--s-ff-sans); font-weight:300; color:var(--s-muted); font-size:24px; line-height:1.45; max-width:54ch; margin:14px 0 0; }

.kf-mark { background:linear-gradient(120deg, transparent 2%, rgba(var(--acc-rgb),0.42) 2%, rgba(var(--acc-rgb),0.42) 98%, transparent 98%); padding:0.02em 0.26em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* Gemeinsame Bausteine */
.kf-row { display:flex; gap:36px; }
.kf-card { flex:1; background:var(--s-white); border:1px solid var(--s-line-soft); border-radius:24px; padding:32px; box-shadow:0 6px 22px rgba(26,18,9,0.07); min-width:0; }
.kf-card .c-label { font-family:var(--s-ff-sans); font-weight:300; text-transform:uppercase; letter-spacing:0.18em; font-size:15px; color:var(--acc-d); margin-bottom:8px; }
.kf-card .c-head { font-family:var(--s-ff-title); font-size:32px; color:var(--s-ink); margin-bottom:8px; line-height:1.1; }
.kf-card .c-text { font-family:var(--s-ff-sans); font-weight:300; font-size:19px; color:var(--s-muted); line-height:1.4; }

.kf-bullets { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.kf-bullets li { position:relative; padding-left:32px; font-family:var(--s-ff-sans); font-weight:300; font-size:24px; color:var(--s-ink); line-height:1.35; }
.kf-bullets li::before { content:''; position:absolute; left:0; top:0.55em; width:12px; height:12px; border-radius:50%; background:var(--acc); box-shadow:0 0 calc(8px*var(--s-glow-k)) rgba(var(--acc-rgb),0.6); }

/* cover */
.lay-cover .kf-slide-body { justify-content:center; align-items:flex-start; }
.lay-cover .kf-title { font-size:104px; max-width:18ch; }
.lay-cover .kf-subtitle { font-size:30px; }

/* intro-cards / card-grid */
.lay-intro-cards .kf-row, .lay-card-grid .grid2 { margin-top:34px; }
.lay-card-grid .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.lay-card-grid .kf-card { padding:28px; }
.lay-card-grid .kf-card .c-head { font-size:28px; }

/* bullets-callout */
.lay-bullets-callout .split { display:grid; grid-template-columns:1.3fr 0.9fr; gap:52px; align-items:center; margin-top:30px; }
.kf-callout { background:rgba(var(--acc-rgb),0.12); border:1px solid rgba(var(--acc-rgb),0.4); border-radius:24px; padding:34px; }
.kf-callout .co-title { font-family:var(--s-ff-title); font-size:30px; color:var(--s-ink); margin-bottom:10px; line-height:1.15; }
.kf-callout .co-text { font-family:var(--s-ff-sans); font-weight:300; font-size:21px; color:var(--s-muted); line-height:1.45; }

/* numbered-cols / phases */
.lay-numbered-cols .cols, .lay-phases .cols { display:flex; gap:38px; margin-top:34px; }
.kf-numcol { flex:1; min-width:0; }
.kf-numcol .nc-num { font-family:var(--s-ff-title); font-size:56px; color:var(--acc-d); line-height:1; text-shadow:0 0 calc(14px*var(--s-glow-k)) rgba(var(--acc-rgb),0.4); }
.kf-numcol .nc-label { font-family:var(--s-ff-sans); font-weight:600; text-transform:uppercase; letter-spacing:0.14em; font-size:16px; color:var(--s-muted); margin:6px 0 14px; }
.kf-numcol .nc-head { font-family:var(--s-ff-title); font-size:30px; color:var(--s-ink); margin-bottom:12px; }
.kf-numcol .kf-bullets { gap:10px; }
.kf-numcol .kf-bullets li { font-size:19px; padding-left:28px; }
.kf-numcol .kf-bullets li::before { width:10px; height:10px; }

/* process */
.lay-process .steps { display:flex; gap:30px; margin-top:40px; }
.kf-step { flex:1; min-width:0; }
.kf-step .st-num { width:64px; height:64px; border-radius:50%; background:var(--acc); box-shadow:0 0 calc(16px*var(--s-glow-k)) rgba(var(--acc-rgb),0.6); display:flex; align-items:center; justify-content:center; font-family:var(--s-ff-title); font-size:32px; color:var(--s-dark); margin-bottom:18px; }
.kf-step .st-head { font-family:var(--s-ff-title); font-size:27px; color:var(--s-ink); margin-bottom:8px; line-height:1.1; }
.kf-step .st-text { font-family:var(--s-ff-sans); font-weight:300; font-size:18px; color:var(--s-muted); line-height:1.4; }

/* flow */
.lay-flow .flow { display:flex; align-items:center; gap:18px; margin-top:54px; }
.kf-flow-node { flex:1; background:var(--s-white); border:1px solid var(--s-line); border-radius:24px; padding:32px 24px; text-align:center; font-family:var(--s-ff-sans); font-weight:400; font-size:21px; color:var(--s-ink); line-height:1.3; box-shadow:0 6px 18px rgba(26,18,9,0.06); }
.kf-flow-arrow { flex:0 0 auto; font-size:38px; color:var(--acc-d); }

/* stat-tiles */
.lay-stat-tiles .tiles { display:flex; gap:32px; margin-top:40px; }
.kf-tile { flex:1; background:var(--s-white); border:1px solid var(--s-line-soft); border-radius:24px; padding:32px 24px; text-align:center; box-shadow:0 6px 22px rgba(26,18,9,0.07); }
.kf-tile .t-value { font-family:var(--s-ff-title); font-size:62px; color:var(--acc-d); line-height:1; text-shadow:0 0 calc(18px*var(--s-glow-k)) rgba(var(--acc-rgb),0.4); }
.kf-tile .t-label { font-family:var(--s-ff-sans); font-weight:300; font-size:18px; color:var(--s-muted); margin-top:14px; line-height:1.3; }
.lay-stat-tiles .note { font-family:var(--s-ff-sans); font-weight:300; font-size:20px; color:var(--s-muted); margin-top:34px; max-width:64ch; line-height:1.45; }

/* big-number */
.lay-big-number .kf-slide-body { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.kf-bignum { font-family:var(--s-ff-title); font-size:150px; color:var(--acc-d); line-height:0.9; text-shadow:0 0 calc(26px*var(--s-glow-k)) rgba(var(--acc-rgb),0.45); }
.lay-big-number .bn-text { font-family:var(--s-ff-sans); font-weight:300; font-size:22px; color:var(--s-muted); margin-top:20px; line-height:1.5; }

/* two-col */
.lay-two-col .cols { display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-top:30px; }
.kf-listcol .lc-head { font-family:var(--s-ff-sans); font-weight:600; text-transform:uppercase; letter-spacing:0.16em; font-size:18px; color:var(--acc-d); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--s-line); }

/* value-table */
.lay-value-table .rows { margin-top:26px; }
.kf-vrow { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:16px 0; border-bottom:1px solid var(--s-line-soft); }
.kf-vrow .v-label { font-family:var(--s-ff-sans); font-weight:300; font-size:22px; color:var(--s-ink); }
.kf-vrow .v-val { font-family:var(--s-ff-title); font-size:24px; color:var(--s-ink); white-space:nowrap; }
.kf-vrow.total { border-top:2px solid var(--acc); border-bottom:none; margin-top:8px; padding-top:18px; }
.kf-vrow.total .v-label { font-weight:600; }
.kf-vrow.total .v-val { color:var(--acc-d); font-size:30px; }

/* statement */
.lay-statement .kf-slide-body { justify-content:center; }
.kf-statement-line { font-family:var(--s-ff-title); font-size:44px; color:var(--s-ink); line-height:1.25; margin:8px 0; max-width:30ch; }

/* faq */
.lay-faq .pairs { margin-top:26px; display:flex; flex-direction:column; gap:22px; }
.kf-qa .q { font-family:var(--s-ff-title); font-size:26px; color:var(--s-ink); margin-bottom:6px; }
.kf-qa .a { font-family:var(--s-ff-sans); font-weight:300; font-size:20px; color:var(--s-muted); line-height:1.4; max-width:70ch; }
.kf-qa .q::before { content:'F · '; color:var(--acc-d); font-family:var(--s-ff-sans); font-weight:600; }
.kf-qa .a::before { content:'A · '; color:var(--acc-d); font-family:var(--s-ff-sans); font-weight:600; }