/* ==========================================================================
   Lichtbaender im Hero  (Probefassung, nur mit ?licht=1)
   --------------------------------------------------------------------------
   Vorbild ist eine Seite mit weichen, sich kreuzenden Lichtschlieren auf
   Weiss. Nachgebaut aus vier stark weichgezeichneten Ellipsen - keine
   Grafik, kein WebGL, nur Verlaeufe. Die Maus verschiebt sie
   unterschiedlich stark, dadurch entsteht Tiefe.

   Warum Ellipsen und kein Bild: Ein Bild muesste in jeder Fenstergroesse
   passen und waere je nach Qualitaet mehrere hundert Kilobyte schwer.
   Diese Variante kostet nichts und bleibt in jeder Breite scharf.
   ========================================================================== */

/* Die drei alten Leuchtkreise wuerden sich mit den Baendern ueberlagern und
   alles truebe machen. */
.hero[data-licht] .hero__glow { display: none; }

/* Weisser Grund statt des hellblauen.
   Blaue Schlieren auf blauem Grund haben wenig Spielraum - auf Weiss
   treten sie so hervor wie in der Vorlage. Das !important ist noetig,
   weil hell.css den Ton mit derselben Dringlichkeit setzt. */
body.page .hero,
.hero { background: #FFFFFF !important; }

.licht {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Die Baender sollen das Licht aufhellen, nicht als graue Schlieren
     darueberliegen. Auf hellem Grund trifft das plus-lighter am besten;
     wo der Browser das nicht kann, bleibt normales Zeichnen. */
  z-index: 0;
}

.licht__band {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform:
    translate3d(var(--vx, 0px), var(--vy, 0px), 0)
    rotate(calc(var(--dreh) + var(--vr, 0deg)));
}

/* Die Schaerfe steckt in den Verlaufsstufen, nicht im Weichzeichner.
   Ein starker Weichzeichner frisst genau die Kante, die einen Strahl
   ausmacht - uebrig bleibt Dunst. Deshalb: heller, schmaler Kern, der
   ueber wenige Prozent stark abfaellt und dann kurz ausklingt. Der
   Weichzeichner glaettet nur noch die Treppenstufen.

   Alles in Grau und Anthrazit. Ein weisser Grat, wie ihn die farbige
   Fassung hatte, waere auf weissem Grund unsichtbar - seine Rolle
   uebernimmt hier der duenne dunkle Strahl (d). */

/* --- a: der Hauptstrahl, von links oben nach rechts unten --- */
.licht__band--a {
  width: 200vw; height: 7vw;
  left: -52vw; top: 14%;
  --dreh: -33deg;
  filter: blur(5px);
  background: radial-gradient(ellipse at center,
    rgba(58, 66, 78, .46) 0%,
    rgba(62, 70, 82, .26) 6%,
    rgba(70, 78, 90, .11) 16%,
    rgba(82, 90, 102, .035) 30%,
    transparent 52%);
}

/* --- b: der Gegenstrahl --- */
.licht__band--b {
  width: 175vw; height: 4vw;
  left: -30vw; top: 56%;
  --dreh: 10deg;
  filter: blur(4px);
  background: radial-gradient(ellipse at center,
    rgba(74, 82, 95, .34) 0%,
    rgba(80, 88, 100, .17) 8%,
    rgba(92, 100, 112, .06) 22%,
    transparent 44%);
}

/* --- c: die breite, ruhige Flaeche darunter --- */
.licht__band--c {
  width: 185vw; height: 10vw;
  left: -14vw; top: 70%;
  --dreh: -11deg;
  filter: blur(9px);
  background: radial-gradient(ellipse at center,
    rgba(96, 104, 116, .22) 0%,
    rgba(104, 112, 124, .10) 12%,
    rgba(116, 124, 136, .03) 30%,
    transparent 56%);
}

/* --- d: der duenne, dunkle Grat - er traegt die Schaerfe --- */
.licht__band--d {
  width: 165vw; height: 1.6vw;
  left: -32vw; top: 22%;
  --dreh: -33deg;
  filter: blur(2px);
  background: radial-gradient(ellipse at center,
    rgba(40, 46, 56, .58) 0%,
    rgba(46, 52, 62, .22) 5%,
    rgba(58, 64, 74, .06) 14%,
    transparent 32%);
}

/* Auf schmalen Schirmen sind die Baender im Verhaeltnis zu gross und
   verdecken die Schrift. Flacher und blasser. */
@media (max-width: 860px) {
  .licht__band--a { height: 14vw; filter: blur(4px); }
  .licht__band--b { height: 8vw;  filter: blur(3px); }
  .licht__band--c { height: 18vw; filter: blur(6px); }
  .licht__band--d { height: 3.2vw; filter: blur(2px); }
}

/* Wer keine Bewegung moechte, bekommt dasselbe Bild - nur still. */
@media (prefers-reduced-motion: reduce) {
  .licht__band { transition: none; }
}


/* =========================================================================
   Hero ohne Bilderslider - Ueberschrift ueber die volle Breite
   -------------------------------------------------------------------------
   Der Kunde moechte den Leistungs-Slider rechts erst einmal weg haben und
   die Ueberschrift dafuer so gross, dass sie die Inhaltsbreite ausfuellt.
   Seit 10.10.2026 die Dauerfassung. Diese Regeln haengen bewusst NICHT an
   [data-licht] - das Merkmal setzt erst das Skript. Ohne JavaScript stuende
   sonst wieder der alte zweispaltige Hero da. Nur die Lichtbaender selbst
   bleiben am Merkmal; die gibt es ohne Skript ohnehin nicht.

   Die Bildspalte wird nur ausgeblendet, nicht entfernt: Das Markup liegt in
   Elementor, und ein Zurueck soll eine Zeile kosten, kein Umbau.
   ========================================================================= */
.hero .hero__stage-wrap { display: none; }

/* Eine Spalte statt zwei. Die zweite Regel sticht die aus karten.css, die
   wegen :has(.karten-slider) weiterhin greift - die Folien sind ja noch da,
   nur unsichtbar. */
@media (min-width: 1024px) {
  .hero .hero__inner,
  .hero .hero__inner:has(.karten-slider) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hero .hero__copy { max-width: none; }

/* Ohne die Bilder faellt der Hero in sich zusammen. Mehr Luft oben und
   unten, damit die Flaeche Platz behaelt - dort laufen die Lichtbaender.
   Oben deutlich mehr als vorher: Der Kunde wollte den Text tiefer stehen
   haben, er setzte zu dicht unter der Kopfzeile an. */
/* Zwei Klassen tief und als padding-block: elementor.css setzt mit
   ".hero.e-con { padding-block: ... }" eine Regel mit zwei Klassen und in
   der logischen Schreibweise. Ein einfaches ".hero { padding-top }"
   verliert dagegen - solange die Regel noch ".hero[data-licht]" hiess,
   gewann sie nur wegen des zusaetzlichen Merkmals. */
.hero.e-con,
.hero {
  padding-block: clamp(10.5rem, 23vh, 16rem) clamp(5rem, 10vw, 9rem);
}

/* Grundgroesse der Ueberschrift. Auf schmalen Schirmen bleibt es dabei und
   die Zeile darf umbrechen; ab 760 px rechnet licht.js die Groesse so aus,
   dass eine einzige Zeile die Spalte genau ausfuellt. */
.hero .hero__inner .hero__title,
.hero .hero__inner .hero__title .elementor-heading-title {
  font-size: clamp(2.6rem, 1.2rem + 7vw, 6rem);
  line-height: .9;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Hat das Skript gemessen, gilt sein Wert - und nur dann wird die Zeile
   festgehalten. Ohne Skript bleibt der Umbruch erlaubt, sonst stuende die
   Zeile breiter als das Fenster. */
.hero .hero__title[data-breite="voll"] .elementor-heading-title {
  font-size: var(--titel-groesse);
  white-space: nowrap;
  display: block;
}

/* Der Fliesstext darunter waechst nicht mit: Er bleibt lesbar schmal und
   sitzt unter dem Anfang der Zeile. Und er braucht mehr Abstand nach oben
   als vorher - die Zeilenhoehe .9 laesst die Unterlaenge von "Wirkung."
   aus dem Kasten ragen, der Text stiesse sonst dagegen. */
/* Vier Klassen tief muss der Selektor sein. Elementor setzt mit
   ".elementor.elementor .e-con > .elementor-widget { max-width: 100% }"
   eine Regel mit vier Klassen; ein kuerzerer Selektor verliert dagegen.
   Deshalb war "max-width: 46ch" aus style.css hier noch nie wirksam - in
   der frueher schmalen Textspalte ist das nur niemandem aufgefallen. Ueber
   die volle Breite ergaebe es Zeilen mit ueber hundert Zeichen. */
.hero .hero__inner .hero__copy .hero__lead.elementor-widget {
  max-width: 46ch;
  margin-top: clamp(1.9rem, 3vw, 3rem);
}