/* ══════════════════════════════════════════════════════════════
   ENTWURF Startseite – ergänzt styles.css, ersetzt nichts daran.
   Alle Klassen tragen das Präfix e-, damit nichts Bestehendes
   überschrieben wird. Farben ausschließlich über die Tokens aus
   styles.css (kein Hex hier).
   Entscheidung Kontrast: --accent (#1b5fcb) erreicht als Text auf
   dem dunklen Grund nur 3,3:1 – Text und Linien nutzen deshalb
   --accent2 (6,1:1). --accent bleibt Flächenfarbe.
   ══════════════════════════════════════════════════════════════ */

/* Selektor .e-sec (Klasse) schlägt das globale `section { padding }`
   (Element) – bewusst so, kein !important nötig. */
.e-sec { padding: clamp(4.5rem, 9vw, 8rem) 6%; }
.e-wrap { max-width: 1180px; margin: 0 auto; }

.e-h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 20ch;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.e-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 56ch;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.e-sec p { max-width: 62ch; }

/* ── Schaufenster (die eine große Geste dieser Seite) ───────── */
.e-beweis {
  position: relative;
  background:
    radial-gradient(60% 55% at 70% 70%, rgba(var(--accent-rgb), 0.20), transparent 70%),
    var(--bg);
}
/* Auswahl: fünf Vorschaubilder = Galerie und Navigation in einem */
.e-branchen {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.1rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.e-branchen button {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; min-width: 0;
  color: var(--muted); transition: color .2s;
}
.e-branchen .e-poster {
  display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid var(--border);
  opacity: .62; transition: opacity .25s, border-color .25s, box-shadow .25s;
}
.e-b-name {
  display: block; margin-top: .6rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: -0.01em; line-height: 1.2;
}
.e-b-firma { display: block; font-size: .85rem; margin-top: .1rem; }
.e-branchen button:hover { color: var(--text); }
.e-branchen button:hover .e-poster { opacity: .9; }
.e-branchen button[aria-selected="true"] { color: var(--white); }
.e-branchen button[aria-selected="true"] .e-poster { opacity: 1; border-color: var(--accent2); box-shadow: 0 0 0 2px var(--accent2); }
.e-branchen button:focus-visible,
.e-umschalter button:focus-visible, .e-pfeil:focus-visible,
.e-extern:focus-visible, .e-cta:focus-visible, .e-link:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 6px; }

.e-geraet {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; box-shadow: 0 40px 100px -30px rgba(var(--accent-rgb), 0.55); min-width: 0;
}
/* Leiste wie in Marktplatz-Vorschauen: Titel links, Geräte mittig, Aktionen rechts */
.e-leiste {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem 1rem;
  padding: .65rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface2); font-size: .9rem;
}
.e-titel { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.e-pfeil {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 auto;
  width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border); color: var(--text); font-size: 1.25rem; line-height: 1;
}
.e-pfeil:hover { background: var(--surface); border-color: var(--accent2); }
.e-titeltext { display: flex; flex-direction: column; min-width: 0; margin-left: .35rem; line-height: 1.25; }
.e-titeltext strong { color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-titeltext span { color: var(--muted); font-size: .8rem; }
.e-pille { flex: 0 0 auto; margin-left: .25rem; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; border: 1px solid var(--border); color: var(--muted); }
.e-umschalter { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; justify-self: center; }
.e-umschalter button { all: unset; box-sizing: border-box; cursor: pointer; padding: .35rem .9rem; color: var(--muted); font-size: .85rem; }
.e-umschalter button[aria-pressed="true"] { background: var(--accent); color: var(--white); }
.e-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.e-extern { color: var(--accent2); text-decoration: none; font-size: .85rem; white-space: nowrap; }
.e-extern:hover { text-decoration: underline; }
.e-cta { background: var(--accent); color: var(--white); text-decoration: none; font-weight: 600; font-size: .85rem; padding: .5rem .95rem; border-radius: 8px; white-space: nowrap; }
.e-cta:hover { background: var(--accent2); color: var(--bg); }

.e-buehne { padding: 0; display: flex; justify-content: center; background: var(--bg); }
.e-geraet:not([data-ansicht="laptop"]) .e-buehne { padding: 1.5rem 0; }
/* Poster-Bild liegt hinter dem iframe und verschwindet, sobald die Seite geladen ist */
.e-bildschirm {
  position: relative; overflow: hidden; width: 100%; height: 420px;
  background: var(--surface) center top / cover no-repeat;
}
.e-geraet:not([data-ansicht="laptop"]) .e-bildschirm { border-radius: 28px; border: 6px solid var(--surface2); box-sizing: content-box; }
.e-geraet[data-ansicht="tablet"] .e-bildschirm { border-radius: 18px; }
.e-bildschirm iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; opacity: 0; transition: opacity .35s; }
.e-bildschirm.e-bereit iframe { opacity: 1; }
.e-bildschirm.e-an { animation: e-an .55s cubic-bezier(.2,.7,.2,1); }
@keyframes e-an { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.e-hinweis { margin-top: 1.75rem; color: var(--muted); font-size: .95rem; }
.e-hinweis a { color: var(--accent2); }

/* ── Drei Zusagen: Zeilen, keine Kacheln ────────────────────── */
.e-belege { margin-top: clamp(2rem, 4vw, 3.5rem); }
.e-beleg {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem 3rem; align-items: baseline;
  padding: 1.75rem 0; border-top: 1px solid var(--border);
}
.e-beleg:last-child { border-bottom: 1px solid var(--border); }
.e-beleg-satz {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.12;
  color: var(--white); margin: 0;
}
.e-beleg-text { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--text); }

/* ── Leistungen: zwei Spalten, getrennt durch eine Linie ───── */
.e-zwei { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(2rem, 4vw, 3.5rem); }
.e-spalte { padding: 0 clamp(1.5rem, 4vw, 3.5rem) 0 0; }
.e-spalte + .e-spalte { padding: 0 0 0 clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid var(--border); }
.e-spalte h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.6rem;
  letter-spacing: -0.015em; color: var(--white); margin: 0 0 .75rem;
}
.e-spalte p { font-size: 1.08rem; line-height: 1.65; color: var(--text); margin: 0 0 1.25rem; }
.e-link { color: var(--accent2); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.e-link:hover { color: var(--white); }

/* ── Über mich ──────────────────────────────────────────────── */
.e-ueber-grid { display: grid; grid-template-columns: minmax(180px, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.e-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--radius); border: 1px solid var(--border); }
.e-ueber p { font-size: 1.1rem; line-height: 1.7; color: var(--text); margin: 0 0 1rem; }
.e-ueber .e-klein { font-size: .98rem; color: var(--muted); }

/* ── Ablauf: echte Reihenfolge, deshalb Zählung und Schiene ── */
.e-prozess-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.e-prozess-kopf { position: sticky; top: 6.5rem; }
.e-schritte {
  --f: 0; list-style: none; margin: 0; padding: 0 0 0 3.25rem; position: relative;
  counter-reset: schritt;
}
.e-schritte::before, .e-schritte::after {
  content: ''; position: absolute; left: 1.05rem; top: .6rem; width: 2px; border-radius: 2px;
}
.e-schritte::before { bottom: .6rem; background: var(--border); }
.e-schritte::after  { height: calc((100% - 1.2rem) * var(--f)); background: var(--accent2); }
.e-schritt { position: relative; padding-bottom: clamp(2rem, 5vw, 3.5rem); counter-increment: schritt; }
.e-schritt:last-child { padding-bottom: 0; }
.e-schritt::before {
  content: counter(schritt);
  position: absolute; left: -3.25rem; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .95rem;
  background: var(--bg); border: 2px solid var(--border); color: var(--muted);
  transition: background .3s, border-color .3s, color .3s;
}
.e-schritt.ist-aktiv::before { background: var(--accent); border-color: var(--accent2); color: var(--white); }
.e-schritt h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.015em; color: var(--white); margin: .1rem 0 .5rem; }
.e-schritt p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--text); }
/* Ohne JS bzw. mit reduzierter Bewegung: alles sofort aktiv, volle Schiene */
.e-schritte.e-statisch { --f: 1; }
.e-schritte.e-statisch .e-schritt::before { background: var(--accent); border-color: var(--accent2); color: var(--white); }

/* ── Schmale Bildschirme ────────────────────────────────────── */
@media (max-width: 900px) {
  .e-beleg { grid-template-columns: 1fr; gap: .5rem; }
  .e-zwei { grid-template-columns: 1fr; gap: 2.5rem; }
  .e-spalte, .e-spalte + .e-spalte { padding: 0; border-left: 0; }
  .e-spalte + .e-spalte { border-top: 1px solid var(--border); padding-top: 2.5rem; }
  .e-ueber-grid, .e-prozess-grid { grid-template-columns: 1fr; }
  .e-foto { max-width: 220px; }
  .e-prozess-kopf { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .e-bildschirm.e-an { animation: none; }
  .e-schritt::before, .e-branchen button { transition: none; }
}

/* Hinweisband: nur im Entwurf, entfällt beim Livegang */
.e-band { position: fixed; bottom: 0; left: 0; z-index: 90; background: var(--accent); color: var(--white); font-size: .8rem; padding: .3rem .8rem; border-top-right-radius: 8px; pointer-events: none; }

/* Schaufenster schmal: Galerie scrollt waagerecht, Leiste stapelt sich */
@media (max-width: 900px) {
  .e-branchen { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px .75rem; margin-inline: -4px; -webkit-overflow-scrolling: touch; }
  .e-branchen button { flex: 0 0 42vw; max-width: 220px; scroll-snap-align: start; }
  .e-leiste { grid-template-columns: 1fr; justify-items: start; }
  .e-umschalter { justify-self: start; }
  .e-aktionen { justify-content: flex-start; flex-wrap: wrap; }
}

/* Neues Markup je Karte: .e-fenster > .e-bild > (.e-poster, .e-lang) + .e-handy.
   Ohne Raster sind Wrapper neutral, Lang- und Handy-Bild bleiben verborgen. */
.e-fenster, .e-bild { display: block; }
.e-lang, .e-handy, .e-raster-cta { display: none; }

/* ── Standardansicht: Karten-Raster + Vorschau-Fenster ───────────
   Die Branchenfarben sind die Markenfarben der jeweiligen Demo
   (nicht die der Hauptseite) und stehen deshalb hier als eigene Werte. */
.e-raster .e-branchen {
  grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.1rem, 2.2vw, 2rem);
  margin-bottom: 0; align-items: start;
}
.e-raster .e-branchen button { position: relative; grid-column: span 2; color: var(--text); --k: var(--accent2); }
.e-raster .e-branchen button:nth-child(n+4) { grid-column: span 3; }
.e-raster .e-branchen button:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.e-raster .e-branchen button:nth-child(5) { margin-top: clamp(1rem, 2.5vw, 2rem); }
.e-raster .e-branchen button[data-demo="handwerk"] { --k: #ffd60a; }
.e-raster .e-branchen button[data-demo="gastro"] { --k: #e2574c; }
.e-raster .e-branchen button[data-demo="coach"] { --k: #9a90f5; }
.e-raster .e-branchen button[data-demo="praxis"] { --k: #5fbf8b; }
.e-raster .e-branchen button[data-demo="dienstleister"] { --k: #17cfc0; }

/* Browser-Rahmen: Leiste mit drei Punkten und (erfundener) Adresse */
.e-raster .e-fenster {
  position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: 0 30px 60px -40px #000; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.e-raster .e-fenster::before {
  content: attr(data-url); display: flex; align-items: center; height: 30px; padding: 0 5rem 0 3.6rem;
  font: 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: var(--muted);
  border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; background-color: var(--surface2);
  background-image: radial-gradient(circle 4px at 14px 15px, #ff5f57 98%, transparent), radial-gradient(circle 4px at 30px 15px, #febc2e 98%, transparent), radial-gradient(circle 4px at 46px 15px, #28c840 98%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.e-raster .e-bild { position: relative; overflow: hidden; aspect-ratio: 8 / 5; border-radius: 0 0 11px 11px; background: var(--bg); }
.e-raster .e-poster, .e-raster .e-lang { position: absolute; left: 0; top: 0; width: 100%; height: auto; border: 0; border-radius: 0; opacity: 1; box-shadow: none; }
.e-raster .e-poster { height: 100%; object-fit: cover; object-position: top; }
/* Beim Darüberfahren scrollt die Seite im Rahmen nach unten (7 s), beim Verlassen springt sie sanft zurück */
.e-raster .e-lang { display: block; opacity: 0; transform: translateY(0); transition: transform .6s ease, opacity .2s; }
.e-raster .e-branchen button:hover .e-lang,
.e-raster .e-branchen button:focus-visible .e-lang { opacity: 1; transform: translateY(-60%); transition: transform 7s cubic-bezier(.45,.05,.4,1), opacity .2s; }
.e-raster .e-handy {
  display: block; position: absolute; right: -.7rem; bottom: -1.4rem; width: 20%; height: auto; border-radius: 14px;
  border: 3px solid var(--bg); background: var(--bg); box-shadow: 0 18px 30px -12px #000; transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.e-raster .e-branchen button:hover .e-fenster,
.e-raster .e-branchen button:focus-visible .e-fenster { transform: translateY(-5px); border-color: var(--k); box-shadow: 0 34px 60px -30px var(--k); }
.e-raster .e-branchen button:hover .e-handy,
.e-raster .e-branchen button:focus-visible .e-handy { transform: translateY(-8px) rotate(2deg); }
.e-raster .e-branchen button::after {
  content: 'Live ansehen'; position: absolute; top: .3rem; right: .55rem; z-index: 2;
  padding: .22rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.2;
  background: var(--k); color: #0b0d12; opacity: 0; transition: opacity .2s;
}
.e-raster .e-branchen button:hover::after,
.e-raster .e-branchen button:focus-visible::after { opacity: 1; }
.e-raster .e-b-name { margin-top: 2rem; color: var(--white); font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.e-raster .e-b-name::before { content: ''; display: block; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--k); margin-bottom: .6rem; }
.e-raster .e-b-firma { color: var(--muted); }
.e-raster .e-raster-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.e-raster .e-raster-cta p { margin: 0; color: var(--text); max-width: 46ch; }
.e-raster .e-raster-cta .e-cta { padding: .75rem 1.25rem; font-size: .95rem; }
.e-raster .e-hinweis { margin-top: 1.5rem; }

.e-raster .e-geraet { display: none; }
.e-raster.e-offen .e-geraet {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200;
  border: 0; border-radius: 0; box-shadow: none;
}
.e-raster.e-offen .e-buehne { flex: 1 1 auto; min-height: 0; align-items: center; }
.e-raster.e-offen .e-geraet[data-ansicht="laptop"] .e-buehne { align-items: flex-start; }
.e-gesperrt { overflow: hidden; }
.e-zu {
  all: unset; box-sizing: border-box; cursor: pointer; padding: .45rem .95rem; border-radius: 8px;
  border: 1px solid var(--border); color: var(--white); font-size: .85rem; font-weight: 600;
}
.e-zu:hover { background: var(--surface); border-color: var(--accent2); }
.e-zu:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
@media (hover: none) {
  .e-raster .e-branchen button::after { opacity: 1; }
}
@media (max-width: 900px) {
  .e-raster .e-branchen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; margin-inline: 0; }
  .e-raster .e-branchen button,
  .e-raster .e-branchen button:nth-child(n+4) { grid-column: auto; flex: none; max-width: none; margin-top: 0; }
  .e-raster .e-branchen button:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .e-raster .e-branchen { grid-template-columns: 1fr; }
  .e-raster .e-branchen button:last-child { grid-column: auto; }
  .e-raster .e-handy { width: 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .e-raster .e-lang { display: none; }
  .e-raster .e-fenster, .e-raster .e-handy { transition: none; }
  .e-raster .e-branchen button:hover .e-fenster, .e-raster .e-branchen button:focus-visible .e-fenster,
  .e-raster .e-branchen button:hover .e-handy, .e-raster .e-branchen button:focus-visible .e-handy { transform: none; }
}

/* Offenes Vorschau-Fenster: feste Schwebe-Elemente der Seite ausblenden */
.e-gesperrt .scroll-top, .e-gesperrt .e-band { display: none; }

/* ── Abheben vom Dunkel: Branchenbereich als helle Bühne ──
   Nur Variablen werden lokal umgedreht; das offene Vorschau-Fenster bleibt dunkel. */
.e-beweis {
  --bg: #e9ecf3; --surface: #f8f9fc; --surface2: #dde2ec;
  --border: rgba(20, 26, 48, .16); --text: #2b3142; --white: #0c0b10; --muted: #566074; --accent2: #1b5fcb;
  background:
    radial-gradient(70% 50% at 50% 0%, #fff, transparent 70%),
    linear-gradient(180deg, #eef0f6, #dfe4ee);
}
.e-beweis .e-cta { color: #fff; }
.e-beweis .e-cta:hover { background: #123f82; color: #fff; }
.e-beweis .e-hinweis { color: var(--muted); }
.e-beweis .e-hinweis a { color: #1b5fcb; }
.e-beweis .e-geraet {
  --bg: #0c0b10; --surface: #17141c; --surface2: #201c27; --border: rgba(180,165,150,.12);
  --text: #e7e4ee; --white: #f2f0f5; --muted: #8f8aa3; --accent2: #4b8dff;
}
.e-raster .e-fenster { box-shadow: 0 2px 0 rgba(255,255,255,.7) inset, 0 40px 70px -38px rgba(14, 20, 50, .6), 0 8px 18px -10px rgba(14, 20, 50, .35); }
.e-raster .e-branchen button:hover .e-fenster,
.e-raster .e-branchen button:focus-visible .e-fenster { box-shadow: 0 44px 70px -34px var(--k), 0 10px 22px -10px rgba(14, 20, 50, .4); }
.e-raster .e-handy { border-color: #fff; background: #fff; }
.e-raster .e-raster-cta { border-top-color: rgba(20, 26, 48, .18); }

/* ═══ Dunkle Mitte: Glas und Spotlight in den Farben der Seite ═══════════
   Nur Hero und Branchenbereich sind hell bzw. Schaufenster; ab hier ein durchgehendes Blau-Schwarz mit Lichtfeldern. */
.e-warum, .e-leistung, .e-ueber, .e-prozess { position: relative; overflow: hidden; isolation: isolate; }
.e-warum::before, .e-leistung::before, .e-ueber::before, .e-prozess::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 55% at 88% 12%, rgba(var(--accent-rgb), .30), transparent 70%),
    radial-gradient(36% 50% at 4% 95%, rgba(var(--accent-rgb), .18), transparent 70%);
}
.e-leistung::before { background:
    radial-gradient(40% 55% at 6% 10%, rgba(var(--accent-rgb), .26), transparent 70%),
    radial-gradient(40% 50% at 96% 90%, rgba(var(--accent-rgb), .22), transparent 70%); }
.e-ueber::before { background:
    radial-gradient(45% 60% at 20% 50%, rgba(var(--accent-rgb), .26), transparent 70%),
    radial-gradient(35% 45% at 100% 0%, rgba(75, 141, 255, .14), transparent 70%); }

/* Glas */
.e-glas {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .13); border-radius: 20px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 30px 50px -34px rgba(0, 0, 0, .8);
}
/* Spotlight: Licht und Rahmen folgen dem Mauszeiger (--x/--y setzt entwurf.js) */
.e-spot { --x: 50%; --y: 0%; position: relative; }
.e-spot::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--x) var(--y), rgba(var(--accent-rgb), .34), transparent 60%); opacity: .8;
}
.e-spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(240px circle at var(--x) var(--y), rgba(141, 182, 255, .95), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.e-spot > * { position: relative; }

/* Zusagen */
.e-belege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.e-beleg { display: block; padding: clamp(1.25rem, 2.4vw, 1.9rem); border: 1px solid rgba(255, 255, 255, .13); }
.e-beleg:last-child { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.e-fig {
  display: block; margin-bottom: 1rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 4rem); letter-spacing: -.04em; line-height: 1; white-space: nowrap;
  background: linear-gradient(120deg, #fff, #8db6ff 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.e-beleg-satz { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-bottom: .55rem; }

/* Leistungen */
.e-zwei { gap: clamp(1rem, 2vw, 1.5rem); }
.e-panel { padding: clamp(1.4rem, 2.8vw, 2.2rem); overflow: hidden; }
.e-panel h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.55rem; letter-spacing: -.015em; color: var(--white); margin: 0 0 .7rem; }
.e-panel p { font-size: 1.06rem; line-height: 1.65; color: var(--text); margin: 0 0 1.2rem; }
.e-panel .e-link { color: #8db6ff; }
.e-panel .e-link:hover { color: #fff; }
.e-vis { position: relative; height: clamp(150px, 16vw, 200px); margin-bottom: 1.4rem; }
/* Webdesign: Drahtmodelle statt Demos (die Beispiele stehen schon darüber) */
.e-wf {
  position: absolute; display: block; border-radius: 12px; border: 1px solid rgba(141, 182, 255, .5);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .28), rgba(255, 255, 255, .05));
  box-shadow: 0 24px 40px -16px rgba(0, 0, 20, .8); animation: e-schweben 6s ease-in-out infinite;
}
.e-wf::before { content: ''; position: absolute; left: 10px; top: 9px; width: 34px; height: 6px; border-radius: 3px;
  background: radial-gradient(circle at 3px 3px, #ff5f57 2.5px, transparent 3px), radial-gradient(circle at 15px 3px, #febc2e 2.5px, transparent 3px), radial-gradient(circle at 27px 3px, #28c840 2.5px, transparent 3px); }
.e-wf i { position: absolute; left: 10%; right: 38%; top: 30%; height: 11px; border-radius: 6px; background: rgba(255, 255, 255, .72); }
.e-wf b { position: absolute; left: 10%; right: 55%; top: 46%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .34); box-shadow: 0 14px 0 rgba(255, 255, 255, .22); }
.e-wf u { position: absolute; right: 9%; top: 30%; width: 26%; bottom: 14%; border-radius: 8px; background: linear-gradient(150deg, #4b8dff, rgba(75, 141, 255, .15)); }
.e-wf1 { left: 0; top: 22px; width: 52%; height: 78%; transform: rotate(-4deg); }
.e-wf2 { left: 24%; top: 0; width: 52%; height: 84%; z-index: 1; animation-delay: -2s; background: linear-gradient(160deg, rgba(var(--accent-rgb), .55), rgba(255, 255, 255, .08)); }
.e-wf3 { right: 0; top: 38px; width: 24%; height: 86%; transform: rotate(4deg); animation-delay: -4s; border-radius: 16px; }
.e-wf3 i { left: 14%; right: 14%; top: 24%; } .e-wf3 b { left: 14%; right: 30%; top: 40%; } .e-wf3 u { left: 14%; right: 14%; top: 62%; bottom: 10%; width: auto; }
@keyframes e-schweben { 50% { translate: 0 -9px; } }
.e-vis-term {
  display: flex; flex-direction: column; gap: .5rem; padding: .85rem 1rem; border-radius: 12px; height: auto;
  background: rgba(4, 5, 12, .62); border: 1px solid rgba(255, 255, 255, .16); min-height: clamp(150px, 16vw, 200px);
  font: .88rem/1.4 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: #c3ccea;
}
.e-term-kopf { display: flex; gap: 6px; margin-bottom: .4rem; }
.e-term-kopf i { width: 9px; height: 9px; border-radius: 50%; background: #3a3f52; }
.e-term-kopf i:nth-child(1) { background: #ff5f57; } .e-term-kopf i:nth-child(2) { background: #febc2e; } .e-term-kopf i:nth-child(3) { background: #28c840; }
.e-zeile::before { content: '> '; color: #4b8dff; }
.e-zeile.e-ok { color: #6ee7a8; }
.e-zeile.e-ok::before { content: '✓ '; color: #6ee7a8; }
.e-js .e-panel:not(.e-da) .e-zeile { opacity: 0; transform: translateX(-8px); }
.e-zeile { transition: opacity .4s ease, transform .4s ease; }
.e-panel.e-da .e-zeile:nth-of-type(1) { transition-delay: .2s; }
.e-panel.e-da .e-zeile:nth-of-type(2) { transition-delay: .8s; }
.e-panel.e-da .e-zeile:nth-of-type(3) { transition-delay: 1.5s; }
.e-panel.e-da .e-zeile:nth-of-type(4) { transition-delay: 2.1s; }

/* Über mich: Foto mit Lichtring, Text auf Glas */
.e-ueber-grid { align-items: center; }
.e-foto-rahmen { position: relative; }
.e-foto-rahmen .e-foto { position: relative; display: block; border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .12), 0 0 90px -10px rgba(var(--accent-rgb), .75); }
.e-ueber-text { padding: clamp(1.25rem, 3vw, 2.25rem); }
.e-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .5rem 0 1.25rem; }
.e-chips li { padding: .3rem .8rem; border-radius: 999px; font-size: .9rem; color: #c3d6ff; border: 1px solid rgba(141, 182, 255, .45); background: rgba(var(--accent-rgb), .14); }

/* Ablauf: Schienen-Leuchten, Schritte als Glas */
.e-schritte::before { background: rgba(255, 255, 255, .14); }
.e-schritte::after { background: linear-gradient(180deg, #4b8dff, #8db6ff); box-shadow: 0 0 16px rgba(75, 141, 255, .9); }
.e-schritt { padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.7rem); margin-bottom: clamp(1rem, 2.4vw, 1.5rem); padding-bottom: clamp(1rem, 2vw, 1.4rem); }
.e-schritt:last-child { padding-bottom: clamp(1rem, 2vw, 1.4rem); margin-bottom: 0; }
.e-schritt.ist-aktiv::before { box-shadow: 0 0 16px rgba(75, 141, 255, .9); }
.e-schritt::before { top: 1.1rem; left: calc(-3.25rem - 1px); }

@media (max-width: 900px) {
  .e-belege { grid-template-columns: 1fr; }
  .e-zwei { grid-template-columns: 1fr; }
  .e-foto { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .e-wf { animation: none; }
  .e-zeile { transition: none; }
}
.e-schritt { z-index: 1; }

/* ═══ Einheitliches System für die ganze Seite ═══════════════════════════
   Radien: Knöpfe und Eingabefelder 10px, Karten und Glasflächen 20px, Pillen rund.
   Knöpfe: genau zwei Arten. Primär = Blau gefüllt. Sekundär = Glas mit hellem Rand.
   Überschriften: alle Abschnitts-H2 wie .e-h2, keine Großbuchstaben-Etiketten. */
.btn, .nav-cta, .e-cta, .calendly-btn, .form-submit, .legal-tab, .e-zu {
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; letter-spacing: 0; border-radius: 10px;
  transition: background .2s, border-color .2s, box-shadow .25s, transform .2s;
}
/* Primär */
.btn-primary, .nav-cta, .e-cta, .form-submit {
  background: var(--accent); color: #fff; border: 1px solid rgba(141, 182, 255, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 30px -10px rgba(var(--accent-rgb), .8);
}
.btn-primary:hover, .nav-cta:hover, .e-cta:hover, .form-submit:hover,
.e-beweis .e-cta:hover {
  background: #2a6fe0; color: #fff; transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 14px 36px -10px rgba(var(--accent-rgb), .95);
}
/* Sekundär */
.btn-outline, .calendly-btn, .legal-tab, .e-zu {
  background: rgba(255, 255, 255, .06); color: var(--white); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none;
}
.btn-outline:hover, .calendly-btn:hover, .legal-tab:hover, .e-zu:hover {
  background: rgba(var(--accent-rgb), .16); border-color: rgba(141, 182, 255, .6); color: #fff; transform: translateY(-1px);
}
.legal-tab { color: var(--text); }
.legal-tab.active { background: rgba(var(--accent-rgb), .22); border-color: rgba(141, 182, 255, .7); color: #fff; }
/* Größen: normal und klein (Navigation, Werkzeugleiste, Rechtliches) */
.btn, .calendly-btn, .e-cta { padding: .85rem 1.5rem; font-size: .98rem; }
.form-submit { padding: .95rem 1.5rem; font-size: 1rem; }
.nav-cta, .e-aktionen .e-cta, .legal-tab, .e-zu { padding: .55rem 1.1rem; }
.btn-icon { display: none; }
.btn:focus-visible, .nav-cta:focus-visible, .e-cta:focus-visible, .calendly-btn:focus-visible,
.form-submit:focus-visible, .legal-tab:focus-visible { outline: 2px solid #8db6ff; outline-offset: 3px; }
.e-pfeil { border-radius: 10px; }

/* Status oben im Hero: Glaspille statt Großbuchstaben-Etikett */
.hero-badge {
  text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500;
  padding: .4rem .95rem; border-radius: 999px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Kontakt: gleiche Überschrift, gleiches Glas, gleiche Lichtfelder wie die Mitte */
#contact { position: relative; overflow: hidden; isolation: isolate; }
#contact::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 55% at 85% 35%, rgba(var(--accent-rgb), .28), transparent 70%),
    radial-gradient(35% 45% at 0% 100%, rgba(var(--accent-rgb), .16), transparent 70%);
}
#contact .section-label { display: none; }
#contact .section-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 1.25rem;
}
#contact .section-desc { color: var(--text); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; max-width: 56ch; }
#contact .contact-info h3, #contact .form-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.contact-form.e-glas { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .13); border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.4rem); }
.contact-link { border-bottom-color: rgba(255, 255, 255, .1); }
.form-group label { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500; color: var(--text); }
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  color: var(--white); font-size: .98rem; padding: .8rem 1rem;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #8a8ea5; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #8db6ff; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3);
}
.form-group select option { background: #17141c; }
.calendly-btn { width: 100%; justify-content: center; }
.calendly-or { text-align: center; }
.form-note { font-size: .85rem; }

/* Rechtliches und Fußzeile: ruhig, ohne Großbuchstaben-Etiketten */
#legal h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.footer-col-title { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; color: var(--white); font-family: 'Space Grotesk', sans-serif; }
.footer-social-icon { border-radius: 10px; }
.scroll-top { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 10px; }

/* Gleiche Inhaltsbreite und Kante für alle Abschnitte (vorher 1100 bzw. 1180 px) */
.section-inner, .footer-inner, .footer-bottom { max-width: 1180px; }
#contact { padding: clamp(4.5rem, 9vw, 8rem) 6%; }
/* Lichtfelder laufen an den Abschnittsgrenzen weich aus, keine harten Kanten */
.e-warum::before, .e-leistung::before, .e-ueber::before, .e-prozess::before, #contact::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.contact-info p { color: var(--text); font-size: 1rem; }
.contact-link { font-size: 1rem; }

/* ═══ Branchenbereich als schwebende Bühne (Vorlage 2) ════════════════════
   Außen dunkel mit blauem Schein, innen eine abgerundete helle Tafel.
   Rahmen sind Milchglas; dahinter je ein Farbfleck in der Branchenfarbe.
   Hinweis: .e-tafel bekommt bewusst KEIN transform/filter/backdrop-filter,
   sonst wäre das fixierte Vorschau-Fenster darin gefangen. */
.e-beweis.e-sec {
  padding: clamp(10px, 2vw, 28px);
  background: radial-gradient(55% 45% at 50% 50%, rgba(var(--accent-rgb), .35), transparent 75%), #0c0b10;
}
.e-tafel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(20px, 3vw, 36px);
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(16px, 5vw, 72px);
  background: radial-gradient(70% 40% at 50% 0%, #fff, transparent 70%), linear-gradient(180deg, #f2f3f8, #e2e7f1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 50px 120px -40px rgba(var(--accent-rgb), .75);
}
.e-raster .e-branchen button::before {
  content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; top: 6%; height: 70%; border-radius: 40%;
  background: var(--k); filter: blur(42px); opacity: .55; transition: opacity .4s, transform .5s; pointer-events: none;
}
.e-raster .e-branchen button:hover::before,
.e-raster .e-branchen button:focus-visible::before { opacity: .85; transform: scale(1.08); }
.e-raster .e-fenster {
  padding: 0 10px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 30px 60px -36px rgba(14, 20, 50, .55);
}
.e-raster .e-fenster::before { background-color: transparent; border-bottom: 0; border-radius: 0; height: 32px; }
.e-raster .e-bild { border-radius: 9px; }
.e-raster .e-branchen button:hover .e-fenster,
.e-raster .e-branchen button:focus-visible .e-fenster {
  border-color: rgba(255, 255, 255, .95); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 70px -34px rgba(14, 20, 50, .6);
}
.e-raster .e-raster-cta {
  padding: 1.25rem 1.5rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 20px;
  background: rgba(255, 255, 255, .5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
/* Kein eigener Stapelkontext auf der Tafel: sonst läge das offene Vorschau-Fenster unter der Navigation. */
.e-tafel { isolation: auto; }
.e-raster .e-branchen button::before { z-index: 0; }
.e-raster .e-fenster, .e-raster .e-b-name, .e-raster .e-b-firma { position: relative; z-index: 1; }
.e-aktionen .e-cta, .e-zu { font-size: .9rem; }

/* ═══ Gesamtbild: Mitte dunkel, Kontakt als zweite helle Bühne (Vorlage 4) ═══ */
/* Mitte kompakter (Abstände etwa ein Drittel kleiner) und kleine Texte heller */
.e-warum.e-sec, .e-leistung.e-sec, .e-ueber.e-sec, .e-prozess.e-sec { padding-block: clamp(3.25rem, 6vw, 5.25rem); }
.e-warum, .e-leistung, .e-ueber, .e-prozess { --muted: #b3afc4; }
.e-ueber .e-klein { color: #b3afc4; font-size: 1rem; }
.e-beleg-text, .e-panel p, .e-schritt p { color: #dcd9e6; }
.e-prozess-kopf .btn { margin-top: .5rem; }

/* Kontakt: helle Tafel auf Dunkel, wie die Branchen-Bühne */
#contact { padding: clamp(10px, 2vw, 28px); background: radial-gradient(55% 45% at 50% 50%, rgba(var(--accent-rgb), .35), transparent 75%), #0c0b10; }
#contact::before { display: none; }
.e-tafel-kontakt {
  --white: #0c0b10; --text: #2b3142; --muted: #566074; --border: rgba(20, 26, 48, .16);
  color: var(--text);
}
#contact .section-title { color: #0c0b10; }
#contact .section-desc, #contact .contact-info p { color: #3a4152; }
#contact .contact-info h3, #contact .form-title { color: #0c0b10; }
#contact .contact-link { color: #2b3142; border-bottom-color: rgba(20, 26, 48, .12); }
#contact .contact-link:hover { color: #1b5fcb; }
.e-antwort {
  display: inline-block; margin-top: 1.5rem; padding: .55rem 1rem; border-radius: 999px;
  background: rgba(27, 95, 203, .1); border: 1px solid rgba(27, 95, 203, .28); color: #123f82 !important; font-weight: 500; font-size: .95rem !important;
}
#contact .contact-form.e-glas {
  background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 60px -36px rgba(14, 20, 50, .5);
}
#contact .form-group label { color: #2b3142; }
#contact .form-group input, #contact .form-group select, #contact .form-group textarea {
  background: #fff; border-color: rgba(20, 26, 48, .18); color: #0c0b10;
}
#contact .form-group input::placeholder, #contact .form-group textarea::placeholder { color: #7a8194; }
#contact .form-group select option { background: #fff; color: #0c0b10; }
#contact .calendly-or, #contact .form-note { color: #566074; }
/* Termin und Nachricht gleich stark: beide primär */
#contact .calendly-btn {
  background: var(--accent); color: #fff; border: 1px solid rgba(141, 182, 255, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 30px -10px rgba(var(--accent-rgb), .8);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#contact .calendly-btn:hover { background: #2a6fe0; color: #fff; }
/* Kontakt nie ausblenden: falls die Einblend-Animation nicht auslöst, bleibt das Formular trotzdem sichtbar. */
#contact .reveal { opacity: 1; transform: none; }

/* Hero: Untertitel besser lesbar; Zeile darunter nennt die drei stärksten Argumente */
.hero-sub { color: #cfcbdc; }
.trust-strip .trust-item { color: #d6d3e2; font-weight: 500; }

/* Branchen-Karten: sichtbarer Hinweis, dass man sie öffnen kann (auch ohne Maus) */
.e-raster .e-b-firma::after {
  content: 'Live ansehen'; display: block; margin-top: .4rem; color: #1b5fcb; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}

/* Fußzeile auf dem Handy linksbündig wie der Rest */
@media (max-width: 768px) {
  footer, .footer-bottom { text-align: left; }
  .footer-bottom { align-items: flex-start; }
  .footer-social-icons { justify-content: flex-start; }
}

/* Ein Hauptweg: „Erstgespräch buchen“ ist blau, „Nachricht senden“ ist der zweite Weg (hell mit Rand). */
#contact .form-submit {
  background: #fff; color: #0c0b10; border: 1px solid rgba(20, 26, 48, .22); box-shadow: none;
}
#contact .form-submit:hover { background: #fff; border-color: #1b5fcb; color: #1b5fcb; }

/* Hero-Überschrift: drei kurze Sätze, je genau eine Zeile, ohne farbig hervorgehobene Einzelphrase */
.hero h1 { max-width: none; }
.hero h1 .h-zeile { display: block; }
@media (min-width: 481px) {
  .hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); }
  .hero h1 .h-zeile { white-space: nowrap; }
}
@media (max-width: 480px) { .hero h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); } }

/* ═══ Ein durchgehendes Licht hinter der dunklen Mitte (statt Flecken pro Abschnitt) ═══ */
.e-warum::before, .e-leistung::before, .e-ueber::before, .e-prozess::before { display: none; }
.e-mitte { position: relative; isolation: isolate; background: #0c0b10; }
.e-mitte > .e-sec { background: transparent; overflow: visible; }
.e-mitte-licht { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.e-mitte-licht span {
  position: absolute; width: min(70vw, 900px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .12) 45%, transparent 70%);
  filter: blur(30px); will-change: transform;
}
.e-mitte-licht .o1 { right: -18vw; top: 4%; }
.e-mitte-licht .o2 { left: -24vw; top: 38%; background: radial-gradient(circle, rgba(75, 141, 255, .30), rgba(75, 141, 255, .08) 45%, transparent 70%); }
.e-mitte-licht .o3 { right: -10vw; top: 72%; opacity: .8; }

/* Überschriften wortweise einblenden (nur mit JS, siehe entwurf.js) */
.e-wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.e-wort > span { display: inline-block; will-change: transform; }

/* Offenes Vorschau-Fenster darf nie vom Bühnen-Zuschnitt beschnitten werden */
#beweis.e-offen .e-tafel { clip-path: none !important; }