.elementor-kit-5{--e-global-color-primary:#F2F3F5;--e-global-color-secondary:#9AA0AA;--e-global-color-text:#F2F3F5;--e-global-color-accent:#4EC3EE;--e-global-color-f7d8830:#050507;--e-global-color-c1acacd:#0B0B10;--e-global-color-cf6741f:#4361EE;--e-global-color-3c8a586:#10B981;--e-global-color-3f88779:#EF4444;--e-global-color-96d6603:#FFFFFF00;--e-global-color-fe_violet:#7C3AED;--e-global-color-fe_teal:#2DD4BF;--e-global-color-fe_amber:#F5A623;--e-global-color-fe_ember:#E8763A;--e-global-color-fe_soft:#101017;--e-global-color-fe_grund:#08090C;--e-global-color-fe_flaeche:#101218;--e-global-color-fe_text:#F2F3F5;--e-global-color-fe_text2:#9AA0AA;--e-global-color-fe_text3:#5C6270;--e-global-color-fe_linie:#F2F3F514;--e-global-color-fe_linie_stark:#F2F3F52E;--e-global-color-fe_l_grund:#F4F2ED;--e-global-color-fe_l_flaeche:#FFFFFF;--e-global-color-fe_l_text:#101218;--e-global-color-fe_l_text2:#5F646E;--e-global-color-fe_l_text3:#9AA0AA;--e-global-color-fe_l_linie:#1012181A;--e-global-color-fe_l_linie_stark:#1012183D;--e-global-color-fe_aura:#4EC3EE;--e-global-color-fe_aura_licht:#A6ECFF;--e-global-color-fe_aura_tief:#3A56D4;--e-global-typography-primary-font-family:"Archivo Expanded";--e-global-typography-primary-font-weight:560;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1em;--e-global-typography-primary-letter-spacing:0.06em;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:-0.01em;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:300;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.08em;--e-global-typography-fe_mark-font-family:"Michroma";--e-global-typography-fe_mark-font-weight:400;--e-global-typography-fe_mark-text-transform:none;--e-global-typography-fe_mark-letter-spacing:3.2px;--e-global-typography-fe_text20-font-family:"Archivo";--e-global-typography-fe_text20-font-size:20px;--e-global-typography-fe_text20-font-weight:300;--e-global-typography-fe_text20-text-transform:none;--e-global-typography-fe_text20-line-height:1.5em;--e-global-typography-fe_h40-font-family:"Archivo";--e-global-typography-fe_h40-font-size:40px;--e-global-typography-fe_h40-font-weight:500;--e-global-typography-fe_h40-text-transform:none;--e-global-typography-fe_h40-line-height:1.15em;--e-global-typography-fe_h28-font-family:"Archivo";--e-global-typography-fe_h28-font-size:28px;--e-global-typography-fe_h28-font-weight:500;--e-global-typography-fe_h28-text-transform:none;--e-global-typography-fe_h28-line-height:1.2em;--e-global-typography-fe_h20-font-family:"Archivo";--e-global-typography-fe_h20-font-size:20px;--e-global-typography-fe_h20-font-weight:500;--e-global-typography-fe_h20-text-transform:none;--e-global-typography-fe_h20-line-height:1.3em;--e-global-typography-fe_display_hero-font-family:"Archivo Expanded";--e-global-typography-fe_display_hero-font-size:112px;--e-global-typography-fe_display_hero-font-weight:560;--e-global-typography-fe_display_hero-text-transform:uppercase;--e-global-typography-fe_display_hero-line-height:1em;--e-global-typography-fe_display_hero-letter-spacing:0.06em;--e-global-typography-fe_display80-font-family:"Archivo Expanded";--e-global-typography-fe_display80-font-size:80px;--e-global-typography-fe_display80-font-weight:560;--e-global-typography-fe_display80-text-transform:uppercase;--e-global-typography-fe_display80-line-height:1em;--e-global-typography-fe_display80-letter-spacing:0.06em;--e-global-typography-fe_nav-font-family:"Archivo";--e-global-typography-fe_nav-font-size:13px;--e-global-typography-fe_nav-font-weight:400;--e-global-typography-fe_nav-text-transform:none;--e-global-typography-fe_nav-letter-spacing:0.02em;--e-global-typography-fe_btn-font-family:"Archivo";--e-global-typography-fe_btn-font-size:14px;--e-global-typography-fe_btn-font-weight:500;--e-global-typography-fe_btn-text-transform:none;--e-global-typography-fe_btn-letter-spacing:0.02em;background-color:var(--e-global-color-fe_grund);color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-text-font-family),Sans-serif;font-size:var(--e-global-typography-text-font-size);font-weight:var(--e-global-typography-text-font-weight);text-transform:var(--e-global-typography-text-text-transform);line-height:var(--e-global-typography-text-line-height);--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:1500ms;--e-preloader-animation:pulse;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;--e-preloader-width:25%;--e-preloader-max-width:35%}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-fe_btn-font-family),Sans-serif;font-size:var(--e-global-typography-fe_btn-font-size);font-weight:var(--e-global-typography-fe_btn-font-weight);text-transform:var(--e-global-typography-fe_btn-text-transform);letter-spacing:var(--e-global-typography-fe_btn-letter-spacing);color:var(--e-global-color-fe_grund);border-radius:0 0 0 0;padding:0 24px 0 24px}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#4361EE;color:#FFF}.elementor-kit-5 e-page-transition{background-color:#fff0;background-image:linear-gradient(180deg,var(--e-global-color-f7d8830) 0%,var(--e-global-color-c1acacd) 100%)}.elementor-kit-5 a{color:var(--e-global-color-fe_text)}.elementor-kit-5 a:hover{color:var(--e-global-color-fe_aura)}.elementor-kit-5 h1{color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-primary-font-family),Sans-serif;font-weight:var(--e-global-typography-primary-font-weight);text-transform:var(--e-global-typography-primary-text-transform);line-height:var(--e-global-typography-primary-line-height);letter-spacing:var(--e-global-typography-primary-letter-spacing)}.elementor-kit-5 h2{color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-fe_h40-font-family),Sans-serif;font-size:var(--e-global-typography-fe_h40-font-size);font-weight:var(--e-global-typography-fe_h40-font-weight);text-transform:var(--e-global-typography-fe_h40-text-transform);line-height:var(--e-global-typography-fe_h40-line-height)}.elementor-kit-5 h3{color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-fe_h28-font-family),Sans-serif;font-size:var(--e-global-typography-fe_h28-font-size);font-weight:var(--e-global-typography-fe_h28-font-weight);text-transform:var(--e-global-typography-fe_h28-text-transform);line-height:var(--e-global-typography-fe_h28-line-height)}.elementor-kit-5 h4{color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-secondary-font-family),Sans-serif;font-weight:var(--e-global-typography-secondary-font-weight);text-transform:var(--e-global-typography-secondary-text-transform);line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 h5{color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-secondary-font-family),Sans-serif;font-weight:var(--e-global-typography-secondary-font-weight);text-transform:var(--e-global-typography-secondary-text-transform);line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 h6{color:var(--e-global-color-fe_text);font-family:var(--e-global-typography-secondary-font-family),Sans-serif;font-weight:var(--e-global-typography-secondary-font-weight);text-transform:var(--e-global-typography-secondary-text-transform);line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 img{border-radius:0 0 0 0}.elementor-kit-5 label{color:var(--e-global-color-fe_text2);font-family:var(--e-global-typography-accent-font-family),Sans-serif;font-size:var(--e-global-typography-accent-font-size);font-weight:var(--e-global-typography-accent-font-weight);text-transform:var(--e-global-typography-accent-text-transform);line-height:var(--e-global-typography-accent-line-height);letter-spacing:var(--e-global-typography-accent-letter-spacing)}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:var(--e-global-typography-text-font-family),Sans-serif;font-size:var(--e-global-typography-text-font-size);font-weight:var(--e-global-typography-text-font-weight);text-transform:var(--e-global-typography-text-text-transform);line-height:var(--e-global-typography-text-line-height);color:var(--e-global-color-fe_text);background-color:#fff0;border-style:solid;border-width:0 0 1px 0;border-color:var(--e-global-color-fe_linie_stark);border-radius:0 0 0 0;padding:14px 16px 14px 16px}.elementor-section.elementor-section-boxed>.elementor-container{max-width:1200px}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px}.elementor-widget:not(:last-child){--kit-widget-spacing: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-kit-5{--e-global-typography-fe_h40-font-size:32px;--e-global-typography-fe_display_hero-font-size:72px;--e-global-typography-fe_display80-font-size:56px;font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}.elementor-kit-5 h1{line-height:var(--e-global-typography-primary-line-height);letter-spacing:var(--e-global-typography-primary-letter-spacing)}.elementor-kit-5 h2{font-size:var(--e-global-typography-fe_h40-font-size);line-height:var(--e-global-typography-fe_h40-line-height)}.elementor-kit-5 h3{font-size:var(--e-global-typography-fe_h28-font-size);line-height:var(--e-global-typography-fe_h28-line-height)}.elementor-kit-5 h4{line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 h5{line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 h6{line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var(--e-global-typography-fe_btn-font-size);letter-spacing:var(--e-global-typography-fe_btn-letter-spacing)}.elementor-kit-5 label{font-size:var(--e-global-typography-accent-font-size);line-height:var(--e-global-typography-accent-line-height);letter-spacing:var(--e-global-typography-accent-letter-spacing)}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}.elementor-section.elementor-section-boxed>.elementor-container{max-width:1024px}.e-con{--container-max-width:1024px}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-fe_h40-font-size:28px;--e-global-typography-fe_h28-font-size:24px;--e-global-typography-fe_display_hero-font-size:48px;--e-global-typography-fe_display80-font-size:40px;font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}.elementor-kit-5 h1{line-height:var(--e-global-typography-primary-line-height);letter-spacing:var(--e-global-typography-primary-letter-spacing)}.elementor-kit-5 h2{font-size:var(--e-global-typography-fe_h40-font-size);line-height:var(--e-global-typography-fe_h40-line-height)}.elementor-kit-5 h3{font-size:var(--e-global-typography-fe_h28-font-size);line-height:var(--e-global-typography-fe_h28-line-height)}.elementor-kit-5 h4{line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 h5{line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 h6{line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing)}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var(--e-global-typography-fe_btn-font-size);letter-spacing:var(--e-global-typography-fe_btn-letter-spacing)}.elementor-kit-5 label{font-size:var(--e-global-typography-accent-font-size);line-height:var(--e-global-typography-accent-line-height);letter-spacing:var(--e-global-typography-accent-letter-spacing)}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}.elementor-section.elementor-section-boxed>.elementor-container{max-width:767px}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px}}:root{--fe-grund:#08090C;--fe-flaeche:#101218;--fe-text:#F2F3F5;--fe-text-2:#9AA0AA;--fe-text-3:#5C6270;--fe-linie:rgba(242,243,245,0.08);--fe-linie-stark:rgba(242,243,245,0.18);--fe-l-grund:#F4F2ED;--fe-l-flaeche:#FFFFFF;--fe-l-text:#101218;--fe-l-text-2:#5F646E;--fe-l-text-3:#9AA0AA;--fe-l-linie:rgba(16,18,24,0.10);--fe-l-linie-stark:rgba(16,18,24,0.24);--fe-aura:#4EC3EE;--fe-aura-licht:#A6ECFF;--fe-aura-tief:#3A56D4;--fe-font-display:Archivo Expanded;--fe-font-text:Archivo;--fe-font-mono:JetBrains Mono;--fe-sek-pad:128px;--fe-sek-pad-m:80px;--fe-sek-pad-kompakt:96px;--fe-container:1200px;--fe-wide:1440px;--fe-btn-h:48px;--fe-margin:clamp(24px, 5vw, 96px);--fe-dur-ui:240ms;--fe-dur-sek:480ms;--fe-dur-hero:960ms}:root{--fe-grund:var(--e-global-color-fe_grund,#08090C);--fe-flaeche:var(--e-global-color-fe_flaeche,#101218);--fe-text:var(--e-global-color-fe_text,#F2F3F5);--fe-text2:var(--e-global-color-fe_text2,#9AA0AA);--fe-text3:var(--e-global-color-fe_text3,#5C6270);--fe-linie:var(--e-global-color-fe_linie,#F2F3F514);--fe-linie-stark:var(--e-global-color-fe_linie_stark,#F2F3F52E);--fe-l-grund:var(--e-global-color-fe_l_grund,#F4F2ED);--fe-l-flaeche:var(--e-global-color-fe_l_flaeche,#FFFFFF);--fe-l-text:var(--e-global-color-fe_l_text,#101218);--fe-l-text2:var(--e-global-color-fe_l_text2,#5F646E);--fe-l-text3:var(--e-global-color-fe_l_text3,#9AA0AA);--fe-l-linie:var(--e-global-color-fe_l_linie,#1012181A);--fe-l-linie-stark:var(--e-global-color-fe_l_linie_stark,#1012183D);--fe-aura:var(--e-global-color-fe_aura,#4EC3EE);--fe-aura-licht:var(--e-global-color-fe_aura_licht,#A6ECFF);--fe-aura-tief:var(--e-global-color-fe_aura_tief,#3A56D4);--margin:clamp(24px,5vw,96px)}.fe-sek{padding-top:128px;padding-bottom:128px;padding-left:var(--margin);padding-right:var(--margin)}@media(max-width:1024px){.fe-sek{padding-top:80px;padding-bottom:80px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}"
   im Kit-5-custom_css angehaengt wie zuvor (Marker bleibt Anker, nur der
   Dateiname des gelesenen Inhalts wechselt von v3 auf v4 — idempotenter
   Ersetzungs-Mechanismus zwischen den Start/Ende-Markern unveraendert).

   Regel: Farben AUSSCHLIESSLICH ueber Elementor-Globals-Variablen
   var(--e-global-color-<id>), IDs aus Spec §1. Keine Inline-Hex (Ausnahme:
   dokumentierte Alpha-Masken-Semantik, siehe Kommentare).

   ENTFAELLT gegenueber v3 (macht jetzt Elementor Pro Motion Effects + native
   Container-Hintergruende, Spec §6 Nachtrag v4):
   - #stage (Buehnen-Canvas-Maske).
   - .fe-hero-wrap (200vh-Sticky-Wrapper) und alle Sticky-Regeln auf .fe-hero.
   - .fe-hero-display, .fe-hero-stack (Wortmarken-Zeile, Aura-Linien-Pseudo-
     elemente des Hero-Titelblocks) — nur noch ein Titel (H1).
   - --fe-content-opacity-Mechanik (Inhalts-Fade macht jetzt der native
     Motion Effect "Transparency" auf dem Inhalts-Container).
   NEU gegenueber v3:
   - Reduced-Motion-Regel fuer Elementor Motion Effects (kein eigenes Gate im
     Plugin fuer prefers-reduced-motion).
   - Hero-Overlay-Verlauf als .fe-hero::before (ersetzt die alte
     isolation/z-index:-1-Konstruktion von .fe-hero::after, die an den
     Sticky-Kontext gebunden war).
   Nacht-Sektionen bekommen ihren Hintergrund (fe_grund) jetzt direkt vom
   Builder als native Container-Farbe — die alte Custom-CSS-Regel, die sie
   auf transparent zwang (damit die Buehne durchscheint), entfaellt.

   Selektoren gegen den Builder-Bericht (2026-09-12, v3) korrigiert/verifiziert
   und fuer v4 unveraendert uebernommen, ausser wo oben vermerkt:
   - Nav-Menu-Overlay: KLASSISCHES Elementor-Pro-Nav-Menu-Widget
     (.elementor-nav-menu / .elementor-menu-toggle / .elementor-nav-menu--dropdown).
   - FAQ-Accordion: KLASSISCHES Elementor-Accordion-Widget
     (.elementor-accordion-item / .elementor-tab-title / .elementor-tab-content).
   - Ring-Gauge: icon-Widget mit SVG-Attachment 1019, Klassen fe-ring fe-ring-1/2/3;
     JS injiziert bei Bedarf das bekannte 3-Kreis-Markup (siehe fe-v4-scroll.html).
   - Logo: image-Widget .fe-logo (Attachment 1018, helle Nacht-Wortmarke) —
     ueber Licht-Sektionen per filter:invert(1) umgefaerbt.
   Trotzdem VOR dem Judge-Playwright-Lauf gegen den echten Admin-Cookie-Spiegel
   (?page_id=919) gegenpruefen, insbesondere Hero/Ridges-Container — die stammen
   aus dem parallelen Builder-Strang (startseite_v4.py), nicht aus eigener
   DOM-Inspektion dieses Strangs.
   ============================================================================ */

/* ===================== AAE-SMOOTH-SCROLL-ARTEFAKT NEUTRALISIEREN =====================
   v3-Fund (Judge-Runde 2, live verifiziert): GSAP ScrollSmoother selbst ist
   AUS, aber #smooth-wrapper/#smooth-content bleiben als leere Wrapper-Divs
   im DOM, UND body{overflow:hidden auto} (AAE-Basis-CSS, unabhaengig vom
   Toggle) macht body statt html zum Scroll-Container. v4 hat zwar keinen
   Sticky-Hero mehr, aber Elementor Pro Motion Effects lesen ebenfalls den
   Dokument-Scroll (html/body) — Fix bleibt aus Vorsicht bestehen, bis Infra
   den AAE-Cache/die Basis-Regel dauerhaft entfernt. */
body{ overflow:visible !important; }
#smooth-wrapper, #smooth-content{ overflow:visible !important; height:auto !important; }

/* ===================== Abgeleitete Hilfs-Variablen (keine Farben, nur Komposition aus Globals) =====================
   FUND (Judge v4b, 13.09.2026): NICHT auf :root deklarieren -- die
   --e-global-color-*-Variablen, aus denen sich --fe-aura-gradient
   zusammensetzt, sitzen selbst nur auf .elementor-kit-5 (Elementors eigene
   Body-Klasse), nicht auf :root/html. CSS-Custom-Properties vererben nur
   abwaerts; auf :root sind die referenzierten var()s zum Berechnungszeitpunkt
   leer, --fe-aura-gradient wird dadurch zum "guaranteed-invalid value" und
   vererbt sich SO (leer) an alle Nachfahren weiter -- sichtbarer Effekt live
   verifiziert: getComputedStyle(body).getPropertyValue('--fe-aura-gradient')
   === '' trotz --e-global-color-fe_aura an derselben Stelle korrekt gesetzt;
   dadurch background:var(--fe-aura-gradient) auf .fe-btn-band::after/
   #kontakt .elementor-button::after/.fe-grenze/.fe-linie-cut::after überall
   background-image:none. Fix: gleiche Stelle wie die Quelle der Globals
   selbst (.elementor-kit-5) -- von dort erben alle Sektionen/Widgets korrekt
   nach unten. */
.elementor-kit-5{
  --fe-aura-gradient: linear-gradient(135deg,
    var(--e-global-color-fe_aura_licht) 0%,
    var(--e-global-color-fe_aura) 45%,
    var(--e-global-color-fe_aura_tief) 100%);
  --fe-dur-ui: 240ms;
  --fe-dur-section: 480ms;
  --fe-dur-hero: 960ms;
  --fe-ease-in: cubic-bezier(.2,.7,.2,1);
}

/* ===================== NACHT/LICHT-SEKTIONEN =====================
   v4: KEIN Buehnen-Canvas mehr dahinter — Nacht-Sektionen bekommen ihren
   Hintergrund (fe_grund) direkt vom Builder als native Container-Farbe
   (Spec §6 Nachtrag v4: "Nacht-Sektionen bekommen wieder Hintergrund fe_grund,nicht transparent"), nicht mehr per Custom-CSS erzwungen. Hier
   nur noch der Stacking-Context fuer .fe-sek-linie/.fe-grenze/Reveals. */
.fe-sek{ position:relative; z-index:1; }

/* ===================== SEKTIONSEINTRITT: fe-sek-linie (obere Linie, JS-eingefuegt) ===================== */
.fe-sek-linie{
  position:absolute; top:0; left:0; right:0; height:1px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--fe-dur-section) var(--fe-ease-in);
  pointer-events:none;
}
.fe-sek.fe-nacht .fe-sek-linie{ background:var(--e-global-color-fe_linie_stark); }
.fe-sek.fe-licht .fe-sek-linie{ background:var(--e-global-color-fe_l_linie_stark); }
.fe-sek.in .fe-sek-linie{ transform:scaleX(1); }

/* Nacht<->Licht-Grenze: 1px Aura-Linie zwischen Sektionen, JS-eingefuegt. */
.fe-grenze{
  position:relative; z-index:2; height:1px; background:var(--fe-aura-gradient);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--fe-dur-section) var(--fe-ease-in);
}
.fe-grenze.in{ transform:scaleX(1); }

/* ===================== REVEAL-ZUSTAENDE (generisch von JS gesetzt, IntersectionObserver) =====================
   Sicherheitsnetz (Memory "Funktion vor Effekt"): Verstecken gilt NUR unter
   html.fe-js (JS setzt diese Klasse vor dem Taggen) — ohne JS/bei Fehlern
   bleibt alles reglos sichtbar, kein dauerhaft leeres/geclipptes Element. */
html.fe-js .fe-reveal-titel{
  clip-path:inset(100% 0 0 0);
  transition:clip-path var(--fe-dur-section) var(--fe-ease-in) 120ms;
}
html.fe-js .fe-reveal-titel.in{ clip-path:inset(0 0 0 0); }

html.fe-js .fe-reveal-text{ opacity:0; transition:opacity var(--fe-dur-section) var(--fe-ease-in) 240ms; }
html.fe-js .fe-reveal-text.in{ opacity:1; }

html.fe-js .fe-reveal-readout{ opacity:0; transition:opacity var(--fe-dur-section) var(--fe-ease-in) 360ms; }
html.fe-js .fe-reveal-readout.in{ opacity:1; }

html.fe-js .fe-reveal-karte{
  --i:0; opacity:0;
  transition:opacity var(--fe-dur-section) var(--fe-ease-in);
  transition-delay:calc(80ms * var(--i));
}
html.fe-js .fe-reveal-karte.in{ opacity:1; }

/* ===================== BAND-BUTTON (Primaer, .fe-btn-band) =====================
   Elementor-Button rendert .elementor-button innerhalb .elementor-widget-button;
   die css_classes-Klasse fe-btn-band sitzt auf dem Widget-Wrapper.
   Parallelogramm-Clip 14px, Cut-Ende-Hover per ::after statt .cutmove-Span
   (existiert im nativen Markup nicht). */
.elementor-widget-button.fe-btn-band .elementor-button{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:48px; padding:0 32px;
  background:var(--e-global-color-fe_text); color:var(--e-global-color-fe_grund);
  border:0; border-radius:0; cursor:pointer;
  clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.elementor-widget-button.fe-btn-band .elementor-button::after{
  content:""; position:absolute; top:0; left:-24px; width:24px; height:2px;
  background:var(--fe-aura-gradient); pointer-events:none;
  transition:left var(--fe-dur-ui) var(--fe-ease-in);
}
.elementor-widget-button.fe-btn-band .elementor-button:hover::after,
.elementor-widget-button.fe-btn-band .elementor-button:focus-visible::after{
  left:calc(100% - 24px);
}
.elementor-widget-button.fe-btn-band .elementor-button:focus-visible{ outline:none; }
.elementor-widget-button.fe-btn-band .elementor-button .elementor-button-icon{
  transition:transform var(--fe-dur-ui) var(--fe-ease-in);
}
.elementor-widget-button.fe-btn-band .elementor-button:hover .elementor-button-icon,
.elementor-widget-button.fe-btn-band .elementor-button:focus-visible .elementor-button-icon{
  transform:translateX(4px);
}
@media (max-width:700px){
  .elementor-widget-button.fe-btn-band .elementor-button{ padding:0 24px; }
}

/* ===================== SEKUNDAER-BUTTON (.fe-btn-sek) — Unterlinie statt Flaeche =====================
   Hoehe 48px explizit (kein natives Kit-Feld dafuer, Builder-Vorgabe) — haelt
   .fe-btn-band und .fe-btn-sek im Hero-CTA-Row auf gleicher Grundlinie. */
.elementor-widget-button.fe-btn-sek .elementor-button{
  position:relative;
  display:inline-flex; align-items:center; gap:.5em;
  height:48px; padding:0 0 6px 0;
  background:none; border:0; border-radius:0; cursor:pointer;
  color:var(--e-global-color-fe_text);
  transition:color var(--fe-dur-ui) var(--fe-ease-in);
}
.elementor-widget-button.fe-btn-sek .elementor-button::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--e-global-color-fe_text);
  transition:background var(--fe-dur-ui) var(--fe-ease-in);
}
.elementor-widget-button.fe-btn-sek .elementor-button:hover::after,
.elementor-widget-button.fe-btn-sek .elementor-button:focus-visible::after{
  background:var(--fe-aura-gradient);
}
.elementor-widget-button.fe-btn-sek .elementor-button:focus-visible{ outline:none; }
.elementor-widget-button.fe-btn-sek .elementor-button .elementor-button-icon{
  transition:transform var(--fe-dur-ui) var(--fe-ease-in);
}
.elementor-widget-button.fe-btn-sek .elementor-button:hover .elementor-button-icon,
.elementor-widget-button.fe-btn-sek .elementor-button:focus-visible .elementor-button-icon{
  transform:translateX(4px);
}

/* ===================== FORMULAR-SUBMIT (#kontakt .elementor-button) =====================
   Native Elementor-Pro-Form (kein .elementor-widget-button-Wrapper, deshalb
   eigener Selektor) -- gleicher Aura-Cut-Hover wie .fe-btn-band, Box-Modell
   (Hintergrund/Radius/Hoehe) bleibt unangetastet (kommt vom Formular-Widget
   selbst ueber __globals__, startseite_v4.py kontakt()). */
#kontakt .elementor-button{
  position:relative; isolation:isolate; overflow:hidden;
}
#kontakt .elementor-button::after{
  content:""; position:absolute; top:0; left:-24px; width:24px; height:2px;
  background:var(--fe-aura-gradient); pointer-events:none;
  transition:left var(--fe-dur-ui) var(--fe-ease-in);
}
#kontakt .elementor-button:hover::after,
#kontakt .elementor-button:focus-visible::after{
  left:calc(100% - 24px);
}
#kontakt .elementor-button:focus-visible{ outline:none; }

/* ===================== LINIE MIT CUT-ENDE (.fe-linie-cut, Leistungsfelder/Licht) =====================
   Der Container selbst ist die 1px-Linie; das Cut-Ende ist ein ::after
   (kein zusaetzliches .cut-tip-Kind im nativen Markup noetig). */
.fe-linie-cut{
  position:relative; height:1px; background:var(--e-global-color-fe_l_linie_stark);
}
.fe-linie-cut::after{
  content:""; position:absolute; right:0; top:50%; width:32px; height:2px;
  transform:translateY(-50%); background:var(--fe-aura-gradient);
}

/* ===================== HERO (v4: normaler Container, Bewegung macht Elementor Motion Effects) =====================
   Kein Sticky-Akt/200vh-Wrapper mehr wie in v3. Hintergrund-Parallax
   (Motion Effect "Vertical Scroll") und Inhalts-Fade beim Verlassen (Motion
   Effect "Transparency" auf dem Inhalts-Container) sind native Elementor-
   Einstellungen (Spec §1d v4).

   KOORDINATION MIT BUILDER GEKLAERT (13.09.2026, nach Builder-Deploy per
   `wp post meta get 919 _elementor_data | grep background_overlay` live
   verifiziert): der Hero-Container setzt bereits einen nativen
   background_overlay (gradient, Farbe globals/colors?id=fe_grund) —
   deshalb HIER bewusst KEIN eigener ::before-Verlauf mehr (sonst Doppel-
   Abdunklung). Falls der native Overlay-Winkel/-Opazitaet im Judge-
   Screenshot nicht wie im Prototyp .hero-bild::after (index.html v3)
   aussieht: am Container-Widget nachjustieren (background_overlay_gradient_angle/
   -opacity/-color/-color_b), nicht hier per CSS uebersteuern. */
.fe-hero{ position:relative; }

/* ===================== RING-GAUGE (Ablauf, .fe-ring) =====================
   v4b (13.09.2026): drei eigenstaendige SVG-Attachments (fe-ring-1/2/3.svg,
   Attachment-IDs 1043/1044/1045), je eigener linearGradient feAura1/2/3 IN
   DER DATEI (Elementor-SVG-Sanitizer laesst defs/linearGradient/stop/class
   durch, live verifiziert per Svg::get_inline_svg() -- kein JS-Markup-Inject
   mehr (ersetzt die alte ensureRingSvg()-Injektion aus fe-v4-scroll.html,
   Snippet "FE v4 Scroll"). Start-Stroke-Werte (Spur/Wert 0%/Cut an Position 0)
   sitzen in der SVG-Datei selbst; das Ziel je Ring kommt rein per Kit-CSS
   ueber die Klasse .in (vom bestehenden Reveal-Observer gesetzt, .fe-ring
   steht dafuer in ALLE_REVEALS/beobachteEinmalig). C = 2*pi*44 = 276.46,
   CUT_LEN = 12.29; Ziel 100% bewusst C-CUT_LEN (264.17), nicht C, damit der
   Cut-Kreis exakt an das Ende des Wert-Bogens andockt statt ihn zu doppeln. */
.fe-ring{ position:relative; width:96px; height:96px; max-width:100%; margin:0 auto; }
.fe-ring svg{ width:100%; height:100%; display:block; }
.fe-ring-value, .fe-ring-cut{
  transition:stroke-dasharray var(--fe-dur-hero) var(--fe-ease-in),
             stroke-dashoffset var(--fe-dur-hero) var(--fe-ease-in);
}
.fe-ring.in.fe-ring-1 .fe-ring-value{ stroke-dasharray:69.12 207.34; }
.fe-ring.in.fe-ring-1 .fe-ring-cut{ stroke-dashoffset:-56.83; }
.fe-ring.in.fe-ring-2 .fe-ring-value{ stroke-dasharray:138.23 138.23; }
.fe-ring.in.fe-ring-2 .fe-ring-cut{ stroke-dashoffset:-125.94; }
.fe-ring.in.fe-ring-3 .fe-ring-value{ stroke-dasharray:264.17 12.29; }
.fe-ring.in.fe-ring-3 .fe-ring-cut{ stroke-dashoffset:-251.88; }

/* Ring-Wrap (Container um Icon-Widget + Mono-Zahl, startseite_v4.py ablauf())
   -- eigener Positionierungs-Kontext, damit die Zahl exakt ueber dem Ring
   zentriert sitzt (CSS-Weg statt native _position-Controls, Spec-Entscheid
   Aufgabe 2: Controls fuer diesen Fall unnoetig fragil). */
.fe-ring-wrap{ position:relative; width:96px; margin:0 auto; }
.fe-ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; pointer-events:none; }

/* ===================== VERTRAUT-SEKTION: kompaktes Padding ===================== */
.fe-sek.fe-sek-kompakt{ padding-top:96px; padding-bottom:96px; }

/* ===================== MARQUEE (Wer uns vertraut) =====================
   Builder-Markup (Judge-Runde 1): KEIN eigener .fe-marquee-track-Container —
   der "Track" ist der text-editor-Widget-Inhalt selbst, darin zwei <span> mit
   je der kompletten Namenszeile (fuer den nahtlosen 50%-Loop). .fe-marquee
   sitzt auf dem umgebenden Container (Rahmenlinien). display:contents auf
   einem etwaigen <p>-Wrapper macht dessen Kind-Spans zu direkten Flex-Items
   des Tracks, unabhaengig davon, ob der Editor den Text in <p> einpackt. */
.fe-marquee{
  overflow:hidden; width:100%;
  white-space:nowrap;
  border-top:1px solid var(--e-global-color-fe_linie);
  border-bottom:1px solid var(--e-global-color-fe_linie);
  padding:32px 0;
}
.fe-marquee .elementor-widget-text-editor .elementor-widget-container{
  display:inline-flex; align-items:center; gap:64px; white-space:nowrap;
  animation:fe-marquee 40s linear infinite;
}
.fe-marquee .elementor-widget-text-editor .elementor-widget-container > p{
  display:contents;
}
.fe-marquee:hover .elementor-widget-text-editor .elementor-widget-container{
  animation-play-state:paused;
}
/* Typo = Kit-Rolle "accent" (Spec §1: JetBrains Mono 400, 12px, uppercase,
   ls .08em, lh 1.4), Farbe laut Vorgabe explizit fe_text2 (nicht die
   Rollen-Eigenfarbe). Keine Hex-Werte, nur Zahlenwerte der Typo-Rolle. */
.fe-marquee .elementor-widget-text-editor span{
  font-family:"JetBrains Mono", monospace; font-weight:400; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; line-height:1.4;
  color:var(--e-global-color-fe_text2);
}
@keyframes fe-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .fe-marquee .elementor-widget-text-editor .elementor-widget-container{ animation:none; }
}

/* ===================== ZAHLEN (Agentur+Zahlen, Licht) — native Counter-Widgets =====================
   Judge-Runde 2: Builder hat KEINE Klasse fe-zahl gesetzt -> Ziel-Scope ueber
   die Sektions-ID #agentur + den nativen Elementor-Counter-Widget-Wrapper. */
#agentur .elementor-widget-counter .elementor-counter-number-wrapper{
  display:block;
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch:125%; font-weight:560; font-size:56px; line-height:1.0;
}
#agentur .elementor-widget-counter .elementor-counter-number-suffix{
  font-size:inherit; font-family:inherit; font-weight:inherit;
}
#agentur .elementor-widget-counter .elementor-counter-title{
  display:block; margin-top:8px;
  font-family:"JetBrains Mono", monospace; font-weight:400; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; line-height:1.4;
  color:var(--e-global-color-fe_l_text2);
}

/* ===================== HEADER: fixed + Farbwechsel Nacht/Licht (.fe-header) =====================
   Live-Fund (v3 Judge-Runde 2, beim Sticky-Debug entdeckt): der Header-
   Container rendert als position:relative (Elementor-Container-Default)
   statt fixed — dadurch schiebt er den kompletten Seiteninhalt um seine
   eigene Hoehe nach unten, statt ueber dem Hero zu schweben (Spec §3:
   "Container fixed,transparent"). Kein natives Kit-Feld dafuer (wie
   Button-Hoehe) -> hier erzwungen, 1:1 aus dem Prototyp (.site-header). */
.fe-header{
  position:fixed !important; top:0; left:0; right:0; z-index:200;
  background:transparent;
}
/* WP-Standardmuster: eingeloggte Admin-Vorschau hat eine eigene fixed 32px-
   Admin-Leiste, die sonst den Header ueberdeckt (nur Editor-Ansicht, betrifft
   keine echten Besucher). */
body.admin-bar .fe-header{ top:32px; }
html[data-header="licht"] .fe-header{ color:var(--e-global-color-fe_l_text); }
html[data-header="nacht"] .fe-header,
html:not([data-header]) .fe-header{ color:var(--e-global-color-fe_text); }
.fe-header{ transition:color var(--fe-dur-ui) var(--fe-ease-in); }
.fe-header a{ color:inherit; }
.fe-header nav a:hover, .fe-header nav a:focus-visible{ opacity:.6; }

/* Logo (Attachment 1018, helle Nacht-Wortmarke, image-Widget .fe-logo): ueber
   Licht-Sektionen invertieren, damit die helle Wortmarke auf hellem Grund
   lesbar bleibt. Bewusster Trade-off (Builder-Vorgabe): invert() dreht auch
   die Aura-Gradient-Anteile im Bild mit — optisch akzeptiert, da die Wortmarke
   in Licht-Sektionen ohnehin nur kurz/selten sichtbar ist (Header ueberwiegend
   vor Nacht-Sektionen). Falls spaeter eine inline-SVG-Variante kommt: nur die
   Wordmark-Pfade (nicht den Stern) gezielt umfaerben statt invert(). */
.fe-header .fe-logo{ transition:filter var(--fe-dur-ui) var(--fe-ease-in); }
html[data-header="licht"] .fe-header .fe-logo img{ filter:invert(1); }

/* ===================== MENUE-OVERLAY (mobil, Elementor-Pro-Nav-Menu-Widget, klassisch) =====================
   Verifiziert gegen Builder-Bericht: .elementor-nav-menu (Item-Liste),
   .elementor-menu-toggle (Toggle-Button), .elementor-nav-menu--dropdown
   (Dropdown-Nav-Wrapper, im DOM zwischen Haupt-Nav und Toggle als
   nachfolgendes Geschwister). Zustand zusaetzlich ueber aria-expanded
   abgefragt (robust falls Elementor zusaetzlich/andere Klassen togglet). */
.fe-header .elementor-menu-toggle{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight:400; font-size:13px; letter-spacing:.02em; color:inherit;
  display:inline-flex; align-items:center;
}
.fe-header .elementor-menu-toggle i,
.fe-header .elementor-menu-toggle svg,
.fe-header .elementor-menu-toggle .elementor-screen-only{ display:none !important; }
.fe-header .elementor-menu-toggle::before{ content:"Menü"; }
.fe-header .elementor-menu-toggle[aria-expanded="true"]::before{ content:"Schließen ×"; }
/* Judge-Runde 2: Toggle war auch auf 1440px (Desktop) sichtbar — das Nav-Menu-
   Widget hat kein eigenes Breakpoint-Verhalten dafuer geliefert. */
@media (min-width:1025px){
  .fe-header .elementor-menu-toggle{ display:none !important; }
}

.fe-header .elementor-nav-menu--dropdown{
  position:fixed; inset:0; z-index:300;
  background:var(--e-global-color-fe_grund); color:var(--e-global-color-fe_text);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--margin, clamp(24px,5vw,96px));
  transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform var(--fe-dur-section) var(--fe-ease-in), opacity var(--fe-dur-section) var(--fe-ease-in);
}
.fe-header .elementor-nav-menu--dropdown.elementor-active,
.fe-header .elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown{
  transform:translateY(0); opacity:1; visibility:visible;
}
.fe-header .elementor-nav-menu--dropdown .elementor-nav-menu{
  display:flex; flex-direction:column; justify-content:center; gap:24px;
  list-style:none; margin:0; padding:0;
}
.fe-header .elementor-nav-menu--dropdown .elementor-nav-menu a{
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight:500; font-size:32px; color:var(--e-global-color-fe_text);
  text-align:left;
}
/* Kontakt-Menuepunkt traegt keine eigene Klasse UND die Menu-Links sind aktuell
   Query-String-URLs (?page_id=925, keine Permalinks) — ein href*="kontakt"-
   Selektor greift also NICHT (am echten Markup 2026-09-12 geprueft). Primaerer
   Mechanismus: fe-v4-scroll.html taggt den Link per Text "Kontakt" mit der
   Klasse fe-nav-kontakt (robust gegen Permalink-Wechsel). CSS-Fallback ohne
   JS: letzter Menuepunkt (Kontakt steht laut Spec §3 immer zuletzt). */
.fe-header .fe-nav-kontakt::after{ content:" →"; }
.fe-header .elementor-nav-menu li:last-child > a::after{ content:" →"; }

/* ===================== FAQ: Nummern per CSS-Counter (Mono) =====================
   Verifiziert gegen Builder-Bericht: klassisches Elementor-Accordion-Widget
   (Tabs-Repeater), nicht Nested-Accordion. Struktur:
   .elementor-accordion > .elementor-accordion-item > .elementor-tab-title
   (Kopf, klickbar) + .elementor-tab-content (Antwort). */
.fe-sek#faq .elementor-accordion{ counter-reset:fe-faq; }
.fe-sek#faq .elementor-tab-title{ position:relative; }
.fe-sek#faq .elementor-tab-title::before{
  counter-increment:fe-faq;
  content:counter(fe-faq, decimal-leading-zero);
  font-family:"JetBrains Mono", monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--e-global-color-fe_l_text3) !important;
  margin-right:16px;
}
/* Judge-Runde 2: Titel liefen in Aura-Blau mit "+"-Icon (Kit-Akkordeon-Default)
   statt monochrom-mono wie im Prototyp -> Icon weg, Titelfarbe erzwungen. */
.fe-sek#faq .elementor-tab-title,
.fe-sek#faq .elementor-tab-title .elementor-accordion-title{
  color:var(--e-global-color-fe_l_text) !important;
}
.fe-sek#faq .elementor-accordion-icon{ display:none !important; }

/* ===================== FORMULAR: Unterlinien statt Kaesten (Kontakt, Nacht) ===================== */
.fe-sek#kontakt .elementor-field-group{
  position:relative;
}
.fe-sek#kontakt .elementor-field-textual{
  background:var(--e-global-color-fe_flaeche) !important;
  border:0 !important; border-bottom:1px solid var(--e-global-color-fe_linie) !important;
  border-radius:0 !important; color:var(--e-global-color-fe_text) !important;
  transition:border-color var(--fe-dur-ui) var(--fe-ease-in);
}
.fe-sek#kontakt .elementor-field-textual:focus{
  border-bottom:1px solid var(--e-global-color-fe_aura) !important; outline:none;
}
.fe-sek#kontakt label{
  font-family:"JetBrains Mono", monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--e-global-color-fe_text2);
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0ms !important; animation-iteration-count:1 !important; transition-duration:0ms !important; }
  .fe-marquee .elementor-widget-text-editor .elementor-widget-container{ animation:none !important; }
  .fe-sek-linie, .fe-grenze,
  .fe-reveal-titel, .fe-reveal-text, .fe-reveal-readout, .fe-reveal-karte{
    transform:none !important; clip-path:inset(0 0 0 0) !important; opacity:1 !important;
  }
  /* Elementor Pro Motion Effects (Hero-Hintergrund Vertical Scroll, Inhalts-
     Transparency, Ridges Vertical Scroll + Scale) haben kein eigenes
     Reduced-Motion-Gate im Plugin — hier erzwungen (Auftrag Punkt 2/Spec §6). */
  .elementor-motion-effects-element,
  .elementor-motion-effects-layer{
    transform:none !important; opacity:1 !important;
  }
}

/* === FE v3 KOMPONENTEN ENDE === */
h1, h2, h3, h4, h5, h6 {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

/* FUTURELEMENTS TEXT GRADIENT UTILITY
   ----------------------------------------
   Anleitung für Elementor Titel-Feld:
   Schreibe: Das ist ein <span class="text-gradient">Verlauf</span>
*/

.text-gradient {
    /* Der Verlauf: Electric Sky -> Hyper Indigo */
    /* Nutzt globale Variablen mit Fallback */
    background: linear-gradient(135deg, var(--accent-sky, #38BDF8) 0%, var(--accent-indigo, #4361EE) 100%);
    
    /* Magie: Hintergrund auf den Text beschneiden */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Fallback für alte Browser */
    color: var(--accent-sky, #38BDF8);
    
    /* Wichtig: Inline lassen, damit der Satz nicht umbricht */
    display: inline;
}

/* Optional: Leichter Glow-Effekt beim Hover über das Wort */
/* .text-gradient:hover {
    text-shadow: 0 0 20px rgba(67, 97, 238, 0.4);
    transition: text-shadow 0.3s ease;
} */

/* FUTURELEMENTS H4 SLASHES (//)
   ----------------------------------------
   Fügt technische Slashes vor H4-Überschriften ein.
   Nutzt globale CSS-Variablen für Konsistenz.
*/

.elementor-kit-5 h4::before {
    content: "//";
    display: inline-block;
    margin-right: 12px; /* Abstand zum Text */
    
    /* Nutzung der Variable --accent-indigo (Hyper Indigo) */
    color: var(--accent-indigo, #4361EE); 
    
    font-weight: 300; /* Dünner Schnitt für Eleganz */
    opacity: 0.8;
    
    /* Optional: Leichter Versatz für perfekte Ausrichtung */
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* Hover-Effekt: Wechselt zur Highlight-Farbe */
.elementor-kit-5 h4:hover::before {
    /* Nutzung der Variable --accent-sky (Electric Sky) */
    color: var(--accent-sky, #38BDF8);
    
    /* Leichter Glow-Effekt */
    text-shadow: 0 0 10px var(--accent-sky, #38BDF8);
    opacity: 1;
}

/* FUTURELEMENTS "PULSE & SWEEP" BUTTON FX - SIMPLIFIED
   ----------------------------------------------------
   Anleitung:
   1. Füge Code unter "Website-Einstellungen>Eigenes CSS" ein.
   2. Gib deinem Button-Widget unter "Erweitert>CSS-Klassen" die Klasse: future-btn
   3. Stelle Hintergrundfarbe & Typografie ganz normal im Elementor-Editor ein.
*/

/* --- 1. CONTAINER FIX --- */
/* Verhindert, dass der Pulse-Effekt vom Widget-Rahmen abgeschnitten wird */
.future-btn .elementor-widget-container {
    overflow: visible !important;
}

/* --- 2. GRUNDEINSTELLUNGEN --- */
.future-btn .elementor-button {
    position: relative;
    z-index: 1; /* Erzeugt Stapelkontext */
    overflow: visible !important; /* WICHTIG für Pulse nach außen */
    
    /* Animationen für Elementor-Eigenschaften smoothen */
    transition: all 0.4s ease !important;
    
    /* Fallback Shape (wird von Elementor überschrieben, wenn dort gesetzt) */
    border-radius: 12px 0 12px 0; 
}

/* Text-Layer sicher nach oben holen, damit er über dem Gradient liegt */
.future-btn .elementor-button .elementor-button-content-wrapper,
.future-btn .elementor-button span {
    position: relative;
    z-index: 10;
    transition: color 0.3s ease !important;
}

/* --- 3. BACKGROUND FILL (DER GRADIENT BEIM HOVER) --- */
.future-btn .elementor-button::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Gradient: Nutzt deine globalen Variablen */
    background: linear-gradient(135deg, var(--accent-sky, #38BDF8) 0%, var(--accent-indigo, #4361EE) 100%);
    
    /* Z-Index 2 legt es ÜBER die Elementor-Hintergrundfarbe, aber UNTER den Text (z-index 10) */
    z-index: 2; 
    
    border-radius: inherit; /* Erbt Form aus Elementor */
    
    /* Start: Unsichtbar (0% Kreis) */
    clip-path: circle(0% at 0% 100%);
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* --- 4. PULSE EFFEKT (OUTLINE) --- */
.future-btn .elementor-button::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Weiße Outline für den Pulse */
    border: 1px solid var(--text-white, #FFFFFF);
    border-radius: inherit;
    
    z-index: -1;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
}

/* --- 5. HOVER ANIMATIONEN --- */

/* Bewegung & Glow */
.future-btn .elementor-button:hover {
    transform: translateY(-3px);
    /* Glow Effekt */
    box-shadow: 0 10px 30px rgba(67, 97, 238, 0.4) !important;
}

/* Fill: Gradient erscheint und überdeckt die Elementor-Farbe */
.future-btn .elementor-button:hover::before {
    clip-path: circle(150% at 0% 100%);
}

/* Pulse: Outline explodiert nach außen */
.future-btn .elementor-button:hover::after {
    animation: rippleEffect 0.8s ease-out forwards;
}

/* Textfarbe: Immer Weiß beim Hover für Kontrast */
.future-btn .elementor-button:hover .elementor-button-content-wrapper,
.future-btn .elementor-button:hover .elementor-button-text,
.future-btn .elementor-button:hover svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* --- 6. KEYFRAMES --- */
@keyframes rippleEffect {
    0% { transform: scale(1); opacity: 0.8; border-width: 1px; }
    100% { transform: scale(1.4); opacity: 0; border-width: 0px; }
}

/* Baseline: Text-Editor Trailing-Abstand entfernen (Elementor-Setup-Standard) */
.elementor-widget-text-editor > :last-child,
.elementor-widget-text-editor .elementor-text-editor > :last-child,
.elementor-widget-text-editor .elementor-widget-container > :last-child{margin-bottom:0px}

/* Baseline: KI-Kennzeichnung (EU AI Act Art. 50) — Klasse .ki-bild bzw. _element_id ki-bild-<id> */
.ki-bild,[id^="ki-bild-"]{position:relative}
.ki-bild::after,[id^="ki-bild-"]::after{content:"Symbolbild · KI-generiert";position:absolute;right:.5rem;bottom:.5rem;z-index:2;padding:2px 8px;border-radius:2px;background:rgb(11 12 10 / .58);color:#fff;font-size:.68rem;line-height:.9em;letter-spacing:.04em;pointer-events:none}html,body{overflow-x:hidden}.elementor-widget-heading .elementor-heading-title,.elementor-widget-text-editor,.elementor-widget-text-editor li,.elementor-widget-button .elementor-button-text,.elementor-accordion-title,.e-n-accordion-item-title{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}.elementor-widget-text-editor table,.entry-content table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.elementor-widget-text-editor table th,.elementor-widget-text-editor table td,.entry-content table th,.entry-content table td{min-width:8ch}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.elementor-button:focus-visible,.elementor-accordion-title:focus-visible{outline:2px solid var(--e-global-color-accent);outline-offset:3px;border-radius:2px}.elementor-field-subgroup .elementor-field-option input[type=checkbox],.elementor-field-type-acceptance input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:0 0 16px;border:1px solid var(--e-global-color-c1acacd);background:var(--e-global-color-f7d8830);border-radius:0;cursor:pointer;position:relative;top:2px;margin-right:9px;transition:.2s}.elementor-field-subgroup .elementor-field-option input[type=checkbox]:checked,.elementor-field-type-acceptance input[type=checkbox]:checked{background:var(--e-global-color-accent);border-color:var(--e-global-color-accent)}.elementor-field-subgroup .elementor-field-option input[type=checkbox]:checked::after,.elementor-field-type-acceptance input[type=checkbox]:checked::after{content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--e-global-color-f7d8830);border-width:0 2px 2px 0;transform:rotate(45deg)}.elementor-field-subgroup .elementor-field-option{display:flex;align-items:flex-start;margin-bottom:7px}.elementor-field-subgroup .elementor-field-option label,.elementor-field-type-acceptance label{cursor:pointer;line-height:1.5}.elementor-field-group .elementor-select-wrapper select.elementor-field{background-color:var(--e-global-color-f7d8830);color:var(--e-global-color-text);border:1px solid rgb(255 255 255 / .2)}.elementor-field-group .elementor-select-wrapper::before{color:var(--e-global-color-text)}.elementor-field[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.65;cursor:pointer}.elementor-field-group input[type=checkbox].elementor-acceptance-field,.elementor-field-group .elementor-field-subgroup input[type=checkbox]{appearance:none!important;-webkit-appearance:none!important;width:17px!important;height:17px!important;min-width:17px!important;flex:0 0 17px!important;border:1px solid var(--e-global-color-c1acacd)!important;background:var(--e-global-color-f7d8830)!important;border-radius:0!important;position:relative;cursor:pointer;margin:2px 9px 0 0!important;padding:0!important}.elementor-field-group input[type=checkbox].elementor-acceptance-field:checked,.elementor-field-group .elementor-field-subgroup input[type=checkbox]:checked{background:var(--e-global-color-accent)!important;border-color:var(--e-global-color-accent)!important}.elementor-field-group input[type=checkbox].elementor-acceptance-field:checked::after,.elementor-field-group .elementor-field-subgroup input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--e-global-color-f7d8830);border-width:0 2px 2px 0;transform:rotate(45deg)}.fe-brotkrumen{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--e-global-color-secondary);display:flex;flex-wrap:wrap;align-items:center;gap:8px;line-height:1.6}.fe-brotkrumen a{color:var(--e-global-color-secondary);text-decoration:none;transition:color .25s}.fe-brotkrumen a:hover{color:var(--e-global-color-accent)}.fe-brotkrumen a:focus-visible{outline:2px solid var(--e-global-color-accent);outline-offset:3px}.fe-brotkrumen [aria-current=page]{color:var(--e-global-color-text)}.fe-brotkrumen__trenner{color:var(--e-global-color-secondary);opacity:.5}@media(max-width:767px){.fe-brotkrumen{font-size:9.5px;gap:6px}}.cmplz-manage-consent.fe-footer-link{background:none;border:0;padding:0;margin:0;font:inherit;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.cmplz-manage-consent.fe-footer-link:hover{color:var(--e-global-color-accent)}#kontakt .elementor-field-option a{text-decoration:underline;text-underline-offset:2px}@font-face{font-family:'Archivo Expanded';font-style:normal;font-weight:100 900;font-display:swap;src:url(https://futurelements.eu/wp-content/uploads/fe-home/fonts/archivo-expanded-var.woff2) format('woff2')}@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(https://futurelements.eu/wp-content/uploads/fe-home/fonts/archivo-var.woff2) format('woff2')}@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(https://futurelements.eu/wp-content/uploads/fe-home/fonts/jetbrains-latin.woff2) format('woff2')}@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(https://futurelements.eu/wp-content/uploads/fe-home/fonts/michroma-1.woff2) format('woff2')}