/**
 * Career screen - Trialog Intranet Design
 * Ported from the approved intranet.html design prototype (repo root):
 * the "Karriere" page with the level hero, medal ladder ("Meine Stufe")
 * and the sliding Karrieresystem carousel. All classes carry the
 * `in-kar-` / `in-ksys-` prefix so they cannot collide with the legacy
 * stylesheets or the un-prefixed prototype names. Design tokens (--in-*)
 * live in intranet.css; shared primitives (in-card, in-stat, in-subtabs,
 * in-sec-note, in-btn) live in intranet.css / intranet-ui.css and are
 * only consumed here, never redefined.
 */

/* ========================================
   SECTION HEADERS (Sparten)
   ======================================== */

.in-kar-sec {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.in-kar-sec .in-kar-bar {
  width: 5px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
}

.in-kar-sec h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--in-navy-800);
  letter-spacing: -0.3px;
  margin: 0;
}

.in-kar-sec .in-chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  margin-left: 2px;
}

/* ========================================
   HERO CARD & PROGRESS TRACK
   ======================================== */

.in-kar-hero {
  border-radius: 16px;
  padding: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--in-navy-800), var(--in-navy-600));
  position: relative;
  overflow: hidden;
  box-shadow: var(--in-shadow-md);
}

.in-kar-hero .in-kar-pat {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

.in-kar-hero > * {
  position: relative;
}

.in-kar-eye {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #9db4dd;
  font-weight: 700;
}

.in-kar-lvl {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-top: 6px;
}

.in-kar-lvl small {
  font-size: 15px;
  font-weight: 600;
  color: #b9c8e6;
  margin-left: 8px;
}

.in-kar-track {
  position: relative;
  height: 17px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  margin-top: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 2px;
}

.in-kar-track > span {
  position: relative;
  display: block;
  height: 100%;
  min-width: 17px;
  border-radius: 20px;
  background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.4) 48%,
        transparent 66%
      )
      0 0/220% 100% no-repeat,
    linear-gradient(90deg, #2f6bd6 0%, #4d86e8 48%, #82b2ff 100%);
  box-shadow: 0 0 14px rgba(77, 134, 232, 0.75), 0 0 5px rgba(130, 178, 255, 0.9),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  animation: inKarShine 2.8s linear infinite;
}

.in-kar-track > span::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 1px;
  height: 45%;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

.in-kar-track > span::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 9px 2px rgba(150, 190, 255, 0.95);
  animation: inKarKnob 1.9s ease-in-out infinite;
}

@keyframes inKarShine {
  0% {
    background-position: 220% 0, 0 0;
  }
  100% {
    background-position: -120% 0, 0 0;
  }
}

@keyframes inKarKnob {
  0%,
  100% {
    box-shadow: 0 0 6px 1px rgba(150, 190, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 13px 4px rgba(150, 190, 255, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .in-kar-track > span {
    animation: none;
  }

  .in-kar-track > span::after {
    animation: none;
  }
}

.in-kar-hero-medal {
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 28%, #ffffff, #dce4f0 78%, #c3cede);
  border-radius: 50%;
  padding: 10px;
  line-height: 0;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4), inset 0 -2px 5px rgba(19, 37, 72, 0.16),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
  .in-kar-hero-medal {
    display: none;
  }
}

/* ========================================
   LEVEL LADDER ROWS
   ======================================== */

.in-kar-lvl-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--in-line-soft);
}

.in-kar-lvl-row:last-child {
  border-bottom: none;
}

.in-kar-lvl-row.is-current {
  background: linear-gradient(90deg, var(--in-blue-50), transparent);
}

.in-kar-lvl-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-size: 16px;
}

.in-kar-lvl-main {
  flex: 1;
  min-width: 0;
}

.in-kar-lvl-main .in-kar-nm {
  font-weight: 700;
  font-size: 15px;
}

.in-kar-lvl-main .in-kar-sub {
  font-size: 12.5px;
  color: var(--in-ink-500);
  margin-top: 2px;
}

.in-kar-lvl-main .in-kar-mini {
  height: 6px;
  background: var(--in-line);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 8px;
  max-width: 340px;
}

.in-kar-lvl-main .in-kar-mini > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--in-blue-500), var(--in-blue-400));
  border-radius: 20px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-kar-lvl-status {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

.in-kar-st-done {
  background: var(--in-green-soft);
  color: var(--in-green-text);
}

.in-kar-st-cur {
  background: var(--in-blue-100);
  color: var(--in-blue-500);
}

.in-kar-st-lock {
  background: var(--in-line-soft);
  color: var(--in-ink-500);
}

/* ========================================
   MEDALS
   ======================================== */

.in-kar-lvl-badge.in-kar-med {
  background: transparent !important;
  box-shadow: none;
  width: 52px;
  height: 52px;
  overflow: visible;
}

.in-kar-lvl-badge.in-kar-med svg,
.in-kar-lvl-badge.in-kar-med img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}

.in-kar-lvl-badge.in-kar-med.is-locked svg,
.in-kar-lvl-badge.in-kar-med.is-locked img {
  filter: grayscale(0.75) opacity(0.55);
}

.in-kar-buero-stars {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin-top: 7px;
  line-height: 0;
}

.in-kar-medal .in-kar-glit {
  animation: inKarGlitzern 2.8s ease-in-out infinite;
}

@keyframes inKarGlitzern {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .in-kar-medal .in-kar-glit {
    animation: none;
    opacity: 0.6;
  }
}

/* ========================================
   COLLAPSIBLE LADDER (FOLD)
   ======================================== */

.in-kar-fold-head {
  cursor: pointer;
  user-select: none;
  border-bottom: none;
  transition: 0.16s;
}

.in-kar-fold-head:hover h3 {
  color: var(--in-blue-500);
}

.in-kar-fold-hint {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--in-blue-500);
}

.in-kar-fold-chev {
  width: 19px;
  height: 19px;
  color: var(--in-ink-500);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.in-kar-fold-head.is-open .in-kar-fold-chev {
  transform: rotate(180deg);
}

.in-kar-fold {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-kar-fold.is-open {
  max-height: 1400px;
  border-top: 1px solid var(--in-line-soft);
}

/* ========================================
   KARRIERESYSTEM - RAILS
   ======================================== */

.in-ksys-rails {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 22px;
}

.in-ksys-railrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.in-ksys-branch-lab {
  flex-shrink: 0;
  width: 96px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--in-ink-500);
  text-align: right;
  padding-top: 12px;
  line-height: 1.15;
}

.in-ksys-railrow.is-on .in-ksys-branch-lab {
  color: var(--in-blue-500);
}

@media (max-width: 640px) {
  .in-ksys-branch-lab {
    width: 58px;
    font-size: 9.5px;
    padding-top: 9px;
  }
}

.in-ksys-rail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px 2px 4px;
  scrollbar-width: none;
}

.in-ksys-rail::-webkit-scrollbar {
  display: none;
}

.in-ksys-step {
  flex: 1 0 84px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.in-ksys-step::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--in-line);
  z-index: 0;
  border-radius: 2px;
}

.in-ksys-step:first-child::before {
  display: none;
}

.in-ksys-step.is-done::before,
.in-ksys-step.is-current::before {
  background: var(--in-blue-400);
}

.in-ksys-step .in-ksys-sm {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
  transition: transform 0.2s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.in-ksys-step.is-locked .in-ksys-sm {
  filter: grayscale(0.7) opacity(0.5);
}

.in-ksys-step.is-active .in-ksys-sm {
  transform: scale(1.16);
}

.in-ksys-step.is-active::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 2px solid var(--in-blue-400);
  z-index: 0;
}

.in-ksys-step .in-ksys-sl {
  font-size: 10px;
  font-weight: 700;
  color: var(--in-ink-500);
  text-align: center;
  line-height: 1.15;
}

.in-ksys-step.is-active .in-ksys-sl {
  color: var(--in-navy-800);
}

/* ========================================
   KARRIERESYSTEM - TIPP & PLACEHOLDER
   ======================================== */

.in-ksys-tipp {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.in-ksys-tipp button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  max-width: 560px;
  background: linear-gradient(135deg, var(--in-navy-800), var(--in-blue-500));
  color: #fff;
  border: none;
  border-radius: 32px;
  padding: 14px 26px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: var(--in-shadow-md);
  transition: 0.18s;
  text-align: center;
  font-family: inherit;
}

.in-ksys-tipp button:hover {
  transform: translateY(-2px);
  box-shadow: var(--in-shadow-lg);
}

.in-ksys-tipp button svg {
  width: 20px;
  height: 20px;
  stroke: #ffe08a;
  fill: none;
  stroke-width: 1.9;
  flex-shrink: 0;
}

.in-ksys-ph {
  padding: 34px 22px;
  text-align: center;
  color: var(--in-ink-500);
  font-size: 14.5px;
  line-height: 1.55;
}

.in-ksys-ph svg {
  width: 34px;
  height: 34px;
  stroke: var(--in-blue-400);
  fill: none;
  stroke-width: 1.7;
  margin-bottom: 10px;
}

.in-ksys-ph b {
  color: var(--in-navy-800);
}

/* ========================================
   KARRIERESYSTEM - SLIDE STAGE
   ======================================== */

.in-ksys-stage {
  display: flex;
  align-items: center;
  gap: 12px;
}

.in-ksys-window {
  flex: 1;
  overflow: hidden;
  border-radius: 20px;
  touch-action: pan-y;
}

.in-ksys-track {
  display: flex;
}

.in-ksys-track.is-anim {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-ksys-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 2px;
}

.in-ksys-nav {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--in-line);
  background: #fff;
  color: var(--in-navy-800);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--in-shadow-sm);
  transition: 0.16s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.in-ksys-nav:hover:not(:disabled) {
  background: var(--in-navy-800);
  color: #fff;
  transform: scale(1.07);
}

.in-ksys-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ========================================
   KARRIERESYSTEM - LEVEL CARD
   ======================================== */

.in-ksys-card2 {
  background: #fff;
  border: 1px solid var(--in-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--in-shadow-md);
}

.in-ksys-head2 {
  position: relative;
  padding: 26px 160px 22px 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--in-navy-800), var(--in-navy-600));
  overflow: hidden;
}

@media (max-width: 640px) {
  .in-ksys-head2 {
    padding-right: 28px;
  }
}

.in-ksys-head2 .in-ksys-pat {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

.in-ksys-head2 > * {
  position: relative;
}

.in-ksys-hmedal {
  position: absolute;
  top: 18px;
  right: 24px;
  background: radial-gradient(circle at 35% 28%, #ffffff, #dce4f0 78%, #c3cede);
  border-radius: 50%;
  padding: 11px;
  line-height: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 -2px 5px rgba(19, 37, 72, 0.16),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

.in-ksys-tchip {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}

.in-ksys-head2 h3 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 12px 0 3px;
  /* base.css sets an explicit dark color on all h1-h6, which would beat the
     inherited #fff from .in-ksys-head2 - restate white for the navy head. */
  color: #fff;
}

.in-ksys-head2 .in-ksys-fk {
  font-size: 14.5px;
  color: #c9d8f2;
}

.in-ksys-body2 {
  padding: 22px 28px 26px;
}

.in-ksys-kpis {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.in-ksys-kpi {
  flex: 1 1 180px;
  background: var(--in-blue-50);
  border: 1px solid var(--in-blue-100);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.in-ksys-kpi .in-ksys-kic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.in-ksys-kpi .in-ksys-kic svg {
  width: 20px;
  height: 20px;
  stroke: var(--in-blue-500);
  fill: none;
  stroke-width: 1.9;
}

.in-ksys-kpi label {
  font-size: 12px;
  color: var(--in-ink-500);
  font-weight: 600;
  display: block;
  margin-bottom: 1px;
}

.in-ksys-kpi b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--in-navy-800);
}

.in-ksys-h5 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--in-blue-500);
  margin: 0 0 12px;
}

.in-ksys-goals {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.in-ksys-goals li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  color: var(--in-ink-700);
  line-height: 1.45;
}

.in-ksys-goals li svg {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  stroke: var(--in-green);
  fill: none;
  stroke-width: 2.2;
}

.in-ksys-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 30px;
  margin-bottom: 6px;
}

.in-ksys-cols .in-ksys-h5 {
  margin-top: 0;
}

@media (max-width: 760px) {
  .in-ksys-cols {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
}

.in-ksys-unlocks {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.in-ksys-unlocks li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  color: var(--in-ink-700);
  line-height: 1.45;
}

.in-ksys-unlocks li svg {
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  stroke: var(--in-amber);
  fill: none;
  stroke-width: 1.9;
}

.in-ksys-perk2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--in-navy-800);
  background: var(--in-amber-soft);
  border: 1px solid #f0dcb0;
  border-radius: 12px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.in-ksys-perk2 svg {
  width: 18px;
  height: 18px;
  stroke: var(--in-amber);
  fill: none;
  stroke-width: 1.9;
  flex-shrink: 0;
}

/* Addon card (Differenzprovision / Buero-Override) */
.in-ksys-addon {
  margin-top: 14px;
  border-radius: 14px;
  padding: 15px 17px;
  background: linear-gradient(135deg, #132548, #264a86);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--in-shadow-sm);
}

.in-ksys-addon .in-ksys-pat {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 18px 18px;
}

.in-ksys-addon > * {
  position: relative;
}

.in-ksys-addon-h {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 7px;
}

.in-ksys-addon-h .in-ksys-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: #f0d47a;
  color: #5a4310;
  padding: 3px 9px;
  border-radius: 20px;
}

.in-ksys-addon-h svg {
  width: 19px;
  height: 19px;
  stroke: #ffe08a;
  fill: none;
  stroke-width: 1.9;
}

.in-ksys-addon p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #dbe6f7;
  margin: 0;
}

.in-ksys-addon p b {
  color: #fff;
}

.in-ksys-addon .in-ksys-calc-lab {
  margin-top: 13px;
  font-size: 12px;
  font-weight: 700;
  color: #c9d8f2;
}

.in-ksys-addon .in-ksys-calc {
  margin-top: 9px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.in-ksys-addon .in-ksys-calc div {
  flex: 1 1 110px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
}

.in-ksys-addon .in-ksys-calc span {
  display: block;
  font-size: 11px;
  color: #9db4dd;
  font-weight: 600;
}

.in-ksys-addon .in-ksys-calc b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
  letter-spacing: -0.3px;
}

.in-ksys-addon .in-ksys-calc em {
  display: block;
  font-size: 10.5px;
  color: #9db4dd;
  font-style: normal;
  margin-top: 2px;
}

.in-ksys-count {
  text-align: center;
  font-size: 13px;
  color: var(--in-ink-500);
  margin-top: 18px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .in-ksys-hmedal {
    position: static;
    margin-bottom: 8px;
  }

  .in-ksys-head2 h3 {
    font-size: 24px;
  }

  .in-ksys-nav {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .in-ksys-step {
    min-width: 80px;
  }
}

/* ========================================
   FINANZ-LEVELSYSTEM (Fortschrittsbalken)
   ======================================== */

.in-ksys-lvlbar {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--in-blue-50);
  border-radius: 12px;
}

.in-ksys-lvlbar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.in-ksys-lvlbar-track {
  height: 8px;
  background: var(--in-line);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}

.in-ksys-lvlbar-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--in-blue-500), var(--in-blue-400));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-ksys-lvlbar.is-done .in-ksys-lvlbar-track > span {
  background: var(--in-green, #16a34a);
}

.in-ksys-lvlbar-sub {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--in-ink-500);
}

/* ========================================
   LEUCHTENDER STUFEN-STRAHL (Karrieresystem)
   ======================================== */

/* Verbindungslinie bis zur aktuell erreichten Stufe leuchtet */
.in-ksys-step.is-done::before,
.in-ksys-step.is-current::before {
  background: linear-gradient(90deg, var(--in-blue-400), var(--in-blue-500));
  box-shadow: 0 0 9px rgba(59, 111, 212, 0.55), 0 0 2px rgba(59, 111, 212, 0.9);
}

/* Die erreichte Stufe selbst: sanft pulsierender Glow um das Emblem */
.in-ksys-step.is-current .in-ksys-sm {
  filter: drop-shadow(0 0 7px rgba(59, 111, 212, 0.85));
  animation: inKsysGlow 2.4s ease-in-out infinite;
}

.in-ksys-step.is-current .in-ksys-sl {
  color: var(--in-blue-500);
  font-weight: 800;
}

@keyframes inKsysGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(59, 111, 212, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 11px rgba(59, 111, 212, 0.95));
  }
}

@media (prefers-reduced-motion: reduce) {
  .in-ksys-step.is-current .in-ksys-sm {
    animation: none;
  }
}

/* ========================================
   BUERO-STERNE ALS ORBIT (Endstufe)
   ======================================== */

/* Ueberschreibt das alte Zeilen-Layout: Sterne kreisen gleichmaessig
   verteilt und zentriert um das Direktoren-Emblem. */
.in-kar-buero-stars {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
  pointer-events: none;
  animation: inKarOrbit 16s linear infinite;
}

.in-kar-orbit-star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  transform: rotate(var(--a)) translateY(calc(var(--orbit-r, 48px) * -1));
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(16, 39, 76, 0.35));
}

/* Umlaufbahn-Radius je Kontext (Emblemgroesse + Rand) */
.in-kar-hero-medal {
  position: relative;
  --orbit-r: 48px;
}

.in-ksys-hmedal {
  --orbit-r: 62px;
}

@keyframes inKarOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .in-kar-buero-stars {
    animation: none;
  }
}

/* Stufenleiste laedt beim Seitenaufruf stufenweise auf (1/7-Schritte) */
.in-kar-track > span {
  transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   FEINSCHLIFF
   ======================================== */

/* Embleme pixelgenau zentriert: Blockdarstellung nimmt den Baseline-Versatz
   von Inline-SVG/IMG aus den fixen Containern. Nur direkte Kinder, damit die
   Orbit-Sterne unberuehrt bleiben. Groesse/Zuordnung bleiben unveraendert. */
.in-kar-lvl-badge.in-kar-med > svg,
.in-kar-lvl-badge.in-kar-med > img,
.in-kar-hero-medal > svg,
.in-kar-hero-medal > img,
.in-ksys-hmedal > svg,
.in-ksys-hmedal > img,
.in-ksys-sm > svg,
.in-ksys-sm > img {
  display: block;
  margin: auto;
}

/* Aktive Stufe in der Leiter: klarer linker Akzent zusaetzlich zum Verlauf. */
.in-kar-lvl-row.is-current {
  box-shadow: inset 3px 0 0 var(--in-blue-500);
}

/* Zahlen und Betraege laufen tabellarisch, nichts springt beim Zaehlen. */
.in-kar-lvl,
.in-kar-lvl-main .in-kar-sub,
.in-kar-lvl-status,
.in-ksys-kpi b,
.in-ksys-addon .in-ksys-calc b,
.in-ksys-lvlbar-head,
.in-ksys-count {
  font-variant-numeric: tabular-nums;
}

/* Tastatur-Fokus auf den Stufen-Buttons und dem Aufklapp-Kopf. */
.in-ksys-step:focus-visible {
  outline: 2px solid var(--in-blue-500);
  outline-offset: 3px;
  border-radius: 10px;
}

.in-kar-fold-head:focus-visible {
  outline: 2px solid var(--in-blue-500);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .in-kar-fold,
  .in-kar-fold-chev,
  .in-ksys-track.is-anim,
  .in-kar-lvl-main .in-kar-mini > span,
  .in-ksys-lvlbar-track > span,
  .in-kar-track > span {
    transition: none;
  }
}

/* ==========================================================================
   MARKETING-UNTERREITER
   Werbemittel, die der Partner direkt bestellen kann.
   ========================================================================== */

.in-kar-mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.in-kar-mkt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 20px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.in-kar-mkt-card:hover {
  border-color: color-mix(in srgb, var(--in-blue-500) 35%, var(--in-line));
  box-shadow: 0 8px 22px rgba(13, 26, 56, 0.09);
  transform: translateY(-1px);
}

/* Kopfzeile: Symbolkachel und fette Überschrift auf einer Linie. */
.in-kar-mkt-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.in-kar-mkt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--in-navy-800), #26417d);
  color: #fff;
}

.in-kar-mkt-icon svg {
  width: 22px;
  height: 22px;
}

.in-kar-mkt-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: var(--in-navy-800);
}

.in-kar-mkt-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--in-ink-500);
}

.in-kar-mkt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.in-kar-mkt-meta span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--in-ink-500);
  background: var(--in-blue-50, #f2f7fd);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Fehlen Profildaten, faellt das schon auf der Kachel auf. */
.in-kar-mkt-meta span.is-warn {
  background: color-mix(in srgb, var(--in-amber) 18%, transparent);
  color: #8a6206;
}

.in-kar-mkt-card.is-incomplete {
  border-color: color-mix(in srgb, var(--in-amber) 45%, var(--in-line));
}

.in-kar-mkt-card.is-incomplete .in-kar-mkt-icon {
  background: linear-gradient(135deg, #a9791a, var(--in-gold, #c9a24b));
}

.in-kar-mkt-btn {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.in-kar-mkt-btn svg {
  width: 15px;
  height: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .in-kar-mkt-card,
  .in-kar-mkt-card:hover {
    transition: none;
    transform: none;
  }
}

/* Fester Empfaenger im Versand-Dialog: sichtbar, aber nicht aenderbar. */
.in-invite-input--locked {
  background: var(--in-line-soft, #f2f4f8);
  color: var(--in-ink-500);
  cursor: not-allowed;
}

/* ============================================================
   URKUNDEN-DIALOG (Beförderungsurkunde)
   Nutzt das Dialog-Grundgerüst aus intranet.css; hier nur die
   Prüfliste und der Übersteuerungs-Bereich.
   ============================================================ */

.in-urk-pruefung {
  margin-top: 4px;
}

.in-urk-hinweis {
  font-size: 12.5px;
  line-height: 1.55;
  color: #8a6206;
  background: var(--in-amber-soft);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
}

.in-urk-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.in-urk-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--in-line);
  background: #fff;
}

.in-urk-marke {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.in-urk-eintrag.is-erfuellt {
  border-color: #bfe3d1;
  background: var(--in-green-soft);
}
.in-urk-eintrag.is-erfuellt .in-urk-marke {
  background: var(--in-green);
  color: #fff;
}

.in-urk-eintrag.is-nicht_erfuellt {
  border-color: #f0c4cb;
  background: #fdeef0;
}
.in-urk-eintrag.is-nicht_erfuellt .in-urk-marke {
  background: var(--in-red);
  color: #fff;
}

.in-urk-eintrag.is-nicht_pruefbar {
  border-color: var(--in-line);
  background: var(--in-bg);
}
.in-urk-eintrag.is-nicht_pruefbar .in-urk-marke {
  background: var(--in-ink-400);
  color: #fff;
}

.in-urk-inhalt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.in-urk-titel {
  font-size: 13px;
  font-weight: 600;
  color: var(--in-ink-900);
}

.in-urk-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--in-ink-500);
  font-variant-numeric: tabular-nums;
}

.in-urk-override {
  margin-top: 4px;
  border: 1px solid var(--in-amber);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--in-amber-soft);
}

.in-urk-override-titel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6206;
  margin-bottom: 4px;
}

.in-urk-override-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--in-ink-700);
  margin-bottom: 8px;
}

.in-urk-begruendung {
  min-height: 64px;
}

/* ==========================================================================
   BROSCHUERE ZUM DOWNLOAD (Unterreiter "Karrieresystem")
   Dunkles Dokumentenfeld im Stil der Hero-Karte: Navyverlauf, Punktraster,
   Goldkante. Es steht ueber dem Karrieresystem, weil es genau dessen Inhalt
   zum Mitnehmen ist.
   ========================================================================== */

.in-kar-dl {
  position: relative;
  display: flex;
  align-items: center;
  /* Umbruch schon dann, wenn dem Text weniger als 320px bleiben - sonst
     zerquetscht ein schmaler Inhaltsbereich die Zeilen, obwohl das Fenster
     noch breit genug fuer die Media Query waere. */
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 18px;
  padding: 22px 26px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--in-navy-800), var(--in-navy-600));
  box-shadow: var(--in-shadow-md);
}

/* Goldkante oben - dasselbe Signal wie auf dem Deckblatt des PDFs. */
.in-kar-dl::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--in-gold, #c9a24b), #f0d79a 50%, var(--in-gold, #c9a24b));
}

.in-kar-dl .in-kar-pat {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

.in-kar-dl > *:not(.in-kar-pat) {
  position: relative;
}

/* Angedeutetes Deckblatt: zwei versetzte Blaetter hinter der Titelseite. */
.in-kar-dl-cover {
  position: relative;
  flex: none;
  width: 74px;
  height: 96px;
}

.in-kar-dl-sheet,
.in-kar-dl-page {
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

.in-kar-dl-sheet {
  background: rgba(255, 255, 255, 0.16);
}

.in-kar-dl-sheet:first-child {
  transform: rotate(-7deg) translate(-5px, 3px);
}

.in-kar-dl-sheet:nth-child(2) {
  transform: rotate(-3deg) translate(-2px, 1px);
  background: rgba(255, 255, 255, 0.26);
}

.in-kar-dl-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 12px;
  background: linear-gradient(160deg, #1b3160, #0f1e40);
  border: 1px solid rgba(201, 162, 75, 0.55);
  box-shadow: 0 8px 18px rgba(6, 14, 32, 0.45);
}

.in-kar-dl-page img {
  display: block;
}

/* Angedeutete Textzeilen unter dem Emblem. */
.in-kar-dl-page i {
  display: block;
  height: 2px;
  width: 70%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.in-kar-dl-page i:first-of-type {
  width: 84%;
  background: var(--in-gold, #c9a24b);
}

.in-kar-dl-page i:last-of-type {
  width: 52%;
}

.in-kar-dl-main {
  flex: 1 1 320px;
  min-width: 280px;
}

.in-kar-dl-eye {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #9db4dd;
}

.in-kar-dl-main h3 {
  margin: 6px 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}

.in-kar-dl-main p {
  margin: 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: #dbe6f7;
}

.in-kar-dl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.in-kar-dl-meta span {
  font-size: 11.5px;
  font-weight: 600;
  color: #cfdcf2;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 3px 10px;
}

.in-kar-dl-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--in-navy-900, #0d1a38);
  background: linear-gradient(135deg, #e6c880, var(--in-gold, #c9a24b));
  box-shadow: 0 6px 16px rgba(9, 18, 38, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.in-kar-dl-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.in-kar-dl-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(9, 18, 38, 0.42);
}

.in-kar-dl-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.in-kar-dl-btn:disabled {
  cursor: progress;
  filter: grayscale(0.35) brightness(0.95);
  transform: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  .in-kar-dl {
    flex-wrap: wrap;
    gap: 18px;
  }

  .in-kar-dl-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .in-kar-dl {
    padding: 20px;
  }

  .in-kar-dl-cover {
    display: none;
  }

  .in-kar-dl-main h3 {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .in-kar-dl-btn,
  .in-kar-dl-btn:hover {
    transition: none;
    transform: none;
  }
}

/* ========================================
   SONDERSTUFE GESCHÄFTSFÜHRUNG
   ======================================== */

/* Der Hinweis traegt das Emblem der Sonderstufe: Es steht links neben dem
   Text und leuchtet im Takt der Wortmarke oben links. */
.in-gf-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* ---------------------------------------------------------------------------
   Kennzeichnung der Sonderstufe im Reiter "Karrieresystem".

   Bewusst NICHT im Stil der Stufenkarten darunter, sondern deutlich
   abgesetzt: dunkles Feld, Goldkante, eigene Marke. Die Aussage ist ja
   gerade, dass die Leiter darunter hier nicht gilt - ein Kaestchen im
   gleichen Ton haette sie als achte Stufe gelesen.
   --------------------------------------------------------------------------- */

.in-ksys-sonder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  margin-bottom: 22px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #0a1830 0%, #14294f 55%, #0d1f3d 100%);
  border: 1px solid rgba(201, 162, 75, 0.55);
  box-shadow: 0 6px 20px rgba(10, 24, 48, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* Goldader am linken Rand - dieselbe Farbe wie das Emblem, damit die Karte
   als zusammengehoerig liest. */
.in-ksys-sonder::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ffe793, #c9a24b 55%, #7a5605);
}

.in-ksys-sonder-emblem {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
}

.in-ksys-sonder-text {
  flex: 1;
  min-width: 0;
}

.in-ksys-sonder-eye {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #c9a24b;
}

.in-ksys-sonder h3 {
  margin: 5px 0 7px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}

.in-ksys-sonder p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #c8d6ef;
}

.in-ksys-sonder p b {
  color: #fff;
}

.in-ksys-sonder-marke {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #2b2008;
  background: linear-gradient(135deg, #e8c66a, #c9a24b);
}

@media (max-width: 640px) {
  .in-ksys-sonder {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px;
  }

  .in-ksys-sonder-marke {
    order: -1;
  }
}

/* Emblem der Sonderstufe "Angestellter": ruhig, ohne Leuchten. Das Gluehen
   ist der Geschaeftsfuehrung vorbehalten. */
.in-kar-sonder-emblem {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}

.in-gf-emblem {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  animation: in-gf-emblem-schein 7.2s cubic-bezier(0.37, 0, 0.28, 1) infinite;
}

/* Nur Gluehen, kein Blitz: Der Einschlag gehoert ins Feld (in-gf-sturm),
   nicht auf das Emblem selbst - dort las er sich als Bildfehler. Der Zyklus
   bleibt bei 7,2 s, dem Takt der Wortmarke (siehe CLAUDE.md). */
@keyframes in-gf-emblem-schein {
  0% {
    filter: drop-shadow(0 0 1px rgba(201, 162, 75, 0.25));
  }
  22% {
    filter: drop-shadow(0 0 7px rgba(201, 162, 75, 0.8))
      drop-shadow(0 0 16px rgba(201, 162, 75, 0.35));
  }
  38% {
    filter: drop-shadow(0 0 4px rgba(201, 162, 75, 0.45));
  }
  56%,
  100% {
    filter: drop-shadow(0 0 1px rgba(201, 162, 75, 0.25));
  }
}

/* ---------------------------------------------------------------------------
   Gewitter ueber dem Hero-Feld der Sonderstufe Geschaeftsfuehrung.

   Greift NUR unter .in-gf-sturm bzw. .in-kar-hero--gf, und beides setzt
   CareerScreen ausschliesslich im GF-Hero - alle anderen Stufen behalten das
   ruhige Feld.

   Zwei Takte, absichtlich verschieden:
     - 7,2 s fuer Emblem und Feldschein (der Takt aus CLAUDE.md),
     - 5,54 s fuer die Blitze. Das sind 7,2 / 1,3, also 30 % mehr Einschlaege
       je Minute. Dass beide auseinanderlaufen, ist erwuenscht: Ein Gewitter,
       das im Metronom schlaegt, sieht aus wie ein Blinklicht.
   --------------------------------------------------------------------------- */

/* Verdunkeltes Feld: Der Blitz braucht die Nacht, sonst wirkt er wie ein
   Reflex. Deshalb hier ein deutlich tieferes Blau als im normalen Hero. */
.in-kar-hero--gf {
  background: linear-gradient(135deg, #050c1c 0%, #0b1c38 52%, #071228 100%);
}

.in-kar-hero--gf .in-kar-pat {
  opacity: 0.22;
}

/* isolation + z-index halten die Blitze IM Sturm: Ohne eigenen Stapelkontext
   wirkt das z-index der Blitze gegen die Geschwister im Hero, und sie legen
   sich ueber Ueberschrift und Leiste. Das Gewitter gehoert hinter die
   Schrift, nicht davor. */
.in-gf-sturm {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* Im Hero setzt `.in-kar-hero > *` alle Kinder auf position: relative. Die
   Regel darueber hat dieselbe Spezifitaet und stuende sonst im Wettlauf um
   die Reihenfolge - deshalb hier noch einmal ausdruecklich. */
.in-kar-hero .in-gf-sturm {
  position: absolute;
}

/* Der Schein, den der Schlag ins Feld wirft.

   Als eigenes Element statt Pseudo-Element, und je Gewitter gleich MEHRERE:
   CareerScreen setzt zwei bis drei Scheine mit verschiedenem Ursprung,
   verschiedener Staerke, verschiedenem Verlaufsmuster und eigenem Takt.
   Vorher war es ein einziger, immer gleich hell, immer aus derselben Ecke -
   und genau das verriet ihn als Effekt. Ein Gewitter leuchtet mal nah und
   hart, mal fern und schwach, und nie zweimal aus derselben Richtung.

   Ganz unten (z-index 0): Der Schein ist das Licht HINTER den Blitzen;
   darueber wuerde er sie auswaschen.
   Hintergrund und --staerke kommen inline aus gfSchein(). */
.in-gf-schein {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* NAH: harter Doppelschlag mit senkrechten Flanken - der Blitz, der ins
   eigene Feld einschlaegt. */
@keyframes in-gf-schein-nah {
  0%,
  16.6% {
    opacity: 0;
  }
  17%,
  17.9% {
    opacity: calc(var(--staerke) * 0.05);
  }
  18%,
  18.7% {
    opacity: var(--staerke);
  }
  18.8%,
  19.9% {
    opacity: calc(var(--staerke) * 0.08);
  }
  20%,
  20.6% {
    opacity: calc(var(--staerke) * 0.9);
  }
  20.7% {
    opacity: calc(var(--staerke) * 0.14);
  }
  27% {
    opacity: calc(var(--staerke) * 0.04);
  }
  33%,
  100% {
    opacity: 0;
  }
}

/* FERN: ein einzelnes, weiches Aufglimmen ohne harte Kante. So sieht ein
   Blitz aus, der hinter dem Horizont niedergeht - er blendet nicht, er
   faerbt nur kurz den Himmel. */
@keyframes in-gf-schein-fern {
  0%,
  40% {
    opacity: 0;
  }
  43% {
    opacity: calc(var(--staerke) * 0.55);
  }
  46% {
    opacity: calc(var(--staerke) * 0.3);
  }
  52% {
    opacity: calc(var(--staerke) * 0.4);
  }
  64% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* FLACKERN: drei kurze Stiche dicht hintereinander - die Mehrfachentladung
   entlang desselben Kanals. */
@keyframes in-gf-schein-flackern {
  0%,
  61% {
    opacity: 0;
  }
  61.5%,
  62% {
    opacity: calc(var(--staerke) * 0.85);
  }
  62.3%,
  63% {
    opacity: calc(var(--staerke) * 0.05);
  }
  63.3%,
  63.7% {
    opacity: var(--staerke);
  }
  64%,
  64.8% {
    opacity: calc(var(--staerke) * 0.06);
  }
  65.1%,
  65.4% {
    opacity: calc(var(--staerke) * 0.6);
  }
  65.8%,
  100% {
    opacity: 0;
  }
}

/* Die Blitze. Eigenes SVG je Blitz statt eines gemeinsamen: So bleibt die
   Form erhalten - ein gestrecktes Gemeinschafts-SVG zoege sie in die Breite.
   Lage, Neigung, Laenge, Takt und Versatz kommen als Inline-Angaben aus
   CareerScreen (gfBlitz()) und sind bei jedem Aufbau neu gewuerfelt; hier
   steht nur, was allen Blitzen gemeinsam ist. */
.in-gf-blitz {
  position: absolute;
  z-index: 2;
  width: auto;
  opacity: 0;
  transform-origin: top center;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1))
    drop-shadow(0 0 10px rgba(198, 220, 255, 0.95))
    drop-shadow(0 0 26px rgba(90, 150, 255, 0.85));
  animation-name: in-gf-blitz;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Verjuengung: Derselbe Kanal liegt dreimal uebereinander - voll, obere zwei
   Drittel, oberes Drittel. Weil die Strichstaerke nach unten abnimmt, laeuft
   der Blitz spitz aus. Ein einzelner Strich waere ueber die ganze Laenge
   gleich dick, und daran scheitern gezeichnete Blitze immer. */
.in-gf-blitz .in-gf-kanal {
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.in-gf-blitz .in-gf-kanal--mitte {
  stroke-width: 2.9;
}

.in-gf-blitz .in-gf-kanal--kopf {
  stroke-width: 4.1;
}

.in-gf-blitz .in-gf-ast {
  stroke: rgba(226, 238, 255, 0.92);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Drei Schlaege mit senkrechten Flanken: Ein Blitz kennt kein Ein- und
   Ausblenden - er ist da oder nicht. */
@keyframes in-gf-blitz {
  0%,
  21.4% {
    opacity: 0;
  }
  21.5% {
    opacity: 1;
  }
  22.2% {
    opacity: 1;
  }
  22.3% {
    opacity: 0.06;
  }
  23.3% {
    opacity: 0.06;
  }
  23.4% {
    opacity: 0.95;
  }
  23.9% {
    opacity: 0.95;
  }
  24% {
    opacity: 0.04;
  }
  24.9% {
    opacity: 0.04;
  }
  25% {
    opacity: 0.7;
  }
  25.4% {
    opacity: 0.7;
  }
  25.5%,
  100% {
    opacity: 0;
  }
}

/* Antragsknopf unter der Stufenleiste: rechts, damit er die Leiste nicht
   optisch anschiebt. */
.in-kar-antrag {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.in-kar-antrag:empty {
  display: none;
}

.in-kar-antrag-btn {
  background: linear-gradient(135deg, #e8c66a 0%, #c9a24b 100%);
  color: #2b2008;
  border: 1px solid rgba(122, 86, 5, 0.35);
  font-weight: 700;
}

.in-kar-antrag-btn:hover {
  filter: brightness(1.06);
}

/* ---------------------------------------------------------------------------
   SONDERSTUFE MUTTERGESELLSCHAFT - dunkle Materie statt Gewitter.

   Greift nur unter .in-mu-sturm / .in-kar-hero--mutter, und beides setzt
   CareerScreen ausschliesslich im Hero der Muttergesellschaft.

   Der Unterschied zur Geschaeftsfuehrung ist Absicht und soll sichtbar sein:
   Dort schlaegt ein Gewitter ins Feld, hier zieht Materie durch, die Licht
   schluckt statt es zu werfen. Es sind drei kleine Entladungen statt sieben
   grosser - die hoehere Stufe ist die ruhigere.
   --------------------------------------------------------------------------- */

/* Noch tiefer als das GF-Feld, mit einem Stich ins Violette: die Farbe der
   dunklen Materie, nicht die der Nacht. */
.in-kar-hero--mutter {
  background: linear-gradient(135deg, #03060f 0%, #0a1430 48%, #120a26 100%);
}

.in-kar-hero--mutter .in-kar-pat {
  opacity: 0.14;
}

/* Die Blitze der Muttergesellschaft sind kleiner und blasser - sie sollen
   wetterleuchten, nicht einschlagen. */
.in-mu-sturm .in-gf-blitz {
  opacity: 0.72;
}

/* Das Volumen aus materieFeld.js. Es liegt ueber den CSS-Schwaden und unter
   den Blitzen - dieselbe Ebene, die die Schwaden bisher allein hielten.

   Die Schwaden bleiben darunter stehen und werden nicht entfernt: Sie sind
   die Rueckfallebene, wenn WebGL fehlt oder der Kontext verloren geht. Wo
   das Volumen laeuft, treten sie hinter ihm zurueck - deshalb die gedaempfte
   Deckung. */
.in-mu-volumen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Dieselbe Ebene wie die Schwaden (1), nicht die der Blitze (2): Das
     Canvas wird ans Ende des Sturms gehaengt und laege bei gleichem Rang
     ueber den Entladungen - dann schluckt der Nebel das Wetterleuchten. */
  z-index: 1;
  pointer-events: none;
}

.in-mu-sturm:has(.in-mu-volumen) .in-mu-materie {
  opacity: 0;
  animation-name: in-mu-materie-zug-leise;
}

/* Wie in-mu-materie-zug, nur auf einem Viertel der Deckung: Unter dem
   Volumen sollen die Schwaden nur noch die Tiefe stuetzen, nicht mehr die
   Zeichnung tragen. */
@keyframes in-mu-materie-zug-leise {
  0% {
    opacity: 0;
    transform: translate3d(-6%, 3%, 0) rotate(0deg) scale(1);
  }
  28% {
    opacity: calc(var(--staerke, 1) * 0.22);
  }
  50% {
    transform: translate3d(5%, -4%, 0) rotate(180deg) scale(1.12);
  }
  72% {
    opacity: calc(var(--staerke, 1) * 0.15);
  }
  100% {
    opacity: 0;
    transform: translate3d(-6%, 3%, 0) rotate(360deg) scale(1);
  }
}

/* Eine Schwade dunkler Materie. Gegenstueck zum Feldschein: Sie liegt UEBER
   dem Schein (z-index 1) und unter den Blitzen, damit sie das Licht
   abdunkelt, aber die Entladungen nicht verschluckt.
   Hintergrund und --staerke kommen inline aus muMaterie(). */
.in-mu-materie {
  position: absolute;
  inset: -20%;
  z-index: 1;
  opacity: 0;
  /* Kein mix-blend-mode: Auf einem fast schwarzen Feld multipliziert sich
     Dunkles zu Unsichtbarem. Die Schwade deckt stattdessen normal ab - der
     Kern schluckt das Licht, der violette Saum macht sie sichtbar. */
  animation-name: in-mu-materie-zug;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-iteration-count: infinite;
}

/* Ein langsamer Zug quer durchs Feld, mit Drehung: Ohne die Drehung wandert
   ein radialer Verlauf sichtbar als Scheibe, mit ihr wabert er. */
@keyframes in-mu-materie-zug {
  0% {
    opacity: 0;
    transform: translate3d(-6%, 3%, 0) rotate(0deg) scale(1);
  }
  28% {
    opacity: calc(var(--staerke, 1) * 0.85);
  }
  50% {
    transform: translate3d(5%, -4%, 0) rotate(180deg) scale(1.12);
  }
  72% {
    opacity: calc(var(--staerke, 1) * 0.6);
  }
  100% {
    opacity: 0;
    transform: translate3d(-6%, 3%, 0) rotate(360deg) scale(1);
  }
}

/* Das Emblem glimmt kalt und langsam - der Gegentakt zum warmen Puls der
   Geschaeftsfuehrung (7,2 s). 11,4 s teilt mit keinem anderen Takt im Haus
   einen gemeinsamen Nenner, die beiden finden also nie zusammen. */
.in-mu-emblem {
  flex-shrink: 0;
  animation: in-mu-emblem-schein 11.4s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

@keyframes in-mu-emblem-schein {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(201, 162, 75, 0.3));
  }
  30% {
    filter: drop-shadow(0 0 10px rgba(233, 205, 128, 0.75))
      drop-shadow(0 0 26px rgba(120, 96, 200, 0.4));
  }
  60% {
    filter: drop-shadow(0 0 5px rgba(201, 162, 75, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .in-gf-emblem {
    animation: none;
    filter: drop-shadow(0 0 4px rgba(201, 162, 75, 0.45));
  }

  .in-mu-emblem {
    animation: none;
    filter: drop-shadow(0 0 6px rgba(201, 162, 75, 0.45));
  }

  /* Ein Gewitter ist genau das, was hier niemand sehen will: Das Feld bleibt
     ruhig, das Emblem behaelt seinen stillen Schein. Fuer die dunkle Materie
     gilt dasselbe - sie zieht, und Ziehen ist Bewegung. */
  .in-gf-sturm {
    display: none;
  }
}

/* Statuszeile der Stufenkarten im Karrieresystem, wenn ein Geschaeftsfuehrer
   sie liest: Statt "Deine aktuelle Stufe" / "Noch nicht erreicht" ein
   eigener Hinweis. Ohne ihn las sich die aufgeschlagene Karte - meist
   Assistenz, weil die Leiste bei Stufe 0 auf 1 hochklemmt - wie ihre
   Einstufung. Gesetzt wird er ausschliesslich fuer die Geschaeftsfuehrung
   selbst (CareerScreen#ksysStatus). */
.in-ksys-sonder-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #2b2008;
  background: linear-gradient(135deg, #f2dda1, #c9a24b);
  border: 1px solid rgba(122, 86, 5, 0.4);
  box-shadow: 0 2px 6px rgba(122, 86, 5, 0.22);
}

.in-ksys-sonder-chip img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Sonderstufe als achte Station im Karrieresystem.

   Sie steht HINTER Immobilien- bzw. Finanzdirektor und ist bewusst anders
   gekleidet als die sieben Stufen davor: Gold statt Blau, Gewitterkopf statt
   Verlauf. Die Aussage ist, dass sie ausserhalb der Leiter steht - im
   gleichen Kleid haette sie sich als achte Stufe gelesen.

   Gesetzt wird das alles nur fuer den eingeloggten Geschaeftsfuehrer
   (CareerScreen#ksysLevels).
   --------------------------------------------------------------------------- */

/* Die Verbindung zur Sonderstufe laeuft in Gold aus - der Uebergang von der
   Leiter in das, was ueber ihr steht. Blau bis zum Direktor, dann Gold. */
.in-ksys-step--sonder::before {
  background: linear-gradient(90deg, var(--in-blue-400), #c9a24b) !important;
  height: 4px;
  top: 15.5px;
  box-shadow: 0 0 8px rgba(201, 162, 75, 0.55);
}

/* Station in der Leiste */
.in-ksys-step--sonder .in-ksys-sm {
  background: radial-gradient(circle at 35% 28%, #fff8e4, #f0dca8 70%, #d9bd72);
  border-color: rgba(122, 86, 5, 0.5);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.28), 0 4px 12px rgba(122, 86, 5, 0.3);
}

.in-ksys-step--sonder .in-ksys-sm img {
  width: 30px;
  height: 30px;
}

.in-ksys-step--sonder .in-ksys-sl {
  color: #96701f;
  font-weight: 800;
}

.in-ksys-step--sonder.is-active .in-ksys-sm {
  box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.55), 0 6px 18px rgba(122, 86, 5, 0.42);
}

.in-ksys-step--sonder.is-active::after {
  border-color: #c9a24b;
  box-shadow: 0 0 12px rgba(201, 162, 75, 0.6);
}

/* Nie ausgegraut: Die Sonderstufe ist nicht "noch nicht erreicht". */
.in-ksys-step--sonder .in-ksys-sm,
.in-ksys-step--sonder.is-locked .in-ksys-sm {
  filter: none;
}

/* Karte */
.in-ksys-card2--sonder {
  border: 1px solid rgba(201, 162, 75, 0.6);
  box-shadow: 0 10px 30px rgba(10, 24, 48, 0.24), 0 0 0 1px rgba(201, 162, 75, 0.18);
}

/* Kopf mit Gewitter - dieselbe Nacht wie im Hero der Sonderstufe */
.in-ksys-head2--sonder {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #050c1c 0%, #0b1c38 52%, #071228 100%);
}

/* Die Blitze gehoeren hinter Ueberschrift und Emblem. Dafuer muessen die
   Geschwister positioniert sein - der Sturm ist es (absolute) und wuerde
   sonst darueber liegen.

   ACHTUNG: nicht pauschal auf alle Kinder anwenden. Das Medaillon sitzt
   bereits absolut oben rechts (.in-ksys-hmedal); ein `position: relative`
   darauf reisst es in den Textfluss, und es laeuft ueber die volle Breite
   zu einer Ellipse auseinander. Es bekommt deshalb nur das z-index. */
.in-ksys-head2--sonder > h3,
.in-ksys-head2--sonder > .in-ksys-fk,
.in-ksys-head2--sonder > .in-ksys-tchip,
.in-ksys-head2--sonder > div:not(.in-gf-sturm):not(.in-ksys-hmedal) {
  position: relative;
  z-index: 1;
}

.in-ksys-head2--sonder > .in-ksys-hmedal {
  z-index: 1;
}

.in-ksys-head2--sonder h3 {
  color: #fff;
}

.in-ksys-head2--sonder .in-ksys-fk {
  color: #c8d6ef;
}

.in-ksys-hmedal--sonder {
  background: radial-gradient(circle at 35% 28%, #fffdf6, #f2e3bd 74%, #dcc48f);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(122, 86, 5, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
}

.in-ksys-hmedal--sonder img {
  display: block;
  width: 92px;
  height: 92px;
}

.in-ksys-tchip--sonder {
  background: linear-gradient(135deg, #f2dda1, #c9a24b) !important;
  color: #2b2008 !important;
  border: 1px solid rgba(122, 86, 5, 0.4);
}

.in-ksys-perk2--sonder {
  background: linear-gradient(135deg, rgba(201, 162, 75, 0.14), rgba(201, 162, 75, 0.05));
  border: 1px solid rgba(201, 162, 75, 0.4);
  color: var(--in-ink-900);
}

/* ============================================================
   Umsatzhistorie — Unterreiter unter Karriere
   Liste von oben nach unten, nach Monat gruppiert. Bewusst keine
   Tabelle: Eine Tabelle laedt zum Rechnen ein, gerechnet wird an
   anderer Stelle. Hier geht es um "was ist passiert und wann".
   ============================================================ */

.in-uh-leer {
  padding: 34px 22px; text-align: center; font-size: 14px;
  color: var(--in-ink-500, #697389);
  background: #fff; border: 1px solid var(--in-line, #e5e9f0); border-radius: 12px;
}

.in-uh-kopf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 4px 0 20px;
}
.in-uh-kennzahl {
  background: #fff; border: 1px solid var(--in-line, #e5e9f0); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.in-uh-kennzahl b {
  font-size: 21px; color: var(--in-navy-800, #132548); line-height: 1.15;
}
.in-uh-kennzahl span { font-size: 12px; color: var(--in-ink-500, #697389); }

.in-uh-monat { margin-bottom: 18px; }
.in-uh-monat-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 2px 7px; border-bottom: 1px solid var(--in-line, #e5e9f0);
}
.in-uh-monat-kopf h3 {
  margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--in-blue-500, #3b6fd4);
}
.in-uh-monat-kopf span { font-size: 12.5px; color: var(--in-ink-500, #697389); }

.in-uh-liste { list-style: none; margin: 0; padding: 0; }
.in-uh-zeile {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px;
  align-items: baseline; padding: 11px 2px;
  border-bottom: 1px solid #f1f4f8;
}
.in-uh-zeile:last-child { border-bottom: 0; }

.in-uh-tag {
  font-size: 12px; color: var(--in-ink-500);
  font-variant-numeric: tabular-nums;
}
.in-uh-mitte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-uh-partner {
  font-size: 14px; font-weight: 600; color: var(--in-ink-900, #141b2b);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.in-uh-ebene {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--in-blue-50, #eef3fc); color: var(--in-blue-500, #3b6fd4);
}
.in-uh-was { font-size: 12.5px; color: var(--in-ink-500, #697389); }
.in-uh-kunde { font-size: 12px; color: var(--in-ink-500); }

.in-uh-zahlen { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.in-uh-anteil {
  font-size: 15px; font-weight: 700; color: var(--in-navy-800, #132548);
  font-variant-numeric: tabular-nums;
}
.in-uh-basis { font-size: 11.5px; color: var(--in-ink-500); }

@media (max-width: 560px) {
  .in-uh-zeile { grid-template-columns: 44px 1fr; }
  .in-uh-zahlen { grid-column: 2; text-align: left; margin-top: 4px; }
}

/* Stornierungen: negativer Betrag, gehoert in die Historie, damit die Summe
   mit der Abrechnung uebereinstimmt - aber deutlich als Rueckbuchung. */
.in-uh-zeile.ist-storno .in-uh-anteil { color: #d1495b; }
.in-uh-ebene--storno { background: #fdeef0; color: #a4364a; }