/* NF Mentoring · Cookie-Einwilligung Statistik/Marketing (site/js/consent.js, Vorlage #nf-consent-stat in src/shell/scripts.html)
   Kleine Karte mit weißem Kern (Doppelrand), unten links; mobil als Bottom-Sheet mit Safe-Area. Rev. 6 (V9-A0): Rahmen grau
   (das Markup trägt noch data-theme="olive-light", das jetzt wie grey rendert), Knöpfe neutral in Tinte und gleichwertig:
   „Alle akzeptieren“, „Nur notwendige“ und „Auswahl speichern“ sehen gleich aus (kein Dark Pattern), Oliv nur im Schalter.
   Nicht-modal: die Seite bleibt bedienbar. Präfix .cst-* (unabhängig von der Medien-Einwilligung .consent__* in base.css).
   Geladen mit media="print"; consent.js schaltet auf "all", bevor die Karte erscheint. */

.cst {
  position: fixed; left: 24px; bottom: 24px; z-index: var(--z-consent, 70);
  width: min(432px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 6px;
  border-radius: calc(var(--radius-md, 20px) + 6px);
  background: var(--bg-image, none) var(--bg, #F5F6F7);   /* Rev. 7 (V11-A): leichter grey-Verlauf wie jede Fläche */
  box-shadow: 0 0 0 1px var(--hairline, #E7ECF0), 0 2px 6px rgb(8 8 10 / 0.06), 0 28px 60px -24px rgb(8 8 10 / 0.22);
  color: var(--text, #08080A);
  font-family: var(--font-sans, system-ui, sans-serif);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms var(--ease-out, ease-out), transform 240ms var(--ease-out, ease-out);
}
.cst[hidden] { display: none; }
.cst.is-offen { opacity: 1; transform: none; }
.cst.is-geht { opacity: 0; transform: translateY(8px); transition-duration: 160ms; }

.cst__kern {
  position: relative;
  display: grid; gap: 14px;
  max-height: calc(100dvh - 60px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px 20px;
  border-radius: var(--radius-md, 20px);
  background: var(--surface-card, #FFFFFF);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px var(--surface-card-line, #E7ECF0), 0 1px 2px rgb(8 8 10 / 0.04);
}

.cst__ansicht { display: grid; gap: 14px; }
.cst__ansicht[hidden] { display: none; }
.cst__kopf { display: flex; align-items: center; gap: 10px; padding-right: 36px; }
.cst__marke {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--nf-grey-50, #F5F6F7);
  color: var(--nf-grey-900, #33383F);
}
.cst__marke svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cst__titel { margin: 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.005em; }
.cst__titel:focus { outline: none; }
.cst__titel:focus-visible { outline: 2px solid var(--focus-ring, #AE1D2B); outline-offset: 3px; border-radius: 4px; }

.cst__text, .cst__info { margin: 0; color: var(--text-soft, #444444); font-size: 0.875rem; line-height: 1.55; }
.cst__text a, .cst__info a { color: var(--accent-text, #AE1D2B); text-underline-offset: 2px; }

.cst__aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cst__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 16px;
  border: 1.5px solid var(--nf-ink, #08080A);
  border-radius: var(--radius-pill, 999px);
  background: var(--nf-white-pure, #FFFFFF);
  color: var(--nf-ink, #08080A);
  font: 800 0.875rem/1.2 var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out, ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.cst__btn:active { transform: scale(0.97); }
.cst__btn:focus-visible { outline: 2px solid var(--focus-ring, #AE1D2B); outline-offset: 3px; }
/* Rev. 6: --voll hat keine eigene Optik mehr (gleichwertige Wahl); die Klasse bleibt im Markup (scripts.html, Schnitt E) */
.cst__btn--voll { border-color: var(--nf-ink, #08080A); background: var(--nf-white-pure, #FFFFFF); color: var(--nf-ink, #08080A); }
.cst__btn--text {
  grid-column: 1 / -1;
  min-height: 44px; border-color: transparent; background: transparent;
  color: var(--text-soft, #444444); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgb(8 8 10 / 0.24); text-underline-offset: 3px;
}
/* „Nur notwendige“ in der Einstellungs-Ansicht: Knopf in voller Breite wie „Alle akzeptieren“ statt Textlink (gleichwertig) */
.cst__btn--text[data-cst="ablehnen"] {
  min-height: 46px; border-color: var(--nf-ink, #08080A); background: var(--nf-white-pure, #FFFFFF);
  color: var(--nf-ink, #08080A); font-weight: 800; text-decoration: none;
}

.cst__liste { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hairline, rgb(38 51 42 / 0.08)); }
.cst__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
.cst__zeile + .cst__zeile { border-top: 1px solid var(--hairline, rgb(38 51 42 / 0.08)); }
.cst__name { display: block; margin: 0 0 2px; font-size: 0.9375rem; font-weight: 800; color: var(--text, #08080A); }
.cst__zeile label { cursor: pointer; }
.cst__info { display: block; font-size: 0.8125rem; }

/* Schalter (checkbox role="switch") */
.cst__schalter {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 46px; height: 28px; margin: 0;
  border-radius: 999px;
  background: rgb(8 8 10 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(8 8 10 / 0.06);
  cursor: pointer;
  transition: background-color 180ms ease;
}
.cst__schalter::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--nf-white-pure, #FFFFFF);
  box-shadow: 0 1px 3px rgb(8 8 10 / 0.24);
  transition: transform 200ms var(--ease-out, ease-out);
}
.cst__schalter:checked { background: var(--nf-olive, #5C685E); }
.cst__schalter:checked::after { transform: translateX(18px); }
.cst__schalter:disabled { cursor: default; opacity: 0.55; }
.cst__schalter:focus-visible { outline: 2px solid var(--focus-ring, #AE1D2B); outline-offset: 3px; }

.cst__zu {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-mute, #626A72);
  cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out, ease-out);
}
.cst__zu:active { transform: scale(0.94); }
.cst__zu:focus-visible { outline: 2px solid var(--focus-ring, #AE1D2B); outline-offset: 2px; }
.cst__zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (hover: hover) and (pointer: fine) {
  .cst__btn:hover, .cst__btn--voll:hover, .cst__btn--text[data-cst="ablehnen"]:hover { border-color: var(--nf-ink, #08080A); background: var(--nf-ink, #08080A); color: var(--nf-white-pure, #FFFFFF); }
  .cst__btn--text:not([data-cst="ablehnen"]):hover { border-color: transparent; background: transparent; color: var(--text, #08080A); }
  .cst__zu:hover { background: var(--nf-grey-50, #F5F6F7); color: var(--text, #08080A); }
}

@media (max-width: 599px) {
  .cst {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 100dvh;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    transform: translateY(24px);
  }
  .cst__kern { padding: 20px 18px 18px; border-radius: 20px; max-height: calc(100dvh - 20px); }
}
@media (max-width: 359px) {
  .cst__aktionen { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cst, .cst.is-geht { transform: none; transition: opacity 120ms linear; }
  .cst__btn, .cst__schalter, .cst__schalter::after, .cst__zu { transition: none; }
  .cst__btn:active, .cst__zu:active { transform: none; }
}

@media print { .cst { display: none !important; } }