/* GrisaKI Stellenseite — Design 2 (4.3.0).
   Gilt nur für Beiträge mit Meta _grisaki_design = 2 (Body-Klasse gk-design-2); ältere Stellenseiten
   behalten assets/css/stellenseite.css, bis sie aus GrisaKI neu angelegt/aktualisiert werden.

   Grundsätze:
   - EINE Schrift (--gk-font, Systemschrift des Geräts: Segoe UI / San Francisco / Roboto) statt
     Georgia/Tahoma/Helvetica gemischt. Keine Webfont, nichts von fremden Servern. Eine Website kann
     --gk-font überschreiben (z. B. body.gk-design-2 { --gk-font: inherit; }), wenn ihre Schrift passt.
   - EINE Typo-Skala (Variablen unten). Jede Textstelle der Vorlage hängt an genau einer Stufe:
       H1 Stellentitel · H2 Abschnitt (Deine Benefits, Hier findest du dich wieder?, Bewerben)
       H3 Unterabschnitt (Dein Arbeitsalltag, Das bringst du mit) · Label (Standorte, Arbeitszeitmodell)
       Fließtext/Listen · klein (Quickfacts)
   - EIN Knopf-Stil (Pille) für alle „Zum neuen Job"-Knöpfe, auch im Kopfteil.
   - Farbe nur über --gk-primary (Inline-CSS je Seite aus der Primärfarbe des Unternehmens).
   - !important überall dort, wo Elementor-Kit oder Theme sonst gewinnen (gemessen 4.1.x/4.2.0 bei Schatz/Flatsome);
     nicht bei opacity/transform/animation/transition (sonst bleibt die Einblend-Animation stehen). */

body.gk-design-2 {
  --gk-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gk-primary: #F09008;
  --gk-primary-dark: #c87406;
  --gk-primary-soft: rgba(240, 144, 8, .12);
  --gk-ink: #24282c;
  --gk-text: #474c52;
  --gk-muted: #70767d;
  --gk-tint: #f7f4f0;
  --gk-line: rgba(36, 40, 44, .09);

  --gk-fs-h1: clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem);
  --gk-fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --gk-fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --gk-fs-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --gk-fs-small: .9375rem;
  --gk-fs-label: .78rem;

  --gk-radius-btn: 999px;
  --gk-radius-card: 18px;
  --gk-gutter: clamp(20px, 5vw, 64px);
  --gk-maxw: 1600px;
}

/* ===== Schrift + Grundfarbe für alles auf der Stellenseite ===== */
.gk-design-2 .gk-hero, .gk-design-2 .gk-section,
.gk-design-2 .gk-hero .elementor-widget-container, .gk-design-2 .gk-section .elementor-widget-container,
.gk-design-2 .gk-hero .elementor-heading-title, .gk-design-2 .gk-section .elementor-heading-title,
.gk-design-2 .gk-hero .elementor-button, .gk-design-2 .gk-section .elementor-button,
.gk-design-2 .gk-hero p, .gk-design-2 .gk-section p, .gk-design-2 .gk-section li {
  font-family: var(--gk-font) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.gk-design-2 .gk-section .elementor-widget-container,
.gk-design-2 .gk-section p, .gk-design-2 .gk-section li {
  font-size: var(--gk-fs-body) !important; line-height: 1.7 !important; color: var(--gk-text) !important;
}
.gk-design-2 .gk-section p { margin: 0 0 .8em !important; }
.gk-design-2 .gk-section p:last-child { margin-bottom: 0 !important; }

.gk-design-2 .gk-hero, .gk-design-2 .gk-hero *, .gk-design-2 .gk-section, .gk-design-2 .gk-section * { box-sizing: border-box !important; }

/* ===== Abschnitte: volle Breite, Inhalt mittig begrenzt ===== */
.gk-design-2 .gk-section {
  width: 100% !important; max-width: none !important;
  padding: clamp(48px, 6vw, 88px) var(--gk-gutter) !important;
  background: #fff !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: clamp(20px, 2.4vw, 32px) !important;
}
.gk-design-2 .gk-section--tint { background: var(--gk-tint) !important; }
/* 4.16.2: Inhaltsbreite fest 1600px auf jeder Website. 4.11.1 nahm die Elementor-Kit-Einstellung
   (--container-max-width) – die stimmt aber nur, wenn Elementor die Seitenbreite bestimmt (Gorgas 641: 1600px).
   Bei Schatz bestimmt Flatsome die Breite, das Kit stand auf dem Werkswert 1140px: Abschnitte 1140px, der
   Kopfteil (Einzug höchstens 12vw) wirkte rund 1600px breit – oben und unten liefen auseinander. */
.gk-design-2 .gk-hero, .gk-design-2 .gk-section { --gk-maxw: 1600px; }
.gk-design-2 .gk-section > .elementor-element { width: 100% !important; max-width: var(--gk-maxw) !important; margin: 0 !important; }

/* ===== Überschriften ===== */
.gk-design-2 .gk-h2 .elementor-heading-title {
  font-size: var(--gk-fs-h2) !important; font-weight: 700 !important; line-height: 1.2 !important;
  color: var(--gk-ink) !important; text-align: center !important; margin: 0 !important; text-wrap: balance;
}
.gk-design-2 .gk-h2 .elementor-heading-title::after {
  content: '' !important; display: block !important; width: 48px !important; height: 3px !important;
  border-radius: 3px !important; background: var(--gk-primary) !important; margin: .55em auto 0 !important;
}
.gk-design-2 .gk-h3 .elementor-heading-title {
  font-size: var(--gk-fs-h3) !important; font-weight: 700 !important; line-height: 1.3 !important;
  color: var(--gk-ink) !important; margin: 0 !important; text-align: left !important;
}
.gk-design-2 .gk-label .elementor-heading-title {
  font-size: var(--gk-fs-label) !important; font-weight: 700 !important; line-height: 1.2 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--gk-primary) !important;
  margin: 0 !important;
}

/* ===== Knöpfe: ein Stil für alle ===== */
.gk-design-2 .gk-btn { width: auto !important; }
.gk-design-2 .gk-section > .gk-btn { width: auto !important; max-width: none !important; }
.gk-design-2 .gk-btn .elementor-button-wrapper { text-align: inherit !important; }
.gk-design-2 .gk-btn .elementor-button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .6em !important;
  background: var(--gk-primary) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--gk-radius-btn) !important; padding: 1em 1.9em !important;
  font-size: 1rem !important; font-weight: 600 !important; line-height: 1.2 !important;
  box-shadow: 0 10px 24px -12px var(--gk-primary) !important; text-decoration: none !important;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gk-design-2 .gk-btn .elementor-button:hover, .gk-design-2 .gk-btn .elementor-button:focus-visible {
  background: var(--gk-primary-dark) !important; color: #fff !important; transform: translateY(-2px);
}
.gk-design-2 .gk-btn .elementor-button * { color: #fff !important; fill: #fff !important; font-size: inherit !important; }
.gk-design-2 .gk-btn .elementor-button-content-wrapper { display: inline-flex !important; align-items: center !important; gap: .6em !important; flex-direction: row !important; }
.gk-design-2 .gk-btn .elementor-button-icon { order: 2 !important; margin: 0 !important; font-size: .9em !important; }
.gk-design-2 .gk-btn .elementor-button-icon svg { width: .9em !important; height: .9em !important; }

/* =====================================================
   KOPFTEIL (Hero)
   ab 1025px: Text links, Bild rechts · bis 1024px: Bild oben (mit Glas-Titel), Text darunter
   ===================================================== */
.gk-design-2 .rpjh-root {
  width: 100% !important; max-width: none !important; position: relative !important;
  background: var(--gk-tint) !important; overflow: hidden !important; margin: 0 !important;
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; padding: 0 !important;
}
.gk-design-2 .rpjh-left {
  display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 0 !important;
  position: relative !important;
}
.gk-design-2 .rpjh-left::before {
  content: '' !important; position: absolute !important; left: 0 !important; top: 16% !important; bottom: 16% !important; width: 4px !important;
  background: linear-gradient(to bottom, transparent, var(--gk-primary) 25%, var(--gk-primary) 75%, transparent) !important;
  border-radius: 4px !important;
}
.gk-design-2 .rpjh-media { position: relative !important; overflow: hidden !important; padding: 0 !important; }
.gk-design-2 .rpjh-media .rpjh-img { margin: 0 !important; }
.gk-design-2 .rpjh-media .rpjh-img img { width: 100% !important; display: block !important; border-radius: 0 !important; }

/* Titel: Stellenbezeichnung groß, (m/w/d) klein dahinter und nie allein in einer Zeile */
.gk-design-2 .rpjh-h1 { margin: 0 0 1.1rem !important; }
.gk-design-2 .rpjh-h1 .elementor-heading-title {
  font-size: var(--gk-fs-h1) !important; font-weight: 700 !important; line-height: 1.15 !important;
  color: var(--gk-ink) !important; margin: 0 !important;
}
.gk-design-2 .rpjh-h1 .elementor-heading-title::after {
  content: '' !important; display: block !important; width: 56px !important; height: 3px !important;
  background: var(--gk-primary) !important; border-radius: 3px !important; margin-top: .45em !important;
}
.gk-design-2 .gk-gender {
  font-size: .5em !important; font-weight: 500 !important; color: var(--gk-muted) !important;
  white-space: nowrap !important; margin-left: .25em !important; vertical-align: .12em !important;
  letter-spacing: .02em !important;
}

.gk-design-2 .rpjh-desc { max-width: 560px !important; margin: 0 0 1.25rem !important; }
.gk-design-2 .rpjh-desc .elementor-widget-container, .gk-design-2 .rpjh-desc p {
  font-size: var(--gk-fs-body) !important; line-height: 1.7 !important; color: var(--gk-text) !important; margin: 0 !important;
}
.gk-design-2 .rpjh-quick { margin: 0 0 1.75rem !important; }
.gk-design-2 .rpjh-quick .elementor-widget-container, .gk-design-2 .rpjh-quick p {
  font-size: var(--gk-fs-small) !important; line-height: 1.6 !important; color: var(--gk-text) !important; margin: 0 0 .3em !important;
}
.gk-design-2 .rpjh-btn .elementor-button-wrapper { text-align: left !important; }

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

/* Glas-Titel im Bild (nur gestapeltes Layout) */
.gk-design-2 .rpjh-media .rpjh-mh1 {
  position: absolute !important; bottom: 5% !important; left: var(--gk-gutter) !important; right: var(--gk-gutter) !important;
  z-index: 4 !important; margin: 0 !important; width: auto !important;
}
.gk-design-2 .rpjh-mh1 .elementor-heading-title {
  display: inline-block !important; background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 14px !important; padding: .5em .85em .55em !important; border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.25) !important;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 2rem) !important; font-weight: 700 !important; line-height: 1.2 !important;
  color: var(--gk-ink) !important; text-align: left !important; text-wrap: balance;
}

@media (min-width: 1025px) {
  .gk-design-2 .rpjh-root { min-height: min(62vh, 600px) !important; }
  .gk-design-2 .rpjh-left {
    width: 50% !important; max-width: 50% !important;
    /* Text bündig mit dem Inhalt darunter, aber nie schmaler als nötig (Titel in einer Zeile). */
    --gk-hero-pad: max(var(--gk-gutter), min(calc((100vw - var(--gk-maxw)) / 2), 12vw));
    padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px) clamp(40px, 5vw, 72px) var(--gk-hero-pad) !important;
  }
  .gk-design-2 .rpjh-left::before { left: calc(var(--gk-hero-pad) - 22px) !important; }
  .gk-design-2 .rpjh-media { width: 50% !important; max-width: 50% !important; min-height: 440px !important; }
  .gk-design-2 .rpjh-media .rpjh-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .gk-design-2 .rpjh-media .rpjh-img .elementor-widget-container { width: 100% !important; height: 100% !important; }
  .gk-design-2 .rpjh-media .rpjh-img img {
    height: 100% !important; object-fit: cover !important; object-position: center 30% !important;
    animation: gkZoom 16s ease-out both;
  }
  .gk-design-2 .rpjh-media::before {
    content: '' !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important;
    background: var(--gk-tint) !important; clip-path: polygon(0 0, 10% 0, 0 100%) !important;
  }
  .gk-design-2 .rpjh-media .rpjh-mh1 { display: none !important; }
}
@keyframes gkZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (max-width: 1024px) {
  .gk-design-2 .rpjh-left, .gk-design-2 .rpjh-media { width: 100% !important; max-width: 100% !important; }
  .gk-design-2 .rpjh-media { order: -1 !important; }
  .gk-design-2 .rpjh-media .rpjh-img img { max-height: min(70vh, 560px) !important; object-fit: cover !important; object-position: center 30% !important; }
  .gk-design-2 .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,244,240,0) 40%, rgba(247,244,240,.6) 75%, var(--gk-tint) 100%) !important;
  }
  .gk-design-2 .rpjh-media .rpjh-mh1 { display: block !important; }
  .gk-design-2 .rpjh-left .rpjh-h1 { display: none !important; }
  .gk-design-2 .rpjh-left { padding: 1.5rem var(--gk-gutter) 2.75rem !important; }
  .gk-design-2 .rpjh-left::before { display: none !important; }
}
@media (max-width: 600px) {
  .gk-design-2 .rpjh-media .rpjh-img img { min-height: 300px !important; max-height: min(56vh, 460px) !important; }
  .gk-design-2 .rpjh-btn .elementor-button, .gk-design-2 .gk-btn .elementor-button { width: 100% !important; }
  .gk-design-2 .gk-section > .gk-btn, .gk-design-2 .rpjh-btn { width: 100% !important; }
  .gk-design-2 .gk-career p { text-align: left !important; }
}

/* ===== Eckdaten: Standorte · Arbeitszeitmodell · Bereich ===== */
.gk-design-2 .gk-facts-wrap { padding-top: clamp(28px, 3.5vw, 44px) !important; padding-bottom: clamp(28px, 3.5vw, 44px) !important; border-bottom: 1px solid var(--gk-line) !important; }
.gk-design-2 .gk-facts {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important;
  gap: 14px !important;
}
.gk-design-2 .gk-fact {
  flex: 1 1 220px !important; max-width: 340px !important; width: auto !important;
  background: var(--gk-tint) !important; border-radius: var(--gk-radius-card) !important;
  padding: 16px 22px !important; gap: 6px !important; text-align: left !important;
}
.gk-design-2 .gk-fact-value .elementor-widget-container, .gk-design-2 .gk-fact-value p,
.gk-design-2 .gk-fact-value .synnio-job-locations, .gk-design-2 .gk-fact-value .synnio-job-locations * {
  font-size: var(--gk-fs-body) !important; font-weight: 600 !important; color: var(--gk-ink) !important;
  line-height: 1.5 !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}

/* ===== Listen (Benefits, Aufgaben, Anforderungen) ===== */
.gk-design-2 .gk-list ul.gk-items { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 10px !important; }
.gk-design-2 .gk-list ul.gk-items li {
  display: flex !important; align-items: flex-start !important; gap: .7em !important; margin: 0 !important; padding: 0 !important;
  text-align: left !important;
}
.gk-design-2 .gk-list ul.gk-items li::before, .gk-design-2 .gk-list ul.gk-items li::marker { content: none !important; display: none !important; }
.gk-design-2 .gk-emoji { flex: 0 0 1.6em !important; text-align: center !important; line-height: 1.7 !important; font-size: 1.05em !important; }
.gk-design-2 .gk-item-text { flex: 1 1 auto !important; }

/* Benefits als Kacheln */
.gk-design-2 .gk-list--grid ul.gk-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; gap: 14px !important; }
.gk-design-2 .gk-list--grid ul.gk-items li {
  background: #fff !important; border-radius: 14px !important; padding: 14px 18px !important;
  box-shadow: 0 1px 0 var(--gk-line), 0 8px 24px -18px rgba(36,40,44,.35) !important;
}

/* ===== Bildreihe + Karrieretext ===== */
.gk-design-2 .gk-gallery img, .gk-design-2 .gk-gallery .e-gallery-image { border-radius: 14px !important; }
/* Fliesstext bleibt lesbar schmal (etwa 90 Zeichen je Zeile), auch bei breiter Website (4.11.1: 760 -> 960). */
.gk-design-2 .gk-section > .gk-career { max-width: min(960px, var(--gk-maxw)) !important; text-align: center !important; }
.gk-design-2 .gk-career p { text-align: center !important; }
/* 4.12.0: Videos unter der Bildreihe (bis 4, zwei je Zeile, auf dem Handy untereinander) */
.gk-design-2 .gk-videos { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; margin: 18px 0 0 !important; justify-content: center !important; }
/* 4.12.1: Hochformat 9:16 – Desktop 4 nebeneinander, ab Tablet 2 je Zeile */
.gk-design-2 .gk-videos > .gk-video { flex: 0 1 calc(25% - 12px) !important; width: calc(25% - 12px) !important; min-width: 0 !important; max-width: 100% !important; }
@media (max-width: 1024px) { .gk-design-2 .gk-videos > .gk-video { flex-basis: calc(50% - 8px) !important; width: calc(50% - 8px) !important; } }
.gk-design-2 .gk-video .elementor-wrapper { aspect-ratio: 9 / 16 !important; height: auto !important; padding-bottom: 0 !important; border-radius: 14px !important; overflow: hidden !important; background: #000 !important; }
.gk-design-2 .gk-video .elementor-wrapper iframe, .gk-design-2 .gk-video .elementor-wrapper video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 14px !important; }
.gk-design-2 .gk-video .elementor-wrapper { position: relative !important; }
/* 4.12.2: Vorschaubild (Overlay) füllt das Hochformat */
.gk-design-2 .gk-video .elementor-custom-embed-image-overlay { position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center !important; border-radius: 14px !important; cursor: pointer !important; }
.gk-design-2 .gk-video .elementor-custom-embed-image-overlay img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ===== Aufgaben | Anforderungen ===== */
.gk-design-2 .gk-cols { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 20px !important; }
.gk-design-2 .gk-card {
  flex: 1 1 360px !important; width: auto !important; background: #fff !important; border-radius: var(--gk-radius-card) !important;
  padding: clamp(22px, 2.6vw, 34px) !important; gap: 16px !important;
  box-shadow: 0 1px 0 var(--gk-line), 0 14px 34px -24px rgba(36,40,44,.4) !important;
}

/* ===== Bewerben ===== */
.gk-design-2 .gk-section > .gk-apply-lead { max-width: min(760px, var(--gk-maxw)) !important; text-align: center !important; }
.gk-design-2 .gk-apply-lead p { text-align: center !important; color: var(--gk-muted) !important; }
.gk-design-2 .gk-apply .elementor-widget-menu-anchor { height: 0 !important; margin: 0 !important; }
.gk-design-2 .gk-apply-form { max-width: var(--gk-maxw) !important; }

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