/* ==========================================================================
   Slow Mond — DACH B2B. "Mondlicht-Luxus": graphit-silberne Ingenieurs-
   Ästhetik mit kinoreifem Tiefgang. Runde Ecken bewusst minimal (6px).
   ========================================================================== */

:root {
  --color-graphite: #22262b;
  --color-graphite-deep: #13161a;
  --color-graphite-soft: #2b3036;
  --color-moon: #e9e7e0;
  --color-paper: #f8f7f4;
  --color-steel: #7a8288;
  --color-signal: #c77d4f;
  --color-signal-bright: #e0905c;
  --color-ink: #25282b;

  --color-line: #e2e0d9;
  --color-line-dark: #3a3f45;
  --color-moon-dim: #bab6ab;

  --glow-moon: rgba(233, 231, 224, 0.14);
  --glow-signal: rgba(199, 125, 79, 0.42);
  --grad-graphite: radial-gradient(
      120% 120% at 82% -10%,
      rgba(233, 231, 224, 0.10) 0%,
      rgba(199, 125, 79, 0.06) 26%,
      rgba(19, 22, 26, 0) 60%
    ),
    linear-gradient(180deg, #1b1f24 0%, #16191d 60%, #13161a 100%);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;

  --max-read-width: 700px;
  --max-page-width: 1240px;
  --radius: 6px;
  --radius-lg: 14px;
  --space-section: 110px;
  --space-section-sm: 64px;

  --shadow-card: 0 1px 2px rgba(34, 38, 43, 0.04),
    0 8px 24px rgba(34, 38, 43, 0.06);
  --shadow-card-lg: 0 2px 4px rgba(34, 38, 43, 0.06),
    0 22px 48px rgba(34, 38, 43, 0.12);
  --shadow-glow: 0 10px 30px rgba(199, 125, 79, 0.28);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-moon-dim);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s ease, color 0.16s ease;
}

a:hover {
  text-decoration-color: var(--color-signal);
}

:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
}

h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
}
h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}
h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}

p {
  margin: 0 0 1.1em;
}

.wrap {
  width: 100%;
  max-width: var(--max-page-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-moon);
  color: var(--color-graphite);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: calc(var(--space-section) * 0.6);
}

/* Erste Sektion nach dem Hero: oben kuerzer, damit die Artikelnummern auf
   einem 900-px-Notebook-Bildschirm ohne Scrollen anfangen. */
.section--first {
  padding-block-start: calc(var(--space-section) * 0.2);
}

.section--graphite {
  background: var(--color-graphite);
  color: var(--color-moon);
}

.section--graphite h2,
.section--graphite h3 {
  color: var(--color-moon);
}

.section--lined {
  border-top: 1px solid var(--color-line);
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin: 0 0 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-signal);
  flex: none;
}

.prose {
  max-width: var(--max-read-width);
}

.prose--wide {
  max-width: 860px;
}

.lede {
  font-size: 1.14rem;
  color: #4a5057;
  line-height: 1.7;
}

.section--graphite .lede {
  color: #b9bcc0;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.site-header {
  background: rgba(19, 22, 26, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--color-moon);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand__mark {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-moon);
  box-shadow: inset -4px -2px 0 0 var(--color-graphite-deep),
    0 0 14px rgba(233, 231, 224, 0.4);
  flex: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: #cfd1d3;
  text-decoration: none;
  font-size: 0.94rem;
  padding-block: 4px;
  position: relative;
  transition: color 0.16s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-signal);
  transition: width 0.2s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  width: 100%;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--color-signal-bright);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-moon);
  color: var(--color-graphite-deep);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.header-cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  color: var(--color-moon);
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- Trust-Bar (Zertifikate + Kenndaten) ------------------------------- */

.trustbar {
  background: var(--color-graphite-deep);
  border-bottom: 1px solid var(--color-line-dark);
  color: #b9bcc0;
}

.trustbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-block: 11px;
  flex-wrap: wrap;
}

.trustbar__certs {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.trustbar__certs li {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #d9d6cd;
  border: 1px solid var(--color-line-dark);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: default;
}

.trustbar__facts {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.trustbar__facts strong {
  color: var(--color-moon);
  font-weight: 600;
}

/* --- Laufzeitzähler im Hero ---------------------------------------------
   Der Streifen bleibt ausgeblendet, bis ein gemessener Wert vorliegt.
   Die Regel [hidden] muss ausgeschrieben werden: die display-Regel der
   Autorenschaft schlägt sonst das [hidden] { display: none } des Browsers,
   und der Streifen erschiene als leerer Block. */

.live-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-moon-dim);
}

.live-trust[hidden] {
  display: none;
}

.live-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-signal);
  animation: live-pulse 2.6s ease-out infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--glow-signal);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(199, 125, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(199, 125, 79, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
    box-shadow: 0 0 0 3px var(--glow-signal);
  }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  background: var(--grad-graphite);
  color: var(--color-moon);
  position: relative;
  overflow: hidden;
  /* R7: der Hero war mit 96 px oben und unten der groesste Einzelposten auf
     dem ersten Bildschirm. 72 px genuegen fuer Luft, ohne das Sortiment unter
     die Falz zu schieben. */
  padding-block: clamp(34px, 3.4vw, 50px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 50% at 84% 12%,
    var(--glow-signal) 0%,
    rgba(199, 125, 79, 0) 55%
  );
  opacity: 0.7;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 56px;
  align-items: center;
  position: relative;
}

.hero h1 {
  color: var(--color-moon);
  margin-bottom: 0.45em;
}

.hero h1 .accent {
  background: linear-gradient(100deg, var(--color-signal-bright), #f0c9a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: 1.1rem;
  color: #c4c7cb;
  max-width: 760px;
  line-height: 1.5;
}

/* Links auf dunklem Grund sichtbar machen: das globale `a { color: ink }`
   ist dunkel und verschwindet im Hero / in Graphit-Sektionen. Nur Text-Links
   umfärben — Buttons (.btn) behalten ihre eigenen Farben. */
.hero a:not(.btn),
.section--graphite a:not(.btn),
.trustbar a:not(.btn) {
  color: var(--color-signal-bright, #e6a273);
  text-decoration-color: currentColor;
}
.hero a:not(.btn):hover,
.section--graphite a:not(.btn):hover,
.trustbar a:not(.btn):hover {
  color: #fff;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.hero__meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 0.83rem;
  color: #9aa0a6;
  list-style: none;
  padding: 0;
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 10px var(--glow-signal);
  flex: none;
}

/* Mondphase — 24s Zyklus, reine CSS-Animation */
.moon-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}

.moon-wrap::after {
  content: "";
  position: absolute;
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(233, 231, 224, 0.16);
  box-sizing: border-box;
}

.moon {
  position: relative;
  width: clamp(160px, 22vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 34% 28%,
    #ffffff 0%,
    var(--color-moon) 44%,
    #cbc7bb 100%
  );
  box-shadow: 0 0 90px rgba(233, 231, 224, 0.22),
    inset -10px -6px 24px rgba(19, 22, 26, 0.35);
}

.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-graphite-deep);
  animation: lunar 12s ease-in-out infinite alternate;
}

@keyframes lunar {
  0% {
    transform: translateX(-104%);
  }
  100% {
    transform: translateX(104%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .moon::after {
    animation: none;
    transform: translateX(-58%);
  }
}

/* --- Schaltflächen ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.btn--primary {
  background: var(--color-moon);
  color: var(--color-graphite-deep);
  box-shadow: 0 8px 22px rgba(233, 231, 224, 0.18);
}

.btn--primary:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(233, 231, 224, 0.26);
}

.btn--ghost {
  background: transparent;
  color: var(--color-moon);
  border-color: #4a5057;
}

.btn--ghost:hover {
  border-color: var(--color-moon);
}

.btn--dark {
  background: var(--color-graphite);
  color: var(--color-moon);
}

.btn--dark:hover {
  background: #000;
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}

.btn--outline:hover {
  border-color: var(--color-graphite);
}

.btn--whatsapp {
  background: #1f8f5f;
  color: #fff;
}

.btn--whatsapp:hover {
  background: #17734c;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 143, 95, 0.32);
}

.btn--glow {
  background: linear-gradient(100deg, var(--color-signal), var(--color-signal-bright));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 30px var(--glow-signal);
}

.btn--glow:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px var(--glow-signal);
}

/* --- Manifest ----------------------------------------------------------- */

.manifest {
  text-align: center;
}

.manifest p {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
}

/* --- Pills / Keyword-Badges --------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-graphite);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 15px;
}

.section--graphite .pill {
  color: var(--color-moon);
  background: transparent;
  border-color: var(--color-line-dark);
}

.pill .pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-signal);
  flex: none;
}

/* --- Kartenraster ------------------------------------------------------- */

.grid {
  display: grid;
  gap: 22px;
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg);
  border-color: #d3d0c8;
}

.card--graphite {
  background: var(--color-graphite-soft);
  border-color: var(--color-line-dark);
  color: var(--color-moon);
}

.card--graphite h3 {
  color: var(--color-moon);
}

.card--graphite p {
  color: #b9bcc0;
}

.card__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-signal);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 12px;
}

.card h3 {
  margin-bottom: 0.45em;
}

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

.card__link {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-signal);
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Zahlenleiste ------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  background: var(--color-paper);
  padding: 30px 24px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 600;
  display: block;
  line-height: 1.1;
  margin-bottom: 8px;
  color: var(--color-graphite);
}

.stat__label {
  font-size: 0.86rem;
  color: var(--color-steel);
  display: block;
}

.stat__note {
  font-size: 0.78rem;
  color: var(--color-steel);
  display: block;
  margin-top: 6px;
}

/* --- Markt-Block (Marktgröße / Wachstum) ------------------------------- */

.market {
  background: var(--color-graphite);
  color: var(--color-moon);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.market::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 120% at 12% 0%,
    rgba(199, 125, 79, 0.16) 0%,
    rgba(19, 22, 26, 0) 55%
  );
  pointer-events: none;
}

.market__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  position: relative;
}

.market h2 {
  color: var(--color-moon);
}

.market__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
}

.market__fig {
  background: rgba(255, 255, 255, 0.03);
  padding: 22px 20px;
}

.market__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  display: block;
  color: #fff;
}

.market__num span {
  color: var(--color-signal-bright);
}

.market__cap {
  font-size: 0.82rem;
  color: #9aa0a6;
  display: block;
  margin-top: 8px;
}

.market__src {
  font-size: 0.78rem;
  color: #8d9297;
  margin-top: 22px;
}

/* --- Prozess-Timeline (4 Schritte) -------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.timeline li {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 26px 26px 26px 84px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}

.timeline li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: 22px;
  top: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--color-graphite), #16191d);
  box-shadow: 0 6px 16px rgba(34, 38, 43, 0.22);
}

.timeline {
  counter-reset: step;
}

.timeline li::after {
  content: "";
  position: absolute;
  left: 43px;
  top: 70px;
  bottom: -18px;
  width: 1px;
  background: var(--color-line);
}

.timeline li:last-child::after {
  display: none;
}

.timeline h3 {
  margin-bottom: 0.35em;
  font-size: 1.1rem;
}

.timeline p {
  margin: 0;
  font-size: 0.95rem;
  color: #4a5057;
}

/* --- Zertifikats-Reihe -------------------------------------------------- */

.cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 116px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.cert__abbr {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-graphite);
}

.cert__title {
  font-size: 0.74rem;
  color: var(--color-steel);
  line-height: 1.35;
}

.section--graphite .cert {
  background: var(--color-graphite-soft);
  border-color: var(--color-line-dark);
}

.section--graphite .cert__abbr {
  color: var(--color-moon);
}

.section--graphite .cert__title {
  color: #9aa0a6;
}

/* --- Referenz ----------------------------------------------------------- */

.reference {
  border-left: 3px solid var(--color-signal);
  padding-left: 26px;
  max-width: 780px;
}

.reference blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.1vw, 1.42rem);
  line-height: 1.5;
}

.reference cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-steel);
}

/* --- Brotkrumen --------------------------------------------------------- */

.breadcrumbs {
  font-size: 0.85rem;
  color: var(--color-steel);
  padding-block: 20px 0;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--color-moon-dim);
}

.breadcrumbs a {
  color: var(--color-steel);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* --- Antwortblock (AIO/GEO) --------------------------------------------- */

.answer {
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-signal);
  border-radius: var(--radius);
  padding: 28px 30px;
  max-width: 860px;
  box-shadow: var(--shadow-card);
}

.answer p {
  margin: 0;
  font-size: 1.06rem;
}

.answer p + p {
  margin-top: 1em;
}

.answer__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: var(--color-steel);
}

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

/* --- Seite / Produkt ---------------------------------------------------- */

.page-head {
  padding-block: 26px 0;
}

.product {
  border-top: 1px solid var(--color-line);
  padding-block: 62px;
  scroll-margin-top: 84px;
}

.product:first-of-type {
  border-top: none;
  padding-top: 8px;
}

.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.product__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.product__sku {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  font-weight: 600;
}

.product__kicker {
  font-size: 0.82rem;
  color: var(--color-signal);
  border: 1px solid rgba(199, 125, 79, 0.35);
  border-radius: 999px;
  padding: 2px 11px;
  display: inline-block;
}

.product__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.product__gallery img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--color-graphite);
  border: 1px solid var(--color-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product__gallery img:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-card);
}

.product__usp {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.product__usp li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.98rem;
}

.product__usp li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--color-signal);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: 24px;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.spec-table th {
  color: var(--color-steel);
  font-weight: 500;
  width: 42%;
  padding-right: 18px;
}

.spec-table td {
  font-weight: 500;
}

.procure {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.procure dl {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}

.procure dt {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.procure dd {
  margin: 3px 0 0;
  font-size: 0.98rem;
  font-weight: 500;
}

.procure__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.procure__cta .btn {
  flex: 1 1 auto;
}

.btn--sm {
  padding: 11px 16px;
  font-size: 0.88rem;
}

/* --- Sprungverzeichnis -------------------------------------------------- */

/* Anker zielen unter der sticky Kopfzeile (68px) landen. */
section[id] {
  scroll-margin-top: 86px;
}

.quick-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  max-width: 860px;
}

.quick-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.92rem;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.quick-index a:hover {
  border-color: var(--color-graphite);
  transform: translateY(-1px);
}

.quick-index__sku {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--color-steel);
  font-weight: 600;
  flex: none;
}

/* --- Artikelkarten (Produktübersicht) ----------------------------------- */
/* Die Karten stehen über den Detailabschnitten; ein Klick springt zum
   jeweiligen Artikel. Hover hebt die Karte an und zoomt das Bild leicht —
   bewusst ohne Karussell oder sonstige effortige Effekte (Spec 4.3.1). */

.product-cards {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-width: 1100px;
}

@media (min-width: 700px) {
  .product-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 1024px) {
  .product-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: none;
  }
}

.pcard a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 100%;
  padding: 0.5rem 0.95rem 0.5rem 0.5rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pcard a:hover,
.pcard a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-graphite);
  box-shadow: var(--shadow-card);
}

/* Gleiche Logik wie im Startseiten-Raster: kleine Aufnahme links, Text rechts.
   Die Übersicht soll neun Nummern vergleichbar machen, nicht neun Plakate. */
.pcard__imgwrap {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-graphite);
}

.pcard__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.pcard a:hover .pcard__imgwrap img,
.pcard a:focus-visible .pcard__imgwrap img {
  transform: scale(1.06);
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.pcard__sku {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  font-weight: 600;
}

.pcard__name {
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__kicker {
  color: var(--color-steel);
  font-size: 0.74rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard__cta {
  display: none;
}

/* Galerie: 3 Aufnahmen sichtbar; alle 6 stehen in der Zoom-Ansicht bereit
   (die Lightbox liest saemtliche Bilder des Abschnitts, auch die hier
   ausgeblendeten). */
.product__gallery img:nth-child(n + 4) {
  display: none;
}

.gallery-hint {
  margin: -14px 0 22px;
  font-size: 0.84rem;
  color: var(--color-steel);
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  max-width: 860px;
}

.faq details {
  border-bottom: 1px solid var(--color-line);
  padding: 20px 0;
}

.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

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

.faq summary::after {
  content: "+";
  color: var(--color-steel);
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 14px 0 0;
  max-width: 760px;
  color: #4a5057;
}

/* --- FAQ-Inquiry-CTA (pro Kategorie) ----------------------------------- */

.faq-cta {
  margin-top: 28px;
  background: var(--color-graphite);
  color: var(--color-moon);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.faq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 130% at 88% 0%,
    rgba(199, 125, 79, 0.2) 0%,
    rgba(19, 22, 26, 0) 60%
  );
  pointer-events: none;
}

.faq-cta > div:first-child {
  position: relative;
}

.faq-cta h3 {
  color: var(--color-moon);
  margin: 0 0 0.25em;
  font-size: 1.16rem;
}

.faq-cta p {
  margin: 0;
  color: #b9bcc0;
  font-size: 0.95rem;
  max-width: 600px;
}

.faq-cta__actions {
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Formular ----------------------------------------------------------- */

.form {
  display: grid;
  gap: 18px;
  max-width: 640px;
}

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-graphite);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 38, 43, 0.08);
}

.field--check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9rem;
}

.field--check input {
  width: auto;
  margin-top: 5px;
  flex: none;
}

.form__note {
  font-size: 0.85rem;
  color: var(--color-steel);
}

.form__status {
  border-radius: var(--radius);
  padding: 15px 18px;
  font-size: 0.94rem;
  display: none;
}

.form__status.is-visible {
  display: block;
}

.form__status--ok {
  background: #eef7f1;
  border: 1px solid #bfe0cc;
  color: #1a5c39;
}

.form__status--err {
  background: #fdf1ec;
  border: 1px solid #f0cdbd;
  color: #8a3b1c;
}

/* --- Kontaktwege -------------------------------------------------------- */

.contact-ways {
  display: grid;
  gap: 18px;
}

.contact-way {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-way:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}

.contact-way h3 {
  margin-bottom: 0.3em;
  font-size: 1.06rem;
}

.contact-way p {
  margin-bottom: 0;
  font-size: 0.94rem;
  color: #4a5057;
}

.contact-way a {
  font-weight: 600;
}

/* --- Abschluss-CTA ------------------------------------------------------ */

.cta-final {
  text-align: center;
}

.cta-final h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
}

.cta-final .lede {
  max-width: 620px;
  margin-inline: auto;
}

.cta-final .hero__actions {
  justify-content: center;
  margin-top: 26px;
}

.cta-final--panel {
  background: var(--grad-graphite);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  color: var(--color-moon);
}

.cta-final--panel h2,
.cta-final--panel .lede {
  color: var(--color-moon);
}

.cta-final--panel .note {
  color: #9aa0a6;
}

.cta-final--panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 100% at 80% 0%,
    rgba(199, 125, 79, 0.2) 0%,
    rgba(19, 22, 26, 0) 60%
  );
  pointer-events: none;
}

/* --- Fußzeile ----------------------------------------------------------- */

.site-footer {
  background: var(--color-graphite-deep);
  color: #b9bcc0;
  padding-block: 72px 40px;
  font-size: 0.92rem;
}

.site-footer a {
  color: #cfd1d3;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-moon);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-moon);
  margin-bottom: 12px;
  display: block;
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: #8d9297;
}

.age-note {
  color: var(--color-signal);
}

/* --- Sticky-Kontaktleiste (mobil) --------------------------------------- */

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-graphite-deep);
  border-top: 1px solid var(--color-line-dark);
  padding: 8px 16px;
  gap: 10px;
}

.mobile-bar .btn {
  flex: 1;
  padding: 11px 12px;
  font-size: 0.88rem;
}

/* --- 404 ---------------------------------------------------------------- */

.notfound {
  text-align: center;
  padding-block: 130px;
}

/* --- Tabellen / Utility ------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--color-line);
}

.data-table th {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-steel);
  font-weight: 600;
}

.mt-0 {
  margin-top: 0;
}
.mt-2 {
  margin-top: 2rem;
}
.mb-0 {
  margin-bottom: 0;
}

.note {
  font-size: 0.88rem;
  color: var(--color-steel);
}

/* Rueckweg am Seitenende: eine ruhige Zeile, kein zweiter Handlungsaufruf.
   Sie steht nur auf Seiten, die im Fliesstext nicht auf die Startseite
   verweisen (Geschaefts-, Ressourcen- und Produktseiten). */
.trail {
  margin-top: 3rem;
  padding-bottom: 1rem;
}

.trail p {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-line);
  max-width: 74ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-steel);
}

.trail a {
  color: var(--color-signal);
  text-decoration-color: color-mix(in srgb, var(--color-signal) 40%, transparent);
  text-underline-offset: 3px;
}

/* --- Scroll-Reveal ------------------------------------------------------ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Responsiv ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .hero__grid,
  .product__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .moon-wrap {
    order: -1;
    justify-content: flex-start;
  }
  .moon {
    width: 130px;
  }

  .site-nav {
    display: none;
    width: 100%;
    order: 3;
    padding-bottom: 14px;
  }
  .site-nav.is-open {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 2px;
  }
  .site-nav a {
    display: block;
    padding: 9px 0;
    border-top: 1px solid var(--color-line-dark);
  }
  .nav-toggle {
    display: inline-block;
  }
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: 12px;
  }
  .header-cta {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3,
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .product__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pcard__imgwrap {
    width: 62px;
    height: 62px;
  }
  .mobile-bar {
    display: flex;
    height: 56px;
  }
  body {
    padding-bottom: 56px;
  }
  .section {
    padding-block: var(--space-section-sm);
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .market__figures {
    grid-template-columns: minmax(0, 1fr);
  }
  .card {
    padding: 24px;
  }
  .trustbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Mobile-Navigation: deutlicher Hover/Fokus-Kontrast */
@media (max-width: 860px) {
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    color: var(--color-signal-bright);
    background: rgba(199, 125, 79, 0.08);
    padding-left: 10px;
  }
  .site-nav a {
    transition: color 0.16s ease, background-color 0.16s ease, padding-left 0.16s ease;
  }
}

/* --- Rechtliche Seiten (Impressum, Datenschutz, AGB, Cookies, Urheber) -- */

.page-legal .page-head h1 {
  margin-bottom: 0.3em;
}

.legal {
  max-width: 820px;
}

.legal h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-top: 1.9em;
  padding-top: 0.7em;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 90px;
}

.legal h2:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.legal h3 {
  font-size: 1.12rem;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.legal p,
.legal li {
  color: #3f4449;
}

.legal ul {
  padding-left: 1.25em;
  margin: 0 0 1.2em;
}

.legal li {
  margin-bottom: 0.45em;
}

.legal a {
  color: var(--color-graphite);
  font-weight: 500;
}

.legal a:hover {
  color: var(--color-signal);
}

.legal__meta {
  font-size: 0.84rem;
  color: var(--color-steel);
  margin-top: 2.2em;
}

.legal__toc {
  list-style: none;
  margin: 0 0 2em;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 8px;
}

.legal__toc a {
  text-decoration: none;
  font-weight: 500;
}

.legal__toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Bild-Lightbox (Zoom) ------------------------------------------------- */

.zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;            /* ueber Header (50) und mobile-bar (60) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 18, 21, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  background: var(--color-graphite);
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-line-dark);
  border-radius: 50%;
  background: rgba(34, 38, 43, 0.85);
  color: var(--color-moon);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: var(--color-signal);
  color: var(--color-graphite-deep);
}

.lightbox__close {
  top: 18px;
  right: 18px;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: 18px;
}

.lightbox__nav--next {
  right: 18px;
}

.lightbox__caption {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-moon);
  font-size: 0.9rem;
  padding-inline: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox {
    transition: none;
  }
}

/* Headernavigation auf eigene Compositor-Ebene heben, damit das
   backdrop-filter beim Scrollen nicht bei jedem Frame neu rastert. */
.site-header {
  transform: translateZ(0);
  will-change: transform;
}

/* Dekorative Animationen pausieren, wenn die Seite im Hintergrund ist. */
html.anim-paused *,
html.anim-paused *::before,
html.anim-paused *::after {
  animation-play-state: paused !important;
}

/* Lange Produktseite: Off-Screen-Abschnitte nicht vorab rendern/dekodieren. */
.product {
  content-visibility: auto;
  contain-intrinsic-size: auto 920px;
}

/* GEO-Autoritätsnachweise: externe Fachquellen (EUR-Lex, Marktstudien).
   Schlanke, sichtbare Quellenliste am Seitenende — ein Zitat-Signal für
   generierende Suchmaschinen (GEO) ohne Verlinkung von Schwester-Marken. */
.sources {
  margin-top: 2rem;
  border: 1px solid var(--color-line, #2a2f45);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  background: var(--color-surface, #14172a);
}
.sources__title {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted, #8b90a8);
  margin: 0 0 0.6rem;
}
.sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.sources__list li {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #c4c7cb;
}
.sources__list a {
  color: var(--color-moon, #cdd6ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sources__list a:hover { color: #fff; }
.sources__note {
  font-size: 0.78rem;
  color: var(--color-muted, #8b90a8);
  margin: 0.7rem 0 0;
}

/* ============================================================
   Blog — Slow Mond (Titel als Cover, keine Bilder)
   Das Hub und die Artikel sind bewusst bildfrei: der Titel ist das
   visuelle Cover. Das erfuellt die Audit-Regel „jedes Bild braucht
   alt" automatisch (es gibt keine <img>) und haelt die Ladezeit klein.
   ============================================================ */

/* Container für die Blog-Übersicht: Die Seite liegt direkt in <main>
   (ohne .wrap), daher braucht sie ihre eigene Begrenzung — sonst laufen
   Kategorie-Chips und Kartenraster randlos über den ganzen Viewport. */
.blog-index {
  max-width: var(--max-page-width);
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: clamp(40px, 6vw, 84px);
}
.blog-index__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.blog-index__kicker {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-signal);
  margin: 0 0 0.8rem;
  font-weight: 600;
}
/* Der grosse Titel ist das Cover — kein Bild. */
.blog-cover {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--color-ink);
}
.blog-index__lead {
  margin: 1.1rem auto 0;
  max-width: 62ch;
  color: var(--color-steel);
  font-size: 1.05rem;
  line-height: 1.6;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.4rem;
}
.blog-card {
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(34, 38, 43, 0.10);
  border-color: var(--color-line-dark);
}
.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.6rem 1.5rem 1.7rem;
  color: inherit;
  text-decoration: none;
}
.blog-card__kicker {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-signal);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
/* Auch die Karte nutzt den Titel als Cover (kein Vorschaubild). */
.blog-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.12;
  margin: 0 0 0.7rem;
  color: var(--color-ink);
}
.blog-card__desc {
  margin: 0 0 1.1rem;
  color: var(--color-steel);
  font-size: 0.96rem;
  line-height: 1.55;
  flex: 1 1 auto;
}
.blog-card__meta {
  font-size: 0.82rem;
  color: var(--color-moon-dim);
  border-top: 1px solid var(--color-line);
  padding-top: 0.8rem;
}

/* --- Weiterführende Lektüre (interne Verlinkung auf den Blog) --- */
.related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.related a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.related a:hover {
  border-color: var(--color-graphite);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(34, 38, 43, 0.08);
}
.related__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-signal);
  font-weight: 600;
}
.related__title {
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}
@media (max-width: 860px) {
  .related { grid-template-columns: 1fr; }
}

/* --- Themenbereiche: die zwoelf Kategorie-Hubs (R12) ---
   Die Hubs wurden bislang nur aus dem Blog heraus verlinkt; Startseite,
   Geschaefts- und Produktseiten kannten sie nicht. Die Kacheln sind
   absichtlich flach gehalten: Auf dem Schreibtisch soll die Uebersicht
   in einem Blick lesbar bleiben, ohne den nachfolgenden Absatz nach
   unten zu schieben. */
.themen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}
.themen a {
  display: block;
  height: 100%;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.themen a:hover {
  border-color: var(--color-graphite);
  box-shadow: 0 8px 20px rgba(34, 38, 43, 0.07);
}
.themen__name {
  display: block;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.25;
}
.themen__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--color-moon-dim);
  line-height: 1.35;
}
@media (max-width: 1100px) {
  .themen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .themen { grid-template-columns: 1fr; }
}

/* --- Einzelner Artikel --- */
.page-blog-article { background: var(--color-paper); }
/* R7: Die Beitraege haben 20 bis 26 Zwischenueberschriften. Auf dem
   Schreibtisch bekommt der Text deshalb eine schmale Inhaltsrandspalte; die
   Lesespalte selbst bleibt bei 760 px, weil laengere Zeilen beim Lesen
   haeufiger in die falsche Zeile rutschen. */
.blog-article { max-width: 1080px; margin: 0 auto; }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.blog-main { max-width: 760px; margin-inline: auto; width: 100%; }

.blog-toc { display: none; }

@media (min-width: 1180px) {
  .blog-layout {
    grid-template-columns: 256px minmax(0, 760px);
    gap: 46px;
    justify-content: center;
  }

  .blog-main { margin-inline: 0; }

  .blog-toc {
    display: block;
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 112px);
    overflow: auto;
    padding-left: 13px;
    border-left: 1px solid var(--color-line);
    font-size: 0.81rem;
    line-height: 1.34;
    scrollbar-width: thin;
  }

  .blog-toc::-webkit-scrollbar { width: 4px; }

  .blog-toc::-webkit-scrollbar-thumb {
    background: rgba(19, 22, 26, 0.18);
    border-radius: 4px;
  }

  .blog-toc__title {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-steel);
    font-weight: 600;
  }

  .blog-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
  }

  .blog-toc__list li {
    counter-increment: toc;
    margin: 0 0 0.34rem;
  }

  /* Zahl und Text als zwei Rasterzellen: mit negativem text-indent rutschte
     die Nummer aus dem Kasten und war nicht mehr zu sehen. */
  .blog-toc__list a {
    color: var(--color-ink);
    text-decoration: none;
    display: grid;
    grid-template-columns: 1.55em minmax(0, 1fr);
    align-items: baseline;
    border-left: 2px solid transparent;
    margin-left: -15px;
    padding: 1px 0 1px 5px;
  }

  .blog-toc__list a::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--color-steel);
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
  }

  .blog-toc__list a:hover {
    color: var(--color-signal);
    border-left-color: var(--color-signal);
    background: rgba(199, 125, 79, 0.06);
  }

  .blog-toc__hint {
    margin: 1.1rem 0 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--color-steel);
  }
}

/* Sprungziele nicht unter der klebenden Navigation verstecken. */
.blog-body h2 { scroll-margin-top: 88px; }

.blog-hero {
  background: var(--color-graphite);
  color: var(--color-moon);
  border-radius: 18px;
  padding: 3rem 2.2rem 2.6rem;
  margin-bottom: 2.4rem;
  text-align: center;
}
.blog-hero .blog-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-signal-bright);
  margin: 0 0 1rem;
  font-weight: 600;
}
.blog-hero .blog-cover { color: var(--color-moon); }
.blog-byline {
  margin: 1.2rem 0 0;
  font-size: 0.92rem;
  color: var(--color-moon-dim);
}
.blog-body { font-size: 1.06rem; line-height: 1.72; color: var(--color-ink); }
.blog-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 2.4rem 0 0.9rem;
  color: var(--color-ink);
}
.blog-body p { margin: 0 0 1.15rem; }
.blog-body ul {
  margin: 0 0 1.3rem;
  padding-left: 1.2rem;
}
.blog-body li { margin: 0.4rem 0; }
.blog-body a {
  color: var(--color-signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-body a:hover { color: var(--color-signal-bright); }

/* Quellenverweise enthalten teils die nackte URL als Linktext
   (de.wikipedia.org/wiki/...). Solche Zeichenketten haben keine
   Trennstelle und schoben die Seite auf 390 px um 64 px nach rechts.
   break-word trennt nur, wenn es nicht anders geht. */
.blog-body a,
.prose a {
  overflow-wrap: break-word;
}

/* Quellenverweise enthalten teils die nackte URL als Linktext
   (de.wikipedia.org/wiki/...). Solche Zeichenketten haben keine
   Trennstelle und schoben die Seite auf 390 px um 64 px nach rechts.
   break-word trennt nur, wenn es nicht anders geht. */
.blog-body a,
.prose a {
  overflow-wrap: break-word;
}
.blog-cta {
  margin-top: 3rem;
  padding: 2rem 1.8rem;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.blog-cta h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
}
.blog-cta p {
  color: var(--color-steel);
  max-width: 56ch;
  margin: 0 auto 1.2rem;
  line-height: 1.6;
}

/* ==========================================================================
   Runde 1 — Desktop-Lesetiefe, Produkt- und Ressourcen-Ebene
   ========================================================================== */

/* --- Desktop: immersive Lesespur ----------------------------------------
   B2B-Entscheidungen fallen am Schreibtisch. Auf breiten Flächen war die
   Zeilenlänge zu hoch und der Absatzabstand zu knapp, damit rutscht das Auge
   beim Lesen häufiger in die falsche Zeile. Die Korrektur: ein engeres Maß,
   mehr Weißraum zwischen Absätzen und größere Abstände vor Überschriften. */
@media (min-width: 1024px) {
  .prose--wide {
    max-width: 760px;
  }

  .prose p,
  .lede {
    margin-bottom: 1.35em;
  }

  .prose h2,
  .prose h3 {
    margin-top: 2.4em;
    margin-bottom: 0.7em;
  }

  .prose h2 + p,
  .prose h3 + p {
    margin-top: 0;
  }

  .prose ul,
  .prose ol {
    margin: 1.3em 0;
    padding-left: 1.4em;
  }

  .prose li {
    margin-bottom: 0.6em;
  }

  /* Hier stand bis R7 ein zweites `.section { padding: var(--space-section) 0 }`.
     Der Shorthand lag spaeter in der Datei und schlug damit die Modifier
     .section--tight und .section--first: auf dem Schreibtisch war jede enge
     Sektion wieder 110 px hoch, waehrend sie mobil 66 px hatte. Die Basisregel
     oben setzt bereits padding-block — die Desktop-Kopie war reine Doppelung. */

  /* Randspalte für Anker­navigation: der Fließtext bleibt in der Mitte,
     Sprungziele liegen außerhalb des Lesefelds. */
  .wrap--read {
    max-width: 900px;
  }
}

/* --- Artikelnummer-Raster ---------------------------------------------- */

/* Kompakte Querkarten statt großformatiger Bildkacheln: Im B2B entscheidet
   der Einkäufer über neun Nummern gleichzeitig — er will das Sortiment auf
   einen Blick vergleichen, keine neun bildschirmfüllenden Quadrate scrollen.
   Aufnahme links (80 px), Nummer / Name / Bauart rechts. */
.pgrid {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.pgrid__item {
  margin: 0;
  min-width: 0;
}

.pgrid__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pgrid__link:hover {
  transform: translateY(-2px);
  border-color: var(--color-moon-dim);
  box-shadow: var(--shadow-card-lg);
}

.pgrid__img {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 10px;
  object-fit: cover;
  /* Die Produktaufnahmen sind Studioaufnahmen auf dunklem Grund. Auf einer
     weissen Karte wirkte das Quadrat wie ein Loch im Layout. Die Kachel
     bekommt deshalb selbst einen dunklen Grund und eine feine Innenkante —
     dann liest sich das Bild als bewusst gesetzter Ausschnitt. */
  background: #15181c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  filter: brightness(1.14) contrast(1.02);
  display: block;
}

/* Ohne Aufnahme: gesetzte Artikelnummer als Marke, keine leere Fläche. */
.pgrid__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--color-steel);
  background: repeating-linear-gradient(
    -45deg,
    #f4f2ed,
    #f4f2ed 6px,
    #eae7e0 6px,
    #eae7e0 7px
  );
}

.pgrid__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.1rem;
}

/* Ein Pfeil am Kartenrand fuellt die Luft rechts neben einem kurzen
   Artikelnamen und macht sichtbar, dass die ganze Kachel klickbar ist. */
.pgrid__link::after {
  content: "→";
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-moon-dim);
  opacity: 0.6;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.pgrid__link:hover::after,
.pgrid__link:focus-visible::after {
  opacity: 1;
  transform: translateX(2px);
}

.pgrid__sku {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  line-height: 1.2;
}

.pgrid__name {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
  /* Zwei Zeilen fest: alle Karten einer Reihe bleiben gleich hoch,
     auch wenn ein Name länger ist. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pgrid__type {
  font-size: 0.76rem;
  color: var(--color-steel);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .pgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }
}

/* --- Themenbereiche ---------------------------------------------------- */

.cat-nav {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cat-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  text-decoration: none;
}

.cat-nav a:hover {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.cat-nav span {
  font-size: 0.75rem;
  color: var(--color-steel);
}

.cat-nav--compact a {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.blog-index__cats {
  margin: 2.4rem 0 0;
}

.blog-index__foot {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--color-line);
}

.blog-index__foot p {
  max-width: 680px;
  color: #4a5057;
}

/* --- Kartenlisten (Hubs, Produktseiten) --------------------------------- */

.hub-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.hub-list--wide {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hub-card {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.hub-card:hover {
  border-color: var(--color-moon-dim);
  box-shadow: var(--shadow-card);
}

.hub-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.3rem;
  text-decoration: none;
}

.hub-card__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.hub-card__desc {
  font-size: 0.9rem;
  color: var(--color-steel);
  line-height: 1.55;
}

.hub-hero {
  padding: 3.2rem 0 2.4rem;
  background: var(--grad-graphite);
  color: var(--color-moon);
}

.hub-hero h1 {
  color: #fff;
  max-width: 20ch;
}

.hub-hero .eyebrow,
.hub-hero .hero__lede {
  color: #c8ccd1;
}

.hub-cross {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 860px) {
  .hub-cross {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --- Cluster-Navigation im Blog ----------------------------------------- */

.cluster-nav {
  margin: 3rem 0 0;
  padding: 1.6rem 1.8rem;
  border-left: 3px solid var(--color-signal);
  background: #f2f0eb;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.cluster-nav__title {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-bottom: 0.7rem;
}

.cluster-nav__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cluster-nav__line {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #3f454b;
}

.cluster-nav__list {
  margin: 0;
  padding-left: 1.2rem;
}

.cluster-nav__list li {
  margin-bottom: 0.35rem;
}

/* --- Produktseite ------------------------------------------------------- */

.pdp-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.pdp-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #efedE8;
}

.pdp__img--lead {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pdp__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
}

.pdp__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: #efedE8;
}

.pdp-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 860px) {
  .pdp-hero__grid,
  .pdp-specs {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.spec-table th {
  width: 42%;
  font-weight: 600;
  color: var(--color-ink);
  padding-right: 1.2rem;
}

.spec-table td {
  color: #4a5057;
}

/* --- Diagramme (GEO: Bildunterschrift ist Teil der Aussage) -------------- */

.chart {
  margin: 2.2rem 0;
  padding: 1.6rem 1.4rem 1.2rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.chart__svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart figcaption {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-steel);
}

/* --- Tabellen auf schmalen Flächen -------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 1.6rem 0;
  -webkit-overflow-scrolling: touch;
}

/* --- Glossar ------------------------------------------------------------ */

.glossar {
  margin: 1.2rem 0 0;
}

.glossar__item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-line);
}

.glossar__item:last-child {
  border-bottom: 0;
}

.glossar dt {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}

.glossar dd {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #4a5057;
  max-width: 68ch;
}

/* ==========================================================================
   Runde 2 — Kurzantwort, Desktop-Lesetiefe, Diagramme
   ========================================================================== */

/* --- Kurzantwort --------------------------------------------------------
   Die erste Frage eines Lesers beantworten, bevor die Herleitung beginnt.
   Fuer die Auswertung durch Maschinen ist dieser Block der tragende Teil:
   Er steht vor dem ersten Absatz und traegt die Aussage allein. */
.kurzantwort {
  margin: 0 0 2.2rem;
  padding: 1.25rem 1.5rem;
  background: #f2f0eb;
  border-left: 3px solid var(--color-signal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: 1.02rem;
  line-height: 1.72;
  color: #33393f;
}

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

/* --- Referenzen --------------------------------------------------------- */
.prose ul:has(> li > a[href^="https://de.wikipedia.org"]) {
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --- Desktop: Satzmass und Zeilenrhythmus -------------------------------
   Eine B2B-Entscheidung wird am Schreibtisch gelesen, oft neben anderen
   Fenstern. Auf 27 Zoll war das Satzmass zu breit: Das Auge findet beim
   Zeilensprung nicht zuverlaessig zurueck. 68 bis 72 Zeichen sind der
   Bereich, in dem das ohne Anstrengung gelingt. */
@media (min-width: 1024px) {
  .prose,
  .blog-body {
    font-size: 1.0625rem;
    line-height: 1.78;
  }

  .blog-body p,
  .prose > p {
    max-width: 68ch;
  }

  .blog-body > h2,
  .prose > h2 {
    margin-top: 2.8em;
    margin-bottom: 0.75em;
    letter-spacing: -0.01em;
  }

  .blog-body > h3,
  .prose > h3 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-size: 1.12rem;
  }

  .blog-body > p + p {
    margin-top: -0.35em;
  }

  .blog-body ul,
  .blog-body ol,
  .prose ul,
  .prose ol {
    max-width: 66ch;
    margin: 1.4em 0;
  }

  .blog-body li {
    margin-bottom: 0.65em;
  }

  /* Der Artikelkopf darf breiter sein als der Fliesstext: Die Ueberschrift
     ist kein Lesetext, sondern eine Orientierungsmarke. */
  .blog-cover {
    max-width: 26ch;
  }

  .blog-hero {
    padding: 4rem 0 2.8rem;
  }

  .blog-article {
    padding-bottom: 4rem;
  }

  /* Abbildungen ueberragen den Textblock bewusst: Eine Kurve, die auf die
     Spaltenbreite gepresst wird, verliert ihre Lesbarkeit. */
  .chart {
    max-width: 820px;
  }
}

@media (min-width: 1440px) {
  .wrap,
  .wrap--read {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .blog-body p,
  .prose > p {
    max-width: 70ch;
  }
}

/* --- Diagramme ---------------------------------------------------------- */
.chart__svg text {
  font-family: var(--font-display), Georgia, serif;
}

/* Datentabellen als Abbildung: gleiche Rolle wie ein Diagramm (belegbar,
   zitierfaehig, mit Bildunterschrift), nur fuer Werte, die sich als Zeile
   besser lesen lassen als als Balken. */
.chart--table {
  max-width: 100%;
}

/* Auf schmalen Bildschirmen sprengten die vierspaltigen Tabellen den Satz:
   bei 390 px lief die Seite 64 px ueber. Die Tabelle scrollt deshalb in ihrem
   eigenen Kasten, die Seite bleibt fest. */
@media (max-width: 700px) {
  .chart--table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chart--table table {
    min-width: 480px;
    font-size: 0.84rem;
  }

  .chart--table th,
  .chart--table td {
    padding: 0.5rem 0.55rem;
  }
}

.chart--table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}

.chart--table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  padding-bottom: 0.6rem;
}

.chart--table th,
.chart--table td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.chart--table thead th {
  background: #f2efe9;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-steel);
  font-weight: 600;
  border-bottom: 1px solid #d9d3c8;
}

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

.chart--table td:first-child {
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .chart--table {
    overflow-x: auto;
  }

  .chart--table table {
    min-width: 520px;
  }
}

@media (max-width: 700px) {
  .chart {
    padding: 1.1rem 0.9rem 0.9rem;
  }

  .chart__svg {
    overflow-x: auto;
  }
}

/* Lange deutsche Komposita: Produkt- und PDP-Schlagzeilen belegen sonst vier
   bis fünf Zeilen und draengen die Handlungsaufforderung unter die Kante. */
@media (min-width: 1024px) {
  .page-produkt .hero h1,
  .page-pdp .hero h1 {
    font-size: clamp(1.8rem, 2.9vw, 2.45rem);
    line-height: 1.16;
  }
}

/* --- Abschnittskoepfe mit Gegenlauf ------------------------------------- */
/* Auf dem Schreibtisch stand die Ueberschrift bisher allein ueber einem
   Raster, waehrend rechts daneben 600 px leer blieben. Der Kopf nimmt jetzt
   eine Handlungsaufforderung auf und zieht die Blickfuehrung nach rechts. */
.section-head {
  display: block;
}

.section-head .lede {
  margin: 0.5rem 0 0;
  max-width: 62ch;
}

.section-head .eyebrow {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
  }

  .section-head--split > div {
    max-width: 62ch;
  }
}

.mt-3 {
  margin-top: 3rem;
}

.mt-4 {
  margin-top: 4rem;
}

/* --- Produkt- und Ressourcenkarten auf dem Schreibtisch ----------------- */
@media (min-width: 1024px) {
  /* Genau neun Artikelnummern: drei Spalten ergeben ein ruhiges 3×3-Raster.
     Die Karten bleiben bewusst flach (eine Zeile, ~96 px hoch), damit das
     komplette Programm in rund 320 px Höhe vergleichbar ist. */
  .pgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .pgrid__img {
    width: 92px;
    height: 92px;
  }

  .pgrid__name {
    font-size: 0.98rem;
  }

  .pgrid__link {
    padding: 0.6rem 1rem 0.6rem 0.6rem;
  }

  .hub-list--wide {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
  }

  .hub-card__link {
    padding: 1.35rem 1.5rem;
  }
}

/* ==========================================================================
   Runde 8 — Kernpunkte, Abschnittsleisten, FAQ-Adressen
   ========================================================================== */

/* --- „Das Wichtigste in Kürze" ------------------------------------------
   Fünf Zeilen zwischen Kurzantwort und erstem Abschnitt. Für den Leser eine
   Zehn-Sekunden-Entscheidung, ob die Seite seine Frage berührt; für die
   Auswertung der erste Block mit belastbaren Werten. Bewusst ruhig: keine
   Farbe außer der Signallinie, keine Icons, keine Schaltflächen. */
.key-points {
  margin: 0 0 2.5rem;
  padding: 1.3rem 1.6rem 1.2rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-top: 2px solid var(--color-signal);
  border-radius: var(--radius) var(--radius) var(--radius-lg) var(--radius-lg);
}

.kurzantwort + .key-points {
  margin-top: -1.1rem;
}

.key-points__title {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-signal);
}

.key-points__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kp;
  display: grid;
  gap: 0.55rem;
}

.key-points__list li {
  counter-increment: kp;
  display: grid;
  grid-template-columns: 1.75em minmax(0, 1fr);
  align-items: baseline;
  font-size: 0.96rem;
  line-height: 1.58;
  color: #33393f;
}

.key-points__list li::before {
  content: counter(kp, decimal-leading-zero);
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  color: var(--color-steel);
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .key-points {
    padding: 1.05rem 1.1rem 1rem;
    margin-bottom: 2rem;
  }

  .key-points__list li {
    font-size: 0.93rem;
  }
}

/* --- Klebende Abschnittsleiste ------------------------------------------
   Für /grosshandel/, /oem/, /technologie/ und die Ressourcenseiten. Sie
   bleibt unter der Kopfzeile stehen, damit ein Einkäufer mitten im dritten
   Abschnitt noch weiß, welche Abschnitte es gibt. Waagerecht statt als
   Randspalte, weil diese Seiten aus vollbreiten Blöcken mit wechselndem
   Hintergrund bestehen — eine zweite Spalte würde den Blocksatz brechen. */
.section-nav {
  position: sticky;
  top: 68px;
  z-index: 40;
  background: rgba(248, 247, 244, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 1px 0 rgba(34, 38, 43, 0.03);
}

.section-nav__inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.section-nav__inner::-webkit-scrollbar {
  display: none;
}

.section-nav ul {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.85rem 0;
  margin-right: 1.35rem;
  white-space: nowrap;
  font-size: 0.84rem;
  color: var(--color-steel);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.section-nav a:hover,
.section-nav a:focus-visible {
  color: var(--color-ink);
  border-bottom-color: var(--color-signal);
}

.section-nav__num {
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-signal);
  font-variant-numeric: tabular-nums;
}

.section-nav__count {
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  padding: 0.1em 0.5em;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-steel);
}

/* Sprungziele müssen unter Kopfzeile plus Leiste liegen, nicht darunter.
   Nur auf Seiten mit Leiste — sonst entstünde überall ein Loch von 46 px. */
.section-nav ~ section[id],
.section-nav ~ .wrap,
body:has(.section-nav) section[id] {
  scroll-margin-top: 132px;
}

@media (max-width: 900px) {
  .section-nav {
    top: 60px;
  }

  .section-nav a {
    padding: 0.7rem 0;
    margin-right: 1.15rem;
    font-size: 0.8rem;
  }

  body:has(.section-nav) section[id] {
    scroll-margin-top: 112px;
  }
}

/* --- FAQ: eine einzelne Antwort ist adressierbar ------------------------
   Jede Frage hat eine id (`#einkauf-mindestbestellmenge`). Damit lässt sich
   eine Antwort direkt verschicken, statt auf eine Seite mit 88 Fragen zu
   verweisen — und eine Maschine kann die Fundstelle zitieren. */
.faq details[id] {
  scroll-margin-top: 140px;
}

.faq details[id]:target {
  border-color: var(--color-signal);
  background: rgba(199, 125, 79, 0.05);
}

.faq-top {
  margin: 1.5rem 0 0;
}

.faq-top a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.84rem;
  color: var(--color-steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.faq-top a::before {
  content: "↑";
  font-size: 0.95em;
}

.faq-top a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-signal);
}

#faq-themen {
  scroll-margin-top: 80px;
}

/* ==========================================================================
   Runde 9 — Leseposition, Vergleichstafel, kopierbarer Link
   ========================================================================== */

/* --- Verzeichnis: wo im Text stehe ich ----------------------------------
   Die Markierung ist absichtlich leise. Sie soll die Stelle im Text anzeigen,
   nicht um Aufmerksamkeit konkurrieren: eine 2 px breite Signallinie links,
   dunklere Schrift, kein Fettdruck. Wer den Abschnitt anklickt, sieht sofort,
   ob der Sprung geklappt hat. */
@media (min-width: 1180px) {
  .blog-toc__list a.is-active {
    color: var(--color-signal);
    border-left-color: var(--color-signal);
    background: rgba(199, 125, 79, 0.07);
  }

  .blog-toc__list a.is-active::before {
    color: var(--color-signal);
  }

  .blog-toc__list a:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 1px;
  }
}

/* --- Vergleichstafel der Artikelnummern --------------------------------
   Neun Zeilen, sechs Spalten. Auf dem Schreibtisch passt das in die
   Lesespalte; darunter scrollt die Tafel in ihrem eigenen Kasten, damit die
   Seite nicht seitlich wegkippt. Die erste Spalte bleibt beim waagerechten
   Scrollen stehen — sonst weiß man in Spalte fünf nicht mehr, welche Nummer
   gemeint ist. */
.compare {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.45;
}

.compare caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.1rem 0.85rem;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}

.compare th,
.compare td {
  padding: 0.62rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}

.compare thead th {
  background: #f7f5f1;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-steel);
  font-weight: 600;
  white-space: nowrap;
}

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

.compare tbody tr:hover {
  background: rgba(199, 125, 79, 0.035);
}

.compare td:first-child,
.compare th:first-child {
  font-weight: 600;
  white-space: nowrap;
  background: #fff;
  border-right: 1px solid var(--color-line);
}

.compare thead th:first-child {
  background: #f7f5f1;
}

.compare td:first-child a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 125, 79, 0.45);
}

.compare td:first-child a:hover {
  color: var(--color-signal);
}

.compare__type {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-steel);
  margin-top: 0.15rem;
  white-space: normal;
}

.compare figcaption {
  padding: 0.85rem 1.1rem 1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-steel);
  border-top: 1px solid var(--color-line);
  background: #fbfaf7;
}

.compare figcaption strong {
  color: var(--color-ink);
  font-weight: 600;
}

@media (max-width: 760px) {
  .compare table { min-width: 640px; }
  .compare th,
  .compare td { padding: 0.55rem 0.6rem; }
}

/* --- FAQ: Direktlink kopieren ------------------------------------------
   Die Schaltfläche steht am Ende der Fragezeile, nicht daneben in einer
   eigenen Spalte: bei 90 Fragen wäre eine zweite Spalte ein Raster aus
   Schaltflächen. Sie erscheint erst mit JavaScript, weil sie ohne
   Zwischenablage nichts zu tun hätte. */
.faq details[id] > summary {
  position: relative;
}

.faq-link {
  /* Die Fragezeile ist ein Flex-Container (Text, Schaltfläche, Pluszeichen).
     `float` wird dort ignoriert; `margin-left: auto` schiebt die Schaltfläche
     zusammen mit dem Pluszeichen an den rechten Rand, statt sie in die Mitte
     der Zeile zu setzen. */
  margin: 0.1rem 0 0 auto;
  padding: 0.18em 0.6em;
  flex: none;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-steel);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.faq-link:hover,
.faq-link:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-signal);
  background: rgba(199, 125, 79, 0.07);
}

.faq-link.is-done {
  color: #1f6b45;
  border-color: rgba(31, 107, 69, 0.4);
  background: rgba(31, 107, 69, 0.08);
}

@media (max-width: 520px) {
  .faq details[id] > summary {
    flex-wrap: wrap;
  }

  .faq-link {
    order: 3;
    margin: 0.5rem 0 0;
  }
}

/* --- Sortiment filtern (Startseite) --------------------------------------
   Eine Zeile über dem Raster, so hoch wie ein Knopf. Sie erscheint erst mit
   JavaScript — deshalb steht `hidden` im Markup und wird hier nur aufgehoben,
   nicht gesetzt. Wer ohne Skript liest, sieht alle neun Nummern und keine
   Schaltfläche, die nichts tut. */
.pgrid-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1.1rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--color-line);
}

.pgrid-filter[hidden],
.pgrid__item[hidden] {
  display: none;
}

.pgrid-filter__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.pgrid-filter__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pgrid-filter__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--color-ink-soft, #4a5158);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pgrid-filter__btn:hover {
  border-color: var(--color-signal);
  color: var(--color-ink);
}

.pgrid-filter__btn.is-on {
  color: #fff;
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.pgrid-filter__btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

.pgrid-filter__n {
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  opacity: 0.62;
}

.pgrid-filter__status {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-steel);
}

@media (max-width: 640px) {
  .pgrid-filter {
    gap: 0.4rem 0.6rem;
  }

  .pgrid-filter__btn {
    font-size: 0.78rem;
    padding: 0.28em 0.6em;
  }
}

/* --- FAQ-Suche -----------------------------------------------------------
   Ein Feld, kein Formular. Es steht im Themenblock und erscheint erst mit
   JavaScript; die Trefferzahl läuft über aria-live mit, damit die Filterung
   nicht nur visuell stattfindet. Die Markierung ist bewusst zart — sie zeigt
   die Fundstelle, nicht den Trefferzähler. */
.faq-search {
  display: grid;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  max-width: 34rem;
}

.faq-search[hidden],
.faq details[hidden],
section[hidden] {
  display: none;
}

.faq-search__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.faq-search__input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  appearance: none;
}

.faq-search__input:focus {
  outline: none;
  border-color: var(--color-signal);
  box-shadow: 0 0 0 3px rgba(199, 125, 79, 0.12);
}

.faq-search__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--color-steel);
}

.faq mark {
  padding: 0 0.1em;
  background: rgba(199, 125, 79, 0.22);
  color: inherit;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .faq-search {
    max-width: none;
  }

  .faq-search__input {
    font-size: 1rem;
  }
}

/* --- FAQ-Suche -----------------------------------------------------------
   Ein Feld, kein Formular. Es steht im Themenblock und erscheint erst mit
   JavaScript; die Trefferzahl läuft über aria-live mit, damit die Filterung
   nicht nur visuell stattfindet. Die Markierung ist bewusst zart — sie zeigt
   die Fundstelle, nicht den Trefferzähler. */
.faq-search {
  display: grid;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  max-width: 34rem;
}

.faq-search[hidden],
.faq details[hidden],
section[hidden] {
  display: none;
}

.faq-search__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.faq-search__input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  appearance: none;
}

.faq-search__input:focus {
  outline: none;
  border-color: var(--color-signal);
  box-shadow: 0 0 0 3px rgba(199, 125, 79, 0.12);
}

.faq-search__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--color-steel);
}

.faq mark {
  padding: 0 0.1em;
  background: rgba(199, 125, 79, 0.22);
  color: inherit;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .faq-search {
    max-width: none;
  }

  .faq-search__input {
    font-size: 1rem;
  }
}

/* ------------------------------------------------- Vergleichstafel: Sortierung
   Die Tafel auf /produkt/ ist die einzige Stelle, an der ein Einkäufer alle
   neun Nummern nebeneinander sieht. Sortierbar sind bewusst nur die Achsen,
   in denen sich die Nummern unterscheiden — Menge und Termin sind für alle
   gleich, eine Sortierung dort würde nichts verschieben. Die Knopfleiste
   steht im Markup auf `hidden` und wird erst von main.js freigeschaltet:
   ohne JavaScript bleibt die Tafel vollständig und ohne tote Knöpfe. */
.compare-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 1.1rem 0 0;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-line);
}

.compare-sort[hidden] {
  display: none;
}

.compare-sort__label {
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.compare-sort__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.compare-sort__btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-ink);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font: inherit;
  font-size: 0.83rem;
  line-height: 1.2;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.compare-sort__btn:hover {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.compare-sort__btn.is-on {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}

.compare-sort__btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

.compare-sort__status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-steel);
}

.compare-sort__status:empty {
  display: none;
}

.compare-sort__note {
  margin: 0.65rem 0 0;
  padding-left: 0.85rem;
  border-left: 3px solid var(--color-line);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--color-steel);
}

.compare-sort__note strong {
  color: var(--color-ink);
}

@media (max-width: 640px) {
  .compare-sort__btn {
    font-size: 0.8rem;
    padding: 0.38rem 0.72rem;
  }
}

/* ------------------------------------------------- Vergleichstafel: Druckbild
   B2B-Entscheidungen fallen im Sortimentsmeeting, und dort liegt Papier auf
   dem Tisch. Der Druck gibt deshalb genau eine Seite aus: die Tafel. Alles
   andere — Kopfzeile, Hero, Produktstrecken, Handlungsaufrufe — wird
   ausgeblendet, damit aus einem neun Bildschirmseiten langen Dokument ein
   Blatt wird, das man mitnehmen kann. */
.compare-print-head {
  display: none;
}

@media print {
  .page-produkt .site-header,
  .page-produkt .site-footer,
  .page-produkt .skip-link,
  .page-produkt .breadcrumbs,
  .page-produkt .hero,
  .page-produkt .product,
  .page-produkt .cta-final,
  .page-produkt .sources,
  .page-produkt .trail,
  .page-produkt .compare-sort,
  .page-produkt .compare-sort__note,
  .page-produkt .section:not(#vergleich) {
    display: none !important;
  }

  .page-produkt #vergleich {
    padding: 0 !important;
    border: 0;
  }

  .page-produkt #vergleich .wrap {
    max-width: none;
    padding: 0;
  }

  .page-produkt .compare-print-head {
    display: block;
    margin: 0 0 10pt;
    font-size: 9pt;
    color: #444;
  }

  .page-produkt .compare {
    border: 1px solid #8a8a8a;
    border-radius: 0;
    overflow: visible;
  }

  .page-produkt .compare__scroll {
    overflow: visible;
  }

  .page-produkt .compare table {
    min-width: 0 !important;
    font-size: 9.5pt;
  }

  .page-produkt .compare caption {
    padding: 0 0 6pt;
    font-size: 11pt;
  }

  .page-produkt .compare th,
  .page-produkt .compare td {
    padding: 4pt 6pt;
    border-bottom: 1px solid #c9c9c9;
  }

  .page-produkt .compare thead {
    display: table-header-group;
  }

  .page-produkt .compare tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .page-produkt .compare figcaption {
    padding: 6pt 0 0;
    font-size: 8.5pt;
    color: #333;
  }

  @page {
    margin: 14mm 12mm;
  }
}

/* ------------------------------------------------- FAQ-Suche: Sprungliste und Verlauf
   Die FAQ-Seite ist mehrere Bildschirme lang. Eine Suche, die nur filtert,
   zwingt zum Scrollen durch ausgeblendete Gruppen. Zwei kleine Listen lösen
   das: die Treffer nach Thema (Sprungmarken in die Gruppe) und die zuletzt
   angesehenen Fragen. Beide werden von main.js gefüllt und stehen im Markup
   auf `hidden` — ohne JavaScript gibt es sie nicht, und es fehlt nichts. */
.faq-jumps,
.faq-recent {
  margin: 0.9rem 0 0;
}

.faq-jumps[hidden],
.faq-recent[hidden] {
  display: none;
}

.faq-jumps__label,
.faq-recent__label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.faq-jumps__list,
.faq-recent__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-jumps__list a,
.faq-recent__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.72rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: 0.82rem;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.faq-jumps__list a:hover,
.faq-jumps__list a:focus-visible,
.faq-recent__list a:hover,
.faq-recent__list a:focus-visible {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.faq-recent__list a {
  border-style: dashed;
  color: var(--color-steel);
}

.faq-jumps__n {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.32em;
  border-radius: 999px;
  background: rgba(199, 125, 79, 0.16);
  color: var(--color-signal);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Runde 13 — Lesetempo auf dem Schreibtisch.
   B2B-Entscheidungen fallen am großen Bildschirm. Dort war die Zeile mit
   760 px und 1.06rem zu lang und der Absatzabstand zu knapp: 68 Zeichen
   Zeilenbreite, mehr Zeilenhöhe und mehr Luft vor den Abschnitten. */
@media (min-width: 1180px) {
  .blog-body { font-size: 1.09rem; line-height: 1.8; }
  .blog-body p,
  .blog-body li { max-width: 68ch; }
  .blog-body p { margin: 0 0 1.3rem; }
  .blog-body h2 { margin: 2.9rem 0 1rem; font-size: 1.62rem; }
  .blog-body h3 { margin: 1.9rem 0 0.6rem; }
  .kurzantwort { font-size: 1.06rem; line-height: 1.78; padding: 1.4rem 1.7rem; }
  .chart figcaption { max-width: 68ch; font-size: 0.93rem; line-height: 1.65; }
  .blog-toc { font-size: 0.95rem; }
}