/* Single-job page — extends the shared design system.
 * All tokens are inherited from styles.css / theme.css.
 * Only adds widgets that don't exist on the search page.
 */

.jobpage-body { background: var(--soft); }

.breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--line-2);
  font-size: .85rem;
  color: var(--muted);
}
.breadcrumb__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: .75rem 1.4rem;
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb__current { color: var(--ink); font-weight: 600; }

.jobpage { max-width: 1080px; margin: 0 auto; padding: 1.4rem; }
.jobpage__grid { display: flex; flex-direction: column; gap: 1.2rem; }

/* ===== HERO ===== */
.jobpage__hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-sm);
}
.hero__row { display: grid; grid-template-columns: 72px 1fr; gap: 1.1rem; align-items: start; }
.hero__logo {
  width: 72px; height: 72px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  color: #fff; font-size: 1.2rem; letter-spacing: .03em;
}
.hero__rating { display:inline-flex; align-items:center; gap:.25rem; background:#FFF7ED; border:1px solid #FFE0B8; padding:.18rem .55rem; border-radius:999px; font-size:.78rem; color:#7A3E00; font-weight:600; margin-left:.4rem; }
.hero__rating-star { color:#FFB000; line-height:1; font-size:.88rem; }
.hero__rating strong { font-weight:700; color:#3A1A00; }
.hero__rating-count { color:#9A6024; font-weight:500; font-size:.74rem; }

.hero__meta {
  font-size: .85rem; color: var(--muted);
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.hero__title {
  font-family: var(--font-display);
  font-size: 1.9rem; line-height: 1.15;
  letter-spacing: -.03em; margin: 0 0 .9rem;
}
.hero__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hero__cta {
  margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
}
.hero__cta .btn--lg { padding: .95rem 1.8rem; font-size: 1rem; }
.hero__cta-note { font-size: .78rem; color: var(--muted); }

/* Urgency strip — small concrete signal under the hero apply CTA */
.hero__urgency {
  flex-basis: 100%;
  display: flex; align-items: center; gap: 10px;
  margin-top: .5rem;
  font-size: .8rem; color: var(--muted);
}
.hero__urgency-cell { display: inline-flex; align-items: center; gap: 6px; }
.hero__urgency-cell svg { color: var(--muted); }
.hero__urgency-cell strong { color: var(--text); font-weight: 600; }
.hero__urgency-sep { color: var(--border); }

/* ===== WIDGETS ===== */
.jobpage__widget {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-xs);
}
.widget__head { margin-bottom: 1rem; }
.widget__kicker {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .3rem;
}
.widget__title {
  font-family: var(--font-display);
  font-size: 1.25rem; letter-spacing: -.02em;
  margin: 0 0 .25rem;
}
.widget__src {
  font-size: .75rem; color: var(--muted-2);
  margin: .25rem 0 0;
}

/* ===== Vergütung widget ===== */
.verguetung { display: flex; flex-direction: column; gap: .55rem; margin: .3rem 0 .8rem; }
.vl__row {
  display: grid;
  grid-template-columns: 100px 1fr 90px;
  gap: .75rem; align-items: center;
}
.vl__year { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.vl__bar {
  display: block; height: 10px; background: var(--line-2); border-radius: 5px;
  position: relative; overflow: hidden;
}
.vl__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #FF7A1A 0%, #FF5C4A 100%);
  border-radius: 5px; transition: width .4s ease;
}
.vl__pay {
  font-family: var(--font-mono);
  font-size: .9rem; text-align: right;
  font-weight: 700;
}
.verguetung__compare { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.verguetung__chip {
  font-size: .75rem; font-weight: 600;
  padding: .3rem .65rem; border-radius: 999px;
  background: var(--soft-2); color: var(--ink-2);
}
.verguetung__chip--pos { background: #E7FBF2; color: #076B48; }

/* ===== Übernahme widget ===== */
.uebernahme__hero {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.1rem; align-items: center;
  background: linear-gradient(135deg, #FFF7EF 0%, #FFF0E2 100%);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.uebernahme__big {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
.uebernahme__pct {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.4rem; line-height: 1; color: var(--accent-2);
}
.uebernahme__label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-2); margin-top: .3rem;
}
.uebernahme__note {
  font-size: .92rem; color: var(--ink-2); line-height: 1.5;
}

.pathlist { list-style: none; padding: 0; margin: 0; position: relative; }
.pathlist::before {
  content: ""; position: absolute;
  left: 7px; top: 14px; bottom: 14px;
  width: 2px; background: var(--line);
}
.pathstep {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .8rem; align-items: flex-start;
  padding: .55rem 0; position: relative;
}
.pathstep__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #FF7A1A; border: 3px solid #fff;
  box-shadow: 0 0 0 2px #FF7A1A;
  margin-top: .25rem; z-index: 1;
}
.pathstep__body {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .4rem 1rem; align-items: baseline;
}
.pathstep__body b { font-size: .95rem; }
.pathstep__pay {
  font-family: var(--font-mono); font-size: .82rem;
  color: var(--accent-2); font-weight: 700;
}
.pathstep__prob {
  font-size: .75rem; color: var(--muted);
  grid-column: 1 / -1;
}

/* ===== Berufsschule widget ===== */
.bs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.bs__tile {
  background: var(--soft);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.bs__k {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.bs__v { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.bs__sub { font-size: .78rem; color: var(--muted-2); }

/* ===== Affordability widget ===== */
.afford {
  background: var(--soft);
  border-radius: 12px; padding: 1rem 1.1rem;
  border: 1px solid var(--line-2);
}
.afford--ok   { border-left: 4px solid #18E0A0; }
.afford--warn { border-left: 4px solid #FFB020; }
.afford--risk { border-left: 4px solid #E44B4B; }
.afford__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .35rem 0;
  font-size: .9rem;
}
.afford__row strong { font-family: var(--font-mono); font-size: 1rem; }
.afford__row--rent { color: var(--muted); }
.afford__row--rent strong { color: var(--ink); }
.afford__row--result {
  border-top: 1px solid var(--line);
  margin-top: .3rem; padding-top: .55rem;
  font-weight: 700;
}
.afford__row--result strong {
  font-size: 1.25rem;
  color: var(--accent-2);
}
.afford__verdict {
  font-size: .82rem; color: var(--muted);
  margin: .7rem 0 0;
}
.afford__verdict b { color: var(--ink); font-weight: 700; }

/* ===== Voice + FAQ widget ===== */
.voice {
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  background: #FFF7EF;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1rem; line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.voice em {
  font-style: normal; color: var(--accent);
  font-size: 1.4rem; font-weight: 700;
  margin: 0 .15rem;
  vertical-align: -.15rem;
}
.faq-list { display: flex; flex-direction: column; gap: .4rem; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.faq-item summary {
  cursor: pointer;
  padding: .75rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "＋";
  color: var(--muted); font-weight: 400;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  padding: 0 1rem 1rem;
  margin: 0;
  font-size: .88rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ===== Similar jobs (matches jobboard_redesign prototype) ===== */
/* Both legacy `.similar-grid` and new `.similar__grid` keep working —
   generator renders with the BEM-underscore form now. */
.similar-grid, .similar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
  margin: 0;
}
.similar__card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .7rem;
  align-items: center;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.similar__card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,122,26,.12);
  text-decoration: none;
}
.similar__logo {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  color: #fff; font-size: .78rem;
}
/* Both legacy .similar__body wrapper and bare-div (prototype pattern) supported */
.similar__card > div { min-width: 0; }
.similar__card b,
.similar__card strong {
  font-size: .88rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  color: var(--ink);
}
.similar__card span {
  font-size: .76rem;
  color: var(--muted);
  display: block;
  margin-top: .18rem;
  line-height: 1.4;
}
.similar__card span em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-2);
}

/* ===== Apply CTA (bottom) ===== */
.jobpage__applyagain {
  text-align: center;
  background: linear-gradient(135deg, #FFF7EF 0%, #fff 100%);
}
.jobpage__applyagain .btn--lg {
  margin-top: .3rem;
  padding: 1.1rem 2.4rem; font-size: 1.05rem;
}

/* ===== Footer ===== */
.jobpage__foot {
  background: var(--ink);
  color: #95A0B4;
  font-size: .8rem;
  margin-top: 2rem;
}
.jobpage__foot-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.2rem 1.4rem;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
}

/* ===== Sticky apply bar ===== */
.stickybar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(10,22,40,.08);
  transform: translateY(-100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.stickybar--visible { transform: translateY(0); }
.stickybar__inner {
  max-width: 1080px; margin: 0 auto;
  padding: .6rem 1.4rem;
  display: flex; align-items: center; gap: 1rem;
}
.stickybar__meta { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; }
.stickybar__logo {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .78rem;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.stickybar__text { min-width: 0; }
.stickybar__text b {
  display: block; font-size: .88rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stickybar__text span { font-size: .75rem; color: var(--muted); }
.stickybar__cta { white-space: nowrap; }

/* ===== Summary box (talents.studysmarter.de style) ===== */
.jobpage__summary {
  background: linear-gradient(180deg, #FFFBF7 0%, #fff 100%);
  border: 1px solid #FFE1C9;
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-xs);
}
.summary__head { margin-bottom: 1rem; }
.summary__kicker {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .25rem;
}
.summary__title {
  font-family: var(--font-display);
  font-size: 1.2rem; letter-spacing: -.02em;
  margin: 0;
}
.summary__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem 1.2rem;
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 12px;
}
.summary__fact { display: flex; flex-direction: column; gap: .1rem; }
.summary__fact dt {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.summary__fact dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }
.summary__highlights {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.summary__highlights li {
  padding: .55rem .85rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .88rem;
  color: var(--ink-2);
}

/* ===== Original description ===== */
.desc-body { font-size: .95rem; line-height: 1.65; color: var(--ink-2); }
.desc-body p { margin: 0 0 .9rem; }
.desc-body h4 {
  margin: 1.6rem 0 .5rem;
  font-family: var(--font-display); font-size: 1.05rem;
  color: var(--ink); font-weight: 700;
  padding-left: .7rem;
  border-left: 3px solid var(--accent);
}
.desc-body h4:first-child { margin-top: 0; }
.desc-body p:last-child { margin-bottom: 0; }
.desc-body .desc-list {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.desc-body .desc-list li {
  padding: .5rem .8rem .5rem 2rem;
  background: var(--soft);
  border-radius: 8px;
  font-size: .92rem; line-height: 1.5;
  color: var(--ink-2);
  position: relative;
}
.desc-body .desc-list li::before {
  content: "";
  position: absolute;
  left: .85rem; top: 1.05rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.desc-body .desc-list li:last-child { margin-bottom: 0; }

/* ===== Arbeitsmarkt widget ===== */
.market { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.market__tile {
  padding: 1rem 1.1rem;
  background: var(--soft);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: .15rem;
  border-left: 4px solid var(--line);
}
.market__tile--ok   { border-left-color: #18E0A0; }
.market__tile--warn { border-left-color: #FFB020; }
.market__tile--risk { border-left-color: #E44B4B; }
.market__k {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.market__v {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.02em; margin: .15rem 0;
}
.market__sub { font-size: .78rem; color: var(--muted-2); }

/* ===== AI impact widget ===== */
.ai-impact {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.4rem; align-items: center;
  padding: 1rem 1.2rem;
  background: var(--soft);
  border-radius: 12px;
  border-left: 4px solid var(--line);
}
.ai-impact--ok   { background: #F4FCF8; border-left-color: #18E0A0; }
.ai-impact--warn { background: #FFFAEF; border-left-color: #FFB020; }
.ai-impact--risk { background: #FCF0F0; border-left-color: #E44B4B; }
.ai-impact__big { display: flex; justify-content: center; }
.ai-impact__ring {
  width: 130px; height: 130px; border-radius: 50%;
  background: conic-gradient(var(--accent-2) 0%, var(--accent-2) calc(var(--risk, 30) * 1%), var(--line-2) calc(var(--risk, 30) * 1%));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ai-impact__ring::after {
  content: ""; position: absolute; inset: 12px;
  background: #fff; border-radius: 50%;
}
.ai-impact--ok .ai-impact__ring { background: conic-gradient(#18E0A0, #18E0A0, var(--line-2) 25%); }
.ai-impact--warn .ai-impact__ring { background: conic-gradient(#FFB020, #FFB020, var(--line-2) 50%); }
.ai-impact--risk .ai-impact__ring { background: conic-gradient(#E44B4B, #E44B4B, var(--line-2) 70%); }
.ai-impact__ring-val, .ai-impact__ring-label { position: relative; z-index: 1; text-align: center; }
.ai-impact__ring-val {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 700;
  line-height: 1; color: var(--ink);
}
.ai-impact__ring-label {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  margin-top: .3rem;
}
.ai-impact__body strong {
  display: block; font-family: var(--font-display);
  font-size: 1.1rem; margin-bottom: .4rem;
}
.ai-impact__note {
  margin: 0 0 .7rem; font-size: .92rem; line-height: 1.5; color: var(--ink-2);
}
.ai-impact__hint {
  margin: 0;
  padding: .6rem .8rem;
  background: rgba(255,255,255,.7);
  border-radius: 8px;
  font-size: .82rem; color: var(--ink-2);
}
.ai-impact__hint b { color: var(--ink); }

/* ===== StudySmarter learning widget ===== */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
.learn-card {
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  gap: .7rem; align-items: center;
  padding: .75rem .9rem;
  background: linear-gradient(180deg, #F3F7FF 0%, #fff 100%);
  border: 1px solid #D5E3FF;
  border-radius: 10px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.learn-card:hover {
  border-color: #2B5BF0; transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(43,91,240,.12);
}
.learn-card__icon { font-size: 1.3rem; }
.learn-card__body b { display: block; font-size: .88rem; }
.learn-card__body span { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.learn-card__cta { color: #2B5BF0; font-weight: 700; font-size: 1.1rem; }
.learn-footer { text-align: center; margin-top: 1rem; }

/* ===== Sticky inline TOC — DISABLED (unused markup; kept for history) ===== */
.jobpage__toc { display: none; }
@media (min-width: 1180px) {
  /* padding-left deliberately kept at 0 so .jobpage reads like a proper
     single-column job ad instead of an article w/ sidebar. */
  .jobpage__toc {
    display: none;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    float: left;
    margin-left: -210px;
    width: 190px;
  }
  .jobpage__toc ol {
    list-style: none; padding: 0; margin: 0;
    border-left: 2px solid var(--line-2);
  }
  .jobpage__toc li { margin: 0; }
  .jobpage__toc a {
    display: block;
    padding: .35rem .85rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    transition: color .15s, border-color .15s;
    line-height: 1.35;
  }
  .jobpage__toc a:hover { color: var(--ink); }
  .jobpage__toc a.is-active {
    color: var(--accent-2);
    font-weight: 700;
    border-left-color: var(--accent);
  }
}

/* ===== Bewerbungscheckliste ===== */
.jobpage__checklist {
  background: linear-gradient(180deg, #FBF7E8 0%, #FFFCEF 100%);
  border-color: #ECDFA8;
}
.checklist__progress {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1rem;
}
.checklist__pbar {
  flex: 1; height: 8px; border-radius: 999px;
  background: #EFE6C2; overflow: hidden;
}
.checklist__pbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #C68211 0%, #18E0A0 100%);
  border-radius: 999px;
  transition: width .3s ease;
}
.checklist__pcount {
  font-size: .85rem; color: var(--ink-2); white-space: nowrap;
}
.checklist__pcount b {
  font-family: var(--font-display);
  font-size: 1.1rem; color: var(--ink);
  margin-right: .15rem;
}

.checklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.checklist__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem; align-items: center;
  padding: .75rem .95rem;
  background: #fff;
  border: 1px solid #ECDFA8;
  border-radius: 12px;
  transition: opacity .15s, background .15s;
}
.checklist__row.is-done {
  background: #F7FAEF;
  opacity: .7;
}
.checklist__row.is-done .checklist__text {
  text-decoration: line-through;
  color: var(--muted);
}
.checklist__check {
  display: grid;
  grid-template-columns: 22px 32px 1fr;
  gap: .55rem; align-items: center;
  cursor: pointer;
  min-width: 0;
}
.checklist__check input {
  width: 18px; height: 18px;
  accent-color: #18E0A0;
  cursor: pointer;
  margin: 0;
}
.checklist__num {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted-2);
  font-weight: 700;
}
.checklist__text {
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.4;
}
.checklist__right { text-align: right; }
.checklist__action {
  font-size: .82rem; font-weight: 700;
  color: var(--accent-2);
  background: transparent; border: 0;
  padding: .25rem .4rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.checklist__action:hover { text-decoration: underline; }
.checklist__noaction {
  font-size: .72rem; color: var(--muted);
  font-style: italic;
}

@media (max-width: 720px) {
  .checklist__row {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .checklist__right { text-align: left; }
  .checklist__check { grid-template-columns: 18px 28px 1fr; }
}

/* ===== Ein Tag als Azubi timeline ===== */
.jobpage__dil .dil {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.jobpage__dil .dil::before {
  content: ""; position: absolute;
  left: 50px; top: .5rem; bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--line) 100%);
}
.dil__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.1rem;
  padding: .7rem 0;
  position: relative;
}
.dil__time {
  font-family: var(--font-mono);
  font-size: .92rem;
  font-weight: 700;
  color: var(--accent-2);
  text-align: right;
  padding-right: .15rem;
}
.dil__body {
  position: relative;
  padding-left: .85rem;
}
.dil__body::before {
  content: ""; position: absolute;
  left: -7px; top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--accent);
}
.dil__body b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700;
  margin-bottom: .25rem;
  color: var(--ink);
}
.dil__body p {
  margin: 0;
  font-size: .9rem; line-height: 1.55;
  color: var(--ink-2);
}

/* ===== Schnell-Check (5-question quiz) ===== */
.jobpage__schnellcheck { background: linear-gradient(180deg, #FFFBF5 0%, #fff 100%); }
.sc-progress {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1rem;
}
.sc-progress__bar {
  flex: 1; height: 6px; border-radius: 999px;
  background: #FFE1C9; overflow: hidden;
}
.sc-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #C68211 100%);
  transition: width .3s ease;
}
.sc-progress__count {
  font-size: .8rem; color: var(--muted);
  white-space: nowrap;
}
.sc-progress__count b {
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-right: .15rem;
}
.sc-deck { min-height: 200px; padding: .3rem 0; }
.sc-step { display: none; }
.sc-step--active { display: block; }
.sc-q {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  margin: 0 0 .9rem;
  letter-spacing: -.015em;
}
.sc-opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
.sc-opt {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sc-opt:hover { border-color: var(--accent); }
.sc-opt input { accent-color: var(--accent); }
.sc-opt:has(input:checked) {
  background: #FFF7EF;
  border-color: var(--accent);
}
.sc-email {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit; font-size: 1rem;
  background: #fff;
}
.sc-email:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,122,26,.15);
}
.sc-email-sub {
  font-size: .9rem; color: var(--ink-2);
  margin: 0 0 .85rem;
  line-height: 1.5;
}
.sc-actions {
  display: flex; gap: .55rem; justify-content: space-between;
  margin-top: 1.1rem;
}
.sc-actions .sc-back { margin-right: auto; }
@media (max-width: 720px) {
  .sc-opts { grid-template-columns: 1fr; }
}

/* ===== Vergleich auf einen Blick ===== */
.cmp__tabs {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .9rem;
}
.cmp__tab {
  appearance: none;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .82rem; font-weight: 600;
  padding: .4rem .85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cmp__tab:hover { border-color: var(--ink); }
.cmp__tab.is-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.cmp__scroll {
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: 12px;
}
.cmp {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: .88rem;
}
.cmp th, .cmp td {
  padding: .65rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp__rowhead {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  background: var(--soft);
  white-space: nowrap;
  width: 1%;
}
.cmp__col-h {
  background: #fff;
  border-bottom: 2px solid var(--line);
  display: table-cell;
}
.cmp__col-h--this {
  background: linear-gradient(180deg, #FFF7EF 0%, #FFFAF3 100%);
  border-bottom-color: var(--accent);
}
.cmp__company { display: block; font-weight: 700; color: var(--ink); }
.cmp__city { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.cmp__cell--this { background: #FFFAF3; }
.cmp-mono {
  font-family: var(--font-mono);
  font-size: .85rem;
}
.cmp.cmp--focus tr > *:not(.cmp__rowhead):not([data-col="0"]):not(.is-focus) { display: none; }
@media (max-width: 720px) {
  .cmp__tabs { gap: .3rem; }
  .cmp__tab { padding: .35rem .65rem; font-size: .78rem; }
}

/* ===== Plan B ===== */
.planb {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .65rem;
}
.planb__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--soft);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  align-items: start;
}
.planb__row--escape {
  background: linear-gradient(180deg, #FFF7EF 0%, #FFFAF3 100%);
  border-color: #FFD9B8;
}
.planb__num {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -.01em;
}
.planb__num--escape {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 1.25rem;
}
.planb__body { display: flex; flex-direction: column; gap: .25rem; }
.planb__link {
  font-size: 1rem; color: var(--ink); text-decoration: none;
}
.planb__link:hover { color: var(--accent-2); }
.planb__link b { font-weight: 700; }
.planb__meta { font-size: .82rem; color: var(--muted); }
.planb__cta { align-self: flex-start; margin-top: .55rem; }

/* ===== Erfolgswerte (mint 4-stat strip) ===== */
.jobpage__erfolg {
  background: linear-gradient(180deg, #E5F8EE 0%, #F4FCF8 100%);
  border-color: #A9E5C7;
}
.erfolg__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.erfolg__stat {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #B6E5C9;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(7,107,72,.06);
}
.erfolg__big {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700;
  color: #076B48;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.erfolg__lbl {
  font-size: .8rem; font-weight: 700;
  color: var(--ink);
  margin-top: .35rem;
}
.erfolg__src {
  font-size: .7rem; color: var(--muted-2);
  margin-top: .25rem;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .erfolg__strip {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }
}

/* ===== Hero meta ribbon (6 facts under hero chips) ===== */
.hero-meta {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-2);
}
.hero-meta__fact {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .45rem; align-items: center;
  min-width: 0;
}
.hero-meta__icon { font-size: 1.05rem; line-height: 1; }
.hero-meta__body { display: flex; flex-direction: column; min-width: 0; }
.hero-meta__k {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  line-height: 1.1;
}
.hero-meta__v {
  font-size: .82rem; font-weight: 700;
  color: var(--ink);
  margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 920px) {
  .hero-meta {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, max-content);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: .3rem;
  }
  .hero-meta__fact { scroll-snap-align: start; }
}

/* ===== Future-Ready Score (replaces AI-impact donut) ===== */
.jobpage__future-ready { padding-bottom: 1.6rem; }
.fr-bar { margin: .5rem 0 1.4rem; }
.fr-bar__track {
  position: relative;
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, #FCE9E5 0%, #FFE9C7 35%, #E2F4DE 70%, #C9F2DA 100%);
  overflow: visible;
}
.fr-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,122,26,.35) 0%, rgba(7,107,72,.55) 100%);
}
.fr-bar__marker {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.fr-bar__marker::before {
  content: ""; display: block;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 4px solid #076B48;
  box-shadow: 0 2px 6px rgba(7,107,72,.25);
  margin-bottom: .35rem;
}
.fr-bar--warn .fr-bar__marker::before { border-color: #C68211; box-shadow: 0 2px 6px rgba(198,130,17,.25); }
.fr-bar--risk .fr-bar__marker::before { border-color: #C0392B; box-shadow: 0 2px 6px rgba(192,57,43,.25); }
.fr-bar__score {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700;
  color: var(--ink); line-height: 1;
  margin-top: .5rem;
}
.fr-bar__label {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted-2);
  margin-top: .2rem;
}
.fr-bar__legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: .7rem; color: var(--muted);
  margin-top: 2.4rem;
  font-weight: 600;
}
.fr-bar__legend span:nth-child(1) { text-align: left; }
.fr-bar__legend span:nth-child(4) { text-align: right; }
.fr-bar__legend span:nth-child(2),
.fr-bar__legend span:nth-child(3) { text-align: center; }

.fr-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.fr-tile {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: .7rem; align-items: start;
  padding: .9rem 1rem;
  background: var(--soft);
  border: 1px solid var(--line-2);
  border-radius: 12px;
}
.fr-tile__icon { font-size: 1.4rem; line-height: 1.1; }
.fr-tile__body b {
  display: block; font-size: .92rem; font-weight: 700;
  margin-bottom: .25rem;
}
.fr-tile__body span {
  display: block; font-size: .82rem; color: var(--ink-2);
  line-height: 1.45;
}
.fr-fazit {
  margin: 0;
  font-size: .92rem; line-height: 1.55;
  color: var(--ink-2);
  padding: .85rem 1rem;
  background: linear-gradient(180deg, #FFFBF5 0%, #fff 100%);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

/* ===== Stärken-Profil (4 archetype cards) ===== */
.jobpage__staerken {
  background: linear-gradient(180deg, #F2EBFE 0%, #FBF7FF 100%);
  border-color: #DBC9FA;
}
.archetype-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.archetype {
  background: #fff;
  border: 1px solid #E0D2FA;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(123,44,191,.06);
  transition: transform .15s, box-shadow .15s;
}
.archetype:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(123,44,191,.10);
}
.archetype__icon { font-size: 1.6rem; line-height: 1; }
.archetype__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700;
  margin: .5rem 0 .3rem;
  color: #5E2F8B;
}
.archetype__body {
  margin: 0;
  font-size: .87rem; line-height: 1.5;
  color: var(--ink-2);
}

/* ===== Related cities ===== */
.related-cities {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.related-cities__chip {
  display: inline-flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .85rem;
  background: #F7F4EC;
  border: 1px solid #E5DCC9;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s, background .15s;
}
.related-cities__chip:hover {
  border-color: var(--ink); background: #fff; transform: translateY(-1px);
}
.related-cities__city { font-weight: 700; font-size: .92rem; }
.related-cities__company { font-size: .72rem; color: var(--muted); }


/* =============================================================
   Simplified affordability (lite) — replaces the table-heavy version
   ============================================================= */
.afford-lite {
  padding: 1.1rem 1.3rem;
  border-radius: 12px;
  border-left: 4px solid var(--line);
  background: var(--soft);
}
.afford-lite--ok   { background: #F4FCF8; border-left-color: #18E0A0; }
.afford-lite--warn { background: #FFFAEF; border-left-color: #FFB020; }
.afford-lite__headline {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 .45rem;
}
.afford-lite__detail {
  color: var(--ink-2);
  font-size: .95rem; line-height: 1.55;
  margin: 0 0 .9rem;
}
.afford-lite__prompts {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .35rem;
  border-top: 1px dashed rgba(0,0,0,.08);
  padding-top: .8rem;
}
.afford-lite__prompts li {
  font-size: .85rem; color: var(--ink-2);
}

/* =============================================================
   Career tools (CareerKit deep-link CTAs)
   ============================================================= */
.career-tools .widget__head {
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1rem; margin-bottom: 1rem;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
}
.tool-card {
  appearance: none; text-align: left; cursor: pointer;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: .8rem; align-items: center;
  padding: 1rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.tool-card:hover {
  border-color: var(--accent);
  background: #FFF8F0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255,122,26,.16);
}
.tool-card__icon { font-size: 1.6rem; line-height: 1; }
.tool-card__body b { display: block; font-size: .95rem; font-weight: 700; }
.tool-card__body span {
  display: block;
  font-size: .78rem; color: var(--muted);
  margin-top: .2rem; line-height: 1.4;
}
.tool-card__cta {
  font-size: .82rem; font-weight: 700;
  color: var(--accent-2);
  white-space: nowrap;
}

/* =============================================================
   Notencheck — multi-step form + results
   ============================================================= */
.notencheck .widget__head { border-bottom: none; margin-bottom: 0; }
.nc-form {
  margin-top: .6rem;
  background: linear-gradient(180deg, #FFFBF5 0%, #fff 100%);
  border: 1px solid #FFE1C9;
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}
.nc-step { display: none; }
.nc-step.is-active { display: block; }
.nc-intro {
  font-size: .95rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.nc-intro strong { color: var(--ink); }
.nc-grades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}
.nc-field {
  display: flex; flex-direction: column;
  gap: .3rem;
}
.nc-field--wide { grid-column: 1 / -1; }
.nc-field > span {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
.nc-field select, .nc-field input[type="text"], .nc-field input[type="email"] {
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit; font-size: .92rem;
  background: #fff;
}
.nc-field select:focus, .nc-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,122,26,.15);
}
.nc-chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: .3rem;
}
.nc-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.nc-chip input { accent-color: var(--accent); }
.nc-chip:has(input:checked) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.nc-legal {
  font-size: .75rem; color: var(--muted);
  margin: .6rem 0 1rem;
}
.nc-actions {
  display: flex; gap: .6rem; justify-content: space-between;
}
.nc-next, .nc-submit {
  margin-top: .3rem;
}

/* Results state */
.nc-result {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.3rem; align-items: start;
  padding: .6rem 0;
}
.nc-result__ring {
  width: 130px; height: 130px; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(var(--accent) 0deg, var(--accent) 240deg, var(--line-2) 240deg) border-box;
  border: 8px solid transparent;
}
.nc-result__score {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 700;
  line-height: 1; color: var(--ink);
}
.nc-result__label {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  margin-top: .3rem;
}
.nc-result__body strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  display: block;
  margin-bottom: .6rem;
}
.nc-result__reasons {
  list-style: none; padding: 0; margin: 0 0 .8rem;
}
.nc-result__reasons li {
  font-size: .88rem;
  color: var(--ink-2);
  padding: .3rem 0;
  border-bottom: 1px solid var(--line-2);
}
.nc-result__reasons li:last-child { border-bottom: none; }
.nc-result__rec {
  font-size: .9rem;
  color: var(--ink-2);
  background: #fff;
  padding: .7rem .9rem;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  margin: .6rem 0 1rem;
}
.nc-result__actions .btn { margin-right: .4rem; }

/* =============================================================
   Parent link widget
   ============================================================= */
.parent-link .widget__head { border-bottom: none; margin-bottom: .6rem; }
.parent-link__body {
  padding: 1rem 1.1rem;
  background: #F6F5F1;
  border: 1px solid #E1DEDA;
  border-radius: 10px;
}
.parent-link__body p {
  margin: 0 0 .8rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.parent-link__actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
}

/* =============================================================
   Email capture modal
   ============================================================= */
.lead-modal {
  border: 0; padding: 0;
  border-radius: 16px;
  width: min(440px, calc(100vw - 40px));
  background: #fff;
  box-shadow: 0 20px 60px rgba(10,22,40,.25);
}
.lead-modal::backdrop { background: rgba(10,22,40,.55); }
.lead-modal__form {
  padding: 1.8rem 1.8rem 1.4rem;
  display: flex; flex-direction: column;
  gap: .8rem;
  position: relative;
}
.lead-modal__close {
  position: absolute; top: .9rem; right: .9rem;
  background: transparent; border: 0;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 1rem;
  color: var(--muted);
}
.lead-modal__close:hover { background: var(--soft); color: var(--ink); }
.lead-modal__title {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700;
  margin: 0 0 .3rem;
}
.lead-modal__sub {
  margin: 0 0 .7rem;
  color: var(--ink-2);
  font-size: .9rem; line-height: 1.5;
}
.lead-modal__field {
  display: flex; flex-direction: column; gap: .35rem;
}
.lead-modal__field span {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
.lead-modal__field input {
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit; font-size: 1rem;
  background: #fff;
}
.lead-modal__field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,122,26,.15);
}
.lead-modal__form .btn--lg {
  margin-top: .2rem;
  padding: .9rem;
  font-size: .98rem;
}
.lead-modal__legal {
  font-size: .72rem; color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* =============================================================
   Hero 6-fact meta ribbon (above the title row in the hero)
   ============================================================= */
.ribbon {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -.3rem -1.8rem 1rem;
  padding: .7rem 1.8rem .8rem;
  border-bottom: 1px solid var(--line-2);
}
.ribbon::-webkit-scrollbar { display: none; }
.ribbon__item {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem .8rem;
  border-right: 1px solid var(--line-2);
  flex: 0 0 auto;
  min-width: 120px;
}
.ribbon__item:last-child { border-right: none; }
.ribbon__icon { font-size: 1rem; line-height: 1; }
.ribbon__k {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
.ribbon__v { font-size: .88rem; font-weight: 700; color: var(--ink); }

/* =============================================================
   Erfolgswerte 4-stat strip
   ============================================================= */
.erfolg {
  background: linear-gradient(180deg, #E7FBF2 0%, #F4FCF8 100%);
  border: 1px solid #C5F0DC;
  border-radius: var(--radius-xl);
  padding: 1.1rem 1.3rem 1.2rem;
}
.erfolg__head { margin-bottom: .6rem; }
.erfolg__kicker {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #076B48;
}
.erfolg__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.erfolg__item {
  background: #fff;
  border-radius: 10px;
  padding: .85rem 1rem;
  text-align: center;
}
.erfolg__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #076B48;
  letter-spacing: -.015em;
}
.erfolg__item span {
  display: block;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: .25rem;
}

/* =============================================================
   Future-Ready-Score — gradient bar + 4 tiles
   ============================================================= */
.future-ready .widget__head { border-bottom: 1px solid var(--line-2); padding-bottom: 1rem; margin-bottom: 1.1rem; }

.fr-bar { margin: .3rem 0 1.4rem; }
.fr-bar__track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #E44B4B 0%, #FFB020 50%, #18E0A0 100%);
}
.fr-bar__marker {
  position: absolute; top: -6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--ink);
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(10,22,40,.18);
}
.fr-bar__scale {
  display: flex; justify-content: space-between;
  margin-top: .55rem;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
}
.fr-bar__value {
  color: var(--ink);
  font-weight: 700;
}

.fr-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}
.fr-tile {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
}
.fr-tile--pos { border-left-color: #18E0A0; background: #F7FCFA; }
.fr-tile--neg { border-left-color: #FFB020; background: #FFFBF2; }
.fr-tile__icon { font-size: 1.35rem; line-height: 1; }
.fr-tile__body b {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.fr-tile__body span {
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.fr-fazit {
  margin: 0;
  padding: .85rem 1.05rem;
  background: var(--soft);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.fr-fazit b { color: var(--ink); }

/* =============================================================
   Day-in-Life timeline
   ============================================================= */
.day-in-life .widget__head { border-bottom: 1px solid var(--line-2); padding-bottom: .9rem; margin-bottom: 1rem; }
.dil {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.dil::before {
  content: "";
  position: absolute;
  left: 74px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}
.dil__row {
  display: grid;
  grid-template-columns: 68px 12px 1fr;
  gap: .85rem;
  align-items: flex-start;
  padding: .55rem 0;
  position: relative;
}
.dil__time {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-2);
  padding-top: .1rem;
}
.dil__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--accent);
  margin-top: .45rem;
  z-index: 1;
}
.dil__task {
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* =============================================================
   Plan B — numbered alternatives
   ============================================================= */
.plan-b .widget__head { border-bottom: 1px solid var(--line-2); padding-bottom: .9rem; margin-bottom: 1rem; }
.planb {
  list-style: none; padding: 0; margin: 0 0 1rem;
}
.planb__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line-2);
}
.planb__row:first-child { border-top: none; padding-top: 0; }
.planb__ord {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: .2rem;
}
.planb__body b a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s;
}
.planb__body b a:hover { border-color: var(--accent); }
.planb__meta {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin: .2rem 0 .5rem;
}
.planb__rationale {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.planb__footer {
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.planb__footer p {
  margin: 0 0 .6rem;
  font-size: .88rem;
  color: var(--muted);
}

/* =============================================================
   Vergleich auf einen Blick — comparison table
   ============================================================= */
.vergleich .widget__head { border-bottom: 1px solid var(--line-2); padding-bottom: .9rem; margin-bottom: 1rem; }
.cmp-wrap {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
  min-width: 640px;
}
.cmp__head, .cmp__cell, .cmp__label {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.cmp__head {
  background: var(--soft);
  border-bottom: 2px solid var(--line);
  scroll-snap-align: start;
}
.cmp__head--self {
  background: #FFF0E2;
  border-bottom-color: var(--accent);
}
.cmp__head b {
  display: block;
  font-size: .95rem;
}
.cmp__tag {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-2);
  margin-bottom: .25rem;
  min-height: 1em;
}
.cmp__city {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  margin-top: .15rem;
}
.cmp__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--soft-2);
  position: sticky; left: 0;
  z-index: 1;
}
.cmp__cell--self {
  background: #FFFBF5;
  font-weight: 600;
}
.cmp__row--emphasis .cmp__cell { font-weight: 700; color: var(--ink); }
.cmp__hint {
  margin: .8rem 0 0;
  padding: .7rem .9rem;
  background: var(--soft);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--ink-2);
}

/* =============================================================
   Bewerbungscheckliste — 12-step progress checklist
   ============================================================= */
.checklist .widget__head { border-bottom: 1px solid var(--line-2); padding-bottom: .9rem; margin-bottom: 1rem; }
.check__progress {
  margin-bottom: 1rem;
}
.check__progress-label {
  display: block;
  font-size: .88rem;
  color: var(--ink-2);
  margin-bottom: .35rem;
}
.check__progress-label b {
  font-size: 1.05rem;
  color: var(--accent-2);
  font-weight: 700;
  font-family: var(--font-display);
}
.check__progress-bar {
  height: 10px;
  background: #F2F4F8;
  border-radius: 999px;
  overflow: hidden;
}
.check__progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #FF7A1A 0%, #18E0A0 100%);
  transition: width .3s ease;
  border-radius: 999px;
}
.check {
  list-style: none; padding: 0; margin: 0;
}
/* Rows: tight flex layout. Checkbox + number + text flow left-to-right;
   action sits immediately after text (natural width), NOT pushed to the
   far right — removes the huge empty gap the old grid-template produced. */
.check__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .55rem .65rem;
  margin: 0 -.65rem;
  border-radius: 8px;
  transition: background .15s;
}
.check__row + .check__row { border-top: 1px solid var(--line-2); }
.check__row:hover { background: var(--soft, #FAFBFC); }
.check__box {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
  flex: 1 1 auto;
  min-width: 0;
}
.check__box input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.check__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.check__text {
  font-size: .92rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.check__box input:checked ~ .check__text {
  text-decoration: line-through;
  color: var(--muted);
}
/* Done rows get a soft green tint so progress is visible at a glance. */
.check__row:has(input:checked) { background: #F0FBF5; }
.check__row:has(input:checked):hover { background: #E7FBF2; }

.check__action {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .32rem .7rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.check__action:hover {
  border-color: var(--accent);
  background: #FFF7EF;
  transform: translateY(-1px);
  text-decoration: none;
}

/* =============================================================
   Archetypes — 4-card personality grid
   ============================================================= */
.archetypes {
  background: linear-gradient(180deg, #F6F2FC 0%, #fff 100%);
  border-color: #E3D5F6;
}
.archetypes .widget__head { border-bottom: 1px solid #E3D5F6; padding-bottom: .9rem; margin-bottom: 1rem; }
.archetypes .widget__kicker { color: #5E2F8B; }
.arche {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
.arche__card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .8rem;
  align-items: flex-start;
  padding: .95rem 1rem;
  background: #fff;
  border: 1px solid #E3D5F6;
  border-radius: 10px;
  transition: border-color .15s, transform .15s;
}
.arche__card:hover {
  border-color: #7B2CBF;
  transform: translateY(-1px);
}
.arche__icon {
  font-size: 1.5rem;
  line-height: 1;
  grid-row: 1 / span 2;
}
.arche__card b {
  display: block;
  font-size: .95rem;
  font-weight: 700;
}
.arche__note {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-top: .15rem;
  line-height: 1.4;
}

/* =============================================================
   Schnell-Check — 5-question quiz
   ============================================================= */
.schnellcheck {
  background: linear-gradient(180deg, #FFFBF5 0%, #fff 100%);
  border-color: #FFE1C9;
}
.schnellcheck .widget__head { border-bottom: 1px solid #FFE1C9; padding-bottom: .9rem; margin-bottom: 1rem; }
.sc-form { margin-top: .5rem; }
.sc-step { display: none; }
.sc-step.is-active { display: block; }
.sc-progress {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .5rem;
}
.sc-q {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 1rem;
  letter-spacing: -.02em;
}
.sc-opts {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.1rem;
}
.sc-opt {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sc-opt:hover { border-color: var(--accent); }
.sc-opt input { accent-color: var(--accent); }
.sc-opt:has(input:checked) {
  border-color: var(--accent);
  background: #FFF0E2;
}
.sc-opt span { font-size: .9rem; color: var(--ink-2); }
.sc-intro { margin: 0 0 1rem; color: var(--ink-2); line-height: 1.55; }
.sc-actions {
  display: flex;
  gap: .6rem;
  justify-content: space-between;
}

.sc-result {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.3rem;
  align-items: start;
  padding: .3rem 0;
}
.sc-result__ring {
  width: 130px; height: 130px; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(var(--accent) 0deg, var(--accent) 270deg, var(--line-2) 270deg) border-box;
  border: 8px solid transparent;
}
.sc-result__score {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 700; line-height: 1;
}
.sc-result__label {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  margin-top: .3rem;
}
.sc-result__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.sc-result__rec {
  font-size: .92rem; color: var(--ink-2);
  padding: .7rem .9rem;
  background: var(--soft);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  margin: .5rem 0 1rem;
}

/* =============================================================
   Benefits — 20-point curated Azubi-benefit wall
   ============================================================= */
.benefits {
  background: linear-gradient(180deg, #F4FCF8 0%, #fff 100%);
  border-color: #C5F0DC;
}
.benefits .widget__head { border-bottom: 1px solid #C5F0DC; padding-bottom: .9rem; margin-bottom: 1rem; }
.benefits .widget__kicker { color: #076B48; }

.bn__groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: .6rem;
}
.bn__group-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #076B48;
  margin: 0 0 .5rem;
}
.bn__list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bn__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  background: #fff;
  border: 1px solid #C5F0DC;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: #076B48;
  box-shadow: 0 1px 0 rgba(10,22,40,.03);
  transition: transform .15s, box-shadow .15s;
}
.bn__badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(7,107,72,.1);
}
.bn__icon { font-size: 1.05rem; line-height: 1; }
.bn__label { line-height: 1.2; }

/* Missing-benefits collapsible */
.bn__details {
  margin-top: 1rem;
  border-top: 1px dashed rgba(0,0,0,.08);
  padding-top: 1rem;
}
.bn__details summary {
  cursor: pointer;
  padding: .6rem .9rem;
  background: var(--soft);
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-2);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bn__details summary::-webkit-details-marker { display: none; }
.bn__details summary::after {
  content: "▼";
  color: var(--muted);
  font-size: .7rem;
  transition: transform .2s;
}
.bn__details[open] summary::after { transform: rotate(180deg); }
.bn__miss-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: .9rem;
  padding: .4rem 0;
}
.bn__miss-group { }
.bn__miss-group b {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.bn__miss-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.bn__miss-group li {
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  gap: .45rem;
  align-items: baseline;
}
.bn__miss-group li span:first-child {
  opacity: .6;
}

/* Empty state (nothing detected in the feed) */
.benefits--empty {
  background: var(--soft);
  border-color: var(--line);
}
.bn__missing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bn__miss {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding: .5rem .7rem;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--muted);
}

/* =============================================================
   Ausbildungs-Güte-Signale (DEHOGA-style 12-Leitsätze check)
   ============================================================= */
.top-ausbildungsbetrieb {
  background: linear-gradient(180deg, #FBFAF1 0%, #fff 100%);
  border-color: #EDE3C6;
}
.top-ausbildungsbetrieb .widget__head { border-bottom: 1px solid #EDE3C6; padding-bottom: .9rem; margin-bottom: 1rem; }
.top-ausbildungsbetrieb .widget__kicker { color: #8a6410; }

.tab-score {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  border-left: 4px solid var(--line);
  background: #fff;
}
.tab-score--strong { background: #F4FCF8; border-left-color: #18E0A0; }
.tab-score--mid    { background: #FFFBF2; border-left-color: #FFB020; }
.tab-score--low    { background: #FCF0F0; border-left-color: #E44B4B; }
.tab-score__number {
  text-align: center;
}
.tab-score__number strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.tab-score__number span {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: .35rem;
}
.tab-score__body b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: .4rem;
}
.tab-score__body p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.tab {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.tab__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: .7rem;
  align-items: center;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  border-left: 3px solid var(--line);
  font-size: .85rem;
}
.tab__row--ok { border-left-color: #18E0A0; background: #F7FCFA; }
.tab__row--neutral { border-left-color: var(--line); }
.tab__icon { font-size: 1.15rem; line-height: 1; }
.tab__body b {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.tab__body span {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.4;
}
.tab__status {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.tab__row--ok .tab__status { color: #076B48; }
.tab__status-icon {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--line-2);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tab__row--ok .tab__status-icon {
  background: #18E0A0;
  color: #05331F;
}
.tab__legal {
  margin: 0;
  padding: .75rem .95rem;
  background: var(--soft);
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.tab__legal b { color: var(--ink); }

/* =============================================================
   Sticky TOC sidebar (desktop only)
   ============================================================= */
/* .jobpage--with-toc + .toc disabled — page is now single-column. */
.jobpage--with-toc { position: relative; }
.toc, .toc__inner, .toc__title, .toc a { display: none !important; }
@media (min-width: 1100px) {
  .jobpage--with-toc {
    display: block;
    max-width: 920px;
  }
  .toc {
    display: none !important;
    position: sticky;
    top: 100px;
    align-self: start;
    height: max-content;
  }
  .toc__inner {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1rem .9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .toc__title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: .5rem;
  }
  .toc a {
    display: block;
    padding: .4rem .6rem;
    font-size: .82rem;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
  }
  .toc a:hover { background: var(--soft); color: var(--ink); }
  .toc a.is-active {
    border-left-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
    background: #FFF7EF;
  }
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .hero__row { grid-template-columns: 56px 1fr; gap: .8rem; }
  .hero__logo { width: 56px; height: 56px; font-size: 1rem; }
  .hero__title { font-size: 1.45rem; }
  .jobpage { padding: .9rem; }
  .jobpage__widget, .jobpage__summary { padding: 1.1rem 1.15rem; }
  .bs { grid-template-columns: 1fr; }
  .market { grid-template-columns: 1fr; }
  .similar-grid { grid-template-columns: 1fr; }
  .learn-grid { grid-template-columns: 1fr; }
  .vl__row { grid-template-columns: 80px 1fr 70px; gap: .5rem; }
  .uebernahme__hero { grid-template-columns: 1fr; text-align: center; padding: 1rem; }
  .pathstep__body { grid-template-columns: 1fr; }
  .summary__facts { grid-template-columns: 1fr 1fr; }
  .ai-impact { grid-template-columns: 1fr; text-align: center; }
  .stickybar__text b { font-size: .8rem; }
  .stickybar__cta { padding: .5rem 1rem; font-size: .82rem; }
  .tool-grid { grid-template-columns: 1fr; }
  .nc-result { grid-template-columns: 1fr; text-align: center; gap: .9rem; }
  .nc-result__ring { margin: 0 auto; }
  .parent-link__actions { flex-direction: column; }
  .parent-link__actions .btn { width: 100%; }
  .ribbon { margin: 0 -1.15rem 1rem; padding: .6rem 1.15rem; }
  .erfolg__grid { grid-template-columns: repeat(2, 1fr); }
  .fr-tiles { grid-template-columns: 1fr; }
  .planb__row { grid-template-columns: 1fr; }
  .planb__ord { padding-top: 0; }
  .arche { grid-template-columns: 1fr; }
  .sc-result { grid-template-columns: 1fr; text-align: center; }
  .sc-result__ring { margin: 0 auto; }
  .check__row { grid-template-columns: 1fr; }
  .check__action { justify-self: end; }
  .tab { grid-template-columns: 1fr; }
  .tab-score { grid-template-columns: 1fr; text-align: center; }
  .tab__row { grid-template-columns: 24px 1fr; }
  .tab__status { grid-column: 1 / -1; justify-self: start; margin-left: 30px; }
}


/* =============================================================
   Hero links — make company name + city + logo navigable to
   filtered search so users can browse laterally.
   ============================================================= */
.hero__logo--link {
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.hero__logo--link:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(10,22,40,.15);
}
.hero__meta-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s, color .15s;
}
.hero__meta-link:hover {
  color: var(--accent, #FF7A1A);
  border-bottom-color: var(--accent, #FF7A1A);
}

/* =============================================================
   "Weitere Stellen bei diesem Arbeitgeber" — reuses .similar__*
   grid styling; only the empty-state + more-link additions here.
   ============================================================= */
.company-jobs__more {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem 1rem;
  border: 1px dashed var(--accent, #FF7A1A);
  border-radius: 999px;
  color: var(--accent-dark, #E56200);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  transition: background .15s;
}
.company-jobs__more:hover {
  background: #FFF7EF;
  text-decoration: none;
}
.company-jobs--empty .widget__head {
  text-align: left;
}

/* =============================================================
   "Weiter stöbern" discovery chip row — 3-4 escape hatches back
   into broader search so users don't dead-end on the job page.
   ============================================================= */
.more-nav {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.1rem 1.2rem !important;
  background: var(--soft, #FAFBFC);
  border: 1px solid var(--line, #E5E7EB);
  border-radius: 14px;
}
.more-nav__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #65738A);
}
.more-nav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.more-nav__chip {
  display: inline-block;
  padding: .5rem .9rem;
  background: #fff;
  border: 1px solid var(--line, #E5E7EB);
  border-radius: 999px;
  color: var(--ink, #0A1628);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  transition: border-color .15s, color .15s, transform .15s;
}
.more-nav__chip:hover {
  border-color: var(--accent, #FF7A1A);
  color: var(--accent-dark, #E56200);
  transform: translateY(-1px);
  text-decoration: none;
}

/* =============================================================
   "Mehr über den Beruf" collapsible — houses the magazine-style
   widgets so the main page reads like a direct job ad.
   ============================================================= */
.jobpage__more {
  margin: 2rem 0 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.jobpage__more[open] {
  box-shadow: 0 1px 3px rgba(10,22,40,.04);
}
.jobpage__more > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label toggle"
    "sub   toggle";
  gap: .15rem 1rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(180deg, #FFFBF7 0%, #FFFFFF 100%);
  transition: background .2s;
}
.jobpage__more > summary::-webkit-details-marker { display: none; }
.jobpage__more > summary:hover { background: #FFF7EF; }

.jobpage__more-label {
  grid-area: label;
  font-family: "Clash Display", "Satoshi", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.jobpage__more-sub {
  grid-area: sub;
  font-size: .82rem;
  color: var(--muted);
}
.jobpage__more-toggle {
  grid-area: toggle;
  align-self: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent, #FF7A1A);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 34px;
  text-align: center;
  transition: transform .25s;
}
.jobpage__more[open] > summary .jobpage__more-toggle {
  transform: rotate(45deg);     /* "+" turns into "×" visually */
}

.jobpage__more-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem 0 .4rem;
  border-top: 1px solid var(--line);
  background: var(--soft, #FAFBFC);
}
/* Inner widgets still carry their own padding, just tighten spacing. */
.jobpage__more-body > .jobpage__widget {
  margin: 0 1rem;
}

/* ---------------------------------------------------------------------------
   AT-A-GLANCE STRIP — three-up summary directly under the hero.
   The first card (Zeugnis-Match) is now a CTA button → sign-up flow.
--------------------------------------------------------------------------- */
.glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1.5rem 0 2rem;
}
.glance__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--line, #E6E2DD);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.glance__k {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-2, #65738A);
  text-transform: uppercase;
}
.glance__v {
  font-family: 'Clash Display', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink, #1F2328);
  line-height: 1.1;
}
.glance__bar {
  display: block;
  height: 6px;
  background: #F1EFEC;
  border-radius: 99px;
  overflow: hidden;
}
.glance__bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #12B76A, #C6F602);
  border-radius: 99px;
}
.glance__sub {
  font-size: .75rem;
  color: var(--ink-2, #65738A);
}

/* Match-card variant (Zeugnis-Match) — green accent border */
.glance__card--match {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 60%);
  border-color: #BBF7D0;
}

/* CTA-button variant — looks like a card but is a clickable <button>.
   No bar, big arrow on the value, hover lift. */
.glance__card--cta {
  cursor: pointer;
  text-align: left;
  font: inherit;
  appearance: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.glance__card--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(18,183,106,.18);
  border-color: #12B76A;
}
.glance__card--cta:focus-visible {
  outline: 2px solid #12B76A;
  outline-offset: 2px;
}
.glance__v--cta {
  font-size: 1.25rem;
  color: #12B76A;
}

@media (max-width: 720px) {
  .glance { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Brand logo lockup — used in nav header on every page.
   The SVG itself contains the mark + wordmark; we just constrain its
   display size and remove any anchor underline.
--------------------------------------------------------------------------- */
.brand,
.tb-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand__logo,
.tb-brand img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 240px;
}
@media (max-width: 720px) {
  .brand__logo,
  .tb-brand img { height: 32px; }
}