/* Lebendige Startseite (Vorschau 23.10.2026): eine Botschaft pro Bildschirm,
   jede mit einer Zeichnung, die sich selbst zeichnet und dann anmalt (zeichnen.js). */

/* Burgund-Verlauf, der langsam atmet (Platzhalter für Annas Wallpaper) */
.wall{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:#3b0320}
.wall-bg{position:absolute;inset:-25%;z-index:-2}
.wall-bg i{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform}
.wall-bg i:nth-child(1){width:75vmax;height:75vmax;left:-15%;top:-20%;background:radial-gradient(circle,#a3125d,transparent 64%);animation:wd1 24s ease-in-out infinite alternate}
.wall-bg i:nth-child(2){width:60vmax;height:60vmax;right:-18%;top:5%;background:radial-gradient(circle,#e0586a,transparent 62%);opacity:.5;animation:wd2 28s ease-in-out infinite alternate}
.wall-bg i:nth-child(3){width:55vmax;height:55vmax;left:10%;bottom:-30%;background:radial-gradient(circle,#ffb000,transparent 60%);opacity:.28;animation:wd3 32s ease-in-out infinite alternate}
.wall-bg i:nth-child(4){width:55vmax;height:55vmax;right:0;bottom:-15%;background:radial-gradient(circle,#2e1a4a,transparent 65%);animation:wd1 36s ease-in-out infinite alternate-reverse}
@keyframes wd1{to{transform:translate(12vw,9vh) scale(1.15)}}
@keyframes wd2{to{transform:translate(-14vw,8vh) scale(.9)}}
@keyframes wd3{to{transform:translate(8vw,-12vh) scale(1.2)}}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:84px 22px 48px}
.hero-art{width:min(46vw,210px);aspect-ratio:560/890;margin-bottom:6px}
.hero h1{font:700 clamp(36px,10vw,76px)/1.04 var(--display);margin:0;max-width:760px;text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#ffd27a,#ffb000,#ff8f6b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:17px;line-height:1.55;max-width:420px;margin:18px auto 28px;color:rgba(255,255,255,.86)}
.hero .dl-note{color:#fff}
.hero .dl-desk,.cta-end .dl-desk{justify-content:center}

/* Eine Szene = eine Botschaft */
.scene{min-height:92svh;display:grid;align-content:center;justify-items:center;gap:8px;padding:72px 24px;text-align:center;max-width:1100px;margin:0 auto}
.scene canvas,.scene .art{width:min(78vw,340px);aspect-ratio:1/1}
.scene .art img{width:100%;height:100%;object-fit:contain}
.eyebrow{display:inline-block;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--burgund);background:rgba(125,8,69,.08);padding:8px 14px;border-radius:999px;margin-top:10px}
.scene h2{font:700 clamp(34px,9.5vw,64px)/1.04 var(--display);color:var(--burgund);margin:14px 0 0;text-wrap:balance;max-width:640px}
.scene p{font-size:18px;line-height:1.6;color:var(--muted);max-width:440px;margin:14px auto 0}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 16px/1 var(--sans);color:var(--burgund);text-decoration:none;padding:12px 4px;border-bottom:2px solid currentColor}
.more span{transition:transform .2s var(--ease)}
.more:hover span{transform:translateX(5px)}
.scene--tint{background:linear-gradient(180deg,#fbf3ea,#f8e6d8)}
.band{width:100%}
@media (min-width:900px){
  .scene{grid-template-columns:1fr 1fr;justify-items:start;text-align:left;gap:56px;align-items:center}
  .scene > .txt{max-width:480px}
  .scene p{margin-left:0}
  .scene canvas,.scene .art{width:400px;justify-self:center}
  .scene.rev canvas,.scene.rev .art{order:2}
}

/* bloomie hüpft herein und winkt */
.bloomie-in{opacity:0;transform:translateY(40px) scale(.92);transition:opacity .7s var(--ease),transform .9s cubic-bezier(.3,1.5,.5,1)}
.bloomie-in.in{opacity:1;transform:none}
.bloomie-in.in img{animation:wave 2.6s 1s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}10%{transform:rotate(-3deg)}20%{transform:rotate(3deg)}30%{transform:rotate(0)}}
.bubble{display:inline-block;margin-top:6px;background:#fff;color:var(--burgund);border-radius:18px 18px 18px 4px;padding:10px 16px;font-weight:600;box-shadow:0 10px 24px rgba(46,26,74,.12)}

/* Mehr, in einer Zeile */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 22px 70px;max-width:760px;margin:0 auto}
.chip{padding:12px 18px;border-radius:999px;background:#fff;border:1px solid rgba(125,8,69,.16);font-size:15px;color:var(--ink)}
.chip b{color:var(--burgund)}

/* Für wen noch */
.who{display:grid;gap:14px;max-width:960px;margin:0 auto;padding:0 22px 80px}
.who a{display:flex;align-items:center;gap:16px;padding:20px;border-radius:24px;background:#fff;text-decoration:none;color:var(--ink);box-shadow:0 8px 24px rgba(46,26,74,.07);transition:transform .2s var(--ease)}
.who a:hover{transform:translateY(-3px)}
.who img{width:76px;height:76px;flex:none}
.who strong{display:block;font:700 21px/1.15 var(--display);color:var(--burgund)}
.who span{font-size:15px;color:var(--muted)}
.who .arr{margin-left:auto;color:var(--burgund);font-size:22px}
@media (min-width:760px){.who{grid-template-columns:1fr 1fr}}

/* Schluss */
.cta-end{text-align:center;padding:80px 22px 56px}
.cta-end canvas{width:min(60vw,260px);aspect-ratio:1/1;margin:0 auto 10px;display:block}
.cta-end h2{font:700 clamp(32px,9vw,58px)/1.05 var(--display);margin:0 0 26px;text-wrap:balance}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:34px;font-size:14px;color:rgba(255,255,255,.8)}
.trust span::before{content:"✓ ";color:var(--amber)}

/* Store-Knopf klebt unten, sobald der Hero weg ist (nur Handy) */
.sticky{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;display:flex;justify-content:center;transform:translateY(140%);transition:transform .45s var(--ease);pointer-events:none}
.sticky.on{transform:none;pointer-events:auto}
.sticky .dl-smart{width:100%;max-width:420px;box-shadow:0 14px 34px rgba(46,26,74,.3)}
html.is-desk .sticky{display:none}

/* Unterseiten */
.sub-hero{padding:96px 22px 40px;text-align:center}
.sub-hero canvas{width:min(70vw,300px);aspect-ratio:1/1;margin:0 auto}
.sub-hero h1{font:700 clamp(36px,10vw,68px)/1.04 var(--display);margin:8px 0 0;text-wrap:balance}
.sub-hero p{font-size:18px;max-width:460px;margin:16px auto 0;color:rgba(255,255,255,.86)}
.back{position:absolute;top:18px;right:20px;font:600 15px/1 var(--sans);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:900px;margin:0 auto;padding:0 20px}
.tile{background:#fff;border-radius:22px;padding:16px 14px 18px;text-align:center;box-shadow:0 6px 18px rgba(46,26,74,.06)}
.tile canvas{width:100%;aspect-ratio:1/1}
.tile strong{display:block;font:700 18px/1.2 var(--display);color:var(--burgund);margin-top:4px}
.tile span{font-size:14px;color:var(--muted)}
@media (min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}
.moments{max-width:720px;margin:0 auto;padding:60px 22px;display:grid;gap:12px}
.moment{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 4px 14px rgba(46,26,74,.05)}
.moment b{font:700 22px/1 var(--display);color:var(--amber)}
.moment strong{display:block;color:var(--burgund)}
.moment span{color:var(--muted);font-size:15.5px}

/* Leben nach dem Zeichnen (zeichnen.js setzt die Klassen, wenn der Stift fertig ist).
   Pflanzen wiegen sich um ihren Fuß, Gegenstände schweben. Klein genug, dass man es
   eher spürt als sieht. Bei reduzierter Bewegung setzt zeichnen.js keine Klasse. */
.zeichnung{transform-origin:50% 92%;transition:transform .6s var(--ease)}
.lebt-sway{animation:lebt-sway 7s ease-in-out infinite}
.lebt-float{animation:lebt-float 6s ease-in-out infinite}
@keyframes lebt-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(1.6deg)}75%{transform:rotate(-1.4deg)}}
@keyframes lebt-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-.6deg)}}
.zeichnung:active{transform:scale(.97)}

/* Das große Bild (Owner 23.10.2026): eine gezeichnete Welt, das Kind in der Mitte wird
   als Einziges angemalt. Auf dem Handy ragt das Bild links und rechts über den Rand,
   damit das Kind groß bleibt; am Computer steht es ganz. */
.hero-big{background:linear-gradient(180deg,#fbf6ef 0%,#fbf3ea 100%);padding:76px 0 40px;overflow:hidden;text-align:center}
.hero-stage{position:relative;width:150vw;margin-left:calc(50% - 75vw);aspect-ratio:1200/896}
.hero-stage canvas{width:100%;height:100%;display:block}
.hero-txt{padding:4px 22px 0;max-width:760px;margin:0 auto}
.hero-big h1{font:700 clamp(34px,9.5vw,68px)/1.05 var(--display);color:var(--burgund);margin:0;text-wrap:balance}
.hero-big h1 em{font-style:normal;background:linear-gradient(90deg,#c0185f,#c46a2a 60%,#e89a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-big p{font-size:17px;line-height:1.55;color:var(--muted);max-width:440px;margin:16px auto 26px}
.hero-big .dl-desk{justify-content:center}
@media (min-width:700px){.hero-stage{width:min(1200px,calc(100vw - 40px),calc((100svh - 260px) * 1.339));margin:0 auto}}
/* Die Ränder des Bildes laufen weich ins Papier aus, statt hart abzubrechen */
.hero-stage{-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)}
@media (min-width:700px){.hero-stage{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 82%,transparent 100%);mask-composite:intersect}}