/* ═══════════════════════════════════════════════════════════════════════════
   AXION IT — Hero Layer: Logo-Intro + Service-Orbit
   Nur Startseite. Keine externen Ressourcen, nur transform/opacity-Animationen.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --orbit-accent-rgb: var(--ax-accent-rgb, 201, 185, 154);
  --orbit-ring:    rgba(var(--orbit-accent-rgb), 0.8);
  --orbit-ring-soft: rgba(var(--orbit-accent-rgb), 0.5);
  --orbit-line:    rgba(var(--orbit-accent-rgb), 0.55);
  --orbit-pulse-t: 4.5s;
  --orbit-glow:    0 0 0 5px rgba(var(--orbit-accent-rgb), 0.22),
                   0 0 24px 2px rgba(var(--orbit-accent-rgb), 0.6);
  --logo-serif: Didot, "Bodoni 72", "Times New Roman", serif;
}

/* ───────────────────────────────────────────────
   1. LOGO-INTRO
   Overlay ist standardmäßig aus (auch ohne JS / noscript).
   Das Inline-Script im <head> setzt html.ax-intro-on nur
   einmal pro Sitzung und nicht bei prefers-reduced-motion.
   ─────────────────────────────────────────────── */

.ax-intro { display: none; }

html.ax-intro-on .ax-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2147483600; /* über allen anderen Elementen */
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #FFFFFF);
  cursor: pointer;
  animation: ax-intro-out 320ms var(--ax-ease-calm, ease) 1300ms forwards;
}

html.ax-intro-on.ax-intro-skip .ax-intro {
  animation: ax-intro-skip 220ms ease forwards;
}

.ax-intro__logo {
  width: min(360px, 60vw, 50vh);
  height: auto;
  overflow: visible;
  animation: ax-intro-logo-out 320ms var(--ax-ease-calm, ease) 1300ms forwards;
}

.ax-intro__frame {
  fill: none;
  stroke: var(--color-text, #1A1A1A);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ax-intro-draw 520ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.ax-intro__frame--1 { animation-delay: 40ms; }
.ax-intro__frame--2 { animation-delay: 380ms; }

.ax-intro__word {
  font-family: var(--logo-serif);
  font-size: 44px;
  letter-spacing: 0.1em;
  fill: var(--color-text, #1A1A1A);
  opacity: 0;
  transform-box: fill-box;
  transform: translateY(8px);
  animation: ax-intro-word 380ms var(--ax-ease-soft, ease-out) forwards;
}
.ax-intro__word--1 { font-weight: 300; animation-delay: 800ms; }
.ax-intro__word--2 { animation-delay: 920ms; }

@keyframes ax-intro-draw  { to { stroke-dashoffset: 0; } }
@keyframes ax-intro-word  { to { opacity: 1; transform: translateY(0); } }
@keyframes ax-intro-logo-out { to { transform: scale(1.04); } }
@keyframes ax-intro-out   { to { opacity: 0; visibility: hidden; } }
@keyframes ax-intro-skip  { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  html.ax-intro-on .ax-intro { display: none; }
}

/* ───────────────────────────────────────────────
   2. SERVICE-ORBIT IM HERO
   Breites Feld über fast die ganze Viewport-Breite. Feste Höhe
   (Desktop) bzw. aspect-ratio (Mobil) → kein CLS. Knoten liegen
   auf einer Ellipse (--x/--y in %), die Mitte bleibt quadratisch.
   ─────────────────────────────────────────────── */

.hero-orbit {
  --orbit-w: min(96vw, 1600px);
  position: relative;
  width: var(--orbit-w);
  height: clamp(400px, 60vh, 680px);
  margin: 0 calc((100% - var(--orbit-w)) / 2) var(--space-lg);
  text-align: left;
  container-type: inline-size;
}

/* Feld: Ellipsen + Verbindungslinien, dehnt sich mit der Box */
.hero-orbit__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Mitte: quadratisch, enthält Logo + rotierende Ringe */
.hero-orbit__center {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 60%;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  pointer-events: none;
}

.hero-orbit__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-orbit__layer--spin-b { animation: orbit-spin 36s linear infinite reverse; }
.hero-orbit__layer--spin-c { animation: orbit-spin 60s linear infinite; }

.hero-orbit__ring    { fill: none; stroke: var(--orbit-ring); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-orbit__ring--dash { stroke-dasharray: 2 8; }
.hero-orbit__ring--soft { stroke: var(--orbit-ring-soft); }
.hero-orbit__ring--flow  { animation: orbit-flow 22s linear infinite; }
.hero-orbit__ring--flow-rev { animation: orbit-flow 34s linear infinite reverse; }
.hero-orbit__sat     { fill: var(--color-accent, #C9B99A); }
.hero-orbit__line    { stroke: var(--orbit-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-orbit__core    { fill: var(--color-bg, #FFFFFF); stroke: var(--color-accent, #C9B99A); stroke-width: 1; }

/* Halo: beiger Schein hinter dem Logo, atmet langsam */
.hero-orbit__halo {
  fill: rgba(var(--orbit-accent-rgb), 0.45);
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: orbit-halo 5s ease-in-out infinite;
}

/* Radar-Wellen: Ringe breiten sich vom Logo aus und verklingen */
.hero-orbit__ping {
  fill: none;
  stroke: rgba(var(--orbit-accent-rgb), 0.85);
  stroke-width: 1.5;
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: orbit-ping 5s cubic-bezier(0.2, 0.55, 0.4, 1) infinite;
}
.hero-orbit__ping--2 { animation-delay: 2.5s; }

/* Lichtimpulse: kurze Kometen laufen vom Logo zu den Knoten.
   Reihenfolge der Pfade = Reihenfolge der Knoten → gleiche Delays. */
.hero-orbit__pulse {
  fill: none;
  stroke: var(--color-accent, #C9B99A);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 8;
  opacity: 0;
  animation: orbit-pulse var(--orbit-pulse-t) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-orbit__pulse:nth-child(1),  .hero-orbit__node:nth-child(1)  { --pd: -0.45s; }
.hero-orbit__pulse:nth-child(2),  .hero-orbit__node:nth-child(2)  { --pd: -2.25s; }
.hero-orbit__pulse:nth-child(3),  .hero-orbit__node:nth-child(3)  { --pd: -4.05s; }
.hero-orbit__pulse:nth-child(4),  .hero-orbit__node:nth-child(4)  { --pd: -1.35s; }
.hero-orbit__pulse:nth-child(5),  .hero-orbit__node:nth-child(5)  { --pd: -3.15s; }
.hero-orbit__pulse:nth-child(6),  .hero-orbit__node:nth-child(6)  { --pd: -0.9s; }
.hero-orbit__pulse:nth-child(7),  .hero-orbit__node:nth-child(7)  { --pd: -2.7s; }
.hero-orbit__pulse:nth-child(8),  .hero-orbit__node:nth-child(8)  { --pd: -4.5s; }
.hero-orbit__pulse:nth-child(9),  .hero-orbit__node:nth-child(9)  { --pd: -1.8s; }
.hero-orbit__pulse:nth-child(10), .hero-orbit__node:nth-child(10) { --pd: -3.6s; }
.hero-orbit__pulse { animation-delay: var(--pd, 0s); }

.hero-orbit__frame {
  fill: none;
  stroke: var(--color-text, #1A1A1A);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.hero-orbit__word {
  font-family: var(--logo-serif);
  font-size: 44px;
  letter-spacing: 0.1em;
  fill: var(--color-text, #1A1A1A);
}
.hero-orbit__word--1 { font-weight: 300; }

/* Knoten */
.hero-orbit__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: clamp(44px, 4cqi, 64px);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  color: var(--color-text, #1A1A1A);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  animation: orbit-float 7s ease-in-out var(--d, 0s) infinite;
}

.hero-orbit__dot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-bg, #FFFFFF);
  border: 1px solid rgba(var(--orbit-accent-rgb), 0.75);
  box-shadow: 0 2px 10px -4px rgba(26, 26, 26, 0.15);
  transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms ease;
}

/* Ankunft eines Lichtimpulses: Knoten blitzt kurz auf (synchron zu .hero-orbit__pulse) */
.hero-orbit__dot { position: relative; }
.hero-orbit__dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--color-accent, #C9B99A);
  box-shadow: 0 0 18px 2px rgba(var(--orbit-accent-rgb), 0.7);
  opacity: 0;
  pointer-events: none;
  animation: orbit-arrive var(--orbit-pulse-t) linear var(--pd, 0s) infinite;
}

.hero-orbit__dot svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-orbit__label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  width: max-content;
  max-width: 8.5em;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 0.95cqi, 1rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text, #1A1A1A);
}

.hero-orbit__tip {
  --tip-w: 15rem;
  position: absolute;
  top: calc(100% + 3.2em);
  left: 50%;
  width: var(--tip-w);
  margin-left: calc(var(--tip-w) / -2);
  padding: 0.6rem 0.75rem;
  font-size: 0.8125rem;
  font-size: clamp(0.8125rem, 0.9cqi, 0.9375rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text-secondary, #6B6B6B);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(var(--orbit-accent-rgb), 0.55);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.08));
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  pointer-events: none;
}
/* Titel steht auf Desktop schon im Label → im Tooltip nur auf Mobil */
.hero-orbit__tip strong {
  display: none;
  margin-bottom: 0.15rem;
  color: var(--color-text, #1A1A1A);
}

/* Tooltip-Ausrichtung: nach innen, damit nichts seitlich überläuft */
.hero-orbit__node--start .hero-orbit__tip { left: 0; margin-left: 0; }
.hero-orbit__node--end   .hero-orbit__tip { left: auto; right: 0; margin-left: 0; }
.hero-orbit__node--above .hero-orbit__tip { top: auto; bottom: calc(100% + 8px); transform: translateY(-4px); }

/* Aktiv: Hover (nur echte Maus), Tastaturfokus, Antippen (JS: .is-active) */
.hero-orbit__node:focus-visible,
.hero-orbit__node.is-active {
  z-index: 4;
  animation-play-state: paused;
}
.hero-orbit__node:focus-visible .hero-orbit__dot,
.hero-orbit__node.is-active .hero-orbit__dot {
  border-color: var(--color-accent, #C9B99A);
  box-shadow: var(--orbit-glow);
  transform: scale(1.06);
}
.hero-orbit__node:focus-visible .hero-orbit__tip,
.hero-orbit__node.is-active .hero-orbit__tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (hover: hover) {
  .hero-orbit__node:hover {
    z-index: 4;
    color: var(--color-text, #1A1A1A);
    animation-play-state: paused;
  }
  .hero-orbit__node:hover .hero-orbit__dot {
    border-color: var(--color-accent, #C9B99A);
    box-shadow: var(--orbit-glow);
    transform: scale(1.06);
  }
  .hero-orbit__node:hover .hero-orbit__tip {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.hero-orbit__node:focus { outline: none; }
.hero-orbit__node:focus-visible {
  outline: 2px solid var(--color-text, #1A1A1A);
  outline-offset: 4px;
}

/* Außerhalb des Viewports pausieren (JS setzt .is-paused) */
.hero-orbit.is-paused,
.hero-orbit.is-paused *,
.hero-orbit.is-paused .hero-orbit__dot::after { animation-play-state: paused !important; }

@keyframes orbit-spin  { to { transform: rotate(360deg); } }
@keyframes orbit-flow  { to { stroke-dashoffset: -400; } }
@keyframes orbit-halo {
  0%, 100% { transform: scale(1.03); opacity: 0.35; }
  50%      { transform: scale(1.2);  opacity: 0.85; }
}
@keyframes orbit-ping {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes orbit-pulse {
  0%   { stroke-dashoffset: 8;   opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: -92; opacity: 0; }
}
@keyframes orbit-arrive {
  0%, 86% { opacity: 0; transform: scale(1); }
  92%     { opacity: 1; transform: scale(1.05); }
  100%    { opacity: 0; transform: scale(1.45); }
}
@keyframes orbit-float {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}

/* ───────────────────────────────────────────────
   3. HANDY & TABLET
   Touch-Geräte bekommen statt Tooltips eine feste Infokarte
   unter dem Orbit (feste Mindesthöhe → kein CLS). Sie wechselt
   automatisch durch die Leistungen, bis ein Knoten angetippt wird.
   ─────────────────────────────────────────────── */

/* Gerade in der Infokarte gezeigter Knoten */
.hero-orbit__node.is-featured .hero-orbit__dot {
  border-color: var(--color-accent, #C9B99A);
  box-shadow: var(--orbit-glow);
  transform: scale(1.08);
}

.hero-orbit-info { display: none; }
.hero-orbit-hint { display: none; }

/* Hinweis nur auf echten Touch-Geräten (Maus-Nutzer sehen Tooltips) */
@media (hover: none) {
  .ax-js .hero-orbit-hint {
    display: block;
    margin: 0 auto var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #6B6B6B);
    text-align: center;
  }
}

.hero-orbit-info__title {
  grid-column: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text, #1A1A1A);
}
.hero-orbit-info__desc {
  grid-column: 1;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-secondary, #6B6B6B);
}
.hero-orbit-info__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--orbit-accent-rgb), 0.75);
  font-size: 1.1rem;
  color: var(--color-text, #1A1A1A);
}
.hero-orbit-info.is-swap .hero-orbit-info__title,
.hero-orbit-info.is-swap .hero-orbit-info__desc {
  animation: orbit-info-in 420ms var(--ax-ease-soft, ease-out) both;
}
.hero-orbit-info.is-swap .hero-orbit-info__desc { animation-delay: 60ms; }

@keyframes orbit-info-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (hover: none), (max-width: 700px) {
  .ax-js .hero-orbit__tip { display: none; }
  .ax-js .hero-orbit-info {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.875rem;
    align-content: center;
    width: min(100%, 34rem);
    min-height: 6.5rem;
    margin: 0 auto var(--space-lg);
    padding: 0.75rem 0.875rem 0.75rem 1rem;
    text-align: left;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(var(--orbit-accent-rgb), 0.55);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.06));
    -webkit-tap-highlight-color: transparent;
  }
  .ax-js .hero-orbit-info:active { transform: scale(0.99); }
}

/* Tablet (Touch, breiter als 700px): etwas flacher, damit die h1 sichtbar bleibt */
@media (hover: none) and (min-width: 701px) {
  .hero-orbit { height: clamp(360px, 48vh, 560px); }
}

/* Handy hochkant: quadratisches Feld, Namen stehen in der Infokarte */
@media (max-width: 700px) {
  .hero {
    padding-top: var(--space-sm);
  }
  .hero-orbit {
    --orbit-w: clamp(260px, min(94vw, 44vh), 560px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--space-sm);
  }
  .hero-orbit__center { height: 56%; }
  .hero-orbit__node { width: 44px; }
  .hero-orbit__dot svg { width: 48%; height: 48%; }
  .hero-orbit__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero-orbit__pulse { stroke-width: 4; }
  /* Fallback ohne JS: kompakte Tooltips */
  .hero-orbit__tip {
    --tip-w: 11.5rem;
    top: calc(100% + 8px);
    font-size: 0.75rem;
  }
  .hero-orbit__tip strong { display: block; }
}

@media (max-width: 380px) {
  .hero-orbit__node { width: 40px; }
  .hero-orbit-info__title { font-size: 0.875rem; }
  .hero-orbit-info__desc { font-size: 0.8125rem; }
}

/* Handy quer: niedriger Viewport → Orbit flacher, Namen in der Infokarte */
@media (max-height: 560px) and (orientation: landscape) and (min-width: 701px) {
  .hero-orbit { height: clamp(260px, 72vh, 400px); }
  .hero-orbit__node { width: 40px; }
  .hero-orbit__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit__layer,
  .hero-orbit__ring,
  .hero-orbit__node,
  .hero-orbit__halo,
  .hero-orbit__dot::after,
  .hero-orbit-info__title,
  .hero-orbit-info__desc { animation: none !important; }
  .hero-orbit__ping,
  .hero-orbit__pulse { display: none; }
}