.elementor-kit-6{--e-global-color-primary:#FF6A33;--e-global-color-secondary:#21456B;--e-global-color-text:#EDECE7;--e-global-color-accent:#9A988F;--e-global-color-grund:#101216;--e-global-color-karte:#16181D;--e-global-color-linie:#2A2D34;--e-global-color-hover:#E5551B;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-primary-letter-spacing:-0.5px;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:2.5px;background-color:#101216;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   PRO-LOCK — Kit CSS
   1) Wolken-Varianten   2) Raster   3) Text-Verlaeufe
   ============================================================ */

/* ===== 1) WOLKEN =============================================
   Anwendung: Abschnitt -> Erweitert -> CSS-Klassen
   z.B.  pl-wolke-original pl-raster
   Varianten: original | mono | stahl | glut
   ============================================================ */

[class*="pl-wolke-"]{position:relative;overflow:hidden;isolation:isolate;}
[class*="pl-wolke-"] > .e-child{position:relative;z-index:2;}
[class*="pl-wolke-"] .e-con-inner{position:relative;z-index:2;}

/* Wolke A */
[class*="pl-wolke-"]::before{
  content:"";position:absolute;inset:-45%;z-index:0;pointer-events:none;
  filter:blur(62px);
  animation:plDriftA 16s ease-in-out infinite alternate;
  will-change:transform;
}
/* Wolke B - gegenlaeufig, nur erstes Kind */
[class*="pl-wolke-"] > .e-child:first-child::before{
  content:"";position:absolute;inset:-60% -40%;z-index:-1;pointer-events:none;
  filter:blur(72px);
  animation:plDriftB 21s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes plDriftA{
  0%  {transform:translate3d(-14%,-10%,0) scale(1.00);}
  50% {transform:translate3d(12%,8%,0)   scale(1.28);}
  100%{transform:translate3d(-6%,13%,0)  scale(1.12);}
}
@keyframes plDriftB{
  0%  {transform:translate3d(11%,9%,0)   scale(1.18);}
  50% {transform:translate3d(-13%,-7%,0) scale(1.00);}
  100%{transform:translate3d(8%,-12%,0)  scale(1.24);}
}

/* --- Variante 1: ORIGINAL (Orange + Blau) --- */
.pl-wolke-original::before{
  background:
    radial-gradient(closest-side circle at 20% 30%, rgba(255,106,51,.60), transparent 68%),
    radial-gradient(closest-side circle at 78% 66%, rgba(38,110,190,.55), transparent 70%),
    radial-gradient(closest-side circle at 58% 14%, rgba(255,150,70,.38), transparent 62%);
}
.pl-wolke-original > .e-child:first-child::before{
  background:
    radial-gradient(closest-side circle at 72% 22%, rgba(255,106,51,.42), transparent 66%),
    radial-gradient(closest-side circle at 24% 74%, rgba(45,130,215,.42), transparent 68%);
}

/* --- Variante 2: MONO (nur Orange) --- */
.pl-wolke-mono::before{
  background:
    radial-gradient(closest-side circle at 22% 32%, rgba(255,106,51,.55), transparent 68%),
    radial-gradient(closest-side circle at 76% 64%, rgba(229,85,27,.45), transparent 70%),
    radial-gradient(closest-side circle at 55% 12%, rgba(255,150,70,.30), transparent 62%);
}
.pl-wolke-mono > .e-child:first-child::before{
  background:
    radial-gradient(closest-side circle at 70% 25%, rgba(255,106,51,.36), transparent 66%),
    radial-gradient(closest-side circle at 26% 72%, rgba(180,60,15,.34), transparent 68%);
}

/* --- Variante 3: STAHL (kuehl, technisch) --- */
.pl-wolke-stahl::before{
  background:
    radial-gradient(closest-side circle at 20% 30%, rgba(90,140,190,.50), transparent 68%),
    radial-gradient(closest-side circle at 78% 66%, rgba(33,69,107,.60), transparent 70%),
    radial-gradient(closest-side circle at 58% 14%, rgba(150,175,200,.28), transparent 62%);
}
.pl-wolke-stahl > .e-child:first-child::before{
  background:
    radial-gradient(closest-side circle at 72% 22%, rgba(70,120,175,.40), transparent 66%),
    radial-gradient(closest-side circle at 24% 74%, rgba(120,150,180,.34), transparent 68%);
}

/* --- Variante 4: GLUT (warm) --- */
.pl-wolke-glut::before{
  background:
    radial-gradient(closest-side circle at 20% 32%, rgba(255,106,51,.62), transparent 68%),
    radial-gradient(closest-side circle at 76% 62%, rgba(190,40,10,.50), transparent 70%),
    radial-gradient(closest-side circle at 56% 12%, rgba(255,190,90,.40), transparent 62%);
}
.pl-wolke-glut > .e-child:first-child::before{
  background:
    radial-gradient(closest-side circle at 70% 24%, rgba(255,140,40,.44), transparent 66%),
    radial-gradient(closest-side circle at 26% 74%, rgba(140,30,5,.40), transparent 68%);
}

/* ===== 2) RASTER (optional, Klasse: pl-raster) ===== */
.pl-raster{position:relative;overflow:hidden;}
.pl-raster::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(237,236,231,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,236,231,.07) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 44%, #000 35%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 44%, #000 35%, transparent 100%);
  animation:plGrid 16s linear infinite;
  will-change:background-position;
}
@keyframes plGrid{
  from{background-position:0 0, 0 0;}
  to{background-position:64px 64px, 64px 64px;}
}

/* ===== 3) TEXT-VERLAEUFE ====================================
   Anwendung: Widget -> Erweitert -> CSS-Klassen
   oder inline:  <span class="pl-verlauf">Wort</span>
   ============================================================ */
.pl-verlauf{
  background:linear-gradient(90deg,#FF6A33,#EDECE7,#FF6A33,#FF6A33);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:plTextFlow 24s linear infinite;
}
.pl-schimmer{
  background:linear-gradient(100deg,#FF6A33 0%,#FF6A33 40%,#FFD9C7 50%,#FF6A33 60%,#FF6A33 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:plTextFlow 20s linear infinite;
}
.pl-duo{
  background:linear-gradient(90deg,#FF6A33,#EDECE7,#FF6A33);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:plTextFlow 32s ease-in-out infinite;
}
.pl-static{
  background:linear-gradient(120deg,#FF6A33,#FFB088);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes plTextFlow{
  from{background-position:0% 50%;}
  to{background-position:300% 50%;}
}

/* ===== 4) BARRIEREFREIHEIT & MOBIL ===== */
@media (prefers-reduced-motion: reduce){
  [class*="pl-wolke-"]::before,
  [class*="pl-wolke-"] > .e-child:first-child::before,
  .pl-raster::after,
  .pl-verlauf,.pl-schimmer,.pl-duo{animation:none;}
}
@media (max-width:767px){
  [class*="pl-wolke-"]::before{filter:blur(44px);animation-duration:19s;}
  [class*="pl-wolke-"] > .e-child:first-child::before{filter:blur(52px);}
  .pl-raster::after{background-size:44px 44px;}
}

/* ===== 5) STATISCHE VERLAEUFE ================================
   Ohne Bewegung. Klasse auf den Abschnitt legen:
   Abschnitt -> Erweitert -> CSS-Klassen
   Varianten: tief | kante | seite | mitte | glanz | naht
   Wichtig: ueberschreibt den Elementor-Hintergrund (!important)
   ============================================================ */

/* --- TIEF: von oben aufgehellt, nach unten dunkel --- */
.pl-vl-tief{
  background:linear-gradient(180deg,#191C22 0%,#131519 45%,#0E1014 100%)!important;
}

/* --- KANTE: diagonal, heller Ecke oben links --- */
.pl-vl-kante{
  background:linear-gradient(145deg,#1C2027 0%,#141720 48%,#0F1115 100%)!important;
}

/* --- SEITE: horizontal, Mitte heller --- */
.pl-vl-seite{
  background:linear-gradient(90deg,#0D0F13 0%,#171A21 50%,#0D0F13 100%)!important;
}

/* --- MITTE: radialer Schein aus der Mitte --- */
.pl-vl-mitte{
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, #1B1F26 0%, #101216 65%, #0C0E11 100%)!important;
}

/* --- GLANZ: warmer Schimmer oben, technisch unten --- */
.pl-vl-glanz{
  background:
    linear-gradient(180deg, rgba(255,106,51,.07) 0%, rgba(255,106,51,0) 38%),
    linear-gradient(180deg,#171A20 0%,#121419 55%,#0E1014 100%)!important;
}

/* --- NAHT: Blueprint-Blau eingemischt, kuehl --- */
.pl-vl-naht{
  background:
    linear-gradient(160deg, rgba(33,69,107,.22) 0%, rgba(33,69,107,0) 55%),
    linear-gradient(180deg,#141821 0%,#101318 60%,#0D0F13 100%)!important;
}

/* --- Optional: weiche Trennkante oben/unten --- */
.pl-kante-oben{position:relative;}
.pl-kante-oben::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,106,51,.35),transparent);
}
.pl-kante-unten{position:relative;}
.pl-kante-unten::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(237,236,231,.14),transparent);
}

/* ===== 6) HERO: Inhalt zentriert begrenzen ====================
   Hintergrund bleibt volle Breite, nur der Inhalt wird gebuendelt.
   Wert anpassen: 1180px = maximale Breite von Text + Bild zusammen
   ============================================================ */
#top{
  display:flex;
  justify-content:center;
}
#top > .e-child{
  /* beide Spalten zusammen nie breiter als: */
  max-width:none;
}
#top{
  padding-left:max(24px, calc((100% - 1180px) / 2))!important;
  padding-right:max(24px, calc((100% - 1180px) / 2))!important;
}

@media (max-width:1024px){
  #top{padding-left:24px!important;padding-right:24px!important;}
}
@media (max-width:767px){
  #top{flex-direction:column!important;}
  #top > .e-child{width:100%!important;}
}/* End custom CSS */