/* FARBUMSTELLUNG 01.10.2026: Leitfarbe Lila statt Gruen, Neutraltoene
   mit demselben Farbstich. Die Variablennamen bleiben, wie sie waren. */
/* ============================================================
   Sanovetis People – oeffentliche Stellenseiten (/karriere)
   Gestaltung nach sanovetis.de: Grundton #F2EFF7, weisse Karten
   mit duennem Rand, Castoro fuer Ueberschriften, Akatab fuer Text,
   Gruen nur als Akzent. Dunkle Flaechen im Sanovetis-Grau.
   Stand 28.09.2026
   ============================================================ */

.kar{
  --grund:#F2EFF7;
  --weiss:#FFFFFF;
  --ink:#2A2436;
  --flaeche:#3A3448;
  --gruen:#7A4DD1;
  --gruen-tief:#6639BA;
  --gruen-blass:#F1EBFB;
  --text:#3A3448;
  --grau:#6E6880;
  --grau-hell:#908AA0;
  --rand:rgba(110,104,128,.14);
  --rand-fest:#DCD5E8;
  --schatten:0 12px 40px rgba(0,0,0,.08);
  --schatten-leiste:0 10px 30px rgba(88,80,104,.10);
  --serif:'Castoro',Georgia,'Times New Roman',serif;
  --sans:'Akatab','Poppins','Segoe UI',system-ui,-apple-system,sans-serif;

  background:var(--grund);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.kar *{box-sizing:border-box}
.kar h1,.kar h2,.kar h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;text-wrap:balance}
.kar a{color:inherit}
.kar .wrap{max-width:1216px;margin:0 auto;padding:0 18px}

/* ---------- Kopfleiste ---------- */
.kar-kopf{padding:0 12px;background:transparent;border:0}
.kar-kopf .wrap{
  max-width:none;background:var(--weiss);border-radius:0 0 20px 20px;
  box-shadow:var(--schatten-leiste);min-height:77px;
  display:flex;align-items:center;gap:16px;padding:14px 26px;flex-wrap:wrap;
}
.kar-kopf img[data-logo]{height:30px;width:auto;display:block}
.kar-kopf .fallback{
  font-family:var(--sans);font-weight:800;font-size:29px;letter-spacing:-.015em;
  color:var(--gruen);line-height:1;
}
.kar-kopf .zurueck{
  margin-left:auto;font-size:15px;color:var(--grau);text-decoration:none;white-space:nowrap;
}
.kar-kopf .zurueck:hover{color:var(--gruen)}

/* ---------- Kopfbereich Liste ---------- */
.kar-hero{padding-block:56px 30px}
.kar-hero .eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);
}
.kar-hero .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gruen);flex:0 0 auto}
.kar-hero h1{font-size:clamp(30px,5vw,44px);line-height:1.12;margin-top:18px;max-width:18ch}
.kar-hero p{font-size:18px;line-height:1.62;margin:20px 0 0;max-width:62ch;color:var(--text)}
.kar-hero strong{font-weight:600;color:var(--ink)}

/* ---------- Trefferzeile ---------- */
.kar-zahl{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--rand);margin-bottom:16px;
}
.kar-zahl strong{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink)}
.kar-zahl span{font-size:13.5px;color:var(--grau)}

/* ---------- Stellenkarten ---------- */
.kar-liste{display:flex;flex-direction:column;gap:12px;margin-bottom:56px}
.kar-karte{
  display:block;text-decoration:none;background:var(--weiss);
  border:1px solid var(--rand);border-radius:8px;padding:22px 24px;
  transition:border-color .12s ease;
}
.kar-karte:hover{border-color:var(--gruen)}
.kar-karte .oben{display:flex;align-items:center;justify-content:space-between;gap:20px}
.kar-karte h2{font-size:21px;line-height:1.28;margin:0}
.kar-karte .satz{margin:8px 0 0;font-size:15px;color:var(--grau);max-width:68ch}
.kar-karte .pfeil{color:var(--gruen);font-size:20px;flex:0 0 auto}

/* ---------- Eckdaten-Marken ---------- */
.kar-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kar-chip{
  display:inline-block;background:var(--grund);color:var(--text);
  border:1px solid var(--rand);border-radius:4px;
  padding:5px 11px;font-size:13px;line-height:1.35;
}
.kar-chip.stark{background:var(--gruen-blass);border-color:transparent;color:var(--gruen-tief);font-weight:600}

/* ---------- Keine Stelle ausgeschrieben ---------- */
.kar-leer{
  background:var(--weiss);border:1px solid var(--rand);border-radius:18px;
  box-shadow:var(--schatten);padding:40px 34px;margin-bottom:56px;
}
.kar-leer h2{font-size:27px}
.kar-leer p{margin:12px 0 0;font-size:16px;max-width:62ch;color:var(--text)}
.kar-leer a{color:var(--gruen-tief);font-weight:600}

/* ---------- Gruende-Abschnitt ---------- */
.kar-gruende{background:var(--flaeche);color:#D6D0E2;padding-block:48px 52px}
.kar-gruende h2{color:#FFFFFF;font-size:29px;margin-bottom:26px}
.kar-gruende .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kar-gruende .grund{border-top:2px solid var(--gruen);padding-top:16px}
.kar-gruende .grund h3{color:#FFFFFF;font-size:19px;margin-bottom:8px}
.kar-gruende .grund p{margin:0;font-size:15px;line-height:1.6;color:#B8B1C6}

/* ---------- Detailseite: Kopf ---------- */
.kar-detail{padding-block:30px 6px}
.kar-detail .krume{font-size:13.5px;color:var(--grau);margin:0 0 18px}
.kar-detail .krume a{color:var(--grau);text-decoration:none}
.kar-detail .krume a:hover{color:var(--gruen)}
.kar-detail h1{font-size:clamp(27px,4.4vw,40px);line-height:1.14;max-width:20ch}
.kar-detail .kar-chips{margin-top:18px}

/* ---------- Detailseite: Spalten ---------- */
.kar-spalten{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;
  padding-block:26px 56px;align-items:start;
}
.kar-text{
  background:var(--weiss);border:1px solid var(--rand);border-radius:18px;
  box-shadow:var(--schatten);padding:30px 32px;
}
.kar-text .anzeige{
  margin:0;white-space:pre-line;font-size:16px;line-height:1.72;max-width:66ch;color:var(--text);
}

/* ---------- Bewerbungsformular ---------- */
.kar-form{
  background:var(--weiss);border:1px solid var(--rand);border-radius:18px;
  box-shadow:var(--schatten);padding:30px 32px;
}
.kar-form h2{font-size:24px}
.kar-form .vor{margin:10px 0 22px;font-size:15px;color:var(--grau);max-width:62ch}
.kar-feld{display:block;margin-bottom:18px}
.kar-feld > span:first-child{
  display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau-hell);margin-bottom:6px;
}
.kar-feld input[type=text],
.kar-feld input[type=email],
.kar-feld input[type=tel],
.kar-feld input[type=url],
.kar-feld input[type=date],
.kar-feld input[type=file],
.kar-feld textarea,
.kar-feld select{
  width:100%;background:var(--weiss);border:1px solid var(--rand-fest);border-radius:4px;
  padding:12px 13px;font-size:15px;font-family:var(--sans);color:var(--text);min-height:46px;
}
.kar-feld textarea{min-height:130px;line-height:1.6;resize:vertical}
.kar-feld input:focus,.kar-feld textarea:focus,.kar-feld select:focus{
  outline:2px solid var(--gruen);outline-offset:0;border-color:var(--gruen);
}
.kar-feld .hilfe{display:block;margin-top:6px;font-size:13px;color:var(--grau)}
.kar-feld .fehler{display:block;margin-top:6px;font-size:13.5px;color:#9C3333;font-weight:500}
.kar-haken{display:flex;align-items:flex-start;gap:10px}
.kar-haken input[type=checkbox]{
  width:19px;height:19px;margin:2px 0 0;accent-color:var(--gruen);flex:0 0 auto;
}
.kar-haken > span{font-size:15px;line-height:1.5;color:var(--text)}
.kar-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kar-knopf{
  background:var(--gruen);color:#FFFFFF;border:0;border-radius:4px;
  padding:14px 26px;font-family:var(--sans);font-size:15px;font-weight:600;
  cursor:pointer;min-height:48px;
}
.kar-knopf:hover{background:var(--gruen-tief)}

/* ---------- Datenschutzinformation ---------- */
.kar-info{
  border:1px solid var(--rand);border-radius:8px;background:var(--grund);
  padding:0;margin:0 0 22px;
}
.kar-info > summary{
  cursor:pointer;padding:14px 16px;font-size:14.5px;font-weight:600;color:var(--ink);
  list-style:none;
}
.kar-info > summary::-webkit-details-marker{display:none}
.kar-info .inhalt{padding:0 16px 16px;font-size:14px;line-height:1.66;color:var(--grau)}
.kar-info .inhalt p{margin:0 0 10px;max-width:70ch}
.kar-info .inhalt a{color:var(--gruen-tief)}

/* ---------- Faktenspalte ---------- */
.kar-seite{position:sticky;top:16px}
.kar-box{
  background:var(--weiss);border:1px solid var(--rand);border-radius:18px;
  box-shadow:var(--schatten);padding:26px;
}
.kar-box h2{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau-hell);margin-bottom:14px;
}
.kar-fakten{margin:0}
.kar-fakten > div{
  display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rand);
}
.kar-fakten > div:last-child{border-bottom:0}
.kar-fakten dt{font-size:14px;color:var(--grau);flex:0 0 auto}
.kar-fakten dd{margin:0;font-size:14.5px;color:var(--ink);text-align:right;font-weight:500}

/* ---------- Fuss ---------- */
.kar-fuss{
  border-top:1px solid var(--rand);padding-block:26px 44px;
  font-size:13.5px;color:var(--grau);
}
.kar-fuss .wrap{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center}
.kar-fuss a{color:var(--grau);text-decoration:none}
.kar-fuss a:hover{color:var(--gruen)}

/* ---------- Schmale Fenster ---------- */
@media (max-width:900px){
  .kar-spalten{grid-template-columns:1fr;gap:26px}
  .kar-seite{position:static;order:-1}
  .kar-gruende .drei{grid-template-columns:1fr 1fr}
}
@media (max-width:580px){
  .kar .wrap{padding:0 16px}
  .kar-kopf .wrap{padding:12px 18px;min-height:66px}
  .kar-kopf img[data-logo]{height:26px}
  .kar-kopf .fallback{font-size:24px}
  .kar-kopf .zurueck{font-size:14px}
  .kar-hero{padding-block:36px 22px}
  .kar-karte{padding:20px}
  .kar-karte .pfeil{display:none}
  .kar-text,.kar-form,.kar-leer,.kar-box{padding:22px 20px}
  .kar-gruende .drei{grid-template-columns:1fr;gap:20px}
  .kar-knopf{width:100%}
}


/* ==========================================================
   Ueberarbeitung Stellenanzeige, 01.10.2026
   Hero-Karte mit Handlungsknoepfen, gegliederter Anzeigentext,
   Haken-Listen, Vorteils-Kacheln, CTA-Box, mitlaufende Seitenleiste,
   Bewerbungsleiste auf dem Handy, WhatsApp-Knopf.
   ========================================================== */
.kar-detail-neu{padding-block:24px 0}
.kar-hero-karte{
  position:relative;overflow:hidden;background:var(--weiss);border:1px solid var(--rand);
  border-radius:22px;box-shadow:var(--schatten);padding:36px 40px 30px 46px;
}
.kar-hero-karte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--gruen),var(--gruen-tief))}
.kar-hero-karte::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:var(--gruen-blass);opacity:.7;pointer-events:none}
.kar-hero-karte > *{position:relative;z-index:1}
.kar-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen)}
.kar-eyebrow::before{content:"";width:24px;height:1.5px;background:var(--gruen)}
.kar-detail-neu h1{margin-top:14px;max-width:26ch;font-size:clamp(28px,4.4vw,42px)}
.kar-teaser{font-size:18px;line-height:1.6;color:var(--text);margin:14px 0 0;max-width:62ch}
.kar-aktionen,.kar-text-unten{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.kar-hinweis{margin:14px 0 0;font-size:13.5px;color:var(--grau)}
.kar a.kar-knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;color:#FFFFFF;transition:background .12s ease,transform .12s ease}
.kar a.kar-knopf:hover{transform:translateY(-1px)}
.kar .kar-knopf-wa{background:#FFFFFF;color:var(--gruen-tief)!important;box-shadow:inset 0 0 0 1.5px var(--gruen)}
.kar .kar-knopf-wa:hover{background:var(--gruen-blass)}
.kar .kar-knopf-wa::before{content:"";width:18px;height:18px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23457F61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 21l2.1-5.4A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") no-repeat center/contain}
.kar .kar-knopf-voll{width:100%}

/* Anzeigentext */
.kar-text{padding:34px 40px}
.kar-anzeige{max-width:none}
.kar-anzeige > p{max-width:70ch}
.kar-anzeige p{margin:0 0 16px;font-size:16.5px;line-height:1.75;color:var(--text)}
.kar-anzeige p.kar-lead{font-family:var(--serif);font-size:23px;line-height:1.42;color:var(--ink);margin-bottom:20px}
.kar-abschnitt{margin-top:34px;padding-top:28px;border-top:1px solid var(--rand)}
.kar-abschnitt h2{display:flex;align-items:center;gap:12px;font-size:25px;margin-bottom:18px}
.kar-abschnitt h2::before{content:"";width:26px;height:2px;background:var(--gruen);flex:0 0 auto}
.kar-haken-liste{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.kar-haken-liste li{
  position:relative;padding:13px 16px 13px 50px;background:#F7F4FB;border:1px solid var(--rand);
  border-radius:12px;font-size:16px;line-height:1.55;color:var(--text);
}
.kar-haken-liste li::before{
  content:"";position:absolute;left:16px;top:14px;width:22px;height:22px;border-radius:50%;
  background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/13px;
}
.kar-vorteile .kar-abschnitt-inhalt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kar-vorteil{background:var(--gruen-blass);border-radius:14px;padding:18px 20px;border:1px solid rgba(122,77,209,.18)}
.kar-vorteil strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3;color:var(--ink);margin-bottom:6px}
.kar-vorteil span{display:block;font-size:15px;line-height:1.6;color:var(--text)}
.kar-cta{margin-top:34px;padding:28px 30px;border-top:0;border-radius:18px;background:var(--flaeche)}
.kar-cta h2{color:#FFFFFF}
.kar-cta p{color:#D6D0E2}
.kar-cta p:last-child{margin-bottom:0}
.kar-text-unten{margin-top:26px}

/* Seitenleiste, Karten der Uebersicht */
.kar-seite{position:sticky;top:18px}
.kar-karte{transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.kar-karte:hover{box-shadow:var(--schatten);transform:translateY(-1px)}

/* Bewerbungsleiste auf dem Handy */
.kar-mobilbar{display:none}
@media (max-width:900px){
  .kar-seite{position:static}
  .kar-vorteile .kar-abschnitt-inhalt{grid-template-columns:1fr}
  .kar-hero-karte{padding:28px 22px 24px 28px}
  .kar-text{padding:26px 22px}
}
@media (max-width:760px){
  .kar-mobilbar{
    display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);box-shadow:0 -8px 24px rgba(0,0,0,.08);
  }
  .kar-mobilbar a.kar-knopf{flex:1;min-height:46px;padding:12px 10px}
  .kar{padding-bottom:78px}
  .kar-aktionen a.kar-knopf{flex:1 1 100%}
  .kar-anzeige p.kar-lead{font-size:20px}
}

.kar-feld > span:first-child .hilfe{display:inline;margin:0 0 0 6px;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--grau-hell)}
@media (max-width:900px){.kar-seite{order:2}}


/* ==========================================================
   Gemeinsame People-Bausteine fuer Seiten auf www.sanovetis.de
   (Kopf mit Unternavigation, Marke, Brotkrumen, Fusszeile).
   Genutzt von svlib/people-kopf.php und svlib/people-fuss.php, 03.10.2026
   ========================================================== */
.kar.kar-shell{min-height:0;background:transparent}
.kar-kopf .kar-logo{display:flex;align-items:center;text-decoration:none}
.kar .kar-marke{
  display:inline-flex;align-items:center;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-tief);background:var(--gruen-blass);
  border-radius:4px;padding:6px 9px;line-height:1;
}
.kar-nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.kar-nav a{
  font-size:14.5px;color:var(--text);text-decoration:none;padding:9px 11px;border-radius:6px;
  transition:background .12s ease,color .12s ease;white-space:nowrap;
}
.kar-nav a:hover,.kar-nav a:focus-visible{background:var(--gruen-blass);color:var(--gruen-tief);outline:none}
.kar-krume{font-size:13.5px;color:var(--grau);margin:18px 0 0}
.kar-krume a{color:var(--grau);text-decoration:none}
.kar-krume a:hover{color:var(--gruen)}
.kar-fuss-people{margin-top:24px;padding-block:0 30px;background:var(--weiss);border-top:1px solid var(--rand)}
.kar-fuss-people .kar-fuss-oben{display:flex;justify-content:space-between;align-items:flex-start;gap:26px 60px;flex-wrap:wrap;padding-block:38px 26px}
.kar-fuss-marke{max-width:46ch}
.kar-fuss-marke p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--text)}
.kar-fuss-marke a{color:var(--gruen-tief);text-decoration:underline;text-underline-offset:3px}
.kar-fuss-logo{display:flex;align-items:center;gap:10px}
.kar-fuss-logo img{height:26px;width:auto;display:block}
.kar-fuss-links{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:8px 36px}
.kar-fuss-links a{font-size:14.5px;color:var(--text)!important}
.kar-fuss-links a:hover{color:var(--gruen)!important}
.kar-fuss-unten{display:flex!important;justify-content:space-between;gap:8px 22px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--rand)}
@media (max-width:1180px){
  .kar-kopf-people .wrap{row-gap:4px}
  .kar-nav{order:3;flex-basis:100%;margin:2px -11px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kar-nav::-webkit-scrollbar{display:none}
}
@media (max-width:580px){
  .kar-fuss-links{grid-template-columns:1fr}
  .kar-kopf-people .kar-marke{display:none}
}

.kar.kar-shell:has(> .kar-kopf){padding-bottom:0}