/*
Theme Name: Quantencomputer Kaufen
Theme URI: https://quantencomputer-kaufen.de
Template: quantum-computing
Author: Malte Klein
Description: Kind-Theme für Quantum Computing (Creta Themes). Bringt die recherchierten Inhalte von quantencomputer-kaufen.de 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: quantum-computing-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 {
  max-width: var(--qk-wrap);
  margin-inline: auto;
  padding-inline: 20px;
  width: 100%;
}

.qk-section {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: 1px solid var(--qk-border-soft);
}

.qk-section:first-of-type {
  border-top: 0;
}

.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;
}

.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);
  max-width: 20ch;
  margin-block: 0 20px;
}

.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;
}

.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;
}

/* ==========================================================================
   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;
  }
}

/* ==========================================================================
   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);
}

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

.qk-section .wp-block-post-title,
.qk-section .wp-block-query-title {
  font-family: var(--qk-font-head);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--qk-ink);
  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;
}

.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;
  }
}