@charset "utf-8";

@font-face {
  font-family: 'Coupe-Medium';
  src: url('../fonts/12_Coupe-Medium.woff2') format('woff2'),
       url('../fonts/01_Coupe-Medium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Coupe';
  font-weight: 500;
  src: url('../fonts/12_Coupe-Medium.woff2') format('woff2'),
       url('../fonts/01_Coupe-Medium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Coupe-Bold';
  src: url('../fonts/11_Coupe-Bold.woff2') format('woff2'),
       url('../fonts/02_Coupe-Bold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Coupe';
  font-weight: 700;
  src: url('../fonts/11_Coupe-Bold.woff2') format('woff2'),
       url('../fonts/02_Coupe-Bold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'opensans-bold';
  src: url('../fonts/05_opensans-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans';
  font-weight: 700;
  src: url('../fonts/05_opensans-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans-italic';
  src: url('../fonts/06_opensans-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/06_opensans-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans-regular';
  src: url('../fonts/07_opensans-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans';
  font-weight: 400;
  src: url('../fonts/07_opensans-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-bold';
  src: url('../fonts/08_roboto-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  font-weight: 700;
  src: url('../fonts/08_roboto-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-italic';
  src: url('../fonts/09_roboto-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/09_roboto-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-regular';
  src: url('../fonts/10_roboto-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  font-weight: 400;
  src: url('../fonts/10_roboto-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Coupe-Thin';
  src: url('../fonts/13_Coupe-Thin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Coupe';
  font-weight: 100;
  src: url('../fonts/13_Coupe-Thin.woff2') format('woff2');
  font-display: swap;
}

*, *::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: Coupe-Medium, Arial, Helvetica, sans-serif;
}

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

/* === Portal-Container — Schrift/Größe/Farbe wie im Original === */
.frame_zone, #frame_zone {
  font-family: Coupe-Medium, Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: rgb(0, 0, 0);
  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: Coupe-Medium, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 2.2;
  color: inherit;
  text-rendering: optimizelegibility;
}
.frame_zone h1 { font-family: Coupe-Bold, Arial, Helvetica, sans-serif; line-height: 40px; font-size: 19px; }
.frame_zone h2 { font-family: Coupe-Bold, Arial, Helvetica, sans-serif; font-size: 19px; }
.frame_zone h3 { font-size: 18px; }
.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 */
.frame_zone a, .frame_zone a:visited,
.frame_zone a:hover, .frame_zone a:active, .frame_zone a:focus {
  text-decoration: none;
  color: #4b575f;
}

/* tel:-Links bleiben optisch Klartext (Klasse ODER echter tel:-href — der
   Regex-Fallback des phone_normalizers vergibt keine `.onlyfy-tel`-Klasse) */
.onlyfy-tel, .frame_zone a[href^="tel:"] { color: inherit; text-decoration: 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(255, 255, 255);
  color: rgb(0, 0, 0) !important;
  text-decoration: none;
  font-family: Coupe-Bold, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 22px;
  border-radius: 0;
  border: 1px solid rgb(0, 0, 0);
  cursor: pointer;
}
.btn-bewerben:hover { filter: brightness(0.92); }
/* 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: Coupe-Bold, Arial, Helvetica, sans-serif;
  font-weight: normal;
  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 NUR, WENN DIE VORLAGE EINEN HAT — gemessen (`css_values.contentBorder`), nicht
   angenommen. Die Regel des Betreibers lautet „Rahmen wie in der Vorlage": Darmstadt
   (SDE-110311) hat einen, Finsterwalder (YF-47992) exakt keinen — pauschal gesetzt lag
   der hellgraue 1px-Strich dort rund um die ganze Anzeige, oben wie unten wie seitlich. */
#wrapper {
  max-width: 900px;
  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: 900px !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: 209px; 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) */
.job-header-bg {
  background: #fff;
  padding: 0;
  border-bottom: 1px solid #e0e0e0;
}

/* 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;
    border-bottom: 1px solid #e0e0e0;
}


/* 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: 19px;
  line-height: 1.6;
}

/* 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;
}

/* 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; }
}

b, strong { font-weight: bold; }

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