/* Animierte Stil-Vorschauen (16:9). Farben fest, unabhängig vom Seitenthema. */
.stage{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:4px;container-type:inline-size;background:#0f265c;isolation:isolate}
.stage *{position:absolute}
.loop{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both}
/* A — Klarsicht */
.a-bg{inset:-20%;background:
  radial-gradient(40% 50% at 30% 40%,#3d7fd6 0%,transparent 70%),
  radial-gradient(35% 45% at 72% 30%,#bfe3f7 0%,transparent 70%),
  radial-gradient(50% 60% at 60% 80%,#144094 0%,transparent 75%),
  linear-gradient(120deg,#22457f,#5f8fc4 55%,#1b2f5e);
  filter:blur(6px);animation:a-drift 8s ease-in-out infinite alternate}
@keyframes a-drift{to{transform:translate(4%,-3%) scale(1.06)}}
.a-pane{left:6%;bottom:12%;width:56%;height:36%;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  animation-name:a-pane}
@keyframes a-pane{0%,6%{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}
  20%,82%{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}
  94%,100%{clip-path:polygon(120% 0,120% 0,100% 100%,100% 100%)}}
.a-sweep{left:6%;bottom:12%;width:56%;height:36%;overflow:hidden;animation-name:a-pane}
.a-sweep::before{content:"";position:absolute;top:-30%;bottom:-30%;width:22%;left:-30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:a-sw 8s var(--ease) infinite}
@keyframes a-sw{0%,22%{left:-30%}36%,100%{left:130%}}
.a-txt{left:10%;bottom:19%;display:grid;gap:.6cqw;color:#fff;position:absolute}
.a-txt *{position:static}
.a-eb{font-family:var(--mono);font-size:1.25cqw;letter-spacing:.3em;color:#bfe9ff;animation-name:a-in;animation-delay:0s}
.a-nm{font-family:var(--display);font-weight:800;font-size:4.4cqw;line-height:1;animation-name:a-in2}
.a-rl{font-family:var(--display);font-weight:300;font-size:2cqw;animation-name:a-in3}
@keyframes a-in{0%,14%{opacity:0;filter:blur(10px);transform:translateY(40%)}24%,82%{opacity:1;filter:blur(0);transform:none}90%,100%{opacity:0;filter:blur(10px)}}
@keyframes a-in2{0%,17%{opacity:0;filter:blur(14px);transform:translateY(30%) scale(1.04)}28%,82%{opacity:1;filter:blur(0);transform:none}90%,100%{opacity:0;filter:blur(14px)}}
@keyframes a-in3{0%,21%{opacity:0;filter:blur(10px)}32%,82%{opacity:1;filter:blur(0)}90%,100%{opacity:0;filter:blur(10px)}}

/* B — Der Schnitt */
.b-base{inset:0;background:#0f265c}
.b-txt{left:9%;top:50%;transform:translateY(-50%);display:grid;color:#e8f3fc;font-family:var(--display);line-height:.98}
.b-txt *{position:static}
.b-l1{font-weight:200;font-size:7cqw}
.b-l2{font-weight:800;font-size:7.6cqw;color:#fff}
.b-l2 em{font-style:normal;color:#009ee3}
.b-half{inset:0;background:#144094;animation-name:b-top}
.b-half.top{clip-path:polygon(0 0,100% 0,100% 38%,0 66%)}
.b-half.bot{clip-path:polygon(0 66%,100% 38%,100% 100%,0 100%);animation-name:b-bot;background:#0d3a8a}
@keyframes b-top{0%,26%{transform:none}40%,100%{transform:translate(-6%,-110%)}}
@keyframes b-bot{0%,26%{transform:none}40%,100%{transform:translate(6%,110%)}}
.b-score{left:-5%;width:110%;top:52%;height:.25cqw;background:#fff;box-shadow:0 0 1.2cqw #9fdcff;
  transform-origin:0 50%;transform:rotate(-16.2deg) scaleX(0);animation-name:b-score}
@keyframes b-score{0%,4%{transform:rotate(-16.2deg) scaleX(0);opacity:1}20%{transform:rotate(-16.2deg) scaleX(1);opacity:1}28%,100%{transform:rotate(-16.2deg) scaleX(1);opacity:0}}
.b-wedge{top:-10%;bottom:-10%;width:60%;left:-80%;background:#009ee3;transform:skewX(-16deg);animation-name:b-wedge}
@keyframes b-wedge{0%,84%{left:-80%}100%{left:130%}}
.b-tc{right:6%;bottom:7%;font-family:var(--mono);font-size:1.1cqw;color:#7fa6e0;letter-spacing:.2em}

/* C — Chronik */
.c-bg{inset:0;background:#e8f3fc}
.c-bg::after{content:"";position:absolute;inset:0;opacity:.35;background:
  repeating-linear-gradient(0deg,rgba(15,38,92,.04) 0 1px,transparent 1px 3px)}
.c-ch{left:7%;top:10%;font-family:var(--mono);font-size:1.3cqw;letter-spacing:.25em;color:#0546a5;animation-name:c-fade}
.c-big{left:7%;top:20%;font-family:var(--display);font-weight:800;font-size:15cqw;line-height:.9;color:#0f265c;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.c-unit{left:7.4%;top:47%;font-family:var(--display);font-weight:300;font-size:2.4cqw;color:#0f265c;animation-name:c-fade}
.c-rule{left:7%;right:7%;top:70%;height:.18cqw;background:#0f265c;transform-origin:0 50%;animation-name:c-rule}
@keyframes c-rule{0%,4%{transform:scaleX(0)}30%,88%{transform:scaleX(1)}98%,100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes c-fade{0%,6%{opacity:0;transform:translateY(20%)}16%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.c-tick{top:66.5%;width:.18cqw;height:3.6%;background:#0f265c;opacity:0;animation-name:c-tk}
.c-yr{top:74%;font-family:var(--mono);font-size:1.25cqw;color:#0f265c;transform:translateX(-50%);opacity:0;animation-name:c-tk;white-space:nowrap}
.c-yr.on{color:#0546a5;font-weight:500}
@keyframes c-tk{0%{opacity:0}100%{opacity:1}}
.c-cap{left:7%;top:83%;font-family:var(--body);font-size:1.6cqw;color:#4d5d80;opacity:0;animation-name:c-tk}
.c-dot{top:67.6%;width:1.5cqw;height:1.5cqw;border-radius:50%;background:#009ee3;transform:translate(-50%,-50%);box-shadow:0 0 0 .5cqw rgba(0,158,227,.2)}

/* D — Lichtlinie */
.d-bg{inset:0;background:radial-gradient(60% 70% at 50% 45%,#0c1d40,#050a17 80%)}
.d-beam{left:0;top:38%;height:.22cqw;width:46%;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,#7fd3ff 60%,#fff);box-shadow:0 0 1.4cqw #2bb3ff;animation-name:d-beam}
@keyframes d-beam{0%,4%{transform:scaleX(0)}20%,84%{transform:scaleX(1)}94%,100%{transform:scaleX(1);opacity:0}}
.d-prism{left:46%;top:38%;width:5cqw;height:5cqw;transform:translate(-30%,-50%);
  clip-path:polygon(0 0,100% 0,30% 100%);background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(0,158,227,.15));animation-name:d-pr}
@keyframes d-pr{0%,8%{opacity:0}18%,86%{opacity:1}96%,100%{opacity:0}}
.d-ray{left:48%;top:38%;height:.14cqw;width:56%;transform-origin:0 50%;opacity:.8;animation-name:d-ray}
.d-ray.r1{background:linear-gradient(90deg,#ffffff,transparent);--r:-3deg}
.d-ray.r2{background:linear-gradient(90deg,#7fd3ff,transparent);--r:2deg}
.d-ray.r3{background:linear-gradient(90deg,#3d7fd6,transparent);--r:7deg}
@keyframes d-ray{0%,20%{transform:rotate(var(--r)) scaleX(0)}34%,84%{transform:rotate(var(--r)) scaleX(1)}94%,100%{transform:rotate(var(--r)) scaleX(1);opacity:0}}
.d-q{left:9%;right:9%;top:52%;font-family:var(--display);font-weight:200;font-size:4.1cqw;line-height:1.15;color:#e8f3fc;animation-name:d-q}
.d-q *{position:static}
.d-q b{font-weight:600;color:#fff}
.d-at{left:9%;top:80%;font-family:var(--mono);font-size:1.2cqw;letter-spacing:.25em;color:#6fa8d8;animation-name:d-q;animation-delay:.25s}
@keyframes d-q{0%,30%{opacity:0;letter-spacing:.08em;filter:blur(6px)}46%,84%{opacity:1;letter-spacing:0;filter:blur(0)}94%,100%{opacity:0}}
.d-at{animation-name:d-at}
@keyframes d-at{0%,38%{opacity:0}50%,84%{opacity:1}94%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .stage .loop,.a-sweep::before,.a-bg{animation:none!important}
  .b-half,.b-score,.b-wedge{display:none}
  .c-tick,.c-yr,.c-cap{opacity:1}
}