/* kyb-sicherheitshinweis — Band am unteren Rand jeder Seite.
   Tokens aus kyb-ds.css, keine eigenen Farben.
   Markup: resources/views/partials/sicherheitshinweis.antlers.html
   Mechanik: public/assets/js/kyb-sicherheitshinweis.js

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

   Haltung: Aufmerksamkeit durch Fläche und Kante, nicht durch Farbe und nicht
   durch Bewegung. Kein Rot — das Design-System hält kyb-danger für Fehler im
   Formular frei, und ein dauerhaft rotes Band über jeder Seite nutzt sich in
   einer Stunde ab. Die Neon-Oberkante und der Kicker reichen: Sie sind im
   System die Zeichen für „das hier ist wichtig“. */

.k-shw {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Über dem Konfigurator-Störer (55) und der mobilen Leiste (50),
     unter der Kopfzeile (60) und unter dem Einwilligungsbanner (80) — das
     muss oben bleiben, solange niemand entschieden hat. */
  z-index: 58;

  display: flex;
  align-items: center;
  gap: var(--s3);

  background: var(--kyb-surface);
  border-top: 3px solid var(--kyb-neon);
  padding: var(--s3) clamp(16px, 4vw, 32px);

  /* Das Band wandert nicht, es liegt über allem — deshalb ein Schatten nach
     oben, damit die Kante auf jedem Hintergrund als Kante liest. */
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);

  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--t), transform var(--t);
}

.k-shw--da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .k-shw { transition: none; }
}

.k-shw__innen {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  max-width: var(--container);
  margin-inline: auto;
}

.k-shw__kicker {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--kyb-neon);
  flex: none;
}

.k-shw__text {
  color: var(--kyb-text);
  font-size: .95rem;
  line-height: 1.5;
}

.k-shw__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

/* Kein kyb-btn--primary: Der Neon-Verlauf ist für den einen wichtigsten Knopf
   je Bildschirm reserviert, und das ist auf einer Produktseite nicht dieses
   Band. Kontur statt Fläche. */
.k-shw__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 10px var(--s3);
  border: 1px solid var(--kyb-neon);
  border-radius: var(--r-btn);
  color: var(--kyb-neon);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.k-shw__btn:hover { background: var(--kyb-neon); color: var(--kyb-stage); }
.k-shw__btn .kyb-btn__arrow { transition: transform var(--t); }
.k-shw__btn:hover .kyb-btn__arrow { transform: translateX(3px); }

.k-shw__link {
  color: var(--kyb-text-2);
  font-size: .9rem;
  text-decoration: underline;
  text-decoration-color: var(--kyb-line-strong);
  text-underline-offset: 4px;
  white-space: nowrap;
  transition: color var(--t), text-decoration-color var(--t);
}
.k-shw__link:hover { color: var(--kyb-text); text-decoration-color: var(--kyb-neon); }

.k-shw__zu {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--kyb-line-strong);
  border-radius: var(--r-1);
  color: var(--kyb-text-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.k-shw__zu:hover { color: var(--kyb-white); border-color: var(--kyb-line); }

/* Der Konfigurator-Störer klebt unten rechts und läge sonst auf dem Band.
   Er weicht nach oben aus — dieselbe Mechanik, die er für die mobile Leiste
   schon kennt (kyb-konfigurator.css, .k-sticky). */
body:has(.k-shw:not([hidden])) .k-konf { bottom: calc(96px + var(--s2)); }

@media (max-width: 860px) {
  .k-shw { align-items: flex-start; padding-block: var(--s2); }
  .k-shw__innen { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .k-shw__text { font-size: .88rem; }
  .k-shw__links { gap: var(--s2) var(--s3); margin-top: 2px; }
  body:has(.k-shw:not([hidden])) .k-konf { bottom: calc(172px + var(--s2)); }
}