/* ==========================================================================
   RGN Marketing — Karriere (/karriere/ und die drei Stellenseiten)
   Eigene Datei: gilt nur für den Karriere-Bereich. Hero, Zahlenband,
   Inhaber-Block, FAQ und Bewerbungsformular kommen aus style.css (.hero,
   .ub, .ubz, .inh, .faq, .kvc) und werden hier nur ergänzt.
   ========================================================================== */

/* --- Hero: Zahl statt Siegel im schwebenden Beleg ------------------------- */
/* .ub__beleg b setzt .8125rem — deshalb die höhere Spezifität */
.ub__beleg b.kr-beleg-zahl{grid-row:span 2;align-self:center;
  font-family:'Archivo',system-ui,-apple-system,sans-serif;font-stretch:76%;font-weight:800;
  font-size:2.25rem;line-height:.9;letter-spacing:0;color:var(--tx)}
.kr-hero .ub__buehne img{aspect-ratio:1400/1045;object-fit:cover}
/* Kennzeichnung nach Art. 50 Abs. 4 KI-VO: klein, aber lesbar und ohne Hover sichtbar */
.kr-hero .ub{isolation:isolate}
.kr-ki{position:absolute;z-index:2;left:clamp(26px,3.4vw,44px);bottom:clamp(22px,2.9vw,38px);
  padding:.2rem .5rem;border-radius:6px;background:rgba(14,17,19,.62);color:#fff;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.04em;line-height:1.4;
  pointer-events:none}
/* Im Bewerbungsblock unten rechts: oben läge sie unter der fixierten Kopfzeile */
.kr-ki--oben{left:auto;right:1rem;bottom:1rem;background:rgba(14,17,19,.5)}
/* Mobil steht der Text bis an den unteren Rand — dort oben rechts, über dem Text */
@media (max-width:980px){ .kr-ki--oben{bottom:auto;top:1rem} }
/* Mobil liegt unten rechts der Kampagnen-Beleg — die Kennzeichnung wandert nach oben rechts */
@media (max-width:1000px){ .kr-hero .kr-ki{left:auto;bottom:auto;right:1.6rem;top:1.5rem} }
/* Unter 520 px passen zwei Belege und die Kennzeichnung nicht nebeneinander aufs Bild —
   der Kampagnen-Beleg entfällt (die Zahl steht im Zahlenband), die Kennzeichnung geht nach unten links */
@media (max-width:520px){
  .kr-hero .ub__beleg--a{display:none}
  .kr-hero .kr-ki{top:auto;right:auto;left:1.5rem;bottom:1.4rem}
}
/* Rechts oben hängt im Bild das RGN-Logo an der Wand — der Zahlen-Beleg wandert
   deshalb nach links oben, das Partner-Siegel nach rechts unten. */
.kr-hero .ub__beleg--b{right:auto;left:clamp(-6px,-.6vw,0px);top:clamp(9%,10%,12%)}
.kr-hero .ub__beleg--a{left:auto;right:clamp(-8px,-.8vw,0px);bottom:clamp(10%,12%,14%)}
@media (max-width:1000px){
  .kr-hero .ub__beleg--b{left:0;top:6%}
  .kr-hero .ub__beleg--a{right:0;bottom:8%}
}
@media (max-width:520px){ .ub__beleg b.kr-beleg-zahl{grid-row:auto;font-size:1.6rem} }

/* --- Gründe: vier Karten ------------------------------------------------- */
.kr-gr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.kr-gr__k{display:flex;flex-direction:column;padding:clamp(1.2rem,2vw,1.6rem)}
.kr-gr__nr{display:block;margin-bottom:1.6rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.75rem;font-weight:500;color:var(--tx-mut)}
.kr-gr__k h3{margin:0 0 .5rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.kr-gr__k p{margin:0;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}
.kr-gr__hinweis{max-width:40rem;margin:clamp(1.6rem,2.6vw,2.2rem) auto 0;text-align:center;
  font-size:.9375rem;line-height:1.6;color:var(--tx-mut)}
.kr-gr__hinweis b{color:var(--tx);font-weight:600}
@media (max-width:1040px){ .kr-gr{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .kr-gr{grid-template-columns:minmax(0,1fr)} .kr-gr__nr{margin-bottom:.9rem} }

/* --- Offene Stellen: Aufklapper ------------------------------------------- */
.kr-st{display:grid;gap:.9rem;max-width:66rem;margin-inline:auto}
.kr-stelle{background:var(--papier);border:1px solid var(--li);border-radius:var(--r-card);
  box-shadow:var(--sh-1);transition:border-color .3s var(--fed-weich),box-shadow .3s var(--fed-weich);
  scroll-margin-top:104px}
.kr-stelle:hover{border-color:rgba(42,48,51,.22)}
.kr-stelle[open]{border-color:rgba(42,48,51,.22);box-shadow:var(--sh-2)}
/* <summary> darf nur Phrasing-Content und eine Überschrift enthalten — deshalb
   liegen alle Teile flach darin, das Raster ordnet sie: links untereinander,
   rechts der Schalter über alle Zeilen. */
.kr-stelle > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;
  row-gap:.55rem;align-items:start;padding:clamp(1.25rem,2.4vw,1.9rem);cursor:pointer;
  list-style:none;border-radius:var(--r-card)}
.kr-stelle > summary > *{grid-column:1;min-width:0}
.kr-stelle > summary::-webkit-details-marker{display:none}
.kr-stelle__bereich{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem;
  font-weight:500;color:var(--tx-mut)}
.kr-stelle__titel{margin:0;font-size:clamp(1.25rem,1.05rem + .85vw,1.75rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.15;color:var(--tx)}
.kr-stelle__kurz{display:block;max-width:46rem;font-size:.9375rem;line-height:1.6;color:var(--tx-mut)}
.kr-stelle > summary > .kr-stelle__auf{grid-column:2;grid-row:1 / span 4;align-self:center}

/* Rechts der Schalter: Wort + Plus, das beim Öffnen zum Minus wird */
.kr-stelle__auf{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-size:.875rem;font-weight:600;color:var(--tx)}
.kr-stelle__auf em{font-style:normal}
.kr-stelle__auf em + em{display:none}
.kr-stelle[open] .kr-stelle__auf em{display:none}
.kr-stelle[open] .kr-stelle__auf em + em{display:inline}
.kr-stelle__auf i{position:relative;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--li);background:var(--papier);
  transition:background .25s var(--fed-kurz),border-color .25s var(--fed-kurz)}
.kr-stelle > summary:hover .kr-stelle__auf i{background:var(--ink);border-color:var(--ink)}
.kr-stelle__auf i::before,.kr-stelle__auf i::after{content:"";position:absolute;top:50%;left:50%;
  width:14px;height:1.6px;border-radius:2px;background:var(--graphit);
  transform:translate(-50%,-50%);transition:transform .3s var(--fed-weich),background .25s var(--fed-kurz)}
.kr-stelle__auf i::after{transform:translate(-50%,-50%) rotate(90deg)}
.kr-stelle[open] .kr-stelle__auf i::after{transform:translate(-50%,-50%) rotate(0)}
.kr-stelle > summary:hover .kr-stelle__auf i::before,
.kr-stelle > summary:hover .kr-stelle__auf i::after{background:#fff}

.kr-stelle__inhalt{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(1.5rem,3.4vw,3rem);align-items:start;
  margin:0 clamp(1.25rem,2.4vw,1.9rem);padding:clamp(1.3rem,2.4vw,1.9rem) 0 clamp(1.3rem,2.4vw,1.9rem);
  border-top:1px solid var(--li-soft)}
.kr-stelle[open] .kr-stelle__inhalt{animation:krAuf .45s var(--fed-weich)}
@keyframes krAuf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .kr-stelle__inhalt{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .kr-stelle > summary{grid-template-columns:minmax(0,1fr)}
  .kr-stelle > summary > .kr-stelle__auf{grid-column:1;grid-row:auto;justify-self:start;margin-top:.45rem}
  .kr-stelle__auf i{width:36px;height:36px;order:-1}
}

/* Merkmals-Chips (Modell, Ort, Start) — als Liste auf der Stellenseite,
   als Spans im Aufklapper */
.kr-chips{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.kr-chips > li,.kr-chips > span{display:block;padding:.3rem .65rem;border:1px solid var(--li);
  border-radius:var(--r-pill);background:var(--papier-2);font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.75rem;line-height:1.3;color:var(--tx)}
.kr-link{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.kr-anz-sek{padding-top:clamp(48px,6vw,80px)}

/* --- Der Anzeigentext (Aufklapper und Stellenseite) ----------------------- */
.kr-anz{min-width:0;max-width:44rem}
.kr-anz > p{font-size:1rem;line-height:1.7;color:var(--tx)}
.kr-anz__h{margin:clamp(1.6rem,2.4vw,2rem) 0 .85rem;font-size:1.0625rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;color:var(--tx)}
.kr-anz > .kr-anz__h:first-child{margin-top:0}
.kr-anz .check-list{gap:.6rem}
.kr-anz .check-list li{font-size:.9375rem}
/* „Schön wäre" bekommt ein Plus statt Haken: Kann, nicht Muss */
.kr-plus{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.kr-plus li{position:relative;padding-left:1.75rem;font-size:.9375rem;line-height:1.55}
.kr-plus li::before,.kr-plus li::after{content:"";position:absolute;left:3px;top:.72em;
  width:11px;height:1.6px;border-radius:2px;background:var(--tx-mut)}
.kr-plus li::after{transform:rotate(90deg)}
.kr-anz__ehrlich{margin:clamp(1.6rem,2.4vw,2rem) 0 0;padding:1rem 1.2rem;
  border-left:3px solid var(--graphit);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--papier-2);font-size:.9375rem;line-height:1.65;color:var(--tx)}
.kr-anz__ehrlich b{display:block;margin-bottom:.2rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mut)}
.kr-anz__vielfalt{margin:1.2rem 0 0;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}

/* --- Auf einen Blick ------------------------------------------------------ */
.kr-blick{position:sticky;top:104px;padding:clamp(1.15rem,1.8vw,1.4rem);
  background:var(--papier-2);border:1px solid var(--li-soft);border-radius:var(--r-card)}
.kr-blick__kopf{display:block;margin-bottom:1rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mut)}
.kr-blick dl{display:grid;gap:.9rem;margin:0 0 1.3rem}
.kr-blick dt{font-size:.75rem;line-height:1.3;color:var(--tx-mut)}
.kr-blick dd{margin:.15rem 0 0;font-size:.9375rem;font-weight:600;letter-spacing:-.012em;line-height:1.4}
.kr-blick__knoepfe{display:grid;gap:.5rem}
.kr-blick__knoepfe .btn{width:100%}
@media (max-width:900px){ .kr-blick{position:static} }

/* --- Ablauf der Bewerbung ------------------------------------------------- */
.kr-ab{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem)}
.kr-ab__k{position:relative;padding:clamp(1.3rem,2.2vw,1.8rem)}
.kr-ab__nr{display:block;margin-bottom:1.3rem;font-family:'Archivo',system-ui,sans-serif;
  font-stretch:76%;font-weight:800;font-size:2.75rem;line-height:.9;color:var(--graphit);opacity:.22}
.kr-ab__k h3{margin:0 0 .5rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.kr-ab__k p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--tx-mut)}
.kr-ab__k a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){ .kr-ab{grid-template-columns:minmax(0,1fr)} .kr-ab__nr{margin-bottom:.8rem} }

/* --- Ansprechpartner ------------------------------------------------------ */
/* Überschrift und Lead kleben im .inh-Block sonst aneinander */
.kr-ap .inh__txt .t-lead{margin-top:clamp(.85rem,.6rem + .6vw,1.15rem)}
.kr-direkt{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.55rem}
.kr-direkt a{display:inline-flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:600;
  letter-spacing:-.012em;color:var(--tx)}
.kr-direkt a:hover{text-decoration:underline;text-underline-offset:3px}
.kr-direkt svg{width:16px;height:16px;flex:0 0 auto}
.kr-direkt span{font-weight:400;color:var(--tx-mut)}

/* --- Stellenseite: Kopf und Spalten --------------------------------------- */
.kr-kopf{padding-block:clamp(112px,12vw,150px) clamp(40px,5vw,64px);background:var(--papier)}
.kr-kopf.raster::before{mask-image:radial-gradient(ellipse 70% 90% at 78% 30%,#000 20%,transparent 75%)}
.kr-kopf__in{max-width:52rem}
.kr-kopf h1{margin:0 0 1rem}
.kr-kopf .t-lead{max-width:40rem}
.kr-kopf .kr-chips{margin-top:1.4rem}
.kr-kopf__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.kr-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,4.5vw,4.5rem);
  align-items:start}
.kr-detail .kr-anz__h{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem)}
@media (max-width:900px){ .kr-detail{grid-template-columns:minmax(0,1fr)} }

/* Bewerbung: Aufbau wie der Kontaktblock (.kvc), eigene Danke-Ansicht */
.kr-bew .kvc__auf .check-list{margin-top:1.3rem}
.kr-bew .kvc__auf .check-list li{color:rgba(255,255,255,.86)}
.kr-bew .kvc__feld input[list]::-webkit-calendar-picker-indicator{opacity:.45}
.kr-danke{display:none;padding:1.4rem 1.3rem;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-card);background:rgba(255,255,255,.04)}
.kr-danke b{display:block;margin-bottom:.4rem;font-size:1.125rem;font-weight:700;color:#fff}
.kr-danke p{margin:0;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.72)}
.kr-danke a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.kvc-sek.ist-gesendet .kr-danke{display:block}
.kr-bew__hinweis{margin:.2rem 0 0;font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.5)}

/* Weitere Stellen */
.kr-weitere{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.kr-weitere__k{display:flex;flex-direction:column;gap:.55rem;padding:clamp(1.2rem,2vw,1.6rem);
  transition:border-color .25s var(--fed-kurz),box-shadow .25s var(--fed-kurz)}
.kr-weitere__k:hover{border-color:rgba(42,48,51,.28);box-shadow:var(--sh-2)}
.kr-weitere__k b{font-size:1.125rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.kr-weitere__k em{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.5rem;
  font-style:normal;font-size:.875rem;font-weight:600}
.kr-weitere__k em svg{width:14px;height:14px;transition:transform .3s var(--fed-kurz)}
.kr-weitere__k:hover em svg{transform:translateX(3px)}
@media (max-width:760px){ .kr-weitere{grid-template-columns:minmax(0,1fr)} }

@media (prefers-reduced-motion:reduce){
  .kr-stelle[open] .kr-stelle__inhalt{animation:none}
}

/* --- Umbruch: keine kurzen Restzeilen -------------------------------------
   Die letzten zwei Wörter jedes Absatzes sind im Generator schon mit &nbsp;
   gekoppelt. text-wrap:pretty sorgt in Chrome und Safari zusätzlich dafür,
   dass die letzte Zeile nicht nur aus diesem Paar besteht. */
.kr-anz p,.kr-anz li,.kr-blick dd,.kr-stelle__kurz,.kr-kopf .t-lead,.kr-gr__k p,.kr-gr__hinweis,
.kr-ab__k p,.faq__a p,.faq__p summary,.hero__lead,.hero__bullets li,.kvc__auf p,.kvc__auf li,
.kr-ap .t-lead,.sec__kopf .t-lead,.ubz__x{text-wrap:pretty}
.kr-bew__hinweis a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* iOS zoomt bei Feldern unter 16 px beim Antippen hinein */
.kr-bew .kvc__feld input,.kr-bew .kvc__feld textarea{font-size:1rem}