/* ═══════════════════════════════════════════════════════════════════════
   LUMENTIFY – Gestaltung (Stand 07.10.2026, zweite Fassung)

   Dunkel, analog zu premium-leuchtstoffe.de: gleicher Grund, gleiche
   Mint-/Cyan-Leuchtfarben, gleiche Schriften (Sora, Manrope). Der
   Geschäftston kommt über Struktur statt über Helligkeit: Raster und
   Haarlinien, nummerierte Gründe, Datentabellen, kleine Versalien-
   Vorzeilen, ruhigere Rundungen als beim B2C-Auftritt. Das Leuchten
   (Wolken, Bildschein, Glüh-Kanten) bleibt — es ist der Aha-Effekt.

   Alles selbst gehostet, keine Fremd-CDNs. Mobil zuerst.
   Animiert werden nur opacity und transform; bei „Bewegung reduzieren"
   steht alles still.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --grund:      #070f15;
  --flaeche:    #0e1c24;
  --flaeche-2:  #13262f;
  --linie:      #1f3540;
  --linie-hell: #2c4752;

  --text:       #eaf2ee;
  --text-2:     #9fb3ac;
  --text-3:     #7f958e;

  --mint:       #66cc99;
  --cyan:       #29e8e1;
  --mint-weich: rgba(102, 204, 153, .14);
  --cyan-weich: rgba(41, 232, 225, .12);

  --kopf: "Sora", "Segoe UI", system-ui, sans-serif;
  --lauf: "Manrope", "Segoe UI", system-ui, sans-serif;

  --breite: 75rem;
  --rand: 1rem;
  --rund: 14px;
  --rund-klein: 8px;
}
@media (min-width: 40em) { :root { --rand: 1.5rem; } }
@media (min-width: 72em) { :root { --rand: 2rem; } }

/* ── Grundlagen ──────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--lauf);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 .6em;
  font-family: var(--kopf);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
  hyphens: auto;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 700; }

a { color: var(--mint); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cyan); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

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

.sprung {
  position: absolute; left: var(--rand); top: -4rem; z-index: 100;
  padding: .6rem 1rem; background: var(--mint); color: var(--grund);
  font-weight: 700; text-decoration: none; border-radius: 999px;
}
.sprung:focus { top: .75rem; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.innen.schmal { max-width: 46rem; }

/* ── Bausteine ───────────────────────────────────────────────────────── */

.vorzeile {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.1rem;
  font-family: var(--lauf); font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mint);
}
.vorzeile::before {
  content: ""; width: 1.5rem; height: 1px; background: currentColor; opacity: .7;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .75rem 1.6rem;
  border: 1px solid var(--mint); border-radius: 999px;
  background: var(--mint); color: var(--grund);
  font-family: var(--lauf); font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .25s;
}
.btn:hover {
  background: #7ddcab; border-color: #7ddcab; color: var(--grund);
  box-shadow: 0 0 0 4px var(--mint-weich), 0 0 32px rgba(102, 204, 153, .35);
  text-decoration: none;
}
.btn--linie { background: transparent; color: var(--text); border-color: var(--linie-hell); }
.btn--linie:hover { background: transparent; color: #fff; border-color: var(--cyan); box-shadow: 0 0 24px var(--cyan-weich); }
.btn--klein { min-height: 2.5rem; padding: .5rem 1.15rem; font-size: .92rem; }
.btn .symbol { width: 1.15rem; height: 1.15rem; }

.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.symbol {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Leuchtwolken: wie Pigment, das auflädt und abklingt (wie auf
   premium-leuchtstoffe.de, 12 s). Nur opacity und transform. */
.wolken { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wolken::before, .wolken::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(10px);
  animation: aufladen 12s ease-in-out infinite alternate;
}
.wolken::before {
  width: 42rem; height: 42rem; right: -12rem; top: -14rem;
  background: radial-gradient(closest-side, rgba(102, 204, 153, .22), transparent);
}
.wolken::after {
  width: 34rem; height: 34rem; left: -14rem; bottom: -18rem;
  background: radial-gradient(closest-side, rgba(41, 232, 225, .16), transparent);
  animation-delay: -6s;
}
@keyframes aufladen {
  from { opacity: .45; transform: scale(.92); }
  to   { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .wolken::before, .wolken::after { animation: none; }
}

/* ── Wortmarke ───────────────────────────────────────────────────────── */

.wortmarke {
  display: inline-flex; align-items: center; gap: .65rem; margin: 0;
  color: #fff; text-decoration: none;
  font-family: var(--kopf); font-size: 1.05rem; font-weight: 600; letter-spacing: .22em;
}
.wortmarke:hover { color: #fff; text-decoration: none; }
/* Bildzeichen (Entwurf 3, SVG mit dauerhaft glühendem Lichtkörper –
   die Animation steckt in der Datei selbst, Lars 07.10.2026) */
.wortmarke-zeichen { height: 2.35rem; width: auto; margin: -.35rem -.15rem -.35rem -.4rem; }
.fuss .wortmarke-zeichen { height: 2.8rem; }
.tuer .wortmarke-zeichen { height: 3.2rem; }

/* ── Kopfzeile ───────────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 15, 21, .92);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(8px)) {
  .kopf { background: rgba(7, 15, 21, .78); backdrop-filter: blur(12px); }
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  min-height: 4.25rem;
}

.menue-knopf {
  display: none; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .4rem .9rem;
  border: 1px solid var(--linie-hell); border-radius: 999px;
  background: transparent; color: var(--text);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.menue-striche, .menue-striche::before, .menue-striche::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative;
  transition: transform .2s, background-color .2s;
}
.menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after  { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after  { transform: translateY(-6px) rotate(-45deg); }

.nav { width: 100%; padding: .5rem 0 1.25rem; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--text); text-decoration: none; }
.nav-liste > li > a { display: block; padding: .7rem 0; font-weight: 600; border-bottom: 1px solid var(--linie); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--mint); }
.nav-unter { padding: .25rem 0 .5rem 1rem !important; border-bottom: 1px solid var(--linie); }
.nav-unter a { display: block; padding: .45rem 0; font-size: .95rem; color: var(--text-2); }

.sprachen { display: flex; gap: .25rem; margin: 1rem 0 !important; }
.sprachen a, .sprachen span {
  display: inline-block; padding: .3rem .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  border: 1px solid transparent; border-radius: 999px;
}
.sprachen span { border-color: var(--linie-hell); color: var(--mint); }
.sprachen a { color: var(--text-3); }

.kopf-cta { color: var(--grund) !important; }

.js .menue-knopf { display: inline-flex; }
.js .nav { display: none; }
.js .nav.offen { display: block; }

@media (min-width: 64em) {
  .js .menue-knopf { display: none; }
  .nav, .js .nav { display: flex; align-items: center; gap: 1.5rem; width: auto; padding: 0; }
  .nav-liste { display: flex; gap: 1.6rem; }
  .nav-liste > li { position: relative; }
  .nav-liste > li > a { padding: 1.4rem 0; border: 0; font-size: .93rem; }
  .nav-unter {
    position: absolute; left: -1.25rem; top: 100%; min-width: 18rem;
    padding: .6rem 0 !important; border: 1px solid var(--linie) !important;
    background: var(--flaeche); border-radius: var(--rund-klein);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
    visibility: hidden; opacity: 0; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility 0s .15s;
  }
  .nav-unter a { padding: .5rem 1.25rem; }
  .nav-punkt--unter:hover .nav-unter,
  .nav-punkt--unter:focus-within .nav-unter { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .sprachen { margin: 0 !important; }
}

/* ── Hero (Startseite) ───────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--linie); }
.hero-innen {
  position: relative; z-index: 2;
  max-width: var(--breite); margin: 0 auto;
  padding: 3.5rem var(--rand) 4rem;
}
.hero-text { max-width: 36em; font-size: 1.12rem; color: var(--text-2); }

/* Das Bild: Pigmenthäufchen, die im Dunkeln leuchten. Auf schmalen
   Schirmen unter dem Text, ab 56em rechts angeschnitten und zum Text hin
   ausgeblendet — kein harter Bildrand, das Leuchten geht in den Grund. */
.hero-bild { position: relative; z-index: 1; margin: -1rem 0 0; }
.hero-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--grund), transparent 25%, transparent 75%, var(--grund));
}

@media (min-width: 56em) {
  .hero { min-height: 40rem; display: flex; align-items: center; }
  .hero-innen { width: 100%; padding-top: 6rem; padding-bottom: 6.5rem; }
  .hero h1, .hero-text { max-width: 54%; }
  .hero-bild { position: absolute; inset: 0 0 0 38%; margin: 0; }
  .hero-bild img { height: 100%; aspect-ratio: auto; object-position: 72% 50%; }
  .hero-bild::after {
    background:
      linear-gradient(to right, var(--grund) 0%, rgba(7, 15, 21, .55) 30%, transparent 60%),
      linear-gradient(to bottom, var(--grund), transparent 18%, transparent 80%, var(--grund));
  }
}

/* ── Fakten-Leiste ───────────────────────────────────────────────────── */

.fakten { position: relative; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.fakten-liste {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand);
  display: grid; grid-template-columns: 1fr;
}
.fakt {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start;
  padding: 1.35rem 0; border-bottom: 1px solid var(--linie);
}
.fakt:last-child { border-bottom: 0; }
.fakt .symbol {
  grid-row: span 2; width: 2.5rem; height: 2.5rem; padding: .5rem;
  color: var(--cyan); border: 1px solid var(--linie-hell); border-radius: 50%;
  box-shadow: 0 0 18px var(--cyan-weich);
}
.fakt dt { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.fakt dd { margin: .25rem 0 0; font-weight: 600; line-height: 1.45; color: var(--text); }

@media (min-width: 40em) {
  .fakten-liste { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .fakt:nth-last-child(2) { border-bottom: 0; }
}
@media (min-width: 64em) {
  .fakten-liste { grid-template-columns: repeat(4, 1fr); }
  .fakt { padding: 2rem 1.25rem 2rem 0; border-bottom: 0; }
  .fakt + .fakt { padding-left: 1.5rem; border-left: 1px solid var(--linie); }
}

/* ── Abschnitte ──────────────────────────────────────────────────────── */

.abschnitt { position: relative; padding: 4.5rem 0; }
.abschnitt--flaeche { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
@media (min-width: 56em) { .abschnitt { padding: 6.5rem 0; } }

.abschnitt-kopf { max-width: 46rem; margin-bottom: 2.75rem; }
.abschnitt-lead { font-size: 1.15rem; color: var(--text-2); max-width: 40em; }

/* Branchen-Kacheln: Bild oben, die ganze Karte klickbar (Link dehnt sich
   per ::after), Überschrift ist der eine Linktext. */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .kacheln { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.kachel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  transition: border-color .25s, box-shadow .3s, transform .3s;
}
/* Hintergrund = Kachelfläche und Bild als Block: Beim Zoom (Hover) blitzt sonst am
   unteren Rand ein Streifen durch – Subpixel-Rundung bzw. Zeilenabstand unter dem
   Inline-Bild (Lars, 07.10.2026). Verlauf ragt 1px über, eigene Ebene fürs Bild. */
.kachel-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--flaeche); }
.kachel-bild picture { display: block; height: 100%; }
.kachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;
  backface-visibility: hidden; transform: translateZ(0); }
.kachel-bild::after {
  content: ""; position: absolute; inset: -1px;
  background: linear-gradient(to bottom, transparent 55%, var(--flaeche));
}
.kachel-text { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.4rem 1.4rem; }
.kachel h3, .kachel h2 { margin-bottom: .45rem; font-size: 1.12rem; letter-spacing: -.01em; }
.kachel h3 a, .kachel h2 a { color: #fff; text-decoration: none; }
.kachel h3 a::after, .kachel h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kachel p { color: var(--text-2); font-size: .97rem; }
.kachel-pfeil { margin-top: auto; padding-top: 1rem; color: var(--mint); transition: transform .25s; }
.kachel:hover {
  border-color: rgba(102, 204, 153, .55);
  box-shadow: 0 0 0 1px rgba(102, 204, 153, .25), 0 18px 50px rgba(41, 232, 225, .10);
  transform: translateY(-3px);
}
.kachel:hover .kachel-bild img { transform: translateZ(0) scale(1.04); }
.kachel:hover .kachel-pfeil { transform: translateX(4px); }
.kachel:focus-within { outline: 2px solid var(--cyan); outline-offset: 3px; }
.kachel h3 a:focus-visible, .kachel h2 a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .kachel, .kachel-bild img, .kachel-pfeil { transition: none; }
  .kachel:hover { transform: none; }
  .kachel:hover .kachel-bild img { transform: none; }
}

/* Warum: fünf Gründe, nummeriert, Haarlinie mit Leuchtkante */
.gruende {
  list-style: none; margin: 0; padding: 0; counter-reset: grund;
  display: grid; gap: 2.25rem 3rem;
}
@media (min-width: 48em) { .gruende { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) {
  .warum { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  .warum-kopf { position: sticky; top: 7rem; margin-bottom: 0; }
}
.gruende li { counter-increment: grund; position: relative; padding-top: 1.35rem; border-top: 1px solid var(--linie-hell); }
.gruende li::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 3rem; height: 1px;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.gruende li::before {
  content: counter(grund, decimal-leading-zero);
  display: block; margin-bottom: .6rem;
  font-family: var(--kopf); font-size: .82rem; font-weight: 600; letter-spacing: .1em; color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.gruende p { color: var(--text-2); }

/* Vertrauen */
.vertrauen { display: grid; gap: 2rem; }
@media (min-width: 56em) { .vertrauen { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.vertrauen-liste { list-style: none; margin: 0; padding: 0; }
.vertrauen-liste li {
  position: relative; padding: 1.15rem 0 1.15rem 2rem;
  border-bottom: 1px solid var(--linie); color: var(--text-2);
}
.vertrauen-liste li:first-child { border-top: 1px solid var(--linie); }
.vertrauen-liste li::before {
  content: ""; position: absolute; left: .15rem; top: 1.7rem;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px 2px rgba(41, 232, 225, .5);
}
.vorschau-hinweis { grid-column: 1 / -1; color: var(--text-2); font-size: .95rem; }

.referenz-platzhalter { padding: 2rem; border: 1px dashed var(--linie-hell); border-radius: var(--rund); color: var(--text-2); }

/* ── Schluss-CTA ─────────────────────────────────────────────────────── */

.schluss { position: relative; overflow: hidden; isolation: isolate; text-align: center; border-top: 1px solid var(--linie); }
.schluss::before {
  content: ""; position: absolute; left: 50%; bottom: -22rem; z-index: -1;
  width: 60rem; height: 34rem; margin-left: -30rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(102, 204, 153, .28), rgba(41, 232, 225, .08) 60%, transparent);
  animation: aufladen 12s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .schluss::before { animation: none; } }
.schluss-innen { max-width: 48rem; margin: 0 auto; padding: 5rem var(--rand); }
@media (min-width: 56em) { .schluss-innen { padding: 7rem var(--rand); } }
.schluss p { color: var(--text-2); font-size: 1.12rem; }
.schluss .knoepfe { justify-content: center; }
.schluss-kontakt { margin-top: 1.75rem; font-size: 1rem !important; }
.trenner { margin: 0 .4rem; opacity: .6; }

/* ── Unterseiten-Kopf ────────────────────────────────────────────────── */

.seite-kopf { position: relative; overflow: hidden; isolation: isolate; padding: 3rem 0 3.5rem; border-bottom: 1px solid var(--linie); }
.seite-kopf .innen { position: relative; z-index: 1; }
@media (min-width: 56em) { .seite-kopf { padding: 4.5rem 0 5rem; } }
.seite-kopf h1 { max-width: 18em; }
.seite-kopf .abschnitt-lead { color: var(--text-2); }

.brotkrumen ol {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .86rem; color: var(--text-3);
}
.brotkrumen li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--mint); }

/* Anwendungsseite: Kopf mit Bild */
.anw-kopf-raster { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56em) { .anw-kopf-raster { grid-template-columns: 6fr 5fr; gap: 3.5rem; } }
.bild-schein { position: relative; }
.bild-schein::before {
  content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(41, 232, 225, .35), transparent);
  filter: blur(30px);
  animation: aufladen 12s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .bild-schein::before { animation: none; } }
.bild-schein img { border-radius: var(--rund); border: 1px solid var(--linie); }

/* Technische Eckpunkte */
.eckpunkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .eckpunkte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .eckpunkte--drei { grid-template-columns: repeat(3, 1fr); } }
.eckpunkte li {
  padding: 1.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  position: relative;
}
.eckpunkte li::before {
  content: ""; position: absolute; left: 1.5rem; top: -1px; width: 2.5rem; height: 2px;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan); border-radius: 2px;
}
.eckpunkte h3 { margin-bottom: .5rem; }
.eckpunkte p { color: var(--text-2); font-size: .98rem; }

/* Einsatzfälle als Liste mit Leuchtpunkten */
.faelle { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 48em) { .faelle { grid-template-columns: repeat(2, 1fr); gap: .75rem 2rem; } }
.faelle li { position: relative; padding: .9rem 0 .9rem 1.9rem; border-bottom: 1px solid var(--linie); }
.faelle li::before {
  content: ""; position: absolute; left: .15rem; top: 1.45rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 10px 2px rgba(102, 204, 153, .5);
}

/* Zwei Spalten: Text links, Kasten rechts */
.zweispaltig { display: grid; gap: 2.5rem; }
@media (min-width: 56em) { .zweispaltig { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }

.kasten {
  padding: 2rem; border-radius: var(--rund);
  background: linear-gradient(160deg, var(--flaeche-2), var(--flaeche));
  border: 1px solid var(--linie-hell);
  box-shadow: inset 0 1px 0 rgba(102, 204, 153, .15);
}
.kasten p { color: var(--text-2); }

/* Datentabelle */
.daten { width: 100%; border-collapse: collapse; font-size: .97rem; }
.daten caption { text-align: left; margin-bottom: 1rem; color: var(--text-2); font-size: .9rem; }
.daten th, .daten td { padding: .85rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; text-align: left; }
.daten th { width: 38%; padding-right: 1.5rem; font-weight: 600; color: var(--text-3); font-size: .9rem; }
.daten td { color: var(--text); }
.daten tr:first-child th, .daten tr:first-child td { border-top: 1px solid var(--linie); }

.hinweis-klein { font-size: .9rem; color: var(--text-3); margin-top: 1rem; }

.querverweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40em) { .querverweise { grid-template-columns: repeat(2, 1fr); } }
.querverweise a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--flaeche); color: var(--text); font-weight: 600; text-decoration: none;
  transition: border-color .2s, box-shadow .25s;
}
.querverweise a:hover { color: #fff; border-color: rgba(102, 204, 153, .55); box-shadow: 0 0 30px var(--mint-weich); }
.querverweise small { display: block; color: var(--text-3); font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.querverweise .symbol { color: var(--mint); }

.schnelllinks { list-style: none; margin: 0; padding: 0; }
.schnelllinks a {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 0; border-bottom: 1px solid var(--linie);
  color: var(--text); font-weight: 600; text-decoration: none;
}
.schnelllinks a:hover { color: var(--mint); }
.schnelllinks .symbol { color: var(--mint); }

/* ── Fußzeile ────────────────────────────────────────────────────────── */

.fuss {
  position: relative; background: var(--flaeche); color: var(--text-2);
  border-top: 1px solid var(--linie); font-size: .95rem;
}
.fuss::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px;
  background: linear-gradient(to right, transparent, var(--mint), var(--cyan), transparent);
  box-shadow: 0 0 18px rgba(41, 232, 225, .6);
}
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 3.5rem var(--rand) 2.5rem;
  display: grid; gap: 2.25rem;
}
@media (min-width: 40em) { .fuss-innen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .fuss-innen { grid-template-columns: 2fr 1.3fr 1fr 1fr; gap: 3rem; } }
.fuss-marke p:not(.wortmarke) { margin-top: 1rem; max-width: 26em; }
.fuss-titel {
  margin-bottom: 1rem; font-family: var(--lauf); font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text);
}
.fuss address { font-style: normal; line-height: 1.8; }
.fuss ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.fuss a { color: var(--text-2); text-decoration: none; }
.fuss a:hover { color: var(--mint); }
.fuss-zeile {
  max-width: var(--breite); margin: 0 auto; padding: 1.25rem var(--rand) 2rem;
  border-top: 1px solid var(--linie); font-size: .85rem; color: var(--text-3);
}

/* ── Bauzaun-Türseite ────────────────────────────────────────────────── */

.tuer-seite { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; }
.tuer-seite::before {
  content: ""; position: absolute; left: 50%; top: -20rem; width: 50rem; height: 40rem; margin-left: -25rem;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(102, 204, 153, .18), transparent);
}
.tuer { position: relative; width: min(26rem, 100% - 2rem); padding: 2rem 0; }
.tuer h1 { margin-top: 2.5rem; font-size: 1.6rem; }
.tuer p { color: var(--text-2); }
.tuer form { display: grid; gap: .6rem; margin-top: 2rem; }
.tuer label { font-size: .9rem; font-weight: 700; }
.tuer input {
  min-height: 3rem; padding: .6rem 1rem; font: inherit;
  border: 1px solid var(--linie-hell); border-radius: var(--rund-klein);
  background: var(--flaeche); color: #fff;
}
.tuer .btn { margin-top: .6rem; }
.tuer-fehler { color: #ffb4a8 !important; }

/* ── Vorschau-Markierungen (nur bei config vorschau = true) ──────────── */

mark.offen {
  background: #ffe86b; color: #231d00;
  padding: 0 .15em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.offen-nr {
  display: inline-block; margin-left: .25em; padding: 0 .38em;
  font-family: var(--lauf); font-size: .66em; font-weight: 800; line-height: 1.5; vertical-align: super;
  background: #231d00; color: #ffe86b !important; border-radius: 1em; text-decoration: none; letter-spacing: 0;
}
h1 .offen-nr, h2 .offen-nr { font-size: .4em; }

.offen-liste {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: min(28rem, calc(100% - 2rem)); max-height: 70vh; overflow: auto;
  background: #fffbe0; color: #231d00; border: 1px solid #e6d77a; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: .9rem;
}
.offen-liste summary { padding: .75rem 1rem; font-weight: 700; cursor: pointer; }
.offen-liste details > :not(summary) { margin: 0 1rem .75rem; }
.offen-liste ol { padding-left: 1.25rem; }
.offen-liste li { margin-bottom: .5rem; }
.offen-liste a { color: #231d00; }
.offen-zahl {
  display: inline-block; min-width: 1.6em; margin-left: .3rem; padding: 0 .4em;
  background: #231d00; color: #ffe86b; border-radius: 1em; text-align: center;
}
:target.offen { outline: 3px solid #ffe86b; outline-offset: 3px; }

/* Kacheln ohne Link (Rohstoffe auf Anwendungsseiten) */
.kachel--statisch:hover { transform: none; border-color: var(--linie); box-shadow: none; }
.kachel--statisch:hover .kachel-bild img { transform: translateZ(0); }
.h3-gross { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }

.vertrauen-bild { margin-top: 2rem; }

/* Nur ein passender Rohstoff: Kachel quer statt einsam im Raster */
@media (min-width: 40em) {
  .kacheln--einzeln { grid-template-columns: 1fr; max-width: 52rem; }
  .kacheln--einzeln .kachel { flex-direction: row; }
  .kacheln--einzeln .kachel-bild { flex: 0 0 45%; aspect-ratio: 4 / 3; }
  .kacheln--einzeln .kachel-bild::after { background: linear-gradient(to right, transparent 60%, var(--flaeche)); }
  .kacheln--einzeln .kachel-text { justify-content: center; padding: 1.75rem 2rem; }
  .kacheln--einzeln h3 { font-size: 1.35rem; }
}

/* ── Eigener Akzent: technisches Raster ──────────────────────────────────
   Unterscheidet LUMENTIFY von premium-leuchtstoffe.de: ein feines
   Messraster wie auf Millimeterpapier, nach außen ausgeblendet. Statisch,
   kostet nichts beim Rendern. */
.hero::before, .seite-kopf::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(102, 204, 153, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 204, 153, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
}

/* ── Produktseite ────────────────────────────────────────────────────── */

.sprungleiste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.sprungleiste a {
  padding: .45rem 1rem; border: 1px solid var(--linie-hell); border-radius: 999px;
  color: var(--text); font-weight: 600; font-size: .92rem; text-decoration: none;
  transition: border-color .2s, color .2s, box-shadow .25s;
}
.sprungleiste a:hover { color: #fff; border-color: var(--cyan); box-shadow: 0 0 18px var(--cyan-weich); }

.rohstoff { scroll-margin-top: 4.5rem; }
.rohstoff-raster { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56em) {
  .rohstoff-raster { grid-template-columns: 5fr 6fr; gap: 4rem; }
  .rohstoff-raster--gespiegelt > :first-child { order: 2; }
}

.steckbrief { margin: 2rem 0 0; }
.steckbrief > div {
  display: grid; gap: .15rem; padding: .85rem 0; border-bottom: 1px solid var(--linie);
}
.steckbrief > div:first-child { border-top: 1px solid var(--linie); }
@media (min-width: 40em) { .steckbrief > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }
.steckbrief dt { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-top: .2rem; }
.steckbrief dd { margin: 0; color: var(--text); }

/* Mengenleiste: vier Meilensteine auf einer Linie, die nach rechts heller
   wird. Nummer im Kreis, darunter Stufe und Beschreibung. */
.mengenleiste {
  list-style: none; margin: 0; padding: 0; counter-reset: menge;
  position: relative; display: grid; gap: 1.75rem;
}
.mengenleiste::before {
  content: ""; position: absolute; left: 1.25rem; top: 1.25rem; bottom: 1.25rem; width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, rgba(102, 204, 153, .25), var(--mint), var(--cyan));
  box-shadow: 0 0 12px rgba(41, 232, 225, .35);
}
.mengenleiste li { counter-increment: menge; position: relative; padding-left: 3.75rem; color: var(--text-2); font-size: .95rem; }
.mengenleiste li::before {
  content: counter(menge, decimal-leading-zero);
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--grund); border: 1px solid var(--mint); color: var(--mint);
  font-family: var(--kopf); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px var(--flaeche);
}
.mengenleiste li:nth-child(1)::before { opacity: .65; }
.mengenleiste li:nth-child(2)::before { opacity: .8; }
.mengenleiste li:nth-child(4)::before {
  background: var(--cyan); border-color: var(--cyan); color: var(--grund);
  box-shadow: 0 0 0 5px var(--flaeche), 0 0 22px 4px rgba(41, 232, 225, .55);
}
.mengenleiste span { display: block; margin: .3rem 0 .2rem; font-family: var(--kopf); font-size: 1.15rem; font-weight: 600; color: #fff; }
@media (min-width: 48em) {
  .mengenleiste { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .mengenleiste::before { left: 12.5%; right: 12.5%; top: 1.25rem; bottom: auto; width: auto; height: 2px; margin: -1px 0 0;
    background: linear-gradient(to right, rgba(102, 204, 153, .25), var(--mint), var(--cyan)); }
  .mengenleiste li { padding: 3.75rem 1rem 0; text-align: center; }
  .mengenleiste li::before { left: 50%; margin-left: -1.25rem; }
}

.kasten--abstand { margin-top: 2rem; }
.kasten h3 { margin-bottom: .5rem; }
.kasten .btn { margin-top: 1.25rem; }
.daten-titel { margin-bottom: 1rem; }

/* ── Standortkarte in der Fußzeile ───────────────────────────────────────
   Statisches Bild, Standort in der Bildmitte. Der Punkt ist reines CSS:
   ein Kern und drei Ringe, die sich ausbreiten (wie premium-leuchtstoffe.de,
   Kontaktseite). Nur transform und opacity. */
.karte { position: relative; border-bottom: 1px solid var(--linie); }
.karte-link { position: relative; display: block; overflow: hidden; color: var(--text); text-decoration: none; }
.karte-link img { width: 100%; height: 15rem; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 56em) { .karte-link img { height: 20rem; } }
.karte-link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--grund) 0%, transparent 25%, transparent 70%, var(--flaeche) 100%);
}
/* Standortpunkt: leuchtender Kern, der atmet; ein Radar-Strahl, der
   kreist; zwei Wellen, die sich ausbreiten; eine Umlaufbahn mit kleinem
   Satelliten. Reines CSS, nur transform und opacity. */
.karte-punkt { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; }
.karte-punkt::before {
  content: ""; position: absolute; left: -.55rem; top: -.55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0fffd 0%, var(--cyan) 45%, var(--mint) 100%);
  box-shadow: 0 0 0 3px rgba(7, 15, 21, .9), 0 0 18px 4px rgba(41, 232, 225, .85), 0 0 60px 16px rgba(41, 232, 225, .35);
  animation: punkt-atmen 2.6s ease-in-out infinite;
}
.karte-punkt::after {
  content: ""; position: absolute; left: -5rem; top: -5rem; width: 10rem; height: 10rem; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(41, 232, 225, .45), rgba(41, 232, 225, .12) 18%, transparent 30%);
  -webkit-mask-image: radial-gradient(circle, transparent 12%, #000 14%, #000 66%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 12%, #000 14%, #000 66%, transparent 70%);
  animation: punkt-radar 4s linear infinite;
}
.karte-punkt i { position: absolute; border-radius: 50%; pointer-events: none; }
.karte-punkt i:nth-child(1), .karte-punkt i:nth-child(2) {
  left: -1.5rem; top: -1.5rem; width: 3rem; height: 3rem;
  border: 1.5px solid var(--cyan); opacity: 0;
  animation: punkt-welle 3.2s cubic-bezier(.15, .6, .3, 1) infinite;
}
.karte-punkt i:nth-child(2) { border-color: var(--mint); animation-delay: 1.6s; }
.karte-punkt i:nth-child(3) {
  left: -2.6rem; top: -2.6rem; width: 5.2rem; height: 5.2rem;
  border: 1px dashed rgba(102, 204, 153, .45);
  animation: punkt-radar 9s linear infinite reverse;
}
.karte-punkt i:nth-child(3)::after {
  content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 10px 2px rgba(102, 204, 153, .9);
}
@keyframes punkt-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes punkt-radar { to { transform: rotate(360deg); } }
@keyframes punkt-welle { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .karte-punkt::before, .karte-punkt::after, .karte-punkt i { animation: none !important; }
  .karte-punkt i:nth-child(1) { opacity: .4; transform: scale(1.5); }
}

.karte-schild {
  position: absolute; z-index: 2; left: 50%; top: calc(50% + 3.25rem); transform: translateX(-50%);
  display: grid; gap: .1rem; min-width: 15rem; padding: .85rem 1.1rem; text-align: center;
  background: rgba(7, 15, 21, .88); border: 1px solid var(--linie-hell); border-radius: var(--rund-klein);
  font-size: .9rem; color: var(--text-2); box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.karte-schild strong { color: #fff; font-family: var(--kopf); font-weight: 600; }
.karte-route { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .35rem; color: var(--mint); font-weight: 700; }
.karte-route .symbol { width: 1rem; height: 1rem; transition: transform .2s; }
.karte-link:hover .karte-route { color: var(--cyan); }
.karte-link:hover .karte-route .symbol { transform: translateX(3px); }
.karte-link:focus-visible { outline-offset: -4px; }
.karte-quelle {
  position: absolute; right: .5rem; bottom: .35rem; z-index: 2; margin: 0;
  font-size: .7rem; color: var(--text-3);
}
.karte-quelle a { color: var(--text-3); }

/* Die Leuchtkante der Fußzeile sitzt jetzt über der Karte */
.fuss::before { z-index: 3; }

/* ── Anfrageformular ─────────────────────────────────────────────────── */

.anfrage-raster { display: grid; gap: 3rem; }
@media (min-width: 64em) { .anfrage-raster { grid-template-columns: 7fr 4fr; gap: 4rem; align-items: start; } }
.anfrage-seite { display: grid; gap: 0; }
@media (min-width: 64em) { .anfrage-seite { position: sticky; top: 6rem; } }

.formular fieldset { margin: 0 0 2rem; padding: 0; border: 0; display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .formular > fieldset { grid-template-columns: 1fr 1fr; } }
.formular legend {
  margin-bottom: 1.1rem; padding: 0; font-family: var(--kopf); font-size: 1.15rem; font-weight: 600; color: #fff;
}
.feld { display: grid; gap: .4rem; min-width: 0; }
.feld--breit { grid-column: 1 / -1; }
.feld label, .auswahl > legend { font-size: .9rem; font-weight: 700; color: var(--text); }
.auswahl > legend { font-family: var(--lauf); margin-bottom: .6rem; }
.pflicht { color: var(--mint); }
.optional { font-weight: 500; color: var(--text-3); font-size: .82rem; }

.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"],
.formular select, .formular textarea {
  width: 100%; min-height: 3rem; padding: .7rem .95rem;
  font: inherit; font-size: 1rem; color: #fff;
  background: var(--flaeche); border: 1px solid var(--linie-hell); border-radius: var(--rund-klein);
  transition: border-color .2s, box-shadow .2s;
}
.formular textarea { resize: vertical; min-height: 10rem; line-height: 1.55; }
.formular select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--mint) 50%), linear-gradient(135deg, var(--mint) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.3rem, calc(100% - .8rem) 1.3rem; background-size: .35rem .35rem; background-repeat: no-repeat; }
.formular ::placeholder { color: var(--text-3); }
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-weich);
}
.formular [aria-invalid="true"] { border-color: #ff8f80; }
.feld-fehler, .formular-fehler { margin: 0; color: #ffb4a8; font-size: .9rem; font-weight: 600; }
.formular-fehler { margin-bottom: 1.5rem; padding: .85rem 1rem; border: 1px solid rgba(255, 143, 128, .45); border-radius: var(--rund-klein); background: rgba(255, 143, 128, .08); }
.formular-hinweis { font-size: .88rem; color: var(--text-3); }
.formular .btn { margin-top: .5rem; }

.auswahl { display: flex !important; flex-wrap: wrap; gap: .5rem; }
.auswahl > legend { width: 100%; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: .5rem 1rem; border: 1px solid var(--linie-hell); border-radius: 999px;
  font-weight: 600; font-size: .92rem; color: var(--text-2); transition: all .2s;
}
.chip input:checked + span { color: var(--grund); background: var(--mint); border-color: var(--mint); box-shadow: 0 0 18px var(--mint-weich); }
.chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Lockfeld: für Menschen unsichtbar, für Skripte ein normales Feld */
.lockfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.erfolg h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.mini-schritte { margin: 0; padding-left: 1.2rem; color: var(--text-2); display: grid; gap: .6rem; }
.mini-schritte li::marker { color: var(--mint); font-weight: 700; }
.anfrage-schluss { margin-top: 1.5rem; font-size: .95rem; color: var(--text-2); font-style: italic; }

/* ── Downloads ───────────────────────────────────────────────────────── */
.sdb-raster { display: grid; gap: 2rem 3rem; }
@media (min-width: 56em) { .sdb-raster { grid-template-columns: 1fr 1fr; } }
.sdb-block h3 { margin-bottom: .75rem; color: var(--mint); font-size: .95rem; letter-spacing: .02em; }
.sdb-block .steckbrief { margin-top: 0; }
@media (min-width: 40em) { .sdb-block .steckbrief > div { grid-template-columns: 10rem 1fr; } }
.dokument { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 48em) { .dokument { grid-template-columns: 1fr auto; } }
.dokument-knoepfe { display: grid; gap: .5rem; justify-items: start; }

.steckbrief dt { hyphens: auto; overflow-wrap: anywhere; }

/* ── Ablauf: Leitbahn mit Lichtimpuls ────────────────────────────────────
   Ein Lichtimpuls läuft über die Bahn; jeder Knoten „lädt auf", wenn das
   Licht ihn erreicht, und klingt danach nach – wie Nachleuchtpigment.
   Zyklus 6 s, das Licht braucht 4,5 s, danach kurze Pause. Nur transform
   und opacity. Mobil senkrecht, ab 56em waagerecht. */
.prozess { position: relative; }
.prozess-schritte { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.prozess-schritte li { position: relative; padding-left: 5.25rem; min-height: 4rem; }
.prozess-knoten {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--flaeche-2), var(--grund));
  border: 1px solid var(--linie-hell); color: var(--mint);
  box-shadow: 0 0 0 6px var(--flaeche);
}
.prozess-knoten .symbol { width: 1.7rem; height: 1.7rem; position: relative; z-index: 1; }
.prozess-knoten::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 22px 4px rgba(41, 232, 225, .55), inset 0 0 18px rgba(41, 232, 225, .35);
  opacity: 0; animation: knoten-laden 6s ease-out infinite;
}
.prozess-schritte li:nth-child(1) .prozess-knoten::after { animation-delay: .2s; }
.prozess-schritte li:nth-child(2) .prozess-knoten::after { animation-delay: 1.65s; }
.prozess-schritte li:nth-child(3) .prozess-knoten::after { animation-delay: 3.1s; }
.prozess-schritte li:nth-child(4) .prozess-knoten::after { animation-delay: 4.55s; }
@keyframes knoten-laden {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  45%  { opacity: .3; }
  100% { opacity: 0; }
}
.prozess-nr {
  display: block; margin: .15rem 0 .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.prozess-schritte h3 { margin-bottom: .4rem; }
.prozess-schritte p { color: var(--text-2); }

/* Bahn senkrecht (mobil) */
.prozess-bahn {
  position: absolute; z-index: 0; left: 2rem; top: 2rem; bottom: 2rem; width: 2px; margin-left: -1px;
  overflow: hidden; border-radius: 2px;
  background: linear-gradient(var(--linie-hell), var(--linie-hell));
}
.prozess-licht {
  position: absolute; left: 0; top: 0; width: 100%; height: 25%;
  background: linear-gradient(to bottom, transparent, var(--cyan), transparent);
  animation: licht-senkrecht 6s linear infinite;
}
@keyframes licht-senkrecht { 0% { transform: translateY(-100%); } 75%, 100% { transform: translateY(400%); } }

/* Bahn waagerecht (Desktop): Knoten zentriert über den Spalten */
@media (min-width: 56em) {
  .prozess-schritte { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .prozess-schritte li { padding: 5.75rem 1.25rem 0; text-align: center; }
  .prozess-knoten { left: 50%; margin-left: -2rem; }
  .prozess-bahn { left: 12.5%; right: 12.5%; top: 2rem; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .prozess-licht { width: 25%; height: 100%; background: linear-gradient(to right, transparent, var(--cyan), transparent);
    box-shadow: 0 0 12px rgba(41, 232, 225, .8); animation-name: licht-waagerecht; }
  @keyframes licht-waagerecht { 0% { transform: translateX(-100%); } 75%, 100% { transform: translateX(400%); } }
}

@media (prefers-reduced-motion: reduce) {
  .prozess-licht { display: none; }
  .prozess-knoten::after { animation: none; opacity: .5; }
}

/* ── Hell-Dunkel-Vergleich ───────────────────────────────────────────────
   Die helle Aufnahme liegt oben und wird per clip-path bis zur Grenze
   (--pos) gezeigt. Den Wert setzt das Skript über die CSSOM – mit der CSP
   (style-src 'self') vereinbar, weil kein style-Attribut im Markup steht. */
.vergleich { margin: 0; }
.vergleich-buehne {
  --pos: 50%;
  position: relative; overflow: hidden; aspect-ratio: 3 / 2;
  border-radius: var(--rund); border: 1px solid var(--linie); background: #000;
  user-select: none; touch-action: pan-y;
}
.vergleich-paar, .vergleich-dunkel, .vergleich-hell { position: absolute; inset: 0; }
.vergleich-paar[hidden] { display: none; }
.vergleich-buehne img { width: 100%; height: 100%; object-fit: cover; }
.vergleich-hell { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich-griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px;
  background: linear-gradient(var(--cyan), var(--mint)); box-shadow: 0 0 14px rgba(41, 232, 225, .8);
  pointer-events: none;
}
.vergleich-griff::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%; background: rgba(7, 15, 21, .85); border: 2px solid var(--cyan);
  box-shadow: 0 0 20px rgba(41, 232, 225, .6);
  /* Doppelpfeil ‹ › (oben/unten je Seite gegenläufige Striche) */
  background-image:
    linear-gradient(-45deg, transparent 46%, var(--cyan) 46%, var(--cyan) 54%, transparent 54%),
    linear-gradient(45deg, transparent 46%, var(--cyan) 46%, var(--cyan) 54%, transparent 54%),
    linear-gradient(45deg, transparent 46%, var(--cyan) 46%, var(--cyan) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--cyan) 46%, var(--cyan) 54%, transparent 54%);
  background-size: .5rem .5rem; background-repeat: no-repeat;
  background-position: calc(50% - .45rem) calc(50% - .2rem), calc(50% - .45rem) calc(50% + .2rem),
                       calc(50% + .45rem) calc(50% - .2rem), calc(50% + .45rem) calc(50% + .2rem);
}
.vergleich-regler {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.vergleich-buehne:focus-within { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vergleich-etikett {
  position: absolute; top: .9rem; z-index: 2; padding: .3rem .7rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; pointer-events: none;
}
.vergleich-etikett--hell { left: .9rem; background: rgba(255, 255, 255, .9); color: var(--grund); }
.vergleich-etikett--dunkel { right: .9rem; background: rgba(7, 15, 21, .8); color: var(--cyan); border: 1px solid var(--linie-hell); }
.vergleich-wahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.vergleich-wahl button {
  padding: .45rem 1rem; border: 1px solid var(--linie-hell); border-radius: 999px; background: transparent;
  color: var(--text-2); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.vergleich-wahl button:hover { color: #fff; border-color: var(--cyan); }
.vergleich-wahl button[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: var(--grund); }
.vergleich figcaption { margin-top: .75rem; font-size: .88rem; color: var(--text-3); }

/* Nummernplakette an den Prozessknoten (Lars: Schritte mit Nummern kennzeichnen) */
.prozess-schritte { counter-reset: prozess; }
.prozess-schritte li { counter-increment: prozess; }
.prozess-knoten::before {
  content: counter(prozess);
  position: absolute; right: -.35rem; top: -.35rem; z-index: 2;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--mint); color: var(--grund);
  font-family: var(--kopf); font-size: .75rem; font-weight: 700;
  box-shadow: 0 0 0 3px var(--flaeche);
}

/* ── UV-Lampe und Nachleuchten im Kopfbereich ────────────────────────────
   Idee Lars (07.10.2026). Strontiumaluminat fluoresziert unter UV und
   leuchtet danach nach – genau das spielt der Kopf einmal beim Laden vor.
   Die Leuchtschrift ist eine Kopie der Überschrift (::after, Text aus
   data-nachleuchten), animiert wird nur ihre Deckkraft. */
.hero h1, .seite-kopf h1 { position: relative; transition: color .4s; }
/* Kopie als echtes Element (nicht ::after mit attr()): übernimmt das Markup der
   Überschrift samt .zusammen und bricht deshalb exakt gleich um (Fehler EN, 07.10.2026). */
h1 .h1-glut {
  display: block; position: absolute; inset: 0; pointer-events: none;
  color: #dcfff7;
  text-shadow: 0 0 4px rgba(220, 255, 247, .9), 0 0 14px rgba(41, 232, 225, 1), 0 0 34px rgba(102, 204, 153, .9),
               0 0 70px rgba(41, 232, 225, .6), 0 0 120px rgba(102, 204, 153, .35);
  opacity: 0;
}
.uv-an h1 { color: #f1eaff; text-shadow: 0 0 18px rgba(170, 120, 255, .55); transition: color .6s, text-shadow .6s; }
.hero h1, .seite-kopf h1 { transition: color 1.6s ease-out, text-shadow 1.6s ease-out; }
/* Aufladen: unter UV wächst das Leuchten über ~3 s sichtbar an */
.uv-an h1 .h1-glut { opacity: 1; transition: opacity 2.8s cubic-bezier(.35, 0, .6, 1); }
/* Nachleuchten: sofort voll, dann langsam abklingend – und wie echtes
   Pigment bleibt ein schwaches Restglimmen stehen. */
.uv-glueht h1 .h1-glut { animation: nachgluehen 12s cubic-bezier(.15, .6, .25, 1) forwards; }
/* Startet beim erreichten Ladestand (--ladung, vom Skript gesetzt) – kein Sprung */
@keyframes nachgluehen { 0% { opacity: var(--ladung, 1); } 12% { opacity: calc(var(--ladung, 1) * .92); } 55% { opacity: calc(var(--ladung, 1) * .4); } 100% { opacity: .14; } }

/* Grüner Schein im Raum hinter der Überschrift, klingt mit ab */
.uv-licht::after {
  content: ""; position: absolute; left: calc(var(--uv-x, 10%) - 8%); top: 5%; width: calc(var(--uv-b, 60%) + 16%); height: 75%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(102, 204, 153, .30), rgba(41, 232, 225, .12) 55%, transparent);
  opacity: 0;
}
.uv-glueht .uv-licht { opacity: 1; transition: opacity .6s; }
.uv-glueht .uv-licht::before { opacity: 0; transition: opacity .3s; }
.uv-glueht .uv-licht { background: none; }
.uv-glueht .uv-licht::after { animation: raumschein 12s cubic-bezier(.15, .6, .25, 1) forwards; }
@keyframes raumschein { 0% { opacity: var(--ladung, 1); } 60% { opacity: calc(var(--ladung, 1) * .35); } 100% { opacity: .1; } }
/* Der Raumschein lädt unter UV mit auf */
.uv-an .uv-licht::after { opacity: 1; transition: opacity 2.8s cubic-bezier(.35, 0, .6, 1); }

/* Schalterpunkt klingt im selben Takt ab */
.uv-glueht .uv-schalter-punkt { animation: punkt-abklingen 12s cubic-bezier(.15, .6, .25, 1) forwards; }
@keyframes punkt-abklingen {
  0%   { background: var(--cyan); box-shadow: 0 0 10px 3px rgba(41, 232, 225, .9); }
  100% { background: var(--linie-hell); box-shadow: none; }
}

.uv-licht {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 100%; pointer-events: none;
  background:
    radial-gradient(55% 85% at var(--uv-mitte, 30%) 0%, rgba(140, 80, 255, .55), transparent 72%),
    radial-gradient(28% 45% at var(--uv-mitte, 30%) 0%, rgba(200, 160, 255, .45), transparent 70%),
    linear-gradient(rgba(90, 40, 200, .12), rgba(90, 40, 200, .12));
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .5s ease-out;
}
.uv-licht::before { /* die Lampe selbst: schmaler Leuchtbalken am oberen Rand */
  /* Lage vom Skript gemessen: bündig links über der Überschrift (Lars) */
  content: ""; position: absolute; left: var(--uv-x, 16%); width: var(--uv-b, 28%); top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: #d6c2ff; box-shadow: 0 0 14px 4px rgba(190, 150, 255, .95), 0 0 50px 14px rgba(140, 80, 255, .7);
}
.uv-an .uv-licht { opacity: 1; transition: opacity .25s ease-in; }

.uv-schalter {
  position: absolute; z-index: 3; right: var(--rand); top: 1.25rem; /* oben rechts, bündig mit dem Inhalt (Lars) */
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border: 1px solid var(--linie-hell); border-radius: 999px;
  background: rgba(7, 15, 21, .7); color: var(--text-2);
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .08em; cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .3s;
}
.uv-schalter:hover { color: #fff; border-color: #a77bff; }
.uv-schalter[aria-pressed="true"] { color: #fff; border-color: #a77bff; box-shadow: 0 0 18px rgba(160, 110, 255, .55); }
.uv-schalter-punkt { width: .55rem; height: .55rem; border-radius: 50%; background: var(--linie-hell); transition: background .2s, box-shadow .2s; }
.uv-schalter[aria-pressed="true"] .uv-schalter-punkt { background: #b48cff; box-shadow: 0 0 8px 2px rgba(180, 140, 255, .9); }
@media (min-width: 72em) { .uv-schalter { right: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); } }
@media (prefers-reduced-motion: reduce) {
  .uv-glueht h1 .h1-glut, .uv-glueht .uv-licht::after, .uv-glueht .uv-schalter-punkt { animation-duration: .01s; }
}

/* Mobil: Röhre breiter und dicker, Lichtkegel größer (Lars) */
@media (max-width: 55.99em) {
  .uv-licht::before { height: 6px; border-radius: 0 0 6px 6px;
    box-shadow: 0 0 18px 6px rgba(190, 150, 255, .95), 0 0 70px 22px rgba(140, 80, 255, .75); }
  .uv-licht {
    background:
      radial-gradient(95% 75% at var(--uv-mitte, 40%) 0%, rgba(140, 80, 255, .6), transparent 75%),
      radial-gradient(60% 40% at var(--uv-mitte, 40%) 0%, rgba(200, 160, 255, .5), transparent 70%),
      linear-gradient(rgba(90, 40, 200, .14), rgba(90, 40, 200, .14));
  }
  .uv-licht::after { left: -10%; width: 120%; height: 60%; top: 12%; }
}

/* ── Ansprechpartner (Über uns) ──────────────────────────────────────── */
.personen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 48em) { .personen { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.person {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: center;
  padding: 1.25rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
}
@media (min-width: 64em) { .person { grid-template-columns: 12rem 1fr; padding: 1.5rem; } }
.person-bild { position: relative; border-radius: var(--rund-klein); overflow: hidden; aspect-ratio: 4 / 5; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; }
.person-bild::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(102, 204, 153, .25); border-radius: inherit; }
.person h3 { margin-bottom: .2rem; font-size: 1.25rem; }
.person-rolle { color: var(--mint); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.person-kontakt { color: var(--text-2); font-size: .95rem; margin-top: .75rem; }
@media (max-width: 30em) { .person { grid-template-columns: 1fr; } .person-bild { max-width: 14rem; } }
.person-linkedin { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-weight: 600; text-decoration: none; }
.person-linkedin .symbol { width: 1.1rem; height: 1.1rem; }
.person-kontakt a { word-break: break-word; }

/* ── Rechtstexte ─────────────────────────────────────────────────────── */
.rechtstext h2 { margin: 2.25rem 0 .6rem; font-size: 1.2rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { color: var(--text-2); }

/* Zusammengesetzte Begriffe nicht am Bindestrich umbrechen (EN-Überschriften) */
.zusammen { white-space: nowrap; }

/* ── Wissen: Fachartikel ─────────────────────────────────────────────── */
.artikel-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0 0 1.5rem; color: var(--text-3); font-size: .85rem; letter-spacing: .04em; }
.artikel { font-size: 1.05rem; }
.artikel p, .artikel li { color: var(--text-2); }
.artikel h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin: 3rem 0 .9rem; }
.artikel h2:first-child { margin-top: 0; }
.artikel h3 { margin: 1.75rem 0 .5rem; }
.artikel ul, .artikel ol { padding-left: 1.2rem; margin: 0 0 1.25em; }
.artikel li { margin-bottom: .45rem; }
.artikel strong { color: var(--text); }
.artikel .daten { margin: 1.5rem 0 2rem; }
.artikel .daten th { width: 32%; }
.artikel .vergleich { margin: 2rem 0; }
.merke { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--linie); border-left: 3px solid var(--mint); border-radius: 12px; background: rgba(102, 204, 153, .05); }
.merke p:last-child { margin-bottom: 0; }
.merke strong { display: block; margin-bottom: .35rem; color: var(--mint); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.faq-liste { margin: 0; }
.faq-liste > div { padding: 1.25rem 0; border-bottom: 1px solid var(--linie); }
.faq-liste > div:first-child { border-top: 1px solid var(--linie); }
.faq-liste dt { font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.faq-liste dd { margin: 0; color: var(--text-2); }
.daten--spalten th, .daten--spalten td { padding-right: 1rem; }
.daten--spalten thead th { width: auto; color: var(--text-3); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 40em) { .tabelle-roll { overflow-x: auto; } .tabelle-roll .daten { min-width: 34rem; } }