/* Startbühne: nur der Wirbel der Blätter. Überschreibt die Start-Regeln aus site.css. */

/* 1. Kein Name, kein Text, keine Knöpfe über der Bühne; die Überschrift bleibt für Suchmaschinen und Vorleser */
.start--flug .start__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:1;pointer-events:none}
.start--flug .start__text::before{content:none}
.start--flug .start__text p,.start--flug .start__text .start__zeile{display:none}
.start--flug{background:#050506;padding:0}
/* Rand dunkelt ab, ohne Balken am Horizont */
.start--flug::after{background:radial-gradient(120% 100% at 50% 48%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}

/* 5. Gefangenes Blatt: einzelne kleine Schilder rund um das Blatt, jedes schwebt für sich */
.fang{position:absolute;inset:0;z-index:3;left:0;right:0;top:0;translate:none;opacity:1;transition:none;background:none;border:0;padding:0;box-shadow:none;pointer-events:none;
  --bl:36%;--bt:19%;--br:64%;--bb:81%;--bh:calc(var(--bb) - var(--bt));--seite:calc(var(--bl) - 30px)}
.fang[hidden]{display:none}
.schild{position:absolute;margin:0;max-width:min(300px,calc(var(--seite) - 40px));pointer-events:auto;
  opacity:0;scale:.92;transition:opacity .45s var(--ease),scale .6s var(--ease);transition-delay:0s;
  animation:schweb var(--dauer,7s) ease-in-out var(--versatz,0s) infinite}
div.schild,dl.schild,p.schild{background:rgba(13,13,16,.9);border:1px solid #2e2e34;border-radius:4px;padding:13px 17px 12px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 34px -14px rgba(0,0,0,.85)}
.start--gefangen .schild{opacity:1;scale:1;transition-delay:var(--kommt,.2s)}
@keyframes schweb{0%,100%{translate:0 0;rotate:var(--neig,0deg)}50%{translate:var(--wegx,0px) var(--wegy,-7px);rotate:calc(var(--neig,0deg) * -1)}}

.schild--titel{right:calc(100% - var(--bl) + 34px);top:calc(var(--bt) + var(--bh) * .05);--dauer:7.4s;--versatz:-1.2s;--neig:-.7deg;--wegy:-8px;--wegx:2px;--kommt:.2s}
.schild--technik{right:calc(100% - var(--bl) + 66px);top:calc(var(--bt) + var(--bh) * .36);--dauer:8.6s;--versatz:-4.1s;--neig:.6deg;--wegy:-6px;--wegx:-3px;--kommt:.32s}
.schild--jahr{right:calc(100% - var(--bl) + 30px);top:calc(var(--bt) + var(--bh) * .72);--dauer:6.7s;--versatz:-2.6s;--neig:-.5deg;--wegy:-7px;--wegx:3px;--kommt:.44s}
.schild--preis{left:calc(var(--br) + 38px);top:calc(var(--bt) + var(--bh) * .12);--dauer:7.9s;--versatz:-5.3s;--neig:.7deg;--wegy:-8px;--wegx:-2px;--kommt:.26s}
.schild--korb{left:calc(var(--br) + 70px);top:calc(var(--bt) + var(--bh) * .5);--dauer:6.9s;--versatz:-.6s;--neig:-.6deg;--wegy:-6px;--wegx:2px;--kommt:.38s}
.schild--los{left:calc(var(--br) + 36px);top:calc(var(--bt) + var(--bh) * .7);--dauer:8.2s;--versatz:-3.4s;--neig:.5deg;--wegy:-7px;--wegx:-2px;--kommt:.5s}

.fang h2{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.1;letter-spacing:.05em;text-wrap:balance}
.fang dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;font-size:.88rem;line-height:1.35}
.fang dt{color:var(--grau)}
.fang dd{margin:0}
.schild--jahr{display:flex;gap:.9em;font-size:.88rem;white-space:nowrap}
.schild--jahr span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--grau);vertical-align:middle;margin-right:.9em}
.schild--preis{display:grid;gap:.3rem}
.fang .fang__preis{font-size:1.55rem;font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.1}
.fang .fang__hinweis{font-size:.8rem;line-height:1.35;color:var(--grau);margin:0;max-width:25ch}
.fang .knopf{box-shadow:0 16px 30px -14px rgba(0,0,0,.9)}
.fang .knopf:not(.knopf--voll){background:rgba(13,13,16,.9)}
.fang .knopf:not(.knopf--voll):hover{background:var(--fg)}

/* Handy: das Blatt steht oben, die Schilder locker gestapelt darunter */
@media (max-width:860px){
  .fang{inset:auto;left:14px;right:14px;top:calc(var(--bb) + 16px);bottom:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px 9px}
  .schild{position:relative;inset:auto;left:auto;right:auto;top:auto;max-width:100%}
  div.schild,dl.schild,p.schild{padding:9px 13px 8px}
  .schild--titel{flex:0 1 auto;text-align:center}
  .fang h2{font-size:1.2rem}
  .fang dl{display:grid;font-size:.82rem;gap:.1rem .7rem}
  .schild--jahr{font-size:.82rem}
  .fang .fang__preis{font-size:1.25rem}
  .fang .fang__hinweis{display:none}
  .fang .knopf{padding:.6em 1.15em}
  .schild--technik{translate:-4px 0}.schild--preis{margin-top:2px}
  .start--gefangen .start__ton{opacity:0;pointer-events:none}
}
.start__ton{transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.schild{animation:none;transition:opacity .2s}}