.start{z-index:1;box-sizing:border-box;width:100%;max-width:1180px;padding-inline:16px;padding-block:calc(18px + env(safe-area-inset-top,0px)) 64px;flex-direction:column;gap:56px;margin:0 auto;display:flex;position:relative}.kopf{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;display:flex}.kopf .marke{font-family:var(--face);margin:0;font-size:1.02rem;font-weight:700}.kopf .marke span{color:var(--muted);font-weight:500}.kopf .ort{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:.72rem}.held{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:32px 48px;display:grid}.held-text{flex-direction:column;gap:16px;min-width:0;display:flex}.team{font-family:var(--wide);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin:0;font-size:.86rem}.held h1{letter-spacing:-.01em;font-size:clamp(2.4rem,6.4vw,4.8rem);font-weight:700;line-height:.98}.auftrag{max-width:60ch;margin:0;font-size:1.12rem}.auftrag b{color:var(--cyan)}.baustellen{color:var(--muted);max-width:62ch;margin:0;font-size:.95rem}.knopf-ort{text-align:center;flex-direction:column;align-items:center;gap:14px;display:flex}.hinweis{min-height:1.5em;color:var(--muted);margin:0;font-size:.95rem}.bereich-kopf{align-items:baseline;gap:12px;margin-bottom:18px;display:flex}.bereich-kopf h2{font-size:clamp(1.5rem,3vw,2.1rem)}.zaehler{font-family:var(--wide);color:var(--void);background:var(--cyan);border-radius:999px;padding:2px 12px;font-size:.9rem}.raster{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px;display:grid}.baustein{box-sizing:border-box;background:var(--panel);border:1px solid var(--line);min-height:132px;color:var(--ink);border-radius:18px;flex-direction:column;gap:8px;padding:20px 22px 44px;text-decoration:none;transition:transform .25s,border-color .25s;display:flex;position:relative}.baustein:hover{border-color:var(--cyan);transform:translateY(-3px)}.baustein:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.baustein-titel{font-family:var(--face);font-size:1.25rem;font-weight:700;line-height:1.15}.baustein-text{color:var(--muted);font-size:.95rem}.baustein-pfeil{color:var(--cyan);font-weight:700;position:absolute;bottom:14px;right:20px}.leer{border:1px dashed var(--line);color:var(--muted);text-align:center;border-radius:18px;margin:0;padding:28px}.mitmachen{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;display:grid}.schritte{counter-reset:s;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.schritte li{counter-increment:s;grid-template-columns:2.2rem 1fr;align-items:baseline;gap:10px;display:grid}.schritte li:before{content:counter(s);font-family:var(--wide);color:var(--mint);font-size:1rem}.siegel-karte p{margin:0}@media (width<=820px){.held,.mitmachen{grid-template-columns:1fr}.knopf-ort{order:-1}}body{background-image:repeating-linear-gradient(45deg, #ffd65a0d 0 1px, transparent 1px 46px), repeating-linear-gradient(-45deg, #ffd65a0d 0 1px, transparent 1px 46px), radial-gradient(ellipse 60% 45% at 50% 0%, #ffd65a24, transparent 70%), linear-gradient(180deg, var(--deep), var(--void) 75%)}#glanz{pointer-events:none;z-index:2;opacity:0;background:linear-gradient(105deg,#0000 35%,#ffeca038 48%,#ffffff52 50%,#ffeca038 52%,#0000 65%) 0 0/260% 100%;position:fixed;inset:0}#glanz.laeuft{animation:1.1s ease-out glanz}@keyframes glanz{0%{opacity:1;background-position:120% 0}to{opacity:1;background-position:-60% 0}}.ananas-knopf{aspect-ratio:220/300;cursor:pointer;width:min(58vw,220px);color:var(--ink);-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;position:relative}.ananas-knopf:focus-visible{outline:3px solid var(--cyan);outline-offset:8px;border-radius:24px}.ananas-knopf:disabled{cursor:progress}.ananas-knopf svg{filter:drop-shadow(0 22px 40px #00000073);width:100%;height:100%;overflow:visible}.ananas-knopf .krone{transform-origin:110px 120px;transition:transform .35s}.ananas-knopf:hover .krone{transform:rotate(-4deg)scale(1.04)}.ananas-knopf .links,.ananas-knopf .rechts{transition:transform .45s cubic-bezier(.3,1.4,.5,1)}.ananas-knopf.schneidet .links{transform:translate(-16px)rotate(-6deg)}.ananas-knopf.schneidet .rechts{transform:translate(16px)rotate(6deg)}.ananas-knopf.schneidet .krone{transform:translateY(-14px)rotate(8deg)}.ananas-knopf .schnitt{opacity:0;transition:opacity .2s}.ananas-knopf.schneidet .schnitt{opacity:1}.ananas-schrift{white-space:nowrap;font-family:var(--wide);letter-spacing:.06em;text-transform:uppercase;color:#1d2a12;background:var(--cyan);border-radius:999px;padding:6px 14px;font-size:.86rem;position:absolute;bottom:22%;left:50%;transform:translate(-50%);box-shadow:0 6px 18px #00000059}.ananas-knopf.hat-neues svg{filter:drop-shadow(0 0 26px #ffd65a8c);animation:1.4s ease-in-out infinite wippen}@keyframes wippen{50%{transform:translateY(-8px)rotate(-2deg)}}.baustein{border-radius:22px 6px}.baustein.klappt{transform-origin:50% 0;animation:.8s cubic-bezier(.2,.9,.3,1.2) both klappen}@keyframes klappen{0%{opacity:0;transform:perspective(700px)rotateX(-80deg)}to{opacity:1;transform:none}}.baustein.ist-neu{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan), 0 12px 40px #ffd65a33}.baustein.ist-neu:after{content:"frisch";background:var(--cyan);color:#1d2a12;font:700 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:2px 10px;position:absolute;top:-10px;right:16px}@media (prefers-reduced-motion:reduce){.ananas-knopf.hat-neues svg{animation:none}}
