@charset "utf-8";

@font-face {
  font-family: 'BerlinType-Regular';
  src: url('../fonts/01_BerlinType-Regular.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'BerlinType';
  font-weight: 400;
  src: url('../fonts/01_BerlinType-Regular.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'fa-duotone-900';
  src: url('../fonts/04_fa-duotone-900.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'fa-thin-100';
  src: url('../fonts/05_fa-thin-100.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'fa-sharp-solid-900';
  src: url('../fonts/07_fa-sharp-solid-900.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans-bold';
  src: url('../fonts/08_opensans-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans';
  font-weight: 700;
  src: url('../fonts/08_opensans-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans-italic';
  src: url('../fonts/09_opensans-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/09_opensans-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans-regular';
  src: url('../fonts/10_opensans-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'opensans';
  font-weight: 400;
  src: url('../fonts/10_opensans-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-bold';
  src: url('../fonts/11_roboto-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  font-weight: 700;
  src: url('../fonts/11_roboto-bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-italic';
  src: url('../fonts/12_roboto-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/12_roboto-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-regular';
  src: url('../fonts/13_roboto-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  font-weight: 400;
  src: url('../fonts/13_roboto-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'BerlinTypeWeb-Regular';
  src: url('../fonts/14_BerlinTypeWeb-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'BerlinTypeWeb';
  font-weight: 400;
  src: url('../fonts/14_BerlinTypeWeb-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'BerlinTypeWeb-Bold';
  src: url('../fonts/15_BerlinTypeWeb-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'BerlinTypeWeb';
  font-weight: 700;
  src: url('../fonts/15_BerlinTypeWeb-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'BerlinTypeOffice-Regular';
  font-weight: 400;
  src: url('../fonts/14_BerlinTypeWeb-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'BerlinTypeOffice-Regular';
  font-weight: 700;
  src: url('../fonts/15_BerlinTypeWeb-Bold.woff2') format('woff2');
  font-display: swap;
}

/* Aus dem Portal-Stylesheet übernommen (nur Regeln, die in dieser Anzeige greifen) */
p > a:before {content:'\00BB'}
p > a:after {content:'\00AB'}
#jobTplContainer .scheme-display {font-family:BerlinTypeOffice-Regular !important}
hr {border:0; border-top:1px solid #D3D3D3; border-bottom:transparent}
ol {list-style-type:decimal}
deprecated  used in ckeditor
 */
u {text-decoration:underline}
strike {text-decoration:line-through}
::-webkit-input-placeholder {opacity:0.54}
::-moz-placeholder {opacity:0.54}
:-ms-input-placeholder {opacity:0.54}
::-ms-input-placeholder {color:#000 !important; opacity:0.54}
::placeholder {color:#000 !important; opacity:0.54}
fieldset ul {border:1px solid #D3D3D3; list-style:none; background-color:#FFF; padding:0}
fieldset ul li {padding:0; background:none}
fieldset ul li:hover {background:#F5F5F5}
fieldset ul label span {color:#000; line-height:1.5}
legend {padding:.3em 0}
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {outline:3px solid #0076dd}
input[type="file"] {cursor:pointer}
.scheme-display .flex-item {background:#f39300 !important}
h2.scheme-headline {padding:0.2em 0 .5em 0 !important; cursor:pointer}
.scheme-content {border:1px solid rgba(220,223,226,0.8)}
/***************************************************
 *
 *  Headings
 *
 */
/* LINKS */
/* LIST STYLES */
/* 
    BUTTON STYLES 
    We need some !important rules here, so we can mix all different button variations.
*/
/* Helper for Styleguide */
/* FOOTER: Basic Layout for Content AND! Portalfooter to basic arrange links and logo */
/* FOOTER Linklist: */
/* FOOTER: Basic brand/logo layout */
/* FOOTER: Basic claim layout */
/* 
 *  MASTER PAGE GRID DEFINITION 
 */
/***************************************************
 * 
 *  Fullwidth main elements in main grid
 * 
 */
/***************************************************
 * 
 *  Panel Layout (used in blocks, boards and everywhere else)
 * 
 */
/* A fake auto-placement grid (logogalerie {padding:0 !important}
body {font-size:1rem; line-height:1.5; background-color:#ffffff}
/*
  This will hide the focus indicator if the element receives focus via the mouse {outline:3px solid $color-tabfocus; outline-offset:0px}
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {outline:none}
*/
:focus {outline:none}
:focus-visible {outline:3px solid #0076dd; outline-offset:0px; box-shadow:0px 0px 0 5px #ffffff}
html {color:#000000}
/* 
    Leichte Sprache Seiten (wirkt nur auf den Contentbereich)
    Body Triggerklassen: locale_de-plain, locale-plain, locale_en-plain {font-size:21px; line-height:1.5em}
a {text-decoration:none}
a:hover {text-decoration:underline}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {opacity:1}
*[role=button] {cursor:pointer}
h1, h2, h3, h4, h5 {font-weight:bold; color:#000000; border:0 none; padding-top:0; padding-bottom:0}
h1 a, h2 a, h3 a, h4 a, h5 a {font-weight:inherit; color:inherit}
h1 {font-size:1.6875em; color:#000000; line-height:1.148em; font-weight:700}
h2 {font-size:1.375em; color:#000000; line-height:1.182em; font-weight:700}
h3 {font-size:1.0625em; line-height:1.353em; color:#000000; font-weight:700}
h3 a {color:#165be0}
h4 {font-size:1em; color:#000000; font-weight:700; line-height:24px}
h4 a {color:#165be0}
hr {background:transparent; border-color:#dddddd; border-width:0 0 1px 0}
[class*=misc-icon-] {background-size:contain; background-position:50%; background-repeat:no-repeat; line-height:1.231em; border:0 none}
/********************************************************
    FontAwesome icons in BO textile iconsysntax
*********************************************************/
[class*=ic-fa-]:before {font-weight:700; color:#000000; font-style:normal; font-variant:normal}
iframe {border:0 none}
img {border:0}
a:link {color:#165be0}
a:hover, a:focus {text-decoration:underline}
a::after {text-decoration:underline}
a:after, a:hover:after {text-decoration:none}
a .fa {color:#000000}
dl dt {font-weight:bold}
ul {padding-left:1.1em; list-style-type:disc}
ul > li::marker {color:#000000; font-size:17px; line-height:0}
ol {padding-left:10px; list-style-position:outside}
margin-bottom: 0.5em;
  /*
  &::before {text-align:right; padding-right:0.3em}
p a {text-decoration:underline}
p a:hover, p a:focus {text-decoration:none}
small {line-height:1.3}
code {white-space:pre}
ins {background-color:#ccffcc !important; text-decoration:none; border-bottom:1px dashed}
del {background-color:#ffcccc !important; text-decoration:line-through}
abbr[data-original-title], abbr[title] {cursor:help}
blockquote {border-left:5px solid #dddddd; padding:15px 30px}
pre {white-space:pre-wrap; background-color:#f5f5f5; border:1px solid #dddddd; padding:0.5em 1em}
0% {stroke-dasharray:1, 150; stroke-dashoffset:0}
50% {stroke-dasharray:90, 150; stroke-dashoffset:-35}
100% {stroke-dasharray:90, 150; stroke-dashoffset:-124}
scroll-margin-top: 150px;
  /*
    // dont work correctly:
    &:before {content:""}
table {border-collapse:collapse; border-spacing:0; background-color:#ffffff}
table td, table th {text-align:left; padding:1em 0.65em; border:1px solid #dddddd}
table th {background-color:#f5f5f5; color:#000000; font-weight:bold}
table th a {color:#000000}
border:                 0 none;
            padding:                0em 1em 1em 0;
            &:last-child {padding-right:0}
/* used in: modul-faq, modul-publictransport {list-style:none; padding:0; border:1px solid #dddddd; border-width:0 0 1px 0}
/***************************************************
 *
 *   OUR FLEXGRID {padding:0}
form:before, form:after {content:" "}
legend {font-weight:bold; font-size:16px; padding:0}
label {font-size:1em; font-weight:bold; line-height:1.2}
input[type=text], input[type=date], input[type=password], input[type=file], input[type=email], input[type=number], input[type=tel], input[type=time], input[type=url], select, textarea {border-radius:0px; font-size:1em; font-family:Arial, sans-serif; background-color:#ffffff; background-image:none; border:1px solid #737373; color:#000000; padding:10px}
input[type=text]:focus, input[type=date]:focus, input[type=password]:focus, input[type=file]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus, select:focus, textarea:focus {border:2px solid #0076dd !important; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0px 8px 0px rgba(102, 175, 233, 0.8); outline:2px solid white; outline-offset:0px}
/*
// Disabled. Dont works in firefox > 109 anymore {background-repeat:no-repeat; background-position:right 0.5em center; background-size:1em}
select > option {padding:0.3em}
input[type=checkbox], input[type=radio] {padding:0}
label small {font-weight:normal; font-style:italic}
/* 
    Global nutzbares, einfaches Volltextsuchfeld mit Input und Button in einer Zeile
    - Am Kopf von Suchseiten, Serviceportal, 404, externe Seiten ... 
    - Am Kopf von Herounits, Serviceportal, Assetservice {text-align:left}
width: 100%;
  max-width: none;
  outline: 0;
  border: 0 none;
  box-shadow: none;
  background-color: transparent;
  color: #000000;
  padding: 0 50px 0 40px;
  z-index: 1;
  /*&:focus {box-shadow:none}
100% {background-color:transparent; border-color:transparent}
margin-bottom: 50px;
  overflow: visible;
  /*&:after {content:" "}
background: transparent; 
      // background color multiply filter for itdz buttons
      z-index: unset; // stack issue with filter
      &::before {content:""; background:$swiper-prev-icon-bgcolor}
[class*=cardbutton] {border:0 none; background-color:transparent; background-image:linear-gradient(135deg, rgba(160, 160, 160, 0.5) 10%, transparent 10%, transparent 50%, rgba(160, 160, 160, 0.5) 50%, rgba(160, 160, 160, 0.5) 60%, transparent 60%, transparent 100%); background-size:7.07px 7.07px; font-size:18px}
[class*=cardbutton]:before {content:""; border-radius:22px; background:#ffffff}
[class*=cardbutton] select {background-color:transparent !important; border-color:transparent; background-image:none; padding-right:0; background-image:none !important; font-size:16px}
address {font-style:normal}
0, 0 {background-color:$stickybutton-overlay-disabled-bgcolor; color:$stickybutton-overlay-disabled-textcolor}
0, 0 {background-color:$stickybutton-overlay-disabled-bgcolor; color:$stickybutton-overlay-disabled-textcolor}
/* sticky button is inverted in some verticals {list-style:none; padding:0}
/* CONTENT HEADER BAR  (Breadcrumb, Language {background-color:#f5f5f5; color:#000000; padding:0; font-size:14px}
h1, h2, h3, p {color:$color-white}
/*
      // Disabled: Old searchslot rules breaks new searchslot layout
      label {font-weight:bold}
@media print {
html {background-color:#ffffff}
}
@media print {
body {padding-top:0px !important}
}

*, *::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: arial, sans-serif, verdana, helvetica;
}

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: arial, sans-serif, verdana, helvetica;
  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: arial, sans-serif, verdana, helvetica;
  font-weight: normal;
  line-height: 2.2;
  color: inherit;
  text-rendering: optimizelegibility;
}
.frame_zone h1 { font-family: BerlinTypeOffice-Regular, Arial, sans-serif; line-height: 31.9835px; font-size: 28.304px; }
.frame_zone h2 { font-family: BerlinTypeOffice-Regular, Arial, sans-serif; font-size: 21px; }
.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(22, 91, 224);
}

/* 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(0, 0, 0);
  color: rgb(255, 255, 255) !important;
  text-decoration: none;
  font-family: BerlinTypeOffice-Regular, Arial, 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: BerlinTypeOffice-Regular, Arial, 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: 100px; 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;
}
}
.scheme-display .flex-container {
display: flex;
margin: 0 auto;
flex-direction: row;
}
.content_text .flex1 {
width:32%;
}
.scheme-display .flex-item {
border-radius: 0px;
padding: 20px;
background-color: white;
box-sizing: border-box;
margin: 10px 5px;
border: 1px solid rgba(220,223,226,0.8);
}
.flex-container.container2 .flex-item,
.flex-container.container3 .flex-item,
.flex-container.container4 .flex-item{
margin: 0px 5px 10px 5px;
}
.scheme-display .flex-item:first-child {
magrin-left:0;
}
.scheme-display .flex-item:last-child {
magrin-right:0;
}
.frame_zone .scheme-display .flex-item-header {
font-size: 18px;
line-height: 1.5;
margin-bottom: 0px;
overflow: hidden;
text-overflow: ellipsis;
min-height: 70px;
cursor: pointer;
}
.frame_zone .scheme-display .flex-item-benefitcontent {
word-break: break-word;
display: none;
}
.fa-item {
width: 1.25em;
}
@media (max-width: 600px) {
.scheme-display .flex-container {
display: inline;
}
.content_text .flex1 {
width: 98%;
margin: 10px auto;
} 
}

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

/* prt-hyphenation — Silbentrennung langer Wörter (Proteus, alle Anzeigen) */
html {
  overflow-wrap: break-word;
}
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;
  }
}