/* ==========================================================================
   Jobriver v2 – IT-Gehaltsvergleich (Übersicht + Berufsseite)
   Basis: v2-core.css · Styleguide: docu/design/v2-styleguide.md
   Diagrammfarben per dataviz-Validator geprüft (hell + dunkel, CVD).
   ========================================================================== */

:root {
    --gv-a: #724fff;          /* Beruf A / Plus */
    --gv-b: #0f9d8a;          /* Beruf B */
    --gv-neg: #d6457a;        /* Minus (Diverging) */
    --gv-band: #c8b9ff;       /* Spanne P10–P90 */
    --gv-track: #ece8f6;
    --gv-hero: radial-gradient(40% 70% at 18% 20%, rgba(178, 157, 255, .42), transparent 70%), radial-gradient(35% 60% at 85% 10%, rgba(255, 168, 220, .28), transparent 70%);
}
:root[data-theme="dark"] {
    --gv-a: #8466ff;
    --gv-b: #1aa893;
    --gv-neg: #e0628f;
    --gv-band: #4b3b8f;
    --gv-track: #231c33;
    --gv-hero: radial-gradient(40% 70% at 18% 20%, rgba(114, 79, 255, .28), transparent 70%), radial-gradient(35% 60% at 85% 10%, rgba(192, 107, 255, .16), transparent 70%);
}

.gv { --chap-h: 52px; }
.gv-h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5rem); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; text-align: center; }
.gv-h1--left { text-align: left; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.7rem); }
.gv-h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; }
.gv-lead { max-width: 640px; margin: 18px auto 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); text-align: center; }
.gv-lead--left { margin-left: 0; text-align: left; }
.gv-axisnote { margin-top: 14px; font-size: .8125rem; color: var(--muted); }

/* ---------- Hero ---------- */
.gv-hero { position: relative; isolation: isolate; overflow-x: clip; padding: calc(72px + clamp(48px, 7vw, 96px)) 0 clamp(28px, 4vw, 48px); }
.gv-hero::before, .gv-dhero::before { content: ""; position: absolute; inset: -10% -10% 0; z-index: -1; background: var(--gv-hero); filter: blur(10px); -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.gv-hero__inner { display: flex; flex-direction: column; align-items: center; }
.gv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 760px; margin: 36px 0 0; }
.gv-kpis div { padding: 16px 18px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; }
.gv-kpis dt { font-size: .8125rem; color: var(--muted); }
.gv-kpis dd { margin: 2px 0 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- Kapitel-Navigation (Personio Benchmark: klebende Glas-Pille) ---------- */
.gv-chap { position: sticky; top: 80px; z-index: 30; display: flex; justify-content: center; padding: 10px 16px; pointer-events: none; }
.gv-chap__pill { display: flex; gap: 2px; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: var(--nav-glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); box-shadow: var(--shadow-sm); pointer-events: auto; }
.gv-chap__pill::-webkit-scrollbar { display: none; }
.gv-chap__pill a { flex: none; padding: 8px 14px; border-radius: 999px; font-size: .875rem; font-weight: 550; color: var(--ink-2); white-space: nowrap; transition: background-color .2s, color .2s; }
.gv-chap__pill a:hover { color: var(--ink); background: rgba(114, 79, 255, .08); }
.gv-chap__pill a.is-on { background: var(--ink); color: var(--bg); }

/* ---------- Sektionen ---------- */
.gv-sec { padding: clamp(64px, 8vw, 104px) 0; scroll-margin-top: calc(80px + var(--chap-h)); }
.gv-sec--tint { background: var(--tint); }
.gv-sec__head { margin-bottom: clamp(28px, 4vw, 44px); }
.gv-sec__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.gv-sec__note { max-width: 760px; margin-top: 10px; color: var(--muted); }
.gv-two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

/* ---------- Spannen-Streifen (P10–P90 + Median) ---------- */
.strip { position: relative; display: block; height: 12px; border-radius: 999px; background: var(--gv-track); }
.strip--lg { height: 18px; }
.strip__band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gv-band), var(--gv-a)); transition: left .5s var(--ease), width .5s var(--ease); }
.strip__mid { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); transition: left .5s var(--ease); }
.gv-figure__ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: .8125rem; color: var(--muted); }
.gv-figure__ends b { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.gv-figure__ends .r { text-align: right; }

/* Segment-Schalter klein */
.seg2 { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.seg2__b { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: .8125rem; font-weight: 550; color: var(--muted); transition: background-color .2s, color .2s; }
.seg2__b.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Rechner ---------- */
.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: visible; }
.calc__in { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--line); }
.calc__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; font-size: .875rem; font-weight: 550; color: var(--ink); }
.combo { position: relative; }
.combo input, .calc__select select { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); font: inherit; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.combo input:focus, .calc__select select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(114, 79, 255, .15); }
.calc__select { position: relative; }
.calc__select select { appearance: none; padding-right: 40px; cursor: pointer; }
.calc__select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.combo__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.combo__list[hidden] { display: none; }
.combo__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: .9375rem; cursor: pointer; }
.combo__list li small { color: var(--muted); font-variant-numeric: tabular-nums; }
.combo__list li[aria-selected="true"], .combo__list li:hover { background: var(--brand-50); }
.seg3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; border-radius: 14px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.seg3 label { position: relative; cursor: pointer; }
.seg3 input { position: absolute; opacity: 0; }
.seg3 span { display: grid; place-items: center; min-height: 42px; border-radius: 10px; font-size: .875rem; font-weight: 550; color: var(--muted); transition: background-color .2s, color .2s, box-shadow .2s; }
.seg3 input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg3 input:focus-visible + span { outline: 2.5px solid var(--brand); outline-offset: 2px; }
.calc__formula { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: .8125rem; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.calc__formula b { color: var(--ink); font-weight: 600; }
.calc__out { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.calc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calc__k { font-weight: 600; color: var(--brand-700); }
.calc__big { margin-top: 18px; font-size: clamp(3rem, 2rem + 4vw, 5.2rem); line-height: 1; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.calc__sub { margin: 6px 0 26px; color: var(--muted); }
.calc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 28px; }
.calc__share { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font-size: .875rem; font-weight: 550; color: var(--ink-2); transition: border-color .2s, color .2s; }
.calc__share:hover { border-color: var(--brand); color: var(--brand-700); }
.calc__share.is-done { border-color: var(--mint); color: var(--mint); }

/* ---------- Gehaltsatlas ---------- */
.atlas-tools { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 220px); gap: 12px 16px; align-items: center; margin-bottom: 22px; }
.atlas-search { position: relative; }
.atlas-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.atlas-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font: inherit; color: var(--ink); outline: none; }
.atlas-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(114, 79, 255, .15); }
.atlas-groups { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.atlas-groups::-webkit-scrollbar { display: none; }
.atlas-groups .chip { flex: none; min-height: 38px; font-size: .8125rem; }
.atlas-sort select { height: 44px; border-radius: 999px; font-size: .875rem; }
.atlas-axis { position: relative; height: 22px; margin-left: calc(220px + 20px); margin-right: calc(96px + 110px + 40px); font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.atlas-axis span { position: absolute; transform: translateX(-50%); }
.atlas { list-style: none; margin: 0; padding: 0; }
.atlas__row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 96px 110px; align-items: center; gap: 20px; padding: 9px 12px; margin: 0 -12px; border-radius: 12px; transition: background-color .15s; }
.atlas__row:hover { background: var(--surface); }
.atlas__row[hidden] { display: none; }
.atlas__row.is-self { background: var(--brand-50); }
.atlas__name { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas__name small { margin-left: 6px; font-size: .75rem; font-weight: 500; color: var(--brand-700); }
a.atlas__name:hover { color: var(--brand-700); }
.atlas__row .strip { height: 10px; }
.atlas__row .strip__mid { top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; }
.atlas__v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.atlas__cmp { justify-self: end; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font-size: .8125rem; font-weight: 550; color: var(--ink-2); opacity: .7; transition: opacity .2s, border-color .2s, color .2s; }
.atlas__row:hover .atlas__cmp, .atlas__cmp:focus-visible { opacity: 1; }
.atlas__cmp:hover { border-color: var(--brand); color: var(--brand-700); }
.atlas-empty { padding: 24px 0; color: var(--muted); }
.atlas-tip, .hist__tip { position: fixed; z-index: 60; max-width: 300px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: .8125rem; font-weight: 550; line-height: 1.4; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.atlas-tip[hidden], .hist__tip[hidden] { display: none; }

/* ---------- Vergleich A/B ---------- */
.cmp { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cmp__pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.dot--a { background: var(--gv-a); }
.dot--b { background: var(--gv-b); }
.cmp__swap { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); transition: border-color .2s, transform .35s var(--ease); }
.cmp__swap svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmp__swap:hover { border-color: var(--brand); transform: rotate(180deg); }
.cmp__chart { margin-top: 30px; }
.cmp__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 110px; align-items: center; gap: 20px; padding: 12px 0; }
.cmp__n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp__row--a .cmp__n::before, .cmp__row--b .cmp__n::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: 0; }
.cmp__row--a .cmp__n::before { background: var(--gv-a); }
.cmp__row--b .cmp__n::before { background: var(--gv-b); }
.cmp__row--b .strip__band { background: linear-gradient(90deg, color-mix(in oklab, var(--gv-b) 35%, var(--gv-track)), var(--gv-b)); }
.cmp__v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.atlas-axis--cmp { margin-left: 220px; margin-right: 130px; margin-top: 4px; }
.cmp__verdict { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--tint); font-size: 1.0625rem; line-height: 1.5; }
.cmp__verdict b { font-variant-numeric: tabular-nums; }

/* ---------- Erfahrungs-Treppe ---------- */
.stairs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 980px; gap: clamp(12px, 2vw, 24px); align-items: end; }
.stair { display: flex; flex-direction: column; }
.stair__col { position: relative; height: 220px; display: flex; align-items: flex-end; }
.stair__fill { display: block; width: 100%; height: var(--h); border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, var(--gv-a), var(--gv-band)); transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease); }
.stairs.is-in .stair__fill, .js .is-in .stair__fill { transform: scaleY(1); }
.stair:nth-child(2) .stair__fill { transition-delay: .12s; } .stair:nth-child(3) .stair__fill { transition-delay: .24s; } .stair:nth-child(4) .stair__fill { transition-delay: .36s; }
.stair__v { margin-top: 14px; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stair__l { font-weight: 600; }
.stair__r, .stair__n { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stair__n .up { color: var(--brand-700); font-weight: 600; }

/* ---------- Arbeitsmodell ---------- */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.model { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.model__k { font-weight: 600; color: var(--brand-700); }
.model__v { font-size: 2.2rem; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.model__r, .model__n { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.model .link-arrow { margin-top: 14px; }

/* ---------- Skills (diverging) ---------- */
.skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.skill { display: grid; grid-template-columns: 150px minmax(0, 1fr) 80px 150px; align-items: center; gap: 16px; padding: 8px 12px; margin: 0 -12px; border-radius: 12px; transition: background-color .15s; }
.skill:hover { background: var(--surface); }
.gv-sec--tint .skill:hover { background: var(--surface); }
.skill__name { font-weight: 550; }
.skill__name:hover { color: var(--brand-700); }
.skill__bar { position: relative; height: 14px; }
.skill__zero { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--line-2); }
.skill__bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; transform-origin: left; }
.skill__bar i.is-pos { background: var(--gv-a); border-radius: 0 4px 4px 0; }
.skill__bar i.is-neg { background: var(--gv-neg); border-radius: 4px 0 0 4px; transform-origin: right; }
.skill__d { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.skill__d.is-pos { color: var(--brand-700); }
.skill__d.is-neg { color: color-mix(in oklab, var(--gv-neg) 80%, var(--ink)); }
.skill__m { text-align: right; font-variant-numeric: tabular-nums; }
.skill__m small { display: block; font-size: .75rem; color: var(--muted); }

/* ---------- Ranking (Städte / Regionen) ---------- */
.rank { list-style: none; margin: 0; padding: 0; counter-reset: rk; }
.rank__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 92px 70px; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rank__name { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rank__name:hover { color: var(--brand-700); }
.rank__bar { position: relative; height: 10px; border-radius: 999px; background: var(--gv-track); }
.rank__bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--gv-band); }
.rank__bar b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.rank__v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank__n { text-align: right; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank__n.is-small { color: color-mix(in oklab, var(--gv-neg) 70%, var(--muted)); }
.rank-sort { margin-top: 22px; }

/* ---------- Methodik (Personio Key Facts) ---------- */
.method { max-width: 900px; margin: 0 auto; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-xl); background: var(--brand-50); }
.method__list { margin: 18px 0 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.6; color: var(--ink-2); }
.method__list strong { color: var(--ink); }

/* ---------- Abschluss-Band (als Karte, Styleguide Kap. 13) ---------- */
.gv-band { margin: 0 var(--edge); padding: clamp(48px, 6vw, 80px) 0; border-radius: var(--r-xl); background: radial-gradient(80% 120% at 85% 0%, #3b2580, var(--plum) 70%); color: #d9d2ee; }
.gv-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.gv-band__h { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; color: #fff; }
.gv-band p { margin-top: 8px; color: #cfc4f3; }
.gv-band__a { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--light { background: #fff; color: var(--plum); }
.btn--light:hover { background: #f1ecff; }
.btn--ghost-dark { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* ---------- Berufsseite: Kopf ---------- */
.gv-dhero { position: relative; isolation: isolate; overflow-x: clip; padding: calc(72px + clamp(36px, 5vw, 72px)) 0 clamp(28px, 4vw, 48px); }
.gv-crumbs { display: flex; gap: 8px; margin-bottom: 18px; font-size: .875rem; color: var(--muted); }
.gv-crumbs a:hover { color: var(--brand-700); }
.gv-dhero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.gv-figure { margin-top: 32px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.gv-figure__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gv-figure__label { font-weight: 600; color: var(--brand-700); }
.gv-figure__big { margin: 10px 0 24px; font-size: clamp(3rem, 2rem + 4vw, 4.8rem); line-height: 1; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.gv-me { position: sticky; top: 150px; padding: clamp(22px, 3vw, 30px); border-radius: var(--r-xl); background: radial-gradient(90% 80% at 10% 0%, #3b2580, var(--plum) 70%); color: #e9e3fb; box-shadow: var(--shadow-lg); }
.gv-me__h { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.gv-me__p { margin: 8px 0 18px; font-size: .9375rem; line-height: 1.55; color: #cfc4f3; }
.gv-me__field { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); transition: border-color .2s, box-shadow .2s; }
.gv-me__field:focus-within { border-color: #c9b8ff; box-shadow: 0 0 0 4px rgba(201, 184, 255, .2); }
.gv-me__field input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; font: 600 1.375rem var(--font); color: #fff; outline: none; font-variant-numeric: tabular-nums; }
.gv-me__field input::placeholder { color: rgba(255, 255, 255, .45); font-weight: 500; }
.gv-me__field span { font-size: .875rem; color: #cfc4f3; white-space: nowrap; }
.gv-me__out { margin-top: 18px; min-height: 120px; }
.gv-me__hint { font-size: .8125rem; color: #b8afd0; }
.gv-me__pct { font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.gv-me__txt { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: #e9e3fb; }
.gv-me__meter { position: relative; height: 10px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.gv-me__meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #a48dff, #fff); transition: width .6s var(--ease); }

/* ---------- Histogramm ---------- */
.hist { position: relative; padding: clamp(18px, 3vw, 32px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.hist__plot { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 260px; }
.hist__bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hist__bar i { display: block; width: 100%; height: var(--h); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--gv-track); transform-origin: bottom; transform: scaleY(0); transition: transform .8s var(--ease), background-color .2s; }
.hist__bar.is-band i { background: var(--gv-band); }
.hist__bar:hover i, .hist__bar:focus-visible i { background: var(--gv-a); }
.hist__bar.is-me i { background: var(--ink); }
.hist.is-in .hist__bar i { transform: scaleY(1); }
.hist__me { position: absolute; bottom: 100%; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .75rem; transform: translate(-50%, -6px); transition: left .4s var(--ease); }
.hist__me[hidden] { display: none; }
.hist__axis { position: relative; height: 22px; margin-top: 8px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hist__axis span { position: absolute; }
.hist__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted); }
.hist__legend i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; }
.lg-band { background: var(--gv-band); } .lg-rest { background: var(--gv-track); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Stellen ---------- */
.gv-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gv-job { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
.gv-job:hover { border-color: var(--brand-200); box-shadow: var(--shadow); transform: translateY(-2px); }
.gv-job strong { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gv-job__meta { font-size: .875rem; color: var(--muted); }
.gv-job__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.gv-job__sal { font-weight: 600; font-variant-numeric: tabular-nums; }
.gv-job__tag { padding: 3px 9px; border-radius: 999px; background: var(--tint); font-size: .75rem; font-weight: 550; color: var(--muted); }
.gv-job__tag.is-up { background: var(--brand-50); color: var(--brand-700); }

/* ---------- Berufsbild ---------- */
.gv-read { max-width: 820px; }
.gv-prose { margin-top: 20px; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .atlas-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
    .atlas-groups { grid-column: 1 / -1; grid-row: 2; }
    .atlas__row { grid-template-columns: 180px minmax(0, 1fr) 90px; }
    .atlas__cmp { display: none; }
    .atlas-axis { margin-left: 200px; margin-right: 110px; }
    .gv-dhero__grid, .gv-two { grid-template-columns: minmax(0, 1fr); }
    .gv-me { position: static; }
    .gv-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .calc { grid-template-columns: minmax(0, 1fr); }
    .calc__in { border-right: 0; border-bottom: 1px solid var(--line); }
    .models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stairs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .stair__col { height: 150px; }
    .skill { grid-template-columns: 110px minmax(0, 1fr) 70px; }
    .skill__m { display: none; }
    .cmp__row { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px 14px; }
    .cmp__row .strip { grid-column: 1 / -1; grid-row: 2; }
    .atlas-axis--cmp { margin: 4px 0 0; }
}
@media (max-width: 560px) {
    .gv-kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .gv-kpis div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; text-align: left; background: var(--surface); border-color: var(--line); }
    .gv-kpis dd { margin: 0; font-size: 1.25rem; }
    .seg3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gv-chap { top: 78px; padding-inline: 8px; }
    .atlas-tools { grid-template-columns: minmax(0, 1fr); }
    .atlas-groups { grid-row: auto; }
    .atlas__row { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 12px; padding: 10px 12px; }
    .atlas__row .strip { grid-column: 1 / -1; grid-row: 2; }
    .atlas-axis { display: none; }
    .cmp__pick { grid-template-columns: minmax(0, 1fr); }
    .cmp__swap { justify-self: center; transform: rotate(90deg); }
    .rank__row { grid-template-columns: minmax(0, 1fr) 86px; gap: 6px 12px; }
    .rank__bar { grid-column: 1 / -1; grid-row: 2; }
    .rank__n { display: none; }
    .gv-jobs { grid-template-columns: minmax(0, 1fr); }
    .skill { grid-template-columns: 96px minmax(0, 1fr) 62px; gap: 10px; }
    .seg3 span { font-size: .8125rem; }
    .hist__plot { height: 190px; }
    .gv-figure__top, .calc__top { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .stair__fill, .hist__bar i { transform: none !important; transition: none; }
}
.gv-404 .gv-hero__inner .btn { margin-top: 28px; }

/* Mobil-Feinschliff (Audit 11.10.2026) */
@media (max-width: 860px) {
    .stairs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .models { grid-template-columns: minmax(0, 1fr); }
    .model__v { white-space: nowrap; font-size: 1.8rem; }
    .gv-band__a { width: 100%; }
    .gv-band__a > .btn { width: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 1080px) {
    .gv-me__out { min-height: 0; }
}