/* =====================================================================
   HDH AG — seitenübergreifende Motion-Ebene (VORSCHAU, nur Darstellung)
   CI: Navy #00101f · Blau #0066cc · Cyan #00d4ff — kein Gold.
   Erkennt Hero / Headline / Überschriften / Karten / Buttons selbst.
   Alles unter html.mx → Schalter AUS = Originalansicht.
   ===================================================================== */
html.mx{--mxb:#0066cc;--mxc:#00d4ff;--spring:cubic-bezier(.16,1,.3,1);--io2:cubic-bezier(.65,0,.35,1)}

/* ---------- Scroll-Fortschritt ---------- */
.mx-prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:2147483000;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#0066cc,#00d4ff);box-shadow:0 0 12px rgba(0,212,255,.8);pointer-events:none}

/* ---------- Hero-Bühne (liegt unter dem Inhalt) ---------- */
.mx-hero-host{isolation:isolate}
.mx-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:-1}
.mx-stage.mx-inbg{z-index:auto}
.mx-aurora{position:absolute;border-radius:50%;filter:blur(80px);opacity:.36;animation:mxDrift 20s var(--io2) infinite alternate}
.mx-aurora.a{width:620px;height:620px;background:#0066cc;left:-180px;top:-160px}
.mx-aurora.b{width:520px;height:520px;background:#00d4ff;right:-160px;bottom:-200px;opacity:.2;animation-duration:26s}
.mx-aurora.c{width:380px;height:380px;background:#1a4dff;left:45%;top:30%;opacity:.15;animation-duration:31s}
.mx-light .mx-aurora{opacity:.13}.mx-light .mx-aurora.b{opacity:.10}.mx-light .mx-aurora.c{opacity:.07}
@keyframes mxDrift{to{transform:translate(110px,70px) scale(1.2)}}
.mx-net,.mx-spot{position:absolute;inset:0}
.mx-spot{opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(0,212,255,.11),transparent 60%)}
.mx-light .mx-spot{background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(0,102,204,.08),transparent 60%)}
.mx-hero-host:hover .mx-spot{opacity:1}
.mx-grain{position:absolute;inset:-50%;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:mxGrain 1.1s steps(6) infinite}
.mx-light .mx-grain{display:none}
@keyframes mxGrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* HUD-Ecken */
.mx-hud{position:absolute;left:24px;right:24px;bottom:24px;top:24px;
  font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(0,212,255,.72);opacity:0;transition:opacity 1.4s 1s}
.mx-light .mx-hud{color:rgba(0,102,204,.7)}
.mx-hud.on{opacity:1}
.mx-hud i{position:absolute;width:18px;height:18px;border:0 solid rgba(0,212,255,.55)}
.mx-light .mx-hud i{border-color:rgba(0,102,204,.45)}
.mx-hud .tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.mx-hud .tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.mx-hud .bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.mx-hud .br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.mx-hud>span{position:absolute;white-space:nowrap}
.mx-hud .l1{top:6px;left:30px}.mx-hud .l2{top:6px;right:30px}   /* oben: unten liegen Musik- und Chat-Knopf */
.mx-hud .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#00d4ff;margin-right:9px;
  vertical-align:1px;box-shadow:0 0 8px #00d4ff;animation:mxBlink 1.6s ease-in-out infinite}
@keyframes mxBlink{50%{opacity:.25}}

/* ---------- Headline: Wort für Wort, Verlaufstexte als Einheit ---------- */
html.mx .mx-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
html.mx .mx-wi{display:inline-block;transform:translateY(110%);transition:transform 1s var(--spring)}
html.mx .mx-unit{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);
  transition:opacity 1s var(--spring),transform 1s var(--spring),filter 1s}
html.mx h1.mx-go .mx-wi,html.mx h1.mx-go .mx-unit{transform:none;opacity:1;filter:none}

/* ---------- Überschriften: Linie zeichnet sich ---------- */
html.mx h2.mx-h::after{content:"";display:block;height:2px;width:72px;margin-top:16px;
  background:linear-gradient(90deg,#0066cc,#00d4ff);box-shadow:0 0 10px rgba(0,212,255,.45);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s .35s var(--io2)}
html.mx h2.mx-h.mx-c::after{margin-left:auto;margin-right:auto;transform-origin:center}
html.mx h2.mx-h.mx-r::after{margin-left:auto;transform-origin:right}
html.mx h2.mx-h.mx-on::after{transform:scaleX(1)}

/* ---------- Karten: Tilt, Spotlight, Lichtrand ---------- */
html.mx .mx-card{transition:transform .5s var(--spring),box-shadow .5s}
html.mx .mx-card.mx-tilt{transition:transform .18s ease-out,box-shadow .5s}
html.mx .mx-card:hover{box-shadow:0 26px 60px -24px rgba(0,102,204,.5)}
.mx-glow,.mx-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s}
.mx-glow{z-index:5;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,.16),transparent 45%)}
.mx-lightcard .mx-glow{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,102,204,.10),transparent 45%)}
.mx-edge{z-index:6;padding:1px;
  background:conic-gradient(from var(--mxa,0deg),transparent 0 70%,#00d4ff 80%,#0066cc 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:mxSpin 4s linear infinite;animation-play-state:paused}   /* dreht nur bei Hover (unsichtbar = keine Last) */
@property --mxa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes mxSpin{to{--mxa:360deg}}
html.mx .mx-card:hover .mx-glow,html.mx .mx-card:hover .mx-edge{opacity:1}
html.mx .mx-card:hover .mx-edge{animation-play-state:running}
/* Auftritt nur dort, wo die Seite selbst keinen hat */
html.mx .mx-enter{opacity:0;transform:translateY(34px)}
html.mx .mx-enter.mx-in{opacity:1;transform:none;
  transition:opacity .9s var(--spring) var(--d,0ms),transform 1.1s var(--spring) var(--d,0ms),box-shadow .5s}

/* ---------- Buttons: magnetisch + Glanz ---------- */
html.mx .mx-mag{transition:transform .2s ease-out,box-shadow .3s}
.mx-sheen{position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);
  animation:mxShine 3.8s ease-in-out infinite}
@keyframes mxShine{0%,60%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(475%) skewX(-20deg)}}   /* Verschiebung statt left: kein Layout je Bild */

/* ---------- Startseiten-spezifisch ---------- */
html.mx .div-grid{perspective:1100px}
html.mx .div-card[data-a]{transform:translateY(40px) rotateX(10deg);transform-origin:50% 100%;
  transition:opacity .9s var(--spring),transform 1.1s var(--spring),box-shadow .5s}
html.mx .div-card[data-a].in{transform:none}
html.mx .div-card .div-img{transition:transform .6s var(--spring),filter .5s}
html.mx .vis-mod{transition:transform .35s var(--spring),color .35s}
html.mx .vis-mod:hover{transform:translateX(6px)}
html.mx .vis-mod-icon{display:inline-block;animation:mxFloat 4s ease-in-out infinite}
html.mx .vis-mod:nth-child(2n) .vis-mod-icon{animation-delay:-2s}
@keyframes mxFloat{50%{transform:translateY(-4px)}}
html.mx .cert{transition:color .4s,border-color .4s,box-shadow .4s}
html.mx .cert.mx-lit{color:#fff;border-color:rgba(0,212,255,.6);box-shadow:0 0 14px rgba(0,212,255,.35)}

/* Schalter AUS → Original */
html:not(.mx) .mx-stage,html:not(.mx) .mx-prog,html:not(.mx) .mx-glow,html:not(.mx) .mx-edge,html:not(.mx) .mx-sheen{display:none!important}
html:not(.mx) .mx-enter{opacity:1!important;transform:none!important}

@media(max-width:760px){
  .mx-aurora.a{width:320px;height:320px}.mx-aurora.b{width:280px;height:280px}.mx-aurora.c{display:none}
  .mx-hud{left:12px;right:12px;bottom:14px}.mx-hud .l2{display:none}
}
@media(prefers-reduced-motion:reduce){
  /* gedämpft statt aus: Lichtflächen ziehen langsamer, Auftritte ohne Weg */
  html.mx .mx-aurora,html.mx .mx-blob{animation-duration:48s!important}
  html.mx .mx-enter{transform:none}
}

/* =====================================================================
   SCROLL-EBENE — Bewegung über die ganze Seite (nicht nur Hero)
   ===================================================================== */
/* Sektions-Ambiente: langsam wandernde Lichtflächen hinter jeder Sektion */
.mx-amb-host{isolation:isolate}
.mx-amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.mx-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16;animation:mxDrift 24s var(--io2) infinite alternate;animation-play-state:paused}
.mx-blob.a{width:560px;height:560px;background:#0066cc;top:-140px}
.mx-blob.b{width:440px;height:440px;background:#00d4ff;bottom:-160px;opacity:.09;animation-duration:30s}
.mx-amb.l .mx-blob.a{left:-200px}.mx-amb.l .mx-blob.b{right:-160px}
.mx-amb.r .mx-blob.a{right:-200px}.mx-amb.r .mx-blob.b{left:-160px}
.mx-amb.light .mx-blob.a{opacity:.07}.mx-amb.light .mx-blob.b{opacity:.05}
.mx-vis .mx-blob{animation-play-state:running}
/* Lichtlinie läuft beim Eintreten über die Sektionsoberkante */
.mx-sweep{position:absolute;top:0;left:50%;width:min(1240px,92%);height:1px;transform:translateX(-50%) scaleX(0);
  background:linear-gradient(90deg,transparent,#00d4ff,transparent);transition:transform 1.6s var(--io2)}
.mx-amb.light .mx-sweep{background:linear-gradient(90deg,transparent,#0066cc,transparent)}
.mx-seen2 .mx-sweep{transform:translateX(-50%) scaleX(1)}

/* Fliesstext, Listen, Zitate: weich hochgleiten + scharfstellen */
html.mx .mx-rise{opacity:0;transform:translateY(26px);filter:blur(6px)}
html.mx .mx-rise.mx-in{opacity:1;transform:none;filter:none;
  transition:opacity .9s var(--spring) var(--d,0ms),transform 1s var(--spring) var(--d,0ms),filter .9s var(--d,0ms)}

/* Bilder: Einblenden + sanfte Parallax-Tiefe */
@property --ps{syntax:'<number>';inherits:false;initial-value:1}
html.mx .mx-img{opacity:0;filter:blur(10px);--ps:1.08}
html.mx .mx-img.mx-in{opacity:1;filter:none;--ps:1;transition:opacity 1.1s var(--spring),filter 1.1s,--ps 1.6s var(--spring)}
html.mx .mx-img.mx-par{transform:translateY(var(--py,0px)) scale(calc(var(--ps) * 1.06))}

/* Zwischenüberschriften: Wort für Wort beim Scrollen */
html.mx .mx-go .mx-wi,html.mx .mx-go .mx-unit{transform:none;opacity:1;filter:none}

/* Zahlen rollen ein (Endwert exakt wie im Original) */
html.mx .mx-num{font-variant-numeric:tabular-nums}

/* ---------- Musik-Knopf ---------- */
.mx-music{position:fixed;left:18px;bottom:18px;z-index:2147483001;display:flex;align-items:center;gap:9px;height:38px;
  padding:0 14px 0 12px;border-radius:999px;background:rgba(0,16,31,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(0,212,255,.35);color:#cfefff;font:600 12px/1 system-ui,-apple-system,sans-serif;cursor:pointer;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.6);transition:border-color .3s,color .3s}
.mx-music:hover,.mx-music:focus-visible{border-color:#00d4ff;color:#fff;outline:none}
.mx-music .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.mx-music .eq i{display:block;width:3px;height:4px;border-radius:2px;background:linear-gradient(#00d4ff,#0066cc)}
.mx-music.on .eq i{animation:mxEq 1s ease-in-out infinite}
.mx-music.on .eq i:nth-child(2){animation-delay:-.3s}.mx-music.on .eq i:nth-child(3){animation-delay:-.6s}.mx-music.on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes mxEq{0%,100%{height:4px}50%{height:14px}}
.mx-music.off .eq i{opacity:.4}
.mx-music.ready{animation:mxPulse 2.6s ease-in-out infinite}
@keyframes mxPulse{50%{box-shadow:0 0 0 7px rgba(0,212,255,.13),0 10px 28px -12px rgba(0,0,0,.6)}}
@media(prefers-reduced-motion:reduce){.mx-music.on .eq i,.mx-music.ready{animation:none}.mx-blob{animation:none}}
html:not(.mx) .mx-amb{display:none!important}
html:not(.mx) .mx-rise,html:not(.mx) .mx-img{opacity:1!important;transform:none!important;filter:none!important}

/* ---------- Leistung (09.10.2026): zwei Besucher meldeten Browser-Abstürze beim Laden ----------
   Gemessen: am Handy lief das Layout 120×/s neu (Glanz per left), unsichtbare Endlos-Animationen und Weichzeichner-Glas
   über bewegtem Hintergrund belegten 25–97 % der Rechenzeit. Aussehen bleibt, nur ohne Dauerlast. */
#hdh-chat-btn{animation-iteration-count:3!important}                 /* Chat-Knopf pulsiert 3× statt endlos (Schatten = Neuzeichnen je Bild) */
.mx-music.ready{animation-iteration-count:3}
[data-mx-off]{animation-play-state:paused!important}
@media (hover:none) and (pointer:coarse){                              /* iPhone/iPad: Weichzeichner-Glas kostet viel Grafikspeicher */
  html.mx body *:not(nav):not(#nav):not(.nav){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}