/* GrisaKI Stellenseite (4.2.0: alle Regeln !important gegen Elementor-Globaleinstellungen und Theme —
   außer opacity/transform/animation/transition, sonst blockiert !important die Einblend-Animation). Ursprung 4.1.2 — aus der Elementor-Vorlage „Stellenvorlage1". Wird nur auf Beiträgen geladen, die GrisaKI angelegt hat. Nur Systemschriften. */
.rpjh-style { display: none !important; }

/* =====================================================
   Layout-Logik:
   - ab 1441px: zweispaltig, H1 links, kein Glas-Titel
   - bis 1440px: Bild oben mit Verlauf + Glas-Titel, Text darunter

   BILDMODUS:
   - Standard = Querformat-Modus (Bild randlos als Cover)
   - Fuer QUADRATISCHE Bilder: am Root-Container unter
     Erweitert -> CSS-Klassen zusaetzlich "rpjh-square" eintragen.
     Dann wird das Bild NICHT beschnitten, sondern als Karte
     mit runden Ecken + Schatten gezeigt, rechte Spalte schmaler.
   ===================================================== */

/* ===== Grundgeruest ===== */
.rpjh-root {
  /* 4.1.3: !important — als eigene Datei im Kopf verliert die Regel sonst gegen Elementors
     Container-Ränder (margin-left blieb 0, der Kopfteil rutschte um 50 % nach rechts). */
  width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important;
  margin-left: -50vw !important; margin-right: 0 !important;
  background: #f7f3ef !important; overflow: hidden !important;
}
.rpjh-root, .rpjh-root .elementor-widget-container, .rpjh-root .elementor-heading-title, .rpjh-root .elementor-button {
  font-family: Georgia, 'Times New Roman', serif !important;
}
.rpjh-left {
  display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 0 !important;
  position: relative !important; color: #54575a !important; font-size: 17.5px !important; line-height: 1.75 !important;
}
.rpjh-left::before {
  content: '' !important; position: absolute !important; left: 0 !important; top: 14% !important; bottom: 14% !important; width: 4px !important;
  background: linear-gradient(to bottom, transparent, #f08050 25%, #f08050 75%, transparent) !important;
  border-radius: 4px !important;
}
.rpjh-media { position: relative !important; overflow: hidden !important; padding: 0 !important; }
.rpjh-media .rpjh-img { margin: 0 !important; }
.rpjh-media .rpjh-img img { width: 100% !important; display: block !important; }

/* ===== Eyebrow ===== */
.rpjh-eyebrow { margin-bottom: 1rem !important; }
.rpjh-eyebrow .elementor-heading-title {
  display: inline-flex !important; align-items: center !important; gap: .65rem !important;
  font-size: .74rem !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #f08050 !important;
}
.rpjh-eyebrow .elementor-heading-title::before {
  content: '' !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: #f08050 !important;
  box-shadow: 0 0 0 4px rgba(240,128,80,.12) !important; flex-shrink: 0 !important;
}

/* ===== H1 + Linie (nur grosser Desktop) ===== */
.rpjh-h1 { margin-bottom: 1.2rem !important; }
.rpjh-h1 .elementor-heading-title {
  font-size: clamp(1.9rem, 2.6vw, 3.1rem) !important; font-weight: 700 !important; line-height: 1.18 !important;
  color: #4c4f52 !important; letter-spacing: -.012em !important;
}
.rpjh-h1 .elementor-heading-title em { font-style: italic !important; font-weight: 600 !important; color: #f08050 !important; }
.rpjh-h1 .elementor-heading-title::after {
  content: '' !important; display: block !important; width: 56px !important; height: 3px !important; background: #f08050 !important;
  border-radius: 3px !important; margin-top: 1.1rem !important;
}

/* ===== Beschreibung + Quickfacts ===== */
.rpjh-desc { max-width: 540px !important; margin-bottom: 1.5rem !important; }
.rpjh-desc p { margin: 0 !important; }
.rpjh-quick { margin-bottom: 1.8rem !important; font-size: .98rem !important; color: #4c4f52 !important; }
.rpjh-quick p { margin: 0 0 7px !important; }
.rpjh-quick p:last-child { margin-bottom: 0 !important; }

/* ===== Button ===== */
.rpjh-btn .elementor-button {
  background: #f08050 !important; color: #fff !important; border-radius: 999px !important; padding: 1rem 2.1rem !important;
  font-size: .95rem !important; font-weight: 600 !important; line-height: 1 !important;
  box-shadow: 0 8px 24px rgba(240,128,80,.35) !important; transition: all .22s ease;
}
.rpjh-btn .elementor-button:hover {
  background: #d96a3a !important; color: #fff !important; transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(240,128,80,.45) !important;
}

/* ===== Einblend-Animation links ===== */
@keyframes rpjhIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rpjh-left > .elementor-element { opacity: 0; animation: rpjhIn .6s ease forwards; }
.rpjh-left > .elementor-element:nth-child(1) { animation-delay: .1s; }
.rpjh-left > .elementor-element:nth-child(2) { animation-delay: .22s; }
.rpjh-left > .elementor-element:nth-child(3) { animation-delay: .32s; }
.rpjh-left > .elementor-element:nth-child(4) { animation-delay: .42s; }
.rpjh-left > .elementor-element:nth-child(5) { animation-delay: .5s; }

/* ===== Glas-Box-Headline im Bild ===== */
.rpjh-media .rpjh-mh1 {
  position: absolute !important; bottom: 4% !important; left: 4vw !important; right: 4vw !important; z-index: 4 !important; margin: 0 !important; width: auto !important;
}
.rpjh-mh1 .elementor-heading-title {
  display: inline-block !important; background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important;
  border-radius: 14px !important; padding: .55rem .95rem .65rem !important; border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 0 22px 8px rgba(255,255,255,.6), 0 0 46px 14px rgba(255,255,255,.32), 0 4px 24px rgba(255,255,255,.22) !important;
  font-size: clamp(1.02rem, 2vw, 1.6rem) !important; font-weight: 700 !important; line-height: 1.16 !important;
  color: #4c4f52 !important; letter-spacing: -.012em !important;
}
.rpjh-mh1 .elementor-heading-title em { font-style: italic !important; font-weight: 600 !important; color: #f08050 !important; }

/* ===== GROSSER DESKTOP (ab 1441px): zweispaltig ===== */
@media (min-width: 1441px) {
  .rpjh-root { min-height: min(56vh, 560px) !important; }
  .rpjh-left {
    width: 50% !important; max-width: 50% !important;
    padding: 3.5rem 4rem 3.5rem max(6vw, calc((100vw - 1600px) / 2 + 40px)) !important;
  }
  .rpjh-media { width: 50% !important; max-width: 50% !important; min-height: 440px !important; }
  .rpjh-media .rpjh-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .rpjh-media .rpjh-img .elementor-widget-container { width: 100% !important; height: 100% !important; }
  .rpjh-media .rpjh-img img {
    height: 100% !important; object-fit: cover !important; object-position: center 30% !important;
    animation: rpjhZoom 16s ease-out both;
  }
  .rpjh-media::before {
    content: '' !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important;
    background: #f7f3ef !important; clip-path: polygon(0 0, 12% 0, 0 100%) !important;
  }
  .rpjh-media .rpjh-mh1 { display: none !important; }

  /* ---- QUADRAT-MODUS Desktop: schmalere Bildspalte, Bild als
         unbeschnittene Karte mittig ---- */
  .rpjh-root.rpjh-square .rpjh-left { width: 57% !important; max-width: 57% !important; }
  .rpjh-root.rpjh-square .rpjh-media {
    width: 43% !important; max-width: 43% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 2.5rem !important;
  }
  .rpjh-root.rpjh-square .rpjh-media::before { display: none !important; }
  .rpjh-root.rpjh-square .rpjh-media .rpjh-img {
    position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 100% !important;
  }
  .rpjh-root.rpjh-square .rpjh-media .rpjh-img .elementor-widget-container { width: auto !important; height: auto !important; }
  .rpjh-root.rpjh-square .rpjh-media .rpjh-img img {
    width: auto !important; height: auto !important; max-width: 100% !important; max-height: 480px !important;
    object-fit: unset !important; animation: none;
    border-radius: 26px !important;
    box-shadow: 0 30px 70px -28px rgba(84,87,90,.45) !important;
  }
}
@keyframes rpjhZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

/* ===== LAPTOP + TABLET + MOBIL (bis 1440px): Bild oben ===== */
@media (max-width: 1440px) {
  .rpjh-left, .rpjh-media { width: 100% !important; max-width: 100% !important; }
  .rpjh-media { order: -1 !important; }
  .rpjh-media::after {
    content: '' !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important;
    background: linear-gradient(to bottom, rgba(247,243,239,0) 35%, rgba(247,243,239,.55) 72%, rgba(247,243,239,.97) 100%) !important;
  }
  .rpjh-media .rpjh-mh1 { display: block !important; }
  .rpjh-left .rpjh-h1 { display: none !important; }
  .rpjh-left { padding: 1.6rem clamp(28px, 6vw, 90px) 2.8rem !important; }

  /* ---- QUADRAT-MODUS gestapelt: Karte mittig statt randlos,
         kein Verlauf, Glas-Titel liegt auf der Kartenunterkante ---- */
  .rpjh-root.rpjh-square .rpjh-media {
    display: flex !important; justify-content: center !important;
    padding: 1.8rem clamp(20px, 5vw, 60px) 2.6rem !important;
  }
  .rpjh-root.rpjh-square .rpjh-media::after { display: none !important; }
  .rpjh-root.rpjh-square .rpjh-media .rpjh-img { width: auto !important; max-width: 100% !important; }
  .rpjh-root.rpjh-square .rpjh-media .rpjh-img img {
    width: auto !important; height: auto !important; max-width: 100% !important; max-height: 54vh !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 55px -24px rgba(84,87,90,.42) !important;
  }
  .rpjh-root.rpjh-square .rpjh-media .rpjh-mh1 { bottom: 1.4rem !important; }
}

/* Laptop (nur Standard-Modus): breite Bilder in der Hoehe begrenzen */
@media (min-width: 1025px) and (max-width: 1440px) {
  .rpjh-root:not(.rpjh-square) .rpjh-media .rpjh-img img {
    max-height: 62vh !important; object-fit: cover !important; object-position: center 30% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpjh-root *, .rpjh-root *::before, .rpjh-root *::after { animation: none !important; transition: none !important; }
  .rpjh-left > .elementor-element { opacity: 1; }
}