/* karriere/rahmen-portal.css — Portalinhalte im Stil von vierling.de.
   Lädt nach Bootstrap und rahmen/site.css (Website-Gestaltung, erzeugt) und gleicht
   die Bootstrap-Bausteine der Portalseiten an den Corporate Design Guide an:
   Großbuchstaben in Überschriften, Quadrat statt Rundungen, Blau/Dunkelblau/Grün. */

:root{
  /* Kurznamen der früheren Portalgestaltung, in den Seiten noch inline verwendet */
  --v-blue:var(--blue); --v-dark:var(--navy); --v-green:var(--lime); --v-gray:var(--ink-2);
  --bs-body-font-family:var(--font); --bs-body-color:var(--ink-2); --bs-body-font-weight:500;
  --bs-heading-color:#1961ac; --bs-link-color:#1961ac; --bs-link-color-rgb:25,97,172; --bs-link-hover-color:#00274e; --bs-link-hover-color-rgb:0,39,78;
  --bs-border-radius:0; --bs-border-radius-sm:0; --bs-border-radius-lg:0; --bs-border-radius-pill:0;
}
body{background:var(--mist)}

/* Seitenkopf: Foto der Karriereseite unter Dunkelblau-Verlauf, wie .seitenkopf auf vierling.de */
.kar-kopf{background:linear-gradient(0deg,rgba(0,39,78,.94) 0%,rgba(0,39,78,.72) 60%,rgba(0,39,78,.55) 100%),
  url("rahmen/kopfbild.webp") center/cover no-repeat,var(--navy);color:#fff;padding:40px 0 0}
@media (max-width:900px){.kar-kopf{background-image:linear-gradient(0deg,rgba(0,39,78,.94),rgba(0,39,78,.7)),url("rahmen/kopfbild-1200.webp")}}
.kar-kopf .eyebrow{color:var(--lime);margin-bottom:.6em}
.kar-kopf-gross{padding-top:96px}
.kar-kopf h1{color:#fff;font-size:clamp(2rem,5.4vw,3.6rem);margin:0 0 .35em}
.kar-kopf-text{max-width:62ch;font-size:clamp(1.02rem,1.8vw,1.15rem);color:#E6EEF8}
.kar-kopf-text p:last-child{margin-bottom:0}
.kar-kopf .kar-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.kar-nav{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:28px;border-top:1px solid rgba(255,255,255,.22)}
.kar-nav a{color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.88rem;
  padding:14px 0 12px;border-bottom:4px solid transparent}
.kar-nav a:hover,.kar-nav a:focus-visible{color:#fff;border-bottom-color:var(--lime)}
@media (max-width:560px){.kar-nav{gap:0 22px}.kar-nav a{padding:12px 0 8px}.kar-kopf-gross{padding-top:64px}}

.kar-main{padding-top:40px;padding-bottom:64px}

/* Überschriften im Inhalt: Bootstrap-Größenklassen behalten, Großbuchstaben aus dem CD */
.kar-main h1,.kar-main .h1{color:var(--blue)}
.kar-main h2,.kar-main .h4{margin-top:0}
.kar-main > h2,.kar-main .h4.mt-4{font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--blue);margin-top:40px !important}
.kar-main > h2::before,.kar-main .h4.mt-4::before{content:"";display:block;width:44px;height:4px;background:var(--lime);margin-bottom:.6em}
.kar-main .badge{border-radius:0;font-size:.8rem;vertical-align:middle}

/* Karten: weiß, quadratisch, blaue Oberkante; section.kar-card gegen die grauen Website-Abschnitte */
.kar-card,section.kar-card{background:#fff !important;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:0;
  transition:box-shadow .2s,transform .2s}
a.kar-card:hover{box-shadow:0 18px 40px rgba(0,39,78,.14);transform:translateY(-3px)}
.stelle-karte .fw-bold{text-transform:uppercase;letter-spacing:.01em}
.kar-chip{display:inline-block;font-size:.8rem;font-weight:700;padding:.25rem .7rem;border-radius:0;background:var(--blue-8);color:var(--navy);border:0}
.kar-kopf .kar-chip{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}

.kar-body h2{font-size:1.15rem;color:var(--blue);margin-top:1.75rem;padding-bottom:.35rem;border-bottom:4px solid var(--lime);display:inline-block}
.kar-body ul{padding-left:1.2rem}
.kar-body li::marker{color:var(--lime-dark)}

/* Knöpfe: Website-.btn (quadratisch, Blau) für die Hauptaktion; Bootstrap-Varianten wieder lesbar */
.btn{border-radius:0}
.btn-kar{background:var(--blue);border-color:var(--blue)}
.btn-kar:hover,.btn-kar:focus{background:var(--navy);border-color:var(--navy)}
.btn-kar-blue{background:var(--navy);border-color:var(--navy)}
.btn-kar-blue:hover,.btn-kar-blue:focus{background:var(--blue);border-color:var(--blue)}
.btn-lg{padding:15px 28px;font-size:1.05rem}
.btn-sm{padding:7px 14px;font-size:.88rem}
.btn[class*="btn-outline-"]{background:transparent;color:var(--bs-btn-color) !important}
.btn[class*="btn-outline-"]:hover,.btn[class*="btn-outline-"]:focus{background:var(--bs-btn-hover-bg);color:#fff !important;transform:none}
.btn-outline-primary{--bs-btn-color:#1961ac;--bs-btn-border-color:#1961ac;--bs-btn-hover-bg:#1961ac;border-color:#1961ac}
.btn-outline-secondary{--bs-btn-color:#343333;--bs-btn-border-color:#9aa3ae;--bs-btn-hover-bg:#343333;border-color:#9aa3ae}
.btn-outline-danger{--bs-btn-color:#b42318;--bs-btn-border-color:#b42318;--bs-btn-hover-bg:#b42318;border-color:#b42318}
.btn-link{background:none;border-color:transparent;color:var(--blue) !important}

/* Formulare */
.form-control,.form-select{font-size:1.05rem;padding:.65rem .8rem;border-radius:0;border-color:#c9d1db}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(25,97,172,.2)}
.form-check-input:checked{background-color:var(--blue);border-color:var(--blue)}
.form-label{font-weight:700;color:var(--navy)}
.alert{border-radius:0}
.kar-step{width:2rem;height:2rem;border-radius:0;background:var(--lime);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.hp{position:absolute;left:-9999px;top:-9999px}
img.d-inline,svg.bi{display:inline}