/* it-boxring – Landing Page mit CSS-Motion-Grafik (kein JavaScript, keine externen Quellen) */
:root {
  --bg-1: #030817;
  --bg-2: #0a1f4d;
  --text: #ffffff;
  --muted: #a9b6d3;
  --cyan: #19c8f0;
  --orange: #ff8a1f;
  --teal: #1fe0cf;
  --white: #f2f6ff;
  --blue: #3b8cff;
  --security: #FF3849;   /* Produktfarben aus dem BOXED-IT-Styleguide */
  --ai: #A35CFF;
  --grc: #347EFF;
  --magenta: #ff2bd6;
  --yellow: #ffe81a;

  --r: clamp(150px, 38vw, 470px);   /* Radius des Rings */
  --s: clamp(64px, 11vw, 150px);    /* Kantenlänge der großen Boxen */
  --tilt: 74deg;                    /* Neigung des Rings */
  --period: 36s;                    /* eine Umdrehung */
  --font: "Avenir Next", "Nunito", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 45%, var(--bg-2) 0%, #071434 45%, var(--bg-1) 100%);
  background-color: var(--bg-1);
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
}

/* ---------- Bühne ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}
.ring {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt));
}
.orbit {
  position: absolute;
  transform-style: preserve-3d;
  animation: spin var(--period) linear infinite;
}
@keyframes spin { to { transform: rotateZ(360deg); } }

/* Ring: Farben liegen unter den passenden Boxen und drehen sich mit */
.ring-line, .ring-glow {
  position: absolute;
  left: calc(-1 * var(--r));
  top: calc(-1 * var(--r));
  width: calc(2 * var(--r));
  height: calc(2 * var(--r));
  border-radius: 50%;
  background: conic-gradient(from -36deg, var(--ai) 0deg, var(--grc) 72deg, var(--teal) 144deg,
                             var(--orange) 216deg, var(--security) 288deg, var(--ai) 360deg);
}
.ring-line {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.ring-glow {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 14px), transparent 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 14px), transparent 100%);
  filter: blur(10px);
  opacity: .9;
}

/* Plätze auf dem Ring: Winkel 0° = rechts, 90° = vorne */
.slot {
  --c: var(--white);
  --size: var(--s);
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateZ(var(--a)) translateX(var(--r)) rotateZ(calc(-1 * var(--a)));
}
.s-orange   { --a: 90deg;  --c: var(--orange); }
.s-security { --a: 162deg; --c: var(--security); }
.s-ai       { --a: 234deg; --c: var(--ai); }
.s-grc      { --a: 306deg; --c: var(--grc); }
.s-perso    { --a: 18deg;  --c: var(--teal); }

/* Lichtfleck auf dem Ring unter jeder Box */
.spot {
  position: absolute;
  width: calc(var(--size) * 2.4);
  height: calc(var(--size) * 2.4);
  left: calc(var(--size) * -1.2);
  top: calc(var(--size) * -1.2);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
}

/* Gegendrehung: die Box bleibt aufrecht und zeigt immer nach vorne */
.upright {
  position: absolute;
  transform-style: preserve-3d;
  animation: counter var(--period) linear infinite;
}
@keyframes counter {
  from { transform: rotateZ(0deg)    rotateX(calc(-1 * var(--tilt))); }
  to   { transform: rotateZ(-360deg) rotateX(calc(-1 * var(--tilt))); }
}

/* ---------- Würfel ---------- */
.cube {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: calc(var(--size) / -2);
  top: calc(var(--size) * -1.08);
  transform-style: preserve-3d;
  transform: rotateX(-8deg);
  animation: bob 6s ease-in-out infinite;
}
.s-security .cube { animation-delay: -1s; }
.s-ai .cube       { animation-delay: -2s; }
.s-grc .cube      { animation-delay: -3s; }
.s-perso .cube    { animation-delay: -5s; }
@keyframes bob {
  0%, 100% { transform: translateY(0)    rotateX(-8deg); }
  50%      { transform: translateY(-6px) rotateX(-8deg); }
}
.cube .f {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #142041 0%, #070d1f 70%);
  border: 2px solid var(--c);
  border-radius: 6px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 70%, transparent),
              inset 0 0 26px color-mix(in srgb, var(--c) 35%, transparent);
  backface-visibility: hidden;
}
.f.front  { transform: translateZ(calc(var(--size) / 2)); }
.f.back   { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.f.right  { transform: rotateY(90deg)  translateZ(calc(var(--size) / 2)); }
.f.left   { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.f.top    { transform: rotateX(90deg)  translateZ(calc(var(--size) / 2)); background: #1b2a52; }
.f.bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }

/* Inhalte auf der Vorderseite */
.cube .front img { width: 90%; height: auto; display: block; }
.wm {
  font-weight: 700;
  color: #fff;
  font-size: calc(var(--size) * .16);
  letter-spacing: -.01em;
  line-height: 1;
  text-align: left;
}
.wm b { font-weight: 700; }
.wm-orange b { color: var(--orange); }
.wm-perso b  { color: var(--teal); }
.wm small {
  display: block;
  margin-top: .5em;
  font-size: .38em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}
.wm-i {   /* kleines Würfel-Icon über „box“ */
  display: block;
  width: .9em;
  height: .9em;
  margin: 0 0 .2em auto;
  border: .12em solid var(--orange);
  border-radius: .12em;
  transform: rotate(45deg) scale(.8);
}

/* ---------- Titel ---------- */
.title {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(92vw, 900px);
  text-align: center;
  z-index: 2;
}
h1 {
  margin: 0;
  font-size: clamp(48px, 10vw, 128px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
h1 span { color: var(--cyan); }
.claim {
  margin: .5em 0 0;
  font-size: clamp(18px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}
.claim span { color: var(--cyan); }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Symbol: weißer Draht-Würfel über dem Namen, steht still */
.symbol {
  --q: clamp(48px, 7vw, 96px);
  width: var(--q);
  height: var(--q);
  margin: 0 auto clamp(20px, 3vw, 40px);
  perspective: 600px;
}
.symbol-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(-35deg);
}
.symbol-cube .f {
  position: absolute;
  inset: 0;
  border: 4px solid;
  border-radius: 8px;
  border-color: var(--white);
  background: rgba(10, 20, 50, .25);
}
.symbol-cube .front  { transform: translateZ(calc(var(--q) / 2)); }
.symbol-cube .back   { transform: rotateY(180deg) translateZ(calc(var(--q) / 2)); }
.symbol-cube .right  { transform: rotateY(90deg)  translateZ(calc(var(--q) / 2)); }
.symbol-cube .left   { transform: rotateY(-90deg) translateZ(calc(var(--q) / 2)); }
.symbol-cube .top    { transform: rotateX(90deg)  translateZ(calc(var(--q) / 2)); }
.symbol-cube .bottom { transform: rotateX(-90deg) translateZ(calc(var(--q) / 2)); }

/* ---------- Footer ---------- */
.site-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  font-size: 14px;
  z-index: 3;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); text-decoration: underline; }

/* ---------- Rechtliche Seiten ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 48px 16px 96px; line-height: 1.6; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); }
.legal h2 { font-size: 20px; margin-top: 2em; }
.legal a { color: var(--cyan); }
.legal .back { display: inline-block; margin-bottom: 24px; }
.note { padding: 12px 16px; border: 1px solid var(--orange); border-radius: 8px; color: var(--muted); }
.todo { color: var(--orange); }
.legal + .site-footer { position: static; }

/* Bewegung reduzieren, wenn das System es wünscht */
@media (prefers-reduced-motion: reduce) {
  .orbit, .upright, .cube { animation-play-state: paused; }
}

/* Schmale Bildschirme: Ring flacher, Titel höher */
@media (max-width: 640px) {
  :root { --r: 44vw; --s: 64px; --tilt: 70deg; }
  .ring { top: 66%; }
  .title { top: 36%; }
  .wm small { display: none; }
}

/* =========================================================
   HELLE VARIANTE (Mockup v3) – überschreibt die dunklen Werte
   ========================================================= */
:root {
  --text: #0b1633;
  --muted: #4a5878;
  --cyan: #0a9fc4;        /* dunkleres Cyan für Kontrast auf hell */
  --orange: #f07a10;
  --teal: #10b5a6;
  --white: #0b1633;       /* Symbolwürfel: dunkel statt weiß */
}
body {
  background: radial-gradient(120% 90% at 50% 45%, #ffffff 0%, #eef2f8 55%, #dfe6f1 100%);
  background-color: #eef2f8;
}
.cube .f {
  background: linear-gradient(160deg, #ffffff 0%, #eef2f8 75%);
  box-shadow: 0 0 28px color-mix(in srgb, var(--c) 45%, transparent),
              inset 0 0 18px color-mix(in srgb, var(--c) 18%, transparent);
}
.f.top { background: #f7f9fc; }
.f.left, .f.right { background: linear-gradient(160deg, #eef2f8 0%, #dde4ef 80%); }
.wm { color: var(--text); }
.spot { opacity: .7; }
.ring-glow { opacity: .55; }
.symbol-cube .f { background: rgba(255, 255, 255, .35); }