/* Kladde – „Der Kladde-Film“: echte App-Aufnahmen im iPad, darüber Bewegung aus Code
   (Schrift, die sich schreibt, Fallblatt-Tafel, Sticker, einrastende Tische, Einband).
   Nutzt die Farben und Bausteine aus kladde.css (.ipad, .tape, .store-badge). */
.kf{padding-top:90px}
.kf-stage{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:56px;
  min-height:640px;padding:56px 64px;border-radius:var(--radius);overflow:hidden;isolation:isolate;
  --kf-a:var(--sage);--kf-b:var(--butter);--kf-d:var(--sage-d);
  background:radial-gradient(120% 90% at 85% 10%,color-mix(in srgb,var(--kf-a) 75%,transparent),transparent 60%),
    radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--kf-b) 70%,transparent),transparent 65%),var(--cream);
  box-shadow:var(--shadow);transition:--kf-a 1.2s,--kf-b 1.2s}
.kf-stage[data-farbe="sage"]{--kf-a:var(--sage);--kf-b:var(--butter);--kf-d:var(--sage-d)}
.kf-stage[data-farbe="sky"]{--kf-a:var(--sky);--kf-b:var(--lav);--kf-d:var(--sky-d)}
.kf-stage[data-farbe="blush"]{--kf-a:var(--blush);--kf-b:var(--butter);--kf-d:var(--blush-d)}
.kf-stage[data-farbe="butter"]{--kf-a:var(--butter);--kf-b:var(--sage);--kf-d:var(--butter-d)}
.kf-stage[data-farbe="lav"]{--kf-a:var(--lav);--kf-b:var(--blush);--kf-d:var(--lav-d)}
@property --kf-a{syntax:"<color>";inherits:true;initial-value:#d5e3d0}
@property --kf-b{syntax:"<color>";inherits:true;initial-value:#f7ebbd}

/* „Footage“: Fensterlicht, das langsam über den Schreibtisch wandert, und Staub im Licht. */
.kf-light{position:absolute;inset:-20%;z-index:-1;pointer-events:none;mix-blend-mode:soft-light}
.kf-light span{position:absolute;top:0;bottom:0;width:16%;background:linear-gradient(90deg,transparent,rgba(255,250,235,.95),transparent);
  filter:blur(26px);transform:skewX(-18deg);animation:kf-licht 16s ease-in-out infinite alternate}
.kf-light span:nth-child(1){left:18%}
.kf-light span:nth-child(2){left:42%;width:9%;animation-delay:-5s;animation-duration:19s}
.kf-light span:nth-child(3){left:60%;width:13%;animation-delay:-9s;animation-duration:22s}
@keyframes kf-licht{from{translate:-8% 0;opacity:.55}to{translate:10% 0;opacity:1}}
.kf-dust{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.kf-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(110,84,68,.16) 1px,transparent 1.2px);background-size:9px 9px}

/* iPad mit echter Aufnahme */
.kf-ipad-wrap{position:relative;justify-self:center;width:min(100%,420px);perspective:1400px}
.kf-ipad{transform:rotateY(8deg) rotateX(3deg) rotate(-2.5deg);transition:transform 1.4s var(--ease)}
.kf-stage[data-szene="1"] .kf-ipad{transform:rotateY(-6deg) rotateX(2deg) rotate(1.5deg)}
.kf-stage[data-szene="2"] .kf-ipad{transform:rotateY(5deg) rotateX(4deg) rotate(-1deg) scale(1.02)}
.kf-stage[data-szene="3"] .kf-ipad{transform:rotateY(-4deg) rotateX(3deg) rotate(2deg)}
.kf-stage[data-szene="4"] .kf-ipad{transform:rotateY(0) rotateX(0) rotate(0) scale(1.03)}
.kf-screen{position:relative;aspect-ratio:3/4;border-radius:26px;overflow:hidden;background:var(--cream)}
.kf-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .7s ease}
.kf-screen video.on{opacity:1}
.kf-real{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%) rotate(-1.5deg);white-space:nowrap;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:opacity .5s}
.kf-real::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--terra);margin-right:8px;vertical-align:1px;
  animation:kf-rec 1.6s ease-in-out infinite}
@keyframes kf-rec{50%{opacity:.25}}
.kf-stage[data-szene="4"] .kf-real{opacity:0}

/* Einband (letzte Szene) – klappt im iPad auf und zu */
.kf-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(120% 80% at 30% 20%,#4a6b5a,#2f4a3e 60%,#253b31);color:#e9d9ae;
  transform-origin:0 50%;transform:perspective(1200px) rotateY(-100deg);opacity:0;
  transition:transform 1.3s var(--ease),opacity .4s}
.kf-cover::before{content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px)}
.kf-cover::after{content:"";position:absolute;right:12%;top:-2%;width:9px;height:42%;background:var(--terra);border-radius:0 0 3px 3px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.kf-cover b{position:relative;font-family:var(--serif);font-size:clamp(46px,6vw,72px);font-weight:600;letter-spacing:.01em;color:#ecd9a6;
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 -1px 0 rgba(0,0,0,.35)}
.kf-cover small{position:relative;font-family:var(--script);font-size:18px;color:#d9c896}
.kf-cover i{position:relative;width:46%;height:1px;background:linear-gradient(90deg,transparent,#c6a25a,transparent)}
.kf-stage[data-szene="4"] .kf-cover{transform:perspective(1200px) rotateY(0);opacity:1}

/* Text: Zähler, Überschrift, die sich schreibt, Unterzeile */
.kf-copy{position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.kf-count{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--kf-d);margin-bottom:14px;font-variant-numeric:tabular-nums}
.kf-head{position:relative;display:inline-block;align-self:flex-start;font-family:var(--script);font-size:clamp(34px,4.2vw,56px);line-height:1.35;color:var(--forest2);min-height:1.4em}
.kf-write{display:inline-block;clip-path:inset(-20% 100% -30% 0)}
.kf-pen{position:absolute;top:8%;left:0;width:30px;height:30px;opacity:0;pointer-events:none}
.kf-pen svg{width:100%;height:100%;fill:none;stroke:var(--terra);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kf-sub{font-size:19px;color:var(--muted);max-width:30ch;margin-top:10px;opacity:0;translate:0 10px;transition:opacity .6s .9s,translate .6s .9s var(--ease)}
.kf-stage.text-da .kf-sub{opacity:1;translate:0 0}
.kf-fx{position:relative;height:190px;margin-top:30px}
.kf-fx>div{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.kf-fx>div.on{opacity:1;visibility:visible;transition:opacity .5s}

/* 1 · Fallblatt-Tafel (Ferien-Countdown) */
.kf-flap{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.kf-flap .reihe{display:flex;gap:4px;padding:10px;border-radius:12px;background:#2a2f2c;box-shadow:0 18px 30px -16px rgba(30,30,25,.55),0 0 0 1px rgba(255,255,255,.05) inset}
.kf-flap .z{position:relative;width:30px;height:42px;border-radius:5px;background:linear-gradient(#3b413d 50%,#333935 50%);color:#f3ead8;
  font:700 26px/42px var(--sans);text-align:center;font-variant-numeric:tabular-nums;overflow:hidden}
.kf-flap .z::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.kf-flap .z.dreht{animation:kf-flip .09s linear}
@keyframes kf-flip{0%{transform:scaleY(1)}50%{transform:scaleY(.15)}100%{transform:scaleY(1)}}
.kf-flap .reihe.gold .z{color:var(--gold)}
.kf-flap .z.leer{background:transparent;width:12px}

/* 2 · Handschrift → Schrift */
.kf-hand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kf-hand .zeile{position:relative;padding:12px 22px 10px;min-width:320px;background:#fffdf8;border-radius:6px;
  background-image:linear-gradient(transparent 46px,rgba(74,118,144,.25) 46px 47px,transparent 47px);box-shadow:0 14px 26px -16px rgba(70,55,30,.45)}
.kf-hand .stift,.kf-hand .druck{display:block;font-size:30px;line-height:36px;white-space:nowrap}
.kf-hand .stift{font-family:var(--script);color:#62676a;clip-path:inset(-20% 100% -20% 0)}
.kf-hand .druck{position:absolute;left:22px;top:12px;font-family:var(--sans);font-weight:600;font-size:26px;color:var(--ink);opacity:0;filter:blur(6px)}
.kf-hand.wandelt .stift{opacity:0;filter:blur(6px);transition:opacity .6s,filter .6s}
.kf-hand.wandelt .druck{opacity:1;filter:none;transition:opacity .7s .15s,filter .7s .15s}
.kf-hand .hinweis{font-family:var(--script);font-size:18px;color:var(--terra);opacity:0;translate:-8px 0;transition:opacity .5s .6s,translate .5s .6s var(--ease)}
.kf-hand.wandelt .hinweis{opacity:1;translate:0 0}

/* 3 · Sticker mit Wackelpudding-Feder */
.kf-sticker{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.kf-sticker .st{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;font-family:var(--script);font-size:17px;line-height:1.1;text-align:center;
  color:#fff;box-shadow:0 0 0 4px #fff,0 14px 22px -12px rgba(70,55,30,.55);transform:scale(0) rotate(-20deg)}
.kf-sticker .st svg{width:44px;height:44px;fill:#fff}
.kf-sticker .s1{background:#c97d68}.kf-sticker .s2{background:#7c9a84;width:76px;height:76px}
.kf-sticker .s3{background:#c6a25a;font-family:var(--serif);font-size:38px;font-weight:700}.kf-sticker .s4{background:#8c84b8;width:70px;height:70px}
.kf-sticker .st.platzt{animation:kf-jelly .9s var(--ease) forwards}
@keyframes kf-jelly{0%{transform:scale(0) rotate(-20deg)}40%{transform:scale(1.18,1.08) rotate(6deg)}58%{transform:scale(.9,.96) rotate(-3deg)}
  74%{transform:scale(1.05,1.02) rotate(var(--r,2deg))}100%{transform:scale(1) rotate(var(--r,2deg))}}
.kf-sticker .tape{position:absolute;left:4px;bottom:0}

/* 4 · Tische rasten ein */
.kf-tische{position:relative}
.kf-tische .t{position:absolute;width:74px;height:44px;border-radius:6px;background:linear-gradient(#d7b48a,#c59e70);box-shadow:0 8px 14px -8px rgba(70,45,20,.6);
  transition:transform 1s cubic-bezier(.3,1.5,.5,1)}
.kf-tische .t b{position:absolute;left:50%;top:-12px;translate:-50% 0;padding:2px 9px;border-radius:999px;background:#fff;font:700 11px/1.4 var(--sans);color:var(--ink);
  box-shadow:0 4px 8px -4px rgba(0,0,0,.35);opacity:0;scale:.6;transition:opacity .3s,scale .4s var(--ease)}
.kf-tische.sitzt .t b{opacity:1;scale:1}
.kf-tische .linie{position:absolute;background:var(--terra);opacity:0}
.kf-tische .linie.h{height:1px;left:-10px;right:30%;top:22px}
.kf-tische .linie.v{width:1px;top:-10px;bottom:20%;left:37px}
.kf-tische.rastet .linie{animation:kf-linie 1.1s ease}
@keyframes kf-linie{25%,60%{opacity:.8}100%{opacity:0}}

/* 5 · Ende: App-Store-Knopf mit Feder */
.kf-ende{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.kf-ende .store-badge{transform:scale(.6);opacity:0}
.kf-ende.on .store-badge{animation:kf-jelly-k .9s .3s var(--ease) forwards}
@keyframes kf-jelly-k{0%{transform:scale(.6);opacity:0}45%{transform:scale(1.1,1.04);opacity:1}65%{transform:scale(.96,1)}100%{transform:scale(1);opacity:1}}
.kf-ende .store-badge:hover{animation:kf-wobble .6s var(--ease)}
@keyframes kf-wobble{30%{transform:scale(1.08,.94)}55%{transform:scale(.96,1.05)}75%{transform:scale(1.02,.99)}100%{transform:scale(1)}}
.kf-ende small{font-size:14px;color:var(--muted)}

/* Kapitel-Leiste */
.kf-bar{display:flex;align-items:center;gap:14px;margin-top:22px}
.kf-play{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.75);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.kf-play svg{width:16px;height:16px;fill:currentColor}
.kf-play .ab{display:none}.kf-play.pause .ab{display:block}.kf-play.pause .an{display:none}
.kf-chapters{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;list-style:none;margin:0;padding:0}
.kf-chapters button{width:100%;display:flex;flex-direction:column;gap:7px;align-items:flex-start;background:none;border:0;padding:6px 0;cursor:pointer;
  font:600 13px/1.2 var(--sans);color:var(--muted)}
.kf-chapters button[aria-current="true"]{color:var(--ink)}
.kf-prog{display:block;width:100%;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.kf-prog i{display:block;height:100%;width:0;background:var(--forest2);border-radius:4px}

@media (max-width:900px){
  .kf-stage{grid-template-columns:1fr;gap:26px;padding:34px 22px 64px;min-height:0}
  .kf-copy{order:-1;min-height:0}
  .kf-ipad-wrap{width:min(66%,340px)}
  .kf-fx{height:130px;margin-top:18px}
  .kf-tische{scale:.8;transform-origin:0 0}
  .kf-flap .reihe{gap:3px;padding:7px}
  .kf-flap .z{width:19px;height:28px;font-size:16px;line-height:28px;border-radius:4px}
  .kf-flap .z.leer{width:7px}
  .kf-hand .zeile{min-width:0}
  .kf-sticker .st{width:70px;height:70px;font-size:14px}
  .kf-chapters span:not(.kf-prog){font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .kf-light span,.kf-real::before{animation:none}
  .kf-ipad,.kf-cover,.kf-tische .t{transition:none}
}