.elementor-kit-6{--e-global-color-primary:#212934;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#000000;--e-global-color-accent:#000000;--e-global-color-2404bd9:#F2F2F2;--e-global-color-8d4ed70:#00EBFF;--e-global-color-b1d5443:#003C8C;--e-global-color-cccb61e:#FF1E78;--e-global-color-f1fcbd5:#D91A66;--e-global-color-28353aa:#8200FF;--e-global-color-440040f:#5B00B2;--e-global-color-91824ce:#FFF000;--e-global-color-8033026:#F2E400;--e-global-color-caadc8e:#00F078;--e-global-color-d9afd13:#E2E2E2;--e-global-color-0c6a86b:#FFF991;--e-global-color-b771325:#FF438E;--e-global-color-122118f:#64F3FF;--e-global-color-bea8acf:#6D727A;--e-global-typography-primary-font-family:"MarkPro";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"MarkPro";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"MarkPro";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"MarkPro";--e-global-typography-accent-font-weight:300;--e-global-typography-d748529-font-family:"MarkPro";--e-global-typography-d748529-font-size:112px;--e-global-typography-d748529-font-weight:500;--e-global-typography-d748529-line-height:120px;--e-global-typography-4003974-font-family:"MarkPro";--e-global-typography-4003974-font-size:72px;--e-global-typography-4003974-font-weight:500;--e-global-typography-4003974-line-height:80px;--e-global-typography-aa0bba9-font-family:"MarkPro";--e-global-typography-aa0bba9-font-size:48px;--e-global-typography-aa0bba9-font-weight:500;--e-global-typography-aa0bba9-line-height:58px;--e-global-typography-1e37118-font-family:"MarkPro";--e-global-typography-1e37118-font-size:32px;--e-global-typography-1e37118-font-weight:500;--e-global-typography-1e37118-line-height:39px;--e-global-typography-0972b19-font-family:"MarkPro";--e-global-typography-0972b19-font-size:24px;--e-global-typography-0972b19-font-weight:500;--e-global-typography-6161875-font-family:"MarkPro";--e-global-typography-6161875-font-size:20px;--e-global-typography-6161875-font-weight:500;--e-global-typography-0e1a465-font-family:"MarkPro";--e-global-typography-0e1a465-font-size:16px;--e-global-typography-0e1a465-font-weight:500;--e-global-typography-b7e662a-font-family:"MarkPro";--e-global-typography-b7e662a-font-size:24px;--e-global-typography-b7e662a-font-weight:300;--e-global-typography-3b4b6a9-font-family:"MarkPro";--e-global-typography-3b4b6a9-font-size:18px;--e-global-typography-3b4b6a9-font-weight:300;--e-global-typography-bf8a96e-font-family:"MarkPro";--e-global-typography-bf8a96e-font-size:14px;--e-global-typography-bf8a96e-font-weight:300;color:var( --e-global-color-text );font-family:"MarkPro", Sans-serif;font-size:20px;font-weight:300;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-text );font-family:"MarkPro", Sans-serif;font-size:16px;font-weight:500;color:var( --e-global-color-secondary );border-style:solid;border-width:0px 0px 0px 0px;border-radius:152px 152px 152px 152px;padding:10px 16px 10px 16px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-text );}.elementor-kit-6 h1{color:var( --e-global-color-text );}.elementor-kit-6 h2{color:var( --e-global-color-text );}.elementor-kit-6 h3{color:var( --e-global-color-text );}.elementor-kit-6 h4{color:var( --e-global-color-text );}.elementor-kit-6 h5{color:var( --e-global-color-text );}.elementor-kit-6 h6{color:var( --e-global-color-text );}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){margin-block-end:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1340px;}.e-con{--container-max-width:1340px;}}@media(max-width:1280px){.elementor-kit-6{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:95%;}.e-con{--container-max-width:95%;}}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-d748529-font-size:72px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:95%;}.e-con{--container-max-width:95%;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-text-font-size:18px;--e-global-typography-d748529-font-size:56px;--e-global-typography-d748529-line-height:60px;--e-global-typography-4003974-font-size:44px;--e-global-typography-4003974-line-height:52px;--e-global-typography-aa0bba9-font-size:32px;--e-global-typography-aa0bba9-line-height:120%;--e-global-typography-1e37118-font-size:24px;--e-global-typography-1e37118-line-height:27px;--e-global-typography-0972b19-font-size:20px;--e-global-typography-6161875-font-size:18px;--e-global-typography-0e1a465-font-size:16px;--e-global-typography-b7e662a-font-size:22px;--e-global-typography-3b4b6a9-font-size:16px;--e-global-typography-bf8a96e-font-size:14px;font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:95%;}.e-con{--container-max-width:95%;}}/* Start custom CSS *//************************************************************************************
 * Zweck: Einfache, modulare Effekte für Links, Buttons, Cards, Texte & Utility-Styles
 * Hinweis: Alle Variablen sind zentral im :root definierbar und pro Widget überschreibbar.
 *
 * ── INHALTSÜBERSICHT (Kurzbeschreibung & Nutzung) ─────────────────────────────────
 * 01) Variablen & Defaults
 *     Zentrale CSS-Variablen für Unterstreichungen, Buttons & Gradients.
 *
 * 02) Gradient-Underline für Links
 *     A) Direkt am <a> (Klasse: .gradient-link-underline)
 *     B) Wrapper-Variante für Texteditor (Klasse am Container: .gradient-links)
 *
 * 03) Elementor-Button: animierte Underline
 *     Klasse am Button-Widget: .gradient-btn-underline (+ .icon-only optional)
 *
 * 04) Gradient-Buttons (Rahmen & Hintergründe)
 *     Klassen am Button-Widget-Container (.elementor-element.*):
 *     - .secondary-gradient-magenta-btn (weißer Fill, Magenta-Rand, Hover getönt)
 *     - .primary-gradient-magenta-btn (Magenta-Fill+Rand, Hover gedimmt)
 *     - .primary-yellow-magenta-btn (schwarz → gelb-magenta Rand im Hover)
 *     - .primary-black-magenta-btn (schwarz → türkis-violett-magenta Rand im Hover)
 *     - .primary-black-yellow-btn (schwarz → gelb-türkis Rand im Hover)
 *
 * 05) Icon-Gradients
 *     - .gradient-background-icon            (gelb → pink)
 *     - .gradient-background-icon-gelb-turkis(gelb → türkis)
 *     - .gradient-background-icon-magenta    (violett → magenta)
 *
 * 06) NEWS CARD: Hover & Button (responsive)
 *     Container: .news-card (Icon-Button expandiert nur am Desktop)
 *
 * 07) JOB CARD: Clean Setup
 *     Container: .job-card (Iconfarben/Divider folgen Hover-State)
 *
 * 08) KURSE CARD: Hover-Styling
 *     Container: .kurse-hover (z. B. .hover-black auf Schwarz beim Hover)
 *
 * 09) Gradient-Text Utilities
 *     - .gradient-magenta-text (violett → pink)
 *     - .gradient-yellow-text  (gelb → türkis)
 *     - .gradient-red-text     (gelb → pink)
 *     Fallback für Browser ohne background-clip:text enthalten.
 *
 * 10) Karriere – Werte-Kacheln: Reveal on Hover / Active Slide
 *     Parent: .parent-hover-reveal (+ .overlay optional)
 *     In Carousels per .career-cards + Swiper aktiv auf Mobile
 *
 * 11) Utility: Gradient-Border (weiße Box mit Farb-Rand)
 *     Klasse: .gradient-border
 *
 * 12) Elementor-Form: Abstände für HTML-Feld
 *     Selektor: .elementor-field-type-html
 ************************************************************************************/


/* ==========================================================================
   01) VARIABLEN & DEFAULTS
   ========================================================================== */

:root{
  /* Link-Underline */
  --link-uline-h:   2px;    /* Höhe der Linie */
  --link-uline-gap: 6px;    /* Abstand Text → Linie */
  --link-uline-c1:  #FF1E78;
  --link-uline-c2:  #8200FF;
  --link-uline-dur: .25s;   /* Animationsdauer */

  /* Button-Underline */
  --btn-underline-h: 2px;   /* Höhe der Linie */
  --btn-underline-gap: 8px; /* Abstand Text → Linie */
  --btn-uline-c1: #FF1E78;  /* links */
  --btn-uline-c2: #8200FF;  /* rechts */
  --btn-uline-dur: .25s;    /* Animationsdauer */

  /* Allgemeine Gradients */
  --Linear-Kontrast: linear-gradient(270deg, #8200FF 0%, #D91A66 100%);
  --Linear-Black:    linear-gradient(270deg, #000 0%, #000 100%);
  --Linear-Yellow:   linear-gradient(270deg, #FFF000 -0.02%, #00EBFF 100%);
}


/* ==========================================================================
   02) GRADIENT-UNDERLINE FÜR LINKS
   Nutzung A: <a class="gradient-link-underline">…</a>
   Nutzung B: <div class="gradient-links">… <a>…</a> …</div>
   ========================================================================== */

/* Variante A: direkt am <a> */
a.gradient-link-underline{
  position: relative;
  display: inline-block;   /* damit ::after unter dem Text sitzt */
  padding-bottom: var(--link-uline-gap);
  text-decoration: none;   /* native Unterstreichung aus */
}

/* animierte Gradient-Underline */
a.gradient-link-underline::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: var(--link-uline-h);
  width: 100%;
  background: background: var(--Linear, linear-gradient(270deg, #00EBFF -0.02%, #8200FF 49.99%, #FF1E78 100%))
;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--link-uline-dur) ease;
}

/* Hover / Focus / Active-Zustände */
a.gradient-link-underline:hover::after,
a.gradient-link-underline:focus-visible::after,
a.gradient-link-underline.active::after,
a.gradient-link-underline[aria-current="page"]::after{
  transform: scaleX(1);
}

/* Visited nicht verfärben (optional) */
a.gradient-link-underline:visited{ color: inherit; }

/* Variante B: Wrapper (z. B. am Texteditor-Widget) */
/* === Elementor Nested Menu: Gradient-Underline für ALLE Top-Level-Items === */
/* Basis: sowohl echte <a> als auch <div>. */
/* =========================
   Gradient-Underline (scoped)
   Wrapper: .gradient-links
   ========================= */

/* Zentrale Vorgaben (optional) */
:root{
  --link-uline-h:   2px;
  --link-uline-gap: 6px;
  --link-uline-dur: .25s;
  --link-underline-gradient: linear-gradient(270deg, #00EBFF -0.02%, #8200FF 49.99%, #FF1E78 100%);
}

/* A) Normale <a>-Links innerhalb des Wrappers */
.gradient-links a{
  position: relative;
  display: inline-block;
  padding-bottom: var(--link-uline-gap);
  text-decoration: none;
}
.gradient-links a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: var(--link-uline-h);
  width: 100%;
  background: var(--link-underline-gradient);
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0.0001);   /* verhindert Hairline */
  opacity: 0;
  transition:
    transform var(--link-uline-dur) ease,
    opacity   var(--link-uline-dur) ease;
}
.gradient-links a:hover::after,
.gradient-links a:focus-visible::after,
.gradient-links a.active::after,
.gradient-links a[aria-current="page"]::after{
  transform: scaleX(1);
  opacity: 1;
}
.gradient-links a:visited{ color: inherit; }

/* B) Elementor Nested Menu – Top-Level-Items (mit/ohne Untermenü) */
.gradient-links .e-n-menu .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container,
.gradient-links .e-n-menu .e-n-menu-item > .e-n-menu-title > a.e-n-menu-title-container{
  position: relative;
  display: inline-block;
  padding-bottom: var(--link-uline-gap);
  text-decoration: none;
}

/* Linie für Titel-Container */
.gradient-links .e-n-menu .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: var(--link-uline-h);
  width: 100%;
  background: var(--link-underline-gradient);
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0.0001);
  opacity: 0;
  transition:
    transform var(--link-uline-dur) ease,
    opacity   var(--link-uline-dur) ease;
}

/* Hover/Fokus auf dem gesamten <li> */
.gradient-links .e-n-menu .e-n-menu-item:hover > .e-n-menu-title > .e-n-menu-title-container::after,
.gradient-links .e-n-menu .e-n-menu-item:focus-within > .e-n-menu-title > .e-n-menu-title-container::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Aktive Seite (nur bei echtem <a>) */
.gradient-links .e-n-menu .e-n-menu-item > .e-n-menu-title > a.e-n-menu-title-container[aria-current="page"]::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Geöffnetes Untermenü → Linie dauerhaft sichtbar (moderne Browser) */
.gradient-links .e-n-menu .e-n-menu-item:has(> .e-n-menu-title > .e-n-menu-dropdown-icon[aria-expanded="true"])
  > .e-n-menu-title > .e-n-menu-title-container::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Barrierearm */
@media (prefers-reduced-motion: reduce){
    a.gradient-link-underline::after,.gradient-links a::after,
  .gradient-links .e-n-menu .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container::after{
    transition: none !important;
  }
}


/* ==========================================================================
   03) ELEMENTOR BUTTON – ANIMIERTE UNDERLINE
   Nutzung: Button-Widget → CSS-Klasse am Widget: .gradient-btn-underline
   Optional: .icon-only für reine Icon-Buttons
   ========================================================================== */

.gradient-btn-underline .elementor-button-text{
  position: relative;
  display: inline-block;
  padding-bottom: var(--btn-underline-gap, 8px);
}

.gradient-btn-underline .elementor-button-text::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: var(--btn-underline-h, 3px);
  width: 100%;
  background: linear-gradient(90deg,
              var(--btn-uline-c1, #FF1E78) 0%,
              var(--btn-uline-c2, #8200FF) 100%);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--btn-uline-dur, .25s) ease;
}

.gradient-btn-underline .elementor-button:hover .elementor-button-text::after,
.gradient-btn-underline .elementor-button:focus-visible .elementor-button-text::after,
.gradient-btn-underline .elementor-button[aria-pressed="true"] .elementor-button-text::after{
  transform: scaleX(1);
}

/* Icon-only Variante: Linie über gesamte Buttonbreite */
.gradient-btn-underline.icon-only .elementor-button{
  position: relative;
  padding-bottom: var(--btn-underline-gap, 8px);
}
.gradient-btn-underline.icon-only .elementor-button::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px;
  bottom: 0;
  height: var(--btn-underline-h, 3px);
  background: linear-gradient(90deg,
              var(--btn-uline-c1, #FF1E78) 0%,
              var(--btn-uline-c2, #8200FF) 100%);
  border-radius:999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--btn-uline-dur, .25s) ease;
}
.gradient-btn-underline.icon-only .elementor-button:hover::after,
.gradient-btn-underline.icon-only .elementor-button:focus-visible::after,
.gradient-btn-underline.icon-only .elementor-button[aria-pressed="true"]::after{
  transform: scaleX(1);
}

/* Persistent aktive Linien */
.gradient-btn-underline.active .elementor-button-text::after,
.gradient-btn-underline .elementor-button[aria-pressed="true"] .elementor-button-text::after{
  transform: scaleX(1);
}
.gradient-btn-underline.active.icon-only .elementor-button::after,
.gradient-btn-underline.icon-only .elementor-button[aria-pressed="true"]::after{
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce){
  .gradient-btn-underline .elementor-button-text::after,
  .gradient-btn-underline.icon-only .elementor-button::after{
    transition: none !important;
  }
}


/* ==========================================================================
   04) GRADIENT-BUTTONS (Fills & Rahmen)
   Nutzung: Klasse am Button-Widget-Container (.elementor-element.*)
   ========================================================================== */

/* Sekundär: Weißer Fill, sichtbarer Gradient-Rand, Hover getönt */
.elementor-element.secondary-gradient-magenta-btn .elementor-button {
  border: 2px solid transparent;
  color: #000;
  background:
    linear-gradient(270deg, #fff 0%, #fff 100%) padding-box,
    var(--Linear-Kontrast) border-box;
  background-clip: padding-box, border-box;
}
.elementor-element.secondary-gradient-magenta-btn .elementor-button:hover {
  border: 2px solid transparent;
  background:
    linear-gradient(270deg, #E7CEFF 0%, #FFA7CA 100%) padding-box,
    linear-gradient(270deg, #E7CEFF 0%, #FFA7CA 100%) padding-box,
    var(--Linear-Kontrast) border-box;
  background-clip: padding-box, padding-box, border-box;
}

/* Primär: Magenta-Fill + Rand, Hover abgedunkelt */
.elementor-element.primary-gradient-magenta-btn .elementor-button {
  background: var(--Linear-Kontrast);
  border-image: var(--Linear-Kontrast) 1 !important;
  border: 2px transparent;
  color: #fff;
}
.elementor-element.primary-gradient-magenta-btn .elementor-button:hover {
  background:
    linear-gradient(0deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.30) 100%),
    linear-gradient(270deg, #8200FF 0%, #FF1E78 100%);
}

/* Schwarz → Gelb-Magenta Rand im Hover */
.elementor-element.primary-yellow-magenta-btn .elementor-button {
  border: 2px solid transparent; color:#fff;
  background: var(--Linear-Black) padding-box, var(--Linear-Black) border-box;
  background-clip: padding-box, border-box;
}
.elementor-element.primary-yellow-magenta-btn .elementor-button:hover {
  background:
    linear-gradient(0deg, #4D545D 0%, #4D545D 100%) padding-box,
    linear-gradient(270deg, #4D545D 0%, #4D545D 100%) padding-box,
    linear-gradient(270deg, #FFF400 -0.02%, #FF1E78 100%) border-box;
  background-clip: padding-box, padding-box, border-box;
}

/* Schwarz → Türkis-Violett-Magenta Rand im Hover */
.elementor-element.primary-black-magenta-btn .elementor-button {
  border: 2px solid transparent; color:#fff;
  background: var(--Linear-Black) padding-box, var(--Linear-Black) border-box;
  background-clip: padding-box, border-box;
}
.elementor-element.primary-black-magenta-btn .elementor-button:hover {
  background:
    linear-gradient(0deg, #4D545D 0%, #4D545D 100%) padding-box,
    linear-gradient(270deg, #4D545D 0%, #4D545D 100%) padding-box,
    linear-gradient(270deg, #00818F -0.02%, #8200FF 49.99%, #D91A66 100%) border-box;
  background-clip: padding-box, padding-box, border-box;
}

/* Schwarz → Gelb-Türkis Rand im Hover */
.elementor-element.primary-black-yellow-btn .elementor-button {
  border: 2px solid transparent; color:#fff;
  background: var(--Linear-Black) padding-box, var(--Linear-Black) border-box;
  background-clip: padding-box, border-box;
}
.elementor-element.primary-black-yellow-btn .elementor-button:hover {
  background:
    linear-gradient(0deg, #4D545D 0%, #4D545D 100%) padding-box,
    linear-gradient(270deg, #4D545D 0%, #4D545D 100%) padding-box,
    linear-gradient(270deg, #FFF000 -0.02%, #00EBFF 100%) border-box;
  background-clip: padding-box, padding-box, border-box;
}


/* ==========================================================================
   05) ICON-GRADIENTS
   ========================================================================== */

.gradient-background-icon .elementor-icon{
  background: linear-gradient(270deg, #FFF400 0%, #FF1E78 100%);
}
.gradient-background-icon-gelb-turkis .elementor-icon{
  background: var(--Linear-Yellow);
}
.gradient-background-icon-magenta .elementor-icon{
  background: var(--Linear-Kontrast);
}


/* ==========================================================================
   06) NEWS CARD – HOVER & BUTTON (Responsive)
   Container: .news-card
   ========================================================================== */

.news-card{
  --fg:#111;              /* Text normal */
  --fg-hover:#fff;        /* Text bei Hover */
  --btn-h:44px;           /* Button-Durchmesser (Kreis) */
  --btn-max:160px;        /* Breite im aufgeklappten Zustand (Desktop) */
  --btn-pad-x:16px;       /* Horizontal-Padding im aufgeklappten Zustand */
  --btn-gap:.6rem;        /* Abstand Icon/Text (falls Text sichtbar) */
  --icon-size:18px;       /* Icon-Größe */
  color:var(--fg);
  transition: color .25s ease;
}
.news-card:hover{ color:var(--fg-hover); }

/* Typische Texte erben die Farbe */
.news-card .elementor-heading-title,
.news-card .elementor-widget-text-editor,
.news-card p, .news-card span, .news-card a{ color:inherit !important; }

/* Button-Farben entkoppelt (Start: weißes Icon) */
.news-card .elementor-button{ --btn-fg:#fff; --btn-bg:#000; }
.news-card:hover .elementor-button{ --btn-fg:#fff; }

/* Grund-Button (Icon-only, Kreis) */
.news-card .elementor-button{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); width:var(--btn-h);
  border-radius:var(--btn-h);
  padding:0; overflow:hidden; white-space:nowrap; line-height:1;
  color:var(--btn-fg); background:var(--btn-bg);
  border:none !important;
  transition:
    width .35s cubic-bezier(.2,.7,.3,1),
    padding .35s cubic-bezier(.2,.7,.3,1),
    border-radius .35s ease,
    background-color .2s ease;
}

.news-card .elementor-button .elementor-button-icon {padding-left:5px !important}

/* Button-Inhalte */
.news-card .elementor-button *{
  color:var(--btn-fg)!important;
  fill:var(--btn-fg)!important;
  stroke:var(--btn-fg)!important;
}
.news-card .elementor-button .elementor-button-content-wrapper{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.news-card .elementor-button .elementor-button-icon{
  order:1; margin:0!important; flex:0 0 auto;
  width:var(--btn-h); height:var(--btn-h);
  display:grid; place-items:center;
}
.news-card .elementor-button .elementor-button-icon i,
.news-card .elementor-button .elementor-button-icon svg{
  width:var(--icon-size); height:var(--icon-size);
}

/* Button-Text initial versteckt */
.news-card .elementor-button .elementor-button-text{
  order:2; overflow:hidden; max-width:0; opacity:0; transform:translateX(-4px);
  transition:
    opacity .2s ease .1s,
    max-width .35s cubic-bezier(.2,.7,.3,1),
    transform .35s ease;
}

/* Desktop-only: Hover-Expansion */
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  .news-card:hover .elementor-button{
    width:var(--btn-max);
    padding-inline:var(--btn-pad-x);
    border-radius:999px;
    margin-right:30px;
  }
  .news-card:hover .elementor-button .elementor-button-icon{
    opacity:0; transform:scale(.92);
    width:0; flex-basis:0; padding:0; margin:0!important;
    transition: opacity .2s ease, transform .2s ease;
  }
  .news-card:hover .elementor-button .elementor-button-text{
    max-width:20ch; opacity:1; transform:translateX(0);
  }
}

/* Tablet & Mobile: immer Icon-State */
@media (max-width:1024px), (hover:none){
  .news-card .elementor-button{
    width:var(--btn-h) !important;
    padding:0 !important;
    border-radius:var(--btn-h) !important;
    margin-right:0 !important;
    transition: background-color .2s ease !important;
  }
  .news-card .elementor-button .elementor-button-icon{
    width:var(--btn-h); height:var(--btn-h);
    opacity:1; transform:none;
  }
  .news-card .elementor-button .elementor-button-text{
    max-width:0 !important;
    opacity:0 !important;
    transform:translateX(-4px) !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .news-card .elementor-button,
  .news-card .elementor-button .elementor-button-text{
    transition:none !important;
  }
}


/* ==========================================================================
   07) JOB CARD – CLEAN SETUP
   Container: .job-card
   ========================================================================== */

.job-card{
  --fg:#111; --fg-hover:#fff;
  --btn-h:44px; --icon-size:18px;
  --btn-fg:#fff; --btn-bg:#000; --btn-bg-hover:#111;
  --icon-base: currentColor; --icon-hover:#fff;
  --divider-base: currentColor; --divider-hover:#fff;
  --divider-w: 2px;
  color:var(--fg);
}

.job-card .elementor-heading-title,
.job-card .elementor-widget-text-editor,
.job-card p, .job-card span, .job-card a{ color:inherit !important; }

.job-card:hover{ color:var(--fg-hover); }

/* Button: Icon-only */
.job-card .elementor-button{
  display:grid; place-items:center;
  width:var(--btn-h); min-width:var(--btn-h); height:var(--btn-h);
  border-radius:999px; border:none; padding:0; line-height:1;
  background:var(--btn-bg); color:var(--btn-fg);
  transition: background-color .2s ease;
}
.job-card .elementor-button:hover,
.job-card .elementor-button:focus-visible{ background:var(--btn-bg-hover); }
.job-card .elementor-button *{
  color:var(--btn-fg)!important; fill:var(--btn-fg)!important; stroke:var(--btn-fg)!important;
}
.job-card .elementor-button .elementor-button-icon{
  width:var(--btn-h); height:var(--btn-h); display:grid; place-items:center;
}
.job-card .elementor-button .elementor-button-text{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  .job-card .elementor-button{ transition:none !important; }
}

/* ICONS allgemein (Icon-Widget, Icon-List, Social) */
.job-card .elementor-icon,
.job-card .elementor-icon i,
.job-card .elementor-icon svg,
.job-card .elementor-icon-list-icon i,
.job-card .elementor-icon-list-icon svg,
.job-card .elementor-social-icon i,
.job-card .elementor-social-icon svg{
  color:var(--icon-base); fill:var(--icon-base); stroke:var(--icon-base);
  transition: color .25s ease, fill .25s ease, stroke .25s ease;
}
.job-card:hover .elementor-icon,
.job-card:hover .elementor-icon i,
.job-card:hover .elementor-icon svg,
.job-card:hover .elementor-icon-list-icon i,
.job-card:hover .elementor-icon-list-icon svg,
.job-card:hover .elementor-social-icon i,
.job-card:hover .elementor-social-icon svg{
  color:var(--icon-hover)!important; fill:var(--icon-hover)!important; stroke:var(--icon-hover)!important;
}

/* DIVIDER der ICON-LIST (Inline-Layout) */
.job-card.job-card .elementor-icon-list-items.elementor-inline-items
  > .elementor-icon-list-item:not(:last-child)::after{
  border-left: var(--divider-w) solid var(--divider-base) !important;
  border-color: var(--divider-base) !important;
}
.job-card.job-card:hover .elementor-icon-list-items.elementor-inline-items
  > .elementor-icon-list-item:not(:last-child)::after{
  border-left-color: var(--divider-hover) !important;
  border-color: var(--divider-hover) !important;
}

/* (Optional) Divider-Widget-Farben angleichen */
.job-card .elementor-divider-separator{
  border-color: var(--divider-base) !important;
  border-top-color: var(--divider-base) !important;
  background-color: var(--divider-base) !important;
  transition: border-color .25s ease, background-color .25s ease;
}
.job-card:hover .elementor-divider-separator{
  border-color: var(--divider-hover) !important;
  border-top-color: var(--divider-hover) !important;
  background-color: var(--divider-hover) !important;
}


/* ==========================================================================
   08) KURSE CARD – Hover-Basis
   Container: .kurse-hover
   ========================================================================== */

.kurse-hover .hover-black,
.kurse-hover .hover-grey,
.kurse-hover .hover-grey *{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.kurse-hover:hover .hover-black{
  color:#fff;
  background: #000 !important;
  background-color: #000 !important;
}


/* ==========================================================================
   09) GRADIENT-TEXT UTILITIES (+ Fallback)
   ========================================================================== */

.gradient-magenta-text{
  --grad: linear-gradient(270deg, #8200FF 0%, #FF1E78 100%);
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color: transparent; -webkit-text-fill-color: transparent;
  display:inline-block; line-height:1.3;
}
.gradient-yellow-text{
  --grad: linear-gradient(270deg, #FFF000 -0.02%, #00EBFF 100%);
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color: transparent; -webkit-text-fill-color: transparent;
  display:inline-block; line-height:1.3;
}
.gradient-red-text{
  --grad: linear-gradient(270deg, #FFF400 0%, #FF1E78 100%);
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color: transparent; -webkit-text-fill-color: transparent;
  display:inline-block; line-height:1.3;
}

/* Fallback: Browser ohne background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .gradient-magenta-text{ color:#FF1E78; background:none; }
  .gradient-yellow-text{  color:#00EBFF; background:none; }
  .gradient-red-text{     color:#FF1E78; background:none; }
}


/* ==========================================================================
   10) KARRIERE – WERTE-KACHELN (Hover-Reveal & Mobile-Active)
   Parent: .parent-hover-reveal | Kind: .reveal-on-hover / .fade-out-on-hover
   Optional: .overlay positioniert Reveal absolut über dem Parent.
   ========================================================================== */

.parent-hover-reveal{
  position: relative;
  --dur: .25s;
  --easing: cubic-bezier(.22,.61,.36,1);
}

/* Startzustände */
.parent-hover-reveal .reveal-on-hover{
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:
    opacity var(--dur) var(--easing),
    transform var(--dur) var(--easing),
    visibility 0s linear var(--dur);
}
.parent-hover-reveal .fade-out-on-hover{
  opacity:1; visibility:visible;
  transition: opacity var(--dur) var(--easing),
             transform var(--dur) var(--easing),
             visibility 0s;
}

/* Hover/Focus: Desktop */
@media (hover:hover) and (pointer:fine){
  .parent-hover-reveal:hover .reveal-on-hover,
  .parent-hover-reveal:focus-within .reveal-on-hover{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
    transition:
      opacity var(--dur) var(--easing),
      transform var(--dur) var(--easing),
      visibility 0s;
  }
  .parent-hover-reveal:hover .fade-out-on-hover,
  .parent-hover-reveal:focus-within .fade-out-on-hover{
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
    transition:
      opacity var(--dur) var(--easing),
      transform var(--dur) var(--easing),
      visibility 0s linear var(--dur);
  }
}

/* Mobile/Tablet: aktiver Slide steuert Zustand innerhalb .career-cards */
@media (max-width:1024px), (hover:none), (pointer:coarse){
  .career-cards .e-n-carousel 
  .swiper-slide:is(.swiper-slide-active, .swiper-slide-duplicate-active)
  .parent-hover-reveal .reveal-on-hover{
    opacity:1 !important; visibility:visible !important;
    pointer-events:auto; transform:translateY(0);
  }
  .career-cards .e-n-carousel 
  .swiper-slide:is(.swiper-slide-active, .swiper-slide-duplicate-active)
  .parent-hover-reveal .fade-out-on-hover{
    opacity:0 !important; visibility:hidden !important;
    pointer-events:none; transform:translateY(-6px);
  }

  /* Optional: schalte evtl. schwebende Hover-Effekte aus */
  .career-cards .parent-hover-reveal:hover .reveal-on-hover,
  .career-cards .parent-hover-reveal:focus-within .reveal-on-hover{
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  }
  .career-cards .parent-hover-reveal:hover .fade-out-on-hover,
  .career-cards .parent-hover-reveal:focus-within .fade-out-on-hover{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }
}

/* Zarte & kurze Fades (Option) */
.career-cards .parent-hover-reveal{
  --fade-in: 160ms;
  --fade-out:140ms;
  --ease-in: cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}
.career-cards .parent-hover-reveal .reveal-on-hover{
  transition:
    opacity var(--fade-in) var(--ease-in),
    transform var(--fade-in) var(--ease-in),
    visibility 0s linear var(--fade-in);
}
.career-cards .parent-hover-reveal .fade-out-on-hover{
  transition:
    opacity var(--fade-out) var(--ease-out),
    transform var(--fade-out) var(--ease-out),
    visibility 0s;
}

/* Overlay-Option (kein Layout-Shift) */
.parent-hover-reveal.overlay .reveal-on-hover{
  position: absolute; inset: 0; z-index: 2;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .parent-hover-reveal .reveal-on-hover,
  .parent-hover-reveal .fade-out-on-hover{
    transition: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   11) UTILITY: GRADIENT-BORDER (weiße Box mit farbigem Rand)
   Nutzung: .gradient-border
   ========================================================================== */

.gradient-border{
  --bw: 1px; /* Randbreite */
  --stroke: var(--Linear-Kontrast);
  border: var(--bw) solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--stroke) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

/* Elementor-Overlay-Fix (falls Hintergründe Ränder überdecken) */
.gradient-border.e-con::before{ inset: var(--bw) !important; }


/* ==========================================================================
   12) ELEMENTOR FORM – ABSTAND HTML-FELD
   ========================================================================== */

.elementor-field-type-html{
  margin-top: 22px;
  margin-bottom: 8px !important;
}

/* ==========================================================================
   13) WP FORMS – Styling
   ========================================================================== */
/* Black Button to Gradient magenta-purple */
.wpforms-submit {
  border: 2px solid transparent !important; 
  color: #fff !important;
  background:
    var(--Linear-Kontrast, linear-gradient(270deg, #000 0%, #000 100%)) padding-box,
    var(--Linear-Kontrast, linear-gradient(270deg, #000 0%, #000 100%)) border-box !important;
  background-clip: padding-box, border-box !important;
}

/* Hover-State */
.wpforms-submit:hover {
  background:
    linear-gradient(0deg, #4D545D 0%, #4D545D 100%) padding-box, 
    linear-gradient(270deg, #4D545D 0%, #4D545D 100%) padding-box,                   
  linear-gradient(270deg, #00818F -0.02%, #8200FF 49.99%, #D91A66 100%) border-box !important;    
  
 background-clip: padding-box, padding-box, border-box !important;
}

.wpforms-field-label-inline {font-weight:300 !important}
.wpforms-field-label {font-weight:500 !important; line-height:0px !important}
.wpforms-field-medium {font-weight:300 !important}
.wpforms-field-large {font-weight:300 !important}
.wpforms-field-small {font-weight:300 !important}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'MarkPro';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_medium.woff2') format('woff2'),
		url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_medium.woff') format('woff');
}
@font-face {
	font-family: 'MarkPro';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_light.woff2') format('woff2'),
		url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_light.woff') format('woff');
}
@font-face {
	font-family: 'MarkPro';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_bold.woff2') format('woff2'),
		url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_bold.woff') format('woff');
}
@font-face {
	font-family: 'MarkPro';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_medium.woff2') format('woff2'),
		url('https://prosoz.plstr.dev/wp-content/uploads/2025/05/markpro_medium.woff') format('woff');
}
/* End Custom Fonts CSS */