/* kyb-consent — Einwilligungsbanner und Einstellungsdialog.
   Tokens aus kyb-ds.css, keine eigenen Farben. Der Banner ist unten angedockt
   und verdunkelt die Seite nicht; nur der Dialog ist modal.
   Markup: resources/views/partials/consent.antlers.html */

/* ---- Widerruf-Schalter im Fußbereich -------------------------------------
   Eine Schaltfläche, kein Link: sie führt nirgendwohin, sie öffnet den Dialog.
   Sieht aus wie die Nachbarn in .k-footer__legal. */

.kyb-cc__widerruf {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: .76rem; color: var(--kyb-text-3);
  transition: color var(--t);
}
.kyb-cc__widerruf:hover { color: var(--kyb-neon); }
.kyb-cc__widerruf:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 2px; }

/* ---- Banner ------------------------------------------------------------- */

.kyb-cc__banner {
  position: fixed; z-index: 80;
  left: var(--s3); right: var(--s3); bottom: var(--s3);
  margin-inline: auto; max-width: 720px;
  display: grid; gap: var(--s2);
  padding: var(--s4);
  background: var(--kyb-surface); background-image: var(--g-karte);
  border-top: 3px solid var(--kyb-neon); border-radius: var(--r-3);
  box-shadow: var(--kante-oben), 0 18px 44px rgba(0, 0, 0, .45);
}
.kyb-cc__banner[hidden] { display: none; }

.kyb-cc__titel {
  font-family: var(--font); font-weight: 600; letter-spacing: -.018em;
  font-size: 1.12rem; line-height: 1.25; color: var(--kyb-white);
}

/* --kyb-text-2 (#b9bcca) auf --kyb-surface (#262636): Kontrast 8,5:1, also
   deutlich über den 4,5:1 aus WCAG 1.4.3. */
.kyb-cc__text { font-size: .94rem; line-height: 1.55; color: var(--kyb-text-2); }
.kyb-cc__text a { color: var(--kyb-neon); text-decoration-color: var(--kyb-neon); }

/* ---- Schaltflächen: gleiches Gewicht für Zustimmung und Ablehnung.
   Eine Ablehnung darf nicht schwerer zu finden sein als eine Zustimmung. ---- */

.kyb-cc__knoepfe { display: grid; gap: var(--s2); margin-top: var(--s1); }
@media (min-width: 560px) { .kyb-cc__knoepfe { grid-auto-flow: column; grid-auto-columns: 1fr; } }

.kyb-cc__btn {
  justify-content: center; border-radius: var(--r-btn);
  padding: 12px var(--s3); font-size: .94rem;
  background: transparent; color: var(--kyb-text); border-color: rgba(255, 255, 255, .32);
}
.kyb-cc__btn:hover { border-color: var(--kyb-neon); color: var(--kyb-white); background: rgba(15, 255, 155, .08); }
.kyb-cc__btn:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 2px; }

/* ---- Modaler Dialog ------------------------------------------------------ */

.kyb-cc__schirm {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 10, 14, .72);
}
.kyb-cc__schirm[hidden] { display: none; }

.kyb-cc__dialog {
  position: fixed; z-index: 91;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw - 2 * var(--s3), 640px);
  /* Kopf und Fuß stehen fest, nur die Kategorien scrollen. Sonst rutschen die
     Schaltflächen aus dem Bild, und eine Entscheidung, die man erst suchen
     muss, ist keine gleichwertige Wahl mehr. */
  max-height: min(88vh, 760px); overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(var(--s4), 4vw, var(--s6));
  background: var(--kyb-surface); background-image: var(--g-flaeche);
  border-top: 3px solid var(--kyb-neon); border-radius: var(--r-3);
  box-shadow: var(--kante-oben), 0 24px 60px rgba(0, 0, 0, .55);
}
.kyb-cc__dialog[hidden] { display: none; }
/* Der Dialog selbst nimmt beim Öffnen den Fokus (ARIA-APG). Programmatisch
   gesetzt, deshalb ohne Ring — der Ring gehört an die Bedienelemente. */
.kyb-cc__dialog:focus { outline: none; }

.kyb-cc__kopf { display: grid; gap: var(--s2); flex: none; }
.kyb-cc__h {
  font-family: var(--font); font-weight: 600; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--kyb-white);
}

/* ---- Kategorien ---------------------------------------------------------- */

.kyb-cc__kats { display: block; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.kyb-cc__kat { display: grid; gap: var(--s1); padding-block: var(--s3); border-top: 1px solid var(--kyb-line); }
.kyb-cc__kat:last-child { border-bottom: 1px solid var(--kyb-line); }

.kyb-cc__schalter {
  display: flex; align-items: center; gap: var(--s2);
  cursor: pointer; color: var(--kyb-white); font-weight: 600;
}
.kyb-cc__schalter:has(input:disabled) { cursor: default; }
.kyb-cc__schalter input { width: 18px; height: 18px; flex: none; accent-color: var(--kyb-neon); cursor: inherit; }
.kyb-cc__schalter input:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 3px; }
.kyb-cc__kat-name { font-size: 1rem; }
.kyb-cc__immer {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--kyb-neon); background: rgba(15, 255, 155, .12);
  padding: 3px 8px; border-radius: var(--r-pill);
}
.kyb-cc__kat-text { font-size: .88rem; line-height: 1.5; color: var(--kyb-text-2); padding-left: calc(18px + var(--s2)); }

.kyb-cc__dienste {
  list-style: none; display: grid; gap: var(--s2);
  margin-top: var(--s1); padding-left: calc(18px + var(--s2));
}
.kyb-cc__dienste > li {
  display: grid; gap: 2px;
  padding-left: var(--s2); border-left: 2px solid var(--kyb-line-strong);
  font-size: .84rem;
}
.kyb-cc__d-name { color: var(--kyb-white); font-weight: 600; }
.kyb-cc__d-meta { font-family: var(--mono); font-size: .72rem; color: var(--kyb-text-3); letter-spacing: .02em; }
.kyb-cc__d-zweck { color: var(--kyb-text-2); }
/* --kyb-text-3 (#8a8d9e) auf --kyb-surface: 4,6:1 — knapp über 4,5:1. */
.kyb-cc__leer { color: var(--kyb-text-3); border-left-color: var(--kyb-line); }

/* ---- Fuß des Dialogs ----------------------------------------------------- */

.kyb-cc__fuss { display: grid; gap: var(--s3); flex: none; }
.kyb-cc__fein { font-size: .8rem; line-height: 1.5; color: var(--kyb-text-3); }
.kyb-cc__fein a { color: var(--kyb-neon); text-decoration-color: var(--kyb-neon); }

/* Solange der Dialog offen ist, scrollt die Seite dahinter nicht mit. */
.kyb-cc-offen body { overflow: hidden; }

/* ---- Bewegung ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .kyb-cc__banner { animation: kyb-cc-auf 200ms cubic-bezier(.2, .6, .2, 1) both; }
  .kyb-cc__dialog { animation: kyb-cc-ein 160ms cubic-bezier(.2, .6, .2, 1) both; }
}
@keyframes kyb-cc-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes kyb-cc-ein { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Einordnung im Einstellungsdialog: warum hier Dienste US-amerikanischer
   Anbieter stehen (05.10.2026). Abgesetzt durch eine Linie am Rand, damit er
   als Erläuterung lesbar ist und nicht als weitere Anweisung. */
.kyb-cc__hinweis {
  margin: var(--s3) 0 0;
  padding-left: var(--s2);
  border-left: 2px solid var(--kyb-line-strong);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kyb-text-3);
}