/* Clever Dreams – 3D-Effekte (23.10.2026) */
html.fx3d main { perspective: 1400px; }
html.fx3d [data-fx="r"] {
  opacity: 0;
  transform: translate3d(0, 34px, -80px) rotateX(12deg);
  transform-origin: 50% 100%;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--fx-d, 0ms), transform 1s cubic-bezier(.2,.7,.2,1) var(--fx-d, 0ms);
}
html.fx3d [data-fx="r"].fx-in { opacity: 1; transform: none; }

/* Kippende Karten */
.fx-tilt, html.fx3d [data-fx="r"].fx-in.fx-tilt {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  transition-delay: 0ms;
  will-change: transform;
}
.fx-tilt:hover { box-shadow: 0 22px 44px -26px rgba(43, 13, 25, .45); z-index: 2; }
.fx-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 55%);
  opacity: 0; transition: opacity .3s ease;
}
.fx-tilt:hover::after { opacity: 1; }

/* Überschrift mit Tiefe */
.fx-depth {
  transform: perspective(1000px) rotateX(var(--hy, 0deg)) rotateY(var(--hx, 0deg));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 14px 28px rgba(43, 13, 25, .14);
}
.btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .2s ease, color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  html.fx3d [data-fx="r"] { opacity: 1 !important; transform: none !important; }
  .fx-tilt, .fx-depth { transform: none !important; }
}

/* ===== 3D-Herobanner ===== */
.fxh-host { position: relative; overflow: hidden; }
.fxh-host > :not(.fxh):not(.fx-video):not(.fx-blob) { position: relative; z-index: 1; }
.fxh {
  --edge: color-mix(in srgb, var(--bordeaux, #6e1f3a) 60%, transparent);
  --fill: color-mix(in srgb, var(--bordeaux, #6e1f3a) 7%, transparent);
  --hot: var(--orange, #e07a3a);
  position: absolute; top: 0; bottom: 0; right: 3vw; width: min(40vw, 460px);
  perspective: 1000px; pointer-events: none; z-index: 0;
  animation: fxh-fade 1.2s ease both;
}
.fxh::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px;
  border-radius: 50%; filter: blur(30px);
  background: radial-gradient(circle, color-mix(in srgb, var(--hot) 22%, transparent), transparent 65%);
}
.fxh-digital { --edge: color-mix(in srgb, var(--hot) 85%, transparent); --fill: color-mix(in srgb, var(--hot) 8%, transparent); }
.fxh.fxh-band { position: relative; top: auto; bottom: auto; right: auto; width: 100%; height: 300px; margin: -24px 0 -36px; }
.fxh-band .fxh-rig { left: 35%; }
.fxh-band::before { left: 67%; }
.fxh-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--my, 0deg)) rotateY(var(--mx, 0deg)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }

/* Würfel */
.fxh-cube { --s: 170px; position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform-style: preserve-3d; animation: fxh-spin 26s linear infinite; }
.fxh-cube .f { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border: 1.5px solid var(--edge); background: var(--fill); box-shadow: inset 0 0 40px color-mix(in srgb, var(--hot) 10%, transparent); }
.fxh-cube .fr { transform: translateZ(calc(var(--s) / 2)); }
.fxh-cube .bk { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.fxh-cube .rt { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.fxh-cube .lf { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.fxh-cube .tp { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.fxh-cube .bt { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.fxh-cube.fxh-in { --s: 74px; animation: fxh-spin2 11s linear infinite; }
.fxh-cube.fxh-in .f { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 22%, transparent); }
.fxh-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; animation: fxh-orb 13s linear infinite; }
.fxh-orbit i { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 3px; background: var(--hot); box-shadow: 0 0 18px var(--hot); }
.fxh-orbit i:nth-child(1) { transform: rotateY(0deg) translateZ(165px); }
.fxh-orbit i:nth-child(2) { transform: rotateY(120deg) translateZ(165px) scale(.7); background: var(--edge); }
.fxh-orbit i:nth-child(3) { transform: rotateY(240deg) translateZ(165px) scale(.5); }

/* 3D-Balkendiagramm (Kontor) */
.fxh-chart { position: absolute; left: 50%; top: 56%; width: 250px; height: 210px; margin: -105px 0 0 -125px; transform-style: preserve-3d; animation: fxh-sway 9s ease-in-out infinite alternate; }
.fxh-floor { position: absolute; inset: -24px; background-image: linear-gradient(var(--edge) 1px, transparent 1px), linear-gradient(90deg, var(--edge) 1px, transparent 1px); background-size: 30px 30px; opacity: .35; }
.fxh-bar { position: absolute; width: 34px; height: 34px; transform-style: preserve-3d; animation: fxh-grow 1.6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 140ms) both; }
.fxh-bar b { position: absolute; display: block; }
.fxh-bar .top { inset: 0; transform: translateZ(var(--h)); background: color-mix(in srgb, var(--bordeaux, #6e1f3a) 35%, #fff); }
.fxh-bar .fro { left: 0; top: 100%; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(90deg); background: color-mix(in srgb, var(--bordeaux, #6e1f3a) 70%, transparent); }
.fxh-bar .bac { left: 0; bottom: 100%; width: 100%; height: var(--h); transform-origin: bottom; transform: rotateX(-90deg); background: color-mix(in srgb, var(--bordeaux, #6e1f3a) 70%, transparent); }
.fxh-bar .rig { left: 100%; top: 0; width: var(--h); height: 100%; transform-origin: left; transform: rotateY(-90deg); background: color-mix(in srgb, var(--bordeaux, #6e1f3a) 90%, #000); }
.fxh-bar .lef { right: 100%; top: 0; width: var(--h); height: 100%; transform-origin: right; transform: rotateY(90deg); background: color-mix(in srgb, var(--bordeaux, #6e1f3a) 90%, #000); }
.fxh-bar.hot .top { background: color-mix(in srgb, var(--hot) 55%, #fff); }
.fxh-bar.hot .fro, .fxh-bar.hot .bac { background: var(--hot); }
.fxh-bar.hot .rig, .fxh-bar.hot .lef { background: color-mix(in srgb, var(--hot) 75%, #000); }

@keyframes fxh-fade { from { opacity: 0; } }
@keyframes fxh-spin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes fxh-spin2 { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(-360deg); } }
@keyframes fxh-orb { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } }
@keyframes fxh-sway { from { transform: rotateX(60deg) rotateZ(-48deg); } to { transform: rotateX(54deg) rotateZ(-32deg); } }
@keyframes fxh-grow { from { transform: scale3d(1, 1, .02); } to { transform: scale3d(1, 1, 1); } }

@media (max-width: 1000px) { .fxh { transform: scale(.72); transform-origin: right center; right: 0; } .fxh.fxh-band { transform: scale(.8); transform-origin: center; } }
@media (max-width: 620px) { .fxh { display: none; } }
@media (prefers-reduced-motion: reduce) { .fxh, .fxh * { animation: none !important; } }

/* ===== Fotos & Video (Pexels-Lizenz, lokal gehostet) ===== */
.fx-photo { margin: 0; padding: 0 clamp(16px, 4vw, 48px); perspective: 1200px; }
.fx-photo img { display: block; width: 100%; max-width: 1280px; margin: 0 auto; height: clamp(220px, 34vw, 480px); object-fit: cover; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(43, 13, 25, .55); transform: translateY(var(--py, 0px)) scale(1.02); transition: transform .2s linear; }
html.fx3d .fx-photo[data-fx="r"] { transform: translate3d(0, 40px, -120px) rotateX(18deg); }
html.fx3d .fx-photo[data-fx="r"].fx-in { transform: none; }

section:has(> .fx-video) { position: relative; overflow: hidden; isolation: isolate; }
.fx-video { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-video video { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.8); }
.fx-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bordeaux-deep, #2b0d19) 0%, color-mix(in srgb, var(--bordeaux-deep, #2b0d19) 70%, transparent) 45%, color-mix(in srgb, var(--bordeaux-deep, #2b0d19) 35%, transparent) 100%); }
@media (max-width: 760px) { .fx-video video { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-photo img { transform: none !important; } }

/* ===== Logo: CDC-Monogramm (23.10.2026) ===== */
.logo::before {
  content: "CDC"; align-self: center; flex: none;
  display: inline-grid; place-items: center;
  height: 2.05em; padding: 0 .42em 0 .36em; margin-right: .3em;
  border-radius: .55em;
  background: radial-gradient(circle at 80% 22%, var(--orange, #d97736) 0 .13em, transparent .14em), linear-gradient(140deg, var(--bordeaux, #5a1833) 0%, #3a0e20 100%);
  color: #fff; font-family: var(--font-display, Georgia, serif); font-style: italic; font-weight: 420;
  font-size: 1em; line-height: 1; letter-spacing: -.07em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 16px -10px rgba(90,24,51,.7);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
a:hover > .logo::before, a:focus-visible > .logo::before { transform: perspective(200px) rotateY(-18deg) rotateX(8deg) scale(1.06); }
[data-world="digital"] .site-header .logo::before, .site-footer .logo::before {
  background: radial-gradient(circle at 80% 22%, #fff 0 .13em, transparent .14em), linear-gradient(140deg, var(--orange, #d97736) 0%, #b5561c 100%);
  color: #2b0d19; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 8px 16px -10px rgba(0,0,0,.6);
}

/* ===== Animationen Paket 2 (23.10.2026) ===== */
/* Überschriften Wort für Wort */
.fx-w { display: inline-block; white-space: pre; animation: fx-word .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + 120ms); transform-origin: 50% 100%; }
@keyframes fx-word { from { opacity: 0; transform: translateY(.55em) rotateX(70deg); filter: blur(4px); } }
/* Fortschrittsbalken oben */
#fx-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 10000; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--bordeaux, #5a1833), var(--orange, #d97736)); pointer-events: none; }
/* Lichtschimmer auf Buttons */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); pointer-events: none; }
.btn:hover::after { animation: fx-shine .8s ease; }
@keyframes fx-shine { to { left: 130%; } }
.btn-primary { animation: fx-pulse 3.5s ease-in-out 2s infinite; }
@keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange, #d97736) 0%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--orange, #d97736) 18%, transparent); } }
/* Laufband */
.fx-ticker { overflow: hidden; border-block: 1px solid var(--rule, rgba(0,0,0,.12)); background: var(--bordeaux-deep, #2b0d19); color: var(--ivory, #f7f3ef); padding: 14px 0; }
.fx-ticker-track { display: flex; width: max-content; gap: 0; animation: fx-marquee 38s linear infinite; }
.fx-ticker:hover .fx-ticker-track { animation-play-state: paused; }
.fx-ticker span { font-family: var(--font-display, serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.6rem); white-space: nowrap; padding: 0 1.4rem; }
.fx-ticker span::after { content: "•"; color: var(--orange, #d97736); font-style: normal; margin-left: 2.8rem; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }
/* Lichtkegel folgt der Maus */
#fx-glow { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, color-mix(in srgb, var(--orange, #d97736) 14%, transparent), transparent 60%); transform: translate(var(--gx, -999px), var(--gy, -999px)); transition: transform .25s ease-out; mix-blend-mode: multiply; }
[data-world="digital"] #fx-glow { mix-blend-mode: screen; }
/* schwebende Hintergrund-Formen im Seitenkopf */
.fx-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(40px); opacity: .45; pointer-events: none; animation: fx-float 14s ease-in-out infinite alternate; }
@keyframes fx-float { to { transform: translate3d(40px, -30px, 0) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .fx-w, .btn-primary, .fx-ticker-track, .fx-blob { animation: none !important; } #fx-glow, #fx-progress { display: none; } }

/* Handy-Kopfzeile: Platz für Menü-Button (23.10.2026) */
@media (max-width: 520px) {
  .site-header .logo .sub, .site-header .logo .dot, .topline .logo .sub, .topline .logo .dot { display: none; }
  .logo::before { margin-right: .25em; }
  html, body { overflow-x: clip; }
}