/* =============================================================================
   qapture — Einwilligungsverwaltung, Gestaltung

   Folgt der Brand World: harte Kanten, keine Radien, keine Schatten, keine
   Verläufe. Archivo für Aussagen, Space Grotesk für Auszeichnungen. Mint
   trägt die Handlung, schwarz die Schrift.

   Die Werte stehen hier eigenständig und nicht als Verweis auf die Tokens der
   Seite. So funktioniert die Datei auch dann noch, wenn das übrige CSS einmal
   neu gebaut wird.
   ========================================================================== */

.qptr-c-banner,
.qptr-c-overlay,
.qptr-c-form {
  --qc-mint: #44feb2;
  --qc-schwarz: #0b1717;
  --qc-weiss: #fff;
  --qc-line: #0b17172e;
  --qc-line-soft: #0b171714;
  --qc-dim: rgba(11, 23, 23, 0.66);
  --qc-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --qc-font-2: 'Space Grotesk', 'Archivo', sans-serif;
  --qc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.qptr-c-banner *,
.qptr-c-overlay *,
.qptr-c-form * {
  box-sizing: border-box;
}

/* --- Banner ---------------------------------------------------------------
   Unten über die volle Breite, abgesetzt durch eine kräftige Oberkante statt
   durch einen Schatten. */
.qptr-c-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9000;
  background: var(--qc-weiss);
  color: var(--qc-schwarz);
  border-top: 2px solid var(--qc-schwarz);
  font-family: var(--qc-font);
  transform: translateY(100%);
  transition: transform 0.62s var(--qc-ease);
}
.qptr-c-banner.is-in {
  transform: none;
}

.qptr-c-banner__inner {
  max-width: 112rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 6.1vw, 7.3125rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.qptr-c-banner__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.qptr-c-banner__text {
  margin: 0;
  max-width: 62ch;
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qc-dim);
}

/* Schmal: beide Schaltflächen über die volle Breite, untereinander. Gleich
   groß und gleich leicht zu treffen — genau darauf kommt es an. */
.qptr-c-banner__actions {
  display: grid;
  gap: 0.6rem;
}

/* Die Einstellungen sind ein Textlink, keine dritte Schaltfläche — sonst
   konkurrieren drei gleich laute Elemente um dieselbe Entscheidung. */
.qptr-c-banner__more {
  justify-self: start;
  background: none;
  border: 0;
  padding: 0 0 0.2rem;
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--qc-dim);
  cursor: pointer;
  border-bottom: 1px solid var(--qc-line);
}
.qptr-c-banner__more:hover {
  color: var(--qc-schwarz);
  border-bottom-color: var(--qc-schwarz);
}

@media (min-width: 62rem) {
  .qptr-c-banner__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .qptr-c-banner__actions {
    grid-auto-flow: column;
  }
  .qptr-c-banner__more {
    grid-column: 1;
    grid-row: 2;
    margin-top: -0.5rem;
  }
}

/* --- Schaltflächen --------------------------------------------------------
   Zustimmen und Ablehnen haben dieselbe Größe, dieselbe Schrift und stehen
   nebeneinander. Nur die Fläche unterscheidet sie. Das ist Vorschrift, nicht
   Geschmack: eine Ablehnung darf nicht schwerer zu treffen sein. */
.qptr-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--qc-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--qc-schwarz);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 0.16s var(--qc-ease),
    color 0.16s var(--qc-ease);
}
.qptr-c-btn--primary {
  background: var(--qc-mint);
  color: var(--qc-schwarz);
  border-color: var(--qc-mint);
}
.qptr-c-btn--primary:hover {
  background: var(--qc-schwarz);
  color: var(--qc-mint);
  border-color: var(--qc-schwarz);
}
.qptr-c-btn--secondary {
  background: var(--qc-weiss);
  color: var(--qc-schwarz);
}
.qptr-c-btn--secondary:hover {
  background: var(--qc-schwarz);
  color: var(--qc-weiss);
}

.qptr-c-banner :focus-visible,
.qptr-c-overlay :focus-visible,
.qptr-c-form :focus-visible {
  outline: 2px solid var(--qc-schwarz);
  outline-offset: 3px;
}

.qptr-c-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* --- Dialog ---------------------------------------------------------------- */
.qptr-c-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(11, 23, 23, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  font-family: var(--qc-font);
  color: var(--qc-schwarz);
}

.qptr-c-dialog {
  width: 100%;
  max-width: 46rem;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--qc-weiss);
  border: 2px solid var(--qc-schwarz);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.qptr-c-dialog:focus {
  outline: none;
}

@media (min-width: 48rem) {
  .qptr-c-overlay {
    align-items: center;
    padding: 2rem;
  }
}

.qptr-c-dialog__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.qptr-c-dialog__title {
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.qptr-c-dialog__close {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.5rem -0.5rem 0 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--qc-schwarz);
  cursor: pointer;
}

.qptr-c-dialog__intro {
  margin: 0.85rem 0 0;
  max-width: 54ch;
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qc-dim);
}

/* --- Kategorien ------------------------------------------------------------ */
.qptr-c-cats {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--qc-line);
}
.qptr-c-cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--qc-line-soft);
}
.qptr-c-cat__name {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.qptr-c-cat__text {
  margin: 0;
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--qc-dim);
  max-width: 52ch;
}
.qptr-c-cat__detail {
  margin: 0.6rem 0 0;
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--qc-dim);
}
.qptr-c-cat__locked {
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--qc-dim);
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .qptr-c-cat {
    column-gap: 2rem;
  }
}

/* --- Schalter -------------------------------------------------------------
   Ein echtes Kontrollkästchen, nur anders gezeichnet. Damit funktionieren
   Tastatur, Screenreader und Formularlogik ohne Zutun. Eckig, weil die Marke
   keine Radien kennt. */
.qptr-c-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.qptr-c-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.qptr-c-switch__rail {
  position: relative;
  display: block;
  width: 3.25rem;
  height: 1.75rem;
  flex: none;
  background: var(--qc-weiss);
  border: 1px solid var(--qc-schwarz);
  transition: background-color 0.16s var(--qc-ease);
}
.qptr-c-switch__rail::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.75rem - 6px);
  height: calc(1.75rem - 6px);
  background: var(--qc-schwarz);
  transition: transform 0.24s var(--qc-ease);
}
.qptr-c-switch input:checked + .qptr-c-switch__rail {
  background: var(--qc-mint);
}
.qptr-c-switch input:checked + .qptr-c-switch__rail::after {
  transform: translateX(calc(3.25rem - 1.75rem));
}
.qptr-c-switch input:focus-visible + .qptr-c-switch__rail {
  outline: 2px solid var(--qc-schwarz);
  outline-offset: 3px;
}
/* Der Name steht schon als Überschrift daneben; für die Maus wäre er doppelt,
   für den Screenreader ist er die Beschriftung des Schalters. */
.qptr-c-switch__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Fuß des Dialogs ------------------------------------------------------- */
.qptr-c-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.qptr-c-dialog__foot .qptr-c-btn {
  min-width: 0;
  flex: 1 1 12rem;
}
.qptr-c-dialog__privacy {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--qc-dim);
}

/* --- Platzhalter an der Stelle eines Formulars ------------------------------
   Kein leeres Loch und kein blasser Kasten: der Hinweis sieht aus wie ein
   Teil der Seite und sagt in einem Satz, was ein Klick auslöst. */
/* Der Platzhalter nimmt die Farben des Abschnitts, in dem er steht. Die
   Seite setzt --fg und --line auf jedem Abschnitt neu; die nächstgelegene
   Angabe gewinnt. Eigene Werte greifen nur, falls es sie einmal nicht gibt.
   Ein fester Farbwert wäre hier falsch: dieselbe Seite trägt am <html> einen
   anderen Untergrund als am Abschnitt mit dem Formular. */
.qptr-c-form {
  border: 1px solid var(--line, var(--qc-line));
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: transparent;
  color: var(--fg, var(--qc-schwarz));
  font-family: var(--qc-font);
}
.qptr-c-form__title {
  margin: 0 0 0.6rem;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.qptr-c-form__text {
  margin: 0;
  max-width: 46ch;
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: inherit;
  opacity: 0.74;
}
.qptr-c-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}
.qptr-c-form__direct {
  font-family: var(--qc-font-2);
  font-weight: 300;
  font-size: 0.9375rem;
  color: inherit;
  opacity: 0.74;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.qptr-c-form__direct:hover {
  opacity: 1;
}
.qptr-c-form :focus-visible {
  outline-color: var(--fg, var(--qc-schwarz));
}

/* --- Der Auslöser im Footer ------------------------------------------------ */
.qptr-c-trigger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .qptr-c-banner,
  .qptr-c-switch__rail,
  .qptr-c-switch__rail::after,
  .qptr-c-btn {
    transition: none;
  }
  .qptr-c-banner {
    transform: none;
  }
}