@font-face{font-family:"GenosGFG";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/01_GenosGFG-Regular.woff2") format("woff2");}
@font-face{font-family:"GenosGFG";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/02_GenosGFG-Bold.woff2") format("woff2");}


@charset "utf-8";
*, *::before, *::after { box-sizing: border-box; }
:root { font-size: 100%; }

body {
  margin: 0;
  padding: 1.5rem 16px;
  background: #fff;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 30px;
  color: rgb(44, 42, 42);
}

#wrapper {
  max-width: 1020px;
  margin: 0 auto;
}

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

.cc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── LOGO (oben links, über dem Raster) ── */
.cc-logo { padding: 4px 0 20px; }
.cc-logo img { height: 45px; max-height: 45px; max-width: 200px; width: auto; display: inline-block; }

/* ── RASTER: linke Spalte (Titel + Inhalt) 770px, rechte Spalte (Kontakt) 272px.
   Der Titel + die Icon-Zeile liegen NUR in der linken Spalte; die Kontaktbox
   startet in Zeile 2 (auf Höhe des Inhalts, NICHT ganz oben). ── */
.cc-body {
  display: grid;
  grid-template-columns: 1fr 236px;
  column-gap: 14px;
  align-items: start;
}
.cc-title { grid-column: 1; grid-row: 1; padding: 0 0 19.2px; }
.cc-main  { grid-column: 1; grid-row: 2; min-width: 0; }
.cc-aside { grid-column: 2; grid-row: 2; min-width: 0; }

.cc-title h1 {
  font-size: 27.8px;
  font-weight: 700;
  line-height: 33.3px;
  color: rgb(64, 64, 64);
  margin: 0 0 16px;
}
.cc-jobinfo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  filter: contrast(0.8);
}
.cc-jobinfo li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 15px 6px 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: rgb(141, 141, 148);
}
/* Icon vertikal mittig zum Text (inline-flex statt inline-block + block-svg,
   sonst sitzt das SVG auf der Textbasislinie = „zu tief"). */
.cc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.cc-icon svg { display: block; width: 16px; height: 16px; fill: #545454; }

/* ── INHALT (rich text, je Sektion gekapselt). Vertikaler Rhythmus EXAKT aus
   der Vorlage übernommen: jede Sektion (= concludis `.partial`) hat
   `padding: 19.2px 0` → sichtbare Lücke vor den Überschriften ~58px. ── */
.cc-section { padding: 19.2px 0; }
.cc-main p { font-size: 20px; line-height: 29px; margin: 0 0 19.2px; color: rgb(62, 58, 58); }
.cc-main ul { margin: 0 0 19.2px; padding: 0 0 0 32px; list-style-type: disc; }
.cc-main ul ul { margin: 0; list-style-type: circle; }
.cc-main li { font-size: 20px; line-height: 29px; margin: 0 0 12.8px; color: rgb(62, 58, 58); }
.cc-main strong, .cc-main b { font-weight: 600; }
.cc-main u { text-decoration: underline; }
.cc-section:last-child p:last-child, .cc-section:last-child ul:last-child { margin-bottom: 0; }

/* ── APPLY-BUTTON (full-width, concludis-Primärfarbe) ── */
.cc-apply { margin: 24px 0 0; }
.cc-btn {
  display: block;
  width: 100%;
  background: rgb(0, 114, 165);
  border: 1px solid rgb(0, 114, 165);
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 7px;
  padding: 9px 30px;
  font-size: 20.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  transition: background .24s ease;
}
.cc-btn:hover { background: rgb(0, 97, 140); border-color: rgb(0, 97, 140); }

/* ── KONTAKT-SIDEBAR ── */
.cc-contact {
  border: 1px solid rgb(237, 237, 237);
  border-radius: 4px;
  padding: 16px;
}
.cc-contact h2 {
  font-size: 20.5px;
  font-weight: 600;
  color: rgb(64, 64, 64);
  margin: 0 0 16px;
}
.cc-person { display: flex; gap: 14px; align-items: flex-start; }
.cc-person img { width: 70px; height: 75px; object-fit: cover; flex: 0 0 70px; border-radius: 8px; }
.cc-person-info { min-width: 0; }
.cc-person-name { font-size: 15.8px; font-weight: 600; color: rgb(44, 42, 42); margin: 0 0 4px; }
.cc-person-info p { margin: 0 0 4px; font-size: 15.8px; line-height: 1.4; }
.cc-person-info a { color: rgb(51, 122, 183); text-decoration: none; font-size: 15.8px; }
.cc-person-info a:hover { text-decoration: underline; }
/* E-Mail in der Kontaktbox: wie die Vorlage ein grauer, abgerundeter Button
   (28×28, radius 8px) mit WEISSEM Envelope-Icon — KEIN „E-Mail"-Text. */
.cc-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgb(141, 141, 148);
  border-radius: 8px;
  transition: background .2s ease;
}
.cc-mail:hover { background: rgb(120, 120, 128); }
.cc-mail .cc-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.cc-mail .cc-icon svg { width: 16px; height: 16px; fill: #fff; }

/* Arbeitgebersiegel unter der Kontaktbox (aus `.sidebar-item.awards` der Quelle). */
.cc-awards { margin-top: 16px; }
.cc-awards img { display: block; max-width: 100%; height: auto; }

/* Telefon-Links: im Fließtext unten in TEXTFARBE (wie die Vorlage), in der
   Kontaktbox oben in Link-Blau. Eine tel:-Regel im CSS verhindert zugleich,
   dass _apply_output_fixes ein `color: inherit` für tel: anhängt. */
.cc-main a[href^="tel:"] { color: rgb(62, 58, 58); text-decoration: none; }
.cc-person-info a[href^="tel:"] { color: rgb(51, 122, 183); text-decoration: none; }

/* ── RESPONSIVE: Sidebar unter den Inhalt ── */
@media (max-width: 56em) {
  .cc-body { grid-template-columns: 1fr; }
  .cc-title, .cc-main, .cc-aside { grid-column: 1; grid-row: auto; }
  .cc-aside { margin-top: 24px; }
}

@media print {
  body { padding: 0; }
  .cc-btn { color: #000 !important; background: none !important; border: 1px solid #000 !important; }
  * { box-shadow: none !important; }
}

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

/* Gestaltung des Mandanten (Volksbank Köln Bonn, an der Seite gemessen) */
body { font-family: GenosGFG, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;
       color: rgb(51, 51, 51); }
/* Zwei Spalten nur, wo der Grundstil sie hat (bis 56em liegt die Kontaktbox unter dem Inhalt). */
@media (min-width: 56.0625em) { .cc-body { grid-template-columns: 1fr 264px; column-gap: 20px; } }
.cc-title { grid-column: 1 / -1; min-width: 0; }
.cc-title h1 { font-size: 35.2px; line-height: 42.24px; font-weight: 600; letter-spacing: -1.28px;
               color: #0066b3; margin: 0 0 8px; hyphens: auto; overflow-wrap: break-word; }
.cc-jobinfo li { font-size: 16px; line-height: 24px; margin: 0 15px 0 0; color: rgb(122, 122, 122); }
.cc-jobinfo .cc-icon svg { fill: rgb(128, 128, 128); }
.cc-section.cc-teil-image { padding: 0; }
.cc-section.cc-teil-image img { display: block; width: 100%; border-radius: 12px; }
.cc-main p, .cc-main li { font-size: 16px; line-height: 23.2px; color: rgb(51, 51, 51); }
.cc-main ul { margin: 0; padding-left: 24px; }
.cc-main h2, .cc-main h3 { font-size: 23.1px; line-height: 27.72px; font-weight: 600;
                           letter-spacing: -1.28px; color: #0066b3; margin: 0 0 8px; }
.cc-main a:not(.cc-btn):not([href^="tel:"]) { color: #0066b3; text-decoration: none; }
.cc-main a[href^="tel:"] { color: rgb(51, 51, 51); }
.cc-apply { margin-top: 19.2px; }
.cc-btn { background: #0066b3; border-color: #0066b3; border-radius: 20px; font-size: 16.5px;
          line-height: 18px; padding: 8px 30px; }
.cc-btn:hover { background: #00528f; border-color: #00528f; }
.cc-contact { border: 0; border-radius: 22px; padding: 22px 16px; background: #002d67; }
.cc-contact h2 { font-size: 18px; line-height: 21.6px; letter-spacing: -0.5px; color: #fff; }
.cc-person { gap: 19.2px; }
.cc-person img { border-radius: 50%; }
.cc-person-name, .cc-person-info p, .cc-person-info a { font-size: 16px; line-height: 20.8px;
                                                        letter-spacing: -0.4px; color: #fff; }
.cc-person-name, .cc-person-info p { margin: 0; }
.cc-person-info a[href^="tel:"] { color: #fff; text-decoration: underline; }
.cc-mail { width: 30px; height: 30px; margin-top: 5px; }
.cc-awards { margin-top: 19.2px; border: 1px solid rgb(204, 204, 204); border-radius: 22px;
             padding: 22px 16px; }
.cc-awards img { display: block; width: 60%; height: auto; }
@media (max-width: 767.98px) {
  .cc-title h1 { font-size: 32px; line-height: 38.4px; }
  .cc-main h2, .cc-main h3 { font-size: 21px; line-height: 25.2px; }
}

.prt-autolink::before, .prt-autolink::after { content: none !important; }
a.prt-autolink { font-weight: inherit !important; }

[href^="tel:"] { white-space: nowrap; }

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

/* prt-hyphenation — Silbentrennung langer Wörter (Proteus, alle Anzeigen) */
@media (max-width: 800px) {
  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;
  }
}

/* proteus-mindest-schriftgroesse */
/* Fließtext der Vorlage ab 15.8px — angehoben auf 16px
   (Betreiber-Vorgabe SDE-113070, testweise für alle Quellsysteme).
   Nur Bildschirm: im Druck bleibt die Vorlage unangetastet. */
@media screen {
  .cc-person-info p { font-size: 16px; }
}

/* Logo-Anker (S55): klickbar, aber ohne eigenen Kasten — sonst verschiebt
   sich ein prozentual bemessenes Logo (SDE-113070). */
a.prt-logo-link { display: contents; }

/* proteus-schriftgroesse-gemessen */
/* Fließtext mindestens 16px (Betreiber-Vorgabe SDE-113070): nur die Blöcke,
   die in der Vorlage kleiner standen — am Output gemessen, weil die Größe oft vom
   body/Container geerbt wird (SDE-123205). Maßstab ist die SICHTBARE Größe: eine
   Schrift mit kleinen Kleinbuchstaben wird größer gesetzt (YF-51810). Nur Bildschirm. */
@media screen {
  .prt-schrift { font-size: 16px !important; }
  .prt-schrift.prt-schrift-17 { font-size: 17px !important; }
}

/* proteus-zeilenabstand */
/* Fließtext mindestens 1.5-zeilig gesetzt (Betreiber 24.09.2026):
   nur die Blöcke, die in der Vorlage enger standen — am Output gemessen.
   Nur Bildschirm: im Druck bleibt die Vorlage. */
@media screen { .prt-zeilen { line-height: 1.5 !important; } }