/* kyb-konfigurator — Störer für den Cloud-Konfigurator.
   Tokens aus kyb-ds.css, keine eigenen Farben, ein Akzent.
   Markup: resources/views/partials/konfigurator.antlers.html
   Mechanik: public/assets/js/kyb-konfigurator.js

   Wird nur ausgeliefert, wenn config/kyberio.php → konfigurator.aktiv true ist.

   Haltung: aufmerksamkeitsstark durch Kante und Kontrast, nicht durch Bewegung.
   Keine Pulse, kein Blinken, kein zweiter Akzent. Er steht einmal da und
   bleibt dann still. */

/* ---- Karte ---------------------------------------------------------------
   Sie wandert über helle wie dunkle Abschnitte. Deshalb eine eigene, satte
   Fläche mit Schlagschatten statt Transparenz — sonst liest sich der Text auf
   hellen Bereichen nicht mehr. */

.k-konf {
  position: fixed;
  /* Unter der Kopfzeile (60) und unter dem Einwilligungsbanner (80),
     über der mobilen Leiste .k-sticky (50) und über dem Inhalt. */
  z-index: 55;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: min(360px, calc(100vw - 32px));

  display: grid;
  gap: var(--s2);
  padding: var(--s4);
  padding-right: calc(var(--s4) + 22px);   /* Platz für das Kreuz */

  background: var(--kyb-surface);
  background-image: var(--g-karte);
  border: 1px solid var(--kyb-line);
  border-top: 3px solid var(--kyb-neon);   /* die klare Kante */
  border-radius: var(--r-3);
  box-shadow: var(--kante-oben), 0 18px 44px rgba(0, 0, 0, .5);

  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms cubic-bezier(.2, .6, .2, 1),
              transform 220ms cubic-bezier(.2, .6, .2, 1);
}

/* `hidden` muss gegen `display: grid` gewinnen. */
.k-konf[hidden] { display: none; }

/* Erst das Skript setzt diese Klasse — vorher steht die Karte zwar im
   Dokument, ist aber nicht sichtbar. */
.k-konf--da { opacity: 1; transform: none; }

/* Am Seitenende und am Partnerband tritt die Karte zurück, damit sie
   Telefonnummer, E-Mail, Rechtslinks und den fremden Handlungsaufruf nicht
   verdeckt. Gesetzt wird das vom Skript.

   Bewusst `opacity` und nicht `visibility: hidden` oder `display: none`: Beide
   nehmen der Karte auch die Erreichbarkeit mit der Tastatur. Sie steht am Ende
   des Dokuments — wer sich dorthin tabbt, hat die Fußzeile zwangsläufig im
   Bild, und die Karte wäre für ihn nie erreichbar. So bleibt sie im
   Tabulator-Lauf, und sobald der Fokus sie erreicht, ist sie wieder da. */
.k-konf--zurueck {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.k-konf--zurueck:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---- Inhalt --------------------------------------------------------------
   Kicker wie im Design-System (Mono, Versal, Neon), darunter der eine Satz. */

.k-konf__kicker {
  font-family: var(--mono); font-weight: 500; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .24em;
  color: var(--kyb-neon);
}

/* --kyb-white auf --kyb-surface (#262636): Kontrast 13,6:1. */
.k-konf__text {
  font-family: var(--font); font-weight: 500;
  font-size: 1.04rem; line-height: 1.34; letter-spacing: -.012em;
  color: var(--kyb-white);
  text-wrap: pretty;
}

.k-konf__btn {
  justify-self: start;
  margin-top: var(--s1);
  border-radius: var(--r-btn);
  padding: 12px var(--s4);
  font-size: .94rem;
}

/* Die kurze Beschriftung gilt nur auf schmalen Schirmen. */
.k-konf__kurz { display: none; }

/* ---- Schließen -----------------------------------------------------------
   Deutlich, aber nicht lauter als der Handlungsaufruf. 32 px Zielfläche. */

.k-konf__zu {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  font-size: 1.3rem; line-height: 1;
  color: var(--kyb-text-2);
  background: transparent;
  border: 1px solid var(--kyb-line-strong);
  border-radius: var(--r-pill);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.k-konf__zu:hover { color: var(--kyb-white); border-color: var(--kyb-text-2); background: rgba(255, 255, 255, .06); }
.k-konf__zu:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 2px; }

/* ---- Schmale Schirme -----------------------------------------------------
   Unten rechts ist hier kein Platz für eine Karte, und auf den meisten
   Cloud-Seiten klebt dort schon .k-sticky mit dem ersten Handlungsaufruf.
   Der Störer wird deshalb zur Pille: nur Beschriftung und Kreuz, und er setzt
   sich über die bestehende Leiste, statt sie zu überlagern. Die Leiste bleibt
   die erste Handlung, der Konfigurator die zweite — Reihenfolge erhalten,
   nichts verdeckt. */

@media (max-width: 759px) {

  .k-konf {
    width: auto;
    max-width: calc(100vw - 2 * var(--s3));
    right: var(--s3);
    bottom: var(--s3);

    grid-auto-flow: column;
    align-items: center;
    gap: var(--s1);
    padding: 7px 7px 7px var(--s3);

    border: 1px solid rgba(15, 255, 155, .45);
    border-radius: var(--r-pill);
  }

  /* Kicker und Satz tragen auf der Pille nicht — die Beschriftung sagt es. */
  .k-konf__kicker,
  .k-konf__text { display: none; }

  .k-konf__lang { display: none; }
  .k-konf__kurz { display: inline; }

  .k-konf__btn { margin-top: 0; padding: 10px var(--s3); font-size: .9rem; }

  .k-konf__zu { position: static; width: 34px; height: 34px; border-color: var(--kyb-line); }

  /* .k-sticky ist 84 px hoch (kyberio.css, Zeile 396 ff.) und existiert nur
     unter 760 px. Steht sie auf der Seite, rückt die Pille darüber. */
  body:has(.k-sticky) .k-konf { bottom: calc(84px + var(--s2)); }
}

/* ---- Bewegung ------------------------------------------------------------
   Wer sie abbestellt hat, bekommt keine: dann ist der Störer schlicht da
   oder nicht da. */

@media (prefers-reduced-motion: reduce) {
  .k-konf { transition: none; transform: none; }
  .k-konf--da,
  .k-konf--zurueck { transform: none; }
}