/* ============ Das Schulkind — Interaktives Workshop-Deck ============ */
:root{
  --bg:#f4f2e8;
  --bg-2:#efeddf;
  --ink:#2f312b;
  --ink-soft:#54574c;
  --muted:#7a7d6f;
  --green:#3f4a34;
  --green-2:#4a583c;
  --green-line:#c8d3b8;
  --green-card:#e3ead9;
  --mint:#dce8de;
  --blue:#bcd7f6;
  --blue-ink:#1e4b7a;
  --white:#fff;
  --accent:#c05a3a;
  --shadow:0 10px 40px rgba(45,55,35,.10);
  --radius:14px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter","IBM Plex Sans",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* ---------- Deck / slides ---------- */
.deck{position:fixed;inset:0}
.slide{
  position:absolute;inset:0;
  display:none;
  padding:64px clamp(28px,6vw,110px);
  overflow-y:auto;
  animation:fade .5s ease;
}
.slide.active{display:flex;flex-direction:column;justify-content:center}
.slide-inner{width:100%;max-width:var(--maxw);margin:0 auto}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- typography ---------- */
h1.title{font-size:clamp(34px,5vw,60px);line-height:1.04;font-weight:800;color:var(--green);letter-spacing:-.02em;margin:.1em 0 .35em}
h2{font-size:clamp(28px,4vw,46px);line-height:1.08;font-weight:800;color:var(--green);letter-spacing:-.02em;margin:0 0 .3em}
h3{font-size:clamp(20px,2.4vw,30px);font-weight:800;color:var(--green);margin:.2em 0 .35em;letter-spacing:-.01em}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lead{font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--ink-soft);max-width:60ch;margin:0 0 .6em}
p{font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:var(--ink-soft);margin:.35em 0}
strong{color:var(--ink);font-weight:700}
.hl{color:var(--green);font-weight:700}
ul.clean{list-style:none;padding:0;margin:.4em 0}
ul.clean li{position:relative;padding-left:26px;margin:.5em 0;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--ink-soft)}
ul.clean li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.small{font-size:14px;color:var(--muted)}

/* ---------- layout helpers ---------- */
.cols{display:grid;gap:24px}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.c2,.c3,.split{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{background:var(--green-card);border:1px solid var(--green-line);border-radius:var(--radius);padding:22px 24px}
.card h4{margin:0 0 2px;font-size:19px;color:var(--green);font-weight:800}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:italic;margin-bottom:10px;display:block}
.card p{margin:.2em 0;font-size:15.5px}
.card.dark{background:var(--green);border-color:var(--green)}
.card.dark,.card.dark h4,.card.dark p,.card.dark strong{color:#f2f0e4}
.card.dark .tag{color:#c3cbb0}
.card.mint{background:var(--mint);border-color:#c4d8c8}
.card.plain{background:#fbfaf3;border-color:#e3e1d2}

.callout{border-radius:var(--radius);padding:20px 24px;margin-top:22px;display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.callout .ico{font-size:20px;line-height:1}
.callout.blue{background:var(--blue);color:#173a5e}
.callout.blue strong{color:#0f2c48}
.callout.green{background:var(--mint);color:#33402f}
.callout.warn{background:#f7e6cf;color:#6b4a1e}

/* ---------- badge / chips ---------- */
.pill{display:inline-block;background:var(--green-card);border:1px solid var(--green-line);color:var(--green);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;margin:3px}
.newbadge{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:6px;vertical-align:middle;margin-left:8px}

/* ---------- numbered principles ---------- */
.principle{display:flex;gap:16px;margin:14px 0;align-items:flex-start}
.principle .n{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:var(--green-card);border:1px solid var(--green-line);color:var(--green);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.principle h4{margin:.15em 0 .1em;font-size:18px;color:var(--ink);font-weight:800}
.principle p{margin:0;font-size:15px}

/* ---------- interactive: live word cloud ---------- */
.wc-input{display:flex;gap:10px;margin:20px 0 8px;max-width:560px}
.wc-input input{flex:1;font:inherit;font-size:17px;padding:12px 16px;border:2px solid var(--green-line);border-radius:10px;background:#fff;color:var(--ink)}
.wc-input input:focus{outline:none;border-color:var(--green)}
.btn{font:inherit;font-weight:700;font-size:15px;border:none;cursor:pointer;padding:12px 20px;border-radius:10px;background:var(--green);color:#f2f0e4;transition:.15s}
.btn:hover{background:var(--green-2);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green-line)}
.btn.ghost:hover{background:var(--green-card)}
.wc-cloud{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline;margin-top:20px;min-height:80px}
.wc-cloud span{animation:pop .35s ease;color:var(--green);font-weight:700;line-height:1}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* ---------- interactive: poll ---------- */
.poll{max-width:640px;margin-top:22px}
.poll .opt{display:flex;align-items:center;gap:14px;margin:12px 0;cursor:pointer}
.poll .bar-wrap{flex:1;background:#e7e5d6;border-radius:8px;height:44px;position:relative;overflow:hidden;border:1px solid #ddd9c6}
.poll .bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--green-card);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.poll .opt.lead .bar{background:#cfe0be}
.poll .lbl{position:absolute;left:16px;top:0;bottom:0;display:flex;align-items:center;font-weight:600;color:var(--ink);z-index:2;font-size:15.5px}
.poll .cnt{position:absolute;right:14px;top:0;bottom:0;display:flex;align-items:center;font-weight:800;color:var(--green);z-index:2}
.poll .plus{width:44px;height:44px;flex:0 0 auto;border-radius:8px;border:2px solid var(--green-line);background:#fff;color:var(--green);font-size:22px;font-weight:700;cursor:pointer;transition:.15s}
.poll .plus:hover{background:var(--green);color:#fff}

/* ---------- interactive: flip quiz ---------- */
.quizgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
@media(max-width:820px){.quizgrid{grid-template-columns:1fr}}
.flip{perspective:1400px;min-height:210px;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;min-height:210px;transition:transform .6s;transform-style:preserve-3d}
.flip.open .flip-in{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;justify-content:center}
.flip .front{background:#fbfaf3;border:1px solid #e3e1d2}
.flip .front .q{font-weight:700;color:var(--ink);font-size:17px;line-height:1.4}
.flip .front .hint{margin-top:auto;font-size:13px;color:var(--muted);font-weight:600}
.flip .back{background:var(--green);color:#f2f0e4;transform:rotateY(180deg)}
.flip .back p{color:#f2f0e4;font-size:15px;margin:.2em 0}
.flip .back .a{font-weight:800;color:#fff;font-size:16px;margin-bottom:6px}

/* ---------- interactive: case tabs ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 20px}
.tab{font:inherit;font-weight:700;font-size:14.5px;padding:10px 18px;border-radius:999px;border:2px solid var(--green-line);background:#fbfaf3;color:var(--ink-soft);cursor:pointer;transition:.15s}
.tab.active{background:var(--green);color:#f2f0e4;border-color:var(--green)}
.casepanel{display:none;animation:fade .4s ease}
.casepanel.active{display:block}

/* ---------- interactive: timer ---------- */
.timer{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.timer .clock{font-size:clamp(48px,8vw,84px);font-weight:800;color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer .ctrls{display:flex;gap:10px}

/* ---------- timeline (havighurst) ---------- */
.tl{position:relative;margin-top:10px}
.tl-item{display:grid;grid-template-columns:1fr 44px 1fr;gap:0;align-items:start;margin:2px 0}
.tl-node{width:40px;height:40px;border-radius:9px;background:var(--green-card);border:1px solid var(--green-line);color:var(--green);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:2;position:relative}
.tl-line{position:absolute;left:calc(50% - 1px);top:20px;bottom:20px;width:2px;background:var(--green-line);z-index:1}
.tl-box{padding:6px 18px}
.tl-box.r{text-align:left}
.tl-box.l{text-align:right}
.tl-box h4{font-size:18px;color:var(--ink);margin:0 0 4px}
.tl-box p{font-size:14px;margin:.2em 0}
.tl-box .empty{visibility:hidden}
@media(max-width:820px){
  .tl-item{grid-template-columns:44px 1fr}
  .tl-line{left:19px}
  .tl-box.l{text-align:left;order:3}
  .tl-node{order:1}.tl-box.r{order:2}
}

/* ---------- video cards ---------- */
.vidgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
@media(max-width:820px){.vidgrid{grid-template-columns:1fr}}
.vid{display:block;text-decoration:none;background:#fbfaf3;border:1px solid #e3e1d2;border-radius:var(--radius);overflow:hidden;transition:.15s}
.vid:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.vid .thumb{aspect-ratio:16/8;background:linear-gradient(135deg,#3f4a34,#5c6b48);display:flex;align-items:center;justify-content:center;position:relative}
.vid .thumb .play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.vid .thumb .play::after{content:"";border-left:20px solid var(--green);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.vid .meta{padding:16px 18px}
.vid .meta .t{font-weight:800;color:var(--ink);font-size:16px}
.vid .meta .s{font-size:13px;color:var(--muted);margin-top:3px}

/* ---------- section divider ---------- */
.divider{text-align:left}
.divider .kicker{font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.divider h2{font-size:clamp(44px,7vw,86px);margin:.15em 0}
.divider .sub{font-size:clamp(17px,1.8vw,22px);color:var(--ink-soft);max-width:56ch}
.divider .dots{display:flex;gap:10px;margin-top:26px}
.divider .dots i{width:12px;height:12px;border-radius:50%;background:var(--green-line)}
.divider .dots i.on{background:var(--green)}

/* ---------- agenda ---------- */
.agenda{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
@media(max-width:820px){.agenda{grid-template-columns:1fr}}
.agenda .item{display:flex;gap:14px;align-items:center;background:#fbfaf3;border:1px solid #e3e1d2;border-radius:12px;padding:14px 18px;cursor:pointer;transition:.15s}
.agenda .item:hover{background:var(--green-card);border-color:var(--green-line);transform:translateX(4px)}
.agenda .item .ix{font-weight:800;color:var(--green);font-size:20px;width:30px}
.agenda .item .tx b{display:block;color:var(--ink);font-size:16px}
.agenda .item .tx span{font-size:13px;color:var(--muted)}

/* ---------- title slide ---------- */
.hero-mark{display:inline-flex;gap:10px;font-size:44px;margin-bottom:10px}
.hero-tags{margin-top:26px}

/* ---------- reflection textarea ---------- */
.reflect{margin-top:20px;max-width:640px}
.reflect textarea{width:100%;min-height:96px;font:inherit;font-size:16px;padding:14px 16px;border:2px solid var(--green-line);border-radius:12px;background:#fff;color:var(--ink);resize:vertical}
.reflect textarea:focus{outline:none;border-color:var(--green)}

/* ---------- chrome: nav / progress / dots ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:5px;background:transparent;z-index:50}
.topbar .fill{height:100%;background:var(--green);width:0;transition:width .35s}
.chrome{position:fixed;bottom:18px;right:24px;display:flex;align-items:center;gap:10px;z-index:50}
.chrome .nbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--green-line);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);color:var(--green);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.chrome .nbtn:hover{background:var(--green);color:#fff}
.counter{position:fixed;bottom:24px;left:24px;z-index:50;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.05em;background:rgba(255,255,255,.7);padding:6px 12px;border-radius:999px}
.dotnav{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:50;display:flex;gap:7px;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);padding:8px 12px;border-radius:999px;max-width:70vw;flex-wrap:wrap;justify-content:center}
.dotnav i{width:9px;height:9px;border-radius:50%;background:var(--green-line);cursor:pointer;transition:.15s}
.dotnav i:hover{transform:scale(1.4)}
.dotnav i.on{background:var(--green);width:22px;border-radius:999px}
.brand{position:fixed;top:16px;left:24px;z-index:50;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hint-help{position:fixed;top:16px;right:24px;z-index:50;font-size:12px;color:var(--muted)}

@media(max-width:820px){
  .slide{padding:56px 22px 90px}
  .counter,.hint-help{display:none}
}

/* 4er-Grid (Exkurs) */
.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.c4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.c4{grid-template-columns:1fr}}