/* Uebersichten Booster, Branchen, Starterbox (dunkle Entwuerfe) */

/* ---------------------------------------------------------------- Booster: Frage oben, passender Booster leuchtet im Raster. Takt 27 s */
.ub-buehne{order:2;width:min(100%,900px);margin-top:clamp(36px,4.5vw,60px);padding:clamp(22px,3vw,36px);border-radius:18px;background:#121212;box-shadow:0 0 0 1px #2A2A2A,0 60px 120px -50px rgba(0,0,0,.95),0 40px 90px -40px rgba(224,36,107,.35);opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
.ub-fragen{position:relative;height:clamp(64px,7vw,84px);margin-bottom:clamp(18px,2.4vw,28px)}
.ub-frage{position:absolute;inset:0;display:grid;place-items:center;margin:0;opacity:0;animation:ub-frage 27s infinite;animation-delay:calc(var(--i) * 3s)}
.ub-frage span{font-family:var(--f-display,inherit);font-weight:800;font-size:clamp(18px,2.4vw,28px);line-height:1.2;color:#fff;text-align:center;max-width:24em}
.ub-frage span::before{content:"„";color:var(--accent-text)}.ub-frage span::after{content:"“";color:var(--accent-text)}
@keyframes ub-frage{0%{opacity:0;transform:translateY(12px)}2%,9%{opacity:1;transform:none}11%,100%{opacity:0;transform:translateY(-12px)}}
.ub-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ub-kachel{display:flex;align-items:center;gap:12px;padding:16px 16px;border-radius:12px;background:#1B1B1B;box-shadow:inset 0 0 0 1px #2A2A2A;animation:ub-an 27s infinite;animation-delay:calc(var(--i) * 3s)}
.ub-kachel b{font-size:15px;color:#D4D4D4}
.ub-nr{flex:none;font:700 12px var(--f-mono,monospace);color:var(--accent-text)}
@keyframes ub-an{0%,11%,100%{box-shadow:inset 0 0 0 1px #2A2A2A;background:#1B1B1B;transform:none}1.5%,9.5%{box-shadow:inset 0 0 0 2px var(--accent),0 16px 40px -14px rgba(224,36,107,.6);background:#241A1E;transform:translateY(-3px)}}
@media (max-width:760px){.ub-raster{grid-template-columns:1fr;gap:8px}.ub-kachel{padding:10px 14px}.ub-kachel b{font-size:14px}}

/* ---------------------------------------------------------------- Branchen: drei grosse Fotokarten */
.ub-branchen{order:2;width:min(100%,1120px);margin-top:clamp(36px,4.5vw,60px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ub-br{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#111;color:#fff;text-decoration:none;box-shadow:0 0 0 1px #2A2A2A,0 50px 100px -50px rgba(0,0,0,.95);opacity:0;animation:bs-tv-rein 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--i) * .15s)}
.ub-br img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);animation:ub-zoom 18s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -6s)}
@keyframes ub-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.ub-br::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.88) 100%)}
.ub-br-text{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:22px;display:flex;flex-direction:column;gap:6px;text-align:left}
.ub-br-text .mono{color:var(--accent-text)}
.ub-br-text b{font-family:var(--f-display,inherit);font-size:clamp(20px,2vw,26px);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.ub-br-text em{font-style:normal;font-weight:700;color:#FF7AA8}
.ub-br-d{font-size:14px;line-height:1.5;color:#D4D4D4;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .5s}
.ub-br-los{margin-top:6px;font:700 12px var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.ub-br-los::after{content:" →"}
.ub-br:hover img,.ub-br:focus-visible img{transform:scale(1.06)}
.ub-br:hover .ub-br-d,.ub-br:focus-visible .ub-br-d{max-height:8em;opacity:1}
@media (hover:none){.ub-br-d{max-height:none;opacity:1}}
@media (max-width:860px){.ub-branchen{grid-template-columns:1fr;max-width:420px}.ub-br{aspect-ratio:4/3.4}}

/* ---------------------------------------------------------------- Starterbox: Vorlagen-Stapel, das vordere Blatt wechselt. Takt 12 s */
.ub-stapel{order:2;position:relative;width:min(100%,560px);height:clamp(300px,30vw,340px);margin-top:clamp(40px,5vw,64px);opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
.ub-blatt{position:absolute;left:50%;top:0;width:min(100%,400px);padding:22px 24px;border-radius:14px;background:#fff;color:#16171A;text-align:left;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:6px;animation:ub-blatt 12s infinite;animation-delay:calc(var(--i) * -4s)}
.ub-blatt .mono{color:#B0185A}
.ub-blatt small{font-size:12px;color:#6B6F76}
.ub-blatt b{font-size:19px;line-height:1.25}
.ub-blatt ul{margin:6px 0 4px;padding-left:18px;font-size:14px;line-height:1.6;color:#3A3D42}
.ub-kopie{align-self:flex-start;margin-top:4px;padding:7px 12px;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:700}
@keyframes ub-blatt{
  0%,28%{transform:translateX(-50%) rotate(0deg);z-index:3;opacity:1}
  33.3%,61%{transform:translateX(-12%) translateY(14px) rotate(6deg);z-index:1;opacity:.55}
  66.6%,95%{transform:translateX(-88%) translateY(10px) rotate(-6deg);z-index:2;opacity:.75}
  100%{transform:translateX(-50%) rotate(0deg);z-index:3;opacity:1}}
@media (max-width:620px){.ub-stapel{height:330px}.ub-blatt{width:84%}}

.ub-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px auto 26px}
.ub-filter .sb-chip{padding:8px 14px;border-radius:999px;border:0;background:#1E1E1E;color:#D4D4D4;font:600 14px var(--f-body,inherit);cursor:pointer;box-shadow:inset 0 0 0 1px #2E2E2E}
.ub-filter .sb-chip.on{background:#fff;color:#111}
.ub-sbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ub-sb a{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 20px;border-radius:12px;background:#161616;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px #242424;transition:transform .25s,box-shadow .25s}
.ub-sb a::before{content:"";position:absolute;left:22px;top:0;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--c)}
.ub-sb a .mono{color:var(--c)!important}
.ub-sb b{font-size:18px;line-height:1.25}
.ub-sb-d{font-size:14.5px;line-height:1.55;color:#A3A3A3}
.ub-sb-in{margin-top:auto;padding-top:6px;font:600 12px var(--f-mono,monospace);color:#777}
.ub-sb a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--c),0 20px 40px -20px rgba(0,0,0,.9)}
.ub-sb[hidden]{display:none}
@media (max-width:1000px){.ub-sbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ub-sbs{grid-template-columns:1fr}}
.ub-def{max-width:760px;margin:48px auto 0;padding:24px 26px;border-radius:12px;background:#161616;box-shadow:inset 0 0 0 1px #242424}
.ub-def h3{margin:0 0 8px;color:#fff;font-size:19px}
.ub-def p{margin:0;color:#A3A3A3}
.ub-def a,.fs-liste p a{color:#F2F2F2;text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .ub-buehne,.ub-br,.ub-stapel{opacity:1;animation:none}
  .ub-frage,.ub-kachel,.ub-br img,.ub-blatt{animation:none}
  .ub-frage:first-child{opacity:1}
  .ub-blatt{transform:translateX(-50%)}.ub-blatt:not(:first-child){display:none}
}