/* Tickolo – Webseite. Stil wie im Spiel: kräftige dunkle Umrisse, warme Farben, Abendhimmel und Zeitreise-Glitzer. */
@import url(../fonts/fonts.css);
:root{
  --ink:#2E1C2C; --text:#2B2233; --paper:#FFFBF0; --paper2:#FFF3D6; --night:#15112A; --night2:#231C4A; --dusk:#3A3A8A;
  --gold:#F4B731; --goldL:#FFD970; --goldD:#C98A1E; --red:#E2553A; --teal:#2A9D8F; --blue:#3B6FD8; --sky:#79C7F0; --pink:#F08AA0; --muted:#6A5A70;
  --display:'Grandstander','Comic Sans MS',system-ui,sans-serif; --body:'Atkinson Hyperlegible',system-ui,sans-serif;
  --line:4px solid var(--ink); --pop:0 6px 0 var(--ink);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.6;color:var(--paper);background:var(--night);overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0 0 .4em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(38px,6vw,76px);font-weight:900}
h2{font-size:clamp(30px,4.2vw,52px);font-weight:900}
h3{font-size:24px;font-weight:800}
.outline{color:var(--goldL);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.kicker{display:inline-flex;align-items:center;gap:8px;font:800 15px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--goldL);margin-bottom:10px}
.kicker svg{width:22px;height:22px}
.lead{font-size:clamp(18px,1.6vw,21px)}

/* ---------- Kopfleiste ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.top.solid{background:rgba(21,17,42,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 3px 0 #0006}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:76px}
.logo{display:block;height:54px;flex:none;transition:transform .3s}
.logo:hover{transform:rotate(-3deg) scale(1.04)}
.logo img{height:100%;width:auto;display:block}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font-family:var(--display);font-weight:700;text-decoration:none;padding:6px 12px;border-radius:999px;color:var(--paper);white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{background:#ffffff1f}
.pill{font:800 15px var(--display);border:3px solid var(--ink);background:var(--paper);color:var(--text);border-radius:999px;padding:5px 12px;cursor:pointer;box-shadow:0 3px 0 var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill[aria-pressed=true]{background:var(--gold)}
.lang{display:inline-flex;border:3px solid var(--ink);border-radius:999px;overflow:hidden;box-shadow:0 3px 0 var(--ink);background:var(--paper)}
.lang a{font:800 14px var(--display);padding:5px 10px;color:var(--text);text-decoration:none}
.lang a[aria-current=true]{background:var(--gold)}
@media (max-width:820px){.nav a.opt{display:none}.logo{height:42px}.top .wrap{min-height:64px;gap:8px}.pill .t{display:none}}
.page-pad{height:76px}

/* ---------- Bühne oben: Baumhaus-Szene aus dem Spiel ---------- */
.hero{position:relative;min-height:min(100vh,900px);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:110px 0 120px}
.hero .scene{position:absolute;inset:-6% 0 0 0;z-index:-2;will-change:transform}
.hero .scene svg{width:100%;height:112%;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#15112Af2 0%,#15112Ab3 38%,#15112A33 62%,transparent 80%),linear-gradient(0deg,#15112A 0%,transparent 22%)}
.hero .copy{max-width:600px;will-change:transform}
.hero h1 .l2{display:block;color:#fff;-webkit-text-stroke:2.5px var(--ink);font-size:.62em;margin-top:.15em}
.hero .kids{position:absolute;right:max(4vw,calc(50% - 600px));bottom:9%;width:min(40vw,470px);aspect-ratio:1.15;pointer-events:none;will-change:transform}
.hero .kids svg{width:100%;height:100%;overflow:visible}
@media (max-width:900px){.hero{min-height:auto;padding:100px 0 60px;flex-direction:column;align-items:stretch}.hero::after{background:linear-gradient(180deg,#15112Ae6 0%,#15112A99 45%,#15112A33 75%,#15112A 100%)}.hero .kids{position:relative;right:auto;bottom:auto;width:min(86vw,420px);margin:26px auto 0}}

.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.badge{display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--text);border:var(--line);box-shadow:var(--pop);border-radius:18px;padding:10px 18px;font-family:var(--display);font-weight:800;text-decoration:none;transition:transform .2s}
.badge:hover{transform:translateY(-3px) rotate(-1deg)}
.badge small{display:block;font:700 13px var(--body);color:var(--muted)}
.badge .ic{width:30px;height:30px;flex:none}
.scroll-hint{position:absolute;left:50%;bottom:22px;translate:-50% 0;width:34px;height:52px;border:3px solid #fff8;border-radius:20px}
.scroll-hint::after{content:"";position:absolute;left:50%;top:9px;width:6px;height:10px;margin-left:-3px;border-radius:3px;background:var(--goldL);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{60%{translate:0 16px;opacity:0}61%{translate:0 0;opacity:0}100%{opacity:1}}

/* Spiel-Animationen in der Szene */
.twinkle{animation:twk 3.6s ease-in-out infinite alternate}
@keyframes twk{to{opacity:.15}}
.firefly{animation:ffly 7s ease-in-out infinite}
@keyframes ffly{25%{transform:translate(30px,-20px)}50%{transform:translate(-10px,-40px);opacity:.3}75%{transform:translate(-30px,-10px)}}
.cloud{animation:cld 60s linear infinite alternate}
@keyframes cld{to{transform:translateX(120px)}}

/* ---------- Abschnitte ---------- */
.band{position:relative;padding:96px 0}
.band.light{background:var(--paper);color:var(--text);background-image:radial-gradient(#E9DFC6 1.5px,transparent 1.6px);background-size:26px 26px}
.band.light .outline{color:var(--gold)}
.band.dusk{background:linear-gradient(180deg,var(--night) 0%,var(--night2) 100%)}
.band.deep{background:radial-gradient(ellipse at 30% 0%,#2B3C9A55,transparent 60%),var(--night)}
.wave{position:absolute;left:0;right:0;height:70px;width:100%;display:block;pointer-events:none}
.wave.top{top:-69px}
.head{text-align:center;max-width:760px;margin:0 auto 46px}
.head p{margin:0}

/* Sterne im Hintergrund */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.6;animation:twk 3s ease-in-out infinite alternate}

/* Einblenden beim Scrollen */
.rv{opacity:0;translate:0 40px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;translate:0 0}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* Polaroids mit echten Bildern aus dem Spiel */
.polaroid{background:#fff;border:var(--line);border-radius:14px;padding:10px 10px 14px;box-shadow:var(--pop);color:var(--text);transform:rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.polaroid{margin:0}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:2px solid #0002}
.polaroid figcaption{font:800 18px var(--display);text-align:center;margin-top:8px}
.polaroid:hover{transform:rotate(0) scale(1.03)}
.pin{position:absolute;top:-12px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FF8A7A,#C0392B);border:3px solid var(--ink);z-index:2}

/* So spielt man */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:st}
.step{position:relative}
.step .polaroid{position:relative}
.step .num{position:absolute;left:-14px;top:-18px;z-index:3;width:54px;height:54px;border-radius:50%;background:var(--gold);border:var(--line);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;font:900 28px var(--display);color:var(--ink)}
.step h3{margin:18px 0 4px}
.step p{margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr;max-width:520px;margin:auto}}

/* Lupe */
.lens-wrap{display:grid;grid-template-columns:1fr 1.35fr;gap:40px;align-items:center}
@media (max-width:900px){.lens-wrap{grid-template-columns:1fr}}
.lensbox{position:relative;border:var(--line);border-radius:22px;box-shadow:0 8px 0 var(--ink);overflow:hidden;cursor:none;touch-action:none;aspect-ratio:16/9;background:#000}
.lensbox>img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.8);transition:filter .3s}
.lens{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;border:8px solid #C26E3C;box-shadow:0 0 0 4px var(--ink),0 12px 30px #0009,inset 0 0 30px #fff6;background-repeat:no-repeat;pointer-events:none;will-change:transform}
.lens::after{content:"";position:absolute;right:-56px;bottom:-56px;width:80px;height:22px;background:#8A5420;border:4px solid var(--ink);border-radius:12px;rotate:45deg;transform-origin:left center}
.lens::before{content:"";position:absolute;left:22px;top:18px;width:46px;height:24px;border-radius:50%;border-top:6px solid #fff9;rotate:-30deg}
.lensbox .tip{position:absolute;left:14px;bottom:12px;font:800 15px var(--display);background:#000a;padding:4px 12px;border-radius:999px}
@media (max-width:600px){.lens{width:140px;height:140px;margin:-70px 0 0 -70px}}

/* Orte – Karten mit 3D-Neigung */
.places{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:900px}
@media (max-width:1000px){.places{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.places{grid-template-columns:1fr}}
.place{position:relative;border:var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--pop);background:var(--night2);transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .25s;aspect-ratio:3/4}
.place img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .5s;transform:scale(1.15)}
.place:hover img{transform:scale(1.25)}
.place .lab{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(0deg,#15112Aee,transparent);transform:translateZ(30px)}
.place .lab b{display:block;font:900 24px var(--display);color:var(--goldL);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
.place .lab span{font-size:15px}
.place .glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#fff4,transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none}
.place:hover .glare{opacity:1}

/* Lernen */
.skills{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1000px){.skills{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.skills{grid-template-columns:1fr}}
.skill{background:#fff;border:var(--line);border-radius:22px;box-shadow:var(--pop);padding:18px 16px;text-align:center;transition:transform .25s}
.skill:hover{transform:translateY(-6px) rotate(-1.5deg)}
.skill .ico{width:84px;height:84px;margin:0 auto 6px;display:block}
.skill h3{font-size:20px;margin:0 0 4px}
.skill p{font-size:15.5px;margin:0;color:#4A3E50}
.skill:nth-child(1){background:#FFF1C9}.skill:nth-child(2){background:#DDF4F0}.skill:nth-child(3){background:#FFE1DA}.skill:nth-child(4){background:#E6E4FF}.skill:nth-child(5){background:#E2F3D9}
.carousel{position:relative;margin-top:50px}
.games{overflow:hidden;padding:22px 0 30px;margin:0 -16px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:30px;will-change:transform}
.track .polaroid{flex:0 0 min(560px,80vw)}
.track .polaroid:nth-child(odd){--r:-1.5deg}.track .polaroid:nth-child(even){--r:1.5deg}
.car-btn{position:absolute;top:50%;z-index:3;width:68px;height:68px;margin-top:-34px;border-radius:50%;border:var(--line);background:var(--gold);box-shadow:0 5px 0 var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform .15s}
.car-btn:hover{transform:scale(1.08)}
.car-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.car-btn svg{width:34px;height:34px}
.car-btn.prev{left:-8px}.car-btn.next{right:-8px}
@media (max-width:600px){.car-btn{width:54px;height:54px;margin-top:-27px}.car-btn svg{width:26px;height:26px}}

/* Baumhaus */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:46px;align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.hearts{display:flex;gap:10px;margin-top:16px}
.hearts svg{width:34px;height:34px;animation:beat 1.6s ease-in-out infinite}
.hearts svg:nth-child(2){animation-delay:.2s}.hearts svg:nth-child(3){animation-delay:.4s}
@keyframes beat{15%{scale:1.2}30%{scale:1}}

/* Eltern */
.promise{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:800px){.promise{grid-template-columns:1fr}}
.promise li{display:flex;gap:14px;align-items:flex-start;background:#ffffff10;border:2px solid #ffffff26;border-radius:20px;padding:16px 18px}
.promise .dot{flex:none;width:44px;height:44px;border-radius:14px;background:var(--gold);border:3px solid var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 var(--ink)}
.promise .dot svg{width:24px;height:24px}
.promise b{font-family:var(--display);font-size:19px;display:block}
.devices{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* Abschluss */
.cta{text-align:center}
.cta .badges{justify-content:center}

/* Fußzeile */
footer{padding:46px 0 130px;background:#0E0B1F;color:#E7E0F5}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{font-weight:700}

/* ---------- Textseiten ---------- */
.page{padding:110px 0 30px;position:relative}
.doc{max-width:880px;margin:auto;background:var(--paper);color:var(--text);border:var(--line);border-radius:28px;box-shadow:var(--pop);padding:34px}
.doc h1{font-size:clamp(32px,5vw,50px);margin-bottom:.2em}
.doc h2{font-size:27px;margin-top:1.6em}
.doc h3{font-size:21px;margin-top:1.2em}
.doc .short{background:#DDF4F0;border:3px solid var(--ink);border-radius:20px;padding:16px 20px;box-shadow:0 4px 0 var(--ink)}
.doc .note{background:var(--paper2);border:3px dashed var(--goldD);border-radius:16px;padding:12px 16px}
.doc a{color:#1D4FB8}
details{border:3px solid var(--ink);border-radius:18px;padding:12px 18px;margin:12px 0;background:#fff;box-shadow:0 4px 0 var(--ink)}
details summary{font-family:var(--display);font-weight:800;font-size:20px;cursor:pointer}
details[open] summary{margin-bottom:6px}
@media (max-width:600px){.doc{padding:22px 18px}.doc ul{padding-left:20px}body{font-size:17px}}

/* Sprach-Hinweis */
.langhint{position:fixed;left:16px;bottom:16px;z-index:60;background:var(--paper);color:var(--text);border:var(--line);border-radius:18px;box-shadow:var(--pop);padding:10px 14px;font:700 16px var(--display);display:flex;gap:10px;align-items:center}
.langhint button{font:inherit;border:0;background:none;cursor:pointer;color:var(--muted)}

/* ---------- Tick, der Begleiter ---------- */
#tick{position:fixed;left:0;top:0;z-index:50;width:150px;height:170px;border:0;padding:0;background:none;cursor:pointer;will-change:transform;-webkit-tap-highlight-color:transparent}
#tick:focus-visible{outline:4px solid var(--gold);outline-offset:4px;border-radius:30px}
#tick .bob{width:100%;height:100%;animation:bob 2.6s ease-in-out infinite}
#tick svg{width:100%;height:100%;overflow:visible}
#tick.spin .bob{animation:spin .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes bob{50%{translate:0 -10px}}
@keyframes spin{0%{rotate:0;scale:1}40%{scale:1.15}100%{rotate:360deg;scale:1}}
#tick .flame{transform-origin:0 70px;animation:flame .18s ease-in-out infinite alternate}
#tick.fast .flame{animation-duration:.07s;scale:1 1.7}
@keyframes flame{to{scale:.85 1.2}}
#tick .blink{transform-box:fill-box;transform-origin:center;transition:transform .08s}
#tick.shut .blink{transform:scaleY(.12)}
#tick .wave{transform-origin:56px 10px}
#tick.hi .wave{animation:wave .45s ease-in-out 3 alternate}
@keyframes wave{to{rotate:-22deg}}
#tick .tick-hands{opacity:.5}
#bubble{position:fixed;z-index:51;left:0;top:0;width:min(330px,calc(100vw - 32px));background:var(--paper);color:var(--text);
  border:var(--line);border-radius:22px;box-shadow:0 5px 0 var(--ink);padding:12px 16px;font:700 17px/1.45 var(--display);
  opacity:0;scale:.85;pointer-events:none;transition:opacity .25s,scale .25s;will-change:transform}
#bubble.on{opacity:1;scale:1;pointer-events:auto}
#bubble::after{content:"";position:absolute;width:22px;height:22px;background:var(--paper);border:var(--line);border-top:0;border-left:0;rotate:45deg;bottom:-13px;left:var(--tail,40px)}
#bubble small{display:block;font:700 13px var(--body);color:var(--muted);margin-top:4px}
#bubble .x{position:absolute;right:6px;top:2px;border:0;background:none;font:900 20px var(--display);color:var(--muted);cursor:pointer;padding:2px 6px}
#bubble .t{padding-right:14px}
.spark{position:fixed;z-index:49;width:14px;height:14px;pointer-events:none;background:var(--goldL);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark .8s ease-out forwards}
.spark.trail{width:10px;height:10px;animation-duration:.9s}
@keyframes spark{to{translate:var(--dx) var(--dy);rotate:180deg;opacity:0;scale:.3}}
@media (max-width:720px){#tick{width:96px;height:110px}#bubble{font-size:16px}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.rv{opacity:1;translate:0 0}}