/* =========================================================================
   QUADRONET Layout - Cookie-Einwilligung (qn_cookie_consent in QUADRONET-Optik)
   -------------------------------------------------------------------------
   Dirk, 23.10.2026. Markup und JavaScript bleiben die der Extension: Sie
   laeuft auch bei Kunden und bleibt neutral. Hier steht nur das Aussehen.
   Rueckweg: Zeile lqCookie in setup.typoscript entfernen - dann gilt
   wieder das Standard-Design der Extension.

   BEWUSST OHNE @layer: qn-cookie-consent.css ist ungeschichtet und wuerde
   jede Regel in qn.theme schlagen, egal wie spezifisch. Deshalb hier
   ebenfalls ungeschichtet und alles unter den IDs #qn-cookie-consent und
   #qn-cookie-consent-trigger. Damit gewinnt diese Datei UNABHAENGIG davon,
   in welcher Reihenfolge die Sets ihre Stylesheets einhaengen.

   Variablen: Die Extension setzt --qn-cc-* auf :root. Hier stehen sie am
   Element selbst - ein eigener Wert schlaegt den vererbten, ebenfalls
   unabhaengig von der Ladereihenfolge.

   FALLSTRICK display: Wer hier einem Bereich display:grid/flex gibt,
   ueberstimmt mit der ID auch die [hidden]-Regel der Extension. Jede
   solche Stelle braucht ihr eigenes [hidden] { display:none } darunter.

   FALLSTRICK Kontrastmodi: Die Extension faerbt bei prefers-contrast:more
   auf Weiss/Schwarz um (Klassen-Spezifitaet). Diese Datei ueberstimmt das
   - deshalb muss hier JEDE Schriftfarbe ausdruecklich gesetzt sein, sonst
   steht bei hohem Kontrast schwarze Schrift auf dunklem Grund.

   Knoepfe: KEINE Garagentore. Das Garagentor ist Opt-in und ausdruecklich
   nicht fuer Cookie-/Schliessen-Knoepfe gedacht; ausserdem schneidet
   overflow-y:auto am Dialog das aufklappende Tor ab.

   Rechtlich: "Nur Notwendige" steht gleich gross und gleich gewichtet
   neben "Alle akzeptieren" (gleiche Form, Groesse und Schrift - nur
   Fuellung gegen Rahmen). Nicht kleiner, blasser oder als Textlink
   gestalten: Ablehnen muss so leicht sein wie Zustimmen.
   ========================================================================= */

#qn-cookie-consent,
#qn-cookie-consent-trigger {
  /* Variablen der Extension auf die Marke */
  --qn-cc-primary:         var(--orange, #FF8800);
  --qn-cc-primary-hover:   var(--orange-hell, #FFA94D);
  --qn-cc-primary-rgb:     255, 136, 0;
  --qn-cc-secondary:       var(--orange, #FF8800);
  --qn-cc-secondary-hover: var(--orange-hell, #FFA94D);
  --qn-cc-accent:          var(--orange-hell, #FFA94D);
  --qn-cc-bg:              #1B2B38;
  --qn-cc-bg-secondary:    rgba(234, 244, 255, .04);
  --qn-cc-text:            var(--hell, #EAF4FF);          /* 10,9:1 am hellsten Punkt */
  --qn-cc-text-muted:      var(--hell-2, #9FC0D8);        /*  6,3:1 am hellsten Punkt */
  --qn-cc-border:          var(--qn-linie-fein, rgba(190, 215, 235, .18));
  --qn-cc-border-radius:   3px;
  --qn-cc-shadow:          var(--sch-tief, 0 26px 60px -26px rgba(0, 0, 0, .78));
  --qn-cc-backdrop:        rgba(10, 16, 21, .72);
  --qn-cc-max-width:       46rem;

  /* eigene */
  --lq-cc-auf-orange: var(--auf-orange, #141A1F);          /* 7,3:1 auf #FF8800 */
  --lq-cc-akzent:     var(--orange-hell, #FFA94D);          /* 6,4:1 am hellsten Punkt */
  --lq-cc-linie:      var(--qn-linie, rgba(190, 215, 235, .28));
  --lq-cc-fokus:      var(--qn-fokus, #FFD9A8);
  --lq-cc-schrift:    var(--qn-schriftfamilie, "IBM Plex Sans", system-ui, sans-serif);
  --lq-cc-titel:      var(--qn-schriftfamilie-ueberschrift, "Bebas Neue", sans-serif);
  --lq-cc-rand:       2rem;
}


/* ===================================================================
   1. Buehne: Abdunkeln, Dialog
   =================================================================== */
#qn-cookie-consent {
  font-family: var(--lq-cc-schrift);
  color: var(--qn-cc-text);
}

#qn-cookie-consent .qn-cc__backdrop {
  -webkit-backdrop-filter: blur(3px) saturate(.85);
          backdrop-filter: blur(3px) saturate(.85);
}

/* Der Dialog im Stil der Zielkarte (Anfahrt): Verlauf im Markendunkel,
   orange Kante links, Passermarke oben rechts. */
#qn-cookie-consent .qn-cc__container {
  position: relative;
  max-height: 80vh;
  max-height: 80dvh;              /* Telefon: Adressleiste frisst sonst die Knoepfe */
  overscroll-behavior: contain;
  border: 1px solid var(--qn-cc-border);
  border-left: 3px solid var(--qn-cc-primary);
  background: linear-gradient(160deg, #22384A 0%, #1B2B38 60%, #17242F 100%);
  box-shadow: var(--qn-cc-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--lq-cc-linie) transparent;
}
#qn-cookie-consent .qn-cc__container::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid rgba(255, 169, 77, .7);
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 169, 77, .7), rgba(255, 169, 77, .7)) center / 1px 160% no-repeat,
    linear-gradient(rgba(255, 169, 77, .7), rgba(255, 169, 77, .7)) center / 160% 1px no-repeat;
}

/* Auftritt: ruhig von unten, ohne den ganzen Weg aus dem Bild */
@keyframes lq-cc-auf {
  from { transform: translateY(1.5rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes lq-cc-ab {
  from { transform: translateY(-1.5rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#qn-cookie-consent.qn-cc--bottom .qn-cc__container { animation: lq-cc-auf .5s cubic-bezier(.22, .75, .3, 1); }
#qn-cookie-consent.qn-cc--top .qn-cc__container    { animation: lq-cc-ab  .5s cubic-bezier(.22, .75, .3, 1); }


/* ===================================================================
   2. Kopf: Kicker mit Raute, Titel in Bebas
   =================================================================== */
#qn-cookie-consent .qn-cc__header {
  position: relative;
  padding: 1.6rem 3.6rem .1rem var(--lq-cc-rand);
  border-bottom: 0;
  border-radius: 0;
  background: none;
}
/* Kicker. Alternativtext leer: Vorlesesoftware liest nur den Titel. */
#qn-cookie-consent .qn-cc__header::before {
  content: "Datenschutz";          /* Rueckfall fuer Browser ohne / "" */
  content: "Datenschutz" / "";
  display: block;
  margin: 0 0 .55rem;
  padding-left: 1.15em;
  font: 500 .72rem/1.5 var(--lq-cc-schrift);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--qn-cc-text-muted);
}
/* Raute in der 8-Grad-Achse */
#qn-cookie-consent .qn-cc__header::after {
  content: "";
  position: absolute;
  top: calc(1.6rem + .37em);
  left: var(--lq-cc-rand);
  width: .55em;
  height: .55em;
  font-size: .72rem;
  background: var(--qn-cc-primary);
  transform: rotate(8deg);
}

#qn-cookie-consent .qn-cc__title {
  margin: 0;
  font: 400 clamp(1.75rem, 1.4rem + 1.4vw, 2.3rem)/.95 var(--lq-cc-titel);
  font-synthesis: none;            /* Bebas hat nur einen Schnitt */
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--qn-cc-text);
}


/* ===================================================================
   3. Inhalt
   =================================================================== */
#qn-cookie-consent .qn-cc__content {
  padding: .9rem var(--lq-cc-rand) 1.1rem;
}

#qn-cookie-consent .qn-cc__description {
  max-width: 62ch;
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  hyphens: auto;
  color: var(--qn-cc-text);
}


/* ===================================================================
   4. Kategorien
   =================================================================== */
#qn-cookie-consent .qn-cc__categories {
  display: grid;
  gap: .6rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--qn-cc-border);
}
#qn-cookie-consent .qn-cc__categories[hidden] { display: none; }

#qn-cookie-consent .qn-cc__category {
  margin: 0;
  border: 1px solid var(--qn-cc-border);
  border-radius: var(--qn-cc-border-radius);
  background: rgba(10, 16, 21, .28);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Zugestimmte Kategorie: Kante nimmt das Orange auf */
#qn-cookie-consent .qn-cc__category:has(.qn-cc__checkbox:checked:not(:disabled)) {
  border-color: rgba(255, 136, 0, .5);
}
/* Aus dem Inhalt heraus angesprungen (showSettings): Rahmen + Glut,
   nicht nur Farbe */
#qn-cookie-consent .qn-cc__category--highlight {
  border-color: var(--qn-cc-primary);
  box-shadow: 0 0 0 3px rgba(255, 136, 0, .22), 0 0 24px -6px rgba(255, 136, 0, .55);
}

#qn-cookie-consent .qn-cc__category-header {
  gap: .75rem;
  padding: .75rem .75rem .75rem 1rem;
  background: transparent;
}
#qn-cookie-consent .qn-cc__category-label { gap: .75rem; min-height: 2.25rem; }

#qn-cookie-consent .qn-cc__category-name,
#qn-cookie-consent .qn-cc__category--highlight .qn-cc__category-name {
  font-size: .95rem;
  font-weight: 600;                /* 700 ist nicht geladen - wuerde kuenstlich gefettet */
  color: var(--qn-cc-text);
}

/* Kaestchen als Nische - wie im Formular (65-formular.css, .qf-wahl) */
#qn-cookie-consent .qn-cc__checkbox-visual {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid rgb(52 82 103 / .8);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(20 26 31 / .95), rgb(20 26 31 / .75));
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .55);
  transition: border-color .2s ease;
}
#qn-cookie-consent .qn-cc__checkbox-visual::after {
  width: .72rem;
  height: .72rem;
  margin: 0;
  border: 0;
  background: var(--qn-cc-primary);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 39% 71%);
  transform: scale(0);
  transition: transform .16s cubic-bezier(.34, 1.5, .5, 1);
}
#qn-cookie-consent .qn-cc__category-label:hover .qn-cc__checkbox:not(:disabled) + .qn-cc__checkbox-visual {
  border-color: rgb(52 82 103);
}
#qn-cookie-consent .qn-cc__checkbox:checked + .qn-cc__checkbox-visual {
  border-color: var(--qn-cc-primary);
  background: linear-gradient(180deg, rgb(20 26 31 / .95), rgb(20 26 31 / .75));
}
#qn-cookie-consent .qn-cc__checkbox:checked + .qn-cc__checkbox-visual::after { transform: scale(1); }
#qn-cookie-consent .qn-cc__checkbox:focus-visible + .qn-cc__checkbox-visual {
  outline: 3px solid var(--lq-cc-fokus);
  outline-offset: 3px;
}
#qn-cookie-consent .qn-cc__checkbox:disabled + .qn-cc__checkbox-visual { opacity: .6; }

/* "Immer aktiv" als Pruefplakette wie im Fuss */
#qn-cookie-consent .qn-cc__category-badge {
  padding: .3rem .6rem;
  border: 1px dashed rgba(255, 169, 77, .75);
  border-radius: 3px;
  background: transparent;
  font: 600 .62rem/1 var(--lq-cc-schrift);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lq-cc-akzent);
}

/* Auf-/Zuklapper */
#qn-cookie-consent .qn-cc__category-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--lq-cc-linie);
  border-radius: 3px;
  background: transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
#qn-cookie-consent .qn-cc__category-toggle:hover {
  border-color: var(--qn-cc-primary);
  background: rgba(255, 136, 0, .08);
}
#qn-cookie-consent .qn-cc__category-toggle:focus-visible {
  outline: 3px solid var(--lq-cc-fokus);
  outline-offset: 2px;
}
#qn-cookie-consent .qn-cc__toggle-icon::before,
#qn-cookie-consent .qn-cc__toggle-icon::after { background: var(--lq-cc-akzent); }

#qn-cookie-consent .qn-cc__category-details {
  padding: .8rem 1rem .95rem 3.25rem;     /* buendig mit dem Kategorienamen */
  border-top: 1px solid var(--qn-cc-border);
  background: transparent;
}
#qn-cookie-consent .qn-cc__category-details p {
  max-width: 62ch;
  font-size: .86rem;
  line-height: 1.55;
  hyphens: auto;
  color: var(--qn-cc-text-muted);
}


/* ===================================================================
   5. Fuss: Knoepfe und Rechtliches
   =================================================================== */
#qn-cookie-consent .qn-cc__footer {
  padding: .1rem var(--lq-cc-rand) 1.4rem;
}

#qn-cookie-consent .qn-cc__buttons {
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.2rem;
}

#qn-cookie-consent .qn-cc__btn {
  min-height: 3rem;
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 3px;
  font: 600 .8rem/1.2 var(--lq-cc-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#qn-cookie-consent .qn-cc__btn:focus-visible {
  outline: 3px solid var(--lq-cc-fokus);
  outline-offset: 3px;
}

/* Zustimmen und Speichern: Markenorange, dunkle Schrift */
#qn-cookie-consent .qn-cc__btn--accept,
#qn-cookie-consent .qn-cc__btn--save {
  border-color: var(--qn-cc-primary);
  background: var(--qn-cc-primary);
  color: var(--lq-cc-auf-orange);
}
#qn-cookie-consent .qn-cc__btn--accept:hover,
#qn-cookie-consent .qn-cc__btn--save:hover {
  border-color: var(--qn-cc-primary-hover);
  background: var(--qn-cc-primary-hover);
  color: var(--lq-cc-auf-orange);
  box-shadow: 0 10px 26px -12px rgba(255, 136, 0, .7);
}

/* Ablehnen: gleiche Form und Groesse, nur Rahmen statt Fuellung */
#qn-cookie-consent .qn-cc__btn--reject {
  border-color: var(--qn-cc-text);
  background: transparent;
  color: var(--qn-cc-text);
}
#qn-cookie-consent .qn-cc__btn--reject:hover {
  border-color: #fff;
  background: rgba(234, 244, 255, .1);
  color: #fff;
}

/* Einstellungen: Textlink links, die zwei Entscheidungen rechts */
#qn-cookie-consent .qn-cc__btn--settings {
  min-height: 2.75rem;
  margin-right: auto;
  padding: .5rem 0;
  border-color: transparent;
  background: transparent;
  color: var(--lq-cc-akzent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}
#qn-cookie-consent .qn-cc__btn--settings:hover {
  color: var(--qn-cc-primary);
  text-decoration-thickness: 2px;
}

#qn-cookie-consent .qn-cc__links {
  gap: .4rem 1.4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--qn-cc-border);
}
#qn-cookie-consent .qn-cc__link {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--qn-cc-text-muted);
  text-decoration-color: rgba(159, 192, 216, .45);
  text-underline-offset: .3em;
}
#qn-cookie-consent .qn-cc__link:hover {
  color: var(--lq-cc-akzent);
  text-decoration-color: currentColor;
}
#qn-cookie-consent .qn-cc__link:focus-visible {
  outline: 3px solid var(--lq-cc-fokus);
  outline-offset: 2px;
}


/* ===================================================================
   6. Wiederaufruf-Knopf unten links
   Kachel im Markendunkel; beim Ueberfahren Orange und 8 Grad gekippt.
   =================================================================== */
#qn-cookie-consent-trigger {
  /* Grid zentriert den Keks: Der Reset von qn_base setzt svg auf
     display:block - ohne das klebt er links im Knopf. */
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--lq-cc-linie);
  border-radius: 3px;
  background: #1B2B38;
  color: var(--lq-cc-akzent);
  box-shadow: var(--sch-blatt, 0 10px 30px -14px rgba(0, 0, 0, .66));
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .35s cubic-bezier(.34, 1.4, .5, 1);
}
#qn-cookie-consent-trigger:hover {
  border-color: var(--qn-cc-primary);
  background: var(--qn-cc-primary);
  color: var(--lq-cc-auf-orange);
  transform: rotate(-8deg);
}
#qn-cookie-consent-trigger:focus-visible {
  outline: 3px solid var(--lq-cc-fokus);
  outline-offset: 3px;
}
/* display:grid oben ueberstimmt mit der ID das [hidden] der Extension */
#qn-cookie-consent-trigger[hidden] { display: none; }

#qn-cookie-consent-trigger .qn-cc-trigger__icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Die Kruemel: Die Extension zeichnet sie als Striche der Laenge .01
   ("v.01"). Ohne runde Enden haben sie keine Flaeche und bleiben
   unsichtbar - mit runden Enden und etwas dickerer Linie werden es Punkte.
   Der erste Pfad ist der Keksrand. */
#qn-cookie-consent-trigger .qn-cc-trigger__icon path:not(:first-child) { stroke-width: 2.6; }


/* ===================================================================
   7. Telefon (Grenze wie in der Extension)
   =================================================================== */
@media (max-width: 768px) {
  #qn-cookie-consent { --lq-cc-rand: 1.15rem; }

  #qn-cookie-consent .qn-cc__container {
    max-height: 85vh;
    max-height: 85dvh;
  }
  #qn-cookie-consent .qn-cc__container::after { top: 1rem; right: 1rem; }
  #qn-cookie-consent .qn-cc__header { padding-top: 1.25rem; padding-right: 3rem; }
  #qn-cookie-consent .qn-cc__header::after { top: calc(1.25rem + .37em); }

  /* Schmale Spalte: automatische Trennung zerhackt sonst fast jede Zeile */
  #qn-cookie-consent .qn-cc__description,
  #qn-cookie-consent .qn-cc__category-details p { hyphens: manual; text-wrap: pretty; }

  /* Spalte: Extension stellt die Reihenfolge um (Zustimmen, Ablehnen,
     Einstellungen) - das auto-Polster von oben muss hier weg. */
  #qn-cookie-consent .qn-cc__btn--settings { margin-inline: auto; }

  #qn-cookie-consent .qn-cc__category-details { padding-left: 1rem; }

  #qn-cookie-consent-trigger { width: 2.6rem; height: 2.6rem; }
  #qn-cookie-consent-trigger .qn-cc-trigger__icon { width: 1.25rem; height: 1.25rem; }
}


/* -------------------------------------------------------------------
   7a. Telefon kompakt (bis 560 px), 29.10.2026
   Vorher belegte der Dialog auf einem 360-px-Telefon gut 60 % des
   Bildschirms (Text 6 Zeilen, drei Knoepfe untereinander).
   Jetzt: weniger Polster, kleinerer Titel, Text 15 px, "Alle
   akzeptieren" und "Nur Notwendige" NEBENEINANDER und gleich gross
   (Ablehnen gleichwertig - Vorgabe bleibt erfuellt), "Einstellungen"
   und die Rechtslinks teilen sich eine Zeile.
   Rueckweg: diesen Block loeschen (Sicherung 80-cookie.css.vor-kompakt).
   ------------------------------------------------------------------- */
@media (max-width: 560px) {
  #qn-cookie-consent { --lq-cc-rand: 1rem; padding: .6rem; }

  #qn-cookie-consent .qn-cc__header { padding-top: 1rem; padding-right: 2.8rem; }
  #qn-cookie-consent .qn-cc__header::before { margin-bottom: .3rem; font-size: .66rem; }
  #qn-cookie-consent .qn-cc__header::after { top: calc(1rem + .3em); }
  #qn-cookie-consent .qn-cc__container::after { top: .85rem; right: .85rem; }
  #qn-cookie-consent .qn-cc__title { font-size: 1.6rem; }

  #qn-cookie-consent .qn-cc__content { padding: .55rem var(--lq-cc-rand) .8rem; }
  #qn-cookie-consent .qn-cc__description { font-size: .9rem; line-height: 1.5; }

  #qn-cookie-consent .qn-cc__footer { padding-bottom: .7rem; }

  /* Zustimmen | Ablehnen nebeneinander, Einstellungen darunter */
  #qn-cookie-consent .qn-cc__buttons:not(.qn-cc__buttons--save) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: .2rem;
  }
  #qn-cookie-consent .qn-cc__buttons[hidden] { display: none; }
  #qn-cookie-consent .qn-cc__btn--accept   { grid-column: 1; grid-row: 1; }
  #qn-cookie-consent .qn-cc__btn--reject   { grid-column: 2; grid-row: 1; }
  #qn-cookie-consent .qn-cc__btn--settings { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0; }
  #qn-cookie-consent .qn-cc__buttons:not(.qn-cc__buttons--save) .qn-cc__btn:not(.qn-cc__btn--settings) {
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem .4rem;
    font-size: .74rem;
    letter-spacing: .06em;
    text-wrap: balance;
  }
  #qn-cookie-consent .qn-cc__btn--settings { min-height: 2.75rem; padding-block: .3rem; }

  /* Kategorien: "Immer aktiv" darf unter den Namen rutschen - bei 320 px
     ragte sonst der Plus-Knopf von "Notwendig" ueber den Rand. */
  #qn-cookie-consent .qn-cc__category-header { gap: .5rem; padding: .6rem .6rem .6rem .85rem; }
  #qn-cookie-consent .qn-cc__category-label { flex-wrap: wrap; min-width: 0; gap: .4rem .7rem; }

  #qn-cookie-consent .qn-cc__links { padding-top: .5rem; gap: .3rem 1.2rem; }
  #qn-cookie-consent .qn-cc__link { display: inline-block; padding-block: .25rem; }
}


/* Offenes Burgermenue: Keks-Knopf verdeckt sonst einen Menuepunkt */
html.nav-offen #qn-cookie-consent-trigger { visibility: hidden; }


/* ===================================================================
   8. Hoher Kontrast / Windows-Kontrastmodus
   =================================================================== */
@media (prefers-contrast: more) {
  #qn-cookie-consent,
  #qn-cookie-consent-trigger {
    --qn-cc-text-muted: var(--hell, #EAF4FF);
    --qn-cc-border:     rgba(234, 244, 255, .6);
    --lq-cc-linie:      rgba(234, 244, 255, .85);
  }
  #qn-cookie-consent .qn-cc__container { border: 2px solid var(--qn-cc-text); border-left: 4px solid var(--qn-cc-primary); }
  #qn-cookie-consent .qn-cc__checkbox-visual { border-color: var(--qn-cc-text); }
}

@media (forced-colors: active) {
  #qn-cookie-consent .qn-cc__container,
  #qn-cookie-consent .qn-cc__category,
  #qn-cookie-consent .qn-cc__checkbox-visual { background: Canvas; border-color: CanvasText; }
  #qn-cookie-consent .qn-cc__container::after,
  #qn-cookie-consent .qn-cc__header::after { display: none; }
  #qn-cookie-consent .qn-cc__checkbox:checked + .qn-cc__checkbox-visual { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  /* Haekchen und Plus/Minus sind Hintergrundflaechen - ohne
     forced-color-adjust:none werden sie auf Canvas umgefaerbt und sind weg */
  #qn-cookie-consent .qn-cc__checkbox-visual::after { forced-color-adjust: none; background: HighlightText; }
  #qn-cookie-consent .qn-cc__toggle-icon::before,
  #qn-cookie-consent .qn-cc__toggle-icon::after { forced-color-adjust: none; background: ButtonText; }
  #qn-cookie-consent .qn-cc__btn { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  /* forced-color-adjust:none, sonst legt Chrome eine Canvas-Platte hinter
     die Schrift: HighlightText auf Weiss = unsichtbar (auch im Original
     der Extension so) */
  #qn-cookie-consent .qn-cc__btn--accept,
  #qn-cookie-consent .qn-cc__btn--save { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  #qn-cookie-consent .qn-cc__btn--settings { border-color: transparent; background: transparent; color: LinkText; }
  #qn-cookie-consent .qn-cc__link { color: LinkText; }
  #qn-cookie-consent-trigger { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
}