/* =====================================================================
   COG — karriere.css  ·  Seiten-Styles für die Karriere-Seite
   Vakanzen mit Schieberegler · Benefits mit Icons · offeneres Layout
   ===================================================================== */

/* ---------- Vakanzen: Umschalter (Schieberegler) ---------- */
.vac-head{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:end;justify-content:space-between;margin-bottom:clamp(2rem,4vw,3rem)}
.vac-toggle{position:relative;display:inline-grid;grid-auto-flow:column;background:var(--color-bg-2);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:.35rem}
.vac-toggle__thumb{position:absolute;top:.35rem;bottom:.35rem;left:.35rem;width:0;border-radius:var(--radius-pill);background:var(--color-accent);box-shadow:var(--shadow-sm);z-index:0;transition:left var(--t-mid) var(--ease-out),width var(--t-mid) var(--ease-out)}
.vac-toggle__btn{position:relative;z-index:1;appearance:none;border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-sm);color:var(--color-muted);
  padding:.75rem 1.6rem;border-radius:var(--radius-pill);transition:color var(--t-fast) var(--ease)}
.vac-toggle__btn:hover{color:var(--color-fg)}
.vac-toggle__btn[aria-selected="true"]{color:#fff}
.vac-toggle__btn[aria-selected="true"]:hover{color:#fff}
.vac-toggle__count{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;opacity:.8;
  background:rgba(0,0,0,.08);border-radius:var(--radius-pill);padding:.1rem .5rem;line-height:1.5}
.vac-toggle__btn[aria-selected="true"] .vac-toggle__count{background:rgba(255,255,255,.22)}
:focus-visible.vac-toggle__btn{outline-offset:-2px}

/* ---------- Vakanzen: Karten-Grid ---------- */
.vac-grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.4rem)}
@media(min-width:680px){.vac-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.vac-grid{grid-template-columns:1fr 1fr 1fr}}
.vac-card{display:flex;flex-direction:column;gap:.7rem;background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:clamp(1.5rem,2.5vw,2rem);
  position:relative;overflow:hidden;transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.vac-card.is-hidden{display:none!important}
.vac-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--color-accent);transform:scaleY(0);transform-origin:top;transition:transform var(--t-mid) var(--ease-out)}
.vac-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.vac-card:hover::before{transform:scaleY(1)}
.vac-card__top{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between}
.vac-card__badge{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-accent);background:var(--color-tint);border-radius:var(--radius-pill);padding:.3rem .8rem;font-weight:600}
.vac-card__badge--azubi{color:#fff;background:var(--color-accent)}
.vac-card__loc{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-muted-l);display:inline-flex;align-items:center;gap:.35rem}
.vac-card__loc svg{width:14px;height:14px}
.vac-card h3{font-size:var(--fs-md);font-weight:700;line-height:1.15}
.vac-card p{color:var(--color-muted);font-size:var(--fs-sm);max-width:none;flex:1}
.vac-card__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.vac-card__meta span{font-size:var(--fs-xs);font-weight:600;color:var(--color-muted);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:.25rem .7rem}
.vac-card .link-arrow{margin-top:.6rem}
.vac-empty{text-align:center;padding:3rem 1rem;color:var(--color-muted);border:1px dashed var(--color-line);border-radius:var(--radius-lg)}
.vac-empty.is-hidden{display:none}
.vac-note{margin-top:clamp(1.8rem,3vw,2.6rem);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;
  background:var(--color-bg-2);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:clamp(1.3rem,2.5vw,1.8rem) clamp(1.5rem,3vw,2.2rem)}
.vac-note p{margin:0;max-width:52ch;color:var(--color-muted);font-size:var(--fs-sm)}

/* ---------- Benefits mit Icons (offenes Raster) ---------- */
.benefits{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.2rem)}
@media(min-width:600px){.benefits{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.benefits{grid-template-columns:1fr 1fr 1fr}}
.benefit{display:flex;flex-direction:column;gap:.6rem}
.benefit__icon{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;
  background:var(--color-tint);color:var(--color-accent);margin:0 auto .4rem;
  transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.benefit__icon svg{width:26px;height:26px;stroke-width:1.6}
.benefit:hover .benefit__icon{background:var(--color-accent);color:#fff;transform:translateY(-3px)}
.benefit h3{font-size:var(--fs-md);font-weight:700}
.benefit p{color:var(--color-muted);font-size:var(--fs-sm);max-width:42ch}
/* Im 3-Spalten-Layout steht die 10. Kachel allein — mittig setzen */
@media(min-width:980px){.benefits .benefit:last-child{grid-column:1 / -1;align-items:center;text-align:center}}

/* ---------- Ausbildung-Highlights (kleine Icon-Liste) ---------- */
.edu-points{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}
@media(min-width:680px){.edu-points{grid-template-columns:1fr 1fr}}
.edu-point{display:flex;gap:.8rem;align-items:flex-start}
.edu-point svg{width:22px;height:22px;flex:0 0 auto;color:var(--color-accent);stroke-width:1.7;margin-top:.15rem}
.edu-point span{font-size:var(--fs-sm)}
.section--ink .edu-point span{color:var(--color-cream)}

/* Ausbildungs-Kacheln rechts im Ausbildungs-Abschnitt (gestapelt) */
.edu-vac-list{display:flex;flex-direction:column;gap:1rem}

/* ---------- FAQ: zweispaltiges Editorial-Layout ---------- */
.faq-layout{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media(min-width:900px){.faq-layout{grid-template-columns:.85fr 1.15fr}}
.faq-intro h2{margin:.5rem 0 1rem;max-width:14ch}
.faq-intro p{color:var(--color-muted);font-size:var(--fs-sm);max-width:32ch;margin-bottom:1rem}
@media(min-width:900px){.faq-intro{position:sticky;top:calc(var(--header-h) + 1.5rem)}}