/* ============================================================
   Effekte (js/effekte.js), Stand 23.10.2026, Entwurf
   Motiv: das Netzwerk-N und der Mint-Punkt. Jeder Effekt setzt beim
   Start die Klasse fx-an-<id> an <html> (bewusst nicht fx-<id>: so heissen
   die Bauteile der Effekte, z. B. .fx-fortschritt) und nimmt sie beim Abschalten
   wieder weg; ohne Klasse greift hier nichts. Auf dem Entwurf lassen
   sich alle Effekte im Effekt-Pult (unten links) einzeln schalten.
   Nutzt nur Tokens aus tokens.css.
   ============================================================ */

/* --- Effekt-Pult ------------------------------------------------ */
.fx-pult-knopf {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1001;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-navy-700);
  border-radius: 50%;
  background: var(--color-navy-900);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-navy-900) 30%, transparent);
  transition: background-color var(--duration-normal) var(--ease-out);
}
.fx-pult-knopf:hover { background: var(--color-navy-700); }
.fx-pult-knopf:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.fx-pult-knopf .fx-zahl {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-mint-500);
  color: var(--color-navy-950);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fx-pult {
  position: fixed;
  left: 16px;
  bottom: 76px;
  z-index: 1001;
  width: min(380px, calc(100vw - 32px));
  max-height: min(72vh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--color-navy-700);
  border-radius: var(--radius-lg);
  background: var(--color-navy-900);
  color: var(--color-navy-200);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--color-navy-900) 35%, transparent);
  scrollbar-color: var(--color-navy-600) transparent;
}
.fx-pult[hidden] { display: none; }
.fx-pult h2 { font-family: var(--font-heading); font-size: var(--font-size-lg); color: var(--color-white); margin: 0 0 var(--space-1); }
.fx-pult > p { margin: 0 0 var(--space-4); }
.fx-pult ul { list-style: none; margin: 0; padding: 0; }
.fx-schalter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-navy-700);
  cursor: pointer;
}
.fx-schalter strong { color: var(--color-white); font-weight: var(--font-weight-medium); }
.fx-schalter small { grid-column: 1; font-size: var(--font-size-xs); line-height: 1.5; }
.fx-schalter input {
  grid-row: 1 / span 2;
  grid-column: 2;
  appearance: none;
  position: relative;
  width: 40px;
  height: 22px;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--color-navy-700);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out);
}
.fx-schalter input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-navy-200);
  transition: translate var(--duration-slow) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}
.fx-schalter input:checked { background: var(--color-mint-500); }
.fx-schalter input:checked::before { translate: 18px 0; background: var(--color-navy-950); }
.fx-schalter input:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.fx-schalter input:disabled { opacity: 0.4; cursor: not-allowed; }
.fx-pult-aktionen { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.fx-pult-aktionen button {
  flex: 1;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-navy-600);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-out);
}
.fx-pult-aktionen button:hover { border-color: var(--color-mint-500); }
.fx-pult-aktionen button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* --- Netzwerk im Kopfbereich ------------------------------------- */
html.fx-an-netzfeld .hero::before { opacity: 0; }
.fx-netz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Hinter dem Text bleibt das Netz zart, rechts beim Logo wird es dicht */
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 38%, #000 72%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 38%, #000 72%);
}

/* --- Ueberschrift baut sich auf --------------------------------- */
.fx-hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Platz fuer Unterlaengen, ohne die Zeile zu verschieben */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.fx-hw-in {
  display: inline-block;
  animation: fx-hw-auf 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes fx-hw-auf { from { translate: 0 108%; } to { translate: 0 0; } }
html.fx-an-wortweise .hero h1 .accent {
  background: linear-gradient(var(--color-mint-100), var(--color-mint-100)) no-repeat 0 88% / 0% 38%;
  animation: fx-marker 0.7s var(--ease-out) 0.9s forwards;
}
@keyframes fx-marker { to { background-size: 100% 38%; } }

/* --- Karten kippen: heller Fleck folgt der Maus im Bildfeld --- */
html.fx-an-kippen .leistung.fx-kippt .leistung-illu {
  background-image: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%),
                    color-mix(in srgb, var(--color-mint-100) 85%, transparent), transparent 70%);
}

/* --- Geraete folgen der Maus (Referenz-Vitrine) ----------------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx-an-vitrine.js-refs .ref-browser {
    transform: rotateX(calc(5deg - var(--dreh, 0.5) * 4deg - var(--zy, 0) * 5deg))
               rotateY(calc(9deg - var(--dreh, 0.5) * 12deg + var(--zx, 0) * 9deg));
    transition: opacity 0.7s var(--ease-out), translate 1s var(--ease-out), transform 0.6s var(--ease-out) 0s;
  }
  html.fx-an-vitrine.js-refs .ref-telefon {
    transform: translateZ(4cqw)
               rotateX(calc(var(--zy, 0) * -4deg))
               rotateY(calc(-16deg + var(--dreh, 0.5) * 10deg + var(--zx, 0) * 7deg))
               rotateZ(-1.5deg);
    transition: opacity 0.7s var(--ease-out) 0.35s, translate 1s var(--ease-out) 0.35s, transform 0.6s var(--ease-out) 0s;
  }
}

/* --- Fortschritt unter der Navigation --------------------------- */
.fx-fortschritt {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--navbar-height);
  z-index: 49;
  height: 2px;
  background: var(--color-mint-500);
  transform-origin: left;
  scale: 0 1;
  pointer-events: none;
}

/* --- Ueberschriften setzen sich zusammen ------------------------ */
.fx-sw { white-space: nowrap; }
.fx-sz { display: inline-block; animation: fx-sz 0.55s var(--ease-out) both; animation-delay: var(--v); }
@keyframes fx-sz {
  from { opacity: 0; color: var(--color-mint-500); filter: blur(6px); translate: 0 0.2em; }
  60% { opacity: 1; color: var(--color-mint-700); filter: blur(0); translate: 0 0; }
  to { opacity: 1; color: inherit; filter: blur(0); translate: 0 0; }
}

/* --- Kennzahlen zaehlen (feste Ziffernbreite gegen Zappeln) ----- */
html.fx-an-zaehler .ref-punkte strong { font-variant-numeric: tabular-nums; }

/* --- Signal am Kontaktknopf -------------------------------------- */
.fx-signal-huelle { position: relative; display: inline-flex; }
.fx-signal-huelle > i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-mint-500);
  border-radius: var(--button-primary-radius);
  opacity: 0;
  pointer-events: none;
}
.fx-signal-huelle.ist-an > i { animation: fx-signal 2.6s var(--ease-out) infinite; }
.fx-signal-huelle.ist-an > i + i { animation-delay: 1.3s; }
@keyframes fx-signal {
  0% { opacity: 0.75; scale: 1; }
  100% { opacity: 0; scale: 1.12 1.5; }
}

/* --- Klick-Funken -------------------------------------------------- */
.fx-funke { position: fixed; z-index: 998; overflow: visible; pointer-events: none; }

/* --- Auf den Punkt (verstecktes Spiel) --------------------------- */
.fx-ei-punkt {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 997;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--color-mint-500);
  pointer-events: none;
}
.fx-ei-punkt span {
  position: absolute;
  left: 50%;
  top: 46px;
  translate: -50% 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  white-space: nowrap;
}
html.fx-an-punktei .hero-mark .nd-center { cursor: pointer; }

/* --- Markierung, Schreibmarke und Scrollleiste im CD ------------- */
html.fx-an-markierung ::selection { background: var(--color-mint-200); color: var(--color-navy-950); }
html.fx-an-markierung { caret-color: var(--color-mint-600); scrollbar-color: var(--color-navy-300) var(--color-neutral-100); }

/* --- Szenen auf den Leistungsseiten (Effekt szenen) ------------- */
/* Der Ablauf kommt aus effekte.js (Web Animations). Hier nur der
   blinkende Cursor und das Anhalten der CSS-Animationen (auch des
   Mint-Pulses), solange die Szene nicht im Bild ist. */
html.fx-an-szenen [data-szene] .sz-blinken { animation: sz-blinken 1.1s steps(1, end) infinite; }
@keyframes sz-blinken { 50% { opacity: 0; } }
html.fx-an-szenen [data-szene].sz-steht * { animation-play-state: paused; }