@charset "utf-8";

@font-face {
  font-family: 'ORLENSans-Regular';
  src: url('../fonts/01_ORLENSans-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'ORLENSans-Semibold';
  src: url('../fonts/02_ORLENSans-Semibold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'ORLENSans-Bold';
  src: url('../fonts/04_ORLENSans-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'ORLENSans-Black';
  src: url('../fonts/05_ORLENSans-Black.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-Light';
  src: url('../fonts/06_OpenSans-Light.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 300;
  src: url('../fonts/06_OpenSans-Light.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-LightItalic';
  src: url('../fonts/07_OpenSans-LightItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 300;
  font-style: italic;
  src: url('../fonts/07_OpenSans-LightItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-Regular';
  src: url('../fonts/08_OpenSans-Regular.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 400;
  src: url('../fonts/08_OpenSans-Regular.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-Italic';
  src: url('../fonts/09_OpenSans-Italic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/09_OpenSans-Italic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-Medium';
  src: url('../fonts/10_OpenSans-Medium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 500;
  src: url('../fonts/10_OpenSans-Medium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-MediumItalic';
  src: url('../fonts/11_OpenSans-MediumItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 500;
  font-style: italic;
  src: url('../fonts/11_OpenSans-MediumItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-SemiBold';
  src: url('../fonts/12_OpenSans-SemiBold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 600;
  src: url('../fonts/12_OpenSans-SemiBold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-SemiBoldItalic';
  src: url('../fonts/13_OpenSans-SemiBoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 600;
  font-style: italic;
  src: url('../fonts/13_OpenSans-SemiBoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-Bold';
  src: url('../fonts/14_OpenSans-Bold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 700;
  src: url('../fonts/14_OpenSans-Bold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-BoldItalic';
  src: url('../fonts/15_OpenSans-BoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 700;
  font-style: italic;
  src: url('../fonts/15_OpenSans-BoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-ExtraBold';
  src: url('../fonts/16_OpenSans-ExtraBold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 800;
  src: url('../fonts/16_OpenSans-ExtraBold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans-ExtraBoldItalic';
  src: url('../fonts/17_OpenSans-ExtraBoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 800;
  font-style: italic;
  src: url('../fonts/17_OpenSans-ExtraBoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-Thin';
  src: url('../fonts/18_Roboto-Thin.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 100;
  src: url('../fonts/18_Roboto-Thin.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-ThinItalic';
  src: url('../fonts/19_Roboto-ThinItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 100;
  font-style: italic;
  src: url('../fonts/19_Roboto-ThinItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-Light';
  src: url('../fonts/20_Roboto-Light.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  src: url('../fonts/20_Roboto-Light.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-LightItalic';
  src: url('../fonts/21_Roboto-LightItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: italic;
  src: url('../fonts/21_Roboto-LightItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-Regular';
  src: url('../fonts/22_Roboto-Regular.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  src: url('../fonts/22_Roboto-Regular.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-Italic';
  src: url('../fonts/23_Roboto-Italic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/23_Roboto-Italic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-Medium';
  src: url('../fonts/24_Roboto-Medium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  src: url('../fonts/24_Roboto-Medium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-MediumItalic';
  src: url('../fonts/25_Roboto-MediumItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: italic;
  src: url('../fonts/25_Roboto-MediumItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-Bold';
  src: url('../fonts/26_Roboto-Bold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  src: url('../fonts/26_Roboto-Bold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-BoldItalic';
  src: url('../fonts/27_Roboto-BoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: italic;
  src: url('../fonts/27_Roboto-BoldItalic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-Black';
  src: url('../fonts/28_Roboto-Black.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  src: url('../fonts/28_Roboto-Black.woff') format('woff');
  font-display: swap;
}

/* Aus dem Portal-Stylesheet übernommen (nur Regeln, die in dieser Anzeige greifen) */
html, body, div, h2, p, a, img, strong, ul, li {border:0; background:transparent; padding:0}
body {font-family:ORLENSans-Regular; font-size:100%; font-style:normal; font-weight:normal; color:#000; line-height:1.2; text-align:left}
ul {list-style:none}
strong {font-weight:bold}
section {border:0; background:transparent}
#jobTplContainer {padding:0; border:1px solid #dcdfe2cc; border-radius:0px}
#jobTplContainer .content_text {color:#676d6f; font-size:16px; line-height:1.6}
#jobTplContainer li {line-height:1.6}
#jobTplContainer .content_text li {line-height:1.6}
.scheme-border {border:none !important}
.scheme-display {border:none; background:#fff}
::-webkit-input-placeholder {color:#000 !important; opacity:0.54}
::-moz-placeholder {color:#000 !important; opacity:0.54}
:-ms-input-placeholder {color:#000 !important; opacity:0.54}
::-ms-input-placeholder {color:#000 !important; opacity:0.54}
::placeholder {color:#000 !important; opacity:0.54}
ul {padding:0 0 0 2em; list-style-type:disc; list-style-position:outside}
p>a:before {content:""}
p>a:after {content:""}
#jobTplContainer ul {list-style:disc outside none}
.scheme-display li::marker {color:#d81e04}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  /* Ohne Schriftart fällt alles ausserhalb von `.frame_zone` auf den Browser-Default
     (Times New Roman) zurück — die Vorlage setzt hier eine serifenlose Schrift. */
  font-family: ORLENSans-Regular;
}

img { max-width: 100%; height: auto; display: block; }

/* Bleibt ein Bild INLINE (das Portal-CSS der Anzeige stellt die Slideshow so), sitzt
   es auf der Schriftlinie — darunter bleibt der Platz für Unterlängen als heller
   Streifen stehen. Am Anlassfall gemessen: Bild 299 px, umgebende Box 308,59 px
   (Betreiber: „unten noch ein schmaler weißer Streifen"). `vertical-align: bottom`
   nimmt genau diesen Spalt und rührt sonst nichts an. Die Symbol-Glyphen darunter
   behalten ihre eigene Ausrichtung (Klasse schlägt Element-Selektor). */
.frame_zone img { vertical-align: bottom; }

/* Symbol-Glyphen aus dem Original (S52): sie stehen INLINE vor ihrem Text und
   dürfen deshalb nicht unter die globale `display:block`-Regel für Bilder fallen.
   Höhe an der Zeile statt in px — so wachsen sie mit der Schriftgröße mit. */
.prt-glyph {
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: -0.18em;
  margin-right: 0.45em;
}

/* === Portal-Container — Schrift/Größe/Farbe wie im Original === */
.frame_zone, #frame_zone {
  font-family: ORLENSans-Regular;
  font-size: 18px;
  color: rgb(103, 109, 111);
  line-height: 2;
  width: 100%;
}

/* Überschriften — Schriftschnitte aus den gemessenen Werten */
.frame_zone h1, .frame_zone h2, .frame_zone h3,
.frame_zone h4, .frame_zone h5, .frame_zone h6 {
  padding: 10px 0;
  margin: 0;
  font-family: ORLENSans-Regular;
  font-weight: normal;
  line-height: 2.2;
  color: inherit;
  text-rendering: optimizelegibility;
}
.frame_zone h1 { font-family: ORLENSans-Semibold; line-height: 36px; font-size: 36px; }
.frame_zone h2 { font-family: ORLENSans-Semibold; font-size: 18px; }
.frame_zone h3 { font-size: 18px; }
.frame_zone h1 { font-weight: 700; }
.frame_zone h2, .frame_zone h3 { font-weight: 700; }
.frame_zone p  { margin: 0 0 2em; }
/* content_text nutzt <section> pro Zeile bzw. Absatz. Das Original gibt
   diesen <section> KEINEN Abstand (gemessen: margin 0) — die Absatzlücken
   kommen aus leeren <section>-Zeilen, die 1:1 erhalten bleiben. Ein 2em-
   Margin hier sprengte Intro- und Ansprechpartner-Blöcke auseinander. */
.frame_zone section { display: block; margin: 0; }

/* Links — Farbe am ORIGINAL gemessen (s. `_link_farbe`), nicht fest gesetzt */
.frame_zone a, .frame_zone a:visited,
.frame_zone a:hover, .frame_zone a:active, .frame_zone a:focus {
  text-decoration: none;
  color: rgb(103, 109, 111);
}

/* tel:-Links bleiben optisch Klartext (Klasse ODER echter tel:-href — der
   Regex-Fallback des phone_normalizers vergibt keine `.onlyfy-tel`-Klasse).
   Auch OHNE die Zierzeichen, die das Portal um seine Links setzt: die Vorlage
   verlinkt Rufnummern gar nicht, ein `»030 …«` stünde also nirgends im Original. */
.onlyfy-tel, .frame_zone a[href^="tel:"] { color: inherit; text-decoration: none; }
.onlyfy-tel::before, .onlyfy-tel::after,
.frame_zone a[href^="tel:"]::before,
.frame_zone a[href^="tel:"]::after { content: none; }

/* Listen-Zwischenüberschrift („Wünschenswert sind darüber hinaus:") — fett, kein
   Bulletpoint, Abstand darüber (SDE-110311). */
.frame_zone li.onlyfy-sublist-intro {
  list-style: none;
  font-weight: 700;
  margin-top: 2.2em;
  margin-bottom: 1em;
}

/* Portal-„Tab-Listen" (Label + Wert) als Zwei-Spalten-Tabelle: die Werte beginnen auf
   gleicher Höhe, die Label-Spalte ist so breit wie das längste Label (SDE-110311). Als
   CSS-Table gerendert — breit kompatibel (kein grid+`display:contents`, das die Render-
   Engine des Betreibers evtl. nicht kann). */
.frame_zone ul.onlyfy-tab-list {
  display: table;
  width: 100%;
  list-style: none;
  padding-left: 0;
  margin: .6em 0;
  line-height: 1.5;
  border-spacing: 0;
}
.frame_zone ul.onlyfy-tab-list > li { display: table-row; }
/* `width:1%` + `nowrap` = klassischer „schrumpf diese Spalte auf ihren Inhalt"-Trick: die
   Label-Spalte wird nur so breit wie das längste Label (nicht die halbe Anzeige), die
   Wert-Spalte bekommt den ganzen Rest → Werte beginnen direkt hinter dem längsten Label und
   brechen nicht unnötig um (SDE-110311). */
.frame_zone ul.onlyfy-tab-list .onlyfy-tab-label {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  padding: 0 1.4em .35em 0;
  vertical-align: top;
}
.frame_zone ul.onlyfy-tab-list .onlyfy-tab-value {
  display: table-cell;
  padding-bottom: .35em;
  vertical-align: top;
}

/* Bewerbungs-Button — Farbe und Schrift aus den gemessenen Tenant-Werten. Ausrichtung +
   Radius je nach Tenant (kreutzpointner: zentriert, 5px runde Ecken — s. _build_css). */
.bewerben-wrap {
  text-align: right;
  padding: .75rem 1.5rem 1.5rem;
  background: transparent;
}
.btn-bewerben {
  display: inline-block;
  padding: 10px 20px;
  background: rgb(216, 30, 4);
  color: rgb(255, 255, 255) !important;
  text-decoration: none;
  font-family: ORLENSans-Regular;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  border-radius: 0;
  cursor: pointer;
}
.btn-bewerben:hover { background: rgb(103, 109, 111); filter: none; }
/* WhatsApp-Bewerbungsbutton (kreutzpointner, SDE-111172): eigener Bewerbungsweg rechts neben
   „Jetzt bewerben!", in kreutzpointner-Blau `#0065bd` (an der Vorlage gemessen), gleiche Form. */
.btn-whatsapp {
  display: inline-block;
  padding: 10px 20px;
  margin-left: 8px;
  background: #0065bd;
  color: #fff !important;
  text-decoration: none;
  font-family: ORLENSans-Regular;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  border-radius: 0;
  cursor: pointer;
}
.btn-whatsapp:hover { filter: brightness(0.92); }

/* Wrapper: max-width, transparent (frame_zone-BG scheint durch).
   BREITE WIE IN DER VORLAGE — gemessen (`css_values.contentWidth`), gedeckelt auf 63rem
   (Betreiber SDE-110311: „könnte deutlich breiter sein - max 63em"; Entscheidung S45:
   „gemessene Breite, gedeckelt auf 63rem"). Die frühere FESTE Breite zwang jedem Kunden,
   dem sie zu breit war, ein eigenes Domain-Gate auf — s. `_wrapper_breite`.
   RAHMEN/SCHATTEN NUR, WENN DIE VORLAGE SIE HAT — gemessen (`css_values.contentBorder` /
   `contentShadow`), nicht angenommen. Die Regel des Betreibers lautet „wie in der
   Vorlage": Finsterwalder (YF-47992) hat exakt keins von beiden — pauschal gesetzt lag
   der hellgraue 1px-Strich dort rund um die ganze Anzeige, oben wie unten wie seitlich.
   Darmstadt (SDE-110311) begrenzte seine Karte zum Zeitpunkt der ersten Messung über
   einen echten `border`; die Vorlage grenzt seither NUR noch über `box-shadow` ab (kein
   `border` mehr auf dem ganzen Vorfahren-Ast) — deshalb zwei UNABHÄNGIGE Messungen,
   eine Anzeige kann das eine tragen, das andere oder beides. */
#wrapper {
  max-width: 834px;
  margin: 0 auto;
  background: transparent;
}
/* Das übernommene Portal-CSS (inline_css) begrenzt seinen Content-Wrapper `#content_zone`
   selbst. FRÜHER stand hier `max-width: none !important`, damit der feste 63rem-Wrapper
   wirken konnte — genau diese Aufhebung machte die Anzeige breiter als die Vorlage
   (SDE-111358: 834px Vorlage → 1008px Ausgabe). Ersatzlos streichen geht aber auch nicht:
   die portaleigene Begrenzung würde sonst die Wrapper-Breite unterlaufen, sobald die
   Anzeige wirklich ein `#content_zone`-Element trägt — und damit still die Untergrenze von
   900px aushebeln (s. `_wrapper_breite`). Deshalb wird sie auf DENSELBEN Wert gezogen wie
   der Wrapper: die Breite kommt aus EINER Quelle, ganz gleich welcher Container greift. */
#content_zone { max-width: 834px !important; }

/* Site-Header (Logo-Leiste + Social-Media-Icons rechts) */
.site-header {
  background: #fff;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.logo-wrap { display: inline-block; }
.logo { width: 251px; height: auto; max-width: 100%; }

/* Social-Media-Icons oben rechts (SDE-110311) — als Inline-SVG nachgebaut, RSS weggelassen. */
.social-media { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.social-media a { color: #4b575f; display: inline-flex; line-height: 1; transition: color .15s; }
.social-media a:hover { color: #1a1a1a; }
.social-media svg { width: 1em; height: 1em; fill: currentColor; }
.social-media img.social-icon { width: 1em; height: 1em; display: block; object-fit: contain; }

/* Job-Header (Jobtitel + Meta).
   OHNE Trennlinie (S52, Marienhospital/REG-40999): hier stand ein von Proteus
   ERFUNDENES `border-bottom: 1px solid #e0e0e0` — feste Farbe, nicht gemessen. Die
   Quelle zieht an genau derselben Stelle ihre eigene Linie (`.ck_content` mit
   border-top/-bottom, im Anzeigen-Container der Vorlage die EINZIGE Linie überhaupt),
   und die kommt über das übernommene Portal-CSS ohnehin mit. Beides zusammen ergab
   zwei Striche übereinander direkt über dem Slider. Betreiber: „die Linie über dem
   Slider … die muss weg". Was bleibt, ist die Linie der Vorlage — 1:1. */
.job-header-bg {
  background: #fff;
  padding: 0;
}

/* Job-Meta (Ort, Beschäftigungsart) – jede UL eine Tabellenzelle */
.job-meta {
  display: table;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
}
.job-meta .scheme-additional-data {
  display: table-cell;
  min-width: 40%;
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
}
/* Zeilenabstand der Metazeile wie in der Vorlage (kibek/SDE-111358: 25.6px auf 16px = 1.6).
   Ohne eigene Regel erbt sie die luftige Zeilenhöhe 2 des Portal-Containers und stand 32px
   hoch — Betreiber: „Zeilenabstände bei den Metadaten verkleinern". */
.job-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: normal;
  color: #000;
  list-style: none;
  margin: 4px 0;
}
/* Metazeile-Icons (Inline-SVG): standardmäßig erbt `currentColor` die Textfarbe des
   umgebenden `.job-meta li` — wie im rexx-Original, wo die FontAwesome-`<i>` die Body-/
   li-Farbe erben. AUSNAHME kreutzpointner (SDE-111172): dort sind die Metazeilen-Icons in
   der Quelle in der Akzentfarbe (orange gemessen), NICHT in der Textfarbe — daher
   `currentColor` (accent für kreutzpointner, sonst weiter currentColor). */
.job-meta li svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Content-Bereich */
.job-content { padding: 0; background: transparent; }

/* Eingebauter Footer wie im Original: Adresse LINKS, Logo RECHTS (Betreiber SDE-110311:
   „Das gesamte Bild mit Adresse links und Logo rechts … nur Impressum und Datenschutz
   nicht"). Impressum/Datenschutz sind schon beim Extrahieren entfernt. Die Skyline-Grafik
   liegt in externem Template-CSS und wird nicht mitgeführt — reproduziert wird die
   Anordnung. */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid #e0e0e0;
  font-size: 14px;
  line-height: 1.6;
  color: #4b575f;
}
.site-footer a { color: inherit; }
.site-footer-address { text-align: left; }
.site-footer-brand { flex-shrink: 0; margin-left: auto; }
.site-footer-logo { max-height: 70px; width: auto; display: block; }

/* Negativ-/Weiß-Logo (z. B. Darmstadt-Logo_Negativ.png) → dunkler Footer, damit das Logo
   sichtbar bleibt und das dunkle Original-Skyline-Band angenähert wird (SDE-110311). */
.site-footer--dark {
  background: #3c4650;
  color: #eef1f4;
  border-top: none;
}

/* Skyline-Footer wie im Original (SDE-110311): Banner-Grafik OBEN, darunter der Balken mit
   Adresse links / Logo rechts. Die Banner-URL + Zonenfarbe kommen inline (aus dem berechneten
   Stil des Originals, `css_values.footerImage`); die Grafik holt `asset_localizer` ins ZIP. */
.site-footer--sky {
  display: block;
  padding: 0;
  margin-top: 1rem;
  border-top: none;
}
.site-footer--sky a { color: inherit; }
.site-footer-sky {
  width: 100%;
  height: 8rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #c8c8c8;
}
.site-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1170px;
  margin: 0 auto;
  padding: .9rem 1.5rem 1.1rem;
}
/* Adress-Zeilenabstand SEHR eng wie im Original (dort line-height: 15px auf 11px-Schrift ≈
   knapp) — Betreiber SDE-110311: „noch immer zu großer Zeilenabstand … eher etwas negativ".
   Muss `#frame_zone { line-height: 2 }` überschreiben. */
.site-footer--sky .site-footer-address { line-height: 1.15; font-size: 13px; }
/* Logo in Originalgröße (Original `#footer_zone img { width:190px }`, Betreiber misst ~195px)
   — KEIN Höhen-/Breiten-Cap (die Basisregel `.site-footer-logo { max-height:70px }` +
   `max-width:40%` drückten es sonst auf ~76px). */
.site-footer--sky .site-footer-logo { width: 195px; max-width: none; max-height: none; height: auto; }

@media (max-width: 600px) {
  .site-footer-sky { height: 6rem; }
  .site-footer-bar { justify-content: center; text-align: center; }
  .site-footer--sky .site-footer-brand { margin-left: 0; }
  .site-footer--sky .site-footer-logo { width: 140px; }
}

@media (max-width: 600px) {
  .site-footer { justify-content: center; text-align: center; }
  .site-footer-address { text-align: center; }
  .site-footer-brand { margin-left: 0; }
}

/* Video responsive */
iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}


#frame_zone, .frame_zone { background: #ffffff; }
.job-header-bg {
    background: #fff;
    padding: 1.25rem 1.5rem 1rem;
}


/* Anzeigenspezifisches CSS aus Portal (scheme-*, content-images etc.) */
#content_zone {
max-width: 834px;
}
#scheme_detail_data {
width:100%;
display:table;
margin-bottom: 10px;
}
.scheme-border {
border: 1px solid rgba(220,223,226,0.8);
}
.scheme-margin {
margin-top: 10px;
}
.scheme-display .scheme-content {
font-size: 16px;
padding: 14px 24px;
background-color: #ffffff;
line-height: 1.6;
}
.scheme-display .scheme-title {
word-break: break-word;
}
.scheme-display .scheme-title h2 {
margin: 0px;
font-size: 28px;
line-height: 2;
padding: 0px;
}
.scheme-display .scheme-title ul {
margin-bottom: 16px;
}
.scheme-display .video {
width: 100%;
height: 400px;
}
.scheme-display h2.scheme-headline {
margin: 0px 0px 18px 0px;
padding: 0px;
}
.scheme-display .content-images {
position: relative;
overflow: hidden;
display: block;
box-sizing: border-box;
padding: 0px;
}
.scheme-display .content-images:not(:has(.content-images-frame)) {
height: 335px;
}
#header_image {
display: none;
}
#jobTplContainer ul.scheme-additional-data  {
margin-bottom: 0px;
min-width: 40%;
}
.scheme-additional-data {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.scheme-additional-data li {
list-style: none; 
margin: 4px 15px 0px -3px !important;
}
.scheme-additional-data li.left {
float: left;
}
.scheme-display .scheme-display .slide-images {
width: 100%;
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
.scheme-display .content-images-frame {
position: relative;
width: 100%;
height: 335px;
overflow: hidden;
}
.scheme-display .content-images-description {
display: block;
text-align: left;
font-size: 1rem;
line-height: 1.4;
color: #000;
padding: 8px 24px;
border-bottom: 1px solid rgba(220,223,226,0.8);
}
.scheme-content .user-image {
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
line-height: 100px;
background: no-repeat center center;
background-size: cover;
}
.scheme-content .user-data {
height: 100px;
margin-left: 80px;
}
.scheme-content .user-data li {
list-style: none;
}
i.fa-fw {
margin-right: 5px;
margin-left: 5px;
}
@media (max-width: 768px) {
.scheme-additional-data li {
display: block;
float: none;
}
.scheme-display .content-images {
height: 250px;
}
}
@media (max-width: 650px) {
.scheme-display .content-images {
height: 250px;
}
}
@media (max-width: 450px) {
.scheme-display .content-images {
height: 133px;
}
}

/* Web-Lesbarkeit (SDE-111358, Betreiber: „Allgemein Texte vergrößern, damit sie besser
   lesbar sind"). Das übernommene Portal-CSS setzt den Fließtext auf die Portal-Größe
   (kibek: 16px) und überschreibt damit die Größe des Nachbaus — dieser Block steht NACH
   inline_css und gewinnt. Dazu die Zeilenhöhe von der luftigen `#frame_zone { line-height:
   2 }` auf den an der Vorlage gemessenen Wert (1.6): größere Schrift bei ruhigerem Fluss.
   Gleiche Linie wie konzeptp/SDE-111270 („Fonts ×1.3" für die Web-Lesbarkeit).
   Überschriften bleiben unangetastet — ihre Größen sind gemessen gesetzt.

   Der Block gilt für den GESAMTEN Anzeigeninhalt (`.job-content`), nicht nur für
   `.content_text`: der Kontaktblock (Name / Position / Telefon) steht in einer eigenen
   `ul.user-data` daneben und blieb sonst bei 16px, während der Fließtext auf 19px ging —
   Betreiber SDE-111358: „Ist Name, Position, Tel in anderer Schriftart und Farbe? Es soll
   identisch sein." Die Metazeile liegt in `.job-header-bg` und behält ihre eigene, an der
   Vorlage gemessene Größe. */
.frame_zone .job-content p,
.frame_zone .job-content li,
.frame_zone .job-content section,
.frame_zone .job-content .content_text {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 100;
}

/* Header-/Bannerbild IMMER voll sichtbar, nur kleiner werden — NICHT beschneiden (Betreiber
   SDE-110311: „Es sollte aber immer voll sichtbar bleiben, nur kleiner werden. Durch das
   aktuelle Beschneiden geht Text im Bild verloren."). Die Portal-Regel positioniert
   `.slide-images` ABSOLUT in einem fest eingebrannten Container (`height:263px` inline) — das
   erzwang entweder weiße Streifen (Bild zu niedrig) oder, mit object-fit:cover, seitliches
   Beschneiden auf schmalen Viewports. Stattdessen: Container auf die Bildhöhe schrumpfen und
   das Bild im natürlichen Fluss zeigen (width:100%, height:auto) → voll sichtbar, responsiv,
   ohne Streifen, ohne Beschnitt. Steht NACH inline_css + hat höhere Spezifität → gewinnt. */
.frame_zone .content-images,
.frame_zone .content-images-frame {
  height: auto !important;
  overflow: visible;
}
.frame_zone .content-images .slide-images,
.frame_zone .slide-images {
  position: static;
  transform: none;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Slider wie in der Vorlage: gestapelt, unten bündig, 800ms Überblendung. */
.content-images, .scheme-content.content-images {
  display: grid !important; align-items: end !important;
}
.content-images .slide-images {
  grid-area: 1 / 1; width: 100%; height: auto;
  position: static !important; display: block !important;
  opacity: 0; transition: opacity .8s ease-in-out;
}
.content-images .slide-images.prt-slide-an { opacity: 1; }
/* EINZELNES Bild: es gibt keine Slideshow, das JS läuft gar nicht erst an (es steigt bei
   `slides.length < 2` aus) — ohne diese Regel bliebe das Bild auf `opacity: 0` und die
   Anzeige käme BILDLOS heraus. Genau das passierte in REG-41024 (Betreiber: „nächster
   Auftrag hat keine Slideshow, Proteus Output zeigt gar kein Bild"). */
.content-images .slide-images:only-child { opacity: 1; }


/* Eingebettetes Video (YouTube-iframe statt Consent-Platzhalter, SDE-111172): responsiv 16:9. */
.videoBox iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}

/* Weißraum UNTER dem Footer (Portal-`#wrapper`-`padding-bottom:40px`) weg, und einen kleinen
   Abstand AUSSERHALB des Rahmens (Betreiber SDE-110311: „unter dem Footer … großer weißer
   Raum … Anzeige außerhalb des Rahmens keinen Abstand"). Steht nach inline_css → gewinnt.
   DER ABSTAND GEHÖRT ZUM RAHMEN — ohne Rahmen also keiner: er kollabiert sonst nach außen
   (der Wrapper ist erstes und letztes Kind von `#frame_zone`, das oben/unten weder Padding
   noch Border hat) und legt oben wie unten einen 16px-Streifen `body`-Hintergrund frei —
   der „Rahmen ganz oben und ganz unten im Browser-Tab" aus YF-47992, gemessen als
   `rgb(240,240,240)`. */
#wrapper {
  padding-bottom: 0 !important;
  margin: 0 auto !important;
}

@media print {
  body { background: #fff; }
  #wrapper { max-width: 100%; }
  #frame_zone { background: #fff !important; }
  .job-header-bg { background: #fff; }
  iframe, video { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 600px) {
  .job-header-bg { padding: 1rem; }
  .frame_zone h1 { font-size: 1.5rem; line-height: 1.3; }
}

#wrapper, .wrapper { padding-bottom: 2.5rem; }

/* prt-hyphenation — Silbentrennung langer Wörter (Proteus, alle Anzeigen) */
html {
  overflow-wrap: break-word;
}
@media (max-width: 800px) {
  h1, h2, h3, h4, h5, h6 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-chars: 8 4 3;
  hyphenate-limit-chars: 8 4 3;
  }
}
@media (max-width: 700px) {
  html {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-chars: 8 4 3;
  hyphenate-limit-chars: 8 4 3;
  }
}