/* Heller Digital · auf jeder Seite geladen (klein halten).
   1. Logo im Hintergrund: Klassen für das Feld „CSS-Klassen“ (Elementor → Erweitert) an jedem Widget oder Container.
        hd-logo-rechts        Bildmarke rechts angeschnitten
        hd-logo-links         Bildmarke links angeschnitten
        hd-logo-schraeg       schräg unten rechts, größer
        hd-logo-schraeg-links schräg unten links, größer
      Dazu wahlweise hd-logo-still (ohne Bewegung) oder hd-logo-kraeftig (etwas deutlicher).
      Die Marke liegt mit „multiply“ über dem Inhalt: auf Weiß als zarter blauer Abdruck, auf Schrift unsichtbar,
      auf dunklen Flächen verschwindet sie ganz. Nichts ragt aus dem Element heraus (kein seitlicher Überlauf). */

.hd-logo-rechts,.hd-logo-links,.hd-logo-schraeg,.hd-logo-schraeg-links{position:relative;--hd-logo-deckung:.075}
.hd-logo-kraeftig{--hd-logo-deckung:.12}
.hd-logo-rechts::after,.hd-logo-links::after,.hd-logo-schraeg::after,.hd-logo-schraeg-links::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#5aa0d6,#1f5aa6);opacity:var(--hd-logo-deckung);mix-blend-mode:multiply;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:hd-logo-schweben 16s ease-in-out infinite alternate}
.hd-logo-rechts::after,.hd-logo-links::after{-webkit-mask-image:url(../marke/heller-bildmarke.svg);mask-image:url(../marke/heller-bildmarke.svg);-webkit-mask-size:auto min(74%,560px);mask-size:auto min(74%,560px)}
.hd-logo-rechts::after{-webkit-mask-position:112% 55%;mask-position:112% 55%}
.hd-logo-links::after{-webkit-mask-position:-12% 45%;mask-position:-12% 45%}
.hd-logo-schraeg::after,.hd-logo-schraeg-links::after{-webkit-mask-image:url(../marke/heller-bildmarke-schraeg.svg);mask-image:url(../marke/heller-bildmarke-schraeg.svg);-webkit-mask-size:auto min(92%,720px);mask-size:auto min(92%,720px)}
.hd-logo-schraeg::after{-webkit-mask-position:118% 100%;mask-position:118% 100%}
.hd-logo-schraeg-links::after{-webkit-mask-position:-18% 100%;mask-position:-18% 100%}
.hd-logo-still::after{animation:none}
@keyframes hd-logo-schweben{from{transform:translateY(-1.2%)}to{transform:translateY(1.2%)}}
@media (max-width:767px){
	.hd-logo-rechts::after,.hd-logo-links::after{-webkit-mask-size:auto min(46%,260px);mask-size:auto min(46%,260px)}
	.hd-logo-schraeg::after,.hd-logo-schraeg-links::after{-webkit-mask-size:auto min(52%,320px);mask-size:auto min(52%,320px)}
}
@media (prefers-reduced-motion:reduce){.hd-logo-rechts::after,.hd-logo-links::after,.hd-logo-schraeg::after,.hd-logo-schraeg-links::after{animation:none}}

/* 2. Akzentwort im Heller-Verlauf (4.12.3, Wunsch 01.10.2026): Klasse am Widget (Elementor → Erweitert → CSS-Klassen).
      hd-verlauf-an       helle Abschnitte: Dunkelblau → Heller-Blau → Hellblau
      hd-verlauf-dunkel   dunkle Abschnitte: Blau → Hellblau → fast Weiß
   Greift auf das hervorgehobene Wort in h1/h2 (em bzw. .hdm-lh-hl). text-fill statt color, damit die Farbregeln der
   Bausteine nicht dagegen arbeiten. Bewusst nur für Heros, Team und Abschlüsse, nicht für jede Zwischenüberschrift. */
.hd-verlauf-an :is(h1,h2) :is(em,.hdm-lh-hl),.hd-verlauf-dunkel :is(h1,h2) :is(em,.hdm-lh-hl){background:linear-gradient(92deg,#2154A6 0%,#0A55F0 48%,#5FB7FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.hd-verlauf-dunkel :is(h1,h2) :is(em,.hdm-lh-hl){background-image:linear-gradient(92deg,#4F9BFF 0%,#5FB7FF 45%,#C4E8FF 100%)}