/* ==========================================================================
   prenel.eu – Relaunch
   Palette: Tiefes Nachtblau + Signalgrün (aus der techn. Explosionsgrafik)
   Typo:    Archivo (Display, expanded) · Archivo (Body) · JetBrains Mono (Technik)
   ========================================================================== */

:root {
  --navy: #0a1226;
  --navy-2: #101c3d;
  --navy-3: #16244c;
  --paper: #f2f1ec;
  --paper-2: #e9e7df;
  --white: #ffffff;
  --ink: #131722;
  --ink-soft: #4a5162;
  --line: #d8d5ca;
  --line-dark: rgba(255, 255, 255, 0.14);
  --lime: #a5e42d;
  --lime-deep: #74b904;
  --steel: #b9bec8;

  --font-display: "Archivo", sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --w-max: 1440px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Kein CSS scroll-behavior: smooth — kollidiert mit GSAP-Pinning
   (Scroll bleibt an der Sequenz hängen). Sanftes Anker-Scrollen macht main.js. */
html {
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--lime);
  color: var(--navy);
}

/* ---------- Typografie-Bausteine ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lime-deep);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Verhindert unschöne Umbrüche innerhalb kurzer Überschriftenzeilen.
   Auf schmalen Viewports darf wieder umgebrochen werden, sonst läuft
   die Zeile aus dem Bild. */
@media (min-width: 600px) {
  .nowrap {
    white-space: nowrap;
  }
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.on-dark .eyebrow {
  color: var(--lime);
}

.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

.on-dark .lead {
  color: var(--steel);
}

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section {
  position: relative;
}

.section-pad {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head h2 {
  font-size: clamp(2.1rem, 3.9vw, 3.3rem);
  margin-bottom: 1rem;
}

/* Zweizeilige Überschrift ohne Umbruch – braucht mehr Zeilenbreite als 62ch */
.section-head--wide {
  max-width: min(100%, 80ch);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background 0.35s, box-shadow 0.35s, transform 0.35s var(--ease-out);
}

/* Beim längeren Runterscrollen ausblenden, beim Raufscrollen wieder einblenden */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header.is-scrolled {
  background: rgba(10, 18, 38, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line-dark);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.25rem;
  transition: height 0.3s var(--ease-out);
}

/* Kompakt-Zustand nach dem Anscrollen */
.site-header.is-compact .wrap {
  height: 4.5rem;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 2.2rem;
  width: auto;
  transition: height 0.3s var(--ease-out);
}

.site-header.is-compact .logo img {
  height: 1.9rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.main-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--steel);
  text-decoration: none;
  transition: color 0.2s;
}

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

/* Kontakt-Button in der Nav: dunkle Schrift auf Lime (überschreibt .main-nav a) */
.main-nav a.btn--lime,
.main-nav a.btn--lime:hover {
  color: var(--navy);
}

/* Kompakter Button in der Menüleiste */
.main-nav a.btn {
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
}

/* Sprachumschalter: EN / DE als technisches Mono-Label */
.main-nav a.lang-switch {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  border: 1px solid var(--line-dark);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
}

.main-nav a.lang-switch:hover {
  border-color: var(--lime);
  color: var(--lime);
}

/* Ausgeschriebene Sprachbezeichnung nur im Mobilmenü */
.lang-switch .lang-long {
  display: none;
}

.main-nav a[aria-current="page"] {
  border-bottom: 2px solid var(--lime);
  padding-bottom: 2px;
}

/* Header auf hellen Seitenbereichen (nach dem Hero) bleibt dunkel hinterlegt – via .is-scrolled */

/* Burger-Button (nur mobil sichtbar) */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  width: 2.75rem;
  height: 2.5rem;
  position: relative;
  padding: 0;
  cursor: pointer;
}

.nav-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 2px;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: background 0.2s;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s var(--ease-out);
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

/* Offener Zustand: Burger wird zum X */
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 820px) {
  .nav-toggle {
    display: block;
  }
  /* Logo mobil größer */
  .site-header .logo img {
    height: 2.6rem;
  }
  .site-header.is-compact .logo img {
    height: 2.2rem;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    background: var(--navy);
    border-top: 1px solid var(--line-dark);
    padding: 1rem 0 2rem;
    /* Fläche über die volle Viewporthöhe (abzüglich Header) */
    min-height: calc(100svh - 4.5rem);
    overflow-y: auto;
    /* Overlay rollt von oben nach unten auf */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.45s var(--ease-out), visibility 0s 0.45s;
  }
  .main-nav.is-open {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 0.45s var(--ease-out), visibility 0s;
  }
  .reduced-motion .main-nav {
    transition: none;
  }
  .main-nav a {
    padding: 0.9rem var(--pad);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
  }
  .main-nav a[aria-current="page"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--lime);
    /* Desktop-Regel setzt padding-bottom: 2px für die Unterstreichung —
       mobil wieder auf volle Zeilenhöhe */
    padding: 0.9rem var(--pad);
  }
  /* Sprachumschalter reiht sich mobil als normale Zeile ein */
  .main-nav a.lang-switch {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 0.9rem var(--pad);
    font-size: 1rem;
  }
  .main-nav a.lang-switch:hover {
    border-color: rgba(255, 255, 255, 0.06);
  }
  /* Ausgeschriebene Sprache statt Kürzel */
  .main-nav a.lang-switch .lang-short {
    display: none;
  }
  .main-nav a.lang-switch .lang-long {
    display: inline;
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }
  /* Kontakt-Button: zentriert, begrenzte Breite */
  .main-nav a.btn {
    margin: 1.5rem auto 0;
    width: min(100% - 2 * var(--pad), 18rem);
    justify-content: center;
    font-size: 1.05rem;
    padding: 0.8rem 1.4rem;
    border-bottom: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}

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

.btn .arrow {
  transition: transform 0.25s var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.btn--lime {
  background: var(--lime);
  color: var(--navy);
}

.btn--lime:hover {
  background: #b8f13f;
}

.btn--ghost-dark {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

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

.btn--ghost-light {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--ghost-light:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--ghost-lime {
  border-color: var(--lime);
  color: var(--lime);
  font-weight: 600;
}

.btn--ghost-lime:hover {
  background: var(--lime);
  color: var(--navy);
}

.btn--navy {
  background: var(--navy);
  color: var(--white);
}

.btn--navy:hover {
  background: var(--navy-3);
}

/* ---------- Hero (Startseite) ---------- */

.hero {
  background: var(--navy);
  color: var(--white);
  padding-top: 5.25rem;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Feines technisches Raster als Atmosphäre */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 100%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  right: -20vw;
  top: -20vw;
  background: radial-gradient(circle, rgba(165, 228, 45, 0.08), transparent 65%);
  pointer-events: none;
}

.hero > .wrap {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 4vh, 4rem);
}

.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  margin-bottom: 1.5rem;
}

.hero h1 .accent {
  color: var(--lime);
}

.hero .lead {
  margin-bottom: 2.5rem;
  color: var(--steel);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-ctas .hint {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.25rem;
}

.hero-visual {
  position: relative;
}

.hero-visual img {
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

/* Schicht-Explosion: vier deckungsgleiche Ebenen (Wanne, Kern,
   Deckschicht, Kante), die beim Scrollen per Parallax auseinanderdriften */
.expl-stack {
  position: relative;
  /* Platz für das Auseinanderdriften der Ebenen */
  padding-block: clamp(2rem, 5vw, 4rem);
}

.expl-stack .expl-layer {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
  will-change: transform;
}

.expl-stack .expl-layer + .expl-layer {
  position: absolute;
  top: clamp(2rem, 5vw, 4rem);
  left: 0;
}

/* Kantenabdeckung liegt über allen anderen Ebenen: Kern und Deckschicht
   verschwinden beim Zusammensetzen visuell hinter der Tray-Außenkante */
.expl-stack .expl-layer:last-child {
  z-index: 4;
}

.hero-visual .caption {
  position: absolute;
  bottom: -0.5rem;
  right: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hero-visual .caption::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--lime);
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .hero > .wrap {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }
  .hero-visual {
    order: -1;
    max-width: 480px;
  }
}

/* Neu-Banner unter dem Hero */
.hero-banner {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.03);
}

.hero-banner a {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.1rem;
  text-decoration: none;
  color: var(--white);
  font-size: 0.95rem;
}

.hero-banner .tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--lime);
  color: var(--navy);
  padding: 0.3rem 0.6rem;
}

.hero-banner .arrow {
  margin-left: auto;
  color: var(--lime);
}

.hero-banner a:hover .arrow {
  transform: translateX(4px);
}

/* ---------- Stat-Leiste ---------- */

.stats {
  background: var(--navy);
  color: var(--white);
  border-top: 1px solid var(--line-dark);
}

.stats .wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-dark);
  /* Inhalt auf --w-max begrenzt, Hintergrund der Section läuft voll durch */
  border-inline: 1px solid var(--line-dark);
}

.stat {
  background: var(--navy);
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--pad);
}

.stat .num {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  color: var(--lime);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat .label {
  font-size: 0.9rem;
  color: var(--steel);
  margin-top: 0.6rem;
  max-width: 22ch;
}

@media (max-width: 1180px) {
  .stats .wrap {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .stats .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Was ist prenel ---------- */

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

.what .grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.what .big-statement {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 640;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.what .big-statement em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(165, 228, 45, 0.55) 62%);
}

.what .side-note {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--lime);
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 48ch;
}

@media (max-width: 900px) {
  .what .grid {
    grid-template-columns: 1fr;
  }
}

/* Galerie der integrierbaren Technologien (Original-Bildmaterial) */
.tech-gallery {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

.tech-gallery figure {
  background: var(--white);
  border: 1px solid var(--line);
}

.tech-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tech-gallery figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 820px) {
  .tech-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Zielgruppen-Kacheln ---------- */

.audiences {
  background: var(--paper-2);
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.audience-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.audience-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(10, 18, 38, 0.1);
}

.audience-card:hover::after {
  transform: scaleX(1);
}

.audience-card--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.audience-card h3 {
  font-size: clamp(1.5rem, 2.35vw, 2rem);
  margin-bottom: 1.25rem;
}

.audience-card ul {
  list-style: none;
  margin-bottom: 2rem;
  flex: 1;
}

.audience-card li {
  padding: 0.6rem 0 0.6rem 1.75rem;
  position: relative;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--line);
}

.audience-card--navy li {
  border-bottom-color: var(--line-dark);
  color: var(--steel);
}

.audience-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 9px;
  height: 9px;
  border: 2px solid var(--lime-deep);
  transform: rotate(45deg);
}

.audience-card--navy li::before {
  border-color: var(--lime);
}

.audience-card .card-cta {
  font-family: var(--font-display);
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--lime-deep);
  text-decoration: none;
  transition: color 0.2s;
}

.audience-card--navy .card-cta {
  color: var(--lime);
}

/* Hover: Pfeil schiebt nach rechts, Text unterstrichen —
   greift bei Karten-Hover (span in verlinkter Karte) wie bei
   direktem Hover auf eigenständige .card-cta-Links */
.card-cta .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

.audience-card:hover .card-cta .arrow,
a.card-cta:hover .arrow {
  transform: translateX(4px);
}

.audience-card:hover span.card-cta,
a.card-cta:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

@media (max-width: 820px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */

.legal-content {
  max-width: 72ch;
}

.legal-content h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 0.75rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content ul {
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.legal-content ul {
  padding-left: 1.4rem;
}

.legal-content a {
  color: var(--lime-deep);
}

/* ---------- Vorteile ---------- */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.benefit {
  background: var(--paper);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  grid-column: span 2;
  transition: background 0.3s;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.benefit:nth-child(4),
.benefit:nth-child(5) {
  grid-column: span 3;
}

.benefit:hover {
  background: var(--white);
}

.benefit .index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--lime-deep);
  letter-spacing: 0.14em;
  display: block;
}

.benefit-icon {
  width: 56px;
  height: 56px;
}

.benefit h3 {
  font-size: 1.2rem;
  margin: 0;
}

.benefit p {
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 900px) {
  .benefit,
  .benefit:nth-child(4),
  .benefit:nth-child(5) {
    grid-column: span 6;
  }
}

@media (min-width: 640px) and (max-width: 900px) {
  .benefit,
  .benefit:nth-child(4),
  .benefit:nth-child(5) {
    grid-column: span 3;
  }
}

/* ---------- Anwendungen ---------- */

.applications {
  background: var(--navy);
  color: var(--white);
}

.app-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  /* Inhalt auf --w-max begrenzt, Section-Hintergrund bleibt full-bleed */
  max-width: var(--w-max);
  margin-inline: auto;
  width: calc(100% - 2 * var(--pad));
}

.app-item {
  background: var(--navy);
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 1.5rem;
  text-align: left;
  transition: background 0.3s;
}

.app-item:hover {
  background: var(--navy-2);
}

.app-item .glyph {
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 1.25rem;
}

.app-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.app-item p {
  font-size: 0.86rem;
  color: var(--steel);
}

.app-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1.25rem;
  filter: saturate(0.92);
  transition: filter 0.3s;
}

.app-item:hover img {
  filter: saturate(1.05);
}

@media (max-width: 1000px) {
  .app-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-item:last-child {
    grid-column: span 2;
  }
}

/* ---------- Vertrauen / Team ---------- */

.trust .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}

.trust-fact {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
}

.trust-fact:last-child {
  border-bottom: 1px solid var(--line);
}

.trust-fact .mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--lime-deep);
  padding-top: 0.35rem;
}

.trust-fact h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.trust-fact p {
  font-size: 0.94rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .trust .grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Kontakt ---------- */

.contact {
  background: var(--navy);
  color: var(--white);
}

.contact .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel);
}

.field input,
.field select,
.field textarea {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  color: var(--white);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.65;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  transition: border-color 0.25s, background-color 0.25s;
}

/* Eigener Pfeil statt System-Widget: sonst ist das <select> niedriger als die
   Text-Felder (UA-Stylesheet erzwingt line-height: normal) und der Pfeil klebt
   ohne Abstand am rechten Rand. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b9bec8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem auto;
}

.field select option {
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lime);
  background-color: rgba(255, 255, 255, 0.08);
}

.contact-form .btn {
  justify-self: start;
}

.form-note {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--steel);
}

.form-success {
  grid-column: 1 / -1;
  background: rgba(165, 228, 45, 0.12);
  border: 1px solid var(--lime);
  color: var(--lime);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  display: none;
}

.form-success.is-visible {
  display: block;
}

.form-error {
  grid-column: 1 / -1;
  background: rgba(255, 122, 122, 0.1);
  border: 1px solid #ff7a7a;
  color: #ffb4b4;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  display: none;
}

.form-error.is-visible {
  display: block;
}

/* Feld, das der Server bemängelt hat */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #ff7a7a;
}

/* Während der Ajax-Anfrage: Knopf gesperrt, Formular gedimmt */
.contact-form.is-sending {
  opacity: 0.6;
  pointer-events: none;
}

.contact-form button[disabled] {
  cursor: default;
}

/* Honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .contact .grid {
    grid-template-columns: 1fr;
  }
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--steel);
  border-top: 1px solid var(--line-dark);
  padding-block: 2.5rem;
  font-size: 0.85rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 3rem;
}

/* Brand-Gruppe links: Logo + Copyright */
.footer-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.site-footer .logo img {
  height: 2rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  order: 3;
}

/* Dezenter Webdevelopment-Credit, mittig in der Zeile */
.site-footer .credit {
  order: 2;
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}

.site-footer .credit:hover {
  opacity: 1;
  color: var(--lime);
}

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

.site-footer a:hover {
  color: var(--white);
}

.site-footer .legal {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   SIPHON-LADE-LANDINGPAGE
   ========================================================================== */

.product-hero {
  background: var(--navy);
  color: var(--white);
  padding-top: 9rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(black 40%, transparent);
  pointer-events: none;
}

.product-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.product-hero .lead {
  max-width: 56ch;
}

.scroll-hint {
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.scroll-hint::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(var(--lime), transparent);
  animation: hint-drop 2s infinite;
}

@keyframes hint-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- Scroll-Sequenz --- */

.sequence-section {
  background: var(--navy);
  color: var(--white);
}

.sequence-stage {
  height: 120vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: visible;
  background: var(--navy);
  padding-bottom: 0;
}

.sequence-canvas-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 25vh;
  /* Inhalt auf --w-max begrenzt, Navy-Hintergrund bleibt full-bleed;
     seitlicher Abstand, damit die Rahmenlinie nie an der Viewportkante klebt */
  max-width: min(var(--w-max), calc(100% - 2 * var(--pad)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

#seqCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sequence-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* deckungsgleich mit dem Rahmen der Canvas-Box, damit das Padding
     auf allen Seiten vom Rahmen aus gemessen wird */
  max-width: min(var(--w-max), calc(100% - 2 * var(--pad)));
  margin-inline: auto;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* oben derselbe Abstand wie seitlich (Header ist beim Runterscrollen
     in die Sequenz ohnehin ausgeblendet) */
  padding: var(--pad) var(--pad) calc(25vh + 2rem) var(--pad);
  z-index: 10;
}

.sequence-hud .hud-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

.seq-frame-readout {
  color: var(--lime);
  font-weight: 600;
}

.sequence-captions {
  /* Grid-Stacking: alle Captions liegen in derselben Zelle,
     die Box ist so hoch wie die längste Caption — nichts wird abgeschnitten */
  display: grid;
  max-width: 460px;
  background: rgba(10, 18, 38, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  padding: 1.5rem;
  border-left: 3px solid var(--lime);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  margin-top: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s, transform 0.35s var(--ease-out);
}

.sequence-captions.has-active {
  opacity: 1;
  transform: none;
}

.seq-caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
  color: var(--white);
}

.seq-caption.is-active {
  opacity: 1;
  transform: none;
}

.seq-caption .step {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--lime);
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.seq-caption h3 {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  margin-bottom: 0.4rem;
  color: var(--white);
}

.seq-caption p {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 40ch;
}

.seq-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--lime);
  width: 0%;
  z-index: 11;
}

/* Fallback ohne JS / reduced motion */
.sequence-fallback {
  display: none;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--white);
}

.sequence-fallback img {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.no-js .sequence-stage,
.reduced-motion .sequence-stage {
  display: none;
}

.no-js .sequence-fallback,
.reduced-motion .sequence-fallback {
  display: block;
}

/* --- Problem / Lösung --- */

.problem-solution .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ps-card {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--line);
}

.ps-card--problem {
  background: var(--paper-2);
}

.ps-card--solution {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.ps-card .mono-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.5rem;
}

.ps-card--problem .mono-tag {
  color: var(--ink-soft);
}

.ps-card--solution .mono-tag {
  color: var(--lime);
}

.ps-card h3 {
  font-size: clamp(1.4rem, 2.35vw, 1.85rem);
  margin-bottom: 1rem;
}

.ps-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.ps-card--solution p {
  color: var(--steel);
}

.ps-card ul {
  list-style: none;
  margin-top: 1.25rem;
}

.ps-card li {
  padding: 0.5rem 0 0.5rem 1.6rem;
  position: relative;
  font-size: 0.94rem;
  color: var(--steel);
}

.ps-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 8px;
  height: 8px;
  border: 2px solid var(--lime);
  transform: rotate(45deg);
}

@media (max-width: 820px) {
  .problem-solution .grid {
    grid-template-columns: 1fr;
  }
}

/* --- Aufbau (Explosionsgrafik mit Labels) --- */

.anatomy {
  background: var(--navy);
  color: var(--white);
}

.anatomy figure {
  border: 1px solid var(--line-dark);
  background: #050a18;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.anatomy figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.anatomy .patent {
  color: var(--lime);
}

/* Beschriftungen + Pfeile als HTML/SVG über der unbeschrifteten Explosionsgrafik */
.anatomy-canvas {
  position: relative;
  width: 100%;
}

/* Hotspots: subtil pulsierender Punkt am Bauteil; bei Hover/Fokus wächst
   eine Linie heraus und zeigt das Label in einer Tooltip-Box */
.hotspot {
  position: absolute;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.hotspot:hover,
.hotspot:focus-visible {
  z-index: 5;
}

.hotspot .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(165, 228, 45, 0.22);
  transition: transform 0.25s var(--ease-out);
}

.hotspot:hover .dot,
.hotspot:focus-visible .dot {
  transform: scale(1.25);
}

.hotspot .dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--lime);
  border-radius: 50%;
  animation: hotspot-pulse 2.6s var(--ease-out) infinite;
}

/* Puls leicht versetzt, damit nicht alle Punkte synchron blinken */
.hotspot:nth-of-type(2n) .dot::after { animation-delay: 0.9s; }
.hotspot:nth-of-type(3n) .dot::after { animation-delay: 1.7s; }

@keyframes hotspot-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.reduced-motion .hotspot .dot::after {
  animation: none;
}

.hotspot .line {
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  margin-top: -1px;
  background: var(--lime);
  transition: width 0.3s var(--ease-out);
}

.hotspot .tip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 30ch;
  background: rgba(10, 18, 38, 0.96);
  border: 1px solid rgba(165, 228, 45, 0.45);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius);
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--white);
  text-align: left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s 0.12s, visibility 0s 0.45s;
  pointer-events: none;
}

.hotspot[data-dir="right"] .line { left: 50%; }
.hotspot[data-dir="right"] .tip  { left: calc(50% + 64px); }
.hotspot[data-dir="left"]  .line { right: 50%; }
.hotspot[data-dir="left"]  .tip  { right: calc(50% + 64px); }

.hotspot:hover .line,
.hotspot:focus-visible .line {
  width: 64px;
}

.hotspot:hover .tip,
.hotspot:focus-visible .tip {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s 0.12s, visibility 0s;
}

.hotspot .tip .patent-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--lime);
  margin-top: 0.3rem;
}

/* Mobile: Overlay ausblenden, Legende darunter zeigen */
.anatomy-legend {
  display: none;
  list-style: none;
  width: 100%;
  margin-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  padding-top: 1rem;
}

.anatomy-legend li {
  font-size: 0.9rem;
  color: var(--steel);
  padding-block: 0.35rem;
  display: flex;
  gap: 0.75rem;
}

.anatomy-legend .mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--lime);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

@media (max-width: 640px) {
  .hotspot {
    display: none;
  }
  .anatomy-legend {
    display: block;
  }
}

/* --- Feature-Liste Produkt --- */

.product-features .benefits-grid .benefit {
  background: var(--paper);
}

/* --- Kaufen / Verfügbarkeit --- */

.buy {
  background: var(--paper-2);
}

.buy .grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.color-swatches {
  display: flex;
  gap: 1.5rem;
  margin-block: 2rem;
}

.swatch {
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swatch .chip {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line);
  margin-inline: auto;
  margin-bottom: 0.6rem;
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}

a.swatch:hover .chip {
  transform: translateY(-3px);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--lime);
}

.swatch .name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Bestell-Link pro Farbvariante */
.swatch .buy {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lime-deep);
  opacity: 0.85;
  transition: opacity 0.2s;
}

a.swatch:hover .buy {
  opacity: 1;
}

.swatch .buy .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

a.swatch:hover .buy .arrow {
  transform: translateX(3px);
}

.chip--seidenweiss { background: #f4f2ec; }
.chip--oriongrau { background: #8d9096; }
.chip--carbonschwarz { background: #23252a; }

.buy-box {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.buy-box h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.buy-box p {
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.buy-box .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.availability-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.availability-note .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime-deep);
  flex-shrink: 0;
  animation: pulse 2.5s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 122, 0, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(76, 122, 0, 0); }
}

.availability-note a {
  color: var(--ink);
}

@media (max-width: 900px) {
  .buy .grid {
    grid-template-columns: 1fr;
  }
}

/* --- System-Ausblick --- */

.system-outlook {
  text-align: center;
}

.system-outlook .wrap {
  max-width: 720px;
}

.system-outlook h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  margin-bottom: 1rem;
}

.system-outlook p {
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

/* ==========================================================================
   ZIELGRUPPEN-SEITEN (Handwerk / Industrie)
   ========================================================================== */

.subpage-hero {
  background: var(--navy);
  color: var(--white);
  padding-top: 9rem;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}

.subpage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(black 30%, transparent);
  pointer-events: none;
}

.subpage-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

/* Visual rechts im Subpage-Hero.
   Das Bild sitzt absolut und läuft bis zum rechten Fensterrand – nicht bis zum
   .wrap-Rand, sonst entsteht rechts ein toter Streifen. Die Maske blendet es
   nach links ins Navy aus, deshalb braucht das Motiv links Luft. */
.subpage-hero .wrap {
  position: relative;
  z-index: 1;
}

.subpage-hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  pointer-events: none;
  user-select: none;
}

.subpage-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

/* Foto mit eigenem Hintergrund (Industrie): ins Navy einfärben, damit es sich
   nicht als Fremdkörper vom Hero absetzt. */
.subpage-hero-visual--photo img {
  filter: saturate(0.3) brightness(0.6) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* Navy-Tönung: nimmt dem Foto den Fremdfarbstich */
.subpage-hero-visual--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* Freigestelltes Motiv auf bereits navyfarbenem Grund (Handwerk).
   Keine Tönung nötig – der Bildhintergrund ist exakt var(--navy). Die Maske
   endet früher als beim Foto, damit sie nur über die leere Navy-Fläche links
   läuft und das Objekt selbst nicht anfasst. object-position hält das Motiv
   rechts, beschnitten wird also nur die leere Fläche. */
.subpage-hero-visual--flat img {
  /* contain statt cover: das Motiv darf oben nicht beschnitten werden. Die
     dabei entstehenden Ränder fallen nicht auf, weil der Bildhintergrund
     exakt var(--navy) ist – Bild und Hero gehen nahtlos ineinander über. */
  object-fit: contain;
  object-position: right center;
  /* Wie beim Foto auf der Industrie-Seite: die linke Partie löst sich im
     Verlauf ins Navy auf, statt hart im Bild zu enden. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

/* Mit contain begrenzt die Breite die Darstellung, nicht die Höhe – der
   Container darf deshalb breiter sein als beim Foto, ohne dass das Motiv in
   die Überschrift läuft. */
.subpage-hero-visual--flat {
  width: 54%;
}

/* Technische Zeichnung als eigenes Element statt im Bild eingebacken: so
   hängt sie an der unteren rechten Ecke des Heros und wandert nicht mit dem
   Bild mit. Auf breiten Viewports blieb die Ecke sonst leer. Sie läuft
   bewusst über beide Kanten hinaus – ein angeschnittenes Blatt wirkt wie ein
   Ausschnitt, ein vollständiges wie ein aufgeklebtes Sticker-Motiv. */
.subpage-hero-drawing {
  position: absolute;
  right: -2%;
  bottom: -7%;
  width: clamp(230px, 21vw, 420px);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.subpage-hero-drawing img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .subpage-hero-drawing {
    display: none;
  }
}

/* Kopfzeile freihalten: ohne diese Abdunklung steht die Navigation auf der
   hellen Bildkante und "EN" verschwindet fast. */
.subpage-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--navy) 0%, rgba(10, 18, 38, 0.6) 12%, transparent 34%);
}

/* Text vor dem Bild lesbar halten, sobald beide sich überlappen können */
@media (min-width: 901px) {
  .subpage-hero h1,
  .subpage-hero .lead {
    max-width: 18ch;
  }
  .subpage-hero .lead {
    max-width: 46ch;
  }
  /* Mehr Luft oben und unten, sobald das Visual danebensteht (+25 %) */
  .subpage-hero {
    padding-top: 11.25rem;
    padding-bottom: clamp(4.375rem, 8.75vw, 7.5rem);
  }
}

/* Schmale Viewports: kein Platz für zwei Spalten, das Visual entfällt.
   Kein display:none am <img>, sondern am Container – so lädt der Browser das
   Bild bei lazy loading gar nicht erst. */
@media (max-width: 900px) {
  .subpage-hero-visual {
    display: none;
  }
}

/* Vergleichstabelle (Industrie) */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare-table th,
.compare-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.compare-table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}

.compare-table .col-prenel {
  background: rgba(165, 228, 45, 0.12);
  font-weight: 600;
}

.compare-table tbody tr:hover td {
  background: rgba(10, 18, 38, 0.03);
}

.compare-table tbody tr:hover .col-prenel {
  background: rgba(165, 228, 45, 0.2);
}

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

/* Geschäftsmodelle */
.models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.model-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.model-card .index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--lime-deep);
  display: block;
  margin-bottom: 1.5rem;
}

.model-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.model-card p {
  font-size: 0.94rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .models-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA-Band */
.cta-band {
  background: var(--lime);
  color: var(--navy);
}

.cta-band .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cta-band h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  max-width: 24ch;
}

/* Mehrere Handlungsaufforderungen im CTA-Band untereinander */
.cta-band-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.cta-band-actions .btn {
  justify-content: center;
}

/* ---------- Reveal-Animationen ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
}

.reduced-motion .reveal,
.no-js .reveal {
  opacity: 1;
  transform: none;
}