.proposal{min-height:800px;height:100svh;max-height:1050px;background:#326265;isolation:isolate;border-radius:0 0 30px 30px;align-items:center}
.proposal::after{display:none}.proposal .seascape{position:absolute;inset:0;z-index:-3;overflow:hidden}
.seascape img,.seascape canvas{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:80% center}
.seascape canvas{opacity:0;transition:opacity 1s}.seascape canvas.ready{opacity:1}
.proposal .hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,30,32,.72) 0%,rgba(14,30,32,.46) 40%,rgba(14,30,32,.10) 72%,rgba(14,30,32,0) 100%),linear-gradient(180deg,rgba(16,32,34,.42) 0%,rgba(16,32,34,.14) 42%,rgba(12,30,32,.58) 100%)}
.proposal .hero-content{padding:120px 0 110px}.proposal .wrap{max-width:1320px;padding:0 clamp(28px,6vw,88px)}
.proposal .intro-label{display:flex;align-items:center;gap:12px;color:#e0f0e9;font-size:11px;font-weight:500;letter-spacing:.19em;margin-bottom:27px}
.light-dot{width:7px;height:7px;border-radius:50%;background:#dbeee0;box-shadow:0 0 0 5px #dbeee013,0 0 16px #e4cf9580}
.proposal h1{font-size:clamp(64px,6.6vw,98px);line-height:1.005;letter-spacing:-.055em;font-weight:500;text-shadow:none;margin-bottom:28px}
.proposal .light-word{color:#c6e6d7}.proposal .sub{font-size:15px;line-height:1.75;max-width:410px;color:#f0f6f1;text-wrap:pretty}
.proposal .actions{margin-top:27px;gap:22px;align-items:center}.proposal .btn{padding:17px 23px;font-size:14px}.proposal .btn-ghost{background:#edf3ed;box-shadow:none;gap:30px;border-radius:8px}.proposal .calm-contact{color:#fff;padding-left:0;padding-right:0;background:transparent;border-radius:0;box-shadow:none;border-bottom:1px solid #d4e7de77;gap:15px}
.proposal .gentle-note{margin-top:28px;color:#cfe2db;font-size:11.5px;letter-spacing:.025em;display:flex;align-items:center;gap:9px}.gentle-note span{width:22px;height:1px;background:#b3d5c5}
.hero-foot{position:absolute;left:0;right:0;bottom:26px;padding:0 clamp(28px,6vw,88px);display:flex;justify-content:space-between;align-items:center;z-index:4;color:#e9f3ed;font-size:11px;letter-spacing:.04em}.discover{color:inherit;text-decoration:none;display:flex;gap:15px;align-items:center}.discover span{font-size:19px}.hero-foot button{font:inherit;color:inherit;background:#183f4433;border:1px solid #e5f3ef40;border-radius:99px;padding:9px 13px;display:flex;gap:9px;align-items:center;cursor:pointer;backdrop-filter:blur(8px)}.hero-foot button:hover{background:#183f4466}.hero-foot button:focus-visible,.discover:focus-visible{outline:2px solid white;outline-offset:4px}
.nav .bar{max-width:1320px;padding-left:clamp(28px,6vw,88px);padding-right:clamp(28px,6vw,88px)}
@media(min-width:1700px){.proposal .hero-content{padding-top:140px}.proposal .sub{font-size:16px;max-width:445px}}
@media(max-width:1000px) and (min-width:701px){.proposal{min-height:790px}.proposal h1{font-size:72px}.proposal .sub{max-width:350px}.proposal .hero-shade{background:linear-gradient(90deg,rgba(14,30,32,.72) 0%,rgba(14,30,32,.46) 40%,rgba(14,30,32,.10) 72%,rgba(14,30,32,0) 100%),linear-gradient(180deg,rgba(16,32,34,.42) 0%,rgba(16,32,34,.14) 42%,rgba(12,30,32,.58) 100%)}}
@media(max-width:700px){.proposal{height:auto;max-height:none;min-height:980px;align-items:flex-start}.proposal .seascape{top:48px;height:540px}.seascape img{object-position:85% center}.proposal .hero-shade{background:linear-gradient(0deg,#28585c 0%,#28585c 35%,#28585ceb 46%,#28585c33 64%,#183f4415 85%,#183f4433)}.proposal .hero-content{padding:390px 0 100px}.proposal .intro-label{font-size:9px;letter-spacing:.16em;margin-bottom:19px}.proposal h1{font-size:64px;line-height:1.02;margin-bottom:24px}.proposal .sub{font-size:14px;max-width:360px}.proposal .actions{gap:20px;flex-wrap:wrap}.proposal .btn{font-size:12px;padding:15px 17px}.proposal .calm-contact{padding-left:0;padding-right:0}.proposal .gentle-note{font-size:10px}.hero-foot{font-size:9px;bottom:22px}.hero-foot .motion-label{display:none}.hero-foot button{padding:10px 14px}.nav .cta{display:none}.nav .bar{padding-top:17px;padding-bottom:17px}.nav .brand .n{font-size:17px}}
@media(prefers-reduced-motion:reduce){.proposal *{animation:none!important;transition:none!important}.proposal [data-hero]{opacity:1;transform:none}}


.proposal .hero-content{padding-top:135px;padding-bottom:115px}
.proposal h1{font-size:clamp(66px,7.2vw,106px);font-weight:600;letter-spacing:-.055em;line-height:1.06;margin-bottom:18px}
.proposal .hero-motto{color:#f1f7f1;font-size:clamp(21px,2.55vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.35;margin-bottom:clamp(58px,9vh,105px)}
.hero-motto span{color:#c6e6d7;font-weight:400;padding:0 .06em}
.proposal .sub{max-width:430px}
.hero-signet{position:absolute;z-index:0;width:clamp(320px,42vw,640px);height:auto;object-fit:contain;left:-55px;top:12%;opacity:.16;pointer-events:none;transform:rotate(-5deg)}
.proposal .hero-content{z-index:2}
@media(min-width:1700px){.hero-signet{left:2%;top:13%}}
@media(max-width:1000px) and (min-width:701px){.proposal h1{font-size:80px}.proposal .hero-motto{font-size:24px}.hero-signet{width:470px;left:-70px;top:18%}}
@media(max-width:700px){.proposal{min-height:980px}.proposal .hero-content{padding-top:420px;padding-bottom:115px}.proposal h1{font-size:clamp(49px,13.5vw,78px);margin-bottom:12px;letter-spacing:-.05em}.proposal .hero-motto{font-size:clamp(16px,4.4vw,25px);margin-bottom:36px;white-space:nowrap;letter-spacing:-.035em}.proposal .intro-label{font-size:8px;letter-spacing:.16em}.hero-signet{width:310px;left:-54px;top:405px;opacity:.13}.proposal .sub{font-size:14px}.proposal .gentle-note{margin-top:25px}}


.proposal{--shine:.45;min-height:780px;max-height:1000px}
.proposal .hero-shade{background:linear-gradient(90deg,rgba(14,30,32,.72) 0%,rgba(14,30,32,.46) 40%,rgba(14,30,32,.10) 72%,rgba(14,30,32,0) 100%),linear-gradient(180deg,rgba(16,32,34,.42) 0%,rgba(16,32,34,.14) 42%,rgba(12,30,32,.58) 100%)}
.proposal h1{color:#fffaf0;text-shadow:0 0 16px rgb(255 223 162 / var(--shine)),0 0 65px rgb(246 217 162 / calc(var(--shine) * .55));font-weight:500}
.proposal .hero-motto{font-weight:400;color:#f0f3e8;letter-spacing:-.035em;text-shadow:0 0 24px rgb(255 231 182 / calc(var(--shine) * .6));margin-bottom:66px}
.illuminated-word{font-weight:500;color:#f5dfae;text-shadow:0 0 14px rgb(255 219 134 / var(--shine)),0 0 35px rgb(255 224 154 / calc(var(--shine) * .7))}
.hero-signet{opacity:.09;top:17%;width:500px}
.proposal .intro-label{color:#d8eee3}.proposal .hero-content{padding-top:120px}
.proposal .btn-ghost{background:#edf2e6}
@media(max-width:700px){.proposal{min-height:980px;max-height:none}.proposal .seascape{top:0;height:560px}.proposal .hero-content{padding-top:408px}.proposal .hero-shade{background:linear-gradient(0deg,#28585c 0%,#28585c 37%,#28585cf2 48%,#28585c22 68%,#183f4422 85%,#183f4466)}.proposal h1{font-weight:500}.proposal .hero-motto{margin-bottom:36px}.hero-signet{top:410px;width:300px;opacity:.1}}


.seascape video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:85% center}

.nav .brand>.bv-motion{display:block;width:42px;height:46px;flex:none}.nav.scrolled .brand>.bv-motion{background:var(--petrol);border-radius:9px;padding:4px}.nav.mobile-open .brand>.bv-motion{background:none;padding:0}@media(max-width:700px){.nav .brand>.bv-motion{width:36px;height:40px}}

/* Fliesstext lief auf dem Handy ueber den Rand (max-width 360px bei 334px Platz) */
@media(max-width:700px){ .proposal .sub{max-width:100%} }


/* Leuchten neu aufgebaut: enger heller Kern + mittlerer Hof + weiter Schein.
   Vorher nur 16px und 65px – der grosse Radius war zu diffus, um zu wirken. */
.proposal{--shine:.8}
.proposal h1{
  text-shadow:
    0 0 5px  rgb(255 244 215 / calc(var(--shine) * 1.1)),
    0 0 17px rgb(255 228 172 / calc(var(--shine) * .95)),
    0 0 46px rgb(250 215 150 / calc(var(--shine) * .62)),
    0 0 98px rgb(246 210 140 / calc(var(--shine) * .42))}
.proposal .hero-motto{
  text-shadow:
    0 0 4px  rgb(255 244 218 / calc(var(--shine) * .6)),
    0 0 19px rgb(255 231 182 / calc(var(--shine) * .72)),
    0 0 54px rgb(250 220 160 / calc(var(--shine) * .42))}
.proposal .illuminated-word{
  text-shadow:
    0 0 4px  rgb(255 240 195 / calc(var(--shine) * 1.1)),
    0 0 15px rgb(255 219 134 / calc(var(--shine) * .95)),
    0 0 38px rgb(255 224 154 / calc(var(--shine) * .72)),
    0 0 78px rgb(255 215 130 / calc(var(--shine) * .46))}


/* Handy: Inhalt tiefer, damit er auf der vollen Farbe steht statt auf dem Bild.
   Der Verlauf ist ab ca. 63 % der Hero-Hoehe deckend – vorher begann der Text darueber. */
@media(max-width:700px){
  .proposal .hero-content{padding-top:495px}
  /* Verlauf in Pixeln statt Prozent: sonst verschiebt sich die deckende Zone,
     sobald der Hero durch mehr Textumbrueche hoeher wird (z.B. bei 360px). */
  .proposal .hero-shade{background:linear-gradient(180deg,
    rgba(11,33,36,.62) 0px,
    rgba(11,33,36,.40) 140px,
    rgba(11,33,36,.33) 300px,
    rgba(16,45,48,.50) 400px,
    rgba(40,88,92,.90) 470px,
    #28585c 515px,
    #28585c 100%)}
}


/* Scroll-Hinweis von der Live-Seite, links statt "Lichtimpuls kennenlernen".
   Buendig mit dem Hero-Text: .hero-foot hat denselben Innenabstand wie .wrap. */
.hero-foot .scroll-cue{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:rgba(255,255,255,.85);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.hero-foot .scroll-cue:hover{color:#fff}
.hero-foot .scroll-cue:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-foot .scroll-cue i{display:block;width:1.5px;height:34px;flex:none;
  background:linear-gradient(180deg,#fff,transparent);
  animation:scrollcue 1.8s ease-in-out infinite}
@keyframes scrollcue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){ .hero-foot .scroll-cue i{animation:none} }


/* Home-Hero: exakt derselbe Scrim wie .page-hero.hero-img .scrim auf den Unterseiten
   (links .58 -> rechts 0, oben .42 / unten .58) statt der frueheren, dunkleren Fassung (.72/.46). */
@media(min-width:701px){
  .proposal .hero-shade{background:
    linear-gradient(90deg,rgba(14,30,32,.58) 0%,rgba(14,30,32,.34) 40%,rgba(14,30,32,.06) 72%,rgba(14,30,32,0) 100%),
    linear-gradient(180deg,rgba(16,32,34,.42) 0%,rgba(16,32,34,.14) 42%,rgba(12,30,32,.58) 100%)!important}
}
@media(max-width:700px){
  /* oben liegt der Uebergang in die volle Farbe (Text steht darauf), darunter derselbe Scrim,
     auf das Bildband begrenzt - in Pixeln, weil die Hero-Hoehe mit dem Textumbruch variiert */
  .proposal .hero-shade{background:
    linear-gradient(180deg,rgba(40,88,92,0) 0px,rgba(40,88,92,0) 330px,rgba(40,88,92,.90) 470px,#28585c 515px,#28585c 100%),
    linear-gradient(90deg,rgba(14,30,32,.58) 0%,rgba(14,30,32,.34) 40%,rgba(14,30,32,.06) 72%,rgba(14,30,32,0) 100%) top/100% 520px no-repeat,
    linear-gradient(180deg,rgba(16,32,34,.42) 0px,rgba(16,32,34,.14) 220px,rgba(16,32,34,.14) 520px) top/100% 520px no-repeat!important}
}


/* ===== Hero-Vorschlag "zentriert": Signet ueber dem Titel, alles mittig, Signet + Titel werden vom
   Leuchtturm angeschienen. Aufbau angelehnt an nataschamettler.ch (Logo - Wortmarke - Buttons, mittig),
   Animation eigenstaendig: der Lichtkegel waechst von der Laterne zur Mitte, dann "zuenden" Signet und Titel. */
.proposal.centered .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:980px}
.proposal.centered .hero-lockup{display:flex;flex-direction:column;align-items:center}
.proposal.centered .hero-logo{position:relative;width:clamp(86px,8.4vw,124px);aspect-ratio:1;margin-bottom:20px;
  animation:logoFloat 7s ease-in-out 3.2s infinite}
.proposal.centered .hero-logo img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 0 5px rgb(255 242 210 / calc(var(--shine) * .95)))
         drop-shadow(0 0 24px rgb(255 224 160 / calc(var(--shine) * .62)))
         drop-shadow(0 12px 28px rgba(8,28,30,.30))}
/* Streiflicht von rechts (dort steht der Leuchtturm): waermt die rechte Kante des Signets */
.proposal.centered .hero-logo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(270deg,rgba(255,224,158,.95) 0%,rgba(255,224,158,.45) 38%,rgba(255,224,158,0) 72%);
  -webkit-mask:url(/li/img/e-8e52e92f27.png) center/contain no-repeat;mask:url(/li/img/e-8e52e92f27.png) center/contain no-repeat;
  opacity:calc(var(--shine) * .85)}
.proposal.centered .intro-label{justify-content:center;margin-bottom:16px}
.proposal.centered h1{position:relative;margin-bottom:14px}
/* einmaliger Lichtschweif ueber den Titel, von rechts nach links - so wie das Licht ankommt */
.proposal.centered h1::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;text-shadow:none;
  background:linear-gradient(100deg,rgba(255,236,190,0) 42%,rgba(255,240,200,.98) 50%,rgba(255,236,190,0) 58%) no-repeat;
  background-size:300% 100%;background-position:-50% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleSweep 1.9s cubic-bezier(.3,.1,.2,1) 1.75s 1 both}
.proposal.centered .hero-motto{margin-bottom:clamp(26px,4vh,40px)}
.proposal.centered .sub{max-width:610px;margin-inline:auto;text-wrap:balance}
.proposal.centered .actions{justify-content:center}
.proposal.centered .gentle-note{justify-content:center}
.proposal.centered .gentle-note span{flex:none}
.proposal.centered .hero-content{width:100%}

/* Overlay: mittig statt links - weicher Petrol-Hof hinter dem Textblock, Raender wie auf den Unterseiten */
@media(min-width:701px){
  .proposal.centered .hero-shade{background:
    radial-gradient(ellipse 58% 62% at 50% 52%,rgba(14,30,32,.50) 0%,rgba(14,30,32,.34) 45%,rgba(14,30,32,0) 100%),
    linear-gradient(90deg,rgba(14,30,32,.30) 0%,rgba(14,30,32,.08) 45%,rgba(14,30,32,0) 70%),
    linear-gradient(180deg,rgba(16,32,34,.42) 0%,rgba(16,32,34,.14) 42%,rgba(12,30,32,.58) 100%)!important}
}

/* Lichtkegel: Position, Laenge und Winkel setzt das Skript aus der echten Lage der Laterne im Video */
.beam-fx{position:absolute;z-index:-1;left:var(--bx,60%);top:var(--by,26%);width:var(--bl,40%);height:var(--bh,300px);
  transform-origin:100% 50%;transform:translateY(-50%) rotate(var(--ba,0deg));pointer-events:none;mix-blend-mode:screen;
  filter:blur(26px);   /* Weichzeichnung am Elternelement: clip-path am Kind wuerde sie sonst hart abschneiden */
  opacity:calc(.18 + var(--shine) * .5)}
.beam-fx i{display:block;width:100%;height:100%;transform-origin:100% 50%;
  clip-path:polygon(100% 47.5%,100% 52.5%,0 100%,0 0);
  background:linear-gradient(270deg,rgba(255,234,188,.62) 0%,rgba(255,226,170,.40) 30%,rgba(255,224,165,.20) 68%,rgba(255,224,165,0) 100%);
  animation:beamGrow 1.7s cubic-bezier(.2,.7,.2,1) .35s 1 backwards}
@media(max-width:700px){ .beam-fx{display:none} }   /* mobil staende der Text unter dem Turm - ein Kegel nach unten waere unlogisch */

/* Einblenden, gestaffelt - Grundzustand ist sichtbar, damit ohne Animation nichts fehlt */
.proposal.centered [data-in]{animation:riseIn 1s cubic-bezier(.2,.7,.2,1) backwards}
.proposal.centered [data-in="1"]{animation-name:logoIn;animation-duration:1.3s;animation-delay:1.0s}
.proposal.centered [data-in="2"]{animation-delay:1.25s}
.proposal.centered [data-in="3"]{animation-name:titleIn;animation-duration:1.25s;animation-delay:1.35s}
.proposal.centered [data-in="4"]{animation-delay:1.7s}
.proposal.centered [data-in="5"]{animation-delay:1.95s}
.proposal.centered [data-in="6"]{animation-delay:2.15s}
.proposal.centered [data-in="7"]{animation-delay:2.35s}
/* Signet: Einblenden (einmal) + sanftes Schweben (dauernd) */
.proposal.centered .hero-logo[data-in="1"]{animation:logoIn 1.3s cubic-bezier(.2,.7,.2,1) 1.0s 1 backwards,logoFloat 7s ease-in-out 3.2s infinite}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}}
@keyframes logoIn{from{opacity:0;transform:translateY(10px) scale(.9);filter:blur(10px)}}
@keyframes titleIn{from{opacity:0;transform:translateY(16px);letter-spacing:-.02em;filter:blur(6px)}}
@keyframes titleSweep{from{background-position:-50% 0}to{background-position:150% 0}}
@keyframes beamGrow{from{transform:scaleX(0);opacity:0}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.proposal.centered.is-paused .hero-logo{animation-play-state:paused}

@media(max-width:700px){
  /* Signet sitzt im Uebergang vom Bild in die volle Farbe, Text wie bisher auf der vollen Farbe */
  .proposal.centered .hero-content{padding-top:392px}
  .proposal.centered .hero-logo{width:84px;margin-bottom:22px}
  .proposal.centered .intro-label{margin-bottom:12px}
  .proposal.centered .hero-motto{margin-bottom:26px}
  .proposal.centered .sub{max-width:100%}
  .proposal.centered .actions{gap:18px}
}
/* Tablet: Bildausschnitt nach links schieben, damit der Turm rechts neben dem mittigen Titel frei steht */
@media(min-width:701px) and (max-width:1100px){
  .proposal.centered .seascape video{object-position:74% center}
  .proposal.centered .sub{max-width:500px}
}
@media(prefers-reduced-motion:reduce){ .proposal.centered h1::after{display:none} }


/* TEST 17.09.2026: Hero reduziert wie bei nataschamettler.ch - nur Signet, Titel, Claim, Buttons.
   Fliesstext und "Behutsam. Achtsam. In deinem Tempo." sind nur ausgeblendet (stehen weiter im HTML).
   Rueckgaengig: diesen <style>-Block loeschen. */
.proposal.centered .sub,.proposal.centered .gentle-note{display:none}
.proposal.centered .hero-motto{margin-bottom:0}
.proposal.centered .actions{margin-top:clamp(34px,5vh,48px)}
@media(min-width:701px){ .proposal.centered .hero-content{padding-bottom:150px} }   /* Block leicht ueber der Mitte = im Lichtkegel */
@media(max-width:700px){
  .proposal.centered{min-height:0}
  .proposal.centered .hero-content{padding-bottom:120px}
}


/* "Leuchten" in derselben Farbe und mit demselben Schein wie "Aktivieren - Klaeren" (nur zentrierte Variante) */
.proposal.centered .illuminated-word{color:inherit;font-weight:inherit;text-shadow:inherit}


/* "LOGOSYNTHESE & ENERGIEARBEIT" gleich gross wie die Eyebrows (.eyebrow = 14px / 500), z.B. "Willkommen bei Lichtimpuls" */
.proposal.centered .intro-label{font-size:14px;font-weight:500;letter-spacing:.16em;margin-bottom:18px}
.proposal.centered .intro-label .light-dot{flex:none}
@media(max-width:700px){
  /* Versalien laufen breit: Sperrung zuruecknehmen, damit die Zeile auch auf 360 px einzeilig bleibt */
  .proposal.centered .intro-label{font-size:clamp(12.5px,3.6vw,14px);letter-spacing:.07em;gap:9px;white-space:nowrap;margin-bottom:14px}
}


/* TEST 17.09.2026: "LOGOSYNTHESE & ENERGIEARBEIT" im Hero ausgeblendet (steht weiter im HTML), damit Signet und
   Titel direkt untereinander stehen und gemeinsam vom Leuchtturm angeschienen wirken. Rueckgaengig: Block loeschen. */
.proposal.centered .intro-label{display:none}
.proposal.centered .hero-logo{margin-bottom:clamp(12px,1.6vw,20px)}
/* dasselbe Streiflicht von rechts wie auf dem Signet, jetzt auch auf dem Titel - pulsiert mit dem Licht im Video */
.proposal.centered h1::before{content:attr(data-text);position:absolute;inset:0;pointer-events:none;text-shadow:none;
  background:linear-gradient(270deg,rgba(255,221,150,.95) 0%,rgba(255,224,158,.50) 34%,rgba(255,224,158,0) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:calc(var(--shine) * .8)}


/* ===== Auftritt "eingeleuchtet": Das Licht kommt vom Leuchtturm rechts und laeuft nach links ueber den Inhalt.
   GSAP steuert eine Lichtfront (Maske von rechts nach links) + Lichtstaub auf einem Canvas.
   Solange .js-reveal gesetzt ist, sind die CSS-Einblendungen aus; faellt GSAP aus, nimmt das Skript die Klasse
   wieder weg und die CSS-Einblendungen laufen wie bisher. */
.js-reveal .proposal.centered .hero-content{opacity:0}
.js-reveal .proposal.centered [data-in]{animation:none}
.js-reveal .proposal.centered .hero-logo[data-in="1"]{animation:logoFloat 7s ease-in-out 2.6s infinite}
.js-reveal .proposal.centered h1::after{animation:none}
.js-reveal .proposal.centered h1.swept::after{animation:titleSweep 1.7s cubic-bezier(.3,.1,.2,1) 0s 1 both}
.js-reveal .beam-fx i{animation:none;transform:scaleX(0)}
.light-dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){ .light-dust{display:none} }


/* TEST 17.09.2026 (Stand B): Navigationsbalken von Beginn an wie auf den Unterseiten. Der Hero beginnt unter dem Balken,
   der Inhalt bleibt auf derselben Hoehe wie vorher, das Video rutscht tiefer - so steht die Laterne auf Hoehe von
   Signet + Titel und leuchtet sie von der Seite an. Stand A (Navigation transparent) liegt als
   lichtimpuls-startseite-video-zentriert_STAND-A.html daneben. */
body.nav-fest .proposal.centered{margin-top:var(--navh,62px)}
@media(min-width:701px){
  body.nav-fest .proposal.centered{height:calc(100svh - var(--navh,62px));min-height:calc(780px - var(--navh,62px));max-height:calc(1000px - var(--navh,62px))}
  /* gleiche Bildschirmhoehe fuer den Inhalt wie vorher: was der Balken oben wegnimmt, kommt beim Innenabstand weg */
  body.nav-fest .proposal.centered .hero-content{padding-top:calc(120px - var(--navh,62px))}
  /* Video tiefer: --vshift rechnet das Skript aus (Laterne auf Hoehe Signet/Titel).
     WICHTIG (Flackern auf Laptops): Die Video-Box darf NICHT ueber den Hero hinausragen und das Video selbst darf keine
     CSS-Maske tragen. Beides zusammen liess Chrome auf Laptops (Video als Hardware-Ebene) den sichtbaren Videoteil
     zeitweise an der falschen Stelle zeichnen - unten blieb dann ein Streifen in Hoehe des Versatzes leer.
     Deshalb: Box = genau der sichtbare Bereich (oben --vshift, unten buendig), Bild oben verankert (object-position top). */
  body.nav-fest .proposal.centered.has-vshift .seascape video{top:var(--vshift,0px);bottom:0;height:calc(100% - var(--vshift,0px));
    object-position:var(--opx,85%) top;z-index:1}
  /* Streifen ueber dem Video: gespiegelter Himmel des Standbilds (::before). Der weiche Uebergang liegt als eigenes,
     statisches Element UEBER dem Video (::after, Standbild mit Verlauf nach transparent) - nicht mehr als Maske am Video. */
  body.nav-fest .proposal.centered.has-vshift .seascape::before,
  body.nav-fest .proposal.centered.has-vshift .seascape::after{content:"";position:absolute;left:0;right:0;
    height:calc(100% - var(--vshift,0px));pointer-events:none;
    background:url(/li/hero-video/ferne/hero_v2slow_hq_poster.jpg) var(--opx,85%) top/cover no-repeat}
  body.nav-fest .proposal.centered.has-vshift .seascape::before{top:calc(var(--vshift,0px) * 2 - 100%);transform:scaleY(-1);z-index:0}
  body.nav-fest .proposal.centered.has-vshift .seascape::after{top:var(--vshift,0px);z-index:2;
    -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 120px);mask-image:linear-gradient(180deg,#000 0,transparent 120px)}
  body.nav-fest .proposal.centered .hero-shade{background:
    radial-gradient(ellipse 58% 64% at 50% 47%,rgba(14,30,32,.50) 0%,rgba(14,30,32,.34) 45%,rgba(14,30,32,0) 100%),
    linear-gradient(90deg,rgba(14,30,32,.30) 0%,rgba(14,30,32,.08) 45%,rgba(14,30,32,0) 70%),
    linear-gradient(180deg,rgba(16,32,34,.42) 0%,rgba(16,32,34,.14) 42%,rgba(12,30,32,.58) 100%)!important}
}
@media(min-width:701px) and (max-width:1100px){ body.nav-fest .proposal.centered{--opx:74%} }


/* Licht-Ebenen ueber die Titel-Box hinaus vergroessern (Innenabstand gleicht es aus, der Text bleibt deckungsgleich),
   damit auch Unterlaengen (p) und der ueberstehende letzte Buchstabe (s) getoent werden */
.proposal.centered h1::before,.proposal.centered h1::after{inset:-.3em -.16em;padding:.3em .16em}


/* Der Lichtstrahl ist im Video eingebrannt und waere schon vor dem Auftritt zu sehen. Bis das Licht "angeht", liegt
   deshalb eine Multiplikations-Karte ueber dem laufenden Video, die nur den Lichtschleier des Strahls herausrechnet
   (weiss = unveraendert; erzeugt mit hero-video/ferne/strahl-abdeckung-erzeugen.py). Wolken, Wellen und Korn bleiben
   lebendig - es liegt kein Flicken darueber. Das Skript wischt die Karte von der Laterne her zuegig nach links weg.
   Deckungsgleich mit dem Video: gleiche Box, gleiches object-position. Ohne Skript/GSAP bleibt sie aus. */
.beam-cover{display:none}
body.nav-fest .proposal.centered.has-vshift .beam-cover{height:calc(100% - var(--vshift,0px));background-position:var(--opx,85%) top;z-index:3}
.js-reveal .proposal.centered .beam-cover{display:block;position:absolute;left:0;right:0;top:var(--vshift,0px);height:100%;z-index:2;
  pointer-events:none;mix-blend-mode:multiply;background:url(/li/img/e-0858ef4f3e.webp) var(--opx,85%) center/cover no-repeat}


/* Bindestriche im Claim in derselben Farbe, Staerke und mit demselben Schein wie "Aktivieren", "Klaeren", "Leuchten" */
.proposal.centered .hero-motto span{color:inherit;font-weight:inherit}


/* "Bereit fuer deinen Lichtimpuls?": Abstand nach oben = Abstand nach unten zum Footer. Vorher addierten sich oben der
   untere Innenabstand des FAQ-Bereichs und der obere des CTA-Bereichs (2 x 116 px), unten stand nur 1 x 116 px. */
section[aria-label="Kontakt aufnehmen"]{padding-top:0}


/* Signet-Leuchten ohne CSS-Filter und ohne Maske (18.09.2026): iOS Safari zeichnet bei filter:drop-shadow auf dem
   animierten Bild ein schwaches Rechteck (die Layer-Grenze des Elements) - man sah das Signet "eingefuegt". Schein
   (warme rechte Kante + beide Scheine) und Schlagschatten liegen deshalb als vorgerechnete PNG-Ebenen unter/ueber dem
   Bild (hero-video/ferne/signet-ebenen-erzeugen.py); nur noch die Deckkraft folgt --shine. Nebeneffekt: kein
   Filter-Neuaufbau pro Frame mehr. */
.proposal.centered .hero-logo{isolation:isolate}
.proposal.centered .hero-logo img{filter:none}
.proposal.centered .hero-logo::before,.proposal.centered .hero-logo::after{content:"";position:absolute;inset:-36.36%;pointer-events:none;
  background-position:center;background-size:100% 100%;background-repeat:no-repeat;-webkit-mask:none;mask:none}
.proposal.centered .hero-logo::before{z-index:-1;background-image:url(/li/img/e-b6dc96190d.png);opacity:1}
.proposal.centered .hero-logo::after{background-image:url(/li/img/e-6b0f14075f.png);opacity:min(1,var(--shine,1))}