@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/01_open-sans-v28-latin-regular.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/02_open-sans-v28-latin-700.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/03_open-sans-v34-latin-500.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/04_open-sans-v28-latin-600.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/05_open-sans-v28-latin-300.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; }

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

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