/* ==========================================================================
   style.css · bequ.codes, Markenseite der QR-Plattform bequ codes (bequ GmbH)
   Skill website-builder (Regeln in Klammern). Farben und Schriftzug aus der Familie bequ codes:
   Tinte, Papier, Beton und Scan-Grün wie in der Verwaltung; QR Code World erscheint nur mit
   seinem eigenen Zeichen und Verlauf. Einstieg „Zwei Welten“ (Leonard, 28.09.2026): links bequ codes
   auf Papier, rechts QR Code World in seinem Verlauf, das Zeichen von bequ codes hält die Naht.
   Darunter wirbt eine Karte für den Shop bequ.store, dessen Codes über bequ codes laufen.
   Das Codefeld mit Ortungsmustern und Taktlinien trägt die Seitenköpfe der Rechtsseiten und die 404.

   Inhalt
    1  Tokens, hell und dunkel
    2  Schriften
    3  Reset und Basis
    4  Typografie und Hilfsklassen
    5  Layout
    6  Kopf
    7  Knöpfe und Links
    8  Codefeld: Ortungsmuster, Taktlinien, Ausrichtung
    9  Einstieg der Startseite: zwei Welten
   10  QR Code World
   11  Shop bequ.store
   12  Dach und Fragen
   13  Seitenkopf und Rechtsseiten
   14  Fehlerseite
   15  Fuß
   16  Breiten ab 40, 48, 64, 72 rem
   17  Bewegung
   18  Rückfälle: reduzierte Bewegung, Druck
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --beton: #f3f3f0;
  --papier: #ffffff;
  --tinte: #0b0b0c;
  --graphit: #55565b;
  --linie: #e1e1dc;
  --linie-stark: #c4c4bd;
  --scan: #19c75a;              /* Signal: Endung .codes, Mitten der Ortungsmuster; nie als Text auf Hell */
  --scan-tinte: #0a7338;        /* Grün als Text und Fokus auf Hell */
  --scan-hauch: #e3f7ea;
  --auf-tinte: #ffffff;         /* Schrift auf Tinte */
  --knopf-hover: #26262a;
  --band: #0b0b0c;              /* Fuß */
  --band-text: #f2f2ef;
  --band-gedaempft: #b0b0b6;
  --band-linie: #2c2c32;
  --band-knopf-hover: #d9d9d4;
  --aufkleber: #ffffff;         /* Grund des Codes, auch im Dunkeln hell (scannbar) */
  --buehne: #ebebe7;            /* Grund des Produktbilds von bequ.store, auch im Dunkeln hell (schwarzer Hoodie) */
  --buehne-licht: rgba(255, 255, 255, .9);

  /* QR Code World: Verlauf seines Zeichens und Schein hinter dem Code (bequ-codes: lib/qcw/motiv.ts, qcw.css) */
  --qcw-1: #0f8a47;
  --qcw-2: #0c6c70;
  --qcw-3: #1d3a78;

  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-marke: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-qcw: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 9999px;
  --schatten: 0 1px 2px rgba(11, 11, 12, .05), 0 12px 32px -16px rgba(11, 11, 12, .18);
  --schatten-aufkleber: 0 1px 0 #e2e6e1, 0 2px 0 #cdd3ce, 0 22px 40px -22px rgba(11, 11, 12, .45);

  --container: 75rem;
  --lesebreite: 40rem;
  --rand: 1rem;
  --abstand-abschnitt: clamp(2.75rem, 5.5vw, 4.5rem);
  --dauer: .22s;
  --kurve: cubic-bezier(.2, .7, .2, 1);

  /* Einstieg: Innenabstand der beiden Welten, Platz für die Spange an der Naht */
  --welt-innen: clamp(1.5rem, 4vw, 3rem);
  --spange-platz: 2.4rem;

  /* Codefeld: Kantenlänge eines Moduls und Ruhezone um den Code (T11: ein Wert, ein Token) */
  --m: 5px;
  --q: 16px;

  /* Kopf steht und fährt nicht mit: kein Versatz für Sprungziele (T12) */
  --header-bar-h: 4.5rem;
  --header-h: 0px;
  --z-sprunglink: 10;
}

@media (prefers-color-scheme: dark) {
  :root {
    --beton: #09090b;
    --papier: #141417;
    --tinte: #f2f2ef;
    --graphit: #b0b0b6;
    --linie: #2c2c32;
    --linie-stark: #4a4a53;
    --scan: #1fd264;
    --scan-tinte: #4ae08a;
    --scan-hauch: #10261a;
    --auf-tinte: #0b0b0c;
    --knopf-hover: #d9d9d4;
    --band: #050506;              /* dunkler als Papier, damit der Fuß als Band abschließt */
    --band-text: #f2f2ef;
    --band-gedaempft: #b0b0b6;
    --band-linie: #33333a;
    --band-knopf-hover: #d9d9d4;
    --buehne: #d6d6d1;
    --buehne-licht: rgba(255, 255, 255, .5);
    --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .85);
    --schatten-aufkleber: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 44px -20px rgba(0, 0, 0, .9);
  }
}

/* 2 · Schriften (T26) ------------------------------------------------------
   Montserrat 800 nur für den Namen QR Code World in dessen Schriftzug.
   SIL Open Font License 1.1, Copyright 2011 The Montserrat Project Authors (assets/fonts/montserrat-OFL.txt).
   Alles andere in der Systemschrift; der Schriftzug bequ.codes ist Systemschrift 800 wie in der Verwaltung. */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* 3 · Reset und Basis ---------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--beton);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--tinte); text-decoration-color: var(--scan); text-decoration-thickness: .12em; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--tinte); }
:focus-visible { outline: 3px solid var(--scan-tinte); outline-offset: 3px; border-radius: .3rem; }
a, summary { touch-action: manipulation; }
::selection { background: var(--scan-hauch); }

/* 4 · Typografie und Hilfsklassen ---------------------------------------- */
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
p, li, dd { overflow-wrap: break-word; }
.titel-2 {
  font-family: var(--schrift-marke);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--graphit); max-width: 36rem; text-wrap: pretty; }
.augenbraue {
  display: inline-flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--graphit);
}
.augenbraue::before { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .5em; border-radius: 2px; background: var(--scan); }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprunglink {
  position: absolute; left: 1rem; top: -4rem; z-index: var(--z-sprunglink);
  padding: .6rem 1rem; border-radius: var(--radius-md);
  background: var(--papier); color: var(--tinte); box-shadow: var(--schatten);
}
.sprunglink:focus { top: 1rem; }
.symbol { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.zusammen { white-space: nowrap; }

/* Schriftzug bequ.codes: Systemschrift 800, Laufweite -0,025em, Endung im Scan-Grün (Leonard, 27.09.2026).
   Steht immer mit aria-hidden; den Namen tragen Link oder Vorlesetext (Logo, kein Fließtext). */
.wortmarke { font-family: var(--schrift-marke); font-weight: 800; letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.wortmarke-endung { color: var(--scan); }

/* Name QR Code World mit seinem Zeichen (Ortungsmuster im Verlauf), wie der Schriftzug auf qr-code-world.com.
   Inline auf der Grundlinie, damit ein Satzzeichen dahinter richtig sitzt. */
.qcw-name { white-space: nowrap; font-family: var(--schrift-qcw); font-weight: 800; letter-spacing: -.02em; }
.qcw-zeichen { width: .92em; height: .92em; flex: none; }
.qcw-name .qcw-zeichen { display: inline-block; vertical-align: -.1em; margin-right: .3em; }

/* 5 · Layout ------------------------------------------------------------- */
.huelle { width: min(100% - 2 * var(--rand), var(--container)); margin-inline: auto; }
.abschnitt { padding-block: var(--abstand-abschnitt); }
.abschnitt--papier { background: var(--papier); border-block: 1px solid var(--linie); }

/* 6 · Kopf (steht, fährt nicht mit; T12) --------------------------------- */
.kopf-innen { min-height: var(--header-bar-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marke { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinte); text-decoration: none; }
.marke .wortmarke { font-size: 1.45rem; }
.sprache {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .45rem 1rem;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-pill);
  color: var(--tinte); font-size: .9375rem; font-weight: 600; text-decoration: none;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}
.sprache:hover { background: var(--papier); border-color: var(--tinte); }

/* 7 · Knöpfe und Links --------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 1.0313rem; font-weight: 700; line-height: 1.2; text-decoration: none;
  transition: background-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.knopf .symbol { transition: transform var(--dauer) var(--kurve); }
.knopf:active { transform: scale(.98); }
.knopf-primaer { background: var(--tinte); color: var(--auf-tinte); }
.knopf-primaer:hover { background: var(--knopf-hover); color: var(--auf-tinte); }
.knopf:hover .symbol, .welt-qcw:hover .knopf .symbol { transform: translate(2px, -2px); }
.knopf-hell { background: var(--band-text); color: var(--band); }
.knopf-hell:hover { background: var(--band-knopf-hover); color: var(--band); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* 8 · Codefeld ------------------------------------------------------------
   Aufbau wie ein QR-Code: Ruhezone --q, Ortungsmuster 7 × 7 Module in drei Ecken (Ring 1, Abstand 1,
   Mitte 3), Taktlinien in Zeile und Spalte 6 zwischen ihnen, Ausrichtungsmuster 5 × 5 unten rechts.
   Formen wie das Zeichen von bequ codes: Ring in Tinte, Mitte im Scan-Grün; Taktpunkte rund wie die
   Module im Motiv von QR Code World. */
.codefeld {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius-xl);
  box-shadow: var(--schatten);
  padding: calc(var(--q) + 9 * var(--m)) var(--q) calc(var(--q) + 10 * var(--m));
}
.codefeld-inhalt { position: relative; min-width: 0; }
.ortung {
  position: absolute;
  width: calc(7 * var(--m)); height: calc(7 * var(--m));
  border: var(--m) solid var(--tinte);
  border-radius: calc(2.3 * var(--m));
}
.ortung::after {
  content: ""; position: absolute; inset: var(--m);
  border-radius: calc(1.05 * var(--m));
  background: var(--scan);
}
.ortung-ol { top: var(--q); left: var(--q); }
.ortung-or { top: var(--q); right: var(--q); }
.ortung-ul { bottom: var(--q); left: var(--q); }
.takt { position: absolute; }
.takt-oben {
  top: calc(var(--q) + 6 * var(--m));
  left: calc(var(--q) + 8 * var(--m));
  right: calc(var(--q) + 8 * var(--m));
  height: var(--m);
  background-image: radial-gradient(circle at calc(var(--m) / 2) 50%, var(--tinte) calc(var(--m) / 2 - .5px), transparent calc(var(--m) / 2 + .4px));
  background-size: calc(2 * var(--m)) var(--m);
  background-repeat: repeat-x;
}
.takt-links {
  display: none;
  left: calc(var(--q) + 6 * var(--m));
  top: calc(var(--q) + 8 * var(--m));
  bottom: calc(var(--q) + 8 * var(--m));
  width: var(--m);
  background-image: radial-gradient(circle at 50% calc(var(--m) / 2), var(--tinte) calc(var(--m) / 2 - .5px), transparent calc(var(--m) / 2 + .4px));
  background-size: var(--m) calc(2 * var(--m));
  background-repeat: repeat-y;
}
/* Ungerade Zahl von Modulen: beginnt und endet mit einem Punkt wie im Code */
@supports (width: round(down, 100%, 2px)) {
  .takt-oben { right: auto; width: calc(round(down, 100% - 2 * var(--q) - 17 * var(--m), 2 * var(--m)) + var(--m)); }
  .takt-links { bottom: auto; height: calc(round(down, 100% - 2 * var(--q) - 17 * var(--m), 2 * var(--m)) + var(--m)); }
}
.ausricht {
  position: absolute;
  right: calc(var(--q) + 4 * var(--m)); bottom: calc(var(--q) + 4 * var(--m));
  width: calc(5 * var(--m)); height: calc(5 * var(--m));
  border: var(--m) solid var(--tinte);
  border-radius: calc(1.6 * var(--m));
}
.ausricht::after { content: ""; position: absolute; inset: var(--m); border-radius: 50%; background: var(--scan); }

/* 9 · Einstieg der Startseite: zwei Welten -------------------------------
   Leonard, 28.09.2026, 11:12 Uhr: Richtung „C: Zwei Welten“. Links bequ codes auf Papier, rechts die Welt von
   QR Code World in ihrem Verlauf mit dem Code im Sucher; das Zeichen von bequ codes hält als Spange die Naht.
   Schriftgrößen links folgen der Breite des Feldes (Container-Einheiten), davor ein Rückfall ohne sie. */
.welten { padding-block: .25rem var(--abstand-abschnitt); }
.welten-feld {
  position: relative; display: grid;
  border: 1px solid var(--linie); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--schatten);
}
.welt { position: relative; min-width: 0; padding: var(--welt-innen); }
.welt-marke {
  display: grid; align-content: center;
  padding-bottom: calc(var(--welt-innen) + var(--spange-platz));
  background: var(--papier); container-type: inline-size;
}
.welt-marke .augenbraue { margin-bottom: 1rem; }
.welt-titel { font-family: var(--schrift-marke); font-weight: 800; color: var(--tinte); }
.welt-wortmarke { display: block; font-size: clamp(2.8rem, 8vw, 6.1rem); font-size: min(17.2cqi, 6.4rem); line-height: .92; }
.welt-satz { display: block; margin-top: .32em; font-size: clamp(1.5rem, 6vw, 2.4rem); font-size: min(10cqi, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.welt-marke .lead { margin-top: 1.4rem; max-width: 30rem; font-size: 1.0625rem; }
.welt-sitz { margin-top: 1.1rem; font-size: .9375rem; font-weight: 600; color: var(--graphit); }
.welt-qcw {
  display: grid; justify-items: center; align-content: center; gap: 1.25rem;
  padding-top: calc(var(--welt-innen) + var(--spange-platz));
  color: #ffffff; text-align: center; text-decoration: none;
  background:
    radial-gradient(60% 50% at 28% 18%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 70%),
    linear-gradient(140deg, var(--qcw-1) 0%, var(--qcw-2) 52%, var(--qcw-3) 100%);
}
.welt-qcw:focus-visible { outline: 3px solid #ffffff; outline-offset: -8px; border-radius: var(--radius-lg); }
.welt-qcw-kopf { display: inline-flex; align-items: center; gap: .8rem; }
.welt-kachel { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: .95rem; background: #ffffff; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.welt-kachel .qcw-zeichen { width: 2rem; height: 2rem; }
.welt-qcw-name { font-family: var(--schrift-qcw); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.welt-buehne { position: relative; display: grid; place-items: center; width: min(15rem, 70%); margin-block: .5rem; }
.welt-aufkleber {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 9%; background: var(--aufkleber); box-shadow: var(--schatten-aufkleber);
}
.welt-aufkleber img { width: 100%; height: auto; }
/* Vier Ecken eines Kamerasuchers um den Code, wie auf qr-code-world.com */
.welt-sucher { position: absolute; inset: -14px; pointer-events: none; }
.welt-sucher span { position: absolute; width: 18%; height: 18%; border: 3px solid #ffffff; }
.welt-sucher span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.welt-sucher span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; }
.welt-sucher span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; }
.welt-sucher span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
/* Beim Zeigen läuft einmal der Scan-Strich über den Code */
.qcw-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.qcw-scan::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 2px; border-radius: 2px; background: var(--scan); box-shadow: 0 0 12px 2px rgba(25, 199, 90, .55); }
.welt-adresse { font-family: var(--schrift-mono); font-size: .9375rem; font-weight: 600; color: #ffffff; }
.knopf-weiss { background: #ffffff; color: #0b0b0c; }
.welt-qcw:hover .knopf-weiss { background: #ecece8; }
/* Die Spange: das Zeichen von bequ codes auf der Naht (Handy oben am Verlauf, Rechner links daneben) */
.welten-spange {
  position: absolute; z-index: 2; left: 50%; top: 0; width: 4.25rem; height: 4.25rem;
  transform: translate(-50%, -50%);
  border-radius: 1.2rem; background: #0b0b0c;
  box-shadow: 0 0 0 6px var(--papier), 0 14px 30px -12px rgba(0, 0, 0, .5);
}
.welten-spange::before { content: ""; position: absolute; inset: 22.6%; border: .47rem solid #ffffff; border-radius: .55rem; }
.welten-spange::after { content: ""; position: absolute; inset: 39%; border-radius: .23rem; background: #19c75a; }

/* 10 · QR Code World: Antwort links, Merkmale rechts (der Code steht im Einstieg) --- */
.qcw-raster { display: grid; gap: 2.5rem; }
.qcw-raster > * { min-width: 0; }
.antwort { margin-top: 1rem; max-width: var(--lesebreite); font-size: 1.125rem; color: var(--graphit); text-wrap: pretty; }
.qcw-einleitung .textlink { margin-top: 1rem; margin-left: -.25rem; }
.merkmale { list-style: none; display: grid; gap: 1.35rem 2.25rem; }
.merkmal { position: relative; padding-left: 1.95rem; }
.merkmal > * { min-width: 0; }
/* Kleines Ortungsmuster als Aufzählungszeichen: 14 px = 7 Module zu 2 px */
.merkmal::before {
  content: ""; position: absolute; left: 0; top: .28rem;
  width: 14px; height: 14px;
  border: 2px solid var(--tinte); border-radius: 4.6px;
}
.merkmal::after {
  content: ""; position: absolute; left: 4px; top: calc(.28rem + 4px);
  width: 6px; height: 6px; border-radius: 2px; background: var(--scan);
}
.merkmal-titel { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.merkmal p { margin-top: .25rem; color: var(--graphit); font-size: 1rem; }

/* 11 · Shop bequ.store -----------------------------------------------------
   Leonard, 28.09.2026, 12:01 Uhr: bequ.codes macht Werbung für den Shop. Produktbild aus dem Shop (eigenes Bild,
   durchsichtiger Grund) auf einer hellen Bühne, daneben Text und Knopf. Die Plakette oben links sagt, woher der Code
   auf dem Hoodie kommt; sie wiederholt den Text und bleibt darum für Vorleseprogramme stumm. */
.abschnitt--anschluss { padding-top: 0; }
.laden {
  display: grid;
  background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--schatten);
}
.laden > * { min-width: 0; }
/* Oben Platz für die Plakette (1rem Abstand + 2,3rem Höhe), damit sie am Handy nicht auf den Kapuzen liegt */
.laden-buehne {
  position: relative; display: grid; place-items: center;
  padding: 3.3rem clamp(1rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
  background: radial-gradient(60% 52% at 50% 45%, var(--buehne-licht), rgba(255, 255, 255, 0) 72%), var(--buehne);
}
.laden-buehne img { width: min(100%, 30rem); height: auto; }
.laden-plakette {
  position: absolute; left: 1rem; top: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .85rem .35rem .4rem;
  border-radius: var(--radius-pill); background: #ffffff; color: #0b0b0c;
  font-size: .875rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11, 11, 12, .08), 0 8px 18px -10px rgba(11, 11, 12, .4);
}
.laden-zeichen { width: 1.6rem; height: 1.6rem; }
.laden-plakette .wortmarke { font-size: 1rem; }
.laden-text { display: grid; align-content: center; justify-items: start; gap: 1rem; padding: var(--welt-innen); }
.laden-text .antwort { margin-top: 0; }
.laden-text .knopf { margin-top: .5rem; }

/* 12 · Dach und Fragen --------------------------------------------------- */
.fragen-raster { display: grid; gap: 2.5rem; }
.fragen-raster > * { min-width: 0; }
.fragen-kopf { margin-bottom: 1.75rem; }
.dach { display: grid; gap: 1rem; align-content: start; }
.dach-stufen { list-style: none; display: grid; gap: 1.75rem; }
.dach-stufe {
  position: relative; display: grid; gap: .3rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--beton);
  border: 1px solid var(--linie); border-radius: var(--radius-lg);
}
/* Verbindung aus Taktpunkten zwischen den Stufen */
.dach-stufe + .dach-stufe::before {
  content: ""; position: absolute; left: 1.6rem; top: calc(-1.75rem - 1px); width: 6px; height: 1.75rem;
  background-image: radial-gradient(circle at 50% 3px, var(--tinte) 2.4px, transparent 3.2px);
  background-size: 6px 9px; background-position: 0 1px; background-repeat: repeat-y;
}
.dach-art { font-size: .875rem; font-weight: 600; color: var(--graphit); }
.dach-name { font-family: var(--schrift-marke); font-weight: 800; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.02em; }
.dach-name .wortmarke { font-size: 1.45rem; }
.dach-name .qcw-name { font-size: 1.3rem; }
/* Letzte Stufe mit zwei Angeboten untereinander, getrennt durch eine Linie */
.dach-angebote { list-style: none; display: grid; gap: .8rem; margin-top: .3rem; }
.dach-angebot { display: grid; gap: .3rem; }
.dach-angebot + .dach-angebot { padding-top: .8rem; border-top: 1px solid var(--linie); }
.dach-zusatz { font-size: .9375rem; color: var(--graphit); }
.dach figcaption { font-size: .9375rem; color: var(--graphit); max-width: 30rem; }
.faq { display: grid; gap: .75rem; }
.faq-item { background: var(--beton); border: 1px solid var(--linie); border-radius: var(--radius-lg); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .95rem 1.25rem;
  font-weight: 700; line-height: 1.35;
  border-radius: var(--radius-lg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--tinte), var(--tinte)) center / 100% 2px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) center / 2px 100% no-repeat;
  transition: transform var(--dauer) var(--kurve);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--papier); }
.faq-answer { padding: 0 1.25rem 1.2rem; color: var(--graphit); }

/* 13 · Seitenkopf und Rechtsseiten --------------------------------------- */
.seitenkopf { padding-block: .25rem 0; }
.seitenkopf .codefeld { padding-bottom: calc(var(--q) + 3 * var(--m)); }
.seitenkopf h1 { margin-top: .9rem; font-family: var(--schrift-marke); font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; }
.seitenkopf .lead { margin-top: .9rem; }
.recht { padding-block: clamp(1.25rem, 3vw, 2.25rem) var(--abstand-abschnitt); }
.recht-zeile { display: grid; gap: .5rem 2.5rem; padding-block: 1.4rem; border-top: 1px solid var(--linie); }
.recht-zeile > * { min-width: 0; }
.recht-zeile h2 { font-family: var(--schrift-marke); font-size: 1.125rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.recht-text { max-width: 44rem; }
.recht-text p + p, .recht-text p + ul, .recht-text ul + p { margin-top: .75rem; }
.recht-text ul { padding-left: 1.2rem; }
.recht-text li + li { margin-top: .3rem; }
.recht-fuss { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding-top: 1.4rem; border-top: 1px solid var(--linie); color: var(--graphit); }
.recht-fuss a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* 14 · Fehlerseite ------------------------------------------------------- */
.fehlerseite { padding-block: .25rem var(--abstand-abschnitt); }
.fehlerseite h1 { margin-top: .9rem; font-family: var(--schrift-marke); font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; }
.fehlerseite .lead { margin-top: .9rem; }
.fehlerseite .knopf-reihe { margin-top: 1.75rem; }
.textlink { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding-inline: .25rem; font-weight: 700; }

/* 15 · Fuß (dunkles Band: jeder Text deklariert, T18) --------------------- */
.fuss { background: var(--band); color: var(--band-gedaempft); padding-block: 3rem 1.5rem; }
.fuss h2, .fuss p, .fuss li, .fuss address, .fuss small { color: var(--band-gedaempft); font-style: normal; }
.fuss a:not(.knopf) { color: var(--band-text); text-decoration-color: var(--scan); }
.fuss a:not(.knopf):hover { text-decoration-color: var(--band-text); }
.fuss .wortmarke { color: var(--band-text); font-size: 1.6rem; }
.fuss .wortmarke-endung { color: var(--scan); }
.fuss-schluss { display: grid; gap: 1.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--band-linie); }
.fuss-schluss .fuss-titel { color: var(--band-text); font-family: var(--schrift-marke); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; }
.fuss-schluss .knopf { justify-self: start; }
.fuss-raster { display: grid; gap: 1.75rem; padding-top: 2rem; }
.fuss-raster > * { min-width: 0; }
.fuss-marke { display: grid; gap: .8rem; }
.fuss-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.fuss-links a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 600; }
/* Externer Link (bequ.store): Pfeil rückt beim Zeigen wie in den Knöpfen */
.fuss-links .symbol { transition: transform var(--dauer) var(--kurve); }
.fuss-links a:hover .symbol { transform: translate(2px, -2px); }
.fuss-unten { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between; margin-top: 1.5rem; font-size: .9375rem; }

/* 16 · Breiten ----------------------------------------------------------- */
@media (min-width: 40rem) {
  :root { --rand: 1.5rem; --m: 6px; --q: 20px; }
}
@media (min-width: 48rem) {
  :root { --m: 7px; --q: 24px; }
  .codefeld { padding-left: calc(var(--q) + 9 * var(--m)); padding-right: calc(var(--q) + 4 * var(--m)); }
  .takt-links { display: block; }
  .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laden { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .recht-zeile { grid-template-columns: minmax(0, 15rem) minmax(0, 44rem); }
  .fuss-schluss { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fuss-schluss .knopf { justify-self: end; }
}
@media (min-width: 64rem) {
  :root { --rand: 2rem; }
  .welten-feld { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 35rem; }
  .welt-marke { padding: var(--welt-innen); padding-right: calc(var(--welt-innen) + 2rem); }
  .welt-qcw { padding: var(--welt-innen); padding-left: calc(var(--welt-innen) + 2rem); }
  .welt-qcw .welten-spange { left: 0; top: 50%; }
  .welt-satz { font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-size: min(6.3cqi, 2.6rem); }
  .qcw-raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4.5rem; align-items: start; }
  .qcw-raster .merkmale { padding-top: .6rem; }
  .fragen-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4.5rem; align-items: start; }
  .fuss-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .fuss-links { justify-content: flex-end; }
}
@media (min-width: 72rem) {
  :root { --m: 8px; --q: 28px; }
}

/* 17 · Bewegung (T11, G4) ---------------------------------------------------
   Beim Laden rastet die Spange auf der Naht ein; beim Zeigen auf die Welt von QR Code World läuft einmal der
   Scan-Strich über den Code. Nur transform und opacity; der Text steht sofort. */
@media (prefers-reduced-motion: no-preference) {
  .welten-spange { animation: spange .55s cubic-bezier(.2, .8, .2, 1) .25s both; }
  .welt-qcw:hover .qcw-scan, .welt-qcw:focus-visible .qcw-scan { animation: scannen 1.2s cubic-bezier(.45, 0, .2, 1) .1s 1 both; }
}
@keyframes spange { from { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes scannen {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100%); }
}

/* 18 · Rückfälle --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .kopf, .sprache, .fuss-schluss, .knopf, .sprunglink { display: none !important; }
  body { background: #fff; color: #000; }
  .codefeld, .welten-feld, .laden, .faq-item, .dach-stufe { box-shadow: none; }
  .faq-answer { display: block; }
}