/*
Theme Name: mk-quantum-theme-child
Theme URI: https://quantum-blog.com
Template: mk-quantum-theme
Author: M. Klein
Description: Kind-Theme für Quantum Computing (Creta Themes). Bringt die recherchierten Inhalte von quantum-blog.com als Block-Patterns mit, setzt die Farben auf das Dark-Design des Vaults und ergänzt Hersteller-, Preis- und FAQ-Abschnitte. Updates des Eltern-Themes lassen sich einspielen, ohne diese Anpassungen zu verlieren.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mk-quantum-theme-child
Tags: full-site-editing, block-patterns, one-column, custom-colors
*/

/* ==========================================================================
   Farbtokens aus 00 Kontext/Design.md
   Werden zusätzlich in theme.json auf die Farbpalette des Eltern-Themes
   gemappt, damit auch dessen Blöcke im gleichen Ton laufen.
   ========================================================================== */

:root {
  --qk-bg: #0B0E13;
  --qk-card: #161B23;
  --qk-card-hi: #1B212B;
  --qk-border: #232B36;
  --qk-border-soft: #1A212A;
  --qk-ink: #E9EDF4;
  --qk-muted: #98A3B3;
  --qk-faint: #667186;
  --qk-accent: #7C9CFF;
  --qk-accent-hi: #9DB4FF;
  --qk-prio: #F5C451;
  --qk-danger: #FF6B6B;

  --qk-radius: 15px;
  --qk-radius-sm: 9px;
  --qk-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --qk-speed: 140ms;

  --qk-wrap: 1120px;
  --qk-header-h: 92px;

  /* Seit 30.08.2026 Space Grotesk und Inter statt Orbitron und Poppins,
     nach Maltes Feedback ("weniger kreativ, nicht kitschig") und in
     Anlehnung an das Shiplyx-Stylesheet. Entspricht damit wieder dem
     Schriftpaar aus 00 Kontext/Design.md. */
  --qk-font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --qk-font-body: "Inter", system-ui, sans-serif;
  --qk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

/* Zwei weiche Farbschleier oben links und rechts, wie im Design festgelegt. */
body {
  background-color: var(--qk-bg);
  background-image:
    radial-gradient(60rem 40rem at 12% -8%, rgba(124, 156, 255, 0.10), transparent 60%),
    radial-gradient(52rem 36rem at 88% -12%, rgba(157, 180, 255, 0.07), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--qk-ink);
}

/* Der Header bleibt beim Scrollen stehen, damit die Sprungmarken auf der
   Onepage jederzeit erreichbar sind. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Sprungziele landen unter dem Header statt darunter versteckt. */
[id] {
  scroll-margin-top: var(--qk-header-h);
}

/* ==========================================================================
   Grundraster
   ========================================================================== */

.qk-wrap {
  /* Korrektur vom 31.08.2026: box-sizing:border-box seitenweit auf die
     Basisklasse, statt wie zuvor nur lokal an .qk-buch-streifen (siehe
     Kommentar dort). Ohne das zählte width:100% + padding-inline additiv
     zur max-width dazu (Browser-Standard content-box), wodurch .qk-wrap
     bei Fensterbreiten zwischen rund 480px und 1120px breiter wurde als
     der Viewport und echtes horizontales Scrollen auf Seitenebene erzeugte
     (mit Playwright nachgemessen: 900px Fensterbreite → 996px Footer-Wrap,
     body.scrollWidth 968px). Wirkt seitenweit auf jedes .qk-wrap-Vorkommen
     (Header, Footer, alle .qk-section), das war vorher bewusst
     ausgeklammert und ist jetzt ausdrücklich gewünscht. */
  box-sizing: border-box;
  max-width: var(--qk-wrap);
  margin-inline: auto;
  padding-inline: 20px;
  width: 100%;
}

/* Korrektur vom 31.08.2026: border-top zwischen jeder .qk-section entfernt,
   auf Maltes Wunsch ("aus einem Guss", keine Trennlinien zwischen den
   Blöcken). Betraf jeden Section-Übergang auf jeder Seite, nicht nur den
   Sprung von den Startseiten-Kacheln zu "Aus dem Blog". */
.qk-section {
  padding-block: clamp(48px, 6vw, 96px);
}

.qk-section h2 {
  font-family: var(--qk-font-head);
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin-block: 0 12px;
}

.qk-section h3 {
  font-family: var(--qk-font-head);
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin-block: 40px 10px;
}

.qk-section h4 {
  font-family: var(--qk-font-body);
  font-weight: 600;
  color: var(--qk-ink);
  margin-block: 28px 8px;
}

.qk-section p,
.qk-section li {
  color: var(--qk-muted);
  font-family: var(--qk-font-body);
}

/* Lesbare Zeilenlänge: Fließtext und Überschriften direkt im Abschnitt
   werden begrenzt. Raster, Tabellen und Karten behalten die volle Breite. */
.qk-section > .qk-wrap > p,
.qk-section > .qk-wrap > h2,
.qk-section > .qk-wrap > h3,
.qk-section > .qk-wrap > h4 {
  max-width: 74ch;
}

.qk-section > .qk-wrap > p.qk-sources,
.qk-section > .qk-wrap > p.qk-btnrow {
  max-width: none;
}

.qk-section > .qk-wrap > .qk-callout,
.qk-section > .qk-wrap > .qk-timeline,
.qk-section > .qk-wrap > .qk-myth-list {
  max-width: 76ch;
}

.qk-section strong {
  color: var(--qk-ink);
  font-weight: 600;
}

.qk-section a,
.qk-footer a {
  color: var(--qk-accent);
  text-decoration: underline;
  text-underline-offset: 0.25ch;
  transition: color var(--qk-speed) ease;
}

.qk-section a:hover,
.qk-section a:focus-visible,
.qk-footer a:hover,
.qk-footer a:focus-visible {
  color: var(--qk-accent-hi);
}

:where(.qk-section, .qk-header, .qk-footer) a:focus-visible,
:where(.qk-section, .qk-header, .qk-footer) button:focus-visible,
:where(.qk-section) summary:focus-visible {
  outline: 2px solid var(--qk-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Das Eltern-Theme legt auf .wp-site-blocks einen seitlichen Innenabstand.
   Header, Abschnitte und Footer sollen aber randlos durchlaufen, die
   horizontale Begrenzung übernimmt .qk-wrap. Deshalb wird der Abstand für
   genau diese Blöcke wieder herausgerechnet, statt ihn global zu entfernen:
   die Blog- und Beitragsvorlagen des Eltern-Themes brauchen ihn weiterhin. */
.qk-header,
.qk-footer,
.qk-section {
  margin-inline: calc(-1 * var(--wp--custom--spacing--outer, 1.75rem));
  width: auto;
}

.qk-main {
  margin-top: 0;
}

/* Beschriftung über einem Block */
.qk-section .qk-eyebrow {
  font-family: var(--qk-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qk-faint);
  margin-block: 0 10px;
}

.qk-section .qk-subtitle {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--qk-muted);
  max-width: 68ch;
  margin-block: 0 8px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.qk-header {
  background: rgba(11, 14, 19, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--qk-border-soft);
}

.qk-header .qk-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--qk-header-h);
  padding-block: 14px;
  flex-wrap: wrap;
}

.qk-header .wp-block-site-title a {
  font-family: var(--qk-font-head);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  text-decoration: none;
}

/* Die Flex-Darstellung kommt normalerweise aus dem Core-Stylesheet. Hier
   trotzdem gesetzt, damit die Navigation auch dann als Zeile steht, wenn
   das Core-CSS aus irgendeinem Grund nicht greift. */
.qk-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 2px !important;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qk-nav .wp-block-navigation-item a {
  display: inline-block;
  font-family: var(--qk-font-body);
  font-size: 14px;
  color: var(--qk-muted);
  text-decoration: none;
  padding: 8px 11px;
  border-radius: var(--qk-radius-sm);
  border: 1px solid transparent;
  transition: color var(--qk-speed) ease, border-color var(--qk-speed) ease;
}

.qk-nav .wp-block-navigation-item a:hover,
.qk-nav .wp-block-navigation-item a:focus-visible {
  color: var(--qk-accent);
  border-color: var(--qk-border);
}

.qk-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--qk-bg);
  padding-top: 72px;
}

.qk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  font-size: 18px;
  color: var(--qk-ink);
}

.qk-nav .wp-block-navigation__responsive-container-open,
.qk-nav .wp-block-navigation__responsive-container-close {
  color: var(--qk-ink);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.qk-hero {
  padding-block: clamp(56px, 8vw, 120px) clamp(40px, 5vw, 72px);
  border-top: 0;
}

/* Seit 30.08.2026 zweispaltig: Text links, Bild rechts. Faellt unter
   960px auf eine Spalte, das Bild rutscht dann unter den Text. */
.qk-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

.qk-hero-text {
  flex: 1 1 480px;
  min-width: 0;
}

.qk-hero-visual {
  flex: 1 1 420px;
  display: flex;
  justify-content: center;
}

.qk-hero-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1400 / 800;
  border-radius: var(--qk-radius);
  overflow: hidden;
  border: 1px solid var(--qk-border);
  border-top: 3px solid var(--qk-prio);
  box-shadow: var(--qk-shadow);
}

.qk-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qk-hero-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(11, 14, 19, 0.72);
  border: 1px solid rgba(35, 43, 54, 0.8);
  font-family: var(--qk-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qk-ink);
}

@media (max-width: 960px) {
  .qk-hero-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .qk-hero-visual {
    order: -1;
  }

  .qk-hero-frame {
    max-width: 100%;
  }
}

.qk-hero h1 {
  font-family: var(--qk-font-head);
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin-block: 0 28px;
}

/* Seit 30.08.2026: Ueberschrift steht ueber der zweispaltigen Zeile
   (Text/Bild) und laeuft deshalb ueber die volle Blockbreite, statt wie
   vorher auf 20ch begrenzt zu sein. */
.qk-hero-heading {
  max-width: none;
}

.qk-hero .qk-lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.7;
  color: var(--qk-muted);
  max-width: 68ch;
  margin-block: 0 18px;
}

.qk-hero .qk-disclaimer {
  position: relative;
  max-width: 68ch;
  margin-block: 0 28px;
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--qk-border);
  border-left: 3px solid var(--qk-prio);
  border-radius: var(--qk-radius);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
  box-shadow: var(--qk-shadow);
  font-size: 15px;
  color: var(--qk-muted);
}

.qk-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 0 8px;
}

.qk-section .qk-btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--qk-font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: var(--qk-radius-sm);
  border: 1px solid var(--qk-border);
  color: var(--qk-ink);
  text-decoration: none;
  transition: color var(--qk-speed) ease, border-color var(--qk-speed) ease;
}

.qk-section .qk-btn:hover,
.qk-section .qk-btn:focus-visible {
  border-color: var(--qk-accent);
  color: var(--qk-accent);
}

.qk-section .qk-btn--primary {
  background: linear-gradient(180deg, var(--qk-accent-hi), var(--qk-accent));
  border-color: transparent;
  color: #0B0E13;
  font-weight: 600;
}

.qk-section .qk-btn--primary:hover,
.qk-section .qk-btn--primary:focus-visible {
  color: #0B0E13;
  filter: brightness(1.06);
}

/* ==========================================================================
   Karten und Teaser
   ========================================================================== */

.qk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-block: 32px 0;
  padding: 0;
  list-style: none;
}

.qk-card,
.qk-teaser {
  position: relative;
  display: block;
  padding: 20px 22px 22px;
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
  box-shadow: var(--qk-shadow);
  overflow: hidden;
  transition: border-color var(--qk-speed) ease, transform var(--qk-speed) ease;
}

/* Seit 30.08.2026 kein Farbstreifen mehr auf jeder Standardkarte, nur noch
   bei qk-card--prio, wie .card.tint im Shiplyx-Stylesheet. Ruhiger, nicht
   jede Karte muss eine Akzentfarbe tragen. */
.qk-card--prio::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--qk-prio);
}

.qk-teaser {
  text-decoration: none;
}

.qk-teaser:hover,
.qk-teaser:focus-visible {
  border-color: var(--qk-accent);
  transform: translateY(-2px);
}

.qk-card h3,
.qk-teaser h3 {
  font-family: var(--qk-font-head);
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin-block: 0 8px;
}

/* Karten, deren erstes Element ein h4 ist (z. B. der Anbieter-Vergleich),
   brauchen dieselbe Nullstellung wie .qk-card h3: die generische Regel
   .qk-section h4 setzt sonst 28px Abstand ueber der Karte an. */
.qk-card h4 {
  font-family: var(--qk-font-head);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--qk-ink);
  margin-block: 0 8px;
}

.qk-section .qk-card p,
.qk-section .qk-teaser p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--qk-muted);
  margin: 0;
}

.qk-teaser p {
  text-decoration: none;
}

/* Kennzahl-Karte */
.qk-section .qk-card .qk-kpi {
  display: block;
  font-family: var(--qk-font-head);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--qk-accent-hi);
  margin-block: 0 4px;
}

/* ==========================================================================
   Vergleichs-Grid (patterns/vergleichsseite.php)

   Jede Karte traegt dieselben drei Fakten (System, Kennzahl, Zugang) als
   Definitionsliste, damit sich Anbieter direkt gegenueberstellen lassen,
   seit 30.08.2026. Etwas breitere Mindestspalte als .qk-grid sonst, weil
   die Fakten-Zeilen mehr Platz brauchen als ein Teaser-Text.
   ========================================================================== */

.qk-compare-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.qk-compare-facts {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--qk-border-soft);
}

.qk-compare-fact {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.qk-compare-fact dt {
  flex: 0 0 64px;
  font-family: var(--qk-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--qk-faint);
}

.qk-compare-fact dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--qk-muted);
}

/* ==========================================================================
   Produktkarte (Amazon-Partnerlinks)

   Eigenständige Kartenvariante für Affiliate-Empfehlungen, seit 30.08.2026.
   Unterscheidet sich bewusst von .qk-card: Cover-Fläche, Affiliate-Chip auf
   der Karte selbst statt nur im Fließtext, klarer Button statt Inline-Link.
   Die Cover-Fläche ist typografisch, kein Amazon-Bild: echte Amazon-Cover
   dürfen nur über SiteStripe oder die Product Advertising API eingebunden
   werden, nicht per Screenshot oder Downloadlink. Sobald echte Bild-URLs
   vorliegen, ersetzt ein <img> in .qk-product-cover diesen Platzhalter.
   ========================================================================== */

/* Seit 30.08.2026: feste 2 Spalten statt variablem auto-fit-Raster. Nur
   für die Produktkarten, .qk-grid an anderer Stelle bleibt unverändert.
   Cover-Maße siehe zweite Runde weiter unten (156x216, gestapeltes Layout). */
.qk-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-block: 32px 0;
}

@media (max-width: 640px) {
  .qk-product-grid {
    grid-template-columns: 1fr;
  }
}

/* Seit 30.08.2026, zweite Runde: Cover und Textbutton drängten sich bei
   nebeneinander liegendem Layout gegenseitig aus dem Platz, der Button
   lief gestaucht um. Deshalb jetzt gestapelt: Cover oben, groß, Text und
   Button darunter über die volle Kartenbreite. Der Button quetscht sich
   dadurch nie wieder, egal wie groß das Cover ist. */
.qk-product-card {
  display: flex;
  flex-direction: column;
}

.qk-product-cover {
  width: 156px;
  height: 216px;
  margin: 0 0 16px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--qk-accent), #4A63B8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--qk-border-soft);
}

.qk-product-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qk-product-cover span {
  font-family: var(--qk-font-head);
  font-size: 9px;
  font-weight: 700;
  color: #0B0E13;
  text-align: center;
  line-height: 1.25;
  padding: 5px;
}

.qk-product-body {
  width: 100%;
}

.qk-section .qk-chip--affiliate {
  color: var(--qk-prio);
  border-color: rgba(245, 196, 81, 0.35);
}

/* Seit 30.08.2026 (dritte Runde) sitzt der Affiliate-Chip neben Autor und
   Verlag statt als eigene Zeile über dem Titel. Bewusst nur hier auf
   .qk-product-meta gescopt, nicht auf .qk-section .qk-chip allgemein: die
   Mythen/Fakten-Chips im Wissen-Abschnitt stehen für sich allein und
   brauchen den Zeilenabstand nicht. */
.qk-product-meta .qk-chip {
  margin-left: 8px;
  vertical-align: 1px;
}

.qk-product-card h3 {
  margin-block: 0 4px;
  font-size: 21px;
}

.qk-section .qk-product-card .qk-product-meta {
  font-size: 13px;
  color: var(--qk-faint);
  margin: 0 0 10px;
}

.qk-section .qk-product-card p.qk-product-desc {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.qk-product-cta {
  margin: 0;
  gap: 6px;
  white-space: nowrap;
}

.qk-product-cta svg {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  flex: none;
}

.qk-section .qk-product-card h3 a:hover,
.qk-section .qk-product-card h3 a:focus-visible {
  color: var(--qk-accent);
  text-decoration: underline;
  text-underline-offset: 0.2ch;
}

/* Buch-Cover im Blog-Beitrag. Hotlink auf m.media-amazon.com, wie von
   Amazon PartnerNet (SiteStripe) vorgesehen: nicht herunterladen und in
   die Mediathek laden, das verstößt gegen die Nutzungsbedingungen. */
.qk-post-cover {
  float: left;
  margin: 0 20px 12px 0;
  max-width: 140px;
}

.qk-post-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--qk-border);
  box-shadow: var(--qk-shadow);
}

@media (max-width: 480px) {
  .qk-post-cover {
    float: none;
    max-width: 160px;
    margin: 0 auto 20px;
  }
}

@media (max-width: 480px) {
  .qk-product-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .qk-product-body {
    min-width: 0;
  }
}

/* ==========================================================================
   Beitragskarte ohne Cover (Wissen & Vergleich)

   Seit 30.08.2026, für die sieben Informationsartikel in patterns/blog.php,
   zweiter Abschnitt. Anders als .qk-product-card kein Amazon-Cover und kein
   Affiliate-Hinweis, deshalb auf Basis von .qk-card (siehe oben) statt einer
   eigenen Kartenbasis, nur Datumszeile und Weiterlesen-Link kommen dazu.
   ========================================================================== */

.qk-section .qk-post-card .qk-post-date {
  font-size: 13px;
  color: var(--qk-faint);
  margin: 0 0 8px;
}

.qk-post-card h3 {
  margin-block: 0 8px;
  font-size: 18px;
}

/* Autorenzeile auf den Buchrezensions-Karten (.qk-product-card), separat von
   .qk-product-meta (Buchautor/Verlag) und .qk-post-date (Wissen-&-Vergleich-
   Karten), damit klar bleibt: hier steht, wer die Rezension geschrieben hat,
   nicht wer das Buch geschrieben hat. */
.qk-section .qk-post-byline {
  font-size: 12.5px;
  color: var(--qk-faint);
  margin: 0 0 10px;
}

/* "Alle Beiträge ansehen"-Link neben der Überschrift im Abschnitt
   "Aus dem Blog" auf der Startseite (patterns/startseite-blog.php). */
.qk-blog-alle-link {
  font-size: 14px;
  margin: 0;
}

.qk-blog-alle-link a {
  color: var(--qk-accent);
}

.qk-blog-alle-link a:hover,
.qk-blog-alle-link a:focus-visible {
  color: var(--qk-accent-hi);
}

.qk-post-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.qk-post-cta svg {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  flex: none;
}

/* ==========================================================================
   Zeitleiste
   ========================================================================== */

.qk-timeline {
  margin: 24px 0 0;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--qk-border);
}

.qk-timeline .qk-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 4px 18px;
  padding-block: 12px;
}

.qk-timeline .qk-timeline-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--qk-accent);
  box-shadow: 0 0 0 4px rgba(124, 156, 255, 0.14);
}

.qk-section .qk-timeline .qk-year {
  font-family: var(--qk-font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--qk-accent-hi);
  letter-spacing: 0.02em;
  margin: 0;
}

.qk-section .qk-timeline .qk-desc {
  color: var(--qk-muted);
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   Callout, Hinweis, Quellen
   ========================================================================== */

.qk-callout {
  margin-block: 28px 0;
  padding: 20px 22px;
  border: 1px solid var(--qk-border);
  border-left: 3px solid var(--qk-accent);
  border-radius: var(--qk-radius);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
  box-shadow: var(--qk-shadow);
}

.qk-callout h3,
.qk-callout h4 {
  font-family: var(--qk-font-head);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin-block: 0 8px;
}

.qk-section .qk-callout p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--qk-muted);
}

.qk-callout--warn {
  border-left-color: var(--qk-danger);
}

.qk-callout--warn h2,
.qk-callout--warn h3 {
  color: var(--qk-danger);
}

.qk-sources {
  margin-block: 30px 0;
  padding-top: 16px;
  border-top: 1px solid var(--qk-border-soft);
  font-size: 13px;
  line-height: 1.8;
  color: var(--qk-faint);
}

.qk-sources a {
  color: var(--qk-muted);
}

.qk-sources a:hover {
  color: var(--qk-accent);
}

/* Seit 30.08.2026 bewusst kein Kasten mehr, auf Empfehlung von
   recht-vertraege (Rita): das UWG-Trennungsgebot verlangt Nähe zum
   Werbeinhalt und sofortige Lesbarkeit "auf den ersten Blick", nicht
   optische Lautstärke. Ein unauffälliger, aber klar lesbarer Einzeiler
   direkt am Beitrag erfüllt das genauso wie die vorherige Box, siehe
   Team-Protokoll. Fällt bewusst NICHT weg oder wandert in den Footer, das
   hat Rita für Deep Links (direkter Einstieg über Suchmaschine) explizit
   verworfen: der Footer ist dann oft erst nach dem Werbekontakt sichtbar. */
.qk-affiliate-hinweis {
  margin-block: 16px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--qk-faint);
}

.qk-affiliate-hinweis strong {
  color: var(--qk-muted);
  font-weight: 600;
}

.qk-section .qk-chip {
  display: inline-block;
  width: auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--qk-border);
  color: var(--qk-faint);
  margin: 0 0 10px;
}

.qk-section .qk-chip--myth {
  color: var(--qk-danger);
  border-color: rgba(255, 107, 107, 0.35);
}

.qk-section .qk-chip--fact {
  color: var(--qk-accent-hi);
  border-color: rgba(124, 156, 255, 0.35);
}

/* ==========================================================================
   Mythen und Glossar
   ========================================================================== */

.qk-myth-list {
  display: grid;
  gap: 14px;
  margin-block: 24px 0;
}

.qk-myth {
  padding: 18px 20px;
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
  box-shadow: var(--qk-shadow);
}

.qk-section .qk-myth p:not(.qk-chip) {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.qk-glossary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-block: 22px 0;
}

.qk-glossary .qk-term {
  padding: 16px 18px;
  border: 1px solid var(--qk-border-soft);
  border-radius: var(--qk-radius);
  background: var(--qk-card);
}

.qk-section .qk-glossary .qk-term-name {
  font-family: var(--qk-font-head);
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--qk-accent-hi);
  margin: 0 0 6px;
}

.qk-section .qk-glossary p:not(.qk-term-name) {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--qk-muted);
}

/* ==========================================================================
   Tabellen: scrollen im eigenen Container, die Seite selbst nie waagerecht
   ========================================================================== */

.qk-section .wp-block-table {
  margin-block: 24px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qk-section .wp-block-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius);
  overflow: hidden;
  background: var(--qk-card);
  font-size: 14px;
}

.qk-section .wp-block-table th {
  font-family: var(--qk-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--qk-faint);
  text-align: left;
  background: var(--qk-card-hi);
  padding: 12px 16px;
  border-bottom: 1px solid var(--qk-border);
}

.qk-section .wp-block-table td {
  padding: 13px 16px;
  color: var(--qk-muted);
  line-height: 1.6;
  border-bottom: 1px solid var(--qk-border-soft);
  vertical-align: top;
}

.qk-section .wp-block-table tr:last-child td {
  border-bottom: 0;
}

.qk-section .wp-block-table td strong {
  color: var(--qk-ink);
}

.qk-section .wp-block-table figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--qk-faint);
}

/* ==========================================================================
   FAQ (Core-Block "Details")
   ========================================================================== */

.qk-faq {
  display: grid;
  gap: 12px;
  margin-block: 28px 0;
}

.qk-faq .wp-block-details {
  padding: 4px 20px;
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
  box-shadow: var(--qk-shadow);
  transition: border-color var(--qk-speed) ease;
}

.qk-faq .wp-block-details[open] {
  border-color: var(--qk-border);
}

.qk-faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 16px;
  font-family: var(--qk-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--qk-ink);
  position: relative;
  padding-right: 32px;
}

.qk-faq summary::-webkit-details-marker {
  display: none;
}

.qk-faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--qk-faint);
  border-bottom: 2px solid var(--qk-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--qk-speed) ease;
}

.qk-faq .wp-block-details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.qk-section .qk-faq .wp-block-details p {
  margin-block: 0 16px;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--qk-muted);
}

/* ==========================================================================
   Erklär-Animationen (SVG, ohne externe Bibliothek)
   ========================================================================== */

.qk-diagrams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-block: 26px 0;
}

.qk-diagram {
  margin: 22px auto 0;
  max-width: 460px;
  padding: 18px;
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
  box-shadow: var(--qk-shadow);
  text-align: center;
}

.qk-diagram svg {
  width: 100%;
  height: auto;
  max-height: 190px;
  display: block;
  margin-inline: auto;
}

.qk-section .qk-diagram figcaption {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--qk-faint);
}

.qk-svg-label {
  font-family: var(--qk-font-mono);
  font-size: 11px;
  fill: var(--qk-faint);
}

.qk-svg-gate-label {
  font-family: var(--qk-font-mono);
  font-size: 12px;
  font-weight: 500;
  fill: var(--qk-ink);
}

@keyframes qk-swing {
  0%, 100% { transform: rotate(-32deg); }
  50%      { transform: rotate(32deg); }
}

@keyframes qk-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@keyframes qk-flow {
  0%   { transform: translateX(0); opacity: 1; }
  70%  { transform: translateX(210px); opacity: 1; }
  100% { transform: translateX(280px); opacity: 0; }
}

@keyframes qk-gate-glow {
  0%, 100% { stroke: var(--qk-border); }
  50%      { stroke: var(--qk-accent); }
}

.qk-vector {
  transform-origin: 120px 80px;
  animation: qk-swing 3.6s ease-in-out infinite;
}

.qk-node-a,
.qk-node-b {
  animation: qk-pulse 2.4s ease-in-out infinite;
}

.qk-flow-dot {
  animation: qk-flow 3.4s linear infinite;
}

.qk-gate-1 { animation: qk-gate-glow 3.4s linear infinite; }
.qk-gate-2 { animation: qk-gate-glow 3.4s linear infinite 0.8s; }
.qk-gate-3 { animation: qk-gate-glow 3.4s linear infinite 1.6s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .qk-vector,
  .qk-node-a,
  .qk-node-b,
  .qk-flow-dot,
  .qk-gate-1,
  .qk-gate-2,
  .qk-gate-3 {
    animation: none;
  }
  .qk-node-a,
  .qk-node-b { opacity: 1; }
  .qk-teaser:hover { transform: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.qk-footer {
  border-top: 1px solid var(--qk-border-soft);
  padding-block: clamp(36px, 4vw, 56px) 28px;
  background: rgba(11, 14, 19, 0.6);
}

.qk-footer .qk-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.qk-footer h2 {
  font-family: var(--qk-font-head);
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin-block: 0 10px;
}

.qk-footer p,
.qk-footer li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--qk-muted);
}

.qk-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qk-footer li {
  margin-block: 0 6px;
}

.qk-footer-bottom {
  border-top: 1px solid var(--qk-border-soft);
  margin-top: 8px;
  padding-top: 18px;
  font-size: 12px;
  color: var(--qk-faint);
}

/* Bücher-Streifen, direkt vor dem Footer-Block. Wird über
   qk_buch_streifen_band() aus patterns/footer.php aufgerufen, nicht mehr
   über den Hook wp_footer (Korrektur 31.08.2026, siehe Kommentar dort).
   Bündig mit dem Content-Wrap, wie der übrige Footer-Inhalt auch, deshalb
   dieselbe Bauweise wie .qk-footer: kein width:100vw-Trick nötig, ein
   normaler Block innerhalb von .wp-site-blocks reicht. */
.qk-buch-streifen-band {
  border-top: 1px solid var(--qk-border-soft);
  background: rgba(11, 14, 19, 0.6);
  padding-block: 24px 28px;
}

/* Zwei Fallstricke, beide am 31.08.2026 behoben:
   1. Ohne display:flex waren align-items und gap wirkungslos, Beschriftung
      und Werbung-Chip standen untereinander statt nebeneinander.
   2. Die Kurzschreibweise "margin: 0 0 14px" hat das margin-inline:auto von
      .qk-wrap überschrieben. Dadurch klebte der Kopf am linken Fensterrand,
      während der Cover-Streifen darunter zentriert blieb. Bei 1280px fiel
      der Versatz mit 40px kaum auf, bei 3440px waren es 1120px: Die
      Beschriftung stand ganz links außen, über den mittigen Covern lag eine
      leere Fläche. Deshalb hier margin-block, das die Seitenränder in Ruhe
      lässt. */
.qk-buch-streifen-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block: 0 14px;
}

.qk-buch-streifen-head p:first-child {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--qk-ink);
}

.qk-buch-streifen-band .qk-chip {
  display: inline-block;
  width: auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--qk-border);
  color: var(--qk-prio);
  border-color: rgba(245, 196, 81, 0.35);
  margin: 0;
}

/* Korrektur vom 31.08.2026, zweiter Durchgang: Fünf Mini-Cover in einer
   schmalen Flex-Reihe wirkten gestaucht, der Rest der Zeile blieb leer.
   Jetzt ein Grid, das die volle Wrap-Breite ausnutzt und sich bei
   Platzmangel selbst umbricht, dazu größere Karten mit Titeltext statt
   reiner Mini-Thumbnails. */
.qk-buch-streifen {
  /* box-sizing:border-box kommt seit 31.08.2026 bereits aus der
     Basisklasse .qk-wrap (dieses Element trägt beide Klassen, siehe
     functions.php qk_buch_streifen_band()). Frühere lokale Deklaration
     hier entfernt, keine funktionale Änderung. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
  gap: 20px;
}

.qk-buch-streifen-item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--qk-border-soft);
  background: var(--qk-card);
  transition: border-color var(--qk-speed) ease, transform var(--qk-speed) ease;
}

.qk-buch-streifen-item:hover,
.qk-buch-streifen-item:focus-visible {
  border-color: var(--qk-accent);
  transform: translateY(-2px);
}

/* Wie .qk-post-cover im Blog-Beitrag: width:100%/height:auto zeigt das
   Cover vollständig in seiner echten Proportion. Korrektur vom 31.08.2026:
   aspect-ratio:2/3 + object-fit:cover schnitt Cover seitlich an, weil die
   fünf Amazon-Cover real zwischen 0,63 und 0,84 Breite/Höhe liegen, keins
   davon genau 2:3 (0,667) ist. align-items:start auf .qk-buch-streifen
   verhindert, dass das Grid die Karten trotz unterschiedlich hoher Cover
   auf gleiche Zeilenhöhe streckt. */
.qk-buch-streifen-item img {
  display: block;
  width: 100%;
  height: auto;
}

.qk-buch-streifen-titel {
  margin: 0;
  padding: 10px 12px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--qk-ink);
}

@media (max-width: 480px) {
  .qk-buch-streifen {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Inhaltsseiten, Beiträge, Seitenleiste
   ========================================================================== */

/* Korrektur vom 31.08.2026: Das Eltern-Theme setzt auf h1.wp-block-post-title
   font-weight:normal und max-width:900px (style.css des Eltern-Themes,
   WooCommerce-Boilerplate). Bei font-size/line-height/color/margin gewinnt
   diese Regel bereits durch höhere Spezifität (zwei Klassen gegen eine
   Klasse plus Elementselektor), bei font-weight und max-width gab es aber
   nie eine eigene Deklaration, die hätte gewinnen können, die Werte des
   Eltern-Themes liefen also unbeschadet durch. Ergebnis: Jede Seiten-/
   Beitragsüberschrift war dünner (400 statt fett) und schmaler begrenzt als
   der übrige Inhalt der Sektion, sichtbar anders als alle anderen
   Überschriften. Mit Playwright nachgemessen (computed style), beide
   Werte kamen unverändert vom Eltern-Theme durch. */
.qk-section .wp-block-post-title,
.qk-section .wp-block-query-title {
  font-family: var(--qk-font-head);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  max-width: none;
  margin: 0 0 20px;
}

.qk-section .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.qk-section .wp-block-post-title a:hover {
  color: var(--qk-accent);
}

.qk-eyebrow-row {
  gap: 8px 18px;
  margin-block: 0 26px;
  font-size: 13px;
  color: var(--qk-faint);
}

.qk-postnav {
  gap: 16px;
  margin-block: 48px 0;
  padding-top: 24px;
  border-top: 1px solid var(--qk-border-soft);
  font-size: 14px;
}

/* Autor-Box am Ende jedes Einzelbeitrags (patterns/autor-box.php, über
   templates/single.html eingebunden), Avatar links, Name und Kurzbio
   rechts. Reines PHP statt Kernblock, siehe Kommentar in der Pattern-Datei. */
.qk-author-box {
  align-items: center;
  gap: 16px;
  margin-block: 40px 0;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--qk-border);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
}

.qk-author-box-avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--qk-accent), var(--qk-accent-hi));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--qk-font-head);
  font-weight: 600;
  font-size: 18px;
  color: #0B0E13;
}

.qk-author-box-name {
  font-family: var(--qk-font-head);
  font-weight: 600;
  margin: 0 0 4px;
}

.qk-author-box-bio {
  font-size: 14px;
  color: var(--qk-muted);
  margin: 0;
}

.qk-sidebar {
  display: grid;
  gap: 16px;
}

.qk-sidebar .qk-card h2 {
  font-family: var(--qk-font-head);
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin: 0 0 12px;
}

.qk-sidebar .qk-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.7;
}

.qk-sidebar .qk-card a {
  color: var(--qk-muted);
  text-decoration: none;
}

.qk-sidebar .qk-card a:hover {
  color: var(--qk-accent);
}

/* Karten mit Überschrift plus Text bekommen etwas Luft zwischen beidem. */
.qk-section .qk-card h3 + p,
.qk-section .qk-teaser h3 + p {
  margin-top: 6px;
}

.qk-section .qk-teaser h3 a,
.qk-section .qk-card h3 a {
  color: inherit;
  text-decoration: none;
}

.qk-section .qk-teaser:hover h3 a {
  color: var(--qk-accent);
}

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */

@media (max-width: 900px) {
  :root { --qk-header-h: 76px; }

  .qk-header .qk-wrap {
    flex-wrap: nowrap;
    gap: 16px;
  }

  .qk-teaser,
  .qk-card {
    padding: 18px 18px 20px;
  }
}

@media (max-width: 480px) {
  .qk-timeline li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .qk-timeline {
    padding-left: 18px;
  }

  .qk-timeline li::before {
    left: -23px;
    top: 18px;
  }
}

/* ==========================================================================
   Einwilligungs-Baustein Amazon-Affiliate-Links (assets/js/amazon-consent.js)

   Deckt ausschließlich die zehn qk-product-cta-Links ab (fünf Buchtitel je
   einmal auf /buecher-kurse/ und im zugehörigen Rezensionsbeitrag), siehe
   Datenschutzerklärung, Abschnitt "Amazon-Partnerprogramm". Auftrag von
   recht-vertraege (Rita), seit 31.08.2026. Kein generisches Cookie-Banner-
   System, deshalb bewusst schlank gehalten statt eine eigene Kategorie an
   Design-Tokens einzuführen.
   ========================================================================== */

.qk-consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 14, 19, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.qk-consent-overlay[hidden] {
  display: none;
}

.qk-consent-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 28px 26px 24px;
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius);
  background: linear-gradient(180deg, var(--qk-card-hi), var(--qk-card));
  box-shadow: var(--qk-shadow);
}

.qk-consent-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--qk-radius-sm);
  background: transparent;
  color: var(--qk-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--qk-speed) ease, border-color var(--qk-speed) ease;
}

.qk-consent-close:hover,
.qk-consent-close:focus-visible {
  color: var(--qk-ink);
  border-color: var(--qk-border);
  outline: none;
}

.qk-consent-titel {
  font-family: var(--qk-font-head);
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  margin: 0 0 10px;
  padding-right: 24px;
}

.qk-consent-text {
  font-family: var(--qk-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--qk-muted);
  margin: 0 0 22px;
}

.qk-consent-text a {
  color: var(--qk-accent);
  text-decoration: underline;
  text-underline-offset: 0.25ch;
}

.qk-consent-text a:hover,
.qk-consent-text a:focus-visible {
  color: var(--qk-accent-hi);
}

.qk-consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Bewusst zwei optisch gleichwertige Schaltflächen, keine .qk-btn--primary
   auf einer der beiden: recht-vertraege verlangt, dass keine Option
   bevorzugt aussieht (kein vorangehakter Haken, keine optische Lautstärke
   für "Akzeptieren"). */
.qk-consent-actions .qk-btn {
  flex: 1 1 0;
  text-align: center;
}

/* "Cookie-Einstellungen"-Trigger im Footer (patterns/footer.php), optisch
   wie die übrigen Footer-Links (.qk-footer a), technisch aber ein <button>,
   damit kein href auf eine nicht existierende Seite zeigt. */
.qk-consent-settings-trigger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--qk-muted);
  text-decoration: underline;
  text-underline-offset: 0.25ch;
  cursor: pointer;
  transition: color var(--qk-speed) ease;
}

.qk-consent-settings-trigger:hover,
.qk-consent-settings-trigger:focus-visible {
  color: var(--qk-accent);
}