/* ==========================================================================
   MIRSYON — Raum und Bewegung (Magic-UI-Muster, selbst geschrieben)
   Chef 16.10.2026: „etwas mehr 3D-Animation schadet nicht."
   Alle Effekte: eigener Code, keine Fremdbibliothek — die Sicherheits-
   richtlinie bleibt streng, und die Seite lädt nichts nach.
   Jede Bewegung endet bei „Bewegung reduzieren".
   ========================================================================== */

/* ------------------------------------------------- 1 · Karte im Raum
   (Magic UI „3D Card") — die Karte neigt sich zum Zeiger, der Inhalt hebt
   sich dabei leicht ab. Auf Berührungsgeräten passiert nichts: dort gibt es
   keinen Zeiger, und eine zufällige Neigung wäre nur Unruhe.              */
.raumkarte {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .raumfeld { perspective: 1400px; }
  .raumkarte.neigt {
    transform: rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)) translateZ(0);
    transition: transform .09s linear, box-shadow .4s ease;
    box-shadow: 0 34px 70px -34px rgba(0,0,0,.62), 0 0 0 1px var(--linie-dunkel-hell);
  }
  .raumkarte.neigt > * { transform: translateZ(26px); }
  .raumkarte > * { transition: transform .4s cubic-bezier(.22,.8,.3,1); }
}

/* ------------------------------------------------- 2 · Licht am Zeiger
   (Magic UI „Spotlight") — ein weicher Schein folgt dem Zeiger über der
   Karte und macht sichtbar, worauf man gerade zeigt.                      */
.schein-feld { position: relative; overflow: hidden; isolation: isolate; }
.schein-feld::before {
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(420px circle at var(--zx, 50%) var(--zy, 50%),
              rgba(123,205,254,.16), transparent 62%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 0;
}
.schein-feld:hover::before, .schein-feld:focus-within::before { opacity: 1; }
.schein-feld > * { position: relative; z-index: 1; }

/* ------------------------------------------------- 3 · Kreisende Punkte
   (Magic UI „Orbiting Circles") — zeigt, dass alles um eine Mitte läuft.  */
.umlauf { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.umlauf__mitte { position: relative; z-index: 2; }
.umlauf__bahn {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(123,205,254,.16);
  animation: kreisen var(--dauer, 26s) linear infinite;
}
.umlauf__bahn--innen { inset: 22%; animation-duration: var(--dauer-innen, 18s); animation-direction: reverse; }
.umlauf__punkt {
  position: absolute; top: -9px; left: calc(50% - 9px);
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(140deg, var(--hellblau), var(--akzent));
  box-shadow: 0 0 18px rgba(123,205,254,.5);
  animation: kreisen var(--dauer, 26s) linear infinite reverse;
}
.umlauf__punkt:nth-child(2) { top: calc(50% - 9px); left: auto; right: -9px; }
.umlauf__punkt:nth-child(3) { top: auto; bottom: -9px; left: calc(50% - 9px); }
.umlauf__punkt:nth-child(4) { top: calc(50% - 9px); left: -9px; }
@keyframes kreisen { to { transform: rotate(360deg); } }

/* ------------------------------------------------- 4 · Gitter in der Tiefe
   (Magic UI „Retro Grid") — ein Raster, das nach hinten wegläuft.         */
.tiefengitter { position: relative; overflow: hidden; }
.tiefengitter::after {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -18%; height: 62%;
  background-image:
    linear-gradient(to right, rgba(123,205,254,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(123,205,254,.12) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(360px) rotateX(62deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 82%);
  mask-image: linear-gradient(to top, #000 4%, transparent 82%);
  animation: gitterlauf 22s linear infinite;
  pointer-events: none; z-index: 0;
}
@keyframes gitterlauf { to { background-position: 0 62px; } }
.tiefengitter > * { position: relative; z-index: 1; }

/* ------------------------------------------------- 5 · Zahl, die zählt
   (Magic UI „Number Ticker") — vorhandene Zähler bekommen Tiefe.          */
.zahlen__wert { font-feature-settings: "tnum"; }
.zahlen__feld { transition: transform .4s cubic-bezier(.22,.8,.3,1); }
@media (hover: hover) { .zahlen__feld:hover { transform: translateY(-3px); } }

/* ------------------------------------------------- 6 · Telefon als Körper
   Designstandard Punkt 4: kein flaches Rahmenbild, sondern fünf Schichten
   Material, geneigt im Raum, mit echter Ansicht auf dem Bildschirm.       */
.geraet-feld { perspective: 1600px; display: grid; place-items: center; padding: 1rem 0 2.5rem; }
.geraet {
  position: relative; width: min(232px, 58vw); aspect-ratio: 9 / 19.3;
  transform: rotateY(-19deg) rotateX(7deg) rotateZ(1.5deg);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.22,.8,.3,1);
  animation: geraet-schweben 9s ease-in-out infinite;
}
@media (hover: hover) { .geraet-feld:hover .geraet { transform: rotateY(-9deg) rotateX(3deg); } }
.geraet__koerper {
  position: absolute; inset: 0; border-radius: 13%/6.4%;
  background: linear-gradient(145deg, #2b3a4e 0%, #0d1726 26%, #16243a 52%, #091320 78%, #243246 100%);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.8),
              0 0 0 1px rgba(255,255,255,.07),
              inset 0 0 0 1.5px rgba(255,255,255,.05);
}
.geraet__kante {                                   /* Gehäusedicke */
  position: absolute; inset: 0; border-radius: 13%/6.4%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
  transform: translateZ(-7px);
  background: #060d16;
}
.geraet__schirm {
  position: absolute; inset: 2.4%; border-radius: 11%/5.4%; overflow: hidden;
  background: var(--tiefe-000); transform: translateZ(2px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.geraet__schirm img, .geraet__schirm svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.geraet__insel {
  position: absolute; top: 2.6%; left: 50%; transform: translateX(-50%) translateZ(4px);
  width: 30%; height: 2.6%; border-radius: 999px; background: #04080f;
}
.geraet__glanz {
  position: absolute; inset: 2.4%; border-radius: 11%/5.4%; pointer-events: none;
  transform: translateZ(3px);
  background: linear-gradient(118deg, rgba(255,255,255,.17) 0 16%, transparent 34% 100%);
  -webkit-mask-image: linear-gradient(118deg, #000 0 30%, transparent 56%);
  mask-image: linear-gradient(118deg, #000 0 30%, transparent 56%);
}
.geraet__taste {
  position: absolute; right: -2px; width: 2.5px; border-radius: 2px;
  background: linear-gradient(180deg, #33415a, #16202f);
  transform: translateZ(-2px);
}
.geraet__taste--an  { top: 22%; height: 9%; }
.geraet__taste--lauter { left: -2px; right: auto; top: 16%; height: 6%; }
.geraet__taste--leiser { left: -2px; right: auto; top: 24%; height: 6%; }
.geraet__boden {
  position: absolute; left: 8%; right: 8%; bottom: -7%; height: 10%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
  filter: blur(14px); transform: translateZ(-20px);
}
@keyframes geraet-schweben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

/* ------------------------------------------------------------ Rücksicht */
@media (prefers-reduced-motion: reduce) {
  .umlauf__bahn, .umlauf__punkt, .tiefengitter::after, .geraet { animation: none !important; }
  .raumkarte, .raumkarte > *, .zahlen__feld, .geraet { transition: none !important; }
  .raumkarte.neigt { transform: none !important; }
}


/* Bildunterschrift unter einer Abbildung — schlicht, ohne Zierlinie */
.bildtext {
  text-align: center; max-width: 34ch; margin: -.4rem auto 0;
  font-size: var(--schrift-xs); color: var(--text-hell-leise); line-height: 1.5;
}
.insel .bildtext, .block--hell .bildtext { color: #93A6B8; }