/* 3D-Effekte: Hero-Knotennetz, Orbit-Karussell, Tilt-Karten, Scroll-Reveal.
   Alles GPU-freundlich: nur transform/opacity, kein filter: blur() (siehe iOS-Historie). */

/* ---------------------------------------------------------------
   1. Hero: rotierendes 3D-Knotennetz (Canvas)
   --------------------------------------------------------------- */
.hero3d {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero3d canvas.is-ready {
  opacity: 1;
}

/* ---------------------------------------------------------------
   2. Scroll-Reveal in 3D
   Greift nur, wenn das Skript laeuft (html.js-3d), sonst bleibt alles sichtbar.
   --------------------------------------------------------------- */
.js-3d [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0) rotateX(7deg);
  transform-origin: 50% 100%;
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
              transform .75s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-3d [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------
   3. Tilt-Karten (nur Desktop-Zeigergeraete, per JS aktiviert)
   --------------------------------------------------------------- */
[data-tilt3d] {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

[data-tilt3d].is-tilting {
  transition: transform .12s ease-out;
}

/* ---------------------------------------------------------------
   4. Expertise-Sektion mit 3D-Orbit
   --------------------------------------------------------------- */
.expertise3d {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: #000000;
  overflow: hidden;
}

.expertise3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(55% 45% at 50% 40%, rgba(var(--glow-cool), 0.20) 0%, rgba(var(--glow-cool), 0) 100%),
    radial-gradient(45% 40% at 12% 85%, rgba(var(--glow-warm), 0.12) 0%, rgba(var(--glow-warm), 0) 100%);
  pointer-events: none;
}

.expertise3d .container {
  position: relative;
  z-index: 1;
}

.expertise3d .mbr-section-title,
.expertise3d .mbr-label,
.expertise3d .mbr-text {
  color: #ffffff;
}

/* --- 3D-Entwicklerszene: Codefenster im Raum, umgeben von den Systemen,
       die per Schnittstelle angebunden werden --- */
.devscene {
  position: relative;
  margin: 1.5rem auto 3rem;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.devscene-stage {
  position: relative;
  min-height: 480px;
  transform-style: preserve-3d;
}

.devscene-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.devscene-links line {
  stroke: rgba(120, 180, 255, 0.35);
  stroke-width: .35;
  stroke-dasharray: 2 3;
  animation: devscene-dash 1.6s linear infinite;
}

@keyframes devscene-dash {
  to { stroke-dashoffset: -10; }
}

.devscene-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.devscene-node {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: .8rem;
  background-color: rgba(12, 15, 22, 0.85);
  color: #ffffff;
  font-size: .82rem;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, -50%) translateZ(var(--z, 0px));
  animation: devscene-float 7s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.devscene-node::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: #0175ff;
  box-shadow: 0 0 0 4px rgba(1, 117, 255, 0.18);
}

@keyframes devscene-float {
  0%, 100% { transform: translate(-50%, -50%) translateZ(var(--z, 0px)) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateZ(var(--z, 0px)) translateY(-10px); }
}

/* Codefenster */
.devscene-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, 82%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  background-color: rgba(9, 11, 16, 0.94);
  background-image: linear-gradient(115deg, rgba(1, 117, 255, 0.14) 0%, rgba(1, 117, 255, 0) 45%);
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.7), 0 0 90px rgba(1, 117, 255, 0.22);
  overflow: hidden;
  transform: translate(-50%, -50%) rotateY(-19deg) rotateX(7deg) translateZ(60px);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.devscene-window-inner {
  animation: devscene-hover 9s ease-in-out infinite;
}

@keyframes devscene-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.devscene-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.04);
}

.devscene-bar i {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
}

.devscene-bar i:first-child { background-color: #ff5f57; }
.devscene-bar i:nth-child(2) { background-color: #febc2e; }
.devscene-bar i:nth-child(3) { background-color: #28c840; }

.devscene-bar em {
  margin-left: .6rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
  font-size: .78rem;
}

.devscene-code {
  margin: 0;
  padding: 1.1rem 1.3rem 1.4rem;
  min-height: 15rem;
  color: rgba(226, 232, 240, 0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.7;
  white-space: pre;
  overflow: hidden;
}

.devscene-code .k { color: #7dabff; }
.devscene-code .f { color: #ffd479; }
.devscene-code .s { color: #7ee787; }
.devscene-code .c { color: rgba(255, 255, 255, 0.38); }
.devscene-code .n { color: #ff9d6b; }

.devscene-caret {
  display: inline-block;
  width: .55ch;
  background-color: #0175ff;
  animation: devscene-blink 1s steps(1) infinite;
}

@keyframes devscene-blink {
  50% { opacity: 0; }
}

@media (max-width: 1199px) {
  .devscene-stage { min-height: 430px; }
  .devscene-node { font-size: .76rem; }
  .devscene-code { font-size: .72rem; min-height: 13rem; }
}

/* Ab Tablet abwaerts kippt die Szene in eine gerade Ansicht,
   die Systeme wandern als Chip-Reihe unter das Codefenster. */
@media (max-width: 991px) {
  .devscene { perspective: none; }

  .devscene-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    transform-style: flat;
  }

  .devscene-links { display: none; }

  .devscene-window {
    order: 1;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
  }

  .devscene-window-inner {
    animation: none;
  }

  .devscene-nodes {
    order: 2;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    width: auto;
    height: auto;
    margin-top: 1.25rem;
  }

  .devscene-node {
    position: static;
    transform: none;
    animation: none;
    font-size: .72rem;
    padding: .5rem .8rem;
  }
}

@media (max-width: 575px) {
  .devscene-code {
    font-size: .62rem;
    padding: .9rem;
    min-height: 12rem;
  }
}

/* --- Kompetenz-Karten --- */
.expertise3d .role-grid {
  margin-top: 1rem;
}

/* Luft zwischen den Karten, damit der Hover-Lift mobil nicht die naechste Karte beruehrt */
.expertise3d .role-grid > .item {
  margin-bottom: 1.75rem;
}

@media (min-width: 992px) {
  .expertise3d .role-grid > .item {
    margin-bottom: 0;
  }
}

.expertise3d .role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  background-color: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.expertise3d .role-card:hover,
.expertise3d .role-card:focus-visible {
  border-color: rgba(1, 117, 255, 0.55);
  outline: none;
}

.expertise3d .role-card h3 {
  color: #ffffff;
  margin-bottom: .75rem;
  /* zwei Zeilen fuer alle Karten reservieren, damit die Icons auf einer Hoehe stehen */
  min-height: 3em;
}

.expertise3d .role-card p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
}

.expertise3d .role-card .role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: .9rem;
  background-color: rgba(1, 117, 255, 0.22);
  color: #ffffff;
  font-size: 1.35rem;
}

.expertise3d .role-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.expertise3d .role-card ul li {
  padding: .25rem .7rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: .78rem;
}

.expertise3d .tech-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin: 2.5rem 0 0;
  padding: 0;
}

.expertise3d .tech-tags li {
  padding: .3rem .85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  font-size: .76rem;
  white-space: nowrap;
}

.expertise3d .role-card .role-plus {
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), color .3s ease;
}

/* Auf dem dreispaltigen Desktop-Layout erst der Titel, der Rest faehrt beim Hover auf.
   Der Text bleibt dabei im DOM (nur Hoehe/Deckkraft animiert), nicht display:none. */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .expertise3d .role-card {
    min-height: 21rem;
    justify-content: flex-end;
  }

  .expertise3d .role-card .role-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s cubic-bezier(.22, .61, .36, 1);
  }

  .expertise3d .role-card .role-reveal-inner {
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
  }

  .expertise3d .role-card:hover .role-reveal,
  .expertise3d .role-card:focus-within .role-reveal {
    grid-template-rows: 1fr;
  }

  .expertise3d .role-card:hover .role-reveal-inner,
  .expertise3d .role-card:focus-within .role-reveal-inner {
    opacity: 1;
    transform: none;
  }

  .expertise3d .role-card:hover .role-plus,
  .expertise3d .role-card:focus-within .role-plus {
    transform: rotate(135deg);
    color: rgba(1, 117, 255, 1);
  }
}

@media (hover: none), (pointer: coarse), (max-width: 991px) {
  .expertise3d .role-card .role-plus {
    display: none;
  }
}

/* ---------------------------------------------------------------
   5. Bewegung reduzieren
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-3d [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-tilt3d] {
    transition: none;
  }
}