@font-face{font-family:"Lilita One";src:url(../fonts/lilita_one-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(../fonts/fredoka-700.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-800.woff2) format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --ink:#2B2433; --ink-soft:#5A5166; --paper:#FBF6EC; --sky:#D7ECF4;
  --mag:#D63C6E; --mag-deep:#A82552; --stone:#EFE4CB;
  --visitor:#2F6FE0;   /* Scout, Blau */
  --shop:#E8503A;      /* Mo, Koralle */
  --scout:#2F6FE0; --mo:#E8503A; --ohm:#7A45C9; --keeper:#2BAE8C; --dash:#9CC21A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Nunito",system-ui,sans-serif;color:var(--ink);background:var(--sky);-webkit-font-smoothing:antialiased}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.stage{position:relative;width:100%;min-height:max(100svh,62.5vw);overflow:hidden;background:var(--sky)}
header{position:absolute;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;pointer-events:none}
header>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .mark{width:38px;height:38px}
.brand .word{font-family:"Lilita One",sans-serif;font-size:28px;letter-spacing:.5px;line-height:1}
.brand .by{font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:.4px;margin-top:3px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mag-deep);background:#fff;border:2px solid var(--mag);border-radius:999px;padding:6px 12px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--mag);display:inline-block}
.copy{position:absolute;z-index:30;left:40px;right:40px;top:98px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;pointer-events:none}
.copy>*{pointer-events:auto}
.copy .right{max-width:520px;padding-top:6px}
h1{font-family:"Lilita One",sans-serif;font-weight:400;font-size:62px;line-height:.98;margin:0;color:var(--ink);letter-spacing:-.3px;max-width:620px}
h1 em{font-style:normal;color:var(--mag)}
.lead{font-size:18px;line-height:1.45;font-weight:600;margin:0 0 16px;color:var(--ink)}
.lead b{font-weight:900}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cta a{font-family:"Fredoka",sans-serif;font-weight:600;font-size:16px;text-decoration:none;padding:11px 18px;border-radius:999px;border:2px solid var(--ink);color:var(--ink);background:#fff}
.cta a.primary{background:var(--mag);border-color:var(--mag);color:#fff}
.cta a:focus-visible,.fig:focus-visible .ring{outline:3px solid var(--ink);outline-offset:3px}
.legend{position:absolute;z-index:30;left:0;right:0;bottom:0;display:flex;gap:28px;align-items:center;justify-content:space-between;padding:12px 40px;background:var(--paper);border-top:3px solid var(--ink);font-size:13.5px;font-weight:700;color:var(--ink)}
.legend ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.legend li{display:flex;align-items:center;gap:9px}
.legend li span{font-weight:600;color:var(--ink-soft)}
.legend .sw{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);flex:none}
.legend .note{font-weight:600;color:var(--ink-soft);white-space:nowrap}

/* ============ Welt: feste Bühne 1440x900 (Handy 390x440), skaliert ============ */
.world{position:absolute;left:50%;bottom:0;width:max(100vw,160svh);aspect-ratio:1440/900;transform:translateX(-50%);container-type:inline-size}
.layer{position:absolute;display:block;will-change:transform;pointer-events:none}
.figs{position:absolute;inset:0;transform-style:flat}
.layer.l-far{z-index:0}.layer.l-mid{z-index:1}.layer.l-road{z-index:2}.figs{z-index:3}.layer.l-fore{z-index:4}
.over{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}
.light{position:absolute;inset:0;z-index:7;pointer-events:none;background:rgba(255,190,110,0);animation:daylight 84s ease-in-out infinite}
@keyframes daylight{
  0%{background:rgba(255,200,130,.10)}
  22%{background:rgba(255,236,190,0)}
  50%{background:rgba(255,255,255,0)}
  72%{background:rgba(255,150,110,.13)}
  88%{background:rgba(70,60,140,.17)}
  100%{background:rgba(255,200,130,.10)}
}
.drift{animation:drift var(--dur) ease-in-out var(--del) infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(var(--dx))}}

/* Figuren: Knopf = ganze Figur, nie ein Kasten */
.fig{position:absolute;left:0;top:0;width:0;height:0;padding:0;margin:0;border:0;background:none;cursor:pointer;transform-origin:0 0;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
.fig .box{position:absolute;pointer-events:auto}
.fig .ring{position:absolute;inset:-4px;border-radius:40%}
.fig .tilt{position:absolute;inset:0;transform-origin:50% 96%;will-change:transform}
.fig .tilt img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);opacity:0;transition:opacity .22s ease;user-select:none;-webkit-user-drag:none;pointer-events:none}
.fig .tilt img.on{opacity:1}
.fig .sh{position:absolute;left:50%;bottom:-6%;width:78%;height:11%;margin-left:-39%;background:radial-gradient(closest-side,rgba(43,36,51,.34),rgba(43,36,51,.12) 60%,rgba(43,36,51,0));pointer-events:none}

/* Namensschilder, Sprechblasen, Stempel, Karte (feste, lesbare Schriftgröße) */
.tag{position:absolute;left:0;top:0;transform-origin:50% 0;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:1px .7em;font-family:"Fredoka",sans-serif;font-weight:700;font-size:var(--tagfs,13px);line-height:1.5;white-space:nowrap;pointer-events:none}
.bub{position:absolute;left:0;top:0;opacity:0;pointer-events:none;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:.45em .75em;font-family:"Fredoka",sans-serif;font-weight:700;font-size:var(--bfs,15px);line-height:1.22;color:var(--ink);text-align:center;white-space:nowrap;transition:opacity .25s ease;box-shadow:0 3px 0 rgba(43,36,51,.12)}
.bub::after{content:"";position:absolute;left:var(--tail,50%);bottom:-.62em;width:.7em;height:.7em;background:inherit;border:2.5px solid var(--ink);border-top:0;border-left:0;transform:translateX(-50%) rotate(45deg);border-radius:0 0 3px 0}
.bub.on{opacity:1}
.bub.pink{background:#F9C5D6}
.stamp{position:absolute;left:0;top:0;opacity:0;pointer-events:none;font-family:"Lilita One",sans-serif;letter-spacing:1px;font-size:calc(var(--bfs,15px)*1.45);color:#fff;border:3px solid var(--ink);border-radius:10px;padding:.15em .7em;transition:opacity .2s ease}
.stamp.on{opacity:1}
.stamp.deal{background:#2E9E6B}.stamp.nodeal{background:#8A8296}
.card{position:absolute;left:0;top:0;width:var(--cw,250px);background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:12px 14px 13px;font-size:var(--cfs,15px);line-height:1.35;font-weight:700;color:var(--ink);z-index:9;pointer-events:auto;box-shadow:0 5px 0 rgba(43,36,51,.18);opacity:0;visibility:hidden;transition:opacity .2s ease}
.card.on{opacity:1;visibility:visible}
.card h3{margin:0 0 2px;font-family:"Lilita One",sans-serif;font-weight:400;font-size:1.45em;letter-spacing:.5px}
.card .role{display:inline-block;font-family:"Fredoka",sans-serif;font-weight:600;font-size:.78em;letter-spacing:.8px;text-transform:uppercase;color:#fff;border-radius:999px;padding:1px 9px;margin-bottom:6px;background:var(--c,var(--mag))}
.card p{margin:0;font-weight:600;color:var(--ink-soft)}
.card button{position:absolute;right:6px;top:4px;border:0;background:none;font-size:22px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px}
.card button:focus-visible{outline:3px solid var(--ink);border-radius:8px}

/* ============ Handy ============ */
.stage.phone{display:none}
@media (max-width:760px){
  .stage.desktop{display:none}
  .stage.phone{display:block;min-height:auto;background:var(--sky)}
  .stage.phone header{position:static;padding:16px 18px 6px}
  .brand .word{font-size:24px}.brand .mark{width:32px;height:32px}
  .stage.phone .copy{position:static;max-width:none;padding:4px 18px 8px;flex-direction:column;gap:8px}
  .copy .right{padding-top:0}
  h1{font-size:32px;margin-bottom:2px}
  .lead{font-size:14.5px;line-height:1.4;margin-bottom:10px}
  .cta a{font-size:14px;padding:9px 14px}
  .stage.phone .world{position:relative;left:auto;bottom:auto;transform:none;width:100%;aspect-ratio:390/440;overflow:hidden}
  .stage.phone .legend{position:static;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 18px 16px}
  .legend ul{flex-direction:column;gap:6px}
  .legend .note{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.drift,.light{animation:none}.fig .tilt img,.bub,.stamp,.card{transition:none}}
/* Handy: Tageslicht-Tönung läuft nach oben aus, damit keine Kante zur Kopfzeile entsteht */
@media (max-width:760px){.stage.phone .light{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}}

/* Nacharbeit 09.11.: Tablet-Breiten (761–1000 px): Text oben, Welt in Seitenbreite darunter, Fußleiste darunter (nichts verdeckt sich) */
@media (min-width:761px) and (max-width:1000px){
  .stage.desktop{min-height:auto}
  .stage.desktop header{position:static;padding:20px 28px 6px}
  .stage.desktop .copy{position:relative;left:0;right:0;top:0;flex-direction:column;gap:12px;padding:6px 28px 22px}
  .copy .right{max-width:560px;padding-top:0}
  h1{font-size:54px;max-width:none}
  .stage.desktop .world{position:relative;left:auto;bottom:auto;transform:none;width:100%;overflow:hidden;margin-top:-110px}
  .stage.desktop .light{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}
  .stage.desktop .legend{position:static;flex-wrap:wrap;gap:6px 24px;padding:10px 28px}
  .legend ul{flex-wrap:wrap;gap:6px 22px}
}