/* Beide Familien liegen als Variable Font vor: eine Datei traegt saemtliche
   Schnitte. Bis zum 30.07.2026 standen trotzdem sechs @font-face-Regeln auf sechs
   Dateinamen — die vier Inter-Dateien sind byteidentisch (md5
   260c81a4759baf163c025001c4f27872, je 48.256 Byte), die beiden Cormorant ebenso
   (c47ff12887a36dac62f887a6fdb51066). Der Browser laedt jetzt zwei Dateien statt
   sechs; der Bereich font-weight deckt alle benutzten Schnitte aus derselben Datei ab. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #08060a;
  --bg-deep: #050407;
  --surface: #100a0e;
  --surface-raised: #171015;
  --ink: #f4eee5;
  --muted: #b9aca5;
  --dim: #8c7f79;
  --gold: #f0b65f;
  --gold-light: #ffd38a;
  --ember: #f15b2a;
  --teal: #79a497;
  --line: rgba(240, 182, 95, 0.23);
  --line-soft: rgba(255, 255, 255, 0.09);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --content: min(86rem, calc(100vw - clamp(2rem, 8vw, 9rem)));
  --reading: 46rem;
  --header-height: 4.625rem;
  --header-height-scrolled: 4.125rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  min-height: 100vh;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 87% 4%, rgba(241, 91, 42, 0.11), transparent 28rem),
    radial-gradient(circle at 11% 28%, rgba(240, 182, 95, 0.045), transparent 34rem),
    var(--bg);
  color: var(--ink);
  font: 400 1rem/1.7 var(--sans);
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
p { text-wrap: pretty; }

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  line-height: 0.95;
  text-wrap: balance;
}

h1 { font-size: clamp(3.3rem, 7.8vw, 8.8rem); letter-spacing: -0.052em; }
h2 { font-size: clamp(2.5rem, 5vw, 5.6rem); letter-spacing: -0.04em; }
h3 { font-size: clamp(1.8rem, 3vw, 3.15rem); letter-spacing: -0.025em; }

::selection { background: var(--gold); color: #190b07; }

:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: -6rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  background: var(--gold-light);
  color: #170a06;
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.test-banner {
  position: relative;
  z-index: 160;
  min-height: 2rem;
  display: grid;
  place-items: center;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid rgba(255, 211, 138, 0.38);
  background: #5c2115;
  color: #fff5e3;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}

.site-header {
  --site-header-current-height: var(--header-height);
  position: sticky;
  z-index: 120;
  top: 0;
  width: 100%;
  min-height: var(--site-header-current-height);
  border-bottom: 1px solid transparent;
  background: rgba(8, 6, 10, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: min-height 260ms cubic-bezier(.2,.75,.2,1), background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.site-header.is-scrolled {
  --site-header-current-height: var(--header-height-scrolled);
  border-bottom-color: var(--line-soft);
  background: rgba(8, 6, 10, 0.94);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.22);
}
.header-inner {
  position: relative;
  top: 0;
  width: var(--content);
  min-height: var(--site-header-current-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  animation: site-header-enter 820ms cubic-bezier(.16,.82,.2,1) both;
  transition: min-height 260ms cubic-bezier(.2,.75,.2,1);
}
.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold);
  text-decoration: none;
}
.brand-ring {
  width: 2.8rem;
  height: 2.8rem;
  filter: drop-shadow(0 0 14px rgba(240, 182, 95, 0.25));
  transition: filter 350ms ease;
}
.brand-orbit { transform-origin: 0 0; animation: brand-orbit 48s linear infinite; }
/* Aus der Ersatzseite uebernommen: Beim Zeigen leuchtet das Signet staerker und die
   Umlaufbahn zieht an. Nur Filter und Dauer, keine Layoutwerte — der Kopf bleibt ruhig. */
.brand:hover .brand-ring,
.brand:focus-visible .brand-ring { filter: drop-shadow(0 0 20px rgba(255, 135, 52, 0.55)); }
.brand:hover .brand-orbit,
.brand:focus-visible .brand-orbit { animation-duration: 16s; }
.brand-wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-wordmark strong {
  color: var(--ink);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
  /* Aus der Ersatzseite uebernommen: ein Lichtstreif wandert alle sieben Sekunden
     einmal ueber den Schriftzug. Der Verlauf ist ueberwiegend die normale Textfarbe;
     nur das schmale Band bei 49% ist Gold, deshalb wirkt es wie ein Reflex und nicht
     wie ein farbiger Schriftzug. background-size 240% gibt dem Band Platz zum Wandern.
     box-decoration-break/padding wie bei der Goldschrift: sonst schneidet die Kante
     der Textbox das letzte "r" von "Amir" an. */
  background: linear-gradient(105deg, var(--ink) 0%, var(--ink) 35%, #ffd38a 49%, var(--ink) 62%, var(--ink) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: 0.06em;
  margin-right: -0.06em;
  animation: brand-shimmer 7s ease-in-out 1.4s infinite;
}
.brand-wordmark span {
  margin-top: 0.22rem;
  color: var(--dim);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
}
.site-navigation {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.8rem);
}
.site-navigation a {
  position: relative;
  padding: 0.6rem 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-navigation a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.3rem;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--ember));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.site-navigation a:hover,
.site-navigation a:focus-visible,
.site-navigation a[aria-current="page"] { color: var(--gold-light); }
.site-navigation a:hover::after,
.site-navigation a:focus-visible::after,
.site-navigation a[aria-current="page"]::after { transform: scaleX(1); }
.site-navigation .nav-cta {
  padding: 0.58rem 0.78rem;
  border: 1px solid var(--line);
  color: var(--gold-light);
}
.site-navigation .nav-cta::after { display: none; }
.menu-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: none;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle span { width: 19px; height: 1px; background: currentColor; }
.mobile-menu-heading { display: none; }
.menu-backdrop { display: none; }

main > section,
main > article,
.anchor-target { scroll-margin-top: calc(var(--header-height) + 1rem); }

.content-width { width: var(--content); margin-inline: auto; }
.reading-width { width: min(var(--reading), 100%); }
.section {
  position: relative;
  width: var(--content);
  margin-inline: auto;
  padding-block: clamp(5rem, 10vw, 9.5rem);
}
.section--bordered { border-top: 1px solid var(--line-soft); }
.section-kicker {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section-lead {
  max-width: 45rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.8rem);
}
.section-heading-row p { margin: 0; color: var(--muted); }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.88rem 1.25rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.button:hover { border-color: var(--gold); transform: translateY(-2px); }
.button-primary { border-color: var(--gold); background: var(--gold); color: #170a07; }
.button-primary:hover { background: var(--gold-light); }
.button-wide { width: 100%; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--gold-light);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-underline-offset: 0.35rem;
  text-transform: uppercase;
}

.subpage-hero {
  width: var(--content);
  margin: 0 auto;
  display: grid;
  align-content: start;
  min-height: clamp(27rem, 58vh, 42rem);
  padding-block: clamp(3rem, 5vw, 5rem);
}
.subpage-hero-copy { max-width: 62rem; }
.subpage-hero h1 { margin-top: 1rem; }
.subpage-hero .section-lead { max-width: 51rem; }
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--dim);
  font-size: 0.78rem;
}
.breadcrumbs a { color: var(--muted); }

/* Benny, 06.08.2026: „die pdfs wirken etwas klein auf desktop". Gemessen bei
   1600 px: Die Startseite gibt ihrem Bild 784 px, diese Seite nur 522 — dieselben
   Cover mussten deshalb kleiner ausfallen (247–266 px breit gegen 320–341 auf der
   Startseite). Die Ursache lag nicht an den Covern, sondern an dieser Spalte.
   Der Textspalte bleibt genug: Die Überschrift bricht weiterhin in zwei Zeilen. */
.analyses-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(28rem, 0.8fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5.5rem);
}
/* Benny, 04.08.2026: „schau mal wie weit unten das anfaengt". Der Text war an
   die Unterkante gebunden, damit er neben dem hohen Bild sitzt. Seit die
   Ueberschrift kleiner ist, entstand daraus oben ein Loch: Der Titel begann bei
   y = 302 px, auf allen anderen Unterseiten bei 227. Oben ausgerichtet stimmt
   es wieder ueberein. */
.analyses-hero .subpage-hero-copy { align-self: start; }
/* Benny, 04.08.2026: „etwas gross“ — die Seite erbte die globale h1-Groesse
   und kam bei 1280 px auf 99,8 px. Eine eigene, ruhigere Stufe fuer diese
   Ueberschrift; die Frage soll einladen, nicht schreien. */
.subpage-hero.analyses-hero h1 { font-size: clamp(2.6rem, 5.2vw, 5.4rem); line-height: 0.96; }
/* Benny, 04.08.2026: „Schreib, bevor etwas unklar bleibt.“ stand mit der
   globalen h1-Groesse ueber zwei Zeilen. Eine Stufe kleiner passt der Satz
   auf eine Zeile — 190 px Hoehe werden 68. */
.contact-page .subpage-hero h1 { font-size: clamp(2.8rem, 5.6vw, 6rem); line-height: 0.96; }
.analyses-hero-visual { position: relative; min-height: clamp(27rem, 38vw, 37rem); perspective: 1400px; isolation: isolate; }
/* Die ruhige Scheibe hinter den Covern. Sie fehlte hier, während die Startseite
   sie hat (.report-atelier::before) — das war der zweite Grund, warum die
   Anordnung dort satter wirkt: Der gestrichelte Ring allein hat kein Gewicht. */
.analyses-hero-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 48%;
  width: min(32rem, 38vw);
  aspect-ratio: 1;
  border: 1px solid rgba(240, 182, 95, 0.14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 182, 95, 0.06), transparent 62%);
  box-shadow: 0 0 100px rgba(240, 182, 95, 0.06), inset 0 0 100px rgba(0, 0, 0, 0.54);
  transform: translate(-50%, -50%);
}
.analyses-hero-orbit { position: absolute; z-index: -1; inset: 4% 3% 7%; border: 1px dashed rgba(240, 182, 95, 0.18); border-radius: 50%; animation: analyses-orbit 42s linear infinite; }
/* Benny, 06.08.2026: „die punkte im kreis sind zb nicht alle auf einer linie und
   es sieht so aus als würden sie einfach schweben."
   Stimmte, und zwar nachrechenbar. Die Punkte standen auf frei gewählten
   Prozentwerten INNERHALB des Kastens (`left: 13%; top: 15%`) — der Ring ist aber
   die ELLIPSE, die diesem Kasten einbeschrieben ist. Zwei der fünf lagen 11 % bzw.
   6,5 % außerhalb davon.
   Jetzt sitzt jeder Punkt exakt auf der Ellipse. Formel für den Mittelpunkt bei
   Winkel θ (0° = rechts, im Uhrzeigersinn, weil y nach unten zählt):
       left = 50 % + 50 % · cos θ      top = 50 % + 50 % · sin θ
   Das gilt unabhängig vom Seitenverhältnis, weil 50 % der Breite und 50 % der Höhe
   genau die beiden Halbachsen sind. Das `translate(-50%, -50%)` rückt den Punkt
   von seiner Ecke auf seinen Mittelpunkt — ohne das läge er wieder daneben.
   Wer Winkel ändert: nachrechnen, nicht schätzen. Die Prozentwerte sind fest
   eingetragen statt per cos()/sin(), damit sie auch in älteren Browsern gelten. */
.analyses-hero-orbit::before,
.analyses-hero-orbit::after,
.analyses-hero-orbit i { content: ""; position: absolute; width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 1rem var(--gold); transform: translate(-50%, -50%); }
/* θ = 218° */
.analyses-hero-orbit::before { left: 10.6%; top: 19.22%; }
/* θ = 32° */
.analyses-hero-orbit::after { left: 92.4%; top: 76.5%; background: var(--ember); box-shadow: 0 0 1rem var(--ember); }
/* θ = 180° */
.analyses-hero-orbit i:nth-child(1) { left: 0; top: 50%; background: var(--teal); box-shadow: 0 0 1rem var(--teal); }
/* θ = 296° */
.analyses-hero-orbit i:nth-child(2) { left: 71.92%; top: 5.06%; width: 0.3rem; }
/* θ = 70° */
.analyses-hero-orbit i:nth-child(3) { left: 67.1%; top: 96.98%; width: 0.25rem; background: var(--ink); }
.analyses-hero-visual > a { position: absolute; top: 50%; left: 50%; width: clamp(12rem, 17vw, 19rem); color: var(--ink); text-decoration: none; transform-origin: 50% 100%; transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 260ms ease, opacity 260ms ease; }
.analyses-hero-visual > a img { display: block; width: 100%; height: auto; border: 1px solid rgba(240, 182, 95, 0.3); background: #141118; box-shadow: 0 2.5rem 5rem rgba(0,0,0,.68); transition: transform 260ms ease; }
.analyses-hero-visual > a span { position: absolute; right: 0.55rem; bottom: 0.55rem; padding: 0.4rem 0.5rem; border: 1px solid rgba(255,211,138,.3); background: rgba(8,6,10,.88); color: var(--gold-light); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
/* Benny, 06.08.2026: „die pdfs etwas kleiner und höher". Die Breite kam von
   19vw auf 17vw zurück (rund 320 auf 285 px), und die Y-Verschiebungen sind um
   je 8 Prozentpunkte negativer — das hebt den Fächer im Bildfeld an, ohne die
   Staffelung untereinander zu verändern. */
.analyses-hero-visual > a[data-analysis-cover="vertiefung"] { z-index: 1; opacity: 0.78; filter: saturate(.78) brightness(.76); transform: translate(-92%, -56%) rotate(-12deg) translateZ(-65px) scale(.9); }
/* Die Partner-Karte ragt am weitesten nach rechts und lief in den Fortschritts-
   strich am Fensterrand (`.cycle-progress`, beginnt bei x = 1496 auf 1536 px).
   Benny: „so dass sie auch nicht den scroll strich überdecken."
   -18 % statt -7 % hält sie davon frei; die Staffelung bleibt erhalten. */
.analyses-hero-visual > a[data-analysis-cover="partner"] { z-index: 2; opacity: 0.88; filter: saturate(.86) brightness(.84); transform: translate(-18%, -55%) rotate(11deg) translateZ(-25px) scale(.94); }
.analyses-hero-visual > a[data-analysis-cover="basis"] { z-index: 4; transform: translate(-50%, -60%) rotate(-1deg) translateZ(60px); }
.analyses-hero-visual > a:hover,
.analyses-hero-visual > a:focus-visible { z-index: 6; opacity: 1; filter: none; outline: 2px solid var(--gold-light); outline-offset: 0.4rem; }
.analyses-hero-visual > a:hover img,
.analyses-hero-visual > a:focus-visible img { transform: scale(1.04); }

.finder-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.product-card {
  position: relative;
  min-width: 0;
  min-height: 34rem;
  display: flex;
  flex-direction: column;
  padding: clamp(1.55rem, 3vw, 3.2rem);
  background:
    radial-gradient(circle at 100% 0, rgba(241, 91, 42, 0.08), transparent 14rem),
    var(--surface);
}
.product-card--bundle {
  grid-column: 1 / -1;
  min-height: auto;
  display: grid;
  /* Benny, 03.08.2026: Die Mindestbreiten (12+16+15 rem plus Abstand) waren
     breiter als die Karte je war — die rechte Spalte lief 183 px ueber den
     Rand und wurde abgeschnitten. Flexible Spalten koennen mitschrumpfen. */
  /* 03.08.2026: Mehr Breite fuer die Titelbilder — sie sind das Verkaufsargument
     der Paketkarte. Gemessen: Cover 144x186 -> 193x250 px, und sie ueberlappen
     sich dabei weniger (60 % -> 56 %), man sieht also mehr vom hinteren. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.88fr);
  /* Benny, 03.08.2026: eine Zeile mehr — die Merkmale sitzen jetzt direkt unter
     der Zusammenfassung (Zeile 5), der Rest der Hoehe faellt in die dehnbare
     Zeile 6 vor dem Link. Vorher sass alles in einer 392 px hohen Leerzeile. */
  grid-template-rows: auto auto auto auto auto 1fr auto;
  /* Der grosszuegige Spaltenabstand kann bleiben, seit die Spalten flexibel
     sind — sie schrumpfen jetzt mit, statt ueber den Rand zu laufen. */
  gap: 0.65rem clamp(1.5rem, 3.4vw, 3.4rem);
  background:
    linear-gradient(120deg, rgba(240, 182, 95, 0.1), transparent 45%),
    var(--surface-raised);
}
.product-card--bundle > * { grid-column: 2; }
.product-card--bundle .product-card-topline { grid-column: 2 / 4; grid-row: 1; }
.product-card--bundle .bundle-report-covers { grid-column: 1; grid-row: 1 / 8; align-self: stretch; min-height: 0; }
.product-card--bundle .bundle-report-covers figure { top: 35%; }
/* Benny, 03.08.2026: Seit der Behaelter ueber die volle Kartenhoehe geht, wurde
   aus dem Zierring eine lange schmale Ellipse — gemessen 150 x 587 px, also ein
   Verhaeltnis von 0,26. Der Ring haengt jetzt nicht mehr an der Behaelterhoehe,
   sondern ist ein echter Kreis um die beiden Titelbilder. */
.product-card--bundle .bundle-report-covers::before {
  inset: auto;
  /* 03.08.2026: nicht mittig, sondern auf Hoehe des Textes daneben — in der
     hohen Spalte sass das Paar sonst allein in der Mitte des Nichts. */
  top: 35%;
  left: 50%;
  /* Die Deckelung greift auf dem Handy, wo der Behaelter breit wird — ohne sie
     stiesse der Kreis dort genau an den Kartenrand. */
  width: min(118%, 20rem);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.product-card--bundle h3 {
  grid-row: 2;
  /* Benny, 23.08.2026: "Komplettpaket" berührte den Preis. Gemessen (Textrechteck,
     nicht Elementkasten): Das Wort ist immer breiter als seine Spalte und lebt im
     Spaltenabstand — bis 1.600 px Breite mit 2 px Luft. Darüber wächst die Schrift
     bis 3,15 rem weiter, die Karte aber nicht mehr (899 px): ab ~1.610 px liefen
     13–15 px in den Preis, live wie lokal. Im gezoomten Browser (kleinere CSS-Breite)
     fiel das nicht auf. Obergrenze 2,85 rem: bis 1.520 px unverändert (3 vw),
     darüber bleibt das Wort mit ≥ 18 px Abstand vor dem Preis. */
  font-size: clamp(1.8rem, 3vw, 2.85rem);
}
.product-card--bundle .product-question { grid-row: 3; }
.product-card--bundle .product-summary { grid-row: 4; }
.product-card--bundle .price-composition { grid-column: 3; grid-row: 2 / 5; grid-template-columns: 1fr; align-self: stretch; margin: 0; }
.product-card--bundle .price-supporting { padding: 0.85rem 0 0; border-top: 1px solid var(--line-soft); border-left: 0; }
.product-card--bundle .fact-chips { grid-column: 2 / 4; grid-row: 5; align-self: start; margin-top: 0.4rem; }
.product-card--bundle .text-link { grid-column: 2; grid-row: 7; }
.bundle-report-covers { position: relative; width: 100%; min-height: 21rem; align-self: center; isolation: isolate; }
.bundle-report-covers::before { content: ""; position: absolute; z-index: -1; inset: 16% 8%; border: 1px solid rgba(240, 182, 95, 0.18); border-radius: 50%; box-shadow: 0 0 4rem rgba(241, 91, 42, 0.12), inset 0 0 3rem rgba(240, 182, 95, 0.05); }
.bundle-report-covers figure { position: absolute; top: 50%; width: 66%; margin: 0; transition: transform 360ms cubic-bezier(.2,.8,.2,1), filter 260ms ease; }
.bundle-report-covers figure:first-child { z-index: 1; left: 0; transform: translateY(-50%) rotate(-8deg); }
.bundle-report-covers figure:last-child { z-index: 2; right: 0; transform: translateY(-48%) rotate(8deg); }
.bundle-report-covers:hover figure:first-child { transform: translate(-0.4rem, -52%) rotate(-10deg); }
.bundle-report-covers:hover figure:last-child { transform: translate(0.4rem, -50%) rotate(10deg); }
.bundle-report-covers img { display: block; width: 100%; height: auto; border: 1px solid rgba(240, 182, 95, 0.3); background: #141118; box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.58); }
.bundle-report-covers figcaption { position: absolute; right: 0.45rem; bottom: 0.45rem; padding: 0.35rem 0.45rem; border: 1px solid rgba(255, 211, 138, 0.28); background: rgba(8, 6, 10, 0.88); color: var(--gold-light); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.product-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.1rem;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.product-badge { color: var(--teal); }
.product-card h3 { max-width: 18ch; }
.product-question { margin: 1.3rem 0 0; color: var(--gold-light); font-weight: 600; }
.product-summary { max-width: 39rem; margin: 0.8rem 0 0; color: var(--muted); }
.price-composition {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1.25rem;
  align-items: stretch;
  margin: 2rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.price-offer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-offer > span {
  display: block;
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.price-amount {
  display: block;
  margin-top: 0.35rem;
  color: var(--gold-light);
  font-family: var(--serif);
  /* Benny, 03.08.2026: eine Spur kleiner und mit etwas mehr Luft nach unten —
     die Unterkante der Ziffern stand nur 10 px ueber der Zeile darunter. */
  font-size: clamp(2.6rem, 4vw, 4.1rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.price-offer small {
  display: block;
  margin-top: 0.95rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}
.price-supporting {
  min-width: 0;
  display: grid;
  gap: 0.55rem;
  align-content: center;
  padding-left: 1.2rem;
  border-left: 1px solid var(--line-soft);
}
.price-supporting p { margin: 0; }
.price-anchor,
.price-context-line,
.price-scope,
.price-saving-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
}
.price-anchor span,
.price-context-line span,
.price-scope span,
.price-saving-line span,
.component-label span {
  color: var(--dim);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.price-anchor strong,
.price-context-line strong,
.price-saving-line strong,
.component-label strong {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: right;
}
.price-anchor strong,
.price-context-line strong { white-space: nowrap; }
/* Benny, 03.08.2026: Die Umfangsangabe stand als Label-Wert-Paar neben dem Preis
   und brach dort ueber drei Zeilen um — sie wirkte lauter als der Preis selbst.
   Jetzt steht sie gestapelt und leise darunter: kleine Vorzeile, normaler
   Schriftschnitt, gedaempfte Farbe. Sie soll den Umfang belegen, nicht rufen. */
.price-scope { display: block; }
.price-scope span { display: block; margin-bottom: 0.2rem; opacity: 0.65; }
.price-scope strong {
  display: block;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dim);
}
/* Benny, 03.08.2026: Die Ersparnis stand in Gruen und fiel aus dem Farbklang
   der Seite. Jetzt Gold wie der Preis. Ausserdem gestapelt statt nebeneinander,
   damit sie in der schmalen Spalte umbrechen kann statt abgeschnitten zu werden. */
.price-saving-line { display: block; }
.price-saving-line span { display: block; margin-bottom: 0.2rem; opacity: 0.65; }
.price-saving-line strong {
  display: block;
  text-align: left;
  font-size: 0.86rem;
  color: var(--gold-light);
}
.component-label { padding-top: 0.45rem; border-top: 1px solid var(--line-soft); }
.component-label strong { display: block; margin-top: 0.25rem; text-align: left; }
.price-quality-note {
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--gold-light);
  font-size: 0.7rem;
  line-height: 1.4;
}
.fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.fact-chips li {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.72rem;
}
.product-card .text-link { margin-top: auto; justify-self: start; }

.category-chips {
  display: flex;
  gap: 0.5rem;
  /* Benny, 06.08.2026: „bisschen abstand zum text darüber mit den chips".
     Gemessen waren es 0 px — der Absatz darüber hat keinen Nachlauf, die Chips
     klebten direkt an der letzten Textzeile. */
  margin-top: 1.6rem;
  margin-bottom: 2rem;
  padding-bottom: 0.4rem;
  overflow-x: auto;
  scrollbar-color: var(--gold) transparent;
}
.category-chips a {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.72rem;
  text-decoration: none;
}
.category-chips a:hover { border-color: var(--gold); color: var(--gold-light); }
/* Benny, 06.08.2026: „der rand vom kasten vertikal ganz schön hoch mit viel luft,
   der könnte schmaler sein". Gemessen: 44 px Kasten um 11,5 px Text.
   Die Höhe kam nicht von der Polsterung (die ergäbe 33 px), sondern von
   `min-height: 44px` — der Mindestgröße für Fingertipp-Ziele. Sie ersatzlos zu
   streichen würde die Seite am Handy schlechter bedienbar machen.
   Deshalb schmaler nur dort, wo mit einer Maus gezielt wird: `pointer: fine`
   trifft Maus und Trackpad, nicht den Finger. Am Handy bleiben es 44 px. */
@media (pointer: fine) {
  .category-chips a { min-height: 0; padding: 0.42rem 0.85rem; }
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.3rem);
  perspective: 1500px;
}
.preview-card {
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(240, 182, 95, 0.15);
  background: rgba(12, 8, 14, 0.78);
}
.preview-card p { color: var(--muted); }
.preview-disclosure {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  align-items: baseline;
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  background: linear-gradient(110deg, rgba(240, 182, 95, 0.075), rgba(29, 20, 31, 0.55));
}
.preview-disclosure span { color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.preview-disclosure strong { color: var(--ink); font-family: var(--serif); font-size: 1.55rem; }
.preview-disclosure p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.83rem; }
.report-preview {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-x: 50%;
  --tilt-y: 50%;
  position: relative;
  padding: 0.65rem;
  transform: perspective(1300px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease;
}
.report-preview::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.65rem;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--tilt-x) var(--tilt-y), rgba(255, 194, 105, 0.13), transparent 34%);
  transition: opacity 240ms ease;
}
.report-preview:hover { border-color: rgba(255, 211, 138, 0.36); }
.report-preview:hover::after { opacity: 1; }
.report-preview--asset img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1240 / 1754;
  border: 1px solid rgba(240, 182, 95, 0.28);
  background: #141118;
  object-fit: cover;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}
.report-preview--asset figcaption { min-height: 7rem; }
.report-preview figcaption { padding: 1rem 0.4rem 0.35rem; }
.report-preview figcaption strong { color: var(--ink); font-family: var(--serif); font-size: 1.3rem; }
.report-preview figcaption p { margin: 0.45rem 0 0; font-size: 0.78rem; line-height: 1.55; }
.detail-main .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-main .report-preview { padding: 0.55rem; }

@media (max-width: 80rem) {
  .detail-main .preview-grid { grid-template-columns: 1fr; }
}

.chart-reading-quote-wrap { overflow: hidden; padding-block: clamp(3.2rem, 5vw, 5.2rem); }
.chart-reading-quote { position: relative; max-width: 72rem; margin: 0 auto; padding-inline: clamp(1rem, 5vw, 5rem); text-align: center; }
.chart-reading-quote p { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(2.25rem, 4.25vw, 5rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.chart-reading-quote em { background: linear-gradient(105deg, var(--gold-light) 10%, #fff2cc 35%, var(--ember) 56%, var(--gold-light) 78%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; animation: quote-light 9s ease-in-out infinite; filter: drop-shadow(0 0 1.4rem rgba(240, 182, 95, 0.12)); }

/* Goldschrift wird zwar auf die Glyphen zugeschnitten, zusaetzlich aber an der Kante
   der Zeilenbox. Und die endet exakt auf der Laufweite des letzten Zeichens. Ein
   Serifenschnitt wie Cormorant Garamond ragt dort ein paar Pixel darueber hinaus —
   sichtbar als angeschnittener letzter Buchstabe am Zeilenende, etwa das "e" von
   "Die" oder "Analyse". Ohne box-decoration-break: clone bekaeme nur das letzte
   Zeilenfragment das Innenmass; mit clone hat jede Zeile ihre eigene Hintergrundbox.
   Der negative Aussenabstand nimmt die Verbreiterung fuer den Textfluss zurueck.
   Gilt bewusst fuer .hero-copy h1 em ohne weiteren Vorsatz, damit auch die
   Phoenix-Seite (eigene Datei, gleiche Struktur) mit abgedeckt ist. */
.hero-copy h1 em,
.chart-reading-quote em {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: 0.05em;
  margin-right: -0.05em;
}

.trust-grid,
.process-grid,
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.trust-item,
.process-step,
.info-card {
  padding: clamp(1.25rem, 2.5vw, 2.2rem);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
}
.trust-item span,
.process-step span { color: var(--gold); font: 700 0.7rem/1 var(--sans); letter-spacing: 0.15em; }
.trust-item h3,
.process-step h3,
.info-card h3 { margin-top: 1.2rem; font-size: clamp(1.5rem, 2.3vw, 2.25rem); }
.trust-item p,
.process-step p,
.info-card p { color: var(--muted); }

.editorial-split,
.detail-layout,
.contact-layout,
.status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.75fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
/* Benny, 06.08.2026: Hier stand kurzzeitig `max-width: 36rem` auf p und li.
   Anlass war eine Messung: Die Absätze liefen über die volle Sektionsbreite von
   1376 px, bei 7,7 px pro Zeichen also 179 Zeichen je Zeile — weit über den
   45 bis 75, die als lesbar gelten.
   ZURÜCKGENOMMEN am selben Tag. Benny hat beide Fassungen im Browser gesehen:
   „auf der echten seite ist alles leer … war vorher optisch alles besser."
   Er hat recht, und der Grund steht schon in `views/ueber.ejs`: Diese Sektionen
   sind 1376 px breit. Jedes lesbare Textmaß lässt dort über die Hälfte leer, und
   zwar einseitig — daneben wirkt der Text angeklebt statt gesetzt.
   Wer das erneut angehen will, darf NICHT nur die Textbreite ändern, sondern
   muss die Sektion mitnehmen: schmalere, mittige Spalte oder ein zweispaltiger
   Satz mit Grafik rechts, wie ihn die Startseite hat. Vorher zeigen, nicht
   einfach umstellen. */
/* Benny, 06.08.2026: „ob der text so passt und nicht zu eng ist".
   Gemessen: Zeilenhöhe 27,2 px, Absatzabstand aber nur 19,2 px — der Abstand
   ZWISCHEN zwei Absätzen war kleiner als der Abstand INNERHALB eines Absatzes.
   Dadurch verschmolz alles zu einem Block, und genau das liest sich eng.
   1,55rem sind 24,8 px und damit knapp unter einer Leerzeile: Absätze trennen
   sich sichtbar, ohne dass der Text auseinanderfällt. Die Breite bleibt, wie
   sie war — siehe der Vermerk weiter unten. */
.editorial-copy > * + * { margin-top: 1.55rem; }
.editorial-copy p,
.editorial-copy li { color: var(--muted); }

/* Langtext auf breiter Seite — der zweite Anlauf.
   ================================================
   Erster Versuch war nur `max-width` auf den Absätzen. Lesbar ja, aber Benny:
   „auf der echten seite ist alles leer … war vorher optisch alles besser."
   Stimmte: Ein schmaler Textstreifen links und 800 px Nichts rechts sieht aus
   wie ein Fehler, nicht wie Satz.
   Der Widerspruch ist echt und lässt sich nicht wegdiskutieren: Über die volle
   Breite sind es 179 Zeichen je Zeile (lesbar sind 45–75), schmaler entsteht die
   Leere. Also muss die freie Fläche etwas TRAGEN.
   Sie bekommt dasselbe Ornament, das auf Startseite und Analysen-Seite schon
   steht: eine ruhige Glühscheibe und darüber der gestrichelte Ring mit Punkten.
   Kein neues Formvokabular, nur an einer weiteren Stelle verwendet.
   Nur `.about-page` — also Über mich, Handbuch, Typen. Startseite und Kontakt
   benutzen `.editorial-copy` ebenfalls, bleiben aber unberührt. */
/* Was hier NICHT hingehört, damit es niemand nochmal baut:
   Ein Orbit-Ring als Ornament in der freien Fläche rechts. Am 06.08.2026
   ausprobiert und sofort wieder entfernt. Auf Startseite und Analysen-Seite
   trägt der Ring, weil er die PDF-Cover UMSCHLIESST — er rahmt etwas ein.
   Über leerem Grund ist er nur ein großer leerer Kreis, und bei zwei Abschnitten
   untereinander sieht es aus wie eine Kette. */

/* Ebenfalls ausprobiert und verworfen: herausgehobene Zitate rechts neben einer
   schmalen Lesespalte, gesetzt wie auf einer Magazinseite. Benny am 06.08.2026
   nach der Vorschau: „ne lassen wir das sieht nicht gut aus."
   Damit sind beide Wege durch — Ornament (Orbit-Ring) und Inhalt (Zitate).
   Der lange Text bleibt über die volle Breite. Wer es erneut versucht, sollte
   wissen, dass die schmale Spalte selbst das Problem ist, nicht ihre Füllung. */
.editorial-copy strong { color: var(--ink); }
.editorial-copy a:not(.button) { color: var(--gold-light); }
/* Benny, 02.08.2026: Die Ueberschrift war „viel zu riesig". Die globale h1 geht
   bis 8,8rem — das traegt einen kurzen Titel, aber keinen ganzen Satz. Auf der
   Ueber-Seite steht ein Satz, deshalb hier rund die halbe Groesse. Andere Seiten
   bleiben unberuehrt (die Kennung .about-page setzt bereits der Seitenkopf). */
.about-page .subpage-hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.about-page .subpage-hero { min-height: clamp(18rem, 34vh, 26rem); }

/* Die Abschnittsueberschriften muessen mitgehen: Sonst waere die h2 groesser
   als die h1 und die Rangfolge stuende auf dem Kopf. Gilt nur fuer diese Seite. */
.about-page .section h2 { font-size: clamp(1.8rem, 3.1vw, 3rem); line-height: 1.06; }
.about-page .editorial-copy h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.15; }

/* Persoenlicher Text auf der Ueber-Seite (Benny, 02.08.2026).
   Der Abschnitt benutzt den Aufbau der Handbuch-Kapitel unveraendert — volle
   Breite, Serifen-Zwischenueberschriften. Eigene Layouts (zentrierte Spalte,
   Zweispalter, Zierbahnen) wirkten daneben fremd und sind wieder entfallen.
   Uebrig bleibt eine einzige Regel: die Signatur. */
.about-personal-copy p.about-signature,
.about-personal .about-signature {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(240, 182, 95, 0.22);
  font-family: var(--serif);
  font-size: 1.14rem;
  color: var(--gold-light);
}

.clean-list { display: grid; gap: 0.85rem; padding: 0; list-style: none; }
.clean-list li { position: relative; padding-left: 1.3rem; }
.clean-list li::before { content: "↗"; position: absolute; left: 0; color: var(--ember); }
.boundary-note,
.notice {
  padding: 1.2rem 1.35rem;
  border-left: 3px solid var(--gold);
  background: rgba(240, 182, 95, 0.065);
  color: var(--muted);
}
.boundary-note strong,
.notice strong { color: var(--ink); }

.detail-main section + section { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--line-soft); }
.boundary-details + section { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--line-soft); }
.detail-main h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.detail-main h2 + * { margin-top: 1.5rem; }
.detail-sidebar { position: sticky; top: calc(var(--header-height) + 1rem); }
.analysis-detail-page .subpage-hero .button { margin-top: 2rem; }
.order-box {
  transform: none;
  animation: none;
  transition: none;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.order-box *,
.order-box *::before,
.order-box *::after { animation: none !important; transform: none !important; transition: none !important; }
.order-box .section-kicker { margin-bottom: 0.45rem; }
.order-box h2 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1; }
.order-components { margin: 0.55rem 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.order-summary { margin: .8rem 0; }
.order-summary div {
  display: grid;
  grid-template-columns: 7.1rem 1fr;
  gap: 0.75rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.order-summary dt { color: var(--dim); font-size: 0.7rem; }
.order-summary dd { margin: 0; font-size: 0.84rem; line-height: 1.35; text-align: right; }
.order-summary .order-total { color: var(--gold-light); font-size: 1rem; font-weight: 700; }
.order-timing-note,
.tax-note,
.provider-note { margin: 0.42rem 0; color: var(--dim); font-size: 0.7rem; line-height: 1.4; }
/* Abgrenzungssatz im Zielgruppen-Abschnitt: sagt, wann ein anderes Angebot besser
   passt. Bewusst eine eigene Klasse — .order-timing-note gehoert zur Bestellbox und
   traegt dort die Lieferfrist. Etwas groesser als die Notizen dort, weil dieser Satz
   im Fliesstext steht und gelesen werden soll. */
.audience-alternative {
  margin: 1rem 0 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}
.checkout-form { margin-top: 0.8rem; }
.consent-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.55rem;
  align-items: start;
  margin: 0.55rem 0;
}
.consent-row input { width: 1.15rem; height: 1.15rem; min-height: 1.15rem; margin: 0.12rem 0 0; accent-color: var(--gold); }
.consent-copy { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.consent-copy a { color: var(--gold-light); }
.order-box .button { min-height: 46px; padding-block: 0.72rem; }
.order-box .provider-note { margin-top: 0.55rem; }
.mobile-purchase-bar { display: none; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-field { display: grid; gap: 0.45rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field > span { color: var(--gold-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(240, 182, 95, 0.28);
  border-radius: 0;
  background: #0a0709;
  color: var(--ink);
}
textarea { min-height: 10rem; resize: vertical; }
/* Benny, 05.08.2026: Die Regel darueber ist fuer TEXTfelder gedacht — volle
   Breite, 48 px Mindesthoehe als Beruehrungsziel, Rahmen, Hintergrund. Sie traf
   bisher auch Ankreuzfelder: Die wurden auf 20 x 48 px gestreckt und bekamen
   einen Rahmen. Sichtbar wurde es am Wochenbrief, wo das Kaestchen 19 px unter
   der ersten Textzeile stand — es betrifft aber ALLE sechs Ankreuzfelder der
   Seite, auch die beiden Einwilligungen in der Bestellbox.
   accent-color faerbt das native Kaestchen, statt es nachzubauen: Tastatur,
   Vorlesesoftware und Browser-Eigenheiten bleiben damit unangetastet. */
input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--gold);
  cursor: pointer;
}
input:focus,
select:focus,
textarea:focus { border-color: var(--gold); outline: 2px solid rgba(240, 182, 95, 0.2); outline-offset: 1px; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-status { min-height: 1.5rem; color: var(--muted); }
.form-panel {
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid var(--line);
  background: var(--surface);
}

.faq-list { border-top: 1px solid var(--line-soft); }
.faq-list summary::after { content: "+"; flex: 0 0 auto; color: var(--gold); font-size: 1.35rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
/* Benny, 04.08.2026: „damit man versteht dass es sich aufklappt". Vorher gab es
   gar keinen Hover-Zustand — die Zeilen sahen aus wie Text, nicht wie Schalter.
   Jetzt hebt sich die ganze Zeile ab, die Schrift wird hell und das Pluszeichen
   waechst. Der Tastaturfokus bekommt dasselbe, sonst haetten Tastaturnutzer
   weniger Rueckmeldung als Mausnutzer. */
.faq-list summary { padding-inline: 0.6rem; margin-inline: -0.6rem; border-radius: 2px; transition: background 180ms ease, color 180ms ease; }
.faq-list summary::after { transition: transform 180ms ease, color 180ms ease; }
.faq-list summary:hover,
.faq-list summary:focus-visible { background: rgba(240, 182, 95, 0.07); color: var(--gold-light); }
.faq-list summary:hover::after,
.faq-list summary:focus-visible::after { color: var(--gold-light); transform: scale(1.22); }
/* Pflichthinweis, bewusst kleingedruckt am Ende des Fragenabschnitts. */
/* Benny, 04.08.2026: Die Überschrift des Schlussblocks klebte an der letzten
   Frage — gemessener Abstand 0 px, weil die Aufklappliste unten keinen Rand hat
   und die h3 keinen oberen. Jetzt steht sie erkennbar für sich. */
.faq-list + h3 { margin-top: clamp(2.4rem, 4vw, 3.6rem); }
.questions-fineprint { margin-top: 1.1rem; max-width: 46rem; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
details { border-bottom: 1px solid var(--line-soft); }
summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}
summary::marker { color: var(--gold); }
details p { max-width: var(--reading); margin: 0 0 1.5rem; color: var(--muted); }

.energy-window {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--line);
  background: linear-gradient(140deg, rgba(240, 182, 95, 0.06), rgba(121, 164, 151, 0.03));
}
.energy-window header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.energy-validity { color: var(--dim); font-size: 0.78rem; }
.energy-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 2rem; background: var(--line-soft); }
.energy-entry { padding: 1.4rem; background: var(--surface); }
.energy-entry h3 { font-size: 1.8rem; }
.energy-entry p { color: var(--muted); }

.status-card {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.status-pill { display: inline-flex; padding: 0.35rem 0.6rem; border: 1px solid var(--line); color: var(--gold); font-size: 0.7rem; text-transform: uppercase; }
.status-card h1 { margin-top: 1.2rem; font-size: clamp(3rem, 6vw, 6rem); }
.status-card p { color: var(--muted); }
.data-form { margin-top: 2rem; }
.partner-fields { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }

.site-footer {
  width: var(--content);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0 2rem;
  border-top: 1px solid var(--line-soft);
}
.footer-primary {
  display: grid;
  grid-template-columns: minmax(18rem, 1.8fr) repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  /* Benny, 05.08.2026: Hier stand kein oberer Abstand — die Navigations-
     ueberschriften begannen exakt auf dem Trennstrich darueber, gemessen
     0 px. Ueber dem Strich waren es 65. Jetzt symmetrisch. */
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.footer-brand strong { display: block; font-family: var(--serif); font-size: 2rem; }
.footer-brand > span { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; }
.footer-brand p { max-width: 30rem; color: var(--dim); font-size: 0.82rem; }
.order-pending {
  margin: 1rem 0 0.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 0.6rem;
  color: var(--gold-light);
  font-size: 0.92rem;
}
.price-pending { color: var(--gold-light); }
.footer-social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; padding: 0; list-style: none; }
.footer-social a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  min-height: 32px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold-light); }
.footer-social-network { color: var(--gold-light); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-social-handle { font-size: 0.82rem; }
.footer-primary nav { display: flex; flex-direction: column; align-items: start; gap: 0.55rem; }
.footer-primary nav strong { margin-bottom: 0.55rem; color: var(--gold-light); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-primary nav a { min-height: 32px; color: var(--muted); font-size: 0.82rem; text-underline-offset: 0.25rem; }
.footer-primary nav a:hover { color: var(--gold-light); }
.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 0.74rem;
}

@keyframes brand-orbit { to { transform: rotate(360deg); } }
/* Der Lichtstreif steht 72 % der Zeit still und wandert dann einmal durch. Ein
   dauerhaft laufender Verlauf waere Unruhe im Kopf, ein einzelner Reflex ist ein Akzent. */
@keyframes brand-shimmer {
  0%, 72%, 100% { background-position: 100% 0; }
  86% { background-position: 0 0; }
}
@keyframes site-header-enter {
  from { opacity: 0; top: -1rem; }
  to { opacity: 1; top: 0; }
}

@media (max-width: 68rem) {
  .site-navigation { gap: 0.8rem; }
  .site-navigation a { font-size: 0.6rem; }
  .trust-grid,
  .process-grid,
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-primary { grid-template-columns: 1.6fr repeat(2, 1fr); }
  .footer-primary nav:last-child { grid-column: 2; }
  .detail-main .preview-grid { grid-template-columns: 1fr; }
  .chart-reading-claim { grid-template-columns: auto minmax(0, 1fr); }
  .chart-reading-claim > .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 52.5rem) {
  :root { --header-height: 4.25rem; --header-height-scrolled: 4.25rem; --content: min(100% - 2rem, 46rem); }
  h1 { font-size: clamp(3rem, 13vw, 5.6rem); }
  /* Benny, 04.08.2026: „Gemeinschaftsvertrag" lief auf dem Handy rechts aus dem
     Bild. Ursache ist nicht diese eine Ueberschrift, sondern die Bauweise: Die
     Schriftgroessen haben eine feste Untergrenze (clamp(2.8rem, …)), die auf
     schmalen Geraeten nicht weiter mitschrumpft. Gemessen brauchte das Wort
     346 px, die Spalte bot 334 — und ein einzelnes Wort ohne Trennstelle
     bricht nun einmal nicht um.
     Deutsche Komposita duerfen deshalb ab hier trennen; das lang="de" am
     <html> steht. Wo der Browser kein deutsches Trennwoerterbuch hat, passiert
     schlicht nichts — die Ueberschriften bekommen ihre Obergrenze in vw
     zusaetzlich, damit sie auch dann passen (siehe phoenix.css).
     Bewusst KEIN overflow-wrap: break-word: das trennte hier gemessen
     „Gemeinschaftsvertra / g" ohne Trennstrich, was schlimmer aussieht als der
     Ueberstand, den es beheben sollte. */
  h1, h2, h3, h4 { hyphens: auto; }
  .header-inner { gap: 1rem; }
  .brand-ring { width: 2.55rem; height: 2.55rem; }
  .brand-wordmark { display: flex; }
  .menu-toggle { display: grid; position: relative; z-index: 132; }
  .site-navigation {
    position: fixed;
    z-index: 130;
    inset: 0 0 0 auto;
    width: min(24rem, 88vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    background: #0c080b;
    box-shadow: -24px 0 80px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.75rem) scale(0.985);
    transform-origin: top right;
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms linear;
  }
  .site-navigation a { min-height: 52px; display: flex; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.78rem; }
  .site-navigation .nav-cta { margin-top: 1rem; justify-content: center; border: 1px solid var(--gold); }
  .mobile-menu-heading { display: block; margin-bottom: 1rem; color: var(--dim); font: 700 0.68rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
  .menu-backdrop { position: fixed; z-index: 125; inset: 0; display: block; background: rgba(3, 2, 4, 0.7); backdrop-filter: blur(4px); }
  .menu-backdrop[hidden] { display: none; }
  /* Drei Eigenschaften des Kopfes vertragen sich nicht mit einem Menuepanel, das in
     ihm steckt. Alle drei mussten fuer den offenen Zustand entschaerft werden:

     1. z-index — .site-header ist ein eigener Stapelkontext (position: sticky mit
        z-index UND backdrop-filter erzeugen jeweils einen). Die z-index-Werte von
        Panel (130) und Schaltflaeche (132) gelten deshalb nur INNERHALB des Kopfes;
        nach aussen zaehlt allein dessen 120. Der Schleier haengt als Kind von body
        auf 125 und lag damit ueber dem gesamten geoeffneten Menue: sichtbar war nur
        ein dunkles, leeres Feld. Der Wert muss > 125 und < .test-banner (160) sein.

     2. backdrop-filter — macht den Kopf zum umschliessenden Block fuer
        position: fixed-Nachfahren. Das Panel richtete sich dadurch nicht am
        Bildschirm aus, sondern am Kopf, und rutschte beim Oeffnen weiter unten auf
        der Seite um genau die Scrollhoehe nach oben aus dem Bild. Am Seitenanfang
        fiel das nie auf, weil beide Bezugsrahmen dort zufaellig zusammenfallen.

     3. position: sticky — body.menu-open setzt overflow: hidden. Damit ist body kein
        Scrollcontainer mehr, das Kleben fiel aus und der Kopf rutschte auf seine
        Dokumentposition. Die Schliessen-Schaltflaeche war dadurch ebenfalls
        ausserhalb des Bildes. Fuer den offenen Zustand deshalb hart am Bildschirm
        verankert.

     Die 161 liegt bewusst ueber .test-banner (160): Der am Bildschirm verankerte Kopf
     rutscht im TEST-Modus unter das Banner, das im normalen Fluss ganz oben sitzt, und
     das Banner verdeckte sonst die Schliessen-Schaltflaeche. Das Banner bleibt
     sichtbar, sobald das Menue zu ist — und live gibt es es ohnehin nicht. Unter
     .skip-link (200) muss der Wert bleiben. */
  .menu-open .site-header {
    position: fixed;
    z-index: 161;
    top: 0;
    right: 0;
    left: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .menu-open .site-navigation { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .section-heading-row,
  .editorial-split,
  .detail-layout,
  .contact-layout,
  .status-layout { grid-template-columns: 1fr; }
  .finder-grid,
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: auto; }
  .product-card--bundle { grid-column: auto; display: flex; }
  /* Benny, 04.08.2026: Auf dem Handy waren die beiden Titelbilder zu gross —
     gemessen 309 x 334 px in einer 349 px breiten Karte, ein Drittel der
     Kartenhoehe nur Deko. Zwei Ursachen, beide hier behoben:
     1. Die Bilder hingen noch bei top: 35% (Regel fuer die hohe Desktop-Spalte).
        Untereinander gestellt liess das oben 16 px ueberstehen und unten 84 px
        Leere. Auf dem Handy gehoeren sie in die Mitte ihres Behaelters.
     2. Der Behaelter war 100% breit. Jetzt 72%, damit das Paar eine Beigabe
        bleibt und nicht die halbe Karte fuellt.
     Ergebnis: 225 x 216 px, Karte 1021 -> 899 px. */
  .product-card--bundle .bundle-report-covers {
    width: min(72%, 16rem);
    min-height: 0;
    flex: 0 0 auto;
    aspect-ratio: 1 / 0.96;
    margin-inline: auto;
  }
  .product-card--bundle .bundle-report-covers figure { top: 50%; }
  /* Der Ring haengt an der neuen Breite und sitzt jetzt ebenfalls mittig. */
  .product-card--bundle .bundle-report-covers::before {
    top: 50%;
    width: min(122%, 17rem);
  }
  .product-card--bundle .price-composition,
  .product-card--bundle .fact-chips,
  .product-card--bundle .text-link { grid-column: auto; }
  .preview-grid { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .mobile-purchase-bar {
    position: sticky;
    z-index: 80;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--line);
    background: rgba(8, 6, 10, 0.96);
  }
  .mobile-purchase-bar strong,
  .mobile-purchase-bar span { display: block; }
  .mobile-purchase-bar span { color: var(--gold); font-size: 0.78rem; }
  .mobile-purchase-bar a { min-height: 44px; display: inline-flex; align-items: center; color: var(--gold-light); font-size: 0.72rem; }
  .footer-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-primary nav:last-child { grid-column: auto; }
}

@media (min-width: 68.01rem) and (max-height: 50rem) {
  .detail-sidebar { position: static; }
}

@media (max-width: 38rem) {
  :root { --content: min(100% - 1.4rem, 34rem); }
  body { font-size: 0.96rem; }
  .brand { gap: 0.55rem; }
  .brand-ring { width: 2.55rem; height: 2.55rem; }
  .brand-wordmark strong { font-size: 0.65rem; }
  .brand-wordmark span { font-size: 0.5rem; }
  .section { padding-block: 4.8rem; }
  .subpage-hero { min-height: 31rem; }
  .price-composition,
  .field-grid,
  .energy-entry-grid { grid-template-columns: 1fr; }
  .price-supporting { padding: 0.85rem 0 0; border-top: 1px solid var(--line-soft); border-left: 0; }
  .trust-grid,
  .process-grid,
  .info-grid { grid-template-columns: 1fr; }
  .order-summary div { grid-template-columns: 1fr; gap: 0.2rem; }
  .order-summary dt,
  .order-timing-note,
  .tax-note,
  .provider-note { font-size: 0.75rem; }
  .order-summary dd { font-size: 0.9rem; text-align: left; }
  .consent-copy { font-size: 0.84rem; line-height: 1.45; }
  .footer-primary { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-meta { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .brand-orbit { animation: none !important; }
  /* Der Hinweis „hier klappt etwas auf" bleibt auch ohne Bewegung: Farbe und
     Flaeche wirken weiter, nur das Anheben und Vergroessern faellt weg. */
  /* !important, weil diese Regeln frueher in der Datei stehen als die
     Hover-Zustaende selbst — ohne sie gewaenne die spaetere Regel. */
  .mechanic-node:not([open]):hover,
  .mechanic-node:not([open]):focus-within { transform: none !important; }
  .mechanic-node:hover summary::after,
  .mechanic-node:focus-within summary::after,
  .faq-list summary:hover::after,
  .faq-list summary:focus-visible::after { transform: none !important; }
  /* Ohne Animation bliebe der Schriftzug auf der Verlaufsposition stehen, die zufaellig
     gerade gilt. Deshalb hier zurueck auf die schlichte Textfarbe. */
  .brand-wordmark strong {
    animation: none !important;
    background: none;
    color: var(--ink);
  }
  .button:hover { transform: none; }
}

/* Immersive Phoenix presentation */
.cosmic-warp {
  position: fixed;
  z-index: 12;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: brightness(1.35) saturate(1.12);
  transition: opacity 1200ms ease;
}
.cosmic-warp[data-warp-ready="true"] { opacity: 1; }
.ambient-field {
  --ambient-x: 71%;
  --ambient-y: 42%;
  position: fixed;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient-field span { position: absolute; display: block; border-radius: 50%; filter: blur(64px); opacity: 0.26; }
.ambient-field span:nth-child(1) { width: min(46rem, 58vw); aspect-ratio: 1; left: calc(var(--ambient-x) - 23rem); top: calc(var(--ambient-y) - 23rem); background: radial-gradient(circle, rgba(255, 89, 21, 0.38), rgba(132, 17, 6, 0.05) 55%, transparent 72%); }
.ambient-field span:nth-child(2) { width: min(32rem, 44vw); aspect-ratio: 1; right: -12rem; top: 24%; background: rgba(240, 182, 95, 0.085); }
.ambient-field span:nth-child(3) { width: min(28rem, 38vw); aspect-ratio: 1; left: -12rem; bottom: 3%; background: rgba(74, 84, 138, 0.08); }

.cycle-progress {
  position: fixed;
  z-index: 90;
  right: clamp(0.5rem, 1.6vw, 1.4rem);
  top: 50%;
  width: 2px;
  height: min(10rem, 28vh);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-50%);
  pointer-events: none;
}
.cycle-progress span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold-light), var(--ember)); transform: scaleY(var(--cycle-progress, 0)); transform-origin: top; box-shadow: 0 0 14px rgba(241, 91, 42, 0.7); }
.warp-spark { position: fixed; z-index: 14; left: 0; top: 0; display: block; border-radius: 50%; pointer-events: none; background: #ffe8ae; box-shadow: 0 0 9px #ff6b24, 0 0 18px rgba(255, 73, 17, 0.72); will-change: transform, opacity; }
main,
.site-footer { position: relative; z-index: 10; }
main { isolation: isolate; }
.section::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(3.5rem, 9vw, 8rem);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(240, 182, 95, 0.32);
}
html[data-effects-ready="true"] .reveal {
  opacity: 0;
  transform: translate3d(0, 3rem, 0) scale(0.988);
  filter: blur(5px);
  transition: opacity 820ms cubic-bezier(.18,.75,.2,1), transform 980ms cubic-bezier(.16,.85,.2,1), filter 820ms ease;
}
html[data-effects-ready="true"] .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}
.product-card[data-pointer-tilt] {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-x: 50%;
  --tilt-y: 50%;
  overflow: hidden;
  border: 1px solid rgba(240, 182, 95, 0.14);
  transform: perspective(1200px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 240ms ease, box-shadow 240ms ease;
}
.product-card[data-pointer-tilt]::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--tilt-x) var(--tilt-y), rgba(255, 202, 124, 0.15), transparent 34%);
  transition: opacity 220ms ease;
}
.product-card[data-pointer-tilt] > * { position: relative; z-index: 1; }
.product-card[data-pointer-tilt]:hover { border-color: rgba(255, 211, 138, 0.44); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.43), 0 0 42px rgba(241, 91, 42, 0.075); }
.product-card[data-pointer-tilt]:hover::after { opacity: 1; }
.home-page .section { padding-block: clamp(4.6rem, 7vw, 7.2rem); }
.home-page .finder-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.72rem; border: 0; background: none; perspective: 1400px; }
.home-page .product-card--compact { min-height: 30.5rem; padding: clamp(1.2rem, 1.6vw, 1.75rem); background: linear-gradient(155deg, rgba(27, 18, 26, 0.93), rgba(10, 7, 11, 0.96)); }
.home-page .product-card--compact h3 { font-size: clamp(1.9rem, 2.3vw, 2.65rem); }
.home-page .product-card--compact .product-card-topline { margin-bottom: 1.3rem; }
.home-page .product-card--compact .product-question { display: -webkit-box; overflow: hidden; margin-top: 0.8rem; font-size: 0.84rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-page .product-card--compact .product-summary { display: -webkit-box; overflow: hidden; margin-top: 0.5rem; font-size: 0.82rem; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-page .product-card--compact .price-composition { grid-template-columns: 1fr; gap: 0.7rem; margin: 1.15rem 0; padding: 0.85rem 0; }
.home-page .product-card--compact .price-amount { font-size: clamp(2.35rem, 3.4vw, 3.25rem); }
.home-page .product-card--compact .price-supporting { padding: 0.7rem 0 0; border-top: 1px solid var(--line-soft); border-left: 0; }
.home-page .product-card--compact .fact-chips { gap: 0.35rem; margin-bottom: 1rem; }
.home-page .product-card--compact .fact-chips li { padding: 0.35rem 0.45rem; font-size: 0.64rem; }
/* Benny, 03.08.2026: Auch hier waren die Mindestbreiten groesser als die Karte —
   die rechte Spalte ragte 62 px ueber den Rand. Flexible Spalten schrumpfen mit. */
.home-page .product-card--bundle { grid-column: 1 / -1; min-height: 23rem; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.85fr); column-gap: clamp(1rem, 2.2vw, 2rem); }
.product-grid .product-card { min-height: 29rem; }
.button { position: relative; overflow: hidden; }
.button::after { content: ""; position: absolute; inset: -60% auto -60% -30%; width: 22%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg) translateX(-180%); transition: transform 520ms cubic-bezier(.16,.8,.2,1); }
.button:hover::after { transform: skewX(-20deg) translateX(720%); }
@media (max-width: 68rem) {
  .home-page .finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .product-card--bundle { grid-column: 1 / -1; }
}
@media (min-width: 120rem) {
  .header-inner { width: min(172rem, 90vw); }
}
@media (max-width: 52.5rem) {
  .cosmic-warp[data-warp-ready="true"] { opacity: 0.72; }
  .ambient-field { opacity: 0.66; }
  .cycle-progress { display: none; }
  .home-page .finder-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .home-page .product-card--compact { min-height: auto; }
  .home-page .product-card--bundle { grid-column: auto; min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header-inner { transition: none; }
  .header-inner { animation: none; }
  .cosmic-warp { display: none; }
  .ambient-field { display: none; }
  .cycle-progress { display: none; }
  html[data-effects-ready="true"] .reveal { opacity: 1; transform: none; filter: none; }
  .product-card[data-pointer-tilt],
  .report-preview { transform: none !important; }
}

/* Shared immersive hero foundation; Phoenix-specific art stays in phoenix.css. */
.home-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
}
.home-hero::before { z-index: -4; }
.home-hero::after {
  z-index: -3;
  background-image: radial-gradient(circle, rgba(255, 211, 138, 0.45) 0 1px, transparent 1.5px);
}
.hero-inner {
  width: var(--content);
  margin: 0 auto;
  padding-block: clamp(5rem, 10vh, 8rem);
}
.hero-copy { position: relative; z-index: 5; max-width: 51rem; }
.hero-copy h1 { max-width: 9ch; margin-top: 1rem; }
.hero-copy h1 em { color: var(--gold-light); font-style: normal; }
.hero-lead {
  max-width: 43rem;
  margin: 1.75rem 0 0;
  color: #c9bdb6;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 0.55rem 1.5rem; margin: 1.35rem 0 0; padding: 0; color: var(--muted); font-size: 0.78rem; list-style: none; }
.hero-proof li::before { content: "·"; margin-right: 0.5rem; color: var(--gold); }
.energy-seal {
  width: min(32rem, 88vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 13%, rgba(255, 255, 255, 0.035) 13.2% 13.5%),
    radial-gradient(circle, rgba(241, 91, 42, 0.2), rgba(240, 182, 95, 0.04) 35%, rgba(8, 6, 10, 0.9) 68%);
  box-shadow: inset 0 0 100px rgba(241, 91, 42, 0.12), 0 0 80px rgba(0, 0, 0, 0.35);
}
.energy-seal span { width: 28%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font: 700 clamp(2rem, 7vw, 4rem)/1 var(--serif); box-shadow: 0 0 45px rgba(241, 91, 42, 0.35); }

/* Report-Atelier sales experience */
.home-hero--atelier {
  min-height: calc(100svh - var(--header-height));
  background: linear-gradient(104deg, rgba(5, 3, 7, 0.99) 0 34%, rgba(5, 3, 7, 0.78) 51%, rgba(5, 3, 7, 0.28) 77%, rgba(5, 3, 7, 0.82));
}
.home-hero--atelier::before {
  background:
    radial-gradient(ellipse at 78% 49%, rgba(240, 182, 95, 0.13), transparent 29%),
    radial-gradient(ellipse at 86% 67%, rgba(121, 164, 151, 0.07), transparent 27%),
    linear-gradient(90deg, #050307 0%, rgba(5, 3, 7, 0.96) 36%, rgba(5, 3, 7, 0.28) 72%, rgba(5, 3, 7, 0.76));
}
.home-hero--atelier::after {
  opacity: 0.12;
  background-size: 89px 89px;
  mask-image: radial-gradient(ellipse at 76% 48%, #000 0 52%, transparent 84%);
}
.home-hero--atelier .hero-inner {
  position: relative;
  z-index: 4;
  width: var(--content);
  display: grid;
  grid-template-columns: minmax(27rem, 0.92fr) minmax(35rem, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}
.home-hero--atelier .hero-copy { max-width: 48rem; }
/* Benny, 03.08.2026: Die Masse war auf die alte, kuerzere Ueberschrift
   zugeschnitten (10.8ch bei 7.7rem). Mit „Warum du so funktionierst, wie du
   funktionierst." brach sie in sieben Zeilen um und schob die beiden Knoepfe
   unter die Bildkante — gemessen: Kopfzeile 509 px hoch, Knopf bei y = 1000
   auf einem 1280x900-Fenster. Breiter und etwas kleiner sind es drei Zeilen
   (238 px, Knopf bei y = 700). */
.home-hero--atelier .hero-copy h1 { max-width: 15ch; font-size: clamp(3.2rem, 5.6vw, 6rem); line-height: 0.88; text-shadow: 0 5px 40px rgba(0, 0, 0, 0.72); }
/* Der goldene Teil war bisher genauso gross wie die Frage darueber und damit
   das lauteste Element der ganzen Seite. Als eigene, kleinere Zeile wird er
   zum Untertitel — leuchtet weiter, draengt sich aber nicht mehr vor. */
.home-hero--atelier .hero-copy h1 em { display: block; font-size: 0.42em; line-height: 1.12; letter-spacing: -0.01em; margin-top: 0.5em; background: linear-gradient(115deg, #ffe4ad, #e9ad52 58%, #ff7a2f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(241, 91, 42, 0.2)); }
.home-hero--atelier .hero-lead { max-width: 40rem; font-size: clamp(1rem, 1.3vw, 1.2rem); text-shadow: 0 2px 18px #050307; }

.report-atelier {
  position: relative;
  width: min(52vw, 49rem);
  height: clamp(39rem, 74vh, 48rem);
  justify-self: end;
  perspective: 1500px;
  isolation: isolate;
}
.report-atelier::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 46%;
  width: min(42rem, 47vw);
  aspect-ratio: 1;
  border: 1px solid rgba(240, 182, 95, 0.14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 182, 95, 0.06), transparent 62%);
  box-shadow: 0 0 100px rgba(240, 182, 95, 0.06), inset 0 0 100px rgba(0, 0, 0, 0.54);
  transform: translate(-50%, -50%);
}
.report-atelier-orbit {
  position: absolute;
  z-index: -1;
  inset: 5% 2% 10% 5%;
  border: 1px dashed rgba(240, 182, 95, 0.2);
  border-radius: 50%;
  animation: atelier-orbit 38s linear infinite;
}
.report-atelier-orbit::before,
.report-atelier-orbit::after,
.report-atelier-orbit i {
  content: "";
  position: absolute;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px var(--gold);
}
.report-atelier-orbit::before { left: 14%; top: 13%; }
.report-atelier-orbit::after { right: 6%; bottom: 27%; background: var(--ember); box-shadow: 0 0 18px var(--ember); }
.report-atelier-orbit i:nth-child(1) { left: 0; top: 52%; background: var(--teal); box-shadow: 0 0 18px var(--teal); }
.report-atelier-orbit i:nth-child(2) { right: 24%; top: 0; width: 0.3rem; }
.report-atelier-orbit span {
  position: absolute;
  right: 4%;
  top: 18%;
  width: 3rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 182, 95, 0.32);
  border-radius: 50%;
  background: #09060a;
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: rotate(-38deg);
}
.report-atelier-sheet {
  position: absolute;
  top: 46%;
  left: 52%;
  width: clamp(14rem, 19vw, 19rem);
  aspect-ratio: 1240 / 1754;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(240, 182, 95, 0.28);
  background: #141118;
  cursor: pointer;
  transform-origin: 50% 100%;
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.74);
  transition: transform 620ms cubic-bezier(.17,.86,.22,1), opacity 420ms ease, filter 420ms ease, box-shadow 420ms ease;
}
.report-atelier-sheet img { width: 100%; height: 100%; display: block; object-fit: cover; }
.report-atelier-sheet > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.report-atelier-sheet[data-position="back"] { z-index: 1; opacity: 0.74; filter: saturate(0.72) brightness(0.72); transform: translate(-92%, -48%) rotate(-13deg) translateZ(-90px) scale(0.9); }
.report-atelier-sheet[data-position="middle"] { z-index: 2; opacity: 0.86; filter: saturate(0.82) brightness(0.83); transform: translate(-9%, -48%) rotate(12deg) translateZ(-35px) scale(0.94); }
.report-atelier-sheet[data-position="front"] { z-index: 5; opacity: 1; filter: none; transform: translate(-50%, -52%) rotate(-1deg) translateZ(85px) scale(1.03); box-shadow: 0 52px 115px rgba(0, 0, 0, 0.8), 0 0 55px rgba(240, 182, 95, 0.1); }
.report-atelier-sheet:hover,
.report-atelier-sheet:focus-visible { border-color: var(--gold-light); filter: brightness(1.06); outline: 2px solid rgba(255, 211, 138, 0.45); outline-offset: 5px; }
.report-atelier-caption {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 1.5rem;
  width: min(22rem, 52%);
  padding: 1rem 1.2rem;
  border: 1px solid rgba(240, 182, 95, 0.2);
  border-left-color: var(--gold);
  background: rgba(8, 6, 10, 0.9);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(12px);
}
.report-atelier-caption > span { color: var(--dim); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.report-atelier-caption strong { display: block; margin-top: 0.35rem; color: var(--gold-light); font-family: var(--serif); font-size: 1.55rem; }
.report-atelier-caption p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; }
.report-atelier-caption .text-link { margin-top: 0.4rem; font-size: 0.62rem; }
.report-atelier-tabs { position: absolute; z-index: 9; left: 0; bottom: 1.5rem; display: flex; gap: 0.35rem; }
.report-atelier-tabs button { min-height: 44px; display: grid; gap: 0.15rem; align-content: center; padding: 0.5rem 0.65rem; border: 1px solid var(--line-soft); background: rgba(8, 6, 10, 0.88); color: var(--muted); cursor: pointer; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; transition: border-color 200ms ease, color 200ms ease, background 200ms ease; }
.report-atelier-tabs button span { color: var(--gold); font-size: 0.52rem; }
.report-atelier-tabs button:hover,
.report-atelier-tabs button:focus-visible,
.report-atelier-tabs button[aria-pressed="true"] { border-color: var(--gold); background: rgba(240, 182, 95, 0.1); color: var(--gold-light); }

.mechanic-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.mechanic-map::before { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; top: 2.25rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), var(--teal), var(--ember), transparent); }
.mechanic-node { border: 1px solid var(--line-soft); background: rgba(16, 11, 18, 0.76); transition: border-color 220ms ease, background 220ms ease, transform 220ms ease; }
.mechanic-node:not([open]) { align-self: start; }
.mechanic-node[open] { border-color: rgba(240, 182, 95, 0.45); background: linear-gradient(145deg, rgba(240, 182, 95, 0.08), rgba(16, 11, 18, 0.9)); transform: translateY(-0.35rem); }
.mechanic-node summary { min-height: 8.5rem; display: grid; gap: 0; align-content: start; padding: 1rem; }
.mechanic-node summary::after { content: "+"; position: absolute; right: 1.2rem; top: 1rem; color: var(--gold); font-size: 1.4rem; }
.mechanic-node[open] summary::after { content: "–"; }
.mechanic-node summary { position: relative; }
.mechanic-node summary span { color: var(--gold); font-size: 0.66rem; letter-spacing: 0.15em; }
.mechanic-node summary strong { margin-top: 1rem; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.2rem); line-height: 0.95; }
.mechanic-node summary small { margin-top: 0.45rem; color: var(--muted); font-size: 0.76rem; font-weight: 400; }
.mechanic-node > p { margin: 0; padding: 0 1.25rem 1.5rem; }
/* Dieselbe Frage bei den drei Begriffskarten: Sie reagierten erst NACH dem
   Aufklappen. Jetzt zeigt schon das Darueberfahren, dass sich etwas oeffnet —
   dieselbe Bewegung wie im geoeffneten Zustand, nur schwaecher. */
.mechanic-node:not([open]):hover,
.mechanic-node:not([open]):focus-within {
  border-color: rgba(240, 182, 95, 0.4);
  background: linear-gradient(145deg, rgba(240, 182, 95, 0.06), rgba(16, 11, 18, 0.86));
  transform: translateY(-0.2rem);
}
.mechanic-node summary::after { transition: transform 220ms ease, color 220ms ease; }
.mechanic-node:hover summary::after,
.mechanic-node:focus-within summary::after { color: var(--gold-light); transform: scale(1.22); }

.analysis-finder {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.55fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.3);
}
.analysis-finder-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }
.analysis-finder-options button {
  min-height: 10.5rem;
  display: grid;
  align-content: end;
  justify-items: start;
  padding: 1.35rem;
  border: 0;
  /* Benny, 04.08.2026 — hier steckte das kurze helle Aufblitzen beim Hover.
     Nachgemessen im Browser, Bild fuer Bild:

       ms  3   background-image: radial-gradient   background-color: rgba(0,0,0,0)
       ms 42   radial-gradient                     rgba(36,26,38,0.16)
       ms 92   radial-gradient                     rgba(36,26,38,0.85)
       ms 159  radial-gradient                     rgb(36,26,38)

     Der Knopf hatte NUR ein background-image (den deckenden Verlauf) und gar
     keine background-color. Beim Hover wird das Bild sofort gegen den neuen,
     ueberwiegend durchsichtigen Radialverlauf getauscht — Verlaeufe lassen sich
     nicht ineinander ueberblenden, der Browser schaltet hart um. Die Farbe
     dahinter blendet aber weich ein. In dieser Luecke, rund 40 ms lang, hat der
     Knopf UEBERHAUPT keinen deckenden Hintergrund, und durch ihn hindurch
     scheint die Flaeche darunter: .analysis-finder-options traegt
     rgba(255,255,255,0.09), also helles Grau. Das ist der Blitz.

     Heilung: In beiden Zustaenden steht eine deckende background-color, und die
     Ueberblendung laeuft nur ueber sie. Das Bild wechselt weiterhin hart — aber
     jetzt vor einem Hintergrund, der nie durchsichtig wird. */
  background-color: #0d090f;
  background-image: linear-gradient(145deg, #151018, #0d090f);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.analysis-finder-options button span { color: var(--gold); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.analysis-finder-options button strong { margin-top: 0.55rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1; }
/* Benny, 04.08.2026: Zwei Dinge in einem Zug.
   1. Das Aufblitzen — Ursache und Heilung stehen bei der Grundregel oben.
      Wichtig hier: getrennt background-color und background-image, NIE wieder
      die Kurzform background, sonst kommt die Luecke zurueck.
   2. Der Hover war ausserdem kaum wahrnehmbar: Die Flaeche ging von
      rgb(21,16,24) auf rgb(27,18,26), also sechs Stufen Helligkeit, dazu ein
      Rahmen mit halber Deckkraft. Jetzt hellere Flaeche, klarer Goldrahmen,
      eigener Schein — damit das Feld sichtbar erleuchtet BLEIBT. */
.analysis-finder-options button:hover,
.analysis-finder-options button:focus-visible,
.analysis-finder-options button[aria-pressed="true"] { position: relative; z-index: 2; background-color: #241a26; background-image: radial-gradient(circle at 78% 18%, rgba(240, 182, 95, 0.22), transparent 52%); box-shadow: inset 0 0 0 1px rgba(240, 182, 95, 0.78), 0 20px 46px rgba(0, 0, 0, 0.5), 0 0 30px rgba(241, 91, 42, 0.12); transform: translateY(-2px); }
.analysis-finder-result { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 3vw, 2.7rem); background: linear-gradient(160deg, rgba(240, 182, 95, 0.1), #100b12 48%); }
.analysis-finder-result > span { color: var(--gold); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.analysis-finder-result > strong { margin-top: 0.8rem; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.6rem); line-height: 0.98; }
.analysis-finder-result p { color: var(--muted); }
.analysis-finder-result .button { align-self: start; margin-top: 1rem; }

.primary-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.85rem; perspective: 1500px; }
.product-quality-statement { display: block; margin-top: 1rem; color: var(--gold-light); font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.1; }
.primary-product-grid > div { min-width: 0; display: flex; }
.primary-product-grid > div > .product-card { width: 100%; height: 100%; }
.primary-product-grid .product-card { min-height: 31rem; }
/* Benny, 03.08.2026: Der Preis stand auf jeder der drei Karten woanders, weil der
   Text darueber unterschiedlich lang ist — gemessen 1440 / 1494 / 1494 px.
   Mit subgrid teilen sich alle drei Karten dieselben Zeilenkanten, der Preis liegt
   danach ueberall auf derselben Hoehe (1549 px), egal wie lang der Text wird.
   Die sieben Zeilen sind: Vorzeile, Titel, Frage, Zusammenfassung, Preisblock,
   Merkmale (dehnbar), Link. Browser ohne subgrid behalten das alte Verhalten.
   ACHTUNG: Dieser Block muss NACH „.primary-product-grid > div { display: flex }“
   stehen — sonst gewinnt flex und subgrid greift nicht. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 52.5625rem) {
    .primary-product-grid { grid-template-rows: auto auto auto auto auto 1fr auto; }
    .primary-product-grid > div { display: grid; grid-row: span 7; grid-template-rows: subgrid; }
    .primary-product-grid > div > .product-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  }
}
.supplemental-offers { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--line-soft); }
.supplemental-heading { max-width: 54rem; margin-bottom: 1.6rem; }
.supplemental-heading h3 { font-size: clamp(2rem, 4vw, 4rem); }
/* Benny, 03.08.2026: Die Aufteilung bleibt wie gehabt — Transit schmal, Paket
   breit. Ein Versuch mit gleichmaessigeren Spalten machte beide Karten zwar
   gleich hoch, quetschte aber die drei Innenspalten der Paketkarte. Bennys
   Urteil dazu: „das war anfangs besser, transit schmaler, komplettpaket
   breiter“. Das Loch in der Paketkarte ist stattdessen ueber ihren Inhalt
   geloest (Merkmale sichtbar, Titelbilder ueber die volle Hoehe). */
.supplemental-product-grid { display: grid; grid-template-columns: minmax(17rem, 0.68fr) minmax(0, 1.32fr); gap: 0.85rem; perspective: 1500px; }
.supplemental-product-grid .product-card { min-height: 25rem; }
.supplemental-product-grid .product-card--bundle { grid-column: auto; }
.product-card--supplement { border-style: dashed !important; background: linear-gradient(155deg, rgba(121, 164, 151, 0.07), rgba(10, 7, 11, 0.96)) !important; }
.product-card.is-recommended { border-color: var(--gold-light) !important; box-shadow: 0 0 0 1px var(--gold), 0 28px 85px rgba(0, 0, 0, 0.48), 0 0 60px rgba(240, 182, 95, 0.13) !important; animation: recommended-card 860ms cubic-bezier(.18,.78,.2,1); }
.product-card > .text-link { position: static; }
.product-card > .text-link::after { content: ""; position: absolute; z-index: 2; inset: 0; }
.footer-nav-label { display: block; margin-top: 0.65rem; color: var(--dim); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }

.preview-card.report-preview {
  appearance: none;
  width: 100%;
  color: var(--ink);
  cursor: zoom-in;
  text-align: left;
}
.preview-card-caption { min-height: 7rem; display: block; padding: 1rem 0.4rem 0.35rem; }
.preview-card-caption strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 1.3rem; }
.preview-card-caption > span { display: block; margin-top: 0.45rem; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
.preview-zoom-hint { position: absolute; z-index: 4; right: 1.15rem; top: 1.15rem; padding: 0.45rem 0.55rem; border: 1px solid rgba(255, 211, 138, 0.42); background: rgba(8, 6, 10, 0.88); color: var(--gold-light); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transform: translateY(0.5rem); transition: opacity 220ms ease, transform 220ms ease; }
.report-preview:hover .preview-zoom-hint,
.report-preview:focus-visible .preview-zoom-hint { opacity: 1; transform: translateY(0); }
.report-lightbox {
  width: min(92rem, calc(100vw - 2rem));
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(240, 182, 95, 0.35);
  background: #0b080c;
  color: var(--ink);
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.85);
}
.report-lightbox::backdrop { background: rgba(3, 2, 4, 0.86); backdrop-filter: blur(12px); }
.report-lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); }
.report-lightbox-stage { min-height: 0; display: grid; place-items: center; padding: 1.2rem; overflow: auto; background: radial-gradient(circle, rgba(240, 182, 95, 0.06), transparent 60%), #08060a; }
.report-lightbox-stage img { display: block; width: auto; max-width: 100%; height: min(88dvh, 68rem); object-fit: contain; box-shadow: 0 24px 75px rgba(0, 0, 0, 0.64); }
.report-lightbox-close { position: absolute; z-index: 4; right: 0.8rem; top: 0.8rem; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #100b12; color: var(--gold-light); cursor: pointer; font-size: 1.7rem; }

.boundary-details { margin-top: 4rem; padding: 0.2rem 1.2rem; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.015); }
.boundary-details summary { color: var(--muted); font-size: 0.82rem; }
.boundary-details .clean-list { padding-bottom: 1.2rem; color: var(--muted); font-size: 0.82rem; }
.interactive-surface { position: relative; overflow: hidden; transition: transform 240ms ease, border-color 240ms ease, background 240ms ease, box-shadow 240ms ease; }
.interactive-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 82% 16%, rgba(240, 182, 95, 0.13), transparent 42%); transition: opacity 240ms ease; }
.interactive-surface:hover,
.interactive-surface:focus-visible { border-color: rgba(240, 182, 95, 0.5); background-color: rgba(240, 182, 95, 0.045); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3); transform: translateY(-0.3rem); }
.interactive-surface:hover::after,
.interactive-surface:focus-visible::after { opacity: 1; }
.choice-grid a { color: var(--ink); text-decoration: none; }
.choice-grid .info-card > span { color: var(--gold); font-size: 0.68rem; letter-spacing: 0.16em; }
.about-process-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.about-process-map article { min-height: 19rem; padding: 1.4rem; background: #100b12; }
.about-process-map article > span { color: var(--gold); font-size: 0.65rem; letter-spacing: 0.16em; }
.about-process-map h3 { margin-top: 4rem; font-size: clamp(1.8rem, 3vw, 3rem); }
.about-process-map p { color: var(--muted); }

.phoenix-editorial-page .gate-explorer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
.phoenix-editorial-page .gate-set { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.phoenix-editorial-page .gate-token { width: 100%; min-width: 0; border: 1px solid var(--line); background: radial-gradient(circle, rgba(241, 91, 42, 0.12), transparent 67%); color: var(--gold-light); cursor: pointer; font-size: clamp(1.5rem, 2.8vw, 2.7rem); transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease; }
.phoenix-editorial-page .gate-token span { display: block; margin-top: 0.35rem; color: var(--muted); font: 600 0.58rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.phoenix-editorial-page .gate-token:hover,
.phoenix-editorial-page .gate-token:focus-visible,
.phoenix-editorial-page .gate-token[aria-pressed="true"] { border-color: var(--gold-light); background: radial-gradient(circle, rgba(241, 91, 42, 0.3), rgba(240, 182, 95, 0.06) 50%, transparent 70%); box-shadow: 0 0 45px rgba(241, 91, 42, 0.18); transform: translateY(-0.3rem) scale(1.025); }
.gate-detail { display: flex; flex-direction: column; justify-content: center; padding: 1.2rem; border-left: 1px solid var(--gold); background: rgba(240, 182, 95, 0.055); }
.gate-detail > span { color: var(--dim); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; }
.gate-detail strong { margin-top: 0.55rem; font-family: var(--serif); font-size: 2rem; }
.gate-detail p { margin: 0.3rem 0 0; color: var(--gold-light); }

.energy-orbit { position: relative; width: min(34rem, 86vw); aspect-ratio: 1; display: grid; place-items: center; margin: 2rem auto 3rem; border: 1px solid rgba(240, 182, 95, 0.2); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 16%, rgba(255,255,255,.03) 16.2% 16.5%), radial-gradient(circle, rgba(241, 91, 42, 0.14), transparent 58%); box-shadow: inset 0 0 100px rgba(0,0,0,.58), 0 0 80px rgba(240,182,95,.04); }
.energy-orbit::before,
.energy-orbit::after { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(240, 182, 95, 0.18); border-radius: 50%; animation: energy-orbit-spin 34s linear infinite; }
.energy-orbit::after { inset: 22%; border-color: rgba(121, 164, 151, 0.18); animation-direction: reverse; animation-duration: 25s; }
.energy-orbit > i { position: absolute; z-index: 2; width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.energy-orbit > i:nth-child(1) { left: 9%; top: 47%; }
.energy-orbit > i:nth-child(2) { right: 17%; top: 17%; background: var(--ember); box-shadow: 0 0 18px var(--ember); }
.energy-orbit > i:nth-child(3) { right: 24%; bottom: 12%; background: var(--teal); box-shadow: 0 0 18px var(--teal); }
.energy-orbit-core { position: relative; z-index: 3; width: 48%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; padding: 1rem; border: 1px solid rgba(240, 182, 95, 0.35); border-radius: 50%; background: rgba(8, 6, 10, 0.9); text-align: center; box-shadow: 0 0 50px rgba(241, 91, 42, 0.14); }
.energy-orbit-core span { color: var(--dim); font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; }
.energy-orbit-core strong { margin-top: 0.45rem; color: var(--gold-light); font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 2.3rem); line-height: 1; }
.energy-orbit-core p { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.67rem; line-height: 1.4; }
.energy-entry { border: 0; color: var(--ink); cursor: pointer; text-align: left; transition: background 240ms ease, box-shadow 240ms ease, transform 240ms ease; }
.energy-entry-grid { gap: 0.75rem; background: transparent; }
.energy-entry-grid .energy-entry { border: 1px solid var(--line-soft); }
.energy-entry-grid .energy-entry:last-child:nth-child(odd) { grid-column: 1 / -1; }
.energy-entry:hover,
.energy-entry:focus-visible,
.energy-entry[aria-pressed="true"] { position: relative; z-index: 1; background: linear-gradient(145deg, rgba(240, 182, 95, 0.11), var(--surface)); box-shadow: inset 0 0 0 1px rgba(240, 182, 95, 0.44); transform: translateY(-0.2rem); }

@keyframes atelier-orbit { to { transform: rotate(360deg); } }
@keyframes analyses-orbit { to { transform: rotate(360deg); } }
@keyframes quote-light { 0%, 100% { background-position: 100% center; } 50% { background-position: 0 center; } }
@keyframes recommended-card { 0%, 100% { transform: perspective(1200px) translateY(0); } 45% { transform: perspective(1200px) translateY(-0.7rem); } }
@keyframes energy-orbit-spin { to { transform: rotate(360deg); } }

@media (min-width: 120rem) {
  .home-hero--atelier .hero-inner { width: min(172rem, 90vw); grid-template-columns: minmax(44rem, 0.9fr) minmax(58rem, 1.1fr); }
  .home-hero--atelier .hero-copy { max-width: 64rem; }
  .home-hero--atelier .hero-copy h1 { max-width: 10.5ch; font-size: clamp(8rem, 4.4vw, 11rem); }
  .report-atelier { width: min(58vw, 72rem); height: min(74vh, 66rem); }
  .report-atelier::before { width: min(55rem, 44vw); }
  .report-atelier-sheet { width: clamp(20rem, 15vw, 26rem); }
}

@media (max-width: 74rem) {
  .home-hero--atelier .hero-inner { grid-template-columns: minmax(24rem, 0.95fr) minmax(29rem, 1.05fr); gap: 1.5rem; }
  .home-hero--atelier .hero-copy h1 { font-size: clamp(4rem, 6.4vw, 6rem); }
  .report-atelier { width: 49vw; height: 40rem; }
  .report-atelier-sheet { width: clamp(12rem, 18vw, 16rem); }
  .primary-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-process-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52.5rem) {
  .cosmic-warp { display: none !important; }
  .home-hero--atelier { min-height: auto; align-items: start; }
  .home-hero--atelier .hero-inner { grid-template-columns: 1fr; gap: 1rem; padding: 4rem 0 2.5rem; }
  .home-hero--atelier .hero-copy { max-width: 100%; }
  .home-hero--atelier .hero-copy h1 { max-width: 10ch; font-size: clamp(3.5rem, 12vw, 6rem); }
  .home-hero--atelier .hero-actions { display: grid; width: min(25rem, 100%); }
  .analyses-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .analyses-hero-visual { width: min(36rem, 100%); min-height: 30rem; justify-self: center; }
  .report-atelier { width: 100%; height: clamp(31rem, 124vw, 42rem); justify-self: stretch; }
  .report-atelier::before { width: min(38rem, 112vw); }
  .report-atelier-sheet { width: clamp(11rem, 43vw, 16rem); }
  .report-atelier-caption { right: 0; bottom: 0; width: min(21rem, 75%); }
  .report-atelier-tabs { bottom: 7.5rem; }
  .mechanic-map,
  .analysis-finder,
  .primary-product-grid,
  .supplemental-product-grid,
  .about-process-map { grid-template-columns: 1fr; }
  .primary-product-grid { grid-auto-rows: auto; }
  .primary-product-grid > div > .product-card { height: auto; }
  .mechanic-map::before { display: none; }
  .mechanic-node[open] { transform: none; }
  .analysis-finder-options { grid-template-columns: 1fr; }
  .analysis-finder-options button { min-height: 8.5rem; }
  .analysis-finder-result { min-height: 19rem; }

  .supplemental-product-grid .product-card--bundle { display: flex; }
  .report-lightbox[open] { display: grid; overflow: hidden; }
  .report-lightbox-stage { max-height: 90dvh; padding: 0.75rem; }
  .report-lightbox-stage img { height: auto; max-height: 86dvh; }
  .phoenix-editorial-page .gate-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gate-detail { min-height: 8rem; }
}

@media (max-width: 38rem) {
  .home-hero--atelier .hero-inner { padding-top: 3rem; }
  .home-hero--atelier .hero-proof { display: grid; gap: 0.4rem; }
  .chart-reading-quote-wrap { padding-block: 3rem; }
  .chart-reading-quote { padding-inline: 0; }
  .analyses-hero-visual { min-height: 25rem; }
  .analyses-hero-visual > a { width: 10.5rem; }
  .report-atelier { height: 34rem; }
  .report-atelier-sheet { width: 11.5rem; }
  .report-atelier-caption { width: 82%; padding: 0.85rem 1rem; }
  .report-atelier-tabs { bottom: 11.4rem; }
  .report-atelier-tabs button { padding-inline: 0.45rem; font-size: 0.52rem; }
  .report-atelier-caption > span { display: none; }
  .report-atelier-caption p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .preview-grid { grid-template-columns: 1fr; }
  .energy-orbit-core { width: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  .report-atelier-orbit,
  .analyses-hero-orbit,
  .chart-reading-quote em,
  .energy-orbit::before,
  .energy-orbit::after,
  .report-atelier-sheet,
  .product-card.is-recommended { animation: none !important; transition: none !important; }
  .interactive-surface:hover,
  .interactive-surface:focus-visible,
  .mechanic-node[open],
  .energy-entry:hover,
  .energy-entry:focus-visible,
  .phoenix-editorial-page .gate-token:hover,
  .phoenix-editorial-page .gate-token:focus-visible { transform: none !important; }
}


/* --------------------------------------------------------------- Wochenbrief
   Benny, 05.08.2026: Steht in der Fusszeile und damit auf jeder Seite. Der
   Businessplan nennt genau das die teuerste Luecke — wer liest und nicht kauft,
   war bisher weg. */
.footer-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  width: var(--content);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
}
.footer-newsletter h2 { font-size: clamp(1.9rem, 3vw, 2.9rem); }
.footer-newsletter p { color: var(--muted); }
.footer-newsletter strong { color: var(--gold-light); }
.newsletter-form { display: grid; gap: 0.85rem; align-content: start; }
/* Schnellblick-Rechner (19.08.2026): sechs Felder in zwei Spalten, auf dem
   Handy untereinander. Nutzt die Label-/Input-Optik des Newsletter-Formulars.
   Benny, 19.08.: „text abstand beachten ist etwas dicht" — die heading-row
   nullt Absatz-Margen (.section-heading-row p { margin: 0 }); Lead und Knopf
   bekommen in den Schnellblick-Blöcken deshalb eigene Luft. */
.schnellblick-cta .section-heading-row .section-lead,
#chart-rechner .section-heading-row .section-lead { margin-top: 1.15rem; }
.schnellblick-cta .section-heading-row { margin-bottom: 1.75rem; }
#chart-rechner .section-heading-row { margin-bottom: 2rem; }
.schnellblick-form { display: grid; gap: 1rem; }
.schnellblick-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.25rem; }
/* Benny, 19.08.: Felder vertikal bündig — zweizeilige Beschriftungen (z. B.
   „Uhrzeit unbekannt?") drückten ihre Felder sonst tiefer. Inhalt sitzt an der
   Zellen-Unterkante, und alle Eingaben haben dieselbe feste Höhe. */
.schnellblick-form label { display: grid; gap: 0.35rem; font-weight: 600; align-content: end; }
.schnellblick-form input[type='text'],
.schnellblick-form input[type='email'],
.schnellblick-form input[type='date'],
.schnellblick-form input[type='time'] {
  width: 100%;
  height: 3.1rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(201, 168, 106, 0.35));
  background: rgba(20, 17, 24, 0.55);
  color: inherit;
  font: inherit;
}
.schnellblick-form .button { justify-self: start; }
@media (max-width: 720px) {
  .schnellblick-form-grid { grid-template-columns: 1fr; }
}
.newsletter-form label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.78rem; }
.newsletter-form input[type="email"] {
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  background: rgba(8, 6, 10, 0.72);
  color: var(--ink);
}
.newsletter-form input[type="email"]:focus-visible { border-color: var(--gold); }
.newsletter-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.72rem;
  line-height: 1.5;
}
.newsletter-consent input { margin-top: 0.2rem; }
.newsletter-note { margin: 0; font-size: 0.7rem; }
/* Der Honigtopf muss fuer Menschen unsichtbar sein, fuer Automaten aber im
   Formular stehen. display:none wuerde von manchen Automaten erkannt und
   uebersprungen — dann faengt die Falle nichts mehr. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 52.5rem) {
  .footer-newsletter { grid-template-columns: 1fr; }
}

/* Der Anmeldeblock im Textfluss der kostenlosen Seiten — dort, wo jemand
   gerade gelesen hat. Etwas mehr Luft als die Fusszeilen-Fassung, damit er
   nicht wie ein Anhaengsel wirkt. */
.newsletter-inline {
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.newsletter-inline h2 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); }

/* Die Seite nach dem Kauf (06.08.2026).
   Sie war zuerst unformatiert — Standardpunkte, Name und Groesse aneinander
   geklebt. Das ist die erste Seite, die jemand sieht, der gerade bezahlt hat;
   sie muss aussehen wie der Rest des Hauses.

   Jede Datei ist eine eigene Flaeche mit grosszuegiger Hoehe: Auf dem Handy
   wird darauf getippt, und ein zu kleines Ziel ist genau dort aergerlich, wo
   die Freude entstehen soll. */
.download-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 45rem;
}
.download-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.35rem;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.download-list a:hover,
.download-list a:focus-visible {
  border-color: var(--line);
  background: var(--surface);
  transform: translateY(-1px);
}
.download-name {
  font-weight: 600;
  /* Reportnamen sind lang und tragen Unterstriche. Ohne das hier schiebt ein
     einziger Dateiname die Seite auf dem Handy in die Breite. */
  overflow-wrap: anywhere;
}
.download-meta {
  color: var(--dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.download-page .button-primary { margin-top: 1.75rem; }

/* Einwilligungsbanner (06.08.2026).

   Benny: „mach den banner bitte so dezent wie möglich." Also eine schmale Karte
   unten links statt eines Balkens über die volle Breite, ohne Überschrift, mit
   kleiner Schrift. Sie verdeckt nichts, was man zum Lesen braucht.

   Die Grenze der Dezenz ist die Lesbarkeit: Wer nicht erkennt, worüber er
   entscheidet, entscheidet nicht wirksam. Deshalb bleibt der Text in normaler
   Textfarbe und nicht in Grau auf Grau.

   Die beiden Knöpfe teilen sich EINE Regel — es gibt keine zweite. So kann auch
   später niemand versehentlich einen davon hervorheben. Nach der
   Orientierungshilfe der Datenschutzkonferenz ist eine Einwilligung unwirksam,
   wenn das Ablehnen schwerer fällt als das Zustimmen. */
.consent {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  right: auto;
  z-index: 60;
  width: min(26rem, calc(100vw - 1.5rem));
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: 0.7rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
  padding: 1rem 1.05rem 1.05rem;
  display: grid;
  /* Benny, 06.08.2026: „der rand geht fast in den text hinein". Der Abstand
     zwischen Text und Knöpfen trennt zwei Dinge, die nichts miteinander zu tun
     haben — Erklärung und Entscheidung. Zu eng gesetzt liest sich der obere
     Knopfrand wie eine Unterstreichung des letzten Satzes. */
  gap: 1.1rem;
}
.consent[hidden] { display: none; }
.consent-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.consent-text a { color: var(--gold); }
.consent-buttons {
  display: flex;
  /* Genug Luft, dass die beiden als zwei Entscheidungen lesbar bleiben und
     nicht als ein geteilter Schalter. */
  gap: 0.85rem;
}
.consent-button {
  /* Beide teilen sich die volle Breite zu gleichen Teilen. `flex-basis: 0`
     statt `auto`: Sonst richtete sich die Breite nach der Textlänge, und
     „Cookies akzeptieren" wäre breiter als „Cookies ablehnen" — eine
     Hervorhebung durch die Hintertür. */
  flex: 1 1 0;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.consent-button:hover,
.consent-button:focus-visible {
  border-color: var(--gold);
  background: rgba(240, 182, 95, 0.1);
}

/* Weiterlesen-Block am Fuss der Wissensseiten (07.08.2026)
   ========================================================
   Benny hatte bemerkt, dass Handbuch, Typen, Chart-Seite und die Uhrzeit-Seite
   oben in der Navigation fehlen und nur im Fuss stehen. Der Kopf bleibt bewusst
   schlank — fuenf Eintraege plus Kaufknopf sind auf dem Handy die Grenze, und
   jeder weitere schwaecht den Knopf, der Geld bringt. Stattdessen bekommt jede
   Wissensseite unten diesen Block.

   BEWUSST LEISER ALS `.trust-grid`: keine Rahmen, keine Flaechen, nur eine feine
   Oberkante je Eintrag. Er steht UNTER dem Produktknopf und darf ihn nicht
   ueberbieten. Wer ihn zu Karten aufwertet, dreht genau das um.

   Vier Spalten wie das uebrige Raster der Seite. Anders als beim Kartenraster
   entsteht hier aber keine leuchtende Luecke, wenn die Zahl der Eintraege einmal
   nicht aufgeht — ohne Rahmen faellt eine leere Zelle schlicht nicht auf. */
.weiterlesen-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.weiterlesen-liste a {
  display: block;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 180ms ease;
}
.weiterlesen-liste strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  transition: color 180ms ease;
}
.weiterlesen-liste span {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}
.weiterlesen-liste a:hover,
.weiterlesen-liste a:focus-visible { border-top-color: var(--gold); }
.weiterlesen-liste a:hover strong,
.weiterlesen-liste a:focus-visible strong { color: var(--gold-light); }

@media (max-width: 68rem) {
  .weiterlesen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .weiterlesen-liste { grid-template-columns: 1fr; }
}

/* Rueckmeldung des Kontaktformulars (07.08.2026)
   =============================================
   Benny hatte sich selbst eine Nachricht geschickt: Die Mail kam an, aber
   „es kam keine bestaetigung dass die mail gesendet wurde". Der Satz stand
   unter dem Absenden-Knopf am Ende eines langen Formulars, in `--muted` ohne
   Rahmen — und nach dem Absenden beginnt die neu gerenderte Seite oben.
   Sichtbar war er damit nie.

   Er steht jetzt VOR dem Formular und wird als Hinweis gesetzt, nicht als
   Randnotiz. Ohne Meldung bleibt nur der reservierte Platz stehen, damit das
   Formular beim Erscheinen der Meldung nicht springt. */
.form-panel-wrap { display: grid; gap: 0; min-width: 0; }
.form-status--sichtbar {
  margin: 0 0 1.1rem;
  padding: 0.95rem 1.15rem;
  border-left: 3px solid var(--gold);
  background: rgba(240, 182, 95, 0.09);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}