@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-variable-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --forest-950: #08231d;
  --forest-900: #0d2e27;
  --forest-800: #143b31;
  --forest-700: #235348;
  --sage-500: #789487;
  --sage-200: #dbe5de;
  --sage-100: #edf2ed;
  --cream-100: #f8f4ec;
  --paper: #fffdf9;
  --sand-200: #eadfce;
  --sand-100: #f3eadf;
  --gold-500: #c99c55;
  --gold-300: #e2c994;
  --terra-600: #a94f3c;
  --terra-100: #f7e8e2;
  --ink: #17241f;
  --muted: #5e6963;
  --line: rgba(23, 36, 31, 0.14);
  --line-light: rgba(255, 253, 249, 0.15);
  --shadow-sm: 0 10px 30px rgba(8, 35, 29, 0.08);
  --shadow-lg: 0 30px 80px rgba(8, 35, 29, 0.16);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --shell: 1240px;

  /* Ueberschriften-Skala. EINE Quelle fuer alle Ueberschriftsgroessen.
     Vorher hatte jede Komponente ihre eigene clamp-Formel, dadurch standen auf
     der Startseite sechs verschiedene H2-Groessen (52/65/66/70/78px).
     Wer eine Ueberschrift groesser oder kleiner will, waehlt eine Stufe,
     er erfindet keine neue Zahl. */
  --h-1: clamp(46px, 6.4vw, 90px);  /* Seitentitel, ein H1 je Seite */
  --h-2: clamp(38px, 4.6vw, 66px);  /* Abschnitts-Ueberschrift */
  --h-3: clamp(28px, 3.2vw, 44px);  /* Panel und grosse Karte */
  --h-4: clamp(24px, 2.2vw, 30px);  /* Karte */
  --h-5: 20px;                      /* Listenpunkt */
  --display: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* Die ganze Seite ist dunkel. Ohne das rendert der Browser Scrollbalken und
     native Bedienelemente hell und sie stechen aus dem Gruen heraus. */
  color-scheme: dark;
  /* Standard ist ein grau-blaues Aufblitzen beim Antippen. Gedaempftes Gold passt zur Marke. */
  -webkit-tap-highlight-color: rgba(226, 201, 148, 0.18);
}

/* Nimmt die 300ms Warteschleife heraus, mit der mobile Browser auf einen
   moeglichen Doppeltipp zum Zoomen warten. Zoom per Geste bleibt erlaubt. */
a,
button,
summary,
label,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream-100);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  /* Netz fuer lange deutsche Komposita ("Digistore24-Bestellbestaetigung").
     Greift nur, wenn ein Wort sonst aus seinem Kasten laufen wuerde. */
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

/* Eine 1fr-Spalte schrumpft nur bis zur min-content-Breite ihres Inhalts, nicht
   weiter. Bei langen deutschen Woertern ("Digistore24-Bestellbestaetigung") lief
   die Kachel damit auf schmalen Handys aus der Spalte und wurde von
   body { overflow-x: hidden } rechts abgeschnitten. min-width: 0 hebt diese
   automatische Mindestbreite auf, das overflow-wrap am body laesst das Wort
   umbrechen. Betrifft die Raster, die auf Handy einspaltig werden.
   Neues mehrspaltiges Raster? Hier eintragen. */
.contact-grid > *,
.legal-layout > *,
.upsell-offer-grid > *,
.editorial-grid > *,
.evidence-grid > *,
.faq-grid > *,
.related-guide > * {
  min-width: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
summary {
  cursor: pointer;
}

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

::selection {
  background: var(--gold-300);
  color: var(--forest-950);
}

/* env(...) ist 0 auf Geraeten ohne Aussparung und schiebt den Inhalt nur dort ein,
   wo im Querformat sonst eine Notch oder ein abgerundeter Rand darueber liegt. */
.shell {
  width: min(var(--shell), calc(100% - 64px));
  margin-inline: auto;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

/* Drei Klassen stehen hier ohne aktuelle Verwendung und das ist Absicht, nicht
   vergessen: .shell-narrow (schmale Lesespalte, Geschwister von .shell, gedacht
   fuer die spaeteren /wissen/-Artikel), .section-head.center und
   .product-split.reverse. Alle drei sind reine Layout-Schalter an lebenden
   Bausteinen, ohne Farbe und ohne Altlast. Wer hier wieder aufraeumt: stehen
   lassen. Was am 31.07.2026 rausflog, waren Komponenten der alten hellen
   Startseite, die den Dunkel-Durchgang nie mitgemacht hatten. */
.shell-narrow {
  width: min(820px, calc(100% - 64px));
  margin-inline: auto;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 16px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--gold-300);
  color: var(--forest-950);
  font-size: 14px;
  font-weight: 750;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 200;
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 35, 29, 0.97);
  color: var(--paper);
  transition: box-shadow 180ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 35px rgba(4, 21, 17, 0.18);
}

.header-inner {
  min-height: 78px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: 168px;
  height: auto;
}

.desktop-nav {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
}

.desktop-nav a {
  position: relative;
  padding-block: 26px;
  color: rgba(255, 253, 249, 0.8);
  font-size: 13px;
  font-weight: 620;
  text-decoration: none;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  height: 2px;
  border-radius: 99px;
  content: "";
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
  color: var(--paper);
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-cta,
.menu-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid rgba(226, 201, 148, 0.62);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.header-cta:hover,
.menu-button:hover {
  border-color: var(--gold-300);
  background: var(--gold-300);
  color: var(--forest-950);
}

.menu-button {
  display: none;
  gap: 9px;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  width: 17px;
  height: 2px;
  display: block;
  border-radius: 99px;
  background: currentColor;
  content: "";
}

.menu-icon {
  position: relative;
}

.menu-icon::before {
  position: absolute;
  top: -5px;
}

.menu-icon::after {
  position: absolute;
  top: 5px;
}

.mobile-menu {
  display: none;
}

/* Eyebrow: das kleine Label mit Strich davor. EINZIGE Quelle, sonst nirgends.
   Der Generator schreibt sie bewusst als <span>, nicht als <p>. Als <p> wurde sie
   von jeder ".container p" Regel ueberstimmt (hoehere Spezifitaet) und lief dann
   je nach Abschnitt mit 12/15/16/17/18px und 0/18/28px Abstand. Als <span> kann
   das nicht mehr passieren. Wer hier etwas aendert, aendert es ueberall. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--gold-300);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow::before {
  flex: 0 0 28px;
  height: 2px;
  border-radius: 99px;
  content: "";
  background: currentColor;
}

h1,
h2,
h3 {
  margin-top: 0;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 500;
}

p {
  text-wrap: pretty;
}

.section {
  padding-block: clamp(84px, 9vw, 132px);
}

.section-head {
  max-width: 790px;
  margin-bottom: 52px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head.center .eyebrow {
  justify-content: center;
}

.section-head h2 {
  margin-bottom: 18px;
  color: var(--forest-900);
  font-size: var(--h-2);
  line-height: 1.02;
}

.section-head p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.section-head.center p {
  margin-inline: auto;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button svg,
.text-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.button-primary {
  background: var(--forest-900);
  color: var(--paper);
  box-shadow: 0 12px 30px rgba(8, 35, 29, 0.2);
}

.button-primary:hover {
  background: var(--forest-700);
  box-shadow: 0 16px 36px rgba(8, 35, 29, 0.24);
}

.button-gold {
  background: var(--gold-300);
  color: var(--forest-950);
  box-shadow: 0 12px 30px rgba(4, 21, 17, 0.22);
}

.button-gold:hover {
  background: #ecd6a6;
}

.button-outline {
  border-color: rgba(20, 59, 49, 0.3);
  background: rgba(255, 253, 249, 0.68);
  color: var(--forest-900);
}

.button-outline:hover {
  border-color: var(--forest-700);
  background: var(--paper);
}

.button-light-outline {
  border-color: rgba(255, 253, 249, 0.35);
  color: var(--paper);
}

/* padding-block hier und bei .breadcrumbs a / .footer-column a: bringt die
   Klickflaeche auf die 24px Mindesthoehe fuer Touch-Ziele. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 3px;
  color: var(--forest-700);
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.trust-bar {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  background: var(--forest-900);
  color: var(--paper);
}

.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-bar-item {
  min-height: 122px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px;
  border-left: 1px solid var(--line-light);
}

.trust-bar-item:last-child {
  border-right: 1px solid var(--line-light);
}

.trust-bar-item svg {
  width: 27px;
  flex: 0 0 27px;
  color: var(--gold-300);
}

.trust-bar-item strong,
.trust-bar-item span {
  display: block;
}

.trust-bar-item strong {
  font-size: 13px;
}

.trust-bar-item span {
  margin-top: 3px;
  color: rgba(255, 253, 249, 0.58);
  font-size: 11px;
}

.guides-section {
  position: relative;
  overflow: hidden;
  background: var(--forest-950);
  color: var(--paper);
}

.guides-section::before {
  position: absolute;
  top: -260px;
  left: -160px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(226, 201, 148, 0.12);
  border-radius: 50%;
  content: "";
}

.guides-section .section-head h2,
.guides-section .section-head p {
  color: var(--paper);
}

.guides-section .section-head p {
  color: rgba(255, 253, 249, 0.62);
}

.guide-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.guide-card {
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(190px, 0.84fr) 1.16fr;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  background: var(--forest-900);
}

/* ============================================================
   CLUSTER-FLAECHE (Standard seit 24.07.2026)
   Regel: EINE Flaeche je Themen-Cluster, nie eine Farbe je Guide.
   Die Flaeche ist das Passepartout des Covers und muss zum Bildstil
   des Clusters KONTRASTIEREN, nicht ihn wiederholen.
   Katzen-Cover sind salbeigruen mit dunkelgruenem Textband, deshalb
   eine warme, mittlere Sandflaeche: hell genug, dass das Textband
   sich loest, dunkel genug, dass die Kachel auf der dunklen Seite
   nicht als Lichtfleck wirkt.
   Neuer Cluster: eigene Variable ergaenzen und per data-cluster setzen.
   Details in 06_BRAND_DESIGN.md.
   ============================================================ */
:root {
  --cluster-katzen: linear-gradient(145deg, #d3c0a1, #9f8763);
}

.guide-card-cover {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 38px 24px;
  background: var(--cluster-katzen);
}

.guide-card-cover img {
  width: 100%;
  max-width: 270px;
  border-radius: 4px;
  box-shadow: 0 24px 55px rgba(8, 35, 29, 0.3);
  transition: transform 240ms ease;
}

.guide-card:hover .guide-card-cover img {
  transform: translateY(-5px) rotate(-0.5deg);
}

.guide-card-body {
  display: flex;
  flex-direction: column;
  padding: 38px 32px;
}

.guide-label {
  color: var(--gold-300);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.guide-card h3 {
  margin: 12px 0 14px;
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--h-3);
  font-weight: 500;
  line-height: 0.98;
}

.guide-card-body > p {
  margin: 0 0 18px;
  color: rgba(255, 253, 249, 0.62);
  font-size: 13px;
}

.guide-card ul {
  display: grid;
  gap: 9px;
  margin: 6px 0 26px;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.guide-card li {
  position: relative;
  padding-left: 21px;
  color: rgba(255, 253, 249, 0.8);
}

.guide-card li::before {
  position: absolute;
  left: 0;
  color: var(--gold-300);
  content: "✓";
  font-weight: 800;
}

.guide-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
}

.guide-price small,
.guide-price strong {
  display: block;
}

.guide-price small {
  color: #b6c1bd;
  font-size: 10px;
}

.guide-price strong {
  color: var(--paper);
  font-family: var(--display);
  font-size: 35px;
  font-weight: 550;
}

.guide-card-footer .button {
  padding-inline: 18px;
}

.benefit-section {
  background: var(--cream-100);
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(50px, 8vw, 110px);
  align-items: start;
}

.benefit-intro {
  position: sticky;
  top: 120px;
}

.benefit-intro h2,
.process-intro h2 {
  margin-bottom: 22px;
  color: var(--forest-900);
  font-size: var(--h-2);
  line-height: 1;
}

.benefit-intro p,
.process-intro p {
  color: var(--muted);
  font-size: 17px;
}

.benefit-list {
  border-top: 1px solid var(--line);
}

.benefit-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.benefit-item > span {
  color: #825b21;
  font-family: var(--display);
  font-size: 23px;
}

.benefit-item h3 {
  margin-bottom: 8px;
  color: var(--forest-900);
  font-size: 18px;
}

.benefit-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.process-section {
  background: var(--paper);
}

.process-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(52px, 8vw, 112px);
}

.process-list {
  margin: 0;
  padding: 0;
  counter-reset: process;
  list-style: none;
}

.process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 0 0 34px;
  counter-increment: process;
}

.process-list li::before {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 59, 49, 0.24);
  border-radius: 50%;
  content: counter(process, decimal-leading-zero);
  color: var(--forest-700);
  font-size: 11px;
  font-weight: 760;
}

.process-list li:not(:last-child)::after {
  position: absolute;
  top: 49px;
  bottom: 1px;
  left: 23px;
  width: 1px;
  content: "";
  background: var(--line);
}

.process-list h3 {
  margin-bottom: 7px;
  color: var(--forest-900);
  font-size: 17px;
}

.process-list p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.trust-section {
  background: var(--sand-100);
}

.trust-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(45px, 7vw, 100px);
  align-items: center;
  padding: clamp(36px, 6vw, 76px);
  border-radius: var(--radius-lg);
  background: var(--forest-900);
  color: var(--paper);
  box-shadow: var(--shadow-lg);
}

.trust-panel h2 {
  margin-bottom: 18px;
  font-size: var(--h-2);
  line-height: 1;
}

.trust-panel p {
  color: rgba(255, 253, 249, 0.63);
}

.trust-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.trust-check {
  min-height: 128px;
  padding: 22px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 249, 0.04);
}

.trust-check strong,
.trust-check span {
  display: block;
}

.trust-check strong {
  margin-bottom: 5px;
  color: var(--gold-300);
  font-size: 13px;
}

.trust-check span {
  color: rgba(255, 253, 249, 0.58);
  font-size: 12px;
}

.knowledge-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 42px 46px;
  border: 1px solid rgba(20, 59, 49, 0.18);
  border-radius: var(--radius-md);
  background: var(--sage-100);
}

.knowledge-note h2 {
  margin-bottom: 9px;
  color: var(--forest-900);
  font-size: var(--h-3);
}

.knowledge-note p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--forest-950);
  color: var(--paper);
  text-align: center;
}

.final-cta::before,
.final-cta::after {
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(226, 201, 148, 0.12);
  border-radius: 50%;
  content: "";
}

.final-cta::before {
  top: -310px;
  left: -140px;
}

.final-cta::after {
  right: -140px;
  bottom: -330px;
}

.final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-inline: auto;
}

.final-cta h2 {
  margin-bottom: 18px;
  font-size: var(--h-2);
  line-height: 0.98;
}

.final-cta p {
  margin: 0 0 28px;
  color: rgba(255, 253, 249, 0.62);
  font-size: 18px;
}

.final-cta .button-row {
  justify-content: center;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 42px;
  color: rgba(255, 253, 249, 0.55);
  font-size: 11px;
}

.breadcrumbs a {
  padding-block: 3px;
  color: rgba(255, 253, 249, 0.74);
}

.breadcrumbs svg {
  width: 12px;
  opacity: 0.48;
}

.page-hero {
  padding-block: 48px 92px;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 25%, rgba(120, 148, 135, 0.27), transparent 33%),
    var(--forest-950);
  color: var(--paper);
}

.page-hero-content {
  max-width: 900px;
}

.page-hero h1 {
  margin-bottom: 20px;
  font-size: var(--h-1);
  line-height: 0.98;
}

.page-hero p:last-child {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 253, 249, 0.64);
  font-size: 18px;
}

.category-intro {
  background: var(--paper);
}

.category-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.category-problem {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream-100);
}

.category-problem strong {
  display: block;
  margin-bottom: 9px;
  color: var(--forest-900);
  font-size: 16px;
}

.category-problem p {
  min-height: 70px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}

.comparison-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.comparison-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  /* Ziffern gleich breit, sonst stehen "29 Seiten" und "40 Seiten" versetzt. */
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.comparison-table th {
  color: var(--forest-900);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comparison-table td {
  color: var(--muted);
  font-size: 13px;
}

.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.product-hero {
  position: relative;
  padding-block: 48px 86px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(120, 148, 135, 0.3), transparent 34%),
    var(--forest-950);
  color: var(--paper);
}

.product-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(50px, 7vw, 96px);
  align-items: center;
}

.product-hero h1 {
  margin-bottom: 12px;
  font-size: var(--h-1);
  line-height: 0.95;
}

.product-subtitle {
  margin-bottom: 19px;
  color: var(--product-accent, var(--gold-300));
  font-family: var(--display);
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.08;
}

.product-lead {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 253, 249, 0.66);
  font-size: 17px;
}

.product-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-block: 28px;
  border-block: 1px solid var(--line-light);
}

.product-fact {
  padding: 16px 18px;
}

.product-fact + .product-fact {
  border-left: 1px solid var(--line-light);
}

.product-fact strong,
.product-fact span {
  display: block;
}

.product-fact strong {
  color: var(--paper);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 530;
  line-height: 1;
}

.product-fact span {
  margin-top: 5px;
  color: rgba(255, 253, 249, 0.52);
  font-size: 10px;
  text-transform: uppercase;
}

.product-note {
  display: block;
  margin-top: 14px;
  color: rgba(255, 253, 249, 0.48);
  font-size: 11px;
}

.product-visual {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
}

.product-visual::before {
  position: absolute;
  width: min(490px, 92%);
  aspect-ratio: 1;
  border: 1px solid rgba(226, 201, 148, 0.17);
  border-radius: 50%;
  content: "";
}

.product-visual img {
  position: relative;
  z-index: 1;
  width: min(350px, 72%);
  border-radius: 5px;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.42);
  transform: rotate(1.3deg);
}

.product-badge {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: 84px;
  padding: 14px 17px;
  border: 1px solid rgba(226, 201, 148, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(8, 35, 29, 0.92);
  box-shadow: var(--shadow-sm);
}

.product-badge strong,
.product-badge span {
  display: block;
}

.product-badge strong {
  color: var(--product-accent, var(--gold-300));
  font-size: 11px;
  text-transform: uppercase;
}

.product-badge span {
  color: rgba(255, 253, 249, 0.7);
  font-size: 11px;
}

.product-page[data-product="unsauberkeit"] {
  --product-accent: #efaf91;
  --product-soft: var(--terra-100);
}

.product-page[data-product="zweitkatze"] {
  --product-accent: #c8d9ca;
  --product-soft: var(--sage-100);
}

.safety-alert {
  padding-block: 26px;
  border-bottom: 1px solid rgba(169, 79, 60, 0.2);
  background: var(--terra-100);
}

.safety-alert-inner {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 19px;
  align-items: center;
}

.safety-alert-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--terra-600);
  color: #fff;
}

.safety-alert-icon svg {
  width: 22px;
}

.safety-alert h2 {
  margin-bottom: 3px;
  color: #7f3729;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 780;
  letter-spacing: 0;
}

.safety-alert p {
  margin: 0;
  color: #754c43;
  font-size: 13px;
}

.safety-alert a {
  display: inline-block;
  padding-block: 3px;
  color: #7f3729;
  font-size: 12px;
  font-weight: 760;
}

.product-section {
  padding-block: clamp(78px, 8vw, 118px);
  background: var(--paper);
}

.product-section.alt {
  background: var(--cream-100);
}

.product-split {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(54px, 8vw, 108px);
  align-items: start;
}

.product-split.reverse {
  grid-template-columns: 1.08fr 0.92fr;
}

.product-copy h2 {
  margin-bottom: 20px;
  color: var(--forest-900);
  font-size: var(--h-2);
  line-height: 1.02;
}

.product-copy > p {
  color: var(--muted);
  font-size: 17px;
}

.situation-list,
 .plain-check-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.situation-list {
  border-top: 1px solid var(--line);
}

.situation-list li {
  position: relative;
  padding: 19px 8px 19px 38px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.situation-list li::before {
  position: absolute;
  top: 19px;
  left: 4px;
  color: var(--terra-600);
  content: "→";
  font-weight: 800;
}

.deliverable-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.deliverable-card {
  min-height: 215px;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.deliverable-card span {
  color: var(--terra-600);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

.deliverable-card h3 {
  margin: 18px 0 8px;
  color: var(--forest-900);
  font-size: 17px;
}

.deliverable-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.phase-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line);
}

.phase-step {
  min-height: 185px;
  padding: 24px;
  background: var(--paper);
}

.phase-step span {
  color: var(--forest-700);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
}

.phase-step h3 {
  margin: 28px 0 7px;
  color: var(--forest-900);
  font-family: var(--display);
  font-size: var(--h-4);
  font-weight: 520;
}

.phase-step p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.chapter-layout {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 28px;
}

.chapter-summary {
  padding: 36px;
  border-radius: var(--radius-md);
  background: var(--forest-900);
  color: var(--paper);
}

.chapter-summary span {
  color: var(--product-accent, var(--gold-300));
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.chapter-summary h2 {
  margin: 14px 0 19px;
  font-size: var(--h-3);
  line-height: 1;
}

.chapter-summary p {
  color: rgba(255, 253, 249, 0.6);
  font-size: 13px;
}

.chapter-list {
  margin: 0;
  padding: 10px 0 10px 30px;
}

.chapter-list li {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.chapter-list li::marker {
  color: var(--forest-700);
  font-weight: 760;
}

.bonus-note {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--product-soft, var(--sage-100));
  color: var(--forest-900);
  font-size: 13px;
}

.preview-section {
  background: var(--forest-950);
  color: var(--paper);
}

.preview-section .section-head h2 {
  color: var(--paper);
}

.preview-section .section-head p {
  color: rgba(255, 253, 249, 0.6);
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.preview-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: var(--forest-900);
  text-decoration: none;
}

.preview-card img {
  width: 100%;
  aspect-ratio: 0.707;
  object-fit: cover;
  object-position: top;
  transition: transform 220ms ease;
}

.preview-card:hover img {
  transform: scale(1.015);
}

.preview-card span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: rgba(255, 253, 249, 0.72);
  font-size: 12px;
}

.preview-card b {
  color: var(--product-accent, var(--gold-300));
}

.preview-dialog {
  width: min(880px, calc(100% - 28px));
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
}

.preview-dialog::backdrop {
  background: rgba(2, 14, 11, 0.82);
  backdrop-filter: blur(5px);
}

.dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
}

.dialog-bar strong {
  color: var(--forest-900);
  font-size: 13px;
}

.dialog-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream-100);
  color: var(--forest-900);
  font-size: 20px;
}

.dialog-media {
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: #d9d5cc;
}

.dialog-media img {
  width: min(100%, 720px);
  margin-inline: auto;
}

.evidence-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(48px, 7vw, 96px);
}

.source-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.source-card-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--forest-700);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.source-card ul {
  display: grid;
  gap: 14px;
  margin: 24px 0 16px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
}

.source-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.fit-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.fit-card.caution {
  background: var(--terra-100);
}

.fit-card h2 {
  margin-bottom: 18px;
  color: var(--forest-900);
  font-size: var(--h-3);
}

.plain-check-list {
  display: grid;
  gap: 11px;
}

.plain-check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 13px;
}

.plain-check-list li::before {
  position: absolute;
  left: 0;
  color: var(--forest-700);
  content: "✓";
  font-weight: 800;
}

.fit-card.caution .plain-check-list li::before {
  color: var(--terra-600);
  content: "!";
}

.purchase-band {
  background: var(--forest-950);
  color: var(--paper);
}

.purchase-panel {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: center;
  padding: clamp(38px, 6vw, 68px);
  border: 1px solid rgba(226, 201, 148, 0.25);
  border-radius: var(--radius-lg);
  background: var(--forest-900);
}

.purchase-panel h2 {
  margin-bottom: 14px;
  font-size: var(--h-2);
  line-height: 1;
}

.purchase-panel p {
  margin: 0;
  color: rgba(255, 253, 249, 0.62);
}

.purchase-box {
  padding: 27px;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

.purchase-box span,
.purchase-box strong,
.purchase-box small {
  display: block;
}

.purchase-box span {
  color: var(--muted);
  font-size: 11px;
}

.purchase-box strong {
  margin: 2px 0 16px;
  color: var(--forest-900);
  font-family: var(--display);
  font-size: 58px;
  font-weight: 550;
  line-height: 1;
}

.purchase-box .button {
  width: 100%;
}

.purchase-box small {
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(50px, 8vw, 110px);
}

.faq-intro h2 {
  color: var(--forest-900);
  font-size: var(--h-2);
  line-height: 1;
}

.faq-intro p {
  color: var(--muted);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 21px 44px 21px 0;
  color: var(--forest-900);
  font-size: 15px;
  font-weight: 720;
  list-style: none;
}

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

.faq-list summary::after {
  position: absolute;
  top: 20px;
  right: 6px;
  color: var(--forest-700);
  content: "+";
  font-size: 22px;
  font-weight: 430;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  max-width: 720px;
  margin: 0;
  padding: 0 40px 22px 0;
  color: var(--muted);
  font-size: 14px;
}

.related-guide {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 34px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.related-guide img {
  width: 150px;
  max-height: 215px;
  margin-inline: auto;
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

.related-guide h2 {
  margin-bottom: 10px;
  color: var(--forest-900);
  font-size: var(--h-3);
}

.related-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.disclaimer {
  padding-block: 34px;
  background: var(--forest-900);
  color: var(--paper);
}

.disclaimer-inner {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 30px;
}

.disclaimer strong {
  color: var(--gold-300);
  font-size: 11px;
  text-transform: uppercase;
}

.disclaimer p {
  margin: 0;
  color: rgba(255, 253, 249, 0.56);
  font-size: 12px;
}

.editorial {
  background: var(--paper);
}

.editorial-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(52px, 8vw, 110px);
}

.editorial-aside {
  position: sticky;
  top: 120px;
  align-self: start;
}

.editorial-aside h2 {
  color: var(--forest-900);
  font-size: var(--h-2);
  line-height: 1;
}

.editorial-aside p {
  color: var(--muted);
}

.editorial-content > section {
  margin-bottom: 70px;
}

.editorial-content > section:last-child {
  margin-bottom: 0;
}

.editorial-content h2 {
  margin-bottom: 17px;
  color: var(--forest-900);
  font-size: var(--h-3);
  line-height: 1.05;
}

.editorial-content h3 {
  margin: 28px 0 9px;
  color: var(--forest-900);
  font-size: var(--h-5);
}

.editorial-content p,
.editorial-content li {
  color: var(--muted);
}

.editorial-note {
  padding: 30px;
  border-left: 4px solid var(--gold-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--sand-100);
}

.editorial-note p:last-child {
  margin-bottom: 0;
}

.standard-list {
  counter-reset: standard;
}

.standard-step {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  counter-increment: standard;
}

.standard-step::before {
  content: counter(standard, decimal-leading-zero);
  color: var(--gold-500);
  font-size: 12px;
  font-weight: 780;
}

.standard-step h2 {
  margin-bottom: 7px;
  font-size: var(--h-4);
}

.standard-step p {
  margin: 0;
  font-size: 14px;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.principle-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream-100);
}

.principle-card > svg {
  width: 30px;
  height: 30px;
  color: var(--gold-500);
}

.principle-card h3 {
  margin: 18px 0 8px;
  font-size: var(--h-5);
}

.principle-card p {
  margin: 0;
  font-size: 13px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.contact-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.contact-card span {
  color: var(--forest-700);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
}

.contact-card h2 {
  margin: 40px 0 14px;
  color: var(--forest-900);
  font-size: var(--h-3);
  line-height: 1;
}

.contact-card p {
  margin: 0 0 26px;
  color: var(--muted);
}

.contact-card .button,
.contact-card .text-link {
  margin-top: auto;
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 780px);
  gap: clamp(48px, 7vw, 94px);
  justify-content: center;
}

.legal-nav {
  position: sticky;
  top: 120px;
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream-100);
}

.legal-nav strong {
  margin-bottom: 6px;
  color: var(--forest-900);
  font-size: 12px;
}

.legal-nav a {
  display: inline-block;
  padding-block: 3px;
  color: var(--muted);
  font-size: 12px;
}

.legal-content section {
  margin-bottom: 48px;
  scroll-margin-top: 110px;
}

.legal-content h2 {
  margin-bottom: 14px;
  color: var(--forest-900);
  font-size: var(--h-3);
}

.legal-content p,
.legal-content li {
  color: var(--muted);
}

.legal-content a {
  color: var(--forest-700);
}

.not-found {
  min-height: calc(100vh - 78px);
  display: grid;
  place-items: center;
  padding-block: 80px;
  background:
    radial-gradient(circle at 70% 35%, rgba(120, 148, 135, 0.24), transparent 32%),
    var(--forest-950);
  color: var(--paper);
  text-align: center;
}

.not-found-inner {
  max-width: 720px;
}

.not-found-code {
  color: var(--gold-300);
  font-family: var(--display);
  font-size: clamp(100px, 18vw, 190px);
  line-height: 0.75;
}

.not-found h1 {
  margin: 32px 0 14px;
  font-size: var(--h-2);
}

.not-found p {
  margin: 0 0 28px;
  color: rgba(255, 253, 249, 0.62);
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: #061d18;
  color: rgba(255, 253, 249, 0.63);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: 48px;
  padding-block: 72px 54px;
}

.footer-brand p {
  max-width: 390px;
  margin: 21px 0 12px;
  font-size: 13px;
}

.footer-brand small {
  color: #9eaaa6;
  font-size: 10px;
}

.footer-column h2 {
  margin: 0 0 18px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-column a {
  display: block;
  margin-block: 6px;
  padding-block: 3px;
  color: rgba(255, 253, 249, 0.62);
  font-size: 12px;
  text-decoration: none;
}

.footer-column a:hover {
  color: var(--gold-300);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #9eaaa6;
  font-size: 10px;
}

@media (max-width: 1120px) {
  .shell {
    width: min(var(--shell), calc(100% - 44px));
  }

  .header-inner {
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: 20px;
  }

  .desktop-nav {
    gap: 20px;
  }

  .guide-card {
    grid-template-columns: 42% 58%;
  }

  .guide-card-body {
    padding: 32px 25px;
  }

  .guide-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .trust-bar-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-bar-item:nth-child(3),
  .trust-bar-item:nth-child(4) {
    border-top: 1px solid var(--line-light);
  }

  .footer-main {
    grid-template-columns: 1.4fr repeat(2, 1fr);
  }

  .footer-column:last-child {
    grid-column: 2 / 4;
  }
}

@media (max-width: 860px) {
  .shell,
  .shell-narrow {
    width: min(100% - 34px, 760px);
  }

  .header-inner {
    min-height: 70px;
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }

  .mobile-menu {
    position: fixed;
    z-index: 190;
    top: 70px;
    right: 0;
    left: 0;
    /* 100vh rechnet die mobile Browserleiste nicht mit, das Menue wurde unten
       abgeschnitten. dvh tut es; die vh-Zeile bleibt als Fallback davor stehen. */
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    /* contain: am Ende der Menueliste scrollt sonst die Seite dahinter weiter.
       env(): im Querformat auf Geraeten mit Notch nicht unter die Aussparung laufen. */
    overscroll-behavior: contain;
    padding: 18px max(17px, env(safe-area-inset-right)) 28px max(17px, env(safe-area-inset-left));
    overflow: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--forest-950);
    box-shadow: 0 24px 50px rgba(3, 18, 14, 0.25);
  }

  .mobile-menu.is-open {
    display: grid;
  }

  .mobile-menu a {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line-light);
    color: var(--paper);
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
  }

  .guide-grid,
  .benefit-grid,
  .process-grid,
  .trust-panel,
  .product-hero-grid,
  .product-split,
  .product-split.reverse,
  .chapter-layout,
  .evidence-grid,
  .purchase-panel,
  .faq-grid,
  .editorial-grid,
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .benefit-intro,
  .editorial-aside,
  .legal-nav {
    position: static;
  }

  .knowledge-note {
    grid-template-columns: 1fr;
  }

  .category-problem-grid,
  .principle-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-visual {
    min-height: 520px;
  }

  .phase-flow {
    grid-template-columns: 1fr 1fr;
  }

  .related-guide {
    grid-template-columns: 150px 1fr;
  }

  .related-guide .button {
    grid-column: 1 / -1;
  }

  .legal-nav {
    display: flex;
    flex-wrap: wrap;
  }

  .legal-nav strong {
    width: 100%;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 15px;
  }

  .shell,
  .shell-narrow {
    width: min(100% - 28px, 560px);
  }

  .brand img {
    width: 143px;
  }

  .section {
    padding-block: 78px;
  }

  .section-head {
    margin-bottom: 36px;
  }

  .section-head p {
    font-size: 16px;
  }

  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .button-row .button {
    width: 100%;
  }

  .trust-bar-grid,
 .guide-grid,
 .trust-checks,
 .category-problem-grid,
 .deliverable-grid,
 .fit-grid,
 .contact-grid,
 .principle-grid{
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 26px 22px;
    overflow-wrap: anywhere;
  }

  .trust-bar-item {
    min-height: 104px;
    border-right: 1px solid var(--line-light);
  }

  .trust-bar-item:nth-child(2) {
    border-top: 1px solid var(--line-light);
  }

  .guide-card {
    grid-template-columns: 1fr;
  }

  .guide-card-cover {
    min-height: 430px;
  }

  .guide-card-cover img {
    width: min(245px, 72%);
  }

  .guide-card-footer {
    align-items: stretch;
  }

  .guide-card-footer .button {
    width: 100%;
  }

  .trust-panel {
    padding: 32px 24px;
  }

  .knowledge-note {
    padding: 30px 24px;
  }

  .page-hero,
  .product-hero {
    padding-block: 36px 70px;
  }

  .breadcrumbs {
    margin-bottom: 32px;
  }

  .product-facts {
    grid-template-columns: 1fr;
  }

  .product-fact + .product-fact {
    border-top: 1px solid var(--line-light);
    border-left: 0;
  }

  .product-visual {
    min-height: 450px;
  }

  .product-badge {
    right: 0;
    bottom: 45px;
  }

  .safety-alert-inner {
    grid-template-columns: 46px 1fr;
  }

  .safety-alert a {
    grid-column: 2;
  }

  .phase-flow {
    grid-template-columns: 1fr;
  }

  .preview-grid {
    gap: 8px;
  }

  .preview-card span {
    padding: 9px 7px;
    font-size: 9px;
  }

  .source-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .purchase-panel {
    padding: 29px 20px;
  }

  .related-guide {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .related-guide .button {
    grid-column: auto;
  }

  .disclaimer-inner {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .standard-step {
    grid-template-columns: 38px 1fr;
    gap: 10px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-column:last-child {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (min-width: 1680px) {
  :root {
    --shell: 1360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .button,
  .preview-dialog {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section,
  .product-section {
    padding-block: 32px;
  }
}

/* ============================================================
   HYBRID DARK THEME  (Test-01-Stimmung + Test-02-Handwerk)
   Dunkel, augenfreundlich, Newsreader/Manrope bleiben.
   Als letzter Block bewusst hier: gewinnt per Quell-Reihenfolge
   auch gegenüber den Responsive-Regeln oben.
   ============================================================ */
:root {
  --hy-deep: #08231d;   /* dunkelste Bänder (Anker) */
  --hy-base: #0a2820;   /* Seiten-Grund */
  --hy-alt:  #0e3329;   /* leicht hellere Sektion für Rhythmus */
  --hy-card: #16463a;   /* Karten & Panels, ein Schritt heller */
  --hy-ink:  #f4efe4;   /* Headline-Creme */
  --hy-text: rgba(244, 239, 228, 0.76); /* Fließtext auf Grün */
  --hy-faint: rgba(244, 239, 228, 0.55);
  --hy-line: rgba(226, 201, 148, 0.16);
  --hy-terra: #e79b7d;  /* aufgehellte Terrakotta für dunklen Grund */
}

body { background: var(--hy-base); }

/* ---- BENEFIT-LISTE ---- */
.benefit-section { background: var(--hy-base); }
.benefit-intro h2,
.process-intro h2 { color: var(--hy-ink); }
.benefit-intro p,
.process-intro p { color: var(--hy-text); }
.benefit-list { border-top-color: var(--hy-line); }
.benefit-item { border-bottom-color: var(--hy-line); }
.benefit-item > span { color: var(--gold-300); }
.benefit-item h3 { color: var(--hy-ink); }
.benefit-item p { color: var(--hy-text); }

/* ---- PROZESS ---- */
.process-section { background: var(--hy-alt); }
.process-intro .text-link { color: var(--gold-300); }
.process-list li::before { border-color: rgba(226, 201, 148, 0.3); color: var(--gold-300); }
.process-list li:not(:last-child)::after { background: var(--hy-line); }
.process-list h3 { color: var(--hy-ink); }
.process-list p { color: var(--hy-text); }

/* ---- TRUST-PANEL ---- */
.trust-section { background: var(--hy-base); }
.trust-panel {
  border: 1px solid rgba(226, 201, 148, 0.22);
  background: var(--hy-card);
}

/* ---- WISSENS-NOTIZ ---- */
.benefit-section .knowledge-note {
  border-color: rgba(226, 201, 148, 0.2);
  background: var(--hy-card);
}
.knowledge-note h2 { color: var(--hy-ink); }
.knowledge-note p { color: var(--hy-text); }
.knowledge-note .button-outline {
  border-color: rgba(226, 201, 148, 0.42);
  background: transparent;
  color: var(--hy-ink);
}
.knowledge-note .button-outline:hover {
  border-color: var(--gold-300);
  background: transparent;
  color: var(--gold-300);
}

/* dunkelste Anker-Bänder bleiben tief */
.guides-section,
.final-cta { background: var(--hy-deep); }

/* ============================================================
   TYPO-GROESSEN: kleine Fliesstexte auf Lese-Groesse anheben
   (waren 12-14px, jetzt 15-16px = Body-Niveau)
   ============================================================ */
/* Guide-Cover-Karten */
.guide-card-body > p { font-size: 15.5px; }
.guide-card ul { font-size: 15px; }
.guide-card li { font-size: 15px; }
.guide-label { font-size: 11px; }
.guide-price small { font-size: 12px; }

/* Prozess-Liste (rechte Spalte) */
.process-list h3 { font-size: var(--h-5); }
.process-list p { font-size: 16px; }
.process-list li::before { font-size: 12px; }

/* Nutzen-Liste (Konsistenz) */
.benefit-item h3 { font-size: var(--h-5); }
.benefit-item p { font-size: 16px; }

/* Trust-Panel-Kacheln leicht mit */
.trust-check strong { font-size: 14px; }
.trust-check span { font-size: 13px; }

/* ============================================================
   LESBARKEIT: kompletter Schriftgroessen-Durchgang Startseite
   Fliesstext/Links 14-16px, Labels (uppercase) min. 12px.
   Ziel: nichts strengt beim Lesen an, kein Absprung.
   ============================================================ */
/* Navigation & Buttons/Links global */
.desktop-nav a { font-size: 15px; }
.header-cta,
.menu-button { font-size: 14px; }
.mobile-menu a { font-size: 16px; }
.button { font-size: 15px; }
.text-link { font-size: 15px; }

/* Kicker-Labels ohne Strich (uppercase) auf lesbares Minimum.
   .eyebrow steht bewusst NICHT hier, die hat ihre eine Quelle ganz oben. */
.guide-label { font-size: 12px; }

/* Trust-Bar oben ("Quellen sichtbar" + Text darunter) */
.trust-bar-item strong { font-size: 15px; }
.trust-bar-item span { font-size: 13px; }

/* Footer komplett */
.footer-brand p { font-size: 15px; }
.footer-brand small { font-size: 12px; }
.footer-column h2 { font-size: 12px; }
.footer-column a { font-size: 14px; }
.footer-bottom { font-size: 12px; }

/* Frueherer Sonderfall "beide Cover auf Mittel-Gruen" entfernt am 24.07.2026:
   ersetzt durch die Cluster-Flaeche --cluster-katzen weiter oben. Salbeigruen
   war hier die falsche Wahl, weil die Katzen-Cover selbst salbeigruen sind
   und darauf verschmolzen. */

/* ============================================================
   UNTERSEITEN: dunkler Hybrid auf alle Seiten ausrollen
   Alle hellen Sektionen -> dunkel, Cremetext, Gold/Terra-Akzent.
   Rechtstexte behalten bewusst einen hellen Lesekasten.
   ============================================================ */

/* ---- Globale Grundlagen (ganze Seite ist jetzt dunkel) ---- */
body { color: var(--hy-ink); }
.section-head h2 { color: var(--hy-ink); }
.section-head p { color: var(--hy-text); }
.text-link { color: var(--gold-300); }
.button-outline {
  border-color: rgba(226, 201, 148, 0.42);
  background: transparent;
  color: var(--hy-ink);
}
.button-outline:hover {
  border-color: var(--gold-300);
  background: transparent;
  color: var(--gold-300);
}

/* ---- CLUSTER-HUB ---- */
.category-intro { background: var(--hy-base); }
.category-problem { border-color: var(--hy-line); background: var(--hy-card); }
.category-problem strong { color: var(--hy-ink); font-size: 17px; }
.category-problem p { color: var(--hy-text); font-size: 15px; }
.comparison-wrap { border-color: var(--hy-line); background: var(--hy-card); }
.comparison-table th,
.comparison-table td { border-bottom-color: var(--hy-line); }
.comparison-table th { color: var(--hy-ink); font-size: 13px; }
.comparison-table td { color: var(--hy-text); font-size: 15px; }

/* ---- PRODUKT-LP: Sektionshintergruende ---- */
.product-section { background: var(--hy-base); }
.product-section.alt { background: var(--hy-alt); }

/* Safety-Alert (Warnung) als dezente Terra-Leiste auf dunkel */
.safety-alert {
  border-top: 1px solid rgba(233, 155, 125, 0.28);
  border-bottom: 1px solid rgba(233, 155, 125, 0.28);
  background: var(--hy-alt);
}
.safety-alert h2 { color: var(--hy-terra); }
.safety-alert p { color: var(--hy-text); font-size: 14px; }
.safety-alert a { color: var(--hy-terra); }

/* Problem/Situation */
.product-copy h2 { color: var(--hy-ink); }
.product-copy > p { color: var(--hy-text); }
.situation-list { border-top-color: var(--hy-line); }
.situation-list li { border-bottom-color: var(--hy-line); color: var(--hy-text); font-size: 15px; }
.situation-list li::before { color: var(--hy-terra); }

/* Bausteine (deliverables) */
.deliverable-card { border-color: var(--hy-line); background: var(--hy-card); }
.deliverable-card span { color: var(--hy-terra); font-size: 12px; }
.deliverable-card h3 { color: var(--hy-ink); font-size: var(--h-5); }
.deliverable-card p { color: var(--hy-text); font-size: 15px; }

/* Phasen */
.phase-flow { border-color: var(--hy-line); background: var(--hy-line); }
.phase-step { background: var(--hy-card); }
.phase-step span { color: var(--gold-300); font-size: 11px; }
.phase-step h3 { color: var(--hy-ink); }
.phase-step p { color: var(--hy-text); font-size: 14px; }

/* Kapiteluebersicht */
.chapter-list li { border-bottom-color: var(--hy-line); color: var(--hy-text); font-size: 15px; }
.chapter-list li::marker { color: var(--gold-300); }
.chapter-summary p { font-size: 14px; }
.bonus-note {
  border-color: var(--hy-line);
  background: var(--hy-card);
  color: var(--hy-text);
  font-size: 14px;
}

/* Evidenz / Quellen */
.source-card { border-color: var(--hy-line); background: var(--hy-card); }
.source-card-head { border-bottom-color: var(--hy-line); color: var(--gold-300); font-size: 12px; }
.source-card ul { color: var(--hy-text); font-size: 14px; }
.source-card > p { color: var(--hy-faint); font-size: 13px; }

/* Eignung / Grenzen */
.fit-card { border-color: var(--hy-line); background: var(--hy-card); }
.fit-card.caution { border-color: rgba(233, 155, 125, 0.28); background: #241a16; }
.fit-card h2 { color: var(--hy-ink); }
.plain-check-list li { color: var(--hy-text); font-size: 15px; }
.plain-check-list li::before { color: var(--gold-300); }
.fit-card.caution .plain-check-list li::before { color: var(--hy-terra); }

/* FAQ */
.faq-intro h2 { color: var(--hy-ink); }
.faq-intro p { color: var(--hy-text); }
.faq-list { border-top-color: var(--hy-line); }
.faq-list details { border-bottom-color: var(--hy-line); }
.faq-list summary { color: var(--hy-ink); font-size: 16px; }
.faq-list summary::after { color: var(--gold-300); }
.faq-list details p { color: var(--hy-text); font-size: 15px; }

/* Verwandter Guide */
.related-guide { border-color: var(--hy-line); background: var(--hy-card); }
.related-guide h2 { color: var(--hy-ink); }
.related-guide p { color: var(--hy-text); font-size: 15px; }

/* Produkt-Hero Kleintexte */
.product-note { font-size: 13px; }
.breadcrumbs { font-size: 12px; }
.disclaimer p { font-size: 13px; }

/* ---- EDITORIAL (Redaktionsstandard, Ueber uns) ---- */
.editorial { background: var(--hy-base); }
.editorial-aside h2 { color: var(--hy-ink); }
.editorial-aside p { color: var(--hy-text); }
.editorial-content h2 { color: var(--hy-ink); }
.editorial-content h3 { color: var(--hy-ink); }
.editorial-content p,
.editorial-content li { color: var(--hy-text); }
.editorial-note {
  border-left-color: var(--gold-500);
  background: var(--hy-card);
}
.editorial-note p { color: var(--hy-text); }
.standard-step { border-top-color: var(--hy-line); }
.standard-step h2 { color: var(--hy-ink); }
.standard-step p { color: var(--hy-text); font-size: 15px; }
.principle-card { border-color: var(--hy-line); background: var(--hy-card); }
.principle-card h3 { color: var(--hy-ink); }
.principle-card p { color: var(--hy-text); font-size: 15px; }

/* ---- KONTAKT ---- */
.contact-card { border-color: var(--hy-line); background: var(--hy-card); }
.contact-card span { color: var(--gold-300); font-size: 11px; }
.contact-card h2 { color: var(--hy-ink); }
.contact-card p { color: var(--hy-text); }

/* ---- RECHTSTEXTE: bewusst heller Lesekasten (Ausnahme) ---- */
.legal-content {
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--hy-line);
  border-radius: var(--radius-md);
  background: var(--cream-100);
  color: var(--ink);
}
.legal-content h2 { color: var(--forest-900); }
.legal-content p,
.legal-content li { color: var(--muted); }
.legal-content a { color: var(--forest-700); }

/* ============================================================
   STARTSEITE: Markenebene mit aktuellem Themenfokus
   Die Katze bleibt Inhalt des ersten Themenbereichs, nicht Hero.
   ============================================================ */
.brand-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 20%, rgba(226, 201, 148, 0.08), transparent 26%),
    linear-gradient(145deg, #071f1a 0%, var(--hy-base) 58%, #0d3329 100%);
  color: var(--hy-ink);
}

.brand-hero::before,
.brand-hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(226, 201, 148, 0.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.brand-hero::before {
  top: -360px;
  right: -110px;
  width: 740px;
  height: 740px;
}

.brand-hero::after {
  bottom: -470px;
  left: -230px;
  width: 680px;
  height: 680px;
}

.brand-hero-grid {
  min-height: 750px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.76fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
  padding-block: 76px 86px;
}

.brand-hero-copy {
  max-width: 720px;
}

.brand-hero-copy h1 {
  max-width: 740px;
  margin: 18px 0 26px;
  color: var(--hy-ink);
  font-size: var(--h-1);
  font-weight: 510;
  line-height: 0.93;
  letter-spacing: -0.035em;
}

.brand-hero-copy h1 em {
  color: var(--hy-terra);
  font-weight: 430;
}

.brand-hero-lead {
  max-width: 650px;
  margin: 0;
  color: rgba(244, 239, 228, 0.8);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.62;
}

.brand-status {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 25px 0 28px;
  color: rgba(244, 239, 228, 0.69);
  font-size: 15px;
  font-weight: 640;
}

.brand-status span {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 6px rgba(226, 201, 148, 0.11);
}

.brand-hero .button-primary {
  background: var(--gold-300);
  color: var(--forest-950);
  box-shadow: 0 16px 38px rgba(2, 15, 12, 0.36);
}

.brand-hero .button-primary:hover {
  background: #ecd6a6;
}

.brand-hero .button-outline {
  border-color: rgba(226, 201, 148, 0.42);
  background: transparent;
  color: var(--hy-ink);
}

.brand-hero .button-outline:hover {
  border-color: var(--gold-300);
  background: transparent;
  color: var(--gold-300);
}

.brand-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 25px;
  color: var(--hy-faint);
  font-size: 13px;
}

.brand-hero-facts span::before {
  margin-right: 8px;
  color: var(--gold-300);
  content: "✓";
  font-weight: 800;
}

.current-focus {
  position: relative;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(226, 201, 148, 0.22);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(22, 70, 58, 0.92), rgba(10, 40, 32, 0.94));
  box-shadow: 0 34px 90px rgba(2, 15, 12, 0.34);
}

.current-focus::after {
  position: absolute;
  top: -145px;
  right: -160px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(226, 201, 148, 0.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.current-focus-head,
.current-focus-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

/* Einzige erlaubte Abweichung vom Eyebrow-Standard: hier setzt der Flex-Kopf
   den Abstand selbst ueber gap, deshalb kein margin-bottom. Sonst nirgends. */
.current-focus-head .eyebrow {
  margin: 0;
}

.focus-count {
  padding: 6px 11px;
  border: 1px solid rgba(226, 201, 148, 0.24);
  border-radius: 999px;
  color: rgba(244, 239, 228, 0.74);
  font-size: 12px;
  font-weight: 700;
}

.current-focus h2 {
  position: relative;
  z-index: 1;
  margin: 24px 0 10px;
  color: var(--hy-ink);
  font-size: var(--h-3);
  line-height: 0.98;
}

.current-focus > p {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0;
  color: var(--hy-text);
  font-size: 15px;
}

.focus-covers {
  position: relative;
  min-height: 330px;
  margin: 24px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(226, 201, 148, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 120%, rgba(226, 201, 148, 0.2), transparent 48%),
    rgba(4, 25, 20, 0.3);
}

.focus-covers::before {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(226, 201, 148, 0.09);
  border-radius: 50%;
  content: "";
}

.focus-cover {
  position: absolute;
  bottom: -19px;
  width: 190px;
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(2, 15, 12, 0.46);
}

.focus-cover-first {
  left: calc(50% - 196px);
  z-index: 2;
  transform: rotate(-3.5deg);
}

.focus-cover-second {
  right: calc(50% - 196px);
  z-index: 1;
  transform: rotate(3.5deg);
}

.current-focus-footer {
  align-items: flex-end;
}

.current-focus-footer > span {
  color: var(--hy-faint);
  font-size: 12px;
}

.current-focus .text-link {
  color: var(--gold-300);
  text-align: right;
}

.home-guide-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
}

.home-guide-head > div {
  max-width: 760px;
}

.home-guide-head .text-link {
  margin-bottom: 7px;
  color: var(--gold-300);
}

/* Frueher hatten die Kacheln auf der Startseite eigene Farben je Guide
   (braun / gruen) und wichen damit von der Kategorieseite ab. Entfernt am
   24.07.2026: Startseite und Kategorieseite nutzen dieselbe Cluster-Flaeche. */

@media (max-width: 1120px) {
  .brand-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.7fr);
    gap: 42px;
  }

  .focus-covers {
    min-height: 290px;
  }

  .focus-cover {
    width: 160px;
  }

  .focus-cover-first {
    left: calc(50% - 166px);
  }

  .focus-cover-second {
    right: calc(50% - 166px);
  }
}

@media (max-width: 860px) {
  .brand-hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 58px;
    padding-block: 76px 86px;
  }

  .brand-hero-copy,
  .current-focus {
    width: min(100%, 680px);
  }

  .current-focus {
    justify-self: center;
  }

  .focus-covers {
    min-height: 350px;
  }

  .focus-cover {
    width: 205px;
  }

  .focus-cover-first {
    left: calc(50% - 211px);
  }

  .focus-cover-second {
    right: calc(50% - 211px);
  }

  .home-guide-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 620px) {
  .brand-hero-grid {
    gap: 46px;
    padding-block: 62px 70px;
  }

  .brand-hero-copy h1 {
    margin-block: 15px 22px;
  }

  .brand-hero-lead {
    font-size: 17px;
  }

  .brand-status {
    align-items: flex-start;
    font-size: 14px;
  }

  .brand-status span {
    margin-top: 7px;
  }

  .brand-hero-facts {
    display: grid;
    gap: 6px;
    font-size: 13px;
  }

  .current-focus {
    padding: 22px;
    border-radius: 22px;
  }

  .focus-covers {
    min-height: 270px;
    margin-top: 20px;
  }

  .focus-cover {
    bottom: -13px;
    width: 132px;
  }

  .focus-cover-first {
    left: calc(50% - 138px);
  }

  .focus-cover-second {
    right: calc(50% - 138px);
  }

  .current-focus-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .current-focus .text-link {
    text-align: left;
  }
}

/* ============================================================
   CLUSTER-HERO (/ratgeber/katzen/)
   Das Katzenfoto sitzt hier richtig: die Seite IST die Kategorie.
   Wichtig: jeder Bruchpunkt definiert seinen Verlauf selbst und
   steht hinter dem Basis-Block. Genau das fehlte beim alten
   .home-hero und fuehrte dazu, dass heller Text auf hellem Foto lag.
   ============================================================ */
.cluster-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 52px 104px;
  background: var(--hy-base);
}

.cluster-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(90deg,
      rgba(8, 35, 29, 0.97) 0%,
      rgba(8, 35, 29, 0.94) 40%,
      rgba(8, 35, 29, 0.74) 62%,
      rgba(8, 35, 29, 0.46) 100%),
    url("../images/hero-cat.webp");
  background-position: 74% center;
  background-size: cover;
}

.cluster-hero .page-hero-content {
  max-width: 620px;
}

.cluster-hero .page-hero-content p:last-child {
  max-width: 560px;
  color: rgba(244, 239, 228, 0.82);
}

.cluster-hero .breadcrumbs {
  position: relative;
}

/* Tablet: Textspalte wird breiter, also muss der Schleier dichter werden. */
@media (max-width: 860px) {
  .cluster-hero {
    padding-block: 44px 84px;
  }

  .cluster-hero::before {
    background-image:
      linear-gradient(90deg,
        rgba(8, 35, 29, 0.97) 0%,
        rgba(8, 35, 29, 0.92) 58%,
        rgba(8, 35, 29, 0.66) 100%),
      url("../images/hero-cat.webp");
    background-position: 70% center;
  }

  .cluster-hero .page-hero-content {
    max-width: 100%;
  }
}

/* Handy: Text laeuft ueber die volle Breite, deshalb senkrechter Verlauf.
   Oben dicht fuer den Text, unten heller, damit die Katze sichtbar bleibt. */
@media (max-width: 620px) {
  .cluster-hero {
    padding-block: 34px 215px;
  }

  .cluster-hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(8, 35, 29, 0.97) 0%,
        rgba(8, 35, 29, 0.95) 46%,
        rgba(8, 35, 29, 0.88) 62%,
        rgba(8, 35, 29, 0.42) 84%,
        rgba(8, 35, 29, 0.3) 100%),
      url("../images/hero-cat.webp");
    background-position: 66% 38%;
    background-size: auto 165%;
  }
}

/* ============================================================
   UPSELL-SEITEN (/ratgeber/katzen/nach-*)
   Eine Seite, eine Entscheidung. Keine Navigation, kein Footer-Menue,
   Logo ohne Link. Preisdarstellung ist Teil der Digistore-Freigabe
   und darf nicht veraendert werden.
   ============================================================ */
.upsell-main {
  min-height: 100vh;
  padding-block: 46px 64px;
  background:
    radial-gradient(circle at 50% 0%, rgba(226, 201, 148, 0.08), transparent 42%),
    var(--hy-base);
}

.upsell-shell {
  width: min(660px, 92vw);
}

.upsell-brand {
  margin-bottom: 34px;
  text-align: center;
}

.upsell-brand img {
  width: 180px;
  height: auto;
}

.upsell-head {
  margin-bottom: 30px;
  text-align: center;
}

.upsell-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 15px;
  border: 1px solid rgba(111, 191, 143, 0.4);
  border-radius: 999px;
  background: rgba(111, 191, 143, 0.1);
  color: #8fd0aa;
  font-size: 13px;
}

.upsell-confirm svg {
  width: 15px;
  height: 15px;
}

.upsell-head h1 {
  margin-bottom: 12px;
  color: var(--hy-ink);
  font-size: var(--h-3);
  line-height: 1.12;
}

.upsell-head > p {
  color: var(--hy-text);
  font-size: 16px;
}

.upsell-offer {
  padding: 30px 32px;
  border: 1px solid rgba(226, 201, 148, 0.22);
  border-radius: 18px;
  background: var(--hy-card);
}

.upsell-offer h2 {
  margin: 12px 0 16px;
  color: var(--hy-ink);
  font-size: var(--h-4);
  line-height: 1.22;
}

.upsell-offer p {
  margin-bottom: 14px;
  color: var(--hy-text);
  font-size: 15.5px;
}

.upsell-offer strong {
  color: var(--hy-ink);
}

/* Cover des angebotenen Guides auf der Upsell-Seite.
   Bewusst NEBEN dem Text, nicht darueber: bei einem Upsell soll der Kunde die
   Entscheidungs-Buttons ohne langes Scrollen sehen. Das Cover ist bei einem PDF
   der einzige sichtbare Produktbeweis (war vor dem Umbau am 24.07.2026 schon da
   und ist dabei verloren gegangen). */
.upsell-offer-grid {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 26px;
  align-items: center;
  margin: 4px 0 6px;
}

.upsell-cover {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 20px 44px rgba(2, 15, 12, 0.46);
}

.upsell-offer-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .upsell-offer-grid {
    grid-template-columns: 116px 1fr;
    gap: 18px;
    align-items: start;
  }
}

.upsell-price {
  margin: 24px 0 20px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(4, 21, 17, 0.42);
  text-align: center;
}

.upsell-offer .upsell-price-before {
  margin-bottom: 6px;
  color: var(--hy-faint);
  font-size: 14px;
}

.upsell-offer .upsell-price-before s {
  color: var(--hy-faint);
}

.upsell-offer .upsell-price-now {
  margin-bottom: 8px;
  color: var(--gold-300);
  font-family: "Newsreader", Georgia, serif;
  font-size: 46px;
  line-height: 1;
}

.upsell-offer .upsell-price-note {
  margin: 0;
  color: var(--hy-faint);
  font-size: 13px;
}

.upsell-yes {
  display: block;
  width: 100%;
  padding-block: 16px;
  text-align: center;
  font-size: 16.5px;
}

.upsell-offer .upsell-hint {
  margin: 14px 0 18px;
  color: var(--hy-faint);
  font-size: 13.5px;
  text-align: center;
}

.upsell-no {
  display: block;
  padding-block: 4px;
  color: var(--hy-faint);
  font-size: 14.5px;
  text-align: center;
  text-decoration: underline;
}

.upsell-no:hover {
  color: var(--hy-ink);
}

.upsell-once {
  margin: 22px 0 34px;
  color: var(--hy-text);
  font-size: 14px;
  text-align: center;
}

.upsell-once strong {
  color: var(--gold-300);
}

.upsell-footer {
  padding-top: 26px;
  border-top: 1px solid var(--hy-line);
  color: var(--hy-faint);
  font-size: 13px;
}

.upsell-footer p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.upsell-footer strong {
  color: var(--hy-text);
}

.upsell-legal a {
  display: inline-block;
  padding-block: 3px;
  color: var(--gold-300);
}

@media (max-width: 620px) {
  .upsell-main {
    padding-block: 32px 48px;
  }

  .upsell-offer {
    padding: 22px 20px;
  }

  .upsell-price-now {
    font-size: 40px;
  }
}

/* ============================================================
   KI-KENNZEICHNUNG (Art. 50 Abs. 4 KI-VO, gilt seit 02.08.2026)
   Kanonische Regel: doktrin/recht-und-digistore.md Abschnitt 8b.

   Die Cover tragen das offizielle EU-Kennzeichen bereits eingebrannt, gebaut
   von werkzeuge/cover-derivate.mjs. Das ist Absicht: so ist es in jedem der
   sechs Cover-Layouts da, es kann nicht durch spaeteres CSS verdeckt werden
   und es bleibt erhalten, wenn jemand das Bild speichert.
   Diese Regeln gelten deshalb nur fuer die zwei Stellen, an denen das
   Kennzeichen im HTML steht:
     .ki-bildhinweis    Hinweis am Hero-Hintergrundbild des Katzen-Hubs.
                        Ein CSS-Hintergrund kann kein Label eingebrannt tragen.
     .ki-label-inline   das Kennzeichen im Fliesstext des Redaktionsstandards,
                        damit Leser sehen, wonach sie suchen sollen.
   Beide liegen auf dunkelgruenem Grund, deshalb die weisse Variante.
   ============================================================ */
/* Doppelter Selektor mit Absicht: .page-hero p:last-child (0,2,1) wuerde eine
   einfache Klasse (0,1,0) schlagen und Schriftgroesse, Farbe und max-width
   zurueckdrehen. p.ki-bildhinweis im .page-hero liegt gleichauf und steht
   spaeter, gewinnt also. Gemessen, nicht geschaetzt. */
.ki-bildhinweis,
.page-hero p.ki-bildhinweis {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 26px;
  max-width: 560px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(244, 239, 228, 0.74);
}

.ki-bildhinweis img {
  flex: none;
  width: 88px;
  height: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.ki-bildhinweis a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ki-bildhinweis a:hover {
  color: #f4efe4;
}

.ki-label-inline {
  width: 78px;
  height: auto;
  vertical-align: -4px;
}

@media (max-width: 620px) {
  .ki-bildhinweis {
    align-items: flex-start;
    margin-top: 24px;
  }
}

/* Kontaktseite: Adresse als Text neben dem Kopieren-Knopf. Der mailto-Link
   fuehrt ins Leere, wenn kein Mailprogramm eingerichtet ist, deshalb muss die
   Adresse auch lesbar dastehen. */
.contact-address {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--muted, rgba(22, 32, 28, 0.66));
}

.contact-address strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.button.is-copied {
  border-color: currentColor;
}