/* envago.de — Site styles (west-spinx aligned) */

/* Wörter mit Bindestrich, die nicht am Bindestrich umbrechen sollen („E-Mail“) */
.nobr { white-space: nowrap; }

/* ============ ÜBERSCHRIFTEN ============ */
/* Überschriften brechen ausgeglichen um statt mit festem <br/> mitten im Satz.
   Ein fester Umbruch ließ in schmalen Spalten ein einzelnes Wort allein in einer
   Zeile stehen („Fotoauslesung ⏎ aus ⏎ eigener Entwicklung.“). Ein <br/> steht
   nur noch zwischen zwei Sätzen („Fünf Schritte.<br/>Null Medienbrüche.“). */
h1,
h2,
.sec-title {
  text-wrap: balance;
}
/* Der farbige Teil (.blue, global inline-block) umbricht in Überschriften wie
   normaler Text. Als unteilbarer Block rutschte er sonst komplett in die nächste
   Zeile und ließ das Wort davor allein stehen („Fotoauslesung ⏎ aus ⏎ eigener
   Entwicklung.“). „clone“ gibt jeder Zeile ihren eigenen Verlauf und ihr eigenes
   Padding gegen abgeschnittene Unterlängen. */
.sec-title .blue,
.cta h2 .blue {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============ TOP STRIP ============ */
.topstrip {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.topstrip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.topstrip a {
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
.topstrip a:hover { color: var(--ink); }
.topstrip .num {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.topstrip a.num:hover { color: var(--accent-text); }
/* Unter 980 px übernimmt das mobile Menü; die Leiste entfällt dort ganz. */
@media (max-width: 980px) {
  .topstrip { display: none; }
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.brand img { height: 28px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-link {
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover { color: var(--accent-text); }
.nav-link.has-caret::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.7;
}
/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 0;
  transition: transform 0.15s ease, background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover { background: var(--lime); }
.btn-lime {
  background: var(--lime);
  color: var(--bg);
}
.btn-lime:hover { background: #d4ff5a; transform: translate(-1px, -1px); }
/* Primärer Button auf den Produktseiten: Farben aus dem Produktkontext
   ([data-product] in tokens.css, gesetzt am <body> über BaseLayout product=…).
   Ohne Produktkontext fällt er auf Lime zurück. */
.btn-product {
  background: var(--accent, var(--lime));
  color: var(--accent-ink, var(--bg));
}
.btn-product:hover { background: var(--accent-hover, var(--lime-bright)); transform: translate(-1px, -1px); }
.btn-product:focus-visible { outline-color: var(--accent-text, var(--lime)); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn .arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.25s;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 60px 0 100px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), rgba(38,80,102,0.08), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 14px 0 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-bottom: 32px;
}
.hero-pill .dot {
  width: 22px;
  height: 22px;
  background: var(--lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
/* Kicker über der Hero-Überschrift (z. B. Produktname): etwas Luft zur großen Schrift */
.hero .eyebrow { margin-bottom: 24px; }
/* Der Kicker steht in der h1 (Produktname in der Hauptüberschrift für Suchmaschinen und
   Screenreader), sieht aber genauso aus wie vorher als eigene Zeile darüber. Dafür stellt
   .hero-kicker die Textzeile wieder her, in der die Eyebrow vorher stand: ein Block mit
   der Grundschrift von body statt der großen h1-Schrift. Die Zeilenhöhe dieser Schrift
   bestimmt den Abstand nach oben mit, feste Pixel würden je nach Schrift abweichen. */
.hero h1 .hero-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
.hero h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(44px, 8.5vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  color: var(--ink);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto 36px;
}
.hero-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============ SPLIT HERO (alle vier Produktseiten) ============ */
/* SplitHero.astro: volle Breite h1 (Styles oben, .hero h1 – keine eigene Kopie je Seite),
   darunter zwei Spalten: Text (Lead-Absatz + Zielgruppen-Zeile + Button) und Medien-Slot,
   je ~50/50. */
.split-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start; /* Text oben bündig mit der Grafik, nicht mittig */
  margin-top: 48px;
}
.split-hero-text { order: 1; min-width: 0; }
.split-hero-media { order: 2; min-width: 0; position: relative; }
.split-hero-media[data-ratio] { aspect-ratio: var(--media-ratio); }
.split-hero-row[data-media="left"] .split-hero-text { order: 2; }
.split-hero-row[data-media="left"] .split-hero-media { order: 1; }
/* Einzige Textebene unter der h1 (vorher zusätzlich eine h2 „split-hero-heading“, siehe
   CLAUDE.md-Review – alle vier Produktseiten zeigen jetzt nur noch h1 + ein Lead-Absatz).
   Volle Spaltenbreite wie der Rest der Textspalte, kein eigener ch-Deckel mehr. */
.split-hero-lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 28px;
}
.split-hero-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Zweites Wort der Hero-Überschrift bleibt kräftiges Weiß statt Verlauf (Hierarchie:
   erstes Wort im Verlauf, zweites als ruhiger Kontrast) – gemeinsam für beide Seiten,
   die .blue/.blue.alt im selben Muster nutzen. padding/margin kompensieren Unterlängen
   (g, p, y) im eng gesetzten Hero-h1 (line-height 0.92). */
.hero h1 .blue,
.hero h1 .blue.alt {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.hero h1 .blue.alt {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  animation: none !important;
}
@media (max-width: 880px) {
  .split-hero-row {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
  }
  .split-hero-row .split-hero-text,
  .split-hero-row[data-media="left"] .split-hero-text {
    order: 1;
  }
  .split-hero-row .split-hero-media,
  .split-hero-row[data-media="left"] .split-hero-media {
    order: 2;
  }
  .split-hero-media { max-width: 420px; width: 100%; margin: 0 auto; }
  .split-hero-media[data-ratio] { aspect-ratio: 16 / 11; }
}

/* ============ LOGOS ============ */
.logos {
  padding: 56px 0 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.logos-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
}
.logos-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: center;
  justify-items: center;
}
.logo-mark {
  height: 32px;
  display: flex;
  align-items: center;
  color: var(--ink-3);
  opacity: 0.7;
  transition: opacity 0.25s, color 0.25s;
  white-space: nowrap;
}
.logo-mark:hover { opacity: 1; color: var(--lime); }

/* ============ SECTION ============ */
.section {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
  position: relative;
}
/* Erster Abschnitt direkt nach dem Hero: Hero (100 px unten) plus voller Abschnittsabstand
   wäre eine leere Fläche am unteren Bildschirmrand. So ist beim ersten Laden schon der
   Anfang des nächsten Abschnitts zu sehen. :where() hält die Spezifität niedrig, damit
   seiteneigene Abstände (z. B. Ableseportal) weiter gelten. */
:where(.hero) + .section { padding-top: clamp(24px, 3vw, 40px); }
.section.dark {
  background: var(--bg);
}
.section-head {
  max-width: 760px;
  margin-bottom: 64px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(min(36px, 9.5vw), 5.2vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 18px 0 18px;
  color: var(--ink);
  text-wrap: balance;
}
.section-head p {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ============ PRODUCTS ============ */
/* Plakette und Überschrift stehen über der Karte, oben links, unabhängig von `reverse`
   (siehe Review 2026-10-05). Darunter die zweispaltige Zeile mit Text/Liste/Link und
   Grafik, oben bündig (align-items: start) statt vertikal zentriert. */
.product-row {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.product-row:first-of-type { border-top: 0; padding-top: 24px; }

.product-head { margin-bottom: 40px; }

.product-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 64px;
  align-items: start;
}
.product-row.reverse .product-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr); }
.product-row.reverse .product-text { order: 2; }

.product-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.product-tag .swatch {
  width: 12px;
  height: 12px;
  background: var(--lime);
}
.product-row h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--ink);
  max-width: 72%;
  text-wrap: balance;
}
/* Titel im Ableseportal-Mock der Startseite: Er war ein h3 und bekam dadurch von
   .product-row h3 Schrift, Zeilenhöhe, Laufweite und Breite mit (Größe, Gewicht, Farbe
   und Abstand setzt der Mock selbst). Seit er ein div ist, stehen diese Werte hier, damit
   er genauso aussieht wie vorher. */
.product-row .ap-sheet-title {
  font-family: var(--font-sans);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 72%;
  text-wrap: balance;
}
.product-row .lede {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 48ch;
}
.product-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.product-points li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--lime);
}
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  border-bottom: 1px solid rgba(187,221,51,0.4);
  padding-bottom: 4px;
  transition: border-color 0.2s, gap 0.2s, color 0.2s;
}
.product-cta:hover { border-color: var(--lime); gap: 12px; }

/* ============ AUDIENCE GRID ============ */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.aud-card {
  grid-column: span 6;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.aud-card:hover {
  border-color: var(--lime);
  transform: translateY(-2px);
}
.aud-card.tall { grid-column: span 4; }
.aud-card.wide { grid-column: span 8; }
.aud-card .img {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--petrol);
}
.aud-card.tall .img { height: 220px; }
.aud-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aud-card:hover .img img { transform: scale(1.04); }
.aud-card .body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.aud-card.tall .body { padding: 26px 28px 30px; }
.aud-card h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--ink);
}
.aud-card p {
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 18px;
}
/* Checkmark-Liste je Branchen-Karte (Stil übernommen von .product-points in der
   Produkte-Sektion): Lime-Haken, kompakter Fließtext, keine Mono-/Versalien-Schrift. */
.aud-card .checks {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aud-card .checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.aud-card .checks li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--lime);
}
.aud-card .uses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.aud-card .uses span {
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* ============ STATS ============ */
.stats-section {
  background: var(--bg-2);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-cell {
  padding: 40px 28px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stat-cell:last-child { border-right: 0; }
.stat-cell .num {
  font-family: var(--font-sans);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 14px;
  white-space: nowrap;
  color: var(--ink);
}
.stat-cell .num .unit {
  color: var(--lime);
}
.stat-cell .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ============ FEATURES ============ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feat {
  /* Füllflächen der Icons (FeatIcon) folgen dem Kartenhintergrund */
  --icon-bg: var(--bg);
  background: var(--bg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
  transition: background 0.25s;
}
.feat:hover { --icon-bg: var(--surface); background: var(--surface); }
.feat h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.feat p {
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}

/* ============ TESTIMONIAL ============ */
.testi {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(40px, 6vw, 72px);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.testi-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: center;
}
.testi blockquote {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-wrap: pretty;
  color: var(--ink);
}
.testi blockquote .hl {
  color: var(--lime);
  font-weight: 800;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.testi-author .av {
  width: 48px;
  height: 48px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--lime), var(--petrol-tint));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--bg);
}
.testi-author .name { font-weight: 600; color: var(--ink); }
.testi-author .role { color: var(--ink-3); font-size: 13px; }

.testi-numbers {
  border-left: 1px solid var(--line);
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.testi-numbers .n {
  font-family: var(--font-sans);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--lime);
  line-height: 1;
}
.testi-numbers .l {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ============ CTA ============ */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(80px, 12vw, 180px) 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.cta h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  /* Mindestgröße höchstens 12.5vw: „Zählerwechsel“ lief bei 48 px unter ~375 px über den Rand. */
  font-size: clamp(min(48px, 12.5vw), 7.5vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  text-wrap: balance;
  color: var(--ink);
}
.cta-row {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* CTA blob tinting */
.cta .blob-stage .b1 { background: radial-gradient(circle, var(--cta-glow-1) 0%, transparent 70%); }
.cta .blob-stage .b2 { background: radial-gradient(circle, var(--cta-glow-2) 0%, transparent 70%); }
.cta .blob-stage .b3 { background: radial-gradient(circle, var(--cta-glow-3) 0%, transparent 70%); }
.cta .blob-stage .b4 { background: radial-gradient(circle, var(--cta-glow-4) 0%, transparent 70%); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  /* minmax(0, 1fr) statt 1fr: sonst setzt die Mindestbreite der Mockups die
     Spaltenbreite und die Seite scrollt auf dem Handy seitlich. */
  .product-cols, .product-row.reverse .product-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .product-visual, .product-text { min-width: 0; max-width: 100%; }
  .product-row.reverse .product-text { order: 0; }
  .product-row h3 { max-width: 100%; }
  .product-row .ap-sheet-title { max-width: 100%; }
  .aud-card, .aud-card.tall, .aud-card.wide { grid-column: span 12; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: 0; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .feat-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; gap: 36px; }
  .testi-numbers {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 28px;
    flex-direction: row;
    gap: 36px;
    flex-wrap: wrap;
  }
  .logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .logo-mark { max-width: 100%; white-space: normal; text-align: center; }
  .nav-links { display: none; }
}

@media (max-width: 640px) {
  .logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nur für Screenreader sichtbar (z. B. „öffnet in neuem Fenster“) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}